898 lines
34 KiB
TypeScript
898 lines
34 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import { Fingerprint, Globe, FileText, ImagePlus, KeyRound, Link2, Mail, Palette, Pencil, ScanText, Search, Settings2, ShieldCheck, Sparkles, Tag, Trash2, Unplug, User as UserIcon, UserPlus, X } 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, bumpCdnVersion, Button, ConfirmDialog, CopyButton, Field, Input, Modal, Picker, Spinner, Toggle } from "./ui.tsx";
|
|
|
|
/* ---------- Rename + topic ---------- */
|
|
|
|
export function ConvEditDialog({
|
|
conv,
|
|
onClose,
|
|
onSaved,
|
|
}: {
|
|
conv: Conversation | null;
|
|
onClose: () => void;
|
|
onSaved: (c: Conversation) => void;
|
|
}) {
|
|
const [title, setTitle] = useState("");
|
|
const [topic, setTopic] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (conv) {
|
|
setTitle(conv.title);
|
|
setTopic(conv.topic);
|
|
setError("");
|
|
}
|
|
}, [conv]);
|
|
|
|
async function save(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!conv || busy) return;
|
|
setBusy(true);
|
|
setError("");
|
|
try {
|
|
const res = await api.patchConv(conv.id, { title: title.trim(), topic: topic.trim() });
|
|
onSaved(res.conversation);
|
|
onClose();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Save failed");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal open={conv !== null} onClose={onClose} title="Edit conversation" icon={Pencil}>
|
|
<form onSubmit={save} className="space-y-4">
|
|
<Field label="Title">
|
|
<Input value={title} onChange={(e) => setTitle(e.target.value)} maxLength={120} required />
|
|
</Field>
|
|
<Field label="Topic" hint="A short theme tag, e.g. cooking, rust, travel.">
|
|
<div className="relative">
|
|
<Tag size={15} className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 opacity-40" />
|
|
<Input className="pl-10" value={topic} onChange={(e) => setTopic(e.target.value)} maxLength={120} placeholder="No topic" />
|
|
</div>
|
|
</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} /> : "Save"}</Button>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
/* ---------- Key recovery ---------- */
|
|
|
|
export function RecoverDialog({ open, onClose, from }: { open: boolean; onClose: () => void; from?: string }) {
|
|
const [username, setUsername] = useState("");
|
|
const [sent, setSent] = useState(false);
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
setUsername("");
|
|
setSent(false);
|
|
setError("");
|
|
}
|
|
}, [open ]);
|
|
|
|
async function submit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (busy) return;
|
|
setBusy(true);
|
|
setError("");
|
|
try {
|
|
await api.recover(username.trim().toLowerCase());
|
|
setSent(true);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Request failed");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal open={open} onClose={onClose} title="Recover access key" icon={Mail} wide>
|
|
{sent ? (
|
|
<div className="space-y-4">
|
|
<p className="text-sm opacity-80">
|
|
If <strong>@{username.trim().toLowerCase() || "…"}</strong> exists and has a recovery
|
|
email, a reset link is on its way{from ? <> from <strong>{from}</strong></> : ""} (valid 60 minutes, single use).
|
|
</p>
|
|
<p className="rounded-2xl bg-amber-500/10 px-4 py-2.5 text-sm opacity-90 dark:bg-amber-500/10">
|
|
Check your inbox — and your spam folder, the message may have landed there.
|
|
</p>
|
|
<p className="text-sm opacity-70">
|
|
Nothing arrives? Then no recovery email is set on your account and the
|
|
reset is not possible — please contact the site administrator.
|
|
</p>
|
|
<div className="flex justify-end">
|
|
<Button size="sm" onClick={onClose}>Done</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={submit} className="space-y-4">
|
|
<p className="text-sm opacity-70">
|
|
Enter your username. You'll receive a link that issues a fresh key
|
|
(the old one stops working).
|
|
</p>
|
|
<Field label="Username">
|
|
<Input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="alice" required />
|
|
</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} /> : "Send reset link"}</Button>
|
|
</div>
|
|
</form>
|
|
)}
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
/* ---------- File preview (pre-transcription review) ---------- */
|
|
|
|
export function FilePreviewModal({
|
|
preview,
|
|
busy,
|
|
onClose,
|
|
onAttach,
|
|
}: {
|
|
preview: FilePreview | null;
|
|
busy: boolean;
|
|
onClose: () => void;
|
|
onAttach: (text: string) => void;
|
|
}) {
|
|
const [text, setText] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (preview) setText(preview.text);
|
|
}, [preview]);
|
|
|
|
const isOcr = preview?.kind === "ocr";
|
|
|
|
return (
|
|
<Modal
|
|
open={preview !== null}
|
|
onClose={onClose}
|
|
title={isOcr ? "Review transcription" : "Review text attachment"}
|
|
icon={isOcr ? ScanText : FileText}
|
|
wide
|
|
>
|
|
{busy ? (
|
|
<p className="flex items-center gap-2 py-8 text-sm opacity-70">
|
|
<Spinner size={16} />
|
|
{isOcr ? "Transcribing the image on the server (OCR)…" : "Uploading through platform tools…"}
|
|
</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
<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.</>}
|
|
</p>
|
|
{preview?.truncated && (
|
|
<p className="rounded-2xl bg-amber-500/10 px-4 py-2.5 text-sm">Transcription truncated to the server limit — the end is missing.</p>
|
|
)}
|
|
<textarea
|
|
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-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>
|
|
<div className="flex gap-2">
|
|
<Button variant="secondary" size="sm" onClick={onClose}>Cancel</Button>
|
|
<Button size="sm" onClick={() => onAttach(text)} disabled={!text.trim()}>Attach to message</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
/* ---------- 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 }) {
|
|
const [url, setUrl] = useState<string | null>(null);
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState("");
|
|
|
|
useEffect(() => {
|
|
if (!conv) {
|
|
setUrl(null);
|
|
return;
|
|
}
|
|
setBusy(true);
|
|
setError("");
|
|
api.share(conv.id)
|
|
.then((r) => setUrl(window.location.origin + r.url))
|
|
.catch((err) => setError(err instanceof Error ? err.message : "Share failed"))
|
|
.finally(() => setBusy(false));
|
|
}, [conv]);
|
|
|
|
async function unshare() {
|
|
if (!conv) return;
|
|
await api.unshare(conv.id);
|
|
onClose();
|
|
}
|
|
|
|
return (
|
|
<Modal open={conv !== null} onClose={onClose} title="Share publicly" icon={Globe}>
|
|
{busy && <p className="flex items-center gap-2 text-sm opacity-70"><Spinner size={15} /> Creating public link…</p>}
|
|
{error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
|
|
{url && (
|
|
<div className="space-y-4">
|
|
<p className="text-sm opacity-70">Anyone with this link can read <strong>{conv?.title}</strong>. No login required.</p>
|
|
<div className="flex items-center gap-2 rounded-2xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm dark:border-zinc-700 dark:bg-zinc-800">
|
|
<Link2 size={15} className="shrink-0 opacity-50" />
|
|
<span className="min-w-0 flex-1 truncate">{url}</span>
|
|
<CopyButton text={url} />
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<Button variant="ghost" size="sm" onClick={unshare}><Unplug size={15} /> Unshare</Button>
|
|
<Button size="sm" onClick={onClose}>Done</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
/* ---------- Settings (profile) ---------- */
|
|
|
|
export function SettingsModal({
|
|
user,
|
|
onClose,
|
|
onSaved,
|
|
onKeyRotated,
|
|
}: {
|
|
user: User | null;
|
|
onClose: () => void;
|
|
onSaved: (u: User) => void;
|
|
onKeyRotated?: () => void;
|
|
}) {
|
|
const [displayName, setDisplayName] = useState("");
|
|
const [avatarUrl, setAvatarUrl] = useState("");
|
|
const [email, setEmail] = useState("");
|
|
const [theme, setTheme] = useState("auto");
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState("");
|
|
const [uploading, setUploading] = useState(false);
|
|
const [uploadError, setUploadError] = useState("");
|
|
const [dragOver, setDragOver] = useState(false);
|
|
const [search, setSearch] = useState("");
|
|
const fileRef = useRef<HTMLInputElement>(null);
|
|
|
|
// Two-column settings: categories on the left, content on the right.
|
|
// Searching filters the category list and jumps to the first match.
|
|
const CATS = [
|
|
{ id: "profile", title: "Profile", icon: UserIcon, keywords: ["profile", "avatar", "picture", "photo", "name", "display", "email", "account"] },
|
|
{ id: "appearance", title: "Appearance", icon: Palette, keywords: ["appearance", "theme", "dark", "light", "color", "colour", "accent", "palette"] },
|
|
{ id: "features", title: "Features", icon: Sparkles, keywords: ["features", "thinking", "attachments", "search", "deep", "upload", "ocr", "capabilities", "enable", "disable"] },
|
|
{ id: "security", title: "Security", icon: ShieldCheck, keywords: ["security", "key", "rotate", "password", "totp", "2fa", "two", "factor", "authenticator", "passkey", "webauthn"] },
|
|
] as const;
|
|
type CatId = (typeof CATS)[number]["id"];
|
|
const [cat, setCat] = useState<CatId>("profile");
|
|
|
|
const visibleCats = CATS.filter((c) => {
|
|
const q = search.trim().toLowerCase();
|
|
if (!q) return true;
|
|
return c.title.toLowerCase().includes(q) || c.keywords.some((k) => k.includes(q));
|
|
});
|
|
const activeCat = visibleCats.some((c) => c.id === cat) ? cat : (visibleCats[0]?.id ?? "profile");
|
|
|
|
useEffect(() => {
|
|
if (user) {
|
|
setDisplayName(user.displayName);
|
|
setAvatarUrl(user.avatarUrl);
|
|
setEmail(user.email);
|
|
setTheme(user.theme);
|
|
setError("");
|
|
setUploadError("");
|
|
setSearch("");
|
|
}
|
|
}, [user]);
|
|
|
|
async function uploadFile(f: File) {
|
|
if (!user) return;
|
|
if (f.size > 5 * 1024 * 1024) {
|
|
setUploadError("File too large (max 5MB).");
|
|
return;
|
|
}
|
|
if (!/^image\/(jpeg|png|webp)$/.test(f.type)) {
|
|
setUploadError("Only jpg, png or webp images are accepted.");
|
|
return;
|
|
}
|
|
setUploading(true);
|
|
setUploadError("");
|
|
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 {
|
|
setUploading(false);
|
|
}
|
|
}
|
|
|
|
async function save(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!user || busy) return;
|
|
setBusy(true);
|
|
setError("");
|
|
try {
|
|
const res = await api.updateMe({ displayName: displayName.trim(), avatarUrl: avatarUrl.trim(), email: email.trim(), theme });
|
|
onSaved(res.user);
|
|
onClose();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Save failed");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Modal open={user !== null} onClose={onClose} title="Settings" icon={Settings2} wide>
|
|
<form onSubmit={save} className="space-y-4">
|
|
<div className="relative">
|
|
<Search size={15} className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 opacity-50" />
|
|
<input
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
placeholder="Search settings…"
|
|
aria-label="Search settings"
|
|
className="w-full rounded-2xl border border-stone-200/70 bg-stone-100 py-2 pl-9 pr-8 text-sm outline-none transition placeholder:text-stone-400 focus:border-accent-500/60 focus:bg-white dark:border-zinc-800 dark:bg-zinc-800/60 dark:placeholder:text-zinc-500 dark:focus:bg-zinc-900"
|
|
/>
|
|
{search && (
|
|
<button
|
|
type="button"
|
|
aria-label="Clear settings search"
|
|
onClick={() => setSearch("")}
|
|
className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded-full p-0.5 opacity-60 transition hover:opacity-100"
|
|
>
|
|
<X size={14} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-4 sm:flex-row">
|
|
<nav aria-label="Settings categories" className="flex shrink-0 gap-1.5 overflow-x-auto sm:w-44 sm:flex-col">
|
|
{visibleCats.map((c) => (
|
|
<button
|
|
key={c.id}
|
|
type="button"
|
|
onClick={() => setCat(c.id)}
|
|
aria-current={activeCat === c.id}
|
|
className={cn(
|
|
"flex shrink-0 items-center gap-2.5 rounded-2xl px-3.5 py-2.5 text-sm transition",
|
|
activeCat === c.id
|
|
? "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",
|
|
)}
|
|
>
|
|
<c.icon size={16} className="opacity-70" />
|
|
{c.title}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="min-w-0 flex-1 space-y-4">
|
|
{activeCat === "profile" && (
|
|
<SettingsPane>
|
|
<div className="flex items-center gap-3">
|
|
<Avatar name={displayName || "?"} url={avatarUrl || undefined} size={52} />
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium">{displayName || "…"}</p>
|
|
<p className="truncate text-xs opacity-60">@{user?.username}</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span className="mb-1.5 block text-sm font-medium opacity-80">Avatar upload</span>
|
|
<div
|
|
role="button"
|
|
tabIndex={0}
|
|
aria-label="Upload avatar"
|
|
onClick={() => fileRef.current?.click()}
|
|
onKeyDown={(e) => e.key === "Enter" && fileRef.current?.click()}
|
|
onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
|
|
onDragLeave={() => setDragOver(false)}
|
|
onDrop={(e) => {
|
|
e.preventDefault();
|
|
setDragOver(false);
|
|
const f = e.dataTransfer.files?.[0];
|
|
if (f) uploadFile(f);
|
|
}}
|
|
className={cn(
|
|
"flex cursor-pointer items-center gap-3 rounded-3xl border-2 border-dashed px-4 py-3.5 transition",
|
|
dragOver
|
|
? "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-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">
|
|
<span className="block font-medium">{uploading ? "Uploading…" : dragOver ? "Drop it!" : "Drop an image or click to upload"}</span>
|
|
<span className="block text-xs opacity-60">jpg · png · webp — max 5MB — 5 changes per 2h</span>
|
|
</span>
|
|
</div>
|
|
<input
|
|
ref={fileRef}
|
|
type="file"
|
|
accept="image/jpeg,image/png,image/webp"
|
|
className="hidden"
|
|
onChange={(e) => {
|
|
const f = e.target.files?.[0];
|
|
if (f) uploadFile(f);
|
|
e.target.value = "";
|
|
}}
|
|
/>
|
|
{uploadError && <p className="mt-1.5 text-sm text-red-600 dark:text-red-400">{uploadError}</p>}
|
|
</div>
|
|
<Field label="Display name">
|
|
<Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} maxLength={60} required />
|
|
</Field>
|
|
<Field label="Recovery email" hint="Optional. Used only to send you a fresh access key if you lose it.">
|
|
<Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" inputMode="email" />
|
|
</Field>
|
|
</SettingsPane>
|
|
)}
|
|
|
|
{activeCat === "appearance" && (
|
|
<SettingsPane>
|
|
<Field label="Theme">
|
|
<Picker
|
|
ariaLabel="Theme"
|
|
value={theme}
|
|
onChange={setTheme}
|
|
align="left"
|
|
options={[
|
|
{ value: "auto", label: "Auto (follows system)" },
|
|
{ value: "light", label: "Light" },
|
|
{ value: "dark", label: "Dark" },
|
|
]}
|
|
/>
|
|
</Field>
|
|
<AccentSection />
|
|
</SettingsPane>
|
|
)}
|
|
|
|
{activeCat === "features" && (
|
|
<SettingsPane>
|
|
<p className="-mb-2 text-xs opacity-60">Turn composer capabilities on or off. Applied instantly, saved on this device.</p>
|
|
<FeaturesSection />
|
|
</SettingsPane>
|
|
)}
|
|
|
|
{activeCat === "security" && (
|
|
<SettingsPane>
|
|
<SecuritySection onKeyRotated={onKeyRotated} />
|
|
</SettingsPane>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{search.trim() && visibleCats.length === 0 && (
|
|
<p className="px-2 py-4 text-center text-sm opacity-50">No settings match “{search.trim()}”.</p>
|
|
)}
|
|
|
|
{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} /> : "Save"}</Button>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
);
|
|
}
|
|
|
|
/* ---------- Settings pane (unified glass card for every category) ---------- */
|
|
|
|
function SettingsPane({ children }: { children: React.ReactNode }) {
|
|
// Single unified surface for every settings section: flat matte card with
|
|
// one soft shadow — identical gloss on profile, appearance and features.
|
|
return (
|
|
<section className="space-y-4 rounded-3xl border border-stone-200/70 bg-stone-50 p-4 shadow-sm shadow-stone-900/5 dark:border-zinc-800 dark:bg-zinc-800/60 dark:shadow-black/20">
|
|
{children}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
/* ---------- 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>
|
|
<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("text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.6)]", 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>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ---------- Features (settings) ---------- */
|
|
|
|
function FeaturesSection() {
|
|
const flags = useFeatures();
|
|
return (
|
|
<div>
|
|
<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>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ---------- Security (settings): key rotation, TOTP, passkeys ---------- */
|
|
|
|
function SecuritySection({ onKeyRotated }: { onKeyRotated?: () => void }) {
|
|
const [totpOn, setTotpOn] = useState<boolean | null>(null);
|
|
const [secret, setSecret] = useState<string | null>(null);
|
|
const [otpauthUrl, setOtpauthUrl] = useState("");
|
|
const [code, setCode] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState("");
|
|
const [rotatedKey, setRotatedKey] = useState<string | null>(null);
|
|
const [armingRotate, setArmingRotate] = useState(false);
|
|
const [confirmDelete, setConfirmDelete] = useState(false);
|
|
|
|
useEffect(() => {
|
|
api.totpStatus().then((r) => setTotpOn(r.enabled)).catch(() => setTotpOn(false));
|
|
}, []);
|
|
|
|
async function rotate() {
|
|
if (!armingRotate) {
|
|
setArmingRotate(true);
|
|
return;
|
|
}
|
|
setBusy(true);
|
|
setError("");
|
|
try {
|
|
const res = await api.rotateKey();
|
|
setRotatedKey(res.key);
|
|
setArmingRotate(false);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Rotation failed");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
async function startTotp() {
|
|
setBusy(true);
|
|
setError("");
|
|
try {
|
|
const res = await api.totpSetup();
|
|
setSecret(res.secret);
|
|
setOtpauthUrl(res.otpauthUrl);
|
|
setCode("");
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Setup failed");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
async function confirmTotp() {
|
|
if (!secret || code.replace(/\D/g, "").length !== 6) return;
|
|
setBusy(true);
|
|
setError("");
|
|
try {
|
|
await api.totpVerify(secret, code.replace(/\D/g, ""));
|
|
setTotpOn(true);
|
|
setSecret(null);
|
|
setCode("");
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Invalid code");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
async function disableTotp() {
|
|
if (code.replace(/\D/g, "").length !== 6) return;
|
|
setBusy(true);
|
|
setError("");
|
|
try {
|
|
await api.totpDisable(code.replace(/\D/g, ""));
|
|
setTotpOn(false);
|
|
setCode("");
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Invalid code");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
async function removeAccount() {
|
|
setBusy(true);
|
|
setError("");
|
|
try {
|
|
await api.deleteMe();
|
|
setConfirmDelete(false);
|
|
onKeyRotated?.();
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : "Delete failed");
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-5">
|
|
<div>
|
|
<p className="mb-1 flex items-center gap-1.5 text-sm font-medium"><KeyRound size={14} className="opacity-60" /> Access key</p>
|
|
<p className="mb-2 text-xs opacity-60">Rotate your access key. Old sessions are revoked immediately — you'll log back in with the new key.</p>
|
|
<Button size="sm" variant="secondary" disabled={busy} onClick={rotate}>
|
|
{armingRotate ? "Click again to confirm rotation" : "Rotate my access key"}
|
|
</Button>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="mb-1 flex items-center gap-1.5 text-sm font-medium"><ShieldCheck size={14} className="opacity-60" /> Two-factor (TOTP)</p>
|
|
{totpOn === null && <p className="flex items-center gap-2 text-sm opacity-60"><Spinner size={14} /> Checking…</p>}
|
|
{totpOn === false && !secret && (
|
|
<>
|
|
<p className="mb-2 text-xs opacity-60">Add a 6-digit code from your authenticator app on top of your access key.</p>
|
|
<Button size="sm" variant="secondary" disabled={busy} onClick={startTotp}>Enable two-factor</Button>
|
|
</>
|
|
)}
|
|
{secret && (
|
|
<div className="space-y-2 rounded-2xl border border-stone-200 p-3 dark:border-zinc-700">
|
|
<p className="text-xs opacity-70">Add this secret to your authenticator app (or open the otpauth link), then enter a code to confirm:</p>
|
|
<div className="flex items-center gap-2">
|
|
<code className="min-w-0 flex-1 break-all rounded-xl bg-stone-100 px-3 py-2 font-mono text-sm dark:bg-zinc-800">{secret}</code>
|
|
<CopyButton text={secret} />
|
|
</div>
|
|
<a href={otpauthUrl} className="block truncate text-xs text-accent-700 underline-offset-2 hover:underline dark:text-accent-400">{otpauthUrl}</a>
|
|
<div className="flex gap-2">
|
|
<Input
|
|
value={code}
|
|
onChange={(e) => setCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
|
|
placeholder="000000"
|
|
aria-label="Authenticator code"
|
|
inputMode="numeric"
|
|
className="text-center tracking-[0.4em]"
|
|
/>
|
|
<Button size="sm" disabled={busy || code.length !== 6} onClick={confirmTotp}>Confirm</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{totpOn === true && (
|
|
<div className="flex flex-wrap items-end gap-2">
|
|
<div className="min-w-36 flex-1">
|
|
<Field label="Disable with a current code">
|
|
<Input
|
|
value={code}
|
|
onChange={(e) => setCode(e.target.value.replace(/\D/g, "").slice(0, 6))}
|
|
placeholder="000000"
|
|
aria-label="Current authenticator code"
|
|
inputMode="numeric"
|
|
className="text-center tracking-[0.4em]"
|
|
/>
|
|
</Field>
|
|
</div>
|
|
<Button size="sm" variant="secondary" disabled={busy || code.length !== 6} onClick={disableTotp} className="!text-red-600 dark:!text-red-400">
|
|
Disable 2FA
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 rounded-2xl px-1 py-1 opacity-50">
|
|
<Fingerprint size={16} />
|
|
<span className="min-w-0 flex-1">
|
|
<span className="block text-sm font-medium">Passkeys <span className="ml-1 text-xs opacity-60">(soon)</span></span>
|
|
<span className="block text-xs opacity-60">WebAuthn / platform authenticators — needs a server RP setup.</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-red-500/30 p-3">
|
|
<p className="mb-1 flex items-center gap-1.5 text-sm font-medium text-red-600 dark:text-red-400">
|
|
<Trash2 size={14} /> Danger zone
|
|
</p>
|
|
<p className="mb-2 text-xs opacity-60">Permanently delete your account with all chats, shares and sessions. Cannot be undone.</p>
|
|
<Button size="sm" variant="secondary" disabled={busy} onClick={() => setConfirmDelete(true)} className="!text-red-600 dark:!text-red-400">
|
|
Delete my account
|
|
</Button>
|
|
</div>
|
|
|
|
{error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
|
|
|
|
<Modal open={rotatedKey !== null} onClose={() => {}} title="New access key" icon={KeyRound}>
|
|
<div className="space-y-4">
|
|
<p className="text-sm opacity-80">Copy it now — it won't be shown again. Your old sessions are revoked.</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 font-mono text-sm dark:bg-zinc-800">{rotatedKey}</code>
|
|
{rotatedKey && <CopyButton text={rotatedKey} />}
|
|
</div>
|
|
<Button size="sm" className="w-full" onClick={() => onKeyRotated?.()}>Done — log me out</Button>
|
|
</div>
|
|
</Modal>
|
|
|
|
<ConfirmDialog
|
|
open={confirmDelete}
|
|
onClose={() => setConfirmDelete(false)}
|
|
onConfirm={removeAccount}
|
|
title="Delete your account?"
|
|
message="This permanently removes your account with all conversations, shares and sessions. This cannot be undone."
|
|
confirmLabel="Delete forever"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
</div>
|
|
);
|
|
}
|