feat: add HTMX theme preview endpoint and wire up select elements

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 {
+  resolveUserThemePreference,
+  FALLBACK_THEME,
+  parseRkeyFromUri,
+} 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";
···
               <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">
+                  <select
+                    id="lightThemeUri"
+                    name="lightThemeUri"
+                    hx-get="/settings/preview"
+                    hx-trigger="change"
+                    hx-target="#theme-preview"
+                    hx-swap="outerHTML"
+                    hx-include="this">
                     {lightThemes.map((t) => (
                       <option value={t.uri} selected={t.uri === currentLightUri}>
                         {t.name}
···
                 </div>
                 <div class="settings-form__field">
                   <label for="darkThemeUri">Dark theme</label>
-                  <select id="darkThemeUri" name="darkThemeUri">
+                  <select
+                    id="darkThemeUri"
+                    name="darkThemeUri"
+                    hx-get="/settings/preview"
+                    hx-trigger="change"
+                    hx-target="#theme-preview"
+                    hx-swap="outerHTML"
+                    hx-include="this">
                     {darkThemes.map((t) => (
                       <option value={t.uri} selected={t.uri === currentDarkUri}>
                         {t.name}
···
     );
     headers.set("location", "/settings?saved=1");
     return new Response(null, { status: 302, headers });
+  });
+
+  // ── ThemeSwatchPreview component ────────────────────────────────────────────
+  function ThemeSwatchPreview({
+    name,
+    tokens,
+  }: {
+    name: string;
+    tokens: Record<string, string>;
+  }) {
+    const swatchTokens = [
+      "color-bg",
+      "color-surface",
+      "color-primary",
+      "color-text",
+      "color-border",
+    ] as const;
+    return (
+      <div id="theme-preview" class="theme-preview">
+        <span class="theme-preview__name">{name}</span>
+        <div class="theme-preview__swatches">
+          {swatchTokens.map((token) => {
+            const color = tokens[token];
+            if (!color) return null;
+            return (
+              <span
+                class="theme-preview__swatch"
+                style={`background:${color}`}
+                title={token}
+              />
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  // ── GET /settings/preview ────────────────────────────────────────────────────
+  app.get("/settings/preview", async (c) => {
+    const emptyFragment = <div id="theme-preview"></div>;
+    const themeUri = c.req.query("lightThemeUri") ?? c.req.query("darkThemeUri");
+    if (!themeUri) return c.html(emptyFragment);
+
+    const rkey = parseRkeyFromUri(themeUri);
+    if (!rkey || !/^[a-z0-9-]+$/i.test(rkey)) return c.html(emptyFragment);
+
+    try {
+      const res = await fetch(`${appviewUrl}/api/themes/${rkey}`);
+      if (!res.ok) return c.html(emptyFragment);
+      const theme = (await res.json()) as {
+        name: string;
+        tokens: Record<string, string>;
+      };
+      return c.html(
+        <ThemeSwatchPreview name={theme.name ?? ""} tokens={theme.tokens ?? {}} />
+      );
+    } catch (err) {
+      if (isProgrammingError(err)) throw err;
+      return c.html(emptyFragment);
+    }
   });
 
   return app;