@remit/web-client 0.0.1

package/src/hooks/useLongPress.test.ts

@@ -0,0 +1,291 @@
+import assert from "node:assert";
+import { beforeEach, describe, mock, test } from "node:test";
+
+/**
+ * Test harness for useLongPress. Since we can't use React Testing Library,
+ * we test the handler logic directly by simulating pointer events and timers.
+ */
+
+interface MockPointerEvent {
+	clientX: number;
+	clientY: number;
+}
+
+const createPointerEvent = (x: number, y: number): MockPointerEvent => ({
+	clientX: x,
+	clientY: y,
+});
+
+/**
+ * Minimal implementation of useLongPress logic for testing.
+ * Matches the hook's behavior without React dependencies.
+ */
+class LongPressSimulator {
+	private timer: ReturnType<typeof setTimeout> | null = null;
+	private startPos: { x: number; y: number } | null = null;
+	private readonly MOVEMENT_THRESHOLD = 8;
+
+	constructor(
+		private readonly onLongPress: () => void,
+		private readonly delayMs: number = 500,
+	) {}
+
+	onPointerDown(e: MockPointerEvent): void {
+		this.clearTimer();
+		this.startPos = { x: e.clientX, y: e.clientY };
+		this.timer = setTimeout(() => {
+			this.onLongPress();
+			this.clearTimer();
+		}, this.delayMs);
+	}
+
+	onPointerMove(e: MockPointerEvent): void {
+		if (!this.startPos) return;
+
+		const dx = e.clientX - this.startPos.x;
+		const dy = e.clientY - this.startPos.y;
+		const distance = Math.sqrt(dx * dx + dy * dy);
+
+		if (distance > this.MOVEMENT_THRESHOLD) {
+			this.clearTimer();
+		}
+	}
+
+	onPointerUp(): void {
+		this.clearTimer();
+	}
+
+	onPointerCancel(): void {
+		this.clearTimer();
+	}
+
+	private clearTimer(): void {
+		if (this.timer) {
+			clearTimeout(this.timer);
+			this.timer = null;
+		}
+		this.startPos = null;
+	}
+
+	/** Test helper: check if timer is active */
+	hasActiveTimer(): boolean {
+		return this.timer !== null;
+	}
+
+	/** Test helper: cleanup */
+	cleanup(): void {
+		this.clearTimer();
+	}
+}
+
+describe("useLongPress", () => {
+	beforeEach(() => {
+		// Reset any timers between tests
+		mock.restoreAll();
+	});
+
+	test("fires callback after delay with no movement", async () => {
+		const onLongPress = mock.fn();
+		const sim = new LongPressSimulator(onLongPress, 500);
+
+		sim.onPointerDown(createPointerEvent(100, 100));
+
+		// Wait for the delay
+		await new Promise((resolve) => setTimeout(resolve, 550));
+
+		assert.strictEqual(onLongPress.mock.calls.length, 1);
+		sim.cleanup();
+	});
+
+	test("does not fire if pointer moves more than 8px", async () => {
+		const onLongPress = mock.fn();
+		const sim = new LongPressSimulator(onLongPress, 500);
+
+		sim.onPointerDown(createPointerEvent(100, 100));
+
+		// Move 10 pixels (more than threshold of 8)
+		sim.onPointerMove(createPointerEvent(110, 100));
+
+		// Wait beyond the delay
+		await new Promise((resolve) => setTimeout(resolve, 550));
+
+		assert.strictEqual(
+			onLongPress.mock.calls.length,
+			0,
+			"callback should not fire after moving > threshold",
+		);
+		sim.cleanup();
+	});
+
+	test("does not fire on early pointerup", async () => {
+		const onLongPress = mock.fn();
+		const sim = new LongPressSimulator(onLongPress, 500);
+
+		sim.onPointerDown(createPointerEvent(100, 100));
+
+		// Release before delay completes
+		await new Promise((resolve) => setTimeout(resolve, 100));
+		sim.onPointerUp();
+
+		// Wait beyond the original delay
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		assert.strictEqual(
+			onLongPress.mock.calls.length,
+			0,
+			"callback should not fire after early pointerup",
+		);
+		sim.cleanup();
+	});
+
+	test("does not fire on pointercancel", async () => {
+		const onLongPress = mock.fn();
+		const sim = new LongPressSimulator(onLongPress, 500);
+
+		sim.onPointerDown(createPointerEvent(100, 100));
+
+		// Cancel before delay completes
+		await new Promise((resolve) => setTimeout(resolve, 100));
+		sim.onPointerCancel();
+
+		// Wait beyond the original delay
+		await new Promise((resolve) => setTimeout(resolve, 500));
+
+		assert.strictEqual(
+			onLongPress.mock.calls.length,
+			0,
+			"callback should not fire after pointercancel",
+		);
+		sim.cleanup();
+	});
+
+	test("respects custom delayMs", async () => {
+		const onLongPress = mock.fn();
+		const customDelay = 200;
+		const sim = new LongPressSimulator(onLongPress, customDelay);
+
+		sim.onPointerDown(createPointerEvent(100, 100));
+
+		// Wait less than custom delay
+		await new Promise((resolve) => setTimeout(resolve, 150));
+		assert.strictEqual(
+			onLongPress.mock.calls.length,
+			0,
+			"should not fire before custom delay",
+		);
+
+		// Wait past custom delay
+		await new Promise((resolve) => setTimeout(resolve, 100));
+		assert.strictEqual(
+			onLongPress.mock.calls.length,
+			1,
+			"should fire after custom delay",
+		);
+		sim.cleanup();
+	});
+
+	test("allows movement within 8px threshold", async () => {
+		const onLongPress = mock.fn();
+		const sim = new LongPressSimulator(onLongPress, 500);
+
+		sim.onPointerDown(createPointerEvent(100, 100));
+
+		// Move 7 pixels (within threshold)
+		sim.onPointerMove(createPointerEvent(107, 100));
+
+		// Wait for the delay
+		await new Promise((resolve) => setTimeout(resolve, 550));
+
+		assert.strictEqual(
+			onLongPress.mock.calls.length,
+			1,
+			"callback should fire when movement is within threshold",
+		);
+		sim.cleanup();
+	});
+
+	test("calculates diagonal movement correctly", async () => {
+		const onLongPress = mock.fn();
+		const sim = new LongPressSimulator(onLongPress, 500);
+
+		sim.onPointerDown(createPointerEvent(100, 100));
+
+		// Move 6px in both x and y (diagonal distance ~8.48px > 8px threshold)
+		sim.onPointerMove(createPointerEvent(106, 106));
+
+		// Wait beyond the delay
+		await new Promise((resolve) => setTimeout(resolve, 550));
+
+		assert.strictEqual(
+			onLongPress.mock.calls.length,
+			0,
+			"callback should not fire when diagonal movement exceeds threshold",
+		);
+		sim.cleanup();
+	});
+
+	test("ignores pointer move before pointer down", async () => {
+		const onLongPress = mock.fn();
+		const sim = new LongPressSimulator(onLongPress, 500);
+
+		// Move without pressing down first
+		sim.onPointerMove(createPointerEvent(200, 200));
+
+		sim.onPointerDown(createPointerEvent(100, 100));
+
+		// Wait for the delay
+		await new Promise((resolve) => setTimeout(resolve, 550));
+
+		assert.strictEqual(
+			onLongPress.mock.calls.length,
+			1,
+			"callback should fire - earlier move should be ignored",
+		);
+		sim.cleanup();
+	});
+
+	test("resets on new pointer down", async () => {
+		const onLongPress = mock.fn();
+		const sim = new LongPressSimulator(onLongPress, 500);
+
+		// First press
+		sim.onPointerDown(createPointerEvent(100, 100));
+
+		// Wait a bit
+		await new Promise((resolve) => setTimeout(resolve, 200));
+
+		// New press at different location (should reset timer)
+		sim.onPointerDown(createPointerEvent(200, 200));
+
+		// Wait for delay from second press
+		await new Promise((resolve) => setTimeout(resolve, 550));
+
+		// Should only fire once (from second press)
+		assert.strictEqual(
+			onLongPress.mock.calls.length,
+			1,
+			"callback should fire once from second press",
+		);
+		sim.cleanup();
+	});
+
+	test("exact 8px movement does not cancel", async () => {
+		const onLongPress = mock.fn();
+		const sim = new LongPressSimulator(onLongPress, 500);
+
+		sim.onPointerDown(createPointerEvent(100, 100));
+
+		// Move exactly 8 pixels
+		sim.onPointerMove(createPointerEvent(108, 100));
+
+		// Wait for the delay
+		await new Promise((resolve) => setTimeout(resolve, 550));
+
+		assert.strictEqual(
+			onLongPress.mock.calls.length,
+			1,
+			"callback should fire - movement exactly at threshold is allowed",
+		);
+		sim.cleanup();
+	});
+});

package/src/hooks/useLongPress.ts

@@ -0,0 +1,87 @@
+import { useCallback, useRef } from "react";
+
+interface UseLongPressOptions {
+	onLongPress: () => void;
+	delayMs?: number;
+}
+
+interface LongPressHandlers {
+	onPointerDown: (e: PointerEvent | React.PointerEvent) => void;
+	onPointerMove: (e: PointerEvent | React.PointerEvent) => void;
+	onPointerUp: () => void;
+	onPointerCancel: () => void;
+}
+
+const MOVEMENT_THRESHOLD = 8; // pixels
+
+/**
+ * Hook for detecting long-press gestures on touch/pointer devices.
+ *
+ * @param onLongPress - Callback fired after the delay if the pointer hasn't moved
+ * @param delayMs - How long to wait before firing (default 500ms)
+ *
+ * @returns Pointer event handlers to spread onto your element
+ *
+ * @example
+ * const { handlers } = useLongPress({ onLongPress: () => console.log('long press!') });
+ * return <div {...handlers}>Press and hold me</div>;
+ */
+export const useLongPress = ({
+	onLongPress,
+	delayMs = 500,
+}: UseLongPressOptions): { handlers: LongPressHandlers } => {
+	const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+	const startPosRef = useRef<{ x: number; y: number } | null>(null);
+
+	const clearTimer = useCallback(() => {
+		if (timerRef.current) {
+			clearTimeout(timerRef.current);
+			timerRef.current = null;
+		}
+		startPosRef.current = null;
+	}, []);
+
+	const onPointerDown = useCallback(
+		(e: PointerEvent | React.PointerEvent) => {
+			clearTimer();
+			startPosRef.current = { x: e.clientX, y: e.clientY };
+			timerRef.current = setTimeout(() => {
+				onLongPress();
+				clearTimer();
+			}, delayMs);
+		},
+		[onLongPress, delayMs, clearTimer],
+	);
+
+	const onPointerMove = useCallback(
+		(e: PointerEvent | React.PointerEvent) => {
+			if (!startPosRef.current) return;
+
+			const dx = e.clientX - startPosRef.current.x;
+			const dy = e.clientY - startPosRef.current.y;
+			const distance = Math.sqrt(dx * dx + dy * dy);
+
+			if (distance > MOVEMENT_THRESHOLD) {
+				clearTimer();
+			}
+		},
+		[clearTimer],
+	);
+
+	const onPointerUp = useCallback(() => {
+		clearTimer();
+	}, [clearTimer]);
+
+	const onPointerCancel = useCallback(() => {
+		clearTimer();
+	}, [clearTimer]);
+
+	return {
+		handlers: {
+			onPointerDown,
+			onPointerMove,
+			onPointerUp,
+			onPointerCancel,
+		},
+	};
+};

package/src/hooks/useMailboxAccount.ts

@@ -0,0 +1,62 @@
+import {
+	configOperationsGetConfigOptions,
+	mailboxOperationsListMailboxesOptions,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { useQueries, useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+
+interface MailboxAccountResolution {
+	accountId: string | undefined;
+	isLoading: boolean;
+}
+
+/**
+ * Resolve the owning account for a single mailbox by id.
+ *
+ * The mailbox-list query is keyed by accountId, so we fan out to every
+ * configured account's mailbox list (cached forever, see sidebar) and find
+ * the one containing this mailboxId. Returns `accountId: undefined` while
+ * the lookup is still loading or if the mailbox isn't found in any account.
+ *
+ * Used by per-message Move actions where the `MessageActionMenu` only knows
+ * the mailboxId — the picker must scope to the correct account or the
+ * destination list would mix folders from unrelated accounts.
+ */
+export const useMailboxAccount = (
+	mailboxId: string | undefined,
+): MailboxAccountResolution => {
+	const { data: config, isLoading: isConfigLoading } = useQuery({
+		...configOperationsGetConfigOptions(),
+		staleTime: Infinity,
+	});
+
+	const accountIds = useMemo(
+		() => (config?.accounts ?? []).map((account) => account.accountId),
+		[config?.accounts],
+	);
+
+	const mailboxQueries = useQueries({
+		queries: accountIds.map((accountId) => ({
+			...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
+			staleTime: Infinity,
+			enabled: !!mailboxId,
+		})),
+	});
+
+	const isLoading =
+		isConfigLoading || mailboxQueries.some((query) => query.isLoading);
+
+	const accountId = useMemo(() => {
+		if (!mailboxId) return undefined;
+		for (let i = 0; i < accountIds.length; i++) {
+			const result = mailboxQueries[i];
+			const items = result.data?.items ?? [];
+			if (items.some((mailbox) => mailbox.mailboxId === mailboxId)) {
+				return accountIds[i];
+			}
+		}
+		return undefined;
+	}, [mailboxId, accountIds, mailboxQueries]);
+
+	return { accountId, isLoading };
+};

package/src/hooks/useMailboxNameIndex.ts

@@ -0,0 +1,32 @@
+/**
+ * Fans out the per-account mailbox-list query (mirrors `MailSidebarAdapter` /
+ * `useMailboxAccount` — cached forever, react-query dedupes the identical
+ * query key across call sites) and reduces it to the name index `in:` tokens
+ * resolve against (#428 follow-up, see doc/design/flows/06-search.md).
+ */
+import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+import { useQueries } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { buildMailboxNameIndex } from "@/lib/search-token-index";
+
+export function useMailboxNameIndex(
+	accounts: RemitImapAccountResponse[],
+): ReadonlyMap<string, string> {
+	const mailboxQueries = useQueries({
+		queries: accounts.map((account) => ({
+			...mailboxOperationsListMailboxesOptions({
+				path: { accountId: account.accountId },
+			}),
+			staleTime: Infinity,
+		})),
+	});
+
+	return useMemo(
+		() =>
+			buildMailboxNameIndex(
+				mailboxQueries.map((query) => query.data?.items ?? []),
+			),
+		[mailboxQueries],
+	);
+}

package/src/hooks/useMarkAsRead.test.ts

@@ -0,0 +1,165 @@
+import assert from "node:assert";
+import { describe, test } from "node:test";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { selectMessagesToMarkRead } from "./useMarkAsRead.js";
+
+const make = (
+	overrides: Partial<RemitImapThreadMessageResponse> & {
+		messageId: string;
+		threadMessageId: string;
+		isRead: boolean;
+	},
+): RemitImapThreadMessageResponse =>
+	({
+		threadId: "t1",
+		mailboxId: "mb1",
+		subject: "s",
+		fromName: "n",
+		fromEmail: "e",
+		sentDate: "2025-01-01T00:00:00Z",
+		snippet: "",
+		hasAttachment: false,
+		hasStars: false,
+		...overrides,
+	}) as RemitImapThreadMessageResponse;
+
+describe("selectMessagesToMarkRead", () => {
+	test("returns the unread expanded messages", () => {
+		const messages = [
+			make({ messageId: "m1", threadMessageId: "tm1", isRead: false }),
+			make({ messageId: "m2", threadMessageId: "tm2", isRead: true }),
+			make({ messageId: "m3", threadMessageId: "tm3", isRead: false }),
+		];
+		const expanded = new Set(["tm1", "tm3"]);
+		const got = selectMessagesToMarkRead(
+			messages,
+			expanded,
+			new Set(),
+			new Set(),
+		);
+		assert.deepStrictEqual(got, ["m1", "m3"]);
+	});
+
+	test("skips already-read messages even when expanded", () => {
+		const messages = [
+			make({ messageId: "m1", threadMessageId: "tm1", isRead: true }),
+		];
+		const expanded = new Set(["tm1"]);
+		const got = selectMessagesToMarkRead(
+			messages,
+			expanded,
+			new Set(),
+			new Set(),
+		);
+		assert.deepStrictEqual(got, []);
+	});
+
+	test("skips collapsed messages even when unread", () => {
+		const messages = [
+			make({ messageId: "m1", threadMessageId: "tm1", isRead: false }),
+			make({ messageId: "m2", threadMessageId: "tm2", isRead: false }),
+		];
+		const expanded = new Set(["tm1"]);
+		const got = selectMessagesToMarkRead(
+			messages,
+			expanded,
+			new Set(),
+			new Set(),
+		);
+		assert.deepStrictEqual(got, ["m1"]);
+	});
+
+	test("skips messages already marked in this session", () => {
+		const messages = [
+			make({ messageId: "m1", threadMessageId: "tm1", isRead: false }),
+		];
+		const expanded = new Set(["tm1"]);
+		const got = selectMessagesToMarkRead(
+			messages,
+			expanded,
+			new Set(["m1"]),
+			new Set(),
+		);
+		assert.deepStrictEqual(got, []);
+	});
+
+	test("skips messages with an in-flight mutation", () => {
+		const messages = [
+			make({ messageId: "m1", threadMessageId: "tm1", isRead: false }),
+		];
+		const expanded = new Set(["tm1"]);
+		const got = selectMessagesToMarkRead(
+			messages,
+			expanded,
+			new Set(),
+			new Set(["m1"]),
+		);
+		assert.deepStrictEqual(got, []);
+	});
+
+	test("returns empty list when nothing is expanded", () => {
+		const messages = [
+			make({ messageId: "m1", threadMessageId: "tm1", isRead: false }),
+			make({ messageId: "m2", threadMessageId: "tm2", isRead: false }),
+		];
+		const got = selectMessagesToMarkRead(
+			messages,
+			new Set(),
+			new Set(),
+			new Set(),
+		);
+		assert.deepStrictEqual(got, []);
+	});
+
+	test("does not require all unread messages to be expanded", () => {
+		// Regression: the previous policy gated firing on every unread
+		// message being expanded, which meant most opens silently never
+		// produced a mutation. The newest message being expanded must be
+		// enough to mark it read.
+		const messages = [
+			make({ messageId: "m1", threadMessageId: "tm1", isRead: false }),
+			make({ messageId: "m2", threadMessageId: "tm2", isRead: false }),
+			make({ messageId: "m3", threadMessageId: "tm3", isRead: false }),
+		];
+		const expanded = new Set(["tm1"]);
+		const got = selectMessagesToMarkRead(
+			messages,
+			expanded,
+			new Set(),
+			new Set(),
+		);
+		assert.deepStrictEqual(got, ["m1"]);
+	});
+
+	test("marks an older selected message when newest is already read (#683)", () => {
+		// Regression: ConversationView opens with order:"desc" so messages[0] is
+		// the newest. When the user clicks a thread row whose representative
+		// message is an older unread message (not the newest), only that older
+		// message must be marked. The newest is already read and must be skipped.
+		const messages = [
+			// Newest — already read (messages[0] in desc order)
+			make({
+				messageId: "m-newest",
+				threadMessageId: "tm-newest",
+				isRead: true,
+			}),
+			// Older — unread, the one the user clicked in the thread list
+			make({
+				messageId: "m-older",
+				threadMessageId: "tm-older",
+				isRead: false,
+			}),
+		];
+		// ConversationView now expands both messages[0] AND the selected message.
+		// Here the selected message is the older one, so both are expanded.
+		const expanded = new Set(["tm-newest", "tm-older"]);
+		const got = selectMessagesToMarkRead(
+			messages,
+			expanded,
+			new Set(),
+			new Set(),
+		);
+		// Only the unread older message should be marked — the newest is already read.
+		assert.deepStrictEqual(got, ["m-older"]);
+	});
+});