@tribe-nest/forge 3.59.0 → 3.61.0

package/src/ui/styled/AccountDashboard.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useState } from "react";
+import { Check } from "lucide-react";
 import {
   usePublicAuth,
-  useUserOrders,
-  useMyTickets,
+  useUserOrdersPaged,
+  useMyTicketsPaged,
   useCancelMyTicket,
   isMyTicketRequestOpenOrEnded,
   myTicketRequestState,
@@ -12,25 +13,28 @@ import {
   useMyWaitlistPlaces,
   useLeaveEventWaitlist,
   type WaitlistPlace,
-  useMyBookings,
+  useMyBookingsPaged,
   useRescheduleBooking,
   useCancelMyBooking,
   useCoachingAvailability,
   type MyBooking,
   useSavedPosts,
-  useNotificationPreferences,
-  useUpdateNotificationPreference,
+  useNotificationMatrix,
+  useUpdateNotificationMatrix,
+  usePushSubscription,
+  useForge,
+  type NotificationMatrix,
+  type NotificationChannel,
+  type DigestCadence,
   useMyCourses,
   useMyFilmRentals,
   type MyCourse,
-  useCancelMembership,
-  useMembershipAccess,
   useMyMembershipApplications,
   useWithdrawMembershipApplication,
   useConfirmMembershipApplication,
   type MembershipApplication,
   type MembershipApplicationStatus,
-  useOpenBillingPortal,
+  usePublicCommunities,
   useUpdateAccount,
   useChangePassword,
   useExportAccountData,
@@ -38,13 +42,13 @@ import {
   useCancelAccountDeletion,
   useAccountDeletionStatus,
   OrderStatus,
-  type NotificationPreferences,
 } from "../../index";
 import { useForgeT, type ForgeT } from "../../i18n";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useSiteConfig } from "../../data/queries/useWebsite";
 import { useAmountFormatter } from "../format/useFormatCurrency";
 import { Loading } from "./Loading";
+import { CallHelpHint } from "../media/CallHelpHint";
 import { bookingCallWindow } from "../media/bookingWindow";
 import { formatCountdown } from "./EventWaitlist";
 import { AddToCalendar } from "./AddToCalendar";
@@ -53,7 +57,8 @@ import { TicketTransferPanel } from "./TicketTransfer";
 import { CartLineOptions } from "./CartLineOptions";
 import { FilmRentalList } from "./FilmLibrary";
 import { canWithdrawMembershipApplication } from "../headless/membership/membershipApplication";
-import { isMembershipInTrial } from "../headless/membership/membershipTrial";
+import { communityAboutPath, communitiesListPath } from "../headless/communities/paths";
+import { MyMembershipsList } from "./communities/MyMembershipsList";
 
 export const ACCOUNT_TABS = [
   "membership",
@@ -63,7 +68,7 @@ export const ACCOUNT_TABS = [
   // holding for this artist's shows? (2.6)
   "waitlist",
   // Sessions bought from this artist (S.6 / bookings § 1.4). A booking is not an
-  // "order" — the Orders tab covers product orders only — so it needs its own
+  // "order" (the Orders tab covers product orders only) so it needs its own
   // tab or it is unreachable, which is what it was.
   "bookings",
   // Films and series this fan has rented. Next to the other purchase surfaces
@@ -109,21 +114,10 @@ export interface AccountDashboardProps {
   /** Called when the visitor selects a different tab. Host maps this to navigation. */
   onTabChange?: (tab: AccountTabKey) => void;
   /**
-   * Navigate to the membership page (the "Change" / "Join" action). Host wires
-   * this to its router (e.g. `/i/membership`).
+   * SPA navigation adapter for the Memberships tab (each membership opens its
+   * community's home). Defaults to a full-page visit.
    */
-  onNavigateMembership?: () => void;
-  /**
-   * Navigate to the member area, the member home (host maps this to its router,
-   * e.g. `/i/members`).
-   *
-   * Optional, and drawn for every signed-in visitor, membership or none. It used
-   * to be gated on `/public/community/spaces` returning a space they could open,
-   * which hid the member area from exactly the people who had not joined yet:
-   * the member home itself shows the locked posts and the way to buy access, so
-   * the door is never a dead end.
-   */
-  onNavigateCommunity?: () => void;
+  navigate?: (href: string) => void;
   /**
    * Navigate to a film route from the Rentals tab (watch, resume, rent again).
    *
@@ -161,55 +155,123 @@ const defaultFormatDate = (value: string | number | Date): string =>
 
 // ---- shared styling helpers -------------------------------------------------
 
+/**
+ * The panels' look: the client portal's. No box around a section and no box
+ * around each item; items are rows divided by hairlines, and the theme's
+ * primary is kept for actions and for state the person has to act on.
+ */
 function useCardStyles() {
   const t = useThemeTokens();
+  const control: React.CSSProperties = {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    minHeight: 38,
+    padding: "8px 16px",
+    borderRadius: t.cornerRadius,
+    fontFamily: t.fontFamily,
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: "pointer",
+    textDecoration: "none",
+    whiteSpace: "nowrap",
+  };
   return {
     t,
-    card: {
-      background: t.surface,
-      border: `1px solid ${t.primary}20`,
-      borderRadius: t.cornerRadius,
-      padding: 24,
-      color: t.text,
-    } as React.CSSProperties,
+    /** A section: no chrome of its own, the page title already names it. */
+    card: { color: t.text } as React.CSSProperties,
+    /** The list a section's items sit in. */
+    list: { display: "flex", flexDirection: "column", borderTop: `1px solid ${t.border}` } as React.CSSProperties,
+    /** One item: a row, divided from the next by a hairline. */
+    row: { padding: "20px 0", borderBottom: `1px solid ${t.border}` } as React.CSSProperties,
+    /** Secondary text under an item's title. */
+    meta: { fontSize: 13, color: t.muted, lineHeight: 1.5 } as React.CSSProperties,
     button: {
-      padding: "8px 14px",
-      borderRadius: t.cornerRadius,
+      ...control,
       background: t.primary,
-      color: t.background,
-      border: "none",
-      fontWeight: 600,
-      cursor: "pointer",
+      color: t.textPrimary,
+      border: `1px solid ${t.primary}`,
     } as React.CSSProperties,
     ghostButton: {
-      padding: "8px 14px",
-      borderRadius: t.cornerRadius,
+      ...control,
       background: "transparent",
       color: t.text,
-      border: `1px solid ${t.primary}40`,
-      cursor: "pointer",
+      border: `1px solid ${t.border}`,
     } as React.CSSProperties,
     input: {
       width: "100%",
       height: 40,
       padding: "8px 12px",
       borderRadius: t.cornerRadius,
-      border: `1px solid ${t.primary}40`,
+      border: `1px solid ${t.border}`,
       background: "transparent",
       color: t.text,
+      fontFamily: t.fontFamily,
+      fontSize: 15,
       outline: "none",
+      boxSizing: "border-box",
     } as React.CSSProperties,
+    /** An error the person must read: the theme's text, weighted, never a hard-coded red. */
+    alert: { fontSize: 14, fontWeight: 600, color: t.text, marginTop: 12 } as React.CSSProperties,
   };
 }
 
+/** An empty section says what will appear and stays quiet about it. */
+/** "Show more" under a list that loads a page at a time. Draws nothing once everything is loaded. */
+function ShowMore({
+  hasNextPage,
+  isFetchingNextPage,
+  onMore,
+}: {
+  hasNextPage?: boolean;
+  isFetchingNextPage: boolean;
+  onMore: () => void;
+}) {
+  const { ghostButton } = useCardStyles();
+  const tr = useForgeT();
+  if (!hasNextPage) return null;
+  return (
+    <div style={{ marginTop: 20 }}>
+      <button
+        type="button"
+        data-testid="account-show-more"
+        onClick={onMore}
+        disabled={isFetchingNextPage}
+        style={{ ...ghostButton, cursor: isFetchingNextPage ? "wait" : "pointer" }}
+      >
+        {isFetchingNextPage ? tr("forge.account_dashboard.loading_more") : tr("forge.account_dashboard.show_more")}
+      </button>
+    </div>
+  );
+}
+
+function EmptySection({ children }: { children: React.ReactNode }) {
+  const t = useThemeTokens();
+  return (
+    <div
+      data-testid="account-section-empty"
+      style={{
+        padding: "36px 24px",
+        border: `1px dashed ${t.border}`,
+        borderRadius: t.cornerRadius,
+        textAlign: "center",
+        color: t.muted,
+        fontSize: 15,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
 // ---- shared context passed down to tabs ------------------------------------
 
 interface TabContext {
   formatAmount: (amount: number, currencyCode?: string) => string;
   formatDate: (value: string | number | Date) => string;
   currency?: string;
-  onNavigateMembership?: () => void;
-  onNavigateCommunity?: () => void;
+  navigate?: (href: string) => void;
   onNavigateFilm?: (href: string) => void;
   /**
    * Open a course the fan owns. Host-supplied, like every other navigation
@@ -232,8 +294,7 @@ interface TabContext {
 export function AccountDashboard({
   tab,
   onTabChange,
-  onNavigateMembership,
-  onNavigateCommunity,
+  navigate,
   onNavigateFilm,
   onNavigateCourse,
   formatAmount,
@@ -271,11 +332,10 @@ export function AccountDashboard({
   const ctx: TabContext = {
     formatAmount: fmtAmount,
     formatDate: fmtDate,
-    // Fallback for records with no explicit currency — the tenant's runtime
+    // Fallback for records with no explicit currency: the tenant's runtime
     // settlement currency (single source), unless the host overrides it.
     currency: currency ?? siteConfig?.currency,
-    onNavigateMembership,
-    onNavigateCommunity,
+    navigate,
     onNavigateFilm,
     onNavigateCourse,
   };
@@ -290,15 +350,16 @@ export function AccountDashboard({
   const hasCourses = (courses?.length ?? 0) > 0;
   const visibleTabs = ACCOUNT_TABS.filter(
     (key) =>
-      (key !== "rentals" || hasRentals || tab === "rentals") &&
-      (key !== "courses" || hasCourses || tab === "courses"),
+      (key !== "rentals" || hasRentals || tab === "rentals") && (key !== "courses" || hasCourses || tab === "courses"),
   );
 
   if (!user) return <Loading fullPage />;
 
   return (
     <div className={className} style={{ maxWidth: 900, margin: "0 auto", color: t.text, ...style }}>
-      <div style={{ marginBottom: 24, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
+      <div
+        style={{ marginBottom: 24, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}
+      >
         <div>
           <h1 style={{ fontSize: 28, fontWeight: 800, fontFamily: t.headingFontFamily }}>
             {tr("forge.account_dashboard.title")}
@@ -307,7 +368,14 @@ export function AccountDashboard({
         </div>
         <button
           onClick={() => logout()}
-          style={{ padding: "8px 14px", borderRadius: t.cornerRadius, background: "transparent", color: t.text, border: `1px solid ${t.primary}40`, cursor: "pointer" }}
+          style={{
+            padding: "8px 14px",
+            borderRadius: t.cornerRadius,
+            background: "transparent",
+            color: t.text,
+            border: `1px solid ${t.primary}40`,
+            cursor: "pointer",
+          }}
         >
           {tr("forge.account_dashboard.log_out")}
         </button>
@@ -348,224 +416,83 @@ export function AccountDashboard({
   );
 }
 
-// ---- Membership tab ---------------------------------------------------------
+// ---- one section, outside the dashboard -----------------------------------
 
-function MembershipTab({ ctx }: { ctx: TabContext }) {
-  const { user } = usePublicAuth();
-  const { t, card, button, ghostButton } = useCardStyles();
-  const tr = useForgeT();
-  const { formatAmount, formatDate, currency, onNavigateMembership, onNavigateCommunity } = ctx;
-  const cancelMembership = useCancelMembership();
-  // The way into the member area. Being signed in is the whole gate: a fan with
-  // no membership needs this door most, because the member home is where the
-  // locked posts and the offer to join actually live. The old gate asked
-  // `/public/community/spaces` for an openable space first, so a fan who had not
-  // joined saw no way in at all.
-  const canOpenCommunity = !!onNavigateCommunity && !!user;
-  const [isCancelling, setIsCancelling] = useState(false);
-  /**
-   * Cancelling is destructive and irreversible from here, so it asks first.
-   * CLAUDE.md puts a destructive confirmation in the category that must stay
-   * VISIBLE rather than behind a `?`, and until now one click on Cancel simply
-   * ended the membership. The client app has always asked (`EditorModal` in
-   * `MembershipTab.tsx`); this surface was ported without it.
-   */
-  const [confirmingCancel, setConfirmingCancel] = useState(false);
-  const [cancelError, setCancelError] = useState<string | null>(null);
+export type AccountSectionProps = Omit<AccountDashboardProps, "tab" | "onTabChange" | "className" | "style"> & {
+  /** Which section to draw. Same keys as the dashboard's tabs. */
+  section: AccountTabKey;
+};
 
-  const membership = user?.membership;
-  /**
-   * Inside a free trial: nothing has been charged yet. The date the first
-   * charge falls and what it will be are state the member acts on (cancel
-   * before then, or not), so they are visible, not behind a hint.
-   */
-  const inTrial = isMembershipInTrial(membership);
-  const cycleWord = (cycle: string | undefined) =>
-    cycle === "year" ? tr("forge.account_dashboard.cycle_year") : tr("forge.account_dashboard.cycle_month");
-  // Two separate questions, deliberately answered separately:
-  //   `access.hasAccess` → are the benefits live (true through past_due/grace)
-  //   `message`          → what the member is told, including a failed payment
-  // The old `status === "active"` answered both at once and got both wrong for
-  // anyone whose card bounced.
-  const { access, message } = useMembershipAccess();
-  const openBillingPortal = useOpenBillingPortal();
-  const [billingError, setBillingError] = useState<string | null>(null);
-
-  // A failure here used to be swallowed whole: the button said "Cancelling…",
-  // then said "Cancel" again, and the member was never told anything. That is
-  // how a free-tier member — whose cancel the server rejected outright — could
-  // press this forever with no effect and no explanation.
-  const onCancel = async () => {
-    if (!membership?.id) return;
-    setCancelError(null);
-    setIsCancelling(true);
-    try {
-      await cancelMembership.mutateAsync({ membershipId: membership.id });
-      window.location.reload();
-    } catch (error) {
-      const detail = (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
-      setCancelError(detail || tr("forge.account_dashboard.membership_cancel_error"));
-    } finally {
-      setIsCancelling(false);
-    }
+/**
+ * One of the dashboard's sections on its own, with no header and no tab strip.
+ *
+ * The client portal draws its own navigation (a rail on desktop, a bottom bar
+ * on mobile) and gives each section its own URL, so it needs the panels
+ * without the dashboard's chrome. The panels are the same components the
+ * dashboard renders, so the two can never drift apart.
+ */
+export function AccountSection({
+  section,
+  navigate,
+  onNavigateFilm,
+  onNavigateCourse,
+  formatAmount,
+  formatDate,
+  currency,
+}: AccountSectionProps) {
+  const { user } = usePublicAuth();
+  const { data: siteConfig } = useSiteConfig();
+  const { data: courses } = useMyCourses({ accountId: user?.id });
+  const fmtAmount = useAmountFormatter(formatAmount);
+  const ctx: TabContext = {
+    formatAmount: fmtAmount,
+    formatDate: formatDate ?? defaultFormatDate,
+    currency: currency ?? siteConfig?.currency,
+    navigate,
+    onNavigateFilm,
+    onNavigateCourse,
   };
 
-  const onUpdatePayment = async () => {
-    setBillingError(null);
-    try {
-      const { url } = await openBillingPortal.mutateAsync({});
-      window.location.href = url;
-    } catch (error) {
-      const detail = (error as { response?: { data?: { message?: string } } })?.response?.data?.message;
-      setBillingError(detail || tr("forge.account_dashboard.billing_portal_error"));
-    }
-  };
+  if (!user) return <Loading />;
+
+  switch (section) {
+    case "membership":
+      return <MembershipTab ctx={ctx} />;
+    case "orders":
+      return <OrdersTab ctx={ctx} />;
+    case "tickets":
+      return <TicketsTab ctx={ctx} />;
+    case "waitlist":
+      return <WaitlistTab ctx={ctx} />;
+    case "bookings":
+      return <BookingsTab ctx={ctx} />;
+    case "rentals":
+      return <RentalsTab ctx={ctx} />;
+    case "courses":
+      return <CoursesTab ctx={ctx} courses={courses ?? []} />;
+    case "saved":
+      return <SavedTab />;
+    case "account":
+      return <AccountTab ctx={ctx} />;
+    case "notifications":
+      return <NotificationsTab />;
+  }
+}
+
+// ---- Membership tab ---------------------------------------------------------
 
+/**
+ * "My memberships": one card per community the fan belongs to, each linking
+ * inside its community, where billing, cancel and downgrade live. A fan can
+ * hold a membership in several communities of one creator, so there is no
+ * single "your membership" any more. Nothing in a join or upgrade flow sends a
+ * fan here; this is for someone who wants everything in one place.
+ */
+function MembershipTab({ ctx }: { ctx: TabContext }) {
+  const { card } = useCardStyles();
   return (
     <div style={card}>
-      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
-        {tr("forge.account_dashboard.membership_title")}
-      </h2>
-      {membership ? (
-        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
-          <div>
-            <h3 style={{ fontWeight: 700 }}>{membership.membershipTier.name}</h3>
-            <p
-              style={{
-                fontSize: 13,
-                opacity: 0.85,
-                fontWeight: message.tone === "warning" ? 700 : 400,
-                color: message.tone === "warning" ? t.primary : undefined,
-              }}
-            >
-              {message.label}
-            </p>
-            {message.detail && (
-              <p style={{ fontSize: 13, opacity: 0.8, marginTop: 4, maxWidth: 480 }}>{message.detail}</p>
-            )}
-            {!!membership.subscriptionAmount && (
-              <p style={{ fontSize: 14, marginTop: 4 }}>
-                {tr("forge.account_dashboard.membership_price", {
-                  amount: formatAmount(membership.subscriptionAmount, membership.subscriptionCurrency || currency),
-                  cycle: membership.billingCycle,
-                })}
-              </p>
-            )}
-          </div>
-          {!!membership.membershipTier.benefits?.length && (
-            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
-              {membership.membershipTier.benefits.map((b) => (
-                <li key={b.id} style={{ display: "flex", gap: 8 }}>
-                  <span style={{ color: t.primary }}>✓</span>
-                  {b.title}
-                </li>
-              ))}
-            </ul>
-          )}
-          {inTrial && membership.trialEndsAt && (
-            <div data-testid="membership-trial-state">
-              <p style={{ fontSize: 14, fontWeight: 600 }}>
-                {tr("forge.account_dashboard.membership_trial_until", { date: formatDate(membership.trialEndsAt) })}
-              </p>
-              <p style={{ fontSize: 14, opacity: 0.85, marginTop: 2 }}>
-                {access.cancelAtPeriodEnd
-                  ? tr("forge.account_dashboard.membership_trial_cancelled")
-                  : membership.subscriptionAmount
-                    ? tr("forge.account_dashboard.membership_trial_then", {
-                        amount: formatAmount(membership.subscriptionAmount, membership.subscriptionCurrency || currency),
-                        cycle: cycleWord(membership.billingCycle),
-                        date: formatDate(membership.trialEndsAt),
-                      })
-                    : null}
-              </p>
-            </div>
-          )}
-          {membership.endDate && !inTrial && (
-            <p style={{ fontSize: 14, opacity: 0.8 }}>
-              {access.billingState === "active"
-                ? tr("forge.account_dashboard.membership_renews_on", { date: formatDate(membership.endDate) })
-                : tr("forge.account_dashboard.membership_ends_on", { date: formatDate(membership.endDate) })}
-            </p>
-          )}
-          {billingError && <p style={{ fontSize: 13, opacity: 0.9 }}>{billingError}</p>}
-          {cancelError && (
-            <p role="alert" style={{ fontSize: 13, opacity: 0.9, color: t.primary }}>
-              {cancelError}
-            </p>
-          )}
-        </div>
-      ) : (
-        <p style={{ opacity: 0.8 }}>{tr("forge.account_dashboard.membership_empty")}</p>
-      )}
-
-      <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 24, flexWrap: "wrap" }}>
-        {/* Kept hard left, apart from the billing actions: this is the door to
-            what the membership is FOR, not another thing to do to the plan. */}
-        {canOpenCommunity && (
-          <button onClick={() => onNavigateCommunity?.()} style={{ ...ghostButton, marginRight: "auto" }}>
-            {tr("forge.account_dashboard.member_area")}
-          </button>
-        )}
-        {message.showUpdatePayment && (
-          <button onClick={onUpdatePayment} disabled={openBillingPortal.isPending} style={button}>
-            {openBillingPortal.isPending
-              ? tr("forge.account_dashboard.billing_portal_opening")
-              : tr("forge.account_dashboard.update_payment_method")}
-          </button>
-        )}
-        {/* Cancelling stays available for anyone who still HAS access — a
-            past_due member must not be trapped in a subscription they can see
-            but not leave. Hidden once it is already scheduled ("Ending"), where
-            the only honest label would be "Cancel again". */}
-        {access.hasAccess && !access.cancelAtPeriodEnd && (
-          <button onClick={() => setConfirmingCancel(true)} disabled={isCancelling} style={ghostButton}>
-            {isCancelling ? tr("forge.account_dashboard.cancelling") : tr("forge.account_dashboard.cancel")}
-          </button>
-        )}
-        <button onClick={() => onNavigateMembership?.()} style={button}>
-          {membership
-            ? tr("forge.account_dashboard.membership_change")
-            : tr("forge.account_dashboard.membership_join")}
-        </button>
-      </div>
-
-      {/* Says WHICH of the two cancellations this is. A paid membership runs to
-          the end of the period already paid for; a free one stops now. A flat
-          "are you sure" tells a member who paid this month that they have lost
-          the rest of it, which is not true and reads as a threat. */}
-      {confirmingCancel && (
-        <div role="alertdialog" aria-modal="true" style={{ ...card, marginTop: 16 }}>
-          <p style={{ fontWeight: 700 }}>{tr("forge.account_dashboard.cancel_confirm_title")}</p>
-          <p style={{ fontSize: 14, opacity: 0.85, marginTop: 8 }}>
-            {inTrial && membership?.trialEndsAt
-              ? tr("forge.account_dashboard.cancel_confirm_trial", { date: formatDate(membership.trialEndsAt) })
-              : membership?.subscriptionAmount
-              ? membership.endDate
-                ? tr("forge.account_dashboard.cancel_confirm_paid_until", { date: formatDate(membership.endDate) })
-                : tr("forge.account_dashboard.cancel_confirm_paid")
-              : tr("forge.account_dashboard.cancel_confirm_free")}
-          </p>
-          <div style={{ display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 16 }}>
-            <button onClick={() => setConfirmingCancel(false)} disabled={isCancelling} style={ghostButton}>
-              {tr("forge.account_dashboard.cancel_confirm_keep")}
-            </button>
-            <button
-              onClick={() => {
-                // Closed FIRST, so the dialog cannot be double-submitted while
-                // the request is in flight. The row behind it already renders
-                // "Cancelling" from `isCancelling`.
-                setConfirmingCancel(false);
-                void onCancel();
-              }}
-              disabled={isCancelling}
-              style={button}
-            >
-              {tr("forge.account_dashboard.cancel_confirm_confirm")}
-            </button>
-          </div>
-        </div>
-      )}
-
+      <MyMembershipsList navigate={ctx.navigate} formatAmount={ctx.formatAmount} layout="rows" />
       <MembershipApplicationsSection ctx={ctx} />
     </div>
   );
@@ -594,9 +521,18 @@ const APPLICATION_STATUS_LABEL: Record<MembershipApplicationStatus, string> = {
 function MembershipApplicationsSection({ ctx }: { ctx: TabContext }) {
   const { user } = usePublicAuth();
   const tr = useForgeT();
-  const { t, ghostButton, button } = useCardStyles();
+  const { t, ghostButton, button, list, row, meta, alert } = useCardStyles();
   const { formatAmount, formatDate, currency } = ctx;
   const { data: applications } = useMyMembershipApplications(user?.id);
+  const { data: communities } = usePublicCommunities({
+    enabled: !!applications?.some((a) => a.status === "payment_failed"),
+  });
+  /** An approved application whose card failed is finished on its community's About page, on that tier. */
+  const completeHref = (application: MembershipApplication) => {
+    const communityId = (application as MembershipApplication & { communityId?: string }).communityId;
+    const slug = communities?.find((community) => community.id === communityId)?.slug;
+    return slug ? communityAboutPath(slug, { tier: application.membershipTierId }) : communitiesListPath();
+  };
   const withdraw = useWithdrawMembershipApplication();
   const confirm = useConfirmMembershipApplication();
   const [error, setError] = useState<string | null>(null);
@@ -623,24 +559,28 @@ function MembershipApplicationsSection({ ctx }: { ctx: TabContext }) {
   };
 
   return (
-    <div style={{ marginTop: 24, paddingTop: 16, borderTop: `1px solid ${t.primary}20` }}>
-      <h3 style={{ fontWeight: 700, marginBottom: 12, fontFamily: t.headingFontFamily }}>
+    <div style={{ marginTop: 40 }}>
+      <h2 style={{ fontSize: 18, fontWeight: 600, margin: "0 0 12px", fontFamily: t.headingFontFamily }}>
         {tr("forge.account_dashboard.applications_title")}
-      </h3>
-      <ul
-        data-testid="membership-applications"
-        style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12 }}
-      >
+      </h2>
+      <ul data-testid="membership-applications" style={{ ...list, listStyle: "none", padding: 0, margin: 0 }}>
         {applications.map((application) => (
           <li
             key={application.id}
-            style={{ display: "flex", gap: 12, justifyContent: "space-between", alignItems: "center", flexWrap: "wrap" }}
+            style={{
+              ...row,
+              display: "flex",
+              gap: 12,
+              justifyContent: "space-between",
+              alignItems: "center",
+              flexWrap: "wrap",
+            }}
           >
             <div style={{ minWidth: 0 }}>
-              <p style={{ fontWeight: 600 }}>{application.membershipTierName ?? ""}</p>
-              <p style={{ fontSize: 13, opacity: 0.85 }}>{tr(APPLICATION_STATUS_LABEL[application.status])}</p>
+              <p style={{ fontWeight: 600, margin: 0 }}>{application.membershipTierName ?? ""}</p>
+              <p style={{ ...meta, margin: "2px 0 0" }}>{tr(APPLICATION_STATUS_LABEL[application.status])}</p>
               {application.amount != null && application.billingCycle && (
-                <p style={{ fontSize: 13, opacity: 0.8 }}>
+                <p style={{ ...meta, margin: 0 }}>
                   {tr("forge.account_dashboard.membership_price", {
                     amount: formatAmount(application.amount, application.currency || currency),
                     cycle: application.billingCycle,
@@ -648,35 +588,28 @@ function MembershipApplicationsSection({ ctx }: { ctx: TabContext }) {
                 </p>
               )}
               {application.status === "payment_failed" && application.paymentWindowExpiresAt && (
-                <p style={{ fontSize: 13, fontWeight: 600 }}>
+                <p style={{ fontSize: 13, fontWeight: 600, margin: 0 }}>
                   {tr("forge.account_dashboard.application_complete_by", {
                     date: formatDate(application.paymentWindowExpiresAt),
                   })}
                 </p>
               )}
               {application.status === "declined" && application.decisionNote && (
-                <p style={{ fontSize: 13, opacity: 0.8, maxWidth: 480 }}>{application.decisionNote}</p>
+                <p style={{ ...meta, margin: 0, maxWidth: 480 }}>{application.decisionNote}</p>
               )}
-              <p style={{ fontSize: 12, opacity: 0.65 }}>
+              <p style={{ ...meta, margin: 0 }}>
                 {tr("forge.account_dashboard.application_submitted_on", { date: formatDate(application.createdAt) })}
               </p>
             </div>
             {canWithdrawMembershipApplication(application.status) && (
-              <button
-                onClick={() => void onWithdraw(application)}
-                disabled={withdraw.isPending}
-                style={ghostButton}
-              >
+              <button onClick={() => void onWithdraw(application)} disabled={withdraw.isPending} style={ghostButton}>
                 {withdraw.isPending && withdraw.variables?.applicationId === application.id
                   ? tr("forge.account_dashboard.application_withdrawing")
                   : tr("forge.account_dashboard.application_withdraw")}
               </button>
             )}
             {application.status === "payment_failed" && (
-              <a
-                href={`/i/membership/checkout?membershipTierId=${encodeURIComponent(application.membershipTierId)}`}
-                style={{ ...button, textDecoration: "none" }}
-              >
+              <a href={completeHref(application)} style={button}>
                 {tr("forge.account_dashboard.application_complete")}
               </a>
             )}
@@ -684,7 +617,7 @@ function MembershipApplicationsSection({ ctx }: { ctx: TabContext }) {
         ))}
       </ul>
       {error && (
-        <p role="alert" style={{ fontSize: 13, marginTop: 8, color: t.primary }}>
+        <p role="alert" style={alert}>
           {error}
         </p>
       )}
@@ -698,7 +631,7 @@ function MembershipApplicationsSection({ ctx }: { ctx: TabContext }) {
  * The buyer's event tickets, and cancelling one inside the policy they were
  * sold under (S.6).
  *
- * Before this, a ticket buyer had no purchase surface at all — the confirmation
+ * Before this, a ticket buyer had no purchase surface at all: the confirmation
  * email and a one-shot finalise page were the only artefacts of the sale.
  *
  * Eligibility is NOT recomputed here. `cancellation.canCancel` and its reason
@@ -709,22 +642,22 @@ function MembershipApplicationsSection({ ctx }: { ctx: TabContext }) {
  * ## Two kinds of row
  *
  * `role` says whether the caller PAID for this order or merely HOLDS a pass out
- * of it — a ticket somebody transferred to them, which until now reached them
+ * of it: a ticket somebody transferred to them, which until now reached them
  * nowhere at all. A holder's row is scrubbed server-side (no totals, no line
  * prices, no other seats, no cancel), and this renders that difference rather
  * than printing "$0.00" over somebody else's purchase.
  */
 function TicketsTab({ ctx }: { ctx: TabContext }) {
   const { user } = usePublicAuth();
-  const { t, card } = useCardStyles();
+  const { t, card, list, row, meta, ghostButton } = useCardStyles();
   const tr = useForgeT();
   const { formatAmount, formatDate, currency } = ctx;
-  const { data, isLoading } = useMyTickets(user?.id);
+  const { data, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } = useMyTicketsPaged(user?.id);
   const cancelTicket = useCancelMyTicket();
   const [pendingId, setPendingId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
-  const tickets = data?.data ?? [];
+  const tickets = data?.pages.flatMap((page) => page.data) ?? [];
 
   const onCancel = async (ticket: MyTicket) => {
     setError(null);
@@ -743,18 +676,15 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
 
   return (
     <div style={card}>
-      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
-        {tr("forge.account_dashboard.tickets_title")}
-      </h2>
       {error && (
-        <div style={{ marginBottom: 16, padding: 12, borderRadius: t.cornerRadius, border: `1px solid ${t.primary}40`, fontSize: 14 }}>
+        <p role="alert" style={{ fontSize: 14, fontWeight: 600, margin: "0 0 16px" }}>
           {error}
-        </div>
+        </p>
       )}
       {isLoading ? (
         <Loading />
       ) : tickets.length > 0 ? (
-        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <div style={list}>
           {tickets.map((ticket) => {
             const cancelled = !!ticket.selfCancelledAt;
             // Absent on an older API build, where every row WAS a purchase.
@@ -770,24 +700,23 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
             const requestState = myTicketRequestState(ticket);
             const isRequestRow = isMyTicketRequestOpenOrEnded(ticket);
             const requestEnded = isRequestRow && requestState !== "pending";
+            // A show that has happened needs no calendar entry, wallet pass or
+            // transfer: those controls are for getting INTO it.
+            const eventOver = new Date(ticket.eventEndDateTime ?? ticket.eventDateTime).getTime() < Date.now();
+            const heldPassIds = myTicketHeldPassIds(ticket);
             return (
               <div
                 key={ticket.id}
-                data-testid={requestState ? `my-ticket-request-${requestState}` : undefined}
-                style={{
-                  border: `1px solid ${t.primary}20`,
-                  borderRadius: t.cornerRadius,
-                  padding: 16,
-                  opacity: cancelled || requestEnded ? 0.6 : 1,
-                }}
+                data-testid={requestState ? `my-ticket-request-${requestState}` : "my-ticket"}
+                style={{ ...row, opacity: cancelled || requestEnded ? 0.6 : 1 }}
               >
-                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12, gap: 12 }}>
+                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8, gap: 12 }}>
                   <div>
-                    <div style={{ fontWeight: 600 }}>{ticket.eventTitle}</div>
-                    <div style={{ fontSize: 13, opacity: 0.7 }}>{formatDate(ticket.eventDateTime)}</div>
+                    <div style={{ fontWeight: 600, fontSize: 16 }}>{ticket.eventTitle}</div>
+                    <div style={meta}>{formatDate(ticket.eventDateTime)}</div>
                   </div>
                   {requestState && (
-                    <span style={{ fontSize: 13, color: t.primary, textAlign: "right" }}>
+                    <span style={{ fontSize: 13, fontWeight: 600, textAlign: "right" }}>
                       {requestState === "pending"
                         ? tr("forge.account_dashboard.request_pending")
                         : requestState === "approved"
@@ -800,20 +729,29 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
                     </span>
                   )}
                   {cancelled && !requestState && (
-                    <span style={{ fontSize: 13, color: t.primary }}>{tr("forge.account_dashboard.cancelled")}</span>
+                    <span style={{ fontSize: 13, color: t.muted }}>{tr("forge.account_dashboard.cancelled")}</span>
                   )}
                   {/* Says WHY this is in the list at all. Without it a
                       transferred ticket looks like a purchase the buyer cannot
                       remember making, with no prices on it. */}
                   {!cancelled && gifted && (
-                    <span style={{ fontSize: 13, color: t.primary }}>
+                    <span style={{ fontSize: 13, color: t.muted }}>
                       {tr("forge.account_dashboard.ticket_transferred")}
                     </span>
                   )}
                 </div>
 
                 {ticket.items.map((item) => (
-                  <div key={item.id} style={{ display: "flex", justifyContent: "space-between", fontSize: 14, padding: "4px 0" }}>
+                  <div
+                    key={item.id}
+                    style={{
+                      display: "flex",
+                      justifyContent: "space-between",
+                      fontSize: 14,
+                      padding: "2px 0",
+                      color: t.muted,
+                    }}
+                  >
                     <span>
                       {tr("forge.account_dashboard.ticket_line", {
                         title: item.ticketTitle ?? tr("forge.account_dashboard.ticket_fallback_title"),
@@ -821,7 +759,7 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
                       })}
                     </span>
                     {/* A holder is not shown a price, because the server did
-                        not send one — `Number(null)` is 0, and a confident
+                        not send one: `Number(null)` is 0, and a confident
                         "$0.00" on somebody else's purchase is a lie. */}
                     {!gifted && (
                       <span>{formatAmount(Number(item.price) * item.quantity, ticket.currency || currency)}</span>
@@ -830,7 +768,7 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
                 ))}
 
                 {!gifted && (
-                  <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 700, marginTop: 12, paddingTop: 12, borderTop: `1px solid ${t.primary}20` }}>
+                  <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 600, marginTop: 6 }}>
                     {/* Nothing has been taken on a pending request, and never
                         will be on one that ended: the label says which. */}
                     <span>
@@ -838,7 +776,9 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
                         ? tr("forge.account_dashboard.total_on_approval")
                         : tr("forge.account_dashboard.total")}
                     </span>
-                    <span style={{ color: t.primary }}>{formatAmount(Number(ticket.totalAmount), ticket.currency || currency)}</span>
+                    <span style={{ fontVariantNumeric: "tabular-nums" }}>
+                      {formatAmount(Number(ticket.totalAmount), ticket.currency || currency)}
+                    </span>
                   </div>
                 )}
 
@@ -866,12 +806,12 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
                   </div>
                 )}
 
-                {/* Diarise it — including the Apple option, which needs the
+                {/* Diarise it: including the Apple option, which needs the
                     platform's own `.ics` and so could not exist before. Null
                     for a called-off show, and the component draws nothing. */}
                 {/* Not offered on a request: the fan has not been admitted to
                     anything yet, and a calendar entry says they have. */}
-                {!isRequestRow && (
+                {!isRequestRow && !eventOver && (
                   <AddToCalendar
                     variant="compact"
                     title={ticket.eventTitle}
@@ -885,7 +825,7 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
 
                 {/*
                   Wallet passes (2.3). Renders NOTHING unless the API offers a
-                  real pass for a real pass id — which, with no signing
+                  real pass for a real pass id: which, with no signing
                   credentials configured, is every ticket today. Deliberately
                   not wrapped in a condition of its own: the component owns that
                   decision, and a second copy of the rule here is how one of the
@@ -894,32 +834,41 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
                   Eligibility (cancelled order, rotating QR) is the server's
                   call, exactly as it is for cancellation above.
                 */}
-                <WalletPassButtons passIds={myTicketHeldPassIds(ticket)} variant="compact" style={{ marginTop: 12 }} />
+                {!eventOver && <WalletPassButtons passIds={heldPassIds} variant="compact" style={{ marginTop: 12 }} />}
 
                 {/*
                   Transfer (2.2). The email a transfer sends points at
                   `/i/tickets/claim`, so this affordance and that route ship
-                  together — a send with nowhere to land is undeliverable in
+                  together: a send with nowhere to land is undeliverable in
                   practice.
 
                   Renders nothing when the payload carries no `TN-…` pass ids
                   (an older API build), because every pass-scoped endpoint would
                   404. Whether THIS pass may be handed on is the server's call,
-                  answered on submit in its own words — not hidden behind a
+                  answered on submit in its own words: not hidden behind a
                   guess here.
 
                   HELD passes only: the endpoints resolve the current holder, so
                   a control on a named guest's seat or on a ticket already
                   claimed by somebody else could answer nothing but 404. The
                   pass objects go through too, because each carries the caller's
-                  own `pendingTransfer` — which is what lets a sender withdraw
+                  own `pendingTransfer`: which is what lets a sender withdraw
                   from a device that is not the one they sent from.
                 */}
-                <TicketTransferPanel
-                  passIds={myTicketHeldPassIds(ticket)}
-                  passes={myTicketPasses(ticket)}
-                  style={{ marginTop: 12 }}
-                />
+                {/* Folded behind one toggle: a ticket for four people otherwise
+                    draws four transfer boxes before anything else on the row. */}
+                {!eventOver && heldPassIds.length > 0 && (
+                  <details style={{ marginTop: 12 }}>
+                    <summary style={{ cursor: "pointer", fontSize: 14, fontWeight: 600, color: t.text }}>
+                      {tr("forge.account_dashboard.ticket_transfer_toggle", { count: heldPassIds.length })}
+                    </summary>
+                    <TicketTransferPanel
+                      passIds={heldPassIds}
+                      passes={myTicketPasses(ticket)}
+                      style={{ marginTop: 12 }}
+                    />
+                  </details>
+                )}
 
                 {/* The terms they agreed to, in the artist's own words where given. */}
                 {ticket.cancellation.description && (
@@ -933,16 +882,7 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
                   <button
                     onClick={() => void onCancel(ticket)}
                     disabled={pendingId === ticket.id}
-                    style={{
-                      marginTop: 12,
-                      padding: "8px 14px",
-                      borderRadius: t.cornerRadius,
-                      border: `1px solid ${t.primary}40`,
-                      background: "transparent",
-                      color: t.text,
-                      cursor: pendingId === ticket.id ? "wait" : "pointer",
-                      fontWeight: 600,
-                    }}
+                    style={{ ...ghostButton, marginTop: 12, cursor: pendingId === ticket.id ? "wait" : "pointer" }}
                   >
                     {pendingId === ticket.id
                       ? tr("forge.account_dashboard.cancelling")
@@ -954,8 +894,9 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
           })}
         </div>
       ) : (
-        <p style={{ fontSize: 14, opacity: 0.7 }}>{tr("forge.account_dashboard.tickets_empty")}</p>
+        <EmptySection>{tr("forge.account_dashboard.tickets_empty")}</EmptySection>
       )}
+      <ShowMore hasNextPage={hasNextPage} isFetchingNextPage={isFetchingNextPage} onMore={() => void fetchNextPage()} />
     </div>
   );
 }
@@ -967,8 +908,8 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
  *
  * Two states, and they are genuinely different things:
  *
- *   WAITING  — a 1-based `position` in the queue.
- *   NOTIFIED — an OFFER with a deadline, and `position: null`. An offer is not a
+ *   WAITING: a 1-based `position` in the queue.
+ *   NOTIFIED: an OFFER with a deadline, and `position: null`. An offer is not a
  *              queue place, so it is never rendered as one; the deadline is the
  *              whole point and gets the emphasis.
  *
@@ -978,26 +919,23 @@ function TicketsTab({ ctx }: { ctx: TabContext }) {
  */
 function WaitlistTab({ ctx }: { ctx: TabContext }) {
   const { user } = usePublicAuth();
-  const { t, card } = useCardStyles();
+  const { card, list } = useCardStyles();
   const tr = useForgeT();
   const { formatDate } = ctx;
   const { places, isLoading } = useMyWaitlistPlaces(user?.id);
 
   return (
     <div style={card}>
-      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
-        {tr("forge.account_dashboard.waitlists_title")}
-      </h2>
       {isLoading ? (
         <Loading />
       ) : places.length > 0 ? (
-        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <div style={list}>
           {places.map((place) => (
             <WaitlistPlaceRow key={place.id} place={place} formatDate={formatDate} />
           ))}
         </div>
       ) : (
-        <p style={{ fontSize: 14, opacity: 0.7 }}>{tr("forge.account_dashboard.waitlists_empty")}</p>
+        <EmptySection>{tr("forge.account_dashboard.waitlists_empty")}</EmptySection>
       )}
     </div>
   );
@@ -1010,7 +948,7 @@ function WaitlistPlaceRow({
   place: WaitlistPlace;
   formatDate: (value: string | number | Date) => string;
 }) {
-  const { t } = useCardStyles();
+  const { t, row, meta, ghostButton, alert } = useCardStyles();
   const tr = useForgeT();
   const leave = useLeaveEventWaitlist(place.eventId);
   const [error, setError] = useState<string | null>(null);
@@ -1030,19 +968,13 @@ function WaitlistPlaceRow({
   const deadline = place.offer.claimExpiresAt ? new Date(place.offer.claimExpiresAt) : null;
 
   return (
-    <div
-      style={{
-        border: `1px solid ${t.primary}${place.offer.offerOpen ? "80" : "20"}`,
-        borderRadius: t.cornerRadius,
-        padding: 16,
-      }}
-    >
+    <div style={row}>
       <div style={{ display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
         <div>
-          <div style={{ fontWeight: 600 }}>
+          <div style={{ fontWeight: 600, fontSize: 16 }}>
             {place.event?.title ?? tr("forge.account_dashboard.waitlist_event_fallback")}
           </div>
-          <div style={{ fontSize: 13, opacity: 0.7 }}>
+          <div style={meta}>
             {tr(
               place.quantity === 1
                 ? "forge.account_dashboard.waitlist_ticket_line_one"
@@ -1053,21 +985,17 @@ function WaitlistPlaceRow({
               },
             )}
           </div>
-          {place.event?.dateTime && (
-            <div style={{ fontSize: 13, opacity: 0.7 }}>{formatDate(place.event.dateTime)}</div>
-          )}
+          {place.event?.dateTime && <div style={meta}>{formatDate(place.event.dateTime)}</div>}
         </div>
         {place.offer.offerOpen ? (
-          <span style={{ fontWeight: 700, color: t.primary }}>
-            {tr("forge.account_dashboard.waitlist_offer_open")}
-          </span>
+          <span style={{ fontWeight: 700, color: t.primary }}>{tr("forge.account_dashboard.waitlist_offer_open")}</span>
         ) : place.position != null ? (
-          <span style={{ fontSize: 14, opacity: 0.85 }}>
+          <span style={{ fontSize: 14, color: t.muted }}>
             {tr("forge.account_dashboard.waitlist_position_label")}{" "}
-            <strong style={{ color: t.primary }}>#{place.position}</strong>
+            <strong style={{ color: t.text }}>#{place.position}</strong>
           </span>
         ) : (
-          <span style={{ fontSize: 14, opacity: 0.85 }}>{tr("forge.account_dashboard.waitlist_on_list")}</span>
+          <span style={{ fontSize: 14, color: t.muted }}>{tr("forge.account_dashboard.waitlist_on_list")}</span>
         )}
       </div>
 
@@ -1075,9 +1003,9 @@ function WaitlistPlaceRow({
         <div
           style={{
             marginTop: 12,
-            padding: "10px 12px",
-            borderRadius: t.cornerRadius,
-            border: `1px solid ${t.primary}4d`,
+            padding: "10px 14px",
+            borderLeft: `3px solid ${t.primary}`,
+            background: t.surface,
             fontSize: 14,
           }}
         >
@@ -1099,21 +1027,16 @@ function WaitlistPlaceRow({
         </div>
       )}
 
-      {error && <p style={{ color: "#ef4444", fontSize: 13, marginTop: 12 }}>{error}</p>}
+      {error && (
+        <p role="alert" style={alert}>
+          {error}
+        </p>
+      )}
 
       <button
         onClick={() => void onLeave()}
         disabled={leave.isPending}
-        style={{
-          marginTop: 12,
-          padding: "8px 14px",
-          borderRadius: t.cornerRadius,
-          border: `1px solid ${t.primary}40`,
-          background: "transparent",
-          color: t.text,
-          cursor: leave.isPending ? "wait" : "pointer",
-          fontWeight: 600,
-        }}
+        style={{ ...ghostButton, marginTop: 12, cursor: leave.isPending ? "wait" : "pointer" }}
       >
         {leave.isPending
           ? tr("forge.account_dashboard.waitlist_leaving")
@@ -1131,13 +1054,13 @@ function WaitlistPlaceRow({
  * Session buyers had no purchase surface at all: `GET /public/coaching/bookings/mine`
  * and the reschedule action shipped with nothing that could reach them.
  *
- * A booking is deliberately NOT folded into the Orders tab — that tab reads
+ * A booking is deliberately NOT folded into the Orders tab: that tab reads
  * `/public/orders` and covers product orders only, so a session would never
  * appear there however hard one looked.
  *
  * Nothing is recomputed here. `canReschedule` and `rescheduleReason` arrive on
  * every row, and the slot grid the picker offers is the server's own
- * availability read — which already excludes taken slots and hours the coach is
+ * availability read: which already excludes taken slots and hours the coach is
  * busy on any of their services.
  *
  * `cancellation` comes from the POLICY SNAPSHOT taken on the booking at
@@ -1148,28 +1071,26 @@ function WaitlistPlaceRow({
  */
 function BookingsTab({ ctx }: { ctx: TabContext }) {
   const { user } = usePublicAuth();
-  const { t, card } = useCardStyles();
+  const { card, list } = useCardStyles();
   const tr = useForgeT();
-  const { data, isLoading } = useMyBookings(user?.id);
+  const { data, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } = useMyBookingsPaged(user?.id);
 
-  const bookings = data?.data ?? [];
+  const bookings = data?.pages.flatMap((page) => page.data) ?? [];
 
   return (
     <div style={card}>
-      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
-        {tr("forge.account_dashboard.sessions_title")}
-      </h2>
       {isLoading ? (
         <Loading />
       ) : bookings.length > 0 ? (
-        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <div style={list}>
           {bookings.map((booking) => (
             <BookingRow key={booking.id} booking={booking} ctx={ctx} />
           ))}
         </div>
       ) : (
-        <p style={{ fontSize: 14, opacity: 0.7 }}>{tr("forge.account_dashboard.sessions_empty")}</p>
+        <EmptySection>{tr("forge.account_dashboard.sessions_empty")}</EmptySection>
       )}
+      <ShowMore hasNextPage={hasNextPage} isFetchingNextPage={isFetchingNextPage} onMore={() => void fetchNextPage()} />
     </div>
   );
 }
@@ -1194,15 +1115,15 @@ function formatSessionWindow(booking: MyBooking, tr: ForgeT): string {
 }
 
 /**
- * WHERE the session is — the line this portal existed without.
+ * WHERE the session is: the line this portal existed without.
  *
  * A client who bought a coaching call could see the time, the price and an
  * add-to-calendar button, and nothing at all about how to attend; the answer
  * arrived, if it arrived, in a separate email from the coach.
  *
  * The two kinds are not interchangeable, so they do not render the same. An
- * online session's link is an anchor — at 9:59 for a 10:00 call it is the only
- * thing on this row anyone wants — shown in full rather than as the word "Join",
+ * online session's link is an anchor: at 9:59 for a 10:00 call it is the only
+ * thing on this row anyone wants: shown in full rather than as the word "Join",
  * because the client may be reading this on a phone and about to type it into
  * a laptop. An in-person address is plain text: it is the coach's own words,
  * often "Studio B, ring the buzzer" rather than anything a maps provider could
@@ -1210,23 +1131,17 @@ function formatSessionWindow(booking: MyBooking, tr: ForgeT): string {
  *
  * `location` is already resolved server-side (booking override over product
  * default) and is null unless the session is confirmed, so there is no rule to
- * apply here — which is the same discipline `canReschedule` follows two blocks
+ * apply here: which is the same discipline `canReschedule` follows two blocks
  * down.
  */
-function BookingLocationLine({
-  location,
-  primary,
-}: {
-  location: MyBooking["location"];
-  primary: string;
-}) {
+function BookingLocationLine({ location, primary }: { location: MyBooking["location"]; primary: string }) {
   const tr = useForgeT();
   if (!location) return null;
 
   if (location.type === "online") {
     return (
       <div style={{ fontSize: 13, marginTop: 4 }}>
-        <span style={{ opacity: 0.7 }}>{tr("forge.account_dashboard.booking_join_label")}{" "}</span>
+        <span style={{ opacity: 0.7 }}>{tr("forge.account_dashboard.booking_join_label")} </span>
         <a
           href={location.url}
           target="_blank"
@@ -1251,7 +1166,7 @@ function BookingLocationLine({
   if (location.type === "video") {
     return (
       <div style={{ fontSize: 13, opacity: 0.7, marginTop: 4 }}>
-        <span style={{ fontWeight: 600 }}>{tr("forge.account_dashboard.booking_join_label")}{" "}</span>
+        <span style={{ fontWeight: 600 }}>{tr("forge.account_dashboard.booking_join_label")} </span>
         {tr("forge.account_dashboard.booking_video_call")}
       </div>
     );
@@ -1259,30 +1174,29 @@ function BookingLocationLine({
 
   return (
     <div style={{ fontSize: 13, opacity: 0.7, marginTop: 4 }}>
-      <span style={{ fontWeight: 600 }}>{tr("forge.account_dashboard.booking_where_label")}{" "}</span>
+      <span style={{ fontWeight: 600 }}>{tr("forge.account_dashboard.booking_where_label")} </span>
       {location.address}
     </div>
   );
 }
 
 function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
-  const { t } = useCardStyles();
+  const { t, row, meta, ghostButton, alert } = useCardStyles();
   const tr = useForgeT();
   const { formatAmount, currency } = ctx;
   const cancelBooking = useCancelMyBooking();
   const [picking, setPicking] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const cancelled = booking.status === "canceled" || !!booking.selfCancelledAt;
+  // A session that is over keeps its record, not its way in: no calendar
+  // entry and no "the room has closed" line on something that already happened.
+  const endedAt = new Date(booking.sessionEndTime).getTime();
+  const sessionOver = endedAt < Date.now();
+  // "The room has closed" still helps the day someone missed it; after that it
+  // is noise on a list of history.
+  const callNoteExpired = endedAt < Date.now() - 24 * 3600_000;
 
-  const actionButton: React.CSSProperties = {
-    padding: "8px 14px",
-    borderRadius: t.cornerRadius,
-    border: `1px solid ${t.primary}40`,
-    background: "transparent",
-    color: t.text,
-    cursor: "pointer",
-    fontWeight: 600,
-  };
+  const actionButton = ghostButton;
 
   const onCancel = async () => {
     setError(null);
@@ -1300,49 +1214,42 @@ function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
   };
 
   return (
-    <div
-      style={{
-        border: `1px solid ${t.primary}20`,
-        borderRadius: t.cornerRadius,
-        padding: 16,
-        opacity: cancelled ? 0.6 : 1,
-      }}
-    >
+    <div data-testid="my-booking" style={{ ...row, opacity: cancelled ? 0.6 : 1 }}>
       <div style={{ display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
         <div>
-          <div style={{ fontWeight: 600 }}>{booking.coachingProductTitle}</div>
-          <div style={{ fontSize: 13, opacity: 0.7 }}>{formatSessionWindow(booking, tr)}</div>
+          <div style={{ fontWeight: 600, fontSize: 16 }}>{booking.coachingProductTitle}</div>
+          <div style={meta}>{formatSessionWindow(booking, tr)}</div>
           {booking.coachingProductDurationMinutes != null && (
-            <div style={{ fontSize: 13, opacity: 0.7 }}>
+            <div style={meta}>
               {tr("forge.account_dashboard.booking_duration", { minutes: booking.coachingProductDurationMinutes })}
             </div>
           )}
           <BookingLocationLine location={booking.location} primary={t.primary} />
         </div>
         <div style={{ textAlign: "right" }}>
-          {cancelled && (
-            <div style={{ fontSize: 13, color: t.primary }}>{tr("forge.account_dashboard.cancelled")}</div>
-          )}
+          {cancelled && <div style={{ fontSize: 13, color: t.muted }}>{tr("forge.account_dashboard.cancelled")}</div>}
           {booking.totalAmount != null && (
-            <div style={{ fontWeight: 700, color: t.primary }}>
+            <div style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>
               {formatAmount(booking.totalAmount, booking.currency || currency)}
             </div>
           )}
         </div>
       </div>
 
-      {/* Diarise it — including Apple, which needs the platform's own `.ics`.
+      {/* Diarise it: including Apple, which needs the platform's own `.ics`.
           Null unless the session is confirmed, and the component draws nothing. */}
-      <AddToCalendar
-        variant="compact"
-        title={booking.coachingProductTitle}
-        start={booking.sessionStartTime}
-        end={booking.sessionEndTime}
-        defaultDurationMinutes={booking.coachingProductDurationMinutes ?? undefined}
-        icsUrl={booking.calendarUrl}
-        webcalUrl={booking.calendarWebcalUrl}
-        style={{ marginTop: 12 }}
-      />
+      {!sessionOver && (
+        <AddToCalendar
+          variant="compact"
+          title={booking.coachingProductTitle}
+          start={booking.sessionStartTime}
+          end={booking.sessionEndTime}
+          defaultDurationMinutes={booking.coachingProductDurationMinutes ?? undefined}
+          icsUrl={booking.calendarUrl}
+          webcalUrl={booking.calendarWebcalUrl}
+          style={{ marginTop: 12 }}
+        />
+      )}
 
       {/* The terms they booked under, in the artist's own words where given. */}
       {booking.cancellation.description && (
@@ -1353,17 +1260,19 @@ function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
       )}
       {/* A reschedule rule of its own. When it follows the cancellation window
           the sentence above already says it, so nothing is repeated. */}
-      {booking.reschedulePolicy && !booking.reschedulePolicy.followsCancellation && booking.reschedulePolicy.description && (
-        <div style={{ fontSize: 13, opacity: 0.75, marginTop: 4 }}>{booking.reschedulePolicy.description}</div>
-      )}
+      {booking.reschedulePolicy &&
+        !booking.reschedulePolicy.followsCancellation &&
+        booking.reschedulePolicy.description && (
+          <div style={{ fontSize: 13, opacity: 0.75, marginTop: 4 }}>{booking.reschedulePolicy.description}</div>
+        )}
 
       {/*
-        The action row. Both controls are drawn from the SERVER's flags —
-        `canReschedule` and `cancellation.canCancel` — never from eligibility
+        The action row. Both controls are drawn from the SERVER's flags:
+        `canReschedule` and `cancellation.canCancel`: never from eligibility
         re-derived in the browser, which would give two answers to one question.
       */}
       {error && (
-        <p style={{ color: "#ef4444", fontSize: 13, marginTop: 12 }} role="alert">
+        <p style={alert} role="alert">
           {error}
         </p>
       )}
@@ -1391,7 +1300,7 @@ function BookingRow({ booking, ctx }: { booking: MyBooking; ctx: TabContext }) {
 
       {/* The way INTO a video session: a Join control while the room is open,
           the call itself once pressed. Nothing for any other kind of session. */}
-      {!cancelled && <BookingCallEntry booking={booking} />}
+      {!cancelled && !callNoteExpired && <BookingCallEntry booking={booking} />}
     </div>
   );
 }
@@ -1487,7 +1396,7 @@ function BookingCallEntry({ booking }: { booking: MyBooking }) {
  * Pick another time for a session already bought.
  *
  * The grid is `GET /public/coaching/products/:id/availability` over the next
- * fortnight — the same read the original purchase used, which already drops
+ * fortnight: the same read the original purchase used, which already drops
  * taken slots and hours the coach is busy on any of their services. It is not
  * filtered further here: a slot this list offers and the server then refuses
  * (two buyers racing for one hour, decided by a database EXCLUDE constraint)
@@ -1530,7 +1439,15 @@ function RescheduleSlotPicker({ booking, onDone }: { booking: MyBooking; onDone:
   const open = (slots ?? []).filter((slot) => slot.id !== booking.coachingBookingSlotId);
 
   return (
-    <div style={{ marginTop: 12, padding: 12, borderRadius: t.cornerRadius, border: `1px solid ${t.primary}4d` }}>
+    <div
+      style={{
+        marginTop: 12,
+        padding: 16,
+        borderRadius: t.cornerRadius,
+        border: `1px solid ${t.border}`,
+        background: t.surface,
+      }}
+    >
       <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12 }}>
         <strong style={{ fontSize: 14 }}>{tr("forge.account_dashboard.reschedule_title")}</strong>
         <button
@@ -1538,7 +1455,7 @@ function RescheduleSlotPicker({ booking, onDone }: { booking: MyBooking; onDone:
           style={{
             padding: "4px 10px",
             borderRadius: t.cornerRadius,
-            border: `1px solid ${t.primary}40`,
+            border: `1px solid ${t.border}`,
             background: "transparent",
             color: t.text,
             cursor: "pointer",
@@ -1550,7 +1467,7 @@ function RescheduleSlotPicker({ booking, onDone }: { booking: MyBooking; onDone:
       </div>
 
       {error && (
-        <p style={{ color: "#ef4444", fontSize: 13, marginTop: 10 }} role="alert">
+        <p style={{ fontSize: 14, fontWeight: 600, marginTop: 10 }} role="alert">
           {error}
         </p>
       )}
@@ -1570,8 +1487,8 @@ function RescheduleSlotPicker({ booking, onDone }: { booking: MyBooking; onDone:
                 style={{
                   padding: "8px 12px",
                   borderRadius: t.cornerRadius,
-                  border: `1px solid ${t.primary}40`,
-                  background: "transparent",
+                  border: `1px solid ${t.border}`,
+                  background: t.background,
                   color: t.text,
                   cursor: reschedule.isPending ? "wait" : "pointer",
                   fontSize: 13,
@@ -1592,9 +1509,7 @@ function RescheduleSlotPicker({ booking, onDone }: { booking: MyBooking; onDone:
           })}
         </div>
       ) : (
-        <p style={{ fontSize: 13, opacity: 0.7, marginTop: 12 }}>
-          {tr("forge.account_dashboard.reschedule_empty")}
-        </p>
+        <p style={{ fontSize: 13, opacity: 0.7, marginTop: 12 }}>{tr("forge.account_dashboard.reschedule_empty")}</p>
       )}
     </div>
   );
@@ -1616,15 +1531,10 @@ function RescheduleSlotPicker({ booking, onDone }: { booking: MyBooking; onDone:
  * That decision lives in one place, `FilmRentalList`, and both surfaces read it.
  */
 function RentalsTab({ ctx }: { ctx: TabContext }) {
-  const { t, card } = useCardStyles();
-  const tr = useForgeT();
-
+  const { card } = useCardStyles();
   return (
     <div style={card}>
-      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
-        {tr("forge.account_dashboard.rentals_title")}
-      </h2>
-      <FilmRentalList navigate={ctx.onNavigateFilm} />
+      <FilmRentalList navigate={ctx.onNavigateFilm} layout="rows" />
     </div>
   );
 }
@@ -1640,46 +1550,50 @@ function RentalsTab({ ctx }: { ctx: TabContext }) {
  * the question this whole tab exists to stop someone asking.
  */
 function CoursesTab({ ctx, courses }: { ctx: TabContext; courses: MyCourse[] }) {
-  const { t, card } = useCardStyles();
+  const { card, list, row, meta, button, ghostButton } = useCardStyles();
   const tr = useForgeT();
 
   return (
     <div style={card}>
-      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
-        {tr("forge.account_dashboard.courses_title")}
-      </h2>
-
       {courses.length === 0 ? (
-        <p style={{ color: t.muted }}>{tr("forge.account_dashboard.courses_empty")}</p>
+        <EmptySection>{tr("forge.account_dashboard.courses_empty")}</EmptySection>
       ) : (
-        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+        <div style={list}>
           {courses.map((course) => (
-            <button
+            <div
               key={course.accessId}
-              type="button"
-              onClick={() => ctx.onNavigateCourse?.(course)}
-              style={{
-                textAlign: "left",
-                background: t.surface,
-                border: `1px solid ${t.border}`,
-                borderRadius: t.cornerRadius,
-                padding: 16,
-                cursor: ctx.onNavigateCourse ? "pointer" : "default",
-                color: t.text,
-              }}
+              data-testid="my-course"
+              style={{ ...row, display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}
             >
-              <div style={{ fontWeight: 600 }}>{course.title}</div>
-              {/* No description. It is rich text: as a string it shows its own
-                  markup, as HTML it drags a sales page's formatting into a list
-                  row. The row carries the title and the state instead. */}
-              <div style={{ color: t.muted, fontSize: 12, marginTop: 8 }}>
-                {course.completedAt
-                  ? tr("forge.account_dashboard.courses_completed")
-                  : course.currentLessonId
-                    ? tr("forge.account_dashboard.courses_continue")
-                    : tr("forge.account_dashboard.courses_start")}
+              <div style={{ flex: "1 1 220px", minWidth: 0 }}>
+                <div style={{ fontWeight: 600, fontSize: 16 }}>{course.title}</div>
+                {/* No description. It is rich text: as a string it shows its own
+                    markup, as HTML it drags a sales page's formatting into a list
+                    row. The row carries the title and the state instead. */}
+                <div style={meta}>
+                  {course.completedAt
+                    ? tr("forge.account_dashboard.courses_completed")
+                    : course.currentLessonId
+                      ? tr("forge.account_dashboard.courses_continue")
+                      : tr("forge.account_dashboard.courses_start")}
+                </div>
               </div>
-            </button>
+              {ctx.onNavigateCourse && (
+                <button
+                  type="button"
+                  onClick={() => ctx.onNavigateCourse?.(course)}
+                  // Finished courses are history, so only an unfinished one
+                  // gets the filled button.
+                  style={course.completedAt ? ghostButton : button}
+                >
+                  {course.completedAt
+                    ? tr("forge.account_dashboard.course_open_review")
+                    : course.currentLessonId
+                      ? tr("forge.account_dashboard.course_open_continue")
+                      : tr("forge.account_dashboard.course_open_start")}
+                </button>
+              )}
+            </div>
           ))}
         </div>
       )}
@@ -1691,38 +1605,61 @@ function CoursesTab({ ctx, courses }: { ctx: TabContext; courses: MyCourse[] })
 
 function OrdersTab({ ctx }: { ctx: TabContext }) {
   const { user } = usePublicAuth();
-  const { t, card } = useCardStyles();
+  const { t, card, list, row, meta } = useCardStyles();
   const tr = useForgeT();
   const { formatAmount, formatDate, currency } = ctx;
-  const { data: orders, isLoading } = useUserOrders(user?.id);
+  const { data, isLoading, hasNextPage, fetchNextPage, isFetchingNextPage } = useUserOrdersPaged(user?.id);
+  const orders = data?.pages.flat();
 
   const formatStatus = (s: OrderStatus) => s.replace(/_/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
 
   return (
     <div style={card}>
-      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
-        {tr("forge.account_dashboard.orders_title")}
-      </h2>
       {isLoading ? (
         <Loading />
       ) : orders && orders.length > 0 ? (
-        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <div style={list}>
           {orders
             .filter((o) => ![OrderStatus.InitiatedPayment, OrderStatus.PaymentFailed].includes(o.status))
             .map((order) => (
-              <div key={order.id} style={{ border: `1px solid ${t.primary}20`, borderRadius: t.cornerRadius, padding: 16 }}>
-                <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12 }}>
+              <div key={order.id} data-testid="my-order" style={row}>
+                <div
+                  style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "flex-start",
+                    gap: 12,
+                    marginBottom: 8,
+                  }}
+                >
                   <div>
-                    <div style={{ fontWeight: 600 }}>
-                      {tr("forge.account_dashboard.order_number", { order_id: order.id })}
+                    {/* The first block of the id is enough to tell orders apart
+                        and to quote in an email; the whole uuid is noise. */}
+                    <div style={{ fontWeight: 600, fontSize: 16 }} title={order.id}>
+                      {tr("forge.account_dashboard.order_number", { order_id: order.id.slice(0, 8).toUpperCase() })}
+                    </div>
+                    <div className="fg:flex fg:flex-wrap fg:gap-x-3" style={meta}>
+                      <span>{formatDate(order.createdAt)}</span>
+                      <span>{formatStatus(order.status)}</span>
                     </div>
-                    <div style={{ fontSize: 13, opacity: 0.7 }}>{formatDate(order.createdAt)}</div>
                   </div>
-                  <span style={{ fontSize: 13, color: t.primary }}>{formatStatus(order.status)}</span>
+                  <span style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>
+                    {formatAmount(order.totalAmount, order.currency || currency)}
+                  </span>
                 </div>
                 {order.deliveryGroups.map((group) =>
                   group.items.map((item, i) => (
-                    <div key={`${item.productVariantId}-${i}`} style={{ display: "flex", justifyContent: "space-between", fontSize: 14, padding: "4px 0" }}>
+                    <div
+                      key={`${item.productVariantId}-${i}`}
+                      style={{
+                        display: "flex",
+                        justifyContent: "space-between",
+                        gap: 12,
+                        fontSize: 14,
+                        padding: "2px 0",
+                        color: t.muted,
+                      }}
+                    >
                       <span>
                         {tr("forge.account_dashboard.order_line", { title: item.title, quantity: item.quantity })}
                         {/* Which version. Two versions of one release carry the
@@ -1732,20 +1669,19 @@ function OrdersTab({ ctx }: { ctx: TabContext }) {
                             the sale, not re-resolved. */}
                         <CartLineOptions item={item} accent={t.primary} size="small" style={{ marginTop: 2 }} />
                       </span>
-                      <span>{formatAmount(item.price * item.quantity, order.currency || currency)}</span>
+                      <span style={{ fontVariantNumeric: "tabular-nums" }}>
+                        {formatAmount(item.price * item.quantity, order.currency || currency)}
+                      </span>
                     </div>
                   )),
                 )}
-                <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 700, marginTop: 12, paddingTop: 12, borderTop: `1px solid ${t.primary}20` }}>
-                  <span>{tr("forge.account_dashboard.total")}</span>
-                  <span style={{ color: t.primary }}>{formatAmount(order.totalAmount, order.currency || currency)}</span>
-                </div>
               </div>
             ))}
         </div>
       ) : (
-        <p style={{ opacity: 0.8 }}>{tr("forge.account_dashboard.orders_empty")}</p>
+        <EmptySection>{tr("forge.account_dashboard.orders_empty")}</EmptySection>
       )}
+      <ShowMore hasNextPage={hasNextPage} isFetchingNextPage={isFetchingNextPage} onMore={() => void fetchNextPage()} />
     </div>
   );
 }
@@ -1754,31 +1690,28 @@ function OrdersTab({ ctx }: { ctx: TabContext }) {
 
 function SavedTab() {
   const { user } = usePublicAuth();
-  const { t, card } = useCardStyles();
+  const { card, list, row, meta } = useCardStyles();
   const tr = useForgeT();
   const { data, isLoading } = useSavedPosts(user?.id);
   const posts = data?.data;
 
   return (
     <div style={card}>
-      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
-        {tr("forge.account_dashboard.saved_title")}
-      </h2>
       {isLoading ? (
         <Loading />
       ) : posts && posts.length > 0 ? (
-        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 16 }}>
+        <div style={list}>
           {posts.map((post) => (
-            <div key={post.id} style={{ border: `1px solid ${t.primary}20`, borderRadius: t.cornerRadius, padding: 16 }}>
-              <p style={{ fontSize: 14, marginBottom: 8 }}>{post.caption}</p>
-              <p style={{ fontSize: 12, opacity: 0.6 }}>
+            <div key={post.id} style={row}>
+              <p style={{ fontSize: 15, margin: "0 0 4px" }}>{post.caption}</p>
+              <p style={{ ...meta, margin: 0 }}>
                 {tr("forge.account_dashboard.saved_post_stats", { likes: post.likes, comments: post.comments })}
               </p>
             </div>
           ))}
         </div>
       ) : (
-        <p style={{ opacity: 0.8 }}>{tr("forge.account_dashboard.saved_empty")}</p>
+        <EmptySection>{tr("forge.account_dashboard.saved_empty")}</EmptySection>
       )}
     </div>
   );
@@ -1788,7 +1721,7 @@ function SavedTab() {
 
 function AccountTab({ ctx }: { ctx: TabContext }) {
   const { user, refetchUser, logout } = usePublicAuth();
-  const { t, card, button, ghostButton, input } = useCardStyles();
+  const { t, button, ghostButton, input, meta } = useCardStyles();
   const tr = useForgeT();
   const { formatDate } = ctx;
 
@@ -1851,15 +1784,23 @@ function AccountTab({ ctx }: { ctx: TabContext }) {
     }
   };
 
-  const sectionTitle: React.CSSProperties = { fontSize: 16, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily };
-  const label: React.CSSProperties = { fontSize: 14, display: "block", marginBottom: 6 };
+  // Each part of the page is a titled block divided by a hairline: the
+  // portal's sections, not four boxes stacked on top of each other.
+  const card: React.CSSProperties = { padding: "28px 0", borderBottom: `1px solid ${t.border}` };
+  const sectionTitle: React.CSSProperties = {
+    fontSize: 18,
+    fontWeight: 600,
+    margin: "0 0 16px",
+    fontFamily: t.headingFontFamily,
+  };
+  const label: React.CSSProperties = { fontSize: 14, fontWeight: 600, display: "block", marginBottom: 6 };
 
   return (
-    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+    <div style={{ display: "flex", flexDirection: "column", borderTop: `1px solid ${t.border}`, color: t.text }}>
       {/* Profile */}
       <form onSubmit={onUpdateProfile} style={card}>
         <h2 style={sectionTitle}>{tr("forge.account_dashboard.profile_section_title")}</h2>
-        <div style={{ display: "flex", gap: 12, marginBottom: 12 }}>
+        <div className="fg:flex fg:flex-col fg:gap-3 fg:sm:flex-row" style={{ marginBottom: 12 }}>
           <div style={{ flex: 1 }}>
             <label style={label}>{tr("forge.account_dashboard.first_name")}</label>
             <input value={firstName} onChange={(e) => setFirstName(e.target.value)} style={input} />
@@ -1869,7 +1810,7 @@ function AccountTab({ ctx }: { ctx: TabContext }) {
             <input value={lastName} onChange={(e) => setLastName(e.target.value)} style={input} />
           </div>
         </div>
-        <p style={{ fontSize: 13, opacity: 0.7, marginBottom: 12 }}>
+        <p style={{ ...meta, margin: "0 0 16px" }}>
           {tr("forge.account_dashboard.email_readonly", { email: user?.email ?? "" })}
         </p>
         {profileMsg && <p style={{ fontSize: 13, marginBottom: 12 }}>{profileMsg}</p>}
@@ -1881,20 +1822,39 @@ function AccountTab({ ctx }: { ctx: TabContext }) {
       {/* Password */}
       <form onSubmit={onChangePassword} style={card}>
         <h2 style={sectionTitle}>{tr("forge.account_dashboard.password_section_title")}</h2>
-        {passwordMsg && <p style={{ color: "#ef4444", fontSize: 13, marginBottom: 12 }}>{passwordMsg}</p>}
+        {passwordMsg && (
+          <p role="alert" style={{ fontSize: 14, fontWeight: 600, margin: "0 0 12px" }}>
+            {passwordMsg}
+          </p>
+        )}
         <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
           <div>
             <label style={label}>{tr("forge.account_dashboard.current_password")}</label>
-            <input type="password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} style={input} />
+            <input
+              type="password"
+              value={currentPassword}
+              onChange={(e) => setCurrentPassword(e.target.value)}
+              style={input}
+            />
           </div>
-          <div style={{ display: "flex", gap: 12 }}>
+          <div className="fg:flex fg:flex-col fg:gap-3 fg:sm:flex-row">
             <div style={{ flex: 1 }}>
               <label style={label}>{tr("forge.account_dashboard.new_password")}</label>
-              <input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} style={input} />
+              <input
+                type="password"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                style={input}
+              />
             </div>
             <div style={{ flex: 1 }}>
               <label style={label}>{tr("forge.account_dashboard.confirm_password")}</label>
-              <input type="password" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} style={input} />
+              <input
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                style={input}
+              />
             </div>
           </div>
         </div>
@@ -1906,17 +1866,15 @@ function AccountTab({ ctx }: { ctx: TabContext }) {
       {/* Data rights */}
       <div style={card}>
         <h2 style={sectionTitle}>{tr("forge.account_dashboard.data_section_title")}</h2>
-        <p style={{ fontSize: 13, opacity: 0.7, marginBottom: 12 }}>
-          {tr("forge.account_dashboard.data_export_description")}
-        </p>
+        <p style={{ ...meta, margin: "0 0 12px" }}>{tr("forge.account_dashboard.data_export_description")}</p>
         <button onClick={onExport} style={ghostButton}>
           {tr("forge.account_dashboard.export_data")}
         </button>
       </div>
 
       {/* Delete account */}
-      <div style={{ ...card, borderColor: "#ef444533" }}>
-        <h2 style={{ ...sectionTitle, color: "#ef4444" }}>{tr("forge.account_dashboard.delete_section_title")}</h2>
+      <div style={{ ...card, borderBottom: "none" }}>
+        <h2 style={sectionTitle}>{tr("forge.account_dashboard.delete_section_title")}</h2>
         {scheduledAt ? (
           <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
             <p style={{ fontSize: 14 }}>
@@ -1930,7 +1888,7 @@ function AccountTab({ ctx }: { ctx: TabContext }) {
           <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
             <p style={{ fontSize: 14 }}>{tr("forge.account_dashboard.deletion_confirm_body")}</p>
             <div style={{ display: "flex", gap: 12 }}>
-              <button onClick={() => requestDeletion.mutate()} style={{ ...button, background: "#ef4444" }}>
+              <button onClick={() => requestDeletion.mutate()} style={button}>
                 {tr("forge.account_dashboard.deletion_confirm")}
               </button>
               <button onClick={() => setConfirmDelete(false)} style={ghostButton}>
@@ -1939,10 +1897,7 @@ function AccountTab({ ctx }: { ctx: TabContext }) {
             </div>
           </div>
         ) : (
-          <button
-            onClick={() => setConfirmDelete(true)}
-            style={{ padding: "8px 14px", borderRadius: t.cornerRadius, background: "#ef444411", color: "#ef4444", border: "1px solid #ef444433", cursor: "pointer" }}
-          >
+          <button onClick={() => setConfirmDelete(true)} style={ghostButton}>
             {tr("forge.account_dashboard.request_deletion")}
           </button>
         )}
@@ -1953,85 +1908,282 @@ function AccountTab({ ctx }: { ctx: TabContext }) {
 
 // ---- Notifications tab ------------------------------------------------------
 
+/**
+ * Which notifications reach this person, and on which channel.
+ *
+ * The server keeps a matrix of notification type by channel (in-app, push,
+ * email) with defaults per type (`services/notification/matrix.ts`). This draws
+ * it as a few plain groups rather than a grid, and offers only the channels a
+ * type can actually use: a chat message never writes an in-app row, and a
+ * reminder or "live now" never emails, so those switches are not drawn rather
+ * than drawn dead.
+ *
+ * Work notifications (task comments, files a client uploads) go to the
+ * creator's team, never to a client, so they have no place here.
+ */
+const NOTIFICATION_GROUPS: Array<{ titleKey: string; types: Array<{ type: string; labelKey: string }> }> = [
+  {
+    titleKey: "forge.account_dashboard.notify_group_messages",
+    types: [
+      { type: "dm", labelKey: "forge.account_dashboard.notify_type_dm" },
+      { type: "mention", labelKey: "forge.account_dashboard.notify_type_mention" },
+      { type: "reply", labelKey: "forge.account_dashboard.notify_type_reply" },
+      { type: "chat_message", labelKey: "forge.account_dashboard.notify_type_chat_message" },
+      // Replies from the creator's team in the portal's Messages. Drawn once the
+      // server's matrix knows the type (rows without defaults are skipped).
+      { type: "client_message", labelKey: "forge.account_dashboard.notify_type_client_message" },
+    ],
+  },
+  {
+    titleKey: "forge.account_dashboard.notify_group_community",
+    types: [
+      { type: "new_post", labelKey: "forge.account_dashboard.notify_type_new_post" },
+      { type: "new_community_post", labelKey: "forge.account_dashboard.notify_type_new_community_post" },
+      { type: "reaction", labelKey: "forge.account_dashboard.notify_type_reaction" },
+      { type: "mod", labelKey: "forge.account_dashboard.notify_type_mod" },
+    ],
+  },
+  {
+    titleKey: "forge.account_dashboard.notify_group_events",
+    types: [
+      { type: "event_reminder", labelKey: "forge.account_dashboard.notify_type_event_reminder" },
+      { type: "stream_live", labelKey: "forge.account_dashboard.notify_type_stream_live" },
+    ],
+  },
+];
+
+const NOTIFICATION_CHANNELS: Array<{ channel: NotificationChannel; labelKey: string }> = [
+  { channel: "inapp", labelKey: "forge.account_dashboard.notify_channel_inapp" },
+  { channel: "push", labelKey: "forge.account_dashboard.notify_channel_push" },
+  { channel: "email", labelKey: "forge.account_dashboard.notify_channel_email" },
+];
+
+const DIGEST_OPTIONS: Array<{ value: DigestCadence; labelKey: string }> = [
+  { value: "daily", labelKey: "forge.account_dashboard.notify_digest_daily" },
+  { value: "hourly", labelKey: "forge.account_dashboard.notify_digest_hourly" },
+  { value: "inapp_only", labelKey: "forge.account_dashboard.notify_digest_inapp_only" },
+  { value: "off", labelKey: "forge.account_dashboard.notify_digest_off" },
+];
+
+/** Whether a channel means anything for a type, from the server's own defaults. */
+function channelApplies(
+  defaults: NotificationMatrix["defaults"] | undefined,
+  type: string,
+  channel: NotificationChannel,
+): boolean {
+  const def = defaults?.[type];
+  if (!def) return false;
+  if (channel === "inapp") return def.inapp;
+  if (channel === "email") return def.emailMode !== "none";
+  return true;
+}
+
+/**
+ * Push on THIS device: the switch that makes every "Push" choice below mean
+ * anything. A row in the panel's own style rather than `PushOptIn`'s box, and
+ * first, because a member who has not allowed push here receives none of it.
+ * Draws nothing where the browser cannot do push at all.
+ */
+function PushDeviceRow() {
+  const { t, row, meta, button, ghostButton } = useCardStyles();
+  const tr = useForgeT();
+  const { profileId } = useForge();
+  const { isSupported, isSubscribed, isLoading, subscribe, unsubscribe } = usePushSubscription(profileId ?? "");
+  if (!isSupported || !profileId) return null;
+  return (
+    <section style={{ marginBottom: 36 }} data-testid="notify-push-device">
+      <div
+        style={{
+          ...row,
+          borderTop: `1px solid ${t.border}`,
+          display: "flex",
+          alignItems: "center",
+          gap: 16,
+          flexWrap: "wrap",
+        }}
+      >
+        <div style={{ flex: "1 1 220px" }}>
+          <div style={{ fontWeight: 600 }}>{tr("forge.account_dashboard.notify_push_device_title")}</div>
+          <div style={meta}>
+            {isSubscribed
+              ? tr("forge.account_dashboard.notify_push_device_on")
+              : tr("forge.account_dashboard.notify_push_device_off")}
+          </div>
+        </div>
+        {isSubscribed ? (
+          <button type="button" style={ghostButton} disabled={isLoading} onClick={() => void unsubscribe()}>
+            {tr("forge.account_dashboard.notify_push_device_turn_off")}
+          </button>
+        ) : (
+          <button type="button" style={button} disabled={isLoading} onClick={() => void subscribe()}>
+            {tr("forge.account_dashboard.notify_push_device_turn_on")}
+          </button>
+        )}
+      </div>
+    </section>
+  );
+}
+
 function NotificationsTab() {
-  const { t, card } = useCardStyles();
+  const { t, card, list, row, alert } = useCardStyles();
   const tr = useForgeT();
-  const { data } = useNotificationPreferences();
-  const updatePreference = useUpdateNotificationPreference();
+  const { data, isLoading } = useNotificationMatrix();
+  const update = useUpdateNotificationMatrix();
+  // Optimistic: the switch moves on click, and moves back if the save fails.
+  const [pending, setPending] = useState<Record<string, boolean>>({});
+  const [cadence, setCadence] = useState<DigestCadence | null>(null);
+  const [error, setError] = useState<string | null>(null);
 
-  const [preferences, setPreferences] = useState<NotificationPreferences>({ newPosts: true, chatMessages: true });
+  if (isLoading || !data) return <Loading />;
 
-  useEffect(() => {
-    if (data?.preferences) {
-      setPreferences({
-        newPosts: data.preferences.newPosts !== false,
-        chatMessages: data.preferences.chatMessages !== false,
+  const isOn = (key: string) => (key in pending ? pending[key]! : !!data.preferences[key]);
+  const currentCadence = cadence ?? data.digestCadence;
+
+  const toggle = async (key: string) => {
+    const value = !isOn(key);
+    setError(null);
+    setPending((prev) => ({ ...prev, [key]: value }));
+    try {
+      await update.mutateAsync({ preferences: { [key]: value } });
+    } catch {
+      setError(tr("forge.account_dashboard.notify_save_error"));
+    } finally {
+      setPending((prev) => {
+        const next = { ...prev };
+        delete next[key];
+        return next;
       });
     }
-  }, [data]);
+  };
 
-  const toggle = async (key: keyof NotificationPreferences) => {
-    const value = !preferences[key];
-    setPreferences((prev) => ({ ...prev, [key]: value }));
+  const chooseCadence = async (value: DigestCadence) => {
+    setError(null);
+    setCadence(value);
     try {
-      await updatePreference.mutateAsync({ key, value });
+      await update.mutateAsync({ digestCadence: value });
     } catch {
-      setPreferences((prev) => ({ ...prev, [key]: !value }));
+      setError(tr("forge.account_dashboard.notify_save_error"));
+    } finally {
+      setCadence(null);
     }
   };
 
-  const Row = ({ k, title, desc }: { k: keyof NotificationPreferences; title: string; desc: string }) => (
-    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-      <div>
-        <div style={{ fontWeight: 600 }}>{title}</div>
-        <div style={{ fontSize: 13, opacity: 0.7 }}>{desc}</div>
-      </div>
+  const chip = (key: string, label: string, typeLabel: string) => {
+    const on = isOn(key);
+    return (
       <button
-        onClick={() => toggle(k)}
+        key={key}
+        type="button"
+        data-testid={`notify-${key}`}
+        aria-pressed={on}
+        aria-label={tr("forge.account_dashboard.notify_toggle_label", { type: typeLabel, channel: label })}
+        onClick={() => void toggle(key)}
         style={{
-          position: "relative",
-          width: 44,
-          height: 24,
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 6,
+          minHeight: 34,
+          padding: "6px 12px",
           borderRadius: 999,
-          border: "none",
+          // On is an outline with a tick, not a filled pill: ten rows of
+          // filled primary would shout, and primary fill is kept for actions.
+          border: `1px solid ${on ? t.primary : t.border}`,
+          background: "transparent",
+          color: on ? t.text : t.muted,
+          fontFamily: t.fontFamily,
+          fontSize: 13,
+          fontWeight: 600,
           cursor: "pointer",
-          background: preferences[k] ? t.primary : `${t.text}40`,
         }}
-        aria-pressed={preferences[k]}
       >
-        <span
-          style={{
-            position: "absolute",
-            top: 4,
-            left: preferences[k] ? 24 : 4,
-            width: 16,
-            height: 16,
-            borderRadius: "50%",
-            background: "#fff",
-            transition: "left 0.15s",
-          }}
-        />
+        {on ? <Check size={14} aria-hidden style={{ color: t.primary }} /> : null}
+        {label}
       </button>
-    </div>
-  );
+    );
+  };
 
   return (
-    <div style={card}>
-      <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, fontFamily: t.headingFontFamily }}>
-        {tr("forge.account_dashboard.notifications_title")}
-      </h2>
-      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-        <Row
-          k="newPosts"
-          title={tr("forge.account_dashboard.notify_new_posts_title")}
-          desc={tr("forge.account_dashboard.notify_new_posts_description")}
-        />
-        <Row
-          k="chatMessages"
-          title={tr("forge.account_dashboard.notify_chat_title")}
-          desc={tr("forge.account_dashboard.notify_chat_description")}
-        />
-      </div>
+    <div style={card} data-testid="notification-settings">
+      <PushDeviceRow />
+      {error && (
+        <p role="alert" style={{ ...alert, marginTop: 0, marginBottom: 16 }}>
+          {error}
+        </p>
+      )}
+
+      {NOTIFICATION_GROUPS.map((group) => {
+        const types = group.types.filter((entry) => data.defaults?.[entry.type]);
+        if (types.length === 0) return null;
+        return (
+          <section key={group.titleKey} style={{ marginBottom: 36 }}>
+            <h2 style={{ fontSize: 18, fontWeight: 600, margin: "0 0 8px", fontFamily: t.headingFontFamily }}>
+              {tr(group.titleKey)}
+            </h2>
+            <div style={list}>
+              {types.map((entry) => {
+                const typeLabel = tr(entry.labelKey);
+                return (
+                  <div
+                    key={entry.type}
+                    data-testid={`notify-row-${entry.type}`}
+                    style={{ ...row, padding: "14px 0", display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}
+                  >
+                    <span style={{ flex: "1 1 180px", fontWeight: 600 }}>{typeLabel}</span>
+                    <span style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
+                      {NOTIFICATION_CHANNELS.filter(({ channel }) => channelApplies(data.defaults, entry.type, channel)).map(
+                        ({ channel, labelKey }) => chip(`${entry.type}.${channel}`, tr(labelKey), typeLabel),
+                      )}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+          </section>
+        );
+      })}
+
+      {/* How often the email that is NOT urgent arrives. Direct messages,
+          mentions and reminders always email at once, which is why this
+          explains itself behind the hint rather than in a paragraph. */}
+      <section>
+        <h2
+          style={{ fontSize: 18, fontWeight: 600, margin: "0 0 12px", fontFamily: t.headingFontFamily, display: "flex", alignItems: "center", gap: 6 }}
+        >
+          {tr("forge.account_dashboard.notify_digest_title")}
+          <CallHelpHint label={tr("forge.account_dashboard.notify_digest_help_label")}>
+            {tr("forge.account_dashboard.notify_digest_help")}
+          </CallHelpHint>
+        </h2>
+        <div role="radiogroup" aria-label={tr("forge.account_dashboard.notify_digest_title")} style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
+          {DIGEST_OPTIONS.map((option) => {
+            const active = currentCadence === option.value;
+            return (
+              <button
+                key={option.value}
+                type="button"
+                role="radio"
+                aria-checked={active}
+                data-testid={`notify-digest-${option.value}`}
+                onClick={() => void chooseCadence(option.value)}
+                style={{
+                  minHeight: 38,
+                  padding: "8px 14px",
+                  borderRadius: t.cornerRadius,
+                  border: `1px solid ${active ? t.primary : t.border}`,
+                  background: active ? t.primary : "transparent",
+                  color: active ? t.textPrimary : t.text,
+                  fontFamily: t.fontFamily,
+                  fontSize: 14,
+                  fontWeight: 600,
+                  cursor: "pointer",
+                }}
+              >
+                {tr(option.labelKey)}
+              </button>
+            );
+          })}
+        </div>
+      </section>
     </div>
   );
 }