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>

web/src/lib/components/QueueList.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { X } from 'lucide-svelte';
+  import { player } from '$lib/player/store.svelte';
+  import QueueTrackRow from './QueueTrackRow.svelte';
+
+  // onClose: when provided, renders an X button in the header so the
+  //   slide-in drawer can dismiss itself. The embedded panel on the
+  //   now-playing route (visible at lg+ widths) omits it.
+  // closeButtonRef: bind:this hook so the drawer can focus the X for
+  //   keyboard users on open.
+  type Props = {
+    onClose?: () => void;
+    closeButtonRef?: HTMLButtonElement;
+  };
+
+  let { onClose, closeButtonRef = $bindable() }: Props = $props();
+
+  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`;
+  }
+</script>
+
+<div class="flex h-full flex-col">
+  <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>
+    {#if onClose}
+      <button
+        type="button"
+        bind:this={closeButtonRef}
+        aria-label="Close queue"
+        onclick={onClose}
+        class="text-text-secondary hover:text-text-primary"
+      >
+        <X size={20} />
+      </button>
+    {/if}
+  </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>
+</div>

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>