From d83b3eab25cc29af2d3bd2c0c4d61c07790774bb Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 3 May 2026 22:14:59 -0400
Subject: [PATCH] fix(web/m7-364): TrackRef field shape + seek-on-restore +
 drawer inert
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CI svelte-check failed on 5 type errors caused by the slice using
duration_ms/album_name fields that don't exist on TrackRef (the real
shape uses duration_sec + album_id/album_title). Fixed across
QueueDrawer, QueueDrawer.test, QueueTrackRow.test, persisted.test,
and the inline `state.current = null` in PlayerBar.test (TrackRef |
undefined, not | null).

Final whole-slice review concerns also rolled in:

- C1 (Critical): persisted position was restored to UI but never
  seeked into the audio element — first timeupdate snapped _position
  back to 0. Added a one-shot _pendingRestorePosition module ref +
  consumePendingRestorePosition() export; layout's loadedmetadata
  handler now seeks once on restore.

- I1 (Important): throttled-write effect now wraps _queue / _index
  reads in untrack so the dependency tracking matches the design
  intent. Position remains the only tracked dep.

- I4 (Important): drawer gets inert={!queueDrawerOpen} so its inner
  buttons drop out of tab order when closed (aria-hidden alone
  doesn't do that). Removed redundant role="complementary" from
  <aside> (implied by the element). New test asserts inert binding.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/src/lib/components/PlayerBar.test.ts     |  2 +-
 web/src/lib/components/QueueDrawer.svelte    |  8 +++-----
 web/src/lib/components/QueueDrawer.test.ts   | 19 +++++++++++++++----
 web/src/lib/components/QueueTrackRow.test.ts |  8 +++++---
 web/src/lib/player/persisted.test.ts         |  8 +++++---
 web/src/lib/player/store.svelte.ts           | 16 ++++++++++++++--
 web/src/routes/+layout.svelte                | 12 ++++++++++--
 7 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/web/src/lib/components/PlayerBar.test.ts b/web/src/lib/components/PlayerBar.test.ts
index 1309cb75..d6ad0941 100644
--- a/web/src/lib/components/PlayerBar.test.ts
+++ b/web/src/lib/components/PlayerBar.test.ts
@@ -234,7 +234,7 @@ describe('PlayerBar', () => {
 
     test('omits the line when queue is empty', () => {
       state.queue = [];
-      state.current = null;
+      state.current = undefined;
       state.index = 0;
       render(PlayerBar);
       expect(screen.queryByText(/^Next ·/i)).not.toBeInTheDocument();
diff --git a/web/src/lib/components/QueueDrawer.svelte b/web/src/lib/components/QueueDrawer.svelte
index f0e1bf58..a69b41db 100644
--- a/web/src/lib/components/QueueDrawer.svelte
+++ b/web/src/lib/components/QueueDrawer.svelte
@@ -3,10 +3,8 @@
   import { player, closeQueueDrawer } from '$lib/player/store.svelte';
   import QueueTrackRow from './QueueTrackRow.svelte';
 
-  function totalDurationLabel(tracks: { duration_ms: number }[]): string {
-    const totalSec = Math.floor(
-      tracks.reduce((s, tr) => s + (tr.duration_ms ?? 0), 0) / 1000
-    );
+  function totalDurationLabel(tracks: { duration_sec: number }[]): string {
+    const totalSec = tracks.reduce((s, tr) => s + (tr.duration_sec ?? 0), 0);
     const m = Math.floor(totalSec / 60);
     const h = Math.floor(m / 60);
     return h > 0 ? `${h}h ${m % 60}m` : `${m} min`;
@@ -23,9 +21,9 @@
 {/if}
 
 <aside
-  role="complementary"
   aria-label="Playback queue"
   aria-hidden={!player.queueDrawerOpen}
+  inert={!player.queueDrawerOpen}
   class="fixed top-0 right-0 h-full w-full sm:w-96 bg-surface z-50
          transition-transform duration-200 flex flex-col
          {player.queueDrawerOpen ? 'translate-x-0' : 'translate-x-full'}"
diff --git a/web/src/lib/components/QueueDrawer.test.ts b/web/src/lib/components/QueueDrawer.test.ts
index 17107e96..dcf09c70 100644
--- a/web/src/lib/components/QueueDrawer.test.ts
+++ b/web/src/lib/components/QueueDrawer.test.ts
@@ -25,11 +25,13 @@ vi.mock('$lib/player/store.svelte', () => ({
 const t = (id: string): TrackRef => ({
   id,
   title: `Song ${id}`,
+  album_id: `al-${id}`,
+  album_title: 'A',
+  artist_id: `ar-${id}`,
   artist_name: `Artist ${id}`,
-  album_name: 'A',
-  duration_ms: 200000,
+  duration_sec: 200,
   stream_url: `/stream/${id}`
-} as TrackRef);
+});
 
 describe('QueueDrawer', () => {
   beforeEach(() => {
@@ -77,7 +79,16 @@ describe('QueueDrawer', () => {
     openValue = false;
     queueValue = [t('a')];
     render(QueueDrawer);
-    const aside = screen.getByRole('complementary', { hidden: true });
+    const aside = screen.getByLabelText(/playback queue/i, { hidden: true });
     expect(aside).toHaveAttribute('aria-hidden', 'true');
   });
+
+  it('drawer has inert attribute when closed', () => {
+    openValue = false;
+    queueValue = [t('a')];
+    render(QueueDrawer);
+    const aside = document.querySelector('aside[aria-label="Playback queue"]');
+    expect(aside).not.toBeNull();
+    expect(aside!.hasAttribute('inert')).toBe(true);
+  });
 });
diff --git a/web/src/lib/components/QueueTrackRow.test.ts b/web/src/lib/components/QueueTrackRow.test.ts
index 8b423427..c2cb0c48 100644
--- a/web/src/lib/components/QueueTrackRow.test.ts
+++ b/web/src/lib/components/QueueTrackRow.test.ts
@@ -16,11 +16,13 @@ vi.mock('$lib/player/store.svelte', () => ({
 const sampleTrack: TrackRef = {
   id: 't1',
   title: 'Song Title',
+  album_id: 'al1',
+  album_title: 'Album',
+  artist_id: 'ar1',
   artist_name: 'Artist Name',
-  album_name: 'Album',
-  duration_ms: 200000,
+  duration_sec: 200,
   stream_url: '/stream/t1'
-} as TrackRef;
+};
 
 describe('QueueTrackRow', () => {
   beforeEach(() => {
diff --git a/web/src/lib/player/persisted.test.ts b/web/src/lib/player/persisted.test.ts
index 032631c3..b5e00695 100644
--- a/web/src/lib/player/persisted.test.ts
+++ b/web/src/lib/player/persisted.test.ts
@@ -5,11 +5,13 @@ import type { TrackRef } from '$lib/api/types';
 const sampleTrack: TrackRef = {
   id: 't1',
   title: 'Foo',
+  album_id: 'al1',
+  album_title: 'Baz',
+  artist_id: 'ar1',
   artist_name: 'Bar',
-  album_name: 'Baz',
-  duration_ms: 200000,
+  duration_sec: 200,
   stream_url: '/stream/t1'
-} as TrackRef;
+};
 
 describe('persisted queue', () => {
   beforeEach(() => {
diff --git a/web/src/lib/player/store.svelte.ts b/web/src/lib/player/store.svelte.ts
index be683a72..649d482c 100644
--- a/web/src/lib/player/store.svelte.ts
+++ b/web/src/lib/player/store.svelte.ts
@@ -32,6 +32,11 @@ let _repeat   = $state<RepeatMode>('off');
 let _error    = $state<string | null>(null);
 let _queueDrawerOpen = $state(false);
 
+// C1: one-shot restore position — set by restoreQueue, consumed once by
+// the layout's loadedmetadata handler so the audio element seeks to the
+// saved position after metadata loads.
+let _pendingRestorePosition: number | null = null;
+
 // M4c: track when the queue was seeded by a radio call so we can
 // auto-refresh at 80% consumption. Cleared when the user enqueues
 // from a non-radio source.
@@ -330,12 +335,19 @@ export function restoreQueue(userId: string): void {
   _queue = persisted.queue;
   _index = Math.max(0, Math.min(persisted.index, persisted.queue.length - 1));
   _position = persisted.position;
+  _pendingRestorePosition = persisted.position;
   _duration = 0;
   _state = 'paused';
   _error = null;
   _radioSeedId = null;
 }
 
+export function consumePendingRestorePosition(): number | null {
+  const p = _pendingRestorePosition;
+  _pendingRestorePosition = null;
+  return p;
+}
+
 // M4c: auto-refresh radio queue when 80% consumed.
 // Fires whenever the consumption ratio crosses 80% AND the queue was
 // seeded by playRadio() AND no refresh is currently in-flight.
@@ -408,8 +420,8 @@ $effect.root(() => {
     const now = Date.now();
     if (now - lastPositionWriteAt < 5000) return;
     writePersistedQueue(userId, {
-      queue: _queue,
-      index: _index,
+      queue: untrack(() => _queue),
+      index: untrack(() => _index),
       position: _position
     });
     lastPositionWriteAt = now;
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 43ca6524..89c49961 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -13,7 +13,8 @@
     reportDuration,
     reportStateFromAudio,
     player,
-    closeQueueDrawer
+    closeQueueDrawer,
+    consumePendingRestorePosition
   } from '$lib/player/store.svelte';
   import { useMediaSession } from '$lib/player/mediaSession.svelte';
   import { useEventsDispatcher } from '$lib/player/events.svelte';
@@ -86,7 +87,14 @@
   bind:this={audioEl}
   preload="metadata"
   ontimeupdate={() => audioEl && reportTimeUpdate(audioEl.currentTime)}
-  onloadedmetadata={() => audioEl && reportDuration(audioEl.duration)}
+  onloadedmetadata={() => {
+    if (!audioEl) return;
+    reportDuration(audioEl.duration);
+    const restorePos = consumePendingRestorePosition();
+    if (restorePos !== null) {
+      audioEl.currentTime = restorePos;
+    }
+  }}
   onplaying={() => reportStateFromAudio('playing')}
   onpause={() => reportStateFromAudio('paused')}
   onwaiting={() => reportStateFromAudio('waiting')}