@remit/web-client 0.0.204 → 0.0.206

package/package.json

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

@@ -441,6 +441,32 @@ export const ComposeForm = ({
 	 * the subject the reader edited.
 	 */
 	const resumedDraftRef = useRef(outboxMessageId !== undefined);
+	/**
+	 * The mode the fields on screen were last written for. A draft that is
+	 * resumed holds what its reader saved and must not be overwritten when it
+	 * mounts — but a switch of mode over the same message asks for different
+	 * recipients, which is how Reply All reaches the Cc field (#796).
+	 *
+	 * Taken at mount rather than on the first run that has a source: the source
+	 * is fetched fresh after a reload, so a reader who presses Reply All before
+	 * it lands would otherwise have that press recorded as the mode the draft
+	 * opened under, and Reply All would stay dead.
+	 */
+	const seededModeRef = useRef<ComposeMode | undefined>(
+		outboxMessageId !== undefined ? mode : undefined,
+	);
+	/**
+	 * The reader's own address the recipients were last written against, absent
+	 * until something has been written. The account resolves from the source's
+	 * mailbox, so it lands after the source: a seed made before it arrived kept
+	 * the reader in their own Cc (#819), and is redone once it does.
+	 */
+	const seededMyEmailRef = useRef<{ myEmail: string | undefined } | undefined>(
+		undefined,
+	);
+	// Read where a mode change must not itself be the trigger.
+	const modeRef = useRef(mode);
+	modeRef.current = mode;
 	/**
 	 * The identity this form has already taken from the surface that mounted it.
 	 * A reply learns which account the message reached only once the mailbox it
@@ -480,6 +506,9 @@ export const ComposeForm = ({
 		prevOutboxMessageIdRef.current = outboxMessageId;
 		if (previous === undefined) return;
 		resumedDraftRef.current = outboxMessageId !== undefined;
+		seededModeRef.current =
+			outboxMessageId !== undefined ? modeRef.current : undefined;
+		seededMyEmailRef.current = undefined;
 		// A draft brings its own body along in a moment; a new message opens on
 		// the signature, the same document a fresh mount would have started on.
 		const opening = outboxMessageId
@@ -593,8 +622,18 @@ export const ComposeForm = ({
 	}, [draftData, draftLoaded]);
 
 	useEffect(() => {
-		if (resumedDraftRef.current) return;
 		if (!sourceMessage) return;
+		// A draft the reader came back to holds what they saved, so mounting over
+		// it seeds nothing — but a switch of mode over the same message asks for
+		// a different answer, and rewrites the fields for it (#796). A rewrite
+		// made before the account resolved is redone when its address arrives,
+		// which is what takes the reader back out of their own Cc (#819).
+		if (resumedDraftRef.current && seededModeRef.current === mode) {
+			const seeded = seededMyEmailRef.current;
+			if (!seeded || seeded.myEmail === account?.email) return;
+		}
+		seededModeRef.current = mode;
+		seededMyEmailRef.current = { myEmail: account?.email };
 
 		// The fields are being rewritten for a different answer, so what was typed
 		// into one and left there belongs to the answer being left behind. Without

package/src/components/compose/reply-all-on-resumed-draft.render.test.ts

@@ -0,0 +1,249 @@
+/**
+ * Issue #796: Reply All does nothing on a reply reopened after a reload.
+ *
+ * The composer mounts holding a draft id, so `resumedDraftRef` starts true —
+ * the guard that keeps a saved draft's recipients from being overwritten when
+ * it reopens. But that same guard then swallowed every later run of the
+ * seeding effect, so switching the mode to Reply All over the same message
+ * rewrote nothing: no addresses in Cc, nothing changed on screen. A dead
+ * control — the reader cannot tell whether Reply All is broken, misconfigured,
+ * or their own mistake.
+ *
+ * The guarantees here: a resumed reply still opens untouched, but pressing
+ * Reply All puts the source message's other recipients in Cc — including when
+ * the press lands before the source message or the account has resolved, which
+ * after a reload is the ordinary case rather than the exception.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+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, 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-796";
+
+const account = {
+	accountId: ACCOUNT_ID,
+	email: "me@example.com",
+	smtpEnabled: true,
+} as unknown as RemitImapAccountResponse;
+
+/** The reader is among the message's recipients, as they are on their own mail. */
+const sourceMessage = {
+	message: { messageId: "msg-1", mailboxId: "mbx-1" },
+	envelope: {
+		subject: "Lunch",
+		messageIdValue: "<m1@example.com>",
+		from: [{ normalizedEmail: "them@example.com", displayName: "Them" }],
+		replyTo: [],
+		to: [
+			{ normalizedEmail: "other@example.com", displayName: "Other" },
+			{ normalizedEmail: account.email, displayName: "Me" },
+		],
+		cc: [{ normalizedEmail: "copied@example.com", displayName: "Copied" }],
+	},
+	references: [],
+	bodyParts: [],
+} as unknown as RemitImapDescribeMessageResponse;
+
+/** The draft as it was saved under Reply: only To holds the sender. */
+const draft = {
+	outboxMessageId: DRAFT_ID,
+	accountId: ACCOUNT_ID,
+	fromAddress: account.email,
+	toAddresses: ["them@example.com"],
+	ccAddresses: [],
+	bccAddresses: [],
+	references: [],
+	subject: "Re: Lunch",
+	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;
+
+interface ReopenedProps {
+	/** A reload refetches the source, which lands after the form is on screen. */
+	sourceAtMount: boolean;
+	/** The account is looked up from the source's mailbox, so it lands later still. */
+	accountAtMount: boolean;
+}
+
+/**
+ * The composer reopened on its saved draft, with a button standing in for the
+ * mode control — which switches Reply over to Reply All without remounting the
+ * form or changing the draft segment. The two other buttons stand in for the
+ * fetches a reload leaves outstanding, so a test can put the press before them.
+ */
+const Reopened = ({ sourceAtMount, accountAtMount }: ReopenedProps) => {
+	const [mode, setMode] = useState<"reply" | "reply-all">("reply");
+	const [source, setSource] = useState(
+		sourceAtMount ? sourceMessage : undefined,
+	);
+	const [resolved, setResolved] = useState(
+		accountAtMount ? account : undefined,
+	);
+
+	return createElement(
+		"div",
+		null,
+		createElement(
+			"button",
+			{ type: "button", onClick: () => setMode("reply-all") },
+			"Reply All",
+		),
+		createElement(
+			"button",
+			{ type: "button", onClick: () => setSource(sourceMessage) },
+			"Deliver source",
+		),
+		createElement(
+			"button",
+			{ type: "button", onClick: () => setResolved(account) },
+			"Resolve account",
+		),
+		createElement(ComposeForm, {
+			mode,
+			account: resolved,
+			sourceMessage: source,
+			outboxMessageId: DRAFT_ID,
+			onDraftCreated: () => undefined,
+			onClose: () => undefined,
+		}),
+	);
+};
+
+const mount = async (props: ReopenedProps): Promise<DomHarness> => {
+	http = mockFetch(async (call) => {
+		if (call.path.endsWith("/config")) return { accounts: [account] };
+		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(Reopened, props),
+			),
+		}),
+	);
+	await created.flush();
+	await created.wait(50);
+	return created;
+};
+
+const press = async (mounted: DomHarness, label: string): Promise<void> => {
+	mounted.click(mounted.byText("button", label));
+	await mounted.flush();
+	await mounted.wait(20);
+};
+
+/**
+ * What one address field holds, read off the chips rather than off the form's
+ * text: every recipient is one chip, and each carries its address whether or
+ * not the envelope gave it a display name.
+ */
+const addressesIn = (mounted: DomHarness, label: string): string[] =>
+	mounted
+		.queryAll(`[data-address-field="${label}"] [aria-label^="Remove "]`)
+		.map((chip) =>
+			(chip.getAttribute("aria-label") ?? "").replace("Remove ", ""),
+		);
+
+describe("Reply All on a resumed reply", () => {
+	it("keeps the saved draft's fields while it merely reopens", async () => {
+		const mounted = await mount({ sourceAtMount: true, accountAtMount: true });
+
+		assert.deepEqual(addressesIn(mounted, "To"), ["them@example.com"]);
+		assert.deepEqual(
+			addressesIn(mounted, "Cc"),
+			[],
+			"reopening must not rewrite what the reader saved",
+		);
+	});
+
+	it("puts the source message's other recipients in Cc", async () => {
+		const mounted = await mount({ sourceAtMount: true, accountAtMount: true });
+
+		await press(mounted, "Reply All");
+
+		assert.deepEqual(addressesIn(mounted, "Cc"), [
+			"other@example.com",
+			"copied@example.com",
+		]);
+	});
+
+	// After a reload the source is fetched fresh, so the press ordinarily comes
+	// first. Reading the mode off that run recorded "reply-all" as the mode the
+	// draft opened under, and Cc stayed empty — the original dead control.
+	it("seeds Cc when the press lands before the source message", async () => {
+		const mounted = await mount({ sourceAtMount: false, accountAtMount: true });
+
+		await press(mounted, "Reply All");
+		await press(mounted, "Deliver source");
+
+		assert.deepEqual(addressesIn(mounted, "Cc"), [
+			"other@example.com",
+			"copied@example.com",
+		]);
+	});
+
+	// The account is looked up from the source's mailbox, so it resolves after
+	// the source. Its address is the only thing that keeps the reader out of the
+	// Cc of their own reply (#819), so a seed made without it is made again.
+	it("takes the reader out of Cc when the account resolves after the press", async () => {
+		const mounted = await mount({ sourceAtMount: true, accountAtMount: false });
+
+		await press(mounted, "Reply All");
+		await press(mounted, "Resolve account");
+
+		assert.deepEqual(addressesIn(mounted, "Cc"), [
+			"other@example.com",
+			"copied@example.com",
+		]);
+	});
+});

package/src/components/mail/MoveToTrigger.tsx

@@ -141,8 +141,15 @@ export const MoveToTrigger = ({
 				close();
 			}
 		};
+		// The popover owns Escape while it is open (#732). The global triage
+		// layer listens on window and maps Escape to `back`, which closes the
+		// conversation; stopping propagation keeps one press from dismissing
+		// both. A second Escape then reaches the layer and closes as usual.
 		const handleKey = (event: KeyboardEvent) => {
-			if (event.key === "Escape") close();
+			if (event.key === "Escape") {
+				event.stopPropagation();
+				close();
+			}
 		};
 		document.addEventListener("mousedown", handlePointer);
 		document.addEventListener("keydown", handleKey);