feat: add settings page with light/dark theme preference form

apps/web/src/routes/index.ts

···
 import { createAuthRoutes } from "./auth.js";
 import { createModActionRoute } from "./mod.js";
 import { createAdminRoutes } from "./admin.js";
+import { createSettingsRoutes } from "./settings.js";
 import { createNotFoundRoute } from "./not-found.js";
 
 const config = loadConfig();
···
   .route("/", createAuthRoutes(config.appviewUrl))
   .route("/", createModActionRoute(config.appviewUrl))
   .route("/", createAdminRoutes(config.appviewUrl))
+  .route("/", createSettingsRoutes(config.appviewUrl))
   .route("/", createNotFoundRoute(config.appviewUrl));

apps/web/src/routes/settings.tsx

···
+import { Hono } from "hono";
+import { BaseLayout } from "../layouts/base.js";
+import { getSession } from "../lib/session.js";
+import { resolveUserThemePreference, FALLBACK_THEME } from "../lib/theme-resolution.js";
+import type { WebAppEnv } from "../lib/theme-resolution.js";
+import { isProgrammingError } from "../lib/errors.js";
+import { logger } from "../lib/logger.js";
+
+type ThemeSummary = { uri: string; name: string; colorScheme: string };
+type Policy = {
+  availableThemes: { uri: string }[];
+  allowUserChoice: boolean;
+  defaultLightThemeUri: string | null;
+  defaultDarkThemeUri: string | null;
+};
+
+export function createSettingsRoutes(appviewUrl: string) {
+  const app = new Hono<WebAppEnv>();
+
+  // ── GET /settings ──────────────────────────────────────────────────────────
+  app.get("/settings", async (c) => {
+    const resolvedTheme = c.get("theme") ?? FALLBACK_THEME;
+    const cookieHeader = c.req.header("cookie");
+    const auth = await getSession(appviewUrl, cookieHeader);
+    if (!auth.authenticated) return c.redirect("/login");
+
+    const saved = c.req.query("saved") === "1";
+    const errorParam = c.req.query("error");
+
+    // Fetch theme policy
+    let policy: Policy | null = null;
+    try {
+      const policyRes = await fetch(`${appviewUrl}/api/theme-policy`);
+      if (policyRes.ok) {
+        policy = (await policyRes.json()) as Policy;
+      }
+    } catch (error) {
+      if (isProgrammingError(error)) throw error;
+      logger.error("Failed to fetch theme policy for settings page", {
+        operation: "GET /settings",
+        error: error instanceof Error ? error.message : String(error),
+      });
+    }
+
+    if (!policy) {
+      return c.html(
+        <BaseLayout title="Settings — atBB Forum" auth={auth} resolvedTheme={resolvedTheme}>
+          <main class="settings-page">
+            <h1>Settings</h1>
+            <p class="settings-banner settings-banner--error">
+              Theme settings are temporarily unavailable. Please try again later.
+            </p>
+          </main>
+        </BaseLayout>
+      );
+    }
+
+    // Fetch available themes list (already filtered by policy server-side in AppView)
+    let allThemes: ThemeSummary[] = [];
+    try {
+      const themesRes = await fetch(`${appviewUrl}/api/themes`);
+      if (themesRes.ok) {
+        const data = (await themesRes.json()) as { themes: ThemeSummary[] };
+        allThemes = data.themes ?? [];
+      }
+    } catch (err) {
+      if (isProgrammingError(err)) throw err;
+      logger.warn("Failed to fetch themes list for settings page", {
+        operation: "GET /settings",
+        error: err instanceof Error ? err.message : String(err),
+      });
+    }
+
+    const lightThemes = allThemes.filter((t) => t.colorScheme === "light");
+    const darkThemes = allThemes.filter((t) => t.colorScheme === "dark");
+
+    // Pre-select current preference cookie (Phase 1), falling back to forum default
+    const currentLightUri =
+      resolveUserThemePreference(cookieHeader, "light", allThemes, policy.allowUserChoice) ??
+      policy.defaultLightThemeUri;
+    const currentDarkUri =
+      resolveUserThemePreference(cookieHeader, "dark", allThemes, policy.allowUserChoice) ??
+      policy.defaultDarkThemeUri;
+
+    return c.html(
+      <BaseLayout title="Settings — atBB Forum" auth={auth} resolvedTheme={resolvedTheme}>
+        <main class="settings-page">
+          <h1>Settings</h1>
+          {saved && (
+            <p class="settings-banner settings-banner--success">Preferences saved.</p>
+          )}
+          {errorParam && (
+            <p class="settings-banner settings-banner--error">
+              {decodeURIComponent(errorParam)}
+            </p>
+          )}
+          <section>
+            <h2>Appearance</h2>
+            {policy.allowUserChoice ? (
+              <form method="post" action="/settings/appearance" class="settings-form">
+                <div class="settings-form__field">
+                  <label for="lightThemeUri">Light theme</label>
+                  <select id="lightThemeUri" name="lightThemeUri">
+                    {lightThemes.map((t) => (
+                      <option value={t.uri} selected={t.uri === currentLightUri}>
+                        {t.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div class="settings-form__field">
+                  <label for="darkThemeUri">Dark theme</label>
+                  <select id="darkThemeUri" name="darkThemeUri">
+                    {darkThemes.map((t) => (
+                      <option value={t.uri} selected={t.uri === currentDarkUri}>
+                        {t.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div id="theme-preview"></div>
+                <button type="submit" class="settings-form__submit">
+                  Save preferences
+                </button>
+              </form>
+            ) : (
+              <p class="settings-banner">
+                Theme selection is managed by the forum administrator.
+              </p>
+            )}
+          </section>
+        </main>
+      </BaseLayout>
+    );
+  });
+
+  // ── POST /settings/appearance ───────────────────────────────────────────────
+  app.post("/settings/appearance", async (c) => {
+    const cookieHeader = c.req.header("cookie");
+    const auth = await getSession(appviewUrl, cookieHeader);
+    if (!auth.authenticated) return c.redirect("/login");
+
+    let body: Record<string, string | File>;
+    try {
+      body = await c.req.parseBody();
+    } catch (err) {
+      if (isProgrammingError(err)) throw err;
+      return c.redirect("/settings?error=invalid", 302);
+    }
+
+    const lightThemeUri =
+      typeof body.lightThemeUri === "string" ? body.lightThemeUri.trim() : "";
+    const darkThemeUri =
+      typeof body.darkThemeUri === "string" ? body.darkThemeUri.trim() : "";
+    if (!lightThemeUri || !darkThemeUri) {
+      return c.redirect("/settings?error=invalid", 302);
+    }
+
+    // Fetch FRESH policy (bypass cache) so recently-removed themes can't be saved
+    let policy: { availableThemes: Array<{ uri: string }>; allowUserChoice: boolean } | null =
+      null;
+    try {
+      const policyRes = await fetch(`${appviewUrl}/api/theme-policy`);
+      if (policyRes.ok) {
+        policy = (await policyRes.json()) as { availableThemes: Array<{ uri: string }>; allowUserChoice: boolean };
+      }
+    } catch (err) {
+      if (isProgrammingError(err)) throw err;
+      logger.error("Failed to fetch theme policy during preference save", {
+        operation: "POST /settings/appearance",
+        error: err instanceof Error ? err.message : String(err),
+      });
+    }
+
+    if (!policy) {
+      return c.redirect("/settings?error=unavailable", 302);
+    }
+    if (!policy.allowUserChoice) {
+      return c.redirect("/settings?error=not-allowed", 302);
+    }
+
+    const availableUris = policy.availableThemes.map((t: { uri: string }) => t.uri);
+    if (!availableUris.includes(lightThemeUri) || !availableUris.includes(darkThemeUri)) {
+      return c.redirect("/settings?error=invalid-theme", 302);
+    }
+
+    // Set preference cookies (1 year).
+    // AT URIs (at://did:plc:.../rkey) are valid cookie values per RFC 6265 —
+    // colons and slashes are permitted; no encoding needed.
+    const headers = new Headers();
+    headers.append(
+      "set-cookie",
+      `atbb-light-theme=${lightThemeUri}; Path=/; Max-Age=31536000; SameSite=Lax`
+    );
+    headers.append(
+      "set-cookie",
+      `atbb-dark-theme=${darkThemeUri}; Path=/; Max-Age=31536000; SameSite=Lax`
+    );
+    headers.set("location", "/settings?saved=1");
+    return new Response(null, { status: 302, headers });
+  });
+
+  return app;
+}