@remit/web-client 0.0.66 → 0.0.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.66",
+  "version": "0.0.68",
   "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/MailListHeader.tsx

@@ -39,11 +39,15 @@ import {
 	useAppShellLayout,
 } from "@remit/ui";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
-import { type ReactNode, useEffect, useRef, useState } from "react";
+import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { isSinglePaneTier, useLayoutTier } from "@/hooks/useLayoutTier";
 import { useSearchScope } from "@/hooks/useSearchScope";
 import { useSearchTokenContext } from "@/hooks/useSearchTokenContext";
 import { useMailContext } from "@/lib/mail-context";
+import {
+	convertSearchToRule,
+	isConvertible,
+} from "@/lib/organize/search-to-rule";
 import { loadRecentSearches, saveRecentSearch } from "@/lib/recent-searches";
 import { resultsScopeForRoute, routeMailboxId } from "@/lib/search-scope";
 import { showInlineSearchResults } from "@/lib/search-surface";
@@ -53,6 +57,7 @@ import {
 	searchTokenLabel,
 } from "@/lib/search-tokens";
 import { spamOfferForResults } from "@/lib/spam-offer";
+import { SearchFilterDialog } from "./organize/SearchFilterDialog";
 
 interface MailListHeaderProps {
 	title: string;
@@ -120,6 +125,7 @@ export function MailListHeader({
 	const tier = useLayoutTier();
 	const [searchOpen, setSearchOpen] = useState(false);
 	const [recentSearches, setRecentSearches] = useState(loadRecentSearches);
+	const [filterOpen, setFilterOpen] = useState(false);
 
 	// 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
@@ -138,12 +144,18 @@ export function MailListHeader({
 	// parse runs through `useSearchTokenContext`, the same one the engines use,
 	// so a chip appears only for a term that is actually being applied — on a
 	// scoped view `in:` is not resolved and so is never chipped here.
-	const tokenChips = parseSearchTokens(searchInput, tokenContext).tokens.map(
-		(token) => ({
-			label: searchTokenLabel(token),
-			onRemove: () => onSearchChange(removeSearchToken(searchInput, token)),
-		}),
+	// Memoized on the stable name indexes (not the fresh context object) so the
+	// filter dialog receives a stable parse and does not re-run its seed preview
+	// every render.
+	const { mailboxesByName, accountsByName } = tokenContext;
+	const parsed = useMemo(
+		() => parseSearchTokens(searchInput, { mailboxesByName, accountsByName }),
+		[searchInput, mailboxesByName, accountsByName],
 	);
+	const tokenChips = parsed.tokens.map((token) => ({
+		label: searchTokenLabel(token),
+		onRemove: () => onSearchChange(removeSearchToken(searchInput, token)),
+	}));
 	const topMatches = searchResults ?? [];
 	const related = relatedResults ?? [];
 	// Always offer both sections while a query is present; the kit drops the empty
@@ -195,6 +207,39 @@ 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. 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).
+	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 filterDialog =
+		filterOpen && targetAccountId ? (
+			<SearchFilterDialog
+				open={filterOpen}
+				accountId={targetAccountId}
+				parsed={parsed}
+				searchHadSemanticReach={searchHadSemanticReach}
+				onClose={() => setFilterOpen(false)}
+			/>
+		) : null;
+
 	if (tier === "phone" && searchOpen) {
 		const handleSelectResult = (result: SearchResult) => {
 			setRecentSearches(saveRecentSearch(searchInput));
@@ -202,23 +247,27 @@ export function MailListHeader({
 			onSelectSearchResult?.(result);
 		};
 		return (
-			<MobileSearchView
-				value={searchInput}
-				onChange={onSearchChange}
-				onClear={onSearchClear}
-				onCancel={() => {
-					setSearchOpen(false);
-					onSearchClear();
-				}}
-				filter={searchFilter}
-				recentSearches={recentSearches}
-				onPickRecent={onSearchChange}
-				sections={sections}
-				loading={resultsLoading}
-				onSelectResult={handleSelectResult}
-				tokens={tokenChips}
-				scope={resultsScope}
-			/>
+			<>
+				<MobileSearchView
+					value={searchInput}
+					onChange={onSearchChange}
+					onClear={onSearchClear}
+					onCancel={() => {
+						setSearchOpen(false);
+						onSearchClear();
+					}}
+					filter={searchFilter}
+					recentSearches={recentSearches}
+					onPickRecent={onSearchChange}
+					makeFilter={makeFilter}
+					sections={sections}
+					loading={resultsLoading}
+					onSelectResult={handleSelectResult}
+					tokens={tokenChips}
+					scope={resultsScope}
+				/>
+				{filterDialog}
+			</>
 		);
 	}
 
@@ -247,6 +296,7 @@ export function MailListHeader({
 			onSelectResult={handleSelectInlineResult}
 			tokens={tokenChips}
 			scope={resultsScope}
+			makeFilter={makeFilter}
 		/>
 	);
 	const body = !showInlineResults ? (
@@ -280,6 +330,7 @@ export function MailListHeader({
 			/>
 			<div className="min-h-0 flex-1">{body}</div>
 			{footer}
+			{filterDialog}
 		</section>
 	);
 }

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

@@ -1,29 +1,30 @@
 import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import {
-	Button,
-	type ClauseEditState,
-	type ClauseField,
 	type FilterRule,
 	FilterRuleEditor,
 	type FolderOption,
-	type MatchOperator,
 	type RuleScope,
 } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
-import { CheckCircle2, Loader2 } from "lucide-react";
-import { useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
 import { useCreateFilter } from "@/hooks/useFilters";
 import { useOrganizeJob } from "@/hooks/useOrganizeJob";
+import { useRuleEditorState } from "@/hooks/useRuleEditorState";
 import { useRulePreview } from "@/hooks/useRulePreview";
 import { getMailboxDisplayName } from "@/lib/folder-roles";
 import { buildMoveTargets } from "@/lib/move-targets";
 import {
 	buildInitialRule,
-	normalizeClauseValue,
 	rulePredicate,
 	ruleToDraft,
 	SUPPORTED_CLAUSE_FIELDS,
 } from "@/lib/organize/rule-model";
+import {
+	CommitError,
+	FilterSaved,
+	JobProgress,
+	SavingState,
+} from "./rule-editor-states";
 
 interface OrganizeRuleEditorProps {
 	accountId: string;
@@ -66,7 +67,7 @@ export function OrganizeRuleEditor({
 	const anchorMessageId = selectedMessageIds[0];
 	const senderFallback = semanticUnavailable && senders.length > 0;
 
-	const [rule, setRule] = useState<FilterRule>(() =>
+	const [initialRule] = useState<FilterRule>(() =>
 		buildInitialRule({
 			anchorMessageId,
 			semanticUnavailable,
@@ -76,8 +77,10 @@ export function OrganizeRuleEditor({
 			seedScope,
 		}),
 	);
-	const [clauseEdit, setClauseEdit] = useState<ClauseEditState | undefined>();
-	const nextClauseId = useRef(0);
+	const { rule, handlers } = useRuleEditorState({
+		initialRule,
+		widenAnchorCount: selectedMessageIds.length,
+	});
 
 	const { data: mailboxesData } = useQuery({
 		...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
@@ -102,93 +105,6 @@ export function OrganizeRuleEditor({
 	const organizeJob = useOrganizeJob(accountId);
 	const createFilter = useCreateFilter(accountId);
 
-	const startAddClause = () =>
-		setClauseEdit({
-			mode: "add",
-			draft: { field: SUPPORTED_CLAUSE_FIELDS[0], value: "" },
-		});
-
-	const startEditClause = (clauseId: string) => {
-		const clause = rule.clauses.find((entry) => entry.id === clauseId);
-		if (!clause) return;
-		setClauseEdit({
-			mode: "edit",
-			clauseId,
-			draft: { field: clause.field, value: clause.value },
-		});
-	};
-
-	const changeDraftField = (field: ClauseField) =>
-		setClauseEdit((edit) =>
-			edit ? { ...edit, draft: { ...edit.draft, field } } : edit,
-		);
-
-	const changeDraftValue = (value: string) =>
-		setClauseEdit((edit) =>
-			edit ? { ...edit, draft: { ...edit.draft, value } } : edit,
-		);
-
-	const submitClause = () => {
-		if (!clauseEdit) return;
-		const field = clauseEdit.draft.field;
-		const value = normalizeClauseValue(field, clauseEdit.draft.value);
-		if (value === "") return;
-		setRule((current) => {
-			if (clauseEdit.mode === "edit" && clauseEdit.clauseId) {
-				return {
-					...current,
-					clauses: current.clauses.map((clause) =>
-						clause.id === clauseEdit.clauseId
-							? { id: clause.id, field, value }
-							: clause,
-					),
-				};
-			}
-			nextClauseId.current += 1;
-			return {
-				...current,
-				clauses: [
-					...current.clauses,
-					{ id: `clause-${nextClauseId.current}`, field, value },
-				],
-			};
-		});
-		setClauseEdit(undefined);
-	};
-
-	const removeClause = (clauseId: string) =>
-		setRule((current) => ({
-			...current,
-			clauses: current.clauses.filter((clause) => clause.id !== clauseId),
-		}));
-
-	const addWiden = () =>
-		setRule((current) => ({
-			...current,
-			widen: { anchorCount: Math.max(selectedMessageIds.length, 1) },
-		}));
-
-	const removeWiden = () =>
-		setRule((current) => ({ ...current, widen: undefined }));
-
-	const changeMatchOperator = (matchOperator: MatchOperator) =>
-		setRule((current) => ({ ...current, matchOperator }));
-
-	const changeMove = (mailboxId: string) =>
-		setRule((current) => ({
-			...current,
-			moveMailboxId: mailboxId || undefined,
-		}));
-
-	const changeScope = (scope: RuleScope) =>
-		setRule((current) => ({ ...current, scope }));
-
-	const changeName = (name: string) =>
-		setRule((current) => ({ ...current, name }));
-
-	const changeUntil = (until: string) =>
-		setRule((current) => ({ ...current, until }));
-
 	const commit = () => {
 		const draft = ruleToDraft(rule, anchorMessageId);
 		if (rule.scope === "once") {
@@ -207,7 +123,11 @@ export function OrganizeRuleEditor({
 			<JobProgress
 				progress={organizeJob.progress}
 				isDone={organizeJob.isDone}
-				senderFallback={senderFallback}
+				runningLabel={
+					senderFallback
+						? "Organizing mail from these senders…"
+						: "Organizing similar mail…"
+				}
 				onClose={onClose}
 			/>
 		);
@@ -232,130 +152,9 @@ export function OrganizeRuleEditor({
 			preview={preview}
 			semanticAvailable={!semanticUnavailable}
 			clauseFields={SUPPORTED_CLAUSE_FIELDS}
-			clauseEdit={clauseEdit}
-			onStartAddClause={startAddClause}
-			onStartEditClause={startEditClause}
-			onRemoveClause={removeClause}
-			onChangeDraftField={changeDraftField}
-			onChangeDraftValue={changeDraftValue}
-			onSubmitClause={submitClause}
-			onCancelClause={() => setClauseEdit(undefined)}
-			onAddWiden={addWiden}
-			onRemoveWiden={removeWiden}
-			onChangeMatchOperator={changeMatchOperator}
-			onChangeMove={changeMove}
-			onChangeScope={changeScope}
-			onChangeName={changeName}
-			onChangeUntil={changeUntil}
+			{...handlers}
 			onCommit={commit}
 			onCancel={onClose}
 		/>
 	);
 }
-
-function JobProgress({
-	progress,
-	isDone,
-	senderFallback,
-	onClose,
-}: {
-	progress: ReturnType<typeof useOrganizeJob>["progress"];
-	isDone: boolean;
-	senderFallback: boolean;
-	onClose: () => void;
-}) {
-	const failed = progress.state === "Failed";
-	return (
-		<div className="flex flex-col items-center gap-3 px-5 py-8 text-center">
-			{!isDone ? (
-				<Loader2 className="size-8 animate-spin text-accent-2" />
-			) : failed ? (
-				<span className="text-sm font-semibold text-danger">
-					Organize failed
-				</span>
-			) : (
-				<CheckCircle2 className="size-8 text-positive" />
-			)}
-
-			{!isDone && (
-				<p className="text-sm font-medium text-fg">
-					{senderFallback
-						? "Organizing mail from these senders…"
-						: "Organizing similar mail…"}
-				</p>
-			)}
-
-			{isDone && !failed && (
-				<div className="text-sm text-fg">
-					<p className="font-medium">Done</p>
-					<p className="mt-1 text-xs text-fg-muted">
-						{progress.appliedCount} of {progress.matchedCount} moved
-						{progress.failedCount > 0
-							? ` · ${progress.failedCount} failed`
-							: ""}
-						.
-					</p>
-				</div>
-			)}
-
-			{isDone && failed && (
-				<p className="max-w-xs text-xs text-fg-muted">
-					{progress.errorMessage || "Something went wrong. Please try again."}
-				</p>
-			)}
-
-			{isDone && (
-				<Button variant="primary" onClick={onClose} className="mt-2">
-					Done
-				</Button>
-			)}
-		</div>
-	);
-}
-
-function SavingState() {
-	return (
-		<div className="flex flex-col items-center gap-3 px-5 py-10 text-center">
-			<Loader2 className="size-8 animate-spin text-accent-2" />
-			<p className="text-sm font-medium text-fg">Saving rule…</p>
-		</div>
-	);
-}
-
-function FilterSaved({ onClose }: { onClose: () => void }) {
-	return (
-		<div className="flex flex-col items-center gap-3 px-5 py-8 text-center">
-			<CheckCircle2 className="size-8 text-positive" />
-			<p className="text-sm font-medium text-fg">Filter saved</p>
-			<p className="max-w-xs text-xs text-fg-muted">
-				You can see it, and when it expires, under Settings › Filters.
-			</p>
-			<Button variant="primary" onClick={onClose} className="mt-2">
-				Done
-			</Button>
-		</div>
-	);
-}
-
-function CommitError({
-	onRetry,
-	onClose,
-}: {
-	onRetry: () => void;
-	onClose: () => void;
-}) {
-	return (
-		<div className="flex flex-col items-center gap-3 px-5 py-8 text-center">
-			<p className="text-sm font-medium text-danger">Couldn't save the rule</p>
-			<p className="max-w-xs text-xs text-fg-muted">Please try again.</p>
-			<div className="mt-2 flex gap-2">
-				<Button variant="primary" onClick={onRetry}>
-					Try again
-				</Button>
-				<Button variant="ghost" onClick={onClose}>
-					Not now
-				</Button>
-			</div>
-		</div>
-	);
-}

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

@@ -0,0 +1,36 @@
+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 { parseSearchTokens } from "@/lib/search-tokens";
+import { SearchFilterDialog } from "./SearchFilterDialog";
+
+// The node test loader transpiles remit-ui's `.tsx` with the classic JSX
+// runtime, which references a global `React`.
+(globalThis as { React?: typeof React }).React = React;
+
+const render = (open: boolean) =>
+	renderToString(
+		createElement(
+			QueryClientProvider,
+			{ client: new QueryClient() },
+			createElement(SearchFilterDialog, {
+				open,
+				accountId: "acc-1",
+				parsed: parseSearchTokens("receipts", {}),
+				searchHadSemanticReach: true,
+				onClose: () => undefined,
+			}),
+		) as never,
+	);
+
+describe("SearchFilterDialog", () => {
+	it("renders nothing when closed", () => {
+		assert.equal(render(false), "");
+	});
+
+	it("shows the conversion step while the seed preview is in flight", () => {
+		assert.match(render(true), /Turning your search into a filter/);
+	});
+});

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

@@ -0,0 +1,91 @@
+import { Button, Dialog } from "@remit/ui";
+import { Loader2 } from "lucide-react";
+import { useMemo } from "react";
+import { useSearchFilterSeed } from "@/hooks/useSearchFilterSeed";
+import { rulePredicate } from "@/lib/organize/rule-model";
+import {
+	buildSearchRule,
+	convertSearchToRule,
+} from "@/lib/organize/search-to-rule";
+import type { ParsedSearchQuery } from "@/lib/search-tokens";
+import { SearchFilterEditor } from "./SearchFilterEditor";
+
+interface SearchFilterDialogProps {
+	open: boolean;
+	/** The account the filter is created for (an `account:` facet, else the active account). */
+	accountId: string;
+	/** The current search, already split into free text and facets. */
+	parsed: ParsedSearchQuery;
+	/**
+	 * The search surfaced semantically-similar mail (a non-empty "Related"
+	 * section). The literal filter cannot reproduce that reach, so the conversion
+	 * states it — read from the search's own results, never probed (RFC 038 D5).
+	 */
+	searchHadSemanticReach: boolean;
+	onClose: () => void;
+}
+
+/**
+ * "Make this a filter" (RFC 038 D5). Converts the current search to clauses and
+ * hands off to the shared chip editor pre-filled. No new endpoint: the seed
+ * count rides `POST /organize/preview` and the commit drives the existing filter
+ * CRUD.
+ */
+export function SearchFilterDialog({
+	open,
+	accountId,
+	parsed,
+	searchHadSemanticReach,
+	onClose,
+}: SearchFilterDialogProps) {
+	const conversion = useMemo(
+		() => convertSearchToRule(parsed, { searchHadSemanticReach }),
+		[parsed, searchHadSemanticReach],
+	);
+	const literalPredicate = useMemo(
+		() => rulePredicate(buildSearchRule(conversion)),
+		[conversion],
+	);
+
+	const { seedCount, isPending, isError, retry } = useSearchFilterSeed(
+		open ? accountId : undefined,
+		literalPredicate,
+	);
+
+	if (!open) return null;
+
+	return (
+		<Dialog open={open} onClose={onClose} title="Filter rule">
+			{isError ? (
+				<div className="flex flex-col items-center gap-3 px-5 py-8 text-center">
+					<p className="text-sm font-medium text-danger">
+						Couldn't build the filter
+					</p>
+					<p className="max-w-xs text-xs text-fg-muted">Please try again.</p>
+					<div className="mt-2 flex gap-2">
+						<Button variant="primary" onClick={retry}>
+							Try again
+						</Button>
+						<Button variant="ghost" onClick={onClose}>
+							Not now
+						</Button>
+					</div>
+				</div>
+			) : isPending || seedCount === undefined ? (
+				<div className="flex flex-col items-center gap-3 px-5 py-10 text-center">
+					<Loader2 className="size-8 animate-spin text-accent-2" />
+					<p className="text-sm font-medium text-fg">
+						Turning your search into a filter…
+					</p>
+				</div>
+			) : (
+				<SearchFilterEditor
+					accountId={accountId}
+					conversion={conversion}
+					seedCount={seedCount}
+					onClose={onClose}
+				/>
+			)}
+		</Dialog>
+	);
+}