@remit/web-client 0.0.111 → 0.0.113

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.111",
+  "version": "0.0.113",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/mail/MessageList.tsx

@@ -45,11 +45,7 @@ import {
 	escalatedStatusLabel,
 	escalationActionLabel,
 } from "@/lib/escalation-label";
-import {
-	formatDeleteToTrashTitle,
-	formatEmailDate,
-	formatNumber,
-} from "@/lib/format";
+import { formatDeleteToTrashTitle, formatEmailDate } from "@/lib/format";
 import { tabStopId } from "@/lib/list-focus";
 import { useListHeaderChrome } from "@/lib/list-header-chrome";
 import { shouldExitSelectionOnNavigate } from "@/lib/selection-mode";
@@ -1099,9 +1095,7 @@ export const MessageList = ({
 				escalation.progress?.total ?? selectionCount,
 			)
 		: escalation.phase.kind === "counting"
-			? escalation.phase.countSoFar >= 5000
-				? `Counting… ${formatNumber(escalation.phase.countSoFar)} so far. This is a big result set.`
-				: `Counting… ${formatNumber(escalation.phase.countSoFar)} so far`
+			? "Counting matches…"
 			: escalation.phase.kind === "escalated"
 				? escalatedStatusLabel(searchPredicate ?? {}, escalation.phase.total)
 				: undefined;

package/src/components/mail/SwipeableMessageRow.render.test.ts

@@ -0,0 +1,110 @@
+/**
+ * The touch row is not an anchor (#116).
+ *
+ * An `<a href>` is what the OS long-press callout and the link context menu
+ * fire on, and they raced the row's own long-press-to-select gesture. Nothing
+ * an anchor buys — middle-click, open in new tab, copy link address — exists
+ * without a mouse, and the swipe row is the touch row.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	RouterContextProvider,
+} from "@tanstack/react-router";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { SwipeableMessageRow } from "./SwipeableMessageRow";
+
+const PHONE_WIDTH = 390;
+
+let harness: DomHarness | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+});
+
+const thread = {
+	threadMessageId: "tm-1",
+	threadId: "th-1",
+	messageId: "msg-1",
+	accountId: "acc-1",
+	accountConfigId: "acc-1",
+	mailboxId: "mbx-1",
+	subject: "Q3 planning notes",
+	fromName: "Alex Rivera",
+	fromEmail: "alex@example.com",
+	snippet: "Notes from the planning session.",
+	sentDate: 0,
+	isRead: false,
+	hasAttachment: false,
+	hasStars: false,
+	star: "None",
+	isDeleted: false,
+	senderTrust: "unknown",
+	createdAt: 0,
+	updatedAt: 0,
+} as unknown as RemitImapThreadMessageResponse;
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+const rootRoute = createRootRoute();
+const mailRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: "/mail/$mailboxId",
+});
+
+const testRouter = (): AnyRouter =>
+	createRouter({
+		routeTree: rootRoute.addChildren([mailRoute]),
+		history: createMemoryHistory({ initialEntries: ["/mail/mbx-1"] }),
+	}) as unknown as AnyRouter;
+
+const renderRow = (): DomHarness => {
+	const created = createDomHarness({ viewportWidth: PHONE_WIDTH });
+	created.render(
+		createElement(RouterContextProvider, {
+			router: testRouter(),
+			// biome-ignore lint/correctness/noChildrenProp: RouterContextProvider types `children` as a required prop, which createElement's rest-argument form does not satisfy
+			children: createElement(SwipeableMessageRow, {
+				thread,
+				mailboxId: "mbx-1",
+				isSelected: false,
+				isChecked: false,
+				onToggleCheck: () => undefined,
+				onRowSelect: () => false,
+				isMultiSelectMode: false,
+				onLongPress: () => undefined,
+				isDesktop: false,
+				onDelete: () => undefined,
+				onToggleRead: () => undefined,
+			}),
+		}),
+	);
+	return created;
+};
+
+describe("SwipeableMessageRow — the touch row's open affordance", () => {
+	it("renders no anchor at all", () => {
+		harness = renderRow();
+
+		assert.equal(harness.queryAll("a").length, 0);
+	});
+
+	it("opens through a button carrying the row marker", () => {
+		harness = renderRow();
+
+		const row = harness.query("button[data-message-row]");
+		assert.ok(row, "the row's open affordance is not a button");
+		assert.match(row.textContent ?? "", /Q3 planning notes/);
+	});
+});

package/src/components/mail/SwipeableMessageRow.tsx

@@ -6,12 +6,11 @@ import {
 	type SwipePeek,
 	type ThreadRowData,
 } from "@remit/ui";
-import { Link } from "@tanstack/react-router";
+import { useNavigate } from "@tanstack/react-router";
 import { useCallback, useState } from "react";
 import { toDisplayCategory } from "@/lib/display-category";
 import { formatEmailDate } from "@/lib/format";
 import { MessageListItem } from "./MessageListItem";
-import { useModifierSelect } from "./useModifierSelect";
 
 interface MailboxLinkSearch {
 	selectedMessageId?: string;
@@ -78,6 +77,7 @@ export const SwipeableMessageRow = ({
 	density,
 }: SwipeableMessageRowProps) => {
 	const [peek, setPeek] = useState<SwipePeek>("none");
+	const navigate = useNavigate();
 
 	const handleAct = useCallback(
 		(side: "leading" | "trailing") => {
@@ -100,10 +100,16 @@ export const SwipeableMessageRow = ({
 		onToggleCheck(thread.messageId);
 	}, [onToggleCheck, thread.messageId]);
 
-	// The swipe row is the layout tier's row, not the input device's: a mouse at
-	// a narrow width still gets it, and a shift or cmd click on it belongs to
-	// selection rather than to the anchor's own new-window/new-tab gesture.
-	const modifierSelect = useModifierSelect(thread.messageId, onRowSelect);
+	const handleOpen = useCallback(() => {
+		navigate({
+			to: "/mail/$mailboxId",
+			params: { mailboxId },
+			search: (prev: MailboxLinkSearch) => ({
+				...prev,
+				selectedMessageId: thread.messageId,
+			}),
+		});
+	}, [navigate, mailboxId, thread.messageId]);
 
 	if (isDesktop || isMultiSelectMode) {
 		return (
@@ -135,28 +141,8 @@ export const SwipeableMessageRow = ({
 			onPeek={setPeek}
 			onToggleCheck={handleToggleCheck}
 			onLongPress={handleLongPress}
-			onOpen={() => undefined}
+			onOpen={handleOpen}
 			onAct={handleAct}
-			linkComponent={({ onOpenClick, children, ...rowProps }) => (
-				<Link
-					{...rowProps}
-					to="/mail/$mailboxId"
-					params={{ mailboxId }}
-					search={(prev: MailboxLinkSearch) => ({
-						...prev,
-						selectedMessageId: thread.messageId,
-					})}
-					data-message-row
-					onMouseDown={modifierSelect.onMouseDown}
-					onContextMenu={modifierSelect.onContextMenu}
-					onClick={(e) => {
-						if (modifierSelect.claimClick(e)) return;
-						onOpenClick(e);
-					}}
-				>
-					{children}
-				</Link>
-			)}
 		/>
 	);
 };

package/src/hooks/escalated-run-lifetime.render.test.ts

@@ -42,10 +42,12 @@ interface MailServer {
 /**
  * A search that pages `TOTAL` ids at the hook's own page size, keyed by the
  * query, so a run started against one predicate is distinguishable from a run
- * that followed the list onto a later one.
+ * that followed the list onto a later one. A count-only request is answered
+ * with the whole match set in one response, as the server answers it.
  */
 const searchPage = (url: URL): unknown => {
 	const query = url.searchParams.get("query") ?? "";
+	if (url.searchParams.get("results") === "false") return { count: TOTAL };
 	const served = Number(url.searchParams.get("continuationToken") ?? "0");
 	const size = Math.min(PAGE_SIZE, Math.max(TOTAL - served, 0));
 	return {

package/src/hooks/useEscalatedActions.ts

@@ -18,7 +18,6 @@ import {
 	type ApplyBatch,
 	type BulkActionProgress,
 	type BulkRunOutcome,
-	countMatches,
 	type FetchIdsPage,
 	honestProgress,
 	runChunkedAction,
@@ -53,16 +52,14 @@ export type EscalatedAction =
 	| { kind: "move"; destinationMailboxId: string }
 	| { kind: "markRead" };
 
-/** Page size for both the counting and the execution loop. Set to the write
- *  side's own 100-id cap so an execution page IS a write chunk — no
- *  in-memory accumulation step between reading ids and sending them. Counting
- *  doesn't have that constraint but reuses the same page size rather than
- *  adding a second one to reason about. */
+/** Page size for the execution loop. Set to the write side's own 100-id cap so
+ *  an execution page IS a write chunk — no in-memory accumulation step between
+ *  reading ids and sending them. */
 const PAGE_SIZE = 100;
 
 export type EscalationPhase =
 	| { kind: "idle" }
-	| { kind: "counting"; countSoFar: number }
+	| { kind: "counting" }
 	| { kind: "escalated"; total: number };
 
 interface UseEscalatedActionsOptions {
@@ -80,12 +77,13 @@ interface UseEscalatedActionsOptions {
 
 export interface UseEscalatedActionsResult {
 	phase: EscalationPhase;
-	/** Begin paging the predicate's full match set to find its total. */
+	/** Ask the server how many messages the predicate matches, and switch the
+	 *  selection to that predicate once it answers. */
 	escalate: () => void;
 	/**
-	 * Stop whatever's running — counting or an action — at the next page
-	 * boundary. A no-op when nothing is running. The only thing that ends a run
-	 * in flight: leaving the selection, the wizard or the search does not.
+	 * Stop whatever's running — the count or an action — at the next boundary.
+	 * A no-op when nothing is running. The only thing that ends a run in
+	 * flight: leaving the selection, the wizard or the search does not.
 	 */
 	stop: () => void;
 	/**
@@ -181,11 +179,22 @@ export const useEscalatedActions = ({
 		[mailboxId],
 	);
 
-	const fetchIdsPage = useCallback<FetchIdsPage>(
-		(continuationToken) =>
-			fetchPagesOf(searchQueryRef.current)(continuationToken),
-		[fetchPagesOf],
-	);
+	/**
+	 * How many messages the predicate matches, straight from the server that
+	 * resolves it (#509). One count-only request: `limit` is a page size and has
+	 * no bearing on the answer, so nothing is paged to arrive at it.
+	 */
+	const fetchMatchCount = useCallback(async (): Promise<number> => {
+		const { data } = await threadOperationsSearchThreads({
+			path: { mailboxId },
+			query: { ...searchQueryRef.current, count: true, results: false },
+			throwOnError: true,
+		});
+		if (data.count === undefined) {
+			throw new Error("the search returned no count for the selection");
+		}
+		return data.count;
+	}, [mailboxId]);
 
 	const applyBatchFor = useCallback(
 		(action: EscalatedAction): ApplyBatch =>
@@ -235,30 +244,27 @@ export const useEscalatedActions = ({
 
 	const escalate = useCallback(() => {
 		cancelRef.current = false;
-		setPhase({ kind: "counting", countSoFar: 0 });
-		countMatches(
-			fetchIdsPage,
-			(countSoFar) => setPhase({ kind: "counting", countSoFar }),
-			() => cancelRef.current,
-		).then((result) => {
-			if (result.error) {
+		setPhase({ kind: "counting" });
+		fetchMatchCount().then(
+			(total) => {
+				if (cancelRef.current) {
+					setPhase({ kind: "idle" });
+					return;
+				}
+				setPhase({ kind: "escalated", total });
+			},
+			(error: unknown) => {
 				pushError(
 					buildMutationErrorBanner(
 						"Couldn't count matching messages",
 						"The count didn't finish.",
-						result.error,
+						error,
 					),
 				);
 				setPhase({ kind: "idle" });
-				return;
-			}
-			if (result.cancelled) {
-				setPhase({ kind: "idle" });
-				return;
-			}
-			setPhase({ kind: "escalated", total: result.total });
-		});
-	}, [fetchIdsPage, pushError]);
+			},
+		);
+	}, [fetchMatchCount, pushError]);
 
 	const stop = useCallback(() => {
 		cancelRef.current = true;
@@ -279,8 +285,8 @@ export const useEscalatedActions = ({
 			runningRef.current = true;
 			setRunningAction(action);
 			// `honestProgress` widens `total` if `done` overtakes it (#109) — the
-			// predicate can match more by the time the run re-pages it than
-			// `countMatches` saw, and the bar must never show more done than out of.
+			// predicate can match more by the time the run pages it than the count
+			// saw, and the bar must never show more done than out of.
 			const onProgress = (next: BulkActionProgress) =>
 				setProgress(honestProgress(next));
 			const applyBatch = applyBatchFor(action);

package/src/lib/bulk-actions.test.ts

@@ -3,7 +3,6 @@ import { describe, test } from "node:test";
 import {
 	BULK_ACTION_CHUNK_SIZE,
 	chunkIds,
-	countMatches,
 	type FetchIdsPageResult,
 	honestProgress,
 	runChunkedAction,
@@ -297,67 +296,10 @@ describe("runPredicateAction", () => {
 	});
 });
 
-describe("countMatches", () => {
-	const neverCancelled = () => false;
-
-	test("counts across every page until the token is exhausted", async () => {
-		let call = 0;
-		const pages: FetchIdsPageResult[] = [
-			{ ids: ids(500, "a"), continuationToken: "t1" },
-			{ ids: ids(500, "b"), continuationToken: "t2" },
-			{ ids: ids(412, "c") },
-		];
-		const fetch = async () => pages[call++];
-		const outcome = await countMatches(fetch, () => undefined, neverCancelled);
-		assert.deepEqual(outcome, { total: 1412, cancelled: false });
-	});
-
-	test("reports a running total after each page", async () => {
-		let call = 0;
-		const pages: FetchIdsPageResult[] = [
-			{ ids: ids(500), continuationToken: "t1" },
-			{ ids: ids(300) },
-		];
-		const fetch = async () => pages[call++];
-		const progressCalls: number[] = [];
-		await countMatches(fetch, (n) => progressCalls.push(n), neverCancelled);
-		assert.deepEqual(progressCalls, [500, 800]);
-	});
-
-	test("cancelling mid-count stops paging and reports what it had so far", async () => {
-		let call = 0;
-		let cancelled = false;
-		const fetch = async (): Promise<FetchIdsPageResult> => {
-			call++;
-			return { ids: ids(500), continuationToken: "more" };
-		};
-		const outcome = await countMatches(
-			fetch,
-			() => {
-				cancelled = true;
-			},
-			() => cancelled,
-		);
-		assert.equal(outcome.cancelled, true);
-		assert.equal(call, 1);
-		assert.equal(outcome.total, 500);
-	});
-
-	test("an infra failure while paging stops the count and reports the error", async () => {
-		const boom = new Error("network blip");
-		const fetch = async (): Promise<FetchIdsPageResult> => {
-			throw boom;
-		};
-		const outcome = await countMatches(fetch, () => undefined, neverCancelled);
-		assert.equal(outcome.error, boom);
-		assert.equal(outcome.total, 0);
-	});
-});
-
 describe("honestProgress", () => {
-	// Regression for #109: `countMatches` and `runPredicateAction` page the
-	// same predicate independently, so the delete can outrun the frozen
-	// `total` it started with when the result set grows in between.
+	// Regression for #109: the count and `runPredicateAction` resolve the same
+	// predicate independently, so the delete can outrun the frozen `total` it
+	// started with when the result set grows in between.
 	test("leaves an on-track progress reading untouched", () => {
 		assert.deepEqual(honestProgress({ done: 50, total: 100 }), {
 			done: 50,

package/src/lib/bulk-actions.ts

@@ -214,14 +214,14 @@ export const runPredicateAction = async (
 
 /**
  * Corrects a progress reading so its `total` can never read as less than
- * `done` (#109). `runPredicateAction`'s `total` is `countMatches`'s frozen
- * page-through, taken before the run re-pages the same predicate a second,
- * independent time; if more matches arrived in between, `done` can overtake
- * it mid-run and a raw "Deleting 1,340 of 1,284" would follow. Widening the
- * denominator to match keeps the bar's ratio sane (never past 100%) without
- * claiming the original count was exact — the honest fix is admitting the
- * estimate grew, not re-paging to reconcile it (the result set is live; a
- * second count taken any later is no less stale than the first).
+ * `done` (#109). `runPredicateAction`'s `total` is the count the server gave
+ * before the run resolved the same predicate a second, independent time; if
+ * more matches arrived in between, `done` can overtake it mid-run and a raw
+ * "Deleting 1,340 of 1,284" would follow. Widening the denominator to match
+ * keeps the bar's ratio sane (never past 100%) without claiming the original
+ * count was exact — the honest fix is admitting the reading grew, not taking a
+ * second count to reconcile it (the result set is live; a count taken any
+ * later is no less stale than the first).
  */
 export const honestProgress = (
 	progress: BulkActionProgress,
@@ -230,45 +230,6 @@ export const honestProgress = (
 	total: Math.max(progress.total, progress.done),
 });
 
-export interface CountMatchesResult {
-	total: number;
-	cancelled: boolean;
-	error?: unknown;
-}
-
-/**
- * Pages the full predicate result set to find its exact total — the only way,
- * short of a server-side total (out of scope, see issue #92), since search has
- * no total-count field beyond a small capped-window estimate. Reports a
- * running count via `onProgress` so a long count reads as progressing rather
- * than hung, and checks `isCancelled` between pages so Stop takes effect
- * within one page's latency.
- */
-export const countMatches = async (
-	fetchIdsPage: FetchIdsPage,
-	onProgress: (countSoFar: number) => void,
-	isCancelled: () => boolean,
-): Promise<CountMatchesResult> => {
-	let total = 0;
-	let token: string | undefined;
-
-	do {
-		if (isCancelled()) {
-			return { total, cancelled: true };
-		}
-		const fetched = await attempt(fetchIdsPage(token));
-		if (!fetched.ok) {
-			return { total, cancelled: false, error: fetched.error };
-		}
-		const page = fetched.value;
-		total += page.ids.length;
-		onProgress(total);
-		token = page.continuationToken;
-	} while (token);
-
-	return { total, cancelled: false };
-};
-
 export interface BulkRunOutcome {
 	done: number;
 	failedIds: string[];