@remit/web-client 0.0.166 → 0.0.168

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

@@ -37,11 +37,11 @@ import {
 	createRouter,
 	RouterContextProvider,
 } from "@tanstack/react-router";
-import { createElement, useEffect } from "react";
+import { createElement, useState } from "react";
 import { createDomHarness, type DomHarness } from "../../test-support/dom";
 import { type HttpMock, httpError, mockFetch } from "../../test-support/http";
 import { ComposeForm } from "./ComposeForm";
-import { ComposeProvider, useCompose } from "./ComposeProvider";
+import { ComposeProvider } from "./ComposeProvider";
 
 const ACCOUNT_ID = "acc-1";
 const OUTBOX_MESSAGE_ID = "ob-604";
@@ -108,19 +108,17 @@ const patchesAfterTheSend = (): number => {
 		.length;
 };
 
+// The draft the composer is on is its owner's to hand it — the address for the
+// compose route, local state for an inline reply. Here it is the test's.
 const Opened = ({ outboxMessageId }: { outboxMessageId?: string }) => {
-	const { state, openCompose } = useCompose();
-
-	useEffect(() => {
-		openCompose({ mode: "reply", account, sourceMessage, outboxMessageId });
-	}, [openCompose, outboxMessageId]);
-
-	if (!state.isOpen) return null;
+	const [draftId, setDraftId] = useState(outboxMessageId);
 
 	return createElement(ComposeForm, {
 		mode: "reply",
 		account,
 		sourceMessage,
+		outboxMessageId: draftId,
+		onDraftCreated: setDraftId,
 		onClose: () => {
 			closed += 1;
 		},

package/src/components/compose/compose-starts-a-second-message.render.test.ts

@@ -0,0 +1,170 @@
+/**
+ * Compose pressed while already composing starts a new message (#719).
+ *
+ * The compose route carries the draft as an optional segment, so pressing
+ * Compose from inside the composer drops that segment and leaves the same route
+ * matched — nothing remounts the form. The reset effect used to bail whenever
+ * the incoming id was absent, so the previous draft's recipients, subject and
+ * body stayed on screen under an address that said new message, and the next
+ * autosave took the create branch and wrote a SECOND draft holding the first
+ * one's content.
+ *
+ * Two properties, one cause: what is on screen, and what is written. The write
+ * is the damaging half — the duplicate outlives the session, in the reader's
+ * drafts.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	RouterContextProvider,
+} from "@tanstack/react-router";
+import { createElement, useState } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { type HttpMock, mockFetch } from "../../test-support/http";
+import { ComposeForm } from "./ComposeForm";
+import { ComposeProvider } from "./ComposeProvider";
+
+const ACCOUNT_ID = "acc-1";
+const DRAFT_ID = "ob-first";
+const AUTOSAVE_DEBOUNCE_MS = 2000;
+
+const account = {
+	accountId: ACCOUNT_ID,
+	email: "me@example.com",
+	smtpEnabled: true,
+} as unknown as RemitImapAccountResponse;
+
+const draft = {
+	outboxMessageId: DRAFT_ID,
+	accountId: ACCOUNT_ID,
+	fromAddress: account.email,
+	toAddresses: ["them@example.com"],
+	ccAddresses: [],
+	bccAddresses: [],
+	references: [],
+	subject: "Lunch on Thursday",
+	textBody: "Does one o'clock work?",
+	status: "draft",
+};
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+(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;
+
+/**
+ * The composer with its draft handed in, and a button that takes it away again
+ * — which is what pressing Compose does to the address it is mounted under.
+ */
+const Composer = () => {
+	const [draftId, setDraftId] = useState<string | undefined>(DRAFT_ID);
+
+	return createElement(
+		"div",
+		null,
+		createElement(
+			"button",
+			{ type: "button", onClick: () => setDraftId(undefined) },
+			"Compose",
+		),
+		createElement(ComposeForm, {
+			mode: "new",
+			account,
+			outboxMessageId: draftId,
+			onDraftCreated: setDraftId,
+			onClose: () => undefined,
+		}),
+	);
+};
+
+const creates = () =>
+	(http?.calls ?? []).filter(
+		(call) => call.method === "POST" && call.path.endsWith("/outbox"),
+	);
+
+const mount = async (): Promise<DomHarness> => {
+	http = mockFetch(async (call) => {
+		if (call.path.endsWith("/config")) return { accounts: [account] };
+		if (call.method === "POST" && call.path.endsWith("/outbox"))
+			return { ...draft, outboxMessageId: "ob-second" };
+		return draft;
+	});
+
+	const created = createDomHarness();
+	harness = created;
+	created.renderApp(
+		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(Composer)),
+		}),
+	);
+	await created.flush();
+	await created.wait(50);
+	return created;
+};
+
+const subjectField = (mounted: DomHarness): HTMLInputElement => {
+	const field = mounted.query<HTMLInputElement>("[data-subject-field]");
+	if (!field) throw new Error("the composer has no subject field");
+	return field;
+};
+
+describe("Compose pressed while already composing", () => {
+	it("takes the previous draft's message off the screen", async () => {
+		const mounted = await mount();
+		assert.equal(subjectField(mounted).value, draft.subject);
+		assert.match(mounted.text(), /them@example.com/);
+
+		mounted.click(mounted.byText("button", "Compose"));
+		await mounted.flush();
+		await mounted.wait(20);
+
+		assert.equal(subjectField(mounted).value, "");
+		assert.doesNotMatch(mounted.text(), /them@example.com/);
+	});
+
+	// The half that outlives the session: an autosave from a form still holding
+	// the old content, with no draft to write it to, creates a second one.
+	it("writes no second draft carrying the first one's content", async () => {
+		const mounted = await mount();
+		assert.equal(subjectField(mounted).value, draft.subject);
+
+		mounted.click(mounted.byText("button", "Compose"));
+		await mounted.flush();
+		await mounted.wait(AUTOSAVE_DEBOUNCE_MS + 500);
+
+		assert.deepEqual(
+			creates().map((call) => call.body?.subject),
+			[],
+			"a blank new message has nothing to save, so nothing was written",
+		);
+	});
+});

package/src/components/compose/compose-title.ts

@@ -0,0 +1,10 @@
+/**
+ * What the compose surface calls itself.
+ *
+ * The address says which message is being written, so the heading says the same
+ * thing: a message with nothing saved behind it yet is a new one, and one the
+ * autosave has written is the draft it wrote. The heading changing as the first
+ * save lands is the same moment the action bar says "Draft saved".
+ */
+export const composeSurfaceTitle = (outboxMessageId: string | undefined) =>
+	outboxMessageId ? "Draft" : "New Message";

package/src/components/compose/mobile-header-stays-expanded.render.test.ts

@@ -23,11 +23,11 @@ import {
 	createRouter,
 	RouterContextProvider,
 } from "@tanstack/react-router";
-import { act, createElement, useEffect } from "react";
+import { act, createElement } from "react";
 import { createDomHarness, type DomHarness } from "../../test-support/dom";
 import { type HttpMock, mockFetch } from "../../test-support/http";
 import { ComposeForm } from "./ComposeForm";
-import { ComposeProvider, useCompose } from "./ComposeProvider";
+import { ComposeProvider } from "./ComposeProvider";
 
 const ACCOUNT_ID = "acc-1";
 const PHONE = {
@@ -97,21 +97,13 @@ const testRouter = (): AnyRouter =>
 		history: createMemoryHistory({ initialEntries: ["/mail/mbx-1"] }),
 	}) as unknown as AnyRouter;
 
-const Opened = () => {
-	const { state, openCompose } = useCompose();
-
-	useEffect(() => {
-		openCompose({ mode: "new", account });
-	}, [openCompose]);
-
-	if (!state.isOpen) return null;
-
-	return createElement(ComposeForm, {
+const Opened = () =>
+	createElement(ComposeForm, {
 		mode: "new",
 		account,
+		onDraftCreated: () => {},
 		onClose: () => {},
 	});
-};
 
 const mount = async (): Promise<void> => {
 	http = mockFetch(async (call) => {

package/src/components/layout/ComposeFab.tsx

@@ -1,33 +1,24 @@
 import { useLocation } from "@tanstack/react-router";
 import { Pencil } from "lucide-react";
-import { useCallback } from "react";
-import { useCompose } from "@/components/compose/ComposeProvider";
 import { locationOpensDetail } from "@/lib/mail-route";
+import { useOpenCompose } from "@/routing";
 
 /**
  * Floating Action Button for composing a new message. Mobile-only.
  *
  * Layout follows Material 3: 56×56 surface, 16px from the right and
- * bottom edges (plus the iOS safe-area inset). Hidden when any of:
+ * bottom edges (plus the iOS safe-area inset). Hidden when either:
  *   - Viewport is `≥ lg` (1024px), where the top bar owns compose. The
  *     `/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 — the single pane is the conversation, and
- *     its reply bar is under this corner. Every list says so in its path.
- *   - The user is off `/mail`, which is every route with no mail in it.
+ *   - The single pane has something open — a conversation, or compose itself.
+ *     Every list says so in its path.
  */
 export const ComposeFab = () => {
-	const { state, openCompose } = useCompose();
+	const compose = useOpenCompose();
 	const location = useLocation();
-	const compose = useCallback(() => {
-		openCompose({ mode: "new" });
-	}, [openCompose]);
 
-	const isReadingThread = locationOpensDetail(location.pathname);
-
-	if (!location.pathname.startsWith("/mail") || state.isOpen || isReadingThread)
-		return null;
+	if (locationOpensDetail(location.pathname)) return null;
 
 	return (
 		<button

package/src/components/layout/MailShell.tsx

@@ -1,6 +1,8 @@
 import { AppShellSlotted } from "@remit/ui";
 import { createContext, type ReactNode, useContext } from "react";
+import { FullCompose } from "@/components/compose/FullCompose";
 import { AppShellSkeleton } from "@/components/layout/AppShellSkeleton";
+import { useIsComposing } from "@/routing";
 
 /**
  * The chrome every list shares, published by the `/mail` layout and consumed by
@@ -53,6 +55,11 @@ export interface MailShellProps {
  * 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.
+ *
+ * Compose is the one surface the single pane cannot take from the `Outlet`,
+ * because at this width there is no reading slot to fill. It is read off the
+ * address here rather than in each list's phone view, so the four lists cannot
+ * disagree about it.
  */
 export function MailShell({
 	phone,
@@ -62,6 +69,7 @@ export function MailShell({
 	hasThread = false,
 }: MailShellProps) {
 	const chrome = useContext(MailShellCtx);
+	const isComposing = useIsComposing();
 	if (!chrome) return <AppShellSkeleton />;
 
 	const shared = {
@@ -78,7 +86,7 @@ export function MailShell({
 		return (
 			<AppShellSlotted
 				{...shared}
-				list={phone}
+				list={isComposing ? <FullCompose /> : phone}
 				intelligenceOpen={chrome.intelligenceOpen}
 			/>
 		);

package/src/components/layout/MailTopBar.tsx

@@ -9,14 +9,14 @@
 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 { useCallback, useMemo } from "react";
+import { useMemo } from "react";
 import { AccountMenu } from "@/auth/AccountMenu";
-import { useCompose } from "@/components/compose/ComposeProvider";
 import { useRefreshControl } from "@/hooks/useRefreshControl";
 import { useSearchScope } from "@/hooks/useSearchScope";
 import { openBugReport } from "@/lib/bug-report";
 import { useMailContext } from "@/lib/mail-context";
 import { useMailFreshness } from "@/lib/mail-freshness";
+import { useOpenCompose } from "@/routing";
 
 interface MailTopBarProps {
 	accounts: RemitImapAccountResponse[];
@@ -26,10 +26,7 @@ export function MailTopBar({ accounts }: MailTopBarProps) {
 	const { searchInput, onSearchChange, onSearchClear, onSearchClearQuery } =
 		useMailContext();
 	const navigate = useNavigate();
-	const { openCompose } = useCompose();
-	const compose = useCallback(() => {
-		openCompose({ mode: "new" });
-	}, [openCompose]);
+	const compose = useOpenCompose();
 	const { scope, clearScope } = useSearchScope(accounts);
 	const chips =
 		scope.kind === "scoped"

package/src/components/mail/BriefPane.tsx

@@ -44,6 +44,10 @@ import { useMailContext } from "@/lib/mail-context";
 import {
 	type OpenThreadPath,
 	type OpenThreadTarget,
+	type ReplyMode,
+	useIsComposing,
+	useIsReplying,
+	useOpenReply,
 	useRetainOpenPanels,
 } from "@/routing";
 
@@ -70,6 +74,11 @@ interface BriefPaneContextValue {
 	 * account — the brief spans accounts, so there is no route mailbox to key by.
 	 */
 	actions: ThreadActions;
+	/**
+	 * Answer the conversation the address has open. Absent when it names none,
+	 * which is what the toolbar turns into its own explanation.
+	 */
+	onReply: ((mode: ReplyMode) => void) | undefined;
 	/** Keyboard, multi-select and next/previous, shared with the mailbox view. */
 	triage: TriageContext;
 	onDeleteMessages: (messageIds: string[]) => void;
@@ -204,15 +213,47 @@ function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 	const triageTarget = focusedThread ?? selectedThread;
 	const triageActions = useThreadActions({ thread: triageTarget });
 
+	// The toolbar answers the conversation on screen; the keyboard answers the
+	// row the cursor is on, which may be one the address has not opened yet.
+	// Both are one navigation, because the mode and the message it answers are
+	// segments of the same address — there is no open-it-first step for the
+	// answering half to be dropped from.
+	const isComposing = useIsComposing();
+	const isReplying = useIsReplying();
+	const openReply = useOpenReply();
+	const replyToOpenThread = useMemo(() => {
+		if (!selectedThread || !selectedMessageId) return undefined;
+		return (mode: ReplyMode) =>
+			openReply({
+				threadId: selectedThread.threadId,
+				messageId: selectedMessageId,
+				mode,
+			});
+	}, [openReply, selectedThread, selectedMessageId]);
+
+	const replyToFocusedThread = useMemo(() => {
+		if (!triageTarget) return undefined;
+		return (mode: ReplyMode) =>
+			openReply({
+				threadId: triageTarget.threadId,
+				messageId: triageTarget.messageId,
+				mode,
+			});
+	}, [openReply, triageTarget]);
+
 	const { nextMessageId, previousMessageId } = useTriageLayer({
 		context: triage,
 		orderedIds: triage.orderedIds,
 		selectedMessageId,
+		// The list stays mounted under both writing surfaces, so the triage keys
+		// would otherwise fire at the message behind whatever is being typed — or
+		// answer a row the cursor moved to while a reply was open.
+		enabled: !isComposing && !isReplying,
 		onClose: handleCloseThread,
 		handlers: {
-			reply: () => actions.requestCompose("reply"),
-			replyAll: () => actions.requestCompose("reply_all"),
-			forward: () => actions.requestCompose("forward"),
+			reply: () => replyToFocusedThread?.("reply"),
+			replyAll: () => replyToFocusedThread?.("reply-all"),
+			forward: () => replyToFocusedThread?.("forward"),
 			// The list takes any verb aimed at its selection and opens the wizard
 			// on it, so a shortcut can never reach a bulk action the bar would have
 			// reviewed. What comes back here is a verb aimed at the bare cursor.
@@ -252,6 +293,7 @@ function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 		nextThread: adjacentThread(nextMessageId),
 		previousThread: adjacentThread(previousMessageId),
 		actions,
+		onReply: replyToOpenThread,
 		triage,
 		onDeleteMessages: deleteMessages,
 		handleDeselectIfRemoved,
@@ -289,7 +331,7 @@ function BriefList() {
  * Mount in the `reading` slot of `AppShellSlotted`. Only rendered ≥ 1024px.
  */
 function BriefReading() {
-	const { conversation, actions } = useBriefPane();
+	const { conversation, actions, onReply } = useBriefPane();
 	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
 	// The rail's own width gate, not the shell tier: between 1024 and 1280 the
 	// reading pane is mounted but the rail is not, so "enabled" would promise an
@@ -305,13 +347,9 @@ function BriefReading() {
 				intelligenceOpen={canToggleIntelligence && intelligenceOpen}
 				canToggleIntelligence={canToggleIntelligence}
 				onToggleIntelligence={onToggleIntelligence}
-				onReply={hasThread ? () => actions.requestCompose("reply") : undefined}
-				onReplyAll={
-					hasThread ? () => actions.requestCompose("reply_all") : undefined
-				}
-				onForward={
-					hasThread ? () => actions.requestCompose("forward") : undefined
-				}
+				onReply={onReply ? () => onReply("reply") : undefined}
+				onReplyAll={onReply ? () => onReply("reply-all") : undefined}
+				onForward={onReply ? () => onReply("forward") : undefined}
 				onDelete={hasThread ? actions.deleteThread : undefined}
 				onToggleStar={hasThread ? actions.toggleStar : undefined}
 				isStarred={actions.isStarred}
@@ -333,8 +371,6 @@ function BriefReading() {
 						subject={conversation.subject}
 						selectedMessageId={conversation.messageId}
 						authenticity={conversation.authenticity}
-						composeRequest={actions.composeRequest}
-						onComposeClose={actions.clearComposeRequest}
 					/>
 				) : (
 					<ReadingPaneEmpty />