From 80b39f1713105a49328351086a1eb0582001c7a1 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sat, 25 Apr 2026 15:37:11 -0400
Subject: [PATCH] feat(web): TrackRow div+role button with onPlay prop and +
 queue button

Outer <button> becomes <div role="button" tabindex="0"> with keyboard
handlers (Enter/Space) so a real <button> for + queue can nest without
invalid HTML. New optional onPlay prop overrides the default
playQueue(tracks, index); used by the search Tracks section to call
playRadio(track.id) instead. + queue button calls enqueueTrack and
stops propagation so the row click does not fire.
---
 web/src/lib/components/TrackRow.svelte  | 50 ++++++++++++++++++++-----
 web/src/lib/components/TrackRow.test.ts | 34 +++++++++++++++--
 2 files changed, 72 insertions(+), 12 deletions(-)

diff --git a/web/src/lib/components/TrackRow.svelte b/web/src/lib/components/TrackRow.svelte
index c5d7144d..5cad7134 100644
--- a/web/src/lib/components/TrackRow.svelte
+++ b/web/src/lib/components/TrackRow.svelte
@@ -1,25 +1,57 @@
 <script lang="ts">
   import type { TrackRef } from '$lib/api/types';
   import { formatDuration } from '$lib/media/duration';
-  import { playQueue } from '$lib/player/store.svelte';
+  import { playQueue, enqueueTrack } from '$lib/player/store.svelte';
 
-  let { tracks, index }: { tracks: TrackRef[]; index: number } = $props();
+  type PlayHandler = (tracks: TrackRef[], index: number) => void;
+
+  let {
+    tracks,
+    index,
+    onPlay
+  }: { tracks: TrackRef[]; index: number; onPlay?: PlayHandler } = $props();
 
   const track = $derived(tracks[index]);
 
-  function onClick() {
-    playQueue(tracks, index);
+  function activate() {
+    if (onPlay) onPlay(tracks, index);
+    else playQueue(tracks, index);
+  }
+
+  function onRowClick() {
+    activate();
+  }
+
+  function onRowKey(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      activate();
+    }
+  }
+
+  function onAddClick(e: MouseEvent) {
+    e.stopPropagation();
+    enqueueTrack(track);
   }
 </script>
 
-<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"
+<div
+  role="button"
+  tabindex="0"
+  aria-label={track.title}
+  onclick={onRowClick}
+  onkeydown={onRowKey}
+  class="grid w-full cursor-pointer grid-cols-[32px_1fr_auto_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>
+  <button
+    type="button"
+    aria-label="Add to queue"
+    onclick={onAddClick}
+    class="rounded p-1 text-text-secondary hover:text-text-primary"
+  >+</button>
   <span class="tabular-nums text-text-secondary">{formatDuration(track.duration_sec)}</span>
-</button>
+</div>
diff --git a/web/src/lib/components/TrackRow.test.ts b/web/src/lib/components/TrackRow.test.ts
index d4648247..9d6de2ac 100644
--- a/web/src/lib/components/TrackRow.test.ts
+++ b/web/src/lib/components/TrackRow.test.ts
@@ -3,11 +3,12 @@ import { render, screen, fireEvent } from '@testing-library/svelte';
 import type { TrackRef } from '$lib/api/types';
 
 vi.mock('$lib/player/store.svelte', () => ({
-  playQueue: vi.fn()
+  playQueue: vi.fn(),
+  enqueueTrack: vi.fn()
 }));
 
 import TrackRow from './TrackRow.svelte';
-import { playQueue } from '$lib/player/store.svelte';
+import { playQueue, enqueueTrack } from '$lib/player/store.svelte';
 
 const tracks: TrackRef[] = [
   {
@@ -44,7 +45,34 @@ describe('TrackRow', () => {
 
   test('clicking the row calls playQueue(tracks, index)', async () => {
     render(TrackRow, { props: { tracks, index: 1 } });
-    await fireEvent.click(screen.getByRole('button'));
+    await fireEvent.click(screen.getByRole('button', { name: /Freddie Freeloader/ }));
     expect(playQueue).toHaveBeenCalledWith(tracks, 1);
   });
+
+  test('Enter on the row activates play', async () => {
+    render(TrackRow, { props: { tracks, index: 0 } });
+    await fireEvent.keyDown(screen.getByRole('button', { name: /So What/ }), { key: 'Enter' });
+    expect(playQueue).toHaveBeenCalledWith(tracks, 0);
+  });
+
+  test('Space on the row activates play', async () => {
+    render(TrackRow, { props: { tracks, index: 0 } });
+    await fireEvent.keyDown(screen.getByRole('button', { name: /So What/ }), { key: ' ' });
+    expect(playQueue).toHaveBeenCalledWith(tracks, 0);
+  });
+
+  test('onPlay prop overrides default playQueue', async () => {
+    const onPlay = vi.fn();
+    render(TrackRow, { props: { tracks, index: 1, onPlay } });
+    await fireEvent.click(screen.getByRole('button', { name: /Freddie Freeloader/ }));
+    expect(onPlay).toHaveBeenCalledWith(tracks, 1);
+    expect(playQueue).not.toHaveBeenCalled();
+  });
+
+  test('+ queue button calls enqueueTrack and does NOT trigger row play', async () => {
+    render(TrackRow, { props: { tracks, index: 0 } });
+    await fireEvent.click(screen.getByRole('button', { name: /add to queue/i }));
+    expect(enqueueTrack).toHaveBeenCalledWith(tracks[0]);
+    expect(playQueue).not.toHaveBeenCalled();
+  });
 });