Update features and dependencies

apps/web/components/settings/settings-form.tsx

@@ -5,6 +5,7 @@ import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
 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";
@@ -14,6 +15,8 @@ type UserProps = {
   email: string;
   image: string | null;
   locale: string;
+  bio: string | null;
+  privateBio: string | null;
 };
 
 export function SettingsForm({ user }: { user: UserProps }) {
@@ -22,7 +25,10 @@ export function SettingsForm({ user }: { user: UserProps }) {
   const { setLocale } = useLocale();
 
   const [name, setName] = useState(user.name);
+  const [bio, setBio] = useState(user.bio ?? "");
+  const [privateBio, setPrivateBio] = useState(user.privateBio ?? "");
   const [saving, setSaving] = useState(false);
+  const [savingBio, setSavingBio] = useState(false);
 
   async function saveProfile() {
     setSaving(true);
@@ -39,6 +45,26 @@ export function SettingsForm({ user }: { user: UserProps }) {
     }
   }
 
+  async function saveBios() {
+    setSavingBio(true);
+    try {
+      const res = await fetch("/api/v1/users/me", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          bio: bio.trim() || null,
+          privateBio: privateBio.trim() || null,
+        }),
+      });
+      if (res.ok) toast.success(t_common("saved"));
+      else toast.error(t_common("saveFailed"));
+    } finally {
+      setSavingBio(false);
+    }
+  }
+
+  const bioUnchanged = bio === (user.bio ?? "") && privateBio === (user.privateBio ?? "");
+
   return (
     <div className="space-y-6">
       <section className="rounded-xl border p-6 space-y-4">
@@ -56,6 +82,39 @@ export function SettingsForm({ user }: { user: UserProps }) {
         </Button>
       </section>
 
+      <section className="rounded-xl border p-6 space-y-4">
+        <h2 className="font-semibold text-lg">{t("bio")}</h2>
+        <div className="space-y-2">
+          <Label>{t("publicBio")}</Label>
+          <p className="text-xs text-muted-foreground">{t("publicBioDescription")}</p>
+          <Textarea
+            value={bio}
+            onChange={(e) => setBio(e.target.value)}
+            placeholder={t("publicBioPlaceholder")}
+            rows={3}
+            maxLength={500}
+            className="resize-none"
+          />
+          <p className="text-xs text-muted-foreground text-right">{bio.length}/500</p>
+        </div>
+        <div className="space-y-2">
+          <Label>{t("privateBio")}</Label>
+          <p className="text-xs text-muted-foreground">{t("privateBioDescription")}</p>
+          <Textarea
+            value={privateBio}
+            onChange={(e) => setPrivateBio(e.target.value)}
+            placeholder={t("privateBioPlaceholder")}
+            rows={5}
+            maxLength={2000}
+            className="resize-none"
+          />
+          <p className="text-xs text-muted-foreground text-right">{privateBio.length}/2000</p>
+        </div>
+        <Button onClick={saveBios} disabled={savingBio || bioUnchanged}>
+          {savingBio ? 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>