@remit/web-client 0.0.14 → 0.0.16

package/src/components/ui/ConfirmDialog.tsx

@@ -66,13 +66,15 @@ export const ConfirmDialog = ({
 	if (!isOpen) return null;
 
 	return (
-		<div
-			className="fixed inset-0 z-50 flex items-center justify-center"
-			aria-hidden="true"
-			onClick={onCancel}
-		>
-			{/* Backdrop */}
-			<div className="absolute inset-0 bg-canvas/80 backdrop-blur-sm" />
+		<div className="fixed inset-0 z-50 flex items-center justify-center">
+			{/* Backdrop. It carries the click-to-dismiss and the aria-hidden: the
+			    dialog itself must stay in the accessibility tree, and an
+			    aria-hidden ancestor would take it out. */}
+			<div
+				className="absolute inset-0 bg-canvas/80 backdrop-blur-sm"
+				aria-hidden="true"
+				onClick={onCancel}
+			/>
 
 			{/* Dialog */}
 			<div

package/src/hooks/useTriageKeyboard.ts

@@ -2,6 +2,7 @@ import { useEffect, useRef } from "react";
 import type { TriageAction } from "@/lib/keymap";
 import {
 	dispatchKey,
+	isControlTarget,
 	isEditableTarget,
 	type SequencePrefix,
 } from "@/lib/keymap-dispatch";
@@ -27,14 +28,17 @@ interface UseTriageKeyboardOptions {
  * even Esc is left to the focused field's own handler) and carrying the `g …`
  * go-to sequence prefix across keystrokes with a timeout.
  *
- * Routing is intentionally NOT fully unified yet: this hook owns the action
- * verbs + go-to keys, while the list-local navigation keys (j/k/x/Enter/d,
- * Shift+arrow, Delete/Backspace) are still routed by MessageList's legacy
- * `useKeyboardNavigation`, `/` by SearchBar, and `?` by the mail layout — three
- * separate window listeners, each with its own (consistent) input-guard. The
- * `@/lib/keymap` module is the single source of truth for the DISPLAYED
- * bindings (the `?` overlay + tooltips), but not yet for routing. Consolidating
- * every binding through `dispatchKey` is a follow-up; see #429.
+ * List navigation and selection route through here and nowhere else: the
+ * message list publishes its commands upward (see `MessageListCommands`) and
+ * the route wires them into the handler table, so `@/lib/keymap` is the source
+ * of truth for both the displayed bindings and the routed ones. The list used
+ * to run a second window listener claiming the same keys, which is what made
+ * Enter unusable on every focused button in the app (#43).
+ *
+ * Other window-level keydown listeners still exist for keys this layer does not
+ * own — `?` at the mail layout, `/` in SearchBar, Esc in the compose and
+ * conversation views. They bind disjoint keys; only the list's competing
+ * listener was removed.
  *
  * Per-action targeting (focused row vs selection) and the actual mutations live
  * in the handlers the caller passes in — this hook only dispatches.
@@ -70,6 +74,7 @@ export function useTriageKeyboard({
 					ctrlKey: event.ctrlKey,
 					altKey: event.altKey,
 					inEditable: isEditableTarget(event.target),
+					onControl: isControlTarget(event.target),
 				},
 				prefixRef.current,
 			);

package/src/lib/keymap-dispatch.test.ts

@@ -12,6 +12,7 @@ const stroke = (partial: Partial<KeyStroke> & { key: string }): KeyStroke => ({
 	ctrlKey: false,
 	altKey: false,
 	inEditable: false,
+	onControl: false,
 	...partial,
 });
 
@@ -61,6 +62,82 @@ describe("dispatchKey — plain bindings", () => {
 	});
 });
 
+describe("dispatchKey — list navigation", () => {
+	const cases: Array<[string, string]> = [
+		["ArrowDown", "focusNext"],
+		["ArrowUp", "focusPrevious"],
+		["Home", "focusFirst"],
+		["End", "focusLast"],
+		[" ", "toggleSelect"],
+		["Delete", "delete"],
+		["Backspace", "delete"],
+	];
+
+	for (const [key, action] of cases) {
+		test(`'${key}' → ${action}`, () => {
+			const result = run({ key });
+			assert.strictEqual(result.action, action);
+			assert.strictEqual(result.preventDefault, true);
+		});
+	}
+
+	test("Shift+Arrow extends the selection instead of moving the cursor", () => {
+		assert.strictEqual(
+			run({ key: "ArrowDown", shiftKey: true }).action,
+			"extendSelectDown",
+		);
+		assert.strictEqual(
+			run({ key: "ArrowUp", shiftKey: true }).action,
+			"extendSelectUp",
+		);
+	});
+
+	test("⌘A / Ctrl+A selects every loaded row", () => {
+		assert.strictEqual(run({ key: "a", metaKey: true }).action, "selectAll");
+		assert.strictEqual(run({ key: "a", ctrlKey: true }).action, "selectAll");
+		assert.strictEqual(
+			run({ key: "a", metaKey: true }).preventDefault,
+			true,
+			"the browser's select-all-text default must be replaced",
+		);
+	});
+});
+
+describe("dispatchKey — controls keep their activation keys", () => {
+	// The regression behind #43: a global Enter binding cancelled the default
+	// action of whatever the user had tabbed to, so no button in the app could
+	// be activated from the keyboard.
+	test("Enter on a focused control is left to the control", () => {
+		const result = run({ key: "Enter", onControl: true });
+		assert.strictEqual(result.action, null);
+		assert.strictEqual(result.preventDefault, false);
+	});
+
+	test("Space on a focused control is left to the control", () => {
+		const result = run({ key: " ", onControl: true });
+		assert.strictEqual(result.action, null);
+		assert.strictEqual(result.preventDefault, false);
+	});
+
+	test("Enter and Space still drive the list away from a control", () => {
+		assert.strictEqual(run({ key: "Enter" }).action, "openFocused");
+		assert.strictEqual(run({ key: " " }).action, "toggleSelect");
+	});
+
+	test("non-activation keys still fire from a focused control", () => {
+		// Tabbing to a toolbar button must not strand the rest of the keymap.
+		assert.strictEqual(run({ key: "j", onControl: true }).action, "focusNext");
+		assert.strictEqual(run({ key: "r", onControl: true }).action, "reply");
+	});
+
+	test("an Enter released to a control still cancels a pending g prefix", () => {
+		assert.strictEqual(
+			run({ key: "Enter", onControl: true }, "g").nextPrefix,
+			null,
+		);
+	});
+});
+
 describe("dispatchKey — input suppression", () => {
 	test("plain keys are inert in an editable surface", () => {
 		assert.strictEqual(run({ key: "j", inEditable: true }).action, null);
@@ -98,8 +175,8 @@ describe("dispatchKey — modifiers", () => {
 	});
 
 	test("other meta combos are left to the browser", () => {
-		assert.strictEqual(run({ key: "a", metaKey: true }).action, null);
 		assert.strictEqual(run({ key: "c", metaKey: true }).action, null);
+		assert.strictEqual(run({ key: "f", metaKey: true }).action, null);
 	});
 
 	test("Shift+J / Shift+K extend the selection", () => {

package/src/lib/keymap-dispatch.ts

@@ -19,6 +19,15 @@ export interface KeyStroke {
 	altKey: boolean;
 	/** Whether the event originated inside an editable surface. */
 	inEditable: boolean;
+	/**
+	 * Whether the event originated on an activatable control that is not a
+	 * message-list row — a button, link, `role="button"`, `<summary>`. Enter and
+	 * Space are that control's activation keys, so the layer releases them; every
+	 * other binding still fires. Without this a global Enter binding cancels the
+	 * default action of whatever the user tabbed to, and no button in the app can
+	 * be activated from the keyboard.
+	 */
+	onControl: boolean;
 }
 
 /** Pending sequence-prefix state. `"g"` means a `g` was pressed recently. */
@@ -69,7 +78,14 @@ interface PlainBinding {
 const PLAIN_BINDINGS: Record<string, PlainBinding> = {
 	j: { action: "focusNext" },
 	k: { action: "focusPrevious" },
+	arrowdown: { action: "focusNext" },
+	arrowup: { action: "focusPrevious" },
+	home: { action: "focusFirst" },
+	end: { action: "focusLast" },
 	enter: { action: "openFocused" },
+	" ": { action: "toggleSelect" },
+	delete: { action: "delete" },
+	backspace: { action: "delete" },
 	u: { action: "toggleRead" },
 	x: { action: "toggleSelect" },
 	r: { action: "reply" },
@@ -118,12 +134,26 @@ export function dispatchKey(
 		return { ...NONE, nextPrefix: prefix === "g" ? null : prefix };
 	}
 
+	// Enter / Space belong to whatever control has focus. Releasing them here is
+	// what keeps Tab-to-a-button-then-Enter working anywhere in the app; the
+	// list's own rows are excluded from `onControl`, so the roving cursor still
+	// opens and selects.
+	if (stroke.onControl && (lower === "enter" || lower === " ")) {
+		return { ...NONE, nextPrefix: prefix === "g" ? null : prefix };
+	}
+
 	// ⌘N / Ctrl+N → compose. Checked before the prefix/plain tables so the
 	// browser's "new window" is the only thing we intercept among meta combos.
 	if (meta && lower === "n") {
 		return { action: "compose", nextPrefix: null, preventDefault: true };
 	}
 
+	// ⌘A / Ctrl+A → select every loaded row, replacing the browser's
+	// select-all-text default.
+	if (meta && lower === "a") {
+		return { action: "selectAll", nextPrefix: null, preventDefault: true };
+	}
+
 	// Any other meta/ctrl combo is left to the browser/OS.
 	if (meta) return { ...NONE, nextPrefix: prefix === "g" ? null : prefix };
 
@@ -145,13 +175,17 @@ export function dispatchKey(
 		return { action: null, nextPrefix: "g", preventDefault: true };
 	}
 
-	// Shift+J / Shift+K extend the selection.
-	if (stroke.shiftKey && (lower === "j" || lower === "k")) {
-		return {
-			action: lower === "j" ? "extendSelectDown" : "extendSelectUp",
-			nextPrefix: null,
-			preventDefault: true,
-		};
+	// Shift+J/K and Shift+Arrow extend the selection.
+	if (stroke.shiftKey) {
+		const down = lower === "j" || lower === "arrowdown";
+		const up = lower === "k" || lower === "arrowup";
+		if (down || up) {
+			return {
+				action: down ? "extendSelectDown" : "extendSelectUp",
+				nextPrefix: null,
+				preventDefault: true,
+			};
+		}
 	}
 
 	// Plain single-key bindings.
@@ -185,3 +219,26 @@ export function isEditableTarget(target: EventTarget | null): boolean {
 		target.isContentEditable
 	);
 }
+
+/**
+ * Marks an element as a message-list row. Rows are anchors, so they would
+ * otherwise read as ordinary controls; the list owns Enter/Space on them.
+ */
+export const ROW_ATTRIBUTE = "data-message-row";
+
+const CONTROL_SELECTOR =
+	'button, a[href], summary, [role="button"], [role="menuitem"], [role="tab"], [role="switch"], [role="checkbox"]';
+
+/**
+ * Whether the event target sits inside an activatable control that is not a
+ * message-list row. See {@link KeyStroke.onControl}.
+ */
+export function isControlTarget(target: EventTarget | null): boolean {
+	if (!(target instanceof HTMLElement)) return false;
+	const control = target.closest(CONTROL_SELECTOR);
+	if (!control) return false;
+	// The nearest control wins. A row is an anchor and so matches the selector,
+	// but the list owns Enter/Space on its rows; a control nested *inside* a row
+	// (the select checkbox) is a control like any other and keeps its own keys.
+	return !control.hasAttribute(ROW_ATTRIBUTE);
+}

package/src/lib/keymap.ts

@@ -13,12 +13,15 @@ export type TriageAction =
 	// list navigation / focus model
 	| "focusNext"
 	| "focusPrevious"
+	| "focusFirst"
+	| "focusLast"
 	| "openFocused"
 	| "back"
 	// selection
 	| "toggleSelect"
 	| "extendSelectDown"
 	| "extendSelectUp"
+	| "selectAll"
 	// message verbs (focused row / selection)
 	| "reply"
 	| "replyAll"
@@ -76,6 +79,14 @@ export const KEY_HINT_GROUPS: KeyHintGroup[] = [
 				keys: ["k"],
 				description: "Focus previous message",
 			},
+			{ action: "focusNext", keys: ["↓"], description: "Focus next message" },
+			{
+				action: "focusPrevious",
+				keys: ["↑"],
+				description: "Focus previous message",
+			},
+			{ action: "focusFirst", keys: ["Home"], description: "Focus first" },
+			{ action: "focusLast", keys: ["End"], description: "Focus last" },
 			{
 				action: "openFocused",
 				keys: ["Enter"],
@@ -88,6 +99,7 @@ export const KEY_HINT_GROUPS: KeyHintGroup[] = [
 		title: "Selection",
 		hints: [
 			{ action: "toggleSelect", keys: ["x"], description: "Toggle select" },
+			{ action: "toggleSelect", keys: ["Space"], description: "Toggle select" },
 			{
 				action: "extendSelectDown",
 				keys: ["Shift", "j"],
@@ -98,6 +110,17 @@ export const KEY_HINT_GROUPS: KeyHintGroup[] = [
 				keys: ["Shift", "k"],
 				description: "Extend selection up",
 			},
+			{
+				action: "extendSelectDown",
+				keys: ["Shift", "↓"],
+				description: "Extend selection down",
+			},
+			{
+				action: "extendSelectUp",
+				keys: ["Shift", "↑"],
+				description: "Extend selection up",
+			},
+			{ action: "selectAll", keys: ["⌘", "A"], description: "Select all" },
 		],
 	},
 	{

package/src/lib/list-focus.test.ts

@@ -0,0 +1,25 @@
+import assert from "node:assert";
+import { describe, test } from "node:test";
+import { tabStopId } from "./list-focus.ts";
+
+const ids = ["a", "b", "c"];
+
+describe("tabStopId", () => {
+	test("the cursor row holds the tab stop", () => {
+		assert.strictEqual(tabStopId(ids, "b"), "b");
+	});
+
+	test("an untouched list puts the tab stop on the first row", () => {
+		assert.strictEqual(tabStopId(ids, undefined), "a");
+	});
+
+	test("a cursor that no longer exists falls back to the first row", () => {
+		// After a delete or a refetch the cursor can name a row that is gone; the
+		// list must keep a tab stop or Tab skips over it entirely.
+		assert.strictEqual(tabStopId(ids, "zzz"), "a");
+	});
+
+	test("an empty list has no tab stop", () => {
+		assert.strictEqual(tabStopId([], "a"), undefined);
+	});
+});

package/src/lib/list-focus.ts

@@ -0,0 +1,24 @@
+/**
+ * Roving-tabindex math for the message list.
+ *
+ * A virtualized list of hundreds of rows must expose exactly one tab stop:
+ * Tab then moves focus into the list at the keyboard cursor and Shift+Tab moves
+ * back out to the side panel, instead of walking every row. Pure so the rule is
+ * testable without a DOM.
+ */
+
+/**
+ * The id of the row that holds the list's tab stop. The keyboard cursor owns it
+ * while it points at a loaded row; otherwise the first row does, so an untouched
+ * list is still reachable with one Tab.
+ */
+export function tabStopId(
+	orderedIds: string[],
+	focusedId: string | undefined,
+): string | undefined {
+	if (orderedIds.length === 0) return undefined;
+	if (focusedId !== undefined && orderedIds.includes(focusedId)) {
+		return focusedId;
+	}
+	return orderedIds[0];
+}

package/src/routes/mail.tsx

@@ -298,7 +298,8 @@ function MailLayout() {
 					/>
 				</div>
 			) : onBriefRoute ? (
-				// Daily brief (/mail/) — no mailboxId param; 2-pane layout (no intelligence).
+				// Daily brief (/mail/) — no mailboxId param; same 3-pane layout as a
+				// mailbox: an open message has an intelligence rail here too (#52).
 				<BriefPane selectedMessageId={mobileSelectedMessageId}>
 					{isSinglePane ? (
 						<AppShellSlotted
@@ -316,7 +317,9 @@ function MailLayout() {
 							topBar={topBar}
 							list={<BriefPane.List />}
 							reading={<BriefPane.Reading />}
+							intelligence={<BriefPane.Intelligence />}
 							intelligenceOpen={intelligenceOpen}
+							hasThread={Boolean(mobileSelectedMessageId)}
 							overlay={overlayContent}
 							skeleton={<AppShellSkeleton />}
 							isLoading={isLoading || hasNoAccounts}
@@ -326,7 +329,7 @@ function MailLayout() {
 				</BriefPane>
 			) : onFlaggedRoute ? (
 				// Flagged virtual mailbox (/mail/flagged) — flat starred list across
-				// accounts; 2-pane layout (no intelligence), like the brief.
+				// accounts; same slots as the brief, intelligence rail included.
 				<FlaggedPane selectedMessageId={mobileSelectedMessageId}>
 					{isSinglePane ? (
 						<AppShellSlotted
@@ -344,7 +347,9 @@ function MailLayout() {
 							topBar={topBar}
 							list={<FlaggedPane.List />}
 							reading={<FlaggedPane.Reading />}
+							intelligence={<FlaggedPane.Intelligence />}
 							intelligenceOpen={intelligenceOpen}
+							hasThread={Boolean(mobileSelectedMessageId)}
 							overlay={overlayContent}
 							skeleton={<AppShellSkeleton />}
 							isLoading={isLoading || hasNoAccounts}
@@ -376,6 +381,7 @@ function MailLayout() {
 							reading={<MailboxPane.Reading />}
 							intelligence={<MailboxPane.Intelligence />}
 							intelligenceOpen={intelligenceOpen}
+							hasThread={Boolean(mobileSelectedMessageId)}
 							overlay={overlayContent}
 							skeleton={<AppShellSkeleton />}
 							isLoading={isLoading || hasNoAccounts}