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

@remit/web-client 0.0.48 → 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 (16) hide show

package/package.json +5 -3
package/src/components/mail/BriefPane.tsx +149 -3
package/src/components/mail/DailyBrief.tsx +44 -12
package/src/components/mail/FlaggedList.tsx +51 -27
package/src/components/mail/FlaggedPane.tsx +144 -3
package/src/components/mail/MailboxPane.tsx +45 -143
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/useThreadActions.ts +101 -0
package/src/hooks/useThreadMessageIds.ts +33 -0
package/src/hooks/useTriageLayer.ts +148 -0

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

@@ -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);
+		});
+	});
+});

package/src/components/mail/ThreadListInteraction.tsx ADDED Viewed

@@ -0,0 +1,408 @@
+/**
+ * ThreadListInteraction — the keyboard cursor and multi-selection for a list
+ * that renders its own rows.
+ *
+ * `MessageList` (the mailbox) owns a virtualizer and threads this state through
+ * row props. The brief and Flagged render rows through the kit's section
+ * components, which pass only the thread and its click handler, so the state
+ * reaches the row through context instead. Both drive the same `useListCursor`
+ * and publish the same `MessageListCommands`, so there is one definition of
+ * what j/k, x, shift-arrow and ⌘A do (#149).
+ *
+ * The cursor walks the rows that are actually on screen, read from the DOM. The
+ * brief's sections cap themselves at ten rows behind "Show N more", apply their
+ * own attribute chips, and collapse from their headers — none of which the data
+ * the consumer passed describes. A cursor walking that data steps onto rows that
+ * are not rendered: focus stops moving, the highlight disappears, and the next
+ * verb acts on a message the user cannot see.
+ */
+import {
+	createContext,
+	type ReactNode,
+	type RefObject,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
+import { useListCursor } from "@/hooks/useListCursor";
+import { useIsDesktop } from "@/hooks/useMediaQuery";
+import type { TriageContextUpdate } from "@/hooks/useTriageLayer";
+import { formatDeleteToTrashTitle } from "@/lib/format";
+import { tabStopId } from "@/lib/list-focus";
+import type { MessageListCommands } from "./MessageList";
+import type { MessageRowSelection } from "./MessageRow";
+import { SelectionToolbar } from "./SelectionToolbar";
+interface ThreadRowInteraction {
+	focused: boolean;
+	isTabStop: boolean;
+	isDesktop: boolean;
+	selection: MessageRowSelection;
+	onFocusRow: (messageId: string) => void;
+}
+interface ThreadListInteractionValue {
+	rowInteraction: (messageId: string) => ThreadRowInteraction;
+	selectedIds: Set<string>;
+	selectedCount: number;
+	exitSelection: () => void;
+	/** Opens the move-to-Trash confirmation for the current selection. */
+	requestDeleteSelection: () => void;
+}
+const ThreadListInteractionCtx =
+	createContext<ThreadListInteractionValue | null>(null);
+/**
+ * Per-row cursor/selection state, or null outside a provider — the mailbox list
+ * passes the same state as explicit row props.
+ */
+export const useThreadRowInteraction = (
+	messageId: string,
+): ThreadRowInteraction | null => {
+	const ctx = useContext(ThreadListInteractionCtx);
+	return ctx ? ctx.rowInteraction(messageId) : null;
+};
+/** The list's current selection, for a selection toolbar mounted alongside. */
+export const useThreadListSelection = (): Omit<
+	ThreadListInteractionValue,
+	"rowInteraction"
+> => {
+	const ctx = useContext(ThreadListInteractionCtx);
+	if (!ctx) {
+		throw new Error(
+			"useThreadListSelection must be used inside <ThreadListInteraction>",
+		);
+	}
+	return ctx;
+};
+const ROW_SELECTOR = "[data-message-id]";
+const readRowIds = (container: HTMLElement): string[] =>
+	Array.from(container.querySelectorAll<HTMLElement>(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, i) => id === b[i]);
+/**
+ * The ids of the rows currently in the DOM, in document order, kept in step
+ * with the rendered list. Sections expand, collapse and cap themselves without
+ * the consumer's data changing, so a render pass is not enough of a signal — a
+ * MutationObserver is.
+ */
+const useRenderedRowIds = (
+	containerRef: RefObject<HTMLElement | null>,
+): string[] => {
+	const [rowIds, setRowIds] = useState<string[]>([]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const sync = () => {
+			const next = readRowIds(container);
+			setRowIds((prev) => (sameIds(prev, next) ? prev : next));
+		};
+		sync();
+		const observer = new MutationObserver(sync);
+		observer.observe(container, { childList: true, subtree: true });
+		return () => observer.disconnect();
+	}, [containerRef]);
+	return rowIds;
+};
+interface ThreadListInteractionProps {
+	selectedMessageId: string | undefined;
+	/** Opens a row — the same navigation a click performs. */
+	onOpen: (messageId: string) => void;
+	/** Deletes a set of messages. Absent disables the delete key for this list. */
+	onDeleteMessages?: (messageIds: string[]) => void;
+	isDeleting?: boolean;
+	commandsRef?: RefObject<MessageListCommands | null>;
+	onTriageContextChange?: (context: TriageContextUpdate) => void;
+	children?: ReactNode;
+}
+export function ThreadListInteraction({
+	selectedMessageId,
+	onOpen,
+	onDeleteMessages,
+	isDeleting = false,
+	commandsRef,
+	onTriageContextChange,
+	children,
+}: ThreadListInteractionProps) {
+	const isDesktop = useIsDesktop();
+	const containerRef = useRef<HTMLDivElement>(null);
+	const orderedIds = useRenderedRowIds(containerRef);
+	const cursor = useListCursor({
+		orderedIds,
+		isDesktop,
+		initialFocusedId: selectedMessageId,
+	});
+	const {
+		focusedMessageId,
+		setFocusedMessageId,
+		pendingDomFocusRef,
+		cursorMovedByPointerRef,
+		selection,
+		isMultiSelectMode,
+		exitSelection,
+		handleRowSelect,
+	} = cursor;
+	const { selectedIds, selectedCount, isSelected, toggle, select } = selection;
+	// A row that leaves the list — a chip filter, a collapsed section, a
+	// completed delete — cannot stay selected. Survivors keep their selection.
+	const { intersectWith } = selection;
+	useEffect(() => {
+		intersectWith(orderedIds);
+	}, [intersectWith, orderedIds]);
+	// Real browser focus follows the cursor, so Tab, Shift+Tab and the focus ring
+	// agree with what the list highlights.
+	useEffect(() => {
+		const pending = pendingDomFocusRef.current;
+		if (pending === null) return;
+		pendingDomFocusRef.current = null;
+		containerRef.current
+			?.querySelector<HTMLElement>(`[data-message-id="${pending}"]`)
+			?.focus();
+	});
+	const handleFocusRow = useCallback(
+		(messageId: string) => {
+			cursorMovedByPointerRef.current = true;
+			setFocusedMessageId(messageId);
+		},
+		[cursorMovedByPointerRef, setFocusedMessageId],
+	);
+	const handleLongPress = useCallback(
+		(messageId: string) => {
+			if (!isDesktop) select(messageId);
+		},
+		[isDesktop, select],
+	);
+	const openFocused = useCallback(() => {
+		if (focusedMessageId) onOpen(focusedMessageId);
+	}, [focusedMessageId, onOpen]);
+	// Pending move-to-Trash, awaiting confirmation. The ids are snapshotted at
+	// request time so a selection change behind the dialog cannot retarget it —
+	// the same contract the mailbox list's delete has.
+	const [pendingDelete, setPendingDelete] = useState<string[] | null>(null);
+	const requestDeleteIds = useCallback(
+		(ids: string[]): boolean => {
+			if (!onDeleteMessages || ids.length === 0) return false;
+			setPendingDelete(ids);
+			return true;
+		},
+		[onDeleteMessages],
+	);
+	const requestDeleteSelection = useCallback(() => {
+		requestDeleteIds(Array.from(selectedIds));
+	}, [requestDeleteIds, selectedIds]);
+	const requestDelete = useCallback((): boolean => {
+		// The confirmation is already asking about a delete: the keypress belongs
+		// to it. Claiming the press here is what stops a second Delete from
+		// reaching an unconfirmed delete.
+		if (pendingDelete !== null) return true;
+		if (selectedCount > 0) return requestDeleteIds(Array.from(selectedIds));
+		if (focusedMessageId) return requestDeleteIds([focusedMessageId]);
+		return false;
+	}, [
+		pendingDelete,
+		selectedCount,
+		selectedIds,
+		focusedMessageId,
+		requestDeleteIds,
+	]);
+	const confirmDelete = useCallback(() => {
+		if (pendingDelete === null) return;
+		onDeleteMessages?.(pendingDelete);
+		setPendingDelete(null);
+		exitSelection();
+	}, [pendingDelete, onDeleteMessages, exitSelection]);
+	const cancelDelete = useCallback(() => setPendingDelete(null), []);
+	const clearSelectionCommand = useCallback((): boolean => {
+		if (selectedCount === 0) return false;
+		exitSelection();
+		return true;
+	}, [selectedCount, exitSelection]);
+	const hasList = orderedIds.length > 0;
+	useEffect(() => {
+		if (!commandsRef) return;
+		if (!hasList) {
+			commandsRef.current = null;
+			return;
+		}
+		commandsRef.current = {
+			focusNext: cursor.focusNext,
+			focusPrevious: cursor.focusPrevious,
+			focusFirst: cursor.focusFirst,
+			focusLast: cursor.focusLast,
+			openFocused,
+			toggleSelect: cursor.toggleFocusedSelection,
+			extendSelectDown: cursor.extendRangeDown,
+			extendSelectUp: cursor.extendRangeUp,
+			selectAll: cursor.selectAllLoaded,
+			clearSelection: clearSelectionCommand,
+			requestDelete,
+			// The brief and Flagged have no density switch; the key stays inert here
+			// rather than moving a control these views do not offer.
+			toggleDensity: () => undefined,
+		};
+		return () => {
+			commandsRef.current = null;
+		};
+	}, [
+		commandsRef,
+		hasList,
+		cursor.focusNext,
+		cursor.focusPrevious,
+		cursor.focusFirst,
+		cursor.focusLast,
+		cursor.toggleFocusedSelection,
+		cursor.extendRangeDown,
+		cursor.extendRangeUp,
+		cursor.selectAllLoaded,
+		openFocused,
+		clearSelectionCommand,
+		requestDelete,
+	]);
+	const selectedIdList = useMemo(() => Array.from(selectedIds), [selectedIds]);
+	const confirmOpen = pendingDelete !== null;
+	useEffect(() => {
+		onTriageContextChange?.({
+			focusedMessageId,
+			selectedIds: selectedIdList,
+			orderedIds,
+			hasList,
+			// The dialog owns the keyboard while it is up, so the triage layer
+			// suspends rather than acting behind it.
+			blocksKeyboard: confirmOpen,
+		});
+	}, [
+		onTriageContextChange,
+		focusedMessageId,
+		selectedIdList,
+		orderedIds,
+		hasList,
+		confirmOpen,
+	]);
+	const tabStop = tabStopId(orderedIds, focusedMessageId);
+	const value = useMemo<ThreadListInteractionValue>(
+		() => ({
+			selectedIds,
+			selectedCount,
+			exitSelection,
+			requestDeleteSelection,
+			rowInteraction: (messageId: string) => ({
+				focused: messageId === focusedMessageId,
+				isTabStop: messageId === tabStop,
+				isDesktop,
+				onFocusRow: handleFocusRow,
+				selection: {
+					isChecked: isSelected(messageId),
+					onToggleCheck: toggle,
+					onRowSelect: handleRowSelect,
+					isMultiSelectMode,
+					onLongPress: handleLongPress,
+				},
+			}),
+		}),
+		[
+			selectedIds,
+			selectedCount,
+			exitSelection,
+			requestDeleteSelection,
+			focusedMessageId,
+			tabStop,
+			isDesktop,
+			handleFocusRow,
+			isSelected,
+			toggle,
+			handleRowSelect,
+			isMultiSelectMode,
+			handleLongPress,
+		],
+	);
+	return (
+		<ThreadListInteractionCtx.Provider value={value}>
+			{/* `display: contents` so reading the rendered rows costs the layout
+			    nothing — the children lay out against their real parent. */}
+			<div ref={containerRef} className="contents">
+				{children}
+			</div>
+			<ConfirmDialog
+				isOpen={confirmOpen}
+				title={formatDeleteToTrashTitle(pendingDelete?.length ?? 0)}
+				description="You can restore them from Trash later."
+				confirmLabel="Move to Trash"
+				destructive
+				isBusy={isDeleting}
+				onConfirm={confirmDelete}
+				onCancel={cancelDelete}
+			/>
+		</ThreadListInteractionCtx.Provider>
+	);
+}
+interface ThreadListSelectionBarProps {
+	onMarkAsRead?: (messageIds: string[]) => void;
+	isDeleting?: boolean;
+}
+/**
+ * Selection bar for a list inside `ThreadListInteraction`.
+ *
+ * Move is not offered here: the brief and Flagged span accounts and mailboxes,
+ * and a move picker needs one account and one source folder to be honest about
+ * where the messages go. Delete and mark-read carry no such scope.
+ */
+export function ThreadListSelectionBar({
+	onMarkAsRead,
+	isDeleting,
+}: ThreadListSelectionBarProps) {
+	const { selectedIds, selectedCount, exitSelection, requestDeleteSelection } =
+		useThreadListSelection();
+	const handleMarkAsRead = useCallback(() => {
+		onMarkAsRead?.(Array.from(selectedIds));
+		exitSelection();
+	}, [onMarkAsRead, selectedIds, exitSelection]);
+	return (
+		<SelectionToolbar
+			selectedCount={selectedCount}
+			onDelete={requestDeleteSelection}
+			onClearSelection={exitSelection}
+			onMarkAsRead={onMarkAsRead ? handleMarkAsRead : undefined}
+			isDeleting={isDeleting}
+		/>
+	);
+}

package/src/hooks/useDeleteMessages.ts CHANGED Viewed

@@ -8,6 +8,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useCallback } from "react";
 import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
 import { formatErrorDetail } from "@/components/ui/error-banners";
+import { resolveMailboxesForMessages } from "@/hooks/useMarkAsRead";
 import {
 	cancelThreadListQueries,
 	invalidateThreadListQueries,
@@ -22,6 +23,13 @@ interface UseDeleteMessagesOptions {
 	mailboxId: string;
 	threadId?: string;
 	accountId?: string;
+	/**
+	 * The threads the ids may come from, when the caller has them. A selection in
+	 * the brief or Flagged spans mailboxes and accounts, so the listings to patch
+	 * are the ones each message actually lives in — `mailboxId` alone would leave
+	 * every other mailbox's cached list holding a deleted row.
+	 */
+	messages?: RemitImapThreadMessageResponse[];
 	/**
 	 * Called once the optimistic removal has been applied. Use this to
 	 * navigate away from a now-empty thread (e.g. clear `selectedMessageId`)
@@ -77,6 +85,7 @@ export const useDeleteMessages = ({
 	mailboxId,
 	threadId,
 	accountId,
+	messages,
 	onAfterOptimisticRemove,
 }: UseDeleteMessagesOptions) => {
 	const queryClient = useQueryClient();
@@ -92,10 +101,13 @@ export const useDeleteMessages = ({
 						path: { threadId },
 					})
 				: [];
-			// The browsed mailbox's lists plus the unified cross-account listing
-			// that backs the daily brief — deleting from the brief has to remove the
-			// row there too, not only from the per-mailbox lists (#140, part of #149).
-			const listPrefixes = threadListCacheKeys([mailboxId]);
+			// Every mailbox the deleted messages live in, plus the unified
+			// cross-account listing that backs the daily brief — deleting from the
+			// brief has to remove the row there too, not only from the per-mailbox
+			// lists (#140, part of #149).
+			const listPrefixes = threadListCacheKeys(
+				resolveMailboxesForMessages(messageIds, messages ?? [], mailboxId),
+			);
 			await Promise.all([
 				queryClient.cancelQueries({ queryKey: threadMessagesPrefix }),