From 36805914d830a61a2a45a710495bb59016911243 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 3 May 2026 21:50:14 -0400
Subject: [PATCH] feat(web/m7-364): PlayerBar queue toggle + Up next line

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/src/lib/components/PlayerBar.svelte  | 23 +++++++-
 web/src/lib/components/PlayerBar.test.ts | 74 ++++++++++++++++++++----
 2 files changed, 84 insertions(+), 13 deletions(-)

diff --git a/web/src/lib/components/PlayerBar.svelte b/web/src/lib/components/PlayerBar.svelte
index e488f51b..062fb2f4 100644
--- a/web/src/lib/components/PlayerBar.svelte
+++ b/web/src/lib/components/PlayerBar.svelte
@@ -2,12 +2,14 @@
   import {
     SkipBack, SkipForward, Play, Pause, Loader2,
     Shuffle, Repeat, Repeat1,
-    Volume2, Volume1, VolumeX
+    Volume2, Volume1, VolumeX,
+    ListMusic
   } from 'lucide-svelte';
   import {
     player,
     togglePlay, skipNext, skipPrev, seekTo, setVolume,
-    toggleShuffle, cycleRepeat, playQueue
+    toggleShuffle, cycleRepeat, playQueue,
+    toggleQueueDrawer
   } from '$lib/player/store.svelte';
   import { formatDuration } from '$lib/media/duration';
   import { FALLBACK_COVER } from '$lib/media/covers';
@@ -69,6 +71,12 @@
         >
           {current.artist_name}
         </a>
+        {#if player.queue.length > player.index + 1}
+          {@const nextTrack = player.queue[player.index + 1]}
+          <span class="text-text-secondary text-xs truncate block">
+            Next · {nextTrack.title} — {nextTrack.artist_name}
+          </span>
+        {/if}
       </div>
       <LikeButton entityType="track" entityId={current.id} />
       <TrackMenu track={current} direction="up" hideQueueActions />
@@ -177,6 +185,17 @@
           <Repeat size={18} strokeWidth={1.5} />
         {/if}
       </button>
+      <button
+        type="button"
+        onclick={() => toggleQueueDrawer()}
+        aria-label={player.queueDrawerOpen ? 'Close queue' : 'Open queue'}
+        aria-pressed={player.queueDrawerOpen}
+        class="flex h-9 w-9 items-center justify-center rounded-full transition-colors {player.queueDrawerOpen
+          ? 'bg-action-secondary text-action-fg'
+          : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary'}"
+      >
+        <ListMusic size={20} strokeWidth={1.5} />
+      </button>
       <label class="flex items-center gap-1.5">
         <span class="sr-only">Volume</span>
         <VolumeIcon size={18} strokeWidth={1.5} class="shrink-0 text-text-secondary" />
diff --git a/web/src/lib/components/PlayerBar.test.ts b/web/src/lib/components/PlayerBar.test.ts
index f36fbf5a..1309cb75 100644
--- a/web/src/lib/components/PlayerBar.test.ts
+++ b/web/src/lib/components/PlayerBar.test.ts
@@ -14,7 +14,8 @@ const state = vi.hoisted(() => ({
   volume: 1,
   shuffle: false,
   repeat: 'off' as 'off' | 'all' | 'one',
-  error: null as string | null
+  error: null as string | null,
+  queueDrawerOpen: false
 }));
 
 vi.mock('$lib/player/store.svelte', () => ({
@@ -29,16 +30,18 @@ vi.mock('$lib/player/store.svelte', () => ({
     get volume()    { return state.volume; },
     get shuffle()   { return state.shuffle; },
     get repeat()    { return state.repeat; },
-    get error()     { return state.error; }
+    get error()           { return state.error; },
+    get queueDrawerOpen() { return state.queueDrawerOpen; }
   },
-  togglePlay:    vi.fn(),
-  skipNext:      vi.fn(),
-  skipPrev:      vi.fn(),
-  seekTo:        vi.fn(),
-  setVolume:     vi.fn(),
-  toggleShuffle: vi.fn(),
-  cycleRepeat:   vi.fn(),
-  playQueue:     vi.fn()
+  togglePlay:        vi.fn(),
+  skipNext:          vi.fn(),
+  skipPrev:          vi.fn(),
+  seekTo:            vi.fn(),
+  setVolume:         vi.fn(),
+  toggleShuffle:     vi.fn(),
+  cycleRepeat:       vi.fn(),
+  playQueue:         vi.fn(),
+  toggleQueueDrawer: vi.fn()
 }));
 
 vi.mock('$lib/api/likes', () => ({
@@ -66,7 +69,8 @@ vi.mock('@tanstack/svelte-query', async (orig) => {
 import PlayerBar from './PlayerBar.svelte';
 import {
   togglePlay, skipNext, skipPrev, seekTo, setVolume,
-  toggleShuffle, cycleRepeat, playQueue
+  toggleShuffle, cycleRepeat, playQueue,
+  toggleQueueDrawer
 } from '$lib/player/store.svelte';
 
 function track(): TrackRef {
@@ -90,6 +94,7 @@ beforeEach(() => {
   state.shuffle = false;
   state.repeat = 'off';
   state.error = null;
+  state.queueDrawerOpen = false;
 });
 
 afterEach(() => vi.clearAllMocks());
@@ -188,4 +193,51 @@ describe('PlayerBar', () => {
       screen.getByRole('button', { name: /track actions for/i })
     ).toBeInTheDocument();
   });
+
+  describe('queue toggle button', () => {
+    test('clicking the queue toggle calls toggleQueueDrawer', async () => {
+      render(PlayerBar);
+      const btn = screen.getByLabelText(/(open|close) queue/i);
+      await fireEvent.click(btn);
+      expect(toggleQueueDrawer).toHaveBeenCalled();
+    });
+
+    test('aria-pressed reflects queueDrawerOpen state', () => {
+      state.queueDrawerOpen = true;
+      render(PlayerBar);
+      const btn = screen.getByLabelText(/close queue/i);
+      expect(btn).toHaveAttribute('aria-pressed', 'true');
+    });
+  });
+
+  describe('"Up next" line', () => {
+    test('renders the next track title when index + 1 < queue.length', () => {
+      state.queue = [
+        { id: 'a', title: 'Track A', artist_name: 'Art A' } as TrackRef,
+        { id: 'b', title: 'Track B', artist_name: 'Art B' } as TrackRef
+      ];
+      state.index = 0;
+      state.current = state.queue[0];
+      render(PlayerBar);
+      expect(screen.getByText(/track b/i)).toBeInTheDocument();
+    });
+
+    test('omits the line on the last track in queue', () => {
+      state.queue = [
+        { id: 'a', title: 'Track A', artist_name: 'Art A' } as TrackRef
+      ];
+      state.index = 0;
+      state.current = state.queue[0];
+      render(PlayerBar);
+      expect(screen.queryByText(/^Next ·/i)).not.toBeInTheDocument();
+    });
+
+    test('omits the line when queue is empty', () => {
+      state.queue = [];
+      state.current = null;
+      state.index = 0;
+      render(PlayerBar);
+      expect(screen.queryByText(/^Next ·/i)).not.toBeInTheDocument();
+    });
+  });
 });