@remit/web-client 0.0.143 → 0.0.145

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.143",
+  "version": "0.0.145",
   "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/MailShell.tsx

@@ -0,0 +1,98 @@
+import { AppShellSlotted } from "@remit/ui";
+import { createContext, type ReactNode, useContext } from "react";
+import { AppShellSkeleton } from "@/components/layout/AppShellSkeleton";
+
+/**
+ * The chrome every list shares, published by the `/mail` layout and consumed by
+ * the list route that mounts the shell.
+ *
+ * It lives in a module reached only through the `@/` alias for the same reason
+ * `lib/mail-context.ts` does: the generated route tree imports route files
+ * relatively, so a context declared inside one of them can resolve to a second
+ * module instance and hand the consumer an empty default.
+ */
+export interface MailShellChrome {
+	/**
+	 * Below the reading boundary (phone AND tablet) the shell shows one pane, so
+	 * the list route mounts its phone view instead of the slotted panes.
+	 */
+	isSinglePane: boolean;
+	isLoading: boolean;
+	intelligenceOpen: boolean;
+	nav: ReactNode;
+	topBar: ReactNode;
+	overlay: ReactNode;
+	navOpen: boolean;
+	onOpenNav: () => void;
+	onCloseNav: () => void;
+}
+
+const MailShellCtx = createContext<MailShellChrome | null>(null);
+
+export const MailShellProvider = ({
+	chrome,
+	children,
+}: {
+	chrome: MailShellChrome;
+	children: ReactNode;
+}) => <MailShellCtx.Provider value={chrome}>{children}</MailShellCtx.Provider>;
+
+export interface MailShellProps {
+	/** The single pane, list and open thread both, below the reading boundary. */
+	phone: ReactNode;
+	list: ReactNode;
+	reading: ReactNode;
+	intelligence?: ReactNode;
+	/** Whether the reading pane has a thread — the intelligence rail needs one. */
+	hasThread?: boolean;
+}
+
+/**
+ * The shell a list route mounts around its own panes.
+ *
+ * Below the reading boundary the shell is one pane and takes `phone`, which
+ * swaps between the list and whatever is open in place. Above it the panes sit
+ * side by side and the reading and intelligence slots are filled.
+ */
+export function MailShell({
+	phone,
+	list,
+	reading,
+	intelligence,
+	hasThread = false,
+}: MailShellProps) {
+	const chrome = useContext(MailShellCtx);
+	if (!chrome) return <AppShellSkeleton />;
+
+	const shared = {
+		nav: chrome.nav,
+		overlay: chrome.overlay,
+		skeleton: <AppShellSkeleton />,
+		isLoading: chrome.isLoading,
+		navOpen: chrome.navOpen,
+		onOpenNav: chrome.onOpenNav,
+		onCloseNav: chrome.onCloseNav,
+	};
+
+	if (chrome.isSinglePane) {
+		return (
+			<AppShellSlotted
+				{...shared}
+				list={phone}
+				intelligenceOpen={chrome.intelligenceOpen}
+			/>
+		);
+	}
+
+	return (
+		<AppShellSlotted
+			{...shared}
+			topBar={chrome.topBar}
+			list={list}
+			reading={reading}
+			intelligence={intelligence}
+			intelligenceOpen={chrome.intelligenceOpen}
+			hasThread={hasThread}
+		/>
+	);
+}

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"