feat(settings): sidebar layout with profile, security, AI, notifications, nutrition

Sticky sidebar nav. Sections: Profile (name/language), Security (email/password change), AI & Models (BYOK keys + per-use-case model prefs), Notifications (push subscribe), Nutrition goals. Sub-pages: API keys, Webhooks.
2026-07-01 08:10:51 +02:00
parent e179692adf
commit b2d592afe8
17 changed files with 1491 additions and 0 deletions
@@ -0,0 +1,119 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Key, Trash2, Check } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+
+type Provider = "openai" | "anthropic" | "openrouter" | "ollama";
+
+const PROVIDERS: { id: Provider; label: string; placeholder: string }[] = [
+  { id: "openai", label: "OpenAI", placeholder: "sk-..." },
+  { id: "anthropic", label: "Anthropic", placeholder: "sk-ant-..." },
+  { id: "openrouter", label: "OpenRouter", placeholder: "sk-or-..." },
+  { id: "ollama", label: "Ollama (local)", placeholder: "Base URL uses env var" },
+];
+
+export function ByokManager({ initialKeys }: { initialKeys: string[] }) {
+  const [configuredKeys, setConfiguredKeys] = useState<Set<string>>(new Set(initialKeys));
+  const [inputs, setInputs] = useState<Partial<Record<Provider, string>>>({});
+  const [saving, setSaving] = useState<Provider | null>(null);
+  const [removing, setRemoving] = useState<Provider | null>(null);
+
+  async function saveKey(provider: Provider) {
+    const apiKey = inputs[provider]?.trim();
+    if (!apiKey) return;
+    setSaving(provider);
+    try {
+      const res = await fetch("/api/v1/ai-keys", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ provider, apiKey }),
+      });
+      if (res.ok) {
+        setConfiguredKeys((prev) => new Set([...prev, provider]));
+        setInputs((prev) => ({ ...prev, [provider]: "" }));
+        toast.success(`${provider} key saved`);
+      } else {
+        toast.error("Failed to save key");
+      }
+    } finally {
+      setSaving(null);
+    }
+  }
+
+  async function removeKey(provider: Provider) {
+    setRemoving(provider);
+    try {
+      const res = await fetch(`/api/v1/ai-keys/${provider}`, { method: "DELETE" });
+      if (res.ok) {
+        setConfiguredKeys((prev) => { const s = new Set(prev); s.delete(provider); return s; });
+        toast.success(`${provider} key removed`);
+      } else {
+        toast.error("Failed to remove key");
+      }
+    } finally {
+      setRemoving(null);
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      {PROVIDERS.map((p) => {
+        const hasKey = configuredKeys.has(p.id);
+        const isOllama = p.id === "ollama";
+        return (
+          <div key={p.id} className="flex items-center gap-3">
+            <div className="w-28 shrink-0 flex items-center gap-2">
+              <Key className="h-3.5 w-3.5 text-muted-foreground" />
+              <span className="text-sm font-medium">{p.label}</span>
+            </div>
+            {hasKey ? (
+              <div className="flex items-center gap-2 flex-1">
+                <Badge variant="secondary" className="gap-1">
+                  <Check className="h-3 w-3" />
+                  Configured
+                </Badge>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-destructive hover:text-destructive h-7"
+                  disabled={removing === p.id}
+                  onClick={() => { void removeKey(p.id); }}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            ) : isOllama ? (
+              <span className="text-sm text-muted-foreground">Set via OLLAMA_BASE_URL env var</span>
+            ) : (
+              <div className="flex items-center gap-2 flex-1">
+                <Input
+                  type="password"
+                  placeholder={p.placeholder}
+                  value={inputs[p.id] ?? ""}
+                  onChange={(e) => setInputs((prev) => ({ ...prev, [p.id]: e.target.value }))}
+                  className="h-8 text-sm"
+                  onKeyDown={(e) => { if (e.key === "Enter") { void saveKey(p.id); } }}
+                />
+                <Button
+                  size="sm"
+                  className="h-8"
+                  disabled={saving === p.id || !inputs[p.id]?.trim()}
+                  onClick={() => { void saveKey(p.id); }}
+                >
+                  {saving === p.id ? "Saving…" : "Save"}
+                </Button>
+              </div>
+            )}
+          </div>
+        );
+      })}
+      <p className="text-xs text-muted-foreground">
+        Your keys are encrypted at rest. When set, they override the app&apos;s default keys for your account.
+      </p>
+    </div>
+  );
+}