refactor interfaces and references

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);
 }