@remit/web-client 0.0.154 → 0.0.156

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.154",
+  "version": "0.0.156",
   "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/compose-spellcheck-failure.render.test.ts

@@ -0,0 +1,114 @@
+/**
+ * The failure path of #707, end to end: a checker that will not start has to
+ * say so on screen. Each link in that chain is covered on its own elsewhere —
+ * what is asserted here is that they are actually joined, because every break
+ * in it looks identical from the writer's seat. A composer with no squiggles
+ * reads as a message with nothing wrong in it, and that is the one thing it
+ * must never come to mean by accident.
+ */
+
+import assert from "node:assert/strict";
+import { after, before, describe, it } from "node:test";
+import type { ComposeBody as ComposeBodyType } from "@remit/ui/rich-text";
+import { createElement, useMemo } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { useErrorBanners } from "../ui/ErrorBannerProvider";
+import { composeSpellcheck } from "./compose-spellcheck.js";
+
+let harness: DomHarness | undefined;
+let ComposeBody: typeof ComposeBodyType;
+
+class Marks {
+	readonly ranges: Range[] = [];
+	add(range: Range): void {
+		this.ranges.push(range);
+	}
+}
+
+const FAILURE = "the worker could not be started";
+
+before(async () => {
+	// The marks are drawn through the CSS Custom Highlight registry, which jsdom
+	// has neither half of. Without both the editor draws nothing and opens no
+	// provider at all, so there would be no failure to observe.
+	Object.defineProperty(globalThis, "CSS", {
+		value: { highlights: new Map<string, Marks>() },
+		configurable: true,
+	});
+	Object.defineProperty(globalThis, "Highlight", {
+		value: Marks,
+		configurable: true,
+	});
+	harness = createDomHarness();
+	// remit-ui's `.tsx` is transpiled here with the classic JSX runtime, which
+	// reads a global `React`. The harness installs it, so the editor is pulled
+	// in after one exists rather than at import time.
+	({ ComposeBody } = await import("@remit/ui/rich-text"));
+});
+
+after(() => {
+	harness?.close();
+	harness = undefined;
+});
+
+/**
+ * The composer as `ComposeForm` wires it — the app's own options object, with
+ * only the module load behind the provider swapped for one that fails the way
+ * a missing chunk does.
+ */
+const Composer = () => {
+	const { pushError } = useErrorBanners();
+	const spellcheck = useMemo(
+		() => ({
+			...composeSpellcheck(pushError),
+			provider: () => Promise.reject(new Error(FAILURE)),
+		}),
+		[pushError],
+	);
+	return createElement(ComposeBody, {
+		mode: "rich",
+		onModeChange: () => undefined,
+		initialHtml: "<p>Ths is redy.</p>",
+		initialText: "Ths is redy.",
+		onChange: () => undefined,
+		onConversionError: () => undefined,
+		onLanguageChange: () => undefined,
+		languages: ["en"],
+		spellcheck,
+	});
+};
+
+const mounted = (): DomHarness => {
+	if (!harness) throw new Error("the harness is not mounted");
+	return harness;
+};
+
+describe("a checker the composer cannot start", () => {
+	it("says what stopped, offers the report, and gives the message back", async () => {
+		mounted().renderApp(createElement(Composer));
+		await mounted().flush();
+
+		const banner = mounted().query('[aria-label="Notifications"]');
+		assert.ok(
+			banner,
+			"a checker that failed to start is on screen, not silent",
+		);
+		assert.match(banner.textContent ?? "", /Spellcheck stopped/);
+		assert.match(banner.textContent ?? "", /Spellcheck for en is off/);
+		assert.match(banner.textContent ?? "", /checker stopped running/);
+
+		const report = banner.querySelector<HTMLAnchorElement>("a[href]");
+		assert.ok(report, "the failure carries a way to report it");
+		const href = new URL(report.href);
+		assert.match(href.href, /github\.com\/.+\/issues\/new\?/);
+		assert.match(href.searchParams.get("body") ?? "", new RegExp(FAILURE));
+
+		const editable = mounted().query("[data-testid=compose-body]");
+		assert.ok(editable, "the writing surface is mounted");
+		assert.equal(
+			editable.getAttribute("spellcheck"),
+			"true",
+			"the browser checks the message when ours cannot",
+		);
+	});
+});

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/ui/ErrorBanner.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ErrorBanner } from "./ErrorBanner";
+
+/**
+ * The soft, dismissible notification (#55). It sits over the toolbar and the
+ * message list, so it is opaque and it names its own severity out loud rather
+ * than leaving colour to carry the meaning.
+ *
+ * A failure the user cannot act on still gets an action link, prefilled, so
+ * reporting it is one click instead of a form they have to assemble. The
+ * hrefs below stand in for the real report URL, which the app builds from
+ * build-time constants Storybook has no `define` for.
+ */
+const meta: Meta<typeof ErrorBanner> = {
+	title: "Components/ErrorBanner",
+	component: ErrorBanner,
+	parameters: { layout: "padded" },
+	args: {
+		id: "banner-1",
+		onDismiss: () => undefined,
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof ErrorBanner>;
+
+const REPORT_URL =
+	"https://github.com/remit-mail/reader/issues/new?title=Spellcheck+stopped";
+
+/** A mutation that failed, with the reason underneath. */
+export const Failed: Story = {
+	name: "Error",
+	args: {
+		severity: "error",
+		title: "Couldn't move message",
+		detail: "Connection reset by peer",
+	},
+};
+
+/** Nothing more to say than the title. */
+export const NoDetail: Story = {
+	args: {
+		severity: "error",
+		title: "Couldn't move message",
+	},
+};
+
+/** Something degraded rather than broke. */
+export const Warning: Story = {
+	args: {
+		severity: "warning",
+		title: "Draft saved locally",
+		detail: "The server did not answer, so this draft has not been uploaded.",
+	},
+};
+
+/** A statement of fact, not a problem. */
+export const Info: Story = {
+	args: {
+		severity: "info",
+		title: "Sync finished",
+		detail: "1,204 messages are up to date.",
+	},
+};
+
+/**
+ * The spellchecker stopping (#707): the writer cannot fix this one, so the
+ * banner says what stopped, what is happening instead, and offers the report
+ * already filled in.
+ */
+export const WithActionLink: Story = {
+	args: {
+		severity: "warning",
+		title: "Spellcheck stopped",
+		detail:
+			"Spellcheck for en is off: the checker could not start. Your browser is checking this message instead. Failed to fetch dynamically imported module.",
+		action: { label: "Report this", href: REPORT_URL },
+	},
+};
+
+/** The action link on the dark theme. */
+export const WithActionLinkDark: Story = {
+	name: "With Action Link (dark)",
+	parameters: { theme: "dark" },
+	args: WithActionLink.args,
+};

package/src/components/ui/ErrorBanner.tsx

@@ -1,12 +1,16 @@
 import { AlertCircle, AlertTriangle, Info, X } from "lucide-react";
 import { cn } from "../../lib/utils";
-import type { ErrorBannerSeverity } from "./error-banners.js";
+import type {
+	ErrorBannerAction,
+	ErrorBannerSeverity,
+} from "./error-banners.js";
 
 interface ErrorBannerProps {
 	id: string;
 	severity: ErrorBannerSeverity;
 	title: string;
 	detail?: string;
+	action?: ErrorBannerAction;
 	onDismiss: (id: string) => void;
 }
 
@@ -51,6 +55,7 @@ export const ErrorBanner = ({
 	severity,
 	title,
 	detail,
+	action,
 	onDismiss,
 }: ErrorBannerProps) => {
 	const styles = SEVERITY_STYLES[severity];
@@ -77,6 +82,16 @@ export const ErrorBanner = ({
 				{detail && (
 					<p className="mt-0.5 text-xs text-fg-muted break-words">{detail}</p>
 				)}
+				{action && (
+					<a
+						href={action.href}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="mt-1 inline-block text-xs font-medium text-accent-2 underline underline-offset-2"
+					>
+						{action.label}
+					</a>
+				)}
 			</div>
 			<button
 				type="button"

package/src/components/ui/ErrorBannerStack.tsx

@@ -25,6 +25,7 @@ export const ErrorBannerStack = ({
 						severity={entry.severity}
 						title={entry.title}
 						detail={entry.detail}
+						action={entry.action}
 						onDismiss={onDismiss}
 					/>
 				))}

package/src/components/ui/error-banners.ts

@@ -1,10 +1,20 @@
 export type ErrorBannerSeverity = "error" | "warning" | "info";
 
+/**
+ * A way out of the banner. A failure the user cannot act on is still theirs to
+ * report, and a link they have to assemble themselves is one nobody follows.
+ */
+export interface ErrorBannerAction {
+	label: string;
+	href: string;
+}
+
 export interface ErrorBannerEntry {
 	id: string;
 	severity: ErrorBannerSeverity;
 	title: string;
 	detail?: string;
+	action?: ErrorBannerAction;
 	createdAt: number;
 }
 
@@ -12,6 +22,7 @@ export interface PushErrorInput {
 	severity?: ErrorBannerSeverity;
 	title: string;
 	detail?: string;
+	action?: ErrorBannerAction;
 	/**
 	 * The error being reported, when there is one. Pass it: a banner is a soft
 	 * surface, and `pushError` uses this to refuse errors that are not soft —
@@ -116,5 +127,6 @@ export const buildEntry = (
 	severity: input.severity ?? "error",
 	title: input.title,
 	detail: input.detail,
+	action: input.action,
 	createdAt: now,
 });