@remit/web-client 0.0.108 → 0.0.110

package/package.json

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

@@ -1,6 +1,5 @@
 import { Avatar } from "@remit/ui";
-import { useNavigate } from "@tanstack/react-router";
-import { LogOut, Settings } from "lucide-react";
+import { LogOut } from "lucide-react";
 import {
 	DropdownMenu,
 	DropdownMenuItem,
@@ -14,7 +13,6 @@ interface AccountMenuViewProps {
 }
 
 const AccountMenuView = ({ email, onSignOut }: AccountMenuViewProps) => {
-	const navigate = useNavigate();
 	const displayName = email ?? "Account";
 
 	return (
@@ -36,11 +34,6 @@ const AccountMenuView = ({ email, onSignOut }: AccountMenuViewProps) => {
 					<DropdownMenuSeparator />
 				</>
 			)}
-			<DropdownMenuItem onClick={() => navigate({ to: "/settings/accounts" })}>
-				<Settings className="size-4" />
-				Settings
-			</DropdownMenuItem>
-			<DropdownMenuSeparator />
 			<DropdownMenuItem onClick={onSignOut}>
 				<LogOut className="size-4" />
 				Sign out

package/src/components/layout/MailTopBar.tsx

@@ -1,15 +1,16 @@
 /**
  * MailTopBar — the app's one search surface and its global actions.
  *
- * Mounted by the `/mail` shell over the list, the reading pane and the
- * intelligence rail, starting on the list's left edge. It is the app's search,
- * not the list's: the list header drops its own field wherever this bar is
- * mounted, so exactly one search input exists on the page and the "/" shortcut
- * has one target.
+ * Mounted by the `/mail` shell across the top of the whole layout — the nav
+ * column, the list, the reading pane and the intelligence rail. It is the app's
+ * search, not the list's: the list header drops its own field wherever this bar
+ * is mounted, so exactly one search input exists on the page and the "/"
+ * shortcut has one target.
  *
  * The actions here are the ones that belong to the app rather than to whatever
- * is currently listed or open — compose, bug report, account. Reply, delete,
- * move and the rest stay on the reading pane's own toolbar, under this bar.
+ * is currently listed or open — the nav toggle, compose, bug report, settings,
+ * account. Reply, delete, move and the rest stay on the reading pane's own
+ * toolbar, under this bar.
  *
  * The field carries one chip: the scope of the view the user navigated into
  * (`in:spam` in Spam, nothing on the brief). Removing it goes to the brief and
@@ -19,8 +20,9 @@
  * sections instead, where the text is not repeated.
  */
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { AppTopBar, Button, SearchBar } from "@remit/ui";
-import { SquarePen } from "lucide-react";
+import { AppTopBar, Button, NavToggleButton, SearchBar } from "@remit/ui";
+import { useNavigate } from "@tanstack/react-router";
+import { Settings, SquarePen } from "lucide-react";
 import { AccountMenu } from "@/auth/AccountMenu";
 import { BugReportButton } from "@/components/ui/BugReportButton";
 import { useGlobalCompose } from "@/hooks/useComposeTarget";
@@ -42,6 +44,7 @@ interface MailTopBarProps {
 export function MailTopBar({ accounts }: MailTopBarProps) {
 	const { searchInput, onSearchChange, onSearchClear, onSearchClearQuery } =
 		useMailContext();
+	const navigate = useNavigate();
 	const compose = useGlobalCompose(accounts);
 	const { scope, clearScope } = useSearchScope(accounts);
 	const chips =
@@ -55,6 +58,7 @@ export function MailTopBar({ accounts }: MailTopBarProps) {
 
 	return (
 		<AppTopBar
+			leading={<NavToggleButton />}
 			search={
 				<SearchBar
 					value={searchInput}
@@ -64,7 +68,6 @@ export function MailTopBar({ accounts }: MailTopBarProps) {
 					chips={chips}
 					onRemoveChip={clearScope}
 					placeholder={placeholder}
-					size="lg"
 				/>
 			}
 			actions={
@@ -78,6 +81,14 @@ export function MailTopBar({ accounts }: MailTopBarProps) {
 						onClick={compose}
 					/>
 					<BugReportButton />
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<Settings className="size-4" />}
+						title="Settings"
+						aria-label="Settings"
+						onClick={() => navigate({ to: "/settings/accounts" })}
+					/>
 					<AccountMenu />
 				</>
 			}

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

@@ -41,6 +41,7 @@
 import {
 	Button,
 	type FilterSheetProps,
+	FilterToggle,
 	isConvertible,
 	MakeFilterAction,
 	MobileSearchView,
@@ -435,9 +436,12 @@ export function MailListHeader({
 				/>
 			),
 			titleMeta: (
-				<span className="shrink-0 text-2xs text-fg-subtle">
-					{unreadCount.toLocaleString()} unread
-				</span>
+				<>
+					<span className="shrink-0 text-2xs text-fg-subtle">
+						{unreadCount.toLocaleString()} unread
+					</span>
+					{!hasQuery && <FilterToggle />}
+				</>
 			),
 			searchSlot: ownsSearch && !searchExpanded && (
 				<Button
@@ -488,6 +492,7 @@ export function MailListHeader({
 			chromeResults,
 			makeFilterAction,
 			searchConversion,
+			hasQuery,
 		],
 	);
 

package/src/components/mail/MailViewChrome.tsx

@@ -13,17 +13,18 @@
  * 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,
 	type FilterPreset,
 	FilterSheet,
 	type FilterSheetProps,
 	type SearchResult,
 } from "@remit/ui";
-import { type ReactNode, useState } from "react";
+import type { ReactNode } from "react";
 import { useMailContext } from "@/lib/mail-context";
 import { MailListHeader } from "./MailListHeader";
 
@@ -81,7 +82,6 @@ export function MailViewChrome({
 	relatedResultsLabel,
 	searchResultsInBody,
 }: MailViewChromeProps) {
-	const [expanded, setExpanded] = useState(false);
 	// A query owns the pane: the filter chrome and the search's own affordance
 	// narrow the same list from the same place, so the filter sheet stands down
 	// for as long as something is being searched. Its state survives — clearing
@@ -95,8 +95,6 @@ export function MailViewChrome({
 		sources: preset.sources,
 		selectedCategory,
 		activeFilters,
-		expanded,
-		onExpandedChange: setExpanded,
 		onSelectCategory,
 		onSelectSource,
 		onToggleFilter,
@@ -104,26 +102,28 @@ export function MailViewChrome({
 	};
 
 	return (
-		<MailListHeader
-			title={title}
-			unreadCount={unreadCount}
-			footer={footer}
-			searchFilter={filterConfig}
-			searchResults={searchResults}
-			searchLoading={searchLoading}
-			relatedResults={relatedResults}
-			relatedLoading={relatedLoading}
-			onSelectSearchResult={onSelectSearchResult}
-			searchResultsLabel={searchResultsLabel}
-			relatedResultsLabel={relatedResultsLabel}
-			searchResultsInBody={searchResultsInBody}
-		>
-			{/* One shell either way: the children's parent must not change when a
-			    query starts, or everything under it — including the header's own
-			    search field — remounts mid-keystroke. */}
-			<FilterSheet {...filterConfig} hideChrome={searching}>
-				{children}
-			</FilterSheet>
-		</MailListHeader>
+		<FilterPanelProvider>
+			<MailListHeader
+				title={title}
+				unreadCount={unreadCount}
+				footer={footer}
+				searchFilter={filterConfig}
+				searchResults={searchResults}
+				searchLoading={searchLoading}
+				relatedResults={relatedResults}
+				relatedLoading={relatedLoading}
+				onSelectSearchResult={onSelectSearchResult}
+				searchResultsLabel={searchResultsLabel}
+				relatedResultsLabel={relatedResultsLabel}
+				searchResultsInBody={searchResultsInBody}
+			>
+				{/* One shell either way: the children's parent must not change when a
+				    query starts, or everything under it — including the header's own
+				    search field — remounts mid-keystroke. */}
+				<FilterSheet {...filterConfig} hideChrome={searching}>
+					{children}
+				</FilterSheet>
+			</MailListHeader>
+		</FilterPanelProvider>
 	);
 }