feat(web): make TrackRow click-to-play; pass tracks+index from album page

TrackRow becomes a <button> that dispatches playQueue(tracks, index).
Album page supplies the full track list + each index so the rest of
the album enqueues automatically when the user clicks a track.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

web/src/lib/components/TrackRow.svelte

@@ -1,14 +1,25 @@
 <script lang="ts">
   import type { TrackRef } from '$lib/api/types';
   import { formatDuration } from '$lib/media/duration';
+  import { playQueue } from '$lib/player/store.svelte';
 
-  let { track }: { track: TrackRef } = $props();
+  let { tracks, index }: { tracks: TrackRef[]; index: number } = $props();
+
+  const track = $derived(tracks[index]);
+
+  function onClick() {
+    playQueue(tracks, index);
+  }
 </script>
 
-<div class="grid grid-cols-[32px_1fr_auto] items-center gap-4 px-3 py-2 text-sm odd:bg-surface/50">
+<button
+  type="button"
+  onclick={onClick}
+  class="grid w-full grid-cols-[32px_1fr_auto] items-center gap-4 px-3 py-2 text-left text-sm odd:bg-surface/50 hover:bg-surface focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent"
+>
   <span class="text-right tabular-nums text-text-secondary">
     {track.track_number ?? '—'}
   </span>
   <span class="truncate">{track.title}</span>
   <span class="tabular-nums text-text-secondary">{formatDuration(track.duration_sec)}</span>
-</div>
+</button>

web/src/lib/components/TrackRow.test.ts

@@ -1,31 +1,50 @@
-import { describe, expect, test } from 'vitest';
+import { afterEach, describe, expect, test, vi } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
+import { render, screen, fireEvent } from '@testing-library/svelte';
-import TrackRow from './TrackRow.svelte';
 import type { TrackRef } from '$lib/api/types';
 
-const track: TrackRef = {
+vi.mock('$lib/player/store.svelte', () => ({
-  id: 't1',
+  playQueue: vi.fn()
-  title: 'So What',
+}));
-  album_id: 'xyz',
+
-  album_title: 'Kind of Blue',
+import TrackRow from './TrackRow.svelte';
-  artist_id: 'm-davis',
+import { playQueue } from '$lib/player/store.svelte';
-  artist_name: 'Miles Davis',
+
-  track_number: 1,
+const tracks: TrackRef[] = [
-  disc_number: 1,
+  {
-  duration_sec: 545,
+    id: 't1', title: 'So What',
-  stream_url: '/api/tracks/t1/stream',
+    album_id: 'xyz', album_title: 'Kind of Blue',
-};
+    artist_id: 'm-davis', artist_name: 'Miles Davis',
+    track_number: 1, disc_number: 1,
+    duration_sec: 545, stream_url: '/api/tracks/t1/stream'
+  },
+  {
+    id: 't2', title: 'Freddie Freeloader',
+    album_id: 'xyz', album_title: 'Kind of Blue',
+    artist_id: 'm-davis', artist_name: 'Miles Davis',
+    track_number: 2, disc_number: 1,
+    duration_sec: 565, stream_url: '/api/tracks/t2/stream'
+  }
+];
+
+afterEach(() => vi.clearAllMocks());
 
 describe('TrackRow', () => {
   test('renders track number, title, formatted duration', () => {
-    render(TrackRow, { props: { track } });
+    render(TrackRow, { props: { tracks, index: 0 } });
     expect(screen.getByText('1')).toBeInTheDocument();
     expect(screen.getByText('So What')).toBeInTheDocument();
     expect(screen.getByText('9:05')).toBeInTheDocument();
   });
 
   test('track number falls back to dash when missing', () => {
-    render(TrackRow, { props: { track: { ...track, track_number: undefined } } });
+    const noNum = [{ ...tracks[0], track_number: undefined }];
+    render(TrackRow, { props: { tracks: noNum, index: 0 } });
     expect(screen.getByText('—')).toBeInTheDocument();
   });
+
+  test('clicking the row calls playQueue(tracks, index)', async () => {
+    render(TrackRow, { props: { tracks, index: 1 } });
+    await fireEvent.click(screen.getByRole('button'));
+    expect(playQueue).toHaveBeenCalledWith(tracks, 1);
+  });
 });

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

@@ -69,8 +69,8 @@
       <p class="text-text-secondary">This album has no tracks.</p>
     {:else}
       <div class="overflow-hidden rounded border border-border">
-        {#each album.tracks as track (track.id)}
+        {#each album.tracks as track, i (track.id)}
-          <TrackRow {track} />
+          <TrackRow tracks={album.tracks} index={i} />
         {/each}
       </div>
     {/if}