From 5177320418c261db9edc3b4c767f12f831f32c6d Mon Sep 17 00:00:00 2001
From: root <root@opencode.lan>
Date: Mon, 6 Apr 2026 15:31:24 +0500
Subject: [PATCH] feat(player): scroll chapter list to current chapter on open

Use a Svelte action on each chapter button that calls scrollIntoView with
behavior:'instant' so the list opens centred on the active chapter with
no visible scroll animation.
---
 ui/src/lib/components/ListeningMode.svelte | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/ui/src/lib/components/ListeningMode.svelte b/ui/src/lib/components/ListeningMode.svelte
index e9cb86c..eb016ea 100644
--- a/ui/src/lib/components/ListeningMode.svelte
+++ b/ui/src/lib/components/ListeningMode.svelte
@@ -34,6 +34,14 @@
 
 	// ── Chapter search ────────────────────────────────────────────────────────
 	let chapterSearch = $state('');
+
+	// Scroll the current chapter into view instantly (no animation) when the
+	// chapter modal opens. Applied to every chapter button; only scrolls when
+	// the chapter number matches the currently playing one. Runs once on mount
+	// before the browser paints so no scroll animation is ever visible.
+	function scrollIfActive(node: HTMLElement, isActive: boolean) {
+		if (isActive) node.scrollIntoView({ block: 'center', behavior: 'instant' });
+	}
 	const filteredChapters = $derived(
 		chapterSearch.trim() === ''
 			? audioStore.chapters
@@ -386,11 +394,12 @@
 			</div>
 			<!-- Chapter list -->
 			<div class="flex-1 overflow-y-auto">
-				{#each filteredChapters as ch (ch.number)}
-					<button
-						type="button"
-						onclick={() => playChapter(ch.number)}
-						class={cn(
+			{#each filteredChapters as ch (ch.number)}
+				<button
+					type="button"
+					onclick={() => playChapter(ch.number)}
+					use:scrollIfActive={ch.number === audioStore.chapter}
+					class={cn(
 							'w-full flex items-center gap-3 px-4 py-3 border-b border-(--color-border)/40 transition-colors text-left',
 							ch.number === audioStore.chapter ? 'bg-(--color-brand)/8' : 'hover:bg-(--color-surface-2)'
 						)}