From 723293110d2b0c29eb2bba3ef9b17f04544d02ba Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Wed, 22 Jul 2026 21:24:29 -0400
Subject: [PATCH] =?UTF-8?q?feat(player):=20scroll=20web=20queue=20to=20now?=
 =?UTF-8?q?-playing=20track=20on=20open=20(Android=20parity)=20=E2=80=94?=
 =?UTF-8?q?=20#1931?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

QueueList gains an `active` prop; when it flips true (drawer opens) or on mount
(now-playing panel) it centers the current row in view. Index/length are read
untracked so it positions once per open rather than following auto-advance,
matching the Android queue. QueueDrawer passes active={queueDrawerOpen} since
its aside is always mounted.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web/src/lib/components/QueueDrawer.svelte |  6 +++++-
 web/src/lib/components/QueueList.svelte   | 26 +++++++++++++++++++++--
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/QueueDrawer.svelte b/web/src/lib/components/QueueDrawer.svelte
index 075c52f4..fbf6d78b 100644
--- a/web/src/lib/components/QueueDrawer.svelte
+++ b/web/src/lib/components/QueueDrawer.svelte
@@ -35,5 +35,9 @@
          transition-transform duration-200
          {player.queueDrawerOpen ? 'translate-x-0' : 'translate-x-full'}"
 >
-  <QueueList onClose={() => closeQueueDrawer()} bind:closeButtonRef={closeButton} />
+  <QueueList
+    onClose={() => closeQueueDrawer()}
+    active={player.queueDrawerOpen}
+    bind:closeButtonRef={closeButton}
+  />
 </aside>
diff --git a/web/src/lib/components/QueueList.svelte b/web/src/lib/components/QueueList.svelte
index 4f5ab7e9..1fb2dd48 100644
--- a/web/src/lib/components/QueueList.svelte
+++ b/web/src/lib/components/QueueList.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { untrack } from 'svelte';
   import { X } from 'lucide-svelte';
   import { player } from '$lib/player/store.svelte';
   import QueueTrackRow from './QueueTrackRow.svelte';
@@ -8,12 +9,33 @@
   //   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.
+  // active: true when the queue is on-screen (drawer open, or the always-
+  //   visible now-playing panel). Flipping it true scrolls the now-playing
+  //   row into view — parity with the Android queue, which opens positioned
+  //   on the current track.
   type Props = {
     onClose?: () => void;
     closeButtonRef?: HTMLButtonElement;
+    active?: boolean;
   };
 
-  let { onClose, closeButtonRef = $bindable() }: Props = $props();
+  let { onClose, closeButtonRef = $bindable(), active = true }: Props = $props();
+
+  let scrollBody: HTMLElement | undefined = $state();
+
+  // When the queue becomes visible, center the now-playing row in view. The
+  // index/length are read untracked so this fires once per open (matching the
+  // Android queue's open-positioned behavior) rather than following the track
+  // as it auto-advances. Deferred a frame so the drawer's slide-in has settled.
+  $effect(() => {
+    if (!active || !scrollBody) return;
+    const body = scrollBody;
+    const index = untrack(() => player.index);
+    if (untrack(() => player.queue.length) === 0) return;
+    requestAnimationFrame(() => {
+      (body.children[index] as HTMLElement | undefined)?.scrollIntoView({ block: 'center' });
+    });
+  });
 
   function totalDurationLabel(tracks: { duration_sec: number }[]): string {
     const totalSec = tracks.reduce((s, tr) => s + (tr.duration_sec ?? 0), 0);
@@ -45,7 +67,7 @@
     {/if}
   </div>
 
-  <div class="flex-1 overflow-y-auto">
+  <div bind:this={scrollBody} 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}