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

web/src/routes/artists/[id]/artist.test.ts

@@ -1,4 +1,4 @@
-import { afterEach, describe, expect, test, vi } from 'vitest';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/svelte';
 import { flushSync } from 'svelte';
 import { mockQuery } from '../../../test-utils/query';
@@ -16,13 +16,19 @@ vi.mock('$app/state', () => ({
 
 vi.mock('$lib/api/queries', () => ({
   qk: { artist: (id: string) => ['artist', id] },
-  createArtistQuery: vi.fn()
+  createArtistQuery: vi.fn(),
+  createSimilarArtistsQuery: vi.fn(),
+  createArtistTopTracksQuery: vi.fn()
 }));
 
 vi.mock('$lib/api/likes', () => emptyLikesMock());
 
 import ArtistPage from './+page.svelte';
-import { createArtistQuery } from '$lib/api/queries';
+import {
+  createArtistQuery,
+  createSimilarArtistsQuery,
+  createArtistTopTracksQuery
+} from '$lib/api/queries';
 
 function album(id: string, title: string, year?: number): AlbumRef {
   return {
@@ -40,6 +46,13 @@ afterEach(() => {
   state.pageParams = { id: 'abc' };
 });
 
+beforeEach(() => {
+  // Secondary sections default to empty so the existing album-grid assertions
+  // are unaffected; individual tests can override to exercise the new strips.
+  (createSimilarArtistsQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: [] }));
+  (createArtistTopTracksQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: [] }));
+});
+
 describe('artist detail page', () => {
   test('renders artist name, subtitle, and one AlbumCard per album', () => {
     const detail: ArtistDetail = {
@@ -54,6 +67,28 @@ describe('artist detail page', () => {
     expect(screen.getByRole('link', { name: /Second/ })).toHaveAttribute('href', '/albums/a2');
   });
 
+  test('renders top-tracks panel and similar-artists strip when present', () => {
+    const detail: ArtistDetail = {
+      id: 'abc', name: 'Alice', sort_name: 'Alice', album_count: 1, cover_url: '',
+      albums: [album('a1', 'First', 2020)]
+    };
+    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: detail }));
+    (createArtistTopTracksQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
+      data: [{
+        id: 't1', title: 'Hit Song', album_id: 'a1', album_title: 'First',
+        artist_id: 'abc', artist_name: 'Alice', duration_sec: 200, stream_url: '/s/t1'
+      }]
+    }));
+    (createSimilarArtistsQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
+      data: [{ id: 'sim1', name: 'Bob', sort_name: 'Bob', album_count: 2, cover_url: '' }]
+    }));
+    render(ArtistPage);
+    expect(screen.getByText(/top tracks/i)).toBeInTheDocument();
+    expect(screen.getByText('Hit Song')).toBeInTheDocument();
+    expect(screen.getByText(/similar artists/i)).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /Bob/ })).toHaveAttribute('href', '/artists/sim1');
+  });
+
   test('back link points to Library', () => {
     (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
       data: { id: 'abc', name: 'Alice', sort_name: 'Alice', album_count: 0, cover_url: '', albums: [] }