@remit/web-client 0.0.92 → 0.0.94

package/package.json

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

@@ -47,7 +47,11 @@ describe("the brief's select-all", () => {
 		);
 	});
 
-	it("keeps the free-text organize entry reachable, in the overflow", () => {
-		assert.match(chromeBody(), /onSomethingElse=\{/);
+	it("sends every verb on the bar into the wizard (#477 1.4)", () => {
+		const body = chromeBody();
+		for (const verb of ["delete", "move", "junk", "markRead", "organize"]) {
+			assert.match(body, new RegExp(`startWizard\\("${verb}"\\)`));
+		}
+		assert.doesNotMatch(body, /onSomethingElse/);
 	});
 });

package/src/components/mail/DailyBrief.tsx

@@ -46,6 +46,7 @@ import {
 	SelectionTopBar,
 	type ThreadRowData,
 	type ThreadSection,
+	type Verb,
 } from "@remit/ui";
 import { useQueries, useQuery } from "@tanstack/react-query";
 import { useNavigate } from "@tanstack/react-router";
@@ -54,7 +55,6 @@ import {
 	type ReactNode,
 	type RefObject,
 	useCallback,
-	useEffect,
 	useMemo,
 	useState,
 } from "react";
@@ -65,7 +65,6 @@ import {
 } from "@/hooks/useInitialSyncProgress";
 import { useLabelList } from "@/hooks/useLabels";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
-import { useMoveMessages } from "@/hooks/useMoveMessages";
 import { useSearchTokenContext } from "@/hooks/useSearchTokenContext";
 import { useSemanticSearch } from "@/hooks/useSemanticSearch";
 import type { TriageContextUpdate } from "@/hooks/useTriageLayer";
@@ -83,13 +82,15 @@ 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 { LabelApplyTrigger } from "./LabelApplyTrigger";
 import { MailListHeader, type MailListHeaderProps } from "./MailListHeader";
 import type { MessageListCommands } from "./MessageList";
 import { MessageRow } from "./MessageRow";
-import { MoveToTrigger } from "./MoveToTrigger";
-import { MobileOrganizeFlow } from "./organize/MobileOrganizeFlow";
-import { OrganizeDialog } from "./organize/OrganizeDialog";
+import {
+	SelectionWizardHost,
+	type WizardSelectionMessage,
+} from "./SelectionWizardHost";
 import {
 	type OpenMessageOptions,
 	ThreadListInteraction,
@@ -293,7 +294,6 @@ interface BriefSelectionChromeProps {
 	>;
 	/** The rows the list is showing, for resolving the selection's scope. */
 	rows: readonly ThreadRowData[];
-	isDesktop: boolean;
 	onMarkMessagesRead?: (messageIds: string[]) => void;
 	children: ReactNode;
 }
@@ -307,7 +307,6 @@ interface BriefSelectionChromeProps {
 function BriefSelectionChrome({
 	header,
 	rows,
-	isDesktop,
 	onMarkMessagesRead,
 	children,
 }: BriefSelectionChromeProps) {
@@ -315,7 +314,6 @@ function BriefSelectionChrome({
 		selectedIds,
 		selectedCount,
 		exitSelection,
-		requestDeleteSelection,
 		orderedIds,
 		allSelected,
 		toggleAllLoaded,
@@ -327,57 +325,40 @@ function BriefSelectionChrome({
 	);
 	const { junkMailboxId } = useJunkMailbox(scope.accountId);
 	const { labels } = useLabelList(scope.accountId);
-	const { moveMessages, isPending: isMoving } = useMoveMessages({
-		mailboxId: scope.mailboxId ?? "",
-		accountId: scope.accountId,
-	});
-
-	const [organizeOpen, setOrganizeOpen] = useState(false);
-	const [mobileOrganizeEntry, setMobileOrganizeEntry] = useState<
-		"select-similar" | "something-else" | null
-	>(null);
 
-	// An emptied selection takes the flows it opened with it, so a later
-	// re-selection can't reopen one on a stale entry.
-	useEffect(() => {
-		if (selectedCount > 0) return;
-		setOrganizeOpen(false);
-		setMobileOrganizeEntry(null);
-	}, [selectedCount]);
+	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],
 	);
-	const selectedSenders = useMemo(() => {
-		const emails: string[] = [];
-		for (const row of rows) {
-			if (selectedIds.has(row.id) && row.fromEmail) emails.push(row.fromEmail);
-		}
-		return emails;
-	}, [rows, selectedIds]);
-
-	const handleMarkAsRead = useCallback(() => {
-		onMarkMessagesRead?.(selectedMessageIds);
-		exitSelection();
-	}, [onMarkMessagesRead, selectedMessageIds, exitSelection]);
-
-	const handleMove = useCallback(
-		(destinationMailboxId: string) => {
-			if (selectedMessageIds.length === 0) return;
-			moveMessages(selectedMessageIds, destinationMailboxId);
-			exitSelection();
-		},
-		[moveMessages, selectedMessageIds, exitSelection],
+	// The ticked rows as the wizard reads them — the sample under every screen
+	// that names a match, and the senders its widen falls back to.
+	const wizardSelection = 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],
 	);
 
-	const handleJunk = useCallback(() => {
-		if (junkMailboxId) handleMove(junkMailboxId);
-	}, [junkMailboxId, handleMove]);
-
-	const scoped = !!scope.accountId && !!scope.mailboxId;
-	const canJunk =
-		scoped && !!junkMailboxId && junkMailboxId !== scope.mailboxId;
+	const canJunk = !!junkMailboxId && junkMailboxId !== scope.mailboxId;
 
 	// One select-all for both surfaces: the desktop toolbar and the touch sheet
 	// offer the same control over the same rendered rows, so the verb a phone
@@ -410,31 +391,12 @@ function BriefSelectionChrome({
 			idleSlot={chrome.makeFilterSlot}
 			count={selectedCount}
 			onCancel={exitSelection}
-			onDelete={requestDeleteSelection}
-			onOrganize={
-				scoped
-					? () =>
-							isDesktop
-								? setOrganizeOpen(true)
-								: setMobileOrganizeEntry("select-similar")
-					: undefined
-			}
-			onJunk={canJunk ? handleJunk : undefined}
-			onMarkRead={onMarkMessagesRead ? handleMarkAsRead : undefined}
-			onSomethingElse={
-				scoped && !isDesktop
-					? () => setMobileOrganizeEntry("something-else")
-					: undefined
-			}
-			moveSlot={
-				scoped && scope.accountId && scope.mailboxId ? (
-					<MoveToTrigger
-						accountId={scope.accountId}
-						currentMailboxId={scope.mailboxId}
-						onMove={isMoving ? () => {} : handleMove}
-						label="Move selected messages"
-					/>
-				) : undefined
+			onDelete={() => startWizard("delete")}
+			onMove={() => startWizard("move")}
+			onOrganize={() => startWizard("organize")}
+			onJunk={canJunk ? () => startWizard("junk") : undefined}
+			onMarkRead={
+				onMarkMessagesRead ? () => startWizard("markRead") : undefined
 			}
 			overflowSlot={
 				scope.accountId &&
@@ -448,49 +410,33 @@ function BriefSelectionChrome({
 					/>
 				) : undefined
 			}
-			isBusy={isMoving}
 			selectAll={selectAll}
 			notice={notice}
 		/>
 	);
 
-	const organizeFlow =
-		mobileOrganizeEntry &&
-		scope.accountId &&
-		!isDesktop &&
-		selectedCount > 0 ? (
-			<MobileOrganizeFlow
-				entry={mobileOrganizeEntry}
-				accountId={scope.accountId}
-				selectedMessageIds={selectedMessageIds}
-				selectedSenders={selectedSenders}
-				junkMailboxId={junkMailboxId}
-				onClose={() => {
-					setMobileOrganizeEntry(null);
-					exitSelection();
-				}}
-			/>
-		) : undefined;
-
+	// 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}
-				paneOverlay={organizeFlow}
-			>
-				{children}
-			</MailListHeader>
-			{organizeOpen && scope.accountId && (
-				<OrganizeDialog
-					open={organizeOpen}
+		<MailListHeader
+			{...header}
+			selectionBar={selectionBar}
+			paneOverlay={
+				<SelectionWizardHost
+					verb={wizardVerb}
 					accountId={scope.accountId}
-					selectedMessageIds={selectedMessageIds}
-					selectedSenders={selectedSenders}
-					onClose={() => setOrganizeOpen(false)}
+					mailboxId={scope.mailboxId}
+					selection={wizardSelection}
+					crossAccount={scope.moveDisabledHint !== undefined}
+					onFinished={exitSelection}
 				/>
-			)}
-		</>
+			}
+		>
+			{children}
+		</MailListHeader>
 	);
 }
 
@@ -850,7 +796,6 @@ export function DailyBrief({
 					onSelectSearchResult,
 				}}
 				rows={filteredRows}
-				isDesktop={isDesktop}
 				onMarkMessagesRead={onMarkMessagesRead}
 			>
 				<div className="flex h-full flex-col">

package/src/components/mail/FlaggedList.tsx

@@ -38,10 +38,15 @@ import { dedupeByThread } from "@/lib/starred-rows";
 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 +54,42 @@ const FILTER_PREDICATES: Record<string, (t: ThreadRowData) => boolean> = {
 	attachment: (t) => t.hasAttachment === true,
 };
 
+/**
+ * The wizard, on the one surface whose bar borrows it rather than raising it.
+ *
+ * The list header 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 }: { rows: readonly ThreadRowData[] }) {
+	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="organize"
+			selection={selection}
+			crossAccount
+			onFinished={exitSelection}
+		/>
+	);
+}
+
 interface FlaggedListProps {
 	selectedMessageId?: string;
 	onSelectMessage?: (id: string, options?: OpenMessageOptions) => void;
@@ -221,6 +262,7 @@ export function FlaggedList({
 						(listState === "ready" ? listBody : undefined)
 					}
 				/>
+				<StarredWizardHost rows={rows} />
 			</ThreadListInteraction>
 		</MailViewChrome>
 	);

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>

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

@@ -78,8 +78,9 @@ describe("MessageList escalated actions", () => {
 
 	it("keeps mark-read and the move slot on an escalated selection", () => {
 		// 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\}/);
+		// counting or busy); an escalated selection must never lose it — it falls
+		// back to the predicate run, which the wizard cannot take.
+		assert.match(source, /: handleMarkAsRead\s*\}/);
 		// The move slot is offered for a bounded selection or an escalated one —
 		// #114's rule that an escalated selection is never delete-only.
 		assert.match(
@@ -142,9 +143,13 @@ describe("MessageList escalation reaches desktop (#212)", () => {
 		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("sends every verb on the bar into the wizard (#477 1.4)", () => {
+		const bar = source.match(/<SelectionTopBar[\s\S]*?\n\t\t\/>/)?.[0] ?? "";
+		for (const verb of ["delete", "move", "junk", "markRead", "organize"]) {
+			assert.match(bar, new RegExp(`startWizard\\("${verb}"\\)`));
+		}
+		// The one selection surface has no second organize entry beside them.
+		assert.doesNotMatch(source, /onSomethingElse/);
 	});
 
 	it("offers the label picker only when the account has labels", () => {