@remit/web-client 0.0.93 → 0.0.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.93",
+  "version": "0.0.95",
   "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/BriefPane.selection.test.ts

@@ -47,6 +47,5 @@ describe("BriefPane phone selection surface (#203)", () => {
 		const next = source.indexOf("\nfunction ", start + 1);
 		const body = source.slice(start, next === -1 ? undefined : next);
 		assert.match(body, /onDeleteMessages=\{onDeleteMessages\}/);
-		assert.match(body, /onMarkMessagesRead=\{onMarkMessagesRead\}/);
 	});
 });

package/src/components/mail/BriefPane.tsx

@@ -68,7 +68,6 @@ interface BriefPaneContextValue {
 	/** Keyboard, multi-select and next/previous, shared with the mailbox view. */
 	triage: TriageContext;
 	onDeleteMessages: (messageIds: string[]) => void;
-	onMarkMessagesRead: (messageIds: string[]) => void;
 	nextMessageId: string | undefined;
 	previousMessageId: string | undefined;
 }
@@ -206,10 +205,6 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 		mailboxId: selectedThread?.mailboxId ?? "",
 		messages: briefThreads,
 	});
-	const handleMarkMessagesRead = useCallback(
-		(messageIds: string[]) => toggleReadFor(messageIds, true),
-		[toggleReadFor],
-	);
 
 	const focusedThreadId = triage.focusedMessageId;
 	const focusedThread = useMemo(
@@ -228,20 +223,18 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 			reply: () => actions.requestCompose("reply"),
 			replyAll: () => actions.requestCompose("reply_all"),
 			forward: () => actions.requestCompose("forward"),
+			// The list takes any verb aimed at its selection and opens the wizard
+			// on it, so a shortcut can never reach a bulk action the bar would have
+			// reviewed. What comes back here is a verb aimed at the bare cursor.
 			delete: () => {
-				if (triage.listCommandsRef.current?.requestDelete()) return;
+				if (triage.listCommandsRef.current?.requestVerb("delete")) return;
 				triageActions.deleteThread();
 			},
 			toggleStar: triageActions.toggleStar,
 			toggleRead: () => {
-				const ids =
-					triage.selectedIds.length > 0
-						? triage.selectedIds
-						: triageTarget
-							? [triageTarget.messageId]
-							: [];
-				if (ids.length === 0) return;
-				toggleReadFor(ids, !(triageTarget?.isRead ?? false));
+				if (triage.listCommandsRef.current?.requestVerb("markRead")) return;
+				if (!triageTarget) return;
+				toggleReadFor([triageTarget.messageId], !triageTarget.isRead);
 			},
 			goFlagged: () => navigate({ to: "/mail/flagged" }),
 			goSettings: () => navigate({ to: "/settings" }),
@@ -258,7 +251,6 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 		actions,
 		triage,
 		onDeleteMessages: deleteMessages,
-		onMarkMessagesRead: handleMarkMessagesRead,
 		nextMessageId,
 		previousMessageId,
 	};
@@ -280,7 +272,6 @@ function BriefList() {
 		onSelectSearchResult,
 		triage,
 		onDeleteMessages,
-		onMarkMessagesRead,
 	} = useBriefPane();
 	const { accounts } = useMailContext();
 
@@ -293,7 +284,6 @@ function BriefList() {
 			commandsRef={triage.listCommandsRef}
 			onTriageContextChange={triage.onTriageContextChange}
 			onDeleteMessages={onDeleteMessages}
-			onMarkMessagesRead={onMarkMessagesRead}
 		/>
 	);
 }

package/src/components/mail/DailyBrief.selection.test.ts

@@ -47,11 +47,29 @@ describe("the brief's select-all", () => {
 		);
 	});
 
-	it("sends every verb on the bar into the wizard (#477 1.4)", () => {
+	it("carries every verb the bar can offer (#477 1.4)", () => {
+		// That each of them opens the wizard is `selection-verbs.test.ts`, over
+		// every surface at once. What this pins is that none of them was dropped
+		// from the bar the brief raises.
 		const body = chromeBody();
-		for (const verb of ["delete", "move", "junk", "markRead", "organize"]) {
-			assert.match(body, new RegExp(`startWizard\\("${verb}"\\)`));
+		for (const prop of [
+			"onDelete",
+			"onMove",
+			"onOrganize",
+			"onJunk",
+			"onMarkRead",
+		]) {
+			assert.match(body, new RegExp(`${prop}=`));
 		}
 		assert.doesNotMatch(body, /onSomethingElse/);
 	});
+
+	it("drives the wizard and the keyboard layer from one control", () => {
+		// Two copies of "which verb is the wizard on" is how the brief came to
+		// offer a verb the mailbox list did not, and how its keyboard came to act
+		// behind a wizard the bar had opened.
+		assert.match(source, /const wizard = useSelectionWizard\(\);/);
+		assert.match(source, /onSelectionVerb={wizard.start}/);
+		assert.match(source, /wizardOpen={wizard.isOpen}/);
+	});
 });

package/src/components/mail/DailyBrief.tsx

@@ -46,7 +46,6 @@ import {
 	SelectionTopBar,
 	type ThreadRowData,
 	type ThreadSection,
-	type Verb,
 } from "@remit/ui";
 import { useQueries, useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
@@ -82,7 +81,10 @@ import type { ListHeaderChrome } from "@/lib/list-header-chrome";
 import { useMailContext } from "@/lib/mail-context";
 import { relatedSearchResults, rowToSearchResult } from "@/lib/search-result";
 import { parseSearchTokens } from "@/lib/search-tokens";
-import { useOpenWizard } from "@/lib/wizard-history";
+import {
+	type SelectionWizardControl,
+	useSelectionWizard,
+} from "@/lib/wizard-history";
 import { LabelApplyTrigger } from "./LabelApplyTrigger";
 import { MailListHeader, type MailListHeaderProps } from "./MailListHeader";
 import type { MessageListCommands } from "./MessageList";
@@ -294,7 +296,8 @@ interface BriefSelectionChromeProps {
 	>;
 	/** The rows the list is showing, for resolving the selection's scope. */
 	rows: readonly ThreadRowData[];
-	onMarkMessagesRead?: (messageIds: string[]) => void;
+	/** The wizard every verb on this bar opens, shared with the keyboard layer. */
+	wizard: SelectionWizardControl;
 	children: ReactNode;
 }
 
@@ -307,7 +310,7 @@ interface BriefSelectionChromeProps {
 function BriefSelectionChrome({
 	header,
 	rows,
-	onMarkMessagesRead,
+	wizard,
 	children,
 }: BriefSelectionChromeProps) {
 	const {
@@ -326,18 +329,6 @@ function BriefSelectionChrome({
 	const { junkMailboxId } = useJunkMailbox(scope.accountId);
 	const { labels } = useLabelList(scope.accountId);
 
-	const openWizard = useOpenWizard();
-	// The verb the bar was pressed for. The wizard is open for as long as the URL
-	// holds a step, so a back that pops the last one closes it.
-	const [wizardVerb, setWizardVerb] = useState<Verb>("organize");
-	const startWizard = useCallback(
-		(verb: Verb) => {
-			setWizardVerb(verb);
-			openWizard("match");
-		},
-		[openWizard],
-	);
-
 	const selectedMessageIds = useMemo(
 		() => Array.from(selectedIds),
 		[selectedIds],
@@ -391,13 +382,11 @@ function BriefSelectionChrome({
 			idleSlot={chrome.makeFilterSlot}
 			count={selectedCount}
 			onCancel={exitSelection}
-			onDelete={() => startWizard("delete")}
-			onMove={() => startWizard("move")}
-			onOrganize={() => startWizard("organize")}
-			onJunk={canJunk ? () => startWizard("junk") : undefined}
-			onMarkRead={
-				onMarkMessagesRead ? () => startWizard("markRead") : undefined
-			}
+			onDelete={() => wizard.start("delete")}
+			onMove={() => wizard.start("move")}
+			onOrganize={() => wizard.start("organize")}
+			onJunk={canJunk ? () => wizard.start("junk") : undefined}
+			onMarkRead={() => wizard.start("markRead")}
 			overflowSlot={
 				scope.accountId &&
 				scope.mailboxId &&
@@ -415,20 +404,28 @@ function BriefSelectionChrome({
 		/>
 	);
 
+	// Mounted as the pane's overlay rather than beside the header: the brief hands
+	// its body over to the search results panel while a query is being typed, and
+	// the wizard is not part of the body it hands over. The overlay slot also puts
+	// it inside the list header's chrome, which is where the converted query it
+	// opens on comes from.
 	return (
-		<>
-			<MailListHeader {...header} selectionBar={selectionBar}>
-				{children}
-			</MailListHeader>
-			<SelectionWizardHost
-				verb={wizardVerb}
-				accountId={scope.accountId}
-				mailboxId={scope.mailboxId}
-				selection={wizardSelection}
-				crossAccount={scope.moveDisabledHint !== undefined}
-				onFinished={exitSelection}
-			/>
-		</>
+		<MailListHeader
+			{...header}
+			selectionBar={selectionBar}
+			paneOverlay={
+				<SelectionWizardHost
+					verb={wizard.verb}
+					accountId={scope.accountId}
+					mailboxId={scope.mailboxId}
+					selection={wizardSelection}
+					crossAccount={scope.moveDisabledHint !== undefined}
+					onFinished={exitSelection}
+				/>
+			}
+		>
+			{children}
+		</MailListHeader>
 	);
 }
 
@@ -451,7 +448,6 @@ interface DailyBriefProps {
 	/** Cursor / selection / display order, reported up to the triage layer. */
 	onTriageContextChange?: (context: TriageContextUpdate) => void;
 	onDeleteMessages: (messageIds: string[]) => void;
-	onMarkMessagesRead?: (messageIds: string[]) => void;
 }
 
 export function DailyBrief({
@@ -462,11 +458,11 @@ export function DailyBrief({
 	commandsRef,
 	onTriageContextChange,
 	onDeleteMessages,
-	onMarkMessagesRead,
 }: DailyBriefProps) {
 	const { searchQuery, resultFolderIndex } = useMailContext();
 	const tokenContext = useSearchTokenContext();
 	const isDesktop = useIsDesktop();
+	const wizard = useSelectionWizard();
 
 	const nonMuted = useMemo(
 		() => sortAccountsByCreatedAt(accounts.filter((a) => !a.muted?.value)),
@@ -772,10 +768,13 @@ export function DailyBrief({
 			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,
@@ -788,7 +787,6 @@ export function DailyBrief({
 					onSelectSearchResult,
 				}}
 				rows={filteredRows}
-				onMarkMessagesRead={onMarkMessagesRead}
 			>
 				<div className="flex h-full flex-col">
 					{failedAccounts.map((account) => (

package/src/components/mail/FlaggedList.tsx

@@ -17,6 +17,7 @@ import {
 	flaggedFilterConfig,
 	MessageListPane,
 	type ThreadRowData,
+	type Verb,
 } from "@remit/ui";
 import { type RefObject, useCallback, useMemo, useState } from "react";
 import { formatErrorMessage } from "@/components/ui/ErrorState";
@@ -35,13 +36,19 @@ import { useMailContext } from "@/lib/mail-context";
 import { rowToSearchResult } from "@/lib/search-result";
 import { parseSearchTokens } from "@/lib/search-tokens";
 import { dedupeByThread } from "@/lib/starred-rows";
+import { useSelectionWizard } from "@/lib/wizard-history";
 import { MailViewChrome } from "./MailViewChrome";
 import type { MessageListCommands } from "./MessageList";
 import { MessageRow } from "./MessageRow";
+import {
+	SelectionWizardHost,
+	type WizardSelectionMessage,
+} from "./SelectionWizardHost";
 import {
 	type OpenMessageOptions,
 	ThreadListInteraction,
 	ThreadListSelectionBar,
+	useThreadListSelection,
 } from "./ThreadListInteraction";
 
 const FILTER_PREDICATES: Record<string, (t: ThreadRowData) => boolean> = {
@@ -49,6 +56,49 @@ const FILTER_PREDICATES: Record<string, (t: ThreadRowData) => boolean> = {
 	attachment: (t) => t.hasAttachment === true,
 };
 
+/**
+ * The wizard this view's verbs walk, and the one its search entry lands on.
+ *
+ * The bar's Delete and Mark read open it on the ticked rows, so a bulk action
+ * here is reviewed exactly as it is on the mailbox list. The list header also
+ * offers "make this a filter" wherever a search is active, and the step that
+ * affordance pushes has to be answered on the view that offered it — an
+ * affordance whose press lands on nothing is the dead button clause 1.7 exists
+ * to prevent. Starred spans accounts and mailboxes, so a rule made from the
+ * ticked rows has no single account to belong to; a rule made from the query
+ * belongs to the account the query names, which the host reads for itself.
+ */
+function StarredWizardHost({
+	rows,
+	verb,
+}: {
+	rows: readonly ThreadRowData[];
+	verb: Verb;
+}) {
+	const { selectedIds, exitSelection } = useThreadListSelection();
+	const selection = useMemo<WizardSelectionMessage[]>(
+		() =>
+			rows
+				.filter((row) => selectedIds.has(row.id))
+				.map((row) => ({
+					id: row.id,
+					sender: row.fromName,
+					email: row.fromEmail,
+					subject: row.subject,
+					date: row.timeLabel,
+				})),
+		[rows, selectedIds],
+	);
+	return (
+		<SelectionWizardHost
+			verb={verb}
+			selection={selection}
+			crossAccount
+			onFinished={exitSelection}
+		/>
+	);
+}
+
 interface FlaggedListProps {
 	selectedMessageId?: string;
 	onSelectMessage?: (id: string, options?: OpenMessageOptions) => void;
@@ -57,7 +107,6 @@ interface FlaggedListProps {
 	/** Cursor / selection / display order, reported up to the triage layer. */
 	onTriageContextChange?: (context: TriageContextUpdate) => void;
 	onDeleteMessages: (messageIds: string[]) => void;
-	onMarkMessagesRead?: (messageIds: string[]) => void;
 }
 
 export function FlaggedList({
@@ -66,11 +115,11 @@ export function FlaggedList({
 	commandsRef,
 	onTriageContextChange,
 	onDeleteMessages,
-	onMarkMessagesRead,
 }: FlaggedListProps) {
 	const { searchQuery, resultFolderIndex } = useMailContext();
 	const tokenContext = useSearchTokenContext();
 	const isDesktop = useIsDesktop();
+	const wizard = useSelectionWizard();
 
 	const [selectedCategory, setSelectedCategory] = useState("all");
 	const [activeFilters, setActiveFilters] = useState<ReadonlySet<string>>(
@@ -193,6 +242,8 @@ export function FlaggedList({
 				selectedMessageId={selectedMessageId}
 				onOpen={(id, options) => onSelectMessage?.(id, options)}
 				onDeleteMessages={onDeleteMessages}
+				onSelectionVerb={wizard.start}
+				wizardOpen={wizard.isOpen}
 				commandsRef={commandsRef}
 				onTriageContextChange={onTriageContextChange}
 			>
@@ -210,17 +261,13 @@ export function FlaggedList({
 					onSelectThread={onSelectMessage}
 					onSelectBriefCategory={() => undefined}
 					isDesktop={isDesktop}
-					selectionBar={
-						<ThreadListSelectionBar
-							title="Starred"
-							onMarkAsRead={onMarkMessagesRead}
-						/>
-					}
+					selectionBar={<ThreadListSelectionBar title="Starred" />}
 					listBody={
 						chrome.searchResults ??
 						(listState === "ready" ? listBody : undefined)
 					}
 				/>
+				<StarredWizardHost rows={rows} verb={wizard.verb} />
 			</ThreadListInteraction>
 		</MailViewChrome>
 	);

package/src/components/mail/FlaggedPane.tsx

@@ -64,7 +64,6 @@ interface FlaggedPaneContextValue {
 	/** Keyboard, multi-select and next/previous, shared with the mailbox view. */
 	triage: TriageContext;
 	onDeleteMessages: (messageIds: string[]) => void;
-	onMarkMessagesRead: (messageIds: string[]) => void;
 	nextMessageId: string | undefined;
 	previousMessageId: string | undefined;
 }
@@ -145,10 +144,6 @@ function FlaggedPaneProvider({
 		mailboxId: selectedThread?.mailboxId ?? "",
 		messages: threads,
 	});
-	const handleMarkMessagesRead = useCallback(
-		(messageIds: string[]) => toggleReadFor(messageIds, true),
-		[toggleReadFor],
-	);
 
 	const focusedThreadId = triage.focusedMessageId;
 	const focusedThread = useMemo(
@@ -167,20 +162,18 @@ function FlaggedPaneProvider({
 			reply: () => actions.requestCompose("reply"),
 			replyAll: () => actions.requestCompose("reply_all"),
 			forward: () => actions.requestCompose("forward"),
+			// The list takes any verb aimed at its selection and opens the wizard
+			// on it, so a shortcut can never reach a bulk action the bar would have
+			// reviewed. What comes back here is a verb aimed at the bare cursor.
 			delete: () => {
-				if (triage.listCommandsRef.current?.requestDelete()) return;
+				if (triage.listCommandsRef.current?.requestVerb("delete")) return;
 				triageActions.deleteThread();
 			},
 			toggleStar: triageActions.toggleStar,
 			toggleRead: () => {
-				const ids =
-					triage.selectedIds.length > 0
-						? triage.selectedIds
-						: triageTarget
-							? [triageTarget.messageId]
-							: [];
-				if (ids.length === 0) return;
-				toggleReadFor(ids, !(triageTarget?.isRead ?? false));
+				if (triage.listCommandsRef.current?.requestVerb("markRead")) return;
+				if (!triageTarget) return;
+				toggleReadFor([triageTarget.messageId], !triageTarget.isRead);
 			},
 			goBrief: () => navigate({ to: "/mail" }),
 			goSettings: () => navigate({ to: "/settings" }),
@@ -195,7 +188,6 @@ function FlaggedPaneProvider({
 		actions,
 		triage,
 		onDeleteMessages: deleteMessages,
-		onMarkMessagesRead: handleMarkMessagesRead,
 		nextMessageId,
 		previousMessageId,
 	};
@@ -211,13 +203,8 @@ function FlaggedPaneProvider({
 
 /** Flat starred list. Mount in the `list` slot of `AppShellSlotted`. */
 function FlaggedListSlot() {
-	const {
-		selectedMessageId,
-		onSelectMessage,
-		triage,
-		onDeleteMessages,
-		onMarkMessagesRead,
-	} = useFlaggedPane();
+	const { selectedMessageId, onSelectMessage, triage, onDeleteMessages } =
+		useFlaggedPane();
 	return (
 		<FlaggedList
 			selectedMessageId={selectedMessageId}
@@ -225,7 +212,6 @@ function FlaggedListSlot() {
 			commandsRef={triage.listCommandsRef}
 			onTriageContextChange={triage.onTriageContextChange}
 			onDeleteMessages={onDeleteMessages}
-			onMarkMessagesRead={onMarkMessagesRead}
 		/>
 	);
 }

package/src/components/mail/MailListHeader.tsx

@@ -86,7 +86,7 @@ import {
 	searchTokenLabel,
 } from "@/lib/search-tokens";
 import { spamOfferForResults } from "@/lib/spam-offer";
-import { SearchFilterDialog } from "./organize/SearchFilterDialog";
+import { useOpenWizard } from "@/lib/wizard-history";
 
 export interface MailListHeaderProps {
 	title: string;
@@ -102,8 +102,11 @@ export interface MailListHeaderProps {
 	 */
 	selectionBar?: (chrome: ListHeaderChrome) => ReactNode;
 	/**
-	 * An overlay covering the pane, above the list (the guided organize flow).
-	 * The pane is the positioned ancestor it measures against.
+	 * An overlay covering the pane, above the list (the selection wizard). Kept
+	 * out of the body and rendered on both the ordinary layout and the phone
+	 * search takeover, so a surface that covers the screen is not taken down by
+	 * whatever the body swapped to underneath it. Inside the chrome provider, so
+	 * an overlay a view mounts from above still reads the search state.
 	 */
 	paneOverlay?: ReactNode;
 	/** Pinned below the scrollable list (e.g. the keyboard hint bar). */
@@ -169,7 +172,7 @@ export function MailListHeader({
 	const tier = useLayoutTier();
 	const [searchOpen, setSearchOpen] = useState(false);
 	const [recentSearches, setRecentSearches] = useState(loadRecentSearches);
-	const [filterOpen, setFilterOpen] = useState(false);
+	const openWizard = useOpenWizard();
 
 	// Leaving the view ends the search: the shell drops the query, and the chrome
 	// it opened — the phone takeover, the expanded tablet field — closes with it
@@ -320,14 +323,15 @@ export function MailListHeader({
 			}
 		: routeScope;
 
-	// Make-this-a-filter (RFC 038 D5): convert the current search to a pre-filled
-	// rule and open the shared chip editor. The filter is created for the account
-	// an `account:` facet names, else the primary account. The literal filter
-	// cannot reproduce the search's semantic reach, so the conversion states it
-	// whenever the search surfaced a "Related" section — a direct signal, read
-	// here from the semantic results, never a capability probe. Disabled with a
-	// reason when the search has no clause to filter on (only non-clause facets,
-	// or a bare folder scope).
+	// Make-this-a-filter (#477 clause 1.8): the search is the wizard's second
+	// entry. It opens on the properties step with the clauses `convertSearchToRule`
+	// derives from the query, nothing ticked, and the notice for what the query
+	// could not be turned into. The conversion is computed once, here, and handed
+	// to the wizard through the chrome — the reason the affordance gives and the
+	// clauses the wizard seeds from are the same answer. The literal filter cannot
+	// reproduce the search's semantic reach, so the conversion states it whenever
+	// the search surfaced a "Related" section — a direct signal, read here from
+	// the semantic results, never a capability probe.
 	//
 	// It belongs to the search, not to any one way of showing it. The affordance
 	// therefore sits in the pane, above whichever body is up — the read-only
@@ -338,35 +342,32 @@ export function MailListHeader({
 	// the URL, taking the affordance down with it a few hundred milliseconds after
 	// it appeared, and leaving the brief (which keeps the panel for any query) as
 	// the only place it survived.
-	const accountToken = parsed.tokens.find((token) => token.type === "account");
-	const targetAccountId = accountToken?.accountId ?? accounts[0]?.accountId;
 	const searchHadSemanticReach = related.length > 0;
-	const makeFilter =
-		hasQuery && targetAccountId
-			? {
-					onClick: () => setFilterOpen(true),
-					disabledReason: isConvertible(
-						convertSearchToRule(parsed, { searchHadSemanticReach }),
-					)
-						? undefined
-						: "Add a sender or words to filter on",
-				}
-			: undefined;
+	const conversion = useMemo(
+		() => convertSearchToRule(parsed, { searchHadSemanticReach }),
+		[parsed, searchHadSemanticReach],
+	);
+	const searchConversion = hasQuery ? conversion : undefined;
+	const makeFilter = hasQuery
+		? {
+				// The wizard is a full-screen surface, so the phone takeover it was
+				// pressed from stands down rather than sitting under it — and the list
+				// underneath, which hosts the wizard, is mounted again by the time the
+				// step lands.
+				onClick: () => {
+					setSearchOpen(false);
+					openWizard("properties", "search");
+				},
+				blockedReason: isConvertible(conversion)
+					? undefined
+					: "Add a sender or words to filter on",
+			}
+		: undefined;
 	// Handed to the bar rather than rendered here: the bar knows whether rows
 	// are ticked, and a selection's own verbs own the surface while they are up.
 	const makeFilterAction = makeFilter ? (
 		<MakeFilterAction {...makeFilter} />
 	) : null;
-	const filterDialog =
-		filterOpen && targetAccountId ? (
-			<SearchFilterDialog
-				open={filterOpen}
-				accountId={targetAccountId}
-				parsed={parsed}
-				searchHadSemanticReach={searchHadSemanticReach}
-				onClose={() => setFilterOpen(false)}
-			/>
-		) : null;
 
 	// Tablet + desktop keep the inline toolbar search; while a query is being
 	// typed the list-pane body swaps to the same sectioned results the phone
@@ -421,6 +422,7 @@ export function MailListHeader({
 			title,
 			searchResults: chromeResults,
 			makeFilterSlot: makeFilterAction,
+			searchConversion,
 			navSlot: layout && !layout.showNavPane && (
 				<Button
 					variant="ghost"
@@ -484,6 +486,7 @@ export function MailListHeader({
 			searchSuggest,
 			chromeResults,
 			makeFilterAction,
+			searchConversion,
 		],
 	);
 
@@ -494,7 +497,7 @@ export function MailListHeader({
 			onSelectSearchResult?.(result);
 		};
 		return (
-			<>
+			<ListHeaderChromeContext.Provider value={chrome}>
 				<MobileSearchView
 					value={searchInput}
 					onChange={onSearchChange}
@@ -515,8 +518,8 @@ export function MailListHeader({
 					suggest={searchSuggest}
 					suggestList={suggestList}
 				/>
-				{filterDialog}
-			</>
+				{paneOverlay}
+			</ListHeaderChromeContext.Provider>
 		);
 	}
 
@@ -527,7 +530,6 @@ export function MailListHeader({
 				{suggestList}
 				<div className="min-h-0 flex-1">{body}</div>
 				{footer}
-				{filterDialog}
 				{paneOverlay}
 			</section>
 		</ListHeaderChromeContext.Provider>