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

@@ -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)'
 						)}

ui/src/routes/+layout.svelte

@@ -2,7 +2,7 @@
 	import '../app.css';
 	import { page, navigating } from '$app/state';
 	import { goto } from '$app/navigation';
-	import { setContext } from 'svelte';
+	import { setContext, untrack } from 'svelte';
 	import type { Snippet } from 'svelte';
 	import type { LayoutData } from './$types';
 	import { audioStore } from '$lib/audio.svelte';
@@ -156,15 +156,23 @@
 	});
 
 	// Handle toggle requests from AudioPlayer controller.
+	// IMPORTANT: isPlaying must be read inside untrack() so the effect only
+	// re-runs when toggleRequest increments, not every time isPlaying changes.
+	// Without untrack the effect subscribes to both toggleRequest AND isPlaying,
+	// causing an infinite play/pause loop: play() fires onplay → isPlaying=true
+	// → effect re-runs → sees isPlaying=true → calls pause() → onpause fires
+	// → isPlaying=false → effect re-runs → calls play() → …
 	$effect(() => {
 		// Read toggleRequest to subscribe; ignore value 0 (initial).
 		const _req = audioStore.toggleRequest;
 		if (!audioEl || _req === 0) return;
-		if (audioStore.isPlaying) {
-			audioEl.pause();
-		} else {
-			audioEl.play().catch(() => {});
-		}
+		untrack(() => {
+			if (audioStore.isPlaying) {
+				audioEl!.pause();
+			} else {
+				audioEl!.play().catch(() => {});
+			}
+		});
 	});
 
 	// Handle seek requests from AudioPlayer controller.