@remit/ui 0.0.74 → 0.0.76

package/src/components/message-list-pane.tsx

@@ -1,8 +1,13 @@
 import { Menu } from "lucide-react";
-import type { ReactNode } from "react";
-import { useCallback, useMemo, useRef, useState } from "react";
+import type { MouseEvent, ReactNode } from "react";
+import { useCallback, useRef, useState } from "react";
 import { LIST_ROW_SELECTOR, useRovingFocus } from "../lib/roving-focus.js";
-import type { AppShellProps, TouchSeed } from "./app-shell-types.js";
+import { deriveIsMultiSelectMode, modifiersOf } from "../lib/use-selection.js";
+import type {
+	AppShellProps,
+	MessageListSelection,
+	TouchSeed,
+} from "./app-shell-types.js";
 import { BriefSections } from "./brief-sections.js";
 import { Button } from "./button.js";
 import { KeyboardHintBar } from "./keyboard-hint-bar.js";
@@ -16,12 +21,14 @@ import {
 	type BriefRowComponent,
 	ComfortableRow,
 	CompactRow,
+	type RowSelection,
 	type RowToggleEvent,
 } from "./message-row.js";
-import { SelectionTopBar } from "./selection-top-bar.js";
 import type { SwipePeek } from "./swipeable-row.js";
 import { TouchListBody } from "./touch-list.js";
 
+const NO_SELECTION: ReadonlySet<string> = new Set();
+
 /* ------------------------------------------------------------------ */
 /* Pane 2: message list (sectioned, dense, density toggle)            */
 /* ------------------------------------------------------------------ */
@@ -47,6 +54,7 @@ export function MessageListPane({
 	onOpenNav,
 	isDesktop,
 	initialTouchState,
+	selection,
 	selectionBar,
 	paneOverlay,
 	listBody,
@@ -85,9 +93,16 @@ export function MessageListPane({
 	isDesktop: boolean;
 	initialTouchState?: TouchSeed;
 	/**
-	 * Replaces the pane header when a selection is active. The caller controls
-	 * the selection state and toolbar actions (mark-read, move, delete, cancel).
-	 * When omitted the pane's built-in touch-triage selection bar is used.
+	 * The list's selection. The pane draws it — the row checkboxes, and the
+	 * always-visible ones the touch list shows once a row is ticked — and holds
+	 * none of it. Absent means the list does not offer multi-select.
+	 */
+	selection?: MessageListSelection;
+	/**
+	 * The pane header. The caller mounts it for every state of the list: a
+	 * `SelectionTopBar` names the view while nothing is ticked and carries the
+	 * count and the verbs (mark-read, move, delete, cancel) from the first
+	 * ticked row. Replaces the pane's own plain title header.
 	 */
 	selectionBar?: ReactNode;
 	/**
@@ -107,9 +122,8 @@ export function MessageListPane({
 	 */
 	listBody?: ReactNode;
 	/**
-	 * Suppress the built-in title header. The consumer owns the header (e.g. the
-	 * shared `MailHeader` rendered above the pane). The selection bar still
-	 * replaces the (now absent) header while a selection is active.
+	 * Suppress the built-in title header, for a consumer that renders its own
+	 * above the pane.
 	 */
 	hideHeader?: boolean;
 }) {
@@ -121,38 +135,7 @@ export function MessageListPane({
 	});
 
 	const touchTriage = !isDesktop && !briefFilters && listState === "ready";
-	const seededRows = sections.flatMap((section) => section.threads);
-	const [selectionMode, setSelectionMode] = useState(
-		initialTouchState === "selection",
-	);
-	// The seed is a touch-triage state; desktop starts unselected and gets there
-	// through the row checkboxes.
-	const [checkedIds, setCheckedIds] = useState<ReadonlySet<string>>(() =>
-		initialTouchState === "selection" && !isDesktop
-			? new Set(seededRows.slice(0, 2).map((t) => t.id))
-			: new Set(),
-	);
-	// What the fallback bar's verbs have done to the mock rows. A demo bar whose
-	// Trash only closes the bar is a Trash that deletes nothing, which is the one
-	// thing a selection bar must never be — so these verbs act on the rows the
-	// mock owns, the same way `refresh` below fakes a refresh visibly.
-	const [trashedIds, setTrashedIds] = useState<ReadonlySet<string>>(new Set());
-	const [readIds, setReadIds] = useState<ReadonlySet<string>>(new Set());
 	const [refreshing, setRefreshing] = useState(false);
-	const touchSections = useMemo(
-		() =>
-			trashedIds.size === 0 && readIds.size === 0
-				? sections
-				: sections.map((section) => ({
-						...section,
-						threads: section.threads
-							.filter((thread) => !trashedIds.has(thread.id))
-							.map((thread) =>
-								readIds.has(thread.id) ? { ...thread, isRead: true } : thread,
-							),
-					})),
-		[sections, trashedIds, readIds],
-	);
 	const initialPeek: SwipePeek | undefined =
 		initialTouchState === "peek-trailing"
 			? "trailing"
@@ -160,92 +143,70 @@ export function MessageListPane({
 				? "leading"
 				: undefined;
 
-	const toggleCheck = useCallback((id: string) => {
-		setCheckedIds((prev) => {
-			const next = new Set(prev);
-			if (next.has(id)) next.delete(id);
-			else next.add(id);
-			if (next.size === 0) setSelectionMode(false);
-			return next;
-		});
-	}, []);
-	const enterSelection = (id: string) => {
-		setSelectionMode(true);
-		setCheckedIds(new Set([id]));
-	};
-	const cancelSelection = () => {
-		setSelectionMode(false);
-		setCheckedIds(new Set());
-	};
-	const trashChecked = () => {
-		setTrashedIds((prev) => new Set([...prev, ...checkedIds]));
-		cancelSelection();
-	};
-	const markCheckedRead = () => {
-		setReadIds((prev) => new Set([...prev, ...checkedIds]));
-		cancelSelection();
-	};
 	const refresh = () => {
 		setRefreshing(true);
 		setTimeout(() => setRefreshing(false), 1400);
 	};
 
-	// Desktop rows carry the checkbox the app's own rows have: it takes the
-	// avatar's place on hover, and checking one puts the pane in selection.
-	const desktopSelectable = isDesktop && !selectionBar && listState === "ready";
+	const selectedIds = selection?.selectedIds ?? NO_SELECTION;
+	const toggleSelected = selection?.onToggle;
+	const onRowSelect = selection?.onRowSelect;
+	// Multi-select is the touch affordance, and it is a function of the count
+	// rather than a flag, so ticking the last row off leaves it on its own.
+	const selectionMode = deriveIsMultiSelectMode(selectedIds.size, isDesktop);
+
+	// The checkbox takes the avatar's place on hover, and stays put once the row
+	// is ticked.
 	const rowSelection = useCallback(
-		(id: string) =>
-			desktopSelectable
-				? {
-						checked: checkedIds.has(id),
-						onToggle: (event: RowToggleEvent) => {
-							event.preventDefault();
-							event.stopPropagation();
-							toggleCheck(id);
-						},
-					}
-				: undefined,
-		[desktopSelectable, checkedIds, toggleCheck],
+		(id: string): RowSelection | undefined => {
+			if (!toggleSelected) return undefined;
+			return {
+				checked: selectedIds.has(id),
+				onToggle: (event: RowToggleEvent) => {
+					event.preventDefault();
+					event.stopPropagation();
+					toggleSelected(id);
+				},
+			};
+		},
+		[selectedIds, toggleSelected],
+	);
+
+	// Shift ranges and cmd/ctrl ticks, so a modified click never opens the row it
+	// was aimed at. Shift-click otherwise drags a native text selection across
+	// the rows it spans — the row highlight is the selection the user asked for.
+	const takeRowSelect = useCallback(
+		(id: string, event: MouseEvent): boolean => {
+			if (!onRowSelect?.(id, modifiersOf(event))) return false;
+			event.preventDefault();
+			if (event.shiftKey) window.getSelection()?.removeAllRanges();
+			return true;
+		},
+		[onRowSelect],
 	);
 
 	// The brief drives rows through a `BriefRowComponent`, whose props carry no
 	// selection — a consumer's own row (the web client's) wires its checkbox
 	// itself. Binding it here keeps the kit's rows selectable there too.
 	const BriefRow: BriefRowComponent = useCallback(
-		(props) => <Row {...props} selection={rowSelection(props.thread.id)} />,
-		[Row, rowSelection],
+		({ thread, active, onClick }) => (
+			<Row
+				thread={thread}
+				active={active}
+				selection={rowSelection(thread.id)}
+				onClick={(event) => {
+					if (takeRowSelect(thread.id, event)) return;
+					onClick?.();
+				}}
+			/>
+		),
+		[Row, rowSelection, takeRowSelect],
 	);
 
-	const selectableIds = seededRows.map((thread) => thread.id);
-	const allChecked =
-		selectableIds.length > 0 && selectableIds.every((id) => checkedIds.has(id));
-	const selectAll = {
-		checked: allChecked,
-		indeterminate: checkedIds.size > 0 && !allChecked,
-		onChange: () =>
-			setCheckedIds(allChecked ? new Set() : new Set(selectableIds)),
-	};
-
-	// When the caller supplies a selectionBar slot, it owns selection state.
-	// Fall back to the built-in bar only when no external bar is given.
-	const inBuiltinSelection =
-		!selectionBar &&
-		checkedIds.size > 0 &&
-		(desktopSelectable || (touchTriage && selectionMode));
-
 	return (
 		<section className="relative flex h-full w-full flex-col bg-surface">
 			{selectionBar ??
-				(inBuiltinSelection ? (
-					<SelectionTopBar
-						title={listTitle}
-						count={checkedIds.size}
-						selectAll={desktopSelectable ? selectAll : undefined}
-						onCancel={cancelSelection}
-						onMarkRead={markCheckedRead}
-						onDelete={trashChecked}
-					/>
-				) : hideHeader ? null : (
+				(hideHeader ? null : (
 					<header className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-row-inset">
 						{onOpenNav && (
 							<Button
@@ -304,13 +265,13 @@ export function MessageListPane({
 				listBody
 			) : touchTriage ? (
 				<TouchListBody
-					sections={touchSections}
+					sections={sections}
 					selectedThreadId={selectedThreadId}
 					selectionMode={selectionMode}
-					checkedIds={checkedIds}
+					checkedIds={selectedIds}
 					initialPeek={initialPeek}
-					onToggleCheck={toggleCheck}
-					onEnterSelection={enterSelection}
+					onToggleCheck={(id) => toggleSelected?.(id)}
+					onEnterSelection={(id) => toggleSelected?.(id)}
 					onOpenThread={(id) => onSelectThread?.(id)}
 					onRefresh={refresh}
 					refreshing={refreshing}
@@ -338,7 +299,10 @@ export function MessageListPane({
 										thread={thread}
 										active={thread.id === selectedThreadId}
 										selection={rowSelection(thread.id)}
-										onClick={() => onSelectThread?.(thread.id)}
+										onClick={(event) => {
+											if (takeRowSelect(thread.id, event)) return;
+											onSelectThread?.(thread.id);
+										}}
 									/>
 								))}
 							</div>

package/src/components/message-row.tsx

@@ -1,5 +1,10 @@
 import { Check, Paperclip, ShieldAlert, Star } from "lucide-react";
-import type { ComponentType, ReactNode, SyntheticEvent } from "react";
+import type {
+	ComponentType,
+	MouseEvent,
+	ReactNode,
+	SyntheticEvent,
+} from "react";
 import { cn } from "../lib/cn.js";
 import { LIST_ROW_ATTRIBUTE } from "../lib/roving-focus.js";
 import { categoryTone, type ThreadRowData } from "./app-shell-types.js";
@@ -328,7 +333,7 @@ export function CompactRow({
 	thread: ThreadRowData;
 	active?: boolean;
 	focused?: boolean;
-	onClick?: () => void;
+	onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 }) {
 	return (
 		<button
@@ -353,7 +358,7 @@ export function ComfortableRow({
 	active?: boolean;
 	focused?: boolean;
 	selection?: RowSelection;
-	onClick?: () => void;
+	onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 }) {
 	return (
 		<button

package/src/components/mobile-search-view.render.test.ts

@@ -2,6 +2,7 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import { createElement } from "react";
 import { renderToString } from "react-dom/server";
+import { FilterPanelProvider } from "./filter-sheet.js";
 import { MobileSearchView } from "./mobile-search-view.js";
 import type { SearchResult } from "./search-result-row.js";
 
@@ -66,6 +67,26 @@ describe("MobileSearchView filter chrome", () => {
 		);
 		assert.match(html, /Expand filters/);
 	});
+
+	// The takeover covers the list whose header carries the caret, so it cannot
+	// borrow that caret: it renders over the header, not under it. Without the
+	// boundary the sheet reads the list's panel and drops its own trigger row,
+	// leaving the takeover with no way to open its filters at all.
+	it("keeps its own filter row over a list that has a filter panel", () => {
+		const html = renderToString(
+			createElement(
+				FilterPanelProvider,
+				{ hasSheet: true },
+				createElement(MobileSearchView, {
+					...base,
+					value: "",
+					sections: [],
+					filter,
+				}),
+			),
+		);
+		assert.match(html, /Expand filters/);
+	});
 });
 
 describe("MobileSearchView search scope", () => {

package/src/components/mobile-search-view.tsx

@@ -1,7 +1,11 @@
 import { X } from "lucide-react";
 import type { ReactNode } from "react";
 import { Button } from "./button.js";
-import { FilterSheet, type FilterSheetProps } from "./filter-sheet.js";
+import {
+	FilterPanelBoundary,
+	FilterSheet,
+	type FilterSheetProps,
+} from "./filter-sheet.js";
 import { SearchBar } from "./search-bar.js";
 import type { SearchChip, SearchFieldSuggest } from "./search-chip-input.js";
 import type { SearchResult } from "./search-result-row.js";
@@ -146,7 +150,9 @@ export function MobileSearchView({
 			{suggestList}
 
 			{filter && value.trim().length === 0 ? (
-				<FilterSheet {...filter}>{body}</FilterSheet>
+				<FilterPanelBoundary>
+					<FilterSheet {...filter}>{body}</FilterSheet>
+				</FilterPanelBoundary>
 			) : (
 				<div className="flex-1 overflow-y-auto">{body}</div>
 			)}

package/src/components/touch-list.follows-sections.test.ts

@@ -0,0 +1,140 @@
+/**
+ * The touch list renders the `sections` it is handed, on every render.
+ *
+ * It used to copy them into state on mount, so a consumer whose verbs act on
+ * its own rows — the selection bar's Trash — cleared the bar and left every
+ * row on screen. The swipe mock still has to work, so what it does is held as
+ * ids over whatever the consumer passes rather than as a copy of the rows.
+ */
+
+import assert from "node:assert/strict";
+import { after, afterEach, before, beforeEach, describe, it } from "node:test";
+import type { JSDOM } from "jsdom";
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import type { ThreadSection } from "./app-shell-types.js";
+import type { SwipePeek } from "./swipeable-row.js";
+import { TouchListBody } from "./touch-list.js";
+
+let dom: JSDOM;
+let container: HTMLElement;
+let root: Root;
+
+const row = (id: string, fromName: string, isRead = false) => ({
+	id,
+	accountId: "account-1",
+	fromName,
+	fromEmail: `${id}@example.com`,
+	subject: `Subject ${id}`,
+	snippet: "…",
+	timeLabel: "9:42",
+	isRead,
+});
+
+const sectionsOf = (...ids: string[]): ThreadSection[] => [
+	{ id: "inbox", threads: ids.map((id) => row(id, `Sender ${id}`)) },
+];
+
+const readOf = (...ids: string[]): ThreadSection[] => [
+	{ id: "inbox", threads: ids.map((id) => row(id, `Sender ${id}`, true)) },
+];
+
+const render = (sections: ThreadSection[], initialPeek?: SwipePeek) => {
+	act(() => {
+		root.render(
+			createElement(TouchListBody, {
+				sections,
+				initialPeek,
+				selectionMode: false,
+				checkedIds: new Set<string>(),
+				onToggleCheck: () => undefined,
+				onEnterSelection: () => undefined,
+				onOpenThread: () => undefined,
+				onRefresh: () => undefined,
+				refreshing: false,
+			}),
+		);
+	});
+};
+
+/** The unread dot each row draws while it is unread, and only then. */
+const unreadRows = () =>
+	container.querySelectorAll("span.rounded-full.bg-accent").length;
+
+const click = (label: string) => {
+	const button = container.querySelector(`button[aria-label="${label}"]`);
+	assert.ok(button, `no "${label}" control on the page`);
+	act(() => {
+		button.dispatchEvent(
+			new dom.window.MouseEvent("click", { bubbles: true, cancelable: true }),
+		);
+	});
+};
+
+before(async () => {
+	const { JSDOM: JSDOMCtor } = await import("jsdom");
+	dom = new JSDOMCtor(
+		"<!doctype html><html><body><div id=root></div></body></html>",
+		{ url: "http://localhost/", pretendToBeVisual: true },
+	);
+	globalThis.window = dom.window as unknown as typeof globalThis.window;
+	globalThis.document = dom.window.document;
+	globalThis.HTMLElement = dom.window.HTMLElement;
+	globalThis.Element = dom.window.Element;
+	globalThis.SVGElement = dom.window.SVGElement;
+	(
+		globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+	).IS_REACT_ACT_ENVIRONMENT = true;
+});
+
+after(() => {
+	dom.window.close();
+});
+
+beforeEach(() => {
+	container = dom.window.document.getElementById(
+		"root",
+	) as unknown as HTMLElement;
+	container.innerHTML = "";
+	root = createRoot(container);
+});
+
+afterEach(() => {
+	act(() => {
+		root.unmount();
+	});
+});
+
+describe("TouchListBody", () => {
+	it("drops the rows a consumer's verb removed", () => {
+		render(sectionsOf("a", "b", "c"));
+		assert.match(container.textContent ?? "", /Sender a/);
+
+		render(sectionsOf("c"));
+		assert.doesNotMatch(container.textContent ?? "", /Sender a/);
+		assert.doesNotMatch(container.textContent ?? "", /Sender b/);
+		assert.match(container.textContent ?? "", /Sender c/);
+	});
+
+	it("shows the rows a consumer added after mount", () => {
+		render(sectionsOf("a"));
+		render(sectionsOf("a", "b"));
+		assert.match(container.textContent ?? "", /Sender b/);
+	});
+});
+
+describe("TouchListBody swipe-to-toggle-read", () => {
+	it("leaves the row at the state the swipe landed on", () => {
+		render(sectionsOf("a", "b"), "leading");
+		assert.equal(unreadRows(), 2, "both rows start unread");
+		click("Mark as read");
+		assert.equal(unreadRows(), 1, "the swiped row is read");
+	});
+
+	it("does not invert a row the consumer has since marked read", () => {
+		render(sectionsOf("a", "b"), "leading");
+		click("Mark as read");
+		render(readOf("a", "b"));
+		assert.equal(unreadRows(), 0, "a row the consumer marked read stays read");
+	});
+});

package/src/components/touch-list.tsx

@@ -33,11 +33,20 @@ export function TouchListBody({
 	 */
 	busy?: boolean;
 }) {
-	// Local copy so the mock can act on a swipe: delete removes the row,
-	// toggle-read flips its state. The live client owns real mutation.
-	const [items, setItems] = useState(() =>
-		sections.flatMap((section) => section.threads),
+	// What a swipe has left a row at — the state it landed on, not a flip of
+	// whatever the prop says — so the list still follows the `sections` its
+	// consumer passes. The live client owns real mutation.
+	const [swipedAway, setSwipedAway] = useState<ReadonlySet<string>>(new Set());
+	const [swipedRead, setSwipedRead] = useState<ReadonlyMap<string, boolean>>(
+		new Map(),
 	);
+	const items = sections
+		.flatMap((section) => section.threads)
+		.filter((thread) => !swipedAway.has(thread.id))
+		.map((thread) => {
+			const read = swipedRead.get(thread.id);
+			return read === undefined ? thread : { ...thread, isRead: read };
+		});
 	const [peek, setPeek] = useState<{ id: string; side: SwipePeek } | null>(
 		initialPeek && initialPeek !== "none" && items[1]
 			? { id: items[1].id, side: initialPeek }
@@ -45,11 +54,10 @@ export function TouchListBody({
 	);
 	const act = (id: string, side: "leading" | "trailing") => {
 		if (side === "trailing") {
-			setItems((prev) => prev.filter((t) => t.id !== id));
+			setSwipedAway((prev) => new Set(prev).add(id));
 		} else {
-			setItems((prev) =>
-				prev.map((t) => (t.id === id ? { ...t, isRead: !t.isRead } : t)),
-			);
+			const shown = items.find((thread) => thread.id === id);
+			setSwipedRead((prev) => new Map(prev).set(id, !shown?.isRead));
 		}
 		setPeek(null);
 	};

package/src/index.ts

@@ -29,6 +29,7 @@ export {
 	categoryTone,
 	type Density,
 	INTELLIGENCE_MIN_WIDTH,
+	type MessageListSelection,
 	type NarrowView,
 	type NavAccount,
 	type NavAccountStatus,
@@ -86,8 +87,10 @@ export {
 	SECTION_ROW_CAP,
 } from "./components/brief-section.js";
 export {
+	type BriefFilterId,
 	BriefSections,
 	type BriefSectionsProps,
+	matchesBriefFilters,
 } from "./components/brief-sections.js";
 export {
 	Button,
@@ -699,6 +702,20 @@ export {
 	type UseLongPressResult,
 	useLongPress,
 } from "./lib/use-long-press.js";
+export {
+	computeRange,
+	deriveIsMultiSelectMode,
+	intersectSelectedIds,
+	isModified,
+	modifiersOf,
+	nextFocusId,
+	type RowSelectIntent,
+	resolveRangeAnchor,
+	rowSelectIntent,
+	type SelectionModifiers,
+	type UseSelectionOptions,
+	useSelection,
+} from "./lib/use-selection.js";
 export {
 	type ComboboxProps,
 	type SuggestListState,