@remit/web-client 0.0.65 → 0.0.67

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

@@ -0,0 +1,361 @@
+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 { useCreateFilter } from "@/hooks/useFilters";
+import { useOrganizeJob } from "@/hooks/useOrganizeJob";
+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";
+
+interface OrganizeRuleEditorProps {
+	accountId: string;
+	selectedMessageIds: string[];
+	/** The widen probe's matched total — seeds the live count without a re-fetch. */
+	seedCount: number;
+	/**
+	 * The deployment ships no vector pipeline, so the widen cannot run. The rule
+	 * opens on the sender-fallback `From` chips instead of the anchor.
+	 */
+	semanticUnavailable?: boolean;
+	/** Distinct sender addresses, for the fallback clauses and the progress copy. */
+	senders?: string[];
+	/** A folder a "Something else" shortcut pre-picked. */
+	seedMailboxId?: string;
+	/** A scope a "Something else" shortcut pre-picked. */
+	seedScope?: RuleScope;
+	onClose: () => void;
+}
+
+/**
+ * The Organize surface as the chip editor (RFC 038 D1). The rule is rendered and
+ * edited over the existing preview/apply endpoints: clause chips, a
+ * match-operator toggle, a move action, and a scope that maps one-time apply to
+ * a back-apply job and standing/until to a `Filter`. The count is live and the
+ * commit gate holds apply until it settles, so the set the editor shows is the
+ * set a commit acts on. Rendered inside the desktop dialog and the mobile sheet
+ * alike, so the two cannot drift.
+ */
+export function OrganizeRuleEditor({
+	accountId,
+	selectedMessageIds,
+	seedCount,
+	semanticUnavailable = false,
+	senders = [],
+	seedMailboxId,
+	seedScope,
+	onClose,
+}: OrganizeRuleEditorProps) {
+	const anchorMessageId = selectedMessageIds[0];
+	const senderFallback = semanticUnavailable && senders.length > 0;
+
+	const [rule, setRule] = useState<FilterRule>(() =>
+		buildInitialRule({
+			anchorMessageId,
+			semanticUnavailable,
+			senders,
+			selectionCount: selectedMessageIds.length,
+			seedMailboxId,
+			seedScope,
+		}),
+	);
+	const [clauseEdit, setClauseEdit] = useState<ClauseEditState | undefined>();
+	const nextClauseId = useRef(0);
+
+	const { data: mailboxesData } = useQuery({
+		...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
+		staleTime: Number.POSITIVE_INFINITY,
+	});
+
+	const folders: FolderOption[] = useMemo(
+		() =>
+			buildMoveTargets(mailboxesData?.items ?? []).map((mailbox) => ({
+				id: mailbox.mailboxId,
+				label: getMailboxDisplayName(mailbox.fullPath),
+			})),
+		[mailboxesData?.items],
+	);
+
+	const preview = useRulePreview(
+		accountId,
+		rulePredicate(rule, anchorMessageId),
+		seedCount,
+	);
+
+	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") {
+			organizeJob.start(draft);
+			return;
+		}
+		createFilter.createFilter(
+			draft,
+			rule.scope === "standing" ? "standing" : "temporary",
+			(rule.name ?? "").trim(),
+		);
+	};
+
+	if (organizeJob.isStarting || organizeJob.isRunning || organizeJob.isDone) {
+		return (
+			<JobProgress
+				progress={organizeJob.progress}
+				isDone={organizeJob.isDone}
+				senderFallback={senderFallback}
+				onClose={onClose}
+			/>
+		);
+	}
+
+	if (createFilter.isPending) {
+		return <SavingState />;
+	}
+
+	if (createFilter.isSuccess) {
+		return <FilterSaved onClose={onClose} />;
+	}
+
+	if (createFilter.isError) {
+		return <CommitError onRetry={createFilter.reset} onClose={onClose} />;
+	}
+
+	return (
+		<FilterRuleEditor
+			rule={rule}
+			folders={folders}
+			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}
+			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/smart-organize.stories.tsx

@@ -5,18 +5,17 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { ReactNode } from "react";
 import { ErrorBannerProvider } from "@/components/ui/ErrorBannerProvider";
-import { OrganizePanel } from "./OrganizePanel";
+import { OrganizeRuleEditor } from "./OrganizeRuleEditor";
 import type { FolderOption } from "./SomethingElsePanel";
 import { SomethingElsePanel } from "./SomethingElsePanel";
 
 /**
- * `Flows/Smart Organize` — the guided select-similar → organize flow (issue
- * #211), rendered from the real web-client components, not a prototype copy:
- * the same {@link OrganizePanel} the desktop dialog and the mobile sheet use,
- * and the same {@link SomethingElsePanel} the flow seeds from. The prototype's
- * interactive `Inbox` / `Walkthrough` stories live alongside these in the
- * workbench; these show each in-sheet panel in isolation so they can't drift
- * from what ships.
+ * `Flows/Smart Organize` — the Organize surface as the chip editor (RFC 038 D1),
+ * rendered from the real web-client component the desktop dialog and the mobile
+ * sheet both mount, not a prototype copy. Each story opens the editor on a
+ * seeded state — a widen-anchored rule, the sender-fallback clauses (#251), a
+ * pre-seeded standing rule, and the capability-absent cases — so the surface
+ * can't drift from what ships.
  */
 
 const ACCOUNT_ID = "acc-1";
@@ -57,8 +56,8 @@ const FOLDER_OPTIONS: FolderOption[] = [
 ];
 
 /**
- * A QueryClient pre-seeded with the account's mailboxes, so the sentence's
- * folder picker renders its real options without a network round-trip.
+ * A QueryClient pre-seeded with the account's mailboxes, so the editor's folder
+ * picker renders its real options without a network round-trip.
  */
 function seededClient(): QueryClient {
 	const client = new QueryClient({
@@ -71,7 +70,7 @@ function seededClient(): QueryClient {
 	return client;
 }
 
-/** Phone frame + a bottom sheet holding the panel, mirroring the mobile home. */
+/** Phone frame + a bottom sheet holding the editor, mirroring the mobile home. */
 function SheetStage({ children }: { children: ReactNode }) {
 	return (
 		<QueryClientProvider client={seededClient()}>
@@ -109,44 +108,29 @@ export default meta;
 
 type Story = StoryObj;
 
-/** The organize sentence on a widened selection — folder picker + four scopes. */
+/** The rule editor on a widened selection — the widen chip and a live count. */
 export const Organize: Story = {
 	render: () => (
 		<SheetStage>
-			<OrganizePanel
+			<OrganizeRuleEditor
 				accountId={ACCOUNT_ID}
-				mailboxId="mbx-inbox"
 				selectedMessageIds={["msg-1", "msg-2", "msg-3"]}
-				matchPredicate={{
-					anchorMessageId: "msg-1",
-					matchOperator: "And",
-					literalClauses: [],
-				}}
-				matchedCount={47}
+				seedCount={47}
 				onClose={() => undefined}
 			/>
 		</SheetStage>
 	),
 };
 
-/**
- * A larger widen — the same sentence over a broad match set, as when the anchor
- * is a common sender.
- */
+/** A larger widen — the same editor over a broad match set. */
 export const FromSearch: Story = {
 	name: "From Search",
 	render: () => (
 		<SheetStage>
-			<OrganizePanel
+			<OrganizeRuleEditor
 				accountId={ACCOUNT_ID}
-				mailboxId="mbx-inbox"
 				selectedMessageIds={["msg-1"]}
-				matchPredicate={{
-					anchorMessageId: "msg-1",
-					matchOperator: "And",
-					literalClauses: [],
-				}}
-				matchedCount={412}
+				seedCount={412}
 				seedMailboxId="mbx-archive"
 				onClose={() => undefined}
 			/>
@@ -154,22 +138,16 @@ export const FromSearch: Story = {
 	),
 };
 
-/** The standing scope pre-selected — the "Always keep…" sentence + filter name. */
+/** The standing scope pre-selected — the rule that keeps working on new mail. */
 export const AlwaysRule: Story = {
 	name: "Always Rule",
 	render: () => (
 		<SheetStage>
-			<OrganizePanel
+			<OrganizeRuleEditor
 				accountId={ACCOUNT_ID}
-				mailboxId="mbx-inbox"
 				selectedMessageIds={["msg-1", "msg-2"]}
-				matchPredicate={{
-					anchorMessageId: "msg-1",
-					matchOperator: "And",
-					literalClauses: [],
-				}}
-				matchedCount={47}
-				initialScope="standing"
+				seedCount={47}
+				seedScope="standing"
 				seedMailboxId="mbx-travel"
 				onClose={() => undefined}
 			/>
@@ -177,47 +155,19 @@ export const AlwaysRule: Story = {
 	),
 };
 
-/** The widen matched nothing — the sentence organizes just the selection. */
-export const NoSimilarFound: Story = {
-	name: "No Similar Found",
-	render: () => (
-		<SheetStage>
-			<OrganizePanel
-				accountId={ACCOUNT_ID}
-				mailboxId="mbx-inbox"
-				selectedMessageIds={["msg-1", "msg-2"]}
-				matchPredicate={{
-					anchorMessageId: "msg-1",
-					matchOperator: "And",
-					literalClauses: [],
-				}}
-				matchedCount={0}
-				fallback
-				onClose={() => undefined}
-			/>
-		</SheetStage>
-	),
-};
-
 /**
- * The deployment ships no vector pipeline, so the server ran no semantic widen —
- * the sentence organizes just the selection and the heading names the real
- * reason (#226/#201).
+ * The deployment ships no vector pipeline and the selection has no senders to
+ * match on — the widen is not offered and the rule opens empty, awaiting a
+ * clause (#226/#201).
  */
 export const SemanticUnavailable: Story = {
 	name: "Semantic Unavailable",
 	render: () => (
 		<SheetStage>
-			<OrganizePanel
+			<OrganizeRuleEditor
 				accountId={ACCOUNT_ID}
-				mailboxId="mbx-inbox"
 				selectedMessageIds={["msg-1", "msg-2"]}
-				matchPredicate={{
-					anchorMessageId: "msg-1",
-					matchOperator: "And",
-					literalClauses: [],
-				}}
-				matchedCount={0}
+				seedCount={0}
 				semanticUnavailable
 				onClose={() => undefined}
 			/>
@@ -226,29 +176,19 @@ export const SemanticUnavailable: Story = {
 };
 
 /**
- * No vector pipeline, but the selection has senders to match on — the widen
- * fell back to matching all mail from those senders. The senders span different
- * domains, so the fallback keeps one `From` clause per address; the heading
- * names the senders and states the real semantics, and every commit scope
- * (including the standing filter) carries those clauses, so it reaches the
- * widened set and keeps working on future mail.
+ * No vector pipeline, but the selection has senders to match on — the widen fell
+ * back to the sender `From` clauses (#251). The senders span different domains,
+ * so the fallback keeps one editable `From` chip per address, combined with
+ * "or". Every commit carries exactly these clauses.
  */
 export const SenderFallback: Story = {
 	name: "Sender Fallback",
 	render: () => (
 		<SheetStage>
-			<OrganizePanel
+			<OrganizeRuleEditor
 				accountId={ACCOUNT_ID}
-				mailboxId="mbx-inbox"
 				selectedMessageIds={["msg-1", "msg-2"]}
-				matchPredicate={{
-					matchOperator: "Or",
-					literalClauses: [
-						{ field: "From", value: "npm@github.com" },
-						{ field: "From", value: "noreply@medium.com" },
-					],
-				}}
-				matchedCount={128}
+				seedCount={128}
 				semanticUnavailable
 				senders={["npm@github.com", "noreply@medium.com"]}
 				onClose={() => undefined}
@@ -260,23 +200,17 @@ export const SenderFallback: Story = {
 /**
  * The sender fallback where every selected sender shares one registrable domain
  * (RFC 038 D2): the per-address `From` chips collapse to a single `FromDomain`
- * clause, and the heading names the domain — "anyone at github.com" — rather
- * than listing addresses. Matches `sub.github.com` too, never a look-alike like
- * `github.com.evil.example`.
+ * chip — "anyone at github.com" — rather than listing addresses. Matches
+ * `sub.github.com` too, never a look-alike like `github.com.evil.example`.
  */
 export const SenderFallbackDomain: Story = {
 	name: "Sender Fallback (domain)",
 	render: () => (
 		<SheetStage>
-			<OrganizePanel
+			<OrganizeRuleEditor
 				accountId={ACCOUNT_ID}
-				mailboxId="mbx-inbox"
 				selectedMessageIds={["msg-1", "msg-2", "msg-3"]}
-				matchPredicate={{
-					matchOperator: "Or",
-					literalClauses: [{ field: "FromDomain", value: "github.com" }],
-				}}
-				matchedCount={342}
+				seedCount={342}
 				semanticUnavailable
 				senders={[
 					"npm@github.com",
@@ -289,29 +223,15 @@ export const SenderFallbackDomain: Story = {
 	),
 };
 
-/**
- * The sender fallback with a standing rule pre-selected — the "Always keep mail
- * from these senders" sentence, the filter that will match future mail at index
- * time.
- */
+/** The sender fallback with a standing rule pre-selected. */
 export const SenderFallbackStanding: Story = {
 	name: "Sender Fallback (standing)",
 	render: () => (
 		<SheetStage>
-			<OrganizePanel
+			<OrganizeRuleEditor
 				accountId={ACCOUNT_ID}
-				mailboxId="mbx-inbox"
 				selectedMessageIds={["msg-1", "msg-2", "msg-3", "msg-4"]}
-				matchPredicate={{
-					matchOperator: "Or",
-					literalClauses: [
-						{ field: "From", value: "npm@github.com" },
-						{ field: "From", value: "notifications@github.com" },
-						{ field: "From", value: "noreply@medium.com" },
-						{ field: "From", value: "digest@substack.com" },
-					],
-				}}
-				matchedCount={412}
+				seedCount={412}
 				semanticUnavailable
 				senders={[
 					"npm@github.com",
@@ -319,7 +239,7 @@ export const SenderFallbackStanding: Story = {
 					"noreply@medium.com",
 					"digest@substack.com",
 				]}
-				initialScope="standing"
+				seedScope="standing"
 				seedMailboxId="mbx-archive"
 				onClose={() => undefined}
 			/>