@remit/web-client 0.0.49 → 0.0.50

package/src/components/mail/MailboxPane.tsx

@@ -93,9 +93,8 @@ import { useSemanticSearch } from "@/hooks/useSemanticSearch";
 import { useThreadActions } from "@/hooks/useThreadActions";
 import { useThreadMessageIds } from "@/hooks/useThreadMessageIds";
 import { useToggleStar } from "@/hooks/useToggleStar";
-import { useTriageKeyboard } from "@/hooks/useTriageKeyboard";
+import { useTriageContext, useTriageLayer } from "@/hooks/useTriageLayer";
 import { useUpdateAddressFlags } from "@/hooks/useUpdateAddressFlags";
-import { adjacentMessageId } from "@/lib/adjacent-message";
 import {
 	buildConversationTarget,
 	type ConversationTarget,
@@ -433,32 +432,13 @@ function MailboxPaneProvider({
 		],
 	);
 
-	const [triageFocusedId, setTriageFocusedId] = useState<string | undefined>(
-		undefined,
-	);
-	const [triageSelectedIds, setTriageSelectedIds] = useState<string[]>([]);
-	// The mounted message list publishes its navigation/selection commands here.
-	// 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);
-	// Whether a message list is mounted and serving commands, and whether it has
-	// a modal that owns the keyboard. Both drive which keys this route claims.
-	const [hasList, setHasList] = useState(false);
-	const [listBlocksKeyboard, setListBlocksKeyboard] = useState(false);
-	const handleTriageContextChange = useCallback(
-		(context: {
-			focusedMessageId: string | undefined;
-			selectedIds: string[];
-			hasList: boolean;
-			blocksKeyboard: boolean;
-		}) => {
-			setTriageFocusedId(context.focusedMessageId);
-			setTriageSelectedIds(context.selectedIds);
-			setHasList(context.hasList);
-			setListBlocksKeyboard(context.blocksKeyboard);
-		},
-		[],
-	);
+	const triage = useTriageContext();
+	const {
+		listCommandsRef,
+		onTriageContextChange: handleTriageContextChange,
+		focusedMessageId: triageFocusedId,
+		selectedIds: triageSelectedIds,
+	} = triage;
 
 	const focusedThread =
 		threads.find((t) => t.messageId === triageFocusedId) ?? selectedThread;
@@ -564,22 +544,19 @@ function MailboxPaneProvider({
 		closeCompose,
 	]);
 
-	// Esc unwinds one step at a time: an active selection first, then the open
-	// thread.
-	const goBack = useCallback(() => {
-		if (listCommandsRef.current?.clearSelection()) return;
-		if (selectedMessageId) {
-			navigate({
-				to: "/mail/$mailboxId",
-				params: { mailboxId },
-				search: (prev: Record<string, unknown>) => ({
-					...prev,
-					selectedMessageId: undefined,
-					selectedThreadId: undefined,
-				}),
-			});
-		}
-	}, [selectedMessageId, mailboxId, navigate]);
+	// Esc unwinds one step at a time: an active selection first (handled by the
+	// triage layer), then the open thread.
+	const closeThread = useCallback(() => {
+		navigate({
+			to: "/mail/$mailboxId",
+			params: { mailboxId },
+			search: (prev: Record<string, unknown>) => ({
+				...prev,
+				selectedMessageId: undefined,
+				selectedThreadId: undefined,
+			}),
+		});
+	}, [mailboxId, navigate]);
 
 	const messageIdsForFocusedThread = useCallback(
 		(thread: typeof focusedThread): string[] => {
@@ -661,7 +638,7 @@ function MailboxPaneProvider({
 		if (listCommandsRef.current?.requestDelete()) return;
 		const ids = triageTargetMessageIds();
 		if (ids.length > 0) triageDelete(ids);
-	}, [triageTargetMessageIds, triageDelete]);
+	}, [listCommandsRef, triageTargetMessageIds, triageDelete]);
 
 	const triageMarkJunk = useCallback(() => {
 		if (!junkMailboxId) return;
@@ -749,31 +726,13 @@ function MailboxPaneProvider({
 		!!composeState.outboxMessageId &&
 		!selectedThread;
 
-	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: !composeState.isOpen && !listBlocksKeyboard,
+	const { goBack, nextMessageId, previousMessageId } = useTriageLayer({
+		context: triage,
+		orderedIds: threads.map((t) => t.messageId),
+		selectedMessageId,
+		enabled: !composeState.isOpen,
+		onClose: closeThread,
 		handlers: {
-			// List navigation and selection, 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,
 			reply: triageReply,
 			replyAll: triageReplyAll,
 			forward: triageForward,
@@ -799,14 +758,6 @@ function MailboxPaneProvider({
 		bindings: [{ key: "Escape", handler: closeCompose, preventDefault: true }],
 	});
 
-	const orderedMessageIds = threads.map((t) => t.messageId);
-	const nextMessageId =
-		adjacentMessageId(orderedMessageIds, selectedMessageId, "next") ??
-		undefined;
-	const previousMessageId =
-		adjacentMessageId(orderedMessageIds, selectedMessageId, "previous") ??
-		undefined;
-
 	const ctx: MailboxPaneContextValue = {
 		mailboxId,
 		selectedMessageId,

package/src/components/mail/MessageRow.tsx

@@ -18,6 +18,7 @@ import {
 	compactRowClass,
 	type Density,
 	mergeProps,
+	type RowToggleEvent,
 	type ThreadRowData,
 	useLongPress,
 } from "@remit/ui";
@@ -26,6 +27,7 @@ import { Link } from "@tanstack/react-router";
 import { type MouseEvent, memo, type ReactNode, useCallback } from "react";
 import type { SelectionModifiers } from "@/hooks/useSelection";
 import { cn } from "@/lib/utils";
+import { useThreadRowInteraction } from "./ThreadListInteraction";
 
 interface MailboxLinkSearch {
 	selectedMessageId?: string;
@@ -85,27 +87,37 @@ export interface MessageRowProps {
 const MessageRowComponent = ({
 	thread,
 	active = false,
-	focused = false,
-	isTabStop = false,
+	focused: focusedProp,
+	isTabStop: isTabStopProp,
 	density = "comfortable",
-	isDesktop = true,
+	isDesktop: isDesktopProp,
 	badge,
-	selection,
+	selection: selectionProp,
 	inListbox = false,
 	linkMailboxId,
 	onClick,
-	onFocusRow,
+	onFocusRow: onFocusRowProp,
 }: MessageRowProps) => {
 	const queryClient = useQueryClient();
 	const messageId = thread.id;
+	// A list that renders its own rows (the brief, Flagged) supplies the cursor
+	// and selection through context; the mailbox list passes them as props.
+	const fromContext = useThreadRowInteraction(messageId);
+	const focused = focusedProp ?? fromContext?.focused ?? false;
+	const isTabStop = isTabStopProp ?? fromContext?.isTabStop ?? false;
+	const selection = selectionProp ?? fromContext?.selection;
+	const onFocusRow = onFocusRowProp ?? fromContext?.onFocusRow;
+	// The cursor and the row must agree on the device: the cursor's multi-select
+	// mode is derived from it, and the row's tap semantics branch on it.
+	const isDesktop = isDesktopProp ?? fromContext?.isDesktop ?? true;
 	const isChecked = selection?.isChecked ?? false;
 	const isMultiSelectMode = selection?.isMultiSelectMode ?? false;
 	const onToggleCheck = selection?.onToggleCheck;
 	const onRowSelect = selection?.onRowSelect;
 	const onLongPress = selection?.onLongPress;
 
-	const handleCheckboxClick = useCallback(
-		(e: MouseEvent) => {
+	const handleToggleCheck = useCallback(
+		(e: RowToggleEvent) => {
 			e.preventDefault();
 			e.stopPropagation();
 			onToggleCheck?.(messageId);
@@ -242,7 +254,7 @@ const MessageRowComponent = ({
 						? {
 								checked: isChecked,
 								alwaysVisible: isMultiSelectMode,
-								onToggle: handleCheckboxClick,
+								onToggle: handleToggleCheck,
 							}
 						: undefined
 				}

package/src/components/mail/ThreadListInteraction.test.ts

@@ -0,0 +1,199 @@
+/**
+ * ThreadListInteraction (#149) — the cursor walks the rows that are on screen,
+ * and delete asks before it trashes anything.
+ *
+ * The brief's sections cap themselves behind "Show N more" and collapse from
+ * their headers, so what the consumer passed and what is rendered are different
+ * lists. These cases mount rows directly and change them, which is the same
+ * thing from the provider's point of view.
+ */
+import assert from "node:assert/strict";
+import { after, afterEach, before, beforeEach, describe, it } from "node:test";
+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";
+
+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;
+	globalThis.MutationObserver = dom.window.MutationObserver;
+	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());
+});
+
+const rowElements = (ids: string[]) =>
+	ids.map((id) =>
+		createElement("button", { key: id, type: "button", "data-message-id": id }),
+	);
+
+/**
+ * Mount the provider over a set of rows, with a hook to change which rows are
+ * rendered afterwards — what "Show N more" and a collapsing section header do.
+ */
+function mountList(options: {
+	initialIds: string[];
+	onDeleteMessages?: (ids: string[]) => void;
+}) {
+	const commandsRef = createRef<MessageListCommands | null>();
+	let setIds: ((ids: string[]) => void) | undefined;
+	const Harness = () => {
+		const [ids, set] = useState(options.initialIds);
+		setIds = set;
+		return createElement(
+			ThreadListInteraction,
+			{
+				selectedMessageId: undefined,
+				onOpen: () => undefined,
+				onDeleteMessages: options.onDeleteMessages,
+				commandsRef,
+			},
+			...rowElements(ids),
+		);
+	};
+	act(() => root.render(createElement(Harness)));
+	return {
+		commands: () => {
+			const commands = commandsRef.current;
+			if (!commands) throw new Error("commands not published");
+			return commands;
+		},
+		// The provider reads the rendered rows through a MutationObserver, whose
+		// callback lands on the microtask queue — an async act flushes both.
+		render: async (ids: string[]) => {
+			await act(async () => {
+				setIds?.(ids);
+			});
+		},
+		focusedId: () =>
+			(dom.window.document.activeElement as HTMLElement | null)?.dataset
+				.messageId,
+	};
+}
+
+describe("ThreadListInteraction — the cursor follows the rendered rows", () => {
+	it("walks only the rows in the DOM", () => {
+		const list = mountList({ initialIds: ["m1", "m2", "m3"] });
+
+		act(() => list.commands().focusFirst());
+		assert.equal(list.focusedId(), "m1");
+
+		act(() => list.commands().focusLast());
+		assert.equal(list.focusedId(), "m3");
+	});
+
+	it("stops at the last rendered row, not the last row in the data", () => {
+		// The capped case: three rows are on screen, more exist behind the
+		// expander. The cursor must not step past what is rendered.
+		const list = mountList({ initialIds: ["m1", "m2", "m3"] });
+
+		act(() => list.commands().focusLast());
+		act(() => list.commands().focusNext());
+		assert.equal(list.focusedId(), "m3");
+	});
+
+	it("picks up rows revealed by the expander", async () => {
+		const list = mountList({ initialIds: ["m1", "m2", "m3"] });
+		act(() => list.commands().focusLast());
+		assert.equal(list.focusedId(), "m3");
+
+		await list.render(["m1", "m2", "m3", "m4", "m5"]);
+
+		act(() => list.commands().focusLast());
+		assert.equal(list.focusedId(), "m5");
+	});
+
+	it("withdraws its commands when every row leaves", async () => {
+		const list = mountList({ initialIds: ["m1"] });
+		assert.ok(list.commands());
+		await list.render([]);
+		assert.throws(() => list.commands(), /commands not published/);
+	});
+});
+
+describe("ThreadListInteraction — delete confirms first", () => {
+	const confirmButton = () =>
+		Array.from(
+			dom.window.document.querySelectorAll<HTMLButtonElement>("button"),
+		).find((b) => b.textContent === "Move to Trash");
+
+	it("asks before it trashes anything", () => {
+		const deleted: string[][] = [];
+		const list = mountList({
+			initialIds: ["m1", "m2"],
+			onDeleteMessages: (ids) => deleted.push(ids),
+		});
+
+		act(() => list.commands().focusFirst());
+		act(() => {
+			assert.equal(list.commands().requestDelete(), true);
+		});
+		assert.deepEqual(deleted, [], "nothing is deleted before confirming");
+		assert.ok(confirmButton(), "the confirmation is on screen");
+
+		act(() => confirmButton()?.click());
+		assert.deepEqual(deleted, [["m1"]]);
+	});
+
+	it("claims a second Delete rather than deleting behind the dialog", () => {
+		const deleted: string[][] = [];
+		const list = mountList({
+			initialIds: ["m1", "m2"],
+			onDeleteMessages: (ids) => deleted.push(ids),
+		});
+
+		act(() => list.commands().focusFirst());
+		act(() => {
+			list.commands().requestDelete();
+		});
+		act(() => {
+			assert.equal(
+				list.commands().requestDelete(),
+				true,
+				"the second press belongs to the dialog",
+			);
+		});
+		assert.deepEqual(deleted, []);
+	});
+
+	it("declines the keypress when there is nothing to delete", () => {
+		const list = mountList({
+			initialIds: ["m1"],
+			onDeleteMessages: () => undefined,
+		});
+		act(() => {
+			assert.equal(list.commands().requestDelete(), false);
+		});
+	});
+});