From 05bfd110b89889cf0d8f35c1bfa36726f43f39ab Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Sat, 4 Apr 2026 20:35:15 +0500
Subject: [PATCH] refactor: replace floating settings panel with bottom sheet +
 Reading/Listening tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The old vertical dropdown was too tall on mobile — 14 stacked groups
required heavy scrolling and had no visual hierarchy.

New design:
- Full-width bottom sheet slides from screen edge (natural mobile gesture)
- Drag handle + dimmed backdrop for clarity
- Two tabs split the settings: Reading (typography + layout) and Listening
  (player style, speed, auto-next, sleep timer)
- Each row uses label-on-left + pill-group-on-right layout — saves one line
  per setting and makes the list scannable at a glance
- Settings are grouped into titled cards (Typography, Layout, Player)
  with dividers between rows instead of floating individual blocks
- Gear button moved to bottom-[4.5rem] to clear the mini-player bar
---
 .../books/[slug]/chapters/[n]/+page.svelte    | 483 ++++++++++--------
 1 file changed, 261 insertions(+), 222 deletions(-)

diff --git a/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte b/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte
index af91f23..876337f 100644
--- a/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte
+++ b/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte
@@ -20,6 +20,7 @@
 	// ── Reader settings panel ────────────────────────────────────────────────
 	const settingsCtx = getContext<{ current: string; fontFamily: string; fontSize: number } | undefined>('theme');
 	let settingsPanelOpen = $state(false);
+	let settingsTab = $state<'reading' | 'listening'>('reading');
 
 	const READER_THEMES = [
 		{ id: 'amber',       label: 'Amber',  swatch: '#f59e0b' },
@@ -591,22 +592,14 @@
 </div>
 {/if}
 
-<!-- ── Floating reader settings ─────────────────────────────────────────── -->
+<!-- ── Reader settings bottom sheet ──────────────────────────────────────── -->
 {#if settingsCtx}
-<!-- Backdrop -->
-{#if settingsPanelOpen}
-	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-	<div
-		class="fixed inset-0 z-40"
-		onclick={() => (settingsPanelOpen = false)}
-	></div>
-{/if}
 
-<!-- Gear button -->
+<!-- Gear button — sits just above the mini-player (bottom-[4.5rem]) -->
 <button
-	onclick={() => (settingsPanelOpen = !settingsPanelOpen)}
+	onclick={() => { settingsPanelOpen = !settingsPanelOpen; settingsTab = 'reading'; }}
 	aria-label="Reader settings"
-	class="fixed bottom-20 right-4 z-50 w-11 h-11 rounded-full bg-(--color-surface-2) border border-(--color-border) text-(--color-muted) hover:text-(--color-text) hover:border-zinc-500 transition-colors flex items-center justify-center shadow-lg"
+	class="fixed bottom-[4.5rem] right-4 z-50 w-11 h-11 rounded-full bg-(--color-surface-2) border border-(--color-border) text-(--color-muted) hover:text-(--color-text) hover:border-zinc-500 transition-colors flex items-center justify-center shadow-lg"
 >
 	<svg class="w-5 h-5 {settingsPanelOpen ? 'text-(--color-brand)' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
@@ -614,231 +607,277 @@
 	</svg>
 </button>
 
-<!-- Settings drawer -->
+<!-- Bottom sheet -->
 {#if settingsPanelOpen}
-<div
-	class="fixed bottom-36 right-4 z-50 w-72 bg-(--color-surface-2) border border-(--color-border) rounded-xl shadow-2xl p-4 flex flex-col gap-4"
->
-	<p class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider">Reader Settings</p>
+<!-- Backdrop -->
+<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+<div class="fixed inset-0 z-40 bg-black/40" onclick={() => (settingsPanelOpen = false)}></div>
 
-	<!-- Theme -->
-	<div class="space-y-2">
-		<p class="text-xs text-(--color-muted)">Theme</p>
-		<div class="flex flex-wrap gap-1.5">
-			{#each READER_THEMES as t}
+<div class="fixed bottom-0 left-0 right-0 z-50 bg-(--color-surface-2) border-t border-(--color-border) rounded-t-2xl shadow-2xl flex flex-col max-h-[80dvh]">
+
+	<!-- Drag handle -->
+	<div class="flex justify-center pt-3 pb-1 shrink-0">
+		<div class="w-10 h-1 rounded-full bg-(--color-border)"></div>
+	</div>
+
+	<!-- Tab bar -->
+	<div class="flex gap-1 mx-4 mb-3 p-1 rounded-xl bg-(--color-surface-3) shrink-0">
+		<button
+			type="button"
+			onclick={() => (settingsTab = 'reading')}
+			class="flex-1 py-1.5 rounded-lg text-xs font-semibold transition-colors
+				{settingsTab === 'reading'
+					? 'bg-(--color-surface-2) text-(--color-text) shadow-sm'
+					: 'text-(--color-muted) hover:text-(--color-text)'}"
+		>Reading</button>
+		<button
+			type="button"
+			onclick={() => (settingsTab = 'listening')}
+			class="flex-1 py-1.5 rounded-lg text-xs font-semibold transition-colors
+				{settingsTab === 'listening'
+					? 'bg-(--color-surface-2) text-(--color-text) shadow-sm'
+					: 'text-(--color-muted) hover:text-(--color-text)'}"
+		>Listening</button>
+	</div>
+
+	<!-- Scrollable content -->
+	<div class="overflow-y-auto px-4 pb-6 flex flex-col gap-0">
+
+		{#if settingsTab === 'reading'}
+
+		<!-- ── Typography group ──────────────────────────────────────── -->
+		<div class="mb-1">
+			<p class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-wider mb-2">Typography</p>
+			<div class="bg-(--color-surface-3) rounded-xl overflow-hidden divide-y divide-(--color-border)">
+
+				<!-- Theme -->
+				<div class="flex items-center gap-3 px-3 py-2.5">
+					<span class="text-xs text-(--color-muted) w-10 shrink-0">Theme</span>
+					<div class="flex flex-wrap gap-1.5 flex-1">
+						{#each READER_THEMES as t}
+							<button
+								onclick={() => applyTheme(t.id)}
+								title={t.label}
+								class="flex items-center gap-1 px-2 py-1 rounded-lg border text-[11px] font-medium transition-colors
+									{panelTheme === t.id
+										? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+										: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
+								aria-pressed={panelTheme === t.id}
+							>
+								<span class="w-2 h-2 rounded-full shrink-0 {'light' in t && t.light ? 'ring-1 ring-(--color-border)' : ''}" style="background: {t.swatch};"></span>
+								{t.label}
+							</button>
+						{/each}
+					</div>
+				</div>
+
+				<!-- Font -->
+				<div class="flex items-center gap-3 px-3 py-2.5">
+					<span class="text-xs text-(--color-muted) w-10 shrink-0">Font</span>
+					<div class="flex gap-1.5 flex-1">
+						{#each READER_FONTS as f}
+							<button
+								onclick={() => applyFont(f.id)}
+								class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
+									{panelFont === f.id
+										? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+										: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
+								aria-pressed={panelFont === f.id}
+							>{f.label}</button>
+						{/each}
+					</div>
+				</div>
+
+				<!-- Size -->
+				<div class="flex items-center gap-3 px-3 py-2.5">
+					<span class="text-xs text-(--color-muted) w-10 shrink-0">Size</span>
+					<div class="flex gap-1.5 flex-1">
+						{#each READER_SIZES as s}
+							<button
+								onclick={() => applySize(s.value)}
+								class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
+									{panelSize === s.value
+										? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+										: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
+								aria-pressed={panelSize === s.value}
+							>{s.label}</button>
+						{/each}
+					</div>
+				</div>
+
+			</div>
+		</div>
+
+		<!-- ── Layout group ──────────────────────────────────────────── -->
+		<div class="mt-4 mb-1">
+			<p class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-wider mb-2">Layout</p>
+			<div class="bg-(--color-surface-3) rounded-xl overflow-hidden divide-y divide-(--color-border)">
+
+				<!-- Read mode -->
+				<div class="flex items-center gap-3 px-3 py-2.5">
+					<span class="text-xs text-(--color-muted) w-16 shrink-0">Mode</span>
+					<div class="flex gap-1.5 flex-1">
+						{#each ([['scroll', 'Scroll'], ['paginated', 'Pages']] as const) as [mode, lbl]}
+							<button
+								type="button"
+								onclick={() => setLayout('readMode', mode)}
+								class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
+									{layout.readMode === mode
+										? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+										: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
+								aria-pressed={layout.readMode === mode}
+							>{lbl}</button>
+						{/each}
+					</div>
+				</div>
+
+				<!-- Line spacing -->
+				<div class="flex items-center gap-3 px-3 py-2.5">
+					<span class="text-xs text-(--color-muted) w-16 shrink-0">Spacing</span>
+					<div class="flex gap-1.5 flex-1">
+						{#each ([['compact', 'Tight'], ['normal', 'Normal'], ['relaxed', 'Loose']] as const) as [s, lbl]}
+							<button
+								type="button"
+								onclick={() => setLayout('lineSpacing', s)}
+								class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
+									{layout.lineSpacing === s
+										? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+										: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
+								aria-pressed={layout.lineSpacing === s}
+							>{lbl}</button>
+						{/each}
+					</div>
+				</div>
+
+				<!-- Width -->
+				<div class="flex items-center gap-3 px-3 py-2.5">
+					<span class="text-xs text-(--color-muted) w-16 shrink-0">Width</span>
+					<div class="flex gap-1.5 flex-1">
+						{#each ([['narrow', 'Narrow'], ['normal', 'Normal'], ['wide', 'Wide']] as const) as [w, lbl]}
+							<button
+								type="button"
+								onclick={() => setLayout('readWidth', w)}
+								class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
+									{layout.readWidth === w
+										? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+										: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
+								aria-pressed={layout.readWidth === w}
+							>{lbl}</button>
+						{/each}
+					</div>
+				</div>
+
+				<!-- Paragraphs -->
+				<div class="flex items-center gap-3 px-3 py-2.5">
+					<span class="text-xs text-(--color-muted) w-16 shrink-0">Paragraphs</span>
+					<div class="flex gap-1.5 flex-1">
+						{#each ([['spaced', 'Spaced'], ['indented', 'Indented']] as const) as [s, lbl]}
+							<button
+								type="button"
+								onclick={() => setLayout('paraStyle', s)}
+								class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
+									{layout.paraStyle === s
+										? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+										: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
+								aria-pressed={layout.paraStyle === s}
+							>{lbl}</button>
+						{/each}
+					</div>
+				</div>
+
+				<!-- Focus mode -->
 				<button
-					onclick={() => applyTheme(t.id)}
-					title={t.label}
-					class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg border text-xs font-medium transition-colors
-						{panelTheme === t.id
-							? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
-							: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
-					aria-pressed={panelTheme === t.id}
+					type="button"
+					onclick={() => setLayout('focusMode', !layout.focusMode)}
+					class="w-full flex items-center justify-between px-3 py-2.5 text-xs font-medium transition-colors
+						{layout.focusMode ? 'text-(--color-brand)' : 'text-(--color-text) hover:text-(--color-brand)'}"
+					aria-pressed={layout.focusMode}
 				>
-					<span class="w-2.5 h-2.5 rounded-full shrink-0 {'light' in t && t.light ? 'ring-1 ring-(--color-border)' : ''}" style="background: {t.swatch};"></span>
-					{t.label}
+					<span>Focus mode</span>
+					<span class="text-(--color-muted) text-[11px]">{layout.focusMode ? 'On — audio & nav hidden' : 'Off'}</span>
 				</button>
-			{/each}
-		</div>
-	</div>
 
-	<!-- Font family -->
-	<div class="space-y-2">
-		<p class="text-xs text-(--color-muted)">Font</p>
-		<div class="flex gap-1.5">
-			{#each READER_FONTS as f}
+			</div>
+		</div>
+
+		{:else}
+
+		<!-- ── Listening tab ──────────────────────────────────────────── -->
+		<div class="mb-1">
+			<p class="text-[10px] font-semibold text-(--color-muted) uppercase tracking-wider mb-2">Player</p>
+			<div class="bg-(--color-surface-3) rounded-xl overflow-hidden divide-y divide-(--color-border)">
+
+				<!-- Player style -->
+				<div class="flex items-center gap-3 px-3 py-2.5">
+					<span class="text-xs text-(--color-muted) w-14 shrink-0">Style</span>
+					<div class="flex gap-1.5 flex-1">
+						{#each ([['standard', 'Standard'], ['compact', 'Compact']] as const) as [s, lbl]}
+							<button
+								type="button"
+								onclick={() => setLayout('playerStyle', s)}
+								class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
+									{layout.playerStyle === s
+										? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+										: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
+								aria-pressed={layout.playerStyle === s}
+							>{lbl}</button>
+						{/each}
+					</div>
+				</div>
+
+				{#if page.data.user}
+
+				<!-- Speed -->
+				<div class="flex items-center gap-3 px-3 py-2.5">
+					<span class="text-xs text-(--color-muted) w-14 shrink-0">Speed</span>
+					<div class="flex gap-1 flex-1">
+						{#each [0.75, 1, 1.25, 1.5, 2] as s}
+							<button
+								type="button"
+								onclick={() => { audioStore.speed = s; }}
+								class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
+									{audioStore.speed === s
+										? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
+										: 'border-(--color-border) bg-(--color-surface-2) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
+								aria-pressed={audioStore.speed === s}
+							>{s}×</button>
+						{/each}
+					</div>
+				</div>
+
+				<!-- Auto-next -->
 				<button
-					onclick={() => applyFont(f.id)}
-					class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
-						{panelFont === f.id
-							? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
-							: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
-					aria-pressed={panelFont === f.id}
+					type="button"
+					onclick={() => { audioStore.autoNext = !audioStore.autoNext; }}
+					class="w-full flex items-center justify-between px-3 py-2.5 text-xs font-medium transition-colors
+						{audioStore.autoNext ? 'text-(--color-brand)' : 'text-(--color-text) hover:text-(--color-brand)'}"
+					aria-pressed={audioStore.autoNext}
 				>
-					{f.label}
+					<span>Auto-next chapter</span>
+					<span class="text-(--color-muted) text-[11px]">{audioStore.autoNext ? 'On' : 'Off'}</span>
 				</button>
-			{/each}
-		</div>
-	</div>
 
-	<!-- Text size -->
-	<div class="space-y-2">
-		<p class="text-xs text-(--color-muted)">Text size</p>
-		<div class="flex gap-1.5">
-			{#each READER_SIZES as s}
+				<!-- Sleep timer -->
 				<button
-					onclick={() => applySize(s.value)}
-					class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
-						{panelSize === s.value
-							? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
-							: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
-					aria-pressed={panelSize === s.value}
+					type="button"
+					onclick={toggleSleepFromSettings}
+					class="w-full flex items-center justify-between px-3 py-2.5 text-xs font-medium transition-colors
+						{audioStore.sleepUntil || audioStore.sleepAfterChapter ? 'text-(--color-brand)' : 'text-(--color-text) hover:text-(--color-brand)'}"
 				>
-					{s.label}
+					<span>Sleep timer</span>
+					<span class="text-(--color-muted) text-[11px]">{sleepSettingsLabel}</span>
 				</button>
-			{/each}
+
+				{/if}
+
+			</div>
 		</div>
+
+		{/if}
+
+		<p class="text-[11px] text-(--color-muted)/50 text-center mt-3">Changes save automatically</p>
+
 	</div>
-
-	<!-- Divider -->
-	<div class="border-t border-(--color-border)"></div>
-
-	<!-- Read mode -->
-	<div class="space-y-2">
-		<p class="text-xs text-(--color-muted)">Read mode</p>
-		<div class="flex gap-1.5">
-			{#each ([['scroll', 'Scroll'], ['paginated', 'Pages']] as const) as [mode, label]}
-				<button
-					type="button"
-					onclick={() => setLayout('readMode', mode)}
-					class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
-						{layout.readMode === mode
-							? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
-							: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
-					aria-pressed={layout.readMode === mode}
-				>{label}</button>
-			{/each}
-		</div>
-	</div>
-
-	<!-- Line spacing -->
-	<div class="space-y-2">
-		<p class="text-xs text-(--color-muted)">Line spacing</p>
-		<div class="flex gap-1.5">
-			{#each ([['compact', 'Tight'], ['normal', 'Normal'], ['relaxed', 'Loose']] as const) as [s, label]}
-				<button
-					type="button"
-					onclick={() => setLayout('lineSpacing', s)}
-					class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
-						{layout.lineSpacing === s
-							? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
-							: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
-					aria-pressed={layout.lineSpacing === s}
-				>{label}</button>
-			{/each}
-		</div>
-	</div>
-
-	<!-- Reading width -->
-	<div class="space-y-2">
-		<p class="text-xs text-(--color-muted)">Width</p>
-		<div class="flex gap-1.5">
-			{#each ([['narrow', 'Narrow'], ['normal', 'Normal'], ['wide', 'Wide']] as const) as [w, label]}
-				<button
-					type="button"
-					onclick={() => setLayout('readWidth', w)}
-					class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
-						{layout.readWidth === w
-							? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
-							: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
-					aria-pressed={layout.readWidth === w}
-				>{label}</button>
-			{/each}
-		</div>
-	</div>
-
-	<!-- Paragraph style -->
-	<div class="space-y-2">
-		<p class="text-xs text-(--color-muted)">Paragraphs</p>
-		<div class="flex gap-1.5">
-			{#each ([['spaced', 'Spaced'], ['indented', 'Indented']] as const) as [s, label]}
-				<button
-					type="button"
-					onclick={() => setLayout('paraStyle', s)}
-					class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
-						{layout.paraStyle === s
-							? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
-							: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
-					aria-pressed={layout.paraStyle === s}
-				>{label}</button>
-			{/each}
-		</div>
-	</div>
-
-	<!-- Focus mode -->
-	<button
-		type="button"
-		onclick={() => setLayout('focusMode', !layout.focusMode)}
-		class="w-full flex items-center justify-between py-2 px-3 rounded-lg border text-xs font-medium transition-colors
-			{layout.focusMode
-				? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
-				: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
-		aria-pressed={layout.focusMode}
-	>
-		<span>Focus mode</span>
-		<span class="opacity-60 text-xs">{layout.focusMode ? 'On — audio & nav hidden' : 'Off'}</span>
-	</button>
-
-	<!-- ── Listening section ─────────────────────────────────────────── -->
-	<div class="border-t border-(--color-border)"></div>
-	<p class="text-xs font-semibold text-(--color-muted) uppercase tracking-wider">Listening</p>
-
-	<!-- Player style -->
-	<div class="space-y-2">
-		<p class="text-xs text-(--color-muted)">Player style</p>
-		<div class="flex gap-1.5">
-			{#each ([['standard', 'Standard'], ['compact', 'Compact']] as const) as [s, label]}
-				<button
-					type="button"
-					onclick={() => setLayout('playerStyle', s)}
-					class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
-						{layout.playerStyle === s
-							? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
-							: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
-					aria-pressed={layout.playerStyle === s}
-				>{label}</button>
-			{/each}
-		</div>
-	</div>
-
-	{#if page.data.user}
-	<!-- Playback speed -->
-	<div class="space-y-2">
-		<p class="text-xs text-(--color-muted)">Speed</p>
-		<div class="flex gap-1">
-			{#each [0.75, 1, 1.25, 1.5, 2] as s}
-				<button
-					type="button"
-					onclick={() => { audioStore.speed = s; }}
-					class="flex-1 py-1.5 rounded-lg border text-xs font-medium transition-colors
-						{audioStore.speed === s
-							? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
-							: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
-					aria-pressed={audioStore.speed === s}
-				>{s}×</button>
-			{/each}
-		</div>
-	</div>
-
-	<!-- Auto-next -->
-	<button
-		type="button"
-		onclick={() => { audioStore.autoNext = !audioStore.autoNext; }}
-		class="w-full flex items-center justify-between py-2 px-3 rounded-lg border text-xs font-medium transition-colors
-			{audioStore.autoNext
-				? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
-				: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
-		aria-pressed={audioStore.autoNext}
-	>
-		<span>Auto-next chapter</span>
-		<span class="opacity-60">{audioStore.autoNext ? 'On' : 'Off'}</span>
-	</button>
-
-	<!-- Sleep timer -->
-	<button
-		type="button"
-		onclick={toggleSleepFromSettings}
-		class="w-full flex items-center justify-between py-2 px-3 rounded-lg border text-xs font-medium transition-colors
-			{audioStore.sleepUntil || audioStore.sleepAfterChapter
-				? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)'
-				: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
-	>
-		<span>Sleep timer</span>
-		<span class="opacity-60">{sleepSettingsLabel}</span>
-	</button>
-	{/if}
-
-	<p class="text-xs text-(--color-muted)/60 text-center">Changes save automatically</p>
 </div>
 {/if}
 {/if}