@remit/web-client 0.0.52 → 0.0.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.52",
+  "version": "0.0.54",
   "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": {
@@ -29,7 +29,7 @@
     "build:dist": "npm run generate:routes && node --import tsx harness/build.mjs",
     "preview": "vite preview",
     "test:typecheck": "npm run generate:routes && tsgo --noEmit",
-    "test:run": "node --import tsx --import ./test-support/register.mjs --experimental-test-coverage --test-coverage-include='src/**' --test-coverage-exclude='src/**/*.test.ts' --test-coverage-exclude='src/**/*.test.tsx' --test-coverage-lines=70 --test 'src/**/*.test.ts'",
+    "test:run": "node --import tsx --import ./test-support/register.mjs --experimental-test-coverage --test-coverage-include='src/**' --test-coverage-exclude='src/**/*.test.ts' --test-coverage-exclude='src/**/*.test.tsx' --test-coverage-exclude='src/test-support/**' --test-coverage-lines=86 --test 'src/**/*.test.ts'",
     "test": "npm run test:typecheck && npm run test:run"
   },
   "peerDependencies": {

package/src/components/mail/BriefPane.selection.test.ts

@@ -0,0 +1,52 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { describe, it } from "node:test";
+import { fileURLToPath } from "node:url";
+
+/**
+ * The phone brief must mount the same selection surface the multi-pane list
+ * does (#203). `BriefPane` wires the bulk verbs and the selection bar into
+ * `DailyBrief` from the `BriefList` slot; the phone view used to render
+ * `DailyBrief` directly, without `onDeleteMessages`, so a selection made in the
+ * brief on a phone raised no action bar — selectable, but nothing to act with.
+ *
+ * As with `MessageList.selection.test.ts`, `BriefPane` weaves routing and
+ * several data hooks together, so the rule is enforced by reading the source:
+ * the phone view reuses the list slot rather than a bare `DailyBrief`.
+ */
+
+const here = dirname(fileURLToPath(import.meta.url));
+const source = readFileSync(resolve(here, "BriefPane.tsx"), "utf8");
+
+const briefPhoneBody = (): string => {
+	const start = source.indexOf("function BriefPhone(");
+	assert.notEqual(start, -1, "BriefPhone is defined");
+	const next = source.indexOf("\nfunction ", start + 1);
+	return source.slice(start, next === -1 ? undefined : next);
+};
+
+describe("BriefPane phone selection surface (#203)", () => {
+	it("the phone brief reuses the list slot, not a bare DailyBrief", () => {
+		const body = briefPhoneBody();
+		assert.match(
+			body,
+			/<BriefList \/>/,
+			"phone brief renders the list slot that wires the bulk verbs",
+		);
+		assert.doesNotMatch(
+			body,
+			/<DailyBrief\b/,
+			"phone brief must not render DailyBrief directly — that drops onDeleteMessages and the selection bar with it",
+		);
+	});
+
+	it("the list slot hands DailyBrief the delete verb the selection bar gates on", () => {
+		const start = source.indexOf("function BriefList(");
+		assert.notEqual(start, -1, "BriefList is defined");
+		const next = source.indexOf("\nfunction ", start + 1);
+		const body = source.slice(start, next === -1 ? undefined : next);
+		assert.match(body, /onDeleteMessages=\{onDeleteMessages\}/);
+		assert.match(body, /onMarkMessagesRead=\{onMarkMessagesRead\}/);
+	});
+});

package/src/components/mail/BriefPane.tsx

@@ -381,14 +381,12 @@ function BriefPhone() {
 	const {
 		selectedThread,
 		conversation,
-		selectedMessageId,
 		onSelectMessage,
-		onSelectSearchResult,
 		onCloseThread,
 		nextMessageId,
 		previousMessageId,
 	} = useBriefPane();
-	const { accounts, intelligenceOpen, onToggleIntelligence } = useMailContext();
+	const { intelligenceOpen, onToggleIntelligence } = useMailContext();
 
 	if (conversation) {
 		return (
@@ -427,14 +425,14 @@ function BriefPhone() {
 		);
 	}
 
+	// The same list slot the multi-pane layout mounts, so the phone brief wires
+	// the bulk verbs and the selection bar through `DailyBrief` exactly as the
+	// desktop list does. Rendering `DailyBrief` here directly dropped
+	// `onDeleteMessages`, so a phone selection raised no action bar (#203) — the
+	// same reuse `FlaggedPhone` already relies on.
 	return (
 		<div className="h-full">
-			<DailyBrief
-				accounts={accounts}
-				selectedMessageId={selectedMessageId}
-				onSelectMessage={onSelectMessage}
-				onSelectSearchResult={onSelectSearchResult}
-			/>
+			<BriefList />
 		</div>
 	);
 }

package/src/components/mail/MessageList.selection.test.ts

@@ -91,3 +91,27 @@ describe("MessageList escalated actions", () => {
 		);
 	});
 });
+
+/**
+ * A bounded confirm-delete used to open the surviving neighbour by writing
+ * `selectedMessageId` into the URL. On desktop that fills the reading pane
+ * beside the list; on a single-pane mobile layout the same navigation replaced
+ * the list with a full-screen message, so a bulk delete read as "jumped into a
+ * random message" rather than "the rows are gone" (#202). Mobile now stays on
+ * the list and raises the same completion banner a chunked run does.
+ */
+describe("MessageList bounded delete stays on the list on mobile (#202)", () => {
+	it("only the desktop two-pane opens the surviving neighbour after a delete", () => {
+		assert.match(
+			source,
+			/if \(isDesktop\) \{\s*navigate\(\{\s*to: "\/mail\/\$mailboxId",\s*params: \{ mailboxId \},\s*search: \(prev\) => \(\{ \.\.\.prev, selectedMessageId: nextFocus \}\),\s*replace: true,\s*\}\);\s*\}/,
+		);
+	});
+
+	it("raises a completion banner on mobile so the delete is not silent", () => {
+		assert.match(
+			source,
+			/if \(!isDesktop\) \{\s*setCompletionBanner\(\s*bulkActionCompletionText\("delete", ids\.length\),?\s*\);\s*\}/,
+		);
+	});
+});

package/src/components/mail/MessageList.tsx

@@ -662,12 +662,26 @@ export const MessageList = ({
 			pendingDomFocusRef.current = nextFocus;
 			cursorMovedByPointerRef.current = false;
 			setFocusedMessageId(nextFocus);
-			navigate({
-				to: "/mail/$mailboxId",
-				params: { mailboxId },
-				search: (prev) => ({ ...prev, selectedMessageId: nextFocus }),
-				replace: true,
-			});
+			// Desktop is two-pane: opening the neighbour fills the reading pane
+			// beside the list. On a single-pane mobile layout the same navigation
+			// replaces the list with a full-screen message, so a bulk delete looks
+			// like it opened a random neighbour instead of removing the rows (#202).
+			// Mobile keeps the cursor move but stays on the list.
+			if (isDesktop) {
+				navigate({
+					to: "/mail/$mailboxId",
+					params: { mailboxId },
+					search: (prev) => ({ ...prev, selectedMessageId: nextFocus }),
+					replace: true,
+				});
+			}
+		}
+
+		// Mobile keeps the list up, so it needs its own signal the delete landed —
+		// the transient completion banner a chunked run already raises (#202). On
+		// desktop the rows leaving the list beside the reading pane is signal enough.
+		if (!isDesktop) {
+			setCompletionBanner(bulkActionCompletionText("delete", ids.length));
 		}
 	}, [
 		pendingDelete,
@@ -676,6 +690,7 @@ export const MessageList = ({
 		exitSelection,
 		navigate,
 		mailboxId,
+		isDesktop,
 		runChunkedConfirmDelete,
 	]);
 

package/src/components/mail/MoveToTrigger.render.test.ts

@@ -0,0 +1,153 @@
+/**
+ * The move-to-folder picker. It only fetches folders once it is opened, it
+ * marks the folder the messages are already in rather than offering it as a
+ * destination, and on desktop Escape or a click outside puts it away.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { mailboxOperationsListMailboxesQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapMailboxResponse } from "@remit/api-http-client/types.gen.ts";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { makeMailbox } from "../../test-support/fixtures";
+import { MoveToTrigger } from "./MoveToTrigger";
+
+let harness: DomHarness | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+});
+
+const ACCOUNT_ID = "acc-1";
+
+const mount = (
+	options: {
+		mailboxes?: RemitImapMailboxResponse[];
+		currentMailboxId?: string;
+		disabledHint?: string;
+		onMove?: (destinationMailboxId: string) => void;
+		viewportWidth?: number;
+	} = {},
+): DomHarness => {
+	harness = createDomHarness({ viewportWidth: options.viewportWidth });
+	if (options.mailboxes) {
+		harness.queryClient.setQueryData(
+			mailboxOperationsListMailboxesQueryKey({
+				path: { accountId: ACCOUNT_ID },
+			}),
+			{ items: options.mailboxes },
+		);
+	}
+	harness.renderApp(
+		createElement(MoveToTrigger, {
+			accountId: ACCOUNT_ID,
+			currentMailboxId: options.currentMailboxId ?? "mbx-inbox",
+			onMove: options.onMove ?? (() => undefined),
+			disabledHint: options.disabledHint,
+		}),
+	);
+	return harness;
+};
+
+const FOLDERS = [
+	makeMailbox({ mailboxId: "mbx-inbox", fullPath: "INBOX" }),
+	makeMailbox({ mailboxId: "mbx-work", fullPath: "Work" }),
+	makeMailbox({ mailboxId: "mbx-receipts", fullPath: "Receipts" }),
+];
+
+describe("MoveToTrigger", () => {
+	it("reports itself as collapsed until it is opened", () => {
+		const dom = mount({ mailboxes: FOLDERS });
+		const trigger = dom.byLabel("Move to folder");
+		assert.equal(trigger.getAttribute("aria-expanded"), "false");
+		assert.equal(trigger.getAttribute("aria-controls"), null);
+		assert.equal(dom.query('[role="listbox"], input'), null);
+	});
+
+	it("opens a listbox of destinations and marks the folder we are in", () => {
+		const dom = mount({ mailboxes: FOLDERS });
+		dom.click(dom.byLabel("Move to folder"));
+
+		assert.equal(
+			dom.byLabel("Move to folder").getAttribute("aria-expanded"),
+			"true",
+		);
+		const labels = dom
+			.queryAll("[role=option]")
+			.map((option) => option.textContent ?? "");
+		assert.ok(labels.some((label) => label.includes("Work")));
+		assert.ok(labels.some((label) => label.includes("Receipts")));
+
+		// The folder the messages are already in stays in the list, marked as
+		// where they are now rather than presented as somewhere to move them.
+		const current = labels.find((label) => label.includes("current"));
+		assert.ok(current, "the source folder is marked as the current one");
+	});
+
+	it("moves to the folder the user picks and closes itself", () => {
+		const moved: string[] = [];
+		const dom = mount({
+			mailboxes: FOLDERS,
+			onMove: (id) => moved.push(id),
+		});
+		dom.click(dom.byLabel("Move to folder"));
+		dom.click(dom.byText("[role=option]", "Work"));
+
+		assert.deepEqual(moved, ["mbx-work"]);
+		assert.equal(
+			dom.byLabel("Move to folder").getAttribute("aria-expanded"),
+			"false",
+		);
+	});
+
+	it("closes on Escape and on a click outside it", () => {
+		const dom = mount({ mailboxes: FOLDERS });
+		const isOpen = () =>
+			dom.byLabel("Move to folder").getAttribute("aria-expanded") === "true";
+
+		dom.click(dom.byLabel("Move to folder"));
+		assert.equal(isOpen(), true);
+		dom.dispatch(
+			dom.window.document,
+			new dom.window.KeyboardEvent("keydown", { key: "Escape" }),
+		);
+		assert.equal(isOpen(), false);
+
+		dom.click(dom.byLabel("Move to folder"));
+		assert.equal(isOpen(), true);
+		dom.dispatch(
+			dom.window.document.body,
+			new dom.window.MouseEvent("mousedown", { bubbles: true }),
+		);
+		assert.equal(isOpen(), false);
+	});
+
+	it("refuses to open, and says why, when the selection spans accounts", () => {
+		const hint = "Select messages from one account to move them";
+		const dom = mount({ mailboxes: FOLDERS, disabledHint: hint });
+		const trigger = dom.byLabel("Move to folder");
+		assert.equal(trigger.getAttribute("title"), hint);
+
+		dom.click(trigger);
+		assert.equal(trigger.getAttribute("aria-expanded"), "false");
+	});
+
+	it("opens a dialog rather than a popover on a phone", () => {
+		const dom = mount({ mailboxes: FOLDERS, viewportWidth: 390 });
+		assert.equal(
+			dom.byLabel("Move to folder").getAttribute("aria-haspopup"),
+			"dialog",
+		);
+	});
+
+	it("asks for the folder list only once the picker is opened", () => {
+		const dom = mount();
+		assert.equal(dom.queryAll("[role=option]").length, 0);
+		dom.click(dom.byLabel("Move to folder"));
+		// No cached mailboxes and no network in the test harness: the picker
+		// shows its loading state rather than an empty list of destinations.
+		assert.match(dom.text(), /Loading folders/);
+	});
+});

package/src/components/mail/SelectionToolbar.render.test.ts

@@ -0,0 +1,145 @@
+/**
+ * The bulk-action bar. Two rules govern it: actions are never disabled (they
+ * no-op and explain — `doc/rules/ux.md`), and Move/Organize only appear when
+ * the selection is inside a single account, because neither works across
+ * accounts.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { SelectionToolbar } from "./SelectionToolbar";
+
+let harness: DomHarness | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+});
+
+type ToolbarProps = Parameters<typeof SelectionToolbar>[0];
+
+const mount = (props: Partial<ToolbarProps> = {}): DomHarness => {
+	harness = createDomHarness();
+	harness.renderApp(
+		createElement(SelectionToolbar, {
+			selectedCount: 2,
+			onDelete: () => undefined,
+			onClearSelection: () => undefined,
+			...props,
+		}),
+	);
+	return harness;
+};
+
+describe("SelectionToolbar", () => {
+	it("renders nothing while nothing is selected", () => {
+		const dom = mount({ selectedCount: 0 });
+		assert.equal(dom.html(), "");
+	});
+
+	it("counts the selection in words the user reads", () => {
+		assert.match(mount({ selectedCount: 1 }).text(), /1 message selected/);
+		harness?.close();
+		harness = undefined;
+		assert.match(mount({ selectedCount: 4 }).text(), /4 messages selected/);
+	});
+
+	it("hides Move until both an account and a source mailbox are known", () => {
+		const dom = mount({ onMove: () => undefined, accountId: "acc-1" });
+		assert.equal(dom.query('[aria-label="Move selected messages"]'), null);
+	});
+
+	it("offers Move and Organize once the selection sits in one account", () => {
+		const dom = mount({
+			onMove: () => undefined,
+			onOrganize: () => undefined,
+			accountId: "acc-1",
+			currentMailboxId: "mbx-inbox",
+		});
+		assert.ok(dom.query('[aria-label="Move selected messages"]'));
+		assert.ok(dom.query('[aria-label="Organize similar messages"]'));
+	});
+
+	it("withdraws Organize and explains why when the selection spans accounts", () => {
+		const dom = mount({
+			onMove: () => undefined,
+			onOrganize: () => undefined,
+			accountId: "acc-1",
+			currentMailboxId: "mbx-inbox",
+			moveDisabledHint: "Select messages from one account to move them",
+		});
+		assert.equal(dom.query('[aria-label="Organize similar messages"]'), null);
+		assert.match(dom.text(), /Select messages from one account to move them/);
+		assert.match(
+			dom.query('[role="status"]')?.textContent ?? "",
+			/one account/,
+		);
+	});
+
+	it("keeps every action pressable while a mutation is in flight (ux.md)", () => {
+		const dom = mount({ isDeleting: true, onMarkAsRead: () => undefined });
+		for (const button of dom.queryAll<HTMLButtonElement>("button")) {
+			assert.equal(button.disabled, false);
+		}
+		assert.equal(
+			dom.byLabel("Delete selected messages").getAttribute("aria-busy"),
+			"true",
+		);
+		assert.match(dom.text(), /Deleting\.\.\./);
+	});
+
+	it("no-ops rather than firing a second time while busy", () => {
+		let deletes = 0;
+		let marks = 0;
+		const dom = mount({
+			isMoving: true,
+			onDelete: () => {
+				deletes += 1;
+			},
+			onMarkAsRead: () => {
+				marks += 1;
+			},
+		});
+		dom.click(dom.byLabel("Delete selected messages"));
+		dom.click(dom.byLabel("Mark as read"));
+		assert.equal(deletes, 0);
+		assert.equal(marks, 0);
+	});
+
+	it("fires delete, mark-read and clear when idle", () => {
+		let cleared = 0;
+		let deletes = 0;
+		let marks = 0;
+		const dom = mount({
+			onDelete: () => {
+				deletes += 1;
+			},
+			onClearSelection: () => {
+				cleared += 1;
+			},
+			onMarkAsRead: () => {
+				marks += 1;
+			},
+		});
+		dom.click(dom.byLabel("Delete selected messages"));
+		dom.click(dom.byLabel("Mark as read"));
+		dom.click(dom.byLabel("Clear selection"));
+		assert.deepEqual([deletes, marks, cleared], [1, 1, 1]);
+	});
+
+	it("opens the organize flow for the current selection", () => {
+		let organized = 0;
+		const dom = mount({
+			onMove: () => undefined,
+			accountId: "acc-1",
+			currentMailboxId: "mbx-inbox",
+			onOrganize: () => {
+				organized += 1;
+			},
+		});
+		dom.click(dom.byLabel("Organize similar messages"));
+		assert.equal(organized, 1);
+	});
+});

package/src/components/mail/ThreadListInteraction.test.ts

@@ -13,7 +13,10 @@ import type { JSDOM } from "jsdom";
 import { act, createElement, createRef, useState } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import type { MessageListCommands } from "./MessageList";
-import { ThreadListInteraction } from "./ThreadListInteraction";
+import {
+	ThreadListInteraction,
+	useThreadListSelection,
+} from "./ThreadListInteraction";
 
 let dom: JSDOM;
 let container: HTMLElement;
@@ -197,3 +200,80 @@ describe("ThreadListInteraction — delete confirms first", () => {
 		});
 	});
 });
+
+/**
+ * A background refresh drops the ids that left and keeps every survivor — the
+ * same intersect-on-refresh guarantee `useSelection.test.ts` locks for the pure
+ * helper (#111), here through the live provider whose effect runs it whenever
+ * the rendered rows change (a chip filter, a collapsed section, mail deleted
+ * elsewhere).
+ */
+function mountSelectableList(initialIds: string[]) {
+	const commandsRef = createRef<MessageListCommands | null>();
+	let setIds: ((ids: string[]) => void) | undefined;
+	let selected: string[] = [];
+	const Probe = () => {
+		const { selectedIds } = useThreadListSelection();
+		selected = Array.from(selectedIds).sort();
+		return null;
+	};
+	const Harness = () => {
+		const [ids, set] = useState(initialIds);
+		setIds = set;
+		return createElement(
+			ThreadListInteraction,
+			{ selectedMessageId: undefined, onOpen: () => undefined, commandsRef },
+			...rowElements(ids),
+			createElement(Probe, { key: "probe" }),
+		);
+	};
+	act(() => root.render(createElement(Harness)));
+	return {
+		commands: () => {
+			const commands = commandsRef.current;
+			if (!commands) throw new Error("commands not published");
+			return commands;
+		},
+		render: async (ids: string[]) => {
+			await act(async () => {
+				setIds?.(ids);
+			});
+		},
+		selected: () => selected,
+	};
+}
+
+describe("ThreadListInteraction — selection survives a background refresh (#111)", () => {
+	it("keeps every survivor when a refresh drops one selected row", async () => {
+		const list = mountSelectableList(["m1", "m2", "m3"]);
+
+		// jsdom has no matchMedia, so the provider runs in mobile multi-select
+		// mode: focusFirst seeds the cursor, x toggles it in, and focusLast then
+		// toggles the row it lands on straight into the selection.
+		act(() => list.commands().focusFirst());
+		act(() => list.commands().toggleSelect());
+		act(() => list.commands().focusLast());
+		assert.deepEqual(list.selected(), ["m1", "m3"]);
+
+		// m3 leaves the rendered set (deleted elsewhere / filtered out); m2 is
+		// present but was never selected.
+		await list.render(["m1", "m2"]);
+
+		assert.deepEqual(
+			list.selected(),
+			["m1"],
+			"the survivor stays selected, the departed id is dropped, and nothing new is added",
+		);
+	});
+
+	it("empties the selection only when every selected row leaves", async () => {
+		const list = mountSelectableList(["m1", "m2"]);
+		act(() => list.commands().focusFirst());
+		act(() => list.commands().toggleSelect());
+		assert.deepEqual(list.selected(), ["m1"]);
+
+		await list.render(["m9"]);
+
+		assert.deepEqual(list.selected(), []);
+	});
+});