@tribe-nest/forge 3.60.0 → 3.61.0

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

@@ -0,0 +1,250 @@
+import { useId, type CSSProperties } from "react";
+import { BarChart3, Check } from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useForgeLocale, useForgeT } from "../../../i18n";
+import { pollOptionPercent, useCommunityPoll } from "../../headless/community/communityPoll";
+import type { CommunityPost } from "../../../data/queries/useCommunity";
+
+export interface CommunityPollCardProps {
+  /** The post the poll rides on. Its title is the question. */
+  post: Pick<CommunityPost, "id" | "spaceId" | "title" | "poll">;
+  /** Read-only, for a post still waiting for approval. */
+  disabled?: boolean;
+}
+
+const VOTE_ERROR_KEY = {
+  closed: "forge.community_poll_card.error_closed",
+  invalid: "forge.community_poll_card.error_invalid",
+  forbidden: "forge.community_poll_card.error_forbidden",
+  generic: "forge.community_poll_card.error_generic",
+} as const;
+
+/** A close time in the viewer's locale and time zone. */
+function formatCloseTime(iso: string, locale: string): string {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return "";
+  return date.toLocaleString(locale === "de" ? "de-DE" : "en-US", { dateStyle: "medium", timeStyle: "short" });
+}
+
+/**
+ * A post's poll: pick one option (radio) or several (checkboxes), vote, change
+ * the vote or withdraw it. Counts show as bars once this viewer may see them;
+ * until then the card says when they will. A closed poll shows its final
+ * state and takes no votes. Built on `useCommunityPoll`.
+ */
+export function CommunityPollCard({ post, disabled }: CommunityPollCardProps) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const locale = useForgeLocale();
+  const state = useCommunityPoll(post, { disabled });
+  const name = useId();
+  const poll = state.poll;
+  if (!poll) return null;
+
+  const border = `1px solid ${t.border}`;
+  const options = [...poll.options].sort((a, b) => a.position - b.position);
+  const showCounts = poll.resultsVisible && !state.choosing;
+  const question = post.title?.trim() || tr("forge.community_poll_card.untitled");
+
+  const ghost: CSSProperties = {
+    background: "none",
+    border,
+    borderRadius: t.cornerRadius,
+    padding: "6px 12px",
+    cursor: state.pending ? "default" : "pointer",
+    color: t.text,
+    fontSize: 13,
+    opacity: state.pending ? 0.6 : 1,
+  };
+  const primary: CSSProperties = {
+    background: t.primary,
+    color: t.textPrimary,
+    border: "none",
+    borderRadius: t.cornerRadius,
+    padding: "6px 16px",
+    fontWeight: 600,
+    fontSize: 13,
+    cursor: state.canSubmit ? "pointer" : "not-allowed",
+    opacity: state.canSubmit ? 1 : 0.6,
+  };
+
+  const statusLine: string[] = [];
+  if (poll.totalVoters !== null) {
+    statusLine.push(
+      poll.totalVoters === 1
+        ? tr("forge.community_poll_card.voters_one")
+        : tr("forge.community_poll_card.voters_other", { count: poll.totalVoters }),
+    );
+  }
+  if (poll.closed) statusLine.push(tr("forge.community_poll_card.closed"));
+  else if (poll.closesAt) {
+    statusLine.push(tr("forge.community_poll_card.closes_at", { date: formatCloseTime(poll.closesAt, locale) }));
+  }
+  if (poll.multipleChoice && state.choosing) statusLine.push(tr("forge.community_poll_card.pick_several"));
+
+  return (
+    <form
+      data-testid="community-poll"
+      onSubmit={(e) => {
+        e.preventDefault();
+        if (state.canSubmit) void state.submit();
+      }}
+      style={{ marginTop: 12 }}
+    >
+      <fieldset
+        disabled={!state.choosing || state.pending}
+        style={{ border, borderRadius: t.cornerRadius, padding: 12, margin: 0, minWidth: 0 }}
+      >
+        <legend
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "0 4px",
+            fontSize: 13,
+            fontWeight: 600,
+            color: t.text,
+          }}
+        >
+          <BarChart3 size={14} aria-hidden style={{ color: t.primary }} />
+          {/* The post shows the question as its title just above, so the
+              legend reads "Poll" on screen and names the question for a
+              screen reader. */}
+          <span aria-hidden>{tr("forge.community_poll_card.label")}</span>
+          <span className="fg:sr-only">{question}</span>
+        </legend>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+          {options.map((option) => {
+            const mine = poll.myVotes.includes(option.id);
+            const percent = pollOptionPercent(option.votes, poll.totalVoters);
+            const inputId = `${name}-${option.id}`;
+
+            if (state.choosing) {
+              const selected = state.isSelected(option.id);
+              return (
+                <label
+                  key={option.id}
+                  htmlFor={inputId}
+                  data-testid="community-poll-option"
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    padding: "8px 10px",
+                    border: `1px solid ${selected ? t.primary : t.border}`,
+                    borderRadius: t.cornerRadius,
+                    background: selected ? `${t.primary}0d` : t.background,
+                    color: t.text,
+                    fontSize: 14,
+                    cursor: "pointer",
+                  }}
+                >
+                  <input
+                    id={inputId}
+                    type={poll.multipleChoice ? "checkbox" : "radio"}
+                    name={name}
+                    value={option.id}
+                    checked={selected}
+                    onChange={() => state.toggle(option.id)}
+                    style={{ accentColor: t.primary, margin: 0 }}
+                  />
+                  <span style={{ flex: 1, minWidth: 0, overflowWrap: "anywhere" }}>{option.label}</span>
+                  {poll.resultsVisible && percent !== null && (
+                    <span style={{ fontSize: 12, color: t.muted }}>{`${percent}%`}</span>
+                  )}
+                </label>
+              );
+            }
+
+            return (
+              <div
+                key={option.id}
+                data-testid="community-poll-result"
+                style={{
+                  position: "relative",
+                  overflow: "hidden",
+                  padding: "8px 10px",
+                  border: `1px solid ${mine ? t.primary : t.border}`,
+                  borderRadius: t.cornerRadius,
+                  background: t.background,
+                  color: t.text,
+                  fontSize: 14,
+                }}
+              >
+                {showCounts && percent !== null && (
+                  <span
+                    aria-hidden
+                    data-testid="community-poll-bar"
+                    style={{
+                      position: "absolute",
+                      inset: 0,
+                      width: `${percent}%`,
+                      background: `${t.primary}${mine ? "33" : "1a"}`,
+                    }}
+                  />
+                )}
+                <span style={{ position: "relative", display: "flex", alignItems: "center", gap: 8 }}>
+                  {mine && <Check size={14} style={{ color: t.primary, flexShrink: 0 }} aria-hidden />}
+                  <span style={{ flex: 1, minWidth: 0, overflowWrap: "anywhere", fontWeight: mine ? 600 : 400 }}>
+                    {option.label}
+                    {mine && <span className="fg:sr-only">{` ${tr("forge.community_poll_card.your_vote")}`}</span>}
+                  </span>
+                  {showCounts && percent !== null && (
+                    <span style={{ fontSize: 13, fontWeight: 600 }}>{`${percent}%`}</span>
+                  )}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      </fieldset>
+
+      {!poll.resultsVisible && (
+        <p data-testid="community-poll-hidden" style={{ margin: "8px 0 0", fontSize: 12, color: t.muted }}>
+          {state.hiddenReason === "after_close"
+            ? tr("forge.community_poll_card.results_after_close")
+            : tr("forge.community_poll_card.results_after_vote")}
+        </p>
+      )}
+
+      {state.error && (
+        <p role="alert" style={{ margin: "8px 0 0", fontSize: 12, color: "#dc2626" }}>
+          {tr(VOTE_ERROR_KEY[state.error])}
+        </p>
+      )}
+
+      <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap", marginTop: 8 }}>
+        <span data-testid="community-poll-status" style={{ flex: 1, minWidth: 140, fontSize: 12, color: t.muted }}>
+          {statusLine.join(" · ")}
+        </span>
+        {state.choosing && (
+          <>
+            {state.changing && (
+              <button type="button" onClick={state.cancelChange} disabled={state.pending} style={ghost}>
+                {tr("forge.community_poll_card.cancel")}
+              </button>
+            )}
+            <button type="submit" disabled={!state.canSubmit} style={primary}>
+              {state.pending
+                ? tr("forge.community_poll_card.sending")
+                : state.changing
+                  ? tr("forge.community_poll_card.update_vote")
+                  : tr("forge.community_poll_card.vote")}
+            </button>
+          </>
+        )}
+        {!state.choosing && state.canVote && state.hasVoted && (
+          <>
+            <button type="button" onClick={state.startChange} disabled={state.pending} style={ghost}>
+              {tr("forge.community_poll_card.change_vote")}
+            </button>
+            <button type="button" onClick={() => void state.withdraw()} disabled={state.pending} style={ghost}>
+              {tr("forge.community_poll_card.withdraw")}
+            </button>
+          </>
+        )}
+      </div>
+    </form>
+  );
+}

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

@@ -1,10 +1,16 @@
-import { Lock, MessageCircle, Pin } from "lucide-react";
+import { BarChart3, Link2, Lock, MessageCircle, Pin } from "lucide-react";
+import { useForgeT } from "../../../i18n";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
-import { communityMemberName, type CommunityPost } from "../../../data/queries/useCommunity";
+import { communityMemberName, isCommunityContentPending, type CommunityPost } from "../../../data/queries/useCommunity";
 import { CommunityRichText } from "./CommunityRichText";
 import { CommunityMediaGallery } from "./CommunityMediaGallery";
+import { CommunityPollCard } from "./CommunityPollCard";
+import { CommunityLinkPreview } from "./CommunityLinkPreview";
 import { CommunityReactionBar } from "./CommunityReactionBar";
+import { CommunityModeratorMenu } from "./CommunityModeratorMenu";
+import { CommunityPendingBadge, CommunityRemovedNotice } from "./CommunityModerationState";
 import { LevelBadge, MemberAvatar } from "./MemberAvatar";
+import { CommunityAgentAvatar, CommunityAgentName, CommunityAgentThinking } from "./CommunityAgent";
 import { timeAgo } from "./util";
 
 export interface CommunityPostCardProps {
@@ -14,15 +20,41 @@ export interface CommunityPostCardProps {
   onOpen?: (post: CommunityPost) => void;
   onOpenProfile?: (accountId: string) => void;
   onReact?: (emoji: string) => void;
+  /**
+   * The community AI is writing an answer under this post: its name, for the
+   * "thinking" line. Leave unset when it is not.
+   */
+  agentThinking?: { name?: string | null } | null;
 }
 
-/** One post in a space — card (feed spaces) or compact row (forum spaces). */
-export function CommunityPostCard({ post, variant, onOpen, onOpenProfile, onReact }: CommunityPostCardProps) {
+/**
+ * One post in a space: a card (feed spaces) or a compact row (forum spaces).
+ * The author sees "Waiting for approval" on their own held post, which cannot
+ * be replied to or reacted to yet. A moderator gets the actions menu, and a
+ * post they just removed collapses to an undo.
+ */
+export function CommunityPostCard({ post, variant, onOpen, onOpenProfile, onReact, agentThinking }: CommunityPostCardProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   const border = `1px solid ${t.border}`;
   const author = post.author;
+  // The community AI wrote it: its name and badge, never the "Member" fallback.
+  const agent = post.agentAuthor ?? null;
+  const pending = isCommunityContentPending(post);
 
-  const meta = (
+  if (post.archivedAt) return <CommunityRemovedNotice target={{ type: "post", post }} />;
+
+  const moderatorMenu = <CommunityModeratorMenu target={{ type: "post", post }} />;
+
+  const meta = agent ? (
+    <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
+      <CommunityAgentAvatar agent={agent} size={variant === "feed" ? 36 : 28} />
+      <div style={{ minWidth: 0 }}>
+        <CommunityAgentName agent={agent} />
+        <div style={{ fontSize: 12, color: t.muted }}>{timeAgo(post.createdAt)}</div>
+      </div>
+    </div>
+  ) : (
     <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 }}>
@@ -58,8 +90,26 @@ export function CommunityPostCard({ post, variant, onOpen, onOpenProfile, onReac
     <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" />}
+      {/* The compact forum row has no room for the poll itself: it opens in the thread. */}
+      {variant === "forum" && post.poll && (
+        <BarChart3 size={14} style={{ color: t.primary }} aria-label={tr("forge.community_post_card.has_poll")} />
+      )}
+      {/* Nor for a link card: a small mark says there is one to open. */}
+      {variant === "forum" && post.linkPreview && (
+        <Link2
+          size={14}
+          data-testid="community-post-link-icon"
+          style={{ color: t.muted }}
+          aria-label={tr("forge.community_post_card.has_link")}
+        />
+      )}
     </span>
   );
+  const statusBadge = pending ? (
+    <CommunityPendingBadge />
+  ) : post.status === "rejected" ? (
+    <CommunityPendingBadge status="rejected" />
+  ) : null;
 
   if (variant === "forum") {
     return (
@@ -96,17 +146,28 @@ export function CommunityPostCard({ post, variant, onOpen, onOpenProfile, onReac
               {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>
+          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 4, fontSize: 12, color: t.muted, flexWrap: "wrap" }}>
+            {agent ? <CommunityAgentName agent={agent} fontSize={12} fontWeight={500} /> : <span>{communityMemberName(author)}</span>}
             <span>·</span>
             <span>{timeAgo(post.lastActivityAt ?? post.createdAt)}</span>
+            {statusBadge}
           </div>
+          {agentThinking && (
+            <div style={{ marginTop: 4 }}>
+              <CommunityAgentThinking name={agentThinking.name} />
+            </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>
+          {!pending && (
+            <>
+              <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
+                <MessageCircle size={14} /> {post.replyCount}
+              </span>
+              <span>{post.reactionCount > 0 ? `${post.reactionCount} 👍` : ""}</span>
+            </>
+          )}
+          {moderatorMenu}
         </div>
       </div>
     );
@@ -116,7 +177,11 @@ export function CommunityPostCard({ post, variant, onOpen, onOpenProfile, onReac
     <article style={{ border, borderRadius: t.cornerRadius, background: t.surface, padding: 16 }}>
       <header style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 8 }}>
         {meta}
-        {badges}
+        <span style={{ display: "inline-flex", alignItems: "center", gap: 8, flexShrink: 0 }}>
+          {statusBadge}
+          {badges}
+          {moderatorMenu}
+        </span>
       </header>
 
       {post.title && (
@@ -135,31 +200,42 @@ export function CommunityPostCard({ post, variant, onOpen, onOpenProfile, onReac
       )}
 
       <div style={{ marginTop: post.title ? 0 : 10 }}>
-        <CommunityRichText body={post.body} clampLines={8} />
+        <CommunityRichText body={post.body} clampLines={8} linkify={!!agent} />
       </div>
       <CommunityMediaGallery media={post.media ?? []} />
+      <CommunityLinkPreview preview={post.linkPreview} />
+      {/* A held post shows its poll but takes no votes until it is approved. */}
+      {post.poll && <CommunityPollCard post={post} disabled={pending} />}
 
-      <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>
+      {/* A held post takes no replies or reactions until it is approved. */}
+      {!pending && (
+        <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>
+      )}
+      {agentThinking && (
+        <div style={{ marginTop: 8 }}>
+          <CommunityAgentThinking name={agentThinking.name} />
+        </div>
+      )}
     </article>
   );
 }