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,77 @@
+"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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useTranslations } from "next-intl";
+import { useLocale, SUPPORTED_LOCALES, type Locale } from "@/lib/i18n/provider";
+
+type UserProps = {
+  name: string;
+  email: string;
+  image: string | null;
+  locale: string;
+};
+
+export function SettingsForm({ user }: { user: UserProps }) {
+  const t = useTranslations("settingsForm");
+  const t_common = useTranslations("common");
+  const { setLocale } = useLocale();
+
+  const [name, setName] = useState(user.name);
+  const [saving, setSaving] = useState(false);
+
+  async function saveProfile() {
+    setSaving(true);
+    try {
+      const res = await fetch("/api/v1/users/me", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name }),
+      });
+      if (res.ok) toast.success(t_common("saved"));
+      else toast.error(t_common("saveFailed"));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <section className="rounded-xl border p-6 space-y-4">
+        <h2 className="font-semibold text-lg">{t("profile")}</h2>
+        <div className="space-y-2">
+          <Label>{t("displayName")}</Label>
+          <Input value={name} onChange={(e) => setName(e.target.value)} />
+        </div>
+        <div className="space-y-2">
+          <Label>{t("email")}</Label>
+          <Input value={user.email} disabled className="opacity-70" />
+        </div>
+        <Button onClick={saveProfile} disabled={saving || name === user.name}>
+          {saving ? t("saving") : t_common("save")}
+        </Button>
+      </section>
+
+      <section className="rounded-xl border p-6 space-y-4">
+        <h2 className="font-semibold text-lg">{t("language")}</h2>
+        <p className="text-sm text-muted-foreground">{t("languageDescription")}</p>
+        <Select defaultValue={user.locale} onValueChange={(v) => setLocale(v as Locale)}>
+          <SelectTrigger className="w-48">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {SUPPORTED_LOCALES.map((l) => (
+              <SelectItem key={l.code} value={l.code}>
+                {l.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </section>
+    </div>
+  );
+}