@remit/web-client 0.0.203 → 0.0.205

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.203",
+  "version": "0.0.205",
   "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/spellcheck/vite-plugin-licence.test.ts

@@ -7,22 +7,52 @@
  * an image whose notice points at a `LICENSE` nobody staged. That is the one
  * failure mode a reader cannot see and a distributor is answerable for.
  *
- * The dictionary is shadowed rather than the real one damaged: node resolves
- * from the importer outwards, so a package planted in this directory's own
- * `node_modules` answers for `dictionary-en-gb` here and nowhere else. That
- * makes this file its own process — node's test runner gives each file one —
- * because module resolution is cached per process and a sibling test resolving
- * the real package first would decide which one this sees.
+ * The dictionary is shadowed inside this test's own temporary tree rather than
+ * anywhere on the shared resolution path: the plugin sources are copied in
+ * beside a private `node_modules`, so `require.resolve` from that copy answers
+ * for the shadow and nowhere else. Planting into `spellcheck/node_modules`
+ * instead would be visible to every other test file — node's runner isolates
+ * the module cache per process, never the filesystem, and runs files
+ * concurrently.
  */
 
 import assert from "node:assert/strict";
-import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import {
+	copyFileSync,
+	mkdirSync,
+	mkdtempSync,
+	readdirSync,
+	rmSync,
+	writeFileSync,
+} from "node:fs";
+import { createRequire } from "node:module";
 import { tmpdir } from "node:os";
-import { join } from "node:path";
+import { dirname, join } from "node:path";
 import { after, describe, it } from "node:test";
+import { pathToFileURL } from "node:url";
 
-const shadowRoot = join(import.meta.dirname, "node_modules");
-const shadow = join(shadowRoot, "dictionary-en-gb");
+const here = import.meta.dirname;
+const tmpRoot = mkdtempSync(join(tmpdir(), "spellcheck-licence-"));
+after(() => {
+	rmSync(tmpRoot, { recursive: true, force: true });
+});
+
+// The plugin under test, imported from inside the temporary tree so its
+// package resolution starts at the tree's own `node_modules`.
+const src = join(tmpRoot, "spellcheck");
+const engineDir = join(tmpRoot, "engine");
+mkdirSync(src, { recursive: true });
+// Every local import of vite-plugin.ts must be listed here.
+for (const name of ["vite-plugin.ts", "languages.ts"]) {
+	copyFileSync(join(here, name), join(src, name));
+}
+
+// A licence-less shadow of `dictionary-en-gb`, plus the real `dictionary-en`
+// copied across for the case that does stage a licence.
+const modules = join(tmpRoot, "node_modules");
+const real = (name: string) =>
+	dirname(createRequire(import.meta.url).resolve(name));
+const shadow = join(modules, "dictionary-en-gb");
 mkdirSync(shadow, { recursive: true });
 writeFileSync(
 	join(shadow, "package.json"),
@@ -31,8 +61,26 @@ writeFileSync(
 writeFileSync(join(shadow, "index.js"), "");
 writeFileSync(join(shadow, "index.aff"), "SET UTF-8\n");
 writeFileSync(join(shadow, "index.dic"), "1\nword\n");
+const realEn = real("dictionary-en");
+const stagedEn = join(modules, "dictionary-en");
+mkdirSync(stagedEn, { recursive: true });
+for (const entry of [
+	"package.json",
+	"index.js",
+	"index.aff",
+	"index.dic",
+] as const) {
+	copyFileSync(join(realEn, entry), join(stagedEn, entry));
+}
+// The licence text under whatever name upstream ships it.
+const licenceFile = readdirSync(realEn).find((entry) =>
+	/^licen[cs]e/i.test(entry),
+);
+assert.ok(licenceFile);
+copyFileSync(join(realEn, licenceFile), join(stagedEn, licenceFile));
 
-const engineDir = mkdtempSync(join(tmpdir(), "spellcheck-engine-"));
+// Pins read from beside the engine; the stub carries its own.
+mkdirSync(engineDir, { recursive: true });
 for (const name of [
 	"hunspell.wasm",
 	"hunspell.mjs",
@@ -41,15 +89,15 @@ for (const name of [
 ]) {
 	writeFileSync(join(engineDir, name), "stub");
 }
+writeFileSync(
+	join(engineDir, "pin.env"),
+	["HUNSPELL_VERSION=0.0.0-test", "HUNSPELL_SHA256=test"].join("\n"),
+);
 process.env.REMIT_SPELLCHECK_ENGINE_DIR = engineDir;
 
-const { stageSpellcheck } = await import("./vite-plugin.ts");
-
-after(() => {
-	rmSync(shadow, { recursive: true, force: true });
-	rmSync(shadowRoot, { recursive: true, force: true });
-	rmSync(engineDir, { recursive: true, force: true });
-});
+const { stageSpellcheck }: typeof import("./vite-plugin.ts") = await import(
+	pathToFileURL(join(src, "vite-plugin.ts")).href
+);
 
 describe("a dictionary that ships no licence text", () => {
 	it("stops the build rather than staging it", () => {

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",
+		]);
+	});
+});