admin: gift granting, collectible attribute/number control, and Layer 228 moderation tools

Admin console additions (Layer 228):
- Give Gifts: dedicated tab with sorted Lottie/TGS gift picker + inline form; grant any catalog gift to a user/channel from 777000 (no charge)
- Upgraded/collectible delivery: mint a unique gift with admin-selected model/pattern/backdrop and custom number, or random/auto (DB FK + UNIQUE(gift_id,num) enforce invariants)
- SCAM/FAKE flags for users/channels (migration 0136) with configurable profile warning (TELESRV_SCAM_WARNING/TELESRV_FAKE_WARNING)
- Support toggle, force channel settings incl. gigagroup (migration 0137), username management, cosmetic color/emoji-status
- Emoji admin tab (custom emoji list + document IDs + Lottie/TGS preview)
- Bot management; soft UI / dark theme
Wired through Router -> admin.Service -> adminapi -> BFF -> React panel (en/zh/ru).

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

@@ -4,6 +4,8 @@ import { api, errorMessage } from "../api";
 import { ActionButton } from "../components/ActionButton";
 import { AuthorizationTable } from "../components/AuthorizationTable";
 import { Alert, AuditTable, Badge, LoadingSurface, PageFrame, SectionHead, SplitLayout, Summary } from "../components/ui";
+import { ScamFakeActions, ScamFakeBadges } from "../components/flags";
+import { ColorAction, EmojiStatusAction, SupportAction, UsernameAction } from "../components/attributes";
 import { useI18n } from "../i18n";
 import { displayName, displayPhone, displayUsername, formatDate, formatUnix, toInt } from "../lib/format";
 import type { Navigate } from "../routing";
@@ -67,6 +69,7 @@ export function AccountDetailPage({ id, navigate }: { id: number; navigate: Navi
               <div className="entity-badges">
                 {account.PremiumUntil > 0 ? <Badge tone="good">{t("account.premium")}</Badge> : <Badge>{t("account.notPremium")}</Badge>}
                 {detail.Verified ? <Badge tone="good">{t("common.verified")}</Badge> : <Badge>{t("account.notVerified")}</Badge>}
+                <ScamFakeBadges scam={detail.Scam} fake={detail.Fake} />
                 {account.Frozen ? <Badge tone="danger">{t("account.accountFrozen")}</Badge> : <Badge>{t("account.accountActive")}</Badge>}
               </div>
             </section>
@@ -194,6 +197,12 @@ export function AccountDetailPage({ id, navigate }: { id: number; navigate: Navi
                 onDone={load}
               />
             </div>
+            <ScamFakeActions idKey="user_id" id={account.ID} path="/api/actions/set-account-flags" scam={detail.Scam} fake={detail.Fake} onDone={load} />
+            <div className="dock-title">{t("attr.attributes")}</div>
+            <SupportAction id={account.ID} support={detail.Support} onDone={load} />
+            <UsernameAction idKey="user_id" id={account.ID} path="/api/actions/set-account-username" current={account.Username} onDone={load} />
+            <ColorAction idKey="user_id" id={account.ID} path="/api/actions/set-account-color" onDone={load} />
+            <EmojiStatusAction idKey="user_id" id={account.ID} path="/api/actions/set-account-emoji-status" onDone={load} />
           </section>
         }
       />

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

@@ -2,6 +2,7 @@ import { ChevronRight, Loader2, RefreshCw, Search } from "lucide-react";
 import { useEffect, useState } from "react";
 import { api, errorMessage } from "../api";
 import { Alert, Badge, EmptyRow, Metric, PageFrame, QueryPanel } from "../components/ui";
+import { ScamFakeBadges } from "../components/flags";
 import { useI18n } from "../i18n";
 import { displayName, displayPhone, displayUsername, formatDate, formatUnix } from "../lib/format";
 import { accountMetrics } from "../lib/metrics";
@@ -111,7 +112,7 @@ export function AccountsPage({ navigate }: { navigate: Navigate }) {
                 <td>{row.DeviceCount}</td>
                 <td>{formatDate(row.LastActiveAt)}</td>
                 <td>{row.PremiumUntil > 0 ? <Badge tone="good">{t("account.premium")} {formatUnix(row.PremiumUntil)}</Badge> : <Badge>{t("common.none")}</Badge>}</td>
-                <td>{row.Verified ? <Badge tone="good">{t("common.verified")}</Badge> : <Badge>{t("account.notVerified")}</Badge>}</td>
+                <td>{row.Verified ? <Badge tone="good">{t("common.verified")}</Badge> : <Badge>{t("account.notVerified")}</Badge>} <ScamFakeBadges scam={row.Scam} fake={row.Fake} /></td>
                 <td>{row.Frozen ? <Badge tone="danger">{t("account.frozen")}</Badge> : <Badge>{t("common.normal")}</Badge>}</td>
                 <td>{formatDate(row.UpdatedAt)}</td>
                 <td><button className="row-link" onClick={() => navigate(`/accounts/${row.ID}`)}>{t("common.detail")} <ChevronRight size={14} /></button></td>

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

@@ -3,6 +3,8 @@ import { useEffect, useState } from "react";
 import { api, errorMessage } from "../api";
 import { ActionButton } from "../components/ActionButton";
 import { Alert, AuditTable, Badge, LoadingSurface, PageFrame, SectionHead, SplitLayout, Summary } from "../components/ui";
+import { ScamFakeActions, ScamFakeBadges } from "../components/flags";
+import { ColorAction, EmojiStatusAction, UsernameAction } from "../components/attributes";
 import { useI18n } from "../i18n";
 import { displayUsername, formatDate } from "../lib/format";
 import type { Navigate } from "../routing";
@@ -55,6 +57,7 @@ export function BotDetailPage({ id, navigate }: { id: number; navigate: Navigate
               <div className="entity-badges">
                 <Badge tone={bot.System ? "warn" : "neutral"}>{bot.System ? t("bots.system") : t("bots.user")}</Badge>
                 {bot.Verified ? <Badge tone="good">{t("common.verified")}</Badge> : <Badge>{t("account.notVerified")}</Badge>}
+                <ScamFakeBadges scam={bot.Scam} fake={bot.Fake} />
               </div>
             </section>
             <div className="summary-grid">
@@ -85,6 +88,11 @@ export function BotDetailPage({ id, navigate }: { id: number; navigate: Navigate
                 onDone={load}
               />
             </div>
+            <ScamFakeActions idKey="user_id" id={bot.ID} path="/api/actions/set-account-flags" scam={bot.Scam} fake={bot.Fake} onDone={load} />
+            <div className="dock-title">{t("attr.attributes")}</div>
+            <UsernameAction idKey="user_id" id={bot.ID} path="/api/actions/set-account-username" current={bot.Username} onDone={load} />
+            <ColorAction idKey="user_id" id={bot.ID} path="/api/actions/set-account-color" onDone={load} />
+            <EmojiStatusAction idKey="user_id" id={bot.ID} path="/api/actions/set-account-emoji-status" onDone={load} />
             {bot.System ? (
               <p className="bot-create-note">{t("bots.systemHint")}</p>
             ) : (

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

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 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";
@@ -152,7 +153,7 @@ 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>}</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>{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>

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

@@ -4,6 +4,8 @@ import { api, errorMessage } from "../api";
 import { ActionButton } from "../components/ActionButton";
 import { Alert, AuditTable, Badge, JsonBlock, LoadingSurface, PageFrame, SectionHead, SplitLayout, Summary } from "../components/ui";
 import { useI18n } from "../i18n";
+import { ScamFakeActions, ScamFakeBadges } from "../components/flags";
+import { ChannelSettingsAction, ColorAction, EmojiStatusAction, UsernameAction } from "../components/attributes";
 import { channelKind, displayUsername, formatDate, formatUnix } from "../lib/format";
 import type { Navigate } from "../routing";
 import type { ChannelDetail } from "../types";
@@ -51,6 +53,7 @@ export function ChannelDetailPage({ id, navigate }: { id: number; navigate: Navi
               <div className="entity-badges">
                 <Badge>{channelKind(ch, t)}</Badge>
                 {ch.Verified ? <Badge tone="good">{t("common.verified")}</Badge> : <Badge>{t("account.notVerified")}</Badge>}
+                <ScamFakeBadges scam={ch.Scam} fake={ch.Fake} />
                 {ch.Deleted ? <Badge tone="danger">{t("common.deleted")}</Badge> : <Badge>{t("common.valid")}</Badge>}
               </div>
             </section>
@@ -86,6 +89,13 @@ export function ChannelDetailPage({ id, navigate }: { id: number; navigate: Navi
               payload={() => ({ channel_id: ch.ID, verified: !ch.Verified })}
               onDone={load}
             />
+            <ScamFakeActions idKey="channel_id" id={ch.ID} path="/api/actions/set-channel-flags" scam={ch.Scam} fake={ch.Fake} onDone={load} />
+            <div className="dock-title">{t("attr.settings")}</div>
+            <ChannelSettingsAction channel={ch} onDone={load} />
+            <div className="dock-title">{t("attr.attributes")}</div>
+            <UsernameAction idKey="channel_id" id={ch.ID} path="/api/actions/set-channel-username" current={ch.Username} onDone={load} />
+            <ColorAction idKey="channel_id" id={ch.ID} path="/api/actions/set-channel-color" onDone={load} />
+            <EmojiStatusAction idKey="channel_id" id={ch.ID} path="/api/actions/set-channel-emoji-status" onDone={load} />
           </section>
         }
       />

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

@@ -2,6 +2,7 @@ import { ChevronRight, Loader2, RefreshCw, Search } from "lucide-react";
 import { useEffect, useState } from "react";
 import { api, errorMessage } from "../api";
 import { Alert, Badge, EmptyRow, Metric, PageFrame, QueryPanel } from "../components/ui";
+import { ScamFakeBadges } from "../components/flags";
 import { useI18n } from "../i18n";
 import { channelKind, displayUsername, formatDate } from "../lib/format";
 import { channelMetrics } from "../lib/metrics";
@@ -110,7 +111,7 @@ export function ChannelsPage({ navigate }: { navigate: Navigate }) {
                 <td>{row.ParticipantsCount}</td>
                 <td>{row.AdminsCount}</td>
                 <td>{row.PTS}</td>
-                <td>{row.Verified ? <Badge tone="good">{t("common.verified")}</Badge> : <Badge>{t("account.notVerified")}</Badge>}</td>
+                <td>{row.Verified ? <Badge tone="good">{t("common.verified")}</Badge> : <Badge>{t("account.notVerified")}</Badge>} <ScamFakeBadges scam={row.Scam} fake={row.Fake} /></td>
                 <td>{formatDate(row.UpdatedAt)}</td>
                 <td><button className="row-link" onClick={() => navigate(`/channels/${row.ID}`)}>{t("common.detail")} <ChevronRight size={14} /></button></td>
               </tr>

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

@@ -0,0 +1,158 @@
+import lottie from "lottie-web/build/player/lottie_light_canvas";
+import { Check, ChevronRight, Copy, Loader2, RefreshCw, Search } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { api, errorMessage } from "../api";
+import { Alert, Metric, PageFrame, QueryPanel } from "../components/ui";
+import { useI18n } from "../i18n";
+import type { EmojiListResponse, EmojiRow } from "../types";
+
+function formatBytes(value: number): string {
+  if (value < 1024) return `${value} B`;
+  if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
+  return `${(value / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+function isAnimated(mime: string): boolean {
+  const m = mime.toLowerCase();
+  return m.includes("tgsticker") || m.includes("lottie") || m.includes("json");
+}
+
+function EmojiPreview({ row }: { row: EmojiRow }) {
+  const host = useRef<HTMLDivElement>(null);
+  const animation = useRef<ReturnType<typeof lottie.loadAnimation> | null>(null);
+  const [failed, setFailed] = useState(!isAnimated(row.MimeType));
+
+  useEffect(() => {
+    if (!isAnimated(row.MimeType)) {
+      setFailed(true);
+      return;
+    }
+    let cancelled = false;
+    api.emojiAnimation(row.DocumentID).then((data) => {
+      if (cancelled || !host.current) return;
+      animation.current?.destroy();
+      animation.current = lottie.loadAnimation({
+        container: host.current,
+        renderer: "canvas",
+        loop: true,
+        autoplay: true,
+        animationData: structuredClone(data)
+      });
+    }).catch(() => setFailed(true));
+    return () => {
+      cancelled = true;
+      animation.current?.destroy();
+      animation.current = null;
+    };
+  }, [row.DocumentID, row.MimeType]);
+
+  if (failed) {
+    return <div className="emoji-glyph">{row.Alt || "🙂"}</div>;
+  }
+  return <div className="emoji-anim" ref={host} />;
+}
+
+function EmojiCard({ row }: { row: EmojiRow }) {
+  const { t } = useI18n();
+  const [copied, setCopied] = useState(false);
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(row.DocumentID);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+      // Clipboard is best-effort.
+    }
+  }
+
+  return (
+    <div className="emoji-card">
+      <div className="emoji-preview"><EmojiPreview row={row} /></div>
+      <div className="emoji-meta">
+        <span className="emoji-alt">{row.Alt || "—"}</span>
+        <button className="emoji-id" type="button" onClick={copy} title={t("emoji.copyID")}>
+          <span className="mono">{row.DocumentID}</span>
+          {copied ? <Check size={12} /> : <Copy size={12} />}
+        </button>
+        <span className="emoji-sub">{row.SetTitle || t("emoji.noSet")} · {formatBytes(row.Size)}</span>
+      </div>
+    </div>
+  );
+}
+
+export function EmojiPage() {
+  const { t } = useI18n();
+  const [q, setQ] = useState("");
+  const [data, setData] = useState<EmojiListResponse | null>(null);
+  const [cursor, setCursor] = useState(0);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  async function load(next = false) {
+    setBusy(true);
+    setError("");
+    const params = new URLSearchParams();
+    if (q.trim()) {
+      params.set("q", q.trim());
+    } else if (next) {
+      params.set("before_id", String(cursor));
+    }
+    try {
+      const result = await api.emoji(params);
+      setData(result);
+      setCursor(result.next_before_id);
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  useEffect(() => {
+    void load(false);
+  }, []);
+
+  const rows = data?.rows ?? [];
+
+  return (
+    <PageFrame
+      title={t("emoji.pageTitle")}
+      eyebrow={data?.listing === false ? t("emoji.queryResults") : t("emoji.recent")}
+      actions={
+        <button className="btn" type="button" onClick={() => load(false)} disabled={busy}>
+          <RefreshCw size={15} /> {t("common.refresh")}
+        </button>
+      }
+    >
+      {error && <Alert>{error}</Alert>}
+      <div className="metric-row">
+        <Metric label={t("emoji.currentPage")} value={String(rows.length)} />
+      </div>
+      <QueryPanel>
+        <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("emoji.searchPlaceholder")} />
+          </label>
+          <button className="btn primary icon-text" type="submit" disabled={busy}>
+            {busy ? <Loader2 size={15} className="spin" /> : <Search size={15} />} {t("common.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")}
+            </button>
+          )}
+        </form>
+      </QueryPanel>
+      <p className="about-text">{t("emoji.hint")}</p>
+      {rows.length === 0 ? (
+        <div className="empty-panel">{t("common.noResults")}</div>
+      ) : (
+        <div className="emoji-grid">
+          {rows.map((row) => <EmojiCard key={row.DocumentID} row={row} />)}
+        </div>
+      )}
+    </PageFrame>
+  );
+}

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

@@ -23,7 +23,7 @@ function formatBytes(value: number | string) {
 	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 
-function LottiePreview({ giftID, revision, compact = false }: { giftID: string; revision: number; compact?: boolean }) {
+export function LottiePreview({ giftID, revision, compact = false }: { giftID: string; revision: number; compact?: boolean }) {
   const host = useRef<HTMLDivElement>(null);
   const animation = useRef<ReturnType<typeof lottie.loadAnimation> | null>(null);
   const [playing, setPlaying] = useState(true);

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

@@ -0,0 +1,229 @@
+import { CheckCircle2, CircleAlert, Gift, Loader2, Play, User, Users } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { api, errorMessage } from "../api";
+import { ChannelPicker, UserPicker } from "../components/EntityPicker";
+import { Alert, JsonBlock } from "../components/ui";
+import { useI18n } from "../i18n";
+import type { AccountRow, ChannelRow, CommandResult, StarGiftCollectibleAttributeRow, StarGiftCollectiblePreview, StarGiftRow } from "../types";
+
+const SYSTEM_SENDER = "777000";
+
+type RecipientKind = "user" | "channel";
+
+function attrLabel(attr: StarGiftCollectibleAttributeRow): string {
+  const rarity = attr.rarity_permille > 0 ? ` · ${(attr.rarity_permille / 10).toFixed(1)}%` : "";
+  return `${attr.name || `#${attr.id}`}${rarity}`;
+}
+
+export function GiveGiftForm({ gift, onDone }: { gift: StarGiftRow; onDone?: () => void }) {
+  const { t } = useI18n();
+  const [kind, setKind] = useState<RecipientKind>("user");
+  const [user, setUser] = useState<AccountRow | null>(null);
+  const [channel, setChannel] = useState<ChannelRow | null>(null);
+  const [sender, setSender] = useState(SYSTEM_SENDER);
+  const [message, setMessage] = useState("");
+  const [hideName, setHideName] = useState(false);
+  const [upgrade, setUpgrade] = useState(false);
+  const [preview, setPreview] = useState<StarGiftCollectiblePreview | null>(null);
+  const [previewError, setPreviewError] = useState("");
+  const [modelID, setModelID] = useState("0");
+  const [patternID, setPatternID] = useState("0");
+  const [backdropID, setBackdropID] = useState("0");
+  const [num, setNum] = useState("");
+  const [reason, setReason] = useState("");
+  const [result, setResult] = useState<CommandResult | null>(null);
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  const recipientID = kind === "user" ? user?.ID ?? 0 : channel?.ID ?? 0;
+  const upgradable = kind === "user" && upgrade;
+
+  // Reset the collectible selection whenever the chosen gift changes; the
+  // recipient/sender/message are intentionally preserved for fast re-issuing.
+  useEffect(() => {
+    setUpgrade(false);
+    setPreview(null);
+    setPreviewError("");
+    setModelID("0");
+    setPatternID("0");
+    setBackdropID("0");
+    setNum("");
+    setResult(null);
+    setError("");
+  }, [gift.GiftID]);
+
+  useEffect(() => {
+    if (!upgradable || preview) return;
+    let cancelled = false;
+    setPreviewError("");
+    api.giftCollectibles(gift.GiftID)
+      .then((data) => { if (!cancelled) setPreview(data); })
+      .catch((err) => { if (!cancelled) setPreviewError(errorMessage(err)); });
+    return () => { cancelled = true; };
+  }, [upgradable, preview, gift.GiftID]);
+
+  function buildPayload(confirm: boolean): Record<string, unknown> {
+    const senderID = Number.parseInt(sender.trim() || SYSTEM_SENDER, 10);
+    const parsedNum = Number.parseInt(num.trim(), 10);
+    return {
+      gift_id: gift.GiftID,
+      sender_user_id: Number.isFinite(senderID) ? senderID : 0,
+      user_id: kind === "user" ? recipientID : 0,
+      channel_id: kind === "channel" ? recipientID : 0,
+      hide_name: hideName,
+      message: message.trim(),
+      upgrade: upgradable,
+      model_attribute_id: upgradable ? modelID : "0",
+      pattern_attribute_id: upgradable ? patternID : "0",
+      backdrop_attribute_id: upgradable ? backdropID : "0",
+      num: upgradable && Number.isFinite(parsedNum) && parsedNum > 0 ? parsedNum : 0,
+      reason: reason.trim(),
+      confirm
+    };
+  }
+
+  const previewPayload = useMemo(() => buildPayload(false), [gift.GiftID, kind, recipientID, sender, message, hideName, upgrade, modelID, patternID, backdropID, num, reason]);
+  const canConfirm = result?.dry_run && !result.error;
+
+  async function run(confirm: boolean) {
+    if (recipientID <= 0) {
+      setError(t("giveGift.recipientRequired"));
+      return;
+    }
+    if (!reason.trim()) {
+      setError(t("action.reasonRequired"));
+      return;
+    }
+    setBusy(true);
+    setError("");
+    try {
+      const commandResult = await api.action("/api/actions/give-gift", buildPayload(confirm));
+      setResult(commandResult);
+      if (confirm && !commandResult.error) {
+        onDone?.();
+      }
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="give-gift-form">
+      <div className="give-gift-summary">
+        <Gift size={16} />
+        <div>
+          <strong>{gift.Title || `Gift #${gift.GiftID}`}</strong>
+          <span className="mono">#{gift.GiftID} · ⭐ {gift.Stars}</span>
+        </div>
+      </div>
+
+      <div className="give-gift-tabs" role="group" aria-label={t("giveGift.recipientKind")}>
+        <button type="button" className={`btn ${kind === "user" ? "primary" : ""}`} onClick={() => { setKind("user"); setResult(null); }}>
+          <User size={15} /> {t("giveGift.recipientUser")}
+        </button>
+        <button type="button" className={`btn ${kind === "channel" ? "primary" : ""}`} onClick={() => { setKind("channel"); setUpgrade(false); setResult(null); }}>
+          <Users size={15} /> {t("giveGift.recipientChannel")}
+        </button>
+      </div>
+
+      {kind === "user"
+        ? <UserPicker label={t("giveGift.pickUser")} value={user} onChange={(row) => { setUser(row); setResult(null); }} />
+        : <ChannelPicker label={t("giveGift.pickChannel")} value={channel} onChange={(row) => { setChannel(row); setResult(null); }} />}
+
+      <label className="form-field">
+        <span>{t("giveGift.sender")}</span>
+        <input value={sender} inputMode="numeric" onChange={(event) => { setSender(event.target.value.replace(/[^0-9]/g, "")); setResult(null); }} placeholder={SYSTEM_SENDER} />
+        <small className="field-hint">{t("giveGift.senderHint")}</small>
+      </label>
+
+      <label className="form-field">
+        <span>{t("giveGift.message")}</span>
+        <textarea value={message} rows={2} maxLength={255} onChange={(event) => { setMessage(event.target.value); setResult(null); }} placeholder={t("giveGift.messagePlaceholder")} />
+      </label>
+
+      <label className="gift-switch">
+        <input type="checkbox" checked={hideName} onChange={(event) => { setHideName(event.target.checked); setResult(null); }} />
+        <span className="gift-switch-track" aria-hidden="true"><span /></span>
+        <span>{t("giveGift.hideName")}</span>
+      </label>
+
+      {kind === "user" && (
+        <>
+          <label className="gift-switch">
+            <input type="checkbox" checked={upgrade} onChange={(event) => { setUpgrade(event.target.checked); if (!event.target.checked) { setModelID("0"); setPatternID("0"); setBackdropID("0"); setNum(""); } setResult(null); }} />
+            <span className="gift-switch-track" aria-hidden="true"><span /></span>
+            <span>{t("giveGift.upgrade")}</span>
+          </label>
+          {upgrade && <p className="give-gift-upgrade-note">{t("giveGift.upgradeNote")}</p>}
+          {upgrade && previewError && <Alert>{previewError}</Alert>}
+          {upgrade && preview && (
+            <div className="gift-fields-grid give-gift-attrs">
+              <label>
+                <span>{t("giveGift.model")}</span>
+                <select value={modelID} onChange={(event) => { setModelID(event.target.value); setResult(null); }}>
+                  <option value="0">{t("giveGift.random")}</option>
+                  {(preview.models ?? []).map((attr) => <option key={attr.id} value={attr.id}>{attrLabel(attr)}</option>)}
+                </select>
+              </label>
+              <label>
+                <span>{t("giveGift.pattern")}</span>
+                <select value={patternID} onChange={(event) => { setPatternID(event.target.value); setResult(null); }}>
+                  <option value="0">{t("giveGift.random")}</option>
+                  {(preview.patterns ?? []).map((attr) => <option key={attr.id} value={attr.id}>{attrLabel(attr)}</option>)}
+                </select>
+              </label>
+              <label>
+                <span>{t("giveGift.backdrop")}</span>
+                <select value={backdropID} onChange={(event) => { setBackdropID(event.target.value); setResult(null); }}>
+                  <option value="0">{t("giveGift.random")}</option>
+                  {(preview.backdrops ?? []).map((attr) => <option key={attr.id} value={attr.id}>{attrLabel(attr)}</option>)}
+                </select>
+              </label>
+              <label>
+                <span>{t("giveGift.number")}</span>
+                <input type="number" min="1" max={preview.supply_total ?? undefined} value={num} placeholder={t("giveGift.numberAuto")} onChange={(event) => { setNum(event.target.value.replace(/[^0-9]/g, "")); setResult(null); }} />
+              </label>
+            </div>
+          )}
+        </>
+      )}
+
+      <label className="form-field">
+        <span>{t("action.reason")}</span>
+        <textarea value={reason} rows={2} onChange={(event) => setReason(event.target.value)} placeholder={t("action.reasonPlaceholder")} />
+      </label>
+
+      <div className="command-preview">
+        <div className="preview-head">{t("action.requestPreview")}</div>
+        <JsonBlock value={JSON.stringify(previewPayload, null, 2)} />
+      </div>
+
+      {error && <Alert>{error}</Alert>}
+      {result && (
+        <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>
+          </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>
+          {result.details && <JsonBlock value={JSON.stringify(result.details, null, 2)} />}
+        </div>
+      )}
+
+      <div className="give-gift-form-actions">
+        <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")}
+        </button>
+        <button className="btn primary icon-text" type="button" onClick={() => run(true)} disabled={busy || !canConfirm}>
+          <Gift size={15} />
+          {t("giveGift.confirm")}
+        </button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,83 @@
+import { Gift, RefreshCw, Search } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { api, errorMessage } from "../api";
+import { Alert, Badge, PageFrame } from "../components/ui";
+import { useI18n } from "../i18n";
+import type { StarGiftRow } from "../types";
+import { LottiePreview } from "./GiftsPage";
+import { GiveGiftForm } from "./GiveGiftForm";
+
+export function GiveGiftsPage() {
+  const { t } = useI18n();
+  const [gifts, setGifts] = useState<StarGiftRow[]>([]);
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState<StarGiftRow | null>(null);
+  const [error, setError] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  async function load() {
+    setBusy(true);
+    setError("");
+    try {
+      const rows = (await api.gifts()).Gifts ?? [];
+      setGifts(rows);
+      setSelected((current) => current ?? rows[0] ?? null);
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  useEffect(() => { void load(); }, []);
+
+  const visible = useMemo(() => {
+    const normalized = query.trim().toLowerCase();
+    if (!normalized) return gifts;
+    return gifts.filter((gift) =>
+      String(gift.GiftID).includes(normalized) || gift.Title.toLowerCase().includes(normalized)
+    );
+  }, [gifts, query]);
+
+  return (
+    <PageFrame title={t("giveGifts.pageTitle")} eyebrow={t("giveGifts.eyebrow")} actions={
+      <button className="btn" type="button" onClick={() => load()} disabled={busy}><RefreshCw size={15} /> {t("common.refresh")}</button>
+    }>
+      {error && <Alert>{error}</Alert>}
+      <p className="give-gift-upgrade-note">{t("giveGifts.hint")}</p>
+      <div className="give-gift-layout">
+        <section className="give-gift-picker">
+          <div className="give-gift-picker-head">
+            <label className="searchbox"><Search size={15} /><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder={t("giveGifts.searchPlaceholder")} /></label>
+            <span className="gift-list-summary">{t("gifts.listSummary", { shown: visible.length, total: gifts.length })}</span>
+          </div>
+          <div className="give-gift-picker-list" role="listbox" aria-label={t("giveGifts.pickGift")}>
+            {visible.map((gift) => {
+              const active = selected?.GiftID === gift.GiftID;
+              return (
+                <button key={gift.GiftID} type="button" role="option" aria-selected={active}
+                  className={`give-gift-option ${active ? "selected" : ""} ${gift.Enabled ? "" : "gift-row-disabled"}`}
+                  onClick={() => setSelected(gift)}>
+                  <LottiePreview giftID={gift.GiftID} revision={gift.Revision} compact />
+                  <span className="give-gift-option-info">
+                    <strong>{gift.Title || `Gift #${gift.GiftID}`}</strong>
+                    <span className="mono">#{gift.GiftID}</span>
+                    <span className="give-gift-option-meta">
+                      {gift.Enabled ? <Badge>⭐ {gift.Stars}</Badge> : <Badge tone="neutral">{t("common.disabled")}</Badge>}
+                    </span>
+                  </span>
+                </button>
+              );
+            })}
+            {visible.length === 0 && !busy && <div className="official-gift-empty">{t("common.noResults")}</div>}
+          </div>
+        </section>
+        <section className="give-gift-panel">
+          {selected
+            ? <GiveGiftForm key={selected.GiftID} gift={selected} onDone={() => void load()} />
+            : <div className="give-gift-empty-panel"><Gift size={26} /><p>{t("giveGifts.selectPrompt")}</p></div>}
+        </section>
+      </div>
+    </PageFrame>
+  );
+}

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

@@ -5,12 +5,14 @@ import { ChannelDetailPage } from "./ChannelDetailPage";
 import { ChannelsPage } from "./ChannelsPage";
 import { BotDetailPage } from "./BotDetailPage";
 import { BotsPage } from "./BotsPage";
+import { EmojiPage } from "./EmojiPage";
 import { Dashboard } from "./Dashboard";
 import { GroupMessageDetailPage } from "./GroupMessageDetailPage";
 import { GroupMessagesPage } from "./GroupMessagesPage";
 import { MessageDetailPage } from "./MessageDetailPage";
 import { MessagesPage } from "./MessagesPage";
 import { GiftsPage } from "./GiftsPage";
+import { GiveGiftsPage } from "./GiveGiftsPage";
 
 export function Routes({ route, navigate }: { route: RouteState; navigate: Navigate }) {
   const accountID = route.path.match(/^\/accounts\/(\d+)$/)?.[1];
@@ -33,10 +35,16 @@ export function Routes({ route, navigate }: { route: RouteState; navigate: Navig
   }
   if (route.path === "/bots") {
     return <BotsPage navigate={navigate} />;
+  }
+  if (route.path === "/emoji") {
+    return <EmojiPage />;
   }
 	if (route.path === "/gifts") {
 		return <GiftsPage />;
 	}
+	if (route.path === "/give-gifts") {
+		return <GiveGiftsPage />;
+	}
   if (route.path === "/messages/detail" || route.path === "/messages/private/detail") {
     return (
       <MessageDetailPage