@remit/web-client 0.0.110 → 0.0.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.110",
+  "version": "0.0.112",
   "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/MailListHeader.tsx

@@ -440,7 +440,7 @@ export function MailListHeader({
 					<span className="shrink-0 text-2xs text-fg-subtle">
 						{unreadCount.toLocaleString()} unread
 					</span>
-					{!hasQuery && <FilterToggle />}
+					<FilterToggle />
 				</>
 			),
 			searchSlot: ownsSearch && !searchExpanded && (
@@ -492,7 +492,6 @@ export function MailListHeader({
 			chromeResults,
 			makeFilterAction,
 			searchConversion,
-			hasQuery,
 		],
 	);
 

package/src/components/mail/MailViewChrome.tsx

@@ -102,7 +102,7 @@ export function MailViewChrome({
 	};
 
 	return (
-		<FilterPanelProvider>
+		<FilterPanelProvider hasSheet={!searching}>
 			<MailListHeader
 				title={title}
 				unreadCount={unreadCount}

package/src/components/mail/MessageList.tsx

@@ -2,10 +2,14 @@ import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/type
 import {
 	Banner,
 	type Density,
+	deriveIsMultiSelectMode,
 	type MessageListFilter,
 	MessageListLoadingMore,
 	MessageListPane,
+	nextFocusId,
+	type SelectionModifiers,
 	SelectionTopBar,
+	useSelection,
 	type Verb,
 } from "@remit/ui";
 import { useBlocker, useNavigate } from "@tanstack/react-router";
@@ -26,11 +30,6 @@ import { useFollowFocusOpen } from "@/hooks/useFollowFocusOpen";
 import { useLabelList } from "@/hooks/useLabels";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
-import {
-	nextFocusId,
-	type SelectionModifiers,
-	useSelection,
-} from "@/hooks/useSelection";
 import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
 import {
 	type BulkActionKind,
@@ -46,17 +45,10 @@ 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 {
-	deriveIsMultiSelectMode,
-	shouldExitSelectionOnNavigate,
-} from "@/lib/selection-mode";
+import { shouldExitSelectionOnNavigate } from "@/lib/selection-mode";
 import { cn } from "@/lib/utils";
 import { useSelectionWizard, useWizardStepValue } from "@/lib/wizard-history";
 import { LabelApplyTrigger } from "./LabelApplyTrigger";
@@ -1103,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/MessageListItem.tsx

@@ -6,9 +6,13 @@
  * interactive lives in `MessageRow`, which the brief and Flagged render too.
  */
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import type { Density, SenderTrustLevel, ThreadRowData } from "@remit/ui";
+import type {
+	Density,
+	SelectionModifiers,
+	SenderTrustLevel,
+	ThreadRowData,
+} from "@remit/ui";
 import { memo } from "react";
-import type { SelectionModifiers } from "@/hooks/useSelection";
 import { toDisplayCategory } from "@/lib/display-category";
 import { formatEmailDate } from "@/lib/format";
 import { MessageRow } from "./MessageRow";

package/src/components/mail/MessageRow.tsx

@@ -18,17 +18,18 @@ import {
 	compactRowClass,
 	type Density,
 	mergeProps,
+	modifiersOf,
 	type RowToggleEvent,
+	type SelectionModifiers,
 	type ThreadRowData,
 	useLongPress,
 } from "@remit/ui";
 import { useQueryClient } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 import { type MouseEvent, memo, type ReactNode, useCallback } from "react";
-import type { SelectionModifiers } from "@/hooks/useSelection";
 import { cn } from "@/lib/utils";
 import { useThreadRowInteraction } from "./ThreadListInteraction";
-import { modifiersOf, useModifierSelect } from "./useModifierSelect";
+import { useModifierSelect } from "./useModifierSelect";
 
 interface MailboxLinkSearch {
 	selectedMessageId?: string;

package/src/components/mail/SwipeableMessageRow.tsx

@@ -1,13 +1,13 @@
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
 import {
 	type Density,
+	type SelectionModifiers,
 	SwipeableRow,
 	type SwipePeek,
 	type ThreadRowData,
 } from "@remit/ui";
 import { Link } from "@tanstack/react-router";
 import { useCallback, useState } from "react";
-import type { SelectionModifiers } from "@/hooks/useSelection";
 import { toDisplayCategory } from "@/lib/display-category";
 import { formatEmailDate } from "@/lib/format";
 import { MessageListItem } from "./MessageListItem";

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

@@ -14,10 +14,10 @@
 
 import assert from "node:assert/strict";
 import { afterEach, describe, it } from "node:test";
+import type { SelectionModifiers } from "@remit/ui";
 import { createElement, type MouseEvent } from "react";
-import type { SelectionModifiers } from "@/hooks/useSelection";
 import { createDomHarness, type DomHarness } from "../../test-support/dom";
-import { isModified, useModifierSelect } from "./useModifierSelect";
+import { useModifierSelect } from "./useModifierSelect";
 
 let harness: DomHarness | undefined;
 
@@ -221,27 +221,3 @@ describe("useModifierSelect", () => {
 		assert.equal(press(dom, "contextmenu", { ctrlKey: true }), false);
 	});
 });
-
-describe("isModified", () => {
-	it("is true for any of the three keys a keyboard can add", () => {
-		assert.equal(
-			isModified({ shiftKey: true, metaKey: false, ctrlKey: false }),
-			true,
-		);
-		assert.equal(
-			isModified({ shiftKey: false, metaKey: true, ctrlKey: false }),
-			true,
-		);
-		assert.equal(
-			isModified({ shiftKey: false, metaKey: false, ctrlKey: true }),
-			true,
-		);
-	});
-
-	it("is false for the bare press a tap delivers", () => {
-		assert.equal(
-			isModified({ shiftKey: false, metaKey: false, ctrlKey: false }),
-			false,
-		);
-	});
-});

package/src/components/mail/useModifierSelect.ts

@@ -16,17 +16,8 @@
  * `preventDefault` is already too late there. `claimClick` still handles the
  * click for engines that deliver it that way.
  */
+import { isModified, modifiersOf, type SelectionModifiers } from "@remit/ui";
 import { type MouseEvent, useCallback, useRef } from "react";
-import type { SelectionModifiers } from "@/hooks/useSelection";
-
-export const modifiersOf = (e: MouseEvent): SelectionModifiers => ({
-	shiftKey: e.shiftKey,
-	metaKey: e.metaKey,
-	ctrlKey: e.ctrlKey,
-});
-
-export const isModified = (m: SelectionModifiers): boolean =>
-	m.shiftKey || m.metaKey || m.ctrlKey;
 
 export interface ModifierSelect {
 	/** Takes a modified press for selection before the browser acts on it. */

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/hooks/useListCursor.ts

@@ -13,13 +13,14 @@
  * `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 {
+	deriveIsMultiSelectMode,
 	nextFocusId,
+	rowSelectIntent,
 	type SelectionModifiers,
 	useSelection,
-} from "@/hooks/useSelection";
-import { deriveIsMultiSelectMode } from "@/lib/selection-mode";
+} from "@remit/ui";
+import { useCallback, useMemo, useRef, useState } from "react";
 
 interface UseListCursorOptions {
 	/** Message ids in display order. */
@@ -178,14 +179,15 @@ export const useListCursor = ({
 
 	const handleRowSelect = useCallback(
 		(messageId: string, modifiers: SelectionModifiers): boolean => {
-			if (modifiers.shiftKey) {
+			const intent = rowSelectIntent(modifiers);
+			if (intent === "range") {
 				// 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) {
+			if (intent === "toggle") {
 				toggleCheck(messageId);
 				return true;
 			}

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[];

package/src/lib/selection-mode.test.ts

@@ -1,30 +1,6 @@
 import assert from "node:assert/strict";
 import { describe, test } from "node:test";
-import {
-	deriveIsMultiSelectMode,
-	shouldExitSelectionOnNavigate,
-} from "./selection-mode.js";
-
-describe("deriveIsMultiSelectMode", () => {
-	test("no selection is not multi-select mode", () => {
-		assert.equal(deriveIsMultiSelectMode(0, false), false);
-	});
-
-	test("any selection on touch is multi-select mode", () => {
-		assert.equal(deriveIsMultiSelectMode(1, false), true);
-		assert.equal(deriveIsMultiSelectMode(42, false), true);
-	});
-
-	test("desktop selection drives the desktop toolbar, not multi-select mode", () => {
-		assert.equal(deriveIsMultiSelectMode(1, true), false);
-		assert.equal(deriveIsMultiSelectMode(0, true), false);
-	});
-
-	test("dropping the last selected id leaves the mode in the same call", () => {
-		assert.equal(deriveIsMultiSelectMode(1, false), true);
-		assert.equal(deriveIsMultiSelectMode(0, false), false);
-	});
-});
+import { shouldExitSelectionOnNavigate } from "./selection-mode.js";
 
 describe("shouldExitSelectionOnNavigate", () => {
 	test("back while selecting exits selection instead of navigating", () => {

package/src/lib/selection-mode.ts

@@ -8,18 +8,6 @@ import type { StepId } from "@remit/ui";
 /** The subset of `@tanstack/history`'s `HistoryAction` a blocker can see. */
 export type NavigationAction = "PUSH" | "REPLACE" | "FORWARD" | "BACK" | "GO";
 
-/**
- * Whether the list is in multi-select mode: a function of the selection count,
- * never a stored flag, so the two can never disagree. Multi-select is the
- * touch affordance (long press, always-visible checkboxes, the selection top
- * bar); on desktop a selection drives the desktop toolbar instead and rows
- * keep their ordinary hover behaviour.
- */
-export const deriveIsMultiSelectMode = (
-	selectedCount: number,
-	isDesktop: boolean,
-): boolean => !isDesktop && selectedCount > 0;
-
 /**
  * Whether a history navigation should exit selection mode instead of leaving
  * the route. Only the back gesture is intercepted, so a navigation the app

package/src/hooks/useSelection.test.ts

@@ -1,244 +0,0 @@
-import assert from "node:assert";
-import { describe, test } from "node:test";
-import {
-	computeRange,
-	intersectSelectedIds,
-	nextFocusId,
-	resolveRangeAnchor,
-} from "./useSelection.js";
-
-const ids = ["a", "b", "c", "d", "e"];
-
-// Mirrors the hook's `selectRange` state transition (anchor + selection) using
-// the same pure helpers it runs, so the mouse/keyboard sequences below exercise
-// the real logic without an interactive DOM. Returns the next {selected, anchor}.
-const applyRange = (
-	state: { selected: Set<string>; anchor: string | undefined },
-	orderedIds: string[],
-	targetId: string,
-	fallbackAnchor?: string,
-): { selected: Set<string>; anchor: string | undefined } => {
-	const anchor = resolveRangeAnchor(
-		orderedIds,
-		state.anchor,
-		fallbackAnchor,
-		targetId,
-	);
-	const range = computeRange(orderedIds, anchor, targetId);
-	const selected = new Set(state.selected);
-	for (const id of range) selected.add(id);
-	return { selected, anchor };
-};
-
-// Mirrors a cmd/ctrl-click: toggle membership and re-anchor on the clicked row.
-const applyToggle = (
-	state: { selected: Set<string>; anchor: string | undefined },
-	targetId: string,
-): { selected: Set<string>; anchor: string | undefined } => {
-	const selected = new Set(state.selected);
-	if (selected.has(targetId)) selected.delete(targetId);
-	else selected.add(targetId);
-	return { selected, anchor: targetId };
-};
-
-describe("computeRange", () => {
-	test("forward range: anchor above target selects the inclusive slice", () => {
-		assert.deepStrictEqual(computeRange(ids, "b", "d"), ["b", "c", "d"]);
-	});
-
-	test("backward range: target above anchor selects the same inclusive slice", () => {
-		assert.deepStrictEqual(computeRange(ids, "d", "b"), ["b", "c", "d"]);
-	});
-
-	test("anchor equals target selects just that one id", () => {
-		assert.deepStrictEqual(computeRange(ids, "c", "c"), ["c"]);
-	});
-
-	test("no anchor selects just the target", () => {
-		assert.deepStrictEqual(computeRange(ids, undefined, "c"), ["c"]);
-	});
-
-	test("anchor not present in the list selects just the target", () => {
-		assert.deepStrictEqual(computeRange(ids, "zzz", "c"), ["c"]);
-	});
-
-	test("full span from first to last includes every id in order", () => {
-		assert.deepStrictEqual(computeRange(ids, "a", "e"), [
-			"a",
-			"b",
-			"c",
-			"d",
-			"e",
-		]);
-	});
-
-	test("target not present in the list selects nothing", () => {
-		assert.deepStrictEqual(computeRange(ids, "b", "zzz"), []);
-	});
-});
-
-describe("resolveRangeAnchor", () => {
-	test("keeps a still-visible stored anchor so consecutive shift-clicks extend from it", () => {
-		assert.strictEqual(resolveRangeAnchor(ids, "b", undefined, "d"), "b");
-	});
-
-	test("a stored anchor no longer visible falls back to the open/focused row", () => {
-		// The stored anchor "z" was filtered/searched out of the visible list; the
-		// open row "b" is still visible, so the range anchors there.
-		assert.strictEqual(resolveRangeAnchor(ids, "z", "b", "d"), "b");
-	});
-
-	test("with neither a visible stored anchor nor a visible fallback, the target anchors itself", () => {
-		assert.strictEqual(resolveRangeAnchor(ids, "z", "y", "d"), "d");
-	});
-
-	test("no stored anchor and no fallback selects just the target", () => {
-		assert.strictEqual(resolveRangeAnchor(ids, undefined, undefined, "c"), "c");
-	});
-
-	test("a stored anchor beats the fallback while it stays visible", () => {
-		assert.strictEqual(resolveRangeAnchor(ids, "a", "c", "e"), "a");
-	});
-});
-
-describe("shift-click range over a filtered/search-narrowed list (#142, #144)", () => {
-	test("shift-click range with an active filter builds the range within the visible rows", () => {
-		// Full inbox is a..h; the "Automated" filter leaves only these rows.
-		const filtered = ["b", "d", "f", "g"];
-		// The open row "d" is visible; nothing selected yet, no stored anchor.
-		let state = {
-			selected: new Set<string>(),
-			anchor: undefined as string | undefined,
-		};
-		// Shift-click "g": ranges from the open/focused row "d" to "g".
-		state = applyRange(state, filtered, "g", "d");
-		assert.deepStrictEqual([...state.selected], ["d", "f", "g"]);
-		assert.strictEqual(state.anchor, "d");
-	});
-
-	test("range where the anchor left the visible set re-anchors instead of no-oping", () => {
-		const filtered = ["b", "d", "f", "g"];
-		// Stored anchor "a" was selected before the filter narrowed the list and is
-		// no longer visible; there is no open/focused fallback row.
-		let state = {
-			selected: new Set<string>(),
-			anchor: "a" as string | undefined,
-		};
-		// First shift-click adopts the clicked row as the new visible anchor.
-		state = applyRange(state, filtered, "f");
-		assert.deepStrictEqual([...state.selected], ["f"]);
-		assert.strictEqual(state.anchor, "f");
-		// Second shift-click now builds a real range from that adopted anchor.
-		state = applyRange(state, filtered, "b");
-		assert.deepStrictEqual([...state.selected].sort(), ["b", "d", "f"]);
-		assert.strictEqual(state.anchor, "f");
-	});
-
-	test("multi-select across a search-results list: cmd-click then shift-click", () => {
-		// Search "npm" yields these results; the inbox anchor is gone from this set.
-		const results = ["m1", "m2", "m3", "m4", "m5"];
-		let state = {
-			selected: new Set<string>(),
-			anchor: "inbox-row" as string | undefined,
-		};
-		// Cmd-click "m2": toggles it in and re-anchors on it (a visible row).
-		state = applyToggle(state, "m2");
-		assert.deepStrictEqual([...state.selected], ["m2"]);
-		assert.strictEqual(state.anchor, "m2");
-		// Shift-click "m4": ranges from the cmd-clicked anchor across the results.
-		state = applyRange(state, results, "m4");
-		assert.deepStrictEqual([...state.selected].sort(), ["m2", "m3", "m4"]);
-		assert.strictEqual(state.anchor, "m2");
-	});
-});
-
-describe("nextFocusId", () => {
-	test("moves down one row", () => {
-		assert.strictEqual(nextFocusId(ids, "b", 1), "c");
-	});
-
-	test("moves up one row", () => {
-		assert.strictEqual(nextFocusId(ids, "c", -1), "b");
-	});
-
-	test("clamps at the bottom (no wrap)", () => {
-		assert.strictEqual(nextFocusId(ids, "e", 1), "e");
-	});
-
-	test("clamps at the top (no wrap)", () => {
-		assert.strictEqual(nextFocusId(ids, "a", -1), "a");
-	});
-
-	test("no focus + down starts at the first row", () => {
-		assert.strictEqual(nextFocusId(ids, undefined, 1), "a");
-	});
-
-	test("no focus + up starts at the last row", () => {
-		assert.strictEqual(nextFocusId(ids, undefined, -1), "e");
-	});
-
-	test("focus not in the list + down starts at the first row", () => {
-		assert.strictEqual(nextFocusId(ids, "zzz", 1), "a");
-	});
-
-	test("empty list returns undefined", () => {
-		assert.strictEqual(nextFocusId([], "a", 1), undefined);
-	});
-});
-
-describe("intersectSelectedIds", () => {
-	test("a refresh that drops some selected ids and adds new rows keeps only the survivors (#111)", () => {
-		// Regression for #111: the effect used to clear the WHOLE selection the
-		// moment any single selected id left the list. Here "b" leaves (deleted
-		// elsewhere) while "f" arrives (new mail) — "a" and "c" must survive.
-		const selected = new Set(["a", "b", "c"]);
-		const refreshedThreadIds = ["a", "c", "d", "f"];
-		assert.deepStrictEqual(
-			intersectSelectedIds(selected, refreshedThreadIds),
-			new Set(["a", "c"]),
-		);
-	});
-
-	test("never adds an id that wasn't already selected", () => {
-		const selected = new Set(["a"]);
-		assert.deepStrictEqual(
-			intersectSelectedIds(selected, ["a", "b", "c"]),
-			new Set(["a"]),
-		);
-	});
-
-	test("every selected id surviving is a no-op (same members, not just same size)", () => {
-		const selected = new Set(["a", "b"]);
-		assert.deepStrictEqual(
-			intersectSelectedIds(selected, ["a", "b", "z"]),
-			new Set(["a", "b"]),
-		);
-	});
-
-	test("a post-delete retry selection survives a refetch that still contains it, minus what actually left", () => {
-		// Mirrors processRunOutcome materializing the failed ids as the new
-		// selection, then the cache-invalidation refetch running this same
-		// intersection against the freshly reloaded `threads`. One retry id
-		// ("fail-2") is momentarily missing from the refreshed page; the other
-		// two must stay selected so the Retry notice (gated on
-		// `selectedCount > 0`) doesn't disappear with it.
-		const retrySelection = new Set(["fail-1", "fail-2", "fail-3"]);
-		const refetchedThreadIds = ["fail-1", "fail-3", "unrelated-1"];
-		assert.deepStrictEqual(
-			intersectSelectedIds(retrySelection, refetchedThreadIds),
-			new Set(["fail-1", "fail-3"]),
-		);
-	});
-
-	test("everything in the selection leaving empties it, rather than leaving stale ids behind", () => {
-		const selected = new Set(["a", "b"]);
-		assert.deepStrictEqual(intersectSelectedIds(selected, ["z"]), new Set());
-	});
-
-	test("an empty selection stays empty", () => {
-		assert.deepStrictEqual(
-			intersectSelectedIds(new Set(), ["a", "b"]),
-			new Set(),
-		);
-	});
-});

package/src/hooks/useSelection.ts

@@ -1,292 +0,0 @@
-import { useCallback, useState } from "react";
-
-/**
- * Mouse/keyboard modifier flags read off a row click, used to drive desktop
- * multi-select semantics (shift = range, cmd/ctrl = toggle, plain = open).
- */
-export interface SelectionModifiers {
-	shiftKey: boolean;
-	metaKey: boolean;
-	ctrlKey: boolean;
-}
-
-interface UseSelectionOptions<T> {
-	/** Function to extract ID from an item */
-	getId: (item: T) => string;
-}
-
-interface UseSelectionReturn {
-	/** Set of currently selected item IDs */
-	selectedIds: Set<string>;
-	/** Number of selected items */
-	selectedCount: number;
-	/** Whether any items are selected */
-	hasSelection: boolean;
-	/** Check if a specific item is selected */
-	isSelected: (id: string) => boolean;
-	/** Toggle selection for a single item (updates the range anchor) */
-	toggle: (id: string) => void;
-	/** Select a single item (adds to selection, updates the range anchor) */
-	select: (id: string) => void;
-	/** Deselect a single item */
-	deselect: (id: string) => void;
-	/** Select all items */
-	selectAll: (ids: string[]) => void;
-	/** Clear all selections (also clears the range anchor) */
-	clearSelection: () => void;
-	/** Toggle selection for all items */
-	toggleAll: (ids: string[]) => void;
-	/**
-	 * Add the contiguous range of ids from the anchor to `targetId` (inclusive)
-	 * to the selection, using `orderedIds` for display order. The anchor is the
-	 * stored one when it is still visible in `orderedIds`; otherwise
-	 * `fallbackAnchor` when that is visible (the open/focused row); otherwise
-	 * `targetId`. Whatever anchors the range becomes the new stored anchor, so a
-	 * filtered or search-narrowed list can still build a range within what's
-	 * visible (#142, #144).
-	 */
-	selectRange: (
-		orderedIds: string[],
-		targetId: string,
-		fallbackAnchor?: string,
-	) => void;
-	/**
-	 * Set the range anchor without changing the selection set. Used by a plain
-	 * click that navigates but should seed the anchor for a later shift-click.
-	 */
-	setAnchor: (id: string) => void;
-	/**
-	 * The id of the row that anchors shift-range selection. `undefined` when
-	 * nothing has been selected yet.
-	 */
-	anchorId: string | undefined;
-	/**
-	 * Narrows the selection to whatever in it is still present in `currentIds`
-	 * — drops ids that left, keeps every survivor. Never adds anything, and
-	 * never clears the selection just because one id is gone (#111).
-	 */
-	intersectWith: (currentIds: readonly string[]) => void;
-}
-
-/**
- * Compute the inclusive slice of ids spanning from `anchorId` to `targetId`
- * in `orderedIds`. Pure so it can be unit-tested without a DOM.
- *
- * - Direction-agnostic: works whether the target sits above or below the anchor.
- * - Missing anchor (or anchor not in the list): returns just `[targetId]`.
- * - Target not in the list: returns `[]` (nothing to select).
- */
-export const computeRange = (
-	orderedIds: string[],
-	anchorId: string | undefined,
-	targetId: string,
-): string[] => {
-	const targetIndex = orderedIds.indexOf(targetId);
-	if (targetIndex === -1) return [];
-
-	const anchorIndex =
-		anchorId === undefined ? -1 : orderedIds.indexOf(anchorId);
-	if (anchorIndex === -1) return [targetId];
-
-	const start = Math.min(anchorIndex, targetIndex);
-	const end = Math.max(anchorIndex, targetIndex);
-	return orderedIds.slice(start, end + 1);
-};
-
-/**
- * Resolve which id a shift-range selection anchors from, given the stored
- * anchor and the ids currently visible (`orderedIds`). Pure so the
- * filtered/search anchor behavior can be unit-tested without a DOM.
- *
- * - The stored anchor wins while it is still visible — consecutive shift-clicks
- *   keep extending from the same origin (Apple Mail / Gmail).
- * - Once the stored anchor leaves the visible set (filtered out, or a search
- *   changed the list), it can't anchor a range in that set, so fall back to
- *   `fallbackAnchor` (the open/focused row) when it is visible.
- * - With neither available, the target anchors itself: the clicked row is
- *   selected alone and becomes the origin for the next shift-click.
- */
-export const resolveRangeAnchor = (
-	orderedIds: string[],
-	storedAnchor: string | undefined,
-	fallbackAnchor: string | undefined,
-	targetId: string,
-): string => {
-	if (storedAnchor !== undefined && orderedIds.includes(storedAnchor)) {
-		return storedAnchor;
-	}
-	if (fallbackAnchor !== undefined && orderedIds.includes(fallbackAnchor)) {
-		return fallbackAnchor;
-	}
-	return targetId;
-};
-
-/**
- * The ids from `selectedIds` that are still present in `currentIds` — the
- * survivor set after a list refresh. Only ever narrows: an id absent from
- * `selectedIds` is never added just because it's in `currentIds`. Pure so the
- * "drop what left, keep the rest" behavior (K-9's `selected.intersect
- * (uniqueIds)`, cited by #92 D2) can be unit-tested without a DOM.
- */
-export const intersectSelectedIds = (
-	selectedIds: ReadonlySet<string>,
-	currentIds: readonly string[],
-): Set<string> => {
-	const present = new Set(currentIds);
-	const next = new Set<string>();
-	for (const id of selectedIds) {
-		if (present.has(id)) next.add(id);
-	}
-	return next;
-};
-
-/**
- * Compute the id one step from `focusId` in `orderedIds`, clamped at the ends.
- * Pure so the shift-arrow range-extend math can be unit-tested without a DOM.
- *
- * - `direction` is -1 for up (previous) or +1 for down (next).
- * - Missing focus (or focus not in the list): returns the first id for down,
- *   the last id for up, or `undefined` when the list is empty.
- * - At a boundary: returns the same `focusId` (no wrap).
- */
-export const nextFocusId = (
-	orderedIds: string[],
-	focusId: string | undefined,
-	direction: -1 | 1,
-): string | undefined => {
-	if (orderedIds.length === 0) return undefined;
-
-	const currentIndex = focusId === undefined ? -1 : orderedIds.indexOf(focusId);
-	if (currentIndex === -1) {
-		return direction > 0 ? orderedIds[0] : orderedIds[orderedIds.length - 1];
-	}
-
-	const nextIndex = Math.min(
-		Math.max(currentIndex + direction, 0),
-		orderedIds.length - 1,
-	);
-	return orderedIds[nextIndex];
-};
-
-/**
- * Hook for managing selection state in lists.
- * Supports single and multi-select operations.
- */
-export const useSelection = <T>(
-	_options?: UseSelectionOptions<T>,
-): UseSelectionReturn => {
-	const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
-	const [anchorId, setAnchorId] = useState<string | undefined>(undefined);
-
-	const isSelected = useCallback(
-		(id: string) => selectedIds.has(id),
-		[selectedIds],
-	);
-
-	const toggle = useCallback((id: string) => {
-		setAnchorId(id);
-		setSelectedIds((prev) => {
-			const next = new Set(prev);
-			if (next.has(id)) {
-				next.delete(id);
-			} else {
-				next.add(id);
-			}
-			return next;
-		});
-	}, []);
-
-	const select = useCallback((id: string) => {
-		setAnchorId(id);
-		setSelectedIds((prev) => {
-			if (prev.has(id)) return prev;
-			const next = new Set(prev);
-			next.add(id);
-			return next;
-		});
-	}, []);
-
-	const deselect = useCallback((id: string) => {
-		setSelectedIds((prev) => {
-			if (!prev.has(id)) return prev;
-			const next = new Set(prev);
-			next.delete(id);
-			return next;
-		});
-	}, []);
-
-	const selectAll = useCallback((ids: string[]) => {
-		setSelectedIds(new Set(ids));
-	}, []);
-
-	const clearSelection = useCallback(() => {
-		setAnchorId(undefined);
-		setSelectedIds(new Set());
-	}, []);
-
-	const toggleAll = useCallback((ids: string[]) => {
-		setSelectedIds((prev) => {
-			const allSelected = ids.every((id) => prev.has(id));
-			return allSelected ? new Set() : new Set(ids);
-		});
-	}, []);
-
-	const setAnchor = useCallback((id: string) => {
-		setAnchorId(id);
-	}, []);
-
-	// Bails out to the same `prev` reference when nothing was dropped, so a
-	// caller can run this on every list refresh (e.g. an effect keyed on
-	// `threads`) without forcing a render each time.
-	const intersectWith = useCallback((currentIds: readonly string[]) => {
-		setSelectedIds((prev) => {
-			if (prev.size === 0) return prev;
-			const next = intersectSelectedIds(prev, currentIds);
-			return next.size === prev.size ? prev : next;
-		});
-	}, []);
-
-	const selectRange = useCallback(
-		(orderedIds: string[], targetId: string, fallbackAnchor?: string) => {
-			const effectiveAnchor = resolveRangeAnchor(
-				orderedIds,
-				anchorId,
-				fallbackAnchor,
-				targetId,
-			);
-			setSelectedIds((prev) => {
-				const range = computeRange(orderedIds, effectiveAnchor, targetId);
-				if (range.length === 0) return prev;
-				const next = new Set(prev);
-				for (const id of range) {
-					next.add(id);
-				}
-				return next;
-			});
-			// Whatever anchored the range becomes the stored anchor. A still-visible
-			// stored anchor resolves to itself (unchanged), so consecutive
-			// shift-clicks keep extending from the same origin; a stored anchor that
-			// left the visible set is replaced by the row the range actually used, so
-			// a filtered/search-narrowed list can build a range within what's visible.
-			setAnchorId(effectiveAnchor);
-		},
-		[anchorId],
-	);
-
-	return {
-		selectedIds,
-		selectedCount: selectedIds.size,
-		hasSelection: selectedIds.size > 0,
-		isSelected,
-		toggle,
-		select,
-		deselect,
-		selectAll,
-		clearSelection,
-		toggleAll,
-		selectRange,
-		setAnchor,
-		anchorId,
-		intersectWith,
-	};
-};