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/routes/now-playing/+page.svelte

@@ -16,6 +16,7 @@
   import { FALLBACK_COVER, coverUrl } from '$lib/media/covers';
   import { useSmoothPosition } from '$lib/player/smoothPosition.svelte';
   import LikeButton from '$lib/components/LikeButton.svelte';
+  import QueueList from '$lib/components/QueueList.svelte';
   import { pageTitle } from '$lib/branding';
 
   const current = $derived(player.current);
@@ -89,7 +90,13 @@
       </p>
     </div>
   {:else}
-    <main class="flex flex-1 flex-col items-center justify-center gap-6 px-4 pb-6">
+    <!-- At lg+ the player splits into two panes: the focus column on
+         the left and a permanent Queue panel on the right. Below lg
+         the queue stays in the slide-in QueueDrawer (toggle button in
+         the bottom row). Wide-screen viewers get queue context without
+         opening a drawer; mobile keeps the focused single-column flow. -->
+    <main class="flex flex-1 overflow-hidden">
+      <section class="flex flex-1 flex-col items-center justify-center gap-6 px-4 pb-6 overflow-y-auto">
       <div class="aspect-square w-full max-w-md overflow-hidden rounded-lg bg-surface-hover shadow-lg">
         <img
           src={coverUrl(current.album_id)}
@@ -235,12 +242,20 @@
           aria-label="Open queue"
           class="flex items-center gap-1.5 rounded px-3 py-2 min-h-[44px]
                  text-text-secondary hover:text-text-primary
-                 focus-visible:ring-2 focus-visible:ring-accent"
+                 focus-visible:ring-2 focus-visible:ring-accent
+                 lg:hidden"
         >
           <ListMusic size={20} strokeWidth={1.5} />
           <span class="text-sm tabular-nums">{player.queue.length}</span>
         </button>
       </div>
+      </section>
+      <aside
+        aria-label="Queue"
+        class="hidden lg:flex w-96 xl:w-[28rem] flex-col border-l border-border bg-surface"
+      >
+        <QueueList />
+      </aside>
     </main>
   {/if}
 </div>