From 15a545a25cfe68b4642dd00cdaac4fd306344a32 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Mon, 1 Jun 2026 23:24:06 -0400
Subject: [PATCH] feat(web): two-pane now-playing on desktop with permanent
 queue panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 41 ++--------------
 web/src/lib/components/QueueList.svelte   | 57 +++++++++++++++++++++++
 web/src/routes/now-playing/+page.svelte   | 19 +++++++-
 3 files changed, 77 insertions(+), 40 deletions(-)
 create mode 100644 web/src/lib/components/QueueList.svelte

diff --git a/web/src/lib/components/QueueDrawer.svelte b/web/src/lib/components/QueueDrawer.svelte
index 924b3f26..075c52f4 100644
--- a/web/src/lib/components/QueueDrawer.svelte
+++ b/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>
diff --git a/web/src/lib/components/QueueList.svelte b/web/src/lib/components/QueueList.svelte
new file mode 100644
index 00000000..4f5ab7e9
--- /dev/null
+++ b/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>
diff --git a/web/src/routes/now-playing/+page.svelte b/web/src/routes/now-playing/+page.svelte
index ad963b81..03aa9841 100644
--- a/web/src/routes/now-playing/+page.svelte
+++ b/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>