feat(reader): chapter comments + readers-this-week count

- CommentsSection now accepts a chapter prop and scopes comments to that chapter
- Chapter reader page mounts CommentsSection with current chapter number
- Book detail page shows rolling 7-day unique reader count badge
- API GET/POST pass chapter param; pocketbase listComments filters by chapter

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/messages/en.json

@@ -160,6 +160,9 @@
   "profile_theme_amber": "Amber",
   "profile_theme_slate": "Slate",
   "profile_theme_rose": "Rose",
+  "profile_theme_light": "Light",
+  "profile_theme_light_slate": "Light Blue",
+  "profile_theme_light_rose": "Light Rose",
   "profile_reading_heading": "Reading settings",
   "profile_voice_label": "Default voice",
   "profile_speed_label": "Playback speed",

ui/messages/fr.json

@@ -160,6 +160,9 @@
   "profile_theme_amber": "Ambre",
   "profile_theme_slate": "Ardoise",
   "profile_theme_rose": "Rose",
+  "profile_theme_light": "Light",
+  "profile_theme_light_slate": "Light Blue",
+  "profile_theme_light_rose": "Light Rose",
   "profile_reading_heading": "Paramètres de lecture",
   "profile_voice_label": "Voix par défaut",
   "profile_speed_label": "Vitesse de lecture",

ui/messages/id.json

@@ -160,6 +160,9 @@
   "profile_theme_amber": "Amber",
   "profile_theme_slate": "Abu-abu",
   "profile_theme_rose": "Mawar",
+  "profile_theme_light": "Light",
+  "profile_theme_light_slate": "Light Blue",
+  "profile_theme_light_rose": "Light Rose",
   "profile_reading_heading": "Pengaturan membaca",
   "profile_voice_label": "Suara default",
   "profile_speed_label": "Kecepatan pemutaran",

ui/messages/pt.json

@@ -160,6 +160,9 @@
   "profile_theme_amber": "Âmbar",
   "profile_theme_slate": "Ardósia",
   "profile_theme_rose": "Rosa",
+  "profile_theme_light": "Light",
+  "profile_theme_light_slate": "Light Blue",
+  "profile_theme_light_rose": "Light Rose",
   "profile_reading_heading": "Configurações de leitura",
   "profile_voice_label": "Voz padrão",
   "profile_speed_label": "Velocidade de reprodução",

ui/messages/ru.json

@@ -160,6 +160,9 @@
   "profile_theme_amber": "Янтарь",
   "profile_theme_slate": "Сланец",
   "profile_theme_rose": "Роза",
+  "profile_theme_light": "Light",
+  "profile_theme_light_slate": "Light Blue",
+  "profile_theme_light_rose": "Light Rose",
   "profile_reading_heading": "Настройки чтения",
   "profile_voice_label": "Голос по умолчанию",
   "profile_speed_label": "Скорость воспроизведения",

ui/src/app.css

@@ -55,6 +55,48 @@
 	--color-success:   #4ade80;   /* green-400 */
 }
 
+/* ── Light amber theme ────────────────────────────────────────────────── */
+[data-theme="light"] {
+	--color-brand:     #d97706;   /* amber-600 */
+	--color-brand-dim: #b45309;   /* amber-700 */
+	--color-surface:   #ffffff;
+	--color-surface-2: #f4f4f5;   /* zinc-100 */
+	--color-surface-3: #e4e4e7;   /* zinc-200 */
+	--color-muted:     #71717a;   /* zinc-500 */
+	--color-text:      #18181b;   /* zinc-900 */
+	--color-border:    #d4d4d8;   /* zinc-300 */
+	--color-danger:    #dc2626;   /* red-600 */
+	--color-success:   #16a34a;   /* green-600 */
+}
+
+/* ── Light slate theme ────────────────────────────────────────────────── */
+[data-theme="light-slate"] {
+	--color-brand:     #4f46e5;   /* indigo-600 */
+	--color-brand-dim: #4338ca;   /* indigo-700 */
+	--color-surface:   #f8fafc;   /* slate-50 */
+	--color-surface-2: #f1f5f9;   /* slate-100 */
+	--color-surface-3: #e2e8f0;   /* slate-200 */
+	--color-muted:     #64748b;   /* slate-500 */
+	--color-text:      #0f172a;   /* slate-900 */
+	--color-border:    #cbd5e1;   /* slate-300 */
+	--color-danger:    #dc2626;   /* red-600 */
+	--color-success:   #16a34a;   /* green-600 */
+}
+
+/* ── Light rose theme ─────────────────────────────────────────────────── */
+[data-theme="light-rose"] {
+	--color-brand:     #e11d48;   /* rose-600 */
+	--color-brand-dim: #be123c;   /* rose-700 */
+	--color-surface:   #fff1f2;   /* rose-50 */
+	--color-surface-2: #ffe4e6;   /* rose-100 */
+	--color-surface-3: #fecdd3;   /* rose-200 */
+	--color-muted:     #9f1239;   /* rose-800 at 60% */
+	--color-text:      #0f0a0b;   /* near black */
+	--color-border:    #fda4af;   /* rose-300 */
+	--color-danger:    #dc2626;   /* red-600 */
+	--color-success:   #16a34a;   /* green-600 */
+}
+
 html {
 	background-color: var(--color-surface);
 	color: var(--color-text);

ui/src/lib/components/CommentsSection.svelte

@@ -6,10 +6,12 @@
 	import * as m from '$lib/paraglide/messages.js';
 	let {
 		slug,
+		chapter = 0,
 		isLoggedIn = false,
 		currentUserId = ''
 	}: {
 		slug: string;
+		chapter?: number;   // 0 = book-level, N = chapter N
 		isLoggedIn?: boolean;
 		currentUserId?: string;
 	} = $props();
@@ -47,7 +49,7 @@
 		loadError = '';
 		try {
 			const res = await fetch(
-				`/api/comments/${encodeURIComponent(slug)}?sort=${sort}`
+				`/api/comments/${encodeURIComponent(slug)}?sort=${sort}${chapter > 0 ? `&chapter=${chapter}` : ''}`
 			);
 			if (!res.ok) throw new Error(`${res.status}`);
 			const data = await res.json();
@@ -85,7 +87,7 @@
 			const res = await fetch(`/api/comments/${encodeURIComponent(slug)}`, {
 				method: 'POST',
 				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ body: text })
+				body: JSON.stringify({ body: text, ...(chapter > 0 ? { chapter } : {}) })
 			});
 			if (res.status === 401) { postError = 'You must be logged in to comment.'; return; }
 			if (!res.ok) {

ui/src/lib/server/pocketbase.ts

@@ -1130,6 +1130,7 @@ export async function updateUserAvatarUrl(userId: string, avatarUrl: string): Pr
 export interface PBBookComment {
 	id: string;
 	slug: string;
+	chapter?: number;   // 0 or absent = book-level; N = chapter N
 	user_id: string;
 	username: string;
 	body: string;
@@ -1150,25 +1151,26 @@ export interface CommentVote {
 export type CommentSort = 'top' | 'new';
 
 /**
- * List top-level comments for a book.
+ * List top-level comments for a book or a specific chapter.
+ * chapter=0 (default) → book-level comments only
+ * chapter=N           → comments for chapter N only
  * sort='top'  → by net score (upvotes − downvotes) desc, then newest
  * sort='new'  → newest first (default)
  * Replies (parent_id != "") are NOT included — fetch them separately.
  */
 export async function listComments(
 	slug: string,
-	sort: CommentSort = 'new'
+	sort: CommentSort = 'new',
+	chapter = 0
 ): Promise<PBBookComment[]> {
 	const token = await getToken();
 	const slugEsc = slug.replace(/"/g, '\\"');
-	// Only top-level comments (parent_id is empty or missing)
-	const filter = encodeURIComponent(`slug="${slugEsc}"&&(parent_id=""||parent_id=null)`);
-	// PocketBase sorts: for 'top' we still fetch all and re-sort in JS because
-	// PocketBase doesn't support computed sort fields.  For 'new' we push the
-	// sort down to the DB so large result sets are still paged correctly.
-	const pbSort = sort === 'new' ? '&sort=-created' : '&sort=-created';
+	const chapterFilter = chapter > 0
+		? `&&chapter=${chapter}`
+		: `&&(chapter=0||chapter=null)`;
+	const filter = encodeURIComponent(`slug="${slugEsc}"${chapterFilter}&&(parent_id=""||parent_id=null)`);
 	const res = await fetch(
-		`${PB_URL}/api/collections/book_comments/records?filter=${filter}${pbSort}&perPage=200`,
+		`${PB_URL}/api/collections/book_comments/records?filter=${filter}&sort=-created&perPage=200`,
 		{ headers: { Authorization: `Bearer ${token}` } }
 	);
 	if (!res.ok) return [];
@@ -1179,13 +1181,32 @@ export async function listComments(
 			const scoreB = (b.upvotes ?? 0) - (b.downvotes ?? 0);
 			const scoreA = (a.upvotes ?? 0) - (a.downvotes ?? 0);
 			if (scoreB !== scoreA) return scoreB - scoreA;
-			// tie-break: newest first
 			return new Date(b.created).getTime() - new Date(a.created).getTime();
 		});
 	}
 	return items;
 }
 
+/**
+ * Count unique readers for a book in the last 7 days.
+ * Uses progress.updated timestamp; counts both session-based and user-based.
+ */
+export async function countReadersThisWeek(slug: string): Promise<number> {
+	const token = await getToken();
+	const cutoff = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString();
+	const filter = encodeURIComponent(`slug="${slug.replace(/"/g, '\\"')}"&&updated>"${cutoff}"`);
+	const res = await fetch(
+		`${PB_URL}/api/collections/progress/records?filter=${filter}&perPage=500&fields=user_id,session_id`,
+		{ headers: { Authorization: `Bearer ${token}` } }
+	);
+	if (!res.ok) return 0;
+	const data = await res.json();
+	const items = (data.items ?? []) as { user_id?: string; session_id?: string }[];
+	// Deduplicate: prefer user_id when present, fall back to session_id
+	const unique = new Set(items.map((r) => r.user_id || r.session_id || '').filter(Boolean));
+	return unique.size;
+}
+
 /**
  * List replies (1-level deep) for a single parent comment.
  * Always sorted oldest-first so the conversation reads naturally.
@@ -1211,7 +1232,8 @@ export async function createComment(
 	body: string,
 	userId: string | undefined,
 	username: string,
-	parentId?: string
+	parentId?: string,
+	chapter = 0
 ): Promise<PBBookComment> {
 	const token = await getToken();
 	const res = await fetch(`${PB_URL}/api/collections/book_comments/records`, {
@@ -1219,6 +1241,7 @@ export async function createComment(
 		headers: { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' },
 		body: JSON.stringify({
 			slug,
+			chapter,
 			body,
 			user_id: userId ?? '',
 			username,

ui/src/routes/+layout.svelte

@@ -22,9 +22,12 @@
 	let langMenuOpen = $state(false);
 
 	const THEMES = [
-		{ id: 'amber', color: '#f59e0b' },
-		{ id: 'slate', color: '#818cf8' },
-		{ id: 'rose',  color: '#fb7185' },
+		{ id: 'amber',       color: '#f59e0b' },
+		{ id: 'slate',       color: '#818cf8' },
+		{ id: 'rose',        color: '#fb7185' },
+		{ id: 'light',       color: '#d97706', light: true },
+		{ id: 'light-slate', color: '#4f46e5', light: true },
+		{ id: 'light-rose',  color: '#e11d48', light: true },
 	];
 
 	// Chapter list drawer state for the mini-player
@@ -316,12 +319,15 @@
 				<div class="ml-auto flex items-center gap-2">
 					<!-- Theme dots (desktop) -->
 					<div class="hidden sm:flex items-center gap-1 mr-1">
-						{#each THEMES as t}
+						{#each THEMES as t, i}
+							{#if i === 3}
+								<span class="w-px h-3 bg-(--color-border) mx-0.5"></span>
+							{/if}
 							<button
 								type="button"
 								onclick={() => { currentTheme = t.id; }}
 								title={t.id}
-								class="w-3.5 h-3.5 rounded-full border-2 transition-all {currentTheme === t.id ? 'border-(--color-text) scale-110' : 'border-transparent opacity-50 hover:opacity-100'}"
+								class="w-3.5 h-3.5 rounded-full border-2 transition-all {currentTheme === t.id ? 'border-(--color-text) scale-110' : t.light ? 'border-(--color-border) opacity-70 hover:opacity-100' : 'border-transparent opacity-50 hover:opacity-100'}"
 								style="background: {t.color};"
 							></button>
 						{/each}
@@ -498,13 +504,16 @@
 			<div class="my-1 border-t border-(--color-border)/60"></div>
 			<div class="px-3 py-2.5 flex items-center justify-between">
 				<span class="text-xs text-(--color-muted) uppercase tracking-widest">{m.profile_theme_label()}</span>
-				<div class="flex items-center gap-2">
-					{#each THEMES as t}
+				<div class="flex items-center gap-1.5">
+					{#each THEMES as t, i}
+						{#if i === 3}
+							<span class="w-px h-4 bg-(--color-border) mx-0.5"></span>
+						{/if}
 						<button
 							type="button"
 							onclick={() => { currentTheme = t.id; }}
 							title={t.id}
-							class="w-5 h-5 rounded-full border-2 transition-all {currentTheme === t.id ? 'border-(--color-text) scale-110' : 'border-transparent opacity-50 hover:opacity-100'}"
+							class="w-5 h-5 rounded-full border-2 transition-all {currentTheme === t.id ? 'border-(--color-text) scale-110' : t.light ? 'border-(--color-border) opacity-70 hover:opacity-100' : 'border-transparent opacity-50 hover:opacity-100'}"
 							style="background: {t.color};"
 						></button>
 					{/each}

ui/src/routes/+page.svelte

@@ -10,194 +10,220 @@
 		try {
 			const parsed = JSON.parse(genres);
 			return Array.isArray(parsed) ? parsed : [];
-		} catch {
-			return [];
-		}
+		} catch { return []; }
 	}
+
+	// Deduplicate recentlyUpdated by slug, keeping the first occurrence and
+	// counting how many times the same book appears (= new chapters added).
+	const dedupedRecent = $derived.by(() => {
+		const seen = new Map<string, { book: (typeof data.recentlyUpdated)[0]; count: number }>();
+		for (const book of data.recentlyUpdated) {
+			if (seen.has(book.slug)) {
+				seen.get(book.slug)!.count++;
+			} else {
+				seen.set(book.slug, { book, count: 1 });
+			}
+		}
+		return [...seen.values()];
+	});
+
+	const GENRES = [
+		'Action', 'Fantasy', 'Romance', 'Cultivation', 'System',
+		'Reincarnation', 'Sci-Fi', 'Horror', 'Slice of Life', 'Adventure',
+	];
+
+	// Hero = first continue-reading item; shelf = the rest
+	const heroBook = $derived(data.continueReading[0] ?? null);
+	const shelfBooks = $derived(data.continueReading.slice(1));
 </script>
 
 <svelte:head>
 	<title>{m.home_title()}</title>
 </svelte:head>
 
-<!-- Stats bar -->
-<div class="flex gap-6 mb-8 text-center">
-	<div class="flex-1 rounded-lg bg-(--color-surface-2) border border-(--color-border) py-4 px-6">
-		<p class="text-2xl font-bold text-(--color-brand)">{data.stats.totalBooks}</p>
-		<p class="text-xs text-(--color-muted) mt-0.5">{m.home_stat_books()}</p>
-	</div>
-	<div class="flex-1 rounded-lg bg-(--color-surface-2) border border-(--color-border) py-4 px-6">
-		<p class="text-2xl font-bold text-(--color-brand)">{data.stats.totalChapters.toLocaleString()}</p>
-		<p class="text-xs text-(--color-muted) mt-0.5">{m.home_stat_chapters()}</p>
-	</div>
-	<div class="flex-1 rounded-lg bg-(--color-surface-2) border border-(--color-border) py-4 px-6">
-		<p class="text-2xl font-bold text-(--color-brand)">{data.stats.booksInProgress}</p>
-		<p class="text-xs text-(--color-muted) mt-0.5">{m.home_stat_in_progress()}</p>
-	</div>
-</div>
-
-<!-- Continue Reading -->
-{#if data.continueReading.length > 0}
-	<section class="mb-10">
-		<div class="flex items-baseline justify-between mb-3">
-			<h2 class="text-lg font-bold text-(--color-text)">{m.home_continue_reading()}</h2>
-			<a href="/books" class="text-xs text-(--color-brand) hover:text-(--color-brand-dim)">{m.home_view_all()}</a>
+<!-- ── Hero resume card ──────────────────────────────────────────────────────── -->
+{#if heroBook}
+<section class="mb-10">
+	<a
+		href="/books/{heroBook.book.slug}/chapters/{heroBook.chapter}"
+		class="group relative flex gap-0 rounded-xl overflow-hidden bg-(--color-surface-2) border border-(--color-border) hover:border-(--color-brand)/50 transition-all"
+	>
+		<!-- Cover -->
+		<div class="w-32 sm:w-44 shrink-0 aspect-[2/3] overflow-hidden">
+			{#if heroBook.book.cover}
+				<img src={heroBook.book.cover} alt={heroBook.book.title}
+					class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="eager" />
+			{:else}
+				<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
+					<svg class="w-10 h-10 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
+					</svg>
+				</div>
+			{/if}
 		</div>
-		<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
-			{#each data.continueReading as { book, chapter }}
-				<a
-					href="/books/{book.slug}/chapters/{chapter}"
-					class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) transition-colors border border-(--color-border) hover:border-zinc-500"
-				>
-					<div class="aspect-[2/3] bg-(--color-surface) overflow-hidden relative">
-						{#if book.cover}
-							<img
-								src={book.cover}
-								alt={book.title}
-								class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-								loading="lazy"
-							/>
-						{:else}
-							<div class="w-full h-full flex items-center justify-center text-(--color-muted)">
-								<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-										d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-								</svg>
-							</div>
-						{/if}
-						<!-- Chapter badge overlay -->
-						<span class="absolute bottom-1.5 right-1.5 text-xs bg-(--color-brand) text-(--color-surface) font-bold px-1.5 py-0.5 rounded">
-							{m.home_chapter_badge({ n: String(chapter) })}
+
+		<!-- Info -->
+		<div class="flex flex-col justify-between p-5 sm:p-7 min-w-0">
+			<div>
+				<p class="text-xs font-semibold text-(--color-brand) uppercase tracking-widest mb-2">{m.home_continue_reading()}</p>
+				<h2 class="text-xl sm:text-2xl font-bold text-(--color-text) leading-snug line-clamp-2 mb-1">{heroBook.book.title}</h2>
+				{#if heroBook.book.author}
+					<p class="text-sm text-(--color-muted)">{heroBook.book.author}</p>
+				{/if}
+				{#if heroBook.book.description}
+					<p class="hidden sm:block text-sm text-(--color-muted) mt-3 line-clamp-2 max-w-prose">{heroBook.book.description}</p>
+				{/if}
+			</div>
+			<div class="flex items-center gap-3 mt-4 flex-wrap">
+				<span class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg bg-(--color-brand) text-(--color-surface) font-semibold text-sm group-hover:bg-(--color-brand-dim) transition-colors">
+					<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+					{m.home_chapter_badge({ n: String(heroBook.chapter) })}
+				</span>
+				{#each parseGenres(heroBook.book.genres).slice(0, 2) as genre}
+					<span class="text-xs px-2 py-1 rounded-full bg-(--color-surface-3) text-(--color-muted)">{genre}</span>
+				{/each}
+			</div>
+		</div>
+	</a>
+</section>
+{/if}
+
+<!-- ── Continue Reading shelf (remaining books) ──────────────────────────────── -->
+{#if shelfBooks.length > 0}
+<section class="mb-10">
+	<div class="flex items-baseline justify-between mb-3">
+		<h2 class="text-base font-bold text-(--color-text)">{m.home_continue_reading()}</h2>
+		<a href="/books" class="text-xs text-(--color-brand) hover:text-(--color-brand-dim)">{m.home_view_all()}</a>
+	</div>
+	<div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none -mx-4 px-4">
+		{#each shelfBooks as { book, chapter }}
+			<a href="/books/{book.slug}/chapters/{chapter}"
+				class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) border border-(--color-border) hover:border-(--color-brand)/40 transition-all shrink-0 w-32 sm:w-36">
+				<div class="aspect-[2/3] overflow-hidden relative">
+					{#if book.cover}
+						<img src={book.cover} alt={book.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+					{:else}
+						<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
+							<svg class="w-8 h-8 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
+						</div>
+					{/if}
+					<span class="absolute bottom-1.5 right-1.5 text-xs bg-(--color-brand) text-(--color-surface) font-bold px-1.5 py-0.5 rounded">
+						{m.home_chapter_badge({ n: String(chapter) })}
+					</span>
+				</div>
+				<div class="p-2">
+					<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title ?? ''}</h3>
+				</div>
+			</a>
+		{/each}
+	</div>
+</section>
+{/if}
+
+<!-- ── Genre discovery strip ─────────────────────────────────────────────────── -->
+<section class="mb-10">
+	<div class="flex items-baseline justify-between mb-3">
+		<h2 class="text-base font-bold text-(--color-text)">Browse by genre</h2>
+		<a href="/catalogue" class="text-xs text-(--color-brand) hover:text-(--color-brand-dim)">{m.home_view_all()}</a>
+	</div>
+	<div class="flex gap-2 overflow-x-auto pb-1 scrollbar-none -mx-4 px-4">
+		{#each GENRES as genre}
+			<a href="/catalogue?genre={encodeURIComponent(genre)}"
+				class="shrink-0 px-3.5 py-1.5 rounded-full border border-(--color-border) bg-(--color-surface-2) text-sm text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text) hover:bg-(--color-surface-3) transition-colors whitespace-nowrap">
+				{genre}
+			</a>
+		{/each}
+	</div>
+</section>
+
+<!-- ── Recently Updated ──────────────────────────────────────────────────────── -->
+{#if dedupedRecent.length > 0}
+<section class="mb-10">
+	<div class="flex items-baseline justify-between mb-3">
+		<h2 class="text-base font-bold text-(--color-text)">{m.home_recently_updated()}</h2>
+		<a href="/catalogue" class="text-xs text-(--color-brand) hover:text-(--color-brand-dim)">{m.home_view_all()}</a>
+	</div>
+	<div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none -mx-4 px-4">
+		{#each dedupedRecent as { book, count }}
+			{@const genres = parseGenres(book.genres)}
+			<a href="/books/{book.slug}"
+				class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) border border-(--color-border) hover:border-(--color-brand)/40 transition-all shrink-0 w-36 sm:w-40">
+				<div class="aspect-[2/3] overflow-hidden relative">
+					{#if book.cover}
+						<img src={book.cover} alt={book.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+					{:else}
+						<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
+							<svg class="w-8 h-8 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
+						</div>
+					{/if}
+					{#if count > 1}
+						<span class="absolute top-1.5 left-1.5 text-xs bg-(--color-success)/90 text-black font-bold px-1.5 py-0.5 rounded">
+							+{count} ch.
 						</span>
-					</div>
-					<div class="p-2">
-						<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title ?? ''}</h3>
-						{#if book.author}
-							<p class="text-xs text-(--color-muted) truncate mt-0.5">{book.author}</p>
-						{/if}
-					</div>
-				</a>
-			{/each}
-		</div>
-	</section>
-{/if}
-
-<!-- Recently Updated -->
-{#if data.recentlyUpdated.length > 0}
-	<section class="mb-10">
-		<div class="flex items-baseline justify-between mb-3">
-			<h2 class="text-lg font-bold text-(--color-text)">{m.home_recently_updated()}</h2>
-			<a href="/books" class="text-xs text-(--color-brand) hover:text-(--color-brand-dim)">{m.home_view_all()}</a>
-		</div>
-		<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
-			{#each data.recentlyUpdated as book}
-				{@const genres = parseGenres(book.genres)}
-				<a
-					href="/books/{book.slug}"
-					class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) transition-colors border border-(--color-border) hover:border-zinc-500"
-				>
-					<div class="aspect-[2/3] bg-(--color-surface) overflow-hidden">
-						{#if book.cover}
-							<img
-								src={book.cover}
-								alt={book.title}
-								class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-								loading="lazy"
-							/>
-						{:else}
-							<div class="w-full h-full flex items-center justify-center text-(--color-muted)">
-								<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-										d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-								</svg>
-							</div>
-						{/if}
-					</div>
-					<div class="p-2 flex flex-col gap-1">
-						<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title ?? ''}</h3>
-						{#if book.author}
-							<p class="text-xs text-(--color-muted) truncate">{book.author}</p>
-						{/if}
-						{#if book.status}
-							<span class="text-xs px-1.5 py-0.5 rounded bg-(--color-surface-3) text-(--color-text) self-start">{book.status}</span>
-						{/if}
-						{#if genres.length > 0}
-							<div class="flex flex-wrap gap-1 mt-auto pt-1">
-								{#each genres.slice(0, 2) as genre}
-									<span class="text-xs px-1 py-0.5 rounded bg-(--color-surface) text-(--color-muted)">{genre}</span>
-								{/each}
-							</div>
-						{/if}
-					</div>
-				</a>
-			{/each}
-		</div>
-	</section>
-{/if}
-
-<!-- Empty state -->
-{#if data.continueReading.length === 0 && data.recentlyUpdated.length === 0}
-	<div class="text-center py-20 text-(--color-muted)">
-		<p class="text-lg font-semibold text-(--color-text) mb-2">{m.home_empty_title()}</p>
-		<p class="text-sm mb-6">{m.home_empty_body()}</p>
-		<a
-			href="/catalogue"
-			class="inline-block px-6 py-3 bg-(--color-brand) text-(--color-surface) font-semibold rounded hover:bg-(--color-brand-dim) transition-colors"
-		>
-			{m.home_discover_novels()}
-		</a>
+					{/if}
+				</div>
+				<div class="p-2 flex flex-col gap-1">
+					<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title ?? ''}</h3>
+					{#if book.author}
+						<p class="text-xs text-(--color-muted) truncate">{book.author}</p>
+					{/if}
+					{#if genres.length > 0}
+						<div class="flex flex-wrap gap-1 mt-auto pt-0.5">
+							{#each genres.slice(0, 2) as genre}
+								<span class="text-xs px-1 py-0.5 rounded bg-(--color-surface) text-(--color-muted)">{genre}</span>
+							{/each}
+						</div>
+					{/if}
+				</div>
+			</a>
+		{/each}
 	</div>
+</section>
 {/if}
 
-<!-- From Subscriptions -->
+<!-- ── From Following ────────────────────────────────────────────────────────── -->
 {#if data.subscriptionFeed.length > 0}
-	<section class="mb-10">
-		<div class="flex items-baseline justify-between mb-3">
-			<h2 class="text-lg font-bold text-(--color-text)">{m.home_from_following()}</h2>
-		</div>
-		<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
-			{#each data.subscriptionFeed as { book, readerUsername }}
-				{@const genres = parseGenres(book.genres)}
-				<a
-					href="/books/{book.slug}"
-					class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) transition-colors border border-(--color-border) hover:border-zinc-500"
-				>
-					<div class="aspect-[2/3] bg-(--color-surface) overflow-hidden">
-						{#if book.cover}
-							<img
-								src={book.cover}
-								alt={book.title}
-								class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
-								loading="lazy"
-							/>
-						{:else}
-							<div class="w-full h-full flex items-center justify-center text-(--color-muted)">
-								<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-										d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-								</svg>
-							</div>
-						{/if}
-					</div>
-					<div class="p-2 flex flex-col gap-1">
-						<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title ?? ''}</h3>
-						{#if book.author}
-							<p class="text-xs text-(--color-muted) truncate">{book.author}</p>
-						{/if}
-						<!-- Reader attribution -->
-						<p class="text-xs text-(--color-muted) truncate mt-0.5">
-							{m.home_via_reader({ username: readerUsername })}
-						</p>
-						{#if genres.length > 0}
-							<div class="flex flex-wrap gap-1 mt-auto pt-1">
-								{#each genres.slice(0, 1) as genre}
-									<span class="text-xs px-1 py-0.5 rounded bg-(--color-surface) text-(--color-muted)">{genre}</span>
-								{/each}
-							</div>
-						{/if}
-					</div>
-				</a>
-			{/each}
-		</div>
-	</section>
+<section class="mb-10">
+	<div class="flex items-baseline justify-between mb-3">
+		<h2 class="text-base font-bold text-(--color-text)">{m.home_from_following()}</h2>
+	</div>
+	<div class="flex gap-3 overflow-x-auto pb-2 scrollbar-none -mx-4 px-4">
+		{#each data.subscriptionFeed as { book, readerUsername }}
+			<a href="/books/{book.slug}"
+				class="group flex flex-col rounded-lg overflow-hidden bg-(--color-surface-2) hover:bg-(--color-surface-3) border border-(--color-border) hover:border-(--color-brand)/40 transition-all shrink-0 w-36 sm:w-40">
+				<div class="aspect-[2/3] overflow-hidden">
+					{#if book.cover}
+						<img src={book.cover} alt={book.title} class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy" />
+					{:else}
+						<div class="w-full h-full bg-(--color-surface-3) flex items-center justify-center">
+							<svg class="w-8 h-8 text-(--color-muted)" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
+						</div>
+					{/if}
+				</div>
+				<div class="p-2 flex flex-col gap-0.5">
+					<h3 class="text-xs font-semibold text-(--color-text) line-clamp-2 leading-snug">{book.title ?? ''}</h3>
+					<p class="text-xs text-(--color-muted) truncate">{m.home_via_reader({ username: readerUsername })}</p>
+				</div>
+			</a>
+		{/each}
+	</div>
+</section>
 {/if}
+
+<!-- ── Empty state (no content at all) ──────────────────────────────────────── -->
+{#if data.continueReading.length === 0 && dedupedRecent.length === 0}
+<div class="text-center py-20 text-(--color-muted)">
+	<p class="text-lg font-semibold text-(--color-text) mb-2">{m.home_empty_title()}</p>
+	<p class="text-sm mb-6">{m.home_empty_body()}</p>
+	<a href="/catalogue" class="inline-block px-6 py-3 bg-(--color-brand) text-(--color-surface) font-semibold rounded-lg hover:bg-(--color-brand-dim) transition-colors">
+		{m.home_discover_novels()}
+	</a>
+</div>
+{/if}
+
+<!-- ── Stats footer ──────────────────────────────────────────────────────────── -->
+<div class="mt-6 pt-6 border-t border-(--color-border) flex items-center justify-center gap-6 text-sm text-(--color-muted)">
+	<span><span class="font-semibold text-(--color-text)">{data.stats.totalBooks.toLocaleString()}</span> {m.home_stat_books()}</span>
+	<span class="w-px h-4 bg-(--color-border)"></span>
+	<span><span class="font-semibold text-(--color-text)">{data.stats.totalChapters.toLocaleString()}</span> {m.home_stat_chapters()}</span>
+</div>

ui/src/routes/api/comments/[slug]/+server.ts

@@ -21,9 +21,10 @@ export const GET: RequestHandler = async ({ params, url, locals }) => {
 	const { slug } = params;
 	const sortParam = url.searchParams.get('sort') ?? 'new';
 	const sort: CommentSort = sortParam === 'top' ? 'top' : 'new';
+	const chapter = parseInt(url.searchParams.get('chapter') ?? '0', 10) || 0;
 
 	try {
-		const topLevel = await listComments(slug, sort);
+		const topLevel = await listComments(slug, sort, chapter);
 
 		// Fetch replies for all top-level comments in parallel
 		const repliesPerComment = await Promise.all(topLevel.map((c) => listReplies(c.id)));
@@ -75,7 +76,7 @@ export const POST: RequestHandler = async ({ params, request, locals }) => {
 	if (!locals.user) error(401, 'Login required to comment');
 
 	const { slug } = params;
-	let body: { body?: string; parent_id?: string };
+	let body: { body?: string; parent_id?: string; chapter?: number };
 	try {
 		body = await request.json();
 	} catch {
@@ -86,8 +87,8 @@ export const POST: RequestHandler = async ({ params, request, locals }) => {
 	if (!text) error(400, 'Comment body is required');
 	if (text.length > 2000) error(400, 'Comment is too long (max 2000 characters)');
 
-	// Enforce 1-level depth: parent_id must be a top-level comment
 	const parentId = body.parent_id?.trim() || undefined;
+	const chapter = typeof body.chapter === 'number' ? body.chapter : 0;
 
 	try {
 		const comment = await createComment(
@@ -95,7 +96,8 @@ export const POST: RequestHandler = async ({ params, request, locals }) => {
 			text,
 			locals.user.id,
 			locals.user.username,
-			parentId
+			parentId,
+			chapter
 		);
 		return json(comment, { status: 201 });
 	} catch (e) {

ui/src/routes/api/settings/+server.ts

@@ -44,7 +44,7 @@ export const PUT: RequestHandler = async ({ request, locals }) => {
 	}
 
 	// theme is optional — if provided it must be a known value
-	const validThemes = ['amber', 'slate', 'rose'];
+	const validThemes = ['amber', 'slate', 'rose', 'light', 'light-slate', 'light-rose'];
 	if (body.theme !== undefined && !validThemes.includes(body.theme)) {
 		error(400, `Invalid theme — must be one of: ${validThemes.join(', ')}`);
 	}

ui/src/routes/books/[slug]/+page.server.ts

@@ -1,6 +1,6 @@
 import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
-import { getBook, listChapterIdx, getProgress, isBookSaved } from '$lib/server/pocketbase';
+import { getBook, listChapterIdx, getProgress, isBookSaved, countReadersThisWeek } from '$lib/server/pocketbase';
 import { log } from '$lib/server/logger';
 import { backendFetch, type BookPreviewResponse } from '$lib/server/scraper';
 
@@ -15,12 +15,13 @@ export const load: PageServerLoad = async ({ params, locals }) => {
 
 	if (book) {
 		// Book is in the library — normal path
-		let chapters, progress, saved;
+		let chapters, progress, saved, readersThisWeek;
 		try {
-			[chapters, progress, saved] = await Promise.all([
+			[chapters, progress, saved, readersThisWeek] = await Promise.all([
 				listChapterIdx(slug),
 				getProgress(locals.sessionId, slug, locals.user?.id),
-				isBookSaved(locals.sessionId, slug, locals.user?.id)
+				isBookSaved(locals.sessionId, slug, locals.user?.id),
+				countReadersThisWeek(slug)
 			]);
 		} catch (e) {
 			log.error('books', 'failed to load book page data', { slug, err: String(e) });
@@ -33,6 +34,7 @@ export const load: PageServerLoad = async ({ params, locals }) => {
 			inLib: true,
 			saved,
 			lastChapter: progress?.chapter ?? null,
+			readersThisWeek,
 			isAdmin: locals.user?.role === 'admin',
 			isLoggedIn: !!locals.user,
 			currentUserId: locals.user?.id ?? '',

ui/src/routes/books/[slug]/+page.svelte

@@ -203,6 +203,12 @@
 					{#each genres as genre}
 						<span class="text-xs px-2 py-0.5 rounded bg-(--color-surface-2) text-(--color-muted) border border-(--color-border)">{genre}</span>
 					{/each}
+					{#if data.readersThisWeek && data.readersThisWeek > 0}
+						<span class="text-xs px-2 py-0.5 rounded bg-(--color-surface-2) text-(--color-muted) border border-(--color-border) flex items-center gap-1">
+							<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/></svg>
+							{data.readersThisWeek} reading this week
+						</span>
+					{/if}
 				</div>
 
 				<!-- Summary with expand toggle -->

ui/src/routes/books/[slug]/chapters/[n]/+page.svelte

@@ -3,6 +3,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import AudioPlayer from '$lib/components/AudioPlayer.svelte';
+	import CommentsSection from '$lib/components/CommentsSection.svelte';
 	import type { PageData } from './$types';
 	import * as m from '$lib/paraglide/messages.js';
 
@@ -337,3 +338,13 @@
 		</a>
 	{/if}
 </div>
+
+<!-- Chapter comments -->
+<div class="mt-12">
+	<CommentsSection
+		slug={data.book.slug}
+		chapter={data.chapter.number}
+		isLoggedIn={!!page.data.user}
+		currentUserId={page.data.user?.id ?? ''}
+	/>
+</div>

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

@@ -83,10 +83,13 @@
 	let selectedFontFamily = $state(untrack(() => data.settings?.fontFamily ?? settingsCtx?.fontFamily ?? 'system'));
 	let selectedFontSize = $state(untrack(() => data.settings?.fontSize ?? settingsCtx?.fontSize ?? 1.0));
 
-	const THEMES: { id: string; label: () => string; swatch: string }[] = [
-		{ id: 'amber', label: () => m.profile_theme_amber(), swatch: '#f59e0b' },
-		{ id: 'slate', label: () => m.profile_theme_slate(), swatch: '#818cf8' },
-		{ id: 'rose',  label: () => m.profile_theme_rose(),  swatch: '#fb7185' },
+	const THEMES: { id: string; label: () => string; swatch: string; light?: boolean }[] = [
+		{ id: 'amber',       label: () => m.profile_theme_amber(),       swatch: '#f59e0b' },
+		{ id: 'slate',       label: () => m.profile_theme_slate(),       swatch: '#818cf8' },
+		{ id: 'rose',        label: () => m.profile_theme_rose(),        swatch: '#fb7185' },
+		{ id: 'light',       label: () => m.profile_theme_light(),       swatch: '#d97706', light: true },
+		{ id: 'light-slate', label: () => m.profile_theme_light_slate(), swatch: '#4f46e5', light: true },
+		{ id: 'light-rose',  label: () => m.profile_theme_light_rose(),  swatch: '#e11d48', light: true },
 	];
 
 	const FONTS = [
@@ -332,8 +335,11 @@
 		<!-- Theme -->
 		<div class="px-6 py-5 space-y-3">
 			<p class="text-sm font-medium text-(--color-text)">{m.profile_theme_label()}</p>
-			<div class="flex gap-2 flex-wrap">
-				{#each THEMES as t}
+			<div class="flex gap-2 flex-wrap items-center">
+				{#each THEMES as t, i}
+					{#if i === 3}
+						<span class="w-px h-6 bg-(--color-border) mx-1 self-center"></span>
+					{/if}
 					<button
 						type="button"
 						onclick={() => (selectedTheme = t.id)}
@@ -343,7 +349,7 @@
 								: 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
 						aria-pressed={selectedTheme === t.id}
 					>
-						<span class="w-3 h-3 rounded-full shrink-0" style="background: {t.swatch};"></span>
+						<span class="w-3 h-3 rounded-full shrink-0 {t.light ? 'ring-1 ring-(--color-border)' : ''}" style="background: {t.swatch};"></span>
 						{t.label()}
 					</button>
 				{/each}