feat: redesign discover page with bigger cards and prominent action buttons

- Remove tab switcher, move history behind a modal drawer (clock icon in header with badge count)
- Increase card aspect ratio from 3/4.2 to 3/4.6 for more cover real estate
- Replace 5 small icon-only buttons with 3 large labeled buttons (Skip / Read Now / Like)
- Read Now is solid blue as the center primary CTA; Skip and Like use tinted bg with colored border
- Swipe indicators are larger (text-2xl, border-[3px], bg tint) for better visibility
- Remove swipe hint text to reclaim vertical space
- Larger title text on card (text-2xl)

scripts/pb-init-v3.sh

@@ -245,12 +245,17 @@ create "user_library" '{
 
 create "user_settings" '{
   "name":"user_settings","type":"base","fields":[
-    {"name":"session_id","type":"text","required":true},
-    {"name":"user_id",  "type":"text"},
-    {"name":"auto_next","type":"bool"},
-    {"name":"voice",    "type":"text"},
-    {"name":"speed",    "type":"number"},
-    {"name":"updated",  "type":"text"}
+    {"name":"session_id",      "type":"text",  "required":true},
+    {"name":"user_id",         "type":"text"},
+    {"name":"auto_next",       "type":"bool"},
+    {"name":"voice",           "type":"text"},
+    {"name":"speed",           "type":"number"},
+    {"name":"theme",           "type":"text"},
+    {"name":"locale",          "type":"text"},
+    {"name":"font_family",     "type":"text"},
+    {"name":"font_size",       "type":"number"},
+    {"name":"announce_chapter","type":"bool"},
+    {"name":"updated",         "type":"text"}
   ]}'
 
 create "user_subscriptions" '{
@@ -345,6 +350,11 @@ add_field "app_users"      "polar_subscription_id"  "text"
 add_field "user_library"   "shelf"                  "text"
 add_field "user_sessions"  "device_fingerprint"     "text"
 add_field "chapters_idx"   "created"                "date"
+add_field "user_settings"  "theme"                  "text"
+add_field "user_settings"  "locale"                 "text"
+add_field "user_settings"  "font_family"            "text"
+add_field "user_settings"  "font_size"              "number"
+add_field "user_settings"  "announce_chapter"       "bool"
 
 # ── 6. Indexes ────────────────────────────────────────────────────────────────
 add_index "chapters_idx" "idx_chapters_idx_slug_number" \

ui/src/routes/discover/+page.svelte

@@ -86,7 +86,7 @@
 	let transitioning = $state(false);
 	let showPreview = $state(false);
 	let voted = $state<{ slug: string; action: string } | null>(null); // last voted, for undo
-	let activeTab = $state<'discover' | 'history'>('discover');
+	let showHistory = $state(false);
 
 	// svelte-ignore state_referenced_locally
 	let votedBooks = $state<VotedBook[]>(data.votedBooks ?? []);
@@ -426,49 +426,125 @@
 </div>
 {/if}
 
+<!-- ── History drawer ─────────────────────────────────────────────────────────── -->
+{#if showHistory}
+<div
+	class="fixed inset-0 z-40 flex items-end sm:items-center justify-center p-4"
+	role="presentation"
+	onclick={() => (showHistory = false)}
+	onkeydown={(e) => { if (e.key === 'Escape') showHistory = false; }}
+>
+	<div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
+	<div
+		class="relative w-full max-w-md bg-(--color-surface-2) rounded-2xl border border-(--color-border) shadow-2xl overflow-hidden max-h-[80vh] flex flex-col"
+		role="dialog"
+		aria-modal="true"
+		tabindex="-1"
+		onclick={(e) => e.stopPropagation()}
+		onkeydown={(e) => e.stopPropagation()}
+	>
+		<div class="flex items-center justify-between p-5 border-b border-(--color-border) flex-shrink-0">
+			<h3 class="font-bold text-(--color-text)">History {#if votedBooks.length}<span class="text-(--color-muted) font-normal text-sm">({votedBooks.length})</span>{/if}</h3>
+			<button
+				type="button"
+				onclick={() => (showHistory = false)}
+				class="w-8 h-8 flex items-center justify-center rounded-lg text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-3) transition-colors"
+			>
+				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+				</svg>
+			</button>
+		</div>
+		<div class="overflow-y-auto flex-1 p-4 space-y-2">
+			{#if !votedBooks.length}
+				<p class="text-center text-(--color-muted) text-sm py-12">No votes yet — start swiping!</p>
+			{:else}
+				{#each votedBooks as v (v.slug)}
+					{@const actionColor = v.action === 'like' ? 'text-green-400' : v.action === 'read_now' ? 'text-blue-400' : 'text-(--color-muted)'}
+					{@const actionLabel = v.action === 'like' ? 'Liked' : v.action === 'read_now' ? 'Read Now' : v.action === 'skip' ? 'Skipped' : 'Noped'}
+					<div class="flex items-center gap-3 bg-(--color-surface-3) rounded-xl p-3">
+						{#if v.book?.cover}
+							<img src={v.book.cover} alt="" class="w-10 h-14 rounded-md object-cover flex-shrink-0" />
+						{:else}
+							<div class="w-10 h-14 rounded-md bg-(--color-surface-2) flex-shrink-0"></div>
+						{/if}
+						<div class="flex-1 min-w-0">
+							<a href="/books/{v.slug}" class="text-sm font-semibold text-(--color-text) hover:text-(--color-brand) transition-colors line-clamp-1">
+								{v.book?.title ?? v.slug}
+							</a>
+							{#if v.book?.author}
+								<p class="text-xs text-(--color-muted) truncate">{v.book.author}</p>
+							{/if}
+							<span class="text-xs font-medium {actionColor}">{actionLabel}</span>
+						</div>
+						<button
+							type="button"
+							onclick={() => undoVote(v.slug)}
+							title="Undo"
+							class="w-8 h-8 flex items-center justify-center rounded-lg text-(--color-muted) hover:text-(--color-danger) hover:bg-(--color-danger)/10 transition-colors flex-shrink-0"
+							aria-label="Undo vote for {v.book?.title ?? v.slug}"
+						>
+							<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
+							</svg>
+						</button>
+					</div>
+				{/each}
+				<button
+					type="button"
+					onclick={resetDeck}
+					class="w-full py-2 rounded-xl text-sm text-(--color-muted) hover:text-(--color-text) transition-colors mt-2"
+				>
+					Clear all history
+				</button>
+			{/if}
+		</div>
+	</div>
+</div>
+{/if}
+
 <!-- ── Main layout ────────────────────────────────────────────────────────────── -->
-<div class="min-h-screen bg-(--color-surface) flex flex-col items-center px-4 pt-8 pb-6 select-none">
+<div class="min-h-screen bg-(--color-surface) flex flex-col items-center px-3 pt-6 pb-6 select-none">
+
 	<!-- Header -->
-	<div class="w-full max-w-sm flex items-center justify-between mb-6">
+	<div class="w-full max-w-sm flex items-center justify-between mb-4">
 		<div>
 			<h1 class="text-xl font-bold text-(--color-text)">Discover</h1>
 			{#if !deckEmpty}
 				<p class="text-xs text-(--color-muted)">{totalRemaining} books left</p>
 			{/if}
 		</div>
-		<button
-			type="button"
-			onclick={() => { showOnboarding = true; tempGenres = [...prefs.genres]; tempStatus = prefs.status; }}
-			title="Preferences"
-			class="w-8 h-8 flex items-center justify-center rounded-lg text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
-		>
-			<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
-			</svg>
-		</button>
+		<div class="flex items-center gap-1">
+			<!-- History button -->
+			<button
+				type="button"
+				onclick={() => (showHistory = true)}
+				title="History"
+				class="relative w-9 h-9 flex items-center justify-center rounded-lg text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+			>
+				<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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
+				</svg>
+				{#if votedBooks.length}
+					<span class="absolute -top-0.5 -right-0.5 w-4 h-4 rounded-full bg-(--color-brand) text-(--color-surface) text-[9px] font-bold flex items-center justify-center leading-none">
+						{votedBooks.length > 9 ? '9+' : votedBooks.length}
+					</span>
+				{/if}
+			</button>
+			<!-- Preferences button -->
+			<button
+				type="button"
+				onclick={() => { showOnboarding = true; tempGenres = [...prefs.genres]; tempStatus = prefs.status; }}
+				title="Preferences"
+				class="w-9 h-9 flex items-center justify-center rounded-lg text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-2) transition-colors"
+			>
+				<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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
+				</svg>
+			</button>
+		</div>
 	</div>
 
-	<!-- Tab switcher -->
-	<div class="flex gap-1 bg-(--color-surface-2) rounded-xl p-1 w-full max-w-sm border border-(--color-border) mb-4">
-		<button
-			type="button"
-			onclick={() => (activeTab = 'discover')}
-			class="flex-1 py-2 rounded-lg text-sm font-medium transition-colors
-				{activeTab === 'discover' ? 'bg-(--color-surface-3) text-(--color-text)' : 'text-(--color-muted) hover:text-(--color-text)'}"
-		>
-			Discover
-		</button>
-		<button
-			type="button"
-			onclick={() => (activeTab = 'history')}
-			class="flex-1 py-2 rounded-lg text-sm font-medium transition-colors
-				{activeTab === 'history' ? 'bg-(--color-surface-3) text-(--color-text)' : 'text-(--color-muted) hover:text-(--color-text)'}"
-		>
-			History {#if votedBooks.length}({votedBooks.length}){/if}
-		</button>
-	</div>
-
-	{#if activeTab === 'discover'}
 	{#if deckEmpty}
 		<!-- Empty state -->
 		<div class="flex-1 flex flex-col items-center justify-center gap-6 text-center max-w-xs">
@@ -501,8 +577,9 @@
 		</div>
 	{:else}
 		{@const book = currentBook!}
-		<!-- Card stack -->
-		<div class="w-full max-w-sm relative" style="aspect-ratio: 3/4.2;">
+
+		<!-- Card stack — fills available width, taller ratio -->
+		<div class="w-full max-w-sm relative" style="aspect-ratio: 3/4.6;">
 
 			<!-- Back card 2 -->
 			{#if nextNextBook}
@@ -561,9 +638,9 @@
 				{/if}
 
 				<!-- Bottom gradient + info -->
-				<div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/25 to-transparent pointer-events-none"></div>
+				<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent pointer-events-none"></div>
 				<div class="absolute bottom-0 left-0 right-0 p-5 pointer-events-none">
-					<h2 class="text-white font-bold text-xl leading-snug line-clamp-2 mb-1">{book.title}</h2>
+					<h2 class="text-white font-bold text-2xl leading-snug line-clamp-2 mb-1">{book.title}</h2>
 					{#if book.author}
 						<p class="text-white/70 text-sm mb-2">{book.author}</p>
 					{/if}
@@ -582,164 +659,91 @@
 
 				<!-- LIKE indicator (right swipe) -->
 				<div
-					class="absolute top-8 right-6 px-3 py-1.5 rounded-lg border-2 border-green-400 rotate-[-15deg] pointer-events-none"
+					class="absolute top-8 right-6 px-4 py-2 rounded-xl border-[3px] border-green-400 rotate-[-15deg] pointer-events-none bg-green-400/10"
 					style="opacity: {indicator === 'like' ? indicatorOpacity : 0}; transition: opacity 0.1s;"
 				>
-					<span class="text-green-400 font-black text-lg tracking-widest">LIKE</span>
+					<span class="text-green-400 font-black text-2xl tracking-widest">LIKE</span>
 				</div>
 
 				<!-- SKIP indicator (left swipe) -->
 				<div
-					class="absolute top-8 left-6 px-3 py-1.5 rounded-lg border-2 border-red-400 rotate-[15deg] pointer-events-none"
+					class="absolute top-8 left-6 px-4 py-2 rounded-xl border-[3px] border-red-400 rotate-[15deg] pointer-events-none bg-red-400/10"
 					style="opacity: {indicator === 'skip' ? indicatorOpacity : 0}; transition: opacity 0.1s;"
 				>
-					<span class="text-red-400 font-black text-lg tracking-widest">SKIP</span>
+					<span class="text-red-400 font-black text-2xl tracking-widest">SKIP</span>
 				</div>
 
 				<!-- READ NOW indicator (swipe up) -->
 				<div
-					class="absolute top-8 left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-lg border-2 border-blue-400 pointer-events-none"
+					class="absolute top-8 left-1/2 -translate-x-1/2 px-4 py-2 rounded-xl border-[3px] border-blue-400 pointer-events-none bg-blue-400/10"
 					style="opacity: {indicator === 'read_now' ? indicatorOpacity : 0}; transition: opacity 0.1s;"
 				>
-					<span class="text-blue-400 font-black text-lg tracking-widest">READ NOW</span>
+					<span class="text-blue-400 font-black text-2xl tracking-widest">READ NOW</span>
 				</div>
 
 				<!-- NOPE indicator (swipe down) -->
 				<div
-					class="absolute bottom-28 left-1/2 -translate-x-1/2 px-3 py-1.5 rounded-lg border-2 border-(--color-muted) pointer-events-none"
+					class="absolute bottom-32 left-1/2 -translate-x-1/2 px-4 py-2 rounded-xl border-[3px] border-zinc-400 pointer-events-none bg-black/20"
 					style="opacity: {indicator === 'nope' ? indicatorOpacity : 0}; transition: opacity 0.1s;"
 				>
-					<span class="text-(--color-muted) font-black text-lg tracking-widest">NOPE</span>
+					<span class="text-zinc-300 font-black text-2xl tracking-widest">NOPE</span>
 				</div>
 			</div>
 			{/if}
 		</div>
 
-		<!-- Action buttons -->
-		<div class="w-full max-w-sm flex items-center justify-center gap-4 mt-6">
-			<!-- Skip (left) -->
+		<!-- Action buttons — 3 prominent labeled buttons -->
+		<div class="w-full max-w-sm flex items-stretch gap-3 mt-5">
+			<!-- Skip -->
 			<button
 				type="button"
 				onclick={() => doAction('skip')}
 				disabled={animating}
 				title="Skip"
-				class="w-14 h-14 rounded-full bg-(--color-surface-2) border border-(--color-border) flex items-center justify-center text-red-400 hover:bg-red-400/10 hover:border-red-400/40 hover:scale-105 active:scale-95 transition-all disabled:opacity-40"
+				class="flex-1 flex flex-col items-center justify-center gap-1.5 py-3.5 rounded-2xl
+					bg-red-500/15 border border-red-500/30 text-red-400
+					hover:bg-red-500/25 hover:border-red-500/50
+					active:scale-95 transition-all disabled:opacity-40"
 			>
 				<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/>
 				</svg>
+				<span class="text-xs font-bold tracking-wide">Skip</span>
 			</button>
 
-			<!-- Read Now (up) -->
+			<!-- Read Now — center, most prominent -->
 			<button
 				type="button"
 				onclick={() => doAction('read_now')}
 				disabled={animating}
 				title="Read Now"
-				class="w-12 h-12 rounded-full bg-(--color-surface-2) border border-(--color-border) flex items-center justify-center text-blue-400 hover:bg-blue-400/10 hover:border-blue-400/40 hover:scale-105 active:scale-95 transition-all disabled:opacity-40"
+				class="flex-[1.4] flex flex-col items-center justify-center gap-1.5 py-3.5 rounded-2xl
+					bg-blue-500 text-white
+					hover:bg-blue-400
+					active:scale-95 transition-all disabled:opacity-40 shadow-lg shadow-blue-500/25"
 			>
-				<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+				<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
 					<path d="M8 5v14l11-7z"/>
 				</svg>
+				<span class="text-xs font-bold tracking-wide">Read Now</span>
 			</button>
 
-			<!-- Preview (center) -->
-			<button
-				type="button"
-				onclick={() => (showPreview = true)}
-				disabled={animating}
-				title="Details"
-				class="w-10 h-10 rounded-full bg-(--color-surface-2) border border-(--color-border) flex items-center justify-center text-(--color-muted) hover:text-(--color-text) hover:bg-(--color-surface-3) hover:scale-105 active:scale-95 transition-all disabled:opacity-40"
-			>
-				<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
-				</svg>
-			</button>
-
-			<!-- Like (right) -->
+			<!-- Like -->
 			<button
 				type="button"
 				onclick={() => doAction('like')}
 				disabled={animating}
 				title="Add to Library"
-				class="w-14 h-14 rounded-full bg-(--color-surface-2) border border-(--color-border) flex items-center justify-center text-(--color-success) hover:bg-green-400/10 hover:border-green-400/40 hover:scale-105 active:scale-95 transition-all disabled:opacity-40"
+				class="flex-1 flex flex-col items-center justify-center gap-1.5 py-3.5 rounded-2xl
+					bg-green-500/15 border border-green-500/30 text-green-400
+					hover:bg-green-500/25 hover:border-green-500/50
+					active:scale-95 transition-all disabled:opacity-40"
 			>
 				<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
 					<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
 				</svg>
-			</button>
-
-			<!-- Nope (down) -->
-			<button
-				type="button"
-				onclick={() => doAction('nope')}
-				disabled={animating}
-				title="Never show again"
-				class="w-12 h-12 rounded-full bg-(--color-surface-2) border border-(--color-border) flex items-center justify-center text-(--color-muted) hover:text-(--color-muted)/60 hover:bg-(--color-surface-3) hover:scale-105 active:scale-95 transition-all disabled:opacity-40"
-			>
-				<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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
-				</svg>
+				<span class="text-xs font-bold tracking-wide">Like</span>
 			</button>
 		</div>
-
-		<!-- Swipe hint (shown briefly) -->
-		<p class="mt-4 text-xs text-(--color-muted)/50 text-center">
-			Swipe or tap buttons · Tap card for details
-		</p>
-	{/if}
-	{/if}
-
-	{#if activeTab === 'history'}
-	<div class="w-full max-w-sm space-y-2">
-		{#if !votedBooks.length}
-			<p class="text-center text-(--color-muted) text-sm py-12">No votes yet — start swiping!</p>
-		{:else}
-			{#each votedBooks as v (v.slug)}
-				{@const actionColor = v.action === 'like' ? 'text-green-400' : v.action === 'read_now' ? 'text-blue-400' : 'text-(--color-muted)'}
-				{@const actionLabel = v.action === 'like' ? 'Liked' : v.action === 'read_now' ? 'Read Now' : v.action === 'skip' ? 'Skipped' : 'Noped'}
-				<div class="flex items-center gap-3 bg-(--color-surface-2) rounded-xl border border-(--color-border) p-3">
-					<!-- Cover thumbnail -->
-					{#if v.book?.cover}
-						<img src={v.book.cover} alt="" class="w-10 h-14 rounded-md object-cover flex-shrink-0" />
-					{:else}
-						<div class="w-10 h-14 rounded-md bg-(--color-surface-3) flex-shrink-0"></div>
-					{/if}
-
-					<!-- Info -->
-					<div class="flex-1 min-w-0">
-						<a href="/books/{v.slug}" class="text-sm font-semibold text-(--color-text) hover:text-(--color-brand) transition-colors line-clamp-1">
-							{v.book?.title ?? v.slug}
-						</a>
-						{#if v.book?.author}
-							<p class="text-xs text-(--color-muted) truncate">{v.book.author}</p>
-						{/if}
-						<span class="text-xs font-medium {actionColor}">{actionLabel}</span>
-					</div>
-
-					<!-- Undo button -->
-					<button
-						type="button"
-						onclick={() => undoVote(v.slug)}
-						title="Undo"
-						class="w-8 h-8 flex items-center justify-center rounded-lg text-(--color-muted) hover:text-(--color-danger) hover:bg-(--color-danger)/10 transition-colors flex-shrink-0"
-						aria-label="Undo vote for {v.book?.title ?? v.slug}"
-					>
-						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
-						</svg>
-					</button>
-				</div>
-			{/each}
-
-			<button
-				type="button"
-				onclick={resetDeck}
-				class="w-full py-2 rounded-xl text-sm text-(--color-muted) hover:text-(--color-text) transition-colors mt-2"
-			>
-				Clear all history
-			</button>
-		{/if}
-	</div>
 	{/if}
 </div>