@remit/web-client 0.0.91 → 0.0.93

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.91",
+  "version": "0.0.93",
   "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,48 +410,24 @@ 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;
-
 	return (
 		<>
-			<MailListHeader
-				{...header}
-				selectionBar={selectionBar}
-				paneOverlay={organizeFlow}
-			>
+			<MailListHeader {...header} selectionBar={selectionBar}>
 				{children}
 			</MailListHeader>
-			{organizeOpen && scope.accountId && (
-				<OrganizeDialog
-					open={organizeOpen}
-					accountId={scope.accountId}
-					selectedMessageIds={selectedMessageIds}
-					selectedSenders={selectedSenders}
-					onClose={() => setOrganizeOpen(false)}
-				/>
-			)}
+			<SelectionWizardHost
+				verb={wizardVerb}
+				accountId={scope.accountId}
+				mailboxId={scope.mailboxId}
+				selection={wizardSelection}
+				crossAccount={scope.moveDisabledHint !== undefined}
+				onFinished={exitSelection}
+			/>
 		</>
 	);
 }
@@ -850,7 +788,6 @@ export function DailyBrief({
 					onSelectSearchResult,
 				}}
 				rows={filteredRows}
-				isDesktop={isDesktop}
 				onMarkMessagesRead={onMarkMessagesRead}
 			>
 				<div className="flex h-full flex-col">

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/,
+		);
+	});
 });
 
 /**
@@ -71,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(
@@ -135,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", () => {

package/src/components/mail/MessageList.tsx

@@ -6,6 +6,7 @@ import {
 	MessageListLoadingMore,
 	MessageListPane,
 	SelectionTopBar,
+	type Verb,
 } from "@remit/ui";
 import { useBlocker, useNavigate } from "@tanstack/react-router";
 import { useVirtualizer } from "@tanstack/react-virtual";
@@ -44,7 +45,11 @@ import {
 	escalatedStatusLabel,
 	escalationActionLabel,
 } from "@/lib/escalation-label";
-import { formatDeleteToTrashTitle, formatNumber } from "@/lib/format";
+import {
+	formatDeleteToTrashTitle,
+	formatEmailDate,
+	formatNumber,
+} from "@/lib/format";
 import { tabStopId } from "@/lib/list-focus";
 import { useListHeaderChrome } from "@/lib/list-header-chrome";
 import {
@@ -52,10 +57,13 @@ import {
 	shouldExitSelectionOnNavigate,
 } from "@/lib/selection-mode";
 import { cn } from "@/lib/utils";
+import { useOpenWizard, useWizardStepValue } from "@/lib/wizard-history";
 import { LabelApplyTrigger } from "./LabelApplyTrigger";
 import { MoveToTrigger } from "./MoveToTrigger";
-import { MobileOrganizeFlow } from "./organize/MobileOrganizeFlow";
-import { OrganizeDialog } from "./organize/OrganizeDialog";
+import {
+	SelectionWizardHost,
+	type WizardSelectionMessage,
+} from "./SelectionWizardHost";
 import { SwipeableMessageRow } from "./SwipeableMessageRow";
 
 /**
@@ -232,13 +240,12 @@ export const MessageList = ({
 	const parentRef = useRef<HTMLDivElement>(null);
 	const navigate = useNavigate();
 	const isDesktop = useIsDesktop();
-	const [organizeOpen, setOrganizeOpen] = useState(false);
-	// Mobile only: which selection-sheet entry opened the guided organize flow
-	// (`null` when closed). Desktop uses `organizeOpen` + `OrganizeDialog`
-	// instead — a sheet is a touch pattern (issue #211).
-	const [mobileOrganizeEntry, setMobileOrganizeEntry] = useState<
-		"select-similar" | "something-else" | null
-	>(null);
+	const wizardStep = useWizardStepValue();
+	const openWizard = useOpenWizard();
+	// The verb the bar was pressed for. The wizard itself is open for as long as
+	// the URL holds a step, so a back that pops the last one closes it without
+	// anything here having to hear about it.
+	const [wizardVerb, setWizardVerb] = useState<Verb>("organize");
 	const isSearching = !!searchQuery?.trim();
 	const listHeaderChrome = useListHeaderChrome();
 	const { labels } = useLabelList(accountId);
@@ -315,13 +322,6 @@ export const MessageList = ({
 	// it back to the count, and across that render the two disagree.
 	const isMultiSelectMode = deriveIsMultiSelectMode(selectedCount, isDesktop);
 
-	// When the selection empties — cancel, a completed action, a mailbox switch —
-	// the guided organize entry must reset too, so a later re-selection doesn't
-	// reopen the flow on a stale entry (issue #211).
-	useEffect(() => {
-		if (selectedCount === 0) setMobileOrganizeEntry(null);
-	}, [selectedCount]);
-
 	// Pending delete, awaiting confirmation. `null` means the dialog is closed.
 	// `source: "ids"` snapshots the concrete ids at request time so a selection
 	// change behind the dialog can't retarget the delete — every keyboard/desktop
@@ -509,17 +509,23 @@ export const MessageList = ({
 	// false for a plain click (caller lets the Link navigate).
 	const orderedIds = useMemo(() => threads.map((t) => t.messageId), [threads]);
 
-	// Sender addresses of the checked rows, for the organize widen's literal
-	// fallback when this deployment ships no vector pipeline (the sheet matches
-	// all mail from these senders). Read off the already-loaded thread rows, so
-	// no extra round-trip; the widen hook dedupes.
-	const selectedSenders = useMemo(() => {
-		const emails: string[] = [];
+	// The checked rows as the wizard reads them: the sample it shows under every
+	// screen that names a match, and the senders its widen falls back to on a
+	// deployment with no vector pipeline. Read off the already-loaded thread rows,
+	// so no extra round-trip.
+	const wizardSelection = useMemo<WizardSelectionMessage[]>(() => {
+		const rows: WizardSelectionMessage[] = [];
 		for (const thread of threads) {
 			if (!selectedIds.has(thread.messageId)) continue;
-			if (thread.fromEmail) emails.push(thread.fromEmail);
+			rows.push({
+				id: thread.messageId,
+				sender: thread.fromName ?? thread.fromEmail ?? "Unknown",
+				email: thread.fromEmail ?? "",
+				subject: thread.subject ?? "(No subject)",
+				date: formatEmailDate(thread.sentDate),
+			});
 		}
-		return emails;
+		return rows;
 	}, [threads, selectedIds]);
 	const handleRowSelect = useCallback(
 		(messageId: string, modifiers: SelectionModifiers): boolean => {
@@ -875,6 +881,23 @@ export const MessageList = ({
 		return undefined;
 	}, [selectedCount, selectedIds, threads]);
 
+	// Every verb on the bar opens the wizard on the ticked rows (#477 1.4),
+	// including a selection spanning accounts — the wizard is where that
+	// restriction is stated, on the step that needs one account (#477 5.5). It is
+	// withdrawn only once the selection escalates to a predicate or a run takes
+	// over: an escalated selection is a predicate, which no bounded list of ids
+	// stands in for (#477 3.1), and keeps the bar's own chunked runner.
+	const canOpenWizard =
+		escalation.phase.kind === "idle" && !escalation.isRunning;
+
+	const startWizard = useCallback(
+		(verb: Verb) => {
+			setWizardVerb(verb);
+			openWizard("match");
+		},
+		[openWizard],
+	);
+
 	// Swipe-to-delete single message
 	const handleSwipeDelete = useCallback(
 		(messageId: string) => {
@@ -1060,12 +1083,14 @@ export const MessageList = ({
 	// — is never blocked, and the blocker is off entirely with nothing selected.
 	useBlocker({
 		shouldBlockFn: ({ action }) => {
-			if (!shouldExitSelectionOnNavigate(action, hasSelection)) return false;
+			if (!shouldExitSelectionOnNavigate(action, hasSelection, wizardStep)) {
+				return false;
+			}
 			exitSelection();
 			return true;
 		},
 		enableBeforeUnload: false,
-		disabled: !hasSelection,
+		disabled: !hasSelection || wizardStep !== undefined,
 	});
 
 	// Load more when scrolling near the bottom
@@ -1281,15 +1306,10 @@ export const MessageList = ({
 							}
 						: undefined;
 
-	// The bar shows one notice at a time, so the cross-account move restriction
-	// rides in behind the escalation states.
-	const selectionNotice =
-		escalationNotice ??
-		(moveDisabledHint
-			? { tone: "warning" as const, text: moveDisabledHint }
-			: undefined);
-
+	// An escalated selection is a predicate the wizard cannot take, so Move there
+	// keeps the caller's own folder picker and the chunked predicate run (#114).
 	const selectionMoveSlot =
+		!canOpenWizard &&
 		(onMoveMessages || escalation.phase.kind === "escalated") &&
 		accountId &&
 		mailboxId ? (
@@ -1302,28 +1322,13 @@ export const MessageList = ({
 			/>
 		) : undefined;
 
-	// The guided organize flow (issue #211) covers the pane, which is its
-	// positioned ancestor.
-	const mobileOrganizeFlow =
-		mobileOrganizeEntry && accountId && !isDesktop && selectedCount > 0 ? (
-			<MobileOrganizeFlow
-				entry={mobileOrganizeEntry}
-				accountId={accountId}
-				selectedMessageIds={Array.from(selectedIds)}
-				selectedSenders={selectedSenders}
-				junkMailboxId={junkMailboxId}
-				onClose={() => {
-					setMobileOrganizeEntry(null);
-					exitSelection();
-				}}
-			/>
-		) : undefined;
-
-	// Organize acts on the materialized selection within one account, so it is
-	// withdrawn the moment the selection escalates to a predicate or a run
-	// takes over — both of which name themselves through `statusLabel`.
-	const canOrganize =
-		!!accountId && !!mailboxId && !moveDisabledHint && !selectionStatusLabel;
+	// The bar shows one notice at a time, so the cross-account move restriction
+	// rides in behind the escalation states.
+	const selectionNotice =
+		escalationNotice ??
+		(moveDisabledHint
+			? { tone: "warning" as const, text: moveDisabledHint }
+			: undefined);
 
 	// One selection surface at every width, always mounted: it is the list
 	// header. With nothing ticked it names the mailbox and carries the header's
@@ -1341,27 +1346,24 @@ export const MessageList = ({
 			idleSlot={listHeaderChrome.makeFilterSlot}
 			count={selectionCount}
 			onCancel={handleSelectionCancel}
-			onDelete={handleSelectionDelete}
-			onOrganize={
-				canOrganize
-					? () =>
-							isDesktop
-								? setOrganizeOpen(true)
-								: setMobileOrganizeEntry("select-similar")
-					: undefined
+			onDelete={
+				canOpenWizard ? () => startWizard("delete") : handleSelectionDelete
 			}
+			onMove={canOpenWizard ? () => startWizard("move") : undefined}
+			moveSlot={selectionMoveSlot}
+			onOrganize={canOpenWizard ? () => startWizard("organize") : undefined}
 			onJunk={
-				junkMailboxId && junkMailboxId !== mailboxId && !moveDisabledHint
-					? handleJunk
+				junkMailboxId && junkMailboxId !== mailboxId
+					? canOpenWizard
+						? () => startWizard("junk")
+						: !moveDisabledHint
+							? handleJunk
+							: undefined
 					: undefined
 			}
-			onMarkRead={handleMarkAsRead}
-			onSomethingElse={
-				canOrganize && !isDesktop
-					? () => setMobileOrganizeEntry("something-else")
-					: undefined
+			onMarkRead={
+				canOpenWizard ? () => startWizard("markRead") : handleMarkAsRead
 			}
-			moveSlot={selectionMoveSlot}
 			overflowSlot={
 				accountId && mailboxId && selectedCount > 0 && labels.length > 0 ? (
 					<LabelApplyTrigger
@@ -1516,7 +1518,6 @@ export const MessageList = ({
 				isDesktop={isDesktop}
 				hideHeader={hideHeader}
 				selectionBar={activeSelectionBar}
-				paneOverlay={mobileOrganizeFlow}
 				listBody={
 					listHeaderChrome.searchResults ??
 					(listState === "ready" ? virtualBody : undefined)
@@ -1539,15 +1540,14 @@ export const MessageList = ({
 				onConfirm={handleConfirmDelete}
 				onCancel={handleCancelDelete}
 			/>
-			{organizeOpen && accountId && (
-				<OrganizeDialog
-					open={organizeOpen}
-					accountId={accountId}
-					selectedMessageIds={Array.from(selectedIds)}
-					selectedSenders={selectedSenders}
-					onClose={() => setOrganizeOpen(false)}
-				/>
-			)}
+			<SelectionWizardHost
+				verb={wizardVerb}
+				accountId={accountId}
+				mailboxId={mailboxId}
+				selection={wizardSelection}
+				crossAccount={moveDisabledHint !== undefined}
+				onFinished={exitSelection}
+			/>
 		</>
 	);
 };