@remit/web-client 0.0.85 → 0.0.87

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/components/settings/TlsRootCaDownload.render.test.ts

@@ -0,0 +1,37 @@
+/**
+ * React-render smoke test for `TlsRootCaDownload`: it must render only when
+ * this deployment's runtime config reports TLS_MODE=internal, since every
+ * other mode either has no local root CA (acme, tailscale) or serves plain
+ * HTTP (off).
+ */
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import React, { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { TlsRootCaDownload } from "./TlsRootCaDownload";
+
+// See MessageToolbar.render.test.ts: the SSR test loader transpiles remit-ui
+// `.tsx` (ButtonLink, here) with the classic JSX runtime, which needs a
+// global `React`.
+(globalThis as { React?: typeof React }).React = React;
+
+afterEach(() => {
+	globalThis.__REMIT_CONFIG__ = undefined;
+});
+
+describe("TlsRootCaDownload", () => {
+	it("renders the download row when tlsMode is internal", () => {
+		globalThis.__REMIT_CONFIG__ = { tlsMode: "internal" };
+		const html = renderToString(createElement(TlsRootCaDownload) as never);
+		assert.match(html, /TLS root certificate/);
+		assert.match(html, /href="\/tls-root-ca\.crt"/);
+	});
+
+	for (const mode of ["acme", "tailscale", "off", undefined]) {
+		it(`renders nothing when tlsMode is ${mode ?? "unset (default off)"}`, () => {
+			globalThis.__REMIT_CONFIG__ = mode ? { tlsMode: mode } : {};
+			const html = renderToString(createElement(TlsRootCaDownload) as never);
+			assert.equal(html, "");
+		});
+	}
+});

package/src/components/settings/TlsRootCaDownload.tsx

@@ -0,0 +1,33 @@
+/**
+ * Settings > Advanced, shown only for TLS_MODE=internal (deploy/vps/README.md,
+ * "TLS", has the rationale). Downloads the same root CA `remit cert` exports,
+ * served by deploy/vps/caddy/internal.caddy — reachable in-app instead of
+ * over SSH.
+ */
+import { ButtonLink } from "@remit/ui";
+import { ShieldCheck } from "lucide-react";
+import { getRuntimeConfig } from "@/runtime-config";
+
+export function TlsRootCaDownload() {
+	if (getRuntimeConfig().tlsMode !== "internal") return null;
+
+	return (
+		<div className="border-t border-line pt-4 mt-4">
+			<p className="text-sm font-medium text-fg mb-1">TLS root certificate</p>
+			<p className="text-sm text-fg-muted mb-2">
+				This deployment signs its own certificate. Import it into the trust
+				store of each device you browse from, and the browser warning stops for
+				good.
+			</p>
+			<ButtonLink
+				href="/tls-root-ca.crt"
+				download
+				variant="secondary"
+				size="sm"
+				icon={<ShieldCheck className="size-3.5" />}
+			>
+				Download root certificate
+			</ButtonLink>
+		</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]);
+};