@tribe-nest/forge 3.59.0 → 3.61.0

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

@@ -0,0 +1,127 @@
+import { Clock, EyeOff } from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useForgeT } from "../../../i18n";
+import { useCommunityModeratorActions } from "../../headless/community/useCommunityModeration";
+import type { CommunityPost, CommunityReply } from "../../../data/queries/useCommunity";
+import { CallHelpHint } from "../../media/CallHelpHint";
+
+export interface CommunityPendingBadgeProps {
+  /** "rejected" shows "Not approved" instead of "Waiting for approval". */
+  status?: "pending" | "rejected";
+  className?: string;
+}
+
+/**
+ * Shown to an author on their own post or reply while it waits for a
+ * moderator. The state is visible; what it means sits behind the `?`.
+ */
+export function CommunityPendingBadge({ status = "pending", className }: CommunityPendingBadgeProps) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  return (
+    <span
+      className={className}
+      data-testid="community-pending-badge"
+      style={{ display: "inline-flex", alignItems: "center", gap: 6 }}
+    >
+      <span
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 4,
+          padding: "2px 8px",
+          borderRadius: 999,
+          background: `${t.primary}1a`,
+          color: t.primary,
+          fontSize: 11,
+          fontWeight: 700,
+          whiteSpace: "nowrap",
+        }}
+      >
+        <Clock size={11} aria-hidden />
+        {tr(
+          status === "rejected"
+            ? "forge.community_moderation_state.rejected"
+            : "forge.community_moderation_state.pending",
+        )}
+      </span>
+      {status === "pending" && (
+        <CallHelpHint label={tr("forge.community_moderation_state.pending_help_label")}>
+          {tr("forge.community_moderation_state.pending_help")}
+        </CallHelpHint>
+      )}
+    </span>
+  );
+}
+
+export type CommunityRemovedNoticeTarget =
+  | { type: "post"; post: Pick<CommunityPost, "id"> }
+  | { type: "reply"; reply: Pick<CommunityReply, "id" | "postId"> };
+
+export interface CommunityRemovedNoticeProps {
+  target: CommunityRemovedNoticeTarget;
+  className?: string;
+}
+
+/**
+ * What a moderator sees in place of a post or reply they just removed, with
+ * the undo right there. After a reload the content is gone from the feed and
+ * the moderation log is the way back.
+ */
+export function CommunityRemovedNotice({ target, className }: CommunityRemovedNoticeProps) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const mod = useCommunityModeratorActions();
+  const isPost = target.type === "post";
+
+  return (
+    <div
+      className={className}
+      data-testid="community-removed-notice"
+      role="status"
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        flexWrap: "wrap",
+        border: `1px dashed ${t.border}`,
+        borderRadius: t.cornerRadius,
+        padding: "10px 14px",
+        color: t.muted,
+        fontSize: 13,
+      }}
+    >
+      <EyeOff size={14} aria-hidden />
+      <span style={{ flex: 1, minWidth: 0 }}>
+        {tr(
+          isPost ? "forge.community_moderation_state.removed_post" : "forge.community_moderation_state.removed_reply",
+        )}
+      </span>
+      {mod.canModerate && (
+        <button
+          type="button"
+          disabled={mod.isPending}
+          onClick={() => (isPost ? mod.restorePost(target.post) : mod.restoreReply(target.reply))}
+          style={{
+            background: "transparent",
+            border: `1px solid ${t.border}`,
+            borderRadius: t.cornerRadius,
+            padding: "4px 12px",
+            cursor: mod.isPending ? "default" : "pointer",
+            color: t.primary,
+            fontWeight: 600,
+            fontSize: 12,
+            opacity: mod.isPending ? 0.6 : 1,
+          }}
+        >
+          {tr("forge.community_moderation_state.restore")}
+        </button>
+      )}
+      {mod.failed && (
+        <span role="alert" style={{ width: "100%", color: t.text, fontWeight: 600, fontSize: 12 }}>
+          {mod.error ?? tr("forge.community_moderation_state.error")}
+        </span>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,317 @@
+import { useEffect, useRef, useState, type CSSProperties } from "react";
+import { Lock, MoreHorizontal, Pin, PinOff, Trash2, Unlock, VolumeX } from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useForgeT } from "../../../i18n";
+import {
+  COMMUNITY_MUTE_DAYS,
+  useCommunityModeratorActions,
+  type CommunityMuteDays,
+} from "../../headless/community/useCommunityModeration";
+import type { CommunityPost, CommunityReply } from "../../../data/queries/useCommunity";
+import { CallHelpHint } from "../../media/CallHelpHint";
+
+export type CommunityModeratorMenuTarget =
+  | { type: "post"; post: CommunityPost }
+  | { type: "reply"; reply: CommunityReply };
+
+export interface CommunityModeratorMenuProps {
+  target: CommunityModeratorMenuTarget;
+  /** Which edge of the trigger the menu lines up with. Default right. */
+  align?: "left" | "right";
+  className?: string;
+}
+
+const MUTE_LABELS: Record<CommunityMuteDays, string> = {
+  1: "forge.community_moderator_menu.mute_1",
+  7: "forge.community_moderator_menu.mute_7",
+  30: "forge.community_moderator_menu.mute_30",
+};
+
+/**
+ * The moderator's "..." on a post or reply: pin and lock (posts), remove with
+ * an optional reason, and mute the author for a day, a week or a month. Renders
+ * nothing for anyone who does not moderate this community. There is no ban
+ * here: only an admin bans, from the dashboard. Built on
+ * `useCommunityModeratorActions`.
+ */
+export function CommunityModeratorMenu({ target, align = "right", className }: CommunityModeratorMenuProps) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const mod = useCommunityModeratorActions();
+  const [open, setOpen] = useState(false);
+  const [view, setView] = useState<"menu" | "remove" | "mute">("menu");
+  const [reason, setReason] = useState("");
+  const [notice, setNotice] = useState<string | null>(null);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  if (!mod.canModerate) return null;
+
+  const isPost = target.type === "post";
+  const authorId = isPost ? target.post.authorAccountId : target.reply.authorAccountId;
+  const canMute = !!authorId && authorId !== mod.currentAccountId;
+
+  const toggle = () => {
+    setOpen((was) => !was);
+    setView("menu");
+    setReason("");
+    setNotice(null);
+    mod.clearError();
+  };
+
+  const finish = async (ok: Promise<boolean>, doneNotice?: string) => {
+    if (await ok) {
+      setOpen(false);
+      setView("menu");
+      setReason("");
+      if (doneNotice) setNotice(doneNotice);
+    }
+  };
+
+  const item: CSSProperties = {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    width: "100%",
+    padding: "8px 10px",
+    background: "transparent",
+    border: "none",
+    borderRadius: t.cornerRadius,
+    cursor: mod.isPending ? "default" : "pointer",
+    color: t.text,
+    fontSize: 13,
+    textAlign: "left",
+    fontFamily: "inherit",
+    opacity: mod.isPending ? 0.6 : 1,
+  };
+  const smallButton: CSSProperties = {
+    background: "transparent",
+    border: `1px solid ${t.border}`,
+    borderRadius: t.cornerRadius,
+    padding: "5px 10px",
+    cursor: "pointer",
+    color: t.text,
+    fontSize: 12,
+    fontFamily: "inherit",
+  };
+  const primaryButton: CSSProperties = {
+    ...smallButton,
+    background: t.primary,
+    color: t.textPrimary,
+    border: "none",
+    fontWeight: 600,
+    opacity: mod.isPending ? 0.6 : 1,
+  };
+
+  return (
+    <div
+      ref={ref}
+      className={className}
+      data-testid="community-moderator-menu"
+      style={{ position: "relative", display: "inline-flex", alignItems: "center", gap: 6 }}
+    >
+      {notice && (
+        <span role="status" style={{ fontSize: 11, color: t.muted }}>
+          {notice}
+        </span>
+      )}
+      <button
+        type="button"
+        onClick={toggle}
+        aria-label={tr("forge.community_moderator_menu.aria_trigger")}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: 28,
+          height: 28,
+          background: open ? `${t.primary}1a` : "transparent",
+          border: "none",
+          borderRadius: 999,
+          cursor: "pointer",
+          color: open ? t.primary : t.muted,
+          padding: 0,
+        }}
+      >
+        <MoreHorizontal size={16} />
+      </button>
+
+      {open && (
+        <div
+          role="menu"
+          style={{
+            position: "absolute",
+            top: "calc(100% + 4px)",
+            ...(align === "left" ? { left: 0 } : { right: 0 }),
+            minWidth: 200,
+            maxWidth: "calc(100vw - 32px)",
+            background: t.surface,
+            color: t.text,
+            border: `1px solid ${t.border}`,
+            borderRadius: t.cornerRadius,
+            boxShadow: "0 10px 30px -12px rgba(0,0,0,0.4)",
+            padding: 6,
+            zIndex: 40,
+            fontFamily: t.fontFamily,
+          }}
+        >
+          {view === "menu" && (
+            <>
+              {isPost && (
+                <button
+                  type="button"
+                  role="menuitem"
+                  disabled={mod.isPending}
+                  style={item}
+                  onClick={() => finish(target.post.isPinned ? mod.unpinPost(target.post) : mod.pinPost(target.post))}
+                >
+                  {target.post.isPinned ? <PinOff size={14} /> : <Pin size={14} />}
+                  {tr(
+                    target.post.isPinned
+                      ? "forge.community_moderator_menu.unpin"
+                      : "forge.community_moderator_menu.pin",
+                  )}
+                </button>
+              )}
+              {isPost && (
+                <button
+                  type="button"
+                  role="menuitem"
+                  disabled={mod.isPending}
+                  style={item}
+                  onClick={() => finish(target.post.isLocked ? mod.unlockPost(target.post) : mod.lockPost(target.post))}
+                >
+                  {target.post.isLocked ? <Unlock size={14} /> : <Lock size={14} />}
+                  {tr(
+                    target.post.isLocked
+                      ? "forge.community_moderator_menu.unlock"
+                      : "forge.community_moderator_menu.lock",
+                  )}
+                </button>
+              )}
+              <button type="button" role="menuitem" style={item} onClick={() => setView("remove")}>
+                <Trash2 size={14} />
+                {tr(
+                  isPost ? "forge.community_moderator_menu.remove_post" : "forge.community_moderator_menu.remove_reply",
+                )}
+              </button>
+              {canMute && (
+                <button type="button" role="menuitem" style={item} onClick={() => setView("mute")}>
+                  <VolumeX size={14} />
+                  {tr("forge.community_moderator_menu.mute_author")}
+                </button>
+              )}
+            </>
+          )}
+
+          {view === "remove" && (
+            <form
+              style={{ display: "flex", flexDirection: "column", gap: 8, padding: 6 }}
+              onSubmit={(e) => {
+                e.preventDefault();
+                if (mod.isPending) return;
+                finish(isPost ? mod.removePost(target.post, reason) : mod.removeReply(target.reply, reason));
+              }}
+            >
+              <label style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 12, fontWeight: 600 }}>
+                {tr("forge.community_moderator_menu.remove_reason_label")}
+                <CallHelpHint label={tr("forge.community_moderator_menu.remove_reason_help_label")}>
+                  {tr("forge.community_moderator_menu.remove_reason_help")}
+                </CallHelpHint>
+              </label>
+              <textarea
+                value={reason}
+                onChange={(e) => setReason(e.target.value)}
+                maxLength={500}
+                rows={2}
+                autoFocus
+                style={{
+                  width: "100%",
+                  boxSizing: "border-box",
+                  padding: "6px 8px",
+                  borderRadius: t.cornerRadius,
+                  border: `1px solid ${t.border}`,
+                  background: t.background,
+                  color: t.text,
+                  fontFamily: "inherit",
+                  fontSize: 13,
+                  resize: "vertical",
+                }}
+              />
+              <div style={{ display: "flex", justifyContent: "flex-end", gap: 6 }}>
+                <button type="button" style={smallButton} onClick={() => setView("menu")}>
+                  {tr("forge.community_moderator_menu.back")}
+                </button>
+                <button type="submit" style={primaryButton} disabled={mod.isPending}>
+                  {tr("forge.community_moderator_menu.remove_confirm")}
+                </button>
+              </div>
+            </form>
+          )}
+
+          {view === "mute" && (
+            <div style={{ display: "flex", flexDirection: "column", gap: 4, padding: 4 }}>
+              <div
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 6,
+                  fontSize: 12,
+                  fontWeight: 600,
+                  padding: "2px 6px",
+                }}
+              >
+                {tr("forge.community_moderator_menu.mute_for")}
+                <CallHelpHint label={tr("forge.community_moderator_menu.mute_help_label")}>
+                  {tr("forge.community_moderator_menu.mute_help")}
+                </CallHelpHint>
+              </div>
+              {COMMUNITY_MUTE_DAYS.map((days) => (
+                <button
+                  key={days}
+                  type="button"
+                  role="menuitem"
+                  disabled={mod.isPending}
+                  style={item}
+                  onClick={() => authorId && finish(mod.muteMember(authorId, days), tr("forge.community_moderator_menu.muted"))}
+                >
+                  {tr(MUTE_LABELS[days])}
+                </button>
+              ))}
+              <button
+                type="button"
+                style={{ ...smallButton, alignSelf: "flex-end", marginTop: 4 }}
+                onClick={() => setView("menu")}
+              >
+                {tr("forge.community_moderator_menu.back")}
+              </button>
+            </div>
+          )}
+
+          {mod.failed && (
+            <p role="alert" style={{ margin: "6px 6px 2px", fontSize: 12, color: t.text, fontWeight: 600 }}>
+              {mod.error ?? tr("forge.community_moderator_menu.error")}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-import { AtSign, Bell, Heart, MessageCircle, ShieldAlert, Sparkles } from "lucide-react";
+import { Award, AtSign, Bell, Heart, MessageCircle, ShieldAlert, Sparkles } from "lucide-react";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
 import {
   useCommunityNotifications,
@@ -6,9 +6,34 @@ import {
   useMarkCommunityNotificationsRead,
   type CommunityNotificationItem,
 } from "../../../data/queries/useCommunity";
+import { useForgeT } from "../../../i18n";
+import {
+  describeModerationNotification,
+  type CommunityModerationOutcome,
+} from "../../headless/community/useCommunityModeration";
 import { Loading } from "../Loading";
 import { timeAgo } from "./util";
 
+/** The level a `level_up` notice announces, or null when it carries none we can read. */
+export function levelUpLevel(n: Pick<CommunityNotificationItem, "type" | "data">): number | null {
+  if (n.type !== "level_up") return null;
+  const level = Number((n.data as { level?: unknown } | null | undefined)?.level);
+  return Number.isInteger(level) && level > 0 ? level : null;
+}
+
+/** "Your post was approved" / "Your reply wasn't approved: <reason>". */
+function moderationOutcomeKey(o: CommunityModerationOutcome): string {
+  if (o.outcome === "approved") {
+    return o.subject === "post" ? "forge.community_notifications.post_approved" : "forge.community_notifications.reply_approved";
+  }
+  if (o.reason) {
+    return o.subject === "post"
+      ? "forge.community_notifications.post_rejected_reason"
+      : "forge.community_notifications.reply_rejected_reason";
+  }
+  return o.subject === "post" ? "forge.community_notifications.post_rejected" : "forge.community_notifications.reply_rejected";
+}
+
 // ── Bell ─────────────────────────────────────────────────────────────────────
 
 export interface CommunityNotificationsBellProps {
@@ -90,6 +115,8 @@ function NotificationIcon({ type }: { type: string }) {
       return <Sparkles {...props} />;
     case "mod":
       return <ShieldAlert {...props} />;
+    case "level_up":
+      return <Award {...props} />;
     default:
       return <Bell {...props} />;
   }
@@ -97,8 +124,9 @@ function NotificationIcon({ type }: { type: string }) {
 
 export interface CommunityNotificationsInboxProps {
   /** Post notifications (entityType community_post) navigate here. Reply
-   * notifications carry only the reply id — no public reply→post resolver yet,
-   * so they render without navigation. */
+   * notifications carry only the reply id (no public reply to post resolver
+   * yet), so they render without navigation. Neither does a post that was not
+   * approved: nobody can open it. */
   onOpenPost?: (postId: string) => void;
 }
 
@@ -149,7 +177,10 @@ export function CommunityNotificationsInbox({ onOpenPost }: CommunityNotificatio
               key={n.id}
               notification={n}
               onOpen={
-                n.entityType === "community_post" && n.entityId && onOpenPost
+                n.entityType === "community_post" &&
+                n.entityId &&
+                onOpenPost &&
+                describeModerationNotification(n)?.outcome !== "rejected"
                   ? () => {
                       if (!n.readAt) markRead.mutate([n.id]);
                       onOpenPost(n.entityId!);
@@ -175,7 +206,19 @@ function NotificationRow({
   onMarkRead?: () => void;
 }) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   const unread = !notification.readAt;
+  // A moderation outcome on the member's own post or reply. A mute notice
+  // (a `mod` about the community itself) has none and keeps its old copy.
+  const outcome = describeModerationNotification(notification);
+  const level = levelUpLevel(notification);
+  const title = outcome
+    ? tr(moderationOutcomeKey(outcome), { reason: outcome.reason ?? "" })
+    : notification.type === "level_up"
+      ? level !== null
+        ? tr("forge.community_notifications.level_up", { level })
+        : tr("forge.community_notifications.level_up_no_level")
+      : (NOTIFICATION_COPY[notification.type] ?? "Community update");
 
   return (
     <div
@@ -209,8 +252,11 @@ function NotificationRow({
         <NotificationIcon type={notification.type} />
       </span>
       <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{ fontSize: 14, fontWeight: unread ? 600 : 400, color: t.text }}>
-          {NOTIFICATION_COPY[notification.type] ?? "Community update"}
+        <div
+          data-testid="community-notification-title"
+          style={{ fontSize: 14, fontWeight: unread ? 600 : 400, color: t.text, overflowWrap: "anywhere" }}
+        >
+          {title}
         </div>
         <div style={{ fontSize: 12, color: t.muted }}>{timeAgo(notification.createdAt)}</div>
       </div>