feat: connect artist view from search and favorites

- Add onArtistClick prop to SearchView and FavoritesView
- Convert artist cards to buttons with click handlers
- Wire up handleArtistClick in main page

src/lib/components/views/FavoritesView.svelte

@@ -36,6 +36,7 @@
   interface Props {
     onAlbumClick?: (albumId: string) => void;
     onTrackPlay?: (track: DisplayTrack) => void;
+    onArtistClick?: (artistId: number) => void;
   }
 
   interface DisplayTrack {
@@ -52,7 +53,7 @@
     samplingRate?: number;
   }
 
-  let { onAlbumClick, onTrackPlay }: Props = $props();
+  let { onAlbumClick, onTrackPlay, onArtistClick }: Props = $props();
 
   type TabType = 'tracks' | 'albums' | 'artists';
   let activeTab = $state<TabType>('tracks');
@@ -280,7 +281,7 @@
       {:else}
         <div class="artist-grid">
           {#each favoriteArtists as artist (artist.id)}
-            <div class="artist-card">
+            <button class="artist-card" onclick={() => onArtistClick?.(artist.id)}>
               <div class="artist-image">
                 {#if artist.image?.large || artist.image?.thumbnail}
                   <img src={artist.image?.large || artist.image?.thumbnail} alt={artist.name} />
@@ -294,7 +295,7 @@
               {#if artist.albums_count}
                 <div class="artist-albums">{artist.albums_count} albums</div>
               {/if}
-            </div>
+            </button>
           {/each}
         </div>
       {/if}
@@ -488,6 +489,7 @@
     align-items: center;
     padding: 16px;
     background-color: var(--bg-secondary);
+    border: none;
     border-radius: 12px;
     cursor: pointer;
     transition: background-color 150ms ease;

src/lib/components/views/SearchView.svelte

@@ -23,9 +23,10 @@
   interface Props {
     onAlbumClick?: (albumId: string) => void;
     onTrackPlay?: (track: Track) => void;
+    onArtistClick?: (artistId: number) => void;
   }
 
-  let { onAlbumClick, onTrackPlay }: Props = $props();
+  let { onAlbumClick, onTrackPlay, onArtistClick }: Props = $props();
 
   interface Album {
     id: string;
@@ -350,7 +351,7 @@
       {:else}
         <div class="artists-grid">
           {#each artistResults.items as artist}
-            <div class="artist-card">
+            <button class="artist-card" onclick={() => onArtistClick?.(artist.id)}>
               {#if failedArtistImages.has(artist.id) || !getArtistImage(artist)}
                 <div class="artist-image-placeholder">
                   <User size={40} />
@@ -362,7 +363,7 @@
               {#if artist.albums_count}
                 <div class="artist-albums">{artist.albums_count} albums</div>
               {/if}
-            </div>
+            </button>
           {/each}
         </div>
         {#if hasMoreArtists}
@@ -608,6 +609,7 @@
     text-align: center;
     padding: 16px;
     background-color: var(--bg-secondary);
+    border: none;
     border-radius: 12px;
     cursor: pointer;
     transition: background-color 150ms ease;

src/routes/+page.svelte

@@ -1198,6 +1198,7 @@
         <SearchView
           onAlbumClick={handleAlbumClick}
           onTrackPlay={handleTrackPlay}
+          onArtistClick={handleArtistClick}
         />
       {:else if activeView === 'settings'}
         <SettingsView
@@ -1238,6 +1239,7 @@
         <FavoritesView
           onAlbumClick={handleAlbumClick}
           onTrackPlay={handlePlaylistTrackPlay}
+          onArtistClick={handleArtistClick}
         />
       {/if}
     </main>