fix play from sidebar queue

src/components/RightSideBar/Main.vue

@@ -51,6 +51,7 @@ const settings = useSettingsStore();
       height: 100%;
       overflow: hidden;
       display: grid;
+      gap: $small;
       grid-template-rows: max-content 1fr;
     }
   }

src/components/RightSideBar/Queue.vue

@@ -1,8 +1,12 @@
 <template>
   <QueueActions />
-    <div class="scrollable-r">
+  <div
+    class="scrollable-r"
+    @mouseover="mouseover = true"
+    @mouseout="mouseover = false"
+  >
     <div class="inner">
-        <TrackComponent
+      <TrackItem
         v-for="(t, index) in queue.tracklist"
         :key="index"
         :track="t"
@@ -10,38 +14,26 @@
         :isPlaying="queue.playing"
         :isHighlighted="false"
         :isCurrent="index === queue.currentindex"
+        @PlayThis="playFromQueue(index)"
       />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onUpdated, ref } from "vue";
+import { onUpdated, ref } from "vue";
 
 import useQStore from "@/stores/queue";
 import { focusElem } from "@/utils";
 
 import TrackItem from "../shared/TrackItem.vue";
-import SongItem from "../shared/SongItem.vue";
 import QueueActions from "./Queue/QueueActions.vue";
 
-const props = defineProps<{
-  isOnQueuePage?: boolean;
-}>();
-
-const TrackComponent = computed(() => {
-  if (props.isOnQueuePage) {
-    return SongItem;
-  }
-
-  return TrackItem;
-});
-
 const queue = useQStore();
 const mouseover = ref(false);
 
-function setMouseOver(val: boolean) {
+function playFromQueue(index: number) {
-  mouseover.value = val;
+  queue.play(index);
 }
 
 onUpdated(() => {
@@ -59,8 +51,8 @@ onUpdated(() => {
   overflow: auto;
 
   .inner {
-    scrollbar-color: grey transparent;
+    // scrollbar-color: grey transparent;
-    margin: 1rem 0;
+    margin-bottom: 1rem;
   }
 }
 </style>