attach artist page link to ArtistName component

+ separate fetching artist albums with fetching artist info
+ include limit when fetching artist albums
+ refactor interfaces

src/components/AlbumView/GenreBanner.vue

@@ -25,10 +25,10 @@ import { isLight } from "@/composables/colors/album";
 
 const album = useAlbumStore();
 
-onMounted(() => {
+onMounted(async () => {
   // onMounted, fetch data to be used in the component below this one.
   const album = useAlbumStore();
-  album.fetchArtistAlbums();
+  await album.fetchArtistAlbums();
 });
 </script>
 

src/components/AlbumView/Header.vue

@@ -40,11 +40,10 @@
           <div class="stats ellip">
             <div class="border rounded-sm pad-sm">
               <ArtistName
-                :artists="album.albumartists.map((a) => a.name)"
+                :artists="album.albumartists"
                 :albumartists="''"
                 :small="true"
-              />
-              &nbsp;• {{ album.date }} • {{ album.count }}
+              />&nbsp; • {{ album.date }} • {{ album.count }}
               {{ album.count === 1 ? "Track" : "Tracks" }} •
               {{ formatSeconds(album.duration, true) }}
             </div>
@@ -57,7 +56,7 @@
           v-for="a in album.albumartists"
           :to="{
             name: Routes.artist,
-            params: { hash: a.hash },
+            params: { hash: a.artisthash },
           }"
         >
           <img
@@ -130,6 +129,21 @@ useVisibility(albumheaderthing, handleVisibilityState);
   background-color: $black;
   align-items: flex-end;
 
+  // .albumartists {
+  //   outline: solid 1px;
+  //   // display: flex;
+  //   // width: 100%;
+  //   // flex-wrap: nowrap;
+  //   // height: 1rem;
+  //   // overflow: hidden;
+
+  //   span {
+  //     // white-space: nowrap;
+  //     // overflow: hidden;
+  //     // text-overflow: ellipsis;
+  //   }
+  // }
+
   .big-img {
     height: calc(100%);
     width: 16rem;
@@ -204,6 +218,7 @@ useVisibility(albumheaderthing, handleVisibilityState);
 
       .artist {
         font-size: 1.15rem;
+        background-color: red;
       }
     }
 
@@ -215,11 +230,20 @@ useVisibility(albumheaderthing, handleVisibilityState);
         margin-bottom: 0.75rem;
         font-size: 0.8rem;
 
+        .artistname {
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
         div {
           font-size: 0.8rem;
           display: flex;
-          width: fit-content;
-          cursor: text;
+          flex-wrap: wrap;
+          // width: fit-content;
+          // cursor: text;
         }
       }
     }

src/components/shared/ArtistName.vue

@@ -1,30 +1,55 @@
 <template>
   <div
-    v-tooltip
     style="width: fit-content"
-    class="ellip"
+    v-tooltip
+    class="artistname ellip"
     :style="{
+      width: 'fit-content',
       fontSize: small ? '0.85rem' : smaller ? 'small' : '',
     }"
+    @click.stop="() => {}"
   >
     <div v-if="artists === null || artists.length === 0">
       <span>{{ albumartists }}</span>
     </div>
     <div v-else>
-      <span v-for="artist in putCommas(artists)" :key="artist">{{
-        artist
-      }}</span>
+      <template v-for="(artist, index) in artists" :key="artist.artisthash">
+        <RouterLink
+          class="artist"
+          :to="{
+            name: Routes.artist,
+            params: { hash: artist.artisthash },
+          }"
+          >{{ `${artist.name}` }}</RouterLink
+        >
+        {{ index === artists.length - 1 ? "" : ",&nbsp;" }}
+      </template>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { Artist } from "@/interfaces";
 import { putCommas } from "@/utils";
+import { Routes } from "@/composables/enums";
 
 const props = defineProps<{
-  artists: string[] | null;
+  artists: Artist[] | null;
   albumartists: string | null;
   small?: boolean;
   smaller?: boolean;
 }>();
 </script>
+
+<style lang="scss">
+.artistname {
+  a {
+    color: inherit;
+    cursor: pointer !important;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+</style>

src/components/shared/SongItem.vue

@@ -131,6 +131,7 @@ function showMenu(e: MouseEvent) {
 
   .song-album {
     max-width: max-content;
+
     cursor: pointer !important;
 
     &:hover {