fix: clean up book detail mobile layout + make genre tags linkable

Mobile action area was cluttered with Continue, Start ch.1, bookmark,
stars, and shelf dropdown all competing in a single unstructured row.

- Split mobile CTAs into two clear rows:
  Row 1: primary read button(s) only (Continue / Start from ch.1)
  Row 2: bookmark icon + shelf dropdown + star rating inline
- 'Start from ch.1' no longer stretches to flex-1 when Continue is
  present — it's a compact secondary button instead
- Stars and shelf dropdown moved out of the CTA row into their own line

Genre tags were plain <span> elements with no interaction. Tapping
'fantasy' or 'action' now navigates to /catalogue?genre=fantasy,
pre-selecting the genre filter on the catalogue page.

ui/src/routes/+layout.svelte

@@ -88,6 +88,7 @@
 	// Apply persisted settings once on mount (server-loaded data).
 	// Use a derived to react to future invalidateAll() re-loads too.
 	let settingsApplied = false;
+	let settingsDirty = false; // true only after the first apply completes
 	$effect(() => {
 		if (data.settings) {
 			if (!settingsApplied) {
@@ -100,6 +101,9 @@
 			currentTheme = data.settings.theme ?? 'amber';
 			currentFontFamily = data.settings.fontFamily ?? 'system';
 			currentFontSize = data.settings.fontSize ?? 1.0;
+			// Mark dirty only after the synchronous apply is done so the save
+			// effect doesn't fire for this initial load.
+			setTimeout(() => { settingsDirty = true; }, 0);
 		}
 	});
 
@@ -114,8 +118,9 @@
 		const fontFamily = currentFontFamily;
 		const fontSize = currentFontSize;
 
-		// Skip saving until settings have been applied from the server
-		if (!settingsApplied) return;
+		// Skip saving until settings have been applied from the server AND
+		// at least one user-driven change has occurred after that.
+		if (!settingsDirty) return;
 
 		clearTimeout(settingsSaveTimer);
 		settingsSaveTimer = setTimeout(() => {

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

@@ -43,27 +43,27 @@ export const PUT: RequestHandler = async ({ request, locals }) => {
 		error(400, 'Invalid body — expected { autoNext, voice, speed }');
 	}
 
-	// theme is optional — if provided it must be a known value
+	// theme is optional — if provided (and non-empty) it must be a known value
 	const validThemes = ['amber', 'slate', 'rose', 'light', 'light-slate', 'light-rose'];
-	if (body.theme !== undefined && !validThemes.includes(body.theme)) {
+	if (body.theme !== undefined && body.theme !== '' && !validThemes.includes(body.theme)) {
 		error(400, `Invalid theme — must be one of: ${validThemes.join(', ')}`);
 	}
 
-	// locale is optional — if provided it must be a known value
+	// locale is optional — if provided (and non-empty) it must be a known value
 	const validLocales = ['en', 'ru', 'id', 'pt', 'fr'];
-	if (body.locale !== undefined && !validLocales.includes(body.locale)) {
+	if (body.locale !== undefined && body.locale !== '' && !validLocales.includes(body.locale)) {
 		error(400, `Invalid locale — must be one of: ${validLocales.join(', ')}`);
 	}
 
-	// fontFamily is optional — if provided it must be a known value
+	// fontFamily is optional — if provided (and non-empty) it must be a known value
 	const validFontFamilies = ['system', 'serif', 'mono'];
-	if (body.fontFamily !== undefined && !validFontFamilies.includes(body.fontFamily)) {
+	if (body.fontFamily !== undefined && body.fontFamily !== '' && !validFontFamilies.includes(body.fontFamily)) {
 		error(400, `Invalid fontFamily — must be one of: ${validFontFamilies.join(', ')}`);
 	}
 
-	// fontSize is optional — if provided it must be one of the valid steps
+	// fontSize is optional — if provided (and non-zero) it must be one of the valid steps
 	const validFontSizes = [0.9, 1.0, 1.15, 1.3];
-	if (body.fontSize !== undefined && !validFontSizes.includes(body.fontSize)) {
+	if (body.fontSize !== undefined && body.fontSize !== 0 && !validFontSizes.includes(body.fontSize)) {
 		error(400, `Invalid fontSize — must be one of: ${validFontSizes.join(', ')}`);
 	}
 

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

@@ -234,7 +234,10 @@
 						<span class="text-xs px-2 py-0.5 rounded bg-(--color-surface-3) text-(--color-text) border border-(--color-border)">{book.status}</span>
 					{/if}
 					{#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>
+						<a
+							href="/catalogue?genre={encodeURIComponent(genre)}"
+							class="text-xs px-2 py-0.5 rounded bg-(--color-surface-2) text-(--color-muted) border border-(--color-border) hover:border-(--color-brand)/50 hover:text-(--color-text) transition-colors"
+						>{genre}</a>
 					{/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">
@@ -348,65 +351,82 @@
 		</div>
 
 		<!-- CTA buttons — mobile only -->
-		<div class="flex sm:hidden gap-2 items-center">
-			{#if data.lastChapter}
-				<a
-					href="/books/{book.slug}/chapters/{data.lastChapter}"
-					class="flex-1 text-center px-4 py-2.5 bg-(--color-brand) text-(--color-surface) font-semibold rounded-lg text-sm hover:bg-(--color-brand-dim) transition-colors shadow"
-				>
-					{m.book_detail_continue_ch({ n: String(data.lastChapter) })}
-				</a>
-			{/if}
-			{#if chapterList.length > 0}
-				<a
-					href="/books/{book.slug}/chapters/1"
-					class="flex-1 text-center px-4 py-2.5 rounded-lg text-sm font-semibold transition-colors
-						{data.lastChapter
-					? 'bg-(--color-surface-3) text-(--color-text) hover:bg-(--color-surface-3)'
-						: 'bg-(--color-brand) text-(--color-surface) hover:bg-(--color-brand-dim) shadow'}"
-				>
-					{data.inLib ? m.book_detail_start_ch1() : m.book_detail_preview_ch1()}
-				</a>
-			{/if}
-			{#if !data.isLoggedIn}
-				<a
-					href="/login"
-					title={m.book_detail_signin_to_save()}
-					class="flex items-center justify-center w-10 h-10 flex-shrink-0 rounded-lg border border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:text-(--color-text) 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="M5 4a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 20V4z"/>
-					</svg>
-				</a>
-			{:else if data.inLib}
-				<button
-					onclick={toggleSave}
-					disabled={saving}
-					title={saved ? m.book_detail_remove_from_library() : m.book_detail_add_to_library()}
-					class="flex items-center justify-center w-10 h-10 flex-shrink-0 rounded-lg border transition-colors disabled:opacity-50
-						{saved
-							? 'bg-(--color-brand)/20 text-(--color-brand-dim) border-(--color-brand)/30 hover:bg-red-500/20 hover:text-red-300 hover:border-red-400/30'
-							: 'bg-(--color-surface-3) text-(--color-muted) border-(--color-border) hover:bg-(--color-surface-3) hover:text-(--color-text)'}"
-				>
-					{#if saving}
-						<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
-							<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-							<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-						</svg>
-					{:else if saved}
-						<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
-							<path d="M5 4a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 20V4z"/>
-						</svg>
-					{:else}
+		<div class="flex sm:hidden flex-col gap-2 mt-3">
+			<!-- Row 1: primary read button(s) -->
+			<div class="flex gap-2">
+				{#if data.lastChapter}
+					<a
+						href="/books/{book.slug}/chapters/{data.lastChapter}"
+						class="flex-1 text-center px-4 py-2.5 bg-(--color-brand) text-(--color-surface) font-semibold rounded-lg text-sm hover:bg-(--color-brand-dim) transition-colors shadow"
+					>
+						{m.book_detail_continue_ch({ n: String(data.lastChapter) })}
+					</a>
+				{/if}
+				{#if chapterList.length > 0}
+					<a
+						href="/books/{book.slug}/chapters/1"
+						class="text-center px-4 py-2.5 rounded-lg text-sm font-semibold transition-colors
+							{data.lastChapter
+								? 'bg-(--color-surface-3) text-(--color-text) hover:bg-(--color-surface-3)'
+								: 'flex-1 bg-(--color-brand) text-(--color-surface) hover:bg-(--color-brand-dim) shadow'}"
+					>
+						{data.inLib ? m.book_detail_start_ch1() : m.book_detail_preview_ch1()}
+					</a>
+				{/if}
+			</div>
+
+			<!-- Row 2: bookmark + shelf + stars -->
+			<div class="flex items-center gap-2 flex-wrap">
+				{#if !data.isLoggedIn}
+					<a
+						href="/login"
+						title={m.book_detail_signin_to_save()}
+						class="flex items-center justify-center w-9 h-9 rounded-lg border border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:text-(--color-text) transition-colors flex-shrink-0"
+					>
 						<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="M5 4a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 20V4z"/>
 						</svg>
-					{/if}
-				</button>
-			{/if}
+					</a>
+				{:else if data.inLib}
+					<button
+						onclick={toggleSave}
+						disabled={saving}
+						title={saved ? m.book_detail_remove_from_library() : m.book_detail_add_to_library()}
+						class="flex items-center justify-center w-9 h-9 flex-shrink-0 rounded-lg border transition-colors disabled:opacity-50
+							{saved
+								? 'bg-(--color-brand)/20 text-(--color-brand-dim) border-(--color-brand)/30 hover:bg-red-500/20 hover:text-red-300 hover:border-red-400/30'
+								: 'bg-(--color-surface-3) text-(--color-muted) border-(--color-border) hover:bg-(--color-surface-3) hover:text-(--color-text)'}"
+					>
+						{#if saving}
+							<svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+								<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+								<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+							</svg>
+						{:else if saved}
+							<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+								<path d="M5 4a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 20V4z"/>
+							</svg>
+						{:else}
+							<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="M5 4a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 20V4z"/>
+							</svg>
+						{/if}
+					</button>
+				{/if}
+
+				{#if saved}
+					<select
+						value={currentShelf}
+						onchange={(e) => setShelf((e.currentTarget as HTMLSelectElement).value as ShelfName)}
+						class="bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-1.5 text-sm text-(--color-muted) focus:outline-none focus:ring-2 focus:ring-(--color-brand) cursor-pointer flex-shrink-0"
+					>
+						<option value="">Reading</option>
+						<option value="plan_to_read">Plan to Read</option>
+						<option value="completed">Completed</option>
+						<option value="dropped">Dropped</option>
+					</select>
+				{/if}
 
-			<!-- Ratings + shelf — mobile -->
-			<div class="flex sm:hidden items-center gap-3 flex-wrap mt-1">
 				<StarRating
 					rating={userRating}
 					avg={ratingAvg.avg}
@@ -414,20 +434,6 @@
 					onrate={rate}
 					size="sm"
 				/>
-				{#if saved}
-					<div class="relative">
-						<select
-							value={currentShelf}
-							onchange={(e) => setShelf((e.currentTarget as HTMLSelectElement).value as ShelfName)}
-							class="bg-(--color-surface-2) border border-(--color-border) rounded-lg px-3 py-1.5 text-sm text-(--color-muted) focus:outline-none focus:ring-2 focus:ring-(--color-brand) cursor-pointer"
-						>
-							<option value="">Reading</option>
-							<option value="plan_to_read">Plan to Read</option>
-							<option value="completed">Completed</option>
-							<option value="dropped">Dropped</option>
-						</select>
-					</div>
-				{/if}
 			</div>
 		</div>
 	</div>