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,172 @@
+"use client";
+
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+
+type ApiKey = {
+  id: string;
+  name: string;
+  lastUsedAt: string | null;
+  createdAt: string;
+};
+
+type CreateApiKeyResponse = {
+  id: string;
+  name: string;
+  key: string;
+  createdAt: string;
+};
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}
+
+export function ApiKeysManager({ initialKeys }: { initialKeys: ApiKey[] }) {
+  const [keys, setKeys] = useState<ApiKey[]>(initialKeys);
+  const [name, setName] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [newKey, setNewKey] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  async function handleCreate(e: React.FormEvent) {
+    e.preventDefault();
+    if (!name.trim()) return;
+    setCreating(true);
+    try {
+      const res = await fetch("/api/v1/api-keys", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: name.trim() }),
+      });
+      if (!res.ok) {
+        const data = await res.json() as { error?: string };
+        throw new Error(data.error ?? "Failed to create API key");
+      }
+      const data = await res.json() as CreateApiKeyResponse;
+      setNewKey(data.key);
+      setKeys((prev) => [
+        { id: data.id, name: data.name, lastUsedAt: null, createdAt: data.createdAt },
+        ...prev,
+      ]);
+      setName("");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to create API key");
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  async function handleRevoke(id: string) {
+    try {
+      const res = await fetch(`/api/v1/api-keys/${id}`, { method: "DELETE" });
+      if (!res.ok) {
+        const data = await res.json() as { error?: string };
+        throw new Error(data.error ?? "Failed to revoke API key");
+      }
+      setKeys((prev) => prev.filter((k) => k.id !== id));
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Failed to revoke API key");
+    }
+  }
+
+  async function handleCopy() {
+    if (!newKey) return;
+    try {
+      await navigator.clipboard.writeText(newKey);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      toast.error("Failed to copy to clipboard");
+    }
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Create form */}
+      <form onSubmit={handleCreate} className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="key-name">Key name</Label>
+          <div className="flex gap-2">
+            <Input
+              id="key-name"
+              placeholder="e.g. My app"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              maxLength={100}
+              required
+            />
+            <Button type="submit" disabled={creating || !name.trim()}>
+              {creating ? "Creating…" : "Create"}
+            </Button>
+          </div>
+        </div>
+      </form>
+
+      {/* New key reveal */}
+      {newKey && (
+        <div className="rounded-md border border-yellow-400 bg-yellow-50 p-4 space-y-3 dark:bg-yellow-950 dark:border-yellow-700">
+          <p className="text-sm font-medium text-yellow-800 dark:text-yellow-200">
+            Save this key — it will not be shown again.
+          </p>
+          <div className="flex items-center gap-2">
+            <code className="flex-1 rounded bg-white dark:bg-black border px-3 py-2 text-sm font-mono break-all">
+              {newKey}
+            </code>
+            <Button type="button" variant="outline" onClick={handleCopy}>
+              {copied ? "Copied!" : "Copy"}
+            </Button>
+          </div>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => setNewKey(null)}
+            className="text-muted-foreground"
+          >
+            Dismiss
+          </Button>
+        </div>
+      )}
+
+      {/* Keys list */}
+      {keys.length === 0 ? (
+        <p className="text-sm text-muted-foreground">No API keys yet.</p>
+      ) : (
+        <div className="divide-y rounded-md border">
+          {keys.map((k) => (
+            <div key={k.id} className="flex items-center justify-between px-4 py-3 gap-4">
+              <div className="min-w-0 flex-1 space-y-1">
+                <p className="text-sm font-medium truncate">{k.name}</p>
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <span>Created {formatDate(k.createdAt)}</span>
+                  <span>·</span>
+                  {k.lastUsedAt ? (
+                    <span>Last used {formatDate(k.lastUsedAt)}</span>
+                  ) : (
+                    <Badge variant="secondary" className="text-xs">Never used</Badge>
+                  )}
+                </div>
+              </div>
+              <Button
+                type="button"
+                variant="destructive"
+                size="sm"
+                onClick={() => { void handleRevoke(k.id); }}
+              >
+                Revoke
+              </Button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}