@tribe-nest/forge 1.13.0

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

@@ -0,0 +1,157 @@
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import type { LexicalNodeJson } from "../../headless/community/lexical";
+
+export interface CommunityRichTextProps {
+  /** Lexical editor state JSON (community_posts.body / community_replies.body). */
+  body: unknown;
+  /** Truncate to a preview (clamps lines via CSS). */
+  clampLines?: number;
+}
+
+/**
+ * Dependency-free renderer for the Lexical states community posts store.
+ * Handles the node set our composer emits (paragraph/text/mention/linebreak)
+ * plus the common rich nodes an admin-side Lexical editor could produce
+ * (heading/quote/list/listitem/link/code). Unknown nodes fall back to their
+ * children/text so content never disappears.
+ */
+export function CommunityRichText({ body, clampLines }: CommunityRichTextProps) {
+  const t = useThemeTokens();
+  const root = extractRoot(body);
+  if (!root) return null;
+
+  const clampStyle: React.CSSProperties = clampLines
+    ? {
+        display: "-webkit-box",
+        WebkitLineClamp: clampLines,
+        WebkitBoxOrient: "vertical" as const,
+        overflow: "hidden",
+      }
+    : {};
+
+  return (
+    <div style={{ color: t.text, fontSize: 15, lineHeight: 1.55, wordBreak: "break-word", ...clampStyle }}>
+      {(root.children ?? []).map((node, i) => (
+        <BlockNode key={i} node={node} />
+      ))}
+    </div>
+  );
+}
+
+function extractRoot(body: unknown): LexicalNodeJson | null {
+  if (!body || typeof body !== "object") return null;
+  const maybe = body as { root?: LexicalNodeJson; children?: LexicalNodeJson[] };
+  if (maybe.root) return maybe.root;
+  if (Array.isArray(maybe.children)) return maybe as LexicalNodeJson;
+  return null;
+}
+
+function BlockNode({ node }: { node: LexicalNodeJson }) {
+  const t = useThemeTokens();
+  const children = (node.children ?? []).map((child, i) => <InlineNode key={i} node={child} />);
+
+  switch (node.type) {
+    case "paragraph":
+      return <p style={{ margin: "0 0 0.6em" }}>{children.length ? children : <br />}</p>;
+    case "heading": {
+      const tag = typeof node.tag === "string" ? node.tag : "h3";
+      const Tag = (["h1", "h2", "h3", "h4", "h5", "h6"].includes(tag) ? tag : "h3") as
+        | "h1"
+        | "h2"
+        | "h3"
+        | "h4"
+        | "h5"
+        | "h6";
+      return <Tag style={{ margin: "0.4em 0", fontFamily: t.headingFontFamily }}>{children}</Tag>;
+    }
+    case "quote":
+      return (
+        <blockquote style={{ margin: "0.6em 0", paddingLeft: 12, borderLeft: `3px solid ${t.border}`, color: t.muted }}>
+          {children}
+        </blockquote>
+      );
+    case "list": {
+      const ordered = node.listType === "number";
+      const ListTag = ordered ? "ol" : "ul";
+      return <ListTag style={{ margin: "0.4em 0", paddingLeft: 22 }}>{children}</ListTag>;
+    }
+    case "listitem":
+      return <li>{children}</li>;
+    case "code":
+      return (
+        <pre
+          style={{
+            margin: "0.6em 0",
+            padding: 10,
+            borderRadius: t.cornerRadius,
+            background: `${t.text}0d`,
+            overflowX: "auto",
+            fontSize: 13,
+          }}
+        >
+          {children}
+        </pre>
+      );
+    default:
+      // Unknown block — render inline content so nothing is lost.
+      return <p style={{ margin: "0 0 0.6em" }}>{children.length ? children : <InlineNode node={node} />}</p>;
+  }
+}
+
+function InlineNode({ node }: { node: LexicalNodeJson }) {
+  const t = useThemeTokens();
+
+  if (node.type === "linebreak") return <br />;
+
+  if (node.type === "mention") {
+    const name =
+      typeof node.mentionName === "string"
+        ? node.mentionName
+        : typeof node.text === "string"
+          ? (node.text as string).replace(/^@/, "")
+          : "member";
+    return (
+      <span style={{ color: t.primary, fontWeight: 600 }}>
+        @{name}
+      </span>
+    );
+  }
+
+  if (node.type === "link" || node.type === "autolink") {
+    const url = typeof node.url === "string" ? node.url : "#";
+    return (
+      <a href={url} target="_blank" rel="noopener noreferrer" style={{ color: t.primary, textDecoration: "underline" }}>
+        {(node.children ?? []).map((child, i) => (
+          <InlineNode key={i} node={child} />
+        ))}
+      </a>
+    );
+  }
+
+  if (typeof node.text === "string") {
+    // Lexical text format bitmask: 1 bold, 2 italic, 8 underline, 4 strikethrough, 16 code.
+    const format = typeof node.format === "number" ? node.format : 0;
+    let el: React.ReactNode = node.text as string;
+    if (format & 16)
+      el = (
+        <code style={{ background: `${t.text}0d`, borderRadius: 4, padding: "0 4px", fontSize: "0.9em" }}>{el}</code>
+      );
+    if (format & 1) el = <strong>{el}</strong>;
+    if (format & 2) el = <em>{el}</em>;
+    if (format & 8) el = <u>{el}</u>;
+    if (format & 4) el = <s>{el}</s>;
+    return <>{el}</>;
+  }
+
+  if (Array.isArray(node.children)) {
+    return (
+      <>
+        {node.children.map((child, i) => (
+          <InlineNode key={i} node={child} />
+        ))}
+      </>
+    );
+  }
+
+  return null;
+}

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

@@ -0,0 +1,174 @@
+import { Hash, Lock, Users } from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import {
+  useCommunitySpaces,
+  useJoinCommunitySpace,
+  useLeaveCommunitySpace,
+  type CommunitySpace,
+} from "../../../data/queries/useCommunity";
+import { Loading } from "../Loading";
+
+export interface CommunitySpacesProps {
+  /** Open a space — routes to the space feed. */
+  onOpenSpace: (space: CommunitySpace) => void;
+}
+
+/**
+ * The gated space list. The API only returns spaces the member can access
+ * (open spaces + spaces gated to one of their active tiers), so a tier badge
+ * marks members-only spaces rather than rendering locked rows. Each card also
+ * carries the joined-member count and a Join/Joined toggle — tiers govern
+ * access, joining opts into new-post notifications.
+ */
+export function CommunitySpaces({ onOpenSpace }: CommunitySpacesProps) {
+  const t = useThemeTokens();
+  const { data: spaces = [], isLoading } = useCommunitySpaces();
+  const joinSpace = useJoinCommunitySpace();
+  const leaveSpace = useLeaveCommunitySpace();
+  const border = `1px solid ${t.border}`;
+
+  if (isLoading) return <Loading />;
+
+  if (!spaces.length) {
+    return (
+      <div style={{ border, borderRadius: t.cornerRadius, padding: 32, textAlign: "center", color: t.muted }}>
+        <p style={{ margin: 0, fontWeight: 600, color: t.text }}>No spaces yet</p>
+        <p style={{ margin: "6px 0 0", fontSize: 14 }}>
+          Community spaces you have access to will appear here. Some spaces are reserved for members of specific tiers.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+      {spaces.map((space) => {
+        const gated = (space.tiers?.length ?? 0) > 0;
+        const memberCount = Number(space.memberCount ?? 0);
+        const joinBusy = joinSpace.isPending || leaveSpace.isPending;
+        return (
+          <div
+            key={space.id}
+            role="button"
+            tabIndex={0}
+            onClick={() => onOpenSpace(space)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") onOpenSpace(space);
+            }}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 12,
+              border,
+              borderRadius: t.cornerRadius,
+              background: t.surface,
+              padding: "14px 16px",
+              cursor: "pointer",
+              textAlign: "left",
+              color: t.text,
+              width: "100%",
+            }}
+          >
+            <span
+              aria-hidden
+              style={{
+                width: 38,
+                height: 38,
+                borderRadius: t.cornerRadius,
+                background: `${t.primary}1a`,
+                color: t.primary,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                flexShrink: 0,
+              }}
+            >
+              <Hash size={18} />
+            </span>
+
+            <span style={{ flex: 1, minWidth: 0 }}>
+              <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                <span style={{ fontWeight: 700, fontSize: 15 }}>{space.name}</span>
+                {gated && (
+                  <span
+                    style={{
+                      display: "inline-flex",
+                      alignItems: "center",
+                      gap: 4,
+                      fontSize: 11,
+                      fontWeight: 600,
+                      color: t.primary,
+                      background: `${t.primary}14`,
+                      borderRadius: 999,
+                      padding: "1px 8px",
+                      whiteSpace: "nowrap",
+                    }}
+                  >
+                    <Lock size={10} />
+                    {space.tiers.map((tier) => tier.name).join(", ")}
+                  </span>
+                )}
+              </span>
+              {space.description && (
+                <span
+                  style={{
+                    display: "block",
+                    fontSize: 13,
+                    color: t.muted,
+                    marginTop: 2,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                  }}
+                >
+                  {space.description}
+                </span>
+              )}
+              <span
+                style={{
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 4,
+                  fontSize: 12,
+                  color: t.muted,
+                  marginTop: 2,
+                }}
+              >
+                <Users size={12} />
+                {memberCount} {memberCount === 1 ? "member" : "members"}
+              </span>
+            </span>
+
+            <span style={{ fontSize: 12, color: t.muted, flexShrink: 0 }}>
+              {`${space.postCount ?? 0} ${Number(space.postCount ?? 0) === 1 ? "post" : "posts"}`}
+            </span>
+
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                if (joinBusy) return;
+                if (space.isJoined) leaveSpace.mutate(space.id);
+                else joinSpace.mutate(space.id);
+              }}
+              title={space.isJoined ? "Leave this space" : "Join to get notified about new posts"}
+              style={{
+                flexShrink: 0,
+                border: space.isJoined ? border : `1px solid ${t.primary}`,
+                borderRadius: 999,
+                background: space.isJoined ? "transparent" : t.primary,
+                color: space.isJoined ? t.text : t.textPrimary,
+                fontSize: 12,
+                fontWeight: 600,
+                padding: "5px 14px",
+                cursor: joinBusy ? "default" : "pointer",
+                opacity: joinBusy ? 0.6 : 1,
+              }}
+            >
+              {space.isJoined ? "Joined" : "Join"}
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,74 @@
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { communityMemberName } from "../../../data/queries/useCommunity";
+
+export interface MemberAvatarProps {
+  member: { displayName?: string | null; firstName?: string | null; lastName?: string | null; avatarUrl?: string | null } | null | undefined;
+  size?: number;
+  onClick?: () => void;
+}
+
+/** Avatar with initials fallback, tinted from the theme's primary. */
+export function MemberAvatar({ member, size = 36, onClick }: MemberAvatarProps) {
+  const t = useThemeTokens();
+  const name = communityMemberName(member);
+  const initials = name
+    .split(/\s+/)
+    .map((p) => p[0])
+    .filter(Boolean)
+    .slice(0, 2)
+    .join("")
+    .toUpperCase();
+
+  const style: React.CSSProperties = {
+    width: size,
+    height: size,
+    borderRadius: "50%",
+    flexShrink: 0,
+    objectFit: "cover",
+    cursor: onClick ? "pointer" : undefined,
+  };
+
+  if (member?.avatarUrl) {
+    return <img src={member.avatarUrl} alt={name} style={style} onClick={onClick} />;
+  }
+
+  return (
+    <div
+      onClick={onClick}
+      aria-label={name}
+      style={{
+        ...style,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: `${t.primary}22`,
+        color: t.primary,
+        fontWeight: 700,
+        fontSize: Math.max(10, Math.round(size * 0.38)),
+      }}
+    >
+      {initials || "?"}
+    </div>
+  );
+}
+
+/** Small "Lv N" chip shown beside member names. */
+export function LevelBadge({ level }: { level?: number | null }) {
+  const t = useThemeTokens();
+  if (!level || level <= 1) return null;
+  return (
+    <span
+      style={{
+        background: `${t.primary}1a`,
+        color: t.primary,
+        borderRadius: 999,
+        fontSize: 10,
+        fontWeight: 700,
+        padding: "1px 6px",
+        whiteSpace: "nowrap",
+      }}
+    >
+      Lv {level}
+    </span>
+  );
+}

package/src/ui/styled/community/index.ts

@@ -0,0 +1,23 @@
+// Community styled blocks. NOTE: lane-local aggregator — the integrator
+// re-exports it from `ui/index.ts` (`export * from "./styled/community"`).
+export { CommunitySpaces, type CommunitySpacesProps } from "./CommunitySpaces";
+export { CommunityFeed, type CommunityFeedProps } from "./CommunityFeed";
+export { CommunityPostCard, type CommunityPostCardProps } from "./CommunityPostCard";
+export { CommunityPostDetail, REPLY_DISPLAY_DEPTH, type CommunityPostDetailProps } from "./CommunityPostDetail";
+export { CommunityComposer, type CommunityComposerProps, type CommunityComposerSubmit } from "./CommunityComposer";
+export {
+  CommunityReactionBar,
+  COMMUNITY_REACTION_EMOJIS,
+  type CommunityReactionBarProps,
+} from "./CommunityReactionBar";
+export { CommunityRichText, type CommunityRichTextProps } from "./CommunityRichText";
+export { CommunityMediaGallery } from "./CommunityMediaGallery";
+export { CommunityMemberProfile, type CommunityMemberProfileProps } from "./CommunityMemberProfile";
+export {
+  CommunityNotificationsBell,
+  CommunityNotificationsInbox,
+  type CommunityNotificationsBellProps,
+  type CommunityNotificationsInboxProps,
+} from "./CommunityNotifications";
+export { CommunityLeaderboard, type CommunityLeaderboardProps } from "./CommunityLeaderboard";
+export { MemberAvatar, LevelBadge, type MemberAvatarProps } from "./MemberAvatar";

package/src/ui/styled/community/util.ts

@@ -0,0 +1,15 @@
+/** Compact relative timestamp for feed/thread rows ("3h", "2d", "Jan 4"). */
+export function timeAgo(iso: string | null | undefined): string {
+  if (!iso) return "";
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return "";
+  const seconds = Math.max(0, Math.floor((Date.now() - then) / 1000));
+  if (seconds < 60) return "now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h`;
+  const days = Math.floor(hours / 24);
+  if (days < 7) return `${days}d`;
+  return new Date(iso).toLocaleDateString(undefined, { month: "short", day: "numeric" });
+}

package/src/ui/styled/members/MemberHomeLayout.tsx

@@ -0,0 +1,98 @@
+import type { CSSProperties, ReactNode } from "react";
+import { ExternalLink } from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useMemberHomeNav, type MemberHomeNavItem, type UseMemberHomeNavOptions } from "../../headless/memberHome/useMemberHomeNav";
+
+export interface MemberHomeLayoutProps extends UseMemberHomeNavOptions {
+  /** Current location pathname (drives the active tab). */
+  currentPath: string;
+  /**
+   * SPA navigation adapter. Defaults to a full-page `window.location` visit —
+   * pass your router's navigate for client-side transitions.
+   */
+  navigate?: (href: string) => void;
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * The unified member home shell (`/i/members`): persistent nav across
+ * Posts / Collections / Spaces / Chat / My membership. Top scrollable tab bar
+ * on small screens, side nav on `lg+`. Tab visibility comes from
+ * `useMemberHomeNav` (conditional tabs hide until the profile has content).
+ * Hosts own routing — this only renders `children` for the active route.
+ */
+export function MemberHomeLayout({
+  currentPath,
+  navigate,
+  children,
+  className,
+  style,
+  ...navOptions
+}: MemberHomeLayoutProps) {
+  const t = useThemeTokens();
+  const { visibleItems, isReady } = useMemberHomeNav({ currentPath, ...navOptions });
+  const go = navigate ?? ((href: string) => window.location.assign(href));
+
+  const itemStyle = (item: MemberHomeNavItem): CSSProperties => ({
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    whiteSpace: "nowrap",
+    padding: "8px 14px",
+    borderRadius: t.cornerRadius,
+    border: "none",
+    cursor: "pointer",
+    fontFamily: t.fontFamily,
+    fontSize: 14,
+    fontWeight: item.active ? 700 : 500,
+    background: item.active ? t.primary : "transparent",
+    color: item.active ? t.textPrimary : t.text,
+  });
+
+  const renderItem = (item: MemberHomeNavItem) => (
+    <button
+      key={item.key}
+      type="button"
+      onClick={() => go(item.href)}
+      aria-current={item.active ? "page" : undefined}
+      style={itemStyle(item)}
+    >
+      {item.label}
+      {item.external && <ExternalLink size={14} style={{ opacity: 0.7, flexShrink: 0 }} />}
+    </button>
+  );
+
+  return (
+    <div
+      className={`flex w-full flex-col lg:flex-row lg:items-start lg:gap-8 ${className ?? ""}`}
+      style={{ color: t.text, fontFamily: t.fontFamily, ...style }}
+    >
+      {/* Top tab bar — small screens (horizontally scrollable, no burger). */}
+      <nav
+        aria-label="Member home"
+        className="flex w-full gap-1 overflow-x-auto lg:hidden"
+        style={{ borderBottom: `1px solid ${t.border}`, paddingBottom: 8, marginBottom: 16 }}
+      >
+        {isReady ? visibleItems.map(renderItem) : null}
+      </nav>
+
+      {/* Side nav — lg and up. */}
+      <nav
+        aria-label="Member home"
+        className="sticky top-4 hidden w-52 shrink-0 flex-col gap-1 lg:flex"
+        style={{
+          border: `1px solid ${t.border}`,
+          borderRadius: t.cornerRadius,
+          background: t.surface,
+          padding: 8,
+        }}
+      >
+        {isReady ? visibleItems.map(renderItem) : null}
+      </nav>
+
+      <main className="min-w-0 w-full flex-1">{children}</main>
+    </div>
+  );
+}