@remit/web-client 0.0.155 → 0.0.157

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.155",
+  "version": "0.0.157",
   "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/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/layout/Drawer.tsx

@@ -15,6 +15,10 @@ interface DrawerProps {
  * Modal navigation drawer. Slides in from the side with a scrim behind.
  * Dismissed by scrim tap, escape key, or the close button. Focus moves into
  * the drawer on open and returns to the previously focused element on close.
+ *
+ * Visibility is `isOpen` alone, at every width: the drawer is the intelligence
+ * surface wherever the rail has no room, which includes the two-pane desktop
+ * band between 1024 and 1280px.
  */
 export const Drawer = ({
 	isOpen,
@@ -67,7 +71,7 @@ export const Drawer = ({
 
 	return (
 		<div
-			className="fixed inset-0 z-50 lg:hidden"
+			className="fixed inset-0 z-50"
 			role="dialog"
 			aria-modal="true"
 			aria-label={ariaLabel}

package/src/components/mail/AuthenticityBanner.tsx

@@ -0,0 +1,45 @@
+import type { RemitImapMessageAuthenticity } from "@remit/api-http-client/types.gen.ts";
+import { ShieldAlert } from "lucide-react";
+
+/**
+ * Danger banner rendered above the thread body when DKIM mismatch is detected.
+ * Design spec (03-reading-and-intelligence.md): "a danger banner renders above
+ * the body: 'This message claims to be a company but was sent from a personal
+ * mailbox.' with a 'Why?' link that opens/highlights this section."
+ *
+ * The link sits in the sentence at the sentence's own size. Set apart as
+ * smaller, right-floated chrome it read as a label rather than the way in.
+ */
+export function AuthenticityBanner({
+	authenticity,
+	onOpenIntelligence,
+}: {
+	authenticity: RemitImapMessageAuthenticity;
+	onOpenIntelligence?: () => void;
+}) {
+	if (!authenticity.dkimMismatch) return null;
+
+	return (
+		<div className="flex items-start gap-2 rounded-none border-b border-danger/20 bg-danger-soft px-5 py-2.5 text-sm">
+			<ShieldAlert className="mt-0.5 size-4 shrink-0 text-danger" />
+			<p className="flex-1 leading-snug text-fg">
+				This message claims to be from{" "}
+				<span className="font-semibold">{authenticity.fromDomain}</span> but was
+				sent
+				{authenticity.dkimDomain
+					? ` via ${authenticity.dkimDomain}`
+					: " from a different domain"}
+				.{" "}
+				{onOpenIntelligence && (
+					<button
+						type="button"
+						onClick={onOpenIntelligence}
+						className="font-medium text-danger hover:underline"
+					>
+						Why?
+					</button>
+				)}
+			</p>
+		</div>
+	);
+}

package/src/components/mail/ConversationView.tsx

@@ -6,7 +6,6 @@ import {
 import type { RemitImapMessageAuthenticity } from "@remit/api-http-client/types.gen.ts";
 import { MobileReadingPane } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
-import { ShieldAlert } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { ComposeMode } from "@/components/compose/ComposeProvider";
 import { InlineCompose } from "@/components/compose/InlineCompose";
@@ -18,6 +17,7 @@ import { useMarkAsRead } from "@/hooks/useMarkAsRead";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import { useSwipeNavigation } from "@/hooks/useSwipeNavigation";
 import { useToggleStar } from "@/hooks/useToggleStar";
+import { AuthenticityBanner } from "./AuthenticityBanner";
 import { MessageCard } from "./MessageCard";
 
 interface ConversationViewProps {
@@ -95,46 +95,6 @@ const LoadingSkeleton = () => (
 	</div>
 );
 
-/**
- * Danger banner rendered above the thread body when DKIM mismatch is detected.
- * Design spec (03-reading-and-intelligence.md): "a danger banner renders above
- * the body: 'This message claims to be a company but was sent from a personal
- * mailbox.' with a 'Why?' link that opens/highlights this section."
- */
-function AuthenticityBanner({
-	authenticity,
-	onOpenIntelligence,
-}: {
-	authenticity: RemitImapMessageAuthenticity;
-	onOpenIntelligence?: () => void;
-}) {
-	if (!authenticity.dkimMismatch) return null;
-
-	return (
-		<div className="flex items-start gap-2 rounded-none border-b border-danger/20 bg-danger-soft px-5 py-2.5 text-sm">
-			<ShieldAlert className="mt-0.5 size-4 shrink-0 text-danger" />
-			<p className="flex-1 leading-snug text-fg">
-				This message claims to be from{" "}
-				<span className="font-semibold">{authenticity.fromDomain}</span> but was
-				sent
-				{authenticity.dkimDomain
-					? ` via ${authenticity.dkimDomain}`
-					: " from a different domain"}
-				.
-			</p>
-			{onOpenIntelligence && (
-				<button
-					type="button"
-					onClick={onOpenIntelligence}
-					className="shrink-0 text-2xs font-medium text-danger hover:underline"
-				>
-					Why?
-				</button>
-			)}
-		</div>
-	);
-}
-
 export const ConversationView = ({
 	threadId,
 	mailboxId,

package/src/components/mail/MailboxPane.tsx

@@ -1167,13 +1167,51 @@ function MailboxReading() {
 		onToolbarDiscardDraft,
 		onToolbarMove,
 		composeState,
+		handleDeselectIfRemoved,
 	} = useMailboxPane();
-	// The rail's own width gate, not the shell tier: between 1024 and 1280 the
-	// reading pane is mounted but the rail is not, so "enabled" would promise an
-	// open that cannot happen.
+	// Which surface intelligence has here: the rail between 1280 and up, the
+	// mobile drawer below that, where the reading pane is mounted and the rail
+	// has no room.
 	const railFits = useAppShellLayout()?.showIntelligencePane ?? false;
 	const hasThread = Boolean(conversation);
-	const canToggleIntelligence = railFits && hasThread;
+
+	// The drawer is modal, so it opens only when it is asked for — and only for
+	// the thread it was asked for. `intelligenceOpen` is the rail's persisted
+	// preference and the DKIM auto-open sets it on every tier, so driving the
+	// drawer from it would throw a scrim over a message the moment one was
+	// selected. Naming the thread is also what closes it again when the reader
+	// moves on: a bare flag would still be set when they came back.
+	const [drawerThreadId, setDrawerThreadId] = useState<string | null>(null);
+	const openThreadId = conversation?.threadId ?? null;
+	// Derived rather than stored: the drawer is up only while the thread it was
+	// opened for is still the one on screen, so moving to another one closes it
+	// with no effect to run. Closing it from an effect would paint one frame of
+	// an open drawer over the newly opened thread first.
+	const drawerOpen =
+		!railFits && openThreadId !== null && drawerThreadId === openThreadId;
+
+	const closeIntelligenceDrawer = useCallback(
+		() => setDrawerThreadId(null),
+		[],
+	);
+	const openIntelligenceDrawer = useCallback(
+		() => setDrawerThreadId(openThreadId),
+		[openThreadId],
+	);
+	// The banner's "Why?" — always an open, never a close.
+	const openIntelligence = railFits
+		? onToggleIntelligence
+		: openIntelligenceDrawer;
+	// The toolbar's control, which toggles whichever surface this width has.
+	const toggleIntelligence = useCallback(() => {
+		if (railFits) {
+			onToggleIntelligence();
+			return;
+		}
+		setDrawerThreadId(drawerOpen ? null : openThreadId);
+	}, [railFits, onToggleIntelligence, drawerOpen, openThreadId]);
+	const intelligenceShowing =
+		hasThread && (railFits ? intelligenceOpen : drawerOpen);
 
 	const detailPane =
 		composeState.isOpen && !conversation ? (
@@ -1186,9 +1224,7 @@ function MailboxReading() {
 				selectedMessageId={conversation.messageId}
 				authenticity={conversation.authenticity}
 				onOpenIntelligence={
-					conversation.authenticity?.dkimMismatch
-						? onToggleIntelligence
-						: undefined
+					conversation.authenticity?.dkimMismatch ? openIntelligence : undefined
 				}
 				composeRequest={toolbarComposeRequest}
 				onComposeClose={onClearComposeRequest}
@@ -1198,37 +1234,54 @@ function MailboxReading() {
 		);
 
 	return (
-		<section className="flex h-full w-full min-w-0 flex-col bg-canvas">
-			<MessageToolbar
-				hasThread={hasThread}
-				intelligenceOpen={canToggleIntelligence && intelligenceOpen}
-				canToggleIntelligence={canToggleIntelligence}
-				onToggleIntelligence={onToggleIntelligence}
-				onReply={hasThread ? onToolbarReply : undefined}
-				onReplyAll={hasThread ? onToolbarReplyAll : undefined}
-				onForward={hasThread ? onToolbarForward : undefined}
-				canDelete={hasThread || hasRemitDraftOpen}
-				onDelete={
-					hasThread
-						? onToolbarDelete
-						: hasRemitDraftOpen
-							? onToolbarDiscardDraft
+		<>
+			<section className="flex h-full w-full min-w-0 flex-col bg-canvas">
+				<MessageToolbar
+					hasThread={hasThread}
+					intelligenceOpen={intelligenceShowing}
+					canToggleIntelligence={hasThread}
+					onToggleIntelligence={toggleIntelligence}
+					onReply={hasThread ? onToolbarReply : undefined}
+					onReplyAll={hasThread ? onToolbarReplyAll : undefined}
+					onForward={hasThread ? onToolbarForward : undefined}
+					canDelete={hasThread || hasRemitDraftOpen}
+					onDelete={
+						hasThread
+							? onToolbarDelete
+							: hasRemitDraftOpen
+								? onToolbarDiscardDraft
+								: undefined
+					}
+					onToggleStar={hasThread ? onToolbarStar : undefined}
+					isStarred={selectedThread?.hasStars}
+					moveContext={
+						hasThread && mailboxAccountId
+							? {
+									accountId: mailboxAccountId,
+									currentMailboxId: mailboxId,
+									onMove: onToolbarMove,
+								}
 							: undefined
-				}
-				onToggleStar={hasThread ? onToolbarStar : undefined}
-				isStarred={selectedThread?.hasStars}
-				moveContext={
-					hasThread && mailboxAccountId
-						? {
-								accountId: mailboxAccountId,
-								currentMailboxId: mailboxId,
-								onMove: onToolbarMove,
-							}
-						: undefined
-				}
-			/>
-			<div className="min-h-0 flex-1 overflow-hidden">{detailPane}</div>
-		</section>
+					}
+				/>
+				<div className="min-h-0 flex-1 overflow-hidden">{detailPane}</div>
+			</section>
+			<Drawer
+				isOpen={drawerOpen}
+				onClose={closeIntelligenceDrawer}
+				ariaLabel="Message details"
+				side="right"
+			>
+				<IntelligencePane
+					onClose={closeIntelligenceDrawer}
+					thread={selectedThread}
+					mailboxId={mailboxId}
+					accountId={mailboxAccountId}
+					hideCloseButton
+					onAfterOptimisticRemove={handleDeselectIfRemoved}
+				/>
+			</Drawer>
+		</>
 	);
 }
 

package/src/components/mail/MessageToolbar.tsx

@@ -26,9 +26,10 @@ export interface MessageToolbarProps {
 	hasThread: boolean;
 	intelligenceOpen: boolean;
 	/**
-	 * Whether pressing the intelligence toggle would open a rail: the view has
-	 * one, the width allows it, and a thread is selected. The button renders
-	 * either way — disabled when false, never absent (#52).
+	 * Whether pressing the intelligence toggle would open anything: the view has
+	 * an intelligence surface at this width — the rail, or the drawer where the
+	 * rail does not fit — and a thread is selected. The button renders either
+	 * way, disabled when false, never absent (#52).
 	 */
 	canToggleIntelligence: boolean;
 	onToggleIntelligence: () => void;

package/src/components/mail/authenticity-warning.stories.tsx

@@ -0,0 +1,131 @@
+import { type IntelligenceData, IntelligencePanel } from "@remit/ui";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { Drawer } from "@/components/layout/Drawer";
+import { AuthenticityBanner } from "@/components/mail/AuthenticityBanner";
+
+/**
+ * The authenticity warning over the reading pane, and where its "Why?" goes.
+ *
+ * Between 1024 and 1280px the shell has room for the reading pane but not the
+ * intelligence rail, so the link opens the same right-anchored drawer the phone
+ * uses — `MailboxPane.Reading` mounts it whenever the rail does not fit. The
+ * warning itself reads as one sentence: the link sits in the text flow at the
+ * body's own size rather than floating off to the right as chrome.
+ */
+const meta: Meta<typeof AuthenticityBanner> = {
+	title: "Flows/Reading/Authenticity Warning",
+	component: AuthenticityBanner,
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj<typeof AuthenticityBanner>;
+
+const TWO_PANE_WIDTH = 1100;
+
+const authenticity = {
+	fromDomain: "mondialrelay.fr",
+	dkimDomain: "gmail.example",
+	dkimMismatch: true,
+};
+
+const intelligence: IntelligenceData = {
+	sender: {
+		name: "Mondial Relay",
+		email: "delivery.notice.4421@gmail.example",
+		trust: "unknown",
+		firstSeenLabel: "today",
+		inboundCount: 1,
+		replyCount: 0,
+	},
+	authenticity: {
+		verdict: "mismatch",
+		fromDomain: "mondialrelay.fr",
+		dkimDomain: "gmail.example",
+		claimedBrand: "Mondial Relay",
+		summary:
+			"The display name claims “Mondial Relay”, but the message was sent and signed by a personal gmail.example mailbox — not mondialrelay.fr. Real carriers send from their own domain.",
+		similarCount: 15,
+	},
+	category: { value: "automated" },
+	flags: {},
+	similar: [
+		{
+			id: "sim_dhl",
+			mailboxId: "mbx_personal_junk",
+			threadId: "thr_sim_dhl",
+			fromName: "DHL Express",
+			subject: "Action required: customs fee outstanding",
+			timeLabel: "Thu",
+			matched: "body",
+		},
+		{
+			id: "sim_postnl",
+			mailboxId: "mbx_personal_junk",
+			threadId: "thr_sim_postnl",
+			fromName: "PostNL",
+			subject: "Uw pakket kon niet worden bezorgd",
+			timeLabel: "28 May",
+			matched: "body",
+		},
+	],
+};
+
+/**
+ * The reading pane as `MailboxPane.Reading` composes it at this width: the
+ * banner above the thread body, and the drawer it opens over the panes.
+ */
+const TwoPaneReading = () => {
+	const [drawerOpen, setDrawerOpen] = useState(false);
+	return (
+		<div
+			className="flex overflow-hidden rounded-lg border border-line bg-canvas"
+			// The transform makes the frame a containing block, so the drawer's
+			// `position: fixed` resolves against these 1100px instead of the
+			// Storybook canvas. `relative` does not do this for fixed children.
+			style={{ width: TWO_PANE_WIDTH, height: 700, transform: "translateZ(0)" }}
+		>
+			<div className="w-[38%] shrink-0 border-r border-line bg-surface-sunken" />
+			<section className="flex min-w-0 flex-1 flex-col">
+				<header className="border-b border-line px-5 pt-5 pb-3">
+					<h1 className="max-w-2xl text-lg font-semibold leading-snug text-fg">
+						Your parcel could not be delivered
+					</h1>
+					<p className="mt-1 text-2xs text-fg-subtle">1 message</p>
+				</header>
+				<AuthenticityBanner
+					authenticity={authenticity}
+					onOpenIntelligence={() => setDrawerOpen(true)}
+				/>
+				<div className="min-h-0 flex-1 overflow-y-auto px-5 py-4 text-sm text-fg">
+					<p>
+						We attempted to deliver your parcel today and nobody was home. Pay
+						the outstanding €2.40 redelivery fee within 24 hours to schedule a
+						new attempt.
+					</p>
+				</div>
+			</section>
+			<Drawer
+				isOpen={drawerOpen}
+				onClose={() => setDrawerOpen(false)}
+				ariaLabel="Message details"
+				side="right"
+			>
+				<IntelligencePanel data={intelligence} hideCloseButton />
+			</Drawer>
+		</div>
+	);
+};
+
+/** Two panes, no rail: press "Why?" and the drawer carries the panel. */
+export const TwoPaneDesktop: Story = {
+	render: () => <TwoPaneReading />,
+};
+
+/** The same surface on the dark theme. */
+export const TwoPaneDesktopDark: Story = {
+	name: "Two Pane Desktop (dark)",
+	parameters: { theme: "dark" },
+	render: () => <TwoPaneReading />,
+};

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/hooks/useMediaQuery.ts

@@ -6,7 +6,7 @@ import { DESKTOP_MEDIA_QUERY, useMatchMedia } from "@remit/ui";
  * layout — phones, narrow tablets, and a large tablet in portrait, which is
  * 1024px wide but has no room for the three-pane desktop grid (#682).
  *
- * The CSS-gated mobile chrome (Drawer, ComposeFab) uses `lg:hidden`, and the
+ * The CSS-gated mobile chrome (ComposeFab) uses `lg:hidden`, and the
  * `lg` variant is redefined in `@remit/ui`'s token sheet with the same
  * condition — change `DESKTOP_MEDIA_QUERY` and both move together.
  */