feat(web): add artist detail page at /artists/:id

Renders the artist name + album count and a responsive AlbumCard grid from the nested ArtistDetail response. 404 surfaces a distinct non-retryable 'not found' state; other errors share the retry banner.
2026-04-23 20:12:57 -04:00
parent 25d44a180c
commit 2e49335aab
2 changed files with 144 additions and 0 deletions
@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import { createArtistQuery } from '$lib/api/queries';
+  import AlbumCard from '$lib/components/AlbumCard.svelte';
+  import LibrarySkeleton from '$lib/components/LibrarySkeleton.svelte';
+  import ApiErrorBanner from '$lib/components/ApiErrorBanner.svelte';
+  import { useDelayed } from '$lib/utils/useDelayed.svelte';
+  import type { ApiError } from '$lib/api/client';
+
+  const id = $derived(page.params.id ?? '');
+  const queryStore = $derived(createArtistQuery(id));
+  const query = $derived($queryStore);
+  const showSkeleton = useDelayed(() => query.isPending);
+
+  const notFound = $derived(
+    query.isError && (query.error as unknown as ApiError | undefined)?.code === 'not_found'
+  );
+</script>
+
+<div class="space-y-4">
+  <a href="/" class="text-sm text-text-secondary hover:text-text-primary">← Library</a>
+
+  {#if notFound}
+    <div role="alert" class="rounded border border-border bg-surface p-4">
+      <p>Artist not found.</p>
+      <a href="/" class="mt-2 inline-block text-sm text-accent">Back to Library</a>
+    </div>
+  {:else if query.isError}
+    <ApiErrorBanner error={query.error} onRetry={query.refetch} />
+  {:else if showSkeleton.value && !query.data}
+    <LibrarySkeleton variant="grid" count={12} />
+  {:else if query.data}
+    {@const detail = query.data}
+    <header>
+      <h1 class="text-2xl font-semibold">{detail.name}</h1>
+      <p class="text-sm text-text-secondary">
+        {detail.album_count} {detail.album_count === 1 ? 'album' : 'albums'}
+      </p>
+    </header>
+
+    {#if detail.albums.length === 0}
+      <p class="text-text-secondary">This artist has no albums in the library.</p>
+    {:else}
+      <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+        {#each detail.albums as album (album.id)}
+          <AlbumCard {album} />
+        {/each}
+      </div>
+    {/if}
+  {/if}
+</div>
@@ -0,0 +1,93 @@
+import { afterEach, describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { flushSync } from 'svelte';
+import { mockQuery } from '../../../test-utils/query';
+import type { ArtistDetail, AlbumRef } from '$lib/api/types';
+
+const state = vi.hoisted(() => ({ pageParams: { id: 'abc' } as Record<string, string> }));
+
+vi.mock('$app/state', () => ({
+  page: {
+    get params() { return state.pageParams; },
+    get url() { return new URL('http://localhost/artists/' + state.pageParams.id); }
+  }
+}));
+
+vi.mock('$lib/api/queries', () => ({
+  qk: { artist: (id: string) => ['artist', id] },
+  createArtistQuery: vi.fn()
+}));
+
+import ArtistPage from './+page.svelte';
+import { createArtistQuery } from '$lib/api/queries';
+
+function album(id: string, title: string, year?: number): AlbumRef {
+  return {
+    id, title,
+    artist_id: 'abc', artist_name: 'Alice',
+    year, track_count: 10, duration_sec: 2400,
+    cover_url: `/api/albums/${id}/cover`
+  };
+}
+
+afterEach(() => {
+  vi.clearAllMocks();
+  state.pageParams = { id: 'abc' };
+});
+
+describe('artist detail page', () => {
+  test('renders artist name, subtitle, and one AlbumCard per album', () => {
+    const detail: ArtistDetail = {
+      id: 'abc', name: 'Alice', album_count: 2,
+      albums: [album('a1', 'First', 2020), album('a2', 'Second')]
+    };
+    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ data: detail }));
+    render(ArtistPage);
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Alice');
+    expect(screen.getByText(/2 albums/i)).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /First/ })).toHaveAttribute('href', '/albums/a1');
+    expect(screen.getByRole('link', { name: /Second/ })).toHaveAttribute('href', '/albums/a2');
+  });
+
+  test('back link points to Library', () => {
+    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
+      data: { id: 'abc', name: 'Alice', album_count: 0, albums: [] }
+    }));
+    render(ArtistPage);
+    const back = screen.getByRole('link', { name: /library/i });
+    expect(back).toHaveAttribute('href', '/');
+  });
+
+  test('404 renders non-retryable "Artist not found" with back link', () => {
+    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
+      isError: true,
+      error: { code: 'not_found', message: 'nope', status: 404 }
+    }));
+    render(ArtistPage);
+    expect(screen.getByText(/artist not found/i)).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /try again/i })).not.toBeInTheDocument();
+  });
+
+  test('non-404 error renders the retry banner', () => {
+    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({
+      isError: true,
+      error: { code: 'server_error', message: 'boom', status: 500 }
+    }));
+    render(ArtistPage);
+    expect(screen.getByRole('alert')).toHaveTextContent('boom');
+    expect(screen.getByRole('button', { name: /try again/i })).toBeInTheDocument();
+  });
+
+  test('pending (after delay) renders the grid skeleton', () => {
+    (createArtistQuery as ReturnType<typeof vi.fn>).mockReturnValue(mockQuery({ isPending: true }));
+    vi.useFakeTimers();
+    try {
+      render(ArtistPage);
+      vi.advanceTimersByTime(200);
+      flushSync();
+      expect(screen.getByTestId('skeleton-grid')).toBeInTheDocument();
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});