client: implement a buggy scrollIntoView in queue view

src/components/FolderView/FolderList.vue

@@ -56,7 +56,7 @@ export default {
 }
 
 .f-container .f-item {
-  min-width: 14.4rem;
+  min-width: 13rem;
   min-height: 5rem;
   display: flex;
   align-items: center;
@@ -85,10 +85,10 @@ export default {
 
 .f-container .f-item:hover {
   transition: all 0.2s ease;
-  background: #000000; /* fallback for old browsers */
+  background: #000000;
   background: no-repeat 8%/100% url(../../assets/icons/folder.svg),
-    -webkit-linear-gradient(to bottom, #434343, #000000); /* Chrome 10-25, Safari 5.1-6 */
+    -webkit-linear-gradient(to bottom, #434343, #000000);
   background: no-repeat 8%/10% url(../../assets/icons/folder.svg),
-    linear-gradient(to bottom, #434343, #000000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    linear-gradient(to bottom, #434343, #000000);
 }
 </style>

src/components/FolderView/SongList.vue

@@ -14,10 +14,8 @@
           <tr
             v-for="song in songs"
             :key="song"
-            @click="
-              updateQueue(song, song.type.name, song.type.id),
-                playAudio(song.filepath)
-            "
+            @click="updateQueue(song), playAudio(song.filepath)"
+            :class="{ current: current._id.$oid == song._id.$oid }"
           >
             <td :style="{ width: songTitleWidth + 'px' }" class="flex">
               <div
@@ -62,7 +60,6 @@ import { ref, toRefs } from "@vue/reactivity";
 import { onMounted, onUnmounted } from "@vue/runtime-core";
 
 import audio from "@/composables/playAudio.js";
-import getQueue from "@/composables/getQueue.js";
 import perks from "@/composables/perks.js";
 
 export default {
@@ -75,9 +72,9 @@ export default {
     const minWidth = ref(300);
     const putCommas = perks.putCommas;
 
-    const updateQueue = async (song, type, id) => {
+    const updateQueue = async (song) => {
       if (perks.queue.value[0]._id.$oid !== song_list.value[0]._id.$oid) {
-        const queue = await getQueue(type, id);
+        const queue = song_list.value;
         localStorage.setItem("queue", JSON.stringify(queue));
         perks.queue.value = queue;
       }
@@ -111,6 +108,7 @@ export default {
     });
 
     const playAudio = audio.playAudio;
+    const current = ref(perks.current);
 
     return {
       songtitle,
@@ -119,6 +117,7 @@ export default {
       playAudio,
       updateQueue,
       putCommas,
+      current,
     };
   },
 };
@@ -134,6 +133,10 @@ export default {
   &::-webkit-scrollbar {
     display: none;
   }
+
+  .current {
+    color: rgb(255, 238, 0);
+  }
 }
 
 .folder .table table td .album-art {
@@ -195,7 +198,17 @@ td .artist {
 
     &:hover {
       & {
-        background-color: rgb(5, 80, 150);
+        & > td {
+          background-color: rgb(5, 80, 150);
+        }
+
+        & td:first-child {
+          border-radius: $small 0 0 $small;
+        }
+
+        & td:last-child {
+          border-radius: 0 $small $small 0;
+        }
       }
     }
   }