Add map community reactions, comments, and moderation

components/CommunityModeration.tsx

@@ -0,0 +1,193 @@
+"use client";
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { api } from "@/lib/client-api";
+import {
+  communityCategories,
+  type CommunityReportView,
+} from "@/shared/community";
+import { useI18n } from "./I18nProvider";
+
+type Queue = { reports: CommunityReportView[]; nextCursor: string | null };
+export function CommunityModeration() {
+  const { t } = useI18n();
+  const [queue, setQueue] = useState<Queue | null>(null);
+  const [reasons, setReasons] = useState<Record<string, string>>({});
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  async function load() {
+    setQueue(await api<Queue>("moderation/community-reports"));
+  }
+  useEffect(() => {
+    let active = true;
+    api<Queue>("moderation/community-reports")
+      .then((result) => {
+        if (active) setQueue(result);
+      })
+      .catch((e) => {
+        if (active) setError(e.message);
+      });
+    return () => {
+      active = false;
+    };
+  }, []);
+  async function act(action: () => Promise<unknown>) {
+    setBusy(true);
+    setError("");
+    try {
+      await action();
+      await load();
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function more() {
+    if (queue?.nextCursor == null) return;
+    setBusy(true);
+    setError("");
+    try {
+      const next = await api<Queue>(
+        `moderation/community-reports?cursor=${encodeURIComponent(queue.nextCursor)}`,
+      );
+      setQueue((current) => ({
+        ...next,
+        reports: [
+          ...(current?.reports ?? []),
+          ...next.reports.filter(
+            (r) => !current?.reports.some((old) => old.id === r.id),
+          ),
+        ],
+      }));
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return (
+    <section className="token-box">
+      <h2>{t("Comment and account reports")}</h2>
+      <p className="muted">
+        {t(
+          "Review the evidence before taking action. Resolving a report does not automatically ban an account or remove a comment.",
+        )}
+      </p>
+      {error && (
+        <p role="alert" className="error-message">
+          {t(error)}{" "}
+          <button
+            className="button"
+            disabled={busy}
+            onClick={() => act(async () => {})}
+          >
+            {t("Try again")}
+          </button>
+        </p>
+      )}
+      {!queue && !error && <p role="status">{t("Loading review queue…")}</p>}
+      {queue?.reports.length === 0 && (
+        <p>{t("No open comment or account reports.")}</p>
+      )}
+      {queue?.reports.map((report) => (
+        <article className="tool-card" key={report.id}>
+          <h3>
+            {t(
+              report.target === "comment"
+                ? "Reported comment"
+                : "Reported account",
+            )}{" "}
+            · {t(communityCategories[report.category])}
+          </h3>
+          {report.target === "account" && (
+            <p>
+              {report.accountName ?? t("Deleted player")} ·{" "}
+              <code>{report.account_id}</code>
+            </p>
+          )}
+          {report.comment && (
+            <>
+              <blockquote className="community-body">
+                {report.comment.body}
+              </blockquote>
+              <p>
+                <Link
+                  className="button"
+                  href={`/servers/${report.comment.dataset_id}`}
+                >
+                  {t("Open map")}
+                </Link>{" "}
+                {report.comment.removed_at ? (
+                  t("Comment removed.")
+                ) : (
+                  <button
+                    className="button"
+                    disabled={busy}
+                    onClick={() =>
+                      act(() =>
+                        api(
+                          `community/comments/${report.comment_id}`,
+                          undefined,
+                          "DELETE",
+                        ),
+                      )
+                    }
+                  >
+                    {t("Remove comment")}
+                  </button>
+                )}
+              </p>
+              <p className="muted">
+                {t("Account ID:")}{" "}
+                <code>{report.comment.author_id ?? t("Deleted player")}</code>
+              </p>
+            </>
+          )}
+          <p className="community-body">{report.reason}</p>
+          <label className="field">
+            {t("Decision reason")}
+            <textarea
+              minLength={10}
+              maxLength={2000}
+              value={reasons[report.id] ?? ""}
+              onChange={(e) =>
+                setReasons((current) => ({
+                  ...current,
+                  [report.id]: e.target.value,
+                }))
+              }
+            />
+          </label>
+          <div className="inline-actions">
+            {(["resolved", "dismissed"] as const).map((decision) => (
+              <button
+                key={decision}
+                className="button"
+                disabled={busy || (reasons[report.id]?.trim().length ?? 0) < 10}
+                onClick={() =>
+                  act(() =>
+                    api(
+                      `moderation/community-reports/${report.id}`,
+                      { decision, reason: reasons[report.id] },
+                      "PATCH",
+                    ),
+                  )
+                }
+              >
+                {t(
+                  decision === "resolved" ? "Resolve report" : "Dismiss report",
+                )}
+              </button>
+            ))}
+          </div>
+        </article>
+      ))}
+      {queue?.nextCursor != null && (
+        <button className="button" disabled={busy} onClick={more}>
+          {t("Load more reports")}
+        </button>
+      )}
+    </section>
+  );
+}

components/MapCommunity.tsx

@@ -0,0 +1,251 @@
+"use client";
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { ThumbsUp, ThumbsDown, Trash2 } from "lucide-react";
+import { api } from "@/lib/client-api";
+import type { MapCommunityView } from "@/shared/community";
+import { useI18n } from "./I18nProvider";
+import { Username } from "./Username";
+import { ReportCommunity } from "./ReportCommunity";
+
+export function MapCommunity({
+  datasetId,
+  ownerId,
+}: {
+  datasetId: string;
+  ownerId: string | null;
+}) {
+  const { t, locale } = useI18n();
+  const [data, setData] = useState<MapCommunityView | null>(null);
+  const [body, setBody] = useState("");
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+  const [busy, setBusy] = useState(false);
+  async function refresh() {
+    const result = await api<MapCommunityView>(`maps/${datasetId}/community`);
+    setData(result);
+  }
+  useEffect(() => {
+    let active = true;
+    api<MapCommunityView>(`maps/${datasetId}/community`)
+      .then((result) => {
+        if (active) {
+          setData(result);
+          setError("");
+        }
+      })
+      .catch((e) => {
+        if (active) setError(e.message);
+      });
+    return () => {
+      active = false;
+    };
+  }, [datasetId]);
+  async function act(action: () => Promise<unknown>, success?: string) {
+    setBusy(true);
+    setError("");
+    setMessage("");
+    try {
+      await action();
+      if (success) setMessage(success);
+      await refresh();
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  async function more() {
+    if (data?.nextCursor == null) return;
+    setBusy(true);
+    setError("");
+    try {
+      const next = await api<MapCommunityView>(
+        `maps/${datasetId}/community?cursor=${encodeURIComponent(data.nextCursor)}`,
+      );
+      setData((current) =>
+        current
+          ? {
+              ...next,
+              comments: [
+                ...current.comments,
+                ...next.comments.filter(
+                  (c) =>
+                    !current.comments.some((existing) => existing.id === c.id),
+                ),
+              ],
+            }
+          : next,
+      );
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return (
+    <section
+      className="map-community tool-card"
+      aria-label={t("Map community")}
+    >
+      <h2>{t("Map community")}</h2>
+      {error && (
+        <p role="alert" className="error-message">
+          {t(error)}{" "}
+          <button
+            className="button"
+            disabled={busy}
+            onClick={() => act(async () => {})}
+          >
+            {t("Try again")}
+          </button>
+        </p>
+      )}
+      {!data && !error && <p role="status">{t("Loading comments…")}</p>}
+      {data && (
+        <>
+          <div
+            className="inline-actions"
+            role="group"
+            aria-label={t("Map reactions")}
+          >
+            <button
+              className="button"
+              aria-pressed={data.reaction === 1}
+              disabled={!data.viewer || busy}
+              onClick={() =>
+                act(() =>
+                  api(`maps/${datasetId}/reaction`, {
+                    value: data.reaction === 1 ? 0 : 1,
+                  }),
+                )
+              }
+            >
+              <ThumbsUp size={18} aria-hidden="true" /> {t("Like")}{" "}
+              <span>{data.likes}</span>
+            </button>
+            <button
+              className="button"
+              aria-pressed={data.reaction === -1}
+              disabled={!data.viewer || busy}
+              onClick={() =>
+                act(() =>
+                  api(`maps/${datasetId}/reaction`, {
+                    value: data.reaction === -1 ? 0 : -1,
+                  }),
+                )
+              }
+            >
+              <ThumbsDown size={18} aria-hidden="true" /> {t("Dislike")}{" "}
+              <span>{data.dislikes}</span>
+            </button>
+            {data.viewer && ownerId && ownerId !== data.viewer.id && (
+              <ReportCommunity target="account" targetId={ownerId} />
+            )}
+          </div>
+          {!data.viewer && (
+            <p>
+              <Link className="button" href="/log-in">
+                {t("Sign in to react, comment, or report.")}
+              </Link>
+            </p>
+          )}
+          <h3>{t("Comments")}</h3>
+          {data.viewer && (
+            <form
+              onSubmit={(e) => {
+                e.preventDefault();
+                act(async () => {
+                  await api(`maps/${datasetId}/comments`, { body });
+                  setBody("");
+                }, "Comment published.");
+              }}
+            >
+              <label className="field">
+                {t("Write a comment")}
+                <textarea
+                  required
+                  maxLength={2000}
+                  value={body}
+                  onChange={(e) => setBody(e.target.value)}
+                  placeholder={t("Share your thoughts about this map.")}
+                />
+              </label>
+              <button
+                className="button primary"
+                disabled={busy || !body.trim()}
+              >
+                {t(busy ? "Saving…" : "Publish comment")}
+              </button>
+            </form>
+          )}
+          {message && (
+            <p role="status" className="success-message">
+              {t(message)}
+            </p>
+          )}
+          {!data.comments.length && (
+            <p className="muted">
+              {t("No comments yet. Be the first to share your thoughts.")}
+            </p>
+          )}
+          <div className="map-comments">
+            {data.comments.map((comment) => (
+              <article className="map-comment" key={comment.id}>
+                <div className="map-comment-meta">
+                  <Username
+                    name={comment.author}
+                    appearance={comment.appearance}
+                  />
+                  <time className="muted" dateTime={comment.created_at}>
+                    {new Date(comment.created_at).toLocaleString(
+                      locale === "ru" ? "ru-RU" : "en-GB",
+                    )}
+                  </time>
+                </div>
+                <p className="community-body">{comment.body}</p>
+                {data.viewer && (
+                  <div className="inline-actions">
+                    <ReportCommunity target="comment" targetId={comment.id} />
+                    {comment.author_id &&
+                      comment.author_id !== data.viewer.id && (
+                        <ReportCommunity
+                          target="account"
+                          targetId={comment.author_id}
+                        />
+                      )}
+                    {data.viewer.canModerate && (
+                      <button
+                        className="button"
+                        disabled={busy}
+                        onClick={() =>
+                          act(
+                            () =>
+                              api(
+                                `community/comments/${comment.id}`,
+                                undefined,
+                                "DELETE",
+                              ),
+                            "Comment removed.",
+                          )
+                        }
+                      >
+                        <Trash2 size={15} aria-hidden="true" />{" "}
+                        {t("Remove comment")}
+                      </button>
+                    )}
+                  </div>
+                )}
+              </article>
+            ))}
+          </div>
+          {data.nextCursor !== null && (
+            <button className="button" disabled={busy} onClick={more}>
+              {t("Load more comments")}
+            </button>
+          )}
+        </>
+      )}
+    </section>
+  );
+}

components/Moderation.tsx

@@ -14,6 +14,7 @@ import { isAdministrator, type StaffRole } from "@/shared/permissions";
 import { DiscordIntegration } from "./DiscordIntegration";
 import { AccountControls } from "./AccountControls";
 import { PrometheusIntegration } from "./PrometheusIntegration";
+import { CommunityModeration } from "./CommunityModeration";
 type ReviewMap = {
   id: string;
   name: string;
@@ -127,6 +128,7 @@ export function Moderation({
   }
   return (
     <>
+      {role && <CommunityModeration />}
       {role && (
         <AccountControls
           administrator={administrator}

components/ReportCommunity.tsx

@@ -0,0 +1,133 @@
+"use client";
+import { useEffect, useId, useRef, useState } from "react";
+import { Flag } from "lucide-react";
+import { api } from "@/lib/client-api";
+import { communityCategories } from "@/shared/community";
+import { useI18n } from "./I18nProvider";
+
+export function ReportCommunity({
+  target,
+  targetId,
+}: {
+  target: "comment" | "account";
+  targetId: string;
+}) {
+  const { t } = useI18n();
+  const titleId = useId();
+  const dialog = useRef<HTMLDialogElement>(null);
+  const [open, setOpen] = useState(false);
+  const [category, setCategory] = useState("spam");
+  const [reason, setReason] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [message, setMessage] = useState("");
+  const label = target === "comment" ? "Report comment" : "Report account";
+  useEffect(() => {
+    if (!open) return;
+    const previous =
+      document.activeElement instanceof HTMLElement
+        ? document.activeElement
+        : null;
+    const element = dialog.current;
+    element?.showModal();
+    return () => {
+      element?.close();
+      previous?.focus();
+    };
+  }, [open]);
+  async function submit(event: React.FormEvent) {
+    event.preventDefault();
+    setBusy(true);
+    setError("");
+    try {
+      await api("community/reports", { target, targetId, category, reason });
+      setMessage("Report sent for moderator review.");
+      setOpen(false);
+      setReason("");
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return (
+    <>
+      <button
+        className="button"
+        onClick={() => {
+          setOpen(true);
+          setError("");
+          setMessage("");
+        }}
+      >
+        <Flag size={15} aria-hidden="true" /> {t(label)}
+      </button>
+      {message && (
+        <span role="status" className="success-message">
+          {t(message)}
+        </span>
+      )}
+      {open && (
+        <dialog
+          ref={dialog}
+          className="report-dialog"
+          aria-labelledby={titleId}
+          onCancel={() => setOpen(false)}
+        >
+          <form onSubmit={submit}>
+            <h2 id={titleId}>{t(label)}</h2>
+            <p className="muted">
+              {t(
+                "A moderator will review your report. Reports do not automatically remove content or ban accounts.",
+              )}
+            </p>
+            <label className="field">
+              {t("Reason")}
+              <select
+                value={category}
+                onChange={(e) => setCategory(e.target.value)}
+              >
+                {Object.entries(communityCategories).map(([value, label]) => (
+                  <option key={value} value={value}>
+                    {t(label)}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <label className="field">
+              {t("What happened?")}
+              <textarea
+                required
+                minLength={10}
+                maxLength={2000}
+                value={reason}
+                onChange={(e) => setReason(e.target.value)}
+              />
+            </label>
+            {error && (
+              <p role="alert" className="error-message">
+                {t(error)}
+              </p>
+            )}
+            <div className="inline-actions">
+              <button
+                className="button primary"
+                disabled={busy || reason.trim().length < 10}
+              >
+                {t(busy ? "Sending…" : "Send report")}
+              </button>
+              <button
+                type="button"
+                className="button"
+                disabled={busy}
+                onClick={() => setOpen(false)}
+              >
+                {t("Cancel")}
+              </button>
+            </div>
+          </form>
+        </dialog>
+      )}
+    </>
+  );
+}