@tribe-nest/forge 3.60.0 → 3.63.0

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

@@ -1,30 +1,15 @@
 import { useState, type CSSProperties, type ReactNode } from "react";
-import {
-  CalendarDays,
-  ChevronLeft,
-  ChevronRight,
-  Download,
-  FileText,
-  Loader2,
-  MessageSquare,
-  Mic,
-  MicOff,
-  PlayCircle,
-  Users,
-  X,
-} from "lucide-react";
+import { CalendarDays, ChevronLeft, ChevronRight, MessageSquare, Mic, MicOff, Users, X } from "lucide-react";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
 import { useMemberCalls, type UseMemberCallsOptions } from "../../headless/memberHome/useMemberCalls";
-import { useQueryClient } from "@tanstack/react-query";
-import { useForge } from "../../../provider/ForgeProvider";
-import {
-  fetchMemberCallTranscript,
-  memberCallTranscriptKey,
-  type MemberCallTranscript,
-  type MyMembershipCall,
-} from "../../../data/queries/useMembershipCalls";
+import type { MyMembershipCall } from "../../../data/queries/useMembershipCalls";
 import { CallTranscriptViewer } from "./CallTranscriptViewer";
-import { downloadTranscript } from "./callTranscriptText";
+import {
+  CallRecordingProcessing,
+  CallRecordingWatchLink,
+  CallTranscriptPanel,
+  callRecordingWatchable,
+} from "./CallRecordingActions";
 import { Loading } from "../Loading";
 
 export interface MemberCallsCalendarProps extends UseMemberCallsOptions {
@@ -397,7 +382,7 @@ function EmptyMonth({
  * call is still to come, and is shown as a clearly-labelled placeholder rather
  * than hidden, so the shape a member will grow into is already visible.
  */
-function CallDetailsModal({
+export function CallDetailsModal({
   call,
   now,
   tokens: t,
@@ -414,7 +399,7 @@ function CallDetailsModal({
 }) {
   const canJoin = call.isOpen && !!call.callPublicId;
   const hasEnded = new Date(call.closesAt).getTime() < now.getTime();
-  const watchable = call.recording?.status === "ready" && !!call.recording.watchUrl;
+  const watchable = callRecordingWatchable(call.recording);
   const processing = call.recording?.status === "processing";
 
   const row: CSSProperties = { display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: t.muted };
@@ -563,36 +548,8 @@ function CallDetailsModal({
               Join call
             </button>
           )}
-          {watchable && (
-            <a
-              href={call.recording!.watchUrl!}
-              target="_blank"
-              rel="noreferrer"
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 6,
-                padding: "10px 20px",
-                borderRadius: t.cornerRadius,
-                background: canJoin ? "transparent" : t.primary,
-                border: canJoin ? `1px solid ${t.border}` : "none",
-                color: canJoin ? t.text : t.textPrimary,
-                fontSize: 14,
-                fontWeight: 700,
-                textDecoration: "none",
-              }}
-            >
-              <PlayCircle size={16} />
-              Watch recording
-              {call.recording!.durationSeconds ? ` · ${Math.round(call.recording!.durationSeconds / 60)} min` : ""}
-            </a>
-          )}
-          {!canJoin && !watchable && processing && (
-            <span style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 14, color: t.muted, fontWeight: 600 }}>
-              <Loader2 size={15} />
-              Recording is processing
-            </span>
-          )}
+          {watchable && <CallRecordingWatchLink recording={call.recording!} secondary={canJoin} />}
+          {!canJoin && !watchable && processing && <CallRecordingProcessing />}
           {!canJoin && !watchable && !processing && (
             <span style={{ fontSize: 14, color: t.muted, fontWeight: 600 }}>
               {hasEnded ? "This call has ended" : opensIn(call.opensAt, now)}
@@ -601,10 +558,9 @@ function CallDetailsModal({
         </div>
 
         {call.recording?.transcript && (
-          <TranscriptPanel
+          <CallTranscriptPanel
             recordingId={call.recording.id}
             transcript={call.recording.transcript}
-            tokens={t}
             onRead={() => onReadTranscript(call.recording!.id)}
           />
         )}
@@ -618,104 +574,3 @@ function CallDetailsModal({
     </div>
   );
 }
-
-/**
- * The call's summary, and the way into its transcript.
- *
- * The lines are NOT here: a two-hour meeting is thousands of them, which is
- * unusable in a modal. "Read transcript" opens them beside the video, and
- * Download reads them once without opening anything. A member sees the
- * finished thing or that it is being prepared, never a failure: why one could
- * not be made is the business's problem, not its audience's.
- */
-function TranscriptPanel({
-  recordingId,
-  transcript,
-  tokens: t,
-  onRead,
-}: {
-  recordingId: string;
-  transcript: MemberCallTranscript;
-  tokens: ReturnType<typeof useThemeTokens>;
-  onRead: () => void;
-}) {
-  const { client, profileId } = useForge();
-  const queryClient = useQueryClient();
-  const [downloading, setDownloading] = useState(false);
-  const heading: CSSProperties = { display: "flex", alignItems: "center", gap: 8, fontSize: 14, fontWeight: 700 };
-  const button: CSSProperties = {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: 6,
-    padding: "8px 14px",
-    borderRadius: t.cornerRadius,
-    border: `1px solid ${t.border}`,
-    background: "transparent",
-    color: t.text,
-    fontFamily: t.fontFamily,
-    fontSize: 14,
-    fontWeight: 600,
-    cursor: "pointer",
-  };
-
-  if (transcript.status === "processing") {
-    return (
-      <div style={{ display: "flex", flexDirection: "column", gap: 6 }} data-testid="member-call-transcript">
-        <span style={heading}>
-          <FileText size={16} />
-          Transcript
-        </span>
-        <span style={{ display: "flex", alignItems: "center", gap: 6, fontSize: 14, color: t.muted }} role="status">
-          <Loader2 size={15} />
-          The transcript is being prepared
-        </span>
-      </div>
-    );
-  }
-
-  const download = async () => {
-    setDownloading(true);
-    try {
-      const detail = await queryClient.fetchQuery({
-        queryKey: memberCallTranscriptKey(profileId, recordingId),
-        queryFn: () => fetchMemberCallTranscript(client, profileId, recordingId),
-      });
-      downloadTranscript(detail);
-    } finally {
-      setDownloading(false);
-    }
-  };
-
-  return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 10 }} data-testid="member-call-transcript">
-      <span style={heading}>
-        <FileText size={16} />
-        Summary
-      </span>
-      <p
-        style={{
-          margin: 0,
-          fontSize: 14,
-          lineHeight: 1.5,
-          display: "-webkit-box",
-          WebkitLineClamp: 4,
-          WebkitBoxOrient: "vertical",
-          overflow: "hidden",
-          color: transcript.summary ? t.text : t.muted,
-        }}
-      >
-        {transcript.summary ? transcript.summary.summary : "The transcript is ready."}
-      </p>
-      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
-        <button type="button" onClick={onRead} style={button}>
-          <FileText size={15} />
-          Read transcript
-        </button>
-        <button type="button" onClick={() => void download()} disabled={downloading} style={button}>
-          {downloading ? <Loader2 size={15} /> : <Download size={15} />}
-          Download
-        </button>
-      </div>
-    </div>
-  );
-}

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

@@ -1,4 +1,21 @@
-import type { CSSProperties, ReactNode } from "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 { useForgeT } from "../../../i18n";
 import {
@@ -7,6 +24,8 @@ import {
   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> = {
@@ -14,11 +33,48 @@ const TAB_LABEL_KEYS: Record<MemberHomeNavKey, string> = {
   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 when `activeKey` is not given). */
   currentPath?: string;
@@ -27,6 +83,11 @@ export interface MemberHomeLayoutProps extends UseMemberHomeNavOptions {
    * 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;
@@ -35,7 +96,13 @@ export interface MemberHomeLayoutProps extends UseMemberHomeNavOptions {
 /**
  * A community's member home shell (`/i/communities/<slug>/home`): persistent
  * nav across Posts / Collections / Spaces / Calendar / Chat / Leaderboard /
- * Notifications. Top scrollable tab bar on small screens, side nav on `lg+`.
+ * 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
@@ -44,6 +111,7 @@ export interface MemberHomeLayoutProps extends UseMemberHomeNavOptions {
 export function MemberHomeLayout({
   currentPath,
   navigate,
+  onOpenMembership,
   children,
   className,
   style,
@@ -51,8 +119,53 @@ export function MemberHomeLayout({
 }: MemberHomeLayoutProps) {
   const t = useThemeTokens();
   const tr = useForgeT();
-  const { visibleItems, isReady } = useMemberHomeNav({ currentPath, ...navOptions });
+  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",
@@ -70,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"
@@ -82,20 +195,47 @@ export function MemberHomeLayout({
     </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 on small screens (horizontally scrollable, no burger). */}
-      <nav
-        aria-label={tr("forge.member_home_layout.nav_label")}
-        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. */}
       <nav
         aria-label={tr("forge.member_home_layout.nav_label")}
@@ -107,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/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/index.ts

@@ -6,3 +6,11 @@ export { MemberPostCard, type MemberPostCardProps } from "./MemberPostCard";
 export { PostCollectionsGrid, type PostCollectionsGridProps } from "./PostCollectionsGrid";
 export { PostCollectionDetail, type PostCollectionDetailProps } from "./PostCollectionDetail";
 export { MemberCallsCalendar, type MemberCallsCalendarProps } from "./MemberCallsCalendar";
+export {
+  CallRecordingWatchLink,
+  CallRecordingProcessing,
+  CallTranscriptPanel,
+  callRecordingWatchable,
+  type CallRecording,
+  type CallRecordingWatchLinkProps,
+} from "./CallRecordingActions";

package/src/ui/styled/portal/PortalAccountSection.tsx

@@ -0,0 +1,61 @@
+import { useForgeT } from "../../../i18n";
+import { AccountSection, type AccountSectionProps, type AccountTabKey } from "../AccountDashboard";
+import { PortalHeading } from "./shared";
+
+/** The portal sections that are the account dashboard's panels, by their dashboard key. */
+export type PortalAccountSectionKey =
+  | "bookings"
+  | "memberships"
+  | "courses"
+  | "films"
+  | "orders"
+  | "tickets"
+  | "waitlist"
+  | "saved"
+  | "settings"
+  | "notifications";
+
+const DASHBOARD_KEY: Record<PortalAccountSectionKey, AccountTabKey> = {
+  bookings: "bookings",
+  memberships: "membership",
+  courses: "courses",
+  films: "rentals",
+  orders: "orders",
+  tickets: "tickets",
+  waitlist: "waitlist",
+  saved: "saved",
+  settings: "account",
+  notifications: "notifications",
+};
+
+/**
+ * One of the account dashboard's panels as a portal page, under its own title.
+ *
+ * The panels are the dashboard's own components, so a fix to one is a fix to
+ * both. Only the title is the portal's.
+ */
+export function PortalAccountSection({
+  section,
+  ...rest
+}: Omit<AccountSectionProps, "section"> & { section: PortalAccountSectionKey }) {
+  const tr = useForgeT();
+  // Literal keys, so the translation spec can see every one of them.
+  const title: Record<PortalAccountSectionKey, string> = {
+    bookings: tr("forge.portal_account_section.bookings"),
+    memberships: tr("forge.portal_account_section.memberships"),
+    courses: tr("forge.portal_account_section.courses"),
+    films: tr("forge.portal_account_section.films"),
+    orders: tr("forge.portal_account_section.orders"),
+    tickets: tr("forge.portal_account_section.tickets"),
+    waitlist: tr("forge.portal_account_section.waitlist"),
+    saved: tr("forge.portal_account_section.saved"),
+    settings: tr("forge.portal_account_section.settings"),
+    notifications: tr("forge.portal_account_section.notifications"),
+  };
+  return (
+    <div data-testid={`portal-section-${section}`}>
+      <PortalHeading title={title[section]} />
+      <AccountSection section={DASHBOARD_KEY[section]} {...rest} />
+    </div>
+  );
+}