themes-v1: 18 preset palettes + Settings picker

Adds 18 preset themes (16 dual-mode + 2 light-only) selectable from a new /settings route. Persists per-user via the existing key-value settings table — no schema refactor. Default on first load is obsidian dark. Storage: two new seeded keys (theme_id, theme_mode) inserted idempotently from schema.sql. PATCH /api/settings tightens validation with a discriminated branch — theme_id must be one of the 18 whitelisted ids, theme_mode ∈ {dark,light,system}, anything else rejects 400. Other keys pass through the loose record schema. CSS layer: 18 files in apps/web/src/styles/themes/, each declaring .theme-<id> (light) and .theme-<id>.dark (dark) — except ivory and chalk which are light-only. Anchor-to-token mapping per spec §3. --destructive stays red across all themes. --radius unchanged at 0.625rem (spec parenthetical was about "not per-theme", not a specific value swap). Frontend: lib/theme.ts owns THEMES, applyTheme(), setTheme(), and useTheme() — module-singleton with optimistic PATCH + revert on failure (mirrors useChatStatus / useSidebar pattern). Settings.tsx renders a 3-col (md) / 2-col (mobile) grid of shadcn Card swatches with a Dark/Light/System radio group on top. App.tsx mounts useTheme() at AppShell top and wires the /settings route. index.html ships a pre-React FOUC script that reads localStorage 'boocode.theme' and stamps the className on <html> before any paint. Stripped two pre-existing dark-mode lock-ins (AppShell's hardcoded 'dark' className and body's neutral-950/100 tailwind utilities) that would have fought theme tokens. Light-only + dark request → falls back to obsidian dark in three places: lib/theme.ts effectiveThemeId(), the FOUC script, and the picker's "Light only" badge. No inline message; matches spec §8 decision 1. shadcn primitives card and radio-group installed via shadcn CLI (no hand-rolling). card.tsx and radio-group.tsx are the only ui/ additions. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-17 16:25:15 +00:00
parent efbecd074a
commit 9b174cdb5e
28 changed files with 1895 additions and 2 deletions
--- a/apps/web/src/components/ui/card.tsx
+++ b/apps/web/src/components/ui/card.tsx
@@ -0,0 +1,103 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+  return (
+    <div
+      data-slot="card"
+      data-size={size}
+      className={cn(
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn(
+        "text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn(
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}