@tribe-nest/forge 1.13.0

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

@@ -0,0 +1,227 @@
+import type { CSSProperties } from "react";
+import { ArrowLeft, Lock } from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import {
+  usePostCollectionDetail,
+  type UsePostCollectionDetailOptions,
+} from "../../headless/posts/usePostCollectionDetail";
+import { Loading } from "../Loading";
+import { MemberPostCard } from "./MemberPostCard";
+
+export interface PostCollectionDetailProps extends UsePostCollectionDetailOptions {
+  /** A collection uuid OR its per-profile slug — the public detail endpoint resolves either. */
+  collectionId: string;
+  /** Where the back button returns to (default `/i/members/collections`). */
+  backHref?: string;
+  /** Shown as the audio track artist for audio posts inside the collection. */
+  artistName?: string;
+  /** SPA navigation adapter (back button + upsell CTA). Defaults to a full-page visit. */
+  navigate?: (href: string) => void;
+  /** Called when a logged-out visitor tries to like/save/comment (default: navigate to `loginPath`). */
+  onRequireAuth?: () => void;
+  /** Login path for the default require-auth redirect (site-starter passes `/i/login`). */
+  loginPath?: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * One collection's drill-in view — parity with the craft members area's
+ * `CollectionsContent` detail: back link, cover + title + rich-text
+ * description header, then the collection's posts as full member post cards
+ * (engagement, audio queue scoped to the collection, per-post gating). A
+ * locked collection renders the upgrade CTA instead of posts — access is
+ * server-computed, never faked client-side. Built on the headless
+ * `usePostCollectionDetail`.
+ */
+export function PostCollectionDetail({
+  collectionId,
+  backHref = "/i/members/collections",
+  artistName,
+  navigate,
+  onRequireAuth,
+  loginPath = "/login",
+  className,
+  style,
+  ...detailOptions
+}: PostCollectionDetailProps) {
+  const t = useThemeTokens();
+  const detail = usePostCollectionDetail(collectionId, detailOptions);
+  const go = navigate ?? ((href: string) => window.location.assign(href));
+  const requireAuth =
+    onRequireAuth ??
+    (() => {
+      const redirect = typeof window !== "undefined" ? `${window.location.pathname}${window.location.search}` : "";
+      go(redirect ? `${loginPath}?redirect=${encodeURIComponent(redirect)}` : loginPath);
+    });
+
+  const backButton = (
+    <button
+      type="button"
+      onClick={() => go(backHref)}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 8,
+        alignSelf: "flex-start",
+        padding: "8px 14px",
+        borderRadius: t.cornerRadius,
+        border: `1px solid ${t.border}`,
+        background: t.surface,
+        color: t.text,
+        fontSize: 13,
+        fontWeight: 600,
+        cursor: "pointer",
+      }}
+    >
+      <ArrowLeft size={14} style={{ color: t.primary }} /> All collections
+    </button>
+  );
+
+  if (detail.isLoading) {
+    return (
+      <div className={className} style={{ display: "flex", flexDirection: "column", gap: 16, ...style }}>
+        {backButton}
+        <Loading />
+      </div>
+    );
+  }
+
+  if (detail.isError || !detail.collection) {
+    return (
+      <div
+        className={className}
+        style={{ display: "flex", flexDirection: "column", gap: 16, fontFamily: t.fontFamily, ...style }}
+      >
+        {backButton}
+        <p style={{ textAlign: "center", padding: "40px 20px", color: t.muted, fontSize: 15 }}>Collection not found</p>
+      </div>
+    );
+  }
+
+  const collection = detail.collection;
+
+  return (
+    <div
+      className={className}
+      style={{ display: "flex", flexDirection: "column", gap: 16, color: t.text, fontFamily: t.fontFamily, ...style }}
+    >
+      {backButton}
+
+      {/* Collection header */}
+      <div
+        style={{
+          padding: 24,
+          borderRadius: t.cornerRadius,
+          background: t.surface,
+          border: `1px solid ${t.border}`,
+        }}
+      >
+        {detail.cover && (
+          <img
+            src={detail.cover.url}
+            alt={collection.title}
+            style={{
+              width: "100%",
+              aspectRatio: "1 / 1",
+              objectFit: "cover",
+              display: "block",
+              borderRadius: t.cornerRadius,
+              marginBottom: 16,
+            }}
+          />
+        )}
+        <h2 style={{ margin: 0, fontSize: 26, fontWeight: 700 }}>{collection.title}</h2>
+        {collection.description && (
+          <div
+            style={{ marginTop: 8, fontSize: 15, lineHeight: 1.6, color: t.muted }}
+            dangerouslySetInnerHTML={{ __html: collection.description }}
+          />
+        )}
+      </div>
+
+      {/* Locked collection → upgrade CTA (server-gated; posts are not shipped). */}
+      {!detail.hasAccess ? (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 12,
+            padding: "40px 16px",
+            borderRadius: t.cornerRadius,
+            background: `${t.primary}0d`,
+            textAlign: "center",
+          }}
+        >
+          <span
+            style={{
+              width: 56,
+              height: 56,
+              borderRadius: "50%",
+              background: `${t.primary}22`,
+              color: t.primary,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <Lock size={24} />
+          </span>
+          <div>
+            <div style={{ fontSize: 16, fontWeight: 700 }}>Content locked</div>
+            <div style={{ fontSize: 13, color: t.muted, marginTop: 2 }}>
+              {detail.upsell?.tier?.name
+                ? `Subscribe to ${detail.upsell.tier.name} to access this content`
+                : "Subscribe to access this content"}
+            </div>
+          </div>
+          {detail.upsell && (
+            <button
+              type="button"
+              onClick={() => go(detail.upsell!.href)}
+              style={{
+                padding: "10px 18px",
+                borderRadius: t.cornerRadius,
+                border: "none",
+                background: t.primary,
+                color: t.textPrimary,
+                fontWeight: 600,
+                cursor: "pointer",
+              }}
+            >
+              Subscribe
+            </button>
+          )}
+        </div>
+      ) : (
+        <>
+          <div style={{ fontSize: 16, fontWeight: 700 }}>
+            Collection items: {detail.posts.length}
+          </div>
+          {detail.posts.length === 0 ? (
+            <p style={{ textAlign: "center", padding: "40px 20px", color: t.muted, fontSize: 15 }}>
+              No posts in this collection
+            </p>
+          ) : (
+            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+              {detail.posts.map((post) => (
+                <MemberPostCard
+                  key={post.id}
+                  post={post}
+                  hideHeader
+                  artistName={artistName}
+                  otherAudioPosts={detail.audioPosts.filter((p) => p.id !== post.id)}
+                  navigate={go}
+                  onRequireAuth={requireAuth}
+                  checkoutPath={detailOptions.checkoutPath}
+                  signupPath={detailOptions.signupPath}
+                />
+              ))}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,287 @@
+import { useState, type CSSProperties } from "react";
+import { ChevronLeft, ChevronRight, FileText, Lock, Search, X } from "lucide-react";
+import type { IPublicPostCollection } from "../../../types/models";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import {
+  usePostCollectionsList,
+  type UsePostCollectionsListOptions,
+} from "../../headless/posts/usePostCollectionsList";
+import type { PostUpsell } from "../../headless/posts/upsell";
+import { Loading } from "../Loading";
+
+export interface PostCollectionsGridProps extends UsePostCollectionsListOptions {
+  /**
+   * Builds the drill-in href for an accessible collection. Receives the
+   * collection's slug when it has one, else its uuid — the public detail
+   * endpoint resolves either. Default `` (idOrSlug) => `/i/members/collections/${idOrSlug}` ``.
+   */
+  getCollectionHref?: (idOrSlug: string) => string;
+  /** SPA navigation adapter (drill-in + locked-collection upsell CTA). Defaults to a full-page visit. */
+  navigate?: (href: string) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const stripHtml = (html: string, len = 100) => {
+  const text = html
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+  return text.length > len ? text.slice(0, len) + "…" : text;
+};
+
+/**
+ * The member collections grid — parity with the craft members area's
+ * `CollectionsContent` list: cover, title, description, post count per
+ * collection; locked collections render dimmed with a Subscribe CTA that
+ * deep-links membership checkout (`hasAccess` is server-computed — a locked
+ * collection never opens); accessible collections drill into the detail view.
+ * Debounced search + numbered paging. Built on the headless
+ * `usePostCollectionsList`.
+ */
+export function PostCollectionsGrid({
+  getCollectionHref = (idOrSlug) => `/i/members/collections/${idOrSlug}`,
+  navigate,
+  className,
+  style,
+  ...listOptions
+}: PostCollectionsGridProps) {
+  const t = useThemeTokens();
+  const list = usePostCollectionsList(listOptions);
+  const go = navigate ?? ((href: string) => window.location.assign(href));
+  const [searchFocused, setSearchFocused] = useState(false);
+
+  return (
+    <div
+      className={className}
+      style={{ display: "flex", flexDirection: "column", gap: 16, color: t.text, fontFamily: t.fontFamily, ...style }}
+    >
+      {/* Search */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          padding: "10px 14px",
+          borderRadius: t.cornerRadius,
+          border: `1px solid ${searchFocused ? t.primary : t.border}`,
+          background: t.surface,
+        }}
+      >
+        <Search size={16} style={{ color: t.muted, flexShrink: 0 }} />
+        <input
+          value={list.search}
+          onChange={(e) => list.setSearch(e.target.value)}
+          onFocus={() => setSearchFocused(true)}
+          onBlur={() => setSearchFocused(false)}
+          placeholder="Search collections…"
+          style={{ flex: 1, border: "none", outline: "none", background: "transparent", color: t.text, fontSize: 14 }}
+        />
+        {list.search && (
+          <button
+            type="button"
+            aria-label="Clear search"
+            onClick={() => list.clearFilters()}
+            style={{ border: "none", background: "transparent", color: t.muted, cursor: "pointer", display: "flex" }}
+          >
+            <X size={14} />
+          </button>
+        )}
+      </div>
+
+      {/* Grid */}
+      {list.isLoading ? (
+        <Loading />
+      ) : list.collections.length === 0 ? (
+        <p style={{ textAlign: "center", padding: "40px 20px", color: t.muted, fontSize: 15 }}>
+          {list.hasActiveFilters ? "No collections found matching your filters" : "No collections yet"}
+        </p>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {list.collections.map((collection) => (
+            <CollectionCard
+              key={collection.id}
+              collection={collection}
+              upsell={list.getUpsell(collection)}
+              onOpen={() => go(getCollectionHref(collection.slug ?? collection.id))}
+              go={go}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Pagination */}
+      {list.totalPages > 1 && (
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 12 }}>
+          <button
+            type="button"
+            onClick={list.prevPage}
+            disabled={!list.hasPrevPage}
+            aria-label="Previous page"
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 4,
+              padding: "8px 14px",
+              borderRadius: t.cornerRadius,
+              border: `1px solid ${t.border}`,
+              background: "transparent",
+              color: t.text,
+              fontSize: 13,
+              cursor: list.hasPrevPage ? "pointer" : "not-allowed",
+              opacity: list.hasPrevPage ? 1 : 0.4,
+            }}
+          >
+            <ChevronLeft size={14} /> Prev
+          </button>
+          <span style={{ fontSize: 13, color: t.muted }}>
+            Page {list.page} of {list.totalPages}
+          </span>
+          <button
+            type="button"
+            onClick={list.nextPage}
+            disabled={!list.hasNextPage}
+            aria-label="Next page"
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 4,
+              padding: "8px 14px",
+              borderRadius: t.cornerRadius,
+              border: `1px solid ${t.border}`,
+              background: "transparent",
+              color: t.text,
+              fontSize: 13,
+              cursor: list.hasNextPage ? "pointer" : "not-allowed",
+              opacity: list.hasNextPage ? 1 : 0.4,
+            }}
+          >
+            Next <ChevronRight size={14} />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CollectionCard({
+  collection,
+  upsell,
+  onOpen,
+  go,
+}: {
+  collection: IPublicPostCollection;
+  upsell: PostUpsell;
+  onOpen: () => void;
+  go: (href: string) => void;
+}) {
+  const t = useThemeTokens();
+  const locked = !collection.hasAccess;
+  const cover = collection.media?.[0];
+  const description = collection.description ? stripHtml(collection.description) : "";
+  const tierName = upsell.tier?.name;
+
+  return (
+    <div
+      role={locked ? undefined : "button"}
+      tabIndex={locked ? undefined : 0}
+      onClick={locked ? undefined : onOpen}
+      onKeyDown={
+        locked
+          ? undefined
+          : (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onOpen();
+              }
+            }
+      }
+      aria-label={locked ? `${collection.title} (locked)` : `Open collection ${collection.title}`}
+      style={{
+        opacity: locked ? 0.6 : 1,
+        borderRadius: t.cornerRadius,
+        background: t.surface,
+        border: `1px solid ${t.border}`,
+        overflow: "hidden",
+        cursor: locked ? "default" : "pointer",
+        color: t.text,
+        fontFamily: t.fontFamily,
+      }}
+    >
+      {cover && (
+        <img
+          src={cover.url}
+          alt={collection.title}
+          style={{ width: "100%", aspectRatio: "1 / 1", objectFit: "cover", display: "block" }}
+        />
+      )}
+      <div style={{ padding: 20 }}>
+        <h3 style={{ margin: 0, fontSize: 18, fontWeight: 700 }}>{collection.title}</h3>
+        {description && (
+          <p style={{ margin: "8px 0 0", fontSize: 13, lineHeight: 1.5, color: t.muted }}>{description}</p>
+        )}
+        <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 12, fontSize: 13, color: t.muted }}>
+          <FileText size={14} />
+          <span>
+            {collection.posts?.length || 0} {(collection.posts?.length || 0) === 1 ? "post" : "posts"}
+          </span>
+        </div>
+
+        {locked && (
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 8,
+              marginTop: 16,
+              padding: "16px 12px",
+              borderRadius: t.cornerRadius,
+              background: `${t.primary}0d`,
+              textAlign: "center",
+            }}
+          >
+            <span
+              style={{
+                width: 40,
+                height: 40,
+                borderRadius: "50%",
+                background: `${t.primary}22`,
+                color: t.primary,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <Lock size={18} />
+            </span>
+            <div style={{ fontSize: 15, fontWeight: 700 }}>Content locked</div>
+            <div style={{ fontSize: 13, color: t.muted }}>
+              {tierName ? `Subscribe to ${tierName} to access this content` : "Subscribe to access this content"}
+            </div>
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                go(upsell.href);
+              }}
+              style={{
+                marginTop: 4,
+                padding: "8px 16px",
+                borderRadius: t.cornerRadius,
+                border: "none",
+                background: t.primary,
+                color: t.textPrimary,
+                fontWeight: 600,
+                fontSize: 13,
+                cursor: "pointer",
+              }}
+            >
+              Subscribe
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+// Unified member home styled blocks. NOTE: lane-local aggregator — the
+// integrator re-exports it from `ui/index.ts` (`export * from "./styled/members"`).
+export { MemberHomeLayout, type MemberHomeLayoutProps } from "./MemberHomeLayout";
+export { MemberPostsFeed, type MemberPostsFeedProps } from "./MemberPostsFeed";
+export { MemberPostCard, type MemberPostCardProps } from "./MemberPostCard";
+export { PostCollectionsGrid, type PostCollectionsGridProps } from "./PostCollectionsGrid";
+export { PostCollectionDetail, type PostCollectionDetailProps } from "./PostCollectionDetail";

package/src/ui/styled/rich-text.css

@@ -0,0 +1,150 @@
+/*
+ * Baseline styles for rich-text content rendered by Forge's styled blocks
+ * (BlogPost, PodcastEpisode). Ported from
+ * packages/frontend-shared/src/rich-text.css — the SAME rules are applied to
+ * the admin editor's content area, so authoring matches the result (WYSIWYG).
+ * Keep the two files in sync when the editor baseline changes.
+ *
+ * Bundled with Forge: the styled blocks that render `.rich-text` content import
+ * this file directly, so consumers get correct rendering with no host-loaded
+ * stylesheet. Structure + spacing only — color and font are inherited from each
+ * surface, so it never fights per-tenant theming.
+ */
+
+.rich-text {
+  line-height: 1.6;
+}
+.rich-text > :first-child {
+  margin-top: 0;
+}
+
+.rich-text p {
+  margin: 0 0 1rem;
+}
+
+.rich-text h1 {
+  font-size: 1.875rem;
+  font-weight: 800;
+  line-height: 1.2;
+  margin: 1.75rem 0 0.75rem;
+}
+.rich-text h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.25;
+  margin: 1.5rem 0 0.75rem;
+}
+.rich-text h3 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1.3;
+  margin: 1.25rem 0 0.5rem;
+}
+.rich-text h4 {
+  font-size: 1.125rem;
+  font-weight: 700;
+  margin: 1rem 0 0.5rem;
+}
+.rich-text h5 {
+  font-size: 1rem;
+  font-weight: 700;
+  margin: 1rem 0 0.5rem;
+}
+
+/* list-style-position defaults to `outside`, so wrapped lines hang-indent and
+   align under the text; full width (no max-width). */
+.rich-text ul {
+  list-style: disc;
+  padding-left: 1.5rem;
+  margin: 0 0 1rem;
+}
+.rich-text ol {
+  list-style: decimal;
+  padding-left: 1.5rem;
+  margin: 0 0 1rem;
+}
+.rich-text li {
+  margin: 0.25rem 0;
+}
+.rich-text li > ul,
+.rich-text li > ol {
+  margin: 0.25rem 0;
+}
+
+.rich-text blockquote {
+  border-left: 3px solid currentColor;
+  padding-left: 1rem;
+  margin: 0 0 1rem;
+  opacity: 0.85;
+  font-style: italic;
+}
+
+.rich-text a {
+  text-decoration: underline;
+}
+.rich-text strong,
+.rich-text b {
+  font-weight: 700;
+}
+.rich-text em,
+.rich-text i {
+  font-style: italic;
+}
+
+.rich-text hr {
+  margin: 1.5rem 0;
+  border: 0;
+  border-top: 1px solid currentColor;
+  opacity: 0.2;
+}
+
+.rich-text img {
+  max-width: 100%;
+  height: auto;
+}
+.rich-text figure {
+  margin: 1rem 0;
+}
+
+/* CTA button (inserted from the editor). Colors / radius / font come from the
+   site theme via `--forge-*` on published sites, falling back to the admin
+   design tokens (`--primary`, `--radius`) in the editor. Alignment is inline
+   (text-align on the .rich-text-button-wrap), so it round-trips without CSS. */
+.rich-text .rich-text-button-wrap {
+  margin: 1rem 0;
+}
+.rich-text .rich-text-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  font-weight: 600;
+  line-height: 1.2;
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: var(--forge-radius, var(--radius, 0.5rem));
+  font-family: var(--forge-font, inherit);
+  cursor: pointer;
+  transition: opacity 0.15s ease, background 0.15s ease;
+}
+.rich-text .rich-text-button:hover {
+  opacity: 0.9;
+}
+.rich-text .rich-text-button--filled {
+  background: var(--forge-primary, hsl(var(--primary, 262 83% 58%)));
+  color: var(--forge-text-primary, hsl(var(--primary-foreground, 0 0% 100%)));
+}
+.rich-text .rich-text-button--outline {
+  background: transparent;
+  color: var(--forge-primary, hsl(var(--primary, 262 83% 58%)));
+  border-color: var(--forge-primary, hsl(var(--primary, 262 83% 58%)));
+}
+.rich-text .rich-text-button--ghost {
+  background: transparent;
+  color: var(--forge-primary, hsl(var(--primary, 262 83% 58%)));
+}
+.rich-text .rich-text-button--ghost:hover {
+  opacity: 1;
+  background: color-mix(in srgb, var(--forge-primary, hsl(var(--primary, 262 83% 58%))) 10%, transparent);
+}