@tribe-nest/forge 3.59.0 → 3.61.0

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

@@ -1,39 +1,171 @@
-import type { CSSProperties, ReactNode } from "react";
-import { ExternalLink } from "lucide-react";
+import { useEffect, useState, type CSSProperties, type ReactNode } from "react";
+import {
+  BadgeCheck,
+  Bell,
+  BookOpen,
+  CalendarDays,
+  ChevronRight,
+  GraduationCap,
+  LayoutGrid,
+  Library,
+  Menu,
+  MessageCircle,
+  Newspaper,
+  ShieldCheck,
+  Trophy,
+  Users,
+  type LucideIcon,
+} from "lucide-react";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
-import { useMemberHomeNav, type MemberHomeNavItem, type UseMemberHomeNavOptions } from "../../headless/memberHome/useMemberHomeNav";
+import { useForgeT } from "../../../i18n";
+import {
+  useMemberHomeNav,
+  type MemberHomeNavItem,
+  type MemberHomeNavKey,
+  type UseMemberHomeNavOptions,
+} from "../../headless/memberHome/useMemberHomeNav";
+import { buildMemberHomeBar, type MemberHomeMoreGroup } from "../../headless/memberHome/memberHomeBar";
+import { CommunitySheet } from "../communities/shared";
+
+/** Literal keys, so the translation spec can see every one of them. */
+const TAB_LABEL_KEYS: Record<MemberHomeNavKey, string> = {
+  posts: "forge.member_home_layout.tab_posts",
+  collections: "forge.member_home_layout.tab_collections",
+  spaces: "forge.member_home_layout.tab_spaces",
+  calendar: "forge.member_home_layout.tab_calendar",
+  classroom: "forge.member_home_layout.tab_classroom",
+  chat: "forge.member_home_layout.tab_chat",
+  leaderboard: "forge.member_home_layout.tab_leaderboard",
+  notifications: "forge.member_home_layout.tab_notifications",
+  members: "forge.member_home_layout.tab_members",
+  wiki: "forge.member_home_layout.tab_wiki",
+  moderation: "forge.member_home_layout.tab_moderation",
+};
+
+/** The bar has room for one short word under each icon, so two tabs get shorter names there. */
+const BAR_LABEL_KEYS: Record<MemberHomeNavKey, string> = {
+  ...TAB_LABEL_KEYS,
+  posts: "forge.member_home_layout.bar_feed",
+  notifications: "forge.member_home_layout.bar_alerts",
+};
+
+const GROUP_LABEL_KEYS: Record<MemberHomeMoreGroup, string> = {
+  community: "forge.member_home_layout.group_community",
+  you: "forge.member_home_layout.group_you",
+};
+
+const TAB_ICONS: Record<MemberHomeNavKey, LucideIcon> = {
+  posts: Newspaper,
+  collections: Library,
+  spaces: LayoutGrid,
+  calendar: CalendarDays,
+  classroom: GraduationCap,
+  chat: MessageCircle,
+  leaderboard: Trophy,
+  notifications: Bell,
+  members: Users,
+  wiki: BookOpen,
+  moderation: ShieldCheck,
+};
+
+/** Tailwind's `lg`: the side nav replaces the bottom bar from here up. */
+const BAR_BREAKPOINT = 1024;
+/** The bar's height above the safe area, matching `BarButton`'s min height. */
+const BAR_HEIGHT = 56;
+/** The chat room's message box on a phone, plus a gap: how far the site's chat bubble rises in chat. */
+const CHAT_COMPOSER_LIFT = 88;
 
 export interface MemberHomeLayoutProps extends UseMemberHomeNavOptions {
-  /** Current location pathname (drives the active tab). */
-  currentPath: string;
+  /** Current location pathname (drives the active tab when `activeKey` is not given). */
+  currentPath?: string;
   /**
-   * SPA navigation adapter. Defaults to a full-page `window.location` visit —
-   * pass your router's navigate for client-side transitions.
+   * SPA navigation adapter. Defaults to a full-page `window.location` visit.
+   * Pass your router's navigate for client-side transitions.
    */
   navigate?: (href: string) => void;
+  /**
+   * Opens the member's membership sheet. Given, the phone's "More" sheet lists
+   * "Your membership" under "You". `CommunityHome` passes it for a member.
+   */
+  onOpenMembership?: () => 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.
+ * A community's member home shell (`/i/communities/<slug>/home`): persistent
+ * nav across Posts / Collections / Spaces / Calendar / Chat / Leaderboard /
+ * Notifications and the rest.
+ *
+ * On `lg+` a side nav. Below `lg` a bottom bar with four slots and "More",
+ * which opens a sheet with everything else (see `buildMemberHomeBar` for who
+ * gets a slot). The bar publishes its height as `--forge-bottom-bar-height` on
+ * the root, so the site's chat bubble sits above it rather than on "More".
+ *
+ * Tab visibility comes from `useMemberHomeNav` (conditional tabs hide until the
+ * community has content). Must sit inside `<CommunityProvider>`; `CommunityHome`
+ * wraps it with the community header. Hosts own routing: this only renders
+ * `children` for the active route.
  */
 export function MemberHomeLayout({
   currentPath,
   navigate,
+  onOpenMembership,
   children,
   className,
   style,
   ...navOptions
 }: MemberHomeLayoutProps) {
   const t = useThemeTokens();
-  const { visibleItems, isReady } = useMemberHomeNav({ currentPath, ...navOptions });
+  const tr = useForgeT();
+  const { visibleItems, isReady, activeKey } = useMemberHomeNav({ currentPath, ...navOptions });
   const go = navigate ?? ((href: string) => window.location.assign(href));
+  const [moreOpen, setMoreOpen] = useState(false);
+
+  const model = buildMemberHomeBar({ visibleItems, activeKey });
+  const hasMore = model.more.length > 0 || !!onOpenMembership;
+  // One lone "Feed" button is not navigation: a visitor with nothing else to
+  // open gets no bar at all.
+  const showBar = isReady && (model.bar.length > 1 || hasMore);
+
+  // Tell anything else pinned to the bottom of the screen (the site's chat
+  // bubble, the chat room's height) how tall the bar is. Set on the root
+  // because those live outside this tree.
+  useEffect(() => {
+    if (!showBar || typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const root = document.documentElement;
+    const narrow = window.matchMedia(`(max-width: ${BAR_BREAKPOINT - 1}px)`);
+    const apply = () =>
+      narrow.matches
+        ? root.style.setProperty("--forge-bottom-bar-height", `${BAR_HEIGHT}px`)
+        : root.style.removeProperty("--forge-bottom-bar-height");
+    apply();
+    narrow.addEventListener?.("change", apply);
+    return () => {
+      narrow.removeEventListener?.("change", apply);
+      root.style.removeProperty("--forge-bottom-bar-height");
+    };
+  }, [showBar]);
+
+  // In chat the message box sits right above the bar, with Send on the right,
+  // where the site's chat bubble would land. Lift the bubble clear of it.
+  const inChat = activeKey === "chat";
+  useEffect(() => {
+    if (!inChat || typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const root = document.documentElement;
+    const narrow = window.matchMedia(`(max-width: ${BAR_BREAKPOINT - 1}px)`);
+    const apply = () =>
+      narrow.matches
+        ? root.style.setProperty("--forge-floating-lift", `${CHAT_COMPOSER_LIFT}px`)
+        : root.style.removeProperty("--forge-floating-lift");
+    apply();
+    narrow.addEventListener?.("change", apply);
+    return () => {
+      narrow.removeEventListener?.("change", apply);
+      root.style.removeProperty("--forge-floating-lift");
+    };
+  }, [inChat]);
 
   const itemStyle = (item: MemberHomeNavItem): CSSProperties => ({
     display: "flex",
@@ -51,7 +183,7 @@ export function MemberHomeLayout({
     color: item.active ? t.textPrimary : t.text,
   });
 
-  const renderItem = (item: MemberHomeNavItem) => (
+  const renderSideItem = (item: MemberHomeNavItem) => (
     <button
       key={item.key}
       type="button"
@@ -59,28 +191,54 @@ export function MemberHomeLayout({
       aria-current={item.active ? "page" : undefined}
       style={itemStyle(item)}
     >
-      {item.label}
-      {item.external && <ExternalLink size={14} style={{ opacity: 0.7, flexShrink: 0 }} />}
+      {tr(TAB_LABEL_KEYS[item.key])}
+    </button>
+  );
+
+  const sheetRowStyle = (active: boolean): CSSProperties => ({
+    display: "flex",
+    alignItems: "center",
+    gap: 12,
+    width: "100%",
+    padding: "12px 4px",
+    background: "transparent",
+    border: "none",
+    borderBottom: `1px solid ${t.border}`,
+    color: active ? t.primary : t.text,
+    fontFamily: t.fontFamily,
+    fontSize: 16,
+    fontWeight: active ? 700 : 500,
+    textAlign: "left",
+    cursor: "pointer",
+  });
+
+  const sheetRow = (key: string, Icon: LucideIcon, label: string, active: boolean, onPress: () => void) => (
+    <button
+      key={key}
+      type="button"
+      data-testid={`community-more-${key}`}
+      aria-current={active ? "page" : undefined}
+      onClick={onPress}
+      style={sheetRowStyle(active)}
+    >
+      <Icon size={18} aria-hidden style={{ flexShrink: 0 }} />
+      <span style={{ flex: 1 }}>{label}</span>
+      <ChevronRight size={16} aria-hidden style={{ color: t.muted }} />
     </button>
   );
 
+  const groups = model.more.map(({ group, items }) => ({ group, items }));
+  // "Your membership" belongs to the person, so it opens the "You" group.
+  if (onOpenMembership && !groups.some((g) => g.group === "you")) groups.push({ group: "you", items: [] });
+
   return (
     <div
       className={`fg:flex fg:w-full fg:flex-col fg:lg:flex-row fg:lg:items-start fg: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="fg:flex fg:w-full fg:gap-1 fg:overflow-x-auto fg:lg:hidden"
-        style={{ borderBottom: `1px solid ${t.border}`, paddingBottom: 8, marginBottom: 16 }}
-      >
-        {isReady ? visibleItems.map(renderItem) : null}
-      </nav>
-
-      {/* Side nav — lg and up. */}
+      {/* Side nav, lg and up. */}
       <nav
-        aria-label="Member home"
+        aria-label={tr("forge.member_home_layout.nav_label")}
         className="fg:sticky fg:top-4 fg:hidden fg:w-52 fg:shrink-0 fg:flex-col fg:gap-1 fg:lg:flex"
         style={{
           border: `1px solid ${t.border}`,
@@ -89,10 +247,150 @@ export function MemberHomeLayout({
           padding: 8,
         }}
       >
-        {isReady ? visibleItems.map(renderItem) : null}
+        {isReady ? visibleItems.map(renderSideItem) : null}
       </nav>
 
-      <main className="fg:min-w-0 fg:w-full fg:flex-1">{children}</main>
+      {/* Below lg the bar is fixed over the bottom of the page, so the page ends above it. */}
+      <main
+        className={`fg:min-w-0 fg:w-full fg:flex-1 ${showBar ? "fg:pb-[calc(72px+env(safe-area-inset-bottom))] fg:lg:pb-0" : ""}`}
+      >
+        {children}
+      </main>
+
+      {/* Bottom bar, below lg. */}
+      {showBar ? (
+        <nav
+          aria-label={tr("forge.member_home_layout.nav_label")}
+          data-testid="community-bar"
+          className="fg:fixed fg:inset-x-0 fg:bottom-0 fg:z-40 fg:flex fg:lg:hidden"
+          style={{
+            background: t.background,
+            borderTop: `1px solid ${t.border}`,
+            paddingBottom: "env(safe-area-inset-bottom)",
+          }}
+        >
+          {model.bar.map((item) => {
+            const Icon = TAB_ICONS[item.key];
+            return (
+              <BarButton
+                key={item.key}
+                icon={<Icon size={20} aria-hidden />}
+                label={tr(BAR_LABEL_KEYS[item.key])}
+                active={item.active}
+                href={item.href}
+                onGo={go}
+                testId={`community-bar-${item.key}`}
+              />
+            );
+          })}
+          {hasMore ? (
+            <BarButton
+              icon={<Menu size={20} aria-hidden />}
+              label={tr("forge.member_home_layout.more")}
+              active={model.moreActive}
+              onPress={() => setMoreOpen(true)}
+              testId="community-bar-more"
+            />
+          ) : null}
+        </nav>
+      ) : null}
+
+      <CommunitySheet
+        open={moreOpen}
+        onOpenChange={setMoreOpen}
+        testId="community-more-sheet"
+        title={tr("forge.member_home_layout.more_title")}
+        closeLabel={tr("forge.member_home_layout.aria_close")}
+      >
+        {groups.map(({ group, items }, index) => (
+          <div key={group} style={{ marginTop: index === 0 ? 0 : 22 }}>
+            <p style={{ margin: "0 0 6px", fontSize: 13, color: t.muted, fontWeight: 500 }}>
+              {tr(GROUP_LABEL_KEYS[group])}
+            </p>
+            {group === "you" && onOpenMembership
+              ? sheetRow("membership", BadgeCheck, tr("forge.member_home_layout.your_membership"), false, () => {
+                  setMoreOpen(false);
+                  onOpenMembership();
+                })
+              : null}
+            {items.map((item) =>
+              sheetRow(item.key, TAB_ICONS[item.key], tr(TAB_LABEL_KEYS[item.key]), item.active, () => {
+                setMoreOpen(false);
+                go(item.href);
+              }),
+            )}
+          </div>
+        ))}
+      </CommunitySheet>
     </div>
   );
 }
+
+function BarButton({
+  icon,
+  label,
+  active,
+  href,
+  onGo,
+  onPress,
+  testId,
+}: {
+  icon: ReactNode;
+  label: string;
+  active: boolean;
+  href?: string;
+  onGo?: (href: string) => void;
+  onPress?: () => void;
+  testId: string;
+}) {
+  const t = useThemeTokens();
+  const style: CSSProperties = {
+    flex: 1,
+    minWidth: 0,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 3,
+    padding: "8px 2px 7px",
+    minHeight: BAR_HEIGHT,
+    background: "transparent",
+    border: "none",
+    color: active ? t.primary : t.muted,
+    fontFamily: t.fontFamily,
+    fontSize: 11,
+    fontWeight: active ? 700 : 500,
+    textDecoration: "none",
+    cursor: "pointer",
+  };
+  const content = (
+    <>
+      {icon}
+      <span style={{ maxWidth: "100%", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+        {label}
+      </span>
+    </>
+  );
+  if (href && onGo) {
+    return (
+      <a
+        href={href}
+        data-testid={testId}
+        aria-current={active ? "page" : undefined}
+        onClick={(event) => {
+          if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+          event.preventDefault();
+          onGo(href);
+        }}
+        style={style}
+      >
+        {content}
+      </a>
+    );
+  }
+  return (
+    <button type="button" data-testid={testId} aria-pressed={active} onClick={onPress} style={style}>
+      {content}
+    </button>
+  );
+}

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

@@ -3,6 +3,7 @@ import { Bookmark, Heart, Lock, MessageCircle, Pause, Play, FileText, BarChart2
 import type { IMedia, IPublicPost } from "../../../types/models";
 import { useAudioPlayer } from "../../../contexts/AudioPlayerContext";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useForgeT } from "../../../i18n";
 import { usePostItem, type UsePostItemOptions } from "../../headless/posts/usePostItem";
 
 export interface MemberPostCardProps extends UsePostItemOptions {
@@ -16,7 +17,7 @@ export interface MemberPostCardProps extends UsePostItemOptions {
 }
 
 /**
- * One member post — parity with the craft members area's `PostItem`: artist
+ * 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
@@ -228,6 +229,7 @@ export function MemberPostCard({
 
 function LockedBody({ item, go }: { item: ReturnType<typeof usePostItem>; go: (href: string) => void }) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   const tierName = item.upsell.tier?.name;
   return (
     <div
@@ -256,14 +258,16 @@ function LockedBody({ item, go }: { item: ReturnType<typeof usePostItem>; go: (h
         <Lock size={24} />
       </span>
       <div>
-        <div style={{ fontSize: 16, fontWeight: 700 }}>Content locked</div>
+        <div style={{ fontSize: 16, fontWeight: 700 }}>{tr("forge.member_post_card.locked_title")}</div>
         <div style={{ fontSize: 13, color: t.muted, marginTop: 2 }}>
-          {tierName ? `Subscribe to ${tierName} to access this content` : "Subscribe to access this content"}
+          {tierName
+            ? tr("forge.member_post_card.locked_body_tier", { tier_name: tierName })
+            : tr("forge.member_post_card.locked_body")}
         </div>
       </div>
       <button
         type="button"
-        onClick={() => go(item.upsell.href)}
+        onClick={() => (item.upsell.unlock ? item.upsell.unlock() : go(item.upsell.href))}
         style={{
           padding: "10px 18px",
           borderRadius: t.cornerRadius,
@@ -274,7 +278,7 @@ function LockedBody({ item, go }: { item: ReturnType<typeof usePostItem>; go: (h
           cursor: "pointer",
         }}
       >
-        Subscribe
+        {tierName ? tr("forge.member_post_card.unlock_with", { tier_name: tierName }) : tr("forge.member_post_card.unlock")}
       </button>
     </div>
   );

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

@@ -23,11 +23,12 @@ const POST_TYPES: Array<{ value: PostType; label: string }> = [
   { value: "image", label: "Image" },
   { value: "video", label: "Video" },
   { value: "audio", label: "Audio" },
-  { value: "poll", label: "Poll" },
+  // No "poll": creators no longer make poll posts (a poll lives on a community
+  // post now). Old poll rows still render through MemberPostCard.
 ];
 
 /**
- * The member posts feed — parity with the craft members area: gated feed
+ * The member posts feed, at 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

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

@@ -1,6 +1,9 @@
 import type { CSSProperties } from "react";
 import { ArrowLeft, Lock } from "lucide-react";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useOptionalCommunityContext } from "../../../contexts/CommunityContext";
+import { internalPath } from "../../../runtime/pages";
+import { useForgeT } from "../../../i18n";
 import {
   usePostCollectionDetail,
   type UsePostCollectionDetailOptions,
@@ -9,9 +12,9 @@ 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. */
+  /** 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`). */
+  /** Where the back button returns to (default: the surrounding community's collections). */
   backHref?: string;
   /** Shown as the audio track artist for audio posts inside the collection. */
   artistName?: string;
@@ -26,17 +29,17 @@ export interface PostCollectionDetailProps extends UsePostCollectionDetailOption
 }
 
 /**
- * One collection's drill-in view — parity with the craft members area's
+ * 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
+ * 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",
+  backHref: backHrefProp,
   artistName,
   navigate,
   onRequireAuth,
@@ -46,6 +49,9 @@ export function PostCollectionDetail({
   ...detailOptions
 }: PostCollectionDetailProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
+  const slug = useOptionalCommunityContext()?.slug;
+  const backHref = backHrefProp ?? (slug ? internalPath("communities/$slug/home/collections", { slug }) : "");
   const detail = usePostCollectionDetail(collectionId, detailOptions);
   const go = navigate ?? ((href: string) => window.location.assign(href));
   const requireAuth =
@@ -169,17 +175,17 @@ export function PostCollectionDetail({
             <Lock size={24} />
           </span>
           <div>
-            <div style={{ fontSize: 16, fontWeight: 700 }}>Content locked</div>
+            <div style={{ fontSize: 16, fontWeight: 700 }}>{tr("forge.post_collection_detail.locked_title")}</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"}
+                ? tr("forge.post_collection_detail.locked_body_tier", { tier_name: detail.upsell.tier.name })
+                : tr("forge.post_collection_detail.locked_body")}
             </div>
           </div>
           {detail.upsell && (
             <button
               type="button"
-              onClick={() => go(detail.upsell!.href)}
+              onClick={() => (detail.upsell!.unlock ? detail.upsell!.unlock() : go(detail.upsell!.href))}
               style={{
                 padding: "10px 18px",
                 borderRadius: t.cornerRadius,
@@ -190,7 +196,9 @@ export function PostCollectionDetail({
                 cursor: "pointer",
               }}
             >
-              Subscribe
+              {detail.upsell.tier?.name
+                ? tr("forge.post_collection_detail.unlock_with", { tier_name: detail.upsell.tier.name })
+                : tr("forge.post_collection_detail.unlock")}
             </button>
           )}
         </div>

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

@@ -2,6 +2,9 @@ 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 { useOptionalCommunityContext } from "../../../contexts/CommunityContext";
+import { internalPath } from "../../../runtime/pages";
+import { useForgeT } from "../../../i18n";
 import {
   usePostCollectionsList,
   type UsePostCollectionsListOptions,
@@ -12,8 +15,8 @@ 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}` ``.
+   * collection's slug when it has one, else its uuid: the public detail
+   * endpoint resolves either. Default: the collection's page inside the surrounding community.
    */
   getCollectionHref?: (idOrSlug: string) => string;
   /** SPA navigation adapter (drill-in + locked-collection upsell CTA). Defaults to a full-page visit. */
@@ -31,22 +34,27 @@ const stripHtml = (html: string, len = 100) => {
 };
 
 /**
- * The member collections grid — parity with the craft members area's
+ * 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; locked collections render dimmed with an Unlock 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}`,
+  getCollectionHref: getCollectionHrefProp,
   navigate,
   className,
   style,
   ...listOptions
 }: PostCollectionsGridProps) {
   const t = useThemeTokens();
+  const slug = useOptionalCommunityContext()?.slug;
+  const getCollectionHref =
+    getCollectionHrefProp ??
+    ((collectionId: string) =>
+      slug ? internalPath("communities/$slug/home/collections/$collectionId", { slug, collectionId }) : "");
   const list = usePostCollectionsList(listOptions);
   const go = navigate ?? ((href: string) => window.location.assign(href));
   const [searchFocused, setSearchFocused] = useState(false);
@@ -176,6 +184,7 @@ function CollectionCard({
   go: (href: string) => void;
 }) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   const locked = !collection.hasAccess;
   const cover = collection.media?.[0];
   const description = collection.description ? stripHtml(collection.description) : "";
@@ -255,15 +264,18 @@ function CollectionCard({
             >
               <Lock size={18} />
             </span>
-            <div style={{ fontSize: 15, fontWeight: 700 }}>Content locked</div>
+            <div style={{ fontSize: 15, fontWeight: 700 }}>{tr("forge.post_collections_grid.locked_title")}</div>
             <div style={{ fontSize: 13, color: t.muted }}>
-              {tierName ? `Subscribe to ${tierName} to access this content` : "Subscribe to access this content"}
+              {tierName
+                ? tr("forge.post_collections_grid.locked_body_tier", { tier_name: tierName })
+                : tr("forge.post_collections_grid.locked_body")}
             </div>
             <button
               type="button"
               onClick={(e) => {
                 e.stopPropagation();
-                go(upsell.href);
+                if (upsell.unlock) upsell.unlock();
+                else go(upsell.href);
               }}
               style={{
                 marginTop: 4,
@@ -277,7 +289,9 @@ function CollectionCard({
                 cursor: "pointer",
               }}
             >
-              Subscribe
+              {tierName
+                ? tr("forge.post_collections_grid.unlock_with", { tier_name: tierName })
+                : tr("forge.post_collections_grid.unlock")}
             </button>
           </div>
         )}