@remit/web-client 0.0.165 → 0.0.167

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,7 +44,7 @@ import { useMailContext } from "@/lib/mail-context";
 import {
 	type OpenThreadPath,
 	type OpenThreadTarget,
-	retainOpenPanels,
+	useRetainOpenPanels,
 } from "@/routing";
 
 /* ------------------------------------------------------------------ */
@@ -102,6 +102,7 @@ interface BriefPaneProps {
 
 function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 	const navigate = useNavigate();
+	const retainPanels = useRetainOpenPanels();
 	const { searchInput } = useMailContext();
 	const threadId = thread?.threadId;
 	const pointedAtMessageId = thread?.messageId;
@@ -152,19 +153,19 @@ function BriefPaneProvider({ thread, children }: BriefPaneProps) {
 				// `searchInput`: a row can be tapped before the debounce settles, when
 				// the committed query is still empty.
 				search: (prev) => ({ ...prev, q: searchInput || undefined }),
-				hash: retainOpenPanels,
+				hash: retainPanels,
 			});
 		},
-		[navigate, searchInput],
+		[navigate, retainPanels, searchInput],
 	);
 
 	const handleCloseThread = useCallback(() => {
 		navigate({
 			to: "/mail/brief",
 			search: (prev) => prev,
-			hash: retainOpenPanels,
+			hash: retainPanels,
 		});
-	}, [navigate]);
+	}, [navigate, retainPanels]);
 
 	const handleDeselectIfRemoved = useCallback(
 		(removedIds: string[]) => {

package/src/components/mail/DraftsView.tsx

@@ -5,8 +5,8 @@
  * \Drafts special-use folder (issue #505):
  *
  *   1. "Not yet sent (Remit)" — outbox rows with status === "draft" belonging
- *      to the account that owns the open \Drafts mailbox. Clicking a row opens
- *      compose pre-filled via openCompose({ mode: "new", outboxMessageId }).
+ *      to the account that owns the open \Drafts mailbox. Clicking a row names
+ *      the draft and navigates to the folder's compose route.
  *
  *   2. "On the server" — IMAP \Drafts thread rows already loaded for the
  *      mailbox. Clicking a row opens the normal reading pane (read-only;
@@ -39,9 +39,13 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
 import { FileText, Inbox, Trash2 } from "lucide-react";
 import { useMemo } from "react";
-import { useCompose } from "@/components/compose/ComposeProvider";
+
 import { groupDraftSections } from "@/lib/drafts";
-import { retainOpenPanels } from "@/routing";
+import {
+	useComposeDraftId,
+	useEditDraft,
+	useRetainOpenPanels,
+} from "@/routing";
 import { NavMenuButton } from "./NavMenuButton";
 
 // ---------------------------------------------------------------------------
@@ -154,8 +158,10 @@ export function DraftsView({
 	title,
 	unreadCount,
 }: DraftsViewProps) {
-	const { openCompose, state: composeState } = useCompose();
+	const openDraftId = useComposeDraftId();
+	const editDraft = useEditDraft();
 	const navigate = useNavigate();
+	const retainPanels = useRetainOpenPanels();
 	const queryClient = useQueryClient();
 
 	// Fetch the full outbox list — both sources are already fetched by the
@@ -185,10 +191,6 @@ export function DraftsView({
 		deleteMutation.mutate({ path: { outboxMessageId } });
 	};
 
-	const handleRemitDraftOpen = (outboxMessageId: string) => {
-		openCompose({ mode: "new", outboxMessageId });
-	};
-
 	const handleImapDraftOpen = (messageId: string) => {
 		const threadId = imapThreads.find(
 			(thread) => thread.messageId === messageId,
@@ -198,7 +200,7 @@ export function DraftsView({
 			to: "/mail/$mailboxId/$threadId/$messageId",
 			params: { mailboxId, threadId, messageId },
 			search: (prev) => prev,
-			hash: retainOpenPanels,
+			hash: retainPanels,
 		});
 	};
 
@@ -245,11 +247,8 @@ export function DraftsView({
 											<RemitDraftRow
 												key={thread.id}
 												row={thread}
-												isSelected={
-													composeState.isOpen &&
-													thread.id === composeState.outboxMessageId
-												}
-												onOpen={handleRemitDraftOpen}
+												isSelected={thread.id === openDraftId}
+												onOpen={editDraft}
 												onDelete={handleRemitDraftDelete}
 												isDeleting={deleteMutation.isPending}
 											/>

package/src/components/mail/FlaggedPane.tsx

@@ -55,7 +55,7 @@ import { useMailContext } from "@/lib/mail-context";
 import {
 	type OpenThreadPath,
 	type OpenThreadTarget,
-	retainOpenPanels,
+	useRetainOpenPanels,
 } from "@/routing";
 
 /* ------------------------------------------------------------------ */
@@ -113,6 +113,7 @@ interface FlaggedPaneProps {
 
 function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
 	const navigate = useNavigate();
+	const retainPanels = useRetainOpenPanels();
 	const { searchInput } = useMailContext();
 	const threadId = thread?.threadId;
 	const pointedAtMessageId = thread?.messageId;
@@ -158,19 +159,19 @@ function FlaggedPaneProvider({ thread, children }: FlaggedPaneProps) {
 				// `searchInput`: a row can be tapped before the debounce settles, when
 				// the committed query is still empty.
 				search: (prev) => ({ ...prev, q: searchInput || undefined }),
-				hash: retainOpenPanels,
+				hash: retainPanels,
 			});
 		},
-		[navigate, searchInput],
+		[navigate, retainPanels, searchInput],
 	);
 
 	const handleCloseThread = useCallback(() => {
 		navigate({
 			to: "/mail/flagged",
 			search: (prev) => prev,
-			hash: retainOpenPanels,
+			hash: retainPanels,
 		});
-	}, [navigate]);
+	}, [navigate, retainPanels]);
 
 	const handleDeselectIfRemoved = useCallback(
 		(removedIds: string[]) => {