The first commit, the core and all files is adding to repo

components/Moderation.tsx

@@ -0,0 +1,134 @@
+"use client";
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import { api } from "./StartGame";
+type ReviewMap = {
+  id: string;
+  name: string;
+  description: string;
+  state: string;
+  source: string;
+  panorama_count: number;
+  map: string | null;
+  image: string | null;
+};
+export function Moderation() {
+  const [maps, setMaps] = useState<ReviewMap[]>([]),
+    [reports, setReports] = useState<
+      { id: string; dataset_id: string; reason: string }[]
+    >([]),
+    [error, setError] = useState(""),
+    [busy, setBusy] = useState(false),
+    [reasons, setReasons] = useState<Record<string, string>>({});
+  async function load() {
+    try {
+      const d = await api<{ maps: ReviewMap[]; reports: typeof reports }>(
+        "moderation",
+      );
+      setMaps(d.maps);
+      setReports(d.reports);
+    } catch (e) {
+      setError((e as Error).message);
+    }
+  }
+  useEffect(() => {
+    load();
+  }, []);
+  async function decide(datasetId: string, decision: string) {
+    setBusy(true);
+    setError("");
+    try {
+      await api("moderation", {
+        datasetId,
+        decision,
+        reason: reasons[datasetId] || undefined,
+      });
+      await load();
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return (
+    <>
+      {error && (
+        <p role="alert" className="error-message">
+          {error}
+        </p>
+      )}
+      {!maps.length && !error && (
+        <p className="muted">The review queue is clear.</p>
+      )}
+      {maps.map((m) => (
+        <article className="tool-card" key={m.id}>
+          <span className="badge">{m.state}</span>
+          <h2>{m.name}</h2>
+          <p className="muted">
+            {m.source} · {m.panorama_count} locations · {m.description}
+          </p>
+          {m.map && (
+            <Image
+              src={m.map}
+              width={512}
+              height={512}
+              alt="Map for moderator review"
+              unoptimized
+              style={{ maxWidth: "100%", height: "auto" }}
+            />
+          )}
+          <label className="field">
+            Review reason
+            <textarea
+              value={reasons[m.id] || ""}
+              onChange={(e) =>
+                setReasons((s) => ({ ...s, [m.id]: e.target.value }))
+              }
+            />
+          </label>
+          <div className="inline-actions">
+            {m.state === "review" ? (
+              <>
+                <button
+                  className="button primary"
+                  disabled={busy}
+                  onClick={() => decide(m.id, "approve")}
+                >
+                  Approve map
+                </button>
+                <button
+                  className="button"
+                  disabled={busy || !reasons[m.id]?.trim()}
+                  onClick={() => decide(m.id, "reject")}
+                >
+                  Return with feedback
+                </button>
+              </>
+            ) : (
+              <button
+                className="button"
+                disabled={busy}
+                onClick={() => decide(m.id, "unpublish")}
+              >
+                Unpublish
+              </button>
+            )}
+          </div>
+        </article>
+      ))}
+      {reports.length > 0 && (
+        <section className="token-box">
+          <h2>Community reports</h2>
+          {reports.map((r) => (
+            <article className="draft-row" key={r.id}>
+              <div>
+                <code>{r.dataset_id}</code>
+                <p>{r.reason}</p>
+              </div>
+            </article>
+          ))}
+        </section>
+      )}
+    </>
+  );
+}