updated bots,channels and supergroups lists and edit screens

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

@@ -0,0 +1,93 @@
+import { ImagePlus, Loader2, Upload, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { api, errorMessage } from "../api";
+import { Alert } from "./ui";
+
+type AvatarModalKind = "user" | "channel";
+
+// AvatarModal uploads a new photo for an account or a channel/supergroup. It
+// follows CreateStickerSetModal's shape (a single reason field + direct
+// execute, rather than ActionButton's JSON dry-run/confirm flow) since the
+// payload is a multipart file upload, not a plain JSON body.
+export function AvatarModal({ kind, id, onClose, onDone }: { kind: AvatarModalKind; id: number; onClose: () => void; onDone: () => void }) {
+  const [file, setFile] = useState<File | null>(null);
+  const [previewURL, setPreviewURL] = useState("");
+  const [reason, setReason] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (!file) {
+      setPreviewURL("");
+      return;
+    }
+    const url = URL.createObjectURL(file);
+    setPreviewURL(url);
+    return () => URL.revokeObjectURL(url);
+  }, [file]);
+
+  async function submit() {
+    if (!file) {
+      setError("Choose an image file first.");
+      return;
+    }
+    if (!reason.trim()) {
+      setError("Please enter an operation reason");
+      return;
+    }
+    setBusy(true);
+    setError("");
+    try {
+      const idField = kind === "channel" ? "channel_id" : "user_id";
+      const form = new FormData();
+      form.set("metadata", JSON.stringify({ command_id: "", reason: reason.trim(), confirm: true, [idField]: id }));
+      form.set("file", file, file.name);
+      const result = kind === "channel" ? await api.setChannelAvatar(form) : await api.setAccountAvatar(form);
+      if (result.error) {
+        setError(result.error);
+        return;
+      }
+      onDone();
+      onClose();
+    } catch (err) {
+      setError(errorMessage(err));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const noun = kind === "channel" ? "Channel" : "Account";
+
+  return createPortal(
+    <div className="modal-backdrop" role="presentation">
+      <section className="modal command-modal" role="dialog" aria-modal="true" aria-label={"Change avatar"}>
+        <div className="modal-head">
+          <div>
+            <div className="eyebrow">{noun}</div>
+            <h2>{"Change avatar"}</h2>
+          </div>
+          <button className="icon-btn" type="button" onClick={onClose} disabled={busy} aria-label={"Close"}><X size={15} /></button>
+        </div>
+        <div className="command-body">
+          <label className={`gift-file-picker ${file ? "has-file" : ""}`}>
+            <input type="file" accept="image/png,image/jpeg,image/webp" onChange={(event) => setFile(event.target.files?.[0] ?? null)} />
+            {previewURL ? <img className="gift-file-icon" src={previewURL} alt="" style={{ objectFit: "cover" }} /> : <ImagePlus size={22} />}
+            <span className="gift-file-copy"><span className="gift-field-label">{"New avatar"}</span><strong>{file ? file.name : "Choose a JPEG, PNG, or WebP image"}</strong></span>
+            <span className="gift-file-action">{file ? "Change file" : "Choose file"}</span>
+          </label>
+          <label className="gift-reason-field"><span>{"Audit reason"}</span><input value={reason} placeholder={"Briefly describe why this avatar is being changed"} onChange={(event) => setReason(event.target.value)} /></label>
+          {error && <Alert>{error}</Alert>}
+        </div>
+        <div className="modal-actions">
+          <button className="btn" type="button" onClick={onClose} disabled={busy}>{"Close"}</button>
+          <button className="btn primary" type="button" onClick={submit} disabled={busy}>
+            {busy ? <Loader2 className="spin" size={15} /> : <Upload size={15} />}
+            {"Upload avatar"}
+          </button>
+        </div>
+      </section>
+    </div>,
+    document.body
+  );
+}