feat(ui): language persistence, theme fix, font/size settings, header quick-access

- Fix language not persisting after refresh: save locale in user_settings,
  set PARAGLIDE_LOCALE cookie from DB preference on server load
- Fix theme change not applying: context setter was mismatched (setTheme vs current)
- Add font family (system/serif/mono) and text size (sm/md/lg/xl) user settings
  stored in DB and applied via CSS custom properties
- Add theme color dots and language picker to desktop header for quick access
- Footer locale switcher now saves preference to DB before switching
- Remove change password section (OAuth-only, no password login)
- Fix active sessions piling up: reuse existing session on re-login via OAuth
- Extend speed step cycle to include 2.5× and 3.0× (matching profile slider)
- Replace plain checkbox with modern toggle switch for auto-next setting
- Fix catalogue status labels (ongoing/completed) to use translation keys
- Add font family and text size translation keys to all 5 locale files

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

backend/internal/runner/asynq_runner.go

@@ -13,6 +13,8 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
+	"os"
+	"sync"
 	"time"
 
 	"github.com/hibiken/asynq"
@@ -72,6 +74,44 @@ func (r *Runner) runAsynq(ctx context.Context) error {
 
 	r.deps.Log.Info("runner: asynq mode active", "redis_addr", r.cfg.RedisAddr)
 
+	// ── Heartbeat goroutine ──────────────────────────────────────────────
+	// Write /tmp/runner.alive every 30s so Docker healthcheck passes in asynq mode.
+	// This mirrors the heartbeat file behavior from the poll() loop.
+	go func() {
+		heartbeatTick := time.NewTicker(r.cfg.StaleTaskThreshold)
+		defer heartbeatTick.Stop()
+		for {
+			select {
+			case <-ctx.Done():
+				return
+			case <-heartbeatTick.C:
+				if f, err := os.Create("/tmp/runner.alive"); err != nil {
+					r.deps.Log.Warn("runner: could not write heartbeat file", "err", err)
+				} else {
+					f.Close()
+				}
+			}
+		}
+	}()
+
+	// ── Translation polling goroutine ────────────────────────────────────
+	// Translation tasks live in PocketBase (not Redis), so we need a separate
+	// poll loop to claim and dispatch them. This runs alongside the Asynq server.
+	translationSem := make(chan struct{}, r.cfg.MaxConcurrentTranslation)
+	var translationWg sync.WaitGroup
+	go func() {
+		tick := time.NewTicker(r.cfg.PollInterval)
+		defer tick.Stop()
+		for {
+			select {
+			case <-ctx.Done():
+				return
+			case <-tick.C:
+				r.pollTranslationTasks(ctx, translationSem, &translationWg)
+			}
+		}
+	}()
+
 	// Run catalogue refresh ticker in the background.
 	go func() {
 		for {
@@ -93,6 +133,9 @@ func (r *Runner) runAsynq(ctx context.Context) error {
 	<-ctx.Done()
 	r.deps.Log.Info("runner: context cancelled, shutting down asynq server")
 	srv.Shutdown()
+
+	// Wait for translation tasks to complete.
+	translationWg.Wait()
 	return nil
 }
 
@@ -147,3 +190,47 @@ func (r *Runner) handleAudioTask(ctx context.Context, t *asynq.Task) error {
 	r.runAudioTask(ctx, task)
 	return nil
 }
+
+// pollTranslationTasks claims all available translation tasks from PocketBase
+// and dispatches them to goroutines. Translation tasks don't go through Redis/Asynq
+// because they're stored in PocketBase, so we need this separate poll loop.
+func (r *Runner) pollTranslationTasks(ctx context.Context, translationSem chan struct{}, wg *sync.WaitGroup) {
+	// Reap orphaned tasks (same logic as poll() in runner.go).
+	if n, err := r.deps.Consumer.ReapStaleTasks(ctx, r.cfg.StaleTaskThreshold); err != nil {
+		r.deps.Log.Warn("runner: reap stale translation tasks failed", "err", err)
+	} else if n > 0 {
+		r.deps.Log.Info("runner: reaped stale translation tasks", "count", n)
+	}
+
+translationLoop:
+	for {
+		if ctx.Err() != nil {
+			return
+		}
+		select {
+		case translationSem <- struct{}{}:
+			// Slot acquired — proceed to claim a task.
+		default:
+			// All slots busy; leave remaining pending tasks for next tick.
+			break translationLoop
+		}
+		task, ok, err := r.deps.Consumer.ClaimNextTranslationTask(ctx, r.cfg.WorkerID)
+		if err != nil {
+			<-translationSem
+			r.deps.Log.Error("runner: ClaimNextTranslationTask failed", "err", err)
+			break
+		}
+		if !ok {
+			<-translationSem
+			break
+		}
+		r.tasksRunning.Add(1)
+		wg.Add(1)
+		go func(t domain.TranslationTask) {
+			defer wg.Done()
+			defer func() { <-translationSem }()
+			defer r.tasksRunning.Add(-1)
+			r.runTranslationTask(ctx, t)
+		}(task)
+	}
+}

scripts/pb-init-v3.sh

@@ -272,5 +272,7 @@ add_field "app_users"      "verification_token"     "text"
 add_field "app_users"      "verification_token_exp" "text"
 add_field "app_users"      "oauth_provider"         "text"
 add_field "app_users"      "oauth_id"               "text"
+add_field "app_users"      "polar_customer_id"      "text"
+add_field "app_users"      "polar_subscription_id"  "text"
 
 log "done"

ui/messages/en.json

@@ -329,6 +329,18 @@
   "profile_password_changed_ok": "Password changed successfully.",
   "profile_playback_speed": "Playback speed \u2014 {speed}x",
 
+  "profile_subscription_heading": "Subscription",
+  "profile_plan_pro": "Pro",
+  "profile_plan_free": "Free",
+  "profile_pro_active": "Your Pro subscription is active.",
+  "profile_pro_perks": "Unlimited audio, all translation languages, and voice selection are enabled.",
+  "profile_manage_subscription": "Manage subscription",
+  "profile_upgrade_heading": "Upgrade to Pro",
+  "profile_upgrade_desc": "Unlock unlimited audio, translations in 4 languages, and voice selection.",
+  "profile_upgrade_monthly": "Monthly \u2014 $6 / mo",
+  "profile_upgrade_annual": "Annual \u2014 $48 / yr",
+  "profile_free_limits": "Free plan: 3 audio chapters per day, English reading only.",
+
   "user_currently_reading": "Currently Reading",
   "user_library_count": "Library ({n})",
   "user_joined": "Joined {date}",
@@ -380,5 +392,15 @@
   "reader_generate_samples": "Generate missing samples",
   "reader_voice_applies_next": "New voice applies on next \u201cPlay narration\u201d.",
   "reader_choose_voice": "Choose Voice",
-  "reader_generating_narration": "Generating narration\u2026"
+  "reader_generating_narration": "Generating narration\u2026",
+
+  "profile_font_family": "Font Family",
+  "profile_font_system": "System",
+  "profile_font_serif": "Serif",
+  "profile_font_mono": "Monospace",
+  "profile_text_size": "Text Size",
+  "profile_text_size_sm": "Small",
+  "profile_text_size_md": "Normal",
+  "profile_text_size_lg": "Large",
+  "profile_text_size_xl": "X-Large"
 }

ui/messages/fr.json

@@ -329,6 +329,18 @@
   "profile_password_changed_ok": "Mot de passe modifié avec succès.",
   "profile_playback_speed": "Vitesse de lecture — {speed}x",
 
+  "profile_subscription_heading": "Abonnement",
+  "profile_plan_pro": "Pro",
+  "profile_plan_free": "Gratuit",
+  "profile_pro_active": "Votre abonnement Pro est actif.",
+  "profile_pro_perks": "Audio illimité, toutes les langues de traduction et la sélection de voix sont activées.",
+  "profile_manage_subscription": "Gérer l'abonnement",
+  "profile_upgrade_heading": "Passer au Pro",
+  "profile_upgrade_desc": "Débloquez l'audio illimité, les traductions en 4 langues et la sélection de voix.",
+  "profile_upgrade_monthly": "Mensuel — 6 $ / mois",
+  "profile_upgrade_annual": "Annuel — 48 $ / an",
+  "profile_free_limits": "Plan gratuit : 3 chapitres audio par jour, lecture en anglais uniquement.",
+
   "user_currently_reading": "En cours de lecture",
   "user_library_count": "Bibliothèque ({n})",
   "user_joined": "Inscrit le {date}",
@@ -379,5 +391,15 @@
   "reader_generate_samples": "Générer les échantillons manquants",
   "reader_voice_applies_next": "La nouvelle voix s'appliquera au prochain « Lire la narration ».",
   "reader_choose_voice": "Choisir une voix",
-  "reader_generating_narration": "Génération de la narration…"
+  "reader_generating_narration": "Génération de la narration…",
+
+  "profile_font_family": "Police",
+  "profile_font_system": "Système",
+  "profile_font_serif": "Serif",
+  "profile_font_mono": "Mono",
+  "profile_text_size": "Taille du texte",
+  "profile_text_size_sm": "Petit",
+  "profile_text_size_md": "Normal",
+  "profile_text_size_lg": "Grand",
+  "profile_text_size_xl": "Très grand"
 }

ui/messages/id.json

@@ -329,6 +329,18 @@
   "profile_password_changed_ok": "Kata sandi berhasil diubah.",
   "profile_playback_speed": "Kecepatan pemutaran — {speed}x",
 
+  "profile_subscription_heading": "Langganan",
+  "profile_plan_pro": "Pro",
+  "profile_plan_free": "Gratis",
+  "profile_pro_active": "Langganan Pro kamu aktif.",
+  "profile_pro_perks": "Audio tanpa batas, semua bahasa terjemahan, dan pilihan suara tersedia.",
+  "profile_manage_subscription": "Kelola langganan",
+  "profile_upgrade_heading": "Tingkatkan ke Pro",
+  "profile_upgrade_desc": "Buka audio tanpa batas, terjemahan dalam 4 bahasa, dan pilihan suara.",
+  "profile_upgrade_monthly": "Bulanan — $6 / bln",
+  "profile_upgrade_annual": "Tahunan — $48 / thn",
+  "profile_free_limits": "Paket gratis: 3 bab audio per hari, hanya bahasa Inggris.",
+
   "user_currently_reading": "Sedang Dibaca",
   "user_library_count": "Perpustakaan ({n})",
   "user_joined": "Bergabung {date}",
@@ -379,5 +391,15 @@
   "reader_generate_samples": "Hasilkan sampel yang hilang",
   "reader_voice_applies_next": "Suara baru berlaku pada \"Putar narasi\" berikutnya.",
   "reader_choose_voice": "Pilih Suara",
-  "reader_generating_narration": "Membuat narasi…"
+  "reader_generating_narration": "Membuat narasi…",
+
+  "profile_font_family": "Jenis Font",
+  "profile_font_system": "Sistem",
+  "profile_font_serif": "Serif",
+  "profile_font_mono": "Mono",
+  "profile_text_size": "Ukuran Teks",
+  "profile_text_size_sm": "Kecil",
+  "profile_text_size_md": "Normal",
+  "profile_text_size_lg": "Besar",
+  "profile_text_size_xl": "Sangat Besar"
 }

ui/messages/pt-BR.json

@@ -329,6 +329,18 @@
   "profile_password_changed_ok": "Senha alterada com sucesso.",
   "profile_playback_speed": "Velocidade de reprodução — {speed}x",
 
+  "profile_subscription_heading": "Assinatura",
+  "profile_plan_pro": "Pro",
+  "profile_plan_free": "Gratuito",
+  "profile_pro_active": "Sua assinatura Pro está ativa.",
+  "profile_pro_perks": "Áudio ilimitado, todos os idiomas de tradução e seleção de voz estão habilitados.",
+  "profile_manage_subscription": "Gerenciar assinatura",
+  "profile_upgrade_heading": "Assinar o Pro",
+  "profile_upgrade_desc": "Desbloqueie áudio ilimitado, traduções em 4 idiomas e seleção de voz.",
+  "profile_upgrade_monthly": "Mensal — $6 / mês",
+  "profile_upgrade_annual": "Anual — $48 / ano",
+  "profile_free_limits": "Plano gratuito: 3 capítulos de áudio por dia, somente inglês.",
+
   "user_currently_reading": "Lendo Agora",
   "user_library_count": "Biblioteca ({n})",
   "user_joined": "Entrou em {date}",
@@ -379,5 +391,15 @@
   "reader_generate_samples": "Gerar amostras ausentes",
   "reader_voice_applies_next": "A nova voz será aplicada no próximo \"Reproduzir narração\".",
   "reader_choose_voice": "Escolher Voz",
-  "reader_generating_narration": "Gerando narração…"
+  "reader_generating_narration": "Gerando narração…",
+
+  "profile_font_family": "Fonte",
+  "profile_font_system": "Sistema",
+  "profile_font_serif": "Serif",
+  "profile_font_mono": "Mono",
+  "profile_text_size": "Tamanho do texto",
+  "profile_text_size_sm": "Pequeno",
+  "profile_text_size_md": "Normal",
+  "profile_text_size_lg": "Grande",
+  "profile_text_size_xl": "Muito grande"
 }

ui/messages/ru.json

@@ -329,6 +329,18 @@
   "profile_password_changed_ok": "Пароль успешно изменён.",
   "profile_playback_speed": "Скорость воспроизведения — {speed}x",
 
+  "profile_subscription_heading": "Подписка",
+  "profile_plan_pro": "Pro",
+  "profile_plan_free": "Бесплатно",
+  "profile_pro_active": "Ваша подписка Pro активна.",
+  "profile_pro_perks": "Безлимитное аудио, все языки перевода и выбор голоса доступны.",
+  "profile_manage_subscription": "Управление подпиской",
+  "profile_upgrade_heading": "Перейти на Pro",
+  "profile_upgrade_desc": "Разблокируйте безлимитное аудио, переводы на 4 языка и выбор голоса.",
+  "profile_upgrade_monthly": "Ежемесячно — $6 / мес",
+  "profile_upgrade_annual": "Ежегодно — $48 / год",
+  "profile_free_limits": "Бесплатный план: 3 аудиоглавы в день, только английский.",
+
   "user_currently_reading": "Сейчас читает",
   "user_library_count": "Библиотека ({n})",
   "user_joined": "Зарегистрирован {date}",
@@ -379,5 +391,15 @@
   "reader_generate_samples": "Сгенерировать недостающие образцы",
   "reader_voice_applies_next": "Новый голос применится при следующем нажатии «Воспроизвести».",
   "reader_choose_voice": "Выбрать голос",
-  "reader_generating_narration": "Генерация озвучки…"
+  "reader_generating_narration": "Генерация озвучки…",
+
+  "profile_font_family": "Шрифт",
+  "profile_font_system": "Системный",
+  "profile_font_serif": "Serif",
+  "profile_font_mono": "Моноширинный",
+  "profile_text_size": "Размер текста",
+  "profile_text_size_sm": "Маленький",
+  "profile_text_size_md": "Нормальный",
+  "profile_text_size_lg": "Большой",
+  "profile_text_size_xl": "Очень большой"
 }

ui/src/app.css

@@ -56,11 +56,18 @@ html {
 	color: var(--color-text);
 }
 
+/* ── Reading typography custom properties ──────────────────────────── */
+:root {
+	--reading-font: system-ui, -apple-system, sans-serif;
+	--reading-size: 1.05rem;
+}
+
 /* ── Chapter prose ─────────────────────────────────────────────────── */
 .prose-chapter {
 	max-width: 72ch;
 	line-height: 1.85;
-	font-size: 1.05rem;
+	font-family: var(--reading-font);
+	font-size: var(--reading-size);
 	color: var(--color-muted);
 }
 

ui/src/app.d.ts

@@ -6,9 +6,11 @@ declare global {
 		interface Locals {
 			sessionId: string;
 			user: { id: string; username: string; role: string; authSessionId: string } | null;
+			isPro: boolean;
 		}
 		interface PageData {
 			user?: { id: string; username: string; role: string; authSessionId: string } | null;
+			isPro?: boolean;
 		}
 		// interface PageState {}
 		// interface Platform {}

ui/src/hooks.server.ts

@@ -6,7 +6,7 @@ import { randomBytes, createHmac } from 'node:crypto';
 import { env } from '$env/dynamic/private';
 import { env as pubEnv } from '$env/dynamic/public';
 import { log } from '$lib/server/logger';
-import { createUserSession, touchUserSession, isSessionRevoked } from '$lib/server/pocketbase';
+import { createUserSession, touchUserSession, isSessionRevoked, getUserById } from '$lib/server/pocketbase';
 import { drain as drainPresignCache } from '$lib/server/presignCache';
 import { NodeSDK } from '@opentelemetry/sdk-node';
 import { OTLPTraceExporter } from '@opentelemetry/exporter-trace-otlp-http';
@@ -210,6 +210,18 @@ const appHandle: Handle = async ({ event, resolve }) => {
 		event.locals.user = null;
 	}
 
+	// ── isPro: read fresh from DB so role changes take effect without re-login ──
+	if (event.locals.user) {
+		try {
+			const dbUser = await getUserById(event.locals.user.id);
+			event.locals.isPro = dbUser?.role === 'pro' || dbUser?.role === 'admin';
+		} catch {
+			event.locals.isPro = false;
+		}
+	} else {
+		event.locals.isPro = false;
+	}
+
 	return resolve(event);
 };
 

ui/src/lib/components/AudioPlayer.svelte

@@ -67,6 +67,8 @@
 		chapters?: { number: number; title: string }[];
 		/** List of available voices from the backend. */
 		voices?: Voice[];
+		/** Called when the server returns 402 (free daily limit reached). */
+		onProRequired?: () => void;
 	}
 
 	let {
@@ -77,7 +79,8 @@
 		cover = '',
 		nextChapter = null,
 		chapters = [],
-		voices = []
+		voices = [],
+		onProRequired = undefined
 	}: Props = $props();
 
 	// ── Derived: voices grouped by engine ──────────────────────────────────
@@ -563,6 +566,15 @@
 					headers: { 'Content-Type': 'application/json' },
 					body: JSON.stringify({ voice })
 				});
+
+				if (res.status === 402) {
+					// Free daily limit reached — surface upgrade CTA
+					audioStore.status = 'idle';
+					stopProgress();
+					onProRequired?.();
+					return;
+				}
+
 				if (!res.ok) throw new Error(`Generation failed: HTTP ${res.status}`);
 
 				if (res.status === 200) {

ui/src/lib/server/pocketbase.ts

@@ -55,6 +55,9 @@ export interface PBUserSettings {
 	voice: string;
 	speed: number;
 	theme?: string;
+	locale?: string;
+	font_family?: string;
+	font_size?: number;
 	updated?: string;
 }
 
@@ -71,6 +74,8 @@ export interface User {
 	verification_token_exp?: string;
 	oauth_provider?: string;
 	oauth_id?: string;
+	polar_customer_id?: string;
+	polar_subscription_id?: string;
 }
 
 // ─── Auth token cache ─────────────────────────────────────────────────────────
@@ -572,6 +577,28 @@ export async function getUserByOAuth(provider: string, oauthId: string): Promise
 	);
 }
 
+/**
+ * Look up a user by their Polar customer ID. Returns null if not found.
+ */
+export async function getUserByPolarCustomerId(polarCustomerId: string): Promise<User | null> {
+	return listOne<User>(
+		'app_users',
+		`polar_customer_id="${polarCustomerId.replace(/"/g, '\\"')}"`
+	);
+}
+
+/**
+ * Patch arbitrary fields on an app_user record.
+ */
+export async function patchUser(userId: string, fields: Partial<User & Record<string, unknown>>): Promise<void> {
+	const res = await pbPatch(`/api/collections/app_users/records/${encodeURIComponent(userId)}`, fields);
+	if (!res.ok) {
+		const body = await res.text().catch(() => '');
+		log.error('pocketbase', 'patchUser failed', { userId, status: res.status, body });
+		throw new Error(`patchUser failed: ${res.status} — ${body}`);
+	}
+}
+
 /**
  * Create a new user via OAuth (no password). email_verified is true since the
  * provider already verified it. Throws on DB errors.
@@ -779,7 +806,7 @@ export async function getSettings(
 
 export async function saveSettings(
 	sessionId: string,
-	settings: { autoNext: boolean; voice: string; speed: number; theme?: string },
+	settings: { autoNext: boolean; voice: string; speed: number; theme?: string; locale?: string; fontFamily?: string; fontSize?: number },
 	userId?: string
 ): Promise<void> {
 	const existing = await listOne<PBUserSettings & { id: string }>(
@@ -795,6 +822,9 @@ export async function saveSettings(
 		updated: new Date().toISOString()
 	};
 	if (settings.theme !== undefined) payload.theme = settings.theme;
+	if (settings.locale !== undefined) payload.locale = settings.locale;
+	if (settings.fontFamily !== undefined) payload.font_family = settings.fontFamily;
+	if (settings.fontSize !== undefined) payload.font_size = settings.fontSize;
 	if (userId) payload.user_id = userId;
 
 	if (existing) {

ui/src/lib/server/polar.ts

@@ -0,0 +1,107 @@
+/**
+ * Polar.sh integration — server-side only.
+ *
+ * Responsibilities:
+ *  - Verify webhook signatures (HMAC-SHA256)
+ *  - Patch app_users.polar_customer_id / polar_subscription_id / role on subscription events
+ *  - Expose isPro(userId) helper for gating
+ *
+ * Product IDs (Polar dashboard):
+ *   Monthly : 1376fdf5-b6a9-492b-be70-7c905131c0f9
+ *   Annual  : b6190307-79aa-4905-80c8-9ed941378d21
+ */
+
+import { createHmac, timingSafeEqual } from 'node:crypto';
+import { env } from '$env/dynamic/private';
+import { log } from '$lib/server/logger';
+import { getUserById, getUserByPolarCustomerId, patchUser } from '$lib/server/pocketbase';
+
+export const POLAR_PRO_PRODUCT_IDS = new Set([
+	'1376fdf5-b6a9-492b-be70-7c905131c0f9', // monthly
+	'b6190307-79aa-4905-80c8-9ed941378d21'  // annual
+]);
+
+// ─── Webhook signature verification ──────────────────────────────────────────
+
+/**
+ * Verify the Polar webhook signature.
+ * Polar signs with HMAC-SHA256 over the raw body; header is "webhook-signature".
+ * Header format: "v1=<hex>"  (may be comma-separated list of sigs)
+ */
+export function verifyPolarWebhook(rawBody: string, signatureHeader: string): boolean {
+	const secret = env.POLAR_WEBHOOK_SECRET;
+	if (!secret) {
+		log.warn('polar', 'POLAR_WEBHOOK_SECRET not set — rejecting webhook');
+		return false;
+	}
+
+	const expected = createHmac('sha256', secret).update(rawBody).digest('hex');
+	const expectedBuf = Buffer.from(`v1=${expected}`);
+
+	// Header may contain multiple sigs separated by ", "
+	const sigs = signatureHeader.split(',').map((s) => s.trim());
+	for (const sig of sigs) {
+		try {
+			const sigBuf = Buffer.from(sig);
+			if (sigBuf.length === expectedBuf.length && timingSafeEqual(sigBuf, expectedBuf)) {
+				return true;
+			}
+		} catch {
+			// length mismatch etc — try next
+		}
+	}
+	return false;
+}
+
+// ─── Subscription event handler ───────────────────────────────────────────────
+
+interface PolarSubscription {
+	id: string;
+	status: string; // "active" | "canceled" | "past_due" | "unpaid" | "incomplete" | ...
+	product_id: string;
+	customer_id: string;
+	customer_email?: string;
+	user_id?: string; // Polar user id (not our user id)
+}
+
+/**
+ * Handle a Polar subscription event.
+ * Finds the matching app_user by email and updates role + polar fields.
+ */
+export async function handleSubscriptionEvent(
+	eventType: string,
+	subscription: PolarSubscription
+): Promise<void> {
+	const { id: subId, status, product_id, customer_id, customer_email } = subscription;
+
+	log.info('polar', 'subscription event', { eventType, subId, status, product_id, customer_email });
+
+	if (!customer_email) {
+		log.warn('polar', 'subscription event missing customer_email — cannot match user', { subId });
+		return;
+	}
+
+	// Find user by their polar_customer_id first (faster on repeat events), then by email
+	let user = await getUserByPolarCustomerId(customer_id).catch(() => null);
+	if (!user) {
+		const { getUserByEmail } = await import('$lib/server/pocketbase');
+		user = await getUserByEmail(customer_email).catch(() => null);
+	}
+
+	if (!user) {
+		log.warn('polar', 'no app_user found for polar customer', { customer_email, customer_id });
+		return;
+	}
+
+	const isProProduct = POLAR_PRO_PRODUCT_IDS.has(product_id);
+	const isActive = status === 'active';
+	const newRole = isProProduct && isActive ? 'pro' : (user.role === 'admin' ? 'admin' : 'user');
+
+	await patchUser(user.id, {
+		role: newRole,
+		polar_customer_id: customer_id,
+		polar_subscription_id: isActive ? subId : ''
+	});
+
+	log.info('polar', 'user role updated', { userId: user.id, username: user.username, newRole, status });
+}

ui/src/routes/+layout.server.ts

@@ -6,14 +6,14 @@ import { log } from '$lib/server/logger';
 // Routes that are accessible without being logged in
 const PUBLIC_ROUTES = new Set(['/login', '/disclaimer', '/privacy', '/dmca', '/terms']);
 
-export const load: LayoutServerLoad = async ({ locals, url }) => {
+export const load: LayoutServerLoad = async ({ locals, url, cookies }) => {
 	// Allow /auth/* (OAuth initiation + callbacks) without login
 	const isPublic = PUBLIC_ROUTES.has(url.pathname) || url.pathname.startsWith('/auth/');
 	if (!isPublic && !locals.user) {
 		redirect(302, `/login`);
 	}
 
-	let settings = { autoNext: false, voice: 'af_bella', speed: 1.0, theme: 'amber' };
+	let settings = { autoNext: false, voice: 'af_bella', speed: 1.0, theme: 'amber', locale: 'en', fontFamily: 'system', fontSize: 1.0 };
 	try {
 		const row = await getSettings(locals.sessionId, locals.user?.id);
 		if (row) {
@@ -21,15 +21,36 @@ export const load: LayoutServerLoad = async ({ locals, url }) => {
 				autoNext: row.auto_next ?? false,
 				voice: row.voice ?? 'af_bella',
 				speed: row.speed ?? 1.0,
-				theme: row.theme ?? 'amber'
+				theme: row.theme ?? 'amber',
+				locale: row.locale ?? 'en',
+				fontFamily: row.font_family ?? 'system',
+				fontSize: row.font_size ?? 1.0
 			};
 		}
 	} catch (e) {
 		log.warn('layout', 'failed to load settings', { err: String(e) });
 	}
 
+	// If user is logged in and has a non-English locale saved, ensure the
+	// PARAGLIDE_LOCALE cookie is set so the locale persists after refresh.
+	if (locals.user) {
+		const savedLocale = settings.locale ?? 'en';
+		if (savedLocale !== 'en') {
+			const currentCookieLocale = cookies.get('PARAGLIDE_LOCALE');
+			if (currentCookieLocale !== savedLocale) {
+				cookies.set('PARAGLIDE_LOCALE', savedLocale, {
+					path: '/',
+					maxAge: 34560000,
+					sameSite: 'lax',
+					httpOnly: false
+				});
+			}
+		}
+	}
+
 	return {
 		user: locals.user,
+		isPro: locals.isPro,
 		settings
 	};
 };

ui/src/routes/+layout.svelte

@@ -10,7 +10,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import { cn } from '$lib/utils';
 	import * as m from '$lib/paraglide/messages.js';
-	import { locales, getLocale, localizeHref } from '$lib/paraglide/runtime.js';
+	import { locales, getLocale } from '$lib/paraglide/runtime.js';
 
 	let { children, data }: { children: Snippet; data: LayoutData } = $props();
 
@@ -26,11 +26,17 @@
 
 	// ── Theme ──────────────────────────────────────────────────────────────
 	let currentTheme = $state(data.settings?.theme ?? 'amber');
+	let currentFontFamily = $state(data.settings?.fontFamily ?? 'system');
+	let currentFontSize = $state(data.settings?.fontSize ?? 1.0);
 
-	// Expose theme state to child pages (e.g. profile theme picker)
+	// Expose theme + font state to child pages (e.g. profile picker)
 	setContext('theme', {
 		get current() { return currentTheme; },
-		set current(v: string) { currentTheme = v; }
+		set current(v: string) { currentTheme = v; },
+		get fontFamily() { return currentFontFamily; },
+		set fontFamily(v: string) { currentFontFamily = v; },
+		get fontSize() { return currentFontSize; },
+		set fontSize(v: number) { currentFontSize = v; }
 	});
 
 	$effect(() => {
@@ -39,6 +45,17 @@
 		}
 	});
 
+	$effect(() => {
+		if (typeof document === 'undefined') return;
+		const fontMap: Record<string, string> = {
+			system: 'system-ui, -apple-system, sans-serif',
+			serif: "Georgia, 'Times New Roman', serif",
+			mono: "'Courier New', monospace",
+		};
+		document.documentElement.style.setProperty('--reading-font', fontMap[currentFontFamily] ?? fontMap.system);
+		document.documentElement.style.setProperty('--reading-size', `${currentFontSize}rem`);
+	});
+
 	// Apply persisted settings once on mount (server-loaded data).
 	// Use a derived to react to future invalidateAll() re-loads too.
 	let settingsApplied = false;
@@ -50,19 +67,23 @@
 				audioStore.voice = data.settings.voice;
 				audioStore.speed = data.settings.speed;
 			}
-			// Always sync theme (profile page calls invalidateAll after saving)
+			// Always sync theme + font (profile page calls invalidateAll after saving)
 			currentTheme = data.settings.theme ?? 'amber';
+			currentFontFamily = data.settings.fontFamily ?? 'system';
+			currentFontSize = data.settings.fontSize ?? 1.0;
 		}
 	});
 
 	// ── Persist settings changes (debounced 800ms) ──────────────────────────
 	let settingsSaveTimer = 0;
 	$effect(() => {
-		// Subscribe to the four settings fields
+		// Subscribe to settings fields
 		const autoNext = audioStore.autoNext;
 		const voice = audioStore.voice;
 		const speed = audioStore.speed;
 		const theme = currentTheme;
+		const fontFamily = currentFontFamily;
+		const fontSize = currentFontSize;
 
 		// Skip saving until settings have been applied from the server
 		if (!settingsApplied) return;
@@ -72,7 +93,7 @@
 			fetch('/api/settings', {
 				method: 'PUT',
 				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ autoNext, voice, speed, theme })
+				body: JSON.stringify({ autoNext, voice, speed, theme, fontFamily, fontSize })
 			}).catch(() => {});
 		}, 800) as unknown as number;
 	});
@@ -168,7 +189,7 @@
 		audioEl.currentTime = Math.min(audioEl.duration || 0, audioEl.currentTime + 30);
 	}
 
-	const speedSteps = [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0];
+	const speedSteps = [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0, 2.5, 3.0];
 
 	function cycleSpeed() {
 		const idx = speedSteps.indexOf(audioStore.speed);
@@ -283,6 +304,40 @@
 			</a>
 
 				<div class="ml-auto flex items-center gap-4">
+					<!-- Theme quick picker -->
+					<div class="hidden sm:flex items-center gap-1">
+						{#each [{ id: 'amber', color: '#f59e0b' }, { id: 'slate', color: '#818cf8' }, { id: 'rose', color: '#fb7185' }] as t}
+							<button
+								type="button"
+								onclick={() => { currentTheme = t.id; }}
+								title={t.id}
+								class="w-4 h-4 rounded-full border-2 transition-all {currentTheme === t.id ? 'border-(--color-text) scale-110' : 'border-transparent opacity-60 hover:opacity-100'}"
+								style="background: {t.color};"
+							></button>
+						{/each}
+					</div>
+
+					<!-- Language quick picker -->
+					<div class="hidden sm:flex items-center gap-0.5">
+						{#each locales as locale}
+							<button
+								type="button"
+								onclick={async () => {
+									await fetch('/api/settings', {
+										method: 'PUT',
+										headers: { 'Content-Type': 'application/json' },
+										body: JSON.stringify({ autoNext: audioStore.autoNext, voice: audioStore.voice, speed: audioStore.speed, theme: currentTheme, fontFamily: currentFontFamily, fontSize: currentFontSize, locale })
+									}).catch(() => {});
+									const { setLocale } = await import('$lib/paraglide/runtime.js');
+									setLocale(locale as any, { reload: true });
+								}}
+								class="px-1.5 py-0.5 rounded text-xs font-mono transition-colors {getLocale() === locale ? 'text-(--color-brand) bg-(--color-brand)/10' : 'text-(--color-muted) hover:text-(--color-text)'}"
+							>
+								{locale.toUpperCase()}
+							</button>
+						{/each}
+					</div>
+
 					<!-- Desktop: admin + profile + sign out (hidden on mobile) -->
 				{#if data.user?.role === 'admin'}
 					<a
@@ -432,19 +487,25 @@
 							d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
 					</svg>
 				</a>
-		<!-- Locale switcher (always visible) -->
+		<!-- Locale switcher (footer) -->
 			<div class="hidden sm:flex items-center gap-1 ml-2">
 				{#each locales as locale}
-					<a
-						href={localizeHref(page.url.pathname, { locale })}
-						data-sveltekit-reload
-						class="px-1.5 py-0.5 rounded text-xs font-mono transition-colors {getLocale() === locale
-							? 'text-(--color-brand) bg-(--color-brand)/10'
-							: 'text-(--color-muted) hover:text-(--color-text)'}"
+					<button
+						type="button"
+						onclick={async () => {
+							await fetch('/api/settings', {
+								method: 'PUT',
+								headers: { 'Content-Type': 'application/json' },
+								body: JSON.stringify({ autoNext: audioStore.autoNext, voice: audioStore.voice, speed: audioStore.speed, theme: currentTheme, fontFamily: currentFontFamily, fontSize: currentFontSize, locale })
+							}).catch(() => {});
+							const { setLocale } = await import('$lib/paraglide/runtime.js');
+							setLocale(locale as any, { reload: true });
+						}}
+						class="px-1.5 py-0.5 rounded text-xs font-mono transition-colors {getLocale() === locale ? 'text-(--color-brand) bg-(--color-brand)/10' : 'text-(--color-muted) hover:text-(--color-text)'}"
 						aria-label="{m.locale_switcher_label()}: {locale}"
 					>
 						{locale.toUpperCase()}
-					</a>
+					</button>
 				{/each}
 			</div>
 

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

@@ -2,6 +2,34 @@ import { error } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 import { log } from '$lib/server/logger';
 import { backendFetch } from '$lib/server/scraper';
+import * as cache from '$lib/server/cache';
+
+const FREE_DAILY_AUDIO_LIMIT = 3;
+
+/**
+ * Return the number of audio chapters a user/session has generated today,
+ * and increment the counter. Uses a Valkey key that expires at midnight UTC.
+ *
+ * Key: audio:daily:<userId|sessionId>:<YYYY-MM-DD>
+ */
+async function incrementDailyAudioCount(identifier: string): Promise<number> {
+	const today = new Date().toISOString().slice(0, 10); // YYYY-MM-DD
+	const key = `audio:daily:${identifier}:${today}`;
+	// Seconds until end of day UTC
+	const now = new Date();
+	const endOfDay = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() + 1));
+	const ttl = Math.ceil((endOfDay.getTime() - now.getTime()) / 1000);
+	// Use raw get/set with increment so we can read + increment atomically
+	try {
+		const raw = await cache.get<number>(key);
+		const current = (raw ?? 0) + 1;
+		await cache.set(key, current, ttl);
+		return current;
+	} catch {
+		// On cache failure, fail open (don't block audio for cache errors)
+		return 0;
+	}
+}
 
 /**
  * POST /api/audio/[slug]/[n]
@@ -15,14 +43,39 @@ import { backendFetch } from '$lib/server/scraper';
  *       GET /api/presign/audio to obtain a direct MinIO presigned URL.
  *   202 { task_id: string, status: "pending"|"generating" }  — generation
  *       enqueued; poll GET /api/audio/status/[slug]/[n]?voice=... until done.
+ *   402 { error: "pro_required", limit: 3 }  — free daily limit reached.
  */
-export const POST: RequestHandler = async ({ params, request }) => {
+export const POST: RequestHandler = async ({ params, request, locals }) => {
 	const { slug, n } = params;
 	const chapter = parseInt(n, 10);
 	if (!slug || !chapter || chapter < 1) {
 		error(400, 'Invalid slug or chapter number');
 	}
 
+	// ── Paywall: 3 audio chapters/day for free users ───────────────────────────
+	if (!locals.isPro) {
+		// Check if audio already exists (cached) before counting — no charge for
+		// re-requesting something already generated
+		const statusRes = await backendFetch(
+			`/api/audio/status/${slug}/${chapter}`
+		).catch(() => null);
+		const statusData = statusRes?.ok
+			? ((await statusRes.json().catch(() => ({}))) as { status?: string })
+			: {};
+
+		if (statusData.status !== 'done') {
+			const identifier = locals.user?.id ?? locals.sessionId;
+			const count = await incrementDailyAudioCount(identifier);
+			if (count > FREE_DAILY_AUDIO_LIMIT) {
+				log.info('polar', 'free audio limit reached', { identifier, count });
+				return new Response(
+					JSON.stringify({ error: 'pro_required', limit: FREE_DAILY_AUDIO_LIMIT }),
+					{ status: 402, headers: { 'Content-Type': 'application/json' } }
+				);
+			}
+		}
+	}
+
 	let body: { voice?: string } = {};
 	try {
 		body = await request.json();
@@ -62,4 +115,3 @@ export const POST: RequestHandler = async ({ params, request }) => {
 		{ headers: { 'Content-Type': 'application/json' } }
 	);
 };
-

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

@@ -5,7 +5,7 @@ import { log } from '$lib/server/logger';
 
 /**
  * GET /api/settings
- * Returns the current user's settings (auto_next, voice, speed, theme).
+ * Returns the current user's settings (auto_next, voice, speed, theme, locale, fontFamily, fontSize).
  * Returns defaults if no settings record exists yet.
  */
 export const GET: RequestHandler = async ({ locals }) => {
@@ -15,7 +15,10 @@ export const GET: RequestHandler = async ({ locals }) => {
 			autoNext: settings?.auto_next ?? false,
 			voice: settings?.voice ?? 'af_bella',
 			speed: settings?.speed ?? 1.0,
-			theme: settings?.theme ?? 'amber'
+			theme: settings?.theme ?? 'amber',
+			locale: settings?.locale ?? 'en',
+			fontFamily: settings?.font_family ?? 'system',
+			fontSize: settings?.font_size ?? 1.0
 		});
 	} catch (e) {
 		log.error('settings', 'GET failed', { err: String(e) });
@@ -25,7 +28,7 @@ export const GET: RequestHandler = async ({ locals }) => {
 
 /**
  * PUT /api/settings
- * Body: { autoNext: boolean, voice: string, speed: number, theme?: string }
+ * Body: { autoNext: boolean, voice: string, speed: number, theme?: string, locale?: string, fontFamily?: string, fontSize?: number }
  * Saves user preferences.
  */
 export const PUT: RequestHandler = async ({ request, locals }) => {
@@ -46,6 +49,24 @@ export const PUT: RequestHandler = async ({ request, locals }) => {
 		error(400, `Invalid theme — must be one of: ${validThemes.join(', ')}`);
 	}
 
+	// locale is optional — if provided it must be a known value
+	const validLocales = ['en', 'ru', 'id', 'pt-BR', 'fr'];
+	if (body.locale !== undefined && !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
+	const validFontFamilies = ['system', 'serif', 'mono'];
+	if (body.fontFamily !== undefined && !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
+	const validFontSizes = [0.9, 1.0, 1.15, 1.3];
+	if (body.fontSize !== undefined && !validFontSizes.includes(body.fontSize)) {
+		error(400, `Invalid fontSize — must be one of: ${validFontSizes.join(', ')}`);
+	}
+
 	try {
 		await saveSettings(locals.sessionId, body, locals.user?.id);
 	} catch (e) {

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

@@ -0,0 +1,69 @@
+import { error } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+import { log } from '$lib/server/logger';
+import { backendFetch } from '$lib/server/scraper';
+
+const SUPPORTED_LANGS = new Set(['ru', 'id', 'pt', 'fr']);
+
+/**
+ * POST /api/translation/[slug]/[n]?lang=<lang>
+ * Proxy to backend translation enqueue endpoint.
+ * Enforces Pro gate — free users cannot enqueue translations.
+ *
+ * GET /api/translation/[slug]/[n]?lang=<lang>
+ * Proxy to backend translation fetch (no gate — already gated at page.server.ts).
+ */
+export const GET: RequestHandler = async ({ params, url }) => {
+	const { slug, n } = params;
+	const lang = url.searchParams.get('lang') ?? '';
+	const res = await backendFetch(
+		`/api/translation/${encodeURIComponent(slug)}/${n}?lang=${lang}`
+	);
+	if (!res.ok) {
+		return new Response(null, { status: res.status });
+	}
+	const data = await res.json();
+	return new Response(JSON.stringify(data), {
+		headers: { 'Content-Type': 'application/json' }
+	});
+};
+
+export const POST: RequestHandler = async ({ params, url, locals }) => {
+	const { slug, n } = params;
+	const chapter = parseInt(n, 10);
+	const lang = url.searchParams.get('lang') ?? '';
+
+	if (!slug || !chapter || chapter < 1) error(400, 'Invalid slug or chapter');
+	if (!SUPPORTED_LANGS.has(lang)) error(400, 'Unsupported language');
+
+	// ── Pro gate ──────────────────────────────────────────────────────────────
+	if (!locals.isPro) {
+		log.info('polar', 'translation blocked for free user', {
+			userId: locals.user?.id,
+			slug,
+			chapter,
+			lang
+		});
+		return new Response(
+			JSON.stringify({ error: 'pro_required' }),
+			{ status: 402, headers: { 'Content-Type': 'application/json' } }
+		);
+	}
+
+	const res = await backendFetch(
+		`/api/translation/${encodeURIComponent(slug)}/${chapter}?lang=${lang}`,
+		{ method: 'POST' }
+	);
+
+	if (!res.ok) {
+		const text = await res.text().catch(() => '');
+		log.error('translation', 'backend translation enqueue failed', { slug, chapter, lang, status: res.status, body: text });
+		error(res.status as Parameters<typeof error>[0], text || 'Translation enqueue failed');
+	}
+
+	const data = await res.json();
+	return new Response(JSON.stringify(data), {
+		status: res.status,
+		headers: { 'Content-Type': 'application/json' }
+	});
+};

ui/src/routes/api/translation/status/[slug]/[n]/+server.ts

@@ -0,0 +1,23 @@
+import type { RequestHandler } from './$types';
+import { backendFetch } from '$lib/server/scraper';
+
+/**
+ * GET /api/translation/status/[slug]/[n]?lang=<lang>
+ * Proxies the translation status check to the backend.
+ */
+export const GET: RequestHandler = async ({ params, url }) => {
+	const { slug, n } = params;
+	const lang = url.searchParams.get('lang') ?? '';
+	const res = await backendFetch(
+		`/api/translation/status/${encodeURIComponent(slug)}/${n}?lang=${lang}`
+	);
+	if (!res.ok) {
+		return new Response(JSON.stringify({ status: 'idle' }), {
+			headers: { 'Content-Type': 'application/json' }
+		});
+	}
+	const data = await res.json();
+	return new Response(JSON.stringify(data), {
+		headers: { 'Content-Type': 'application/json' }
+	});
+};

ui/src/routes/api/webhooks/polar/+server.ts

@@ -0,0 +1,52 @@
+import type { RequestHandler } from './$types';
+import { log } from '$lib/server/logger';
+import { verifyPolarWebhook, handleSubscriptionEvent } from '$lib/server/polar';
+
+/**
+ * POST /api/webhooks/polar
+ *
+ * Receives Polar subscription lifecycle events and syncs user roles in PocketBase.
+ * Signature is verified via HMAC-SHA256 before any processing.
+ */
+export const POST: RequestHandler = async ({ request }) => {
+	const rawBody = await request.text();
+	const signature = request.headers.get('webhook-signature') ?? '';
+
+	if (!verifyPolarWebhook(rawBody, signature)) {
+		log.warn('polar', 'webhook signature verification failed');
+		return new Response('Unauthorized', { status: 401 });
+	}
+
+	let event: { type: string; data: Record<string, unknown> };
+	try {
+		event = JSON.parse(rawBody);
+	} catch {
+		return new Response('Bad Request', { status: 400 });
+	}
+
+	const { type, data } = event;
+	log.info('polar', 'webhook received', { type });
+
+	try {
+		switch (type) {
+			case 'subscription.created':
+			case 'subscription.updated':
+			case 'subscription.revoked':
+				await handleSubscriptionEvent(type, data as unknown as Parameters<typeof handleSubscriptionEvent>[1]);
+				break;
+
+			case 'order.created':
+				// One-time purchases — no role change needed for now
+				log.info('polar', 'order.created (no action)', { orderId: data.id });
+				break;
+
+			default:
+				log.debug('polar', 'unhandled webhook event type', { type });
+		}
+	} catch (err) {
+		// Log but return 200 — Polar retries on non-2xx, we don't want retry storms
+		log.error('polar', 'webhook handler error', { type, err: String(err) });
+	}
+
+	return new Response('OK', { status: 200 });
+};

ui/src/routes/auth/[provider]/callback/+server.ts

@@ -25,7 +25,7 @@ import {
 	linkOAuthToUser
 } from '$lib/server/pocketbase';
 import { createAuthToken } from '../../../../hooks.server';
-import { createUserSession, mergeSessionProgress } from '$lib/server/pocketbase';
+import { createUserSession, touchUserSession, mergeSessionProgress } from '$lib/server/pocketbase';
 import { log } from '$lib/server/logger';
 
 type Provider = 'google' | 'github';
@@ -227,12 +227,21 @@ export const GET: RequestHandler = async ({ params, url, cookies, locals }) => {
 	);
 
 	// ── Create session + auth cookie ──────────────────────────────────────────
-	const authSessionId = randomBytes(16).toString('hex');
-	const userAgent = '' ; // not available in RequestHandler — omit
-	const ip = '';
-	createUserSession(user.id, authSessionId, userAgent, ip).catch((err) =>
-		log.warn('oauth', 'createUserSession failed (non-fatal)', { err: String(err) })
-	);
+	let authSessionId: string;
+
+	// Reuse existing session if the user is already logged in as the same user
+	if (locals.user?.id === user.id && locals.user?.authSessionId) {
+		authSessionId = locals.user.authSessionId;
+		// Just touch the existing session to update last_seen
+		touchUserSession(authSessionId).catch(() => {});
+	} else {
+		authSessionId = randomBytes(16).toString('hex');
+		const userAgent = ''; // not available in RequestHandler — omit
+		const ip = '';
+		createUserSession(user.id, authSessionId, userAgent, ip).catch((err) =>
+			log.warn('oauth', 'createUserSession failed (non-fatal)', { err: String(err) })
+		);
+	}
 
 	const token = createAuthToken(user.id, user.username, user.role ?? 'user', authSessionId);
 	cookies.set(AUTH_COOKIE, token, {

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

@@ -17,8 +17,10 @@ export const load: PageServerLoad = async ({ params, url, locals }) => {
 	const isPreview = url.searchParams.get('preview') === '1';
 	const chapterUrl = url.searchParams.get('chapter_url') ?? '';
 	const chapterTitle = url.searchParams.get('title') ?? '';
-	const lang = url.searchParams.get('lang') ?? '';
-	const useTranslation = SUPPORTED_LANGS.has(lang);
+	const rawLang = url.searchParams.get('lang') ?? '';
+	// Non-pro users can only read EN — silently ignore lang param
+	const lang = locals.isPro && SUPPORTED_LANGS.has(rawLang) ? rawLang : '';
+	const useTranslation = lang !== '';
 
 	if (isPreview) {
 		// ── Preview path: scrape chapter live, nothing from PocketBase/MinIO ──
@@ -83,7 +85,8 @@ export const load: PageServerLoad = async ({ params, url, locals }) => {
 			sessionId: locals.sessionId,
 			isPreview: true,
 			lang: '',
-			translationStatus: 'unavailable' as string
+			translationStatus: 'unavailable' as string,
+			isPro: locals.isPro
 		};
 	}
 
@@ -129,10 +132,11 @@ export const load: PageServerLoad = async ({ params, url, locals }) => {
 					prev: prevChapter ? prevChapter.number : null,
 					next: nextChapter ? nextChapter.number : null,
 					chapters: chapters.map((c) => ({ number: c.number, title: c.title })),
-					sessionId: locals.sessionId,
-					isPreview: false,
-					lang,
-					translationStatus: 'done'
+				sessionId: locals.sessionId,
+				isPreview: false,
+				lang,
+				translationStatus: 'done',
+				isPro: locals.isPro
 				};
 			}
 			// 404 = not generated yet — fall through to original, UI can trigger generation
@@ -188,6 +192,7 @@ export const load: PageServerLoad = async ({ params, url, locals }) => {
 		sessionId: locals.sessionId,
 		isPreview: false,
 		lang: useTranslation ? lang : '',
-		translationStatus
+		translationStatus,
+		isPro: locals.isPro
 	};
 };

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

@@ -11,6 +11,7 @@
 	let html = $state(untrack(() => data.html));
 	let fetchingContent = $state(untrack(() => !data.isPreview && !data.html));
 	let fetchError = $state('');
+	let audioProRequired = $state(false);
 
 	// Translation state
 	const SUPPORTED_LANGS = [
@@ -35,6 +36,10 @@
 	}
 
 	async function requestTranslation(lang: string) {
+		if (!data.isPro) {
+			// Don't even attempt — show upgrade inline
+			return;
+		}
 		translatingLang = lang;
 		translationStatus = 'pending';
 		try {
@@ -42,6 +47,11 @@
 				`/api/translation/${encodeURIComponent(data.book.slug)}/${data.chapter.number}?lang=${lang}`,
 				{ method: 'POST' }
 			);
+			if (res.status === 402) {
+				translationStatus = 'idle';
+				translatingLang = '';
+				return;
+			}
 			const d = (await res.json()) as { status: string };
 			translationStatus = d.status ?? 'pending';
 			if (d.status === 'done') {
@@ -192,7 +202,19 @@
 	</a>
 
 	{#each SUPPORTED_LANGS as { code, label }}
-		{#if currentLang() === code && (translationStatus === 'pending' || translationStatus === 'running')}
+		{#if !data.isPro}
+			<!-- Locked for free users -->
+			<a
+				href="/profile"
+				title="Upgrade to Pro to read in {label}"
+				class="flex items-center gap-0.5 px-2 py-0.5 rounded text-xs font-medium bg-(--color-surface-2) text-(--color-muted) opacity-60 cursor-pointer hover:opacity-80 transition-opacity"
+			>
+				<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
+					<path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
+				</svg>
+				{label}
+			</a>
+		{:else if currentLang() === code && (translationStatus === 'pending' || translationStatus === 'running')}
 			<!-- Spinning indicator while translating -->
 			<span class="flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-(--color-surface-2) text-(--color-muted)">
 				<svg class="w-3 h-3 animate-spin" fill="none" viewBox="0 0 24 24">
@@ -216,11 +238,29 @@
 			>{label}</button>
 		{/if}
 	{/each}
+
+	{#if !data.isPro}
+		<a href="/profile" class="text-xs text-(--color-brand) hover:underline ml-1">Upgrade to Pro</a>
+	{/if}
 </div>
 {/if}
 
 <!-- Audio player -->
 {#if !data.isPreview}
+{#if audioProRequired}
+	<div class="mb-6 px-4 py-3 rounded-lg bg-(--color-surface-2) border border-(--color-brand)/30 flex items-center justify-between gap-4">
+		<div>
+			<p class="text-(--color-text) text-sm font-medium">Daily audio limit reached</p>
+			<p class="text-(--color-muted) text-xs mt-0.5">Free users can listen to 3 chapters per day. Upgrade to Pro for unlimited audio.</p>
+		</div>
+		<a
+			href="/profile"
+			class="shrink-0 px-4 py-2 rounded bg-(--color-brand) text-(--color-surface) text-sm font-semibold hover:bg-(--color-brand-dim) transition-colors"
+		>
+			Upgrade
+		</a>
+	</div>
+{:else}
 <AudioPlayer
 	slug={data.book.slug}
 	chapter={data.chapter.number}
@@ -230,7 +270,9 @@
 	nextChapter={data.next}
 	chapters={data.chapters}
 	voices={data.voices}
+	onProRequired={() => { audioProRequired = true; }}
 />
+{/if}
 {:else}
 <div class="mb-6 px-4 py-3 rounded bg-(--color-surface-2)/60 border border-(--color-border) text-(--color-muted) text-sm">
 	{m.reader_preview_audio_notice()}

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

@@ -117,11 +117,15 @@
 		{ value: 'rank', label: m.catalogue_sort_rank() }
 	]);
 	const FALLBACK_STATUSES = ['ongoing', 'completed'];
+	const STATUS_LABELS: Record<string, () => string> = {
+		ongoing: () => m.catalogue_status_ongoing(),
+		completed: () => m.catalogue_status_completed(),
+	};
 	const statuses = $derived([
 		{ value: 'all', label: m.catalogue_status_all() },
 		...((data.statuses?.length ? data.statuses : FALLBACK_STATUSES).map((s: string) => ({
 			value: s,
-			label: s.charAt(0).toUpperCase() + s.slice(1)
+			label: STATUS_LABELS[s]?.() ?? (s.charAt(0).toUpperCase() + s.slice(1))
 		})))
 	]);
 

ui/src/routes/profile/+page.server.ts

@@ -1,6 +1,6 @@
-import { fail, redirect } from '@sveltejs/kit';
-import type { Actions, PageServerLoad } from './$types';
-import { changePassword, listUserSessions, getUserByUsername } from '$lib/server/pocketbase';
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import { listUserSessions, getUserByUsername } from '$lib/server/pocketbase';
 import { resolveAvatarUrl } from '$lib/server/minio';
 import { log } from '$lib/server/logger';
 
@@ -38,40 +38,3 @@ export const load: PageServerLoad = async ({ locals }) => {
 		}))
 	};
 };
-
-export const actions: Actions = {
-	changePassword: async ({ request, locals }) => {
-		if (!locals.user) {
-			return fail(401, { error: 'Not logged in.' });
-		}
-
-		const data = await request.formData();
-		const current = (data.get('current') as string | null) ?? '';
-		const next = (data.get('next') as string | null) ?? '';
-		const confirm = (data.get('confirm') as string | null) ?? '';
-
-		if (!current || !next || !confirm) {
-			return fail(400, { error: 'All fields are required.' });
-		}
-		if (next.length < 8) {
-			return fail(400, { error: 'New password must be at least 8 characters.' });
-		}
-		if (next !== confirm) {
-			return fail(400, { error: 'New passwords do not match.' });
-		}
-
-		let ok: boolean;
-		try {
-			ok = await changePassword(locals.user.id, current, next);
-		} catch (e) {
-			log.error('profile', 'changePassword failed', { err: String(e) });
-			return fail(500, { error: 'An error occurred. Please try again.' });
-		}
-
-		if (!ok) {
-			return fail(401, { error: 'Current password is incorrect.' });
-		}
-
-		return { success: true };
-	}
-};

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

@@ -90,9 +90,11 @@
 		autoNext = audioStore.autoNext;
 	});
 
-	// ── Theme ────────────────────────────────────────────────────────────────────
-	const themeCtx = getContext<{ currentTheme: string; setTheme: (t: string) => void } | undefined>('theme');
-	let selectedTheme = $state(untrack(() => data.settings?.theme ?? themeCtx?.currentTheme ?? 'amber'));
+	// ── Theme + Font ─────────────────────────────────────────────────────────────
+	const settingsCtx = getContext<{ current: string; fontFamily: string; fontSize: number } | undefined>('theme');
+	let selectedTheme = $state(untrack(() => data.settings?.theme ?? settingsCtx?.current ?? 'amber'));
+	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' },
@@ -100,6 +102,19 @@
 		{ id: 'rose',  label: () => m.profile_theme_rose(),   swatch: '#fb7185' },
 	];
 
+	const FONTS = [
+		{ id: 'system', label: () => m.profile_font_system() },
+		{ id: 'serif', label: () => m.profile_font_serif() },
+		{ id: 'mono', label: () => m.profile_font_mono() },
+	];
+
+	const FONT_SIZES = [
+		{ value: 0.9, label: () => m.profile_text_size_sm() },
+		{ value: 1.0, label: () => m.profile_text_size_md() },
+		{ value: 1.15, label: () => m.profile_text_size_lg() },
+		{ value: 1.3, label: () => m.profile_text_size_xl() },
+	];
+
 	let settingsSaving = $state(false);
 	let settingsSaved = $state(false);
 
@@ -110,14 +125,18 @@
 			await fetch('/api/settings', {
 				method: 'PUT',
 				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ autoNext, voice, speed, theme: selectedTheme })
+				body: JSON.stringify({ autoNext, voice, speed, theme: selectedTheme, fontFamily: selectedFontFamily, fontSize: selectedFontSize })
 			});
 			// Sync to audioStore so the player picks up changes immediately
 			audioStore.autoNext = autoNext;
 			audioStore.voice = voice;
 			audioStore.speed = speed;
-			// Apply theme live via context
-			themeCtx?.setTheme(selectedTheme);
+			// Apply theme + font live via context
+			if (settingsCtx) {
+				settingsCtx.current = selectedTheme;
+				settingsCtx.fontFamily = selectedFontFamily;
+				settingsCtx.fontSize = selectedFontSize;
+			}
 			await invalidateAll();
 			settingsSaved = true;
 			setTimeout(() => (settingsSaved = false), 2500);
@@ -126,17 +145,6 @@
 		}
 	}
 
-	// ── Password change ─────────────────────────────────────────────────────────
-	let pwSubmitting = $state(false);
-	let pwSuccess = $state(false);
-
-	$effect(() => {
-		if (form?.success) {
-			pwSuccess = true;
-			setTimeout(() => (pwSuccess = false), 3000);
-		}
-	});
-
 	// ── Sessions ────────────────────────────────────────────────────────────────
 	type Session = {
 		id: string;
@@ -275,6 +283,69 @@
 		</div>
 	</div>
 
+	<!-- ── Subscription ─────────────────────────────────────────────────────── -->
+	<section class="bg-(--color-surface-2) rounded-xl border border-(--color-border) p-6 space-y-4">
+		<div class="flex items-center justify-between gap-3 flex-wrap">
+			<h2 class="text-lg font-semibold text-(--color-text)">{m.profile_subscription_heading()}</h2>
+			{#if data.isPro}
+				<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold bg-amber-400/15 text-amber-400 border border-amber-400/30 tracking-wide uppercase">
+					<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
+						<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"/>
+					</svg>
+					{m.profile_plan_pro()}
+				</span>
+			{:else}
+				<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-(--color-surface-3) text-(--color-muted) border border-(--color-border) uppercase tracking-wide">
+					{m.profile_plan_free()}
+				</span>
+			{/if}
+		</div>
+
+		{#if data.isPro}
+			<p class="text-sm text-(--color-text)">{m.profile_pro_active()}</p>
+			<p class="text-sm text-(--color-muted)">{m.profile_pro_perks()}</p>
+			<a
+				href="https://polar.sh/libnovel"
+				target="_blank"
+				rel="noopener noreferrer"
+				class="inline-flex items-center gap-1.5 text-sm font-medium text-(--color-brand) hover:underline"
+			>
+				{m.profile_manage_subscription()}
+				<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
+				</svg>
+			</a>
+		{:else}
+			<p class="text-sm text-(--color-muted)">{m.profile_free_limits()}</p>
+			<div>
+				<p class="text-sm font-semibold text-(--color-text) mb-3">{m.profile_upgrade_heading()}</p>
+				<p class="text-sm text-(--color-muted) mb-4">{m.profile_upgrade_desc()}</p>
+				<div class="flex flex-wrap gap-3">
+					<a
+						href="https://buy.polar.sh/libnovel/1376fdf5-b6a9-492b-be70-7c905131c0f9"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-(--color-brand) text-(--color-surface) font-semibold text-sm hover:bg-(--color-brand-dim) transition-colors"
+					>
+						<svg class="w-4 h-4 shrink-0" fill="currentColor" viewBox="0 0 24 24">
+							<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm4.24 16L12 15.45 7.77 18l1.12-4.81-3.73-3.23 4.92-.42L12 5l1.92 4.53 4.92.42-3.73 3.23L16.23 18z"/>
+						</svg>
+						{m.profile_upgrade_monthly()}
+					</a>
+					<a
+						href="https://buy.polar.sh/libnovel/b6190307-79aa-4905-80c8-9ed941378d21"
+						target="_blank"
+						rel="noopener noreferrer"
+						class="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg border border-(--color-brand) text-(--color-brand) font-semibold text-sm hover:bg-(--color-brand)/10 transition-colors"
+					>
+						{m.profile_upgrade_annual()}
+						<span class="text-xs font-bold px-1.5 py-0.5 rounded bg-amber-400/15 text-amber-400 border border-amber-400/30">–33%</span>
+					</a>
+				</div>
+			</div>
+		{/if}
+	</section>
+
 	<!-- ── Appearance ────────────────────────────────────────────────────────── -->
 	<section class="bg-(--color-surface-2) rounded-xl border border-(--color-border) p-6 space-y-5">
 		<h2 class="text-lg font-semibold text-(--color-text)">{m.profile_appearance_heading()}</h2>
@@ -303,6 +374,51 @@
 				{/each}
 			</div>
 		</div>
+
+		<div class="space-y-2">
+			<p class="text-sm font-medium text-(--color-text)">{m.profile_font_family()}</p>
+			<div class="flex gap-2 flex-wrap">
+				{#each FONTS as f}
+					<button
+						type="button"
+						onclick={() => (selectedFontFamily = f.id)}
+						class="px-3 py-2 rounded-lg border text-sm font-medium transition-colors {selectedFontFamily === f.id ? 'border-(--color-brand) bg-(--color-brand)/10 text-(--color-brand)' : 'border-(--color-border) bg-(--color-surface-3) text-(--color-muted) hover:border-(--color-brand)/50 hover:text-(--color-text)'}"
+						aria-pressed={selectedFontFamily === f.id}
+					>
+						{f.label()}
+					</button>
+				{/each}
+			</div>
+		</div>
+
+		<div class="space-y-2">
+			<p class="text-sm font-medium text-(--color-text)">{m.profile_text_size()}</p>
+			<div class="flex gap-2 flex-wrap">
+				{#each FONT_SIZES as s}
+					<button
+						type="button"
+						onclick={() => (selectedFontSize = s.value)}
+						class="px-3 py-2 rounded-lg border text-sm font-medium transition-colors {selectedFontSize === 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={selectedFontSize === s.value}
+					>
+						{s.label()}
+					</button>
+				{/each}
+			</div>
+		</div>
+
+		<div class="flex items-center gap-3 pt-1">
+			<button
+				onclick={saveSettings}
+				disabled={settingsSaving}
+				class="px-4 py-2 rounded-lg bg-(--color-brand) text-(--color-surface) font-semibold text-sm hover:bg-(--color-brand-dim) transition-colors disabled:opacity-60"
+			>
+				{settingsSaving ? m.profile_saving() : m.profile_save_settings()}
+			</button>
+			{#if settingsSaved}
+				<span class="text-sm text-green-400">{m.profile_saved()}</span>
+			{/if}
+		</div>
 	</section>
 
 	<!-- ── Reading settings ─────────────────────────────────────────────────── -->
@@ -363,16 +479,19 @@
 			</div>
 		</div>
 
-		<!-- Auto-next -->
-		<label class="flex items-center gap-3 cursor-pointer select-none">
-			<input
-				type="checkbox"
-				bind:checked={autoNext}
-				style="accent-color: var(--color-brand);"
-				class="w-4 h-4 rounded"
-			/>
-			<span class="text-sm text-(--color-text)">{m.profile_auto_advance()}</span>
-		</label>
+		<!-- Auto-next toggle -->
+		<div class="flex items-center justify-between">
+			<span class="text-sm font-medium text-(--color-text)">{m.profile_auto_advance()}</span>
+			<button
+				type="button"
+				role="switch"
+				aria-checked={autoNext}
+				onclick={() => (autoNext = !autoNext)}
+				class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-(--color-brand) focus:ring-offset-2 focus:ring-offset-(--color-surface) {autoNext ? 'bg-(--color-brand)' : 'bg-(--color-surface-3)'}"
+			>
+				<span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform {autoNext ? 'translate-x-6' : 'translate-x-1'}"></span>
+			</button>
+		</div>
 
 		<div class="flex items-center gap-3 pt-1">
 			<button
@@ -437,75 +556,4 @@
 			</ul>
 		{/if}
 	</section>
-
-	<!-- ── Change password ──────────────────────────────────────────────────── -->
-	<section class="bg-(--color-surface-2) rounded-xl border border-(--color-border) p-6 space-y-4">
-		<h2 class="text-lg font-semibold text-(--color-text)">{m.profile_change_password_heading()}</h2>
-
-		{#if form?.error}
-			<div class="rounded-lg bg-(--color-danger)/10 border border-(--color-danger) px-4 py-2.5 text-sm text-(--color-danger)">
-				{form.error}
-			</div>
-		{/if}
-
-		{#if pwSuccess}
-			<div class="rounded-lg bg-green-900/40 border border-green-700 px-4 py-2.5 text-sm text-green-300">
-				{m.profile_password_changed_ok()}
-			</div>
-		{/if}
-
-		<form
-			method="POST"
-			action="?/changePassword"
-			use:enhance={() => {
-				pwSubmitting = true;
-				return async ({ update }) => {
-					pwSubmitting = false;
-					await update();
-				};
-			}}
-			class="space-y-4"
-		>
-			<div class="space-y-1.5">
-				<label class="block text-sm font-medium text-(--color-text)" for="current">{m.profile_current_password()}</label>
-				<input
-					id="current"
-					name="current"
-					type="password"
-					autocomplete="current-password"
-					required
-					class="w-full bg-(--color-surface-3) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-(--color-brand)"
-				/>
-			</div>
-			<div class="space-y-1.5">
-				<label class="block text-sm font-medium text-(--color-text)" for="next">{m.profile_new_password()}</label>
-				<input
-					id="next"
-					name="next"
-					type="password"
-					autocomplete="new-password"
-					required
-					class="w-full bg-(--color-surface-3) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-(--color-brand)"
-				/>
-			</div>
-			<div class="space-y-1.5">
-				<label class="block text-sm font-medium text-(--color-text)" for="confirm">{m.profile_confirm_password()}</label>
-				<input
-					id="confirm"
-					name="confirm"
-					type="password"
-					autocomplete="new-password"
-					required
-					class="w-full bg-(--color-surface-3) border border-(--color-border) rounded-lg px-3 py-2 text-(--color-text) text-sm placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-(--color-brand)"
-				/>
-			</div>
-			<button
-				type="submit"
-				disabled={pwSubmitting}
-				class="px-4 py-2 rounded-lg bg-(--color-surface-3) text-(--color-text) font-semibold text-sm hover:bg-(--color-surface-3) transition-colors disabled:opacity-60"
-			>
-				{pwSubmitting ? m.profile_updating() : m.profile_update_password()}
-			</button>
-		</form>
-	</section>
 </div>