@remit/ui 0.0.93 → 0.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.93",
+  "version": "0.0.95",
   "type": "module",
   "files": [
     "src"

package/src/components/brief-sections.keyboard.test.ts

@@ -5,7 +5,7 @@
 import assert from "node:assert/strict";
 import { after, afterEach, before, beforeEach, describe, it } from "node:test";
 import type { JSDOM } from "jsdom";
-import { act, createElement, useMemo } from "react";
+import { act, createElement } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { LIST_ROW_SELECTOR } from "../lib/roving-focus.js";
 import {
@@ -76,6 +76,7 @@ before(async () => {
 	globalThis.HTMLElement = dom.window.HTMLElement;
 	globalThis.Element = dom.window.Element;
 	globalThis.KeyboardEvent = dom.window.KeyboardEvent;
+	globalThis.MutationObserver = dom.window.MutationObserver;
 	Object.defineProperty(globalThis, "navigator", {
 		value: dom.window.navigator,
 		configurable: true,
@@ -178,16 +179,10 @@ describe("BriefSections arrow-key traversal", () => {
 	});
 });
 
-const orderedIds = sections.flatMap((section) =>
-	section.threads.map((thread) => thread.id),
-);
-
 let list: ListKeyboard | undefined;
 
 function BriefUnderLayer() {
-	const ids = useMemo(() => orderedIds, []);
 	const keyboard = useListKeyboard({
-		orderedIds: ids,
 		isDesktop: true,
 		initialFocusedId: "t1",
 	});

package/src/components/message-list-pane.stories.tsx

@@ -101,8 +101,7 @@ const noKeyboard: MessageListKeyboard = {
  * footer offers what is wired.
  */
 function LiveList({ briefFilters = false }: { briefFilters?: boolean }) {
-	const orderedIds = sections.flatMap((s) => s.threads).map((t) => t.id);
-	const list = useListKeyboard({ orderedIds, isDesktop: true });
+	const list = useListKeyboard({ isDesktop: true });
 	return (
 		<MessageListPane
 			listTitle="Inbox"
@@ -258,9 +257,9 @@ function SelectableList({ isDesktop }: { isDesktop: boolean }) {
 				readIds.has(thread.id) ? { ...thread, isRead: true } : thread,
 			),
 	}));
-	const orderedIds = visible.flatMap((s) => s.threads).map((t) => t.id);
-	const list = useListKeyboard({ orderedIds, isDesktop });
+	const list = useListKeyboard({ isDesktop });
 	const { selection } = list.cursor;
+	const { orderedIds } = list;
 	const allSelected =
 		orderedIds.length > 0 &&
 		orderedIds.every((id) => selection.selectedIds.has(id));

package/src/components/selection-wizard.render.test.ts

@@ -582,6 +582,24 @@ describe("RunStepBody", () => {
 		assert.match(html, /Nothing has changed\./);
 	});
 
+	// #522: the commit resolved no destination, which is a cause the screen knows
+	// and a setting the user can change.
+	it("names why a commit could not start, and where the fix is", () => {
+		const html = renderToString(
+			createElement(RunStepBody, {
+				...runProps,
+				state: "commitFailed",
+				verb: "junk",
+				scope: "once",
+				failureReason:
+					"This account has no Junk folder appointed, so there is nowhere to file these. Appoint one under Settings › Folders.",
+			}),
+		);
+		assert.match(text(html), /no Junk folder appointed/);
+		assert.match(text(html), /Settings › Folders/);
+		assert.doesNotMatch(html, /Nothing has changed\./);
+	});
+
 	// A retry that could not be started is not a pass that never ran (#552): the
 	// pass that did run keeps its counts and its bar.
 	it("keeps a finished pass's counts when its retry could not be started", () => {
@@ -671,6 +689,22 @@ describe("RunFooter", () => {
 		assert.match(html, /Close/);
 	});
 
+	it("offers no retry for a commit the same press cannot get past", () => {
+		// A Try again here re-sends the identical commit to the same absent
+		// destination, forever (#522).
+		const html = renderToString(
+			createElement(RunFooter, {
+				...runProps,
+				state: "commitFailed",
+				verb: "junk",
+				scope: "once",
+				failureReason: "This account has no Junk folder appointed.",
+			}),
+		);
+		assert.doesNotMatch(html, /Try again/);
+		assert.match(html, /Close/);
+	});
+
 	it("offers only a way out once there is nothing outstanding", () => {
 		const html = renderToString(createElement(RunFooter, runProps));
 		assert.match(html, /Done/);

package/src/components/selection-wizard.tsx

@@ -963,6 +963,12 @@ export interface RunStepProps {
 	 * messages behind it; defaults to the ones named here.
 	 */
 	failedCount?: number;
+	/**
+	 * Why the commit never started, when the run knows and sending the same one
+	 * again cannot change it. Stated in place of the generic ending, and in place
+	 * of the retry that would fail identically (#522).
+	 */
+	failureReason?: string;
 	onRetry: () => void;
 	onDismiss: () => void;
 	/**
@@ -981,6 +987,7 @@ const runOutcomeOf = (props: RunStepProps): RunOutcome => ({
 	matched: props.matched,
 	applied: props.applied,
 	failed: props.failedCount ?? props.failures.length,
+	failureReason: props.failureReason,
 });
 
 const runIcon = (tone: RunCopy["tone"]): ReactNode => {

package/src/components/swipeable-row.tsx

@@ -325,6 +325,7 @@ export function SwipeableRow({
 				role={selectionMode ? "checkbox" : undefined}
 				aria-checked={selectionMode ? checked : undefined}
 				data-message-row
+				data-message-id={thread.id}
 				{...gestureProps}
 				className={interactiveClassName}
 				style={interactiveStyle}

package/src/index.ts

@@ -748,6 +748,10 @@ export {
 	type UseLongPressResult,
 	useLongPress,
 } from "./lib/use-long-press.js";
+export {
+	MESSAGE_ROW_SELECTOR,
+	useRenderedRowIds,
+} from "./lib/use-rendered-row-ids.js";
 export {
 	computeRange,
 	deriveIsMultiSelectMode,

package/src/lib/use-list-keyboard.test.ts

@@ -1,8 +1,8 @@
 /**
  * The list's keyboard layer as a host mounts it: the keys reach the cursor from
  * inside the element the layer was given and from nowhere else, the row-click
- * path reads its modifiers the same way, the selection follows the rows it is
- * handed, and the footer offers only the actions the layer registered.
+ * path reads its modifiers the same way, the selection follows the rows on
+ * screen, and the footer offers only the actions the layer registered.
  */
 import assert from "node:assert/strict";
 import { after, afterEach, before, beforeEach, describe, it } from "node:test";
@@ -18,14 +18,32 @@ let container: HTMLElement;
 let root: Root;
 let list: ListKeyboard;
 
-function Harness({ orderedIds }: { orderedIds: string[] }) {
-	list = useListKeyboard({ orderedIds, isDesktop: true });
-	return createElement("section", { id: "pane", ref: list.keyboard.ref });
+function Harness({ rowIds }: { rowIds: string[] }) {
+	list = useListKeyboard({ isDesktop: true });
+	return createElement(
+		"section",
+		{ id: "pane", ref: list.keyboard.ref },
+		...rowIds.map((id) =>
+			createElement("button", {
+				key: id,
+				type: "button",
+				"data-message-id": id,
+			}),
+		),
+	);
 }
 
-const mount = (orderedIds: string[] = ALL_IDS) => {
+const mount = (rowIds: string[] = ALL_IDS) => {
 	act(() => {
-		root.render(createElement(Harness, { orderedIds }));
+		root.render(createElement(Harness, { rowIds }));
+	});
+};
+
+// The layer reads the rendered rows through a MutationObserver, whose callback
+// lands on the microtask queue — an async act flushes both.
+const rerender = async (rowIds: string[]) => {
+	await act(async () => {
+		root.render(createElement(Harness, { rowIds }));
 	});
 };
 
@@ -82,6 +100,7 @@ before(async () => {
 	globalThis.HTMLElement = dom.window.HTMLElement;
 	globalThis.Element = dom.window.Element;
 	globalThis.SVGElement = dom.window.SVGElement;
+	globalThis.MutationObserver = dom.window.MutationObserver;
 	(
 		globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
 	).IS_REACT_ACT_ENVIRONMENT = true;
@@ -159,14 +178,35 @@ describe("useListKeyboard", () => {
 		assert.deepEqual(selected(), []);
 	});
 
-	it("drops the ticked rows that leave the list, and keeps the rest", () => {
+	it("drops the ticked rows that leave the screen, and keeps the rest", async () => {
 		press("a", { metaKey: true });
 		assert.deepEqual(selected(), ALL_IDS);
-		mount(["m1", "m3"]);
+		await rerender(["m1", "m3"]);
 		assert.deepEqual(
 			selected(),
 			["m1", "m3"],
 			"a verb acts on the rows that are still on screen",
 		);
 	});
+
+	it("walks and takes only the rows the pane is rendering", async () => {
+		await rerender(["m1", "m2"]);
+
+		press("a", { metaKey: true });
+		assert.deepEqual(
+			selected(),
+			["m1", "m2"],
+			"⌘A stops at the rows on screen",
+		);
+
+		press("Escape");
+		press("j");
+		press("j");
+		press("j");
+		assert.equal(
+			list.keyboard.focusedId,
+			"m2",
+			"the cursor stops at the last rendered row",
+		);
+	});
 });

package/src/lib/use-list-keyboard.ts

@@ -10,7 +10,10 @@
  *
  * The layer binds its keys to the pane element rather than the window, so a
  * page carrying several lists gives each of them only the keys pressed inside
- * it.
+ * it. It takes the rows it walks from that same element rather than from the
+ * caller's data: a section behind "Show N more", a collapsed header and a
+ * category scope all take rows off the screen without touching the data, and a
+ * cursor or a count built from the data reaches them anyway.
  */
 import { useEffect, useMemo, useState } from "react";
 import type {
@@ -19,11 +22,12 @@ import type {
 } from "../components/app-shell-types.js";
 import type { TriageHandlers } from "./keymap.js";
 import { type ListCursor, useListCursor } from "./use-list-cursor.js";
+import { useRenderedRowIds } from "./use-rendered-row-ids.js";
 import { useTriageKeyboard } from "./use-triage-keyboard.js";
 
+const NO_ROWS: string[] = [];
+
 export interface UseListKeyboardOptions {
-	/** Row ids in display order. */
-	orderedIds: string[];
 	isDesktop: boolean;
 	/** Seeds the cursor — normally the open thread. */
 	initialFocusedId?: string;
@@ -35,6 +39,11 @@ export interface UseListKeyboardOptions {
 
 export interface ListKeyboard {
 	cursor: ListCursor;
+	/**
+	 * The rows the pane is rendering, in display order — what the keys walk,
+	 * what ⌘A takes, and what a select-all checkbox above the list counts.
+	 */
+	orderedIds: string[];
 	/** The pane's `selection` prop. */
 	selection: MessageListSelection;
 	/** The pane's `keyboard` prop. */
@@ -42,13 +51,14 @@ export interface ListKeyboard {
 }
 
 export const useListKeyboard = ({
-	orderedIds,
 	isDesktop,
 	initialFocusedId,
 	initialSelectedIds,
 	enabled = true,
 }: UseListKeyboardOptions): ListKeyboard => {
 	const [pane, setPane] = useState<HTMLElement | null>(null);
+	const renderedIds = useRenderedRowIds(pane);
+	const orderedIds = renderedIds ?? NO_ROWS;
 
 	const cursor = useListCursor({
 		orderedIds,
@@ -70,13 +80,16 @@ export const useListKeyboard = ({
 	};
 	useTriageKeyboard({ handlers, enabled, target: pane });
 
-	// A row that leaves the list — a filter, an account pill, a completed verb —
-	// cannot stay selected, or the count and the verbs act on rows nobody can
-	// see. The same rule the app runs in `ThreadListInteraction`.
+	// A row that leaves the screen — a filter, an account pill, a collapsed
+	// section, a completed verb — cannot stay selected, or the count and the
+	// verbs act on rows nobody can see. The same rule the app runs in
+	// `ThreadListInteraction`. Rows that have not been read yet are not rows that
+	// left, so the seeded selection survives the first render.
 	const { intersectWith } = cursor.selection;
 	useEffect(() => {
-		intersectWith(orderedIds);
-	}, [intersectWith, orderedIds]);
+		if (renderedIds === undefined) return;
+		intersectWith(renderedIds);
+	}, [intersectWith, renderedIds]);
 
 	const { selectedIds, toggle } = cursor.selection;
 	const { handleRowSelect } = cursor;
@@ -91,6 +104,7 @@ export const useListKeyboard = ({
 
 	return {
 		cursor,
+		orderedIds,
 		selection,
 		keyboard: {
 			focusedId: cursor.focusedMessageId,

package/src/lib/use-rendered-row-ids.ts

@@ -0,0 +1,56 @@
+/**
+ * The rows a message list is actually showing, read from the DOM.
+ *
+ * A list narrows itself in ways its data never records: a section caps itself
+ * behind "Show N more", collapses from its own header, or falls out of a
+ * category scope. The ids a consumer hands down are therefore not the ids on
+ * screen, and a cursor or a selection built from them reaches rows nobody can
+ * see. Reading the rendered rows is the one answer that holds for every kind of
+ * narrowing, wherever it happens.
+ */
+import { useCallback, useEffect, useState } from "react";
+
+/** The marker a row carries the id the cursor and the selection know it by. */
+export const MESSAGE_ROW_SELECTOR = "[data-message-id]";
+
+const readRowIds = (container: HTMLElement): string[] =>
+	Array.from(container.querySelectorAll<HTMLElement>(MESSAGE_ROW_SELECTOR))
+		.map((row) => row.dataset.messageId)
+		.filter((id): id is string => id !== undefined);
+
+const sameIds = (a: string[], b: string[]): boolean =>
+	a.length === b.length && a.every((id, index) => id === b[index]);
+
+/**
+ * The ids of the rows inside `container`, in document order, kept in step with
+ * what it renders. `undefined` until a container has been read — a list whose
+ * rows have not been counted yet is a different answer from a list with no
+ * rows, and only the second one may empty a selection.
+ *
+ */
+export function useRenderedRowIds(
+	container: HTMLElement | null,
+): string[] | undefined {
+	const [rowIds, setRowIds] = useState<string[] | undefined>(undefined);
+
+	const sync = useCallback(() => {
+		if (!container) return;
+		const next = readRowIds(container);
+		setRowIds((prev) => (prev && sameIds(prev, next) ? prev : next));
+	}, [container]);
+
+	// Rows this render moved — a chip, an account pill, a completed verb — are in
+	// the DOM by the time the commit's effects run.
+	useEffect(sync);
+
+	// Rows a section moves on its own — "Show N more", a collapsing header — never
+	// reach this render at all, so nothing but the DOM reports them.
+	useEffect(() => {
+		if (!container) return;
+		const observer = new MutationObserver(sync);
+		observer.observe(container, { childList: true, subtree: true });
+		return () => observer.disconnect();
+	}, [container, sync]);
+
+	return rowIds;
+}

package/src/lib/wizard-steps.test.ts

@@ -595,6 +595,31 @@ describe("runCopy", () => {
 		assert.equal(outcome("commitFailed", "once").title, "Couldn't start move");
 	});
 
+	// #522: a commit that resolved no destination fails the same way every time
+	// it is sent. Stating "Nothing has changed" over a Try again leaves the user
+	// pressing a control that can never work, with nothing naming the setting
+	// that would.
+	it("carries the reason a commit could not start, in place of a retry", () => {
+		const reason =
+			"This account has no Junk folder appointed, so there is nowhere to file these. Appoint one under Settings › Folders.";
+		const blocked = runCopy({
+			state: "commitFailed",
+			verb: "junk",
+			scope: "once",
+			matched: 0,
+			applied: 0,
+			failed: 0,
+			failureReason: reason,
+		});
+
+		assert.equal(blocked.detail, reason);
+		assert.doesNotMatch(blocked.detail, /Nothing has changed/);
+		assert.equal(blocked.retryLabel, undefined);
+		assert.equal(blocked.dismissLabel, "Close");
+		assert.equal(blocked.tone, "danger");
+		assert.match(blocked.title, /^Couldn't start/);
+	});
+
 	it("shows progress only while a pass over existing mail is under way or finished", () => {
 		assert.equal(outcome("saving", "standing").showProgress, false);
 		assert.equal(outcome("backApplyRunning", "standing").showProgress, true);

package/src/lib/wizard-steps.ts

@@ -334,6 +334,13 @@ export interface RunOutcome {
 	applied: number;
 	/** How many the mail server rejected. */
 	failed: number;
+	/**
+	 * Why the commit never started, when sending the same one again cannot get
+	 * past it — no Junk folder appointed, no destination chosen. The ending states
+	 * this in place of the generic one and offers no retry, because the identical
+	 * commit fails identically (#522).
+	 */
+	failureReason?: string;
 }
 
 export interface RunCopy {
@@ -372,6 +379,7 @@ export const runCopy = ({
 	matched,
 	applied,
 	failed,
+	failureReason,
 }: RunOutcome): RunCopy => {
 	const { label, present, past } = verbCopy(verb);
 	const done = past.toLowerCase();
@@ -502,15 +510,17 @@ export const runCopy = ({
 			dismissLabel: "Done",
 		};
 	}
+	// A stated reason is a failure the same commit cannot get past, so the way
+	// out of it is the sentence rather than a retry that fails identically.
 	return {
 		...shared,
 		title: standing
 			? "Couldn't save the rule"
 			: `Couldn't start ${label.toLowerCase()}`,
-		detail: "Nothing has changed.",
+		detail: failureReason ?? "Nothing has changed.",
 		tone: "danger",
-		dismissLabel: "Not now",
-		retryLabel: "Try again",
+		dismissLabel: failureReason === undefined ? "Not now" : "Close",
+		retryLabel: failureReason === undefined ? "Try again" : undefined,
 	};
 };