From b130ba4e1be07436abe4f17a95b7681845619a6c Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Sun, 5 Apr 2026 23:42:49 +0500
Subject: [PATCH] feat(player): refactor chapter picker to full-screen overlay
 like voice picker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both ListeningMode and the standard AudioPlayer now open chapters via a
full-screen overlay (same UX as the voice selector) — header + search bar +
rows with circular chapter-number badge, title, and active indicator.
Removes the cramped inline card from the bottom of ListeningMode.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/lib/components/AudioPlayer.svelte   | 118 +++++++++++++-
 ui/src/lib/components/ListeningMode.svelte | 176 +++++++++++++--------
 2 files changed, 227 insertions(+), 67 deletions(-)

diff --git a/ui/src/lib/components/AudioPlayer.svelte b/ui/src/lib/components/AudioPlayer.svelte
index d94d02e..c53cc21 100644
--- a/ui/src/lib/components/AudioPlayer.svelte
+++ b/ui/src/lib/components/AudioPlayer.svelte
@@ -49,6 +49,7 @@
 	 */
 
 	import { audioStore } from '$lib/audio.svelte';
+	import { goto } from '$app/navigation';
 	import { Button } from '$lib/components/ui/button';
 	import { cn } from '$lib/utils';
 	import type { Voice } from '$lib/types';
@@ -98,6 +99,27 @@
 	/** Currently active sample <audio> element — one at a time. */
 	let sampleAudio = $state<HTMLAudioElement | null>(null);
 
+	// ── Chapter picker state ─────────────────────────────────────────────────
+	let showChapterPanel = $state(false);
+	let chapterSearch = $state('');
+	const filteredChapters = $derived(
+		chapterSearch.trim() === ''
+			? audioStore.chapters
+			: audioStore.chapters.filter((ch) =>
+					(ch.title || `Chapter ${ch.number}`)
+						.toLowerCase()
+						.includes(chapterSearch.toLowerCase()) ||
+					String(ch.number).includes(chapterSearch)
+			  )
+	);
+
+	function playChapter(chapterNumber: number) {
+		audioStore.autoStartChapter = chapterNumber;
+		showChapterPanel = false;
+		chapterSearch = '';
+		goto(`/books/${slug}/chapters/${chapterNumber}`);
+	}
+
 	/**
 	 * Human-readable label for a voice.
 	 * Kokoro: "af_bella" → "Bella (US F)"
@@ -256,11 +278,11 @@
 		}
 	});
 
-	// Close voice panel when user clicks outside (escape key).
+	// Close panels on Escape.
 	function handleKeyDown(e: KeyboardEvent) {
 		if (e.key === 'Escape') {
-			stopSample();
-			showVoicePanel = false;
+			if (showChapterPanel) { showChapterPanel = false; chapterSearch = ''; }
+			else { stopSample(); showVoicePanel = false; }
 		}
 	}
 
@@ -1031,12 +1053,27 @@
 <!-- ── Standard player ─────────────────────────────────────────────────────── -->
 <div class="p-4">
 	<div class="flex items-center justify-end gap-2 mb-3">
+		<!-- Chapter picker button -->
+		{#if audioStore.chapters.length > 0}
+			<Button
+				variant="ghost"
+				size="sm"
+				onclick={() => { showChapterPanel = !showChapterPanel; showVoicePanel = false; stopSample(); }}
+				class={cn('gap-1.5 text-xs', showChapterPanel ? 'text-(--color-brand) bg-(--color-brand)/15 hover:bg-(--color-brand)/25' : '')}
+				title="Browse chapters"
+			>
+				<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h10"/>
+				</svg>
+				Chapters
+			</Button>
+		{/if}
 		<!-- Voice selector button -->
 		{#if voices.length > 0}
 			<Button
 				variant="ghost"
 				size="sm"
-				onclick={() => { stopSample(); showVoicePanel = !showVoicePanel; }}
+				onclick={() => { stopSample(); showVoicePanel = !showVoicePanel; showChapterPanel = false; chapterSearch = ''; }}
 				class={cn('gap-1.5 text-xs', showVoicePanel ? 'text-(--color-brand) bg-(--color-brand)/15 hover:bg-(--color-brand)/25' : '')}
 				title={m.reader_change_voice()}
 			>
@@ -1117,6 +1154,79 @@
 		</div>
 	{/if}
 
+	<!-- ── Chapter picker overlay ────────────────────────────────────────── -->
+	{#if showChapterPanel && audioStore.chapters.length > 0}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="fixed inset-0 z-[60] flex flex-col"
+			style="background: var(--color-surface);"
+		>
+			<!-- Header -->
+			<div class="flex items-center gap-3 px-4 py-3 border-b border-(--color-border) shrink-0">
+				<button
+					type="button"
+					onclick={() => { showChapterPanel = false; chapterSearch = ''; }}
+					class="p-2 rounded-full text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+					aria-label="Close chapter picker"
+				>
+					<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+					</svg>
+				</button>
+				<span class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider flex-1">Chapters</span>
+			</div>
+			<!-- Search -->
+			<div class="px-4 py-3 shrink-0 border-b border-(--color-border)">
+				<div class="relative">
+					<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+					</svg>
+					<input
+						type="search"
+						placeholder="Search chapters…"
+						bind:value={chapterSearch}
+						class="w-full pl-9 pr-4 py-2 text-sm bg-(--color-surface-2) border border-(--color-border) rounded-lg text-(--color-text) placeholder:text-(--color-muted) focus:outline-none focus:border-(--color-brand) transition-colors"
+					/>
+				</div>
+			</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(
+							'w-full flex items-center gap-3 px-4 py-3 border-b border-(--color-border)/40 transition-colors text-left',
+							ch.number === chapter ? 'bg-(--color-brand)/8' : 'hover:bg-(--color-surface-2)'
+						)}
+					>
+						<!-- Chapter number badge (mirrors voice radio indicator) -->
+						<span class={cn(
+							'w-8 h-8 shrink-0 rounded-full border-2 flex items-center justify-center tabular-nums text-xs font-semibold transition-colors',
+							ch.number === chapter
+								? 'border-(--color-brand) bg-(--color-brand) text-(--color-surface)'
+								: 'border-(--color-border) text-(--color-muted)'
+						)}>{ch.number}</span>
+						<!-- Title -->
+						<span class={cn(
+							'flex-1 text-sm truncate',
+							ch.number === chapter ? 'font-semibold text-(--color-brand)' : 'text-(--color-text)'
+						)}>{ch.title || `Chapter ${ch.number}`}</span>
+						<!-- Now-playing indicator -->
+						{#if ch.number === chapter}
+							<svg class="w-4 h-4 shrink-0 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
+								<path d="M8 5v14l11-7z"/>
+							</svg>
+						{/if}
+					</button>
+				{/each}
+				{#if filteredChapters.length === 0}
+					<p class="px-4 py-8 text-sm text-(--color-muted) text-center">No chapters match "{chapterSearch}"</p>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
 	{#if audioStore.isCurrentChapter(slug, chapter)}
 		<!-- ── This chapter is the active one ── -->
 
diff --git a/ui/src/lib/components/ListeningMode.svelte b/ui/src/lib/components/ListeningMode.svelte
index 38219bc..da30799 100644
--- a/ui/src/lib/components/ListeningMode.svelte
+++ b/ui/src/lib/components/ListeningMode.svelte
@@ -18,6 +18,7 @@
 	const cfaiVoices   = $derived(voices.filter((v) => v.engine === 'cfai'));
 
 	let showVoiceModal = $state(false);
+	let showChapterModal = $state(false);
 	let voiceSearch = $state('');
 	let samplePlayingVoice = $state<string | null>(null);
 	let sampleAudio: HTMLAudioElement | null = null;
@@ -163,7 +164,8 @@
 	$effect(() => {
 		function onKey(e: KeyboardEvent) {
 			if (e.key === 'Escape') {
-				if (showVoiceModal) { showVoiceModal = false; voiceSearch = ''; }
+				if (showChapterModal) { showChapterModal = false; }
+				else if (showVoiceModal) { showVoiceModal = false; voiceSearch = ''; }
 				else { onclose(); }
 			}
 		}
@@ -200,22 +202,43 @@
 			</svg>
 		</button>
 		<span class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider">Now Playing</span>
-		<!-- Voice selector button -->
-		<button
-			type="button"
-			onclick={() => (showVoiceModal = !showVoiceModal)}
-			class={cn(
-				'flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium border transition-colors',
-				showVoiceModal
-					? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
-					: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text)'
-			)}
-		>
-			<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
-			</svg>
-			<span class="max-w-[80px] truncate">{voiceLabel(audioStore.voice)}</span>
-		</button>
+		<div class="flex items-center gap-2">
+			<!-- Chapters button -->
+			{#if audioStore.chapters.length > 0}
+				<button
+					type="button"
+					onclick={() => { showChapterModal = !showChapterModal; showVoiceModal = false; voiceSearch = ''; }}
+					class={cn(
+						'flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium border transition-colors',
+						showChapterModal
+							? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+							: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text)'
+					)}
+					aria-label="Browse chapters"
+				>
+					<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h10"/>
+					</svg>
+					Chapters
+				</button>
+			{/if}
+			<!-- Voice selector button -->
+			<button
+				type="button"
+				onclick={() => { showVoiceModal = !showVoiceModal; showChapterModal = false; }}
+				class={cn(
+					'flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium border transition-colors',
+					showVoiceModal
+						? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+						: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:text-(--color-text)'
+				)}
+			>
+				<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
+				</svg>
+				<span class="max-w-[80px] truncate">{voiceLabel(audioStore.voice)}</span>
+			</button>
+		</div>
 	</div>
 
 	<!-- Voice modal (full-screen overlay) -->
@@ -323,6 +346,79 @@
 		</div>
 	{/if}
 
+	<!-- Chapter modal (full-screen overlay) -->
+	{#if showChapterModal && audioStore.chapters.length > 0}
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="absolute inset-0 z-70 flex flex-col"
+			style="background: var(--color-surface);"
+		>
+			<!-- Modal header -->
+			<div class="flex items-center gap-3 px-4 py-3 border-b border-(--color-border) shrink-0">
+				<button
+					type="button"
+					onclick={() => { showChapterModal = false; }}
+					class="p-2 rounded-full text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+					aria-label="Close chapter picker"
+				>
+					<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+					</svg>
+				</button>
+				<span class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider flex-1">Chapters</span>
+			</div>
+			<!-- Search input -->
+			<div class="px-4 py-3 shrink-0 border-b border-(--color-border)">
+				<div class="relative">
+					<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+					</svg>
+					<input
+						type="search"
+						placeholder="Search chapters…"
+						bind:value={chapterSearch}
+						class="w-full pl-9 pr-4 py-2 text-sm bg-(--color-surface-2) border border-(--color-border) rounded-lg text-(--color-text) placeholder:text-(--color-muted) focus:outline-none focus:border-(--color-brand) transition-colors"
+					/>
+				</div>
+			</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(
+							'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)'
+						)}
+					>
+						<!-- Chapter number badge (mirrors voice radio indicator) -->
+						<span class={cn(
+							'w-8 h-8 shrink-0 rounded-full border-2 flex items-center justify-center tabular-nums text-xs font-semibold transition-colors',
+							ch.number === audioStore.chapter
+								? 'border-(--color-brand) bg-(--color-brand) text-(--color-surface)'
+								: 'border-(--color-border) text-(--color-muted)'
+						)}>{ch.number}</span>
+						<!-- Title -->
+						<span class={cn(
+							'flex-1 text-sm truncate',
+							ch.number === audioStore.chapter ? 'font-semibold text-(--color-brand)' : 'text-(--color-text)'
+						)}>{ch.title || `Chapter ${ch.number}`}</span>
+						<!-- Now-playing indicator -->
+						{#if ch.number === audioStore.chapter}
+							<svg class="w-4 h-4 shrink-0 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
+								<path d="M8 5v14l11-7z"/>
+							</svg>
+						{/if}
+					</button>
+				{/each}
+				{#if filteredChapters.length === 0}
+					<p class="px-4 py-8 text-sm text-(--color-muted) text-center">No chapters match "{chapterSearch}"</p>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
 	<!-- Scrollable body -->
 	<div class="relative flex-1 overflow-y-auto flex flex-col">
 
@@ -509,51 +605,5 @@
 			</button>
 		</div>
 
-		<!-- Chapter list -->
-		{#if audioStore.chapters.length > 0}
-			<div class="mx-4 mb-6 bg-(--color-surface-2) rounded-xl border border-(--color-border) overflow-hidden shrink-0">
-				<!-- Header + search -->
-				<div class="flex items-center gap-2 px-3 py-2 border-b border-(--color-border)">
-					<p class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-wider shrink-0">Chapters</p>
-					{#if audioStore.chapters.length > 6}
-						<div class="relative flex-1">
-							<svg class="absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
-							</svg>
-							<input
-								type="search"
-								placeholder="Search…"
-								bind:value={chapterSearch}
-								class="w-full pl-6 pr-2 py-0.5 text-xs bg-(--color-surface-3) border border-(--color-border) rounded-md text-(--color-text) placeholder:text-(--color-muted) focus:outline-none focus:border-(--color-brand) transition-colors"
-							/>
-						</div>
-					{/if}
-				</div>
-				<div class="overflow-y-auto max-h-64">
-					{#each filteredChapters as ch (ch.number)}
-						<button
-							type="button"
-							onclick={() => playChapter(ch.number)}
-							class={cn(
-								'w-full flex items-center gap-3 px-4 py-2.5 text-xs transition-colors hover:bg-(--color-surface-3) text-left',
-								ch.number === audioStore.chapter ? 'text-(--color-brand) font-semibold bg-(--color-brand)/5' : 'text-(--color-muted)'
-							)}
-						>
-							<span class="tabular-nums w-7 shrink-0 text-right opacity-50">{ch.number}</span>
-							<span class="flex-1 truncate">{ch.title || `Chapter ${ch.number}`}</span>
-							{#if ch.number === audioStore.chapter}
-								<svg class="w-3 h-3 shrink-0 text-(--color-brand)" fill="currentColor" viewBox="0 0 24 24">
-									<path d="M8 5v14l11-7z"/>
-								</svg>
-							{/if}
-						</button>
-					{/each}
-					{#if filteredChapters.length === 0}
-						<p class="px-4 py-4 text-xs text-(--color-muted) text-center">No chapters match "{chapterSearch}"</p>
-					{/if}
-				</div>
-			</div>
-		{/if}
-
 	</div>
 </div>