@@ -1,5 +1,5 @@
< script lang = "ts" >
import { onMount , untrack , getContext } from 'svelte' ;
import { onMount , getContext } from 'svelte' ;
import { browser } from '$app/environment' ;
import { goto } from '$app/navigation' ;
import { page } from '$app/state' ;
@@ -11,14 +11,16 @@
let { data } : { data : PageData } = $props ();
let h tml= $state ( untrack (() => data . html ));
let fetchingContent = $state ( untrack (() => ! data . isPreview && ! data . html ) );
let scrapedH tml= $state ( '' ); // only set by the live-preview fallback
let html = $derived ( scrapedHtml || data . html || '' );
let fetchingContent = $state ( false );
let fetchError = $state ( '' );
let audioProRequired = $state ( false );
// ── 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' },
@@ -202,8 +204,8 @@
{ code : 'pt' , label : 'PT' },
{ code : 'fr' , label : 'FR' }
];
let translationStatus = $state ( untrack (() => . translationStatus ?? 'idle' )) ;
let translatingLang = $state ( untrack (() => . lang ?? '' )) ;
let translationStatus = $state ( data . translationStatus ?? 'idle' );
let translatingLang = $state ( data . lang ?? '' );
let pollingTimer : ReturnType < typeof setTimeout > | null = null ;
function currentLang() {
@@ -293,6 +295,7 @@
// If the normal path returned no content, fall back to live preview scrape
if ( ! data . isPreview && ! data . html ) {
fetchingContent = true ;
( async () => {
try {
const res = await fetch (
@@ -302,7 +305,7 @@
const d = ( await res . json ()) as { text? : string };
if ( d . text ) {
const { marked } = await import ( 'marked' );
h tml= await marked ( d . text , { async : true });
scrapedH tml= await marked ( d . text , { async : true });
} else {
fetchError = m . reader_audio_error ();
}
@@ -589,22 +592,14 @@
</ div >
{ /if }
<!-- ── Floating r eader settings ─── ──────────────────────────────────────── -->
<!-- ── R eader 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" />
@@ -612,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 }
= " 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 ) }
="w-full justify-between px-3 py-2 . 5
{ 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 > 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 } × >
{ /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-t ext)' } "
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 . autoN ext}
>
{ 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 } × >
{ /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 }
