@remit/web-client 0.0.90 → 0.0.92

package/src/components/mail/MailListHeader.tsx

@@ -39,11 +39,12 @@
  * `resultsScopeForRoute` and `lib/spam-offer.ts`.
  */
 import {
+	Button,
 	type FilterSheetProps,
 	isConvertible,
-	MailHeader,
 	MakeFilterAction,
 	MobileSearchView,
+	SearchBar,
 	type SearchCaretRequest,
 	type SearchFieldSuggest,
 	type SearchResult,
@@ -56,6 +57,7 @@ import {
 	useSuggestList,
 } from "@remit/ui";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
+import { Menu, Search, X } from "lucide-react";
 import {
 	type ReactNode,
 	useCallback,
@@ -68,6 +70,10 @@ import { isSinglePaneTier, useLayoutTier } from "@/hooks/useLayoutTier";
 import { useSearchScope } from "@/hooks/useSearchScope";
 import { useSearchSuggestions } from "@/hooks/useSearchSuggestions";
 import { useSearchTokenContext } from "@/hooks/useSearchTokenContext";
+import {
+	type ListHeaderChrome,
+	ListHeaderChromeContext,
+} from "@/lib/list-header-chrome";
 import { useMailContext } from "@/lib/mail-context";
 import { convertSearchToRule } from "@/lib/organize/search-to-rule";
 import { loadRecentSearches, saveRecentSearch } from "@/lib/recent-searches";
@@ -88,16 +94,18 @@ export interface MailListHeaderProps {
 	/** The list body (filter sheet / sections / virtualized rows). */
 	children: ReactNode;
 	/**
-	 * Replaces the header for as long as a selection is active — the same slot
-	 * contract the kit `MessageListPane` gives the mailbox list, so every list
-	 * puts its bulk-action bar in the same place.
+	 * The header itself, built from the chrome this component owns. Views whose
+	 * selection state sits above this one (the brief) render their bar here;
+	 * views whose selection sits below it (the mailbox list, starred) leave this
+	 * unset and render the bar in their own pane header slot, reading the same
+	 * chrome from `useListHeaderChrome`.
 	 */
-	selectionBar?: ReactNode;
+	selectionBar?: (chrome: ListHeaderChrome) => ReactNode;
 	/**
-	 * Overlay anchored to the bottom of the pane (the mobile selection sheet).
-	 * The pane is the positioned ancestor the sheet measures against.
+	 * An overlay covering the pane, above the list (the guided organize flow).
+	 * The pane is the positioned ancestor it measures against.
 	 */
-	selectionSheet?: ReactNode;
+	paneOverlay?: 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. */
@@ -134,7 +142,7 @@ export function MailListHeader({
 	unreadCount,
 	children,
 	selectionBar,
-	selectionSheet,
+	paneOverlay,
 	footer,
 	searchFilter,
 	searchResults,
@@ -212,13 +220,20 @@ export function MailListHeader({
 			if (suggestion) applySuggestion(suggestion);
 		},
 	});
-	const searchSuggest: SearchFieldSuggest = {
-		comboboxProps: suggest.comboboxProps,
-		onKeyDown: suggest.handleKeyDown,
-		onCaretChange: setCaretPosition,
-		onFocusChange: setFieldFocused,
-		...(caretRequest ? { caret: caretRequest } : {}),
-	};
+	// Stable while nothing about the field changes: it reaches the list through
+	// the header chrome, and a fresh object every render would re-render the
+	// virtualized body for nothing.
+	const { comboboxProps, handleKeyDown } = suggest;
+	const searchSuggest = useMemo<SearchFieldSuggest>(
+		() => ({
+			comboboxProps,
+			onKeyDown: handleKeyDown,
+			onCaretChange: setCaretPosition,
+			onFocusChange: setFieldFocused,
+			...(caretRequest ? { caret: caretRequest } : {}),
+		}),
+		[comboboxProps, handleKeyDown, caretRequest],
+	);
 	// Under the field and in flow, on both tiers: a phone's soft keyboard owns
 	// the lower half of the screen, and a list floating over the field would
 	// cover the query it is completing.
@@ -337,10 +352,11 @@ export function MailListHeader({
 						: "Add a sender or words to filter on",
 				}
 			: undefined;
-	// A selection replaces the header with its bulk-action bar and owns the pane;
-	// the search affordance stands down until the selection clears.
-	const makeFilterAction =
-		makeFilter && !selectionBar ? <MakeFilterAction {...makeFilter} /> : null;
+	// 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
@@ -352,6 +368,125 @@ export function MailListHeader({
 			/>
 		) : 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
+	// takeover shows, under the same FilterSheet. A view whose own body renders
+	// the committed search as a selectable list (`searchResultsInBody`, the
+	// mailbox route) keeps the panel only until the query commits to the URL,
+	// then hands back to its `MessageList` so the multi-select toolbar and the
+	// escalation are reachable (#212). Clearing the query restores the normal list.
+	const showInlineResults = showInlineSearchResults({
+		tier,
+		hasLiveInput: hasQuery,
+		hasCommittedQuery: searchQuery.trim().length > 0,
+		bodyRendersCommittedResults: searchResultsInBody,
+	});
+	const handleSelectInlineResult = (result: SearchResult) => {
+		setRecentSearches(saveRecentSearch(searchInput));
+		onSelectSearchResult?.(result);
+	};
+	const results = (
+		<SearchResults
+			value={searchInput}
+			sections={sections}
+			loading={resultsLoading}
+			onSelectResult={handleSelectInlineResult}
+			tokens={tokenChips}
+			scope={resultsScope}
+		/>
+	);
+	// The header lives inside `children` for every view whose selection sits
+	// below this one, so swapping the body out from here would take the header
+	// with it — the pane would lose its title, its search field mid-keystroke,
+	// and its selection bar. Those views get the panel through the chrome and
+	// put it where their own rows go; the brief, whose header this component
+	// renders, keeps the plain swap.
+	const bodyOwnsHeader = selectionBar === undefined;
+	const resultsPane = showInlineResults ? (
+		<div className="h-full overflow-y-auto">{results}</div>
+	) : null;
+	const body = resultsPane && !bodyOwnsHeader ? resultsPane : children;
+	const chromeResults = resultsPane && bodyOwnsHeader ? resultsPane : null;
+
+	// Desktop mounts the app top bar, which owns search for the whole shell — the
+	// list header shows no field there, so the page never has two search inputs
+	// competing for "/" and for focus. Below desktop the header keeps a compact
+	// magnifier: on phone it opens the full-screen takeover above, on tablet it
+	// expands over the title. `isSinglePaneTier` is the same predicate the shell
+	// gates the top bar on, so the two cannot drift into zero or two fields.
+	const ownsSearch = isSinglePaneTier(tier);
+	const searchExpanded = ownsSearch && (searchOpen || hasQuery);
+	const chrome = useMemo<ListHeaderChrome>(
+		() => ({
+			title,
+			searchResults: chromeResults,
+			makeFilterSlot: makeFilterAction,
+			navSlot: layout && !layout.showNavPane && (
+				<Button
+					variant="ghost"
+					size="touch"
+					icon={<Menu className="size-5" />}
+					onClick={() => layout.openNav()}
+					aria-label="Menu"
+					className="-ml-2 shrink-0"
+				/>
+			),
+			titleMeta: (
+				<span className="shrink-0 text-2xs text-fg-subtle">
+					{unreadCount.toLocaleString()} unread
+				</span>
+			),
+			searchSlot: ownsSearch && !searchExpanded && (
+				<Button
+					variant="ghost"
+					size="touch"
+					icon={<Search className="size-5" />}
+					onClick={() => setSearchOpen(true)}
+					aria-label="Search"
+					className="shrink-0"
+				/>
+			),
+			searchField: searchExpanded && (
+				<>
+					<div className="min-w-0 flex-1">
+						<SearchBar
+							value={searchInput}
+							onChange={onSearchChange}
+							onClear={onSearchClear}
+							globalFocusKey={false}
+							showClearButton={false}
+							suggest={searchSuggest}
+						/>
+					</div>
+					<Button
+						variant="ghost"
+						size="touch"
+						icon={<X className="size-5" />}
+						onClick={() => {
+							onSearchClear();
+							setSearchOpen(false);
+						}}
+						aria-label="Close search"
+						className="shrink-0"
+					/>
+				</>
+			),
+		}),
+		[
+			title,
+			unreadCount,
+			layout,
+			ownsSearch,
+			searchExpanded,
+			searchInput,
+			onSearchChange,
+			onSearchClear,
+			searchSuggest,
+			chromeResults,
+			makeFilterAction,
+		],
+	);
+
 	if (tier === "phone" && searchOpen) {
 		const handleSelectResult = (result: SearchResult) => {
 			setRecentSearches(saveRecentSearch(searchInput));
@@ -385,71 +520,16 @@ export function MailListHeader({
 		);
 	}
 
-	// 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
-	// takeover shows, under the same FilterSheet. A view whose own body renders
-	// the committed search as a selectable list (`searchResultsInBody`, the
-	// mailbox route) keeps the panel only until the query commits to the URL,
-	// then hands back to its `MessageList` so the multi-select toolbar and the
-	// escalation are reachable (#212). Clearing the query restores the normal list.
-	const showInlineResults = showInlineSearchResults({
-		tier,
-		hasLiveInput: hasQuery,
-		hasCommittedQuery: searchQuery.trim().length > 0,
-		bodyRendersCommittedResults: searchResultsInBody,
-	});
-	const handleSelectInlineResult = (result: SearchResult) => {
-		setRecentSearches(saveRecentSearch(searchInput));
-		onSelectSearchResult?.(result);
-	};
-	const results = (
-		<SearchResults
-			value={searchInput}
-			sections={sections}
-			loading={resultsLoading}
-			onSelectResult={handleSelectInlineResult}
-			tokens={tokenChips}
-			scope={resultsScope}
-		/>
-	);
-	// The filter chrome is not rendered while a query is active — see `makeFilter`
-	// above — so the results panel gets the plain scroll container either way.
-	const body = showInlineResults ? (
-		<div className="h-full overflow-y-auto">{results}</div>
-	) : (
-		children
-	);
-
 	return (
-		<section className="relative flex h-full w-full flex-col bg-surface">
-			{selectionBar ?? (
-				<MailHeader
-					title={title}
-					unreadCount={unreadCount}
-					// Desktop mounts the app top bar, which owns search for the whole
-					// shell — the list header shows no field there, so the page never
-					// has two search inputs competing for "/" and for focus. Below
-					// desktop the header keeps a compact magnifier: on phone it opens
-					// the full-screen takeover above, on tablet it expands over the
-					// title. `isSinglePaneTier` is the same predicate the shell gates
-					// the top bar on, so the two cannot drift into zero or two fields.
-					isDesktop={false}
-					showSearch={isSinglePaneTier(tier)}
-					onMenuClick={() => layout?.openNav()}
-					searchValue={searchInput}
-					onSearchChange={onSearchChange}
-					onSearchClear={onSearchClear}
-					searchOpen={searchOpen}
-					onSearchOpenChange={setSearchOpen}
-					searchSuggest={searchSuggest}
-				/>
-			)}
-			{suggestList}
-			{makeFilterAction}
-			<div className="min-h-0 flex-1">{body}</div>
-			{footer}
-			{filterDialog}
-			{selectionSheet}
-		</section>
+		<ListHeaderChromeContext.Provider value={chrome}>
+			<section className="relative flex h-full w-full flex-col bg-surface">
+				{selectionBar?.(chrome)}
+				{suggestList}
+				<div className="min-h-0 flex-1">{body}</div>
+				{footer}
+				{filterDialog}
+				{paneOverlay}
+			</section>
+		</ListHeaderChromeContext.Provider>
 	);
 }

package/src/components/mail/MailViewChrome.tsx

@@ -1,7 +1,7 @@
 /**
  * MailViewChrome — the shared list-pane chrome for the inbox and flagged views.
  *
- * Wraps the header-only `MailListHeader` and slots the `FilterSheet` expando
+ * Wraps `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
@@ -117,11 +117,12 @@ export function MailViewChrome({
 			relatedResultsLabel={relatedResultsLabel}
 			searchResultsInBody={searchResultsInBody}
 		>
-			{searching ? (
-				<div className="h-full overflow-y-auto">{children}</div>
-			) : (
-				<FilterSheet {...filterConfig}>{children}</FilterSheet>
-			)}
+			{/* 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>
 	);
 }

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

@@ -45,10 +45,17 @@ describe("MessageList selection mode", () => {
 	it("turns the back gesture into an exit, and only while selecting", () => {
 		assert.match(
 			source,
-			/shouldExitSelectionOnNavigate\(action, hasSelection\)/,
+			/shouldExitSelectionOnNavigate\(action, hasSelection, wizardStep\)/,
 		);
 		assert.match(source, /disabled: !hasSelection/);
 	});
+
+	it("leaves the back gesture to the wizard while the wizard is open", () => {
+		assert.match(
+			source,
+			/disabled: !hasSelection \|\| wizardStep !== undefined/,
+		);
+	});
 });
 
 /**
@@ -70,8 +77,8 @@ describe("MessageList escalated actions", () => {
 	});
 
 	it("keeps mark-read and the move slot on an escalated selection", () => {
-		// The mobile sheet always carries the mark-read verb (it hides it itself
-		// while counting or busy); an escalated selection must never lose it.
+		// The bar always carries the mark-read verb (it drops it itself while
+		// counting or busy); an escalated selection must never lose it.
 		assert.match(source, /onMarkRead=\{handleMarkAsRead\}/);
 		// The move slot is offered for a bounded selection or an escalated one —
 		// #114's rule that an escalated selection is never delete-only.
@@ -95,9 +102,8 @@ describe("MessageList escalated actions", () => {
 
 /**
  * Advanced selection is no longer mobile-only (#212): the escalation engine is
- * opened to desktop, and the desktop `SelectionToolbar` renders the same
- * offer → counting → escalated → progress → notice states the mobile sheet
- * carries, from one shared set of derivations so the two surfaces never drift.
+ * opened to every width, and the one selection bar renders the
+ * offer → counting → escalated → progress → notice states.
  */
 describe("MessageList escalation reaches desktop (#212)", () => {
 	it("no longer gates the escalation engine on the mobile viewport", () => {
@@ -111,39 +117,38 @@ describe("MessageList escalation reaches desktop (#212)", () => {
 		);
 	});
 
-	it("feeds the desktop toolbar the shared escalation state", () => {
-		const toolbar = source.match(/<SelectionToolbar[\s\S]*?\/>/)?.[0] ?? "";
-		assert.match(toolbar, /statusLabel=\{selectionStatusLabel\}/);
-		assert.match(toolbar, /notice=\{escalationNotice\}/);
-		assert.match(toolbar, /progress=\{selectionProgress\}/);
-		// Desktop wires select-all only while searching — the mobile sheet carries
-		// it for any bounded selection.
-		assert.match(
-			toolbar,
-			/selectAll=\{escalationEnabled \? selectionSelectAll : undefined\}/,
-		);
-		assert.match(
-			toolbar,
-			/isCounting=\{escalation\.phase\.kind === "counting"\}/,
-		);
+	it("feeds the bar the shared escalation state", () => {
+		// Up to the bar's own closing tag, at its own indent — a nested slot
+		// element closes first and would cut the match short.
+		const bar = source.match(/<SelectionTopBar[\s\S]*?\n\t\t\/>/)?.[0] ?? "";
+		assert.match(bar, /statusLabel=\{selectionStatusLabel\}/);
+		assert.match(bar, /notice=\{selectionNotice\}/);
+		assert.match(bar, /progress=\{selectionProgress\}/);
+		assert.match(bar, /selectAll=\{selectionSelectAll\}/);
+		assert.match(bar, /isCounting=\{escalation\.phase\.kind === "counting"\}/);
+	});
+
+	it("raises one selection surface, at every width (#480)", () => {
+		const bars = source.match(/<SelectionTopBar\b/g) ?? [];
+		assert.equal(bars.length, 1, "one bar, so no two surfaces can drift");
+		assert.doesNotMatch(source, /<SelectionSheet\b/);
+	});
+
+	it("mounts that surface unconditionally — it is the list header", () => {
+		// Gated on a selection, the bar's zero-ticked state (the mailbox name,
+		// and select-all inline from 768px up) reaches nothing.
+		assert.match(source, /const activeSelectionBar = \(\s*<SelectionTopBar/);
+		assert.match(source, /title=\{listHeaderChrome\.title \|\| listTitle\}/);
+		assert.match(source, /navSlot=\{listHeaderChrome\.navSlot\}/);
+	});
+
+	it("keeps the free-text organize entry reachable, in the overflow", () => {
+		assert.match(source, /onSomethingElse=\{/);
+		assert.match(source, /setMobileOrganizeEntry\("something-else"\)/);
 	});
 
-	it("drives both surfaces from the same derivations", () => {
-		// The sheet and the toolbar read the same status label, select-all control
-		// and progress — a second copy for desktop is exactly the drift this
-		// guards against.
-		for (const shared of [
-			"selectionStatusLabel",
-			"selectionSelectAll",
-			"selectionProgress",
-			"selectionCount",
-		]) {
-			const uses = source.match(new RegExp(`\\b${shared}\\b`, "g")) ?? [];
-			assert.ok(
-				uses.length >= 3,
-				`${shared} should be defined once and read by both surfaces`,
-			);
-		}
+	it("offers the label picker only when the account has labels", () => {
+		assert.match(source, /labels\.length > 0 \? \(/);
 	});
 });