@tribe-nest/forge 3.26.0 → 3.31.0

package/src/ui/styled/broadcast/EndedBroadcast.tsx

@@ -0,0 +1,103 @@
+import type { ILiveBroadcast } from "../../../types/models";
+import { useForgeT } from "../../../i18n";
+import { useForgeTheme } from "../../theme/ForgeThemeProvider";
+import { CallHelpHint } from "../../media/CallHelpHint";
+
+export interface EndedBroadcastProps {
+  broadcast: ILiveBroadcast;
+}
+
+/**
+ * The screen a viewer lands on when the broadcast is over, including when it
+ * went off air under them a minute ago.
+ *
+ * The second case is the reason this page says as much as it does. A host on a
+ * bad connection drops and comes back, and a viewer with nothing on screen
+ * assumes the event is finished and leaves. Everything here that tells them what
+ * to DO stays visible. The one sentence that only explains WHY it happened sits
+ * behind the `?`, per the house design law.
+ */
+export function EndedBroadcast({ broadcast }: EndedBroadcastProps) {
+  const t = useForgeT();
+  const theme = useForgeTheme();
+  const thumb = broadcast.thumbnailUrl || broadcast.generatedThumbnailUrl;
+
+  return (
+    <div style={{ padding: "0 16px", flex: 1, color: theme.colors.text, fontFamily: theme.fontFamily }}>
+      <div
+        style={{
+          marginTop: 40,
+          maxWidth: 500,
+          marginInline: "auto",
+          backgroundColor: theme.colors.background,
+          borderRadius: theme.cornerRadius,
+          boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
+          border: `1px solid ${theme.colors.primary}30`,
+          overflow: "hidden",
+        }}
+      >
+        <div
+          style={{
+            aspectRatio: "16/9",
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: `linear-gradient(135deg, ${theme.colors.primary}20, ${theme.colors.primary}10)`,
+          }}
+        >
+          {thumb && (
+            <img
+              src={thumb}
+              alt={broadcast.title}
+              style={{ width: "100%", height: "100%", objectFit: "cover", position: "absolute", top: 0, left: 0 }}
+            />
+          )}
+          <p
+            data-testid="broadcast-ended-banner"
+            style={{
+              position: "relative",
+              zIndex: 1,
+              fontSize: 24,
+              fontWeight: 500,
+              padding: 16,
+              borderRadius: 8,
+              background: "rgba(0, 0, 0, 0.5)",
+              color: "#ffffff",
+            }}
+          >
+            {t("forge.ended_broadcast.banner")}
+          </p>
+        </div>
+
+        <div style={{ padding: 16 }}>
+          <h3 style={{ fontWeight: 600 }}>{broadcast.title}</h3>
+        </div>
+      </div>
+
+      <div style={{ marginTop: 16, width: "100%", maxWidth: 500, marginInline: "auto" }}>
+        <h4
+          style={{
+            color: theme.colors.primary,
+            fontWeight: 600,
+            marginBottom: 8,
+            fontSize: 18,
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+          }}
+        >
+          {t("forge.ended_broadcast.notice_title")}
+          <CallHelpHint label={t("forge.ended_broadcast.why_label")}>
+            {t("forge.ended_broadcast.why_body")}
+          </CallHelpHint>
+        </h4>
+
+        <p>{t("forge.ended_broadcast.close_instruction")}</p>
+        <p style={{ marginTop: 8 }}>{t("forge.ended_broadcast.refresh_instruction")}</p>
+      </div>
+    </div>
+  );
+}
+
+export default EndedBroadcast;

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

@@ -1,9 +1,15 @@
-import { useRef, useState } from "react";
-import { Bold, Italic, Underline, List, ListOrdered, Link as LinkIcon } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
+import { Bold, Italic, Underline, List, ListOrdered, Link as LinkIcon, PenLine } from "lucide-react";
 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";
+// 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.
+// Forge cannot import `HelpHint` from `@tribe-nest/frontend-shared`: that package
+// 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";
 
@@ -21,6 +27,20 @@ export interface CommunityComposerProps {
   submitLabel?: string;
   autoFocus?: boolean;
   compact?: boolean;
+  /**
+   * Start closed behind a one-click affordance instead of sitting open.
+   *
+   * Set it on the composers a member did NOT ask for: the space feed's post box
+   * and a thread's top-level reply box. Leave it off for a composer the member
+   * summoned (the "Reply" box under a reply), which must be open the instant it
+   * mounts or the click that opened it did nothing.
+   */
+  collapsible?: boolean;
+  /** Controlled open state. Omit to let the composer own it. Ignored unless `collapsible`. */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Copy on the closed affordance. Defaults to `placeholder`. */
+  collapsedLabel?: string;
   onSubmit: (input: CommunityComposerSubmit) => Promise<unknown>;
   onCancel?: () => void;
 }
@@ -29,9 +49,26 @@ export interface CommunityComposerProps {
  * Post/reply composer: a lean contentEditable rich-text editor (bold/italic/
  * underline, bullet + numbered lists, links) with `@mention` autocomplete
  * (member directory) and attachments. The DOM is the source of truth; on submit
- * it serializes to the Lexical state CommunityRichText renders — no Lexical
+ * it serializes to the Lexical state CommunityRichText renders, and no Lexical
  * runtime is pulled into forge. Same onSubmit contract the plain-text composer
  * used ({ title?, body, attachments, mentionedAccountIds }).
+ *
+ * ## Closing keeps the draft, and that is a decision
+ *
+ * Under `collapsible` the editor is HIDDEN, never unmounted. The DOM is this
+ * composer's state, so unmounting it is the same act as deleting what the
+ * member wrote: text, formatting, mention chips, the title and every staged
+ * attachment go at once, with no undo and no warning. A control whose whole job
+ * is to get out of the way must not be able to destroy work on the way out.
+ *
+ * The two alternatives are worse. Discarding on close is silent data loss from
+ * an X. Confirming on close taxes the common case, which is a member who opened
+ * the box by accident and typed nothing, with a dialog.
+ *
+ * So closing costs nothing, and the draft announces itself: the closed
+ * affordance reads "Continue your draft" rather than the placeholder, and grows
+ * a Discard control beside it. Throwing the draft away therefore stays possible
+ * but has to be asked for, and asked for twice.
  */
 export function CommunityComposer({
   withTitle = false,
@@ -39,6 +76,10 @@ export function CommunityComposer({
   submitLabel = "Post",
   autoFocus = false,
   compact = false,
+  collapsible = false,
+  open,
+  onOpenChange,
+  collapsedLabel,
   onSubmit,
   onCancel,
 }: CommunityComposerProps) {
@@ -49,10 +90,61 @@ export function CommunityComposer({
   const [sending, setSending] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const titleRef = useRef<HTMLInputElement | null>(null);
+  const bodyId = useId();
+
+  // A non-collapsible composer is always open: that is the pre-existing
+  // contract every "Reply" box relies on.
+  const [selfOpen, setSelfOpen] = useState(false);
+  const isOpen = !collapsible || (open ?? selfOpen);
+  const setOpen = (next: boolean) => {
+    if (open === undefined) setSelfOpen(next);
+    onOpenChange?.(next);
+  };
+
+  const [confirmingDiscard, setConfirmingDiscard] = useState(false);
 
   const border = `1px solid ${t.border}`;
   const canSubmit =
     (!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) {
+      titleRef.current.focus();
+      return;
+    }
+    const el = composer.editorRef.current;
+    if (!el) return;
+    el.focus();
+    const doc = el.ownerDocument;
+    const sel = doc.defaultView?.getSelection();
+    if (!sel) return;
+    const range = doc.createRange();
+    range.selectNodeContents(el);
+    range.collapse(false);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  };
+
+  // Opening focuses, so writing is one click rather than two. Tracked against
+  // the previous value: a re-render while open must not steal the caret back.
+  const wasOpen = useRef(false);
+  useEffect(() => {
+    if (collapsible && isOpen && !wasOpen.current) focusEditor();
+    wasOpen.current = isOpen;
+  });
+
+  const discardDraft = () => {
+    composer.reset();
+    setTitle("");
+    upload.clear();
+    setError(null);
+    setConfirmingDiscard(false);
+  };
 
   const submit = async () => {
     if (!canSubmit) return;
@@ -69,6 +161,9 @@ export function CommunityComposer({
       composer.reset();
       setTitle("");
       upload.clear();
+      // 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);
     } catch (err: any) {
       setError(err?.response?.data?.message || "Couldn't publish. Please try again.");
     } finally {
@@ -107,6 +202,17 @@ export function CommunityComposer({
 
   const fmt = (command: RichCommand) => () => composer.format(command);
 
+  const ghostButton = {
+    background: "none",
+    border,
+    borderRadius: t.cornerRadius,
+    padding: "6px 12px",
+    cursor: "pointer",
+    color: t.text,
+    fontSize: 13,
+    whiteSpace: "nowrap" as const,
+  };
+
   return (
     <div
       style={{
@@ -119,8 +225,69 @@ export function CommunityComposer({
         gap: 8,
       }}
     >
+      {/* Closed: the affordance to open, and (only once there is something to
+          lose) the way to throw the draft away on purpose. */}
+      {!isOpen &&
+        (confirmingDiscard ? (
+          <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+            <span style={{ flex: 1, minWidth: 160, fontSize: 13, color: t.text }}>
+              Discard this draft? What you wrote cannot be brought back.
+            </span>
+            <button onClick={discardDraft} style={{ ...ghostButton, fontWeight: 600 }}>
+              Discard
+            </button>
+            <button onClick={() => setConfirmingDiscard(false)} style={ghostButton}>
+              Keep it
+            </button>
+          </div>
+        ) : (
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <button
+              onClick={() => setOpen(true)}
+              aria-expanded={false}
+              aria-controls={bodyId}
+              style={{
+                flex: 1,
+                minWidth: 0,
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                textAlign: "left",
+                padding: "8px 10px",
+                borderRadius: t.cornerRadius,
+                border,
+                background: t.background,
+                color: hasDraft ? t.text : t.muted,
+                fontFamily: "inherit",
+                fontSize: 14,
+                fontWeight: hasDraft ? 600 : 400,
+                cursor: "pointer",
+              }}
+            >
+              <PenLine size={15} style={{ flexShrink: 0, color: t.primary }} aria-hidden />
+              <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                {hasDraft ? "Continue your draft" : collapsedLabel ?? placeholder}
+              </span>
+            </button>
+            {hasDraft && (
+              <button onClick={() => setConfirmingDiscard(true)} style={ghostButton}>
+                Discard
+              </button>
+            )}
+          </div>
+        ))}
+
+      {/* Open: the editor itself. Hidden rather than unmounted, because the DOM
+          in here IS the draft. `display: none` also takes it out of the
+          accessibility tree and the tab order, so nothing is reachable while
+          the composer reads as closed. */}
+      <div
+        id={bodyId}
+        style={{ display: isOpen ? "flex" : "none", flexDirection: "column", gap: 8 }}
+      >
       {withTitle && (
         <input
+          ref={titleRef}
           value={title}
           onChange={(e) => setTitle(e.target.value)}
           placeholder="Title"
@@ -319,6 +486,17 @@ export function CommunityComposer({
           📎
         </button>
         <span style={{ flex: 1, fontSize: 11, color: t.muted }}>Use @ to mention members</span>
+        {collapsible && (
+          <>
+            <CallHelpHint label="What happens to what I have typed?">
+              Closing keeps your draft, attachments included. Open the box again and it is still
+              there, with the cursor where you left it. Discard is the only thing that clears it.
+            </CallHelpHint>
+            <button onClick={() => setOpen(false)} style={ghostButton}>
+              Close
+            </button>
+          </>
+        )}
         {onCancel && (
           <button
             onClick={onCancel}
@@ -353,6 +531,7 @@ export function CommunityComposer({
           {sending ? "…" : submitLabel}
         </button>
       </div>
+      </div>
     </div>
   );
 }

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

@@ -8,7 +8,7 @@ import { CommunityComposer } from "./CommunityComposer";
 import { CommunityPostCard } from "./CommunityPostCard";
 
 export interface CommunityFeedProps {
-  /** A space uuid OR its per-profile slug — resolved from the gated spaces list. */
+  /** A space uuid OR its per-profile slug, resolved from the gated spaces list. */
   spaceId: string;
   onOpenPost: (post: CommunityPost) => void;
   onOpenProfile?: (accountId: string) => void;
@@ -17,17 +17,20 @@ export interface CommunityFeedProps {
 
 /**
  * A space's post feed, live over the space's Socket.io room. Renders feed
- * spaces as a card stream and forum spaces as compact title rows — same data,
- * two shapes. The composer is hidden by default behind a "+" in the header (it
- * cramps the top otherwise); a header search scopes FTS to THIS space and, while
- * a query is active, replaces the feed with matching posts.
+ * spaces as a card stream and forum spaces as compact title rows: same data,
+ * two shapes. The composer starts closed as a single-line bar (open, it cramps
+ * the top of every visit whether or not anyone wants to post); the header "+"
+ * and the empty-state button open the same one. A header search scopes FTS to
+ * THIS space and, while a query is active, replaces the feed with matching posts.
  */
 export function CommunityFeed({ spaceId: idOrSlug, onOpenPost, onOpenProfile, onBack }: CommunityFeedProps) {
   const t = useThemeTokens();
   const feed = useCommunitySpaceFeed(idOrSlug);
   const border = `1px solid ${t.border}`;
 
-  // Composer is hidden by default — the "+" reveals it below the header.
+  // Composer is closed by default. This drives the composer's `open` prop, and
+  // the composer reports its own Close back through `onOpenChange`, so the
+  // header "+" and the box below it can never disagree about the state.
   const [composerOpen, setComposerOpen] = useState(false);
   // Search expands from the header icon; a live query >=2 chars replaces the feed.
   const [searchOpen, setSearchOpen] = useState(false);
@@ -96,7 +99,8 @@ export function CommunityFeed({ spaceId: idOrSlug, onOpenPost, onOpenProfile, on
             <h2 style={{ margin: 0, fontSize: 18, fontFamily: t.headingFontFamily, color: t.text }}>
               {feed.space.name}
             </h2>
-            {/* Reveal/hide the composer (hidden by default). */}
+            {/* A second way into the same composer, for members who read the
+                title before they read the bar under it. */}
             <button
               onClick={() => setComposerOpen((o) => !o)}
               aria-label={composerOpen ? "Hide composer" : "New post"}
@@ -122,7 +126,7 @@ export function CommunityFeed({ spaceId: idOrSlug, onOpenPost, onOpenProfile, on
           )}
         </div>
 
-        {/* Search toggle only — the input itself is a full-width bar below the
+        {/* Search toggle only. The input itself is a full-width bar below the
             header (see below) so it never squeezes the title on a narrow column. */}
         <button
           onClick={() => (searchOpen ? closeSearch() : setSearchOpen(true))}
@@ -159,8 +163,8 @@ export function CommunityFeed({ spaceId: idOrSlug, onOpenPost, onOpenProfile, on
         )}
       </header>
 
-      {/* Full-width search bar — lives below the header so it never distorts
-          the title row; focus lifts a soft primary ring. */}
+      {/* Full-width search bar. It lives below the header so it never distorts
+          the title row, and focus lifts a soft primary ring. */}
       {searchOpen && (
         <div
           style={{
@@ -210,8 +214,8 @@ export function CommunityFeed({ spaceId: idOrSlug, onOpenPost, onOpenProfile, on
         </div>
       )}
 
-      {/* Un-joined viewers can still read + post (tier access governs that) —
-          the banner nudges them to opt into new-post notifications. */}
+      {/* Un-joined viewers can still read + post (tier access governs that),
+          so the banner nudges them to opt into new-post notifications. */}
       {!feed.isJoined && (
         <div
           style={{
@@ -246,43 +250,24 @@ export function CommunityFeed({ spaceId: idOrSlug, onOpenPost, onOpenProfile, on
         </div>
       )}
 
-      {/* Composer — hidden until toggled; behavior/props identical to before. */}
-      {composerOpen && (
-        <div style={{ position: "relative" }}>
-          <CommunityComposer
-            withTitle={isForum}
-            placeholder={isForum ? "Start a discussion…" : "Share something with the community…"}
-            submitLabel={isForum ? "Start discussion" : "Post"}
-            compact={!isForum}
-            onSubmit={async (input) => {
-              await feed.createPost.mutateAsync(input);
-              setComposerOpen(false);
-            }}
-          />
-          <button
-            onClick={() => setComposerOpen(false)}
-            aria-label="Close composer"
-            title="Close composer"
-            style={{
-              position: "absolute",
-              top: 8,
-              right: 8,
-              display: "inline-flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: 26,
-              height: 26,
-              borderRadius: 999,
-              border: "none",
-              background: "transparent",
-              color: t.muted,
-              cursor: "pointer",
-            }}
-          >
-            <X size={15} />
-          </button>
-        </div>
-      )}
+      {/* Composer: closed by default, and MOUNTED whether open or closed. The
+          editor DOM is the draft, so rendering it conditionally would delete a
+          half-written post every time the member folded the box away. It owns
+          its own open affordance, its Close and its Discard; the header "+"
+          and the empty-state button drive the same state through `open`. */}
+      <CommunityComposer
+        collapsible
+        open={composerOpen}
+        onOpenChange={setComposerOpen}
+        withTitle={isForum}
+        placeholder={isForum ? "Start a discussion…" : "Share something with the community…"}
+        collapsedLabel={isForum ? "Start a discussion" : "Share something with the community"}
+        submitLabel={isForum ? "Start discussion" : "Post"}
+        compact={!isForum}
+        onSubmit={async (input) => {
+          await feed.createPost.mutateAsync(input);
+        }}
+      />
 
       {/* While searching, results replace the feed; clearing returns to it. */}
       {searching ? (
@@ -386,7 +371,7 @@ export function CommunityFeed({ spaceId: idOrSlug, onOpenPost, onOpenProfile, on
 }
 
 /**
- * In-space search results — post matches (title + snippet) that navigate to the
+ * In-space search results: post matches (title + snippet) that navigate to the
  * thread via onOpenPost, and reply matches surfaced by their parent post. Search
  * rows are lean FTS projections, so we hand onOpenPost a minimal post shape
  * (callers route by id).
@@ -428,7 +413,7 @@ function SearchResults({
   };
 
   const openById = (id: string, title: string | null, bodyText: string | null) =>
-    // Minimal post shape — the FTS row carries no engagement/media; callers only
+    // Minimal post shape. The FTS row carries no engagement/media, and callers only
     // read the id to route, and the thread view refetches the full post.
     onOpenPost({
       id,

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

@@ -137,6 +137,9 @@ export function CommunityPostDetail({ postId, onOpenProfile, onBack }: Community
 
         {replyingTo === reply.id && (
           <div style={{ marginLeft: 44 }}>
+            {/* Deliberately NOT `collapsible`: the member already clicked
+                "Reply", so this box is open on arrival. Collapsing it here
+                would make writing a reply cost two clicks instead of one. */}
             <CommunityComposer
               compact
               autoFocus
@@ -233,14 +236,25 @@ export function CommunityPostDetail({ postId, onOpenProfile, onBack }: Community
         </footer>
       </article>
 
-      {/* Top-level composer */}
+      {/* Top-level composer: closed until asked for, and hidden rather than
+          unmounted while a nested reply box is open, so a half-written
+          top-level reply survives the detour of replying to someone else. */}
       {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} />
+        <div style={{ display: replyingTo ? "none" : "block" }}>
+          <CommunityComposer
+            collapsible
+            compact
+            placeholder="Write a reply…"
+            collapsedLabel="Write a reply"
+            submitLabel="Reply"
+            onSubmit={submitReply}
+          />
+        </div>
       )}
 
       {/* Thread */}