@remit/web-client 0.0.86 → 0.0.88

package/src/components/onboarding/OnboardingWizard.tsx

@@ -34,6 +34,7 @@ import {
 	FieldLabel,
 	Input,
 	Kbd,
+	PasswordInput,
 	Select,
 	ServerFields,
 	securityToApi,
@@ -766,9 +767,8 @@ function StepCredentials({
 					<FieldLabel htmlFor="credentials-password">
 						Password or app password
 					</FieldLabel>
-					<Input
+					<PasswordInput
 						id="credentials-password"
-						type="password"
 						value={localPassword}
 						onChange={(e) => {
 							setLocalPassword(e.target.value);
@@ -1033,6 +1033,13 @@ function StepTest({
 	);
 }
 
+/**
+ * How long the sync step holds "Go to inbox" shut while it waits for the first
+ * messages. Long enough for a normal IMAP handshake and first batch, short
+ * enough that a stalled or silent sync never becomes a dead end.
+ */
+const INBOX_GATE_MAX_WAIT_MS = 20_000;
+
 function StepSync({
 	email,
 	displayName,
@@ -1121,7 +1128,7 @@ function StepSync({
 	// Poll sync status every 2s once account is created. Stop polling once the
 	// account reaches a terminal phase (complete/error) so we don't hammer the
 	// endpoint while the user lingers on this step (pattern from ComposeProvider).
-	const { data: syncStatus } = useQuery({
+	const { data: syncStatus, isError: syncStatusUnavailable } = useQuery({
 		...syncOperationsGetSyncStatusOptions({
 			path: { accountId: accountId ?? "" },
 		}),
@@ -1187,6 +1194,33 @@ function StepSync({
 				? "running"
 				: "ok";
 
+	// The inbox has something to show once the first messages have landed, the
+	// INBOX mailbox is drained, or the account's sync reached a terminal phase.
+	// Until then "Go to inbox" leads to an empty list, so it does not offer (#452).
+	const inboxHasArrived =
+		inboxSynced > 0 ||
+		inboxMailbox?.phase === "complete" ||
+		syncPhase === "complete" ||
+		syncErrored;
+
+	// Nothing above is allowed to strand the user: if the first messages have not
+	// landed within the wait, or the status endpoint cannot answer at all, the
+	// button opens regardless. The brief tells the truth about an empty list on
+	// the other side, so an early exit costs a wait, not a lie.
+	const [waitedLongEnough, setWaitedLongEnough] = useState(false);
+	useEffect(() => {
+		if (!accountId) return;
+		const timer = setTimeout(
+			() => setWaitedLongEnough(true),
+			INBOX_GATE_MAX_WAIT_MS,
+		);
+		return () => clearTimeout(timer);
+	}, [accountId]);
+
+	const canGoToInbox =
+		!!accountId &&
+		(inboxHasArrived || syncStatusUnavailable || waitedLongEnough);
+
 	if (createError) {
 		return (
 			<WizardShell
@@ -1243,12 +1277,22 @@ function StepSync({
 					<span className="text-2xs text-fg-subtle">
 						Sync continues in the background
 					</span>
-					<Button
-						variant="primary"
-						onClick={() => accountId && onGoToInbox(accountId)}
-					>
-						Go to inbox
-					</Button>
+					{canGoToInbox ? (
+						<Button
+							variant="primary"
+							onClick={() => accountId && onGoToInbox(accountId)}
+						>
+							Go to inbox
+						</Button>
+					) : (
+						<Button
+							variant="primary"
+							disabled
+							icon={<Loader2 className="size-3.5 animate-spin" />}
+						>
+							Getting your mail…
+						</Button>
+					)}
 				</>
 			}
 		>

package/src/components/settings/AccountFormPanel.tsx

@@ -6,7 +6,14 @@ import {
 	configOperationsGetConfigQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { Button, Input, Select, SlidePanel, securityToApi } from "@remit/ui";
+import {
+	Button,
+	Input,
+	PasswordInput,
+	Select,
+	SlidePanel,
+	securityToApi,
+} from "@remit/ui";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Check, Loader2, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -580,12 +587,11 @@ export const AccountFormPanel = ({
 							>
 								Password
 							</label>
-							<Input
+							<PasswordInput
 								id="account-password"
 								{...form.register("password", {
 									onChange: () => setPasswordModified(true),
 								})}
-								type="password"
 								onFocus={() => {
 									// Clear placeholder when user focuses the field
 									if (isEditing && !passwordModified) {
@@ -862,10 +868,9 @@ export const AccountFormPanel = ({
 									>
 										SMTP Password
 									</label>
-									<Input
+									<PasswordInput
 										id="smtp-password"
 										{...form.register("smtpPassword")}
-										type="password"
 									/>
 								</div>
 							</>

package/src/hooks/bulk-chunking.render.test.ts

@@ -0,0 +1,157 @@
+/**
+ * The bulk endpoints cap a call at 100 message ids, so the hooks that send a
+ * whole selection have to split it. Select-all over the brief's 200-result
+ * unscoped search is the reachable case: one call of 200 is a 400, and a
+ * mutation 4xx escalates to the fatal error overlay (#453).
+ *
+ * These mount the real hooks against the real fetch seam and read the requests
+ * that actually left, so the boundary is pinned where the call is made rather
+ * than at whichever surface assembled the selection.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, beforeEach, describe, it } from "node:test";
+import { createElement } from "react";
+import { BULK_ACTION_CHUNK_SIZE } from "../lib/bulk-actions";
+import { createDomHarness, type DomHarness } from "../test-support/dom";
+import { type HttpMock, httpError, mockFetch } from "../test-support/http";
+import { useApplyLabel } from "./useApplyLabel";
+import { useDeleteMessages } from "./useDeleteMessages";
+import { useToggleReadFor } from "./useMarkAsRead";
+import { useMoveMessages } from "./useMoveMessages";
+
+const INBOX = "mbx-inbox";
+const ARCHIVE = "mbx-archive";
+
+let harness: DomHarness | undefined;
+let http: HttpMock;
+
+const ids = (count: number): string[] =>
+	Array.from({ length: count }, (_, i) => `msg-${i}`);
+
+const mountHook = <T>(useHook: () => T): (() => T) => {
+	let value: T | undefined;
+	const Probe = () => {
+		value = useHook();
+		return null;
+	};
+	harness = createDomHarness();
+	harness.renderApp(createElement(Probe));
+	return () => {
+		if (value === undefined) throw new Error("hook did not render");
+		return value;
+	};
+};
+
+/** Enough turns for a run of sequential chunks to finish. */
+const settle = async (): Promise<void> => {
+	if (!harness) throw new Error("nothing mounted");
+	for (let round = 0; round < 8; round += 1) await harness.flush();
+};
+
+/** The message-id list of every request that left, in the order they left. */
+const sentBatches = (): string[][] =>
+	http.calls.map(
+		(call) => (call.body as { messageIds?: string[] })?.messageIds ?? [],
+	);
+
+const sentSizes = (): number[] => sentBatches().map((batch) => batch.length);
+
+beforeEach(() => {
+	http = mockFetch(() => ({}));
+});
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http.restore();
+});
+
+describe("a bulk selection at the server's cap", () => {
+	it("sends exactly 100 ids as one call", async () => {
+		const hook = mountHook(() => useDeleteMessages({ mailboxId: INBOX }));
+
+		hook().deleteMessages(ids(BULK_ACTION_CHUNK_SIZE));
+		await settle();
+
+		assert.deepEqual(sentSizes(), [BULK_ACTION_CHUNK_SIZE]);
+	});
+
+	it("splits 101 ids rather than sending a call the server refuses", async () => {
+		const hook = mountHook(() => useDeleteMessages({ mailboxId: INBOX }));
+
+		hook().deleteMessages(ids(BULK_ACTION_CHUNK_SIZE + 1));
+		await settle();
+
+		assert.deepEqual(sentSizes(), [BULK_ACTION_CHUNK_SIZE, 1]);
+	});
+
+	it("splits a 200-row select-all into two full calls, every id once", async () => {
+		const selection = ids(BULK_ACTION_CHUNK_SIZE * 2);
+		const hook = mountHook(() => useDeleteMessages({ mailboxId: INBOX }));
+
+		hook().deleteMessages(selection);
+		await settle();
+
+		assert.deepEqual(sentSizes(), [
+			BULK_ACTION_CHUNK_SIZE,
+			BULK_ACTION_CHUNK_SIZE,
+		]);
+		assert.deepEqual(sentBatches().flat(), selection);
+	});
+
+	it("stops at the first refused chunk instead of sending the rest", async () => {
+		http.restore();
+		http = mockFetch(() => httpError(409, "mailbox is locked"));
+		const hook = mountHook(() => useDeleteMessages({ mailboxId: INBOX }));
+
+		hook().deleteMessages(ids(BULK_ACTION_CHUNK_SIZE * 3));
+		await settle();
+
+		assert.deepEqual(sentSizes(), [BULK_ACTION_CHUNK_SIZE]);
+	});
+});
+
+describe("the other verbs a selection reaches", () => {
+	it("moves a 200-row selection in chunks, each carrying the destination", async () => {
+		const hook = mountHook(() => useMoveMessages({ mailboxId: INBOX }));
+
+		hook().moveMessages(ids(BULK_ACTION_CHUNK_SIZE * 2), ARCHIVE);
+		await settle();
+
+		assert.deepEqual(sentSizes(), [
+			BULK_ACTION_CHUNK_SIZE,
+			BULK_ACTION_CHUNK_SIZE,
+		]);
+		for (const call of http.calls) {
+			assert.equal(
+				(call.body as { destinationMailboxId?: string })?.destinationMailboxId,
+				ARCHIVE,
+			);
+		}
+	});
+
+	it("marks 101 messages read in chunks, each carrying the flag", async () => {
+		const hook = mountHook(() => useToggleReadFor({ mailboxId: INBOX }));
+
+		hook().toggleReadFor(ids(BULK_ACTION_CHUNK_SIZE + 1), true);
+		await settle();
+
+		assert.deepEqual(sentSizes(), [BULK_ACTION_CHUNK_SIZE, 1]);
+		for (const call of http.calls) {
+			assert.equal((call.body as { isRead?: boolean })?.isRead, true);
+		}
+	});
+
+	it("labels 101 messages in chunks, each carrying the label", async () => {
+		const hook = mountHook(() => useApplyLabel({ mailboxId: INBOX }));
+
+		hook().applyLabel(ids(BULK_ACTION_CHUNK_SIZE + 1), "lbl-1", "Apply");
+		await settle();
+
+		assert.deepEqual(sentSizes(), [BULK_ACTION_CHUNK_SIZE, 1]);
+		for (const call of http.calls) {
+			assert.equal((call.body as { labelId?: string })?.labelId, "lbl-1");
+		}
+	});
+});

package/src/hooks/useApplyLabel.ts

@@ -8,6 +8,7 @@ import { useCallback } from "react";
 import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
 import { formatErrorDetail } from "@/components/ui/error-banners";
 import { resolveMailboxesForMessages } from "@/hooks/useMarkAsRead";
+import { runChunkedMutation } from "@/lib/bulk-actions";
 import {
 	invalidateThreadListQueries,
 	threadListCacheKeys,
@@ -30,7 +31,7 @@ export const useApplyLabel = (options: {
 	const queryClient = useQueryClient();
 	const { pushError } = useErrorBanners();
 
-	const { mutate, isPending } = useMutation({
+	const { mutateAsync, isPending } = useMutation({
 		...messageBulkOperationsUpdateMessageLabelsMutation(),
 		onError: (error, variables) => {
 			pushError({
@@ -59,9 +60,11 @@ export const useApplyLabel = (options: {
 	const applyLabel = useCallback(
 		(messageIds: string[], labelId: string, action: RemitImapLabelAction) => {
 			if (messageIds.length === 0) return;
-			mutate({ body: { messageIds, labelId, action } });
+			void runChunkedMutation(messageIds, (chunk) =>
+				mutateAsync({ body: { messageIds: chunk, labelId, action } }),
+			);
 		},
-		[mutate],
+		[mutateAsync],
 	);
 
 	return { applyLabel, isPending };

package/src/hooks/useClauseSuggestions.ts

@@ -0,0 +1,57 @@
+import { addressOperationsSearchAddressesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { ClauseField, Suggestion } from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import {
+	buildClauseSuggestions,
+	CLAUSE_SUGGESTION_LIMIT,
+	fieldTakesAddressSuggestions,
+	type KnownAddress,
+} from "@/lib/organize/clause-suggestions";
+import { useDebouncedValue } from "./useDebouncedValue";
+
+/** How long typing settles before the address lookup fires. */
+export const CLAUSE_SUGGESTION_DEBOUNCE_MS = 250;
+
+/** The shortest query worth a round-trip. */
+const MIN_QUERY_LENGTH = 2;
+
+/**
+ * Values to offer for the clause being edited: the senders of the messages the
+ * user selected first — already in hand, and the likeliest answer — then the
+ * known addresses a lookup turns up for what has been typed.
+ *
+ * The lookup is the address search the compose recipient field already uses, on
+ * a debounce so a request does not fire per keystroke. The list narrows against
+ * the live value while a request is still out, so it never lags what is on
+ * screen; nothing it returns can change what the user typed.
+ */
+export const useClauseSuggestions = (
+	field: ClauseField | undefined,
+	value: string,
+	selectionSenders: readonly string[],
+): Suggestion[] => {
+	const query = value.trim();
+	const debouncedQuery = useDebouncedValue(
+		query,
+		CLAUSE_SUGGESTION_DEBOUNCE_MS,
+	);
+	const offersAddresses =
+		field !== undefined && fieldTakesAddressSuggestions(field);
+
+	const { data } = useQuery({
+		...addressOperationsSearchAddressesOptions({
+			query: { q: debouncedQuery, limit: CLAUSE_SUGGESTION_LIMIT },
+		}),
+		enabled: offersAddresses && debouncedQuery.length >= MIN_QUERY_LENGTH,
+	});
+
+	if (!offersAddresses || field === undefined) return [];
+	const addresses: KnownAddress[] = [
+		...selectionSenders.map((email) => ({ email, fromSelection: true })),
+		...(data?.items ?? []).map((address) => ({
+			email: address.normalizedEmail,
+			...(address.displayName ? { displayName: address.displayName } : {}),
+		})),
+	];
+	return buildClauseSuggestions(field, query, addresses);
+};

package/src/hooks/useDeleteMessages.ts

@@ -9,6 +9,7 @@ import { useCallback } from "react";
 import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
 import { formatErrorDetail } from "@/components/ui/error-banners";
 import { resolveMailboxesForMessages } from "@/hooks/useMarkAsRead";
+import { runChunkedMutation } from "@/lib/bulk-actions";
 import {
 	cancelThreadListQueries,
 	invalidateThreadListQueries,
@@ -91,7 +92,7 @@ export const useDeleteMessages = ({
 	const queryClient = useQueryClient();
 	const { pushError } = useErrorBanners();
 
-	const { mutate, isPending } = useMutation({
+	const { mutateAsync, isPending } = useMutation({
 		...messageBulkOperationsDeleteMessagesMutation(),
 		onMutate: async (variables): Promise<DeleteContext> => {
 			const messageIds = new Set(variables.body.messageIds ?? []);
@@ -195,9 +196,11 @@ export const useDeleteMessages = ({
 	const deleteMessages = useCallback(
 		(messageIds: string[]) => {
 			if (messageIds.length === 0) return;
-			mutate({ body: { messageIds } });
+			void runChunkedMutation(messageIds, (chunk) =>
+				mutateAsync({ body: { messageIds: chunk } }),
+			);
 		},
-		[mutate],
+		[mutateAsync],
 	);
 
 	return { deleteMessages, isPending };

package/src/hooks/useFollowFocusOpen.render.test.ts

@@ -0,0 +1,155 @@
+/**
+ * The reading pane following the keyboard cursor.
+ *
+ * Three properties keep it from being a request per keystroke or a surprise
+ * open: a held key coalesces into one load for the row it stops on, following is
+ * off while a selection is being built, and a move made while it was off is
+ * spent rather than deferred — so turning following back on opens nothing until
+ * the cursor moves again.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../test-support/dom";
+import {
+	FOLLOW_FOCUS_DELAY_MS,
+	useFollowFocusOpen,
+} from "./useFollowFocusOpen";
+
+let harness: DomHarness | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+});
+
+const DELAY = 20;
+
+interface ProbeProps {
+	keyboardFocusedMessageId: string | undefined;
+	openMessageId: string | undefined;
+	enabled: boolean;
+	open: (messageId: string) => void;
+	delayMs: number;
+}
+
+function Probe(props: ProbeProps) {
+	useFollowFocusOpen(props);
+	return null;
+}
+
+interface Driver {
+	/** Re-render with a new cursor state, as a keypress would. */
+	move: (props: Partial<ProbeProps>) => void;
+	/** Let the settle timer fire — twice over, so a missed load still shows. */
+	settle: () => Promise<void>;
+	wait: (ms: number) => Promise<void>;
+	opened: string[];
+}
+
+const mount = (initial: Partial<ProbeProps> = {}, delayMs = DELAY): Driver => {
+	const opened: string[] = [];
+	let props: ProbeProps = {
+		keyboardFocusedMessageId: undefined,
+		openMessageId: undefined,
+		enabled: true,
+		open: (messageId) => opened.push(messageId),
+		delayMs,
+		...initial,
+	};
+	const dom = createDomHarness();
+	harness = dom;
+	const paint = () => dom.render(createElement(Probe, props));
+	paint();
+	return {
+		opened,
+		move: (next) => {
+			props = { ...props, ...next };
+			paint();
+		},
+		settle: () => dom.wait(delayMs * 2),
+		wait: (ms) => dom.wait(ms),
+	};
+};
+
+describe("useFollowFocusOpen", () => {
+	it("opens the row the cursor lands on", async () => {
+		const driver = mount();
+		driver.move({ keyboardFocusedMessageId: "m1" });
+		await driver.settle();
+		assert.deepEqual(driver.opened, ["m1"]);
+	});
+
+	it("opens nothing until the cursor has settled", async () => {
+		const driver = mount();
+		driver.move({ keyboardFocusedMessageId: "m1" });
+		assert.deepEqual(driver.opened, []);
+	});
+
+	it("coalesces a held key into one load, for the row it stops on", async () => {
+		const driver = mount();
+		for (const id of ["m1", "m2", "m3", "m4"])
+			driver.move({ keyboardFocusedMessageId: id });
+		await driver.settle();
+		assert.deepEqual(driver.opened, ["m4"]);
+	});
+
+	it("does not re-arm on a re-render that changes only the opener's identity", async () => {
+		// A long delay so the re-render lands mid-flight with room to spare: a
+		// re-arm would push the load out past the total wait below, which is what
+		// permanently defers it while a list re-renders.
+		const driver = mount({}, 100);
+		driver.move({ keyboardFocusedMessageId: "m1" });
+		await driver.wait(60);
+		// A list passes an inline opener, so every render hands in a new function.
+		driver.move({ open: (messageId) => driver.opened.push(messageId) });
+		await driver.wait(60);
+		assert.deepEqual(driver.opened, ["m1"]);
+	});
+
+	it("does not reload the row already in the reading pane", async () => {
+		const driver = mount({ openMessageId: "m1" });
+		driver.move({ keyboardFocusedMessageId: "m1" });
+		await driver.settle();
+		assert.deepEqual(driver.opened, []);
+	});
+
+	it("opens nothing while rows are selected", async () => {
+		const driver = mount({ enabled: false });
+		driver.move({ keyboardFocusedMessageId: "m1" });
+		await driver.settle();
+		assert.deepEqual(driver.opened, []);
+	});
+
+	it("spends the move made while following was off rather than deferring it", async () => {
+		const driver = mount({ enabled: false });
+		driver.move({ keyboardFocusedMessageId: "m1" });
+		await driver.settle();
+
+		// Clearing the selection must not load whatever row the cursor happens to
+		// be sitting on.
+		driver.move({ enabled: true });
+		await driver.settle();
+		assert.deepEqual(driver.opened, []);
+
+		// The next move is a fresh one and does load.
+		driver.move({ keyboardFocusedMessageId: "m2" });
+		await driver.settle();
+		assert.deepEqual(driver.opened, ["m2"]);
+	});
+
+	it("opens nothing when the cursor moved some way other than the keyboard", async () => {
+		const driver = mount();
+		driver.move({ keyboardFocusedMessageId: undefined });
+		await driver.settle();
+		assert.deepEqual(driver.opened, []);
+	});
+});
+
+describe("FOLLOW_FOCUS_DELAY_MS", () => {
+	it("sits above key repeat and below what reads as a wait", () => {
+		assert.ok(FOLLOW_FOCUS_DELAY_MS >= 60);
+		assert.ok(FOLLOW_FOCUS_DELAY_MS <= 250);
+	});
+});

package/src/hooks/useFollowFocusOpen.ts

@@ -0,0 +1,81 @@
+/**
+ * useFollowFocusOpen — the reading pane follows the keyboard cursor.
+ *
+ * Moving the cursor with j/k or the arrows loads the row it lands on, the way
+ * a desktop mail client does. Enter and a plain click keep opening exactly as
+ * they did; only a keyboard move drives this, so a click never opens twice and
+ * Tab walking into the list opens nothing.
+ *
+ * Two properties make it safe to run on every cursor move:
+ *
+ * - The load waits for the cursor to settle. Key repeat delivers a keydown
+ *   every few tens of milliseconds, so holding j down costs one request for the
+ *   row it stops on rather than one per row it passes.
+ * - Nothing here marks anything read. Read state is set by the dwell in
+ *   `useMarkAsRead` — three seconds on the open message — which a fly-past
+ *   never reaches and a deliberate open reaches unchanged.
+ */
+import { useEffect, useRef } from "react";
+
+/**
+ * How long the cursor must sit still before its row loads. Comfortably above
+ * the ~30ms of a repeating key, so a held key coalesces into a single load,
+ * and short enough that a single press reads as immediate.
+ */
+export const FOLLOW_FOCUS_DELAY_MS = 120;
+
+interface UseFollowFocusOpenOptions {
+	/**
+	 * The row a keyboard command last moved the cursor onto, and `undefined`
+	 * whenever the cursor last moved some other way — a click, a row taking DOM
+	 * focus, a thread opening, the list reshuffling under a refetch.
+	 */
+	keyboardFocusedMessageId: string | undefined;
+	/** The row already in the reading pane, so an open row does not reload. */
+	openMessageId: string | undefined;
+	/**
+	 * Whether the cursor may open rows at all. Desktop-only: on the single-pane
+	 * tiers the reading pane replaces the list, so following the cursor would
+	 * throw the user off the list they are scanning. Also off while rows are
+	 * selected, where the cursor is building a selection rather than reading.
+	 */
+	enabled: boolean;
+	/** Opens a row in the reading pane. */
+	open: (messageId: string) => void;
+	delayMs?: number;
+}
+
+export const useFollowFocusOpen = ({
+	keyboardFocusedMessageId,
+	openMessageId,
+	enabled,
+	open,
+	delayMs = FOLLOW_FOCUS_DELAY_MS,
+}: UseFollowFocusOpenOptions): void => {
+	// Lists pass an inline opener, so its identity changes every render. Holding
+	// it in a ref keeps a re-render from re-arming — and therefore permanently
+	// deferring — the pending load.
+	const openRef = useRef(open);
+	openRef.current = open;
+
+	// The last cursor move made while following was off. Such a move is spent,
+	// not deferred: clearing a selection must not load whatever row the cursor
+	// happens to be sitting on, only the next move should.
+	const declinedRef = useRef<string | undefined>(undefined);
+
+	useEffect(() => {
+		const messageId = keyboardFocusedMessageId;
+		if (!enabled) {
+			declinedRef.current = messageId;
+			return;
+		}
+		if (messageId === undefined) return;
+		if (messageId === openMessageId) return;
+		if (messageId === declinedRef.current) {
+			declinedRef.current = undefined;
+			return;
+		}
+		const timer = setTimeout(() => openRef.current(messageId), delayMs);
+		return () => clearTimeout(timer);
+	}, [enabled, keyboardFocusedMessageId, openMessageId, delayMs]);
+};