@tribe-nest/forge 3.60.0 → 3.63.0

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

@@ -1,9 +1,15 @@
 import { useEffect, useId, useRef, useState } from "react";
-import { Bold, Italic, Underline, List, ListOrdered, Link as LinkIcon, PenLine } from "lucide-react";
+import { BarChart3, Bold, Italic, Underline, List, ListOrdered, Link as LinkIcon, PenLine, Plus, X } from "lucide-react";
+import { useForgeT } from "../../../i18n";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
 import { formatBytes } from "../../headless/chat/attachmentKind";
 import { useCommunityAttachmentUpload } from "../../headless/community/useCommunityAttachmentUpload";
 import { useRichMentionComposer, type RichCommand } from "../../headless/community/useRichMentionComposer";
+import {
+  COMMUNITY_POLL_LIMITS,
+  buildPollPayload,
+  useCommunityPollDraft,
+} from "../../headless/community/communityPoll";
 // Forge's own `?` disclosure. It is named for the call screen it was first built
 // for, but it is a plain button + panel over the theme tokens with no media
 // dependency, so every styled surface uses it rather than growing a second one.
@@ -11,18 +17,50 @@ import { useRichMentionComposer, type RichCommand } from "../../headless/communi
 // is not a Forge dependency and would not resolve on a real creator site.
 import { CallHelpHint } from "../../media/CallHelpHint";
 import { MemberAvatar } from "./MemberAvatar";
-import type { CommunityAttachmentInput } from "../../../data/queries/useCommunity";
+import { CommunityAgentAvatar, CommunityAgentName } from "./CommunityAgent";
+import type {
+  CommunityAttachmentInput,
+  CommunityPollInput,
+  CommunityPollResultsVisibility,
+} from "../../../data/queries/useCommunity";
 
 export interface CommunityComposerSubmit {
   title?: string;
   body: unknown;
   attachments: CommunityAttachmentInput[];
   mentionedAccountIds: string[];
+  /** Present when the member attached a poll. `title` is then its question. */
+  poll?: CommunityPollInput;
 }
 
+const POLL_ERROR_KEY: Record<string, string> = {
+  question_required: "forge.community_composer.poll_question_required",
+  question_too_long: "forge.community_composer.poll_question_too_long",
+  option_empty: "forge.community_composer.poll_option_empty",
+  option_too_long: "forge.community_composer.poll_option_too_long",
+  option_duplicate: "forge.community_composer.poll_option_duplicate",
+  options_too_few: "forge.community_composer.poll_options_too_few",
+  options_too_many: "forge.community_composer.poll_options_too_many",
+  closes_invalid: "forge.community_composer.poll_closes_invalid",
+  closes_in_past: "forge.community_composer.poll_closes_in_past",
+  closes_required: "forge.community_composer.poll_closes_required",
+  visibility_invalid: "forge.community_composer.poll_visibility_invalid",
+};
+
+const VISIBILITY_KEY: Record<CommunityPollResultsVisibility, string> = {
+  always: "forge.community_composer.poll_visibility_always",
+  after_vote: "forge.community_composer.poll_visibility_after_vote",
+  after_close: "forge.community_composer.poll_visibility_after_close",
+};
+
 export interface CommunityComposerProps {
   /** Show the title input (forum spaces). */
   withTitle?: boolean;
+  /**
+   * Offer a Poll toggle (the space feed's post box). The poll's question is
+   * the post title, so turning it on shows the title input whatever `withTitle` says.
+   */
+  allowPoll?: boolean;
   placeholder?: string;
   submitLabel?: string;
   autoFocus?: boolean;
@@ -72,6 +110,7 @@ export interface CommunityComposerProps {
  */
 export function CommunityComposer({
   withTitle = false,
+  allowPoll = false,
   placeholder = "Write something…",
   submitLabel = "Post",
   autoFocus = false,
@@ -84,7 +123,13 @@ export function CommunityComposer({
   onCancel,
 }: CommunityComposerProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   const composer = useRichMentionComposer();
+  const poll = useCommunityPollDraft();
+  const [pollOn, setPollOn] = useState(false);
+  const withPoll = allowPoll && pollOn;
+  const showTitle = withTitle || withPoll;
+  const pollFieldId = useId();
   const upload = useCommunityAttachmentUpload();
   const [title, setTitle] = useState("");
   const [sending, setSending] = useState(false);
@@ -105,15 +150,18 @@ export function CommunityComposer({
   const [confirmingDiscard, setConfirmingDiscard] = useState(false);
 
   const border = `1px solid ${t.border}`;
-  const canSubmit =
-    (!composer.isEmpty || upload.hasPending) && !sending && (!withTitle || title.trim().length > 0);
+  // A poll may go out with no body: the question and options are the post. Its
+  // own checks run on submit, so the button stays live and a click shows why.
+  const canSubmit = withPoll
+    ? !sending
+    : (!composer.isEmpty || upload.hasPending) && !sending && (!withTitle || title.trim().length > 0);
   /** Is there work in here that closing would otherwise have thrown away? */
   const hasDraft = !composer.isEmpty || upload.hasPending || title.trim().length > 0;
 
   /** Put the caret where typing should carry on: the title first on a forum
    * post, otherwise the end of whatever is already written. */
   const focusEditor = () => {
-    if (withTitle && titleRef.current) {
+    if (showTitle && titleRef.current) {
       titleRef.current.focus();
       return;
     }
@@ -142,25 +190,37 @@ export function CommunityComposer({
     composer.reset();
     setTitle("");
     upload.clear();
+    poll.reset();
+    setPollOn(false);
     setError(null);
     setConfirmingDiscard(false);
   };
 
+  const changeTitle = (value: string) => {
+    setTitle(value);
+    poll.setQuestion(value);
+  };
+
   const submit = async () => {
     if (!canSubmit) return;
+    if (withPoll && !poll.attempt()) return;
     setSending(true);
     setError(null);
     try {
       const attachments = upload.hasPending ? await upload.uploadAll() : [];
+      const pollPayload = withPoll ? buildPollPayload(poll.draft) : null;
       await onSubmit({
-        title: withTitle ? title.trim() : undefined,
+        title: pollPayload ? pollPayload.title : withTitle ? title.trim() : undefined,
         body: composer.getBody(),
         attachments,
         mentionedAccountIds: composer.getMentionedAccountIds(),
+        ...(pollPayload ? { poll: pollPayload.poll } : {}),
       });
       composer.reset();
       setTitle("");
       upload.clear();
+      poll.reset();
+      setPollOn(false);
       // Posted, so the box has served its purpose and folds away. There is no
       // draft left to lose: reset() ran a line above.
       if (collapsible) setOpen(false);
@@ -285,13 +345,15 @@ export function CommunityComposer({
         id={bodyId}
         style={{ display: isOpen ? "flex" : "none", flexDirection: "column", gap: 8 }}
       >
-      {withTitle && (
+      {showTitle && (
         <input
           ref={titleRef}
           value={title}
-          onChange={(e) => setTitle(e.target.value)}
-          placeholder="Title"
-          maxLength={200}
+          onChange={(e) => changeTitle(e.target.value)}
+          placeholder={withPoll ? tr("forge.community_composer.poll_question_placeholder") : "Title"}
+          aria-label={withPoll ? tr("forge.community_composer.poll_question_label") : undefined}
+          aria-invalid={withPoll && poll.showErrors && !!poll.errors.question}
+          maxLength={COMMUNITY_POLL_LIMITS.questionMaxLength}
           style={{
             padding: "8px 10px",
             borderRadius: t.cornerRadius,
@@ -302,6 +364,11 @@ export function CommunityComposer({
           }}
         />
       )}
+      {withPoll && poll.showErrors && poll.errors.question && (
+        <div role="alert" style={{ fontSize: 12, color: "#dc2626" }}>
+          {tr(POLL_ERROR_KEY[poll.errors.question])}
+        </div>
+      )}
 
       {/* Formatting toolbar */}
       <div style={{ display: "flex", alignItems: "center", gap: 4, flexWrap: "wrap" }}>
@@ -358,7 +425,8 @@ export function CommunityComposer({
             color: ${t.muted};
             pointer-events: none;
           }
-          .forge-community-composer-editable [data-account-id] {
+          .forge-community-composer-editable [data-account-id],
+          .forge-community-composer-editable [data-agent-id] {
             color: ${t.primary};
             font-weight: 600;
             background: ${t.primary}1a;
@@ -386,7 +454,8 @@ export function CommunityComposer({
           >
             {composer.suggestions.map((s) => (
               <button
-                key={s.accountId}
+                key={s.agentId ? `agent:${s.agentId}` : s.accountId}
+                data-testid={s.agentId ? "community-mention-agent" : "community-mention-member"}
                 type="button"
                 onMouseDown={(e) => {
                   // mousedown so the editor keeps focus.
@@ -407,14 +476,173 @@ export function CommunityComposer({
                   fontSize: 14,
                 }}
               >
-                <MemberAvatar member={{ displayName: s.name, avatarUrl: s.avatarUrl }} size={24} />
-                <span style={{ fontWeight: 500 }}>{s.name}</span>
+                {s.agentId ? (
+                  <>
+                    <CommunityAgentAvatar agent={s} size={24} />
+                    <CommunityAgentName agent={s} fontWeight={500} />
+                  </>
+                ) : (
+                  <>
+                    <MemberAvatar member={{ displayName: s.name, avatarUrl: s.avatarUrl }} size={24} />
+                    <span style={{ fontWeight: 500 }}>{s.name}</span>
+                  </>
+                )}
               </button>
             ))}
           </div>
         )}
       </div>
 
+      {withPoll && (
+        <fieldset
+          data-testid="community-composer-poll"
+          style={{ border, borderRadius: t.cornerRadius, padding: 10, margin: 0, minWidth: 0 }}
+        >
+          <legend style={{ padding: "0 4px", fontSize: 13, fontWeight: 600, color: t.text }}>
+            {tr("forge.community_composer.poll_options_legend")}
+          </legend>
+          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+            {poll.draft.options.map((option, index) => {
+              const optionError = poll.showErrors ? poll.errors.options[index] : null;
+              const errorId = `${pollFieldId}-option-${index}-error`;
+              return (
+                <div key={index} style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                    <input
+                      value={option}
+                      onChange={(e) => poll.setOption(index, e.target.value)}
+                      placeholder={tr("forge.community_composer.poll_option_placeholder", { number: index + 1 })}
+                      aria-label={tr("forge.community_composer.poll_option_label", { number: index + 1 })}
+                      aria-invalid={!!optionError}
+                      aria-describedby={optionError ? errorId : undefined}
+                      maxLength={COMMUNITY_POLL_LIMITS.optionMaxLength}
+                      style={{
+                        flex: 1,
+                        minWidth: 0,
+                        padding: "6px 10px",
+                        borderRadius: t.cornerRadius,
+                        border: `1px solid ${optionError ? "#dc2626" : t.border}`,
+                        background: t.background,
+                        color: t.text,
+                        fontSize: 14,
+                      }}
+                    />
+                    <button
+                      type="button"
+                      onClick={() => poll.removeOption(index)}
+                      disabled={!poll.canRemoveOption}
+                      aria-label={tr("forge.community_composer.poll_remove_option", { number: index + 1 })}
+                      style={{
+                        ...ghostButton,
+                        padding: "4px 8px",
+                        display: "inline-flex",
+                        alignItems: "center",
+                        cursor: poll.canRemoveOption ? "pointer" : "not-allowed",
+                        opacity: poll.canRemoveOption ? 1 : 0.4,
+                      }}
+                    >
+                      <X size={14} aria-hidden />
+                    </button>
+                  </div>
+                  {optionError && (
+                    <span id={errorId} role="alert" style={{ fontSize: 12, color: "#dc2626" }}>
+                      {tr(POLL_ERROR_KEY[optionError])}
+                    </span>
+                  )}
+                </div>
+              );
+            })}
+            {poll.showErrors && poll.errors.optionsList && (
+              <span role="alert" style={{ fontSize: 12, color: "#dc2626" }}>
+                {tr(POLL_ERROR_KEY[poll.errors.optionsList])}
+              </span>
+            )}
+            <button
+              type="button"
+              onClick={poll.addOption}
+              disabled={!poll.canAddOption}
+              style={{
+                ...ghostButton,
+                alignSelf: "flex-start",
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 4,
+                cursor: poll.canAddOption ? "pointer" : "not-allowed",
+                opacity: poll.canAddOption ? 1 : 0.5,
+              }}
+            >
+              <Plus size={14} aria-hidden />
+              {tr("forge.community_composer.poll_add_option")}
+            </button>
+          </div>
+
+          <label
+            style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 10, fontSize: 13, color: t.text }}
+          >
+            <input
+              type="checkbox"
+              role="switch"
+              checked={poll.draft.multipleChoice}
+              onChange={(e) => poll.setMultipleChoice(e.target.checked)}
+              style={{ accentColor: t.primary, margin: 0 }}
+            />
+            {tr("forge.community_composer.poll_multiple_choice")}
+          </label>
+
+          <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 10 }}>
+            <label style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 13, color: t.text }}>
+              {tr("forge.community_composer.poll_closes_label")}
+              <input
+                type="datetime-local"
+                value={poll.draft.closesAt}
+                onChange={(e) => poll.setClosesAt(e.target.value)}
+                aria-invalid={poll.showErrors && !!poll.errors.closesAt}
+                style={{
+                  padding: "6px 8px",
+                  borderRadius: t.cornerRadius,
+                  border: `1px solid ${poll.showErrors && poll.errors.closesAt ? "#dc2626" : t.border}`,
+                  background: t.background,
+                  color: t.text,
+                  fontSize: 13,
+                }}
+              />
+            </label>
+            <div style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 13, color: t.text }}>
+              <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
+                <label htmlFor={`${pollFieldId}-visibility`}>{tr("forge.community_composer.poll_visibility_label")}</label>
+                <CallHelpHint label={tr("forge.community_composer.poll_visibility_help_label")}>
+                  {tr("forge.community_composer.poll_visibility_help")}
+                </CallHelpHint>
+              </span>
+              <select
+                id={`${pollFieldId}-visibility`}
+                value={poll.draft.resultsVisibility}
+                onChange={(e) => poll.setResultsVisibility(e.target.value as CommunityPollResultsVisibility)}
+                style={{
+                  padding: "6px 8px",
+                  borderRadius: t.cornerRadius,
+                  border,
+                  background: t.background,
+                  color: t.text,
+                  fontSize: 13,
+                }}
+              >
+                {(Object.keys(VISIBILITY_KEY) as CommunityPollResultsVisibility[]).map((value) => (
+                  <option key={value} value={value}>
+                    {tr(VISIBILITY_KEY[value])}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+          {poll.showErrors && poll.errors.closesAt && (
+            <div role="alert" style={{ fontSize: 12, color: "#dc2626", marginTop: 4 }}>
+              {tr(POLL_ERROR_KEY[poll.errors.closesAt])}
+            </div>
+          )}
+        </fieldset>
+      )}
+
       {upload.error && <div style={{ fontSize: 12, color: "#dc2626" }}>{upload.error}</div>}
       {error && <div style={{ fontSize: 12, color: "#dc2626" }}>{error}</div>}
 
@@ -485,7 +713,30 @@ export function CommunityComposer({
         >
           📎
         </button>
-        <span style={{ flex: 1, fontSize: 11, color: t.muted }}>Use @ to mention members</span>
+        {allowPoll && (
+          <button
+            type="button"
+            onClick={() => setPollOn((on) => !on)}
+            aria-pressed={pollOn}
+            style={{
+              ...ghostButton,
+              padding: "4px 10px",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 4,
+              background: pollOn ? `${t.primary}1a` : "none",
+              color: pollOn ? t.primary : t.text,
+            }}
+          >
+            <BarChart3 size={14} aria-hidden />
+            {tr("forge.community_composer.poll_toggle")}
+          </button>
+        )}
+        <span style={{ flex: 1, fontSize: 11, color: t.muted }}>
+          {composer.agent
+            ? tr("forge.community_composer.mention_hint_agent", { agent_name: composer.agent.name })
+            : tr("forge.community_composer.mention_hint")}
+        </span>
         {collapsible && (
           <>
             <CallHelpHint label="What happens to what I have typed?">

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

@@ -1,8 +1,10 @@
 import { useEffect, useState, type CSSProperties } from "react";
-import { MessageSquarePlus, Plus, Search, X } from "lucide-react";
+import { Lock, MessageSquarePlus, Plus, Search, X } from "lucide-react";
+import { useForgeT } from "../../../i18n";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
 import { useCommunitySpaceFeed } from "../../headless/community/useCommunitySpaceFeed";
 import { useCommunitySearch, type CommunityPost, type CommunitySearchResults } from "../../../data/queries/useCommunity";
+import { useCommunityAgent } from "../../../data/queries/useCommunityAgent";
 import { Loading } from "../Loading";
 import { CommunityComposer } from "./CommunityComposer";
 import { CommunityPostCard } from "./CommunityPostCard";
@@ -25,7 +27,10 @@ export interface CommunityFeedProps {
  */
 export function CommunityFeed({ spaceId: idOrSlug, onOpenPost, onOpenProfile, onBack }: CommunityFeedProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   const feed = useCommunitySpaceFeed(idOrSlug);
+  // The community AI, for the name on its "thinking" line.
+  const agentInfo = useCommunityAgent();
   const border = `1px solid ${t.border}`;
 
   // Composer is closed by default. This drives the composer's `open` prop, and
@@ -59,6 +64,48 @@ export function CommunityFeed({ spaceId: idOrSlug, onOpenPost, onOpenProfile, on
     );
   }
 
+  if (feed.levelLocked) {
+    return (
+      <div
+        data-testid="community-feed-level-locked"
+        style={{
+          border,
+          borderRadius: t.cornerRadius,
+          padding: 32,
+          textAlign: "center",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 8,
+          color: t.text,
+        }}
+      >
+        <Lock size={22} style={{ color: t.muted }} aria-hidden />
+        <div style={{ fontSize: 16, fontWeight: 600 }}>{feed.space.name}</div>
+        <div style={{ fontSize: 14, color: t.muted }}>
+          {tr("forge.community_feed.unlocks_at_level", { level: feed.minLevel })}
+        </div>
+        {onBack && (
+          <button
+            onClick={onBack}
+            style={{
+              marginTop: 6,
+              background: "none",
+              border,
+              borderRadius: t.cornerRadius,
+              padding: "6px 14px",
+              cursor: "pointer",
+              color: t.text,
+              fontSize: 13,
+            }}
+          >
+            {tr("forge.community_feed.back_to_spaces")}
+          </button>
+        )}
+      </div>
+    );
+  }
+
   const isForum = feed.space.type === "forum";
 
   const iconButton = (extra?: CSSProperties): CSSProperties => ({
@@ -257,6 +304,7 @@ export function CommunityFeed({ spaceId: idOrSlug, onOpenPost, onOpenProfile, on
           and the empty-state button drive the same state through `open`. */}
       <CommunityComposer
         collapsible
+        allowPoll
         open={composerOpen}
         onOpenChange={setComposerOpen}
         withTitle={isForum}
@@ -344,6 +392,7 @@ export function CommunityFeed({ spaceId: idOrSlug, onOpenPost, onOpenProfile, on
               onOpen={onOpenPost}
               onOpenProfile={onOpenProfile}
               onReact={(emoji) => feed.react(post.id, emoji)}
+              agentThinking={feed.isAgentThinking(post.id) ? { name: agentInfo.agent?.name } : null}
             />
           ))}
         </div>

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

@@ -0,0 +1,159 @@
+import { useState, type CSSProperties } from "react";
+import { Play } from "lucide-react";
+import { useForgeT } from "../../../i18n";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import type { CommunityLinkPreview as CommunityLinkPreviewData } from "../../../data/queries/useCommunity";
+import { autoplayEmbedUrl, linkPreviewDisplay, linkPreviewHost } from "../../headless/community/linkPreview";
+
+export interface CommunityLinkPreviewProps {
+  preview: CommunityLinkPreviewData | null | undefined;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/** A link out of the community: a stranger's page, so it gets no referrer, no ranking credit and no opener. */
+const LINK_REL = "noopener noreferrer nofollow ugc";
+
+/**
+ * The card under a post for its first link. A plain link shows its image, site
+ * name, title and description, and opens in a new tab. A YouTube, Vimeo or Loom
+ * video shows its thumbnail and a play button, and the player is only loaded
+ * once the member presses play, so reading the feed tells no video site who is
+ * reading it. A video from anywhere else is shown as a link card.
+ */
+export function CommunityLinkPreview({ preview, className, style }: CommunityLinkPreviewProps) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const [playing, setPlaying] = useState(false);
+  const display = linkPreviewDisplay(preview);
+  if (!preview || !display) return null;
+
+  const siteName = preview.siteName?.trim() || linkPreviewHost(display.href);
+  const title = preview.title?.trim() || null;
+  const frame: CSSProperties = {
+    marginTop: 12,
+    border: `1px solid ${t.border}`,
+    borderRadius: t.cornerRadius,
+    overflow: "hidden",
+    background: t.surface,
+    ...style,
+  };
+
+  if (display.kind === "video") {
+    return (
+      <div data-testid="community-link-video" className={className} style={frame}>
+        <div style={{ position: "relative", width: "100%", aspectRatio: "16 / 9", background: t.background }}>
+          {playing ? (
+            <iframe
+              data-testid="community-link-video-frame"
+              src={autoplayEmbedUrl(display.embedUrl)}
+              title={title ?? tr("forge.community_link_preview.video_frame")}
+              loading="lazy"
+              allow="autoplay; fullscreen; picture-in-picture"
+              allowFullScreen
+              referrerPolicy="strict-origin-when-cross-origin"
+              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }}
+            />
+          ) : (
+            <button
+              type="button"
+              data-testid="community-link-video-play"
+              onClick={() => setPlaying(true)}
+              aria-label={title ? tr("forge.community_link_preview.play_title", { title }) : tr("forge.community_link_preview.play")}
+              style={{
+                position: "absolute",
+                inset: 0,
+                width: "100%",
+                height: "100%",
+                padding: 0,
+                border: "none",
+                cursor: "pointer",
+                background: "transparent",
+              }}
+            >
+              {display.imageUrl && (
+                <img
+                  src={display.imageUrl}
+                  alt=""
+                  loading="lazy"
+                  referrerPolicy="no-referrer"
+                  style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
+                />
+              )}
+              <span
+                aria-hidden
+                style={{
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  width: 60,
+                  height: 60,
+                  borderRadius: 999,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  background: t.primary,
+                  color: t.textPrimary,
+                }}
+              >
+                <Play size={26} fill="currentColor" />
+              </span>
+            </button>
+          )}
+        </div>
+        {(title || siteName) && (
+          <a
+            href={display.href}
+            target="_blank"
+            rel={LINK_REL}
+            style={{ display: "block", padding: "10px 14px", textDecoration: "none", color: t.text }}
+          >
+            {siteName && <span style={{ display: "block", fontSize: 12, color: t.muted }}>{siteName}</span>}
+            {title && <span style={{ display: "block", fontSize: 14, fontWeight: 600 }}>{title}</span>}
+          </a>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <a
+      data-testid="community-link-card"
+      href={display.href}
+      target="_blank"
+      rel={LINK_REL}
+      className={className}
+      style={{ ...frame, display: "block", textDecoration: "none", color: t.text }}
+    >
+      {display.imageUrl && (
+        <img
+          src={display.imageUrl}
+          alt=""
+          loading="lazy"
+          referrerPolicy="no-referrer"
+          style={{ display: "block", width: "100%", maxHeight: 280, objectFit: "cover", background: t.background }}
+        />
+      )}
+      <span style={{ display: "flex", flexDirection: "column", gap: 3, padding: "10px 14px" }}>
+        {siteName && <span style={{ fontSize: 12, color: t.muted }}>{siteName}</span>}
+        <span style={{ fontSize: 14, fontWeight: 600, overflowWrap: "anywhere" }}>{title ?? display.href}</span>
+        {preview.description?.trim() && (
+          <span
+            style={{
+              fontSize: 13,
+              color: t.muted,
+              display: "-webkit-box",
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: "vertical",
+              overflow: "hidden",
+            }}
+          >
+            {preview.description.trim()}
+          </span>
+        )}
+        <span className="fg:sr-only">{tr("forge.community_link_preview.new_tab")}</span>
+      </span>
+    </a>
+  );
+}