@tribe-nest/forge 3.59.0 → 3.61.0

package/src/ui/styled/community/CommunityModeration.tsx

@@ -0,0 +1,587 @@
+import { useState, type CSSProperties, type ReactNode } from "react";
+import { Flag, History, ShieldCheck } from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useForgeT } from "../../../i18n";
+import {
+  describeHoldReason,
+  useCommunityModeration,
+  type CommunityReportResolution,
+} from "../../headless/community/useCommunityModeration";
+import type {
+  CommunityModerationLogEntry,
+  CommunityModerationReport,
+  CommunityPendingPost,
+  CommunityPendingReply,
+} from "../../../data/queries/useCommunityModeration";
+import { CallHelpHint } from "../../media/CallHelpHint";
+import { Loading } from "../Loading";
+import { timeAgo } from "./util";
+
+export interface CommunityModerationProps {
+  /** Opens a post (a reported post, or a held reply's post). Omitted, rows do not link. */
+  onOpenPost?: (postId: string) => void;
+  /** Log page size. Default 20. */
+  logPageSize?: number;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const LOG_ACTION_KEYS: Record<string, string> = {
+  hold: "forge.community_moderation.action_hold",
+  approve: "forge.community_moderation.action_approve",
+  reject: "forge.community_moderation.action_reject",
+  pin: "forge.community_moderation.action_pin",
+  unpin: "forge.community_moderation.action_unpin",
+  lock: "forge.community_moderation.action_lock",
+  unlock: "forge.community_moderation.action_unlock",
+  remove: "forge.community_moderation.action_remove",
+  restore: "forge.community_moderation.action_restore",
+  mute: "forge.community_moderation.action_mute",
+  unmute: "forge.community_moderation.action_unmute",
+  ban: "forge.community_moderation.action_ban",
+  unban: "forge.community_moderation.action_unban",
+  role_member: "forge.community_moderation.action_role_member",
+  role_moderator: "forge.community_moderation.action_role_moderator",
+  adjust_points: "forge.community_moderation.action_adjust_points",
+  report_resolved: "forge.community_moderation.action_report_resolved",
+  report_resolved_hidden: "forge.community_moderation.action_report_resolved_hidden",
+  report_dismissed: "forge.community_moderation.action_report_dismissed",
+};
+
+/**
+ * The Moderation tab of a community's member home, for its moderators (and
+ * the profile's owners and admins): open reports to resolve or dismiss, posts
+ * and replies held for approval, and the moderation log with an undo on every
+ * removal. Shows nothing but a notice to anyone else, and the server refuses
+ * them regardless. Built on `useCommunityModeration`.
+ */
+export function CommunityModeration({ onOpenPost, logPageSize, className, style }: CommunityModerationProps) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const mod = useCommunityModeration({ logPageSize });
+  const border = `1px solid ${t.border}`;
+
+  if (mod.isChecking) return <Loading />;
+
+  if (!mod.canModerate) {
+    return (
+      <div
+        className={className}
+        style={{ border, borderRadius: t.cornerRadius, padding: 28, textAlign: "center", color: t.muted, ...style }}
+      >
+        {tr("forge.community_moderation.not_moderator")}
+      </div>
+    );
+  }
+
+  const held = mod.pendingPosts.length + mod.pendingReplies.length;
+  const rowError = (id: string) =>
+    mod.error?.id === id ? (
+      <p role="alert" style={{ margin: 0, fontSize: 12, color: t.text, fontWeight: 600 }}>
+        {mod.error.message ?? tr("forge.community_moderation.error")}
+      </p>
+    ) : null;
+
+  return (
+    <div
+      className={className}
+      data-testid="community-moderation"
+      style={{ display: "flex", flexDirection: "column", gap: 22, color: t.text, ...style }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        <h2
+          style={{
+            margin: 0,
+            fontSize: 18,
+            fontFamily: t.headingFontFamily,
+            color: t.text,
+            display: "flex",
+            alignItems: "center",
+            gap: 8,
+          }}
+        >
+          <ShieldCheck size={18} style={{ color: t.primary }} /> {tr("forge.community_moderation.title")}
+        </h2>
+        <CallHelpHint label={tr("forge.community_moderation.help_label")}>
+          {tr("forge.community_moderation.help")}
+        </CallHelpHint>
+      </div>
+
+      {mod.queueError && (
+        <p role="alert" style={{ margin: 0, fontSize: 13, color: t.text, fontWeight: 600 }}>
+          {tr("forge.community_moderation.queue_error")}
+        </p>
+      )}
+
+      {/* Reports */}
+      <Section
+        testId="community-moderation-reports"
+        icon={<Flag size={15} />}
+        title={tr("forge.community_moderation.reports_title", { count: mod.reportsTotal })}
+        help={
+          <CallHelpHint label={tr("forge.community_moderation.reports_help_label")}>
+            {tr("forge.community_moderation.reports_help")}
+          </CallHelpHint>
+        }
+      >
+        {mod.isLoading ? (
+          <Loading />
+        ) : mod.reports.length === 0 ? (
+          <Empty>{tr("forge.community_moderation.reports_empty")}</Empty>
+        ) : (
+          mod.reports.map((report) => (
+            <ReportRow
+              key={report.id}
+              report={report}
+              busy={mod.busyId === report.id}
+              onOpenPost={onOpenPost}
+              onResolve={(resolution) => mod.resolveReport(report.id, resolution)}
+              error={rowError(report.id)}
+            />
+          ))
+        )}
+      </Section>
+
+      {/* Held for approval */}
+      <Section
+        testId="community-moderation-held"
+        icon={<ShieldCheck size={15} />}
+        title={tr("forge.community_moderation.held_title", { count: held })}
+        help={
+          <CallHelpHint label={tr("forge.community_moderation.held_help_label")}>
+            {tr("forge.community_moderation.held_help")}
+          </CallHelpHint>
+        }
+      >
+        {mod.isLoading ? (
+          <Loading />
+        ) : held === 0 ? (
+          <Empty>{tr("forge.community_moderation.held_empty")}</Empty>
+        ) : (
+          <>
+            {mod.pendingPosts.map((item) => (
+              <HeldRow
+                key={item.id}
+                kind={tr("forge.community_moderation.held_kind_post", { space: item.spaceName ?? "" })}
+                item={item}
+                busy={mod.busyId === item.id}
+                onApprove={() => mod.approvePost(item)}
+                onReject={(reason) => mod.rejectPost(item, reason)}
+                error={rowError(item.id)}
+              />
+            ))}
+            {mod.pendingReplies.map((item) => (
+              <HeldRow
+                key={item.id}
+                kind={tr("forge.community_moderation.held_kind_reply", {
+                  post: item.postTitle || tr("forge.community_moderation.held_untitled"),
+                })}
+                item={item}
+                busy={mod.busyId === item.id}
+                onOpen={onOpenPost ? () => onOpenPost(item.postId) : undefined}
+                onApprove={() => mod.approveReply(item)}
+                onReject={(reason) => mod.rejectReply(item, reason)}
+                error={rowError(item.id)}
+              />
+            ))}
+          </>
+        )}
+      </Section>
+
+      {/* Log */}
+      <Section
+        testId="community-moderation-log"
+        icon={<History size={15} />}
+        title={tr("forge.community_moderation.log_title")}
+      >
+        {mod.log.isLoading ? (
+          <Loading />
+        ) : mod.log.entries.length === 0 ? (
+          <Empty>{tr("forge.community_moderation.log_empty")}</Empty>
+        ) : (
+          mod.log.entries.map((entry) => (
+            <LogRow
+              key={entry.id}
+              entry={entry}
+              canRestore={mod.log.restorable.has(entry.id)}
+              busy={mod.busyId === entry.id}
+              onRestore={() => mod.log.restore(entry)}
+              error={rowError(entry.id)}
+            />
+          ))
+        )}
+        {(mod.log.hasPreviousPage || mod.log.hasNextPage) && (
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, marginTop: 4 }}>
+            <PagerButton disabled={!mod.log.hasPreviousPage} onClick={mod.log.previousPage}>
+              {tr("forge.community_moderation.previous")}
+            </PagerButton>
+            <span style={{ fontSize: 12, color: t.muted }}>
+              {tr("forge.community_moderation.page", { page: mod.log.page })}
+            </span>
+            <PagerButton disabled={!mod.log.hasNextPage} onClick={mod.log.nextPage}>
+              {tr("forge.community_moderation.next")}
+            </PagerButton>
+          </div>
+        )}
+      </Section>
+    </div>
+  );
+}
+
+// ── Pieces ───────────────────────────────────────────────────────────────────
+
+function Section({
+  testId,
+  icon,
+  title,
+  help,
+  children,
+}: {
+  testId: string;
+  icon: ReactNode;
+  title: string;
+  help?: ReactNode;
+  children: ReactNode;
+}) {
+  const t = useThemeTokens();
+  return (
+    <section data-testid={testId} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+        <span style={{ color: t.primary, display: "inline-flex" }} aria-hidden>
+          {icon}
+        </span>
+        <h3 style={{ margin: 0, fontSize: 15, color: t.text }}>{title}</h3>
+        {help}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+function Empty({ children }: { children: ReactNode }) {
+  const t = useThemeTokens();
+  return (
+    <div
+      style={{
+        border: `1px solid ${t.border}`,
+        borderRadius: t.cornerRadius,
+        padding: 18,
+        textAlign: "center",
+        color: t.muted,
+        fontSize: 13,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function useRowStyles() {
+  const t = useThemeTokens();
+  const card: CSSProperties = {
+    border: `1px solid ${t.border}`,
+    borderRadius: t.cornerRadius,
+    background: t.surface,
+    padding: "12px 14px",
+    display: "flex",
+    flexDirection: "column",
+    gap: 6,
+  };
+  const button = (busy: boolean, primary = false): CSSProperties => ({
+    background: primary ? t.primary : "transparent",
+    color: primary ? t.textPrimary : t.text,
+    border: primary ? "none" : `1px solid ${t.border}`,
+    borderRadius: t.cornerRadius,
+    padding: "5px 12px",
+    fontSize: 12,
+    fontWeight: 600,
+    cursor: busy ? "default" : "pointer",
+    opacity: busy ? 0.6 : 1,
+    fontFamily: "inherit",
+  });
+  const meta: CSSProperties = { fontSize: 12, color: t.muted };
+  const quote: CSSProperties = {
+    margin: 0,
+    fontSize: 13,
+    color: t.text,
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+    borderLeft: `2px solid ${t.border}`,
+    paddingLeft: 10,
+  };
+  return { t, card, button, meta, quote };
+}
+
+function ReportRow({
+  report,
+  busy,
+  onOpenPost,
+  onResolve,
+  error,
+}: {
+  report: CommunityModerationReport;
+  busy: boolean;
+  onOpenPost?: (postId: string) => void;
+  onResolve: (resolution: CommunityReportResolution) => void;
+  error: ReactNode;
+}) {
+  const tr = useForgeT();
+  const { t, card, button, meta, quote } = useRowStyles();
+  const isPost = report.entityType === "community_post";
+  // The post to open: the reported post, or the reported reply's post. A hidden
+  // post cannot be opened; a hidden reply's post still can. Older servers send
+  // no `postId`, so a post report falls back to its own id.
+  const postId = report.postId ?? (isPost ? report.entityId : null);
+  const openPostId = isPost && report.contentHidden ? null : postId;
+  const reporter =
+    `${report.reporterFirstName ?? ""} ${report.reporterLastName ?? ""}`.trim() ||
+    tr("forge.community_moderation.unknown_member");
+
+  return (
+    <div data-testid="community-moderation-report" style={card}>
+      <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+        <span style={{ fontSize: 12, fontWeight: 700, color: t.text }}>
+          {tr(isPost ? "forge.community_moderation.report_kind_post" : "forge.community_moderation.report_kind_reply")}
+        </span>
+        <span style={meta}>{tr("forge.community_moderation.reported_by", { name: reporter })}</span>
+        <span style={meta}>{timeAgo(report.createdAt)}</span>
+        {report.contentHidden && (
+          <span style={{ ...meta, fontWeight: 600 }}>{tr("forge.community_moderation.content_hidden")}</span>
+        )}
+      </div>
+      {report.contentPreview && <p style={quote}>{report.contentPreview}</p>}
+      {report.reason && (
+        <p style={{ margin: 0, fontSize: 13 }}>
+          {tr("forge.community_moderation.report_reason", { reason: report.reason })}
+        </p>
+      )}
+      <div className="fg:flex fg:flex-wrap fg:items-center fg:gap-2">
+        <button type="button" disabled={busy} style={button(busy, true)} onClick={() => onResolve("resolve")}>
+          {tr("forge.community_moderation.resolve")}
+        </button>
+        {!report.contentHidden && (
+          <button type="button" disabled={busy} style={button(busy)} onClick={() => onResolve("resolve_and_hide")}>
+            {tr("forge.community_moderation.resolve_hide")}
+          </button>
+        )}
+        <button type="button" disabled={busy} style={button(busy)} onClick={() => onResolve("dismiss")}>
+          {tr("forge.community_moderation.dismiss")}
+        </button>
+        {openPostId && onOpenPost && (
+          <button
+            type="button"
+            onClick={() => onOpenPost(openPostId)}
+            style={{ ...button(false), border: "none", color: t.primary }}
+          >
+            {tr("forge.community_moderation.open_post")}
+          </button>
+        )}
+      </div>
+      {error}
+    </div>
+  );
+}
+
+function HeldRow({
+  kind,
+  item,
+  busy,
+  onOpen,
+  onApprove,
+  onReject,
+  error,
+}: {
+  kind: string;
+  item: (CommunityPendingPost | CommunityPendingReply) & { title?: string | null };
+  busy: boolean;
+  onOpen?: () => void;
+  onApprove: () => void;
+  onReject: (reason: string) => Promise<boolean>;
+  error: ReactNode;
+}) {
+  const tr = useForgeT();
+  const { t, card, button, meta, quote } = useRowStyles();
+  const [rejecting, setRejecting] = useState(false);
+  const [reason, setReason] = useState("");
+  const hold = describeHoldReason(item.moderationReason);
+  const holdLabel =
+    hold?.kind === "new_member"
+      ? tr("forge.community_moderation.reason_new_member")
+      : hold?.kind === "all_posts"
+        ? tr("forge.community_moderation.reason_all_posts")
+        : hold?.kind === "keyword"
+          ? tr("forge.community_moderation.reason_keyword", { word: hold.word })
+          : hold?.kind === "other"
+            ? hold.raw
+            : null;
+
+  return (
+    <div data-testid="community-moderation-held-item" style={card}>
+      <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+        <span style={{ fontSize: 12, fontWeight: 700, color: t.text }}>{kind}</span>
+        <span style={meta}>
+          {tr("forge.community_moderation.by_author", {
+            name: item.authorName || tr("forge.community_moderation.unknown_member"),
+          })}
+        </span>
+        <span style={meta}>{timeAgo(item.createdAt)}</span>
+        {holdLabel && (
+          <span
+            data-testid="community-moderation-hold-reason"
+            style={{
+              padding: "1px 8px",
+              borderRadius: 999,
+              background: `${t.primary}1a`,
+              color: t.primary,
+              fontSize: 11,
+              fontWeight: 700,
+            }}
+          >
+            {holdLabel}
+          </span>
+        )}
+      </div>
+      {item.title && <div style={{ fontWeight: 700, fontSize: 14 }}>{item.title}</div>}
+      {item.bodyText && <p style={quote}>{item.bodyText}</p>}
+
+      {rejecting ? (
+        <form
+          style={{ display: "flex", flexDirection: "column", gap: 6 }}
+          onSubmit={async (e) => {
+            e.preventDefault();
+            if (busy) return;
+            if (await onReject(reason)) {
+              setRejecting(false);
+              setReason("");
+            }
+          }}
+        >
+          <label style={{ fontSize: 12, fontWeight: 600 }}>
+            {tr("forge.community_moderation.reject_reason_label")}
+            <textarea
+              value={reason}
+              onChange={(e) => setReason(e.target.value)}
+              maxLength={500}
+              rows={2}
+              autoFocus
+              style={{
+                display: "block",
+                width: "100%",
+                marginTop: 4,
+                boxSizing: "border-box",
+                padding: "6px 8px",
+                borderRadius: t.cornerRadius,
+                border: `1px solid ${t.border}`,
+                background: t.background,
+                color: t.text,
+                fontFamily: "inherit",
+                fontSize: 13,
+                fontWeight: 400,
+                resize: "vertical",
+              }}
+            />
+          </label>
+          <div className="fg:flex fg:flex-wrap fg:items-center fg:gap-2">
+            <button type="submit" disabled={busy} style={button(busy, true)}>
+              {tr("forge.community_moderation.reject_confirm")}
+            </button>
+            <button type="button" style={button(false)} onClick={() => setRejecting(false)}>
+              {tr("forge.community_moderation.cancel")}
+            </button>
+          </div>
+        </form>
+      ) : (
+        <div className="fg:flex fg:flex-wrap fg:items-center fg:gap-2">
+          <button type="button" disabled={busy} style={button(busy, true)} onClick={onApprove}>
+            {tr("forge.community_moderation.approve")}
+          </button>
+          <button type="button" disabled={busy} style={button(busy)} onClick={() => setRejecting(true)}>
+            {tr("forge.community_moderation.reject")}
+          </button>
+          {onOpen && (
+            <button type="button" onClick={onOpen} style={{ ...button(false), border: "none", color: t.primary }}>
+              {tr("forge.community_moderation.open_post")}
+            </button>
+          )}
+        </div>
+      )}
+      {error}
+    </div>
+  );
+}
+
+function LogRow({
+  entry,
+  canRestore,
+  busy,
+  onRestore,
+  error,
+}: {
+  entry: CommunityModerationLogEntry;
+  canRestore: boolean;
+  busy: boolean;
+  onRestore: () => void;
+  error: ReactNode;
+}) {
+  const tr = useForgeT();
+  const { t, button, meta } = useRowStyles();
+  const actor = entry.actorAccountId
+    ? entry.actorName || tr("forge.community_moderation.unknown_member")
+    : tr("forge.community_moderation.log_actor_system");
+  const subject =
+    entry.entityType === "community_post"
+      ? tr("forge.community_moderation.log_kind_post")
+      : entry.entityType === "community_reply"
+        ? tr("forge.community_moderation.log_kind_reply")
+        : null;
+
+  return (
+    <div
+      data-testid="community-moderation-log-entry"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+        padding: "8px 0",
+        borderBottom: `1px solid ${t.border}`,
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", fontSize: 13 }}>
+        <span style={{ fontWeight: 700 }}>{actor}</span>
+        <span>{tr(LOG_ACTION_KEYS[entry.action] ?? "forge.community_moderation.action_other")}</span>
+        {subject && <span style={meta}>{subject}</span>}
+        {entry.targetName && (
+          <span style={meta}>{tr("forge.community_moderation.log_target", { name: entry.targetName })}</span>
+        )}
+        <span style={{ ...meta, marginLeft: "auto" }}>{timeAgo(entry.createdAt)}</span>
+      </div>
+      {entry.reason && (
+        <div style={{ fontSize: 12, color: t.muted }}>
+          {tr("forge.community_moderation.log_reason", { reason: entry.reason })}
+        </div>
+      )}
+      {canRestore && (
+        <div>
+          <button type="button" disabled={busy} style={button(busy)} onClick={onRestore}>
+            {tr("forge.community_moderation.restore")}
+          </button>
+        </div>
+      )}
+      {error}
+    </div>
+  );
+}
+
+function PagerButton({ disabled, onClick, children }: { disabled: boolean; onClick: () => void; children: ReactNode }) {
+  const { button } = useRowStyles();
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onClick}
+      style={{ ...button(disabled), opacity: disabled ? 0.4 : 1 }}
+    >
+      {children}
+    </button>
+  );
+}