add bottom padding to v-scroll-page class instead of individual pages

+ Rewrite queue page with  @Akryum/vue-virtual-scroller

src/views/QueueView.vue

@@ -1,29 +1,60 @@
 <template>
-  <div class="queue-view" style="height: 100%">
-    <Layout
-      :tracks="queue.tracklist"
-      :no_header="true"
-      @playFromPage="playFromQueue"
+  <div
+    class="queue-view-virtual-scroller v-scroll-page"
+    :class="{ isSmall, isMedium }"
+    style="height: 100%"
+  >
+    <RecycleScroller
+      class="scroller"
+      id="queue-page-scrollable"
+      style="height: 100%"
+      :items="scrollerItems"
+      :item-size="itemHeight"
+      key-field="id"
+      v-slot="{ item, index }"
     >
-    </Layout>
+      <SongItem
+        :track="item.track"
+        :index="index + 1"
+        :isCurrent="queue.currenttrack?.hash === item.track.hash"
+        :isCurrentPlaying="
+          queue.currenttrack?.hash === item.track.hash && queue.playing
+        "
+        @playThis="playFromQueue(index)"
+      />
+    </RecycleScroller>
   </div>
 </template>
 
 <script setup lang="ts">
-import useQStore from "@/stores/queue";
-import Layout from "@/layouts/HeaderAndVList.vue";
-import { onBeforeMount, onMounted } from "vue";
+import { computed, onMounted } from "vue";
 
+import useQStore from "@/stores/queue";
+import { createTrackProps } from "@/utils";
+import SongItem from "@/components/shared/SongItem.vue";
+import { isSmall, isMedium } from "@/stores/content-width";
+
+const itemHeight = 64;
 const queue = useQStore();
 
+const scrollerItems = computed(() => {
+  return queue.tracklist.map((track) => {
+    return {
+      track,
+      id: Math.random(),
+      props: createTrackProps(track),
+    };
+  });
+});
+
 function playFromQueue(index: number) {
   queue.play(index);
 }
 
 function scrollToCurrent() {
-  const scrollable = document.getElementById("v-page-scrollable");
+  const scrollable = document.getElementById("queue-page-scrollable");
   const itemHeight = 64;
-  const top = queue.currentindex * itemHeight - 290;
+  const top = queue.currentindex * itemHeight - itemHeight;
 
   scrollable?.scrollTo({
     top,
@@ -31,9 +62,17 @@ function scrollToCurrent() {
   });
 }
 
-onBeforeMount(() => {
+onMounted(() => {
   setTimeout(() => {
     scrollToCurrent();
   }, 1000);
 });
 </script>
+
+<style lang="scss">
+.queue-view-virtual-scroller {
+  .songlist-item.current {
+    background-color: $darkestblue !important;
+  }
+}
+</style>