refactor interfaces and references

src/views/AlbumView/index.vue

@@ -7,14 +7,15 @@
       key-field="id"
       v-slot="{ item }"
     >
-      <component
-        :is="item.component"
-        v-bind="item.props"
-        :style="{ maxHeight: `${item.size}px` }"
-        @playThis="
-          playFromAlbum(item.props.track.index - item.props.track.disc)
-        "
-      />
+      <div :style="{ maxHeight: `${item.size}px` }">
+        <component
+          :is="item.component"
+          v-bind="item.props"
+          @playThis="
+            playFromAlbum(item.props.track.index - item.props.track.disc)
+          "
+        />
+      </div>
     </RecycleScroller>
   </div>
 </template>
@@ -112,8 +113,9 @@ const scrollerItems = computed(() => {
 });
 
 function playFromAlbum(index: number) {
-  const { title, albumartist, albumhash } = album.info;
-  queue.playFromAlbum(title, albumartist, albumhash, album.allTracks);
+  
+  const { title, albumartists, albumhash } = album.info;
+  queue.playFromAlbum(title, albumhash, album.allTracks);
   queue.play(index);
 }
 
@@ -128,6 +130,7 @@ onBeforeRouteUpdate(async (to: RouteLocationNormalized) => {
 onBeforeRouteLeave(() => {
   setTimeout(() => {
     album.resetQuery();
+    album.resetAlbumArtists();
   }, 500);
 });
 </script>
@@ -135,7 +138,7 @@ onBeforeRouteLeave(() => {
 <style lang="scss">
 .album-virtual-scroller {
   height: 100%;
-
+  overflow: visible;
   .songlist-item {
     grid-template-columns: 1.5rem 1.5fr 1fr 2.5rem 2.5rem;
   }

src/views/FolderView.vue

@@ -62,9 +62,9 @@ class songItem {
     this.props = {
       track,
       index: track.index + 1,
-      isCurrent: queue.currentid === track.id,
+      isCurrent: queue.currenttrackhash === track.trackhash,
       isCurrentPlaying:
-        queue.currentid === track.id && queue.playing,
+        queue.currenttrackhash === track.trackhash && queue.playing,
     };
   }
 }
@@ -111,3 +111,11 @@ onBeforeRouteLeave(() => {
   setTimeout(() => folder.resetQuery(), 500);
 });
 </script>
+
+
+<style lang="scss">
+// .folder-view {
+//   background-color: $red;
+//   padding-left: 0 !important;
+// }
+</style>

src/views/PlaylistView/index.vue

@@ -58,8 +58,8 @@ const scrollerItems = computed(() => {
         props: {
           track: track,
           index: track.index + 1,
-          isCurrent: queue.currentid === track.id,
-          isCurrentPlaying: queue.currentid === track.id && queue.playing,
+          isCurrent: queue.currenttrackhash === track.trackhash,
+          isCurrentPlaying: queue.currenttrackhash === track.trackhash && queue.playing,
         },
         size: 64,
       };

src/views/QueueView.vue

@@ -16,9 +16,9 @@
       <SongItem
         :track="item.track"
         :index="index + 1"
-        :isCurrent="queue.currentid === item.track.id"
+        :isCurrent="queue.currenttrackhash === item.track.trackhash"
         :isCurrentPlaying="
-          queue.currentid === item.track.id && queue.playing
+          queue.currenttrackhash === item.track.trackhash && queue.playing
         "
         @playThis="playFromQueue(index)"
       />
@@ -29,10 +29,10 @@
 <script setup lang="ts">
 import { computed, onMounted } from "vue";
 
+import SongItem from "@/components/shared/SongItem.vue";
+import { isMedium, isSmall } from "@/stores/content-width";
 import useQStore from "@/stores/queue";
 import { createTrackProps } from "@/utils";
-import SongItem from "@/components/shared/SongItem.vue";
-import { isSmall, isMedium } from "@/stores/content-width";
 
 const itemHeight = 64;
 const queue = useQStore();

src/views/SearchView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="search-view">
+  <div class="search-view content-page">
     <div class="scrollable">
       <Main :isOnSearchPage="true" />
     </div>
@@ -15,10 +15,11 @@ import Main from "@/components/RightSideBar/Search/Main.vue";
   height: 100%;
   padding-top: 0;
   margin-right: -1rem;
+  background-color: red !important;
 
   .scrollable {
     height: 100%;
-    overflow: auto;
+    overflow: hidden;
   }
 
   .artists-results {

src/views/SearchView/albums.vue

@@ -16,15 +16,15 @@ const search = useSearchStore();
 </script>
 
 <style lang="scss">
-// .search-albums-view.grid-page {
-//   max-height: 100%;
-//   display: grid;
-//   grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-//   gap: 1.75rem 0;
+.search-albums-view.grid-page {
+  // max-height: 100%;
+  // display: grid;
+  // grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  // gap: 1.75rem 0;
 
-//   padding-bottom: 4rem;
-//   padding-right: $medium;
+  // padding-bottom: 4rem;
+  padding-right: $small;
 
-//   overflow: auto;
-// }
+  overflow: auto;
+}
 </style>

src/views/SearchView/main.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="search-view">
+  <div class="search-view content-page">
     <div class="tabs">
       <button
         v-for="page in pages"
@@ -180,9 +180,6 @@ onMounted(() => {
     gap: 1.75rem 0;
 
     padding-bottom: 4rem;
-    padding-right: 1rem;
-
-    overflow: auto;
   }
 
   button.load-more {

src/views/SearchView/tracks.vue

@@ -12,8 +12,8 @@
 
 <script setup lang="ts">
 import Layout from "@/layouts/HeaderAndVList.vue";
-import useSearchStore from "@/stores/search";
 import useQueueStore from "@/stores/queue";
+import useSearchStore from "@/stores/search";
 
 const search = useSearchStore();
 const queue = useQueueStore();

src/views/SettingsView.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="settingspage">
+  <div class="settingspage content-page">
     <Content :current="0" />
   </div>
 </template>
 
 <script setup lang="ts">
 import Content from "../components/SettingsView/Content.vue";
-</script>
+</script>z