feat(i18n): localize the remaining Settings → System routes (#2202)

Co-authored-by: Kandev Agent <agent@kandev.dev>
Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

apps/web/components/settings/system/users-table.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { useCallback, useEffect, useState } from "react";
+import type { TFunction } from "i18next";
+import { useTranslation } from "react-i18next";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -25,7 +27,27 @@ import { InviteDialog } from "./invite-dialog";
 
 type PendingAction = { user: AuthUser; next: { role?: string; status?: string }; label: string };
 
-function useUsersList() {
+/**
+ * `role` and `status` are wire values sent straight back to the API, so the
+ * `next` payload above always carries the raw token. Only these badge/button
+ * labels are copy, and an unrecognized value from a newer backend echoes the
+ * token rather than rendering blank.
+ */
+const ROLE_LABEL_KEYS: Record<string, string> = {
+  admin: "system:usersRoleAdmin",
+  member: "system:usersRoleMember",
+};
+
+const STATUS_LABEL_KEYS: Record<string, string> = {
+  active: "system:usersStatusActive",
+  disabled: "system:usersStatusDisabled",
+};
+
+function roleLabel(role: string, t: TFunction): string {
+  return ROLE_LABEL_KEYS[role] ? t(ROLE_LABEL_KEYS[role]) : role;
+}
+
+function useUsersList(t: TFunction) {
   const [users, setUsers] = useState<AuthUser[]>([]);
   const [loaded, setLoaded] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -39,11 +61,11 @@ function useUsersList() {
       setUsers(res.users);
       setLoaded(true);
     } catch (err) {
-      setError(err instanceof ApiError ? err.message : "Failed to load users.");
+      setError(err instanceof ApiError ? err.message : t("system:usersLoadFailed"));
     } finally {
       setIsLoading(false);
     }
-  }, []);
+  }, [t]);
 
   useEffect(() => {
     void reload();
@@ -53,9 +75,10 @@ function useUsersList() {
 }
 
 function StatusBadge({ status }: { status: string }) {
+  const { t } = useTranslation();
   return (
     <Badge variant={status === "active" ? "default" : "secondary"} className="text-[10px]">
-      {status}
+      {STATUS_LABEL_KEYS[status] ? t(STATUS_LABEL_KEYS[status]) : status}
     </Badge>
   );
 }
@@ -69,16 +92,18 @@ function UserRow({
   onToggleRole: (user: AuthUser) => void;
   onToggleStatus: (user: AuthUser) => void;
 }) {
+  const { t } = useTranslation();
   const isDisabled = user.status === "disabled";
   return (
     <TableRow data-testid="users-table-row" data-user-id={user.id}>
+      {/* Email and display name are user data. */}
       <TableCell className="text-xs" data-testid="users-table-email">
         {user.email}
       </TableCell>
       <TableCell className="text-xs">{user.display_name}</TableCell>
       <TableCell>
         <Badge variant={user.role === "admin" ? "default" : "secondary"} className="text-[10px]">
-          {user.role}
+          {roleLabel(user.role, t)}
         </Badge>
       </TableCell>
       <TableCell>
@@ -93,7 +118,10 @@ function UserRow({
             onClick={() => onToggleRole(user)}
             data-testid="users-table-toggle-role"
           >
-            Make {user.role === "admin" ? "member" : "admin"}
+            {/* Two whole-word variants get their own keys rather than
+                interpolating a role name into "Make {x}", which does not
+                survive languages that inflect the object. */}
+            {user.role === "admin" ? t("system:usersMakeMember") : t("system:usersMakeAdmin")}
           </Button>
           <Button
             size="sm"
@@ -102,7 +130,7 @@ function UserRow({
             onClick={() => onToggleStatus(user)}
             data-testid="users-table-toggle-status"
           >
-            {isDisabled ? "Enable" : "Disable"}
+            {isDisabled ? t("system:usersEnable") : t("system:usersDisable")}
           </Button>
         </div>
       </TableCell>
@@ -119,19 +147,20 @@ function UsersConfirmDialog({
   onCancel: () => void;
   onConfirm: () => void;
 }) {
+  const { t } = useTranslation();
   return (
     <AlertDialog open={pending !== null} onOpenChange={(open) => !open && onCancel()}>
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>{pending?.label}</AlertDialogTitle>
           <AlertDialogDescription>
-            {pending?.user.email} — this takes effect immediately.
+            {t("system:usersTakesEffectImmediately", { email: pending?.user.email ?? "" })}
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel className="cursor-pointer">Cancel</AlertDialogCancel>
+          <AlertDialogCancel className="cursor-pointer">{t("common:cancel")}</AlertDialogCancel>
           <AlertDialogAction onClick={onConfirm} className="cursor-pointer">
-            Confirm
+            {t("system:usersConfirm")}
           </AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
@@ -139,19 +168,28 @@ function UsersConfirmDialog({
   );
 }
 
-function roleTogglePending(u: AuthUser): PendingAction {
+/**
+ * These two build the confirmation sentence outside JSX, which is why
+ * `mode: "jsx-only"` never reported them. The email is interpolated as a value
+ * and the target role travels as its own translated label.
+ */
+function roleTogglePending(u: AuthUser, t: TFunction): PendingAction {
   const next = u.role === "admin" ? "member" : "admin";
-  return { user: u, next: { role: next }, label: `Change ${u.email} to ${next}?` };
+  return {
+    user: u,
+    next: { role: next },
+    label: t("system:usersConfirmRoleChange", { email: u.email, role: roleLabel(next, t) }),
+  };
 }
 
-function statusTogglePending(u: AuthUser): PendingAction {
+function statusTogglePending(u: AuthUser, t: TFunction): PendingAction {
   const disabling = u.status !== "disabled";
   return {
     user: u,
     next: { status: disabling ? "disabled" : "active" },
     label: disabling
-      ? `Disable ${u.email}? They will be signed out everywhere.`
-      : `Re-enable ${u.email}?`,
+      ? t("system:usersConfirmDisable", { email: u.email })
+      : t("system:usersConfirmEnable", { email: u.email }),
   };
 }
 
@@ -164,15 +202,16 @@ function UsersTableList({
   onToggleRole: (u: AuthUser) => void;
   onToggleStatus: (u: AuthUser) => void;
 }) {
+  const { t } = useTranslation();
   return (
     <Table data-testid="users-table">
       <TableHeader>
         <TableRow>
-          <TableHead>Email</TableHead>
-          <TableHead>Name</TableHead>
-          <TableHead>Role</TableHead>
-          <TableHead>Status</TableHead>
-          <TableHead className="text-right">Actions</TableHead>
+          <TableHead>{t("system:usersColumnEmail")}</TableHead>
+          <TableHead>{t("system:usersColumnName")}</TableHead>
+          <TableHead>{t("system:usersColumnRole")}</TableHead>
+          <TableHead>{t("system:usersColumnStatus")}</TableHead>
+          <TableHead className="text-right">{t("system:usersColumnActions")}</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
@@ -190,7 +229,8 @@ function UsersTableList({
 }
 
 export function UsersTable() {
-  const { users, loaded, isLoading, error, reload } = useUsersList();
+  const { t } = useTranslation();
+  const { users, loaded, isLoading, error, reload } = useUsersList(t);
   const [createOpen, setCreateOpen] = useState(false);
   const [inviteOpen, setInviteOpen] = useState(false);
   const [pending, setPending] = useState<PendingAction | null>(null);
@@ -204,11 +244,8 @@ export function UsersTable() {
     } catch (err) {
       toast({
         variant: "error",
-        title: "Could not update user",
-        description:
-          err instanceof ApiError
-            ? err.message
-            : "This deployment must keep at least one active admin.",
+        title: t("system:usersUpdateFailed"),
+        description: err instanceof ApiError ? err.message : t("system:usersLastAdminGuard"),
       });
     } finally {
       setPending(null);
@@ -219,7 +256,7 @@ export function UsersTable() {
     <Card data-testid="users-table-card">
       <CardHeader className="flex flex-row items-center justify-between gap-2 space-y-0">
         <CardTitle className="text-base flex items-center gap-2">
-          <IconUsers className="h-4 w-4" /> Users
+          <IconUsers className="h-4 w-4" /> {t("system:usersTitle")}
         </CardTitle>
         <div className="flex gap-2">
           <Button
@@ -229,7 +266,7 @@ export function UsersTable() {
             onClick={() => setInviteOpen(true)}
             data-testid="users-table-invite"
           >
-            <IconMailForward className="h-3.5 w-3.5" /> Invite link
+            <IconMailForward className="h-3.5 w-3.5" /> {t("system:usersInviteLink")}
           </Button>
           <Button
             size="sm"
@@ -237,7 +274,7 @@ export function UsersTable() {
             onClick={() => setCreateOpen(true)}
             data-testid="users-table-create"
           >
-            <IconUserPlus className="h-3.5 w-3.5" /> Add user
+            <IconUserPlus className="h-3.5 w-3.5" /> {t("system:usersAddUser")}
           </Button>
         </div>
       </CardHeader>
@@ -249,19 +286,19 @@ export function UsersTable() {
         )}
         {!loaded && isLoading && (
           <div className="flex items-center gap-2 text-sm text-muted-foreground">
-            <Spinner className="size-4" /> Loading users...
+            <Spinner className="size-4" /> {t("system:usersLoading")}
           </div>
         )}
         {loaded && users.length > 0 && (
           <UsersTableList
             users={users}
-            onToggleRole={(u) => setPending(roleTogglePending(u))}
-            onToggleStatus={(u) => setPending(statusTogglePending(u))}
+            onToggleRole={(u) => setPending(roleTogglePending(u, t))}
+            onToggleStatus={(u) => setPending(statusTogglePending(u, t))}
           />
         )}
         {loaded && users.length === 0 && !error && (
           <p className="text-sm text-muted-foreground" data-testid="users-table-empty">
-            No users yet.
+            {t("system:usersEmpty")}
           </p>
         )}
       </CardContent>