feat: separate discs in album page

+ remove tooltip markup
+ refactor css classnames

src/views/QueueView.vue

@@ -12,10 +12,28 @@
 <script setup lang="ts">
 import useQStore from "@/stores/queue";
 import Layout from "@/layouts/HeaderAndVList.vue";
+import { onBeforeMount, onMounted } from "vue";
 
 const queue = useQStore();
 
 function playFromQueue(index: number) {
   queue.play(index);
 }
+
+function scrollToCurrent() {
+  const scrollable = document.getElementById("v-page-scrollable");
+  const itemHeight = 64;
+  const top = queue.currentindex * itemHeight - 290;
+
+  scrollable?.scrollTo({
+    top,
+    behavior: "smooth",
+  });
+}
+
+onBeforeMount(() => {
+  setTimeout(() => {
+    scrollToCurrent();
+  }, 1000);
+});
 </script>

src/views/SearchView/main.vue

@@ -14,7 +14,7 @@
         {{ page }}
       </button>
     </div>
-    <div ref="page" class="page noscroll" v-auto-animate>
+    <div ref="page" class="page no-scroll" v-auto-animate>
       <component :is="component" />
     </div>
     <button
@@ -28,14 +28,14 @@
 </template>
 
 <script setup lang="ts">
-import { useRoute } from "vue-router";
-import { computed, onMounted, ref } from "vue";
-import TracksPage from "./tracks.vue";
-import AlbumPage from "./albums.vue";
-import ArtistPage from "./artists.vue";
 import { Routes } from "@/composables/enums";
 import useSearchStore from "@/stores/search";
 import { focusElemByClass } from "@/utils";
+import { computed, onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+import AlbumPage from "./albums.vue";
+import ArtistPage from "./artists.vue";
+import TracksPage from "./tracks.vue";
 
 // width of album and artist cards
 const defaultItemCount = 6;
@@ -169,7 +169,7 @@ onMounted(() => {
     }
   }
 
-  .page.noscroll {
+  .page.no-scroll {
     overflow-x: visible;
   }
 

src/views/SearchView/tracks.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="search-tracks-view">
-    <div class="noscroll">
+    <div class="no-scroll">
       <Layout :no_header="true" :tracks="search.tracks.value" />
     </div>
   </div>
@@ -17,7 +17,7 @@ const search = useSearchStore();
 .search-tracks-view {
   height: 100%;
 
-  .noscroll {
+  .no-scroll {
     height: 100%;
   }