@remit/web-client 0.0.92 → 0.0.93

package/src/components/mail/ThreadListInteraction.tsx

@@ -36,7 +36,6 @@ import type { TriageContextUpdate } from "@/hooks/useTriageLayer";
 import { formatDeleteToTrashTitle } from "@/lib/format";
 import { tabStopId } from "@/lib/list-focus";
 import { useListHeaderChrome } from "@/lib/list-header-chrome";
-import { useMailContext } from "@/lib/mail-context";
 import type { MessageListCommands } from "./MessageList";
 import type { MessageRowSelection } from "./MessageRow";
 
@@ -187,14 +186,6 @@ export function ThreadListInteraction({
 		if (orderedIds.length > 0) toggleAll(orderedIds);
 	}, [orderedIds, toggleAll]);
 
-	// The selection wizard is mounted on the route, above this provider, and
-	// acts on these rows — so it reads the count from here rather than keeping
-	// one of its own (#477).
-	const { onSelectedCountChange } = useMailContext();
-	useEffect(() => {
-		onSelectedCountChange(selectedCount);
-	}, [selectedCount, onSelectedCountChange]);
-
 	// A row that leaves the list — a chip filter, a collapsed section, a
 	// completed delete — cannot stay selected. Survivors keep their selection.
 	const { intersectWith } = selection;

package/src/components/mail/organize/SearchFilterEditor.tsx

@@ -78,7 +78,11 @@ export function SearchFilterEditor({
 		[mailboxesData?.items],
 	);
 
-	const preview = useRulePreview(accountId, rulePredicate(rule), seedCount);
+	const { count: preview } = useRulePreview(
+		accountId,
+		rulePredicate(rule),
+		seedCount,
+	);
 
 	const organizeJob = useOrganizeJob(accountId);
 	const createFilter = useCreateFilter(accountId);

package/src/components/settings/FilterEditor.tsx

@@ -74,7 +74,7 @@ export function FilterEditor({
 	const [offerReapply, setOfferReapply] = useState(false);
 	const nextClauseId = useRef(0);
 
-	const preview = useRulePreview(accountId, rulePredicate(rule));
+	const { count: preview } = useRulePreview(accountId, rulePredicate(rule));
 	const update = useUpdateFilter(accountId, filter.filterId);
 	const organizeJob = useOrganizeJob(accountId);
 	const { createFolder } = useCreateMailbox(accountId);

package/src/hooks/useCreateMailbox.ts

@@ -40,16 +40,23 @@ import { composeFolderPath, validateNewFolderName } from "@/lib/new-folder";
  * `mutation` is exposed for callers that drive their own form state and want the
  * optimistic, non-waiting create (the standalone settings create).
  */
-export function useCreateMailbox(accountId: string) {
+export function useCreateMailbox(accountId: string | undefined) {
 	const queryClient = useQueryClient();
 
-	const { data } = useQuery(
-		mailboxOperationsListMailboxesOptions({ path: { accountId } }),
-	);
+	// Held by surfaces that are mounted before a selection has named an account —
+	// the selection wizard sits beside every list — so the folder list is only
+	// asked for once there is an account to ask about.
+	const { data } = useQuery({
+		...mailboxOperationsListMailboxesOptions({
+			path: { accountId: accountId ?? "" },
+		}),
+		enabled: !!accountId,
+	});
 
 	const mutation = useMutation({
 		...mailboxOperationsCreateMailboxMutation(),
 		onSuccess: () => {
+			if (!accountId) return;
 			queryClient.invalidateQueries({
 				queryKey: mailboxOperationsListMailboxesQueryKey({
 					path: { accountId },
@@ -64,6 +71,11 @@ export function useCreateMailbox(accountId: string) {
 
 	const createFolder = useCallback(
 		async (name: string, signal?: AbortSignal): Promise<FolderOption> => {
+			if (!accountId) {
+				throw new Error(
+					"No account to create the folder in. Pick messages from a single account first.",
+				);
+			}
 			const fullPath = composeFolderPath(name);
 			let mailboxId = pendingByPath.current.get(fullPath);
 			if (!mailboxId) {

package/src/hooks/useFilters.ts

@@ -60,7 +60,7 @@ export const useCreateFilter = (accountId: string | undefined) => {
 			});
 		},
 	});
-	const { mutate } = mutation;
+	const { mutate, mutateAsync } = mutation;
 
 	const createFilter = useCallback(
 		(
@@ -77,8 +77,37 @@ export const useCreateFilter = (accountId: string | undefined) => {
 		[accountId, mutate],
 	);
 
+	/**
+	 * The same create, resolved once the server has the filter, for work that has
+	 * to follow it — the pass over the mail already in the mailbox. Chaining that
+	 * to the request rather than to the surface is what keeps it running when the
+	 * surface is closed while the create is still in flight.
+	 *
+	 * `false` means the create did not land. The failure itself is on `isError`,
+	 * which is what the surface reports and retries from, so it is not raised a
+	 * second time here.
+	 */
+	const createFilterAsync = useCallback(
+		async (
+			draft: OrganizeDraft,
+			scope: Extract<OrganizeScope, "standing" | "temporary">,
+			name: string,
+		): Promise<boolean> => {
+			if (!accountId) return false;
+			return mutateAsync({
+				path: { accountId },
+				body: buildCreateFilterInput(draft, scope, name),
+			}).then(
+				() => true,
+				() => false,
+			);
+		},
+		[accountId, mutateAsync],
+	);
+
 	return {
 		createFilter,
+		createFilterAsync,
 		isPending: mutation.isPending,
 		isSuccess: mutation.isSuccess,
 		isError: mutation.isError,

package/src/hooks/useMatchSample.ts

@@ -0,0 +1,63 @@
+import { messageOperationsDescribeMessageOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapDescribeMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { senderLabel, type WizardMessage } from "@remit/ui";
+import { useQueries } from "@tanstack/react-query";
+import { formatEmailDate } from "@/lib/format";
+
+/**
+ * The members of a match, read from the server that matched them.
+ *
+ * A widened match reaches mail the list never loaded, so these rows cannot come
+ * from the browser's own cache: an intersection with whatever happens to be
+ * loaded shows a handful of rows, or none, beside a server count of hundreds —
+ * which reads as "this matches nothing", the one conclusion #477 3.5 exists to
+ * prevent. The ids the count was counted over are the match, and the server
+ * describes each of them.
+ *
+ * Bounded to the first {@link SAMPLE_LIMIT}: the screen shows a sample in its
+ * own scrolling region and states the total beside it, so describing the whole
+ * match would be requests nobody reads.
+ */
+export const SAMPLE_LIMIT = 12;
+
+export interface MatchSample {
+	messages: WizardMessage[];
+	/** No rows yet because they are still arriving, which is not "no rows". */
+	isPending: boolean;
+}
+
+const toWizardMessage = (
+	described: RemitImapDescribeMessageResponse,
+): WizardMessage => {
+	const { envelope } = described;
+	const from = envelope.from[0];
+	return {
+		id: envelope.messageId,
+		sender: from
+			? senderLabel({
+					normalizedEmail: from.normalizedEmail,
+					displayName: from.displayName,
+				})
+			: "Unknown",
+		subject: envelope.subject ?? "(No subject)",
+		date: formatEmailDate(envelope.date),
+	};
+};
+
+export const useMatchSample = (messageIds: readonly string[]): MatchSample =>
+	useQueries({
+		queries: messageIds.slice(0, SAMPLE_LIMIT).map((messageId) => ({
+			...messageOperationsDescribeMessageOptions({ path: { messageId } }),
+			staleTime: Number.POSITIVE_INFINITY,
+		})),
+		combine: (results) => ({
+			messages: results
+				.map((result) => result.data)
+				.filter(
+					(data): data is RemitImapDescribeMessageResponse =>
+						data !== undefined,
+				)
+				.map(toWizardMessage),
+			isPending: results.some((result) => result.isPending),
+		}),
+	});

package/src/hooks/useRulePreview.ts

@@ -28,12 +28,22 @@ import type { OrganizeMatchPredicate } from "@/lib/organize/sender-fallback";
  * `seedCount` is the opening count a widen probe already knows; omit it (as the
  * settings editor does, having no probe) to open on `loading` and preview the
  * loaded predicate immediately.
+ *
+ * `matchedIds` are the ids that count was counted over — the server's own
+ * answer, bounded to the same cap the apply pass uses. A caller applying an
+ * action the back-apply job cannot express (a delete, a read flag) acts on
+ * exactly these rather than paging the list in the browser (#477 5.3).
  */
+export interface RulePreview {
+	count: PreviewCount;
+	matchedIds: readonly string[];
+}
+
 export const useRulePreview = (
 	accountId: string | undefined,
 	predicate: OrganizeMatchPredicate,
 	seedCount?: number,
-): PreviewCount => {
+): RulePreview => {
 	const mutation = useMutation(organizeOperationsPreviewOrganizeMutation());
 	const { mutateAsync } = mutation;
 	const currentSignature = predicateSignature(predicate);
@@ -68,6 +78,7 @@ export const useRulePreview = (
 					if (latestRequested.current !== signature) return;
 					setState({
 						count: response.matchedCount,
+						matchedIds: response.messageIds,
 						previewedSignature: signature,
 					});
 				})
@@ -95,7 +106,16 @@ export const useRulePreview = (
 	]);
 
 	if (!countable) {
-		return { status: "error", reason: UNCOUNTABLE_PREDICATE_REASON };
+		return {
+			count: { status: "error", reason: UNCOUNTABLE_PREDICATE_REASON },
+			matchedIds: [],
+		};
 	}
-	return derivePreview(state, currentSignature);
+	return {
+		count: derivePreview(state, currentSignature),
+		matchedIds:
+			state.previewedSignature === currentSignature
+				? (state.matchedIds ?? [])
+				: [],
+	};
 };

package/src/lib/mail-context.ts

@@ -54,13 +54,6 @@ export interface MailContextValue {
 	onToggleIntelligence: () => void;
 	/** Set the pane open/closed and persist the choice (desktop default-open). */
 	onSetIntelligenceOpen: (open: boolean) => void;
-	/**
-	 * How many rows the list has ticked. The selection is owned by the list, and
-	 * surfaces mounted beside it — the selection wizard (#477) — need the same
-	 * number the bar is counting rather than one of their own.
-	 */
-	selectedCount: number;
-	onSelectedCountChange: (count: number) => void;
 }
 
 export const MailContext = createContext<MailContextValue | null>(null);
@@ -85,8 +78,6 @@ export const useMailContext = (): MailContextValue => {
 			intelligenceOpen: false,
 			onToggleIntelligence: () => {},
 			onSetIntelligenceOpen: () => {},
-			selectedCount: 0,
-			onSelectedCountChange: () => {},
 		}
 	);
 };

package/src/lib/organize/organize-model.test.ts

@@ -1,11 +1,14 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
+import type { RuleClause } from "@remit/ui";
 import {
 	buildCreateFilterInput,
 	buildOrganizeInput,
+	buildWizardDraft,
 	hasCommittableAction,
 	NO_ACTION,
 	type OrganizeDraft,
+	organizeScopeFor,
 } from "./organize-model";
 
 const baseDraft = (overrides: Partial<OrganizeDraft> = {}): OrganizeDraft => ({
@@ -130,3 +133,110 @@ describe("buildCreateFilterInput", () => {
 		assert.equal(input.actionLabelId, "lbl-1");
 	});
 });
+
+describe("organizeScopeFor", () => {
+	it("reads the ticked list at scope once as just-these", () => {
+		assert.equal(organizeScopeFor({ mode: "selected" }), "just-these");
+		assert.equal(
+			organizeScopeFor({ mode: "selected", ruleScope: "once" }),
+			"just-these",
+		);
+	});
+
+	it("reads either widened door at scope once as all-like-these", () => {
+		assert.equal(organizeScopeFor({ mode: "similar" }), "all-like-these");
+		assert.equal(
+			organizeScopeFor({ mode: "properties", ruleScope: "once" }),
+			"all-like-these",
+		);
+	});
+
+	it("reads the two persisting scopes off the scope answer alone", () => {
+		for (const mode of ["selected", "similar", "properties"] as const) {
+			assert.equal(
+				organizeScopeFor({ mode, ruleScope: "standing" }),
+				"standing",
+			);
+			assert.equal(organizeScopeFor({ mode, ruleScope: "until" }), "temporary");
+		}
+	});
+});
+
+describe("buildWizardDraft", () => {
+	const clauses: RuleClause[] = [
+		{ id: "c1", field: "From", value: "noreply@booking.com" },
+	];
+
+	it("turns the until scope's civil date into a zoned expiresAt", () => {
+		const draft = buildWizardDraft({
+			mode: "properties",
+			ruleScope: "until",
+			clauses,
+			matchOperator: "any",
+			moveMailboxId: "mbx-2",
+			until: "2026-09-30",
+		});
+		assert.match(
+			draft.expiresAt ?? "",
+			/^2026-09-30T23:59:59[+-]\d{2}:\d{2}$/,
+			"the day the rule stops on becomes an instant with an offset",
+		);
+	});
+
+	it("carries no expiry for the scopes that never expire", () => {
+		for (const ruleScope of ["once", "standing"] as const) {
+			const draft = buildWizardDraft({
+				mode: "properties",
+				ruleScope,
+				clauses,
+				matchOperator: "all",
+				until: "2026-09-30",
+			});
+			assert.equal(draft.expiresAt, undefined);
+		}
+	});
+
+	it("anchors on the ticked messages only while the similar door is matching", () => {
+		const anchored = buildWizardDraft({
+			mode: "similar",
+			anchorMessageId: "msg-1",
+			clauses: [],
+			matchOperator: "all",
+		});
+		assert.equal(anchored.anchorMessageId, "msg-1");
+
+		const literal = buildWizardDraft({
+			mode: "properties",
+			anchorMessageId: "msg-1",
+			clauses,
+			matchOperator: "any",
+		});
+		assert.equal("anchorMessageId" in literal, false);
+	});
+
+	it("maps the wizard's operator onto the API's", () => {
+		assert.equal(
+			buildWizardDraft({ mode: "properties", clauses, matchOperator: "all" })
+				.matchOperator,
+			"And",
+		);
+		assert.equal(
+			buildWizardDraft({ mode: "properties", clauses, matchOperator: "any" })
+				.matchOperator,
+			"Or",
+		);
+	});
+
+	it("sends the clause field and value, and nothing the chip carries besides", () => {
+		const draft = buildWizardDraft({
+			mode: "properties",
+			clauses: [
+				{ id: "c1", field: "Subject", value: "receipt", derived: true },
+			],
+			matchOperator: "all",
+		});
+		assert.deepEqual(draft.literalClauses, [
+			{ field: "Subject", value: "receipt" },
+		]);
+	});
+});

package/src/lib/organize/organize-model.ts

@@ -5,6 +5,13 @@ import type {
 	RemitImapFilterScope,
 	RemitImapOrganizeInput,
 } from "@remit/api-http-client/types.gen.ts";
+import type {
+	MatchMode,
+	MatchOperator,
+	RuleClause,
+	RuleScope,
+} from "@remit/ui";
+import { pickedDateToExpiresAt } from "./filter-status";
 
 /**
  * The four commit scopes the smart-organize sentence offers (RFC 034 recap):
@@ -92,6 +99,68 @@ export const buildOrganizeInput = (
 	actionMailboxId: draft.moveMailboxId ?? NO_ACTION,
 });
 
+/**
+ * The two independent answers the wizard collects (#477 4.6). Neither is a
+ * scope: the door says what the action covers and the scope step says how long
+ * it holds, and the four `OrganizeScope` values fall out of the pair.
+ */
+export interface WizardCommitAnswers {
+	mode: MatchMode;
+	/** Absent on the verbs that never reach the scope step — those act once. */
+	ruleScope?: RuleScope;
+}
+
+/**
+ * Which of the four commit scopes the wizard's answers add up to. Reconstructed
+ * here and nowhere else, so a driver cannot invent a fifth: the ticked list at
+ * scope once is `just-these`, a widened door at scope once is `all-like-these`,
+ * and the two persisting scopes are `standing` and `temporary`.
+ */
+export const organizeScopeFor = ({
+	mode,
+	ruleScope,
+}: WizardCommitAnswers): OrganizeScope => {
+	if (ruleScope === "standing") return "standing";
+	if (ruleScope === "until") return "temporary";
+	return mode === "selected" ? "just-these" : "all-like-these";
+};
+
+export interface WizardDraftInput extends WizardCommitAnswers {
+	/** The semantic anchor, present only while the similar door is the matcher. */
+	anchorMessageId?: string;
+	clauses: readonly RuleClause[];
+	matchOperator: MatchOperator;
+	moveMailboxId?: string;
+	/** ISO 8601 civil date (`YYYY-MM-DD`) the `until` scope stops on. */
+	until?: string;
+}
+
+/**
+ * The commit draft for a set of wizard answers. This is where the `until`
+ * scope's civil date becomes `expiresAt`, a zoned date-time (#477 5.4): the
+ * wizard collects the day the rule stops on, and the day only becomes an
+ * instant once there is a draft to carry it.
+ */
+export const buildWizardDraft = ({
+	mode,
+	ruleScope,
+	anchorMessageId,
+	clauses,
+	matchOperator,
+	moveMailboxId,
+	until,
+}: WizardDraftInput): OrganizeDraft => ({
+	...(mode === "similar" && anchorMessageId ? { anchorMessageId } : {}),
+	matchOperator: matchOperator === "all" ? "And" : "Or",
+	literalClauses: clauses.map((clause) => ({
+		field: clause.field,
+		value: clause.value,
+	})),
+	moveMailboxId,
+	expiresAt:
+		ruleScope === "until" ? pickedDateToExpiresAt(until ?? "") : undefined,
+});
+
 /**
  * Build the `createFilter` body for a standing or temporary filter. `ttl` is
  * derived server-side from `expiresAt`; `expiresAt` is sent only for the

package/src/lib/organize/rule-model.ts

@@ -254,6 +254,8 @@ export const ruleToDraft = (
 export interface PreviewState {
 	/** The last count that came back, `undefined` before the first lands. */
 	count?: number;
+	/** The ids that count was counted over, as the server bounded them. */
+	matchedIds?: readonly string[];
 	/** The signature the {@link count} was counted for. */
 	previewedSignature?: string;
 	/** The signature the last error was raised for. */

package/src/lib/wizard-history.ts

@@ -52,6 +52,21 @@ export const ownedHistoryEntries = (
 export const useWizardStepValue = (): StepId | undefined =>
 	useSearch({ from: "/mail", select: (search) => search.wizard });
 
+/**
+ * Opens the wizard on a step, from a surface that does not drive it — a verb on
+ * the selection bar. The push is the wizard's first owned entry, so the back
+ * that leaves it lands on the list with the selection still ticked.
+ */
+export const useOpenWizard = (): ((step: StepId) => void) => {
+	const navigate = useNavigate();
+	return useCallback(
+		(step: StepId) => {
+			navigate({ to: ".", search: (prev) => ({ ...prev, wizard: step }) });
+		},
+		[navigate],
+	);
+};
+
 export interface WizardStepNavigation {
 	step: StepId | undefined;
 	goToStep: (step: StepId) => void;

package/src/routes/mail.tsx

@@ -21,7 +21,6 @@ import { FlaggedPane } from "@/components/mail/FlaggedPane";
 import { MailboxPane } from "@/components/mail/MailboxPane";
 import { MailNav } from "@/components/mail/MailNav";
 import { OutboxPane } from "@/components/mail/OutboxPane";
-import { SelectionWizardHost } from "@/components/mail/SelectionWizardHost";
 import { ErrorState } from "@/components/ui/ErrorState";
 import { KeyboardShortcutsModal } from "@/components/ui/KeyboardShortcutsModal";
 import { useDebouncedValue } from "@/hooks/useDebouncedValue";
@@ -97,9 +96,6 @@ function MailLayout() {
 	// collapse preference there (#782). DKIM-mismatch auto-open still fires on
 	// every tier. Explicit toggles persist the user's choice.
 	const [intelligenceOpen, setIntelligenceOpen] = useState(false);
-	// The list owns the selection; the wizard is mounted here, beside it, and
-	// counts the same rows the selection bar is counting.
-	const [selectedCount, setSelectedCount] = useState(0);
 	const handleSetIntelligenceOpen = useCallback((open: boolean) => {
 		setIntelligenceOpen(open);
 		writeIntelligencePref(open);
@@ -312,8 +308,6 @@ function MailLayout() {
 		intelligenceOpen,
 		onToggleIntelligence: handleToggleIntelligence,
 		onSetIntelligenceOpen: handleSetIntelligenceOpen,
-		selectedCount,
-		onSelectedCountChange: setSelectedCount,
 	};
 
 	// Single nav node: the kit renders it as a pane (≥1024px) or inside its
@@ -478,7 +472,6 @@ function MailLayout() {
 				isOpen={showShortcuts}
 				onClose={() => setShowShortcuts(false)}
 			/>
-			<SelectionWizardHost verb="organize" selectedCount={selectedCount} />
 			{/* Outlet is required for TanStack Router to activate child routes.
 			    Routes that manage their own rendering (brief, mailbox, outbox) return
 			    null from their component — the parent shell owns the layout. */}

package/src/components/mail/organize/MobileOrganizeFlow.render.test.ts

@@ -1,45 +0,0 @@
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import React, { createElement } from "react";
-import { renderToString } from "react-dom/server";
-import { ErrorBannerProvider } from "@/components/ui/ErrorBannerProvider";
-import type { OrganizeEntry } from "@/lib/organize/mobile-organize-flow";
-import { MobileOrganizeFlow } from "./MobileOrganizeFlow";
-
-// The node test loader transpiles remit-ui's `.tsx` with the classic JSX
-// runtime, which references a global `React`. Vite uses the automatic runtime,
-// so this shim only exists for the SSR test harness.
-(globalThis as { React?: typeof React }).React = React;
-
-const render = (entry: OrganizeEntry) =>
-	renderToString(
-		createElement(
-			QueryClientProvider,
-			{ client: new QueryClient() },
-			createElement(
-				ErrorBannerProvider,
-				null,
-				createElement(MobileOrganizeFlow, {
-					entry,
-					accountId: "acc-1",
-					selectedMessageIds: ["msg-1", "msg-2"],
-					selectedSenders: ["npm@github.com"],
-					onClose: () => undefined,
-				}),
-			),
-		) as never,
-	);
-
-describe("MobileOrganizeFlow", () => {
-	it("select-similar opens on the widening state before the preview resolves", () => {
-		const html = render("select-similar");
-		assert.match(html, /Finding similar messages/);
-	});
-
-	it("something-else opens on the shortcuts + plain-language input", () => {
-		const html = render("something-else");
-		assert.match(html, /What should Remit do\?/);
-		assert.match(html, /Tell Remit what to do/);
-	});
-});