@remit/web-client 0.0.153 → 0.0.155

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.153",
+  "version": "0.0.155",
   "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

@@ -49,6 +49,7 @@ import {
 import type { AddressEntry } from "./AddressField";
 import { AddressField } from "./AddressField";
 import { ComposeSmtpMissingBanner } from "./ComposeSmtpMissingBanner";
+import { composeSpellcheck } from "./compose-spellcheck.js";
 
 const LazyComposeBody = lazy(() =>
 	import("@remit/ui/rich-text").then((m) => ({ default: m.ComposeBody })),
@@ -533,6 +534,11 @@ export const ComposeForm = ({
 		[configured],
 	);
 
+	// The editor reopens the checker whenever the composer's language changes,
+	// so the tag the chip and detection settle on is the only one it is ever
+	// asked for.
+	const spellcheck = useMemo(() => composeSpellcheck(pushError), [pushError]);
+
 	// The action bar refuses a second press while one is in flight, but the
 	// editor's own Cmd+Enter goes straight to `attemptSend`, and the write that
 	// now precedes the request widens the window a second press lands in.
@@ -805,6 +811,7 @@ export const ComposeForm = ({
 					languages={accountLanguages}
 					initialLanguage={draftLanguage}
 					onLanguageChange={setComposeLanguage}
+					spellcheck={spellcheck}
 				/>
 			</Suspense>
 		</ComposeFormShell>

package/src/components/compose/ComposeProvider.tsx

@@ -115,15 +115,11 @@ export const ComposeProvider = ({
 	// 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>;
-			// A folder names its open conversation in the path, so leaving it is a
-			// navigation up to the list; the lists still to move name it in the query.
+			// Every list names its open conversation in the path, so leaving one is a
+			// navigation up to the list.
 			const threadMailboxId = locationOpensDetail(location.pathname)
 				? routeParams?.mailboxId
 				: undefined;
-			const showsThread =
-				Boolean(threadMailboxId) ||
-				Boolean(search.selectedMessageId ?? search.selectedThreadId);
 			if (!hostsComposeSurface(location.pathname)) {
 				if (target.status === "loading") {
 					pushError({
@@ -150,33 +146,15 @@ export const ComposeProvider = ({
 				return;
 			}
 			setState({ ...params, isOpen: true });
-			if (!showsThread) return;
+			if (!threadMailboxId) return;
 			// A push, so Back reopens the message.
-			if (threadMailboxId) {
-				navigate({
-					to: "/mail/$mailboxId",
-					params: { mailboxId: threadMailboxId },
-					search: (prev) => prev,
-				});
-				return;
-			}
 			navigate({
-				to: ".",
-				search: (prev: Record<string, unknown>) => ({
-					...prev,
-					selectedMessageId: undefined,
-					selectedThreadId: undefined,
-				}),
+				to: "/mail/$mailboxId",
+				params: { mailboxId: threadMailboxId },
+				search: (prev) => prev,
 			});
 		},
-		[
-			navigate,
-			location.pathname,
-			location.search,
-			routeParams?.mailboxId,
-			target,
-			pushError,
-		],
+		[navigate, location.pathname, routeParams?.mailboxId, target, pushError],
 	);
 
 	const closeCompose = useCallback(() => {

package/src/components/compose/compose-clears-open-thread.render.test.ts

@@ -62,8 +62,29 @@ const RootLayout = () =>
 		createElement(Outlet),
 	);
 
+/**
+ * The folder's real shape: the thread and the message are segments under the
+ * list, so an open conversation is something the address holds and compose has
+ * to navigate out of.
+ */
 const routerAt = (href: string, layout = RootLayout): AnyRouter => {
 	const rootRoute = createRootRoute({ component: layout });
+	const mailboxRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/mail/$mailboxId",
+		validateSearch: (search: Record<string, unknown>) => search,
+		component: Outlet,
+	});
+	const threadRoute = createRoute({
+		getParentRoute: () => mailboxRoute,
+		path: "/$threadId",
+		component: Outlet,
+	});
+	const messageRoute = createRoute({
+		getParentRoute: () => threadRoute,
+		path: "/$messageId",
+		component: () => null,
+	});
 	const routeTree = rootRoute.addChildren([
 		createRoute({
 			getParentRoute: () => rootRoute,
@@ -71,12 +92,7 @@ const routerAt = (href: string, layout = RootLayout): AnyRouter => {
 			validateSearch: (search: Record<string, unknown>) => search,
 			component: () => null,
 		}),
-		createRoute({
-			getParentRoute: () => rootRoute,
-			path: "/mail/$mailboxId",
-			validateSearch: (search: Record<string, unknown>) => search,
-			component: () => null,
-		}),
+		mailboxRoute.addChildren([threadRoute.addChildren([messageRoute])]),
 		createRoute({
 			getParentRoute: () => rootRoute,
 			path: "/settings",
@@ -145,11 +161,11 @@ const press = async (mounted: DomHarness): Promise<HTMLElement> => {
 	return button;
 };
 
+const THREAD_HREF = `/mail/${INBOX_ID}/th-1/msg-1`;
+
 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`,
-		);
+	it("walks up to the list so the pane can render the surface", async () => {
+		const router = routerAt(THREAD_HREF);
 		const mounted = await mount(router);
 
 		const button = mounted.byText("button", "Compose");
@@ -159,33 +175,27 @@ describe("opening compose over an open message (#703)", () => {
 
 		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`,
-		);
+	it("keeps the query, so the search the user typed survives", async () => {
+		const router = routerAt(`${THREAD_HREF}?q=invoice`);
 		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/);
+		assert.equal(router.history.location.pathname, `/mail/${INBOX_ID}`);
+		assert.match(router.history.location.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 router = routerAt(THREAD_HREF);
 		const mounted = await mount(router);
 
 		await press(mounted);
 		router.history.back();
 		await mounted.flush();
 
-		assert.match(router.history.location.search, /selectedMessageId=msg-1/);
+		assert.equal(router.history.location.pathname, THREAD_HREF);
 	});
 
 	it("adds no history entry when the pane had nothing open", async () => {

package/src/components/compose/compose-spellcheck.test.ts

@@ -0,0 +1,122 @@
+/**
+ * What the composer hands the editor (#707): a worker opened for the language
+ * the message is being written in, and a failure nobody has to guess at.
+ *
+ * The two ways checking stops look identical on screen — no squiggles — and
+ * mean opposite things. A language with no dictionary is expected, and the
+ * browser carries on checking. A checker that was supposed to start and did not
+ * is a fault, and it is named on screen with a way to report it.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type { PushErrorInput } from "../ui/error-banners.js";
+import { composeSpellcheck, spellcheckFailure } from "./compose-spellcheck.js";
+
+interface WorkerMessage {
+	readonly type: string;
+	readonly language?: string;
+}
+
+const opened: { url: string; messages: WorkerMessage[] }[] = [];
+
+class FakeWorker {
+	readonly messages: WorkerMessage[] = [];
+	constructor(url: URL) {
+		opened.push({ url: url.href, messages: this.messages });
+	}
+	postMessage(message: WorkerMessage): void {
+		this.messages.push(message);
+	}
+	addEventListener(): void {}
+	terminate(): void {}
+}
+
+const withWorker = <T>(run: () => Promise<T>): Promise<T> => {
+	Object.defineProperty(globalThis, "Worker", {
+		value: FakeWorker,
+		configurable: true,
+	});
+	return run();
+};
+
+afterEach(() => {
+	opened.length = 0;
+});
+
+describe("the checker the composer opens", () => {
+	it("asks the worker for the language the message is in", async () => {
+		const provider = await withWorker(() =>
+			composeSpellcheck(() => undefined).provider("en"),
+		);
+
+		assert.equal(provider?.language, "en");
+		assert.equal(opened.length, 1);
+		assert.match(opened[0].url, /rich-text-spellcheck-worker/);
+		assert.deepEqual(opened[0].messages, [{ type: "open", language: "en" }]);
+		provider?.close();
+	});
+
+	it("starts no worker for a language the build carries no words for", async () => {
+		const provider = await withWorker(() =>
+			composeSpellcheck(() => undefined).provider("nl"),
+		);
+
+		assert.equal(provider, null);
+		assert.deepEqual(opened, []);
+	});
+
+	it("reports nothing while the checker is coming up or running", () => {
+		const reported: PushErrorInput[] = [];
+		const { onStatus } = composeSpellcheck((input) => reported.push(input));
+
+		onStatus?.({ state: "opening", language: "en" });
+		onStatus?.({ state: "ready", language: "en" });
+		onStatus?.({ state: "unavailable", language: "nl" });
+
+		assert.deepEqual(reported, []);
+	});
+
+	it("says what stopped, and offers the report prefilled", () => {
+		const reported: PushErrorInput[] = [];
+		const { onStatus } = composeSpellcheck((input) => reported.push(input));
+
+		onStatus?.({
+			state: "failed",
+			language: "en",
+			reason: "worker",
+			detail: "Worker is not defined",
+		});
+
+		assert.equal(reported.length, 1);
+		const banner = reported[0];
+		assert.match(banner.detail ?? "", /Spellcheck for en is off/);
+		assert.match(banner.detail ?? "", /browser is checking this message/);
+		assert.match(banner.detail ?? "", /Worker is not defined/);
+		const report = new URL(banner.action?.href ?? "https://example.invalid");
+		assert.match(report.href, /github\.com\/.+\/issues\/new\?/);
+		assert.match(
+			report.searchParams.get("body") ?? "",
+			/Worker is not defined/,
+		);
+		assert.match(report.searchParams.get("title") ?? "", /Spellcheck stopped/);
+	});
+
+	it("names the download and the engine apart from the worker", () => {
+		const download = spellcheckFailure({
+			state: "failed",
+			language: "en",
+			reason: "download",
+			detail: "404",
+		});
+		const engine = spellcheckFailure({
+			state: "failed",
+			language: "en",
+			reason: "engine",
+			detail: "bad wasm",
+		});
+
+		assert.match(download.detail ?? "", /dictionary could not be downloaded/);
+		assert.match(engine.detail ?? "", /checker could not start/);
+	});
+});

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

@@ -0,0 +1,56 @@
+/**
+ * The checker the composer writes against. The engine runs in a worker, opened
+ * once per language and taken down with the surface, and the module holding it
+ * is loaded on demand so the worker chunk stays out of every other screen.
+ *
+ * A language with no dictionary is not a failure: the provider answers null,
+ * the editor leaves the browser's own checking switched on, and the writer
+ * still gets underlines. A checker that was supposed to come up and did not is
+ * a failure, and it says so — an editor that has quietly stopped marking
+ * anything reads exactly like text with nothing wrong in it.
+ */
+
+import type { ProviderStatus, SpellcheckOptions } from "@remit/ui/rich-text";
+import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
+import type { PushErrorInput } from "../ui/error-banners.js";
+
+const WHAT_FAILED: Record<"download" | "engine" | "worker", string> = {
+	download: "its dictionary could not be downloaded",
+	engine: "the checker could not start",
+	worker: "the checker stopped running",
+};
+
+export const spellcheckFailure = (
+	status: Extract<ProviderStatus, { state: "failed" }>,
+): PushErrorInput => {
+	const summary = `Spellcheck for ${status.language} is off: ${WHAT_FAILED[status.reason]}.`;
+	return {
+		severity: "warning",
+		title: "Spellcheck stopped",
+		detail: `${summary} Your browser is checking this message instead. ${status.detail}`,
+		action: {
+			label: "Report this",
+			href: buildGitHubIssueUrl(
+				buildBugReportContext({
+					title: `Spellcheck stopped: ${status.reason} (${status.language})`,
+					errorMessage: `${summary} ${status.detail}`,
+				}),
+			),
+		},
+	};
+};
+
+export const composeSpellcheck = (
+	report: (input: PushErrorInput) => void,
+): SpellcheckOptions => ({
+	provider: async (language) => {
+		const { openSpellcheckWorker } = await import(
+			"@remit/ui/spellcheck-worker"
+		);
+		return openSpellcheckWorker(language);
+	},
+	onStatus: (status) => {
+		if (status.state !== "failed") return;
+		report(spellcheckFailure(status));
+	},
+});

package/src/components/layout/ComposeFab.tsx

@@ -14,9 +14,7 @@ import { locationOpensDetail } from "@/lib/mail-route";
  *     `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. The brief and a folder say so in
- *     their path; the flagged list, still to move, says so in
- *     `?selectedMessageId=…`.
+ *     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.
  */
 export const ComposeFab = () => {
@@ -26,10 +24,7 @@ export const ComposeFab = () => {
 		openCompose({ mode: "new" });
 	}, [openCompose]);
 
-	const search = location.search as Record<string, unknown> | undefined;
-	const isReadingThread =
-		Boolean(search?.selectedMessageId) ||
-		locationOpensDetail(location.pathname);
+	const isReadingThread = locationOpensDetail(location.pathname);
 
 	if (!location.pathname.startsWith("/mail") || state.isOpen || isReadingThread)
 		return null;

package/src/components/mail/FlaggedList.tsx

@@ -3,19 +3,20 @@
  *
  * Reads the starred listing through `useStarredThreads` — GET /threads with
  * `starred=true`, served by the `byStarred` index — which returns every starred
- * thread in the config across all non-muted mailboxes, paged. `FlaggedPane`
- * resolves the open thread from that same hook, so every row rendered here can
- * be opened. Starredness is decided server-side from `hasStars`; the client
- * neither re-filters nor caps the set, so a starred thread outside the newest
- * inbox page still appears. Rendered as one continuous list (no category
- * sections). The shared `MailViewChrome` owns the `MailHeader` + filter
- * expando; the kit `MessageListPane` (flat, no `briefFilters`) owns the loading
- * / empty / error chrome and keyboard hints, with a consumer-supplied
- * `listBody` so the real rows render at every width.
+ * thread in the config across all non-muted mailboxes, paged. Every row names
+ * its thread, which is the whole address a conversation opens by, so a starred
+ * message filed outside the inbox opens like any other. Starredness is decided
+ * server-side from `hasStars`; the client neither re-filters nor caps the set,
+ * so a starred thread outside the newest inbox page still appears. Rendered as
+ * one continuous list (no category sections). The shared `MailViewChrome` owns
+ * the `MailHeader` + filter expando; the kit `MessageListPane` (flat, no
+ * `briefFilters`) owns the loading / empty / error chrome and keyboard hints,
+ * with a consumer-supplied `listBody` so the real rows render at every width.
  */
 import {
 	flaggedFilterConfig,
 	MessageListPane,
+	type SearchResult,
 	type ThreadRowData,
 	type Verb,
 } from "@remit/ui";
@@ -37,6 +38,7 @@ import { rowToSearchResult } from "@/lib/search-result";
 import { parseSearchTokens } from "@/lib/search-tokens";
 import { dedupeByThread } from "@/lib/starred-rows";
 import { useSelectionWizard } from "@/lib/wizard-history";
+import type { OpenThreadTarget } from "@/routing";
 import { MailViewChrome } from "./MailViewChrome";
 import type { MessageListCommands } from "./MessageList";
 import { MessageRow } from "./MessageRow";
@@ -101,7 +103,14 @@ function StarredWizardHost({
 
 interface FlaggedListProps {
 	selectedMessageId?: string;
-	onSelectMessage?: (id: string, options?: OpenMessageOptions) => void;
+	/**
+	 * Opens a row. Every starred row names its thread, so a message filed outside
+	 * the inbox opens by exactly the same route as one inside it.
+	 */
+	onOpenThread?: (
+		target: OpenThreadTarget,
+		options?: OpenMessageOptions,
+	) => void;
 	/** Where the list publishes the commands the keyboard layer drives. */
 	commandsRef?: RefObject<MessageListCommands | null>;
 	/** Cursor / selection / display order, reported up to the triage layer. */
@@ -111,7 +120,7 @@ interface FlaggedListProps {
 
 export function FlaggedList({
 	selectedMessageId,
-	onSelectMessage,
+	onOpenThread,
 	commandsRef,
 	onTriageContextChange,
 	onDeleteMessages,
@@ -171,6 +180,27 @@ export function FlaggedList({
 			);
 	}, [threads, selectedCategory, activeFilters, sq, queryTokens]);
 
+	const openRow = useCallback(
+		(id: string, options?: OpenMessageOptions) => {
+			const threadId = rows.find((row) => row.id === id)?.threadId;
+			if (!threadId) return;
+			onOpenThread?.({ threadId, messageId: id }, options);
+		},
+		[rows, onOpenThread],
+	);
+
+	// The two-engine results panel, whose semantic hits are in no list at all —
+	// each one carries the thread it belongs to.
+	const openResult = useCallback(
+		(result: SearchResult) => {
+			const threadId =
+				result.threadId ?? rows.find((row) => row.id === result.id)?.threadId;
+			if (!threadId) return;
+			onOpenThread?.({ threadId, messageId: result.id });
+		},
+		[rows, onOpenThread],
+	);
+
 	const preset = useMemo(() => flaggedFilterConfig(), []);
 
 	const searchResults = useMemo(
@@ -206,7 +236,7 @@ export function FlaggedList({
 							key={thread.id}
 							thread={thread}
 							active={thread.id === selectedMessageId}
-							onClick={() => onSelectMessage?.(thread.id)}
+							onClick={() => openRow(thread.id)}
 						/>
 					))}
 				</div>
@@ -236,7 +266,7 @@ export function FlaggedList({
 			onClearFilters={clearFilters}
 			searchResults={searchResults}
 			searchLoading={isLoading}
-			onSelectSearchResult={(result) => onSelectMessage?.(result.id)}
+			onSelectSearchResult={openResult}
 			// A committed search renders in this view's own rows (`rows` already
 			// narrows to the query above), so the multi-select toolbar stays
 			// reachable exactly as it does on the mailbox route (#212). The
@@ -245,7 +275,7 @@ export function FlaggedList({
 		>
 			<ThreadListInteraction
 				selectedMessageId={selectedMessageId}
-				onOpen={(id, options) => onSelectMessage?.(id, options)}
+				onOpen={openRow}
 				onDeleteMessages={onDeleteMessages}
 				onSelectionVerb={wizard.start}
 				wizardOpen={wizard.isOpen}
@@ -263,7 +293,7 @@ export function FlaggedList({
 					onRetry={() => refetch()}
 					onReportError={handleReportError}
 					selectedThreadId={selectedMessageId}
-					onSelectThread={onSelectMessage}
+					onSelectThread={openRow}
 					isDesktop={isDesktop}
 					selectionBar={<ThreadListSelectionBar title="Starred" />}
 					listBody={