feat(web/m7-364): QueueDrawer side-panel with track list

2026-05-03 21:47:33 -04:00
parent e164d69492
commit b99eb5f120
2 changed files with 143 additions and 0 deletions
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { X } from 'lucide-svelte';
+  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
+    );
+    const m = Math.floor(totalSec / 60);
+    const h = Math.floor(m / 60);
+    return h > 0 ? `${h}h ${m % 60}m` : `${m} min`;
+  }
+</script>
+
+{#if player.queueDrawerOpen}
+  <button
+    type="button"
+    aria-label="Close queue backdrop"
+    class="fixed inset-0 bg-obsidian/40 z-40"
+    onclick={() => closeQueueDrawer()}
+  ></button>
+{/if}
+
+<aside
+  role="complementary"
+  aria-label="Playback queue"
+  aria-hidden={!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'}"
+>
+  <div class="flex items-center justify-between border-b border-border px-4 py-3">
+    <div>
+      <h2 class="text-lg font-semibold">Queue</h2>
+      <p class="text-xs text-text-secondary">
+        {player.queue.length} {player.queue.length === 1 ? 'track' : 'tracks'}
+        {#if player.queue.length > 0} · {totalDurationLabel(player.queue)}{/if}
+      </p>
+    </div>
+    <button
+      type="button"
+      aria-label="Close queue"
+      onclick={() => closeQueueDrawer()}
+      class="text-text-secondary hover:text-text-primary"
+    >
+      <X size={20} />
+    </button>
+  </div>
+
+  <div class="flex-1 overflow-y-auto">
+    {#if player.queue.length === 0}
+      <p class="text-text-secondary text-center p-8">No tracks queued.</p>
+    {:else}
+      {#each player.queue as track, i (track.id)}
+        <QueueTrackRow {track} index={i} isCurrent={i === player.index} />
+      {/each}
+    {/if}
+  </div>
+</aside>
@@ -0,0 +1,83 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import QueueDrawer from './QueueDrawer.svelte';
+import type { TrackRef } from '$lib/api/types';
+
+const closeQueueDrawer = vi.fn();
+let queueValue: TrackRef[] = [];
+let indexValue = 0;
+let openValue = true;
+
+vi.mock('$lib/player/store.svelte', () => ({
+  closeQueueDrawer: (...args: unknown[]) => closeQueueDrawer(...args),
+  player: {
+    get queue() { return queueValue; },
+    get index() { return indexValue; },
+    get queueDrawerOpen() { return openValue; }
+  },
+  // QueueTrackRow imports these from the store; provide stubs so its
+  // module-load doesn't break when QueueDrawer renders rows.
+  playFromQueueIndex: vi.fn(),
+  removeFromQueue: vi.fn(),
+  moveQueueItem: vi.fn()
+}));
+
+const t = (id: string): TrackRef => ({
+  id,
+  title: `Song ${id}`,
+  artist_name: `Artist ${id}`,
+  album_name: 'A',
+  duration_ms: 200000,
+  stream_url: `/stream/${id}`
+} as TrackRef);
+
+describe('QueueDrawer', () => {
+  beforeEach(() => {
+    closeQueueDrawer.mockClear();
+    queueValue = [];
+    indexValue = 0;
+    openValue = true;
+  });
+
+  it('renders Queue title and track-count summary', () => {
+    queueValue = [t('a'), t('b'), t('c')];
+    render(QueueDrawer);
+    expect(screen.getByText(/^Queue$/i)).toBeInTheDocument();
+    expect(screen.getByText(/3 tracks/i)).toBeInTheDocument();
+  });
+
+  it('renders one row per queue entry', () => {
+    queueValue = [t('a'), t('b')];
+    render(QueueDrawer);
+    expect(screen.getByText('Song a')).toBeInTheDocument();
+    expect(screen.getByText('Song b')).toBeInTheDocument();
+  });
+
+  it('shows empty-state copy when queue is empty', () => {
+    queueValue = [];
+    render(QueueDrawer);
+    expect(screen.getByText(/no tracks queued/i)).toBeInTheDocument();
+  });
+
+  it('clicking the close button calls closeQueueDrawer', async () => {
+    render(QueueDrawer);
+    const close = screen.getByLabelText(/close queue/i);
+    await fireEvent.click(close);
+    expect(closeQueueDrawer).toHaveBeenCalled();
+  });
+
+  it('clicking the backdrop calls closeQueueDrawer', async () => {
+    render(QueueDrawer);
+    const backdrop = screen.getByLabelText(/close queue backdrop/i);
+    await fireEvent.click(backdrop);
+    expect(closeQueueDrawer).toHaveBeenCalled();
+  });
+
+  it('drawer is hidden (aria-hidden=true) when queueDrawerOpen is false', () => {
+    openValue = false;
+    queueValue = [t('a')];
+    render(QueueDrawer);
+    const aside = screen.getByRole('complementary', { hidden: true });
+    expect(aside).toHaveAttribute('aria-hidden', 'true');
+  });
+});