@remit/web-client 0.0.86 → 0.0.88

package/src/components/mail/FlaggedPane.tsx

@@ -35,6 +35,7 @@ import { ConversationView } from "@/components/mail/ConversationView";
 import { FlaggedList } from "@/components/mail/FlaggedList";
 import { IntelligencePane } from "@/components/mail/IntelligencePane";
 import { MessageToolbar } from "@/components/mail/MessageToolbar";
+import type { OpenMessageOptions } from "@/components/mail/ThreadListInteraction";
 import { useDeleteMessages } from "@/hooks/useDeleteMessages";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
 import { useStarredThreads } from "@/hooks/useStarredThreads";
@@ -53,7 +54,7 @@ import { useMailContext } from "@/lib/mail-context";
 interface FlaggedPaneContextValue {
 	selectedMessageId: string | undefined;
 	selectedThread: RemitImapThreadMessageResponse | undefined;
-	onSelectMessage: (id: string) => void;
+	onSelectMessage: (id: string, options?: OpenMessageOptions) => void;
 	onCloseThread: () => void;
 	/**
 	 * Toolbar verbs for the open thread, keyed by the thread's own mailbox and
@@ -99,10 +100,11 @@ function FlaggedPaneProvider({
 	}, [threads, selectedMessageId]);
 
 	const handleSelectMessage = useCallback(
-		(id: string) => {
+		(id: string, options?: OpenMessageOptions) => {
 			navigate({
 				to: "/mail/flagged",
 				search: (prev) => ({ ...prev, selectedMessageId: id }),
+				replace: options?.replace,
 			});
 		},
 		[navigate],

package/src/components/mail/MailListHeader.tsx

@@ -11,8 +11,19 @@
  * 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.
+ * `SearchResults` sections. Consumers feed the filter chrome and query-narrowed
+ * results; both tiers render identical rows.
+ *
+ * The field offers what the search API can be told: token names for a bare word,
+ * that token's values once its name is committed. The list sits under the field
+ * on both tiers, in flow, so it takes its own space instead of covering the
+ * query it completes.
+ *
+ * An active query owns the pane. The filter chrome is not rendered while one is
+ * present — the two narrow the same list by the same intent and would sit in the
+ * same place — and its place is taken by `MakeFilterAction`, which the pane mounts
+ * itself so it is there for every search on every view, whichever body is showing
+ * the results.
  *
  * Results split into two sections, one per engine: literal/instant and semantic.
  * The consumer dedupes them — a thread in both appears only under the literal
@@ -28,28 +39,40 @@
  * `resultsScopeForRoute` and `lib/spam-offer.ts`.
  */
 import {
-	FilterSheet,
 	type FilterSheetProps,
+	isConvertible,
 	MailHeader,
+	MakeFilterAction,
 	MobileSearchView,
+	type SearchCaretRequest,
+	type SearchFieldSuggest,
 	type SearchResult,
 	type SearchResultSection,
 	SearchResults,
 	type SearchScope,
+	type Suggestion,
+	SuggestList,
 	useAppShellLayout,
+	useSuggestList,
 } from "@remit/ui";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
-import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
+import {
+	type ReactNode,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
 import { isSinglePaneTier, useLayoutTier } from "@/hooks/useLayoutTier";
 import { useSearchScope } from "@/hooks/useSearchScope";
+import { useSearchSuggestions } from "@/hooks/useSearchSuggestions";
 import { useSearchTokenContext } from "@/hooks/useSearchTokenContext";
 import { useMailContext } from "@/lib/mail-context";
-import {
-	convertSearchToRule,
-	isConvertible,
-} from "@/lib/organize/search-to-rule";
+import { convertSearchToRule } from "@/lib/organize/search-to-rule";
 import { loadRecentSearches, saveRecentSearch } from "@/lib/recent-searches";
 import { resultsScopeForRoute, routeMailboxId } from "@/lib/search-scope";
+import { applySearchSuggestion } from "@/lib/search-suggestions";
 import { showInlineSearchResults } from "@/lib/search-surface";
 import {
 	parseSearchTokens,
@@ -59,11 +82,22 @@ import {
 import { spamOfferForResults } from "@/lib/spam-offer";
 import { SearchFilterDialog } from "./organize/SearchFilterDialog";
 
-interface MailListHeaderProps {
+export interface MailListHeaderProps {
 	title: string;
 	unreadCount: number;
 	/** 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.
+	 */
+	selectionBar?: ReactNode;
+	/**
+	 * Overlay anchored to the bottom of the pane (the mobile selection sheet).
+	 * The pane is the positioned ancestor the sheet measures against.
+	 */
+	selectionSheet?: 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. */
@@ -99,6 +133,8 @@ export function MailListHeader({
 	title,
 	unreadCount,
 	children,
+	selectionBar,
+	selectionSheet,
 	footer,
 	searchFilter,
 	searchResults,
@@ -137,6 +173,68 @@ export function MailListHeader({
 		setSearchOpen(false);
 	}, [searchViewKey]);
 
+	// What the box offers for the term being typed. The field says where the
+	// caret is; the caret decides whether the offer is a token name or one
+	// token's values, and picking one replaces that term and leaves the caret
+	// ready for the next. Typing always wins — the list only ever inserts, and a
+	// term it has nothing for leaves the field the plain text box it is.
+	//
+	// An empty field belongs to the recent searches and the filter row, as it
+	// does everywhere else in this pane, so the offer starts with the first
+	// character typed. The caret on the whitespace after a finished token is a
+	// term of its own, which is where the whole vocabulary is offered again.
+	const [caretPosition, setCaretPosition] = useState(0);
+	const [fieldFocused, setFieldFocused] = useState(false);
+	const [caretRequest, setCaretRequest] = useState<
+		SearchCaretRequest | undefined
+	>(undefined);
+	const suggestions = useSearchSuggestions({
+		query: searchInput,
+		cursor: caretPosition,
+		enabled: fieldFocused && searchInput.trim().length > 0,
+	});
+	const applySuggestion = useCallback(
+		(suggestion: Suggestion) => {
+			const applied = applySearchSuggestion(
+				searchInput,
+				caretPosition,
+				suggestion,
+			);
+			onSearchChange(applied.query);
+			setCaretRequest({ cursor: applied.cursor });
+		},
+		[searchInput, caretPosition, onSearchChange],
+	);
+	const suggest = useSuggestList({
+		count: suggestions.length,
+		onAccept: (index) => {
+			const suggestion = suggestions[index];
+			if (suggestion) applySuggestion(suggestion);
+		},
+	});
+	const searchSuggest: SearchFieldSuggest = {
+		comboboxProps: suggest.comboboxProps,
+		onKeyDown: suggest.handleKeyDown,
+		onCaretChange: setCaretPosition,
+		onFocusChange: setFieldFocused,
+		...(caretRequest ? { caret: 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.
+	const suggestList = suggest.open ? (
+		<SuggestList
+			id={suggest.listId}
+			suggestions={suggestions}
+			activeIndex={suggest.activeIndex}
+			optionId={suggest.optionId}
+			onPick={applySuggestion}
+			onHighlight={suggest.setActiveIndex}
+			label="Search suggestions"
+			className="mx-row-inset mt-1 shrink-0"
+		/>
+	) : null;
+
 	const hasQuery = searchInput.trim().length > 0;
 	// Filter tokens (`from:`, `has:attachment`, `account:`, …) parsed live from
 	// the typed query render as removable chips above the sections; removing one
@@ -212,9 +310,19 @@ export function MailListHeader({
 	// 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. Offered whenever a
-	// query is active, disabled with a reason when the search has no clause to
-	// filter on (only non-clause facets, or a bare folder scope).
+	// 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).
+	//
+	// 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
+	// results panel, or a list whose own rows narrow to the committed query — and
+	// is mounted on the same condition as the query itself. Rendering it inside the
+	// results panel made it a mailbox's flash: the panel shows while the query is
+	// being typed and hands back to `MessageList` the moment the query commits to
+	// 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;
@@ -229,6 +337,10 @@ 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;
 	const filterDialog =
 		filterOpen && targetAccountId ? (
 			<SearchFilterDialog
@@ -265,6 +377,8 @@ export function MailListHeader({
 					onSelectResult={handleSelectResult}
 					tokens={tokenChips}
 					scope={resultsScope}
+					suggest={searchSuggest}
+					suggestList={suggestList}
 				/>
 				{filterDialog}
 			</>
@@ -296,41 +410,46 @@ export function MailListHeader({
 			onSelectResult={handleSelectInlineResult}
 			tokens={tokenChips}
 			scope={resultsScope}
-			makeFilter={makeFilter}
 		/>
 	);
-	const body = !showInlineResults ? (
-		children
-	) : searchFilter ? (
-		<FilterSheet {...searchFilter}>{results}</FilterSheet>
-	) : (
+	// 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="flex h-full w-full flex-col bg-surface">
-			<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}
-			/>
+		<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>
 	);
 }

package/src/components/mail/MailViewChrome.tsx

@@ -7,6 +7,12 @@
  * category / attribute / source selection state. The same filter config feeds
  * the phone search takeover (via `MailListHeader`), so filters carry across.
  *
+ * An active search takes the sheet down. Filtering and searching narrow the same
+ * list by the same intent, and the sheet and the search's "Make this a filter"
+ * affordance want the same row above the list, so only one of them is up at a
+ * 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).
@@ -18,6 +24,7 @@ import {
 	type SearchResult,
 } from "@remit/ui";
 import { type ReactNode, useState } from "react";
+import { useMailContext } from "@/lib/mail-context";
 import { MailListHeader } from "./MailListHeader";
 
 interface MailViewChromeProps {
@@ -74,6 +81,12 @@ export function MailViewChrome({
 	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
+	// the query brings the sheet back with the same category and toggles.
+	const { searchInput } = useMailContext();
+	const searching = searchInput.trim().length > 0;
 
 	const filterConfig: Omit<FilterSheetProps, "children"> = {
 		categories: preset.categories,
@@ -104,7 +117,11 @@ export function MailViewChrome({
 			relatedResultsLabel={relatedResultsLabel}
 			searchResultsInBody={searchResultsInBody}
 		>
-			<FilterSheet {...filterConfig}>{children}</FilterSheet>
+			{searching ? (
+				<div className="h-full overflow-y-auto">{children}</div>
+			) : (
+				<FilterSheet {...filterConfig}>{children}</FilterSheet>
+			)}
 		</MailListHeader>
 	);
 }

package/src/components/mail/MailboxPane.tsx

@@ -104,6 +104,7 @@ import {
 	filterReach,
 	hasInboxFilter,
 	type InboxFilterCriteria,
+	type InboxFilterParams,
 	inboxFilterParams,
 	sameInboxFilter,
 } from "@/lib/inbox-filters";
@@ -123,6 +124,10 @@ import {
 } from "@/lib/search-result";
 import { parseSearchTokens } from "@/lib/search-tokens";
 import { useTelemetry } from "@/lib/telemetry-context";
+import {
+	applyResidualTokens,
+	threadSearchTokens,
+} from "@/lib/thread-search-tokens";
 import { MailViewChrome } from "./MailViewChrome";
 
 /* ------------------------------------------------------------------ */
@@ -260,17 +265,19 @@ function MailboxPaneProvider({
 
 	const normalizedSearchQuery = normalizeSearchQuery(searchQuery);
 	const hasSearchQuery = normalizedSearchQuery.length > 0;
-	// Filter tokens (`from:`, `has:attachment`, `is:unread`) narrow this literal
-	// search to the params `threadOperationsSearchThreads` supports; `before:`/
-	// `after:`/`account:` have no equivalent on this endpoint and are left for
-	// the semantic section only (see `useSemanticSearch`). `in:` never reaches
-	// here at all: this view is scoped to one mailbox by its route, so
-	// `useSearchTokenContext` does not resolve the term and it stays free text.
+	// Filter tokens narrow this literal search to the params
+	// `threadOperationsSearchThreads` supports (`from`, `subject`, `category`,
+	// `unread`, `starred`, `attachments`). What the endpoint has no parameter for
+	// — `before:`/`after:`/`account:`, and any second value for a parameter that
+	// takes one — comes back as residue and is applied over the returned rows
+	// below, because a token neither sent nor applied silently widens the result
+	// to mail the user asked to exclude. `in:` never reaches here at all: this
+	// view is scoped to one mailbox by its route, so `useSearchTokenContext` does
+	// not resolve the term and it stays free text.
 	const { freeText, tokens: searchTokens } = parseSearchTokens(
 		normalizedSearchQuery,
 		tokenContext,
 	);
-	const fromToken = searchTokens.find((t) => t.type === "from");
 
 	const [filterCategory, setFilterCategory] = useState("all");
 	const [filterAttributes, setFilterAttributes] = useState<ReadonlySet<string>>(
@@ -291,21 +298,30 @@ function MailboxPaneProvider({
 	// active chip routes the listing through `searchThreads` — one predicate, one
 	// query key, so the key and the branch below cannot diverge.
 	const hasServerFilter = hasSearchQuery || hasInboxFilter(filterCriteria);
+	// The chips are spread last: where a chip and a token set the same parameter
+	// the visible control decides, and the token drops to the residue.
+	const { params: tokenParams, residual: residualTokens } = threadSearchTokens(
+		searchTokens,
+		filterParams,
+	);
 	const searchThreadsQuery = {
 		order: "desc" as const,
 		// Explicit: an unspecified limit clamps to THREAD_SEARCH_MAX_LIMIT (500),
 		// so switching paths without it multiplies the page size by ten.
 		limit: THREADS_PAGE_SIZE,
 		...(freeText ? { query: freeText } : {}),
-		...(fromToken ? { from: fromToken.value } : {}),
-		...(searchTokens.some((t) => t.type === "hasAttachment")
-			? { attachments: true }
-			: {}),
-		...(searchTokens.some((t) => t.type === "isUnread")
-			? { unread: true }
-			: {}),
+		...tokenParams,
 		...filterParams,
 	};
+	// What the request actually narrows by, whoever set it. `placeholderData`
+	// keeps the previous rows only under the same predicate, and a token
+	// narrowing the list is as much that predicate as a chip is.
+	const activeFilterParams: InboxFilterParams = {
+		category: searchThreadsQuery.category,
+		unread: searchThreadsQuery.unread,
+		starred: searchThreadsQuery.starred,
+		attachments: searchThreadsQuery.attachments,
+	};
 
 	const queryKey = hasServerFilter
 		? threadOperationsSearchThreadsQueryKey({
@@ -354,7 +370,7 @@ function MailboxPaneProvider({
 		// skeleton rather than showing the old predicate's mail under the new
 		// chip for one round trip.
 		placeholderData: (previousData, previousQuery) =>
-			sameInboxFilter(previousQuery?.queryKey, filterParams)
+			sameInboxFilter(previousQuery?.queryKey, activeFilterParams)
 				? previousData
 				: undefined,
 	});
@@ -395,10 +411,18 @@ function MailboxPaneProvider({
 	// The server answered the active predicate, so these rows are the list: the
 	// dedupe spans pages and the deleted drop repeats the server's own
 	// `excludeDeleted`, and neither result changes when another page loads.
-	const threads = dropDeletedThreads(
-		dedupeThreadMessages(
-			threadsData?.pages.flatMap((page) => page.items ?? []) ?? [],
+	// Residual tokens are the exception — the request could not carry them, so
+	// they are applied here over what came back. That thins a page rather than
+	// answering over the whole mailbox, which is why the empty state stops
+	// claiming the folder was read and the escalation predicate is withheld.
+	const threads = applyResidualTokens(
+		dropDeletedThreads(
+			dedupeThreadMessages(
+				threadsData?.pages.flatMap((page) => page.items ?? []) ?? [],
+			),
 		),
+		residualTokens,
+		mailboxAccountId,
 	);
 
 	const onSelectFilterCategory = useCallback((id: string) => {
@@ -424,7 +448,10 @@ function MailboxPaneProvider({
 	const listFilter: MessageListFilter | undefined = filterLabel
 		? {
 				label: filterLabel,
-				reach: filterReach(searchThreadsQuery),
+				reach:
+					residualTokens.length > 0
+						? "loaded-pages"
+						: filterReach(searchThreadsQuery),
 				onClear: onClearFilters,
 			}
 		: undefined;
@@ -823,7 +850,15 @@ function MailboxPaneProvider({
 		listFilter,
 		intelligenceOpen,
 		onToggleIntelligence,
-		searchPredicate: hasSearchQuery ? searchThreadsQuery : undefined,
+		// Escalation ("select all N matching") re-issues this predicate server-side
+		// and acts on every match, so it is only offered when the predicate IS the
+		// search: a residual token narrows the rows on screen but not the request,
+		// and a bulk delete over the broader set would reach mail the search
+		// excluded.
+		searchPredicate:
+			hasSearchQuery && residualTokens.length === 0
+				? searchThreadsQuery
+				: undefined,
 		onDeleteMessages: handleDeleteMessages,
 		onMoveMessages: handleMoveMessages,
 		isDeleting,

package/src/components/mail/MessageCard.tsx

@@ -205,7 +205,6 @@ const ExpandedCard = ({
 			threadId={threadMessage.threadId}
 			mailboxId={threadMessage.mailboxId}
 			autoMoved={threadMessage.autoMoved}
-			size="md"
 		/>
 	) : null;