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.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();
+    });
+  });
 });