@remit/web-client 0.0.51 → 0.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "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/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/MessageCard.tsx

@@ -212,7 +212,7 @@ const ExpandedCard = ({
 	return (
 		<ExpandedMessage
 			message={message}
-			isFocused={isFocused}
+			isFocused={mobile ? false : isFocused}
 			onHeaderClick={onToggle}
 			senderBadge={isTrusted ? <TrustedSenderBadge /> : undefined}
 			trailing={

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/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(), []);
+	});
+});