@tribe-nest/forge 1.13.0

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

@@ -0,0 +1,392 @@
+import { useState, type CSSProperties } from "react";
+import { Bookmark, Heart, Lock, MessageCircle, Pause, Play, FileText, BarChart2 } from "lucide-react";
+import type { IMedia, IPublicPost } from "../../../types/models";
+import { useAudioPlayer } from "../../../contexts/AudioPlayerContext";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { usePostItem, type UsePostItemOptions } from "../../headless/posts/usePostItem";
+
+export interface MemberPostCardProps extends UsePostItemOptions {
+  post: IPublicPost;
+  /** SPA navigation adapter (upsell CTA). Defaults to a full-page visit. */
+  navigate?: (href: string) => void;
+  /** Hide the artist header row (e.g. inside a collection). */
+  hideHeader?: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * One member post — parity with the craft members area's `PostItem`: artist
+ * header, caption, media (image / video / audio via the Forge audio player /
+ * document), like / save / comment engagement, and the locked treatment with
+ * an upgrade CTA (which tier unlocks + membership checkout deep link). Built
+ * on the headless `usePostItem`.
+ */
+export function MemberPostCard({
+  post,
+  navigate,
+  hideHeader,
+  className,
+  style,
+  ...itemOptions
+}: MemberPostCardProps) {
+  const t = useThemeTokens();
+  const item = usePostItem(post, itemOptions);
+  const { engagement } = item;
+  const go = navigate ?? ((href: string) => window.location.assign(href));
+  const [commentDraft, setCommentDraft] = useState("");
+
+  const separator = { height: 1, background: t.border } as const;
+
+  const actionButton = (
+    icon: React.ReactNode,
+    onClick: () => void,
+    count?: number,
+    label?: string,
+    pressed?: boolean,
+  ) => (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={label}
+      aria-pressed={pressed}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 4,
+        padding: 8,
+        borderRadius: 4,
+        border: "none",
+        background: "transparent",
+        cursor: "pointer",
+        color: t.text,
+        fontSize: 13,
+      }}
+    >
+      {icon}
+      {count !== undefined && <span>{count}</span>}
+    </button>
+  );
+
+  return (
+    <article
+      className={className}
+      style={{
+        width: "100%",
+        borderRadius: t.cornerRadius,
+        background: t.surface,
+        border: `1px solid ${t.border}`,
+        overflow: "hidden",
+        color: t.text,
+        fontFamily: t.fontFamily,
+        ...style,
+      }}
+    >
+      {/* Header */}
+      {!hideHeader && itemOptions.artistName && (
+        <>
+          <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "12px 16px" }}>
+            <span
+              aria-hidden
+              style={{
+                width: 40,
+                height: 40,
+                borderRadius: "50%",
+                background: t.primary,
+                color: t.textPrimary,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontWeight: 700,
+              }}
+            >
+              {itemOptions.artistName.charAt(0).toUpperCase()}
+            </span>
+            <span style={{ fontSize: 14, fontWeight: 700 }}>{itemOptions.artistName}</span>
+            {post.type === "poll" && (
+              <span
+                style={{
+                  marginLeft: "auto",
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: 4,
+                  fontSize: 12,
+                  color: t.muted,
+                }}
+              >
+                <BarChart2 size={14} /> Poll
+              </span>
+            )}
+          </div>
+          <div style={separator} />
+        </>
+      )}
+
+      {/* Caption */}
+      {post.caption && <p style={{ padding: 16, margin: 0, fontSize: 14, lineHeight: 1.5 }}>{post.caption}</p>}
+
+      {/* Body: locked upsell / media */}
+      {item.kind === "locked" && <LockedBody item={item} go={go} />}
+      {item.kind === "media" && item.media && (
+        <MediaBody media={item.media} item={item} />
+      )}
+
+      <div style={separator} />
+
+      {/* Engagement bar */}
+      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 12px" }}>
+        {actionButton(
+          <Heart size={18} fill={engagement.isLiked ? "currentColor" : "none"} />,
+          () => engagement.toggleLike(),
+          engagement.likeCount,
+          engagement.isLiked ? "Unlike" : "Like",
+          engagement.isLiked,
+        )}
+        {actionButton(
+          <MessageCircle size={18} />,
+          () => engagement.openComments(),
+          engagement.commentCount,
+          "Comments",
+        )}
+        {actionButton(
+          <Bookmark size={18} fill={engagement.isSaved ? "currentColor" : "none"} />,
+          () => engagement.toggleSave(),
+          undefined,
+          engagement.isSaved ? "Unsave" : "Save",
+          engagement.isSaved,
+        )}
+      </div>
+
+      {/* Comments (inline panel) */}
+      {engagement.showComments && (
+        <div style={{ borderTop: `1px solid ${t.border}`, padding: 16 }}>
+          <div style={{ display: "flex", flexDirection: "column", gap: 12, maxHeight: 320, overflowY: "auto" }}>
+            {engagement.comments.length === 0 && (
+              <span style={{ fontSize: 13, color: t.muted }}>No comments yet.</span>
+            )}
+            {engagement.comments.map((comment) => (
+              <div key={comment.id}>
+                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                  <span style={{ fontSize: 13, fontWeight: 600 }}>{comment.fullName || "Member"}</span>
+                  <span style={{ fontSize: 11, color: t.muted }}>
+                    {new Date(comment.createdAt).toLocaleDateString()}
+                  </span>
+                </div>
+                <p style={{ margin: "2px 0 0", fontSize: 13 }}>{comment.content}</p>
+              </div>
+            ))}
+          </div>
+          <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
+            <input
+              value={commentDraft}
+              onChange={(e) => setCommentDraft(e.target.value)}
+              placeholder="Add a comment…"
+              onKeyDown={async (e) => {
+                if (e.key === "Enter" && commentDraft.trim() && !engagement.isAddingComment) {
+                  await engagement.addComment(commentDraft);
+                  setCommentDraft("");
+                }
+              }}
+              style={{
+                flex: 1,
+                padding: "8px 12px",
+                borderRadius: t.cornerRadius,
+                border: `1px solid ${t.border}`,
+                background: t.background,
+                color: t.text,
+                fontSize: 13,
+                outline: "none",
+              }}
+            />
+            <button
+              type="button"
+              disabled={engagement.isAddingComment || !commentDraft.trim()}
+              onClick={async () => {
+                await engagement.addComment(commentDraft);
+                setCommentDraft("");
+              }}
+              style={{
+                padding: "8px 14px",
+                borderRadius: t.cornerRadius,
+                border: "none",
+                background: t.primary,
+                color: t.textPrimary,
+                fontWeight: 600,
+                fontSize: 13,
+                cursor: engagement.isAddingComment || !commentDraft.trim() ? "not-allowed" : "pointer",
+                opacity: engagement.isAddingComment || !commentDraft.trim() ? 0.6 : 1,
+              }}
+            >
+              {engagement.isAddingComment ? "Posting…" : "Post"}
+            </button>
+          </div>
+        </div>
+      )}
+    </article>
+  );
+}
+
+function LockedBody({ item, go }: { item: ReturnType<typeof usePostItem>; go: (href: string) => void }) {
+  const t = useThemeTokens();
+  const tierName = item.upsell.tier?.name;
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 12,
+        padding: "40px 16px",
+        textAlign: "center",
+        background: `${t.primary}0d`,
+      }}
+    >
+      <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 }}>
+          {tierName ? `Subscribe to ${tierName} to access this content` : "Subscribe to access this content"}
+        </div>
+      </div>
+      <button
+        type="button"
+        onClick={() => go(item.upsell.href)}
+        style={{
+          padding: "10px 18px",
+          borderRadius: t.cornerRadius,
+          border: "none",
+          background: t.primary,
+          color: t.textPrimary,
+          fontWeight: 600,
+          cursor: "pointer",
+        }}
+      >
+        Subscribe
+      </button>
+    </div>
+  );
+}
+
+function MediaBody({ media, item }: { media: IMedia; item: ReturnType<typeof usePostItem> }) {
+  const t = useThemeTokens();
+
+  if (media.type === "image") {
+    return (
+      <img
+        src={media.url}
+        alt={media.filename ?? ""}
+        style={{ width: "100%", maxHeight: "70vh", objectFit: "cover", display: "block" }}
+      />
+    );
+  }
+
+  if (media.type === "video") {
+    return (
+      <video src={media.url} controls playsInline style={{ width: "100%", maxHeight: "70vh", display: "block", background: "#000" }} />
+    );
+  }
+
+  if (media.type === "audio" && item.audioTrack) {
+    return <AudioBody item={item} />;
+  }
+
+  if (media.type === "document") {
+    return (
+      <a
+        href={media.url}
+        target="_blank"
+        rel="noreferrer"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          margin: 16,
+          padding: 16,
+          borderRadius: t.cornerRadius,
+          background: `${t.primary}0d`,
+          color: t.text,
+          textDecoration: "none",
+        }}
+      >
+        <span
+          style={{
+            width: 40,
+            height: 40,
+            borderRadius: 6,
+            background: t.primary,
+            color: t.textPrimary,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <FileText size={20} />
+        </span>
+        <span style={{ minWidth: 0 }}>
+          <span style={{ display: "block", fontSize: 14, fontWeight: 500 }}>{media.filename ?? "Document"}</span>
+          <span style={{ display: "block", fontSize: 12, color: t.muted }}>Document</span>
+        </span>
+      </a>
+    );
+  }
+
+  return null;
+}
+
+function AudioBody({ item }: { item: ReturnType<typeof usePostItem> }) {
+  const t = useThemeTokens();
+  const player = useAudioPlayer();
+  const track = item.audioTrack!;
+  const isCurrent = player.currentTrack?.id === track.id;
+  const playing = isCurrent && player.isPlaying;
+
+  const onClick = () => {
+    if (playing) return player.pause();
+    if (isCurrent) return player.play();
+    player.loadAndPlay(track, item.audioQueue);
+  };
+
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 16, margin: 16, padding: 16, borderRadius: t.cornerRadius, background: `${t.primary}0d` }}>
+      <button
+        type="button"
+        onClick={onClick}
+        aria-label={playing ? "Pause" : "Play"}
+        style={{
+          width: 48,
+          height: 48,
+          borderRadius: "50%",
+          border: "none",
+          background: t.primary,
+          color: t.textPrimary,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          cursor: "pointer",
+          flexShrink: 0,
+        }}
+      >
+        {playing ? <Pause size={20} /> : <Play size={20} style={{ marginLeft: 2 }} />}
+      </button>
+      <div style={{ minWidth: 0 }}>
+        <div style={{ fontSize: 14, fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+          {item.media?.filename || track.title}
+        </div>
+        <div style={{ fontSize: 12, color: t.muted }}>Audio track</div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,219 @@
+import { useState, type CSSProperties } from "react";
+import { Search, X } from "lucide-react";
+import type { PostType } from "../../../types/models";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useMemberPostsFeed, type UseMemberPostsFeedOptions } from "../../headless/posts/useMemberPostsFeed";
+import { Loading } from "../Loading";
+import { MemberPostCard } from "./MemberPostCard";
+
+export interface MemberPostsFeedProps extends UseMemberPostsFeedOptions {
+  /** Shown in each post's header + as the audio track artist. */
+  artistName?: string;
+  /** SPA navigation adapter (locked-post 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 `/login`). */
+  onRequireAuth?: () => void;
+  /** Login path for the default require-auth redirect (site-starter passes `/i/login`). */
+  loginPath?: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const POST_TYPES: Array<{ value: PostType; label: string }> = [
+  { value: "image", label: "Image" },
+  { value: "video", label: "Video" },
+  { value: "audio", label: "Audio" },
+  { value: "poll", label: "Poll" },
+];
+
+/**
+ * The member posts feed — parity with the craft members area: gated feed
+ * (server-side `hasAccess`, locked posts render an upgrade CTA), debounced
+ * search, post-type + membership-tier filters, saved-posts view, engagement
+ * on every card, and load-more paging. Built on the headless
+ * `useMemberPostsFeed` / `usePostItem`.
+ */
+export function MemberPostsFeed({
+  artistName,
+  navigate,
+  onRequireAuth,
+  loginPath = "/login",
+  className,
+  style,
+  ...feedOptions
+}: MemberPostsFeedProps) {
+  const t = useThemeTokens();
+  const feed = useMemberPostsFeed(feedOptions);
+  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 [searchFocused, setSearchFocused] = useState(false);
+
+  const chip = (label: string, selected: boolean, onClick: () => void) => (
+    <button
+      key={label}
+      type="button"
+      onClick={onClick}
+      aria-pressed={selected}
+      style={{
+        padding: "6px 12px",
+        borderRadius: 999,
+        border: `1px solid ${selected ? t.primary : t.border}`,
+        background: selected ? t.primary : "transparent",
+        color: selected ? t.textPrimary : t.text,
+        fontSize: 13,
+        fontWeight: selected ? 600 : 400,
+        cursor: "pointer",
+        whiteSpace: "nowrap",
+      }}
+    >
+      {label}
+    </button>
+  );
+
+  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={feed.search}
+          onChange={(e) => feed.setSearch(e.target.value)}
+          onFocus={() => setSearchFocused(true)}
+          onBlur={() => setSearchFocused(false)}
+          placeholder="Search posts…"
+          style={{ flex: 1, border: "none", outline: "none", background: "transparent", color: t.text, fontSize: 14 }}
+        />
+        {feed.search && (
+          <button
+            type="button"
+            aria-label="Clear search"
+            onClick={() => feed.setSearch("")}
+            style={{ border: "none", background: "transparent", color: t.muted, cursor: "pointer", display: "flex" }}
+          >
+            <X size={14} />
+          </button>
+        )}
+      </div>
+
+      {/* Filters: type chips + tier select + saved toggle */}
+      <div className="flex flex-wrap items-center gap-2">
+        {chip("All", !feed.type && !feed.savedOnly, () => {
+          feed.setType("");
+          feed.setSavedOnly(false);
+        })}
+        {POST_TYPES.map((pt) =>
+          chip(pt.label, feed.type === pt.value && !feed.savedOnly, () => {
+            feed.setSavedOnly(false);
+            feed.setType(feed.type === pt.value ? "" : pt.value);
+          }),
+        )}
+        {feed.isAuthenticated && chip("Saved", feed.savedOnly, () => feed.setSavedOnly(!feed.savedOnly))}
+        {feed.tiers.length > 0 && !feed.savedOnly && (
+          <select
+            value={feed.membershipTierId}
+            onChange={(e) => feed.setMembershipTierId(e.target.value)}
+            aria-label="Filter by membership tier"
+            style={{
+              marginLeft: "auto",
+              padding: "6px 10px",
+              borderRadius: t.cornerRadius,
+              border: `1px solid ${feed.membershipTierId ? t.primary : t.border}`,
+              background: t.surface,
+              color: t.text,
+              fontSize: 13,
+              cursor: "pointer",
+            }}
+          >
+            <option value="">All tiers</option>
+            {feed.tiers.map((tier) => (
+              <option key={tier.id} value={tier.id}>
+                {tier.name}
+              </option>
+            ))}
+          </select>
+        )}
+        {feed.hasActiveFilters && (
+          <button
+            type="button"
+            onClick={feed.clearFilters}
+            style={{
+              border: "none",
+              background: "transparent",
+              color: t.primary,
+              fontSize: 13,
+              textDecoration: "underline",
+              cursor: "pointer",
+            }}
+          >
+            Clear all
+          </button>
+        )}
+      </div>
+
+      {/* Feed */}
+      {feed.isLoading ? (
+        <Loading />
+      ) : feed.posts.length === 0 ? (
+        <p style={{ textAlign: "center", padding: "40px 20px", color: t.muted, fontSize: 15 }}>
+          {feed.hasActiveFilters ? "No posts found matching your filters" : "No posts yet"}
+        </p>
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+          {feed.posts.map((post) => (
+            <MemberPostCard
+              key={post.id}
+              post={post}
+              artistName={artistName}
+              otherAudioPosts={feed.audioPosts.filter((p) => p.id !== post.id)}
+              navigate={go}
+              onRequireAuth={requireAuth}
+              checkoutPath={feedOptions.checkoutPath}
+              signupPath={feedOptions.signupPath}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Load more */}
+      {feed.hasMore && (
+        <button
+          type="button"
+          onClick={feed.loadMore}
+          disabled={feed.isLoadingMore}
+          style={{
+            alignSelf: "center",
+            padding: "10px 24px",
+            borderRadius: t.cornerRadius,
+            border: `1px solid ${t.primary}`,
+            background: "transparent",
+            color: t.primary,
+            fontWeight: 600,
+            fontSize: 14,
+            cursor: feed.isLoadingMore ? "wait" : "pointer",
+            opacity: feed.isLoadingMore ? 0.6 : 1,
+          }}
+        >
+          {feed.isLoadingMore ? "Loading…" : "Load more"}
+        </button>
+      )}
+    </div>
+  );
+}