feat: use @vueuse/useVirtualList on sidebar queue

src/components/RightSideBar/Queue.vue

@@ -2,18 +2,20 @@
   <QueueActions />
   <div
     class="scrollable-r"
+    v-bind="containerProps"
+    style="height: 100%"
     @mouseover="mouseover = true"
     @mouseout="mouseover = false"
   >
-    <div class="inner">
+    <div class="inner" v-bind="wrapperProps">
       <TrackItem
-        v-for="(t, index) in queue.tracklist"
+        style="height: 64px"
-        :key="index"
+        v-for="(t, index) in tracks"
-        :track="t"
+        :key="t.index"
+        :track="t.data"
         :index="index"
         :isPlaying="queue.playing"
-        :isHighlighted="false"
+        :isCurrent="t.index === queue.currentindex"
-        :isCurrent="index === queue.currentindex"
         :isQueueTrack="true"
         @PlayThis="playFromQueue(index)"
       />
@@ -22,10 +24,11 @@
 </template>
 
 <script setup lang="ts">
-import { onUpdated, ref } from "vue";
+import { computed, ref, onMounted } from "vue";
+import { useVirtualList } from "@vueuse/core";
 
+// import { focusElem } from "@/utils";
 import useQStore from "@/stores/queue";
-import { focusElem } from "@/utils";
 
 import TrackItem from "../shared/TrackItem.vue";
 import QueueActions from "./Queue/QueueActions.vue";
@@ -37,13 +40,23 @@ function playFromQueue(index: number) {
   queue.play(index);
 }
 
-onUpdated(() => {
+const source = computed(() => queue.tracklist);
-  if (mouseover.value) return;
 
-  setTimeout(() => {
+const {
-    focusElem("currentInQueue");
+  list: tracks,
-  }, 1000);
+  containerProps,
+  wrapperProps,
+  scrollTo,
+} = useVirtualList(source, {
+  itemHeight: 64,
+  overscan: 10,
 });
+
+onMounted(() => {
+  scrollTo(queue.currentindex);
+});
+
+// TODO: Handle focusing current track on song end
 </script>
 
 <style lang="scss">

src/components/shared/TrackItem.vue

@@ -11,7 +11,11 @@
     @contextmenu.prevent="showMenu"
   >
     <div class="album-art">
-      <img :src="paths.images.thumb.small + track.image" alt="" class="rounded-sm" />
+      <img
+        :src="paths.images.thumb.small + track.image"
+        alt=""
+        class="rounded-sm"
+      />
       <div
         class="now-playing-track-indicator image"
         v-if="isCurrent"
@@ -73,7 +77,7 @@ const playThis = (track: Track) => {
 
 <style lang="scss">
 .currentInQueue {
-  background: linear-gradient(37deg, $gray4, $gray3, $gray3);
+  background-color: $gray4;
 }
 
 .contexton {
@@ -109,7 +113,7 @@ const playThis = (track: Track) => {
       transform: scale(1) translateY(0);
     }
 
-    background: linear-gradient(37deg, $gray4, $gray3, $gray3);
+    background-color: $gray5;
   }
 
   hr {