feat: add NFT usernames and bot verification (#22)

Implements collectible usernames, official verification workflows, and third-party bot verification after maintainer protocol and migration review.

The composite activity/moderation rating remains an admin-only read model; Telegram Stars Rating wire fields stay unset pending a dedicated official-semantics implementation.

Reviewed-Head: 2796345775ea0f908fb7734601e5e1dee4b653b9
Original-Head: fa082b892fd5180c9c9bc53c81c21cf5d250a75b

Co-authored-by: Egor Egorov <business.egor.sg@gmail.com>

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

@@ -16,7 +16,9 @@ export function ActionButton({
   icon,
   compact = false,
   tone = "danger",
-  onDone
+  disabled = false,
+  onDone,
+  onError
 }: {
   label: string;
   path: string;
@@ -24,7 +26,15 @@ 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);
@@ -54,7 +64,7 @@ export function ActionButton({
         onDone?.();
       }
     } catch (err) {
-      setError(errorMessage(err));
+      setError(onError?.(err) || errorMessage(err));
     } finally {
       setBusy(false);
     }
@@ -75,6 +85,7 @@ export function ActionButton({
       <button
         className={triggerClass}
         type="button"
+        disabled={disabled}
         onClick={() => {
           reset();
           setOpen(true);

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

@@ -3,7 +3,7 @@ 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({
@@ -100,6 +100,103 @@ export function UserPicker({
   );
 }
 
+// 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 { t } = useI18n();
+  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} /> {t("common.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={t("picker.botPlaceholder")}
+        />
+        <button className="btn compact-btn" type="button" onClick={search} disabled={busy}>
+          {busy ? <Loader2 size={14} className="spin" /> : t("common.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">{t("picker.system")}</Badge> : <Badge>{t("picker.regular")}</Badge>}
+          </button>
+        ))}
+        {rows.length === 0 && !busy ? <div className="picker-empty">{t("common.noResults")}</div> : null}
+      </div>
+    </div>
+  );
+}
+
 export function ChannelPicker({
   label,
   value,

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

@@ -1,4 +1,6 @@
 import {
+  AtSign,
+  BadgeCheck,
   Bot,
   ChevronDown,
   Database,
@@ -10,6 +12,8 @@ import {
   ShieldAlert,
   ShieldCheck,
   Smile,
+  Stamp,
+  Trophy,
   Users,
 	Gift,
 	Send
@@ -17,6 +21,7 @@ import {
 import { useEffect, useState, type ReactNode } from "react";
 import { api } from "../api";
 import { LanguageSwitch, 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";
@@ -51,6 +56,12 @@ export function Shell({
   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);
 
@@ -82,6 +93,14 @@ export function Shell({
           <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={<ShieldAlert size={16} />} href="/moderation" route={route} navigate={navigate}>{t("layout.moderation")}</NavLink>
+          {canReviewVerification && (
+            <NavLink icon={<BadgeCheck size={16} />} href="/verification" route={route} navigate={navigate}>{t("layout.verification")}</NavLink>
+          )}
+          {canReviewBotVerification && (
+            <NavLink icon={<Stamp size={16} />} href="/bot-verification" route={route} navigate={navigate}>{t("layout.botVerification")}</NavLink>
+          )}
+          <NavLink icon={<AtSign size={16} />} href="/collectible-usernames" route={route} navigate={navigate}>{t("layout.collectibleUsernames")}</NavLink>
+          <NavLink icon={<Trophy size={16} />} href="/account-ratings" route={route} navigate={navigate}>{t("layout.accountRatings")}</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={<Smile size={16} />} href="/emoji" route={route} navigate={navigate}>{t("layout.emoji")}</NavLink>

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

@@ -1,8 +1,8 @@
 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";
 
@@ -129,3 +129,33 @@ 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 { t } = useI18n();
+  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>{t("usernames.inactive")}</em>}
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}