@tribe-nest/forge 1.13.0

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

@@ -0,0 +1,165 @@
+import { Lock, MessageCircle, Pin } from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { communityMemberName, type CommunityPost } from "../../../data/queries/useCommunity";
+import { CommunityRichText } from "./CommunityRichText";
+import { CommunityMediaGallery } from "./CommunityMediaGallery";
+import { CommunityReactionBar } from "./CommunityReactionBar";
+import { LevelBadge, MemberAvatar } from "./MemberAvatar";
+import { timeAgo } from "./util";
+
+export interface CommunityPostCardProps {
+  post: CommunityPost;
+  /** "feed" renders the full body inline; "forum" renders a compact title row. */
+  variant: "feed" | "forum";
+  onOpen?: (post: CommunityPost) => void;
+  onOpenProfile?: (accountId: string) => void;
+  onReact?: (emoji: string) => void;
+}
+
+/** One post in a space — card (feed spaces) or compact row (forum spaces). */
+export function CommunityPostCard({ post, variant, onOpen, onOpenProfile, onReact }: CommunityPostCardProps) {
+  const t = useThemeTokens();
+  const border = `1px solid ${t.border}`;
+  const author = post.author;
+
+  const meta = (
+    <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
+      <MemberAvatar member={author} size={variant === "feed" ? 36 : 28} onClick={() => author && onOpenProfile?.(author.accountId)} />
+      <div style={{ minWidth: 0 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+          <button
+            onClick={() => author && onOpenProfile?.(author.accountId)}
+            style={{
+              background: "none",
+              border: "none",
+              padding: 0,
+              cursor: "pointer",
+              color: t.text,
+              fontWeight: 600,
+              fontSize: 14,
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+            }}
+          >
+            {communityMemberName(author)}
+          </button>
+          <LevelBadge level={author?.level} />
+          {author?.role === "moderator" && (
+            <span style={{ fontSize: 10, fontWeight: 700, color: t.muted, textTransform: "uppercase" }}>Mod</span>
+          )}
+        </div>
+        <div style={{ fontSize: 12, color: t.muted }}>{timeAgo(post.createdAt)}</div>
+      </div>
+    </div>
+  );
+
+  const badges = (
+    <span style={{ display: "inline-flex", gap: 6, alignItems: "center" }}>
+      {post.isPinned && <Pin size={14} style={{ color: t.primary }} aria-label="Pinned" />}
+      {post.isLocked && <Lock size={14} style={{ color: t.muted }} aria-label="Locked" />}
+    </span>
+  );
+
+  if (variant === "forum") {
+    return (
+      <div
+        style={{
+          border,
+          borderRadius: t.cornerRadius,
+          background: t.surface,
+          padding: "10px 14px",
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+        }}
+      >
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <button
+            onClick={() => onOpen?.(post)}
+            style={{
+              background: "none",
+              border: "none",
+              padding: 0,
+              cursor: "pointer",
+              color: t.text,
+              fontWeight: 700,
+              fontSize: 15,
+              textAlign: "left",
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+            }}
+          >
+            {badges}
+            <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+              {post.title || post.bodyText?.slice(0, 80) || "Untitled"}
+            </span>
+          </button>
+          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 4, fontSize: 12, color: t.muted }}>
+            <span>{communityMemberName(author)}</span>
+            <span>·</span>
+            <span>{timeAgo(post.lastActivityAt ?? post.createdAt)}</span>
+          </div>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 13, color: t.muted, flexShrink: 0 }}>
+          <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
+            <MessageCircle size={14} /> {post.replyCount}
+          </span>
+          <span>{post.reactionCount > 0 ? `${post.reactionCount} 👍` : ""}</span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <article style={{ border, borderRadius: t.cornerRadius, background: t.surface, padding: 16 }}>
+      <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
+        {meta}
+        {badges}
+      </header>
+
+      {post.title && (
+        <h3
+          onClick={() => onOpen?.(post)}
+          style={{
+            margin: "10px 0 4px",
+            fontSize: 17,
+            fontFamily: t.headingFontFamily,
+            color: t.text,
+            cursor: onOpen ? "pointer" : undefined,
+          }}
+        >
+          {post.title}
+        </h3>
+      )}
+
+      <div style={{ marginTop: post.title ? 0 : 10 }}>
+        <CommunityRichText body={post.body} clampLines={8} />
+      </div>
+      <CommunityMediaGallery media={post.media ?? []} />
+
+      <footer style={{ marginTop: 12 }}>
+        <CommunityReactionBar reactions={post.reactions ?? []} onToggle={(emoji) => onReact?.(emoji)}>
+          <button
+            onClick={() => onOpen?.(post)}
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 4,
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              color: t.muted,
+              fontSize: 13,
+              padding: "2px 4px",
+            }}
+          >
+            <MessageCircle size={14} />
+            {post.replyCount > 0 ? `${post.replyCount} ${post.replyCount === 1 ? "reply" : "replies"}` : "Reply"}
+          </button>
+        </CommunityReactionBar>
+      </footer>
+    </article>
+  );
+}

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

@@ -0,0 +1,337 @@
+import { useMemo, useState } from "react";
+import { Flag, Lock } from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useCommunityThread } from "../../headless/community/useCommunityThread";
+import { findReplyNode, type ReplyNode } from "../../headless/community/replyTree";
+import {
+  communityMemberName,
+  useReportCommunityContent,
+  type CommunityReply,
+} from "../../../data/queries/useCommunity";
+import { Loading } from "../Loading";
+import { CommunityComposer } from "./CommunityComposer";
+import { CommunityMediaGallery } from "./CommunityMediaGallery";
+import { CommunityReactionBar } from "./CommunityReactionBar";
+import { CommunityRichText } from "./CommunityRichText";
+import { LevelBadge, MemberAvatar } from "./MemberAvatar";
+import { timeAgo } from "./util";
+
+/** How many nesting levels are RENDERED before "Continue this thread". The
+ * data model nests without limit; this is purely a display cap. */
+export const REPLY_DISPLAY_DEPTH = 3;
+
+export interface CommunityPostDetailProps {
+  postId: string;
+  onOpenProfile?: (accountId: string) => void;
+  /** Receives the post's spaceId so "back" returns to that space's feed
+   * (not the spaces list). May be undefined before the post loads. */
+  onBack?: (spaceId?: string) => void;
+}
+
+/** Full post view: rich body + media, reactions, and the nested reply thread. */
+export function CommunityPostDetail({ postId, onOpenProfile, onBack }: CommunityPostDetailProps) {
+  const t = useThemeTokens();
+  const thread = useCommunityThread(postId);
+  const report = useReportCommunityContent();
+  const border = `1px solid ${t.border}`;
+
+  // "Continue thread" re-roots the rendered tree on a deep reply (Reddit-style).
+  const [threadRootId, setThreadRootId] = useState<string | null>(null);
+  const [replyingTo, setReplyingTo] = useState<string | null>(null);
+  const [reported, setReported] = useState<Set<string>>(new Set());
+
+  const visibleTree = useMemo(() => {
+    if (!threadRootId) return thread.replyTree;
+    const node = findReplyNode(thread.replyTree, threadRootId);
+    return node ? [node] : thread.replyTree;
+  }, [thread.replyTree, threadRootId]);
+
+  if (thread.postLoading) return <Loading />;
+
+  if (!thread.post) {
+    return (
+      <div style={{ border, borderRadius: t.cornerRadius, padding: 32, textAlign: "center", color: t.muted }}>
+        This post is unavailable.
+      </div>
+    );
+  }
+
+  const post = thread.post;
+  const locked = post.isLocked;
+
+  const doReport = (entityId: string, entityType: "community_post" | "community_reply") => {
+    if (reported.has(entityId)) return;
+    report.mutate(
+      { entityId, entityType },
+      { onSuccess: () => setReported((prev) => new Set(prev).add(entityId)) },
+    );
+  };
+
+  const reportButton = (entityId: string, entityType: "community_post" | "community_reply") => (
+    <button
+      onClick={() => doReport(entityId, entityType)}
+      title={reported.has(entityId) ? "Reported" : "Report to moderators"}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        background: "none",
+        border: "none",
+        cursor: reported.has(entityId) ? "default" : "pointer",
+        color: t.muted,
+        fontSize: 12,
+        padding: "2px 4px",
+        opacity: reported.has(entityId) ? 0.6 : 1,
+      }}
+    >
+      <Flag size={12} />
+      {reported.has(entityId) ? "Reported" : "Report"}
+    </button>
+  );
+
+  const submitReply = async (input: {
+    body: unknown;
+    attachments: { url: string; type: "image" | "video" | "audio" | "document" | "other"; size: number; name?: string }[];
+    mentionedAccountIds: string[];
+  }) => {
+    await thread.createReply.mutateAsync({
+      body: input.body,
+      attachments: input.attachments,
+      mentionedAccountIds: input.mentionedAccountIds,
+      parentReplyId: replyingTo ?? undefined,
+    });
+    setReplyingTo(null);
+  };
+
+  const renderNode = (node: ReplyNode, renderedDepth: number): React.ReactNode => {
+    const reply = node.reply;
+    const capped = renderedDepth >= REPLY_DISPLAY_DEPTH - 1 && node.children.length > 0;
+
+    return (
+      <div key={reply.id} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+        <ReplyItem
+          reply={reply}
+          onOpenProfile={onOpenProfile}
+          onReact={(emoji) => thread.react("community_reply", reply.id, emoji)}
+          extraActions={
+            <>
+              {!locked && (
+                <button
+                  onClick={() => setReplyingTo((prev) => (prev === reply.id ? null : reply.id))}
+                  style={{
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    color: t.muted,
+                    fontSize: 12,
+                    padding: "2px 4px",
+                  }}
+                >
+                  Reply
+                </button>
+              )}
+              {reportButton(reply.id, "community_reply")}
+            </>
+          }
+        />
+
+        {replyingTo === reply.id && (
+          <div style={{ marginLeft: 44 }}>
+            <CommunityComposer
+              compact
+              autoFocus
+              placeholder={`Reply to ${communityMemberName(reply.author)}…`}
+              submitLabel="Reply"
+              onSubmit={submitReply}
+              onCancel={() => setReplyingTo(null)}
+            />
+          </div>
+        )}
+
+        {node.children.length > 0 && !capped && (
+          <div style={{ marginLeft: 20, paddingLeft: 16, borderLeft: `2px solid ${t.border}`, display: "flex", flexDirection: "column", gap: 8 }}>
+            {node.children.map((child) => renderNode(child, renderedDepth + 1))}
+          </div>
+        )}
+
+        {capped && (
+          <button
+            onClick={() => setThreadRootId(reply.id)}
+            style={{
+              alignSelf: "flex-start",
+              marginLeft: 44,
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              color: t.primary,
+              fontSize: 13,
+              fontWeight: 600,
+              padding: 0,
+            }}
+          >
+            Continue this thread ({countDescendants(node)} more) →
+          </button>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      {onBack && (
+        <button
+          onClick={() => onBack(thread.post?.spaceId)}
+          style={{
+            alignSelf: "flex-start",
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            color: t.text,
+            fontSize: 14,
+            padding: 0,
+          }}
+        >
+          ← Back
+        </button>
+      )}
+
+      {/* Post */}
+      <article style={{ border, borderRadius: t.cornerRadius, background: t.surface, padding: 18 }}>
+        <header style={{ display: "flex", alignItems: "center", gap: 10 }}>
+          <MemberAvatar member={post.author} size={40} onClick={() => post.author && onOpenProfile?.(post.author.accountId)} />
+          <div style={{ minWidth: 0, flex: 1 }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+              <button
+                onClick={() => post.author && onOpenProfile?.(post.author.accountId)}
+                style={{ background: "none", border: "none", padding: 0, cursor: "pointer", color: t.text, fontWeight: 700, fontSize: 15 }}
+              >
+                {communityMemberName(post.author)}
+              </button>
+              <LevelBadge level={post.author?.level} />
+            </div>
+            <div style={{ fontSize: 12, color: t.muted }}>{timeAgo(post.createdAt)}</div>
+          </div>
+          {locked && (
+            <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 12, color: t.muted }}>
+              <Lock size={12} /> Locked
+            </span>
+          )}
+        </header>
+
+        {post.title && (
+          <h2 style={{ margin: "12px 0 6px", fontSize: 20, fontFamily: t.headingFontFamily, color: t.text }}>{post.title}</h2>
+        )}
+        <div style={{ marginTop: post.title ? 0 : 12 }}>
+          <CommunityRichText body={post.body} />
+        </div>
+        <CommunityMediaGallery media={post.media ?? []} />
+
+        <footer style={{ marginTop: 14 }}>
+          <CommunityReactionBar reactions={post.reactions ?? []} onToggle={(emoji) => thread.react("community_post", post.id, emoji)}>
+            {reportButton(post.id, "community_post")}
+          </CommunityReactionBar>
+        </footer>
+      </article>
+
+      {/* Top-level composer */}
+      {locked ? (
+        <div style={{ border, borderRadius: t.cornerRadius, padding: 14, textAlign: "center", color: t.muted, fontSize: 14 }}>
+          <Lock size={13} style={{ verticalAlign: -2, marginRight: 6 }} />
+          This post is locked — replies are closed.
+        </div>
+      ) : (
+        !replyingTo && <CommunityComposer compact placeholder="Write a reply…" submitLabel="Reply" onSubmit={submitReply} />
+      )}
+
+      {/* Thread */}
+      <section style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <h3 style={{ margin: 0, fontSize: 15, color: t.text }}>
+            {post.replyCount} {post.replyCount === 1 ? "reply" : "replies"}
+          </h3>
+          {threadRootId && (
+            <button
+              onClick={() => setThreadRootId(null)}
+              style={{ background: "none", border: "none", cursor: "pointer", color: t.primary, fontSize: 13, fontWeight: 600 }}
+            >
+              ← View full thread
+            </button>
+          )}
+        </div>
+
+        {thread.repliesLoading && !thread.replies.length ? (
+          <Loading />
+        ) : (
+          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+            {visibleTree.map((node) => renderNode(node, threadRootId ? 0 : node.depth))}
+          </div>
+        )}
+
+        {thread.hasMore && (
+          <button
+            onClick={() => thread.fetchNextPage()}
+            style={{
+              alignSelf: "center",
+              background: "none",
+              border,
+              borderRadius: t.cornerRadius,
+              padding: "6px 14px",
+              cursor: "pointer",
+              color: t.text,
+              fontSize: 13,
+            }}
+          >
+            Load more replies
+          </button>
+        )}
+      </section>
+    </div>
+  );
+}
+
+function countDescendants(node: ReplyNode): number {
+  return node.children.reduce((n, child) => n + 1 + countDescendants(child), 0);
+}
+
+function ReplyItem({
+  reply,
+  onOpenProfile,
+  onReact,
+  extraActions,
+}: {
+  reply: CommunityReply;
+  onOpenProfile?: (accountId: string) => void;
+  onReact: (emoji: string) => void;
+  extraActions?: React.ReactNode;
+}) {
+  const t = useThemeTokens();
+
+  return (
+    <div style={{ display: "flex", gap: 10 }}>
+      <MemberAvatar member={reply.author} size={32} onClick={() => reply.author && onOpenProfile?.(reply.author.accountId)} />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+          <button
+            onClick={() => reply.author && onOpenProfile?.(reply.author.accountId)}
+            style={{ background: "none", border: "none", padding: 0, cursor: "pointer", color: t.text, fontWeight: 600, fontSize: 13 }}
+          >
+            {communityMemberName(reply.author)}
+          </button>
+          <LevelBadge level={reply.author?.level} />
+          <span style={{ fontSize: 11, color: t.muted }}>{timeAgo(reply.createdAt)}</span>
+        </div>
+
+        <div style={{ marginTop: 2 }}>
+          <CommunityRichText body={reply.body} />
+        </div>
+        <CommunityMediaGallery media={reply.media ?? []} />
+
+        <div style={{ marginTop: 6 }}>
+          <CommunityReactionBar reactions={reply.reactions ?? []} onToggle={onReact}>
+            {extraActions}
+          </CommunityReactionBar>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,107 @@
+import { useState } from "react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import type { ReactionSummary } from "../../../data/queries/useCommunity";
+
+/** The default quick-reaction set (👍 doubles as the legacy "like"). */
+export const COMMUNITY_REACTION_EMOJIS = ["👍", "❤️", "🎉", "😂", "😮"] as const;
+
+export interface CommunityReactionBarProps {
+  /** Per-emoji summary rows for THIS entity. */
+  reactions: ReactionSummary[];
+  /** Toggle handler — the backend flips the (member, entity, emoji) reaction. */
+  onToggle: (emoji: string) => void;
+  /** Extra inline actions rendered after the reactions (e.g. reply/report). */
+  children?: React.ReactNode;
+  disabled?: boolean;
+}
+
+/**
+ * Emoji reactions: existing reactions render as count chips (highlighted when
+ * you reacted); the "+" opens the default picker 👍❤️🎉😂😮. Toggle semantics
+ * match POST /public/community/:entityType/:id/react.
+ */
+export function CommunityReactionBar({ reactions, onToggle, children, disabled }: CommunityReactionBarProps) {
+  const t = useThemeTokens();
+  const [pickerOpen, setPickerOpen] = useState(false);
+
+  const chip = (active: boolean): React.CSSProperties => ({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 4,
+    border: `1px solid ${active ? t.primary : t.border}`,
+    background: active ? `${t.primary}1a` : "transparent",
+    color: active ? t.primary : t.text,
+    borderRadius: 999,
+    padding: "2px 8px",
+    fontSize: 13,
+    cursor: disabled ? "default" : "pointer",
+    lineHeight: 1.5,
+  });
+
+  const shown = reactions.filter((r) => r.count > 0);
+
+  return (
+    <div style={{ position: "relative", display: "flex", alignItems: "center", flexWrap: "wrap", gap: 6 }}>
+      {shown.map((r) => (
+        <button
+          key={r.emoji}
+          onClick={() => !disabled && onToggle(r.emoji)}
+          aria-pressed={r.reactedByMe}
+          style={chip(r.reactedByMe)}
+        >
+          <span aria-hidden>{r.emoji}</span>
+          <span style={{ fontWeight: 600 }}>{r.count}</span>
+        </button>
+      ))}
+
+      <button
+        onClick={() => !disabled && setPickerOpen((v) => !v)}
+        aria-label="Add reaction"
+        style={{ ...chip(false), color: t.muted }}
+      >
+        {shown.length ? "+" : "🙂 React"}
+      </button>
+
+      {pickerOpen && (
+        <div
+          style={{
+            position: "absolute",
+            bottom: "calc(100% + 6px)",
+            left: 0,
+            display: "flex",
+            gap: 2,
+            background: t.surface,
+            border: `1px solid ${t.border}`,
+            borderRadius: 999,
+            padding: "4px 6px",
+            boxShadow: "0 4px 16px rgba(0,0,0,0.12)",
+            zIndex: 20,
+          }}
+        >
+          {COMMUNITY_REACTION_EMOJIS.map((emoji) => (
+            <button
+              key={emoji}
+              onClick={() => {
+                onToggle(emoji);
+                setPickerOpen(false);
+              }}
+              aria-label={`React ${emoji}`}
+              style={{
+                background: "transparent",
+                border: "none",
+                fontSize: 18,
+                cursor: "pointer",
+                padding: "2px 4px",
+                borderRadius: 8,
+              }}
+            >
+              {emoji}
+            </button>
+          ))}
+        </div>
+      )}
+
+      {children}
+    </div>
+  );
+}