From f2aee70a8ab2609a50be13db9d93ac3e0d66e353 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Wed, 21 Sep 2022 15:19:36 +0300
Subject: [PATCH] use virtual scroll page on folder page

---
 src/views/FolderView.vue  | 39 ++++++++++-----------------------------
 src/views/album/index.vue |  6 +++++-
 2 files changed, 15 insertions(+), 30 deletions(-)

diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index b0867b9d..ada48c01 100644
--- a/src/views/FolderView.vue
+++ b/src/views/FolderView.vue
@@ -1,29 +1,22 @@
 <template>
-  <div id="f-view-parent">
-    <div id="scrollable" ref="scrollable">
+  <Layout :tracks="folder.tracks" @playFromPage="playFromPage">
+    <template #header>
       <FolderList :folders="folder.dirs" v-if="folder.dirs.length" />
-      <SongList
-        :tracks="folder.tracks"
-        :path="folder.path"
-        @playFromPage="playFromPage"
-      />
-    </div>
-  </div>
+    </template>
+  </Layout>
 </template>
 
 <script setup lang="ts">
 import { ref } from "@vue/reactivity";
-import {
-  onBeforeRouteLeave,
-  onBeforeRouteUpdate,
-} from "vue-router";
+import { onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router";
 
-import SongList from "@/components/FolderView/SongList.vue";
-import FolderList from "@/components/FolderView/FolderList.vue";
-
-import useFolderStore from "@/stores/pages/folder";
 import useQueueStore from "@/stores/queue";
 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();
 const folder = useFolderStore();
@@ -54,15 +47,3 @@ onBeforeRouteLeave(() => {
   setTimeout(() => folder.resetQuery(), 500);
 });
 </script>
-
-<style lang="scss">
-#f-view-parent {
-  position: relative;
-  overflow: hidden;
-}
-
-#scrollable {
-  display: grid;
-  gap: 1rem;
-}
-</style>
diff --git a/src/views/album/index.vue b/src/views/album/index.vue
index 0ba0d5ac..45acaf73 100644
--- a/src/views/album/index.vue
+++ b/src/views/album/index.vue
@@ -1,5 +1,9 @@
 <template>
-  <Layout :tracks="album.tracks" @playFromPage="playFromAlbum">
+  <Layout
+    :tracks="album.tracks"
+    @playFromPage="playFromAlbum"
+    :on_album_page="true"
+  >
     <template #header>
       <Header :album="album.info" :bio="album.bio" />
     </template>