npm - @remit/web-client - Versions diffs - 0.0.49 → 0.0.50 - Mend

@remit/web-client 0.0.49 → 0.0.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/package.json +5 -3
package/src/components/mail/BriefPane.tsx +98 -2
package/src/components/mail/DailyBrief.tsx +44 -12
package/src/components/mail/FlaggedList.tsx +51 -27
package/src/components/mail/FlaggedPane.tsx +101 -2
package/src/components/mail/MailboxPane.tsx +28 -77
package/src/components/mail/MessageRow.tsx +20 -8
package/src/components/mail/ThreadListInteraction.test.ts +199 -0
package/src/components/mail/ThreadListInteraction.tsx +408 -0
package/src/hooks/useDeleteMessages.ts +16 -4
package/src/hooks/useListCursor.test.ts +273 -0
package/src/hooks/useListCursor.ts +226 -0
package/src/hooks/useMarkAsRead.ts +15 -3
package/src/hooks/useTriageLayer.ts +148 -0

package/src/hooks/useListCursor.test.ts ADDED Viewed

@@ -0,0 +1,273 @@
+/**
+ * The shared list cursor (#149) — the roving keyboard cursor and multi-selection
+ * every thread list drives. Mounted against jsdom rather than `renderToString`,
+ * since the state only moves in response to real calls across renders.
+ */
+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 { createRoot, type Root } from "react-dom/client";
+import { type ListCursor, useListCursor } from "./useListCursor";
+const IDS = ["m1", "m2", "m3", "m4"];
+let dom: JSDOM;
+let container: HTMLElement;
+let root: Root;
+before(async () => {
+	const { JSDOM: JSDOMCtor } = await import("jsdom");
+	dom = new JSDOMCtor(
+		"<!doctype html><html><body><div id=root></div></body></html>",
+		{ url: "http://localhost/", pretendToBeVisual: true },
+	);
+	globalThis.window = dom.window as unknown as typeof globalThis.window;
+	globalThis.document = dom.window.document;
+	globalThis.HTMLElement = dom.window.HTMLElement;
+	globalThis.Element = dom.window.Element;
+	Object.defineProperty(globalThis, "navigator", {
+		value: dom.window.navigator,
+		configurable: true,
+	});
+	(
+		globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+	).IS_REACT_ACT_ENVIRONMENT = true;
+});
+after(() => dom.window.close());
+beforeEach(() => {
+	container = dom.window.document.getElementById(
+		"root",
+	) as unknown as HTMLElement;
+	container.innerHTML = "";
+	root = createRoot(container);
+});
+afterEach(() => {
+	act(() => root.unmount());
+});
+/**
+ * Mount the hook and hand back a live handle. Every read goes through
+ * `current()` so a test never asserts against a stale render.
+ */
+function mountCursor(options: {
+	orderedIds?: string[];
+	isDesktop?: boolean;
+	initialFocusedId?: string;
+}): () => ListCursor {
+	let latest: ListCursor | undefined;
+	const Probe = () => {
+		latest = useListCursor({
+			orderedIds: options.orderedIds ?? IDS,
+			isDesktop: options.isDesktop ?? true,
+			initialFocusedId: options.initialFocusedId,
+		});
+		return null;
+	};
+	act(() => root.render(createElement(Probe)));
+	return () => {
+		if (!latest) throw new Error("cursor not mounted");
+		return latest;
+	};
+}
+describe("useListCursor — the roving cursor", () => {
+	it("starts on the open thread and walks the list with next/previous", () => {
+		const cursor = mountCursor({ initialFocusedId: "m2" });
+		assert.equal(cursor().focusedMessageId, "m2");
+		act(() => cursor().focusNext());
+		assert.equal(cursor().focusedMessageId, "m3");
+		act(() => cursor().focusPrevious());
+		assert.equal(cursor().focusedMessageId, "m2");
+	});
+	it("starts at the top when nothing is focused yet", () => {
+		const cursor = mountCursor({});
+		assert.equal(cursor().focusedMessageId, undefined);
+		act(() => cursor().focusNext());
+		assert.equal(cursor().focusedMessageId, "m1");
+	});
+	it("clamps at both ends rather than wrapping", () => {
+		const cursor = mountCursor({ initialFocusedId: "m1" });
+		act(() => cursor().focusPrevious());
+		assert.equal(cursor().focusedMessageId, "m1");
+		act(() => cursor().focusLast());
+		assert.equal(cursor().focusedMessageId, "m4");
+		act(() => cursor().focusNext());
+		assert.equal(cursor().focusedMessageId, "m4");
+		act(() => cursor().focusFirst());
+		assert.equal(cursor().focusedMessageId, "m1");
+	});
+	it("moves nothing when the list is empty", () => {
+		const cursor = mountCursor({ orderedIds: [] });
+		act(() => cursor().focusNext());
+		act(() => cursor().focusLast());
+		assert.equal(cursor().focusedMessageId, undefined);
+	});
+	it("asks for DOM focus on its own moves, not on a pointer move", () => {
+		const cursor = mountCursor({ initialFocusedId: "m1" });
+		act(() => cursor().focusNext());
+		assert.equal(cursor().pendingDomFocusRef.current, "m2");
+		assert.equal(cursor().cursorMovedByPointerRef.current, false);
+	});
+});
+describe("useListCursor — selection", () => {
+	it("x toggles the row under the cursor", () => {
+		const cursor = mountCursor({ initialFocusedId: "m2" });
+		act(() => cursor().toggleFocusedSelection());
+		assert.deepEqual([...cursor().selection.selectedIds], ["m2"]);
+		act(() => cursor().toggleFocusedSelection());
+		assert.equal(cursor().selection.selectedCount, 0);
+	});
+	it("shift-extend moves the cursor and grows the range from the anchor", () => {
+		const cursor = mountCursor({ initialFocusedId: "m2" });
+		// The first press has no anchor yet, so the row it lands on becomes both
+		// the anchor and the whole range.
+		act(() => cursor().extendRangeDown());
+		assert.deepEqual([...cursor().selection.selectedIds], ["m3"]);
+		assert.equal(cursor().focusedMessageId, "m3");
+		assert.equal(cursor().selection.anchorId, "m3");
+		// Consecutive presses extend from that anchor.
+		act(() => cursor().extendRangeDown());
+		assert.deepEqual([...cursor().selection.selectedIds].sort(), ["m3", "m4"]);
+		assert.equal(cursor().focusedMessageId, "m4");
+		assert.equal(cursor().selection.anchorId, "m3");
+	});
+	it("shift-extend upward ranges back through the anchor", () => {
+		const cursor = mountCursor({ initialFocusedId: "m4" });
+		act(() => cursor().extendRangeUp());
+		assert.deepEqual([...cursor().selection.selectedIds], ["m3"]);
+		act(() => cursor().extendRangeUp());
+		assert.deepEqual([...cursor().selection.selectedIds].sort(), ["m2", "m3"]);
+		assert.equal(cursor().focusedMessageId, "m2");
+	});
+	it("at the last row, extending takes that row and the cursor stays", () => {
+		const cursor = mountCursor({ initialFocusedId: "m4" });
+		act(() => cursor().extendRangeDown());
+		assert.deepEqual([...cursor().selection.selectedIds], ["m4"]);
+		assert.equal(cursor().focusedMessageId, "m4");
+	});
+	it("select-all takes every row, and exiting clears it", () => {
+		const cursor = mountCursor({});
+		act(() => cursor().selectAllLoaded());
+		assert.equal(cursor().selection.selectedCount, IDS.length);
+		act(() => cursor().exitSelection());
+		assert.equal(cursor().selection.selectedCount, 0);
+	});
+	it("runs the caller's teardown before clearing", () => {
+		const order: string[] = [];
+		let latest: ListCursor | undefined;
+		const Probe = () => {
+			latest = useListCursor({
+				orderedIds: IDS,
+				isDesktop: true,
+				onExitSelection: () => order.push("teardown"),
+			});
+			return null;
+		};
+		act(() => root.render(createElement(Probe)));
+		act(() => latest?.selectAllLoaded());
+		act(() => latest?.exitSelection());
+		assert.deepEqual(order, ["teardown"]);
+		assert.equal(latest?.selection.selectedCount, 0);
+	});
+});
+describe("useListCursor — mouse selection semantics", () => {
+	it("shift-click ranges, cmd-click toggles, and both consume the click", () => {
+		const cursor = mountCursor({ initialFocusedId: "m1" });
+		let handled = false;
+		act(() => {
+			handled = cursor().handleRowSelect("m3", {
+				shiftKey: true,
+				metaKey: false,
+				ctrlKey: false,
+			});
+		});
+		assert.equal(handled, true);
+		assert.deepEqual([...cursor().selection.selectedIds].sort(), [
+			"m1",
+			"m2",
+			"m3",
+		]);
+		act(() => {
+			handled = cursor().handleRowSelect("m4", {
+				shiftKey: false,
+				metaKey: true,
+				ctrlKey: false,
+			});
+		});
+		assert.equal(handled, true);
+		assert.ok(cursor().selection.selectedIds.has("m4"));
+	});
+	it("a plain click collapses the selection and lets the row open", () => {
+		const cursor = mountCursor({ initialFocusedId: "m1" });
+		act(() => cursor().selectAllLoaded());
+		let handled = true;
+		act(() => {
+			handled = cursor().handleRowSelect("m2", {
+				shiftKey: false,
+				metaKey: false,
+				ctrlKey: false,
+			});
+		});
+		assert.equal(handled, false, "navigation must proceed on a plain click");
+		assert.equal(cursor().selection.selectedCount, 0);
+	});
+});
+describe("useListCursor — the device branch", () => {
+	it("is not in multi-select mode on desktop, whatever is selected", () => {
+		const cursor = mountCursor({ isDesktop: true });
+		act(() => cursor().selectAllLoaded());
+		assert.equal(cursor().isMultiSelectMode, false);
+	});
+	it("enters multi-select mode on touch as soon as something is selected", () => {
+		const cursor = mountCursor({ isDesktop: false });
+		assert.equal(cursor().isMultiSelectMode, false);
+		act(() => cursor().selection.select("m2"));
+		assert.equal(cursor().isMultiSelectMode, true);
+	});
+	it("on touch, in multi-select mode, next/previous toggle instead of moving", () => {
+		const cursor = mountCursor({ isDesktop: false, initialFocusedId: "m1" });
+		act(() => cursor().selection.select("m1"));
+		act(() => cursor().focusNext());
+		assert.equal(
+			cursor().focusedMessageId,
+			"m1",
+			"the cursor stays put in multi-select mode",
+		);
+		assert.deepEqual([...cursor().selection.selectedIds].sort(), ["m1", "m2"]);
+	});
+});

package/src/hooks/useListCursor.ts ADDED Viewed

@@ -0,0 +1,226 @@
+/**
+ * useListCursor — the roving keyboard cursor and multi-selection of a thread
+ * list, independent of how the list renders.
+ *
+ * The mailbox list, the daily brief and Flagged all need it. It used to exist
+ * only inside `MessageList`, so the brief and Flagged had no cursor and no
+ * selection at all (#149). Everything here is list-shape agnostic: it works off
+ * the ordered message ids, so a virtualized flat list and a sectioned brief
+ * drive the same state.
+ *
+ * DOM concerns stay with the caller. `pendingDomFocusRef` names the row that
+ * should take real browser focus once it is rendered, and
+ * `cursorMovedByPointerRef` records whether the last move came from a click, so
+ * a list that scrolls its cursor into view can skip doing so for pointer moves.
+ */
+import { useCallback, useMemo, useRef, useState } from "react";
+import {
+	nextFocusId,
+	type SelectionModifiers,
+	useSelection,
+} from "@/hooks/useSelection";
+import { deriveIsMultiSelectMode } from "@/lib/selection-mode";
+interface UseListCursorOptions {
+	/** Message ids in display order. */
+	orderedIds: string[];
+	isDesktop: boolean;
+	/** Seeds the cursor — normally the open thread. */
+	initialFocusedId?: string;
+	/** Extra teardown run before the selection is cleared. */
+	onExitSelection?: () => void;
+}
+export interface ListCursor {
+	focusedMessageId: string | undefined;
+	setFocusedMessageId: (id: string | undefined) => void;
+	focusIndex: number;
+	pendingDomFocusRef: React.RefObject<string | null>;
+	cursorMovedByPointerRef: React.RefObject<boolean>;
+	selection: ReturnType<typeof useSelection>;
+	isMultiSelectMode: boolean;
+	exitSelection: () => void;
+	moveFocusToIndex: (index: number) => void;
+	focusNext: () => void;
+	focusPrevious: () => void;
+	focusFirst: () => void;
+	focusLast: () => void;
+	toggleFocusedSelection: () => void;
+	extendRangeUp: () => void;
+	extendRangeDown: () => void;
+	selectAllLoaded: () => void;
+	/**
+	 * Desktop mouse selection semantics (Apple Mail / Gmail model). Returns true
+	 * when selection handled the click — the caller must then suppress the
+	 * row's navigation; false for a plain click.
+	 */
+	handleRowSelect: (
+		messageId: string,
+		modifiers: SelectionModifiers,
+	) => boolean;
+}
+export const useListCursor = ({
+	orderedIds,
+	isDesktop,
+	initialFocusedId,
+	onExitSelection,
+}: UseListCursorOptions): ListCursor => {
+	// The keyboard "where am I" pointer, distinct from the open thread
+	// (`selectedMessageId` in the URL). j/k move this cursor without opening;
+	// Enter opens the focused row. It seeds from the open thread so opening a
+	// message also focuses its row.
+	const [focusedMessageId, setFocusedMessageId] = useState<string | undefined>(
+		initialFocusedId,
+	);
+	const selection = useSelection();
+	const {
+		selectedCount,
+		toggle: toggleCheck,
+		clearSelection,
+		selectRange,
+		setAnchor,
+		selectAll,
+	} = selection;
+	// The selection count is the only source of truth for whether the list is in
+	// multi-select mode (#115). A separate flag needs an effect to reconcile it
+	// back to the count, and across that render the two disagree.
+	const isMultiSelectMode = deriveIsMultiSelectMode(selectedCount, isDesktop);
+	// Set when a keyboard command moves the cursor. Real DOM focus then follows
+	// it onto the row once rendered, so the browser's own focus — and therefore
+	// Tab, Shift+Tab and the focus ring — agree with what the list highlights
+	// (#43).
+	const pendingDomFocusRef = useRef<string | null>(null);
+	// Whether the cursor's last move came from a row taking DOM focus (a click)
+	// rather than a command. Scrolling for a click moves the row out from under
+	// the pointer between mousedown and click, so the click lands on empty space
+	// and nothing opens (#85).
+	const cursorMovedByPointerRef = useRef(false);
+	const exitSelection = useCallback(() => {
+		onExitSelection?.();
+		clearSelection();
+	}, [clearSelection, onExitSelection]);
+	const focusIndex = useMemo(
+		() => (focusedMessageId ? orderedIds.indexOf(focusedMessageId) : -1),
+		[orderedIds, focusedMessageId],
+	);
+	// Move the cursor by index. In multi-select mode (mobile) j/k toggle
+	// selection rather than moving a cursor.
+	const moveFocusToIndex = useCallback(
+		(index: number) => {
+			if (index < 0 || index >= orderedIds.length) return;
+			const messageId = orderedIds[index];
+			if (isMultiSelectMode) {
+				toggleCheck(messageId);
+				return;
+			}
+			pendingDomFocusRef.current = messageId;
+			cursorMovedByPointerRef.current = false;
+			setFocusedMessageId(messageId);
+		},
+		[orderedIds, isMultiSelectMode, toggleCheck],
+	);
+	const focusNext = useCallback(() => {
+		if (orderedIds.length === 0) return;
+		moveFocusToIndex(
+			focusIndex < 0 ? 0 : Math.min(focusIndex + 1, orderedIds.length - 1),
+		);
+	}, [orderedIds.length, focusIndex, moveFocusToIndex]);
+	const focusPrevious = useCallback(() => {
+		if (orderedIds.length === 0) return;
+		moveFocusToIndex(focusIndex <= 0 ? 0 : focusIndex - 1);
+	}, [orderedIds.length, focusIndex, moveFocusToIndex]);
+	const focusFirst = useCallback(() => moveFocusToIndex(0), [moveFocusToIndex]);
+	const focusLast = useCallback(
+		() => moveFocusToIndex(orderedIds.length - 1),
+		[moveFocusToIndex, orderedIds.length],
+	);
+	const toggleFocusedSelection = useCallback(() => {
+		if (focusedMessageId) toggleCheck(focusedMessageId);
+	}, [focusedMessageId, toggleCheck]);
+	const handleRowSelect = useCallback(
+		(messageId: string, modifiers: SelectionModifiers): boolean => {
+			if (modifiers.shiftKey) {
+				// The open/focused row is the fallback origin when the stored anchor
+				// has been filtered or searched out of the visible list, so the first
+				// shift-click still ranges from where the user is (#142, #144).
+				selectRange(orderedIds, messageId, focusedMessageId);
+				return true;
+			}
+			if (modifiers.metaKey || modifiers.ctrlKey) {
+				toggleCheck(messageId);
+				return true;
+			}
+			// Plain click: collapse any multi-selection and let navigation proceed.
+			// The clicked row becomes the next anchor for a subsequent shift-click,
+			// but is NOT added to the checkbox set (no toolbar on a plain open).
+			exitSelection();
+			setAnchor(messageId);
+			return false;
+		},
+		[
+			orderedIds,
+			focusedMessageId,
+			selectRange,
+			toggleCheck,
+			exitSelection,
+			setAnchor,
+		],
+	);
+	// Shift+arrow moves the cursor one row and adds the row it lands on to the
+	// range — the keyboard equivalent of shift-click. The first press seeds the
+	// anchor on that row; consecutive presses extend from it. The range only
+	// grows, so reversing direction ranges back through the anchor rather than
+	// giving rows up.
+	const extendRange = useCallback(
+		(direction: -1 | 1) => {
+			const target = nextFocusId(orderedIds, focusedMessageId, direction);
+			if (target === undefined) return;
+			selectRange(orderedIds, target);
+			pendingDomFocusRef.current = target;
+			cursorMovedByPointerRef.current = false;
+			setFocusedMessageId(target);
+		},
+		[orderedIds, focusedMessageId, selectRange],
+	);
+	const extendRangeUp = useCallback(() => extendRange(-1), [extendRange]);
+	const extendRangeDown = useCallback(() => extendRange(1), [extendRange]);
+	const selectAllLoaded = useCallback(() => {
+		if (orderedIds.length > 0) selectAll(orderedIds);
+	}, [orderedIds, selectAll]);
+	return {
+		focusedMessageId,
+		setFocusedMessageId,
+		focusIndex,
+		pendingDomFocusRef,
+		cursorMovedByPointerRef,
+		selection,
+		isMultiSelectMode,
+		exitSelection,
+		moveFocusToIndex,
+		focusNext,
+		focusPrevious,
+		focusFirst,
+		focusLast,
+		toggleFocusedSelection,
+		extendRangeUp,
+		extendRangeDown,
+		selectAllLoaded,
+		handleRowSelect,
+	};
+};

package/src/hooks/useMarkAsRead.ts CHANGED Viewed

@@ -287,8 +287,14 @@ export const useMarkAsRead = ({
 export const useToggleReadFor = (options: {
 	mailboxId: string;
 	accountId?: string;
+	/**
+	 * The threads the ids may come from, when the caller has them. A selection in
+	 * the brief or Flagged spans mailboxes, so the listings to invalidate are the
+	 * ones each message actually lives in.
+	 */
+	messages?: RemitImapThreadMessageResponse[];
 }) => {
-	const { mailboxId, accountId } = options;
+	const { mailboxId, accountId, messages } = options;
 	const queryClient = useQueryClient();
 	const { pushError } = useErrorBanners();
@@ -302,10 +308,16 @@ export const useToggleReadFor = (options: {
 				error,
 			});
 		},
-		onSettled: () => {
+		onSettled: (_data, _error, variables) => {
 			invalidateThreadListQueries(
 				queryClient,
-				threadListCacheKeys([mailboxId]),
+				threadListCacheKeys(
+					resolveMailboxesForMessages(
+						variables.body.messageIds ?? [],
+						messages ?? [],
+						mailboxId,
+					),
+				),
 			);
 			if (accountId) {
 				queryClient.invalidateQueries({

package/src/hooks/useTriageLayer.ts ADDED Viewed

@@ -0,0 +1,148 @@
+/**
+ * The pane-level interaction layer: the bridge between a mounted list and the
+ * global keyboard dispatcher, plus next/previous adjacency.
+ *
+ * The list publishes `MessageListCommands` into `listCommandsRef` and reports
+ * its cursor and selection through `onTriageContextChange`; the keyboard hook
+ * registers the navigation and selection keys only while a list is serving
+ * them, so with no list mounted Enter, Space and ⌘A stay with the browser.
+ *
+ * This lived inside `MailboxPane`, which is why the brief and Flagged had a
+ * keyboard hint bar and no keyboard (#149). Every pane mounts it now.
+ *
+ * It is two hooks because a pane's verbs are aimed at the focused row: the
+ * context comes first, the pane builds its handlers from it, and the keyboard
+ * registration comes last.
+ */
+import { type RefObject, useCallback, useRef, useState } from "react";
+import type { MessageListCommands } from "@/components/mail/MessageList";
+import {
+	type TriageHandlers,
+	useTriageKeyboard,
+} from "@/hooks/useTriageKeyboard";
+import { adjacentMessageId } from "@/lib/adjacent-message";
+export interface TriageContextUpdate {
+	focusedMessageId: string | undefined;
+	selectedIds: string[];
+	hasList: boolean;
+	blocksKeyboard: boolean;
+	/** Row ids in display order, when the list knows them. Feeds adjacency. */
+	orderedIds?: string[];
+}
+export interface TriageContext {
+	listCommandsRef: RefObject<MessageListCommands | null>;
+	onTriageContextChange: (context: TriageContextUpdate) => void;
+	/** The list's roving cursor — where a verb with no selection is aimed. */
+	focusedMessageId: string | undefined;
+	/** The list's checkbox set — what a verb targets when it is non-empty. */
+	selectedIds: string[];
+	/** Row ids in display order, as last reported by the list. */
+	orderedIds: string[];
+	hasList: boolean;
+	blocksKeyboard: boolean;
+}
+export const useTriageContext = (): TriageContext => {
+	const [focusedMessageId, setFocusedMessageId] = useState<string | undefined>(
+		undefined,
+	);
+	const [selectedIds, setSelectedIds] = useState<string[]>([]);
+	const [orderedIds, setOrderedIds] = useState<string[]>([]);
+	// Null whenever no list is mounted (reading-only phone view, drafts) — the
+	// keyboard layer then simply has nothing to drive.
+	const listCommandsRef = useRef<MessageListCommands | null>(null);
+	const [hasList, setHasList] = useState(false);
+	const [blocksKeyboard, setBlocksKeyboard] = useState(false);
+	const onTriageContextChange = useCallback((context: TriageContextUpdate) => {
+		setFocusedMessageId(context.focusedMessageId);
+		setSelectedIds(context.selectedIds);
+		if (context.orderedIds) setOrderedIds(context.orderedIds);
+		setHasList(context.hasList);
+		setBlocksKeyboard(context.blocksKeyboard);
+	}, []);
+	return {
+		listCommandsRef,
+		onTriageContextChange,
+		focusedMessageId,
+		selectedIds,
+		orderedIds,
+		hasList,
+		blocksKeyboard,
+	};
+};
+interface UseTriageLayerOptions {
+	context: TriageContext;
+	/** Message ids in display order — the adjacency source for next/previous. */
+	orderedIds: string[];
+	selectedMessageId: string | undefined;
+	/** Suspend the whole layer (e.g. a compose surface owns the keyboard). */
+	enabled?: boolean;
+	/** Close the open thread. Runs only when there is no selection to unwind. */
+	onClose: () => void;
+	/** The pane's own verbs — reply, star, delete and the rest. */
+	handlers: TriageHandlers;
+}
+export interface TriageLayer {
+	/** Esc: unwinds the selection first, then the open thread. */
+	goBack: () => void;
+	nextMessageId: string | undefined;
+	previousMessageId: string | undefined;
+}
+export const useTriageLayer = ({
+	context,
+	orderedIds,
+	selectedMessageId,
+	enabled = true,
+	onClose,
+	handlers,
+}: UseTriageLayerOptions): TriageLayer => {
+	const { listCommandsRef, hasList, blocksKeyboard } = context;
+	const goBack = useCallback(() => {
+		if (listCommandsRef.current?.clearSelection()) return;
+		if (selectedMessageId) onClose();
+	}, [listCommandsRef, selectedMessageId, onClose]);
+	useTriageKeyboard({
+		// A modal owns the keyboard outright. Suspending the layer is what keeps a
+		// second Delete press from reaching a delete while the confirmation for the
+		// first one is still on screen.
+		enabled: enabled && !blocksKeyboard,
+		handlers: {
+			// Registered only while a list is mounted to serve them. An unregistered
+			// action is never preventDefault-ed, so with no list the browser keeps
+			// Enter, Space and ⌘A — select-all-text in the reading pane still works.
+			...(hasList
+				? {
+						focusNext: () => listCommandsRef.current?.focusNext(),
+						focusPrevious: () => listCommandsRef.current?.focusPrevious(),
+						focusFirst: () => listCommandsRef.current?.focusFirst(),
+						focusLast: () => listCommandsRef.current?.focusLast(),
+						openFocused: () => listCommandsRef.current?.openFocused(),
+						toggleSelect: () => listCommandsRef.current?.toggleSelect(),
+						extendSelectDown: () => listCommandsRef.current?.extendSelectDown(),
+						extendSelectUp: () => listCommandsRef.current?.extendSelectUp(),
+						selectAll: () => listCommandsRef.current?.selectAll(),
+						toggleDensity: () => listCommandsRef.current?.toggleDensity(),
+					}
+				: {}),
+			back: goBack,
+			...handlers,
+		},
+	});
+	return {
+		goBack,
+		nextMessageId:
+			adjacentMessageId(orderedIds, selectedMessageId, "next") ?? undefined,
+		previousMessageId:
+			adjacentMessageId(orderedIds, selectedMessageId, "previous") ?? undefined,
+	};
+};