update

2026-09-21 13:05:25 +02:00
parent 6cb9cba384
commit 59402b250c
18 changed files with 818 additions and 50 deletions
@@ -84,7 +84,7 @@ export function AdminPanel({ open, onClose }: { open: boolean; onClose: () => vo
        {error && <p className="mb-3 rounded-2xl bg-red-50 px-4 py-2.5 text-sm text-red-600 dark:bg-red-950/40 dark:text-red-400">{error}</p>}

        {freshKey && (
-          <div className="mb-4 rounded-2xl border border-emerald-500/40 bg-emerald-50 p-4 dark:bg-emerald-950/30">
+          <div className="mb-4 rounded-2xl border border-accent-500/40 bg-accent-50 p-4 dark:bg-accent-950/30">
            <p className="mb-2 flex items-center gap-2 text-sm font-medium"><KeyRound size={15} /> Key for @{freshKey.username} — shown once, copy it now:</p>
            <div className="flex items-center gap-2">
              <code className="min-w-0 flex-1 truncate rounded-xl bg-white px-3 py-2 text-sm dark:bg-zinc-900">{freshKey.key}</code>
@@ -4,6 +4,7 @@ import type { Attachment, ChatMessage, Conversation, DriverModel, User } from ".
 import { Avatar, IconButton, LOGO_URL, Logo, Picker, type PickerGroup, Spinner } from "./ui.tsx";
 import { Markdown } from "./Markdown.tsx";
 import { cn } from "../lib/cn.ts";
+import { useFeatures } from "../lib/features.ts";

 function MessageBubble({ msg, authorAvatar, authorName }: { msg: ChatMessage; authorAvatar?: string; authorName: string }) {
  const isUser = msg.role === "user";
@@ -16,7 +17,7 @@ function MessageBubble({ msg, authorAvatar, authorName }: { msg: ChatMessage; au
          {isUser ? "You" : "KisAssistant"}
        </div>
        {isUser ? (
-          <div className="whitespace-pre-wrap rounded-3xl rounded-tr-lg bg-emerald-600 px-4 py-2.5 text-[15px] text-white dark:bg-emerald-500 dark:text-zinc-950">
+          <div className="whitespace-pre-wrap rounded-3xl rounded-tr-lg bg-accent-600 px-4 py-2.5 text-[15px] text-white dark:bg-accent-500 dark:text-zinc-950">
            {msg.content}
          </div>
        ) : (
@@ -70,6 +71,7 @@ export function Chat({
 }) {
  const [draft, setDraft] = useState("");
  const [attachOpen, setAttachOpen] = useState(false);
+  const features = useFeatures();
  const boxRef = useRef<HTMLDivElement>(null);
  const taRef = useRef<HTMLTextAreaElement>(null);
  const imgRef = useRef<HTMLInputElement>(null);
@@ -182,7 +184,7 @@ export function Chat({
          {attachments.length > 0 && (
            <div className="mb-2 flex flex-wrap gap-2">
              {attachments.map((a) => (
-                <span key={a.id} className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-emerald-600/30 bg-emerald-600/10 py-1 pl-3 pr-1.5 text-xs font-medium dark:border-emerald-500/30 dark:bg-emerald-500/10">
+                <span key={a.id} className="inline-flex max-w-full items-center gap-1.5 rounded-full border border-accent-600/30 bg-accent-600/10 py-1 pl-3 pr-1.5 text-xs font-medium dark:border-accent-500/30 dark:bg-accent-500/10">
                  {a.kind === "ocr" ? <ScanText size={13} /> : <FileText size={13} />}
                  <span className="max-w-40 truncate">{a.name}</span>
                  <button onClick={() => onRemoveAttachment(a.id)} aria-label={`Remove ${a.name}`} className="rounded-full p-1 transition hover:bg-black/10 dark:hover:bg-white/10">
@@ -203,7 +205,7 @@ export function Chat({
                  disabled={!ocrAvailable}
                  className="flex w-full items-center gap-3 rounded-2xl px-3 py-2.5 text-left transition hover:bg-stone-100 disabled:opacity-50 dark:hover:bg-zinc-800"
                >
-                  <span className="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-emerald-600/10 text-emerald-600 dark:text-emerald-400">
+                  <span className="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
                    <ScanText size={16} />
                  </span>
                  <span>
@@ -215,7 +217,7 @@ export function Chat({
                  onClick={() => { setAttachOpen(false); txtRef.current?.click(); }}
                  className="flex w-full items-center gap-3 rounded-2xl px-3 py-2.5 text-left transition hover:bg-stone-100 dark:hover:bg-zinc-800"
                >
-                  <span className="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-emerald-600/10 text-emerald-600 dark:text-emerald-400">
+                  <span className="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
                    <FileText size={16} />
                  </span>
                  <span>
@@ -231,15 +233,17 @@ export function Chat({
          )}
        </div>
        <form onSubmit={submit} className="mx-auto flex w-full max-w-3xl items-end gap-2 rounded-[1.75rem] border border-stone-200 bg-white p-2 pl-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
-          <button
-            type="button"
-            onClick={() => setAttachOpen((o) => !o)}
-            aria-label="Attach a file"
-            title="Attach a file"
-            className="grid h-10 w-10 shrink-0 place-items-center rounded-full transition hover:bg-stone-100 active:scale-95 dark:hover:bg-zinc-800"
-          >
-            <Paperclip size={17} className="opacity-70" />
-          </button>
+          {features.attachments && (
+            <button
+              type="button"
+              onClick={() => setAttachOpen((o) => !o)}
+              aria-label="Attach a file"
+              title="Attach a file"
+              className="grid h-10 w-10 shrink-0 -translate-y-[2px] place-items-center rounded-full transition hover:bg-stone-100 active:scale-95 dark:hover:bg-zinc-800"
+            >
+              <Paperclip size={17} className="opacity-70" />
+            </button>
+          )}
          <input ref={imgRef} type="file" accept="image/jpeg,image/png,image/webp" className="hidden" onChange={(e) => { const f = e.target.files?.[0]; if (f) onPickFile("ocr", f); e.target.value = ""; }} />
          <input ref={txtRef} type="file" accept=".txt,.md,text/plain,text/markdown" className="hidden" onChange={(e) => { const f = e.target.files?.[0]; if (f) onPickFile("text", f); e.target.value = ""; }} />
          <textarea
@@ -261,7 +265,7 @@ export function Chat({
            type="submit"
            disabled={(!draft.trim() && attachments.length === 0) || sending}
            aria-label="Send"
-            className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-emerald-600 text-white shadow transition hover:bg-emerald-500 active:scale-95 disabled:opacity-40 dark:bg-emerald-500 dark:text-zinc-950 dark:hover:bg-emerald-400"
+            className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-accent-600 text-white shadow transition hover:bg-accent-500 active:scale-95 disabled:opacity-40 dark:bg-accent-500 dark:text-zinc-950 dark:hover:bg-accent-400"
          >
            <SendHorizontal size={17} />
          </button>
@@ -43,9 +43,9 @@ export function Login({ onLogin }: { onLogin: (user: UserType) => void }) {
  }

  return (
-    <div className="grid min-h-full place-items-center overflow-y-auto bg-gradient-to-br from-stone-100 via-stone-50 to-emerald-100/60 p-6 dark:from-zinc-950 dark:via-zinc-950 dark:to-emerald-950/40">
+    <div className="grid min-h-full place-items-center overflow-y-auto bg-gradient-to-br from-stone-100 via-stone-50 to-accent-100/60 p-6 dark:from-zinc-950 dark:via-zinc-950 dark:to-accent-950/40">
      <div className="w-full max-w-sm">
-        <div className="rounded-[2rem] border border-white/60 bg-white/80 p-8 shadow-2xl shadow-emerald-900/5 backdrop-blur-xl dark:border-zinc-700/60 dark:bg-zinc-900/80">
+        <div className="rounded-[2rem] border border-white/60 bg-white/80 p-8 shadow-2xl shadow-accent-900/5 backdrop-blur-xl dark:border-zinc-700/60 dark:bg-zinc-900/80">
          <div className="mb-2 flex flex-col items-center text-center">
            <Logo size={68} className="mb-4 rounded-[1.5rem] shadow-lg shadow-red-900/20" />
            <h1 className="text-2xl font-bold tracking-tight">Welcome back</h1>
@@ -99,7 +99,7 @@ export function Login({ onLogin }: { onLogin: (user: UserType) => void }) {
          <ul className="mt-6 space-y-2 border-t border-stone-200/70 pt-5 dark:border-zinc-800">
            {PERKS.map((p) => (
              <li key={p.text} className="flex items-center gap-2.5 text-[13px] opacity-70">
-                <span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-emerald-600/10 text-emerald-600 dark:text-emerald-400">
+                <span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
                  <p.icon size={14} />
                </span>
                {p.text}
@@ -32,7 +32,7 @@ export function ResetPage({ token }: { token: string }) {
  }

  return (
-    <div className="grid min-h-full place-items-center bg-gradient-to-br from-stone-100 via-stone-50 to-emerald-100/60 p-6 dark:from-zinc-950 dark:via-zinc-950 dark:to-emerald-950/40">
+    <div className="grid min-h-full place-items-center bg-gradient-to-br from-stone-100 via-stone-50 to-accent-100/60 p-6 dark:from-zinc-950 dark:via-zinc-950 dark:to-accent-950/40">
      <div className="w-full max-w-sm rounded-[2rem] border border-white/60 bg-white/80 p-8 text-center shadow-2xl backdrop-blur-xl dark:border-zinc-700/60 dark:bg-zinc-900/80">
        <Logo size={56} className="mx-auto mb-4 rounded-[1.2rem] shadow-lg" />
        {state.kind === "loading" && <p className="flex items-center justify-center gap-2 text-sm opacity-60"><Spinner size={15} /> Checking link…</p>}
@@ -55,7 +55,7 @@ export function ResetPage({ token }: { token: string }) {
        {state.kind === "working" && <p className="flex items-center justify-center gap-2 text-sm opacity-60"><Spinner size={15} /> Issuing…</p>}
        {state.kind === "done" && (
          <div className="space-y-4">
-            <h1 className="flex items-center justify-center gap-2 text-xl font-bold"><Sparkles size={18} className="text-emerald-500" /> New key ready</h1>
+            <h1 className="flex items-center justify-center gap-2 text-xl font-bold"><Sparkles size={18} className="text-accent-500" /> New key ready</h1>
            <p className="text-sm opacity-70">Copy it now — it won't be shown again. Then log in with it.</p>
            <div className="flex items-center gap-2">
              <code className="min-w-0 flex-1 truncate rounded-2xl bg-stone-100 px-3 py-2.5 text-sm dark:bg-zinc-800">{state.key}</code>
@@ -29,7 +29,7 @@ export function SharePage({ publicId }: { publicId: string }) {
              </p>
            )}
          </div>
-          <a href="/" className="rounded-full bg-emerald-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-emerald-500 dark:bg-emerald-500 dark:text-zinc-950">
+          <a href="/" className="rounded-full bg-accent-600 px-4 py-2 text-sm font-medium text-white transition hover:bg-accent-500 dark:bg-accent-500 dark:text-zinc-950">
            Open KisAssistant
          </a>
        </div>
@@ -150,7 +150,7 @@ export function Sidebar({
            className={cn(
              "group flex cursor-pointer select-none items-center gap-2 rounded-2xl px-3 py-2.5 text-sm transition [-webkit-touch-callout:none]",
              c.id === activeId
-                ? "bg-emerald-600/10 font-medium text-emerald-900 dark:bg-emerald-500/10 dark:text-emerald-100"
+                ? "bg-accent-600/10 font-medium text-accent-900 dark:bg-accent-500/10 dark:text-accent-100"
                : "hover:bg-stone-200/50 dark:hover:bg-zinc-800/70",
            )}
          >
@@ -1,9 +1,11 @@
 import { useEffect, useRef, useState } from "react";
-import { Globe, FileText, ImagePlus, Link2, Mail, Pencil, ScanText, Settings2, Tag, Unplug } from "lucide-react";
+import { Globe, FileText, ImagePlus, Link2, Mail, Palette, Pencil, ScanText, Settings2, Sparkles, Tag, Unplug, UserPlus } from "lucide-react";
 import { api } from "../lib/api.ts";
 import { cn } from "../lib/cn.ts";
+import { ACCENT_PRESETS, applyAccent, currentAccent, previewAccent, type AccentState } from "../lib/accent.ts";
+import { FEATURES, setFeature, useFeatures } from "../lib/features.ts";
 import type { Conversation, FilePreview, User } from "../lib/types.ts";
-import { Avatar, Button, CopyButton, Field, Input, Modal, Picker, Spinner } from "./ui.tsx";
+import { Avatar, bumpCdnVersion, Button, CopyButton, Field, Input, Modal, Picker, Spinner, Toggle } from "./ui.tsx";

 /* ---------- Rename + topic ---------- */

@@ -173,7 +175,7 @@ export function FilePreviewModal({
        </p>
      ) : (
        <div className="space-y-3">
-          <p className="rounded-2xl bg-emerald-600/10 px-4 py-2.5 text-sm opacity-90">
+          <p className="rounded-2xl bg-accent-600/10 px-4 py-2.5 text-sm opacity-90">
            {isOcr
              ? <>The image was transcribed to text on the server — <strong>the model receives this text, never the image</strong>. Fix any reading mistakes below, then attach.</>
              : <>The file was uploaded through platform tools. <strong>Its text content is attached to your message.</strong> Edit below if needed, then attach.</>}
@@ -185,7 +187,7 @@ export function FilePreviewModal({
            rows={10}
            value={text}
            onChange={(e) => setText(e.target.value)}
-            className="w-full resize-y rounded-2xl border border-stone-200 bg-stone-50 p-4 font-mono text-[13px] leading-relaxed outline-none focus:border-emerald-500 dark:border-zinc-700 dark:bg-zinc-800"
+            className="w-full resize-y rounded-2xl border border-stone-200 bg-stone-50 p-4 font-mono text-[13px] leading-relaxed outline-none focus:border-accent-500 dark:border-zinc-700 dark:bg-zinc-800"
          />
          <div className="flex items-center justify-between">
            <span className="text-xs opacity-60">{preview?.name} · {text.length.toLocaleString()} chars</span>
@@ -200,6 +202,90 @@ export function FilePreviewModal({
  );
 }

+/* ---------- Self-registration ---------- */
+
+export function RegisterDialog({
+  open,
+  onClose,
+  onDone,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onDone: (username: string, key: string) => void;
+}) {
+  const [username, setUsername] = useState("");
+  const [displayName, setDisplayName] = useState("");
+  const [email, setEmail] = useState("");
+  const [key, setKey] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (open) {
+      setUsername("");
+      setDisplayName("");
+      setEmail("");
+      setKey(null);
+      setError("");
+    }
+  }, [open ]);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    if (busy) return;
+    setBusy(true);
+    setError("");
+    try {
+      const res = await api.register({
+        username: username.trim().toLowerCase(),
+        displayName: displayName.trim() || undefined,
+        email: email.trim() || undefined,
+      });
+      setKey(res.key);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Registration failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Modal open={open} onClose={onClose} title="Create an account" icon={UserPlus}>
+      {key ? (
+        <div className="space-y-4">
+          <p className="text-sm opacity-80">
+            Welcome, <strong>@{username.trim().toLowerCase()}</strong>! Your access key — copy it now, it won't be shown again:
+          </p>
+          <div className="flex items-center gap-2">
+            <code className="min-w-0 flex-1 truncate rounded-2xl bg-stone-100 px-3 py-2.5 text-sm dark:bg-zinc-800">{key}</code>
+            <CopyButton text={key} />
+          </div>
+          <div className="flex justify-end">
+            <Button size="sm" onClick={() => { onDone(username.trim().toLowerCase(), key); onClose(); }}>Copy & continue to login</Button>
+          </div>
+        </div>
+      ) : (
+        <form onSubmit={submit} className="space-y-4">
+          <Field label="Username">
+            <Input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="alice" maxLength={32} required />
+          </Field>
+          <Field label="Display name">
+            <Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} placeholder="Alice" maxLength={60} />
+          </Field>
+          <Field label="Email (optional, for key recovery)">
+            <Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" inputMode="email" />
+          </Field>
+          {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
+          <div className="flex justify-end gap-2">
+            <Button variant="secondary" size="sm" type="button" onClick={onClose}>Cancel</Button>
+            <Button size="sm" type="submit" disabled={busy}>{busy ? <Spinner size={15} /> : "Register"}</Button>
+          </div>
+        </form>
+      )}
+    </Modal>
+  );
+}
+
 /* ---------- Share ---------- */

 export function ShareModal({ conv, onClose }: { conv: Conversation | null; onClose: () => void }) {
@@ -296,6 +382,9 @@ export function SettingsModal({
    try {
      const res = await api.uploadAvatar(user.id, f);
      setAvatarUrl(res.url); // applied when you press Save
+      // Same URL path every upload -> bump the CDN version so every <Avatar>
+      // preview (this modal, sidebar, chat bubbles) re-fetches immediately.
+      bumpCdnVersion();
    } catch (err) {
      setUploadError(err instanceof Error ? err.message : "Upload failed");
    } finally {
@@ -348,11 +437,11 @@ export function SettingsModal({
            className={cn(
              "flex cursor-pointer items-center gap-3 rounded-3xl border-2 border-dashed px-4 py-3.5 transition",
              dragOver
-                ? "border-emerald-500 bg-emerald-500/10"
-                : "border-stone-200 hover:border-emerald-500/60 hover:bg-stone-50 dark:border-zinc-700 dark:hover:bg-zinc-800/60",
+                ? "border-accent-500 bg-accent-500/10"
+                : "border-stone-200 hover:border-accent-500/60 hover:bg-stone-50 dark:border-zinc-700 dark:hover:bg-zinc-800/60",
            )}
          >
-            <span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-emerald-600/10 text-emerald-600 dark:text-emerald-400">
+            <span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
              {uploading ? <Spinner size={17} /> : <ImagePlus size={17} />}
            </span>
            <span className="min-w-0 flex-1 text-sm">
@@ -395,6 +484,8 @@ export function SettingsModal({
            ]}
          />
        </Field>
+        <AccentSection />
+        <FeaturesSection />
        {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
        <div className="flex justify-end gap-2">
          <Button variant="secondary" size="sm" type="button" onClick={onClose}>Cancel</Button>
@@ -404,3 +495,109 @@ export function SettingsModal({
    </Modal>
  );
 }
+
+/* ---------- Accent color (settings) ---------- */
+
+function AccentSection() {
+  const [state, setState] = useState<AccentState>(() => currentAccent());
+
+  function pick(presetId: string) {
+    const next = { ...state, presetId };
+    setState(next);
+    applyAccent(next);
+  }
+
+  function pickCustom(hex: string) {
+    const next = { presetId: "custom", customHex: hex };
+    setState(next);
+    previewAccent(hex);
+  }
+
+  return (
+    <div>
+      <span className="mb-1.5 flex items-center gap-1.5 text-sm font-medium opacity-80">
+        <Palette size={14} />
+        Accent color
+      </span>
+      <div className="flex flex-wrap items-center gap-2">
+        {ACCENT_PRESETS.map((p) => (
+          <button
+            key={p.id}
+            type="button"
+            title={p.label}
+            aria-label={`Accent: ${p.label}`}
+            onClick={() => pick(p.id)}
+            className={cn(
+              "h-8 w-8 rounded-full border-2 transition active:scale-90",
+              state.presetId === p.id
+                ? "border-stone-900 dark:border-white"
+                : "border-transparent hover:scale-110",
+            )}
+            style={{ backgroundColor: p.base }}
+          />
+        ))}
+        <label
+          className={cn(
+            "relative grid h-8 w-8 cursor-pointer place-items-center overflow-hidden rounded-full border-2 transition active:scale-90",
+            state.presetId === "custom"
+              ? "border-stone-900 dark:border-white"
+              : "border-transparent hover:scale-110",
+          )}
+          style={{ background: state.presetId === "custom" ? state.customHex : undefined }}
+          title="Custom color"
+        >
+          <Sparkles size={14} className={cn("mix-blend-difference text-white", state.presetId === "custom" && "opacity-0")} />
+          <input
+            type="color"
+            aria-label="Custom accent color"
+            value={state.presetId === "custom" ? state.customHex : "#10b981"}
+            onChange={(e) => pickCustom(e.target.value)}
+            onBlur={() => applyAccent(state)} // persist the last previewed value
+            className="absolute inset-0 cursor-pointer opacity-0"
+          />
+        </label>
+      </div>
+      <p className="mt-1.5 text-xs opacity-60">Applied instantly, saved on this device.</p>
+    </div>
+  );
+}
+
+/* ---------- Features (settings) ---------- */
+
+function FeaturesSection() {
+  const flags = useFeatures();
+  return (
+    <div>
+      <span className="mb-1.5 flex items-center gap-1.5 text-sm font-medium opacity-80">
+        <Sparkles size={14} />
+        Features
+      </span>
+      <div className="space-y-1">
+        {FEATURES.map((f) => (
+          <label
+            key={f.key}
+            className={cn(
+              "flex items-center gap-3 rounded-2xl px-3 py-2 transition",
+              f.ready ? "cursor-pointer hover:bg-stone-100 dark:hover:bg-zinc-800" : "opacity-50",
+            )}
+          >
+            <Toggle
+              checked={!!flags[f.key]}
+              disabled={!f.ready}
+              label={f.label}
+              onChange={(v) => setFeature(f.key, v)}
+            />
+            <span className="min-w-0">
+              <span className="block text-sm font-medium">
+                {f.label}
+                {!f.ready && <span className="ml-1.5 text-xs opacity-60">(soon)</span>}
+              </span>
+              <span className="block text-xs opacity-60">{f.hint}</span>
+            </span>
+          </label>
+        ))}
+      </div>
+      <p className="mt-1.5 text-xs opacity-60">Applied instantly, saved on this device.</p>
+    </div>
+  );
+}
@@ -19,8 +19,8 @@ export function Button({ variant = "primary", size = "md", className, ...props }
        size === "md" && "px-5 py-2.5 text-sm",
        size === "lg" && "px-6 py-3 text-base",
        size === "icon" && "h-9 w-9",
-        variant === "primary" && "bg-emerald-600 text-white shadow-sm hover:bg-emerald-500 dark:bg-emerald-500 dark:hover:bg-emerald-400 dark:text-zinc-950",
-        variant === "gradient" && "bg-gradient-to-r from-emerald-600 to-teal-500 text-white shadow-lg shadow-emerald-600/25 hover:from-emerald-500 hover:to-teal-400 dark:from-emerald-500 dark:to-teal-400 dark:text-zinc-950",
+        variant === "primary" && "bg-accent-600 text-white shadow-sm hover:bg-accent-500 dark:bg-accent-500 dark:hover:bg-accent-400 dark:text-zinc-950",
+        variant === "gradient" && "bg-gradient-to-r from-accent-600 to-teal-500 text-white shadow-lg shadow-accent-600/25 hover:from-accent-500 hover:to-teal-400 dark:from-accent-500 dark:to-teal-400 dark:text-zinc-950",
        variant === "secondary" && "border border-stone-200 bg-white hover:bg-stone-50 dark:border-zinc-700 dark:bg-zinc-900 dark:hover:bg-zinc-800",
        variant === "ghost" && "hover:bg-stone-200/60 dark:hover:bg-zinc-800",
        variant === "danger" && "bg-red-600 text-white hover:bg-red-500",
@@ -53,10 +53,10 @@ export function Input({ variant = "default", className, ...props }: React.InputH
      className={cn(
        "w-full text-sm outline-none transition placeholder:text-stone-400 dark:placeholder:text-zinc-500",
        variant === "default" &&
-          "rounded-2xl border border-stone-200 bg-white px-4 py-2.5 focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 dark:border-zinc-700 dark:bg-zinc-900",
+          "rounded-2xl border border-stone-200 bg-white px-4 py-2.5 focus:border-accent-500 focus:ring-2 focus:ring-accent-500/20 dark:border-zinc-700 dark:bg-zinc-900",
        // soft: onboarding-style pill field, blends into rounded cards
        variant === "soft" &&
-          "rounded-full border border-transparent bg-stone-100 px-5 py-3 focus:border-emerald-500/60 focus:bg-white focus:ring-4 focus:ring-emerald-500/15 dark:bg-zinc-800/80 dark:focus:bg-zinc-900",
+          "rounded-full border border-transparent bg-stone-100 px-5 py-3 focus:border-accent-500/60 focus:bg-white focus:ring-4 focus:ring-accent-500/15 dark:bg-zinc-800/80 dark:focus:bg-zinc-900",
        className,
      )}
      {...props}
@@ -170,12 +170,12 @@ export function Picker({
        onClick={() => setOpen((o) => !o)}
        className={cn(
          "flex max-w-56 items-center gap-2 rounded-full border border-stone-200 bg-white py-2 pl-3.5 pr-3 text-sm font-medium shadow-sm transition",
-          "hover:border-emerald-500/60 hover:shadow disabled:cursor-not-allowed disabled:opacity-50",
+          "hover:border-accent-500/60 hover:shadow disabled:cursor-not-allowed disabled:opacity-50",
          "dark:border-zinc-700 dark:bg-zinc-900",
-          open && "border-emerald-500 ring-2 ring-emerald-500/20",
+          open && "border-accent-500 ring-2 ring-accent-500/20",
        )}
      >
-        {Icon && <Icon size={15} className="shrink-0 text-emerald-600 dark:text-emerald-400" />}
+        {Icon && <Icon size={15} className="shrink-0 text-accent-600 dark:text-accent-400" />}
        <span className="truncate">{selected?.label ?? placeholder}</span>
        <ChevronDown size={15} className={cn("shrink-0 opacity-50 transition-transform", open && "rotate-180")} />
      </button>
@@ -208,7 +208,7 @@ export function Picker({
                      className={cn(
                        "flex w-full items-center gap-2 rounded-xl px-3 py-2 text-left text-sm transition",
                        active
-                          ? "bg-emerald-600/10 font-medium text-emerald-900 dark:bg-emerald-500/10 dark:text-emerald-100"
+                          ? "bg-accent-600/10 font-medium text-accent-900 dark:bg-accent-500/10 dark:text-accent-100"
                          : "hover:bg-stone-100 dark:hover:bg-zinc-800",
                      )}
                    >
@@ -216,7 +216,7 @@ export function Picker({
                        <span className="block truncate">{o.label}</span>
                        {o.hint && <span className="block truncate text-xs opacity-50">{o.hint}</span>}
                      </span>
-                      {active && <Check size={15} className="shrink-0 text-emerald-600 dark:text-emerald-400" />}
+                      {active && <Check size={15} className="shrink-0 text-accent-600 dark:text-accent-400" />}
                    </button>
                  );
                })}
@@ -297,7 +297,7 @@ export function Modal({
        </div>
        <div className="mb-4 flex items-center gap-2.5">
          {Icon && (
-            <span className="grid h-9 w-9 place-items-center rounded-full bg-emerald-600/10 text-emerald-600 dark:text-emerald-400">
+            <span className="grid h-9 w-9 place-items-center rounded-full bg-accent-600/10 text-accent-600 dark:text-accent-400">
              <Icon size={18} />
            </span>
          )}
@@ -401,8 +401,36 @@ export function ContextMenu({ x, y, items, onClose }: { x: number; y: number; it

 /* ---------- Avatar ---------- */

+// Uploaded avatars reuse the same /cdn/avatar/<userId> path, so the <img> URL
+// never changes and browsers keep serving the stale cached file. A global
+// version counter (bumped after each successful upload) cache-busts every
+// /cdn/ URL rendered by <Avatar>, refreshing previews app-wide instantly.
+let cdnVersion = 0;
+const cdnVersionListeners = new Set<() => void>();
+
+/** Call after a successful CDN upload so every <Avatar> re-fetches the file. */
+export function bumpCdnVersion(): void {
+  cdnVersion++;
+  cdnVersionListeners.forEach((l) => l());
+}
+
+function useCdnVersion(): number {
+  const [v, setV] = useState(cdnVersion);
+  useEffect(() => {
+    const l = () => setV(cdnVersion);
+    cdnVersionListeners.add(l);
+    return () => { cdnVersionListeners.delete(l); };
+  }, []);
+  return v;
+}
+
+function withCdnVersion(url: string, v: number): string {
+  if (!url.startsWith("/cdn/")) return url;
+  return `${url}${url.includes("?") ? "&" : "?"}v=${v}`;
+}
+
 const GRADIENTS = [
-  "from-emerald-500 to-teal-600",
+  "from-accent-500 to-teal-600",
  "from-violet-500 to-purple-600",
  "from-amber-500 to-orange-600",
  "from-sky-500 to-cyan-600",
@@ -410,8 +438,9 @@ const GRADIENTS = [
 ];

 export function Avatar({ name, url, size = 36 }: { name: string; url?: string; size?: number }) {
+  const cdnV = useCdnVersion();
  if (url) {
-    return <img src={url} alt={name} width={size} height={size} className="rounded-full object-cover" style={{ width: size, height: size }} />;
+    return <img src={withCdnVersion(url, cdnV)} alt={name} width={size} height={size} className="rounded-full object-cover" style={{ width: size, height: size }} />;
  }
  const initial = (name.trim()[0] || "?").toUpperCase();
  const g = GRADIENTS[(name.charCodeAt(0) || 0) % GRADIENTS.length];
@@ -443,12 +472,74 @@ export function Logo({ size = 36, className }: { size?: number; className?: stri
  );
 }

+/* ---------- Switch (feature toggle) ---------- */
+
+export function Switch({ checked, onChange, label }: { checked: boolean; onChange: (v: boolean) => void; label: string }) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label={label}
+      onClick={() => onChange(!checked)}
+      className={cn(
+        "relative h-6 w-11 shrink-0 rounded-full transition",
+        checked ? "bg-emerald-600 dark:bg-emerald-500" : "bg-stone-300 dark:bg-zinc-700",
+      )}
+    >
+      <span
+        className={cn(
+          "absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-all",
+          checked ? "left-[1.375rem]" : "left-0.5",
+        )}
+      />
+    </button>
+  );
+}
+
 /* ---------- Misc ---------- */

 export function Spinner({ size = 18 }: { size?: number }) {
  return <Loader2 size={size} className="animate-spin" />;
 }

+/** Accessible on/off switch (emerald→accent colored when on). */
+export function Toggle({
+  checked,
+  onChange,
+  label,
+  disabled = false,
+}: {
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  label: string;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      role="switch"
+      aria-checked={checked}
+      aria-label={label}
+      disabled={disabled}
+      onClick={() => onChange(!checked)}
+      className={cn(
+        "relative h-6 w-11 shrink-0 rounded-full border transition disabled:opacity-40",
+        checked
+          ? "border-transparent bg-accent-600 dark:bg-accent-500"
+          : "border-stone-300 bg-stone-200 dark:border-zinc-600 dark:bg-zinc-700",
+      )}
+    >
+      <span
+        className={cn(
+          "absolute top-0.5 h-5 w-5 rounded-full bg-white shadow transition-all dark:bg-zinc-100",
+          checked ? "left-[1.4rem]" : "left-0.5",
+        )}
+      />
+    </button>
+  );
+}
+
 export function CopyButton({ text, label = "Copy" }: { text: string; label?: string }) {
  const [done, setDone] = useState(false);
  return (
@@ -461,7 +552,7 @@ export function CopyButton({ text, label = "Copy" }: { text: string; label?: str
      }}
      className="inline-flex items-center gap-1.5 rounded-full border border-stone-200 bg-white px-3 py-1.5 text-xs font-medium transition hover:bg-stone-50 dark:border-zinc-700 dark:bg-zinc-900 dark:hover:bg-zinc-800"
    >
-      {done ? <Check size={13} className="text-emerald-500" /> : <Copy size={13} />}
+      {done ? <Check size={13} className="text-accent-500" /> : <Copy size={13} />}
      {done ? "Copied" : label}
    </button>
  );