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/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/useThreadActions.ts ADDED Viewed

@@ -0,0 +1,101 @@
+/**
+ * useThreadActions — the reading pane's verbs for one open thread.
+ *
+ * Delete, move, star and the compose requests (reply / reply-all / forward),
+ * over the same mutation hooks the mailbox list uses. The mailbox view keys
+ * them by its route; the brief and Flagged are cross-account, so they key by
+ * the open thread's own `mailboxId` / `accountConfigId` (#149).
+ */
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { useCallback, useState } from "react";
+import type { ComposeMode } from "@/components/compose/ComposeProvider";
+import { useDeleteMessages } from "@/hooks/useDeleteMessages";
+import { useMoveMessages } from "@/hooks/useMoveMessages";
+import { useThreadMessageIds } from "@/hooks/useThreadMessageIds";
+import { useToggleStar } from "@/hooks/useToggleStar";
+interface UseThreadActionsOptions {
+	thread: RemitImapThreadMessageResponse | undefined;
+	/** Mailbox whose listings the mutations patch. Defaults to the thread's own. */
+	mailboxId?: string;
+	/** Account the move picker offers folders from. Defaults to the thread's own. */
+	accountId?: string;
+	onAfterOptimisticRemove?: (messageIds: string[]) => void;
+}
+export interface ThreadActions {
+	mailboxId: string | undefined;
+	accountId: string | undefined;
+	isStarred: boolean | undefined;
+	deleteThread: () => void;
+	moveThread: (destinationMailboxId: string) => void;
+	toggleStar: () => void;
+	composeRequest: ComposeMode | null;
+	requestCompose: (mode: ComposeMode) => void;
+	clearComposeRequest: () => void;
+}
+export const useThreadActions = ({
+	thread,
+	mailboxId,
+	accountId,
+	onAfterOptimisticRemove,
+}: UseThreadActionsOptions): ThreadActions => {
+	const resolvedMailboxId = mailboxId ?? thread?.mailboxId;
+	const resolvedAccountId = accountId ?? thread?.accountConfigId;
+	const threadMessageIds = useThreadMessageIds();
+	const { deleteMessages } = useDeleteMessages({
+		mailboxId: resolvedMailboxId ?? "",
+		threadId: thread?.threadId,
+		accountId: resolvedAccountId,
+		onAfterOptimisticRemove,
+	});
+	const { moveMessages } = useMoveMessages({
+		mailboxId: resolvedMailboxId ?? "",
+		threadId: thread?.threadId,
+		accountId: resolvedAccountId,
+		onAfterOptimisticRemove,
+	});
+	const { toggleStar: toggleStarFor } = useToggleStar({
+		threadId: thread?.threadId ?? "",
+		mailboxId: resolvedMailboxId ?? "",
+	});
+	const deleteThread = useCallback(() => {
+		if (!thread) return;
+		deleteMessages(threadMessageIds(thread));
+	}, [thread, threadMessageIds, deleteMessages]);
+	const moveThread = useCallback(
+		(destinationMailboxId: string) => {
+			if (!thread) return;
+			moveMessages(threadMessageIds(thread), destinationMailboxId);
+		},
+		[thread, threadMessageIds, moveMessages],
+	);
+	const toggleStar = useCallback(() => {
+		if (!thread) return;
+		toggleStarFor(thread.messageId, thread.hasStars);
+	}, [thread, toggleStarFor]);
+	const [composeRequest, setComposeRequest] = useState<ComposeMode | null>(
+		null,
+	);
+	const clearComposeRequest = useCallback(() => setComposeRequest(null), []);
+	return {
+		mailboxId: resolvedMailboxId,
+		accountId: resolvedAccountId,
+		isStarred: thread?.hasStars,
+		deleteThread,
+		moveThread,
+		toggleStar,
+		composeRequest,
+		requestCompose: setComposeRequest,
+		clearComposeRequest,
+	};
+};

package/src/hooks/useThreadMessageIds.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import { threadDetailOperationsListThreadMessagesQueryKey } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
+/**
+ * Every message id in a thread, read from the cached thread-messages listing.
+ *
+ * A toolbar verb acts on the whole conversation, not the one row that
+ * represents it in a list. When the conversation has not been opened yet its
+ * messages are not cached, and the representative message id is the best the
+ * caller can do.
+ */
+export const useThreadMessageIds = (): ((
+	thread: RemitImapThreadMessageResponse,
+) => string[]) => {
+	const queryClient = useQueryClient();
+	return useCallback(
+		(thread: RemitImapThreadMessageResponse) => {
+			const threadKey = threadDetailOperationsListThreadMessagesQueryKey({
+				path: { threadId: thread.threadId },
+			});
+			const cached = queryClient.getQueriesData<{
+				items: { messageId: string }[];
+			}>({ queryKey: threadKey });
+			const ids = cached.flatMap(
+				([, data]) => data?.items.map((m) => m.messageId) ?? [],
+			);
+			return ids.length > 0 ? ids : [thread.messageId];
+		},
+		[queryClient],
+	);
+};