k/chat
1
Fork 0
Code Issues Pull Requests Wiki Activity

translations :3

Browse Source
This commit is contained in:
k
2026-09-21 16:53:15 +02:00
parent af9b8c17d0
commit 66450303a1
2 changed files with 104 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AdminCenter.tsx
+53 -51
View File
@@ -5,6 +5,7 @@ import { AdminPanel } from "./AdminPanel.tsx";
import { AccessRequestsPanel } from "./AccessRequests.tsx"; import { AccessRequestsPanel } from "./AccessRequests.tsx";
import { Button, CopyButton, FlowerMark, Input, LoadingScreen, Spinner, Switch } from "./ui.tsx"; import { Button, CopyButton, FlowerMark, Input, LoadingScreen, Spinner, Switch } from "./ui.tsx";
import { cn } from "../lib/cn.ts"; import { cn } from "../lib/cn.ts";
import { useT } from "../lib/i18n.ts";
type Tab = "accounts" | "access" | "features" | "mail"; type Tab = "accounts" | "access" | "features" | "mail";
@@ -15,20 +16,21 @@ function applyTheme(theme: string) {
root.style.colorScheme = dark ? "dark" : "light"; root.style.colorScheme = dark ? "dark" : "light";
} }
const TABS: { id: Tab; label: string; icon: typeof Users }[] = [
{ id: "accounts", label: "Accounts", icon: Users },
{ id: "access", label: "Access", icon: Inbox },
{ id: "features", label: "Features", icon: SlidersHorizontal },
{ id: "mail", label: "Mail", icon: Mail },
];
export function AdminCenter() { export function AdminCenter() {
const { t } = useT();
const [allowed, setAllowed] = useState<boolean | null>(null); const [allowed, setAllowed] = useState<boolean | null>(null);
const [tab, setTab] = useState<Tab>("accounts"); const [tab, setTab] = useState<Tab>("accounts");
const [settings, setSettings] = useState<{ registrationEnabled: boolean; accessRequestEnabled: boolean; ocrEnabled: boolean } | null>(null); const [settings, setSettings] = useState<{ registrationEnabled: boolean; accessRequestEnabled: boolean; ocrEnabled: boolean } | null>(null);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
const TABS: { id: Tab; label: string; icon: typeof Users }[] = [
{ id: "accounts", label: t("center.tabAccounts"), icon: Users },
{ id: "access", label: t("center.tabAccess"), icon: Inbox },
{ id: "features", label: t("center.tabFeatures"), icon: SlidersHorizontal },
{ id: "mail", label: t("center.tabMail"), icon: Mail },
];
useEffect(() => { useEffect(() => {
api.verify() api.verify()
.then((r) => { .then((r) => {
@@ -38,7 +40,7 @@ export function AdminCenter() {
} }
setAllowed(true); setAllowed(true);
applyTheme(r.user.theme); applyTheme(r.user.theme);
api.adminGetSettings().then((s) => setSettings(s.settings)).catch((e) => setError(e instanceof Error ? e.message : "Load failed")); api.adminGetSettings().then((s) => setSettings(s.settings)).catch((e) => setError(e instanceof Error ? e.message : t("admin.loadFailed")));
}) })
.catch(() => setAllowed(false)); .catch(() => setAllowed(false));
}, []); }, []);
@@ -50,7 +52,7 @@ export function AdminCenter() {
const res = await api.adminPatchSettings(patch); const res = await api.adminPatchSettings(patch);
setSettings(res.settings); setSettings(res.settings);
} catch (e) { } catch (e) {
setError(e instanceof Error ? e.message : "Save failed"); setError(e instanceof Error ? e.message : t("common.saveFailed"));
} finally { } finally {
setSaving(false); setSaving(false);
} }
@@ -65,9 +67,9 @@ export function AdminCenter() {
<div className="grid min-h-full place-items-center p-6"> <div className="grid min-h-full place-items-center p-6">
<div className="w-full max-w-sm rounded-[2rem] border border-stone-200 bg-white p-8 text-center shadow-xl dark:border-zinc-800 dark:bg-zinc-900"> <div className="w-full max-w-sm rounded-[2rem] border border-stone-200 bg-white p-8 text-center shadow-xl dark:border-zinc-800 dark:bg-zinc-900">
<ShieldAlert size={28} className="mx-auto mb-3 text-red-500" /> <ShieldAlert size={28} className="mx-auto mb-3 text-red-500" />
<h1 className="text-lg font-bold">Admins only</h1> <h1 className="text-lg font-bold">{t("center.locked")}</h1>
<p className="mt-1 text-sm opacity-60">Log in with the admin account to open the Admin Center.</p> <p className="mt-1 text-sm opacity-60">{t("center.lockedSub")}</p>
<a href="/" className="mt-4 inline-block rounded-full bg-accent-600 px-5 py-2.5 text-sm font-medium text-white dark:bg-accent-500 dark:text-zinc-950">Back to login</a> <a href="/" className="mt-4 inline-block rounded-full bg-accent-600 px-5 py-2.5 text-sm font-medium text-white dark:bg-accent-500 dark:text-zinc-950">{t("common.backToLogin")}</a>
</div> </div>
</div> </div>
); );
@@ -77,13 +79,13 @@ export function AdminCenter() {
<div className="min-h-full"> <div className="min-h-full">
<header className="border-b border-stone-200/70 bg-white/70 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/70"> <header className="border-b border-stone-200/70 bg-white/70 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/70">
<div className="mx-auto flex w-full max-w-4xl items-center gap-3 px-4 py-3"> <div className="mx-auto flex w-full max-w-4xl items-center gap-3 px-4 py-3">
<a href="/" aria-label="Back to chat" className="rounded-full p-2 transition hover:bg-stone-200/60 dark:hover:bg-zinc-800"> <a href="/" aria-label={t("center.back")} className="rounded-full p-2 transition hover:bg-stone-200/60 dark:hover:bg-zinc-800">
<ArrowLeft size={18} /> <ArrowLeft size={18} />
</a> </a>
<FlowerMark size={32} dynamic={false} /> <FlowerMark size={32} dynamic={false} />
<h1 className="flex items-center gap-2 text-lg font-bold tracking-tight"> <h1 className="flex items-center gap-2 text-lg font-bold tracking-tight">
<LayoutDashboard size={18} className="text-accent-600 dark:text-accent-400" /> <LayoutDashboard size={18} className="text-accent-600 dark:text-accent-400" />
Admin Center {t("center.title")}
</h1> </h1>
</div> </div>
<div className="mx-auto w-full max-w-4xl px-4 pb-3"> <div className="mx-auto w-full max-w-4xl px-4 pb-3">
@@ -126,25 +128,25 @@ export function AdminCenter() {
<section className="space-y-3"> <section className="space-y-3">
<div className="flex items-center gap-4 rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900"> <div className="flex items-center gap-4 rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-sm font-medium">Public registration</p> <p className="text-sm font-medium">{t("center.regTitle")}</p>
<p className="text-sm opacity-60">Show the Register button on the login page. Off = admin-created accounts only. Turning it on retires the wishlist below.</p> <p className="text-sm opacity-60">{t("center.regDesc")}</p>
</div> </div>
<Switch label="Public registration" checked={settings?.registrationEnabled ?? false} onChange={(v) => toggle({ registrationEnabled: v })} /> <Switch label={t("center.regTitle")} checked={settings?.registrationEnabled ?? false} onChange={(v) => toggle({ registrationEnabled: v })} />
</div> </div>
<div className={cn( <div className={cn(
"flex items-center gap-4 rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900", "flex items-center gap-4 rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900",
settings?.registrationEnabled && "opacity-60", settings?.registrationEnabled && "opacity-60",
)}> )}>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-sm font-medium">Access requests (wishlist)</p> <p className="text-sm font-medium">{t("center.accTitle")}</p>
<p className="text-sm opacity-60"> <p className="text-sm opacity-60">
{settings?.registrationEnabled {settings?.registrationEnabled
? "Unavailable while public registration is on — it replaces the wishlist." ? t("center.accDescOn")
: "Show Request access on the login page. Visitors reserve a username and plead their case; you triage them in the Access tab."} : t("center.accDescOff")}
</p> </p>
</div> </div>
<Switch <Switch
label="Access requests" label={t("center.accTitle")}
checked={settings?.accessRequestEnabled ?? false} checked={settings?.accessRequestEnabled ?? false}
disabled={settings?.registrationEnabled ?? false} disabled={settings?.registrationEnabled ?? false}
onChange={(v) => toggle({ accessRequestEnabled: v })} onChange={(v) => toggle({ accessRequestEnabled: v })}
@@ -152,13 +154,13 @@ export function AdminCenter() {
</div> </div>
<div className="flex items-center gap-4 rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900"> <div className="flex items-center gap-4 rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-sm font-medium">OCR tool</p> <p className="text-sm font-medium">{t("center.ocrTitle")}</p>
<p className="text-sm opacity-60">Server-side image transcription for attachments. Requires the tesseract binary.</p> <p className="text-sm opacity-60">{t("center.ocrDesc")}</p>
</div> </div>
<Switch label="OCR tool" checked={settings?.ocrEnabled ?? false} onChange={(v) => toggle({ ocrEnabled: v })} /> <Switch label={t("center.ocrTitle")} checked={settings?.ocrEnabled ?? false} onChange={(v) => toggle({ ocrEnabled: v })} />
</div> </div>
{saving && <p className="flex items-center gap-2 text-sm opacity-60"><Spinner size={14} /> Saving…</p>} {saving && <p className="flex items-center gap-2 text-sm opacity-60"><Spinner size={14} /> {t("common.saving")}</p>}
{!settings && !error && <p className="flex items-center gap-2 text-sm opacity-60"><Spinner size={14} /> Loading…</p>} {!settings && !error && <p className="flex items-center gap-2 text-sm opacity-60"><Spinner size={14} /> {t("common.loading")}</p>}
</section> </section>
)} )}
@@ -181,6 +183,7 @@ type SmtpInfo = {
}; };
function MailPanel() { function MailPanel() {
const { t } = useT();
const [smtp, setSmtp] = useState<SmtpInfo | null>(null); const [smtp, setSmtp] = useState<SmtpInfo | null>(null);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [showPass, setShowPass] = useState(false); const [showPass, setShowPass] = useState(false);
@@ -190,7 +193,7 @@ function MailPanel() {
const [result, setResult] = useState<{ ok: boolean; text: string } | null>(null); const [result, setResult] = useState<{ ok: boolean; text: string } | null>(null);
useEffect(() => { useEffect(() => {
api.adminMailStatus().then((r) => setSmtp(r.smtp)).catch((e) => setError(e instanceof Error ? e.message : "Load failed")); api.adminMailStatus().then((r) => setSmtp(r.smtp)).catch((e) => setError(e instanceof Error ? e.message : t("admin.loadFailed")));
}, []); }, []);
async function verify() { async function verify() {
@@ -198,9 +201,9 @@ function MailPanel() {
setResult(null); setResult(null);
try { try {
await api.adminMailVerify(); await api.adminMailVerify();
setResult({ ok: true, text: "Connection OK — SMTP host reachable, auth accepted." }); setResult({ ok: true, text: t("center.connOk") });
} catch (e) { } catch (e) {
setResult({ ok: false, text: e instanceof Error ? e.message : "Verification failed" }); setResult({ ok: false, text: e instanceof Error ? e.message : t("center.verifyFailed") });
} finally { } finally {
setVerifying(false); setVerifying(false);
} }
@@ -211,9 +214,9 @@ function MailPanel() {
setResult(null); setResult(null);
try { try {
const r = await api.adminMailTest(to.trim()); const r = await api.adminMailTest(to.trim());
setResult({ ok: true, text: `Test mail sent to ${to.trim()}${r.messageId ? ` (${r.messageId})` : ""}.` }); setResult({ ok: true, text: t("center.testSent", { to: to.trim(), tail: r.messageId ? ` (${r.messageId})` : "" }) });
} catch (e) { } catch (e) {
setResult({ ok: false, text: e instanceof Error ? e.message : "Send failed" }); setResult({ ok: false, text: e instanceof Error ? e.message : t("center.mailSendFailed") });
} finally { } finally {
setSending(false); setSending(false);
} }
@@ -236,40 +239,40 @@ function MailPanel() {
<Mail size={17} /> <Mail size={17} />
</span> </span>
<div> <div>
<p className="text-sm font-medium">Key recovery emails</p> <p className="text-sm font-medium">{t("center.mailTitle")}</p>
<p className="text-sm opacity-60"> <p className="text-sm opacity-60">
{smtp == null ? "Checking…" : smtp.enabled ? `Enabled — sent from ${smtp.from}` : "Disabled — set SMTP_HOST on the server to enable"} {smtp == null ? t("center.mailChecking") : smtp.enabled ? t("center.mailFrom", { from: smtp.from }) : t("center.mailOff")}
</p> </p>
</div> </div>
<span className={cn( <span className={cn(
"ml-auto rounded-full px-3 py-1 text-xs font-medium", "ml-auto rounded-full px-3 py-1 text-xs font-medium",
smtp?.enabled ? "bg-emerald-600/10 text-emerald-700 dark:text-emerald-400" : "bg-stone-200/70 dark:bg-zinc-800", smtp?.enabled ? "bg-emerald-600/10 text-emerald-700 dark:text-emerald-400" : "bg-stone-200/70 dark:bg-zinc-800",
)}> )}>
{smtp?.enabled ? "On" : "Off"} {smtp?.enabled ? t("center.on") : t("center.off")}
</span> </span>
</div> </div>
{error && <p className="mt-3 text-sm text-red-600 dark:text-red-400" role="alert">{error}</p>} {error && <p className="mt-3 text-sm text-red-600 dark:text-red-400" role="alert">{error}</p>}
{!smtp && !error && <p className="mt-3 flex items-center gap-2 text-sm opacity-60"><Spinner size={14} /> Loading…</p>} {!smtp && !error && <p className="mt-3 flex items-center gap-2 text-sm opacity-60"><Spinner size={14} /> {t("common.loading")}</p>}
{smtp && ( {smtp && (
<div className="mt-3 divide-y divide-stone-200/70 rounded-2xl border border-stone-200/70 px-4 dark:divide-zinc-800 dark:border-zinc-800"> <div className="mt-3 divide-y divide-stone-200/70 rounded-2xl border border-stone-200/70 px-4 dark:divide-zinc-800 dark:border-zinc-800">
<Row label="Host">{smtp.host || <span className="opacity-50">(not set)</span>}</Row> <Row label={t("center.smtpHost")}>{smtp.host || <span className="opacity-50">{t("center.notSet")}</span>}</Row>
<Row label="Port">{smtp.port} · {smtp.secure ? "implicit TLS (465)" : "STARTTLS (587)"}</Row> <Row label={t("center.smtpPort")}>{smtp.port} · {smtp.secure ? t("center.tlsImplicit") : t("center.tlsStarttls")}</Row>
<Row label="User">{smtp.user || <span className="opacity-50">(no auth)</span>}</Row> <Row label={t("center.smtpUser")}>{smtp.user || <span className="opacity-50">{t("center.noAuth")}</span>}</Row>
<Row label="Password"> <Row label={t("center.smtpPass")}>
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
{!smtp.hasPass ? ( {!smtp.hasPass ? (
<span className="opacity-50">(not set)</span> <span className="opacity-50">{t("center.notSet")}</span>
) : showPass ? ( ) : showPass ? (
<code className="truncate font-mono">{smtp.pass}</code> <code className="truncate font-mono">{smtp.pass}</code>
) : ( ) : (
<code className="select-none blur-sm" aria-label="hidden password">••••••••••</code> <code className="select-none blur-sm" aria-label={t("center.hiddenPass")}>••••••••••</code>
)} )}
{smtp.hasPass && ( {smtp.hasPass && (
<> <>
<button <button
type="button" type="button"
onClick={() => setShowPass((v) => !v)} onClick={() => setShowPass((v) => !v)}
aria-label={showPass ? "Hide SMTP password" : "Show SMTP password"} aria-label={showPass ? t("center.hidePass") : t("center.showPass")}
className="rounded-full p-1.5 transition hover:bg-stone-200/60 dark:hover:bg-zinc-800" className="rounded-full p-1.5 transition hover:bg-stone-200/60 dark:hover:bg-zinc-800"
> >
{showPass ? <EyeOff size={15} /> : <Eye size={15} />} {showPass ? <EyeOff size={15} /> : <Eye size={15} />}
@@ -279,37 +282,36 @@ function MailPanel() {
)} )}
</span> </span>
</Row> </Row>
<Row label="From"><span className="truncate">{smtp.from}</span></Row> <Row label={t("center.smtpFrom")}><span className="truncate">{smtp.from}</span></Row>
<Row label="App URL"><span className="truncate">{smtp.appUrl}</span></Row> <Row label={t("center.smtpAppUrl")}><span className="truncate">{smtp.appUrl}</span></Row>
</div> </div>
)} )}
<p className="mt-3 text-sm opacity-60"> <p className="mt-3 text-sm opacity-60">
Credentials live in the server environment (see <code>docs/OPERATIONS.md</code>), read-only here. {t("center.credsNote")}
Users set their recovery address in profile settings or at account creation.
</p> </p>
</section> </section>
<section className="rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900"> <section className="rounded-3xl border border-stone-200/70 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
<p className="text-sm font-medium">Connectivity test</p> <p className="text-sm font-medium">{t("center.mailTestTitle")}</p>
<p className="mt-0.5 text-sm opacity-60">Verify the connection, then send a real test mail to an address you control.</p> <p className="mt-0.5 text-sm opacity-60">{t("center.mailTestDesc")}</p>
<div className="mt-3 flex flex-wrap items-center gap-2"> <div className="mt-3 flex flex-wrap items-center gap-2">
<Button variant="secondary" size="sm" onClick={verify} disabled={verifying || !smtp?.enabled}> <Button variant="secondary" size="sm" onClick={verify} disabled={verifying || !smtp?.enabled}>
{verifying ? <Spinner size={14} /> : null} {verifying ? <Spinner size={14} /> : null}
{verifying ? "Verifying…" : "Verify connection"} {verifying ? t("center.verifying") : t("center.verifyConn")}
</Button> </Button>
</div> </div>
<div className="mt-3 flex flex-col gap-2 sm:flex-row"> <div className="mt-3 flex flex-col gap-2 sm:flex-row">
<Input <Input
type="email" type="email"
placeholder="[email protected]" placeholder="[email protected]"
aria-label="Test recipient email" aria-label={t("center.testToAria")}
value={to} value={to}
onChange={(e) => setTo(e.target.value)} onChange={(e) => setTo(e.target.value)}
className="flex-1" className="flex-1"
/> />
<Button size="sm" onClick={sendTest} disabled={sending || !smtp?.enabled || !/^[^\s@]{1,64}@[^\s@]{1,253}\.[^\s@]{2,}$/.test(to.trim())}> <Button size="sm" onClick={sendTest} disabled={sending || !smtp?.enabled || !/^[^\s@]{1,64}@[^\s@]{1,253}\.[^\s@]{2,}$/.test(to.trim())}>
{sending ? <Spinner size={14} /> : <Send size={14} />} {sending ? <Spinner size={14} /> : <Send size={14} />}
{sending ? "Sending…" : "Send test mail"} {sending ? t("center.sendingMail") : t("center.sendTest")}
</Button> </Button>
</div> </div>
{result && ( {result && (
frontend/src/components/AdminPanel.tsx
+51 -49
View File
@@ -162,7 +162,7 @@ export function OllamaModelsModal({ open, onClose }: { open: boolean; onClose: (
</span> </span>
)} )}
<Button size="sm" variant="secondary" onClick={() => { setPullName(tag); pull(tag); }} disabled={pulling}> <Button size="sm" variant="secondary" onClick={() => { setPullName(tag); pull(tag); }} disabled={pulling}>
<Download size={14} /> Pull <Download size={14} /> {t("ollama.pull")}
</Button> </Button>
</li> </li>
); );
@@ -173,8 +173,8 @@ export function OllamaModelsModal({ open, onClose }: { open: boolean; onClose: (
<ConfirmDialog <ConfirmDialog
open={deleteModel !== null} open={deleteModel !== null}
onClose={() => setDeleteModel(null)} onClose={() => setDeleteModel(null)}
title={`Delete ${deleteModel}?`} title={t("ollama.delTitle", { name: deleteModel ?? "" })}
message="The model is removed from the Ollama host. Pull it again anytime." message={t("ollama.delMsg")}
onConfirm={() => deleteModel && removeModel(deleteModel)} onConfirm={() => deleteModel && removeModel(deleteModel)}
/> />
</> </>
@@ -182,6 +182,7 @@ export function OllamaModelsModal({ open, onClose }: { open: boolean; onClose: (
} }
export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: () => void; bare?: boolean }) { export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: () => void; bare?: boolean }) {
const { t } = useT();
const [users, setUsers] = useState<User[]>([]); const [users, setUsers] = useState<User[]>([]);
const [busy, setBusy] = useState(false); const [busy, setBusy] = useState(false);
const [error, setError] = useState(""); const [error, setError] = useState("");
@@ -215,7 +216,7 @@ export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: ()
setPages(res.pages); setPages(res.pages);
if (res.page !== page) setPage(res.page); if (res.page !== page) setPage(res.page);
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : "Load failed"); setError(err instanceof Error ? err.message : t("admin.loadFailed"));
} finally { } finally {
setBusy(false); setBusy(false);
} }
@@ -256,7 +257,7 @@ export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: ()
setShowCreate(false); setShowCreate(false);
await refresh(); await refresh();
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : "Create failed"); setError(err instanceof Error ? err.message : t("admin.createFailed"));
} }
} }
@@ -266,7 +267,7 @@ export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: ()
const res = await api.adminRegenerate(u.id); const res = await api.adminRegenerate(u.id);
setFreshKey({ username: u.username, key: res.key }); setFreshKey({ username: u.username, key: res.key });
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : "Regenerate failed"); setError(err instanceof Error ? err.message : t("admin.regenFailed"));
} }
} }
@@ -275,7 +276,7 @@ export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: ()
await api.adminDelete(u.id); await api.adminDelete(u.id);
await refresh(); await refresh();
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : "Delete failed"); setError(err instanceof Error ? err.message : t("admin.deleteFailed"));
} }
} }
@@ -283,19 +284,19 @@ export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: ()
// of a modal — no logic duplicated. // of a modal — no logic duplicated.
const Shell: FC<{ children: ReactNode }> = bare const Shell: FC<{ children: ReactNode }> = bare
? ({ children }) => <div className="min-w-0 flex-1 space-y-1">{children}</div> ? ({ children }) => <div className="min-w-0 flex-1 space-y-1">{children}</div>
: ({ children }) => <Modal open={open} onClose={onClose} title="Accounts" icon={Users} wide>{children}</Modal>; : ({ children }) => <Modal open={open} onClose={onClose} title={t("admin.title")} icon={Users} wide>{children}</Modal>;
return ( return (
<> <>
<Shell> <Shell>
<p className="mb-4 text-sm opacity-70"> <p className="mb-4 text-sm opacity-70">
No-KYC accounts: you create a username, hand the access key to its owner once. Keys are stored hashed — regenerate to rotate. {t("admin.intro")}
</p> </p>
{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>} {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 && ( {freshKey && (
<div className="mb-4 rounded-2xl border border-accent-500/40 bg-accent-50 p-4 dark:bg-accent-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> <p className="mb-2 flex items-center gap-2 text-sm font-medium"><KeyRound size={15} /> {t("admin.keyOnce", { user: freshKey.username })}</p>
<div className="flex items-center gap-2"> <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> <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>
<CopyButton text={freshKey.key} /> <CopyButton text={freshKey.key} />
@@ -306,62 +307,62 @@ export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: ()
{!showCreate ? ( {!showCreate ? (
<div className="mb-5 flex flex-wrap gap-2"> <div className="mb-5 flex flex-wrap gap-2">
<Button variant="secondary" size="sm" onClick={() => setShowCreate(true)}> <Button variant="secondary" size="sm" onClick={() => setShowCreate(true)}>
<UserPlus size={15} /> New account <UserPlus size={15} /> {t("admin.newAccount")}
</Button> </Button>
<Button variant="secondary" size="sm" onClick={() => setModelsOpen(true)}> <Button variant="secondary" size="sm" onClick={() => setModelsOpen(true)}>
<Bot size={15} /> Ollama models <Bot size={15} /> {t("ollama.models")}
</Button> </Button>
</div> </div>
) : ( ) : (
<form onSubmit={create} className="mb-4 flex flex-wrap items-end gap-2 rounded-2xl border border-stone-200 p-3 dark:border-zinc-700"> <form onSubmit={create} className="mb-4 flex flex-wrap items-end gap-2 rounded-2xl border border-stone-200 p-3 dark:border-zinc-700">
<div className="min-w-40 flex-1"> <div className="min-w-40 flex-1">
<Field label="Username"><Input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="alice" required /></Field> <Field label={t("common.username")}><Input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="alice" required /></Field>
</div> </div>
<div className="min-w-40 flex-1"> <div className="min-w-40 flex-1">
<Field label="Display name"><Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} placeholder="Alice" /></Field> <Field label={t("common.displayName")}><Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} placeholder="Alice" /></Field>
</div> </div>
<div className="min-w-40 flex-1"> <div className="min-w-40 flex-1">
<Field label="Email (recovery)"><Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" inputMode="email" /></Field> <Field label={t("admin.email")}><Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" inputMode="email" /></Field>
</div> </div>
<Button size="sm" type="submit">Create</Button> <Button size="sm" type="submit">{t("common.create")}</Button>
<Button size="sm" variant="ghost" type="button" onClick={() => setShowCreate(false)}>Cancel</Button> <Button size="sm" variant="ghost" type="button" onClick={() => setShowCreate(false)}>{t("common.cancel")}</Button>
</form> </form>
)} )}
<div className="mb-3 flex flex-wrap items-center gap-2"> <div className="mb-3 flex flex-wrap items-center gap-2">
<div className="relative min-w-40 flex-1"> <div className="relative min-w-40 flex-1">
<Search size={15} className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 opacity-40" /> <Search size={15} className="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 opacity-40" />
<Input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search accounts…" aria-label="Search accounts" className="pl-10" /> <Input value={q} onChange={(e) => setQ(e.target.value)} placeholder={t("admin.searchPh")} aria-label={t("admin.searchAria")} className="pl-10" />
</div> </div>
<Picker <Picker
ariaLabel="Sort accounts" ariaLabel={t("admin.sortAria")}
icon={ArrowUpDown} icon={ArrowUpDown}
value={sort} value={sort}
onChange={(v) => { setSort(v); setPage(1); }} onChange={(v) => { setSort(v); setPage(1); }}
align="right" align="right"
options={[ options={[
{ value: "newest", label: "Newest first" }, { value: "newest", label: t("admin.sortNewest") },
{ value: "oldest", label: "Oldest first" }, { value: "oldest", label: t("admin.sortOldest") },
{ value: "az", label: "A → Z" }, { value: "az", label: t("admin.sortAz") },
{ value: "za", label: "Z → A" }, { value: "za", label: t("admin.sortZa") },
]} ]}
/> />
<Picker <Picker
ariaLabel="Filter accounts" ariaLabel={t("admin.filterAria")}
icon={Filter} icon={Filter}
value={filter} value={filter}
onChange={(v) => { setFilter(v); setPage(1); }} onChange={(v) => { setFilter(v); setPage(1); }}
align="right" align="right"
options={[ options={[
{ value: "all", label: "All accounts" }, { value: "all", label: t("admin.filterAll") },
{ value: "with-email", label: "With recovery email" }, { value: "with-email", label: t("admin.filterWith") },
{ value: "no-email", label: "No recovery email" }, { value: "no-email", label: t("admin.filterNo") },
]} ]}
/> />
</div> </div>
{busy ? ( {busy ? (
<p className="flex items-center gap-2 text-sm opacity-60"><Spinner size={15} /> Loading…</p> <p className="flex items-center gap-2 text-sm opacity-60"><Spinner size={15} /> {t("common.loading")}</p>
) : ( ) : (
<ul className="space-y-2"> <ul className="space-y-2">
{users.map((u) => ( {users.map((u) => (
@@ -369,13 +370,13 @@ export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: ()
<Avatar name={u.displayName} url={u.avatarUrl} size={36} /> <Avatar name={u.displayName} url={u.avatarUrl} size={36} />
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="truncate text-sm font-medium">{u.displayName} <span className="font-normal opacity-50">@{u.username}</span></p> <p className="truncate text-sm font-medium">{u.displayName} <span className="font-normal opacity-50">@{u.username}</span></p>
<p className="truncate text-xs opacity-50">{u.email || "no recovery email"} · {new Date(u.createdAt).toLocaleDateString()}</p> <p className="truncate text-xs opacity-50">{u.email || t("admin.noEmail")} · {new Date(u.createdAt).toLocaleDateString()}</p>
</div> </div>
{!u.isAdmin && ( {!u.isAdmin && (
<div className="flex shrink-0 gap-1"> <div className="flex shrink-0 gap-1">
<button title="Edit profile" onClick={() => setEditTarget(u)} className="rounded-full p-2 transition hover:bg-stone-100 dark:hover:bg-zinc-800"><Pencil size={15} /></button> <button title={t("admin.editProfile")} onClick={() => setEditTarget(u)} className="rounded-full p-2 transition hover:bg-stone-100 dark:hover:bg-zinc-800"><Pencil size={15} /></button>
<button title="Regenerate key (revokes old sessions)" onClick={() => regenerate(u)} className="rounded-full p-2 transition hover:bg-stone-100 dark:hover:bg-zinc-800"><RefreshCw size={15} /></button> <button title={t("admin.regenKey")} onClick={() => regenerate(u)} className="rounded-full p-2 transition hover:bg-stone-100 dark:hover:bg-zinc-800"><RefreshCw size={15} /></button>
<button title="Delete account" onClick={() => setDeleteTarget(u)} className="rounded-full p-2 text-red-600 transition hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40"><Trash2 size={15} /></button> <button title={t("admin.deleteAccount")} onClick={() => setDeleteTarget(u)} className="rounded-full p-2 text-red-600 transition hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40"><Trash2 size={15} /></button>
</div> </div>
)} )}
</li> </li>
@@ -383,18 +384,18 @@ export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: ()
</ul> </ul>
)} )}
<div className="mt-3 flex items-center justify-between gap-2 text-sm"> <div className="mt-3 flex items-center justify-between gap-2 text-sm">
<span className="opacity-60">{total} account{total === 1 ? "" : "s"} · page {page} of {pages}</span> <span className="opacity-60">{total === 1 ? t("admin.countOne", { total, page, pages }) : t("admin.countMany", { total, page, pages })}</span>
{pages > 1 && ( {pages > 1 && (
<div className="flex gap-2.5"> <div className="flex gap-2.5">
<IconButton <IconButton
title="Previous page" title={t("admin.prevPage")}
disabled={page <= 1} disabled={page <= 1}
onClick={() => setPage((p) => Math.max(1, p - 1))} onClick={() => setPage((p) => Math.max(1, p - 1))}
> >
<ChevronLeft size={16} /> <ChevronLeft size={16} />
</IconButton> </IconButton>
<IconButton <IconButton
title="Next page" title={t("admin.nextPage")}
disabled={page >= pages} disabled={page >= pages}
onClick={() => setPage((p) => p + 1)} onClick={() => setPage((p) => p + 1)}
> >
@@ -408,8 +409,8 @@ export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: ()
<ConfirmDialog <ConfirmDialog
open={deleteTarget !== null} open={deleteTarget !== null}
onClose={() => setDeleteTarget(null)} onClose={() => setDeleteTarget(null)}
title={`Delete @${deleteTarget?.username}?`} title={t("admin.deleteTitle", { user: deleteTarget?.username ?? "" })}
message="This permanently removes the account, all its conversations and its shares." message={t("admin.deleteMsg")}
onConfirm={() => deleteTarget && remove(deleteTarget)} onConfirm={() => deleteTarget && remove(deleteTarget)}
/> />
@@ -420,6 +421,7 @@ export function AdminPanel({ open, onClose, bare }: { open: boolean; onClose: ()
} }
function EditUserDialog({ user, onClose, onSaved }: { user: User | null; onClose: () => void; onSaved: () => void }) { function EditUserDialog({ user, onClose, onSaved }: { user: User | null; onClose: () => void; onSaved: () => void }) {
const { t } = useT();
const [displayName, setDisplayName] = useState(""); const [displayName, setDisplayName] = useState("");
const [avatarUrl, setAvatarUrl] = useState(""); const [avatarUrl, setAvatarUrl] = useState("");
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
@@ -444,33 +446,33 @@ function EditUserDialog({ user, onClose, onSaved }: { user: User | null; onClose
onSaved(); onSaved();
onClose(); onClose();
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : "Save failed"); setError(err instanceof Error ? err.message : t("common.saveFailed"));
} }
} }
return ( return (
<Modal open={user !== null} onClose={onClose} title={`Edit @${user?.username}`} icon={Pencil}> <Modal open={user !== null} onClose={onClose} title={t("admin.editUserTitle", { user: user?.username ?? "" })} icon={Pencil}>
<form onSubmit={save} className="space-y-4"> <form onSubmit={save} className="space-y-4">
<Field label="Display name"><Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} maxLength={60} required /></Field> <Field label={t("common.displayName")}><Input value={displayName} onChange={(e) => setDisplayName(e.target.value)} maxLength={60} required /></Field>
<Field label="Avatar URL"><Input value={avatarUrl} onChange={(e) => setAvatarUrl(e.target.value)} placeholder="https://…" /></Field> <Field label={t("admin.avatarUrl")}><Input value={avatarUrl} onChange={(e) => setAvatarUrl(e.target.value)} placeholder="https://…" /></Field>
<Field label="Email (recovery)"><Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" inputMode="email" /></Field> <Field label={t("admin.email")}><Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="[email protected]" inputMode="email" /></Field>
<Field label="Theme"> <Field label={t("common.theme")}>
<Picker <Picker
ariaLabel="Theme" ariaLabel={t("common.theme")}
value={theme} value={theme}
onChange={setTheme} onChange={setTheme}
align="left" align="left"
options={[ options={[
{ value: "auto", label: "Auto" }, { value: "auto", label: t("common.themeAuto") },
{ value: "light", label: "Light" }, { value: "light", label: t("common.light") },
{ value: "dark", label: "Dark" }, { value: "dark", label: t("common.dark") },
]} ]}
/> />
</Field> </Field>
{error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>} {error && <p className="text-sm text-red-600 dark:text-red-400">{error}</p>}
<div className="flex justify-end gap-2"> <div className="flex justify-end gap-2">
<Button variant="secondary" size="sm" type="button" onClick={onClose}>Cancel</Button> <Button variant="secondary" size="sm" type="button" onClick={onClose}>{t("common.cancel")}</Button>
<Button size="sm" type="submit">Save</Button> <Button size="sm" type="submit">{t("common.save")}</Button>
</div> </div>
</form> </form>
</Modal> </Modal>