@remit/web-client 0.0.1

package/src/components/mail/MailListHeader.tsx

@@ -0,0 +1,187 @@
+/**
+ * MailListHeader — the header-only list-pane shell shared by every list view.
+ *
+ * Composes the kit `MailHeader` (hamburger + title + unread + search) and the
+ * `<section>` column shell with an optional pinned footer. It owns no filter
+ * surface: the daily brief lets the kit `BriefSections` own the filter row,
+ * while `MailViewChrome` slots a `FilterSheet` into the body for the inbox /
+ * flagged views.
+ *
+ * Search comes from `MailContext` (one source of truth, mirrored to the URL).
+ * On phone the magnifier opens a full-screen `MobileSearchView` takeover instead
+ * of expanding over the title; tablet and desktop keep the inline header search
+ * and, once a query is present, swap the list-pane body to the same kit
+ * `SearchResults` sections under the shared `FilterSheet`. Consumers feed the
+ * filter chrome and query-narrowed results; both tiers render identical rows.
+ *
+ * Results split into two sections: "Top matches" (literal/instant search) and
+ * "Related" (semantic). The consumer dedupes them — a thread in both appears
+ * only under "Top matches". Each loads independently; an empty section drops out
+ * kit-side, so a "Related"-only result still shows when the literal search finds
+ * nothing. The hamburger opens the nav drawer via the enclosing `AppShellSlotted`.
+ */
+import {
+	FilterSheet,
+	type FilterSheetProps,
+	MailHeader,
+	MobileSearchView,
+	type SearchResult,
+	type SearchResultSection,
+	SearchResults,
+	useAppShellLayout,
+} from "@remit/ui";
+import { type ReactNode, useState } from "react";
+import { useLayoutTier } from "@/hooks/useLayoutTier";
+import { useMailContext } from "@/lib/mail-context";
+import { loadRecentSearches, saveRecentSearch } from "@/lib/recent-searches";
+import {
+	parseSearchTokens,
+	removeSearchToken,
+	searchTokenLabel,
+} from "@/lib/search-tokens";
+
+interface MailListHeaderProps {
+	title: string;
+	unreadCount: number;
+	/** The list body (filter sheet / sections / virtualized rows). */
+	children: ReactNode;
+	/** Pinned below the scrollable list (e.g. the keyboard hint bar). */
+	footer?: ReactNode;
+	/** Filter chrome for the phone search takeover. Omit to drop the filter row. */
+	searchFilter?: Omit<FilterSheetProps, "children">;
+	/** Literal/instant results — the "Top matches" section. */
+	searchResults?: SearchResult[];
+	searchLoading?: boolean;
+	/** Semantic results — the "Related" section, deduped against "Top matches". */
+	relatedResults?: SearchResult[];
+	relatedLoading?: boolean;
+	onSelectSearchResult?: (result: SearchResult) => void;
+}
+
+export function MailListHeader({
+	title,
+	unreadCount,
+	children,
+	footer,
+	searchFilter,
+	searchResults,
+	searchLoading,
+	relatedResults,
+	relatedLoading,
+	onSelectSearchResult,
+}: MailListHeaderProps) {
+	const {
+		searchInput,
+		onSearchChange,
+		onSearchClear,
+		mailboxNameIndex,
+		accountNameIndex,
+	} = useMailContext();
+	const layout = useAppShellLayout();
+	const tier = useLayoutTier();
+	const [searchOpen, setSearchOpen] = useState(false);
+	const [recentSearches, setRecentSearches] = useState(loadRecentSearches);
+
+	const hasQuery = searchInput.trim().length > 0;
+	// Filter tokens (`from:`, `has:attachment`, `in:`, `account:`, …) parsed live
+	// from the typed query render as removable chips above the sections;
+	// removing one edits the query text directly, which re-parses on the next
+	// render. `in:`/`account:` resolve against the shared name indexes so a
+	// chip only appears for a name that actually matches a mailbox/account.
+	const tokenChips = parseSearchTokens(searchInput, {
+		mailboxesByName: mailboxNameIndex,
+		accountsByName: accountNameIndex,
+	}).tokens.map((token) => ({
+		label: searchTokenLabel(token),
+		onRemove: () => onSearchChange(removeSearchToken(searchInput, token)),
+	}));
+	const topMatches = searchResults ?? [];
+	const related = relatedResults ?? [];
+	// Always offer both sections while a query is present; the kit drops the empty
+	// ones, so a "Related"-only hit still shows and two empties fall to its empty
+	// state. The empty-query case (recent searches) is the kit's job.
+	const sections: SearchResultSection[] = hasQuery
+		? [
+				{ id: "top", label: "Top matches", results: topMatches },
+				{ id: "related", label: "Related", results: related },
+			]
+		: [];
+	// Skeleton only while nothing is in yet — once either section has rows, show
+	// them and let the other arrive (or not). Keeps the two sources independent.
+	const hasAnyResult = topMatches.length + related.length > 0;
+	const resultsLoading =
+		!hasAnyResult && (searchLoading === true || relatedLoading === true);
+
+	if (tier === "phone" && searchOpen) {
+		const handleSelectResult = (result: SearchResult) => {
+			setRecentSearches(saveRecentSearch(searchInput));
+			setSearchOpen(false);
+			onSelectSearchResult?.(result);
+		};
+		return (
+			<MobileSearchView
+				value={searchInput}
+				onChange={onSearchChange}
+				onClear={onSearchClear}
+				onCancel={() => {
+					setSearchOpen(false);
+					onSearchClear();
+				}}
+				filter={searchFilter}
+				recentSearches={recentSearches}
+				onPickRecent={onSearchChange}
+				sections={sections}
+				loading={resultsLoading}
+				onSelectResult={handleSelectResult}
+				tokens={tokenChips}
+			/>
+		);
+	}
+
+	// Tablet + desktop keep the inline toolbar search; once a query is present the
+	// list-pane body swaps to the same sectioned results the phone takeover shows,
+	// under the same FilterSheet. Clearing the query restores the normal list.
+	const showInlineResults = tier !== "phone" && hasQuery;
+	const handleSelectInlineResult = (result: SearchResult) => {
+		setRecentSearches(saveRecentSearch(searchInput));
+		onSelectSearchResult?.(result);
+	};
+	const results = (
+		<SearchResults
+			value={searchInput}
+			sections={sections}
+			loading={resultsLoading}
+			onSelectResult={handleSelectInlineResult}
+			tokens={tokenChips}
+		/>
+	);
+	const body = !showInlineResults ? (
+		children
+	) : searchFilter ? (
+		<FilterSheet {...searchFilter}>{results}</FilterSheet>
+	) : (
+		<div className="h-full overflow-y-auto">{results}</div>
+	);
+
+	return (
+		<section className="flex h-full w-full flex-col bg-surface">
+			<MailHeader
+				title={title}
+				unreadCount={unreadCount}
+				// The list pane is narrow even on desktop, and the reading-pane
+				// toolbar owns the wide search; keep the header's search compact (a
+				// magnifier) at every width. On phone the magnifier opens the
+				// full-screen takeover above; on tablet it expands over the title.
+				isDesktop={false}
+				onMenuClick={() => layout?.openNav()}
+				searchValue={searchInput}
+				onSearchChange={onSearchChange}
+				onSearchClear={onSearchClear}
+				searchOpen={searchOpen}
+				onSearchOpenChange={setSearchOpen}
+			/>
+			<div className="min-h-0 flex-1">{body}</div>
+			{footer}
+		</section>
+	);
+}

package/src/components/mail/MailNav.tsx

@@ -0,0 +1,70 @@
+/**
+ * MailNav — the nav slot for AppShellSlotted.
+ *
+ * Renders a single "Mailboxes" navigation landmark. The kit shows this
+ * node either as a persistent pane (≥1024px) or inside its own slide-over
+ * Dialog (narrow) — never both — so there is exactly one nav landmark at
+ * any width. Below 1024px the slide-over also carries a Settings +
+ * bug-report footer (#685), since the mobile layout has no message toolbar
+ * to host them.
+ */
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+import { useAppShellLayout } from "@remit/ui";
+import { Link } from "@tanstack/react-router";
+import { LogOut, Settings } from "lucide-react";
+import { AccountSession } from "@/auth/AccountSession";
+import { MailSidebarAdapter } from "@/components/mail/MailSidebarAdapter";
+import { BugReportButton } from "@/components/ui/BugReportButton";
+
+interface MailNavProps {
+	accounts: RemitImapAccountResponse[];
+	onMailboxSelect?: () => void;
+}
+
+export function MailNav({ accounts, onMailboxSelect }: MailNavProps) {
+	const layout = useAppShellLayout();
+	const isPane = layout?.showNavPane ?? true;
+
+	if (isPane) {
+		return <MailSidebarAdapter accounts={accounts} />;
+	}
+
+	return (
+		<div className="flex h-full flex-col">
+			<div className="flex-1 overflow-y-auto">
+				<MailSidebarAdapter
+					accounts={accounts}
+					onMailboxSelect={onMailboxSelect}
+					variant="drawer"
+				/>
+			</div>
+			<div className="border-t border-line px-2 py-2">
+				<Link
+					to="/settings/accounts"
+					onClick={onMailboxSelect}
+					className="flex w-full items-center gap-2 rounded-md px-2 py-1 text-sm text-fg-muted transition-colors hover:bg-surface hover:text-fg"
+				>
+					<Settings className="size-4 shrink-0" />
+					<span className="flex-1 truncate text-left">Settings</span>
+				</Link>
+				<BugReportButton variant="drawer" />
+				<AccountSession>
+					{({ signOut }) => (
+						<button
+							type="button"
+							onClick={() => {
+								onMailboxSelect?.();
+								signOut();
+							}}
+							className="flex min-h-11 w-full items-center gap-2 rounded-md px-2 py-1 text-sm text-fg-muted transition-colors hover:bg-surface hover:text-fg"
+							data-testid="sign-out-button"
+						>
+							<LogOut className="size-4 shrink-0" />
+							<span className="flex-1 truncate text-left">Sign out</span>
+						</button>
+					)}
+				</AccountSession>
+			</div>
+		</div>
+	);
+}

package/src/components/mail/MailSidebarAdapter.tsx

@@ -0,0 +1,351 @@
+import {
+	mailboxOperationsListMailboxesOptions,
+	outboxOperationsListOutboxMessagesOptions,
+	threadOperationsListThreadsQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type {
+	RemitImapAccountResponse,
+	RemitImapMailboxResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import type {
+	NavAccount,
+	NavLinkComponent,
+	NavMailboxRole,
+} from "@remit/ui";
+import { NavSidebar } from "@remit/ui";
+import { useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+	Link,
+	useLocation,
+	useNavigate,
+	useParams,
+} from "@tanstack/react-router";
+import { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+	buildMailboxRoleMap,
+	labelForMailbox,
+	shouldShowUnreadBadgeForRole,
+} from "@/lib/folder-roles";
+import { useMailContext } from "@/lib/mail-context";
+import { isOutboxListRow } from "@/lib/outbox-status";
+import {
+	loadSavedSearches,
+	removeSavedSearch,
+	saveSearch,
+} from "@/lib/saved-searches";
+
+interface MailSidebarAdapterProps {
+	accounts: RemitImapAccountResponse[];
+	/**
+	 * Fires after the user selects a mailbox entry. The mobile drawer wires this
+	 * to close itself on selection (#199). Desktop callers omit it.
+	 */
+	onMailboxSelect?: () => void;
+	/**
+	 * "desktop" (default) wraps the nav in a full-height aside — Pane 1 of the
+	 * 4-pane shell. "drawer" renders the nav body only so the mobile Drawer
+	 * panel can pin a settings footer below it (#685).
+	 */
+	variant?: "desktop" | "drawer";
+}
+
+type Translator = (key: string, fallback: string) => string;
+
+const startsWithDigit = (str: string): boolean => /^\d/.test(str);
+
+const compareLabelNames = (a: string, b: string): number => {
+	const aStartsWithDigit = startsWithDigit(a);
+	const bStartsWithDigit = startsWithDigit(b);
+	if (aStartsWithDigit && !bStartsWithDigit) return -1;
+	if (!aStartsWithDigit && bStartsWithDigit) return 1;
+	return a.localeCompare(b, undefined, { sensitivity: "base", numeric: true });
+};
+
+/**
+ * Split a mailbox list into pinned system rows and alpha-sorted plain
+ * folders. RFC 032 exclusive-folder-appointment (#976): "system" now means
+ * "appointed to a role in this account's folderAppointments map" — nothing is
+ * deduped here, because two folders can never share a role by construction.
+ * The kit re-pins/orders system rows by role itself; the adapter only needs
+ * to alpha-order the folders.
+ */
+function sortMailboxes(
+	mailboxes: RemitImapMailboxResponse[],
+	roleMap: Map<string, NavMailboxRole>,
+	t: Translator,
+): {
+	system: RemitImapMailboxResponse[];
+	labels: RemitImapMailboxResponse[];
+} {
+	const system: RemitImapMailboxResponse[] = [];
+	const labels: RemitImapMailboxResponse[] = [];
+
+	for (const mailbox of mailboxes) {
+		if (roleMap.has(mailbox.mailboxId)) {
+			system.push(mailbox);
+		} else {
+			labels.push(mailbox);
+		}
+	}
+
+	labels.sort((a, b) =>
+		compareLabelNames(
+			labelForMailbox(a, undefined, t),
+			labelForMailbox(b, undefined, t),
+		),
+	);
+
+	return { system, labels };
+}
+
+/**
+ * Convert an API mailbox to a NavMailbox for the kit: `role` comes from the
+ * account's folder-role map (RFC 032 exclusive-folder-appointment, #976), the
+ * label follows `displayNameOverride` then the role's canonical name then the
+ * provider leaf, and the badge follows the role.
+ */
+function toNavMailbox(
+	mb: RemitImapMailboxResponse,
+	role: NavMailboxRole | undefined,
+	t: Translator,
+) {
+	const showBadge = shouldShowUnreadBadgeForRole(role) && mb.unseenCount > 0;
+	return {
+		id: mb.mailboxId,
+		name: labelForMailbox(mb, role, t),
+		unseen: showBadge ? mb.unseenCount : undefined,
+		role,
+		fullPath: mb.fullPath,
+	};
+}
+
+/**
+ * Resolves the currently selected nav ID from the active route so the kit
+ * component can highlight the right item.
+ *   - /mail/outbox → "outbox"
+ *   - /mail/flagged → "flagged"
+ *   - /mail/$mailboxId → mailboxId
+ *   - /mail (daily brief) → "brief"
+ */
+function useSelectedNavId(): string {
+	const location = useLocation();
+	const params = useParams({ strict: false }) as { mailboxId?: string };
+
+	if (location.pathname.startsWith("/mail/outbox")) return "outbox";
+	if (location.pathname.startsWith("/mail/flagged")) return "flagged";
+	if (params.mailboxId) return params.mailboxId;
+	if (location.pathname === "/mail" || location.pathname === "/mail/")
+		return "brief";
+	return "";
+}
+
+/**
+ * Pane 1 of the 4-pane shell. Data bridge that fetches mailboxes per account,
+ * maps them onto the kit's NavAccount shape, and renders each entry as a real
+ * router anchor via the kit's `linkComponent` render-prop. Replaces the retired
+ * local MailSidebar (#898).
+ */
+export function MailSidebarAdapter({
+	accounts,
+	onMailboxSelect,
+	variant = "desktop",
+}: MailSidebarAdapterProps) {
+	const queryClient = useQueryClient();
+	const navigate = useNavigate();
+	const selectedNavId = useSelectedNavId();
+	const { searchInput, onSearchChange } = useMailContext();
+	const [savedSearches, setSavedSearches] = useState(loadSavedSearches);
+	const { t } = useTranslation("mail", { useSuspense: false });
+	const translator: Translator = useCallback(
+		(key, fallback) => t(key, { defaultValue: fallback }),
+		[t],
+	);
+
+	const mailboxQueries = useQueries({
+		queries: accounts.map((account) => ({
+			...mailboxOperationsListMailboxesOptions({
+				path: { accountId: account.accountId },
+			}),
+			// Mailboxes change rarely; cache forever, rely on explicit invalidation.
+			staleTime: Infinity,
+		})),
+	});
+
+	const { data: outboxResponse } = useQuery(
+		outboxOperationsListOutboxMessagesOptions(),
+	);
+
+	const outboxPendingCount = useMemo(
+		() =>
+			(outboxResponse?.items ?? []).filter((item) =>
+				isOutboxListRow(item.status),
+			).length,
+		[outboxResponse?.items],
+	);
+
+	const navAccounts: NavAccount[] = useMemo(() => {
+		return accounts.map((account, i) => {
+			const query = mailboxQueries[i];
+			const mailboxes = query?.data?.items ?? [];
+			const roleMap = buildMailboxRoleMap(account.folderAppointments);
+			const { system, labels } = sortMailboxes(mailboxes, roleMap, translator);
+
+			const status: NavAccount["status"] = query?.isError
+				? "error"
+				: query?.isLoading
+					? "loading"
+					: "ready";
+
+			return {
+				id: account.accountId,
+				label: account.email,
+				email: account.email,
+				muted: Boolean(account.muted),
+				// Outbox is a shared singleton shown inside each account's section,
+				// matching existing sidebar behaviour.
+				outboxPending: outboxPendingCount,
+				status,
+				onRetry: () => query?.refetch(),
+				mailboxes: [...system, ...labels].map((mb) =>
+					toNavMailbox(mb, roleMap.get(mb.mailboxId), translator),
+				),
+			};
+		});
+	}, [accounts, mailboxQueries, outboxPendingCount, translator]);
+
+	// Invalidate a mailbox's thread list on navigation so a re-visit always
+	// fetches fresh data (mirrors the retired MailboxItem behaviour).
+	const invalidateMailboxThreads = (mailboxId: string) => {
+		queryClient.invalidateQueries({
+			queryKey: threadOperationsListThreadsQueryKey({
+				path: { mailboxId },
+				query: { order: "desc" },
+			}),
+		});
+	};
+
+	const linkComponent: NavLinkComponent = ({
+		navId,
+		className,
+		ariaLabel,
+		title,
+		children,
+		onClick,
+	}) => {
+		if (navId === "brief") {
+			return (
+				<Link
+					to="/mail"
+					search={{ q: undefined, selectedMessageId: undefined }}
+					onClick={() => onClick?.()}
+					className={className}
+					aria-label={ariaLabel}
+					title={title}
+				>
+					{children}
+				</Link>
+			);
+		}
+		if (navId === "outbox") {
+			return (
+				<Link
+					to="/mail/outbox"
+					search={{ q: undefined, selectedOutboxMessageId: undefined }}
+					onClick={() => onClick?.()}
+					className={className}
+					aria-label={ariaLabel}
+					title={title}
+				>
+					{children}
+				</Link>
+			);
+		}
+		if (navId === "flagged") {
+			return (
+				<Link
+					to="/mail/flagged"
+					search={{ q: undefined, selectedMessageId: undefined }}
+					onClick={() => onClick?.()}
+					className={className}
+					aria-label={ariaLabel}
+					title={title}
+				>
+					{children}
+				</Link>
+			);
+		}
+		return (
+			<Link
+				to="/mail/$mailboxId"
+				params={{ mailboxId: navId }}
+				// Drop any stale search query / selected message when switching mailbox.
+				search={{ q: undefined, selectedMessageId: undefined }}
+				onClick={() => {
+					invalidateMailboxThreads(navId);
+					onClick?.();
+				}}
+				className={className}
+				aria-label={ariaLabel}
+				title={title}
+			>
+				{children}
+			</Link>
+		);
+	};
+
+	const handleSelectNav = () => {
+		// Navigation is handled by the router <Link>; this only runs the
+		// post-selection side effect (drawer auto-close on mobile).
+		onMailboxSelect?.();
+	};
+
+	// Saved searches (#428 follow-up, local-only MVP — see
+	// doc/design/flows/06-search.md). A saved query is the raw typed text; the
+	// existing token parser re-derives its chips on reselect, so there's nothing
+	// else to persist.
+	const trimmedSearchInput = searchInput.trim();
+	const saveableQuery =
+		trimmedSearchInput.length > 0 && !savedSearches.includes(trimmedSearchInput)
+			? trimmedSearchInput
+			: undefined;
+
+	const handleSaveCurrentSearch = useCallback(() => {
+		if (!saveableQuery) return;
+		setSavedSearches(saveSearch(saveableQuery));
+	}, [saveableQuery]);
+
+	const handleRemoveSavedSearch = useCallback((query: string) => {
+		setSavedSearches(removeSavedSearch(query));
+	}, []);
+
+	// Running a saved search re-uses the daily brief as the search surface (the
+	// cross-account default view) — the same destination the search field
+	// itself lands results in once a query is active.
+	const handleSelectSavedSearch = useCallback(
+		(query: string) => {
+			onSearchChange(query);
+			navigate({
+				to: "/mail",
+				search: { q: query, selectedMessageId: undefined },
+			});
+			onMailboxSelect?.();
+		},
+		[onSearchChange, navigate, onMailboxSelect],
+	);
+
+	return (
+		<NavSidebar
+			accounts={navAccounts}
+			selectedNavId={selectedNavId}
+			onSelectNav={handleSelectNav}
+			linkComponent={linkComponent}
+			variant={variant}
+			savedSearches={savedSearches}
+			saveableQuery={saveableQuery}
+			onSaveCurrentSearch={handleSaveCurrentSearch}
+			onSelectSavedSearch={handleSelectSavedSearch}
+			onRemoveSavedSearch={handleRemoveSavedSearch}
+		/>
+	);
+}

package/src/components/mail/MailViewChrome.tsx

@@ -0,0 +1,95 @@
+/**
+ * MailViewChrome — the shared list-pane chrome for the inbox and flagged views.
+ *
+ * Wraps the header-only `MailListHeader` and slots the `FilterSheet` expando
+ * directly into its body, exactly as the kit story does. The caller supplies the
+ * filter preset (`inboxFilterConfig` / `flaggedFilterConfig`) and owns the
+ * category / attribute / source selection state. The same filter config feeds
+ * the phone search takeover (via `MailListHeader`), so filters carry across.
+ *
+ * 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).
+ */
+import {
+	type FilterPreset,
+	FilterSheet,
+	type FilterSheetProps,
+	type SearchResult,
+} from "@remit/ui";
+import { type ReactNode, useState } from "react";
+import { MailListHeader } from "./MailListHeader";
+
+interface MailViewChromeProps {
+	title: string;
+	unreadCount: number;
+	preset: FilterPreset;
+	selectedCategory: string;
+	activeFilters: ReadonlySet<string>;
+	onSelectCategory: (id: string) => void;
+	onToggleFilter: (id: string) => void;
+	onSelectSource?: (id: string) => void;
+	onClearFilters: () => void;
+	/** The list body (sections / virtualized rows) rendered inside the expando. */
+	children: ReactNode;
+	/** Pinned below the scrollable list (e.g. the keyboard hint bar). */
+	footer?: ReactNode;
+	/** Literal/instant results — the "Top matches" section. */
+	searchResults?: SearchResult[];
+	searchLoading?: boolean;
+	/** Semantic results — the "Related" section. */
+	relatedResults?: SearchResult[];
+	relatedLoading?: boolean;
+	onSelectSearchResult?: (result: SearchResult) => void;
+}
+
+export function MailViewChrome({
+	title,
+	unreadCount,
+	preset,
+	selectedCategory,
+	activeFilters,
+	onSelectCategory,
+	onToggleFilter,
+	onSelectSource,
+	onClearFilters,
+	children,
+	footer,
+	searchResults,
+	searchLoading,
+	relatedResults,
+	relatedLoading,
+	onSelectSearchResult,
+}: MailViewChromeProps) {
+	const [expanded, setExpanded] = useState(false);
+
+	const filterConfig: Omit<FilterSheetProps, "children"> = {
+		categories: preset.categories,
+		filters: preset.filters,
+		sources: preset.sources,
+		selectedCategory,
+		activeFilters,
+		expanded,
+		onExpandedChange: setExpanded,
+		onSelectCategory,
+		onSelectSource,
+		onToggleFilter,
+		onClear: onClearFilters,
+	};
+
+	return (
+		<MailListHeader
+			title={title}
+			unreadCount={unreadCount}
+			footer={footer}
+			searchFilter={filterConfig}
+			searchResults={searchResults}
+			searchLoading={searchLoading}
+			relatedResults={relatedResults}
+			relatedLoading={relatedLoading}
+			onSelectSearchResult={onSelectSearchResult}
+		>
+			<FilterSheet {...filterConfig}>{children}</FilterSheet>
+		</MailListHeader>
+	);
+}