rewrite playlist page to use same layout as the album page

src/components/AlbumView/Header.vue

@@ -1,45 +1,44 @@
 <template>
-  <div class="album-h" ref="albumheaderthing">
+  <div
-    <div
+    class="a-header rounded"
-      class="a-header rounded"
+    ref="albumheaderthing"
-      :style="{
+    :style="{
-        backgroundImage: `linear-gradient(
+      backgroundImage: `linear-gradient(
         37deg, ${props.album.colors[0]}, ${props.album.colors[3]}
       )`,
-      }"
+    }"
-    >
+  >
-      <div class="art">
+    <div class="art">
-        <img
+      <img
-          :src="imguri + album.image"
+        :src="imguri + album.image"
-          alt=""
+        alt=""
-          v-motion-slide-from-left
+        v-motion-slide-from-left
-          class="rounded shadow-lg"
+        class="rounded shadow-lg"
-        />
+      />
+    </div>
+    <div class="info" :class="{ nocontrast: isLight() }">
+      <div class="top" v-motion-slide-from-top>
+        <div class="h">
+          <span v-if="album.is_soundtrack">Soundtrack</span>
+          <span v-else-if="album.is_compilation">Compilation</span>
+          <span v-else-if="album.is_single">Single</span>
+          <span v-else>Album</span>
+        </div>
+        <div class="title ellip">
+          {{ album.title }}
+        </div>
       </div>
-      <div class="info" :class="{ nocontrast: isLight() }">
+      <div class="bottom">
-        <div class="top" v-motion-slide-from-top>
+        <div class="stats">
-          <div class="h">
+          {{ album.count }} Tracks • {{ formatSeconds(album.duration, true) }} •
-            <span v-if="album.is_soundtrack">Soundtrack</span>
+          {{ album.date }} •
-            <span v-else-if="album.is_compilation">Compilation</span>
+          {{ album.artist }}
-            <span v-else-if="album.is_single">Single</span>
-            <span v-else>Album</span>
-          </div>
-          <div class="title ellip">
-            {{ album.title }}
-          </div>
-        </div>
-        <div class="bottom">
-          <div class="stats">
-            {{ album.count }} Tracks •
-            {{ formatSeconds(album.duration, true) }} • {{ album.date }} •
-            {{ album.artist }}
-          </div>
-          <PlayBtnRect
-            :source="playSources.album"
-            :store="useAlbumStore"
-            :background="getButtonColor()"
-          />
         </div>
+        <PlayBtnRect
+          :source="playSources.album"
+          :store="useAlbumStore"
+          :background="getButtonColor()"
+        />
       </div>
     </div>
   </div>
@@ -181,20 +180,18 @@ function theyContrast(color1: string, color2: string) {
   grid-template-columns: max-content 1fr;
   gap: 1rem;
   padding: 1rem;
-  height: 100%;
+  height: 100% !important;
   background-color: $black;
   background-image: linear-gradient(37deg, $black 20%, $gray, $black 90%);
 
   .art {
-    width: 100%;
-    height: 100%;
-    left: 1rem;
     display: flex;
     align-items: flex-end;
 
     img {
-      width: 15rem;
+      height: 16rem;
-      height: 15rem;
+      aspect-ratio: 1;
+      object-fit: cover;
       transition: all 0.2s ease-in-out;
     }
   }

src/components/PlaylistView/Header.vue

@@ -86,7 +86,7 @@ function showDropdown(e: any) {
 .p-header {
   display: grid;
   grid-template-columns: 1fr;
-  height: 17rem;
+  height: 100%;
   position: relative;
   border-radius: 0.75rem;
   color: $white;

src/router/index.js

@@ -9,7 +9,7 @@ import ArtistsExplorer from "@/views/ArtistsExplorer.vue";
 import FolderView from "@/views/FolderView.vue";
 import Home from "@/views/Home.vue";
 import Playlists from "@/views/Playlists.vue";
-import PlaylistView from "@/views/PlaylistView.vue";
+import PlaylistView from "@/views/playlist/index.vue";
 import SettingsView from "@/views/SettingsView.vue";
 import { createRouter, createWebHashHistory } from "vue-router";
 

src/views/PlaylistView.vue

@@ -1,51 +0,0 @@
-<template>
-  <div class="playlist-view">
-    <Header :info="playlist.info" />
-    <div class="separator no-border"></div>
-
-    <div class="songlist rounded">
-      <div v-if="playlist.tracks.length">
-        <SongList
-          :tracks="playlist.tracks"
-          :pname="playlist.info.name"
-          :playlistid="playlist.info.playlistid"
-        />
-      </div>
-      <div v-else-if="playlist.tracks.length === 0 && playlist.info.count > 0">
-        <div class="no-results">
-          <div class="text">We can't find your music 🦋</div>
-        </div>
-      </div>
-      <div v-else-if="playlist.tracks.length === 0 && playlist.info.count == 0">
-        <div class="no-results">
-          <div class="text">Nothing here</div>
-        </div>
-      </div>
-    </div>
-    <div class="separator no-border"></div>
-    <FeaturedArtists />
-  </div>
-</template>
-
-<script setup lang="ts">
-import Header from "@/components/PlaylistView/Header.vue";
-import SongList from "@/components/FolderView/SongList.vue";
-import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue";
-import usePTrackStore from "@/stores/pages/playlist";
-
-const playlist = usePTrackStore();
-</script>
-
-<style lang="scss">
-.playlist-view {
-  height: 100%;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  .songlist {
-    min-height: calc(100% - 32rem);
-  }
-}
-</style>

src/views/album/Header.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
     <Header :album="album" />
-  </div>
 </template>
 
 <script setup lang="ts">

src/views/layouts/HeaderContentBottom.vue

@@ -151,6 +151,7 @@ function toggleBottom() {
   overflow: auto;
   display: grid;
   grid-template-rows: 18rem 1fr;
+  gap: 1rem;
 
   .ap-page-content {
     padding-bottom: 17rem;

src/views/playlist/Content.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="songlist rounded">
+    <div v-if="tracks.length">
+      <SongList :tracks="tracks" :pname="name" :playlistid="playlistid" />
+    </div>
+    <div v-else-if="tracks.length === 0 && count > 0">
+      <div class="no-results">
+        <div class="text">We can't find your music 🦋</div>
+      </div>
+    </div>
+    <div v-else-if="tracks.length === 0 && count == 0">
+      <div class="no-results">
+        <div class="text">Nothing here</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SongList from "@/components/FolderView/SongList.vue";
+import { Track } from "@/interfaces";
+
+defineProps<{
+  tracks: Track[];
+  count: number;
+  name: string;
+  playlistid: string;
+}>();
+</script>

src/views/playlist/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <Page>
+    <template #header>
+      <Header :info="playlist.info" />
+    </template>
+    <template #content>
+      <Content
+        :tracks="playlist.tracks"
+        :count="playlist.info.count"
+        :name="playlist.info.name"
+        :playlistid="playlist.info.playlistid"
+      />
+    </template>
+    <template #bottom>
+      <FeaturedArtists :artists="[]" />
+    </template>
+  </Page>
+</template>
+
+<script setup lang="ts">
+import Page from "../layouts/HeaderContentBottom.vue";
+
+import Header from "@/components/PlaylistView/Header.vue";
+import Content from "./Content.vue";
+import FeaturedArtists from "@/components/PlaylistView/FeaturedArtists.vue";
+
+import usePTrackStore from "@/stores/pages/playlist";
+
+const playlist = usePTrackStore();
+</script>
+
+<style lang="scss"></style>