Add community content reports, map bans, and appeals

components/ReportContent.tsx

@@ -0,0 +1,168 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import { api } from "./StartGame";
+import { reportCategories } from "@/shared/moderation";
+
+export function ReportContent({
+  datasetId,
+  sessionId,
+  round,
+}: {
+  datasetId?: string;
+  sessionId?: string;
+  round?: number;
+}) {
+  const [open, setOpen] = useState(false);
+  const [target, setTarget] = useState("map");
+  const [category, setCategory] = useState("broken");
+  const [reason, setReason] = useState("");
+  const [evidenceUrl, setEvidenceUrl] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+  const dialog = useRef<HTMLDialogElement>(null);
+  useEffect(() => {
+    if (!open) return;
+    const element = dialog.current;
+    const previousFocus =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    element?.showModal();
+    return () => {
+      element?.close();
+      previousFocus?.focus();
+    };
+  }, [open]);
+  async function submit(event: React.FormEvent) {
+    event.preventDefault();
+    setBusy(true);
+    setError("");
+    try {
+      await api("reports", {
+        datasetId,
+        sessionId,
+        round,
+        target,
+        category,
+        reason,
+        evidenceUrl: evidenceUrl.trim() || undefined,
+      });
+      setMessage(
+        "Report sent for moderator review. Only confirmed reports count toward the three-report map ban.",
+      );
+      setOpen(false);
+      setReason("");
+      setEvidenceUrl("");
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return (
+    <>
+      <button
+        className="button"
+        onClick={() => {
+          setOpen(true);
+          setError("");
+          setMessage("");
+        }}
+      >
+        Report content
+      </button>
+      {message && (
+        <p role="status" className="success-message">
+          {message}
+        </p>
+      )}
+      {open && (
+        <dialog
+          ref={dialog}
+          className="report-dialog"
+          aria-labelledby="report-title"
+          onCancel={() => setOpen(false)}
+        >
+          <form onSubmit={submit}>
+            <h2 id="report-title">Report content</h2>
+            <p className="muted">
+              Sign in to send a report. A moderator reviews the content and your
+              explanation. Three confirmed reports unpublish the map until an
+              owner appeal is approved.
+            </p>
+            <label className="field">
+              What are you reporting?
+              <select
+                value={target}
+                onChange={(e) => setTarget(e.target.value)}
+              >
+                <option value="map">Entire map</option>
+                {sessionId && (
+                  <option value="panorama">
+                    This panorama (round {(round ?? 0) + 1})
+                  </option>
+                )}
+              </select>
+            </label>
+            <label className="field">
+              Reason
+              <select
+                value={category}
+                onChange={(e) => setCategory(e.target.value)}
+              >
+                {Object.entries(reportCategories).map(([value, label]) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className="field">
+              What happened?
+              <textarea
+                required
+                minLength={10}
+                maxLength={2000}
+                value={reason}
+                onChange={(e) => setReason(e.target.value)}
+                placeholder="Describe the problem and where to find it."
+              />
+            </label>
+            <label className="field">
+              Evidence link (optional)
+              <input
+                type="url"
+                maxLength={1000}
+                value={evidenceUrl}
+                onChange={(e) => setEvidenceUrl(e.target.value)}
+                placeholder="https://…"
+              />
+            </label>
+            {error && (
+              <p role="alert" className="error-message">
+                {error}
+              </p>
+            )}
+            <div className="inline-actions">
+              <button
+                className="button primary"
+                disabled={busy || reason.trim().length < 10}
+              >
+                {busy ? "Sending…" : "Send report"}
+              </button>
+              <button
+                type="button"
+                className="button"
+                disabled={busy}
+                onClick={() => setOpen(false)}
+              >
+                Cancel
+              </button>
+            </div>
+          </form>
+        </dialog>
+      )}
+    </>
+  );
+}