Merge remote-tracking branch 'upstream/main' into merge-gramsrv-9106877

cmd/telesrv-admin/web/src/components/ActionButton.tsx

@@ -3,7 +3,6 @@ import type { ReactNode } from "react";
 import { useMemo, useState } from "react";
 import { createPortal } from "react-dom";
 import { api, errorMessage } from "../api";
-import { useI18n } from "../i18n";
 import type { CommandResult } from "../types";
 import { Alert, JsonBlock } from "./ui";
 
@@ -16,7 +15,9 @@ export function ActionButton({
   icon,
   compact = false,
   tone = "danger",
-  onDone
+  disabled = false,
+  onDone,
+  onError
 }: {
   label: string;
   path: string;
@@ -24,9 +25,16 @@ export function ActionButton({
   icon?: ReactNode;
   compact?: boolean;
   tone?: ActionTone;
+  // disabled keeps a form from opening the confirm flow at all while its own
+  // validation is unhappy, so the operator fixes the field instead of reading a
+  // backend rejection.
+  disabled?: boolean;
   onDone?: () => void;
+  // onError lets a page react to a failure the operator cannot fix by editing the
+  // form — an optimistic-locking 409, say — and replace the raw backend text with
+  // an explanation by returning it.
+  onError?: (error: unknown) => string | undefined;
 }) {
-  const { t } = useI18n();
   const [open, setOpen] = useState(false);
   const [reason, setReason] = useState("");
   const [result, setResult] = useState<CommandResult | null>(null);
@@ -41,7 +49,7 @@ export function ActionButton({
 
   async function run(confirm: boolean) {
     if (!reason.trim()) {
-      setError(t("action.reasonRequired"));
+      setError("Please enter an operation reason");
       return;
     }
     setBusy(true);
@@ -54,7 +62,7 @@ export function ActionButton({
         onDone?.();
       }
     } catch (err) {
-      setError(errorMessage(err));
+      setError(onError?.(err) || errorMessage(err));
     } finally {
       setBusy(false);
     }
@@ -75,6 +83,7 @@ export function ActionButton({
       <button
         className={triggerClass}
         type="button"
+        disabled={disabled}
         onClick={() => {
           reset();
           setOpen(true);
@@ -88,29 +97,29 @@ export function ActionButton({
           <section className="modal command-modal" role="dialog" aria-modal="true" aria-label={label}>
             <div className="modal-head">
               <div>
-                <div className="eyebrow">{t("action.flow")}</div>
+                <div className="eyebrow">{"Action Flow"}</div>
                 <h2>{label}</h2>
               </div>
-              <button className="icon-btn" type="button" onClick={() => setOpen(false)} aria-label={t("action.close")}><X size={15} /></button>
+              <button className="icon-btn" type="button" onClick={() => setOpen(false)} aria-label={"Close"}><X size={15} /></button>
             </div>
             <div className="command-body">
               <div className="command-steps">
                 <div className={`command-step ${reason.trim() ? "done" : "active"}`}>
-                  <span>1</span><strong>{t("action.stepReason")}</strong>
+                  <span>1</span><strong>{"Enter reason"}</strong>
                 </div>
                 <div className={`command-step ${result?.dry_run ? "done" : reason.trim() ? "active" : ""}`}>
-                  <span>2</span><strong>{t("action.stepDryRun")}</strong>
+                  <span>2</span><strong>{"Dry-run check"}</strong>
                 </div>
                 <div className={`command-step ${result && !result.dry_run && !result.error ? "done" : canConfirm ? "active" : ""}`}>
-                  <span>3</span><strong>{t("action.stepConfirm")}</strong>
+                  <span>3</span><strong>{"Confirm execution"}</strong>
                 </div>
               </div>
               <label className="form-field">
-                <span>{t("action.reason")}</span>
-                <textarea value={reason} onChange={(event) => setReason(event.target.value)} rows={3} placeholder={t("action.reasonPlaceholder")} />
+                <span>{"Operation reason"}</span>
+                <textarea value={reason} onChange={(event) => setReason(event.target.value)} rows={3} placeholder={"Describe why this operation is being performed"} />
               </label>
               <div className="command-preview">
-                <div className="preview-head"><FileJson size={14} /> {t("action.requestPreview")}</div>
+                <div className="preview-head"><FileJson size={14} /> {"Request preview"}</div>
                 <JsonBlock value={JSON.stringify(previewPayload, null, 2)} />
               </div>
               {error && <Alert>{error}</Alert>}
@@ -118,25 +127,25 @@ export function ActionButton({
                 <div className="result-box">
                 <div className="result-title">
                     {result.error ? <CircleAlert size={16} /> : <CheckCircle2 size={16} />}
-                  <strong>{result.message || result.error || t("action.result")}</strong>
+                  <strong>{result.message || result.error || "Action result"}</strong>
                 </div>
-                <div className="result-line"><span>{t("action.commandID")}</span><strong>{result.command_id}</strong></div>
-                <div className="result-line"><span>{t("action.status")}</span><strong>{result.status}</strong></div>
-                <div className="result-line"><span>{t("action.dryRun")}</span><strong>{result.dry_run ? t("common.yes") : t("common.no")}</strong></div>
+                <div className="result-line"><span>{"Command ID"}</span><strong>{result.command_id}</strong></div>
+                <div className="result-line"><span>{"Status"}</span><strong>{result.status}</strong></div>
+                <div className="result-line"><span>{"Dry-run"}</span><strong>{result.dry_run ? "Yes" : "No"}</strong></div>
                   <div className="result-message">{result.message || result.error}</div>
                   {result.details && <JsonBlock value={JSON.stringify(result.details, null, 2)} />}
                 </div>
               )}
             </div>
             <div className="modal-actions">
-              <button className="btn" type="button" onClick={() => setOpen(false)}>{t("common.close")}</button>
+              <button className="btn" type="button" onClick={() => setOpen(false)}>{"Close"}</button>
               <button className="btn icon-text" type="button" onClick={() => run(false)} disabled={busy}>
                 {busy ? <Loader2 size={15} className="spin" /> : <Play size={15} />}
-                {result ? t("action.runAgain") : t("action.runDry")}
+                {result ? "Run dry-run again" : "Run dry-run first"}
               </button>
               <button className="btn danger icon-text" type="button" onClick={() => run(true)} disabled={busy || !canConfirm}>
                 <CheckCircle2 size={15} />
-                {t("action.confirm")}
+                {"Confirm execution"}
               </button>
             </div>
           </section>

cmd/telesrv-admin/web/src/components/AuthorizationTable.tsx

@@ -1,13 +1,11 @@
 import { Cable, LogOut, ShieldCheck } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { formatDate } from "../lib/format";
-import { useI18n } from "../i18n";
 import type { AuthorizationRow } from "../types";
 import { ActionButton } from "./ActionButton";
 import { EmptyRow } from "./ui";
 
 export function AuthorizationTable({ rows, userID, onDone }: { rows: AuthorizationRow[]; userID: number; onDone: () => void }) {
-  const { t } = useI18n();
   const [removedHashes, setRemovedHashes] = useState<Set<number>>(() => new Set());
 
   useEffect(() => {
@@ -30,11 +28,11 @@ export function AuthorizationTable({ rows, userID, onDone }: { rows: Authorizati
         <table className="data-table authorization-table">
           <thead>
             <tr>
-              <th>{t("auth.device")}</th>
-              <th>{t("auth.platform")}</th>
-              <th>{t("auth.ip")}</th>
-              <th>{t("auth.lastActive")}</th>
-              <th className="device-actions-head">{t("common.actions")}</th>
+              <th>{"Device"}</th>
+              <th>{"Platform"}</th>
+              <th>{"IP"}</th>
+              <th>{"Last active"}</th>
+              <th className="device-actions-head">{"Actions"}</th>
             </tr>
           </thead>
           <tbody>
@@ -47,7 +45,7 @@ export function AuthorizationTable({ rows, userID, onDone }: { rows: Authorizati
                 <td className="device-actions-cell">
                   <div className="device-actions">
                     <ActionButton
-                      label={t("auth.revokeCurrent")}
+                      label={"Revoke current"}
                       icon={<LogOut size={13} />}
                       compact
                       path="/api/actions/revoke-sessions"
@@ -55,7 +53,7 @@ export function AuthorizationTable({ rows, userID, onDone }: { rows: Authorizati
                       onDone={() => afterRevoke((previous) => new Set([...previous, row.Hash]))}
                     />
                     <ActionButton
-                      label={t("auth.keepCurrent")}
+                      label={"Keep current"}
                       icon={<ShieldCheck size={13} />}
                       compact
                       path="/api/actions/revoke-sessions"
@@ -72,7 +70,7 @@ export function AuthorizationTable({ rows, userID, onDone }: { rows: Authorizati
       </div>
       <div className="danger-zone">
         <ActionButton
-          label={t("auth.revokeAll")}
+          label={"Revoke all devices"}
           icon={<Cable size={15} />}
           path="/api/actions/revoke-sessions"
           payload={() => ({ user_id: userID, revoke_all: true })}

cmd/telesrv-admin/web/src/components/EntityPicker.tsx

@@ -1,9 +1,8 @@
 import { Check, Loader2, Search, X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { api, errorMessage } from "../api";
-import { useI18n } from "../i18n";
 import { channelKind, displayName, displayPhone, displayUsername } from "../lib/format";
-import type { AccountRow, ChannelRow } from "../types";
+import type { AccountRow, BotRow, ChannelRow } from "../types";
 import { Badge } from "./ui";
 
 export function UserPicker({
@@ -15,7 +14,6 @@ export function UserPicker({
   value: AccountRow | null;
   onChange: (row: AccountRow | null) => void;
 }) {
-  const { t } = useI18n();
   const [query, setQuery] = useState("");
   const [rows, setRows] = useState<AccountRow[]>([]);
   const [busy, setBusy] = useState(false);
@@ -48,7 +46,7 @@ export function UserPicker({
         <span>{label}</span>
         {value ? (
           <button className="link-button" type="button" onClick={() => onChange(null)}>
-            <X size={13} /> {t("common.clear")}
+            <X size={13} /> {"Clear"}
           </button>
         ) : null}
       </div>
@@ -73,10 +71,10 @@ export function UserPicker({
               void search();
             }
           }}
-          placeholder={t("picker.userPlaceholder")}
+          placeholder={"Search user_id / phone / username"}
         />
         <button className="btn compact-btn" type="button" onClick={search} disabled={busy}>
-          {busy ? <Loader2 size={14} className="spin" /> : t("common.search")}
+          {busy ? <Loader2 size={14} className="spin" /> : "Search"}
         </button>
       </div>
       {error && <div className="picker-error">{error}</div>}
@@ -91,10 +89,106 @@ export function UserPicker({
             <span className="mono">{row.ID}</span>
             <strong>{displayName(row)}</strong>
             <span>{displayUsername(row.Username) || displayPhone(row.Phone) || "-"}</span>
-            {row.Verified ? <Badge tone="good">{t("picker.verified")}</Badge> : <Badge>{t("picker.regular")}</Badge>}
+            {row.Verified ? <Badge tone="good">{"Verified"}</Badge> : <Badge>{"Regular"}</Badge>}
           </button>
         ))}
-        {rows.length === 0 && !busy ? <div className="picker-empty">{t("common.noResults")}</div> : null}
+        {rows.length === 0 && !busy ? <div className="picker-empty">{"No results"}</div> : null}
+      </div>
+    </div>
+  );
+}
+
+// BotPicker is the same widget over /api/bots. Verifier status is granted to a bot
+// account, and an operator knows the handle rather than the id, so the grant form
+// resolves it here instead of asking for a raw number.
+export function BotPicker({
+  label,
+  value,
+  onChange
+}: {
+  label: string;
+  value: BotRow | null;
+  onChange: (row: BotRow | null) => void;
+}) {
+  const [query, setQuery] = useState("");
+  const [rows, setRows] = useState<BotRow[]>([]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  async function search() {
+    setBusy(true);
+    setError("");
+    const params = new URLSearchParams({ limit: "20" });
+    if (query.trim()) {
+      params.set("q", query.trim().replace(/^@/, ""));
+    }
+    try {
+      const result = await api.bots(params);
+      setRows(result.rows ?? []);
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  useEffect(() => {
+    void search();
+  }, []);
+
+  return (
+    <div className="entity-picker">
+      <div className="picker-head">
+        <span>{label}</span>
+        {value ? (
+          <button className="link-button" type="button" onClick={() => onChange(null)}>
+            <X size={13} /> {"Clear"}
+          </button>
+        ) : null}
+      </div>
+      {value ? (
+        <div className="selected-entity">
+          <Check size={15} />
+          <div>
+            <strong>{value.FirstName || "-"}</strong>
+            <span className="mono">{value.ID}</span>
+          </div>
+          <span>{displayUsername(value.Username) || "-"}</span>
+        </div>
+      ) : null}
+      <div className="picker-search">
+        <Search size={15} />
+        <input
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") {
+              event.preventDefault();
+              void search();
+            }
+          }}
+          placeholder={"Bot username or id"}
+        />
+        <button className="btn compact-btn" type="button" onClick={search} disabled={busy}>
+          {busy ? <Loader2 size={14} className="spin" /> : "Search"}
+        </button>
+      </div>
+      {error && <div className="picker-error">{error}</div>}
+      <div className="picker-results">
+        {rows.map((row) => (
+          <button
+            key={row.ID}
+            className={`picker-row ${value?.ID === row.ID ? "selected" : ""}`}
+            type="button"
+            onClick={() => onChange(row)}
+          >
+            <span className="mono">{row.ID}</span>
+            <strong>{row.FirstName || "-"}</strong>
+            <span>{displayUsername(row.Username) || "-"}</span>
+            {row.System ? <Badge tone="warn">{"System"}</Badge> : <Badge>{"Regular"}</Badge>}
+          </button>
+        ))}
+        {rows.length === 0 && !busy ? <div className="picker-empty">{"No results"}</div> : null}
       </div>
     </div>
   );
@@ -109,7 +203,6 @@ export function ChannelPicker({
   value: ChannelRow | null;
   onChange: (row: ChannelRow | null) => void;
 }) {
-  const { t } = useI18n();
   const [query, setQuery] = useState("");
   const [rows, setRows] = useState<ChannelRow[]>([]);
   const [busy, setBusy] = useState(false);
@@ -142,7 +235,7 @@ export function ChannelPicker({
         <span>{label}</span>
         {value ? (
           <button className="link-button" type="button" onClick={() => onChange(null)}>
-            <X size={13} /> {t("common.clear")}
+            <X size={13} /> {"Clear"}
           </button>
         ) : null}
       </div>
@@ -153,7 +246,7 @@ export function ChannelPicker({
             <strong>{value.Title || "-"}</strong>
             <span className="mono">{value.ID}</span>
           </div>
-          <span>{displayUsername(value.Username) || channelKind(value, t)}</span>
+          <span>{displayUsername(value.Username) || channelKind(value)}</span>
         </div>
       ) : null}
       <div className="picker-search">
@@ -167,10 +260,10 @@ export function ChannelPicker({
               void search();
             }
           }}
-          placeholder={t("picker.channelPlaceholder")}
+          placeholder={"Search channel_id / username / title"}
         />
         <button className="btn compact-btn" type="button" onClick={search} disabled={busy}>
-          {busy ? <Loader2 size={14} className="spin" /> : t("common.search")}
+          {busy ? <Loader2 size={14} className="spin" /> : "Search"}
         </button>
       </div>
       {error && <div className="picker-error">{error}</div>}
@@ -184,11 +277,11 @@ export function ChannelPicker({
           >
             <span className="mono">{row.ID}</span>
             <strong>{row.Title || "-"}</strong>
-            <span>{displayUsername(row.Username) || channelKind(row, t)}</span>
-            {row.Verified ? <Badge tone="good">{t("picker.verified")}</Badge> : <Badge>{channelKind(row, t)}</Badge>}
+            <span>{displayUsername(row.Username) || channelKind(row)}</span>
+            {row.Verified ? <Badge tone="good">{"Verified"}</Badge> : <Badge>{channelKind(row)}</Badge>}
           </button>
         ))}
-        {rows.length === 0 && !busy ? <div className="picker-empty">{t("common.noResults")}</div> : null}
+        {rows.length === 0 && !busy ? <div className="picker-empty">{"No results"}</div> : null}
       </div>
     </div>
   );

cmd/telesrv-admin/web/src/components/Layout.tsx

@@ -1,4 +1,6 @@
 import {
+  AtSign,
+  BadgeCheck,
   Bot,
   ChevronDown,
   Database,
@@ -7,8 +9,11 @@ import {
   MessageSquareText,
   Server,
   Shield,
+  ShieldAlert,
   ShieldCheck,
   Smile,
+  Stamp,
+  Trophy,
   Users,
 	Gift,
 	Sticker,
@@ -16,20 +21,19 @@ import {
 } from "lucide-react";
 import { useEffect, useState, type ReactNode } from "react";
 import { api } from "../api";
-import { useI18n } from "../i18n";
+import { permissionBotVerificationReview, permissionVerificationReview, useCan } from "../permissions";
 import { type Navigate, type RouteState, routeSubtitle, routeTitle } from "../routing";
 import { ThemeSwitch } from "../theme";
 import { AppLink } from "./AppLink";
 
 export function BootScreen() {
-  const { t } = useI18n();
   return (
     <div className="boot-screen">
       <div className="brand compact brand-elevated">
         <span className="brand-mark"><img src="/logo.png" alt="OwpenGram" /></span>
         <span>
           <strong>OwpenGram</strong>
-          <small>{t("app.adminConsole")}</small>
+          <small>{"Admin Console"}</small>
         </span>
       </div>
       <div className="loader-bar" />
@@ -50,7 +54,12 @@ export function Shell({
   onLogout: () => void;
   children: ReactNode;
 }) {
-  const { t } = useI18n();
+  // The verification queue is hidden for a session without verification.review:
+  // the entry would only lead to a 403 (and the route itself is gated as well).
+  const canReviewVerification = useCan(permissionVerificationReview);
+  // Same reasoning for the third-party queue, which has its own right: the two
+  // sections are granted independently, so one entry can be visible without the other.
+  const canReviewBotVerification = useCan(permissionBotVerificationReview);
   const messagesActive = route.path.startsWith("/messages");
   const [messagesOpen, setMessagesOpen] = useState(messagesActive);
 
@@ -72,19 +81,28 @@ export function Shell({
           <span className="brand-mark"><img src="/logo.png" alt="OwpenGram" /></span>
           <span>
             <strong>OwpenGram</strong>
-            <small>{t("app.adminConsole")}</small>
+            <small>{"Admin Console"}</small>
           </span>
         </AppLink>
-        <div className="sidebar-label">{t("layout.navigation")}</div>
-        <nav className="nav-list" aria-label={t("layout.primaryNav")}>
-          <NavLink icon={<LayoutDashboard size={16} />} href="/" route={route} navigate={navigate}>{t("layout.dashboard")}</NavLink>
-          <NavLink icon={<Users size={16} />} href="/accounts" route={route} navigate={navigate}>{t("layout.accounts")}</NavLink>
-          <NavLink icon={<ShieldCheck size={16} />} href="/channels" route={route} navigate={navigate}>{t("layout.channels")}</NavLink>
-          <NavLink icon={<Bot size={16} />} href="/bots" route={route} navigate={navigate}>{t("layout.bots")}</NavLink>
-			<NavLink icon={<Gift size={16} />} href="/gifts" route={route} navigate={navigate}>{t("layout.gifts")}</NavLink>
-			<NavLink icon={<Send size={16} />} href="/give-gifts" route={route} navigate={navigate}>{t("layout.giveGifts")}</NavLink>
-			<NavLink icon={<Sticker size={16} />} href="/stickers" route={route} navigate={navigate}>{t("layout.stickers")}</NavLink>
-			<NavLink icon={<Smile size={16} />} href="/emoji" route={route} navigate={navigate}>{t("layout.emoji")}</NavLink>
+        <div className="sidebar-label">{"Navigation"}</div>
+        <nav className="nav-list" aria-label={"Primary navigation"}>
+          <NavLink icon={<LayoutDashboard size={16} />} href="/" route={route} navigate={navigate}>{"Overview"}</NavLink>
+          <NavLink icon={<Users size={16} />} href="/accounts" route={route} navigate={navigate}>{"Accounts"}</NavLink>
+          <NavLink icon={<ShieldCheck size={16} />} href="/channels" route={route} navigate={navigate}>{"Supergroups / Channels"}</NavLink>
+          <NavLink icon={<Bot size={16} />} href="/bots" route={route} navigate={navigate}>{"Bots"}</NavLink>
+          <NavLink icon={<ShieldAlert size={16} />} href="/moderation" route={route} navigate={navigate}>{"Reports / Moderation"}</NavLink>
+          {canReviewVerification && (
+            <NavLink icon={<BadgeCheck size={16} />} href="/verification" route={route} navigate={navigate}>{"Verification"}</NavLink>
+          )}
+          {canReviewBotVerification && (
+            <NavLink icon={<Stamp size={16} />} href="/bot-verification" route={route} navigate={navigate}>{"Third-party marks"}</NavLink>
+          )}
+          <NavLink icon={<AtSign size={16} />} href="/collectible-usernames" route={route} navigate={navigate}>{"NFT Usernames"}</NavLink>
+          <NavLink icon={<Trophy size={16} />} href="/account-ratings" route={route} navigate={navigate}>{"Account Rating"}</NavLink>
+			<NavLink icon={<Gift size={16} />} href="/gifts" route={route} navigate={navigate}>{"Star Gifts"}</NavLink>
+			<NavLink icon={<Send size={16} />} href="/give-gifts" route={route} navigate={navigate}>{"Give Gifts"}</NavLink>
+			<NavLink icon={<Sticker size={16} />} href="/stickers" route={route} navigate={navigate}>{"Stickers"}</NavLink>
+			<NavLink icon={<Smile size={16} />} href="/emoji" route={route} navigate={navigate}>{"Emoji"}</NavLink>
           <div className={`nav-section ${messagesActive ? "active" : ""} ${messagesOpen ? "open" : ""}`}>
             <button
               className="nav-section-toggle"
@@ -93,7 +111,7 @@ export function Shell({
               onClick={() => setMessagesOpen((open) => !open)}
             >
               <MessageSquareText size={16} />
-              <span>{t("layout.messages")}</span>
+              <span>{"Messages"}</span>
               <ChevronDown className="nav-section-chevron" size={15} />
             </button>
             {messagesOpen && (
@@ -104,7 +122,7 @@ export function Shell({
                   navigate={navigate}
                   activeWhen={(path) => path === "/messages" || path === "/messages/detail" || path.startsWith("/messages/private")}
                 >
-                  {t("layout.privateMessages")}
+                  {"Private"}
                 </NavLink>
                 <NavLink
                   href="/messages/groups"
@@ -112,30 +130,30 @@ export function Shell({
                   navigate={navigate}
                   activeWhen={(path) => path.startsWith("/messages/groups")}
                 >
-                  {t("layout.groupMessages")}
+                  {"Groups"}
                 </NavLink>
               </div>
             )}
           </div>
         </nav>
         <div className="sidebar-status">
-          <div className="sidebar-label">{t("layout.runtime")}</div>
-          <div className="runtime-row"><Server size={14} /><span>{t("layout.adminBackend")}</span><strong>{t("layout.ready")}</strong></div>
-          <div className="runtime-row"><Database size={14} /><span>{t("layout.pgRead")}</span><strong>{t("layout.readOnly")}</strong></div>
-          <div className="runtime-row"><Shield size={14} /><span>{t("layout.writeOps")}</span><strong>{t("layout.dryRun")}</strong></div>
+          <div className="sidebar-label">{"Runtime"}</div>
+          <div className="runtime-row"><Server size={14} /><span>{"Admin backend"}</span><strong>{"Ready"}</strong></div>
+          <div className="runtime-row"><Database size={14} /><span>{"PG read"}</span><strong>{"Read-only"}</strong></div>
+          <div className="runtime-row"><Shield size={14} /><span>{"Write operations"}</span><strong>{"Dry-run"}</strong></div>
         </div>
       </aside>
       <div className="workspace">
         <header className="topbar">
           <div>
-            <div className="eyebrow">{routeSubtitle(route.path, t)}</div>
-            <h1>{routeTitle(route.path, t)}</h1>
+            <div className="eyebrow">{routeSubtitle(route.path)}</div>
+            <h1>{routeTitle(route.path)}</h1>
           </div>
           <div className="topbar-actions">
             <ThemeSwitch />
-            <span className="actor-pill">{t("layout.actor", { actor })}</span>
-            <button className="btn ghost icon-text" type="button" onClick={logout} title={t("layout.logout")}>
-              <LogOut size={16} /> {t("layout.logout")}
+            <span className="actor-pill">{`Actor: ${actor}`}</span>
+            <button className="btn ghost icon-text" type="button" onClick={logout} title={"Log out"}>
+              <LogOut size={16} /> {"Log out"}
             </button>
           </div>
         </header>

cmd/telesrv-admin/web/src/components/attributes.tsx

@@ -1,7 +1,6 @@
 import { AtSign, LifeBuoy, Palette, Settings2, Smile } from "lucide-react";
 import { useEffect, useState } from "react";
 import { ActionButton } from "./ActionButton";
-import { useI18n } from "../i18n";
 import { toInt } from "../lib/format";
 import type { ChannelRow } from "../types";
 
@@ -9,10 +8,9 @@ type IDKey = "user_id" | "channel_id";
 
 // SupportAction toggles the official-support flag (users/bots only).
 export function SupportAction({ id, support, onDone }: { id: number; support: boolean; onDone: () => void }) {
-  const { t } = useI18n();
   return (
     <ActionButton
-      label={support ? t("attr.clearSupport") : t("attr.setSupport")}
+      label={support ? "Clear support" : "Mark as support"}
       icon={<LifeBuoy size={15} />}
       tone="neutral"
       path="/api/actions/set-support"
@@ -30,16 +28,15 @@ export function UsernameAction({ idKey, id, path, current, onDone }: {
   current: string;
   onDone: () => void;
 }) {
-  const { t } = useI18n();
   const [username, setUsername] = useState(current.replace(/^@/, ""));
   return (
     <div className="attr-block">
       <label className="duration-field">
-        <span>{t("attr.username")}</span>
+        <span>{"Username"}</span>
         <input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="username" />
       </label>
       <ActionButton
-        label={t("attr.setUsername")}
+        label={"Set username"}
         icon={<AtSign size={15} />}
         tone="neutral"
         path={path}
@@ -57,25 +54,24 @@ export function ColorAction({ idKey, id, path, onDone }: {
   path: string;
   onDone: () => void;
 }) {
-  const { t } = useI18n();
   const [forProfile, setForProfile] = useState(false);
   const [hasColor, setHasColor] = useState(true);
   const [color, setColor] = useState("0");
   const [bgEmoji, setBgEmoji] = useState("");
   return (
     <div className="attr-block">
-      <label className="checkline"><input type="checkbox" checked={forProfile} onChange={(e) => setForProfile(e.target.checked)} /> {t("attr.forProfile")}</label>
-      <label className="checkline"><input type="checkbox" checked={hasColor} onChange={(e) => setHasColor(e.target.checked)} /> {t("attr.hasColor")}</label>
+      <label className="checkline"><input type="checkbox" checked={forProfile} onChange={(e) => setForProfile(e.target.checked)} /> {"Profile color"}</label>
+      <label className="checkline"><input type="checkbox" checked={hasColor} onChange={(e) => setHasColor(e.target.checked)} /> {"Enable color"}</label>
       <label className="duration-field">
-        <span>{t("attr.colorIndex")}</span>
+        <span>{"Color index"}</span>
         <input type="number" min="0" max="20" value={color} onChange={(e) => setColor(e.target.value)} />
       </label>
       <label className="duration-field">
-        <span>{t("attr.bgEmojiID")}</span>
+        <span>{"Background emoji ID"}</span>
         <input value={bgEmoji} onChange={(e) => setBgEmoji(e.target.value)} placeholder="0" />
       </label>
       <ActionButton
-        label={t("attr.setColor")}
+        label={"Set color"}
         icon={<Palette size={15} />}
         tone="neutral"
         path={path}
@@ -99,21 +95,20 @@ export function EmojiStatusAction({ idKey, id, path, onDone }: {
   path: string;
   onDone: () => void;
 }) {
-  const { t } = useI18n();
   const [documentID, setDocumentID] = useState("");
   const [until, setUntil] = useState("0");
   return (
     <div className="attr-block">
       <label className="duration-field">
-        <span>{t("attr.emojiDocID")}</span>
+        <span>{"Emoji document ID"}</span>
         <input value={documentID} onChange={(e) => setDocumentID(e.target.value)} placeholder="0 = clear" />
       </label>
       <label className="duration-field">
-        <span>{t("attr.emojiUntil")}</span>
+        <span>{"Until (unix, 0 = permanent)"}</span>
         <input type="number" min="0" value={until} onChange={(e) => setUntil(e.target.value)} />
       </label>
       <ActionButton
-        label={t("attr.setEmojiStatus")}
+        label={"Set emoji status"}
         icon={<Smile size={15} />}
         tone="neutral"
         path={path}
@@ -126,7 +121,6 @@ export function EmojiStatusAction({ idKey, id, path, onDone }: {
 
 // ChannelSettingsAction force-applies moderation settings to a channel/supergroup.
 export function ChannelSettingsAction({ channel, onDone }: { channel: ChannelRow; onDone: () => void }) {
-  const { t } = useI18n();
   const [gigagroup, setGigagroup] = useState(channel.Gigagroup);
   const [antispam, setAntispam] = useState(channel.AntiSpam);
   const [hidden, setHidden] = useState(channel.ParticipantsHidden);
@@ -163,18 +157,18 @@ export function ChannelSettingsAction({ channel, onDone }: { channel: ChannelRow
   }
   return (
     <div className="attr-block">
-      <label className="checkline"><input type="checkbox" checked={gigagroup} onChange={(e) => setGigagroup(e.target.checked)} /> {t("attr.gigagroup")}</label>
-      <label className="checkline"><input type="checkbox" checked={antispam} onChange={(e) => setAntispam(e.target.checked)} /> {t("attr.antispam")}</label>
-      <label className="checkline"><input type="checkbox" checked={hidden} onChange={(e) => setHidden(e.target.checked)} /> {t("attr.participantsHidden")}</label>
-      <label className="checkline"><input type="checkbox" checked={noforwards} onChange={(e) => setNoforwards(e.target.checked)} /> {t("attr.noforwards")}</label>
-      <label className="checkline"><input type="checkbox" checked={joinToSend} onChange={(e) => setJoinToSend(e.target.checked)} /> {t("attr.joinToSend")}</label>
-      <label className="checkline"><input type="checkbox" checked={joinRequest} onChange={(e) => setJoinRequest(e.target.checked)} /> {t("attr.joinRequest")}</label>
+      <label className="checkline"><input type="checkbox" checked={gigagroup} onChange={(e) => setGigagroup(e.target.checked)} /> {"Gigagroup"}</label>
+      <label className="checkline"><input type="checkbox" checked={antispam} onChange={(e) => setAntispam(e.target.checked)} /> {"Aggressive anti-spam"}</label>
+      <label className="checkline"><input type="checkbox" checked={hidden} onChange={(e) => setHidden(e.target.checked)} /> {"Hide members"}</label>
+      <label className="checkline"><input type="checkbox" checked={noforwards} onChange={(e) => setNoforwards(e.target.checked)} /> {"Restrict forwarding"}</label>
+      <label className="checkline"><input type="checkbox" checked={joinToSend} onChange={(e) => setJoinToSend(e.target.checked)} /> {"Join to send messages"}</label>
+      <label className="checkline"><input type="checkbox" checked={joinRequest} onChange={(e) => setJoinRequest(e.target.checked)} /> {"Join by request"}</label>
       <label className="duration-field">
-        <span>{t("attr.slowmode")}</span>
+        <span>{"Slowmode (seconds)"}</span>
         <input type="number" min="0" max="86400" value={slowmode} onChange={(e) => setSlowmode(e.target.value)} />
       </label>
       <ActionButton
-        label={t("attr.applySettings")}
+        label={"Apply settings"}
         icon={<Settings2 size={15} />}
         tone="warn"
         path="/api/actions/set-channel-settings"

cmd/telesrv-admin/web/src/components/flags.tsx

@@ -1,18 +1,16 @@
 import { ShieldAlert, ShieldX } from "lucide-react";
-import { useI18n } from "../i18n";
 import { ActionButton } from "./ActionButton";
 import { Badge } from "./ui";
 
 // ScamFakeBadges renders the SCAM/FAKE moderation labels when set.
 export function ScamFakeBadges({ scam, fake }: { scam: boolean; fake: boolean }) {
-  const { t } = useI18n();
   if (!scam && !fake) {
     return null;
   }
   return (
     <>
-      {scam && <Badge tone="danger">{t("flags.scam")}</Badge>}
-      {fake && <Badge tone="danger">{t("flags.fake")}</Badge>}
+      {scam && <Badge tone="danger">{"SCAM"}</Badge>}
+      {fake && <Badge tone="danger">{"FAKE"}</Badge>}
     </>
   );
 }
@@ -35,11 +33,10 @@ export function ScamFakeActions({
   fake: boolean;
   onDone: () => void;
 }) {
-  const { t } = useI18n();
   return (
     <div className="action-stack">
       <ActionButton
-        label={scam ? t("flags.clearScam") : t("flags.setScam")}
+        label={scam ? "Clear SCAM" : "Mark as SCAM"}
         icon={<ShieldAlert size={15} />}
         tone="danger"
         path={path}
@@ -47,7 +44,7 @@ export function ScamFakeActions({
         onDone={onDone}
       />
       <ActionButton
-        label={fake ? t("flags.clearFake") : t("flags.setFake")}
+        label={fake ? "Clear FAKE" : "Mark as FAKE"}
         icon={<ShieldX size={15} />}
         tone="danger"
         path={path}

cmd/telesrv-admin/web/src/components/ui.tsx

@@ -1,8 +1,7 @@
 import { CircleAlert } from "lucide-react";
 import type { ReactNode } from "react";
-import { useI18n } from "../i18n";
-import { formatDate } from "../lib/format";
-import type { AuditLogRow } from "../types";
+import { displayUsername, formatDate } from "../lib/format";
+import type { AccountUsername, AuditLogRow } from "../types";
 
 type Tone = "neutral" | "good" | "danger" | "warn";
 
@@ -92,11 +91,10 @@ export function Summary({ label, value, mono = false }: { label: string; value:
 }
 
 export function AuditTable({ rows }: { rows: AuditLogRow[] }) {
-  const { t } = useI18n();
   return (
     <div className="table-wrap">
       <table className="data-table">
-        <thead><tr><th>{t("audit.id")}</th><th>{t("audit.commandID")}</th><th>{t("audit.action")}</th><th>{t("audit.actor")}</th><th>{t("audit.status")}</th><th>{t("audit.dryRun")}</th><th>{t("audit.reason")}</th><th>{t("audit.time")}</th></tr></thead>
+        <thead><tr><th>{"ID"}</th><th>{"Command ID"}</th><th>{"Action"}</th><th>{"Actor"}</th><th>{"Status"}</th><th>{"Dry-run"}</th><th>{"Reason"}</th><th>{"Time"}</th></tr></thead>
         <tbody>
           {rows.map((row) => (
             <tr key={row.ID}>
@@ -105,7 +103,7 @@ export function AuditTable({ rows }: { rows: AuditLogRow[] }) {
               <td>{row.Action}</td>
               <td>{row.Actor}</td>
               <td>{row.Status}</td>
-              <td>{row.DryRun ? t("common.yes") : t("common.no")}</td>
+              <td>{row.DryRun ? "Yes" : "No"}</td>
               <td className="truncate">{row.Reason}</td>
               <td>{formatDate(row.CreatedAt)}</td>
             </tr>
@@ -118,8 +116,7 @@ export function AuditTable({ rows }: { rows: AuditLogRow[] }) {
 }
 
 export function EmptyRow({ colSpan }: { colSpan: number }) {
-  const { t } = useI18n();
-  return <tr><td colSpan={colSpan} className="empty-cell">{t("common.noResults")}</td></tr>;
+  return <tr><td colSpan={colSpan} className="empty-cell">{"No results"}</td></tr>;
 }
 
 export function LoadingSurface({ label }: { label: string }) {
@@ -129,3 +126,32 @@ export function LoadingSurface({ label }: { label: string }) {
 export function JsonBlock({ value }: { value: string }) {
   return <pre className="json-block">{value || "{}"}</pre>;
 }
+
+// UsernameCell renders a peer's editable username with its collectible usernames
+// branching off underneath, in the order clients project them.
+//
+// An inactive collectible is shown rather than hidden: the peer still owns it, it
+// just does not resolve publicly, and an operator looking for "where did that name
+// go" needs to see it. It is marked instead of dropped.
+// Pass an empty username to render the branch on its own, which is what the
+// detail header does: it already shows the editable slot on the line above.
+export function UsernameCell({ username, collectibles }: { username?: string; collectibles?: AccountUsername[] | null }) {
+  const main = displayUsername(username ?? "");
+  const branch = collectibles ?? [];
+  if (branch.length === 0) {
+    return <>{main || "-"}</>;
+  }
+  return (
+    <>
+      {main}
+      <ul className="username-branch">
+        {branch.map((item) => (
+          <li key={item.Username} className={item.Active ? "" : "inactive"}>
+            <span>{displayUsername(item.Username)}</span>
+            {!item.Active && <em>{"inactive"}</em>}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}