use virtual scroll layout on playlist page

+ fix playlist and album page header width

src/assets/scss/_variables.scss

@@ -13,7 +13,7 @@ $medium: 0.75rem;
 $large: 1.5rem;
 $larger: 2rem;
 
-$banner-height: 18rem;
+$banner-height: 23rem;
 
 // apple human design guideline colors
 $black: #181a1c;

src/components/AlbumView/Header.vue

@@ -104,7 +104,7 @@ useVisibility(albumheaderthing, handleVisibilityState);
   grid-template-columns: max-content 1fr;
   gap: 1rem;
   padding: 1rem;
-  height: 100% !important;
+  height: $banner-height;
   background-color: $black;
   overflow: hidden;
 

src/components/PlaylistView/Header.vue

@@ -67,7 +67,7 @@ function editPlaylist() {
 .p-header {
   display: grid;
   grid-template-columns: 1fr;
-  height: 100%;
+  height: $banner-height;
   position: relative;
   background-color: $gray5;
 

src/views/FolderView.vue

@@ -15,7 +15,6 @@ import useLoaderStore from "@/stores/loader";
 import useFolderStore from "@/stores/pages/folder";
 
 import Layout from "@/layouts/HeaderAndVList.vue";
-import SongList from "@/components/FolderView/SongList.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
 
 const loader = useLoaderStore();

src/views/album/Header.vue

@@ -1,12 +0,0 @@
-<template>
-    <Header :album="album" />
-</template>
-
-<script setup lang="ts">
-import Header from "@/components/AlbumView/Header.vue";
-import { AlbumInfo } from "@/interfaces";
-
-defineProps<{
-  album: AlbumInfo;
-}>();
-</script>

src/views/album/index.vue

@@ -5,7 +5,7 @@
     :on_album_page="true"
   >
     <template #header>
-      <Header :album="album.info" :bio="album.bio" />
+      <Header :album="album.info" />
     </template>
   </Layout>
 </template>
@@ -23,7 +23,7 @@ import useQueueStore from "@/stores/queue";
 import useAStore from "@/stores/pages/album";
 
 // @components
-import Header from "./Header.vue";
+import Header from "@/components/AlbumView/Header.vue";
 import Layout from "@/layouts/HeaderAndVList.vue";
 
 // @vars

src/views/playlist/Content.vue

@@ -1,47 +0,0 @@
-<template>
-  <div class="songlist rounded">
-    <div v-if="tracks.length">
-      <SongList
-        :tracks="tracks"
-        :pname="name"
-        :playlistid="playlistid"
-        @playFromPage="playFromPlaylistPage"
-      />
-    </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 useQueueStore from "@/stores/queue";
-import usePlaylistStore from "@/stores/pages/playlist";
-
-import SongList from "@/components/FolderView/SongList.vue";
-import { Track } from "@/interfaces";
-import { onUpdated } from "vue";
-
-const props = defineProps<{
-  tracks: Track[];
-  count: number;
-  name: string;
-  playlistid: string;
-}>();
-
-const queue = useQueueStore();
-const playlist = usePlaylistStore();
-
-function playFromPlaylistPage(index: number) {
-  const { name, playlistid } = playlist.info;
-  queue.playFromPlaylist(name, playlistid, playlist.allTracks);
-  queue.play(index);
-}
-</script>

src/views/playlist/index.vue

@@ -1,37 +1,32 @@
 <template>
-  <Page>
+  <Layout :tracks="playlist.tracks" @playFromPage="playFromPlaylistPage">
     <template #header>
-      <Header :info="playlist" />
+      <Header :info="playlist.info" />
     </template>
-    <template #content>
-      <Content
-        :tracks="tracks"
-        :count="playlist.count"
-        :name="playlist.name"
-        :playlistid="playlist.playlistid"
-      />
-    </template>
-  </Page>
+  </Layout>
 </template>
 
 <script setup lang="ts">
-import { storeToRefs } from "pinia";
-import Page from "@/layouts/HeaderContentBottom.vue";
-
-import Header from "@/components/PlaylistView/Header.vue";
-import Content from "./Content.vue";
-
-import usePlaylistStore from "@/stores/pages/playlist";
 import { onBeforeRouteLeave } from "vue-router";
 
-const store = usePlaylistStore();
-const { info: playlist, tracks } = storeToRefs(store);
+import useQueueStore from "@/stores/queue";
+import usePlaylistStore from "@/stores/pages/playlist";
+
+import Layout from "@/layouts/HeaderAndVList.vue";
+import Header from "@/components/PlaylistView/Header.vue";
+
+const queue = useQueueStore();
+const playlist = usePlaylistStore();
+
+function playFromPlaylistPage(index: number) {
+  const { name, playlistid } = playlist.info;
+  queue.playFromPlaylist(name, playlistid, playlist.allTracks);
+  queue.play(index);
+}
 
 onBeforeRouteLeave(() => {
   setTimeout(() => {
-    store.resetQuery();
+    playlist.resetQuery();
   }, 500);
 });
 </script>
-
-<style lang="scss"></style>