Add live account appeal updates and restricted status settings

components/AccountAppeal.tsx

@@ -8,6 +8,7 @@ import type {
   AccountAppealRecord,
 } from "@/shared/account-controls";
 import styles from "@/app/ban/appeal/page.module.css";
+import { useAppealRealtime } from "./useAppealRealtime";
 
 export function AccountAppeal() {
   const { locale } = useI18n();
@@ -22,13 +23,28 @@ export function AccountAppeal() {
   const [reason, setReason] = useState("");
   const [busy, setBusy] = useState(false);
   const lock = useRef(false);
+  const statusReads = useRef(0);
+  const realtime = useAppealRealtime({
+    enabled: Boolean(data?.account.id),
+    ownerId: data?.account.id,
+    refresh: async () => {
+      const version = ++statusReads.current;
+      const result = await api<{
+        account: ManagedAccount;
+        appeals: AccountAppealRecord[];
+      }>("ban/appeal");
+      if (version === statusReads.current) setData(result);
+    },
+    onError: (error) => setError((error as Error).message),
+  });
   useEffect(() => {
     let active = true;
+    const version = ++statusReads.current;
     api<{ account: ManagedAccount; appeals: AccountAppealRecord[] }>(
       "ban/appeal",
     )
       .then((result) => {
-        if (active) setData(result);
+        if (active && version === statusReads.current) setData(result);
       })
       .catch((e) => {
         if (active) setError((e as Error).message);
@@ -55,8 +71,15 @@ export function AccountAppeal() {
     }
   }
   async function reload() {
-    setData(await api("ban/appeal"));
-    setLoading(false);
+    const version = ++statusReads.current;
+    const result = await api<{
+      account: ManagedAccount;
+      appeals: AccountAppealRecord[];
+    }>("ban/appeal");
+    if (version === statusReads.current) {
+      setData(result);
+      setLoading(false);
+    }
   }
   const current = data?.appeals.find(
     (a) => a.status_version === data.account.status_version,
@@ -107,6 +130,21 @@ export function AccountAppeal() {
           {l("Read the guide", "Открыть руководство")}
         </Link>
       </div>
+      {data && (
+        <p className="muted" style={{ marginTop: 20 }}>
+          {realtime === "live"
+            ? l(
+                "Live updates connected",
+                "Обновления в реальном времени подключены",
+              )
+            : realtime === "offline"
+              ? l(
+                  "Reconnecting… Refresh remains available.",
+                  "Переподключение… Можно обновить вручную.",
+                )
+              : l("Connecting live updates…", "Подключение обновлений…")}
+        </p>
+      )}
       {data && (
         <>
           <div className={styles.record} style={{ marginTop: 32 }}>
@@ -138,8 +176,8 @@ export function AccountAppeal() {
             ) : (
               <p>
                 {l(
-                  "Normal account access, uploads and API keys are blocked. You can still read the docs, view this page and sign out.",
-                  "Обычный доступ к аккаунту, загрузки и ключи API заблокированы. Вы можете читать документацию, открывать эту страницу и выходить из аккаунта.",
+                  "Normal account access, uploads and API keys are blocked. You can still read the docs, view your status in Settings, use this page and sign out.",
+                  "Обычный доступ к аккаунту, загрузки и ключи API заблокированы. Вы можете читать документацию, видеть статус в настройках, открывать эту страницу и выходить из аккаунта.",
                 )}
               </p>
             )}