fix(theme): consolidate boot apply and Settings picker into shared module

Gemini review surfaced that App.svelte (onMount theme apply) and
SettingsPanel.svelte (theme <select>) hand-rolled their own defaults
and could disagree:

- App.svelte only set data-theme if localStorage had a value, so on a
  fresh install daisyUI fell back to the first theme in app.css (light).
- SettingsPanel.svelte hardcoded a UI default of "dark".

Result: a first-time user saw a light app but a Settings panel that
claimed "dark" was selected. Picking *any* value in the dropdown was
the only way to reconcile reality with the UI.

This commit:
- Adds packages/frontend/src/lib/theme.ts as the single source of truth:
  THEMES list, Theme type, THEME_STORAGE_KEY, DEFAULT_THEME, plus
  loadStoredTheme() and applyTheme() that handle SSR / private-mode /
  bad-value cases.
- Rewires App.svelte's onMount to call applyTheme(loadStoredTheme()),
  so the boot apply always writes a known good theme to the DOM (even
  on fresh installs), matching what Settings will show.
- Rewires SettingsPanel.svelte's picker to use the shared module,
  dropping its duplicate THEMES const, duplicate storage key, duplicate
  apply/persist logic, and the conflicting "dark" fallback.
- Adds 11 unit tests in tests/theme.test.ts covering the
  default-fallback, known/unknown stored values, SecurityError-on-read,
  SSR (no localStorage), DOM-attribute write, persistence round-trip,
  and the "DOM still updates if storage write throws" contract.

The daisyUI plugin block in app.css still lists themes — that's a
CSS-time concern and can't be imported from TS, so it's kept in sync
by convention (noted in the new module's doc comment).

1 files changed, 7 insertions, 31 deletions

diff --git a/packages/frontend/src/lib/components/SettingsPanel.svelte b/packages/frontend/src/lib/components/SettingsPanel.svelte
index efbaf5f..b6a44bc 100644
--- a/packages/frontend/src/lib/components/SettingsPanel.svelte
+++ b/packages/frontend/src/lib/components/SettingsPanel.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import { config } from "../config.js";
 import { appSettings } from "../settings.svelte.js";
+import { applyTheme, loadStoredTheme, THEMES, type Theme } from "../theme.js";
 import type { KeyInfo } from "../types.js";
 
 const {
@@ -13,38 +14,13 @@ const {
 
 // Theme picker — was a header-triggered modal (`ThemeSwitcher.svelte`);
 // inlined here so theme picking lives in Settings alongside other UI
-// preferences. The list and localStorage key must stay in sync with the
-// boot-time theme apply in `App.svelte`'s `onMount`.
-const THEMES = [
-	"light",
-	"dark",
-	"dracula",
-	"night",
-	"nord",
-	"sunset",
-	"cyberpunk",
-	"forest",
-	"cmyk",
-	"coffee",
-	"caramellatte",
-	"garden",
-	"luxury",
-] as const;
+// preferences. Theme constants and apply/persist live in `../theme.ts`
+// so the boot-time apply in `App.svelte` and this picker can't drift.
+let currentTheme = $state<Theme>(loadStoredTheme());
 
-const THEME_STORAGE_KEY = "dispatch-theme";
-
-let currentTheme = $state(
-	(typeof localStorage !== "undefined" && localStorage.getItem(THEME_STORAGE_KEY)) || "dark",
-);
-
-function selectTheme(theme: string): void {
+function selectTheme(theme: Theme): void {
 	currentTheme = theme;
-	document.documentElement.setAttribute("data-theme", theme);
-	try {
-		localStorage.setItem(THEME_STORAGE_KEY, theme);
-	} catch {
-		// Best-effort — private mode / quota.
-	}
+	applyTheme(theme);
 }
 
 let titleKeyId = $state<string | null>(null);
@@ -178,7 +154,7 @@ $effect(() => {
 			<select
 				class="select select-bordered select-sm w-full capitalize"
 				value={currentTheme}
-				onchange={(e) => selectTheme(e.currentTarget.value)}
+				onchange={(e) => selectTheme(e.currentTarget.value as Theme)}
 			>
 				{#each THEMES as theme (theme)}
 					<option value={theme} class="capitalize">{theme}</option>