make albums on artist page reactive

+ show artist name on artist album component on album page
+ attach artist page link to artist card
+ use small artist page on album header
+ use album color on genre banner on album page

src/views/AlbumView/index.vue

@@ -85,10 +85,13 @@ function getSongItems() {
 
 function getArtistAlbumComponents(): ScrollerItem[] {
   return album.albumArtists.map((artist) => {
+    const artist_name = album.info.albumartists.find(
+      (a) => a.hash === artist.artisthash
+    )?.name;
     return {
       id: Math.random().toString(),
       component: ArtistAlbums,
-      props: { artist },
+      props: { title: `More from ${artist_name}`, albums: artist.albums },
       size: 20 * 16,
     };
   });
@@ -113,7 +116,6 @@ const scrollerItems = computed(() => {
 });
 
 function playFromAlbum(index: number) {
-  
   const { title, albumartists, albumhash } = album.info;
   queue.playFromAlbum(title, albumhash, album.allTracks);
   queue.play(index);

src/views/ArtistView/Main.vue

@@ -47,30 +47,36 @@ interface ScrollerItem {
   id: string | number;
   component: any;
   props?: Record<string, unknown>;
-  // size: number;
 }
 
 const header: ScrollerItem = {
   id: "artist-header",
   component: Header,
-  // size: 16 * 19,
 };
 
 const top_tracks: ScrollerItem = {
   id: "artist-top-tracks",
   component: TopTracks,
-  // size: 16 * 25,
-};
-
-const artistAlbums: ScrollerItem = {
-  id: "artist-albums",
-  component: ArtistAlbums,
-  // size: 16 * 16,
-  props: { title: "Albums", albums: artistStore.albums },
 };
 
 const scrollerItems = computed(() => {
-  return [header, top_tracks, artistAlbums];
+  let components = [header];
+
+  if (artistStore.tracks.length > 0) {
+    components.push(top_tracks);
+  }
+
+  if (artistStore.albums.length > 0) {
+    const artistAlbums: ScrollerItem = {
+      id: "artist-albums",
+      component: ArtistAlbums,
+      props: { title: "Albums", albums: artistStore.albums },
+    };
+
+    components.push(artistAlbums);
+  }
+
+  return components;
 });
 
 onBeforeRouteUpdate((to, from, next) => {