feat(story-1.5): theme selection and persistence

- SpaController: injects data-theme on <html> and window.__PF_USER__ before JS hydrates — theme applied without FOUC; no initial API call needed for user data - UserApiController: PATCH /api/user/theme validates against 6 allowed theme IDs, persists to user.theme column, returns {theme} - useTheme composable: applyTheme() sets html[data-theme], saveTheme() calls API and falls back with toast on error - SettingsView: 3-col theme grid with swatch previews, aria-checked radio semantics, active indicator; Sign out link; signed-in email display - App.vue: onMounted syncs Pinia theme state with SpaController-stamped html[data-theme] Verified: data-theme injected on / load; PATCH saves to DB; reload shows persisted theme Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-28 00:37:59 -04:00
parent 3c1d5f0eae
commit 15bab87998
5 changed files with 297 additions and 7 deletions
@@ -0,0 +1,45 @@
+import { useAuthStore } from '@/stores/auth'
+import { useToastStore } from '@/stores/toast'
+
+export interface ThemeOption {
+  id: string
+  label: string
+  primary: string
+  bg: string
+  text: string
+}
+
+export const THEMES: ThemeOption[] = [
+  { id: 'warm-craft',   label: 'Warm Craft',   primary: '#c97c3a', bg: '#fdf6ee', text: '#3a2e22' },
+  { id: 'playful-pop',  label: 'Playful Pop',  primary: '#d63aab', bg: '#fff0fb', text: '#2d0a28' },
+  { id: 'sage-cream',   label: 'Sage & Cream', primary: '#4e7c3a', bg: '#f6f8f3', text: '#1e2b1a' },
+  { id: 'dusty-mauve',  label: 'Dusty Mauve',  primary: '#8e4a84', bg: '#f6f0f4', text: '#2a1828' },
+  { id: 'ocean-dusk',   label: 'Ocean Dusk',   primary: '#1a6ea8', bg: '#eef3f8', text: '#0e2030' },
+  { id: 'honey-slate',  label: 'Honey & Slate', primary: '#c49a20', bg: '#f2f2ee', text: '#1c1c18' },
+]
+
+export function useTheme() {
+  const auth = useAuthStore()
+  const toast = useToastStore()
+
+  function applyTheme(themeId: string) {
+    document.documentElement.dataset.theme = themeId
+    if (auth.user) auth.user.theme = themeId
+  }
+
+  async function saveTheme(themeId: string) {
+    applyTheme(themeId)
+    try {
+      const res = await fetch('/api/user/theme', {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ theme: themeId }),
+      })
+      if (!res.ok) throw new Error('Failed to save theme')
+    } catch {
+      toast.show('Could not save theme — try again', 'error')
+    }
+  }
+
+  return { THEMES, applyTheme, saveTheme }
+}