feat(web): two-pane now-playing on desktop with permanent queue panel

The full player previously sat dead-center on wide viewports — cover
+ controls capped at max-w-md left the right two-thirds of the screen
empty while the queue remained behind a drawer toggle. Split the
layout at lg+:

- Extract QueueList from QueueDrawer (header + count + scrollable
  list body + empty state); the drawer now wraps QueueList for its
  slide-in chrome, and the now-playing route embeds it directly.
- now-playing: at lg+ render the player as a left section + a 384px
  (xl: 448px) aside with QueueList. Below lg the layout is unchanged
  single-column and the drawer toggle in the bottom row still opens
  it (lg:hidden on the toggle button keeps it out of the way once
  the panel is permanent).
- QueueList owns the close X conditionally — drawer passes onClose
  and the bind:closeButtonRef for focus management; embedded panel
  omits both since it has no dismiss action.

QueueTrackRow's drag-to-reorder, click-to-jump, and current-row
highlight all carry over for free since they're owned by the row
component.

web/src/lib/components/QueueDrawer.svelte

@@ -1,18 +1,10 @@
 <script lang="ts">
-  import { X } from 'lucide-svelte';
   import { player, closeQueueDrawer } from '$lib/player/store.svelte';
-  import QueueTrackRow from './QueueTrackRow.svelte';
+  import QueueList from './QueueList.svelte';
 
   let previouslyFocused: HTMLElement | null = null;
   let closeButton: HTMLButtonElement | undefined = $state();
 
-  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`;
-  }
-
   $effect(() => {
     if (player.queueDrawerOpen) {
       previouslyFocused = document.activeElement as HTMLElement | null;
@@ -40,35 +32,8 @@
   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
+         transition-transform duration-200
          {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"
-      bind:this={closeButton}
-      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>
+  <QueueList onClose={() => closeQueueDrawer()} bind:closeButtonRef={closeButton} />
 </aside>