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

cmd/telesrv-admin/web/src/pages/BotsPage.tsx

@@ -4,13 +4,11 @@ import { api, errorMessage } from "../api";
 import { ActionButton } from "../components/ActionButton";
 import { Alert, Badge, EmptyRow, Metric, PageFrame, QueryPanel } from "../components/ui";
 import { ScamFakeBadges } from "../components/flags";
-import { useI18n } from "../i18n";
 import { displayUsername, formatDate, toInt } from "../lib/format";
 import type { Navigate } from "../routing";
 import type { BotListResponse } from "../types";
 
 export function BotsPage({ navigate }: { navigate: Navigate }) {
-  const { t } = useI18n();
   const [q, setQ] = useState("");
   const [limit, setLimit] = useState("50");
   const [data, setData] = useState<BotListResponse | null>(null);
@@ -52,31 +50,31 @@ export function BotsPage({ navigate }: { navigate: Navigate }) {
 
   return (
     <PageFrame
-      title={t("bots.pageTitle")}
-      eyebrow={data?.listing === false ? t("bots.queryResults") : t("bots.recent")}
+      title={"Bots"}
+      eyebrow={data?.listing === false ? "Search results" : "Recently created bots"}
       actions={
         <button className="btn" type="button" onClick={() => load(false)} disabled={busy}>
-          <RefreshCw size={15} /> {t("common.refresh")}
+          <RefreshCw size={15} /> {"Refresh"}
         </button>
       }
     >
       {error && <Alert>{error}</Alert>}
       <div className="metric-row">
-        <Metric label={t("bots.currentPage")} value={String(rows.length)} />
-        <Metric label={t("common.verified")} value={String(verified)} tone="good" />
-        <Metric label={t("bots.system")} value={String(systemCount)} />
+        <Metric label={"Bots on page"} value={String(rows.length)} />
+        <Metric label={"Verified"} value={String(verified)} tone="good" />
+        <Metric label={"System"} value={String(systemCount)} />
       </div>
 
       <section className="section-block">
         <div className="section-head">
           <div>
-            <h2>{t("bots.createTitle")}</h2>
-            <p>{t("bots.createHint")}</p>
+            <h2>{"Create a system bot"}</h2>
+            <p>{"Provision a bot account owned by the given user. The token is shown once after confirmation."}</p>
           </div>
         </div>
         <div className="bot-create-fields">
           <label className="duration-field">
-            <span>{t("bots.ownerUserID")}</span>
+            <span>{"Owner user ID"}</span>
             <input
               value={ownerID}
               onChange={(event) => setOwnerID(event.target.value)}
@@ -86,18 +84,18 @@ export function BotsPage({ navigate }: { navigate: Navigate }) {
             />
           </label>
           <label className="duration-field">
-            <span>{t("bots.name")}</span>
-            <input value={botName} onChange={(event) => setBotName(event.target.value)} placeholder={t("bots.namePlaceholder")} maxLength={64} />
+            <span>{"Display name"}</span>
+            <input value={botName} onChange={(event) => setBotName(event.target.value)} placeholder={"e.g. Service Bot"} maxLength={64} />
           </label>
           <label className="duration-field">
-            <span>{t("bots.username")}</span>
+            <span>{"Username"}</span>
             <input value={botUsername} onChange={(event) => setBotUsername(event.target.value)} placeholder="my_service_bot" />
           </label>
         </div>
         <div className="bot-create-actions">
-          <span className="bot-create-note">{t("bots.usernameHint")}</span>
+          <span className="bot-create-note">{"Username must be 5-32 characters and end with 'bot'."}</span>
           <ActionButton
-            label={t("bots.create")}
+            label={"Create bot"}
             icon={<Plus size={15} />}
             tone="neutral"
             path="/api/actions/create-bot"
@@ -115,18 +113,18 @@ export function BotsPage({ navigate }: { navigate: Navigate }) {
         <form className="toolbar" onSubmit={(event) => { event.preventDefault(); void load(false); }}>
           <label className="searchbox">
             <Search size={15} />
-            <input value={q} onChange={(event) => setQ(event.target.value)} placeholder={t("bots.searchPlaceholder")} />
+            <input value={q} onChange={(event) => setQ(event.target.value)} placeholder={"Bot ID / username"} />
           </label>
           <label className="field-inline">
-            <span>{t("common.limit")}</span>
+            <span>{"Limit"}</span>
             <input className="small-input" value={limit} onChange={(event) => setLimit(event.target.value)} type="number" min="1" max="100" />
           </label>
           <button className="btn primary icon-text" type="submit" disabled={busy}>
-            {busy ? <Loader2 size={15} className="spin" /> : <Search size={15} />} {t("common.search")}
+            {busy ? <Loader2 size={15} className="spin" /> : <Search size={15} />} {"Search"}
           </button>
           {data?.listing && data.has_more && (
             <button className="btn icon-text" type="button" onClick={() => load(true)} disabled={busy}>
-              <ChevronRight size={15} /> {t("messages.nextPage")}
+              <ChevronRight size={15} /> {"Next page"}
             </button>
           )}
         </form>
@@ -136,13 +134,13 @@ export function BotsPage({ navigate }: { navigate: Navigate }) {
         <table className="data-table">
           <thead>
             <tr>
-              <th>{t("bots.botID")}</th>
-              <th>{t("common.username")}</th>
-              <th>{t("common.name")}</th>
-              <th>{t("bots.owner")}</th>
-              <th>{t("common.verified")}</th>
-              <th>{t("bots.type")}</th>
-              <th>{t("account.createdAt")}</th>
+              <th>{"Bot ID"}</th>
+              <th>{"Username"}</th>
+              <th>{"Name"}</th>
+              <th>{"Owner"}</th>
+              <th>{"Verified"}</th>
+              <th>{"Type"}</th>
+              <th>{"Created"}</th>
               <th></th>
             </tr>
           </thead>
@@ -153,10 +151,10 @@ export function BotsPage({ navigate }: { navigate: Navigate }) {
                 <td>{displayUsername(row.Username) || "-"}</td>
                 <td>{row.FirstName || "-"}</td>
                 <td className="mono">{row.OwnerUserID > 0 ? row.OwnerUserID : "-"}</td>
-                <td>{row.Verified ? <Badge tone="good"><BadgeCheck size={12} /> {t("common.verified")}</Badge> : <Badge>{t("account.notVerified")}</Badge>} <ScamFakeBadges scam={row.Scam} fake={row.Fake} /></td>
-                <td>{row.System ? <Badge tone="warn">{t("bots.system")}</Badge> : <Badge>{t("bots.user")}</Badge>}</td>
+                <td>{row.Verified ? <Badge tone="good"><BadgeCheck size={12} /> {"Verified"}</Badge> : <Badge>{"Not verified"}</Badge>} <ScamFakeBadges scam={row.Scam} fake={row.Fake} /></td>
+                <td>{row.System ? <Badge tone="warn">{"System"}</Badge> : <Badge>{"User"}</Badge>}</td>
                 <td>{formatDate(row.CreatedAt)}</td>
-                <td><button className="row-link" onClick={() => navigate(`/bots/${row.ID}`)}><Bot size={14} /> {t("common.detail")} <ChevronRight size={14} /></button></td>
+                <td><button className="row-link" onClick={() => navigate(`/bots/${row.ID}`)}><Bot size={14} /> {"Details"} <ChevronRight size={14} /></button></td>
               </tr>
             ))}
             {rows.length === 0 && <EmptyRow colSpan={8} />}