переименовывание аккаунтов админом

frontend/src/pages/admin/AdminAccountsPage.tsx

@@ -1,3 +1,7 @@
+import { Pencil } from "lucide-react";
+import { useState } from "react";
+
+import { ApiError } from "../../api/client";
 import { Spinner } from "../../components/Spinner";
 import { useToast } from "../../context/ToastContext";
 import { useAdminUpdateUser, useAdminUsers } from "../../hooks/admin";
@@ -9,41 +13,89 @@ export function AdminAccountsPage() {
   const { data: users, isLoading } = useAdminUsers();
   const update = useAdminUpdateUser();
   const toast = useToast();
+  const [editId, setEditId] = useState<number | null>(null);
+  const [editName, setEditName] = useState("");
 
   if (isLoading) return <Spinner />;
 
+  const startEdit = (id: number, nickname: string) => {
+    setEditId(id);
+    setEditName(nickname);
+  };
+
+  const saveName = async () => {
+    const name = editName.trim();
+    if (editId == null || !name) return;
+    try {
+      await update.mutateAsync({ userId: editId, nickname: name });
+      toast.show("Имя обновлено");
+      setEditId(null);
+    } catch (e) {
+      toast.show(e instanceof ApiError ? e.message : "Не удалось переименовать");
+    }
+  };
+
+  const toggleActive = async (id: number, isActive: boolean) => {
+    await update.mutateAsync({ userId: id, is_active: !isActive }).catch(() => {});
+    toast.show("Сохранено");
+  };
+
   return (
     <div>
       <h3>Аккаунты</h3>
       <div className="stack">
         {(users ?? []).map((u) => (
           <div key={u.id} className="card" style={{ margin: 0 }}>
-            <div className="row-between">
-              <div>
-                <b>{u.nickname}</b> {u.role === "admin" && <span className="badge">admin</span>}
-                <div className="muted small">
-                  #{u.id} · {u.auth_provider} · {u.is_active ? "активен" : "отключён"}
-                </div>
+            {editId === u.id ? (
+              // Режим переименования.
+              <div className="row">
+                <input
+                  value={editName}
+                  autoFocus
+                  onChange={(e) => setEditName(e.target.value)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter") saveName();
+                    if (e.key === "Escape") setEditId(null);
+                  }}
+                />
+                <button
+                  className="btn btn-primary small"
+                  disabled={update.isPending || !editName.trim() || editName.trim() === u.nickname}
+                  onClick={saveName}
+                >
+                  ОК
+                </button>
+                <button className="btn btn-ghost small" onClick={() => setEditId(null)}>
+                  Отмена
+                </button>
               </div>
-              {u.role !== "admin" && (
-                <div className="row">
-                  {import.meta.env.DEV && (
-                    <DevDeleteAccountButton userId={u.id} nickname={u.nickname} />
-                  )}
-                  <button
-                    className="btn small"
-                    onClick={async () => {
-                      await update
-                        .mutateAsync({ userId: u.id, is_active: !u.is_active })
-                        .catch(() => {});
-                      toast.show("Сохранено");
-                    }}
-                  >
-                    {u.is_active ? "Отключить" : "Включить"}
-                  </button>
+            ) : (
+              <div className="row-between">
+                <div>
+                  <b>{u.nickname}</b> {u.role === "admin" && <span className="badge">admin</span>}
+                  <div className="muted small">
+                    #{u.id} · {u.auth_provider} · {u.is_active ? "активен" : "отключён"}
+                  </div>
                 </div>
-              )}
-            </div>
+                {u.role !== "admin" && (
+                  <div className="row" style={{ gap: 4 }}>
+                    <button
+                      className="btn btn-ghost small"
+                      title="Переименовать"
+                      onClick={() => startEdit(u.id, u.nickname)}
+                    >
+                      <Pencil size={16} />
+                    </button>
+                    {import.meta.env.DEV && (
+                      <DevDeleteAccountButton userId={u.id} nickname={u.nickname} />
+                    )}
+                    <button className="btn small" onClick={() => toggleActive(u.id, u.is_active)}>
+                      {u.is_active ? "Отключить" : "Включить"}
+                    </button>
+                  </div>
+                )}
+              </div>
+            )}
           </div>
         ))}
       </div>