@remit/web-client 0.0.90 → 0.0.92

package/src/components/mail/MessageList.tsx

@@ -5,8 +5,7 @@ import {
 	type MessageListFilter,
 	MessageListLoadingMore,
 	MessageListPane,
-	SELECTION_SHEET_TEASER_HEIGHT,
-	SelectionSheet,
+	SelectionTopBar,
 } from "@remit/ui";
 import { useBlocker, useNavigate } from "@tanstack/react-router";
 import { useVirtualizer } from "@tanstack/react-virtual";
@@ -22,6 +21,7 @@ import {
 	useEscalatedActions,
 } from "@/hooks/useEscalatedActions";
 import { useFollowFocusOpen } from "@/hooks/useFollowFocusOpen";
+import { useLabelList } from "@/hooks/useLabels";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import {
@@ -46,19 +46,17 @@ import {
 } from "@/lib/escalation-label";
 import { formatDeleteToTrashTitle, formatNumber } from "@/lib/format";
 import { tabStopId } from "@/lib/list-focus";
+import { useListHeaderChrome } from "@/lib/list-header-chrome";
 import {
 	deriveIsMultiSelectMode,
 	shouldExitSelectionOnNavigate,
 } from "@/lib/selection-mode";
-import {
-	resolveSelectionSheetMode,
-	shouldShowSelectionSheet,
-} from "@/lib/selection-sheet-mode";
 import { cn } from "@/lib/utils";
+import { useWizardStepValue } from "@/lib/wizard-history";
+import { LabelApplyTrigger } from "./LabelApplyTrigger";
 import { MoveToTrigger } from "./MoveToTrigger";
 import { MobileOrganizeFlow } from "./organize/MobileOrganizeFlow";
 import { OrganizeDialog } from "./organize/OrganizeDialog";
-import { SelectionToolbar } from "./SelectionToolbar";
 import { SwipeableMessageRow } from "./SwipeableMessageRow";
 
 /**
@@ -235,6 +233,7 @@ export const MessageList = ({
 	const parentRef = useRef<HTMLDivElement>(null);
 	const navigate = useNavigate();
 	const isDesktop = useIsDesktop();
+	const wizardStep = useWizardStepValue();
 	const [organizeOpen, setOrganizeOpen] = useState(false);
 	// Mobile only: which selection-sheet entry opened the guided organize flow
 	// (`null` when closed). Desktop uses `organizeOpen` + `OrganizeDialog`
@@ -243,6 +242,8 @@ export const MessageList = ({
 		"select-similar" | "something-else" | null
 	>(null);
 	const isSearching = !!searchQuery?.trim();
+	const listHeaderChrome = useListHeaderChrome();
+	const { labels } = useLabelList(accountId);
 
 	// Roving focus cursor (#429): the keyboard "where am I" pointer, distinct
 	// from the open thread (`selectedMessageId` in the URL). j/k move this
@@ -1061,12 +1062,14 @@ export const MessageList = ({
 	// — is never blocked, and the blocker is off entirely with nothing selected.
 	useBlocker({
 		shouldBlockFn: ({ action }) => {
-			if (!shouldExitSelectionOnNavigate(action, hasSelection)) return false;
+			if (!shouldExitSelectionOnNavigate(action, hasSelection, wizardStep)) {
+				return false;
+			}
 			exitSelection();
 			return true;
 		},
 		enableBeforeUnload: false,
-		disabled: !hasSelection,
+		disabled: !hasSelection || wizardStep !== undefined,
 	});
 
 	// Load more when scrolling near the bottom
@@ -1282,37 +1285,15 @@ export const MessageList = ({
 							}
 						: undefined;
 
-	// The mobile sheet has no inline hint slot, so the cross-account move
-	// restriction rides in as the lowest-priority notice.
-	const mobileNotice =
+	// The bar shows one notice at a time, so the cross-account move restriction
+	// rides in behind the escalation states.
+	const selectionNotice =
 		escalationNotice ??
 		(moveDisabledHint
 			? { tone: "warning" as const, text: moveDisabledHint }
 			: undefined);
 
-	// Mobile: which content the peeking sheet routes to, from the escalation
-	// machinery. `running` (a chunked delete/move/mark-read) and `counting` (a
-	// predicate still paging) replace the idle quick actions with status and
-	// progress; `escalated` keeps the verbs over the whole predicate.
-	const mobileMode = resolveSelectionSheetMode({
-		isRunning: escalation.isRunning,
-		isCounting: escalation.phase.kind === "counting",
-		isEscalated: escalation.phase.kind === "escalated",
-	});
-
-	// The sheet is the sole mobile selection surface. It rises at 2+ selected
-	// (the prototype threshold) or in any non-idle escalation state — a single
-	// selected row enters selection mode without raising it, matching today.
-	const showMobileSheet =
-		!isDesktop &&
-		isMultiSelectMode &&
-		shouldShowSelectionSheet(
-			selectionCount,
-			mobileMode,
-			mobileNotice !== undefined,
-		);
-
-	const mobileMoveSlot =
+	const selectionMoveSlot =
 		(onMoveMessages || escalation.phase.kind === "escalated") &&
 		accountId &&
 		mailboxId ? (
@@ -1325,9 +1306,8 @@ export const MessageList = ({
 			/>
 		) : undefined;
 
-	// The guided organize flow (issue #211) overlays the same positioned pane
-	// ancestor as the sheet, so it is rendered from the sheet slot. The sheet
-	// stays mounted underneath as the flow's dimmed backdrop.
+	// The guided organize flow (issue #211) covers the pane, which is its
+	// positioned ancestor.
 	const mobileOrganizeFlow =
 		mobileOrganizeEntry && accountId && !isDesktop && selectedCount > 0 ? (
 			<MobileOrganizeFlow
@@ -1343,72 +1323,66 @@ export const MessageList = ({
 			/>
 		) : undefined;
 
-	const mobileSelectionSheet = showMobileSheet ? (
-		<SelectionSheet
+	// Organize acts on the materialized selection within one account, so it is
+	// withdrawn the moment the selection escalates to a predicate or a run
+	// takes over — both of which name themselves through `statusLabel`.
+	const canOrganize =
+		!!accountId && !!mailboxId && !moveDisabledHint && !selectionStatusLabel;
+
+	// One selection surface at every width, always mounted: it is the list
+	// header. With nothing ticked it names the mailbox and carries the header's
+	// own chrome; from the first ticked row the count and the verbs take that
+	// title's place, and the escalation states (issue #212) — the offer,
+	// counting, the escalated predicate, a chunked run's progress — ride on the
+	// same bar rather than a second one.
+	const activeSelectionBar = (
+		<SelectionTopBar
+			title={listHeaderChrome.title || listTitle}
+			navSlot={listHeaderChrome.navSlot}
+			titleMeta={listHeaderChrome.titleMeta}
+			searchSlot={listHeaderChrome.searchSlot}
+			searchField={listHeaderChrome.searchField}
+			idleSlot={listHeaderChrome.makeFilterSlot}
 			count={selectionCount}
-			mode={mobileMode}
 			onCancel={handleSelectionCancel}
 			onDelete={handleSelectionDelete}
+			onOrganize={
+				canOrganize
+					? () =>
+							isDesktop
+								? setOrganizeOpen(true)
+								: setMobileOrganizeEntry("select-similar")
+					: undefined
+			}
 			onJunk={
 				junkMailboxId && junkMailboxId !== mailboxId && !moveDisabledHint
 					? handleJunk
 					: undefined
 			}
 			onMarkRead={handleMarkAsRead}
-			onSelectSimilar={
-				accountId ? () => setMobileOrganizeEntry("select-similar") : undefined
-			}
 			onSomethingElse={
-				accountId ? () => setMobileOrganizeEntry("something-else") : undefined
+				canOrganize && !isDesktop
+					? () => setMobileOrganizeEntry("something-else")
+					: undefined
+			}
+			moveSlot={selectionMoveSlot}
+			overflowSlot={
+				accountId && mailboxId && selectedCount > 0 && labels.length > 0 ? (
+					<LabelApplyTrigger
+						accountId={accountId}
+						mailboxId={mailboxId}
+						messageIds={Array.from(selectedIds)}
+					/>
+				) : undefined
 			}
-			moveSlot={mobileMoveSlot}
 			isBusy={selectionIsBusy}
+			isCounting={escalation.phase.kind === "counting"}
 			selectAll={selectionSelectAll}
 			statusLabel={selectionStatusLabel}
 			progress={selectionProgress}
-			notice={mobileNotice}
+			notice={selectionNotice}
 		/>
-	) : undefined;
-
-	// Both mobile overlays share the pane's positioned ancestor via the sheet
-	// slot: the peeking sheet, and the guided organize flow above it.
-	const mobileSelectionSurface =
-		mobileSelectionSheet || mobileOrganizeFlow ? (
-			<>
-				{mobileSelectionSheet}
-				{mobileOrganizeFlow}
-			</>
-		) : undefined;
-
-	// Desktop selection toolbar replaces the pane header when any rows are
-	// selected. It gains the same search-escalation states the mobile sheet
-	// carries (issue #212) — the offer, counting, the escalated predicate and a
-	// chunked run's progress — from the shared derivations above; the
-	// cross-account move hint stays inline (the toolbar has a slot for it).
-	const desktopSelectionBar =
-		hasSelection && isDesktop ? (
-			<SelectionToolbar
-				selectedCount={selectionCount}
-				onDelete={handleSelectionDelete}
-				onClearSelection={handleSelectionCancel}
-				onMarkAsRead={handleMarkAsRead}
-				onMove={onMoveMessages ? handleMoveSelected : undefined}
-				onOrganize={() => setOrganizeOpen(true)}
-				isDeleting={isDeleting}
-				isMoving={isMoving}
-				accountId={accountId}
-				currentMailboxId={mailboxId}
-				selectedMessageIds={Array.from(selectedIds)}
-				moveDisabledHint={moveDisabledHint}
-				selectAll={escalationEnabled ? selectionSelectAll : undefined}
-				statusLabel={selectionStatusLabel}
-				isCounting={escalation.phase.kind === "counting"}
-				progress={selectionProgress}
-				notice={escalationNotice}
-			/>
-		) : undefined;
-
-	const activeSelectionBar = desktopSelectionBar;
+	);
 
 	// Roving tabindex: exactly one row is in the tab order, so Tab moves focus
 	// into the list at the cursor and Shift+Tab moves back out to the side panel
@@ -1440,13 +1414,6 @@ export const MessageList = ({
 				aria-multiselectable
 				aria-label={listTitle}
 				className="flex-1 overflow-y-auto"
-				// Pad the list so its last rows clear the peeking teaser (~56px)
-				// rather than hiding behind it.
-				style={
-					showMobileSheet
-						? { paddingBottom: SELECTION_SHEET_TEASER_HEIGHT }
-						: undefined
-				}
 			>
 				{/* Virtualizer scaffolding — presentational so the listbox sees the
 				    rows as its options rather than these positioning wrappers. */}
@@ -1531,7 +1498,9 @@ export const MessageList = ({
 				listMeta={listMeta}
 				sections={sections}
 				flatList
-				listState={listState}
+				// The results panel is a body, not a list state: it stands in for the
+				// rows and must not fall behind a skeleton while the query re-keys.
+				listState={listHeaderChrome.searchResults ? "ready" : listState}
 				searchQuery={isSearching ? searchQuery : undefined}
 				listFilter={listFilter}
 				listScopeLabel={listScopeLabel}
@@ -1551,8 +1520,11 @@ export const MessageList = ({
 				isDesktop={isDesktop}
 				hideHeader={hideHeader}
 				selectionBar={activeSelectionBar}
-				selectionSheet={mobileSelectionSurface}
-				listBody={listState === "ready" ? virtualBody : undefined}
+				paneOverlay={mobileOrganizeFlow}
+				listBody={
+					listHeaderChrome.searchResults ??
+					(listState === "ready" ? virtualBody : undefined)
+				}
 			/>
 			<ConfirmDialog
 				isOpen={pendingDelete !== null}

package/src/components/mail/MoveToTrigger.tsx

@@ -180,7 +180,7 @@ export const MoveToTrigger = ({
 			title={disabledHint}
 			className={variant === "icon-only" ? ICON_TRIGGER : COMPACT_TRIGGER}
 		>
-			<FolderInput className="size-4" />
+			<FolderInput className={variant === "icon-only" ? "size-5" : "size-4"} />
 			{variant === "compact" && <span className="hidden sm:inline">Move</span>}
 		</button>
 	);

package/src/components/mail/SelectionWizardHost.tsx

@@ -0,0 +1,191 @@
+import {
+	type ClauseDraft,
+	type ClauseEditState,
+	type MatchCount,
+	type MatchMode,
+	type RunState,
+	SelectionWizard,
+	type StepId,
+	stepBlockedReason,
+	stepIndex,
+	stepsFor,
+	type Verb,
+	type WizardDraft,
+	type WizardMessage,
+} from "@remit/ui";
+import { useCallback, useState } from "react";
+import { useWizardStep } from "@/lib/wizard-history";
+
+const OPENING_STEP: StepId = "match";
+const UNCOUNTED: MatchCount = { status: "uncounted" };
+const EMPTY_DRAFT: WizardDraft = { clauses: [], matchOperator: "all" };
+
+/** How the commit ended, once something commits it (#483). */
+export interface WizardOutcome {
+	state: RunState;
+	matched: number;
+	applied: number;
+	failures: readonly WizardMessage[];
+}
+
+/** Nothing has been sent anywhere, so nothing can have been done. */
+const NOTHING_COMMITTED: WizardOutcome = {
+	state: "commitFailed",
+	matched: 0,
+	applied: 0,
+	failures: [],
+};
+
+export interface SelectionWizardHostProps {
+	verb: Verb;
+	selectedCount: number;
+	outcome?: WizardOutcome;
+}
+
+export function SelectionWizardHost({
+	verb,
+	selectedCount,
+	outcome = NOTHING_COMMITTED,
+}: SelectionWizardHostProps) {
+	const { step, goToStep, goBack, closeWizard } = useWizardStep(OPENING_STEP);
+	const [mode, setMode] = useState<MatchMode>("selected");
+	const [draft, setDraft] = useState<WizardDraft>(EMPTY_DRAFT);
+	const [clauseEdit, setClauseEdit] = useState<ClauseEditState | undefined>(
+		undefined,
+	);
+	const [nudgedStep, setNudgedStep] = useState<StepId | undefined>(undefined);
+
+	const startAddClause = useCallback(() => {
+		setClauseEdit({ mode: "add", draft: { field: "From", value: "" } });
+	}, []);
+
+	const startEditClause = useCallback(
+		(clauseId: string) => {
+			const clause = draft.clauses.find((held) => held.id === clauseId);
+			if (!clause) return;
+			setClauseEdit({
+				mode: "edit",
+				clauseId,
+				draft: { field: clause.field, value: clause.value },
+			});
+		},
+		[draft.clauses],
+	);
+
+	const removeClause = useCallback((clauseId: string) => {
+		setDraft((held) => ({
+			...held,
+			clauses: held.clauses.filter((clause) => clause.id !== clauseId),
+		}));
+	}, []);
+
+	const changeClauseDraft = useCallback((next: ClauseDraft) => {
+		setClauseEdit((edit) => edit && { ...edit, draft: next });
+	}, []);
+
+	const submitClause = useCallback(() => {
+		setClauseEdit((edit) => {
+			if (!edit) return undefined;
+			setDraft((held) => ({
+				...held,
+				clauses: edit.clauseId
+					? held.clauses.map((clause) =>
+							clause.id === edit.clauseId
+								? { ...clause, ...edit.draft }
+								: clause,
+						)
+					: [...held.clauses, { id: crypto.randomUUID(), ...edit.draft }],
+			}));
+			return undefined;
+		});
+	}, []);
+
+	if (!step) return null;
+
+	const steps = stepsFor({ verb, mode, scope: draft.scope });
+	// The step the screens are on, which is the held one only while the answers
+	// still hold it. Reading the URL's step here and the resolved one on screen
+	// is how a footer comes to name a screen nobody is looking at.
+	const current = steps[stepIndex(steps, step)];
+	const blockedReason = stepBlockedReason(current, draft, UNCOUNTED);
+	const sample = {
+		messages: [],
+		count: UNCOUNTED,
+		label: "Messages this covers",
+	};
+
+	const advance = () => {
+		if (blockedReason) {
+			setNudgedStep(current);
+			return;
+		}
+		const next = steps[stepIndex(steps, current) + 1];
+		if (next) goToStep(next);
+	};
+
+	return (
+		<SelectionWizard
+			verb={verb}
+			steps={steps}
+			step={current}
+			blockedReason={blockedReason}
+			nudged={nudgedStep === current}
+			onBack={goBack}
+			onExit={() => closeWizard(steps, current)}
+			onContinue={advance}
+			onCommit={() => goToStep("run")}
+			match={{
+				selectedCount,
+				mode,
+				onModeChange: setMode,
+				onSemanticFallback: () => setMode("properties"),
+				sample,
+			}}
+			properties={{
+				clauses: draft.clauses,
+				matchOperator: draft.matchOperator,
+				onMatchOperatorChange: (matchOperator) =>
+					setDraft((held) => ({ ...held, matchOperator })),
+				clauseEdit,
+				onStartAddClause: startAddClause,
+				onStartEditClause: startEditClause,
+				onRemoveClause: removeClause,
+				onChangeDraft: changeClauseDraft,
+				onSubmitClause: submitClause,
+				onCancelClause: () => setClauseEdit(undefined),
+				sample,
+			}}
+			rule={{
+				draft,
+				onScopeChange: (scope) => setDraft((held) => ({ ...held, scope })),
+				onUntilChange: (until) => setDraft((held) => ({ ...held, until })),
+			}}
+			name={{
+				name: draft.name ?? "",
+				onNameChange: (name) => setDraft((held) => ({ ...held, name })),
+				nudged: nudgedStep === current,
+			}}
+			review={{
+				verb,
+				mode,
+				selectedCount,
+				clauses: draft.clauses,
+				matchOperator: draft.matchOperator,
+				scope: draft.scope,
+				until: draft.until,
+				ruleName: draft.name,
+				sample,
+			}}
+			run={{
+				state: outcome.state,
+				verb,
+				scope: draft.scope,
+				matched: outcome.matched,
+				applied: outcome.applied,
+				failures: outcome.failures,
+				onRetry: goBack,
+				onDismiss: () => closeWizard(steps, current),
+			}}
+		/>
+	);
+}

package/src/components/mail/ThreadListInteraction.test.ts

@@ -69,6 +69,7 @@ function mountList(options: {
 	initialIds: string[];
 	onDeleteMessages?: (ids: string[]) => void;
 }) {
+	const onDeleteMessages = options.onDeleteMessages ?? (() => undefined);
 	const commandsRef = createRef<MessageListCommands | null>();
 	let setIds: ((ids: string[]) => void) | undefined;
 	const Harness = () => {
@@ -79,7 +80,7 @@ function mountList(options: {
 			{
 				selectedMessageId: undefined,
 				onOpen: () => undefined,
-				onDeleteMessages: options.onDeleteMessages,
+				onDeleteMessages,
 				commandsRef,
 			},
 			...rowElements(ids),
@@ -222,7 +223,12 @@ function mountSelectableList(initialIds: string[]) {
 		setIds = set;
 		return createElement(
 			ThreadListInteraction,
-			{ selectedMessageId: undefined, onOpen: () => undefined, commandsRef },
+			{
+				selectedMessageId: undefined,
+				onOpen: () => undefined,
+				onDeleteMessages: () => undefined,
+				commandsRef,
+			},
 			...rowElements(ids),
 			createElement(Probe, { key: "probe" }),
 		);

package/src/components/mail/ThreadListInteraction.tsx

@@ -16,6 +16,7 @@
  * are not rendered: focus stops moving, the highlight disappears, and the next
  * verb acts on a message the user cannot see.
  */
+import { SelectionTopBar } from "@remit/ui";
 import {
 	createContext,
 	type ReactNode,
@@ -34,9 +35,10 @@ import { useIsDesktop } from "@/hooks/useMediaQuery";
 import type { TriageContextUpdate } from "@/hooks/useTriageLayer";
 import { formatDeleteToTrashTitle } from "@/lib/format";
 import { tabStopId } from "@/lib/list-focus";
+import { useListHeaderChrome } from "@/lib/list-header-chrome";
+import { useMailContext } from "@/lib/mail-context";
 import type { MessageListCommands } from "./MessageList";
 import type { MessageRowSelection } from "./MessageRow";
-import { SelectionToolbar } from "./SelectionToolbar";
 
 interface ThreadRowInteraction {
 	focused: boolean;
@@ -142,7 +144,7 @@ interface ThreadListInteractionProps {
 	/** Opens a row — the same navigation a click performs. */
 	onOpen: (messageId: string, options?: OpenMessageOptions) => void;
 	/** Deletes a set of messages. Absent disables the delete key for this list. */
-	onDeleteMessages?: (messageIds: string[]) => void;
+	onDeleteMessages: (messageIds: string[]) => void;
 	isDeleting?: boolean;
 	commandsRef?: RefObject<MessageListCommands | null>;
 	onTriageContextChange?: (context: TriageContextUpdate) => void;
@@ -185,6 +187,14 @@ export function ThreadListInteraction({
 		if (orderedIds.length > 0) toggleAll(orderedIds);
 	}, [orderedIds, toggleAll]);
 
+	// The selection wizard is mounted on the route, above this provider, and
+	// acts on these rows — so it reads the count from here rather than keeping
+	// one of its own (#477).
+	const { onSelectedCountChange } = useMailContext();
+	useEffect(() => {
+		onSelectedCountChange(selectedCount);
+	}, [selectedCount, onSelectedCountChange]);
+
 	// A row that leaves the list — a chip filter, a collapsed section, a
 	// completed delete — cannot stay selected. Survivors keep their selection.
 	const { intersectWith } = selection;
@@ -241,14 +251,11 @@ export function ThreadListInteraction({
 	// the same contract the mailbox list's delete has.
 	const [pendingDelete, setPendingDelete] = useState<string[] | null>(null);
 
-	const requestDeleteIds = useCallback(
-		(ids: string[]): boolean => {
-			if (!onDeleteMessages || ids.length === 0) return false;
-			setPendingDelete(ids);
-			return true;
-		},
-		[onDeleteMessages],
-	);
+	const requestDeleteIds = useCallback((ids: string[]): boolean => {
+		if (ids.length === 0) return false;
+		setPendingDelete(ids);
+		return true;
+	}, []);
 
 	const requestDeleteSelection = useCallback(() => {
 		requestDeleteIds(Array.from(selectedIds));
@@ -272,7 +279,7 @@ export function ThreadListInteraction({
 
 	const confirmDelete = useCallback(() => {
 		if (pendingDelete === null) return;
-		onDeleteMessages?.(pendingDelete);
+		onDeleteMessages(pendingDelete);
 		setPendingDelete(null);
 		exitSelection();
 	}, [pendingDelete, onDeleteMessages, exitSelection]);
@@ -416,25 +423,35 @@ export function ThreadListInteraction({
 }
 
 interface ThreadListSelectionBarProps {
+	/** The view's own name, used until the enclosing header supplies one. */
+	title: string;
 	onMarkAsRead?: (messageIds: string[]) => void;
 	isDeleting?: boolean;
 }
 
 /**
- * Reduced selection bar for Flagged, mounted inside `ThreadListInteraction`.
+ * The starred list's header, which is also its selection bar — the same
+ * surface the mailbox list and the brief raise.
  *
- * Move is not offered here: Flagged spans accounts and mailboxes, and a move
- * picker needs one account and one source folder to be honest about where the
- * messages go. Delete and mark-read carry no such scope. The brief resolves
- * that scope from the selection instead and mounts the mailbox list's full
- * `SelectionToolbar` — see `DailyBrief`.
+ * Move is not offered here: starred mail spans accounts and mailboxes, and a
+ * move picker needs one account and one source folder to be honest about where
+ * the messages go. Delete and mark-read carry no such scope.
  */
 export function ThreadListSelectionBar({
+	title,
 	onMarkAsRead,
 	isDeleting,
 }: ThreadListSelectionBarProps) {
-	const { selectedIds, selectedCount, exitSelection, requestDeleteSelection } =
-		useThreadListSelection();
+	const chrome = useListHeaderChrome();
+	const {
+		selectedIds,
+		selectedCount,
+		exitSelection,
+		requestDeleteSelection,
+		orderedIds,
+		allSelected,
+		toggleAllLoaded,
+	} = useThreadListSelection();
 
 	const handleMarkAsRead = useCallback(() => {
 		onMarkAsRead?.(Array.from(selectedIds));
@@ -442,12 +459,27 @@ export function ThreadListSelectionBar({
 	}, [onMarkAsRead, selectedIds, exitSelection]);
 
 	return (
-		<SelectionToolbar
-			selectedCount={selectedCount}
+		<SelectionTopBar
+			title={chrome.title || title}
+			navSlot={chrome.navSlot}
+			titleMeta={chrome.titleMeta}
+			searchSlot={chrome.searchSlot}
+			searchField={chrome.searchField}
+			idleSlot={chrome.makeFilterSlot}
+			count={selectedCount}
+			onCancel={exitSelection}
 			onDelete={requestDeleteSelection}
-			onClearSelection={exitSelection}
-			onMarkAsRead={onMarkAsRead ? handleMarkAsRead : undefined}
-			isDeleting={isDeleting}
+			onMarkRead={onMarkAsRead ? handleMarkAsRead : undefined}
+			isBusy={isDeleting}
+			selectAll={
+				orderedIds.length > 0
+					? {
+							checked: allSelected,
+							indeterminate: selectedCount > 0 && !allSelected,
+							onChange: toggleAllLoaded,
+						}
+					: undefined
+			}
 		/>
 	);
 }

package/src/hooks/useInitialSyncProgress.render.test.ts

@@ -69,6 +69,9 @@ function Probe({
 /** The account id in `/accounts/{id}/sync/status`. */
 const accountOf = (path: string): string => path.split("/")[2] ?? "";
 
+const progress = (dom: DomHarness): InitialSyncProgress =>
+	JSON.parse(dom.text());
+
 const mount = async (
 	accountIds: string[],
 	answer: (accountId: string) => unknown,
@@ -77,14 +80,17 @@ const mount = async (
 	http = mockFetch((call) => answer(accountOf(call.path)));
 	harness = createDomHarness();
 	harness.renderApp(createElement(Probe, { accountIds, enabled }));
-	await harness.flush();
-	await harness.flush();
+	// Settle on the hook's own answer rather than on a fixed number of turns:
+	// a query that lands on a timer instead of a microtask needs real time to
+	// pass, and a loaded machine is where that difference shows up.
+	for (let turn = 0; turn < 20; turn += 1) {
+		await harness.flush();
+		if (progress(harness).resolved) break;
+		await harness.wait(1);
+	}
 	return harness;
 };
 
-const progress = (dom: DomHarness): InitialSyncProgress =>
-	JSON.parse(dom.text());
-
 describe("isSyncingPhase", () => {
 	it("is true only for the phases a running sync round writes", () => {
 		assert.equal(isSyncingPhase("discovering_mailboxes"), true);