refactor interfaces and references

src/components/AlbumView/ArtistAlbums.vue

@@ -13,9 +13,6 @@
 <script setup lang="ts">
 import AlbumCard from "../shared/AlbumCard.vue";
 
-import useAlbumStore from "@/stores/pages/album";
-import { content_width } from "@/stores/content-width";
-import { computed, onBeforeMount } from "vue";
 import { AlbumInfo } from "@/interfaces";
 
 defineProps<{
@@ -29,7 +26,7 @@ defineProps<{
 <style lang="scss">
 .albums-from-artist {
   overflow: hidden;
-  padding-top: 1rem;
+  padding-top: 2rem;
 
   h3 {
     display: grid;
@@ -45,7 +42,7 @@ defineProps<{
   .cards {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-    gap: 2rem 0
+    gap: 2rem 0;
   }
 }
 </style>

src/components/AlbumView/GenreBanner.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="genres-banner">
-    <div v-for="genre in genres" class="rounded pad-sm">{{ genre }}</div>
+    <div class="rounded pad-sm">
+      {{ album.info.genres.length ? "Genres" : "No genres" }}
+    </div>
+    <div v-for="genre in album.info.genres" class="rounded pad-sm">
+      {{ genre }}
+    </div>
   </div>
 </template>
 
@@ -8,7 +13,7 @@
 import { onMounted } from "vue";
 import useAlbumStore from "@/stores/pages/album";
 
-const genres = ["Genres", "RNB", "Alternative", "Genres", "RNB", "Alternative"];
+const album = useAlbumStore();
 
 onMounted(() => {
   // onMounted, fetch data to be used in the component below this one.

src/components/AlbumView/Header.vue

@@ -1,4 +1,9 @@
 <template>
+  <div
+    class="album-header-ambient rounded"
+    style="height: 100%; width: 100%"
+    :style="{ boxShadow: album.colors ? `0 .5rem 2rem ${album.colors[0]}` : '' }"
+  ></div>
   <div
     class="a-header rounded"
     ref="albumheaderthing"
@@ -32,7 +37,12 @@
         <div class="bottom">
           <div class="stats ellip">
             <div class="border rounded-sm pad-sm">
-              {{ album.albumartist }} • {{ album.date }} • {{ album.count }}
+              <ArtistName
+                :artists="album.albumartists.map((a) => a.name)"
+                :albumartists="''"
+                :small="true"
+              />
+              &nbsp;• {{ album.date }} • {{ album.count }}
               {{ album.count === 1 ? "Track" : "Tracks" }} •
               {{ formatSeconds(album.duration, true) }}
             </div>
@@ -49,7 +59,6 @@
       </div>
     </div>
   </div>
-
 </template>
 
 <script setup lang="ts">
@@ -63,6 +72,7 @@ import { formatSeconds, useVisibility } from "@/utils";
 import { isLight } from "../../composables/colors/album";
 import { playSources } from "../../composables/enums";
 import { AlbumInfo } from "../../interfaces";
+import ArtistName from "@/components/shared/ArtistName.vue";
 
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
@@ -74,6 +84,9 @@ const albumheaderthing = ref<any>(null);
 const imguri = paths.images;
 const nav = useNavStore();
 
+defineEmits<{
+  (event: "playThis"): void;
+}>();
 
 /**
  * Calls the `toggleShowPlay` method which toggles the play button in the nav.
@@ -89,7 +102,12 @@ useVisibility(albumheaderthing, handleVisibilityState);
 </script>
 
 <style lang="scss">
-
+.album-header-ambient {
+  width: 20rem;
+  position: absolute;
+  z-index: -100 !important;
+  opacity: 0.25;
+}
 
 .a-header {
   display: grid;
@@ -98,7 +116,6 @@ useVisibility(albumheaderthing, handleVisibilityState);
   padding: 1rem;
   height: $banner-height;
   background-color: $black;
-  overflow: hidden;
   align-items: flex-end;
 
   .big-img {
@@ -168,10 +185,12 @@ useVisibility(albumheaderthing, handleVisibilityState);
 
       .stats {
         font-weight: bold;
-        font-size: 0.8rem;
         margin-bottom: 0.75rem;
+        font-size: 0.8rem;
 
         div {
+          font-size: 0.8rem;
+          display: flex;
           width: fit-content;
           cursor: text;
         }

src/components/AlbumsExplorer/AlbumList.vue

@@ -17,7 +17,7 @@
         <div class="play"></div>
         <div class="album-art image rounded"></div>
         <div class="name ellip">{{ album.title }}</div>
-        <div class="artist ellip">{{ album.albumartist }}</div>
+        <div class="artist ellip">{{ album.albumartists }}</div>
       </router-link>
     </div>
   </div>

src/components/AlbumsExplorer/TopAlbums.vue

@@ -11,7 +11,7 @@
         <div class="image rounded"></div>
         <div class="info">
           <div class="name ellip">{{ album.title }}</div>
-          <div class="artist ellip">{{ album.albumartist }}</div>
+          <div class="artist ellip">{{ album.albumartists }}</div>
           <div class="separator"></div>
           <div class="top">
             <div class="play-icon"></div>

src/components/BottomBar.vue

@@ -34,7 +34,7 @@
               </div>
               <ArtistName
                 :artists="queue.currenttrack?.artist || []"
-                :albumartist="
+                :albumartists="
                   queue.currenttrack?.albumartist || 'Welcome to alice'
                 "
                 class="artist"
@@ -63,14 +63,14 @@
 </template>
 
 <script setup lang="ts">
+import { Routes } from "@/composables/enums";
 import { paths } from "@/config";
 import { formatSeconds } from "@/utils";
-import { Routes } from "@/composables/enums";
 
-import useQStore from "@/stores/queue";
-import ArtistName from "@/components/shared/ArtistName.vue";
 import HotKeys from "@/components/LeftSidebar/NP/HotKeys.vue";
 import Progress from "@/components/LeftSidebar/NP/Progress.vue";
+import ArtistName from "@/components/shared/ArtistName.vue";
+import useQStore from "@/stores/queue";
 
 import HeartSvg from "@/assets/icons/heart.svg";
 // import PlusSvg from "@/assets/icons/plus.svg";

src/components/ContextMenu.vue

@@ -30,38 +30,9 @@ const context = useContextStore();
 const settings = useSettingsStore();
 const contextMenuRef = ref<HTMLElement>();
 
-// let clickCount = 0;
-
-// onClickOutside(
-//   contextMenuRef,
-//   (e) => {
-//     console.log(clickCount);
-
-//     if (!context.visible) {
-//       // clickCount = 0;
-//       return;
-//     }
-
-//     clickCount++;
-
-//     if (context.visible && clickCount === 1) {
-//       context.hideContextMenu();
-//       e.stopImmediatePropagation();
-//       clickCount = 0;
-//     }
-//   },
-//   {
-//     capture: false,
-//   }
-// );
-
 let watcher: any = null;
 
 context.$subscribe((mutation, state) => {
-  // let watchers = [];
-  // console.log("watchers count: " + watchers.length)
-  // let wat: any = () => {};
-
   if (state.visible) {
     setTimeout(() => {
       if (watcher !== null) {
@@ -71,7 +42,6 @@ context.$subscribe((mutation, state) => {
         contextMenuRef,
         (e) => {
           e.stopImmediatePropagation();
-          console.log("clicked outside ref");
           context.hideContextMenu();
         },
         {

src/components/Contextmenu/ContextItem.vue

@@ -38,11 +38,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
 import { createPopper, Instance } from "@popperjs/core";
+import { ref } from "vue";
 
-import { Option } from "@/interfaces";
 import { contextChildrenShowMode } from "@/composables/enums";
+import { Option } from "@/interfaces";
 
 const props = defineProps<{
   option: Option;
@@ -155,7 +155,7 @@ function runChildAction(action: () => void) {
 
   .children {
     transform: scale(0);
-    overflow: auto;
+    overflow: hidden;
     max-height: calc(100vh - 10rem);
   }
 

src/components/FolderView/FolderItem.vue

@@ -1,14 +1,14 @@
 <template>
   <router-link :to="{ name: Routes.folder, params: { path: folder.path } }">
     <div class="f-item">
-      <div class="icon">
-        <FolderSvg v-if="!folder.is_sym" />
-        <SymLinkSvg v-if="folder.is_sym" />
-      </div>
+      <!-- <div class="icon"> -->
+      <FolderSvg v-if="!folder.is_sym" />
+      <SymLinkSvg v-if="folder.is_sym" />
+      <!-- </div> -->
       <div class="info">
         <div class="f-item-text ellip">{{ folder.name }}</div>
-        <div class="separator no-border"></div>
-        <div class="f-item-count">{{ folder.trackcount }} tracks</div>
+        <!-- <div class="separator no-border"></div> -->
+        <!-- <div class="f-item-count">{{ folder.has_tracks }} tracks</div> -->
       </div>
     </div>
   </router-link>
@@ -31,9 +31,8 @@ defineProps<{
   height: 5rem;
   display: grid;
   grid-template-columns: max-content 1fr;
-  padding-right: 1rem;
   align-items: center;
-  background-color: $gray5;
+  background-color: $gray;
   transition: all 0.2s ease;
   border-radius: 0.75rem;
 
@@ -41,24 +40,17 @@ defineProps<{
     height: 4rem;
   }
 
-  .icon {
-    margin: 0 0.75rem;
+  svg {
+    margin: 0 $small 0 1rem;
   }
 
-  .info {
-    .f-item-count {
-      font-size: 0.8rem;
-      color: rgb(219, 217, 217);
-    }
-
-    .f-item-text {
-      text-align: left;
-    }
+  .f-item-text {
+    margin-right: 1rem;
   }
 
   &:hover {
-    background: #0575e6;
-    background: linear-gradient(to top right, #021b79, #0575e6);
+    background: $gray3;
+    // background: linear-gradient(to top right, #021b79, #0575e6);
     background-size: 105% 105%;
     background-position-x: -$small;
 

src/components/FolderView/FolderList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="f-container rounded">
-    <div id="f-items" class="rounded">
+    <div id="f-items" class="rounded lislt-mode">
       <FolderItem
         v-for="folder in folders"
         :key="JSON.stringify(folder)"
@@ -22,8 +22,24 @@ defineProps<{
 <style lang="scss">
 #f-items {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
   gap: 1.5rem;
   margin-bottom: 1.75rem;
 }
+
+#f-items.list-mode {
+  grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
+  gap: 0;
+
+  .f-item {
+    // background-color: $red;
+    height: 4rem;
+    border-radius: $small;
+    background-color: transparent;
+  }
+
+  .f-item:hover {
+    background-color: $gray !important;
+  }
+}
 </style>

src/components/FolderView/SongList.vue

@@ -28,7 +28,7 @@
         "
         @playThis="updateQueue(track.index !== undefined ? track.index : index)"
         :isCurrentPlaying="queue.playing"
-        :isCurrent="queue.currentid == track.id"
+        :isCurrent="queue.currenttrackhash == track.trackhash"
       />
     </div>
     <div class="copyright" v-if="copyright && copyright">

src/components/LeftSidebar/NP/SongCard.vue

@@ -27,7 +27,7 @@ import { paths } from "@/config";
 import { Track } from "@/interfaces";
 
 defineProps<{
-  track: Track | null;
+  track: Track | undefined;
 }>();
 
 const imguri = paths.images.thumb.large;

src/components/PlaylistView/Header.vue

@@ -44,8 +44,8 @@ import { playSources } from "@/composables/enums";
 import { formatSeconds, useVisibility } from "@/utils";
 import { paths } from "../../config";
 
-import PlayBtnRect from "../shared/PlayBtnRect.vue";
 import { storeToRefs } from "pinia";
+import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
 const modal = useModalStore();
 const nav = useNavStore();

src/components/RightSideBar/Queue.vue

@@ -8,6 +8,7 @@
     <RecycleScroller
       class="scroller"
       id="queue-scrollable"
+      style="height: 100%"
       :items="scrollerItems"
       :item-size="itemHeight"
       key-field="id"
@@ -72,8 +73,8 @@ onBeforeUnmount(() => {
   height: 100%;
   overflow: hidden;
 
-  .scroller {
-    height: 100%;
+  .vue-recycle-scroller {
+    padding: 0 !important;
   }
 }
 </style>

src/components/RightSideBar/Queue/upNext.vue

@@ -15,11 +15,8 @@
 
 <script setup lang="ts">
 import { paths } from "@/config";
-import { Track } from "@/interfaces";
-import { putCommas } from "@/utils";
 import useQueueStore from "@/stores/queue";
 
-import { showTrackContextMenu as showContext } from "@/composables/context";
 import { ref } from "vue";
 
 const context_on = ref(false);

src/components/RightSideBar/Search/Main.vue

@@ -14,9 +14,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
+import useSearchStore from "@/stores/search";
 import Tab from "./Tab.vue";
 import TabsWrapper from "./TabsWrapper.vue";
-import useSearchStore from "@/stores/search";
 
 const search = useSearchStore();
 defineProps<{

src/components/RightSideBar/Search/PlaylistsGrid.vue

@@ -3,7 +3,7 @@
     <div class="grid">
       <PCard
         v-for="album in search.albums.value"
-        :key="`${album.albumartist}-${album.title}`"
+        :key="`${album.albumartists}-${album.title}`"
         :album="album"
       />
     </div>
@@ -13,8 +13,6 @@
 
 <script setup lang="ts">
 import useSearchStore from "../../../stores/search";
-import PCard from "../../playlists/PlaylistCard.vue";
-import LoadMore from "./LoadMore.vue";
 
 const search = useSearchStore();
 

src/components/RightSideBar/Search/TracksGrid.vue

@@ -4,9 +4,11 @@
       <TrackComponent
         v-for="(track, index) in search.tracks.value"
         :key="track.id"
-        :isCurrent="queue.currentid === track.id"
+        :isCurrent="queue.currenttrackhash === track.trackhash"
         :isHighlighted="false"
-        :isCurrentPlaying="queue.currentid === track.id && queue.playing"
+        :isCurrentPlaying="
+          queue.currenttrackhash === track.trackhash && queue.playing
+        "
         :track="track"
         @playThis="updateQueue(index)"
         :index="index + 1"

src/components/nav/NavBar.vue

@@ -79,6 +79,7 @@ watch(
   display: grid;
   grid-template-columns: 1fr min-content;
   width: 100%;
+  padding: 0 1.25rem;
 
   .left {
     display: grid;

src/components/nav/Titles/Folder.vue

@@ -58,7 +58,7 @@ onUpdated(() => {
 
     .fname-wrapper {
       width: 100%;
-      overflow: auto;
+      overflow: hidden;
     }
 
     .fname {
@@ -82,7 +82,7 @@ onUpdated(() => {
       .paths {
         display: flex;
         gap: $smaller;
-        overflow: auto;
+        overflow: hidden;
         height: 100%;
         scrollbar-width: none;
 

src/components/shared/AlbumCard.vue

@@ -9,7 +9,7 @@
     <img class="rounded" :src="imguri + album.image" alt="" />
     <div>
       <h4 class="title ellip" v-tooltip>{{ album.title }}</h4>
-      <div class="artist ellip">{{ album.albumartist }}</div>
+      <div class="artist ellip">{{ album.albumartists[0].name }}</div>
     </div>
   </router-link>
 </template>

src/components/shared/ArtistName.vue

@@ -8,7 +8,7 @@
     }"
   >
     <div v-if="artists === null || artists.length === 0">
-      <span>{{ albumartist }}</span>
+      <span>{{ albumartists }}</span>
     </div>
     <div v-else>
       <span v-for="artist in putCommas(artists)" :key="artist">{{
@@ -23,7 +23,7 @@ import { putCommas } from "@/utils";
 
 const props = defineProps<{
   artists: string[] | null;
-  albumartist: string | undefined;
+  albumartists: string | null;
   small?: boolean;
   smaller?: boolean;
 }>();

src/components/shared/SongItem.vue

@@ -27,13 +27,13 @@
         <div class="isSmallArtists" style="display: none">
           <ArtistName
             :artists="track.artist"
-            :albumartist="track.albumartist"
+            :albumartists="track.albumartist"
           />
         </div>
       </div>
     </div>
     <div class="song-artists">
-      <ArtistName :artists="track.artist" :albumartist="track.albumartist" />
+      <ArtistName :artists="track.artist" :albumartists="track.albumartist" />
     </div>
     <router-link
       v-if="!hide_album"

src/components/shared/TrackItem.vue

@@ -26,7 +26,7 @@
       <div class="artist">
         <ArtistName
           :artists="track.artist"
-          :albumartist="track.albumartist"
+          :albumartists="track.albumartist"
           :smaller="true"
         />
       </div>
@@ -64,7 +64,7 @@ const props = defineProps<{
 const queue = useQueueStore();
 const context_on = ref(false);
 
-function showMenu(e: Event) {
+function showMenu(e: MouseEvent) {
   showContext(e, props.track, context_on);
 }