@remit/ui 0.0.92 → 0.0.94

package/package.json

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

package/src/components/app-shell-types.ts

@@ -104,6 +104,21 @@ export interface MessageListKeyboard {
 	ref: (element: HTMLElement | null) => void;
 }
 
+/**
+ * Whether a layer answers the cursor keys, and so walks the rows itself. A list
+ * under one stands its own roving-focus group down: both own the arrows, and
+ * the group stops the press before the layer above hears it.
+ */
+export function keyboardWalksRows(
+	keyboard: MessageListKeyboard | undefined,
+): keyboard is MessageListKeyboard {
+	if (keyboard === undefined) return false;
+	return (
+		keyboard.handlers.focusNext !== undefined &&
+		keyboard.handlers.focusPrevious !== undefined
+	);
+}
+
 /**
  * Measures an element's OWN width via ResizeObserver — a container query, not a
  * viewport one. The shell reflows by the space it actually occupies (so it works

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

@@ -5,9 +5,13 @@
 import assert from "node:assert/strict";
 import { after, afterEach, before, beforeEach, describe, it } from "node:test";
 import type { JSDOM } from "jsdom";
-import { act, createElement } from "react";
+import { act, createElement, useMemo } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { LIST_ROW_SELECTOR } from "../lib/roving-focus.js";
+import {
+	type ListKeyboard,
+	useListKeyboard,
+} from "../lib/use-list-keyboard.js";
 import type { ThreadSection } from "./app-shell-types.js";
 import { BriefSections } from "./brief-sections.js";
 import { ComfortableRow } from "./message-row.js";
@@ -99,9 +103,9 @@ afterEach(() => {
 	});
 });
 
-function pressKey(target: Element, key: string) {
+function pressKey(target: Element, key: string, shiftKey = false) {
 	target.dispatchEvent(
-		new dom.window.KeyboardEvent("keydown", { key, bubbles: true }),
+		new dom.window.KeyboardEvent("keydown", { key, bubbles: true, shiftKey }),
 	);
 }
 
@@ -173,3 +177,87 @@ describe("BriefSections arrow-key traversal", () => {
 		assert.equal(dom.window.document.activeElement, items[2]);
 	});
 });
+
+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",
+	});
+	list = keyboard;
+	return createElement(
+		"div",
+		{ ref: keyboard.keyboard.ref, tabIndex: -1 },
+		createElement(BriefSections, {
+			sections,
+			Row: ComfortableRow,
+			keyboard: keyboard.keyboard,
+			onSelectThread: () => undefined,
+			onSelectBriefCategory: () => undefined,
+		}),
+	);
+}
+
+function mountUnderLayer() {
+	act(() => {
+		root.render(createElement(BriefUnderLayer));
+	});
+}
+
+function selectedIds(): string[] {
+	return Array.from(list?.selection.selectedIds ?? []).sort();
+}
+
+describe("BriefSections under a keyboard layer", () => {
+	it("Shift+ArrowDown extends the selection down the rows", () => {
+		mountUnderLayer();
+		const items = rows();
+
+		act(() => items[0]?.focus());
+		act(() => pressKey(items[0] as Element, "ArrowDown", true));
+		act(() => pressKey(items[0] as Element, "ArrowDown", true));
+
+		assert.deepEqual(selectedIds(), ["t2", "t3"]);
+	});
+
+	it("Shift+ArrowUp extends the selection back up the rows", () => {
+		mountUnderLayer();
+		const items = rows();
+
+		act(() => items[0]?.focus());
+		act(() => pressKey(items[0] as Element, "ArrowDown"));
+		act(() => pressKey(items[0] as Element, "ArrowDown"));
+		act(() => pressKey(items[0] as Element, "ArrowUp", true));
+		act(() => pressKey(items[0] as Element, "ArrowUp", true));
+
+		assert.deepEqual(selectedIds(), ["t1", "t2"]);
+	});
+
+	it("Shift+ArrowDown selects the rows Shift+J does", () => {
+		mountUnderLayer();
+		const items = rows();
+
+		act(() => items[0]?.focus());
+		act(() => pressKey(items[0] as Element, "j", true));
+		act(() => pressKey(items[0] as Element, "j", true));
+
+		assert.deepEqual(selectedIds(), ["t2", "t3"]);
+	});
+
+	it("hands the bare arrows to the layer instead of walking the rows itself", () => {
+		mountUnderLayer();
+		const items = rows();
+
+		act(() => items[0]?.focus());
+		act(() => pressKey(items[0] as Element, "ArrowDown"));
+
+		assert.equal(list?.cursor.focusedMessageId, "t2");
+	});
+});

package/src/components/brief-sections.tsx

@@ -2,10 +2,15 @@ import { useRef, useState } from "react";
 import { LIST_ROW_SELECTOR, useRovingFocus } from "../lib/roving-focus.js";
 import type {
 	BriefCategoryFilter,
+	MessageListKeyboard,
 	ThreadRowData,
 	ThreadSection,
 } from "./app-shell-types.js";
-import { briefCategories, categoryTone } from "./app-shell-types.js";
+import {
+	briefCategories,
+	categoryTone,
+	keyboardWalksRows,
+} from "./app-shell-types.js";
 import { BriefSection } from "./brief-section.js";
 import {
 	FilterSheet,
@@ -135,6 +140,13 @@ interface BriefSectionsBaseProps
 	sections: ThreadSection[];
 	selectedThreadId?: string;
 	Row: BriefRowComponent;
+	/**
+	 * The keyboard layer walking the rows, when the caller mounts one. The rows
+	 * hand it the cursor keys rather than traversing with a roving group of their
+	 * own, so the ring and the cursor name one row and a Shift+arrow range
+	 * reaches the layer that extends it.
+	 */
+	keyboard?: MessageListKeyboard;
 	onSelectThread?: (id: string) => void;
 	/**
 	 * Drop the filter row and its panel, keeping the rows where they are. See
@@ -160,6 +172,7 @@ export function BriefSections({
 	briefCategory = "all",
 	selectedThreadId,
 	Row,
+	keyboard,
 	onSelectThread,
 	onSelectBriefCategory,
 	sources,
@@ -179,6 +192,7 @@ export function BriefSections({
 	useRovingFocus({
 		containerRef: listRef,
 		itemSelector: LIST_ROW_SELECTOR,
+		enabled: !keyboardWalksRows(keyboard),
 	});
 
 	const active = activeFilters ?? ownFilters;

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

@@ -4,11 +4,12 @@ import { useCallback, useEffect, useRef, useState } from "react";
 import { defaultKeyboardHints, keyboardHintsFor } from "../lib/keymap.js";
 import { LIST_ROW_SELECTOR, useRovingFocus } from "../lib/roving-focus.js";
 import { deriveIsMultiSelectMode, modifiersOf } from "../lib/use-selection.js";
-import type {
-	AppShellProps,
-	MessageListKeyboard,
-	MessageListSelection,
-	TouchSeed,
+import {
+	type AppShellProps,
+	keyboardWalksRows,
+	type MessageListKeyboard,
+	type MessageListSelection,
+	type TouchSeed,
 } from "./app-shell-types.js";
 import { type BriefFilterSurface, BriefSections } from "./brief-sections.js";
 import { Button } from "./button.js";
@@ -149,10 +150,7 @@ export function MessageListPane({
 	// The layer answers the arrows only if it registered them. Anything else it
 	// hands over — a layer with no cursor keys, or no layer at all — leaves the
 	// rows their own traversal and their own single tab stop.
-	const walksRows =
-		keyboard !== undefined &&
-		keyboard.handlers.focusNext !== undefined &&
-		keyboard.handlers.focusPrevious !== undefined;
+	const walksRows = keyboardWalksRows(keyboard);
 	useRovingFocus({
 		containerRef: flatListRef,
 		itemSelector: LIST_ROW_SELECTOR,
@@ -327,6 +325,7 @@ export function MessageListPane({
 					sections={sections}
 					selectedThreadId={selectedThreadId}
 					Row={BriefRow}
+					keyboard={keyboard}
 					onSelectThread={onSelectThread}
 				/>
 			) : listBody != null ? (

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/lib/roving-focus.test.ts

@@ -93,9 +93,9 @@ afterEach(() => {
 	});
 });
 
-function pressKey(target: Element, key: string) {
+function pressKey(target: Element, key: string, shiftKey = false) {
 	target.dispatchEvent(
-		new dom.window.KeyboardEvent("keydown", { key, bubbles: true }),
+		new dom.window.KeyboardEvent("keydown", { key, bubbles: true, shiftKey }),
 	);
 }
 
@@ -222,6 +222,23 @@ describe("useRovingFocus", () => {
 		assert.equal(dom.window.document.activeElement, rows()[0]);
 	});
 
+	it("leaves Shift+Arrow to the layer above instead of moving the cursor", () => {
+		mount({ count: 3 });
+		let seen = 0;
+		const spy = () => {
+			seen += 1;
+		};
+		dom.window.addEventListener("keydown", spy);
+		const items = rows();
+		act(() => items[0]?.focus());
+		act(() => pressKey(items[0] as Element, "ArrowDown", true));
+		act(() => pressKey(items[0] as Element, "ArrowUp", true));
+		dom.window.removeEventListener("keydown", spy);
+
+		assert.equal(dom.window.document.activeElement, items[0]);
+		assert.equal(seen, 2);
+	});
+
 	it("keeps a handled key from reaching a window-level listener", () => {
 		mount({ count: 3 });
 		let seen = 0;

package/src/lib/roving-focus.ts

@@ -69,7 +69,8 @@ function rovingItems(
  * consumer-supplied row component, so neither has a flat array to index into.
  *
  * A handled key stops propagating, so a window-level keyboard layer above the
- * group does not act on the same press.
+ * group does not act on the same press. Only the bare keys are handled — a
+ * modified arrow is a different binding, and it belongs to that layer.
  */
 export function useRovingFocus({
 	containerRef,
@@ -95,6 +96,11 @@ export function useRovingFocus({
 		};
 
 		const onKeyDown = (event: KeyboardEvent) => {
+			// Shift+Arrow extends a selection; the group traverses on the bare key
+			// and leaves every modified stroke to the layer that binds it.
+			if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) {
+				return;
+			}
 			const items = rovingItems(container, itemSelector);
 			const currentIndex = items.indexOf(document.activeElement as HTMLElement);
 			const nextIndex = rovingNextIndex(

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,
 	};
 };