@tribe-nest/forge 3.59.0 → 3.60.0

package/src/ui/styled/communities/CommunitiesList.tsx

@@ -0,0 +1,88 @@
+import type { CSSProperties } from "react";
+import { Users } from "lucide-react";
+import { useCommunities } from "../../headless/communities/useCommunity";
+import { communityAboutPath } from "../../headless/communities/paths";
+import type { PublicCommunity } from "../../../data/queries/useCommunities";
+import { useForgeT } from "../../../i18n";
+import { Loading } from "../Loading";
+import { useCommunityStyles } from "./shared";
+
+export interface CommunitiesListProps {
+  /** SPA navigation adapter. Defaults to a full-page visit. */
+  navigate?: (href: string) => void;
+  /** Where a community card leads. Default its About page, `/i/communities/<slug>`. */
+  getCommunityHref?: (community: PublicCommunity) => string;
+  /** Optional page heading. Pass `null` to omit. */
+  heading?: string | null;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/** Every community on the profile, as cards. Built on `useCommunities()`. */
+export function CommunitiesList({ navigate, getCommunityHref, heading, className, style }: CommunitiesListProps) {
+  const tr = useForgeT();
+  const { t, card } = useCommunityStyles();
+  const { communities, isLoading } = useCommunities();
+  const go = navigate ?? ((href: string) => window.location.assign(href));
+  const hrefOf = getCommunityHref ?? ((community: PublicCommunity) => communityAboutPath(community.slug));
+  const resolvedHeading = heading === null ? null : (heading ?? tr("forge.communities_list.heading"));
+
+  if (isLoading) return <Loading fullPage />;
+
+  return (
+    <div className={className} style={{ color: t.text, fontFamily: t.fontFamily, ...style }}>
+      {resolvedHeading && (
+        <h1 style={{ fontSize: 30, fontWeight: 800, marginBottom: 24, fontFamily: t.headingFontFamily }}>
+          {resolvedHeading}
+        </h1>
+      )}
+      {communities.length === 0 ? (
+        <p style={{ opacity: 0.8 }}>{tr("forge.communities_list.empty")}</p>
+      ) : (
+        <div className="fg:grid fg:grid-cols-1 fg:gap-5 fg:sm:grid-cols-2 fg:lg:grid-cols-3">
+          {communities.map((community) => (
+            <button
+              key={community.id}
+              type="button"
+              data-testid="community-card"
+              onClick={() => go(hrefOf(community))}
+              className="fg:flex fg:flex-col fg:text-left"
+              style={{ ...card, padding: 0, overflow: "hidden", cursor: "pointer", font: "inherit" }}
+            >
+              <div
+                style={{
+                  height: 140,
+                  background: community.coverUrl ? `center / cover no-repeat url(${JSON.stringify(community.coverUrl)})` : `${t.primary}22`,
+                }}
+              />
+              <div className="fg:flex fg:flex-col fg:gap-2" style={{ padding: 16 }}>
+                <div className="fg:flex fg:items-center fg:gap-3">
+                  {community.logoUrl && (
+                    <img
+                      src={community.logoUrl}
+                      alt=""
+                      style={{ width: 36, height: 36, borderRadius: "50%", objectFit: "cover", flexShrink: 0 }}
+                    />
+                  )}
+                  <h2 style={{ fontSize: 18, fontWeight: 700, margin: 0, fontFamily: t.headingFontFamily }}>
+                    {community.name}
+                  </h2>
+                </div>
+                {community.category && <span style={{ fontSize: 12, color: t.muted }}>{community.category}</span>}
+                {community.description && (
+                  <p style={{ fontSize: 14, opacity: 0.85, margin: 0 }} className="fg:line-clamp-3">
+                    {community.description}
+                  </p>
+                )}
+                <span className="fg:flex fg:items-center fg:gap-1" style={{ fontSize: 13, color: t.muted }}>
+                  <Users size={14} />
+                  {tr("forge.communities_list.member_count", { count: community.memberCount })}
+                </span>
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/styled/communities/CommunityAbout.tsx

@@ -0,0 +1,140 @@
+import type { CSSProperties } from "react";
+import { Users } from "lucide-react";
+import { useCommunityAbout, type UseCommunityAboutOptions } from "../../headless/communities/useCommunityAbout";
+import { useForgeT } from "../../../i18n";
+import { useAmountFormatter } from "../../format/useFormatCurrency";
+import { membershipPriceLabel } from "../../format/membershipPriceLabel";
+import { Loading } from "../Loading";
+import { CommunityJoinSheet } from "./CommunityJoinSheet";
+import { useCommunityStyles } from "./shared";
+
+export interface CommunityAboutProps extends UseCommunityAboutOptions {
+  /** Format a tier price for display. Defaults to the runtime currency formatter. */
+  formatAmount?: (amount: number) => string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * A community's About page: cover, name, member count, description, what each
+ * tier gives, and one main button. For a visitor it is Join, which opens the
+ * join sheet IN PLACE; for a member it goes inside; for a pending applicant it
+ * goes to the pending screen. `?invite=` and `?join=` open the sheet straight
+ * away. Must sit inside `<CommunityProvider>`. Built on `useCommunityAbout`.
+ */
+export function CommunityAbout({ formatAmount, className, style, ...options }: CommunityAboutProps) {
+  const tr = useForgeT();
+  const { t, card, button, ghostButton, muted } = useCommunityStyles();
+  const fmt = useAmountFormatter(formatAmount);
+  const about = useCommunityAbout(options);
+
+  if (about.isLoading && !about.community) return <Loading fullPage />;
+  if (about.notFound || !about.community) {
+    return <p style={{ color: t.text }}>{tr("forge.community_about.not_found")}</p>;
+  }
+  const community = about.community;
+  const offer = about.joinOffer;
+  const mainLabel =
+    about.action === "enter"
+      ? tr("forge.community_about.go_inside")
+      : about.action === "pending"
+        ? tr("forge.community_about.view_application")
+        : offer?.kind === "free"
+          ? tr("forge.community_about.join_free")
+          : offer?.kind === "paid"
+            ? tr(offer.cycle === "year" ? "forge.community_about.join_from_yearly" : "forge.community_about.join_from", { amount: fmt(offer.amount) })
+            : offer?.kind === "apply"
+              ? tr("forge.community_about.apply")
+              : tr("forge.community_about.join");
+
+  return (
+    <div className={className} style={{ color: t.text, fontFamily: t.fontFamily, ...style }}>
+      <div
+        style={{
+          height: 220,
+          borderRadius: t.cornerRadius,
+          marginBottom: 24,
+          background: community.coverUrl ? `center / cover no-repeat url(${JSON.stringify(community.coverUrl)})` : `${t.primary}22`,
+        }}
+      />
+      <div className="fg:flex fg:flex-col fg:gap-6 fg:md:flex-row fg:md:items-start">
+        <div className="fg:flex fg:min-w-0 fg:flex-1 fg:flex-col fg:gap-3">
+          <div className="fg:flex fg:items-center fg:gap-3">
+            {community.logoUrl && (
+              <img src={community.logoUrl} alt="" style={{ width: 56, height: 56, borderRadius: "50%", objectFit: "cover" }} />
+            )}
+            <div>
+              <h1 style={{ fontSize: 30, fontWeight: 800, margin: 0, fontFamily: t.headingFontFamily }}>{community.name}</h1>
+              <p className="fg:flex fg:items-center fg:gap-1" style={muted}>
+                <Users size={14} />
+                {tr("forge.community_about.member_count", { count: community.memberCount })}
+                {community.category ? ` · ${community.category}` : ""}
+              </p>
+            </div>
+          </div>
+          {community.description && <p style={{ whiteSpace: "pre-line", lineHeight: 1.6 }}>{community.description}</p>}
+          {about.isPending && (
+            <p role="status" data-testid="community-about-pending" style={{ fontWeight: 600 }}>
+              {tr("forge.community_about.pending")}
+            </p>
+          )}
+        </div>
+        <div className="fg:w-full fg:md:w-[320px]" style={{ ...card, flexShrink: 0 }}>
+          <button type="button" data-testid="community-about-primary" onClick={about.primary} style={{ ...button, width: "100%" }}>
+            {mainLabel}
+          </button>
+        </div>
+      </div>
+
+      {about.tiers.length > 0 && (
+        <section style={{ marginTop: 32 }}>
+          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
+            {tr("forge.community_about.tiers_title")}
+          </h2>
+          <div className="fg:grid fg:grid-cols-1 fg:gap-4 fg:sm:grid-cols-2 fg:lg:grid-cols-3">
+            {about.tiers.map((tier) => {
+              const current = about.membership?.tierId === tier.id;
+              return (
+                <div key={tier.id} data-testid="community-about-tier" className="fg:flex fg:flex-col fg:gap-2" style={card}>
+                  <h3 style={{ fontSize: 17, fontWeight: 700, margin: 0 }}>{tier.name}</h3>
+                  <p style={{ fontWeight: 700, color: t.primary }}>{membershipPriceLabel(tier, tr, fmt)}</p>
+                  {tier.description && <p style={{ fontSize: 14, opacity: 0.85 }}>{tier.description}</p>}
+                  {!!tier.benefits?.length && (
+                    <ul className="fg:flex fg:flex-col fg:gap-1" style={{ listStyle: "none", padding: 0, margin: 0, fontSize: 14 }}>
+                      {tier.benefits.map((benefit) => (
+                        <li key={benefit.id} className="fg:flex fg:gap-2">
+                          <span style={{ color: t.primary }}>✓</span>
+                          {benefit.title}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                  <div style={{ marginTop: "auto" }}>
+                    {current ? (
+                      <p style={muted}>{tr("forge.community_about.current_tier")}</p>
+                    ) : about.action === "join" ? (
+                      <button type="button" style={{ ...ghostButton, width: "100%" }} onClick={() => about.openJoin(tier.id)}>
+                        {tier.joinMode === "application" ? tr("forge.community_about.apply") : tr("forge.community_about.join_tier")}
+                      </button>
+                    ) : null}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </section>
+      )}
+
+      {about.sheetOpen && (
+        <CommunityJoinSheet
+          open={about.sheetOpen}
+          onOpenChange={about.setSheetOpen}
+          tierId={about.sheetTierId}
+          invite={about.invite}
+          join={about.join}
+          navigate={options.navigate}
+        />
+      )}
+    </div>
+  );
+}

package/src/ui/styled/communities/CommunityHome.tsx

@@ -0,0 +1,175 @@
+import type { CSSProperties, ReactNode } from "react";
+import { CommunityUpgradeOpenerProvider } from "../../../contexts/CommunityContext";
+import { useCommunityHome, type UseCommunityHomeOptions } from "../../headless/communities/useCommunityHome";
+import type { MemberHomeNavKey } from "../../headless/memberHome/useMemberHomeNav";
+import { internalPath } from "../../../runtime/pages";
+import { useForgeT } from "../../../i18n";
+import { MemberHomeLayout } from "../members/MemberHomeLayout";
+import { MemberPostsFeed } from "../members/MemberPostsFeed";
+import { PostCollectionsGrid } from "../members/PostCollectionsGrid";
+import { MemberCallsCalendar } from "../members/MemberCallsCalendar";
+import { CommunitySpaces } from "../community/CommunitySpaces";
+import { CommunityLeaderboard } from "../community/CommunityLeaderboard";
+import { CommunityNotificationsInbox } from "../community/CommunityNotifications";
+import { ChatRoom } from "../ChatRoom";
+import { Loading } from "../Loading";
+import { CommunityMembershipMenu } from "./CommunityMembershipMenu";
+import { CommunityUpgradeSheet } from "./CommunityUpgradeSheet";
+import { Pill, useCommunityStyles } from "./shared";
+
+/** The member home tabs. `profile` is a member's profile page, which sits under Spaces in the nav. */
+export type CommunityHomeTab = "posts" | "collections" | "spaces" | "leaderboard" | "notifications" | "profile" | "calendar" | "chat";
+
+export interface CommunityHomeProps extends UseCommunityHomeOptions {
+  /** The active tab. Drives the nav; with no `children`, also which default body renders. */
+  tab?: CommunityHomeTab;
+  /** SPA navigation adapter. Defaults to a full-page visit. */
+  navigate?: (href: string) => void;
+  /** Current pathname, used for the active tab when `tab` is not given. */
+  currentPath?: string;
+  /**
+   * The tab's body. Omitted, the default Forge block for `tab` renders (the
+   * posts feed, collections, spaces, calendar, chat, leaderboard or
+   * notifications), so `<CommunityHome />` alone is a working member home.
+   */
+  children?: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+
+const NAV_KEY: Record<CommunityHomeTab, MemberHomeNavKey> = {
+  posts: "posts",
+  collections: "collections",
+  spaces: "spaces",
+  profile: "spaces",
+  leaderboard: "leaderboard",
+  notifications: "notifications",
+  calendar: "calendar",
+  chat: "chat",
+};
+
+/**
+ * Inside a community: a header with the community's name, the member's tier
+ * badge, an Upgrade button whenever a higher tier exists, and the Membership
+ * menu; then the member home tabs (`MemberHomeLayout`). Every locked item
+ * inside opens the ONE upgrade sheet this provides. A Stripe return
+ * (`confirmSubscription`) is reconciled here. Must sit inside
+ * `<CommunityProvider>`. Built on `useCommunityHome`.
+ */
+export function CommunityHome({
+  tab,
+  navigate,
+  currentPath,
+  children,
+  welcome,
+  confirmSubscription,
+  className,
+  style,
+}: CommunityHomeProps) {
+  const tr = useForgeT();
+  const { t, button, ghostButton, card } = useCommunityStyles();
+  const home = useCommunityHome({ welcome, confirmSubscription });
+  const go = navigate ?? ((href: string) => window.location.assign(href));
+
+  if (home.isLoading && !home.community) return <Loading fullPage />;
+  if (home.notFound || !home.community) return <p style={{ color: t.text }}>{tr("forge.community_home.not_found")}</p>;
+  const community = home.community;
+
+  return (
+    <CommunityUpgradeOpenerProvider value={home.opener}>
+      <div className={className} style={{ color: t.text, fontFamily: t.fontFamily, ...style }}>
+        <header
+          data-testid="community-home-header"
+          className="fg:flex fg:flex-col fg:gap-3 fg:sm:flex-row fg:sm:items-center fg:sm:justify-between"
+          style={{ marginBottom: 20 }}
+        >
+          <div className="fg:flex fg:min-w-0 fg:items-center fg:gap-3">
+            {community.logoUrl && (
+              <img src={community.logoUrl} alt="" style={{ width: 44, height: 44, borderRadius: "50%", objectFit: "cover", flexShrink: 0 }} />
+            )}
+            <h1 className="fg:truncate" style={{ fontSize: 24, fontWeight: 800, margin: 0, fontFamily: t.headingFontFamily }}>
+              {community.name}
+            </h1>
+            {home.membership && <Pill testId="community-home-tier-badge">{home.membership.tierName}</Pill>}
+          </div>
+          <div className="fg:flex fg:flex-wrap fg:items-center fg:gap-2">
+            {home.showUpgrade && (
+              <button type="button" data-testid="community-home-upgrade" style={button} onClick={() => home.openUpgrade(null)}>
+                {tr("forge.community_home.upgrade")}
+              </button>
+            )}
+            {home.membership && (
+              <button type="button" data-testid="community-home-membership" style={ghostButton} onClick={() => home.setMembershipOpen(true)}>
+                {tr("forge.community_home.membership")}
+              </button>
+            )}
+            {home.showJoin && home.joinPath && (
+              <button type="button" data-testid="community-home-join" style={button} onClick={() => go(home.joinPath)}>
+                {tr("forge.community_home.join")}
+              </button>
+            )}
+          </div>
+        </header>
+
+        {home.confirming && (
+          <p role="status" style={{ ...card, marginBottom: 16 }}>
+            {tr("forge.community_home.confirming")}
+          </p>
+        )}
+        {home.welcomeVisible && (
+          <div role="status" data-testid="community-home-welcome" className="fg:flex fg:items-center fg:justify-between fg:gap-3" style={{ ...card, marginBottom: 16 }}>
+            <p style={{ fontWeight: 600 }}>{tr("forge.community_home.welcome", { community_name: community.name })}</p>
+            <button type="button" style={ghostButton} onClick={home.dismissWelcome}>
+              {tr("forge.community_home.dismiss")}
+            </button>
+          </div>
+        )}
+
+        <MemberHomeLayout currentPath={currentPath} activeKey={tab ? NAV_KEY[tab] : undefined} navigate={go}>
+          {children ?? <DefaultTabBody tab={tab ?? "posts"} slug={community.slug} go={go} />}
+        </MemberHomeLayout>
+
+        <CommunityUpgradeSheet
+          open={home.upgradeOpen}
+          onOpenChange={home.setUpgradeOpen}
+          initialTierId={home.upgradeTierId}
+          navigate={navigate}
+        />
+        <CommunityMembershipMenu open={home.membershipOpen} onOpenChange={home.setMembershipOpen} />
+      </div>
+    </CommunityUpgradeOpenerProvider>
+  );
+}
+
+/** The default body for a tab, when the host renders none of its own. */
+function DefaultTabBody({ tab, slug, go }: { tab: CommunityHomeTab; slug: string; go: (href: string) => void }) {
+  const thread = (postId: string) => internalPath("communities/$slug/home/spaces/posts/$postId", { slug, postId });
+  const profile = (accountId: string) => internalPath("communities/$slug/home/profile/$accountId", { slug, accountId });
+  switch (tab) {
+    case "posts":
+      return <MemberPostsFeed navigate={go} signupPath={internalPath("signup")} loginPath={internalPath("login")} />;
+    case "collections":
+      return <PostCollectionsGrid navigate={go} signupPath={internalPath("signup")} />;
+    case "spaces":
+      return (
+        <CommunitySpaces
+          onOpenSpace={(space) => go(internalPath("communities/$slug/home/spaces/$spaceId", { slug, spaceId: space.slug ?? space.id }))}
+        />
+      );
+    case "leaderboard":
+      return <CommunityLeaderboard onOpenProfile={(accountId) => go(profile(accountId))} />;
+    case "notifications":
+      return <CommunityNotificationsInbox onOpenPost={(postId) => go(thread(postId))} />;
+    case "calendar":
+      return (
+        <MemberCallsCalendar
+          navigate={go}
+          getCallHref={(publicId) => internalPath("video-calls/$callId", { callId: publicId })}
+        />
+      );
+    case "chat":
+      return <ChatRoom />;
+    default:
+      return null;
+  }
+}