@remit/web-client 0.0.109 → 0.0.111

package/package.json

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

@@ -7,13 +7,13 @@
  * brief defaults to the cross-account aggregate, and `MailListHeader` provides
  * the title, unread count, and search.
  *
- * The list's filter control (categories + attribute chips + the account source
- * group) is hidden — the brief is being tried without it. The kit
- * `BriefSections` renders that control above the list body, so the body is
- * rendered here by `BriefListBody` instead; every input the control consumed is
- * still computed below, so bringing it back is swapping `BriefListBody` for
- * `<BriefSections … />`. Account switching also lives in the nav sidebar, and
- * the phone search takeover keeps its own copy of the filter sheet.
+ * The list's filter surface is the kit `BriefSections`: categories, attribute
+ * chips and the account source group, in a panel the list header's caret opens
+ * over the rows. `FilterPanelProvider` shares that panel's open state between
+ * the caret and the sheet, the same shape `MailViewChrome` gives the mailbox and
+ * Starred views. The category and the chips narrow the grouped sections
+ * themselves, and the phone search takeover reads the same selection, so a
+ * filter set on one surface holds on the other.
  *
  * Multi-select is the mailbox list's, not a copy of it: the same
  * `ThreadListInteraction` cursor and `useSelection` state, and the same
@@ -37,11 +37,14 @@ import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.
 import {
 	type BriefCategoryFilter,
 	BriefEmpty,
-	BriefSection,
+	type BriefFilterId,
+	BriefSections,
 	briefFilterConfig,
+	FilterPanelProvider,
 	type FilterSheetProps,
 	type FilterSheetSource,
 	KeyboardHintBar,
+	matchesBriefFilters,
 	partitionSpamResults,
 	type SearchResult,
 	SelectionTopBar,
@@ -102,21 +105,10 @@ import {
 	useThreadListSelection,
 } from "./ThreadListInteraction";
 
-/* The brief's attribute chips as predicates (mirrors the kit `briefFilterChips`
-   ids) so the phone search takeover narrows results the same way the list does. */
 /* Page size for the unscoped cross-folder search. One page is what the takeover
    and the "Top matches" list render; the server caps it at 500. */
 const UNSCOPED_SEARCH_PAGE_SIZE = 200;
 
-const BRIEF_SEARCH_PREDICATES: Record<string, (t: ThreadRowData) => boolean> = {
-	unread: (t) => !t.isRead,
-	attachment: (t) => t.hasAttachment === true,
-	contacts: (t) => t.trust === "vip" || t.trust === "wellknown",
-	today: (t) =>
-		t.sentDate != null &&
-		new Date(t.sentDate).toDateString() === new Date().toDateString(),
-};
-
 // ---------------------------------------------------------------------------
 // Skeleton
 // ---------------------------------------------------------------------------
@@ -169,73 +161,6 @@ const ErrorBanner = ({ accountEmail }: ErrorBannerProps) => {
 	);
 };
 
-// ---------------------------------------------------------------------------
-// List body (the kit `BriefSections` body without its filter control)
-// ---------------------------------------------------------------------------
-
-interface BriefListBodyProps {
-	sections: ThreadSection[];
-	/** Category scope. "all" keeps the per-category sections; anything else flattens. */
-	briefCategory: BriefCategoryFilter;
-	selectedThreadId?: string;
-	onSelectThread?: (id: string) => void;
-}
-
-/**
- * The brief's list body: one capped section per category at the "all" scope, a
- * headerless flat list once narrowed to a single category (the section headers
- * are redundant there).
- *
- * This is the kit `BriefSections` body minus the filter control it renders above
- * it. The category scope still arrives from the brief — the phone search
- * takeover's filter sheet sets it — so the flatten path stays reachable; the
- * attribute chips are part of the hidden control and narrow nothing here.
- */
-function BriefListBody({
-	sections,
-	briefCategory,
-	selectedThreadId,
-	onSelectThread,
-}: BriefListBodyProps) {
-	const showSections = briefCategory === "all";
-	const flatRows = sections
-		.flatMap((section) => section.threads)
-		.filter((thread) => thread.category === briefCategory);
-	const empty = showSections ? sections.length === 0 : flatRows.length === 0;
-
-	return (
-		<div className="h-full overflow-y-auto">
-			{showSections ? (
-				sections.map((section) => (
-					<BriefSection
-						key={section.id}
-						section={section}
-						Row={MessageRow}
-						selectedThreadId={selectedThreadId}
-						onSelectThread={onSelectThread}
-					/>
-				))
-			) : (
-				<div className="divide-y divide-line">
-					{flatRows.map((thread) => (
-						<MessageRow
-							key={thread.id}
-							thread={thread}
-							active={thread.id === selectedThreadId}
-							onClick={() => onSelectThread?.(thread.id)}
-						/>
-					))}
-				</div>
-			)}
-			{empty && (
-				<div className="px-row-inset py-6 text-center text-2xs text-fg-subtle">
-					No threads match these filters.
-				</div>
-			)}
-		</div>
-	);
-}
-
 // ---------------------------------------------------------------------------
 // Selection surface (the mailbox list's, mounted on the brief)
 // ---------------------------------------------------------------------------
@@ -462,7 +387,7 @@ export function DailyBrief({
 	onTriageContextChange,
 	onDeleteMessages,
 }: DailyBriefProps) {
-	const { searchQuery, resultFolderIndex } = useMailContext();
+	const { searchQuery, searchInput, resultFolderIndex } = useMailContext();
 	const tokenContext = useSearchTokenContext();
 	const isDesktop = useIsDesktop();
 	const wizard = useSelectionWizard();
@@ -474,29 +399,37 @@ export function DailyBrief({
 	);
 
 	// "all" = the cross-account aggregate (the brief's default), and "all"
-	// categories = the full set of sections. Both stay at their default while the
-	// list's filter control is hidden; the phone search takeover still drives them
-	// (the category also drives the flatten-when-filtered path), and account
-	// switching lives in the nav sidebar.
+	// categories = the full set of sections. Account switching also lives in the
+	// nav sidebar; the category also drives the flatten-when-filtered path.
 	const [selectedAccountId, setSelectedAccountId] = useState("all");
 	const [selectedCategory, setSelectedCategory] =
 		useState<BriefCategoryFilter>("all");
 
-	// Attribute chips for the phone search takeover — a separate surface from the
-	// list, so it carries its own additive set (category + account are shared
-	// above) and keeps its filter sheet while the list's control is hidden.
-	const [searchAttributes, setSearchAttributes] = useState<ReadonlySet<string>>(
-		new Set(),
-	);
-	const [searchExpanded, setSearchExpanded] = useState(false);
-	const toggleSearchAttribute = useCallback((id: string) => {
-		setSearchAttributes((prev) => {
+	// Held here rather than inside the list's filter sheet: the phone search
+	// takeover narrows the same rows by the same chips, and the body is unmounted
+	// and remounted around a query being typed, which would take a set living
+	// below with it.
+	const [activeFilters, setActiveFilters] = useState<
+		ReadonlySet<BriefFilterId>
+	>(new Set());
+	const [filterExpanded, setFilterExpanded] = useState(false);
+	const toggleFilter = useCallback((id: BriefFilterId) => {
+		setActiveFilters((prev) => {
 			const next = new Set(prev);
 			if (next.has(id)) next.delete(id);
 			else next.add(id);
 			return next;
 		});
 	}, []);
+	const clearFilters = useCallback(() => setActiveFilters(new Set()), []);
+
+	// A query owns the pane: the filter panel and the search's own affordance
+	// narrow the same list from the same place, so the panel stands down for as
+	// long as something is being searched. Its state survives, so clearing the
+	// query brings it back with the same category and chips. The header caret is
+	// gone under a query, and a panel left open with nothing to collapse it is
+	// what makes this load-bearing rather than tidy.
+	const searching = searchInput.trim().length > 0;
 
 	// --- Unified threads query ---
 	const {
@@ -649,19 +582,18 @@ export function DailyBrief({
 	);
 
 	// The phone search takeover renders the account/free-text-narrowed rows,
-	// further narrowed by the shared category and the takeover's attribute chips.
-	const searchResults = useMemo<SearchResult[]>(() => {
-		const predicates = Array.from(searchAttributes)
-			.map((id) => BRIEF_SEARCH_PREDICATES[id])
-			.filter((p): p is (t: ThreadRowData) => boolean => p != null);
-		return filteredRows
-			.filter(
-				(t) =>
-					(selectedCategory === "all" || t.category === selectedCategory) &&
-					predicates.every((p) => p(t)),
-			)
-			.map((row) => rowToSearchResult(row, resultFolderIndex));
-	}, [filteredRows, selectedCategory, searchAttributes, resultFolderIndex]);
+	// further narrowed by the same category and attribute chips the list applies.
+	const searchResults = useMemo<SearchResult[]>(
+		() =>
+			filteredRows
+				.filter(
+					(t) =>
+						(selectedCategory === "all" || t.category === selectedCategory) &&
+						matchesBriefFilters(t, activeFilters),
+				)
+				.map((row) => rowToSearchResult(row, resultFolderIndex)),
+		[filteredRows, selectedCategory, activeFilters, resultFolderIndex],
+	);
 
 	// "Related" (semantic) spans every account here — the brief is the
 	// cross-account view, so no mailbox scope. Dedupe against the literal "Top
@@ -683,7 +615,7 @@ export function DailyBrief({
 		);
 	}, [semanticHits, searchResults, threadsData, resultFolderIndex]);
 
-	const searchFilterConfig = useMemo<Omit<FilterSheetProps, "children">>(() => {
+	const filterConfig = useMemo<Omit<FilterSheetProps, "children">>(() => {
 		const preset = briefFilterConfig(
 			accountSources.map((s) => ({
 				id: s.id,
@@ -698,26 +630,27 @@ export function DailyBrief({
 			sources: preset.sources,
 			sourcesNote: mutedCount > 0 ? `+${mutedCount} muted` : undefined,
 			selectedCategory,
-			activeFilters: searchAttributes,
-			expanded: searchExpanded,
-			onExpandedChange: setSearchExpanded,
+			activeFilters,
+			expanded: filterExpanded,
+			onExpandedChange: setFilterExpanded,
 			onSelectCategory: (id: string) =>
 				setSelectedCategory(id as BriefCategoryFilter),
 			onSelectSource: setSelectedAccountId,
-			onToggleFilter: toggleSearchAttribute,
+			onToggleFilter: (id: string) => toggleFilter(id as BriefFilterId),
 			onClear: () => {
 				setSelectedCategory("all");
 				setSelectedAccountId("all");
-				setSearchAttributes(new Set());
+				clearFilters();
 			},
 		};
 	}, [
 		accountSources,
 		mutedCount,
 		selectedCategory,
-		searchAttributes,
-		searchExpanded,
-		toggleSearchAttribute,
+		activeFilters,
+		filterExpanded,
+		toggleFilter,
+		clearFilters,
 	]);
 
 	// The brief is genuinely empty (caught up) only when nothing is narrowing the
@@ -756,34 +689,12 @@ export function DailyBrief({
 		</div>
 	);
 
-	const stateBody = isLoading ? (
-		briefSkeleton
-	) : isError ? (
-		<div className="flex h-full flex-col items-center justify-center gap-3 py-12 text-sm text-fg-muted">
-			<AlertCircle className="size-8 text-danger" />
-			<p>Couldn't load your messages</p>
-			<button
-				type="button"
-				onClick={() => refetch()}
-				className="flex items-center gap-1 text-accent underline text-xs"
-			>
-				<RefreshCw className="size-3.5" />
-				Try again
-			</button>
-		</div>
-	) : caughtUp ? (
-		syncProgress.resolved ? (
-			<BriefEmpty
-				sync={
-					syncProgress.syncing
-						? { synced: syncProgress.synced, total: syncProgress.total }
-						: undefined
-				}
-			/>
-		) : (
-			briefSkeleton
-		)
-	) : (
+	// The filter sheet lives in the list body, so it is on screen only when the
+	// rows are. The caret reads the same answer and stands down everywhere else,
+	// rather than opening nothing over a skeleton or an empty state.
+	const showsRows = !isLoading && !isError && !caughtUp;
+
+	const stateBody = showsRows ? (
 		<div className="flex h-full min-h-0 flex-col">
 			{briefSpamOffer && (
 				<SpamResultsOffer
@@ -802,61 +713,99 @@ export function DailyBrief({
 				/>
 			)}
 			<div className="min-h-0 flex-1">
-				<BriefListBody
+				<BriefSections
 					sections={sections}
 					briefCategory={selectedCategory}
+					Row={MessageRow}
 					selectedThreadId={selectedMessageId}
 					onSelectThread={onSelectMessage}
+					onSelectBriefCategory={setSelectedCategory}
+					sources={accountSources}
+					sourcesNote={mutedCount > 0 ? `+${mutedCount} muted` : undefined}
+					onSelectSource={setSelectedAccountId}
+					activeFilters={activeFilters}
+					onToggleFilter={toggleFilter}
+					onClearFilters={clearFilters}
+					hideChrome={searching}
 				/>
 			</div>
 		</div>
+	) : isLoading ? (
+		briefSkeleton
+	) : isError ? (
+		<div className="flex h-full flex-col items-center justify-center gap-3 py-12 text-sm text-fg-muted">
+			<AlertCircle className="size-8 text-danger" />
+			<p>Couldn't load your messages</p>
+			<button
+				type="button"
+				onClick={() => refetch()}
+				className="flex items-center gap-1 text-accent underline text-xs"
+			>
+				<RefreshCw className="size-3.5" />
+				Try again
+			</button>
+		</div>
+	) : syncProgress.resolved ? (
+		<BriefEmpty
+			sync={
+				syncProgress.syncing
+					? { synced: syncProgress.synced, total: syncProgress.total }
+					: undefined
+			}
+		/>
+	) : (
+		briefSkeleton
 	);
 
 	// The cursor and selection wrap the whole pane, not just the list body: the
 	// selection toolbar takes the header's place while rows are selected, so it
-	// has to sit inside the same provider the rows do.
+	// has to sit inside the same provider the rows do. The filter panel spans the
+	// same pane for the same reason — the caret is in the header, the panel is
+	// above the rows.
 	return (
-		<ThreadListInteraction
-			selectedMessageId={selectedMessageId}
-			onOpen={(id, options) => onSelectMessage?.(id, options)}
-			onDeleteMessages={onDeleteMessages}
-			onSelectionVerb={wizard.start}
-			wizardOpen={wizard.isOpen}
-			commandsRef={commandsRef}
-			onTriageContextChange={onTriageContextChange}
-		>
-			<BriefSelectionChrome
-				wizard={wizard}
-				header={{
-					title: "Daily brief",
-					unreadCount: totalUnseen,
-					footer: isDesktop ? <KeyboardHintBar /> : undefined,
-					searchFilter: searchFilterConfig,
-					searchResults,
-					searchLoading: isLoading || searchFetching,
-					relatedResults,
-					relatedLoading,
-					onSelectSearchResult,
-					// The body already narrows to the committed query
-					// (`matchesBriefSearch` + `matchesSearchTokens` + the server `query`,
-					// above), so a committed search is a selectable list here exactly as
-					// it is on the mailbox route (#212) — the two-engine panel stays for
-					// the typing/uncommitted state only.
-					searchResultsInBody: true,
-				}}
-				rows={filteredRows}
+		<FilterPanelProvider hasSheet={showsRows && !searching}>
+			<ThreadListInteraction
+				selectedMessageId={selectedMessageId}
+				onOpen={(id, options) => onSelectMessage?.(id, options)}
+				onDeleteMessages={onDeleteMessages}
+				onSelectionVerb={wizard.start}
+				wizardOpen={wizard.isOpen}
+				commandsRef={commandsRef}
+				onTriageContextChange={onTriageContextChange}
 			>
-				<div className="flex h-full flex-col">
-					{failedAccounts.map((account) => (
-						<ErrorBanner
-							key={account.accountId}
-							accountEmail={account.email}
-							accountId={account.accountId}
-						/>
-					))}
-					<div className="min-h-0 flex-1">{stateBody}</div>
-				</div>
-			</BriefSelectionChrome>
-		</ThreadListInteraction>
+				<BriefSelectionChrome
+					wizard={wizard}
+					header={{
+						title: "Daily brief",
+						unreadCount: totalUnseen,
+						footer: isDesktop ? <KeyboardHintBar /> : undefined,
+						searchFilter: filterConfig,
+						searchResults,
+						searchLoading: isLoading || searchFetching,
+						relatedResults,
+						relatedLoading,
+						onSelectSearchResult,
+						// The body already narrows to the committed query
+						// (`matchesBriefSearch` + `matchesSearchTokens` + the server `query`,
+						// above), so a committed search is a selectable list here exactly as
+						// it is on the mailbox route (#212) — the two-engine panel stays for
+						// the typing/uncommitted state only.
+						searchResultsInBody: true,
+					}}
+					rows={filteredRows}
+				>
+					<div className="flex h-full flex-col">
+						{failedAccounts.map((account) => (
+							<ErrorBanner
+								key={account.accountId}
+								accountEmail={account.email}
+								accountId={account.accountId}
+							/>
+						))}
+						<div className="min-h-0 flex-1">{stateBody}</div>
+					</div>
+				</BriefSelectionChrome>
+			</ThreadListInteraction>
+		</FilterPanelProvider>
 	);
 }

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

@@ -13,9 +13,9 @@
  * time. The selection state is held here and survives, so clearing the query
  * restores the sheet exactly as it was.
  *
- * The daily brief no longer uses this: it composes `MailListHeader` with the kit
- * `BriefSections`, which owns its own filter row (so there is exactly one filter
- * surface and the section headers flatten correctly when filtered).
+ * The daily brief composes the same three parts itself — provider, header,
+ * sheet — around the kit `BriefSections`, whose sheet narrows the grouped
+ * sections and flattens them when scoped to one category.
  */
 import {
 	FilterPanelProvider,
@@ -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,
@@ -53,10 +52,7 @@ import {
 } 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";

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/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/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,
-	};
-};