feat(web): similar-artists strip + top-tracks panel on artist detail

web/src/routes/artists/[id]/+page.svelte

@@ -1,9 +1,16 @@
 <script lang="ts">
   import { Play } from 'lucide-svelte';
   import { page } from '$app/state';
-  import { createArtistQuery } from '$lib/api/queries';
+  import {
+    createArtistQuery,
+    createSimilarArtistsQuery,
+    createArtistTopTracksQuery
+  } from '$lib/api/queries';
   import { pageTitle } from '$lib/branding';
   import AlbumCard from '$lib/components/AlbumCard.svelte';
+  import ArtistCard from '$lib/components/ArtistCard.svelte';
+  import CompactTrackCard from '$lib/components/CompactTrackCard.svelte';
+  import HorizontalScrollRow from '$lib/components/HorizontalScrollRow.svelte';
   import LikeButton from '$lib/components/LikeButton.svelte';
   import LibrarySkeleton from '$lib/components/LibrarySkeleton.svelte';
   import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
@@ -11,13 +18,20 @@
   import { api } from '$lib/api/client';
   import { playQueue } from '$lib/player/store.svelte';
   import type { ApiError } from '$lib/api/client';
-  import type { TrackRef } from '$lib/api/types';
+  import type { ArtistRef, TrackRef } from '$lib/api/types';
 
   const id = $derived(page.params.id ?? '');
   const queryStore = $derived(createArtistQuery(id));
   const query = $derived($queryStore);
   const showSkeleton = useDelayed(() => query.isPending);
 
+  // Secondary sections, lazy-loaded alongside the detail. Each hides itself
+  // when empty (no similarity matches yet / user hasn't played this artist).
+  const similarStore = $derived(createSimilarArtistsQuery(id));
+  const similarQuery = $derived($similarStore);
+  const topTracksStore = $derived(createArtistTopTracksQuery(id));
+  const topTracksQuery = $derived($topTracksStore);
+
   const notFound = $derived(
     query.isError && (query.error as unknown as ApiError | undefined)?.code === 'not_found'
   );
@@ -97,5 +111,30 @@
         {/each}
       </div>
     {/if}
+
+    {#if (topTracksQuery.data?.length ?? 0) > 0}
+      {@const top = topTracksQuery.data ?? []}
+      <section class="space-y-3">
+        <HorizontalScrollRow rows={[top]} title="Top tracks" ariaLabel={`Top tracks for ${detail.name}`}>
+          {#snippet item(track: TrackRef, globalIdx: number)}
+            <CompactTrackCard {track} sectionTracks={top} index={globalIdx} />
+          {/snippet}
+        </HorizontalScrollRow>
+      </section>
+    {/if}
+
+    {#if (similarQuery.data?.length ?? 0) > 0}
+      <section class="space-y-3">
+        <HorizontalScrollRow
+          rows={[similarQuery.data ?? []]}
+          title="Similar artists"
+          ariaLabel="Similar artists"
+        >
+          {#snippet item(artist: ArtistRef)}
+            <div class="w-36"><ArtistCard {artist} /></div>
+          {/snippet}
+        </HorizontalScrollRow>
+      </section>
+    {/if}
   {/if}
 </div>