create-ailk 0.17.0 → 0.19.0

package/templates/apps/web/app/[locale]/(authed)/account/new-menu.tsx

@@ -0,0 +1,340 @@
+"use client"; // the menu, the dialog and the top-bar portal hold client state
+
+/**
+ * NewMenu — the member area's New button over the Inbox (#8233, spec
+ * docs/specs/8233-member-new-menu-the-new-spec.md D3, D5, D10; brief Layout
+ * item 3). Copied from the Admin's NewMenu idiom (apps do not import apps).
+ *
+ * Its rows are the contributed New actions the Inbox page found offered
+ * (`accountNewActions`, each already gated by its own member read). A row is
+ * a menu item, never a link: it opens that action's popup in one dialog over
+ * the Inbox. With no action offered there is no menu at all.
+ *
+ * Two triggers share the dialog: the desktop New in the page's header row
+ * (`md` up), and a compact + the frame's phone top bar holds. The frame hands
+ * the top-bar node down through `NewMenuSlotProvider` on the Inbox route
+ * only; outside a frame (a test, a story) the node is null and only the
+ * desktop trigger renders.
+ *
+ * A popup body talks back through `useNewMenuPopup()`: `close(true)` after a
+ * successful write closes the dialog and refreshes the Inbox, `open(id)`
+ * switches to another offered action. The two popups that read on open share
+ * `useOpenRead` and `NewPopupStatus`, so loading, a failed read and its retry
+ * look the same in both (D5).
+ */
+
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Icon,
+  InlineMessage,
+  Text,
+} from "@working-theory/ui/primitives";
+import { ChevronDown, Plus } from "lucide-react";
+import { useRouter } from "next/navigation";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+
+import type { NewActionErrorCode } from "./new-actions";
+
+/** One offered action, its label already translated. */
+export interface NewMenuAction {
+  id: string;
+  label: string;
+  popup: ReactNode;
+}
+
+export interface NewMenuLabels {
+  trigger: string;
+  close: string;
+}
+
+/** The strings every popup shares (D10, D11). */
+export interface NewPopupLabels {
+  loading: string;
+  loadFailed: string;
+  retry: string;
+  submitting: string;
+  optional: string;
+  errors: Record<NewActionErrorCode, string>;
+}
+
+// ── The top-bar slot ─────────────────────────────────────────────────────────
+
+const NewMenuSlotContext = createContext<HTMLElement | null>(null);
+
+/** Hands the phone top bar's trailing node to the page; `null` where the bar has none. */
+export function NewMenuSlotProvider({
+  node,
+  children,
+}: {
+  node: HTMLElement | null;
+  children: ReactNode;
+}): ReactElement {
+  return <NewMenuSlotContext.Provider value={node}>{children}</NewMenuSlotContext.Provider>;
+}
+
+export function useNewMenuSlot(): HTMLElement | null {
+  return useContext(NewMenuSlotContext);
+}
+
+// ── The popup API ────────────────────────────────────────────────────────────
+
+export interface NewMenuPopupApi {
+  /** Closes the dialog; after a successful write, also refreshes the Inbox. */
+  close(submitted: boolean): void;
+  /** Switches the dialog to another offered action. */
+  open(id: string): void;
+  /** Whether an action is offered. */
+  has(id: string): boolean;
+}
+
+const INERT_POPUP_API: NewMenuPopupApi = {
+  close: () => undefined,
+  open: () => undefined,
+  has: () => false,
+};
+
+const NewMenuPopupContext = createContext<NewMenuPopupApi>(INERT_POPUP_API);
+
+export function useNewMenuPopup(): NewMenuPopupApi {
+  return useContext(NewMenuPopupContext);
+}
+
+// ── The menu ─────────────────────────────────────────────────────────────────
+
+function ActionMenu({
+  compact,
+  actions,
+  label,
+  onPick,
+}: {
+  compact: boolean;
+  actions: readonly NewMenuAction[];
+  label: string;
+  onPick: (id: string, trigger: HTMLElement | null) => void;
+}): ReactElement {
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  // A pick hands focus to the dialog, so the closing menu must not take it back.
+  const picked = useRef(false);
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        {compact ? (
+          <Button
+            ref={triggerRef}
+            variant="ghost"
+            size="big"
+            iconOnly
+            aria-label={label}
+            className="size-11 rounded-full"
+            data-testid="account-new-menu-trigger-compact"
+          >
+            <Icon icon={Plus} size="md" decorative />
+          </Button>
+        ) : (
+          <Button
+            ref={triggerRef}
+            variant="default"
+            className="hidden gap-1 md:inline-flex"
+            data-testid="account-new-menu-trigger"
+          >
+            <Icon icon={Plus} size="sm" decorative />
+            {label}
+            <Icon icon={ChevronDown} size="sm" decorative />
+          </Button>
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        className="min-w-56"
+        onCloseAutoFocus={(event) => {
+          if (picked.current) event.preventDefault();
+          picked.current = false;
+        }}
+        data-testid="account-new-menu-content"
+      >
+        {actions.map((action) => (
+          <DropdownMenuItem
+            key={action.id}
+            onSelect={() => {
+              picked.current = true;
+              onPick(action.id, triggerRef.current);
+            }}
+            data-testid={`account-new-menu-item-${action.id}`}
+          >
+            {action.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export function NewMenu({
+  actions,
+  labels,
+}: {
+  actions: readonly NewMenuAction[];
+  labels: NewMenuLabels;
+}): ReactElement | null {
+  const router = useRouter();
+  const slot = useNewMenuSlot();
+  const [openId, setOpenId] = useState<string | null>(null);
+  // The trigger that opened the dialog gets focus back when it closes.
+  const returnFocus = useRef<HTMLElement | null>(null);
+
+  const api = useMemo<NewMenuPopupApi>(() => {
+    const has = (id: string): boolean => actions.some((action) => action.id === id);
+    return {
+      close(submitted) {
+        setOpenId(null);
+        if (submitted) router.refresh();
+      },
+      open(id) {
+        if (has(id)) setOpenId(id);
+      },
+      has,
+    };
+  }, [actions, router]);
+
+  if (actions.length === 0) return null;
+
+  const current = actions.find((action) => action.id === openId) ?? null;
+  const onPick = (id: string, trigger: HTMLElement | null): void => {
+    returnFocus.current = trigger;
+    setOpenId(id);
+  };
+
+  return (
+    <>
+      <ActionMenu compact={false} actions={actions} label={labels.trigger} onPick={onPick} />
+      {slot
+        ? createPortal(
+            <ActionMenu compact actions={actions} label={labels.trigger} onPick={onPick} />,
+            slot,
+          )
+        : null}
+      <Dialog
+        open={current !== null}
+        onOpenChange={(open) => {
+          if (!open) setOpenId(null);
+        }}
+      >
+        {current ? (
+          <DialogContent
+            closeLabel={labels.close}
+            aria-describedby={undefined}
+            onCloseAutoFocus={(event) => {
+              const trigger = returnFocus.current;
+              if (trigger?.isConnected) {
+                event.preventDefault();
+                trigger.focus();
+              }
+            }}
+            data-testid="account-new-popup"
+          >
+            <DialogHeader>
+              <DialogTitle>{current.label}</DialogTitle>
+            </DialogHeader>
+            <NewMenuPopupContext.Provider value={api}>
+              {/* Keyed, so switching actions mounts a fresh popup that reads anew. */}
+              <div key={current.id} className="mt-block-tight">
+                {current.popup}
+              </div>
+            </NewMenuPopupContext.Provider>
+          </DialogContent>
+        ) : null}
+      </Dialog>
+    </>
+  );
+}
+
+// ── Shared popup parts (D5, D10) ─────────────────────────────────────────────
+
+export type OpenRead<T> = "loading" | { kind: "error" } | ({ kind: "ok" } & T);
+
+/**
+ * Reads a popup's data when it mounts — the dialog mounts a popup only while
+ * it is open, so this is a read per open (D5) — and returns a retry.
+ */
+export function useOpenRead<T>(
+  read: () => Promise<{ kind: "error" } | ({ kind: "ok" } & T)>,
+): [OpenRead<T>, () => void] {
+  const [state, setState] = useState<OpenRead<T>>("loading");
+  // Only the newest read lands: a retry never loses to the read it replaced.
+  const latest = useRef(0);
+  const load = useCallback(() => {
+    const readId = ++latest.current;
+    const land = (next: OpenRead<T>): void => {
+      if (readId === latest.current) setState(next);
+    };
+    setState("loading");
+    read().then(land, () => land({ kind: "error" }));
+  }, [read]);
+  useEffect(load, [load]);
+  return [state, load];
+}
+
+/** A popup's loading line, or its failed-read line with Try again. */
+export function NewPopupStatus({
+  failed,
+  labels,
+  onRetry,
+}: {
+  failed: boolean;
+  labels: NewPopupLabels;
+  onRetry: () => void;
+}): ReactElement {
+  if (!failed) {
+    return (
+      <div role="status" data-testid="new-popup-loading">
+        <Text as="p" variant="body-sm" tone="muted">
+          {labels.loading}
+        </Text>
+      </div>
+    );
+  }
+  return (
+    <div className="flex flex-wrap items-center gap-3" data-testid="new-popup-load-failed">
+      <InlineMessage variant="error" className="text-body-sm">
+        {labels.loadFailed}
+      </InlineMessage>
+      <Button variant="outline" onClick={onRetry} data-testid="new-popup-retry">
+        {labels.retry}
+      </Button>
+    </div>
+  );
+}
+
+/** A refused write's plain message; the popup stays open with every value kept. */
+export function NewPopupRefusal({
+  code,
+  labels,
+}: {
+  code: NewActionErrorCode;
+  labels: NewPopupLabels;
+}): ReactElement {
+  return (
+    <InlineMessage variant="error" data-testid="new-popup-error">
+      {labels.errors[code]}
+    </InlineMessage>
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/account/new-popups.tsx

@@ -0,0 +1,107 @@
+/**
+ * new-popups.tsx — the New menu's actions with their popups bound (#8233 D1,
+ * D2, D6–D8).
+ *
+ * `lib/account-config.ts` carries each action's server half — its id, its
+ * label and the member read that decides whether it is offered — and this
+ * file adds the popup each one opens, composing the `AccountNewAction`
+ * contract (`@working-theory/templates/account`) the Inbox page consumes.
+ *
+ * The split is create-ailk's spoke closure (`spokeExclusions`,
+ * `packages/create-ailk/src/topology.ts`): a spoke without sign-in drops the
+ * whole `(authed)` group, these popups included, and every file that imports
+ * one of them goes too — but `account-config.ts` is a shared lib file every
+ * spoke keeps, so it may import nothing under `(authed)` (the closure guard
+ * refuses the scaffold, naming it). This file sits inside the group: it goes
+ * with the popups on such a spoke, and stays with them on a hub-sign-in one
+ * and on a single site, where the page still renders all three.
+ *
+ * A popup receives only its locale and strings built through `ctx.t` — never
+ * `ctx`, its init, its user or `t` itself — so no credential or email reaches
+ * the client payload (SEC-8233-1). `popups` is keyed on the config's own id
+ * union, so a read added there without a popup here is a type error, never a
+ * menu row that opens nothing.
+ */
+
+import type {
+  AccountContext,
+  AccountNewAction,
+  AccountTranslate,
+} from "@working-theory/templates/account";
+import type { ReactNode } from "react";
+
+import {
+  accountNewActions,
+  type AccountNewActionId,
+} from "../../../../lib/account-config";
+
+import { RequestQuote } from "./components/request-quote";
+import { ScheduleService } from "./components/schedule-service";
+import { SendMessage } from "./components/send-message";
+import type { NewPopupLabels } from "./new-menu";
+
+/** The strings every popup shares — plain strings, so nothing else crosses to the client. */
+function popupLabels(t: AccountTranslate): NewPopupLabels {
+  return {
+    loading: t("new.loading"),
+    loadFailed: t("new.loadFailed"),
+    retry: t("new.retry"),
+    submitting: t("new.submitting"),
+    optional: t("new.optional"),
+    errors: {
+      link_not_https: t("new.errors.linkNotHttps"),
+      answers_invalid: t("new.errors.answersInvalid"),
+      request_form_off: t("new.errors.requestFormOff"),
+      meeting_type_not_offered: t("new.errors.meetingTypeNotOffered"),
+      slot_unavailable: t("new.errors.slotUnavailable"),
+      too_many_requests: t("new.errors.tooManyRequests"),
+      invalid_input: t("new.errors.invalidInput"),
+      failed: t("new.errors.failed"),
+    },
+  };
+}
+
+/** The popup each action opens, keyed on the config's ids (D6–D8). */
+const popups = {
+  "schedule-service": ({ locale, t }) => (
+    <ScheduleService
+      locale={locale}
+      labels={{
+        ...popupLabels(t),
+        service: t("new.schedule.service"),
+        // The popup fills each type's own minutes into the literal placeholder.
+        duration: t("new.schedule.duration", { minutes: "{minutes}" }),
+        time: t("new.schedule.time"),
+        notes: t("new.schedule.notes"),
+        submit: t("new.schedule.submit"),
+        none: t("new.schedule.none"),
+        suggest: t("new.schedule.suggest"),
+        noSlots: t("new.schedule.noSlots"),
+      }}
+    />
+  ),
+  "request-quote": ({ locale, t }) => (
+    <RequestQuote locale={locale} labels={{ ...popupLabels(t), submit: t("new.quote.submit") }} />
+  ),
+  "send-message": ({ locale, t }) => (
+    <SendMessage
+      locale={locale}
+      labels={{
+        ...popupLabels(t),
+        subject: t("new.message.subject"),
+        body: t("new.message.body"),
+        link: t("new.message.link"),
+        linkHelp: t("new.message.linkHelp"),
+        submit: t("new.message.submit"),
+      }}
+    />
+  ),
+} satisfies Record<AccountNewActionId, (ctx: AccountContext) => ReactNode>;
+
+/** The New actions in menu order (D2), each with its popup — what the Inbox page offers. */
+export const newActions: readonly AccountNewAction[] = accountNewActions.map(
+  (read) => ({
+    ...read,
+    renderPopup: popups[read.id],
+  }),
+);

package/templates/apps/web/app/[locale]/(authed)/account/notifications/page.tsx

@@ -0,0 +1,57 @@
+/**
+ * /[locale]/account/notifications — User settings › Notifications (#8339
+ * D8, NEW).
+ *
+ * RSC, inside the account layout's SignedInShell with the rail visible, in
+ * the member's four-tab settings frame (D7). Holds the former Privacy
+ * section's cookie-settings link, moved here verbatim from General (#8339
+ * C6) — for now; notification preferences are a later unit's scope.
+ */
+
+import { AccountSettingsFrame, AccountSettingsPane } from "@working-theory/templates/account";
+import { localeHref } from "@working-theory/ui";
+import { Link } from "@working-theory/ui/primitives";
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement } from "react";
+
+import { accountSession } from "../account-data";
+import { memberSettingsFrame, type Translate } from "../settings-frame";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "account" });
+  return { title: t("settings.notifications.title"), description: t("settings.privacy.lead") };
+}
+
+export default async function AccountNotificationsPage({ params }: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "account" });
+  const session = await accountSession(locale);
+  const frame = memberSettingsFrame(locale, t as unknown as Translate, "notifications");
+  const name = session?.ctx.user.name || session?.ctx.user.email || "";
+
+  return (
+    <AccountSettingsFrame {...frame} name={name}>
+      <AccountSettingsPane
+        id="account-settings-notifications"
+        title={t("settings.notifications.title")}
+        lead={t("settings.privacy.lead")}
+      >
+        <div>
+          <Link
+            href={localeHref(locale, "/privacy#cookie-settings")}
+            className="inline-flex min-h-6 items-center"
+            data-testid="account-cookie-settings"
+          >
+            {t("settings.privacy.cookies")}
+          </Link>
+        </div>
+      </AccountSettingsPane>
+    </AccountSettingsFrame>
+  );
+}

package/templates/apps/web/app/[locale]/(authed)/account/page.tsx

@@ -1,19 +1,18 @@
 /**
  * /[locale]/account — the base account area's Inbox (#7430, spec 7423 U4 ·
- * D6a, D9, D12; DESIGN.md §5.4).
+ * D6a, D9, D12; #8231 D3; DESIGN.md §5.4).
  *
  * RSC, rendered inside the account layout's SignedInShell. One filtered
- * list: the D6a tabs Recents · Suggested · Scheduled · All, each with a
- * count, Recents selected, through the shared `InboxList`
- * (`@working-theory/templates/account`):
+ * list: the tabs All · Purchases · Scheduled, each with a count, All
+ * selected, through the shared `InboxList` (`@working-theory/templates/account`):
  *
- *   - Recents — the kinds whose section is `updates` (the base `result` and
- *     `purchase`), newest first.
- *   - Suggested — nothing in the base area; no contribution section maps
- *     here yet (a module that proposes things fills it).
- *   - Scheduled — the kinds whose section is `upcoming` (the old Upcoming);
- *     none in the base area.
- *   - All — every row above, newest first.
+ *   - All — every loaded row, newest first. The kinds in `updates` or
+ *     `needs-you` (`result`, `piece`, `message`) show here only.
+ *   - Purchases — the kinds whose section is `purchases` (the `purchase`
+ *     kind, and any a module adds), newest first.
+ *   - Scheduled — the kinds whose section is `upcoming` (`appointment`):
+ *     first the items still upcoming, soonest first (no time last), then the
+ *     rest, newest first. Each kind's own read decides which is upcoming.
  *
  * What needs the person is never an Inbox row: `email-unverified`,
  * `payment-due` and "Add your name" are For-you items (D9 as amended). From
@@ -33,16 +32,24 @@
  * D12 — any read that fails (a kind or a For-you source) renders an error
  * row with Retry above the list; the list then holds what DID load, never a
  * silently empty Inbox.
+ *
+ * #8233 D4 — New sits in the h1's header row (and, below `md`, in the
+ * frame's phone top bar): its rows are `new-popups.tsx`'s `newActions` — the
+ * `accountNewActions` of `lib/account-config.ts` with their popups bound —
+ * whose `available` read resolved `true`, each opening its popup over the
+ * Inbox. None offered (a Free build) → no New at all. A read that rejected
+ * drops its row and shows the error row too — a failed read is never silent.
  */
 
 import {
   ForYouPanel,
   InboxList,
   PhoneTabPanel,
+  type AccountContext,
   type InboxListRow,
 } from "@working-theory/templates/account";
 import { Heading, Text } from "@working-theory/ui/primitives";
-import { ClipboardList, Receipt, type LucideProps } from "lucide-react";
+import { CalendarClock, ClipboardList, Receipt, type LucideProps } from "lucide-react";
 import type { Metadata } from "next";
 import { getTranslations } from "next-intl/server";
 import type { ComponentType, ReactElement } from "react";
@@ -52,10 +59,13 @@ import {
   inboxItemHref,
   loadForYou,
   loadInboxItems,
+  logReadFailure,
   type LoadedInboxItem,
 } from "./account-data";
 import { ErrorRow } from "./error-row";
 import { ACCOUNT_PERSIST_KEY, forYouLabels } from "./for-you-labels";
+import { NewMenu, type NewMenuAction } from "./new-menu";
+import { newActions } from "./new-popups";
 
 interface Props {
   params: Promise<{ locale: string }>;
@@ -71,8 +81,37 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 const KIND_ICON: Record<string, ComponentType<LucideProps>> = {
   result: ClipboardList,
   purchase: Receipt,
+  appointment: CalendarClock,
 };
 
+/** Soonest first; an item with no time sorts last. */
+function soonestFirst(a: LoadedInboxItem, b: LoadedInboxItem): number {
+  if (a.item.at === undefined) return b.item.at === undefined ? 0 : 1;
+  if (b.item.at === undefined) return -1;
+  return Date.parse(a.item.at) - Date.parse(b.item.at);
+}
+
+/** The New actions this caller is offered; a rejected read drops its row and sets `failed`. */
+async function loadNewActions(
+  ctx: AccountContext,
+): Promise<{ actions: NewMenuAction[]; failed: boolean }> {
+  const settled = await Promise.allSettled(newActions.map((action) => action.available(ctx)));
+  const actions: NewMenuAction[] = [];
+  settled.forEach((result, i) => {
+    const action = newActions[i]!;
+    if (result.status === "rejected") logReadFailure(`new:${action.id}`, result.reason);
+    else if (result.value)
+      actions.push({ id: action.id, label: ctx.t(action.label), popup: action.renderPopup(ctx) });
+  });
+  return { actions, failed: settled.some((result) => result.status === "rejected") };
+}
+
+/** Upcoming items first, soonest first; then the rest, as loaded (newest first). */
+function scheduledOrder(rows: readonly LoadedInboxItem[]): LoadedInboxItem[] {
+  const upcoming = rows.filter(({ item }) => item.upcoming === true).sort(soonestFirst);
+  return [...upcoming, ...rows.filter(({ item }) => item.upcoming !== true)];
+}
+
 export default async function AccountInboxPage({ params }: Props): Promise<ReactElement> {
   const { locale } = await params;
   const t = await getTranslations({ locale, namespace: "account" });
@@ -80,9 +119,17 @@ export default async function AccountInboxPage({ params }: Props): Promise<React
 
   // The contract's translator, for keys that are data (a kind's `label`).
   const translate = session?.ctx.t ?? ((key: string): string => key);
-  const [inbox, forYou] = session
-    ? await Promise.all([loadInboxItems(session.ctx), loadForYou(locale)])
-    : [{ items: [], failed: false }, { items: [], failed: false, now: "" }];
+  const [inbox, forYou, newMenu] = session
+    ? await Promise.all([
+        loadInboxItems(session.ctx),
+        loadForYou(locale),
+        loadNewActions(session.ctx),
+      ])
+    : [
+        { items: [], failed: false },
+        { items: [], failed: false, now: "" },
+        { actions: [], failed: false },
+      ];
 
   const dateFormat = new Intl.DateTimeFormat(locale, {
     month: "short",
@@ -101,19 +148,27 @@ export default async function AccountInboxPage({ params }: Props): Promise<React
     };
   };
 
-  const recents = inbox.items.filter(({ kind }) => kind.section === "updates").map(toRow);
-  const scheduled = inbox.items.filter(({ kind }) => kind.section === "upcoming").map(toRow);
   const all = inbox.items.map(toRow);
-  const failed = inbox.failed || forYou.failed;
+  const purchases = inbox.items.filter(({ kind }) => kind.section === "purchases").map(toRow);
+  const scheduled = scheduledOrder(
+    inbox.items.filter(({ kind }) => kind.section === "upcoming"),
+  ).map(toRow);
+  const failed = inbox.failed || forYou.failed || newMenu.failed;
 
   return (
     // The phone's top bar already clears the canvas — no top inset there.
     <div className="max-w-3xl py-8 max-md:pt-0" data-testid="account-inbox">
       {/* The page's one h1, on both phone tabs; visually hidden on the phone,
-          which has no large title (§5.15). */}
-      <Heading level={1} visual={2} className="max-md:sr-only">
-        {t("inbox.title")}
-      </Heading>
+          which has no large title (§5.15). New sits beside it (#8233 D4). */}
+      <div className="flex items-center justify-between gap-2">
+        <Heading level={1} visual={2} className="max-md:sr-only">
+          {t("inbox.title")}
+        </Heading>
+        <NewMenu
+          actions={newMenu.actions}
+          labels={{ trigger: t("new.trigger"), close: t("new.close") }}
+        />
+      </div>
       <PhoneTabPanel tabs={["inbox"]} desktop data-testid="inbox-panel-inbox">
         <Text as="p" variant="body-sm" tone="muted" className="mt-block-tight hidden md:block">
           {t("inbox.lead")}
@@ -129,17 +184,21 @@ export default async function AccountInboxPage({ params }: Props): Promise<React
 
         <InboxList
           tabs={[
-            { id: "recents", label: t("inbox.tabs.recents"), count: recents.length, rows: recents },
-            { id: "suggested", label: t("inbox.tabs.suggested"), count: 0, rows: [] },
+            { id: "all", label: t("inbox.tabs.all"), count: all.length, rows: all },
+            {
+              id: "purchases",
+              label: t("inbox.tabs.purchases"),
+              count: purchases.length,
+              rows: purchases,
+            },
             {
               id: "scheduled",
               label: t("inbox.tabs.scheduled"),
               count: scheduled.length,
               rows: scheduled,
             },
-            { id: "all", label: t("inbox.tabs.all"), count: all.length, rows: all },
           ]}
-          defaultTab="recents"
+          defaultTab="all"
           {...(failed ? {} : { emptyLine: t("inbox.empty") })}
         />
       </PhoneTabPanel>