v4: users can't rename themselves, /settings lays out again, and its selectors fit a phone — PATCH /api/me refuses a username with a 400 and changes nothing else in that request; a name changes only through PATCH /api/users/:key/username, which needs user:manage, from /@name/manage. The old name still stays an alias for good. renameUser lost its 30-day limit and its exempt flag, and RENAME_LIMITS holds the slug limit alone. /settings shows the username as plain text, and the rename hint left the catalogs. The settings grid sized its control column to its widest content, the rename hint, which stretched every control under it; that column now takes the remaining width and each control keeps its own size. A segmented control wraps instead of overflowing; in a settings row on a phone it takes the full width, and one of more than 4 options (the styles) lays out in two even rows. .btn-border turned red on hover, so Settings, Manage, Retry and Back looked like Log out; it is now neutral (Smooth's accent is red too), and only Log out takes the new btn-border--danger, muted until hovered red. A <button> and a <Link> .btn-border are now the same height. API.md and the module docs say who renames; the backend tests rename through the moderator route and check a self-rename is refused, and the malformed-name check moved to the manage tab's test. 254 backend and 667 frontend tests pass, and tsc, deno check and doc:lint are clean; Smooth, Brutalist, GeoCities and Kanagawa were checked in screenshots at desktop and phone widths.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/pages/Settings.tsx

@@ -1,6 +1,6 @@
 /**
  * Renders the signed-in user's settings page, `/settings`, where they change
- * their name, their password, their account's settings and this browser's.
+ * their password, their account's settings and this browser's.
  *
  * @module
  */
@@ -13,9 +13,6 @@ import { Trans } from "@lingui/react/macro";
 import { Trans as Message } from "@lingui/react";
 import type { ColorScheme, StyleName } from "../../shared/theme.ts";
 import type { FeedTab } from "../../shared/paths.ts";
-import type { Wire } from "../../shared/api.ts";
-import type { SelfUser } from "../../shared/user.ts";
-import { API_URL } from "../config/api.ts";
 import { useTheme } from "../hooks/theme/useTheme.ts";
 import { useDefaultFeedTab } from "../hooks/feed/useDefaultFeedTab.ts";
 import { useSoundsEnabled } from "../hooks/shared/useSoundsEnabled.ts";
@@ -24,8 +21,6 @@ import { useRequiredAuth } from "../hooks/auth/useAuth.ts";
 import { useDocumentTitle } from "../hooks/shared/useDocumentTitle.ts";
 import { EMAIL_ENABLED } from "../config/instance.ts";
 import { previewChime } from "../utils/shared/sound.ts";
-import { expectOk } from "../utils/shared/api.ts";
-import { deserializeSelfUser } from "../utils/shared/deserialize.ts";
 import { PageShell } from "../components/layout/PageShell.tsx";
 import {
   Segmented,
@@ -34,8 +29,6 @@ import {
 import { ChangePasswordModal } from "../components/profile/ChangePasswordModal.tsx";
 import { ProfileSection } from "../components/profile/ProfileSection.tsx";
 import { SettingRow } from "../components/profile/SettingRow.tsx";
-import { UsernameField } from "../components/profile/UsernameField.tsx";
-import { RENAME_LIMITS } from "../../shared/validation.ts";
 
 // The styles' names are their own, in every language.
 const STYLE_OPTIONS: SegmentedOption<StyleName>[] = [
@@ -66,16 +59,15 @@ const ON_OFF_OPTIONS: SegmentedOption<boolean>[] = [
 ];
 
 /**
- * Renders `/settings`, signed in only: the username, the password change,
- * which opens {@link ChangePasswordModal}, and the settings, each saved as
- * soon as it is clicked. A new name is saved to `PATCH /api/me`, at most once
- * in 30 days but for those with `user:manage`, and the old one keeps leading
- * to the user. The style, color scheme and digests are saved to the account;
- * the default feed tab and sounds, for now, to this browser.
+ * Renders `/settings`, signed in only: the username, which only a moderator
+ * changes (`ProfileManageTab`), the password change, which opens
+ * {@link ChangePasswordModal}, and the settings, each saved as soon as it is
+ * clicked. The style, color scheme and digests are saved to the account; the
+ * default feed tab and sounds, for now, to this browser.
  */
 export function Settings(): React.JSX.Element {
   useDocumentTitle(t`Settings`);
-  const { user, authFetch, updateSession } = useRequiredAuth();
+  const { user } = useRequiredAuth();
   const { style, colorScheme, setStyle, setColorScheme } = useTheme();
   const [defaultFeedTab, setDefaultFeedTab] = useDefaultFeedTab();
   const [soundsEnabled, setSoundsEnabled] = useSoundsEnabled();
@@ -83,20 +75,6 @@ export function Settings(): React.JSX.Element {
   // Until the session has the settings, a click would save over unknown ones.
   const digestsDisabled = !EMAIL_ENABLED || !settings;
   const [changePasswordOpen, setChangePasswordOpen] = useState(false);
-  const renameDays = RENAME_LIMITS.USERNAME.windowMs / 86_400_000;
-
-  async function rename(username: string): Promise<string> {
-    const self = deserializeSelfUser(
-      await expectOk<Wire<SelfUser>>(
-        await authFetch(`${API_URL}/api/me`, {
-          method: "PATCH",
-          body: JSON.stringify({ username }),
-        }),
-      ),
-    );
-    updateSession({ user: self });
-    return self.username;
-  }
 
   return (
     <PageShell>
@@ -108,18 +86,7 @@ export function Settings(): React.JSX.Element {
       <ProfileSection title={<Trans>Account</Trans>}>
         <div className="profile-appearance-grid">
           <SettingRow label={<Trans>Username</Trans>}>
-            <UsernameField
-              key={user.username}
-              username={user.username}
-              save={rename}
-              hint={
-                <Trans>
-                  You can change it once every {renameDays}{" "}
-                  days. Links to your old name keep working, and nobody else can
-                  take it.
-                </Trans>
-              }
-            />
+            <span className="profile-appearance-value">{user.username}</span>
           </SettingRow>
           <SettingRow label={<Trans>Password</Trans>}>
             <button

src/pages/UserPublicProfile.tsx

@@ -123,7 +123,11 @@ export function UserPublicProfile(): React.JSX.Element {
               <Trans>← Back</Trans>
             </button>
             {me && (
-              <button className="btn-border" type="button" onClick={logout}>
+              <button
+                className="btn-border btn-border--danger"
+                type="button"
+                onClick={logout}
+              >
                 <Trans>Log out</Trans>
               </button>
             )}