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/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 {