extract queue songlist into a reusable component

~ getting ready to implement "see all" in favorite page

src/views/QueueView.vue

@@ -1,54 +1,19 @@
 <template>
-  <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 }"
-    >
-      <SongItem
-        :track="item.track"
-        :index="index + 1"
-        @playThis="playFromQueue(index)"
-      />
-    </RecycleScroller>
-  </div>
+  <SongList :tracks="queue.tracklist" :handlePlay="playFromQueue" />
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from "vue";
-
-import SongItem from "@/components/shared/SongItem.vue";
-import { isMedium, isSmall } from "@/stores/content-width";
+import { onMounted } from "vue";
 import useQStore from "@/stores/queue";
-import { createTrackProps } from "@/utils";
+import SongList from "@/components/shared/SongList.vue";
 
-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("queue-page-scrollable");
+  const scrollable = document.getElementById("songlist-scroller");
   const itemHeight = 64;
   const top = (queue.currentindex - 1) * itemHeight;