feat: let users change their auto-generated username in Settings

Usernames are auto-assigned at signup (shipped earlier this session)
but there was still no way to change one. Adds a Username field to
Settings, validated client- and server-side against the same
3-20-char lowercase/digits/underscore pattern used for generation,
with a 409 on collision (excluding the user's own current username).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

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

@@ -12,6 +12,8 @@ import { useTranslations } from "next-intl";
 import { useLocale, SUPPORTED_LOCALES, type Locale } from "@/lib/i18n/provider";
 import { AvatarUploader } from "./avatar-uploader";
 
+const USERNAME_PATTERN = /^[a-z0-9_]{3,20}$/;
+
 type UserProps = {
   name: string;
   email: string;
@@ -21,6 +23,7 @@ type UserProps = {
   privateBio: string | null;
   isPrivate: boolean;
   hasCustomAvatar: boolean;
+  username: string | null;
 };
 
 export function SettingsForm({ user }: { user: UserProps }) {
@@ -37,6 +40,9 @@ export function SettingsForm({ user }: { user: UserProps }) {
   const [savingBio, setSavingBio] = useState(false);
   const [isPrivate, setIsPrivate] = useState(user.isPrivate);
   const [savingPrivacy, setSavingPrivacy] = useState(false);
+  const [username, setUsername] = useState(user.username ?? "");
+  const [savingUsername, setSavingUsername] = useState(false);
+  const [usernameError, setUsernameError] = useState<string | null>(null);
 
   async function saveProfile() {
     setSaving(true);
@@ -73,6 +79,29 @@ export function SettingsForm({ user }: { user: UserProps }) {
 
   const bioUnchanged = bio === (user.bio ?? "") && privateBio === (user.privateBio ?? "");
 
+  async function saveUsername() {
+    setUsernameError(null);
+    if (!USERNAME_PATTERN.test(username)) {
+      setUsernameError(t("usernameInvalid"));
+      return;
+    }
+    setSavingUsername(true);
+    try {
+      const res = await fetch("/api/v1/users/me", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username }),
+      });
+      if (res.ok) toast.success(t_common("saved"));
+      else if (res.status === 409) setUsernameError(t("usernameTaken"));
+      else toast.error(t_common("saveFailed"));
+    } catch {
+      toast.error(t_common("saveFailed"));
+    } finally {
+      setSavingUsername(false);
+    }
+  }
+
   async function savePrivacy(checked: boolean) {
     setSavingPrivacy(true);
     const previous = isPrivate;
@@ -122,6 +151,26 @@ 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("username")}</h2>
+        <p className="text-xs text-muted-foreground">{t("usernameDescription")}</p>
+        <div className="space-y-2">
+          <div className="flex items-center gap-1">
+            <span className="text-sm text-muted-foreground">@</span>
+            <Input
+              value={username}
+              onChange={(e) => { setUsername(e.target.value.toLowerCase()); setUsernameError(null); }}
+              maxLength={20}
+              className="max-w-xs"
+            />
+          </div>
+          {usernameError && <p className="text-xs text-destructive">{usernameError}</p>}
+        </div>
+        <Button onClick={saveUsername} disabled={savingUsername || username === (user.username ?? "")}>
+          {savingUsername ? t("saving") : t_common("save")}
+        </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">