@remit/web-client 0.0.143 → 0.0.144

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.143",
+  "version": "0.0.144",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/compose/ComposeProvider.tsx

@@ -1,4 +1,5 @@
 import {
+	configOperationsGetConfigOptions,
 	outboxDetailOperationsGetOutboxMessageOptions,
 	outboxOperationsListOutboxMessagesQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
@@ -7,6 +8,7 @@ import type {
 	RemitImapDescribeMessageResponse,
 } from "@remit/api-http-client/types.gen.ts";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useLocation, useNavigate } from "@tanstack/react-router";
 import {
 	createContext,
 	useCallback,
@@ -16,6 +18,9 @@ import {
 	useRef,
 	useState,
 } from "react";
+import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
+import { useComposeTarget } from "@/hooks/useComposeTargetMailbox";
+import { hostsComposeSurface } from "@/lib/compose-routes";
 export type ComposeMode = "reply" | "reply_all" | "forward" | "new";
 
 export interface ComposeState {
@@ -59,6 +64,19 @@ export const ComposeProvider = ({
 	>();
 	const startedAtRef = useRef(0);
 	const queryClient = useQueryClient();
+	const navigate = useNavigate();
+	const location = useLocation();
+	const { pushError } = useErrorBanners();
+	// Compose is a mail action, so its target only has to be known under `/mail`.
+	// Resolving it from the root otherwise costs `/settings` and `/onboarding` a
+	// config fetch plus a folder list per account for a button they never show.
+	const underMail = location.pathname.startsWith("/mail");
+	const { data: config } = useQuery({
+		...configOperationsGetConfigOptions(),
+		staleTime: Infinity,
+		enabled: underMail,
+	});
+	const target = useComposeTarget(underMail ? (config?.accounts ?? []) : []);
 
 	const { data: polledMessage } = useQuery({
 		...outboxDetailOperationsGetOutboxMessageOptions({
@@ -91,14 +109,72 @@ export const ComposeProvider = ({
 		}
 	}, [polledMessage, pollingMessageId, queryClient]);
 
-	const openCompose = useCallback((params: Omit<ComposeState, "isOpen">) => {
-		setState({ ...params, isOpen: true });
-	}, []);
+	// Opening compose also puts the surface on screen: only a mailbox route
+	// mounts `FullCompose`, and only with no thread in the pane it takes over.
+	const openCompose = useCallback(
+		(params: Omit<ComposeState, "isOpen">) => {
+			const search = location.search as Record<string, unknown>;
+			const showsThread = Boolean(
+				search.selectedMessageId ?? search.selectedThreadId,
+			);
+			if (!hostsComposeSurface(location.pathname)) {
+				if (target.status === "loading") {
+					pushError({
+						severity: "info",
+						title: "Not ready to write yet",
+						detail:
+							"Your folders are still loading. Try Compose again in a moment.",
+					});
+					return;
+				}
+				if (target.status === "none") {
+					pushError({
+						title: "Nowhere to write from",
+						detail:
+							"No account has a folder to open the message in. Check the account's folders in Settings, then try again.",
+					});
+					return;
+				}
+				setState({ ...params, isOpen: true });
+				navigate({
+					to: "/mail/$mailboxId",
+					params: { mailboxId: target.mailboxId },
+				});
+				return;
+			}
+			setState({ ...params, isOpen: true });
+			if (!showsThread) return;
+			// A push, so Back reopens the message.
+			navigate({
+				to: ".",
+				search: (prev: Record<string, unknown>) => ({
+					...prev,
+					selectedMessageId: undefined,
+					selectedThreadId: undefined,
+				}),
+			});
+		},
+		[navigate, location.pathname, location.search, target, pushError],
+	);
 
 	const closeCompose = useCallback(() => {
 		setState(INITIAL_STATE);
 	}, []);
 
+	// Leaving the routes that mount the surface closes it, so nothing is left
+	// open behind a view that cannot show it — which is how it used to reappear
+	// unannounced on the next mailbox. Only a *change* of route counts: opening
+	// compose navigates, and on the frame before that navigation lands the
+	// pathname is still the one compose was started from.
+	const previousPathnameRef = useRef(location.pathname);
+	useEffect(() => {
+		const previous = previousPathnameRef.current;
+		previousPathnameRef.current = location.pathname;
+		if (location.pathname === previous) return;
+		if (hostsComposeSurface(location.pathname)) return;
+		setState((current) => (current.isOpen ? INITIAL_STATE : current));
+	}, [location.pathname]);
+
 	const setOutboxMessageId = useCallback((id: string) => {
 		setState((prev) => ({ ...prev, outboxMessageId: id }));
 	}, []);

package/src/components/compose/compose-clears-open-thread.render.test.ts

@@ -0,0 +1,302 @@
+/**
+ * Issue #703: compose state opened with nothing mounting the surface, so the
+ * button looked dead and the window turned up on the next navigation.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { createElement, useEffect, useState } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { type HttpMock, mockFetch } from "../../test-support/http";
+import { ComposeProvider, useCompose } from "./ComposeProvider";
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+let releaseMailboxes: (() => void) | undefined;
+
+afterEach(() => {
+	releaseMailboxes?.();
+	releaseMailboxes = undefined;
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+const ACCOUNT_ID = "acc-1";
+const INBOX_ID = "mbx-inbox";
+
+const ComposeProbe = () => {
+	const { state, openCompose } = useCompose();
+	return createElement(
+		"button",
+		{
+			type: "button",
+			"data-open": String(state.isOpen),
+			onClick: () => openCompose({ mode: "new" }),
+		},
+		"Compose",
+	);
+};
+
+// The provider sits at the root the way `__root.tsx` mounts it, so navigation
+// reaches it the way it does in the app.
+const RootLayout = () =>
+	createElement(
+		ComposeProvider,
+		null,
+		createElement(ComposeProbe),
+		createElement(Outlet),
+	);
+
+const routerAt = (href: string, layout = RootLayout): AnyRouter => {
+	const rootRoute = createRootRoute({ component: layout });
+	const routeTree = rootRoute.addChildren([
+		createRoute({
+			getParentRoute: () => rootRoute,
+			path: "/mail/outbox",
+			validateSearch: (search: Record<string, unknown>) => search,
+			component: () => null,
+		}),
+		createRoute({
+			getParentRoute: () => rootRoute,
+			path: "/mail/$mailboxId",
+			validateSearch: (search: Record<string, unknown>) => search,
+			component: () => null,
+		}),
+		createRoute({
+			getParentRoute: () => rootRoute,
+			path: "/settings",
+			component: () => null,
+		}),
+	]);
+	return createRouter({
+		routeTree,
+		history: createMemoryHistory({ initialEntries: [href] }),
+	}) as unknown as AnyRouter;
+};
+
+interface MountOptions {
+	/** Hold the folder list open, so no target has resolved at press time. */
+	holdMailboxes?: boolean;
+	/** Answer with an account that has no folders at all. */
+	noMailboxes?: boolean;
+}
+
+const mount = async (
+	router: AnyRouter,
+	options: MountOptions = {},
+): Promise<DomHarness> => {
+	const held = options.holdMailboxes
+		? new Promise<void>((resolve) => {
+				releaseMailboxes = resolve;
+			})
+		: undefined;
+
+	http = mockFetch(async (call) => {
+		if (call.path.endsWith("/config")) {
+			return {
+				accounts: [
+					{
+						accountId: ACCOUNT_ID,
+						email: "me@example.com",
+						folderAppointments: [{ role: "Inbox", mailboxId: INBOX_ID }],
+					},
+				],
+			};
+		}
+		if (call.path.endsWith("/mailboxes")) {
+			if (held) await held;
+			if (options.noMailboxes) return { items: [] };
+			return { items: [{ mailboxId: INBOX_ID, fullPath: "INBOX" }] };
+		}
+		return {};
+	});
+
+	const created = createDomHarness();
+	harness = created;
+	// Resolve the first match before mounting: `RouterProvider` renders its
+	// pending state until the router has loaded, and nothing here waits for it.
+	await router.load();
+	created.renderApp(createElement(RouterProvider, { router }));
+	await created.flush();
+	await created.wait(20);
+	return created;
+};
+
+const press = async (mounted: DomHarness): Promise<HTMLElement> => {
+	const button = mounted.byText("button", "Compose");
+	mounted.click(button);
+	await mounted.flush();
+	await mounted.wait(20);
+	return button;
+};
+
+describe("opening compose over an open message (#703)", () => {
+	it("drops the selected message so the pane can render the surface", async () => {
+		const router = routerAt(
+			`/mail/${INBOX_ID}?selectedMessageId=msg-1&selectedThreadId=th-1`,
+		);
+		const mounted = await mount(router);
+
+		const button = mounted.byText("button", "Compose");
+		assert.equal(button.getAttribute("data-open"), "false");
+
+		await press(mounted);
+
+		assert.equal(button.getAttribute("data-open"), "true");
+		assert.equal(router.history.location.pathname, `/mail/${INBOX_ID}`);
+		const search = router.history.location.search;
+		assert.equal(search.includes("selectedMessageId"), false);
+		assert.equal(search.includes("selectedThreadId"), false);
+	});
+
+	it("keeps the rest of the query, so the search the user typed survives", async () => {
+		const router = routerAt(
+			`/mail/${INBOX_ID}?q=invoice&selectedMessageId=msg-1`,
+		);
+		const mounted = await mount(router);
+
+		await press(mounted);
+
+		const search = router.history.location.search;
+		assert.equal(search.includes("selectedMessageId"), false);
+		assert.match(search, /q=invoice/);
+	});
+
+	it("leaves the message one Back away rather than erasing it", async () => {
+		const router = routerAt(`/mail/${INBOX_ID}?selectedMessageId=msg-1`);
+		const mounted = await mount(router);
+
+		await press(mounted);
+		router.history.back();
+		await mounted.flush();
+
+		assert.match(router.history.location.search, /selectedMessageId=msg-1/);
+	});
+
+	it("adds no history entry when the pane had nothing open", async () => {
+		const router = routerAt(`/mail/${INBOX_ID}`);
+		const mounted = await mount(router);
+		const entries = router.history.length;
+
+		await press(mounted);
+
+		assert.equal(router.history.length, entries);
+	});
+
+	it("carries a compose started off the outbox to a route that mounts it", async () => {
+		const router = routerAt("/mail/outbox");
+		const mounted = await mount(router);
+
+		const button = await press(mounted);
+
+		assert.equal(button.getAttribute("data-open"), "true");
+		assert.equal(router.history.location.pathname, `/mail/${INBOX_ID}`);
+	});
+});
+
+// Walking off the routes that mount the surface closes it. That rule reads the
+// live location, which this harness does not advance — `RouterProvider` here
+// serves its first match and stays there — so it is pinned in the e2e suite
+// (`compose-over-open-message.spec.ts`) instead. What is checked here is the
+// half that would break it: opening compose navigates, and the surface has to
+// survive its own navigation.
+describe("compose survives the navigation that opens it (#703)", () => {
+	it("stays open when the press carried the user to another route", async () => {
+		const router = routerAt("/mail/outbox");
+		const mounted = await mount(router);
+
+		const button = await press(mounted);
+
+		assert.equal(router.history.location.pathname, `/mail/${INBOX_ID}`);
+		assert.equal(button.getAttribute("data-open"), "true");
+	});
+});
+
+describe("the open call is stable", () => {
+	// A fresh `openCompose` on every render is a loop, not a nuisance: callers
+	// hold it in dependency arrays, and one of them opens compose from an effect.
+	it("hands back the same function across a re-render", async () => {
+		const identities = new Set<unknown>();
+		const CountingProbe = () => {
+			const { openCompose } = useCompose();
+			const [bumped, setBumped] = useState(0);
+			useEffect(() => {
+				identities.add(openCompose);
+			}, [openCompose]);
+			return createElement(
+				"button",
+				{ type: "button", onClick: () => setBumped(bumped + 1) },
+				`Bump ${bumped}`,
+			);
+		};
+		const CountingLayout = () =>
+			createElement(
+				ComposeProvider,
+				null,
+				createElement(CountingProbe),
+				createElement(Outlet),
+			);
+
+		const mounted = await mount(routerAt(`/mail/${INBOX_ID}`, CountingLayout));
+		// The target legitimately settles as config and the folder list land. What
+		// must not happen is another identity after that, on a render that has
+		// nothing to do with compose.
+		const settled = identities.size;
+
+		mounted.click(mounted.byText("button", "Bump"));
+		await mounted.flush();
+		await mounted.wait(20);
+
+		assert.equal(mounted.byText("button", "Bump").textContent, "Bump 1");
+		assert.equal(identities.size, settled);
+	});
+});
+
+describe("a compose with nowhere to land says so", () => {
+	it("opens nothing and reports it while the folder list is in flight", async () => {
+		const router = routerAt("/mail/outbox");
+		const mounted = await mount(router, { holdMailboxes: true });
+
+		const button = await press(mounted);
+
+		assert.equal(button.getAttribute("data-open"), "false");
+		assert.equal(router.history.location.pathname, "/mail/outbox");
+		assert.match(mounted.text(), /Not ready to write yet/);
+	});
+
+	it("names the fix when no account has a folder", async () => {
+		const router = routerAt("/mail/outbox");
+		const mounted = await mount(router, { noMailboxes: true });
+
+		const button = await press(mounted);
+
+		assert.equal(button.getAttribute("data-open"), "false");
+		assert.match(mounted.text(), /Nowhere to write from/);
+		assert.match(mounted.text(), /Settings/);
+	});
+
+	it("asks the API for nothing off the mail routes", async () => {
+		const router = routerAt("/settings");
+		await mount(router);
+
+		assert.deepEqual(
+			(http?.calls ?? []).map((call) => call.path),
+			[],
+		);
+	});
+});

package/src/components/compose/compose-send-stops-autosave.render.test.ts

@@ -29,6 +29,14 @@ import type {
 	RemitImapAccountResponse,
 	RemitImapDescribeMessageResponse,
 } from "@remit/api-http-client/types.gen.ts";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	RouterContextProvider,
+} from "@tanstack/react-router";
 import { createElement, useEffect } from "react";
 import { createDomHarness, type DomHarness } from "../../test-support/dom";
 import { type HttpMock, httpError, mockFetch } from "../../test-support/http";
@@ -128,6 +136,23 @@ interface MountOptions {
 	failPatch?: boolean;
 }
 
+// Opening compose closes whatever the reading pane had open, so the provider
+// navigates (#703) and needs a router under it.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+const rootRoute = createRootRoute();
+const mailboxRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: "/mail/$mailboxId",
+	validateSearch: (search: Record<string, unknown>) => search,
+});
+
+const testRouter = (): AnyRouter =>
+	createRouter({
+		routeTree: rootRoute.addChildren([mailboxRoute]),
+		history: createMemoryHistory({ initialEntries: ["/mail/mbx-1"] }),
+	}) as unknown as AnyRouter;
+
 const mount = async (
 	options: MountOptions = {},
 ): Promise<{ releasePatch: () => void }> => {
@@ -167,11 +192,15 @@ const mount = async (
 
 	harness = createDomHarness();
 	harness.renderApp(
-		createElement(
-			ComposeProvider,
-			null,
-			createElement(Opened, { outboxMessageId: options.outboxMessageId }),
-		),
+		createElement(RouterContextProvider, {
+			router: testRouter(),
+			// biome-ignore lint/correctness/noChildrenProp: RouterContextProvider types `children` as a required prop, which createElement's rest-argument form does not satisfy
+			children: createElement(
+				ComposeProvider,
+				null,
+				createElement(Opened, { outboxMessageId: options.outboxMessageId }),
+			),
+		}),
 	);
 	await harness.flush();
 	await harness.wait(50);

package/src/components/layout/ComposeFab.tsx

@@ -1,21 +1,7 @@
-import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
 import { useLocation } from "@tanstack/react-router";
 import { Pencil } from "lucide-react";
+import { useCallback } from "react";
 import { useCompose } from "@/components/compose/ComposeProvider";
-import { useGlobalCompose } from "@/hooks/useComposeTarget";
-
-/**
- * Primary mobile surfaces where the FAB belongs: anywhere under
- * `/mail` or under `/settings`. The bare `/` route (sign-in / OAuth
- * landing) is intentionally excluded — compose has no useful target
- * before the user has an account.
- */
-const isOnPrimaryMobileRoute = (pathname: string): boolean =>
-	pathname.startsWith("/mail") || pathname.startsWith("/settings");
-
-interface ComposeFabProps {
-	accounts: RemitImapAccountResponse[];
-}
 
 /**
  * Floating Action Button for composing a new message. Mobile-only.
@@ -26,32 +12,21 @@ interface ComposeFabProps {
  *     `/mail` shell also stops mounting the FAB above that width; the
  *     `lg:hidden` class covers the pre-hydration frame.
  *   - The compose surface is already open.
- *   - The user is reading a thread (`?selectedMessageId=…`) — the
- *     conversation's Reply/Forward action bar covers that workflow.
- *   - The user is not on a primary mobile route (`/mail` or
- *     `/settings`).
- *
- * The tap itself is `useGlobalCompose`, shared with the desktop top bar:
- * it opens compose in place on routes that mount `FullCompose` and
- * otherwise carries the user to a real mailbox that does. Compose state
- * survives that transition because `ComposeProvider` lives in
- * `__root.tsx`.
+ *   - The user is reading a thread (`?selectedMessageId=…`) — the single
+ *     pane is the conversation, and its reply bar is under this corner.
+ *   - The user is off `/mail`, which is every route with no mail in it.
  */
-export const ComposeFab = ({ accounts }: ComposeFabProps) => {
-	const { state } = useCompose();
+export const ComposeFab = () => {
+	const { state, openCompose } = useCompose();
 	const location = useLocation();
-	const compose = useGlobalCompose(accounts);
+	const compose = useCallback(() => {
+		openCompose({ mode: "new" });
+	}, [openCompose]);
 
 	const search = location.search as Record<string, unknown> | undefined;
-	const isReadingThread =
-		typeof search?.selectedMessageId === "string" &&
-		search.selectedMessageId.length > 0;
+	const isReadingThread = Boolean(search?.selectedMessageId);
 
-	if (
-		!isOnPrimaryMobileRoute(location.pathname) ||
-		state.isOpen ||
-		isReadingThread
-	)
+	if (!location.pathname.startsWith("/mail") || state.isOpen || isReadingThread)
 		return null;
 
 	return (

package/src/components/layout/MailTopBar.tsx

@@ -9,9 +9,9 @@
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
 import { RefreshButton, ShellTopBar, shortcutHintForAction } from "@remit/ui";
 import { useNavigate } from "@tanstack/react-router";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { AccountMenu } from "@/auth/AccountMenu";
-import { useGlobalCompose } from "@/hooks/useComposeTarget";
+import { useCompose } from "@/components/compose/ComposeProvider";
 import { useRefreshControl } from "@/hooks/useRefreshControl";
 import { useSearchScope } from "@/hooks/useSearchScope";
 import { openBugReport } from "@/lib/bug-report";
@@ -26,7 +26,10 @@ export function MailTopBar({ accounts }: MailTopBarProps) {
 	const { searchInput, onSearchChange, onSearchClear, onSearchClearQuery } =
 		useMailContext();
 	const navigate = useNavigate();
-	const compose = useGlobalCompose(accounts);
+	const { openCompose } = useCompose();
+	const compose = useCallback(() => {
+		openCompose({ mode: "new" });
+	}, [openCompose]);
 	const { scope, clearScope } = useSearchScope(accounts);
 	const chips =
 		scope.kind === "scoped"

package/src/components/mail/DraftsView.tsx

@@ -185,17 +185,6 @@ export function DraftsView({
 	};
 
 	const handleRemitDraftOpen = (outboxMessageId: string) => {
-		// Clear any open IMAP draft first. The route's detailPane only renders
-		// FullCompose when `composeState.isOpen && !selectedThread`; if an IMAP
-		// draft is open (selectedMessageId set) the reading pane would keep
-		// showing ConversationView and compose would never surface (#505).
-		if (selectedMessageId) {
-			navigate({
-				to: "/mail/$mailboxId",
-				params: { mailboxId },
-				search: { selectedMessageId: undefined },
-			});
-		}
 		openCompose({ mode: "new", outboxMessageId });
 	};
 

package/src/components/mail/MailboxPane.tsx

@@ -598,6 +598,16 @@ function MailboxPaneProvider({
 		openCompose({ mode: "new" });
 	}, [openCompose]);
 
+	// A thread opening closes compose. Only a selection arriving counts, so this
+	// cannot close the compose that just cleared one.
+	const previousSelectionRef = useRef(selectedMessageId);
+	useEffect(() => {
+		const previous = previousSelectionRef.current;
+		previousSelectionRef.current = selectedMessageId;
+		if (!selectedMessageId || selectedMessageId === previous) return;
+		closeCompose();
+	}, [selectedMessageId, closeCompose]);
+
 	const deleteOutboxMutation = useMutation({
 		...outboxDetailOperationsDeleteOutboxMessageMutation(),
 		onError: (mutationError) => {

package/src/hooks/useComposeTargetMailbox.ts

@@ -0,0 +1,75 @@
+/**
+ * Where a compose started off a mailbox route has to land.
+ *
+ * `FullCompose` is mounted by the mailbox route only, so compose started from
+ * the daily brief, flagged or the outbox has to carry the user to a mailbox
+ * first. The target is the first account's inbox, falling back to its first
+ * mailbox.
+ */
+import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+import { useQueries } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { buildMailboxRoleMap } from "@/lib/folder-roles";
+
+/**
+ * The mailbox to land on, or why there is none: a folder list still in flight
+ * is a different answer to the user than an account with no folders at all.
+ */
+export type ComposeTarget =
+	| { status: "ready"; mailboxId: string }
+	| { status: "loading" }
+	| { status: "none" };
+
+/**
+ * Accounts resolve in order and an account whose mailbox query is still in
+ * flight blocks rather than being skipped: skipping hands back a later
+ * account's inbox and then silently swaps the target once the earlier query
+ * settles.
+ *
+ * The answer is memoised on the two values it is made of. A fresh object every
+ * render would rebuild `openCompose` on every render of the provider, and a
+ * caller with it in a dependency array then never settles.
+ */
+export function useComposeTarget(
+	accounts: RemitImapAccountResponse[],
+): ComposeTarget {
+	const mailboxQueries = useQueries({
+		queries: accounts.map((account) => ({
+			...mailboxOperationsListMailboxesOptions({
+				path: { accountId: account.accountId },
+			}),
+			staleTime: Infinity,
+		})),
+	});
+
+	let status: ComposeTarget["status"] = "none";
+	let readyMailboxId: string | undefined;
+	for (const [index, account] of accounts.entries()) {
+		const query = mailboxQueries[index];
+		if (!query || query.isPending) {
+			status = "loading";
+			break;
+		}
+		const mailboxes = query.data?.items ?? [];
+		if (mailboxes.length === 0) continue;
+		const roleMap = buildMailboxRoleMap(account.folderAppointments);
+		const inbox = mailboxes.find(
+			(mailbox) => roleMap.get(mailbox.mailboxId) === "inbox",
+		);
+		const mailboxId = (inbox ?? mailboxes[0])?.mailboxId;
+		if (mailboxId) {
+			status = "ready";
+			readyMailboxId = mailboxId;
+			break;
+		}
+	}
+
+	return useMemo(
+		() =>
+			status === "ready" && readyMailboxId
+				? { status: "ready", mailboxId: readyMailboxId }
+				: { status: status === "ready" ? "none" : status },
+		[status, readyMailboxId],
+	);
+}

package/src/lib/compose-routes.ts

@@ -2,11 +2,11 @@
  * Which routes mount the compose surface.
  *
  * `FullCompose` is mounted by the mailbox route only, so compose started from
- * anywhere else has to carry the user to a mailbox first. Kept apart from
- * `useComposeTarget` so it stays a plain function with no React or API
- * dependencies — both compose entry points resolve routes through this one
- * definition, and a divergent second copy is what left the mobile FAB dead on
- * `/mail/flagged` and on the brief.
+ * anywhere else has to carry the user to a mailbox first — and compose left
+ * open when the user walks off those routes has to close. `ComposeProvider`
+ * decides both from here, and the mail layout binds `c` off the same answer.
+ * A plain function with no React or API dependencies: a divergent second copy
+ * is what left the mobile FAB dead on `/mail/flagged` and on the brief.
  */
 
 /** `/mail/<segment>` values that name a view rather than a mailbox. */

package/src/routes/mail.tsx

@@ -2,7 +2,7 @@ import {
 	configOperationsGetConfigOptions,
 	unifiedThreadOperationsListAllThreadsOptions,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { AppShellSlotted } from "@remit/ui";
+import { AppShellSlotted, useTriageKeyboard } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import {
 	createFileRoute,
@@ -13,6 +13,7 @@ import {
 } from "@tanstack/react-router";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { z } from "zod";
+import { useCompose } from "@/components/compose/ComposeProvider";
 import { AppShellSkeleton } from "@/components/layout/AppShellSkeleton";
 import { ComposeFab } from "@/components/layout/ComposeFab";
 import { MailTopBar } from "@/components/layout/MailTopBar";
@@ -29,6 +30,7 @@ import { isSinglePaneTier, useLayoutTier } from "@/hooks/useLayoutTier";
 import { useMailboxNameIndex } from "@/hooks/useMailboxNameIndex";
 import { useResultFolderIndex } from "@/hooks/useResultFolderIndex";
 import { useStaleAccountSync } from "@/hooks/useStaleAccountSync";
+import { hostsComposeSurface } from "@/lib/compose-routes";
 import { writeIntelligencePref } from "@/lib/intelligence-pref";
 import { MailContext } from "@/lib/mail-context";
 import { MailFreshnessProvider } from "@/lib/mail-freshness";
@@ -132,6 +134,7 @@ function MailLayout() {
 	// the render before committing and nothing is painted with the stale query.
 	// An effect would commit one frame carrying the previous view's text, which
 	// the mirror below then has to be defended against.
+	const pathname = useRouterState({ select: (s) => s.location.pathname });
 	const viewKey = useRouterState({ select: (s) => mailViewKey(s.matches) });
 	const [searchViewKey, setSearchViewKey] = useState(viewKey);
 	if (searchViewKey !== viewKey) {
@@ -215,6 +218,19 @@ function MailLayout() {
 		],
 	});
 
+	// `c` / ⌘N off the mailbox routes — the brief, Flagged, the outbox. On a
+	// mailbox the pane's own triage layer owns the key, so this is disabled there
+	// rather than firing a second compose alongside it.
+	const { openCompose } = useCompose();
+	const composeHandlers = useMemo(
+		() => ({ compose: () => openCompose({ mode: "new" }) }),
+		[openCompose],
+	);
+	useTriageKeyboard({
+		enabled: !hostsComposeSurface(pathname),
+		handlers: composeHandlers,
+	});
+
 	const handleSearchChange = useCallback((query: string) => {
 		setSearchInput(query);
 	}, []);
@@ -325,11 +341,8 @@ function MailLayout() {
 		<MailNav accounts={accounts} onMailboxSelect={handleMailboxSelect} />
 	);
 	// Single-pane only, where the FAB is the compose entry point. Above it the
-	// top bar owns compose, and mounting the FAB there would resolve the same
-	// compose target twice for a button CSS keeps hidden.
-	const overlayContent = isSinglePane ? (
-		<ComposeFab accounts={accounts} />
-	) : undefined;
+	// top bar owns compose.
+	const overlayContent = isSinglePane ? <ComposeFab /> : undefined;
 	// Desktop only. Below 1024px the single pane keeps its own header search and
 	// the phone takeover; there is no room for a bar spanning panes that do not
 	// exist side by side.

package/src/hooks/useComposeTarget.ts

@@ -1,92 +0,0 @@
-/**
- * Where a global compose has to land.
- *
- * The compose surface (`FullCompose`) is mounted by the mailbox route only, so
- * compose started from anywhere else — the daily brief, flagged, outbox — has
- * to carry the user to a mailbox first. The target is the first account's
- * inbox, falling back to its first mailbox.
- *
- * Both compose entry points use this: the top bar's button on desktop and the
- * mobile `ComposeFab`. One resolver, so the two surfaces cannot disagree about
- * which routes host the compose surface.
- */
-import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { useQueries } from "@tanstack/react-query";
-import { useLocation, useNavigate } from "@tanstack/react-router";
-import { startTransition, useCallback } from "react";
-import { useCompose } from "@/components/compose/ComposeProvider";
-import { hostsComposeSurface } from "@/lib/compose-routes";
-import { buildMailboxRoleMap } from "@/lib/folder-roles";
-
-/**
- * The mailbox id a global compose should navigate to, or undefined if none is
- * known yet.
- *
- * Accounts resolve in order and an account whose mailbox query is still in
- * flight blocks rather than being skipped: skipping hands back a later
- * account's inbox and then silently swaps the target once the earlier query
- * settles.
- */
-export function useComposeTargetMailboxId(
-	accounts: RemitImapAccountResponse[],
-): string | undefined {
-	const mailboxQueries = useQueries({
-		queries: accounts.map((account) => ({
-			...mailboxOperationsListMailboxesOptions({
-				path: { accountId: account.accountId },
-			}),
-			staleTime: Infinity,
-		})),
-	});
-
-	for (const [index, account] of accounts.entries()) {
-		const query = mailboxQueries[index];
-		if (!query || query.isPending) return undefined;
-		const mailboxes = query.data?.items ?? [];
-		if (mailboxes.length === 0) continue;
-		const roleMap = buildMailboxRoleMap(account.folderAppointments);
-		const inbox = mailboxes.find(
-			(mailbox) => roleMap.get(mailbox.mailboxId) === "inbox",
-		);
-		return (inbox ?? mailboxes[0])?.mailboxId;
-	}
-	return undefined;
-}
-
-/**
- * A compose action that works from every view: opens compose in place when the
- * current route already hosts the surface, otherwise navigates to the target
- * mailbox — compose state lives in `ComposeProvider` (mounted at the root), so
- * it survives the transition and the destination mounts straight into it.
- *
- * With no target resolved yet — a cold load whose mailbox queries have not
- * settled, or accounts with no mailboxes — the action does nothing. Opening
- * compose state first would leave it open with nothing rendering it, and it
- * would then pop up unprompted on the next navigation.
- */
-export function useGlobalCompose(
-	accounts: RemitImapAccountResponse[],
-): () => void {
-	const { openCompose } = useCompose();
-	const navigate = useNavigate();
-	const location = useLocation();
-	const targetMailboxId = useComposeTargetMailboxId(accounts);
-
-	return useCallback(() => {
-		if (hostsComposeSurface(location.pathname)) {
-			startTransition(() => {
-				openCompose({ mode: "new" });
-			});
-			return;
-		}
-		if (!targetMailboxId) return;
-		startTransition(() => {
-			openCompose({ mode: "new" });
-		});
-		navigate({
-			to: "/mail/$mailboxId",
-			params: { mailboxId: targetMailboxId },
-		});
-	}, [openCompose, navigate, location.pathname, targetMailboxId]);
-}