@remit/web-client 0.0.93 → 0.0.94

package/src/components/mail/organize/rule-editor-states.stories.tsx

@@ -1,147 +0,0 @@
-import { BottomSheet } from "@remit/ui";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { ReactNode } from "react";
-import {
-	BackApplyError,
-	CommitError,
-	FilterSaved,
-	JobProgress,
-	SavingState,
-} from "./rule-editor-states";
-
-/**
- * `Flows/Smart Organize/Rule editor states` — the non-editing states the rule
- * editor lands in after a commit, rendered from the real components the Organize
- * surface mounts. Creating a standing filter now runs the retroactive back-apply,
- * so a standing save flows Saving → back-apply in flight → done, the same job
- * states the one-time apply reaches. Every state here is what ships, so the flow
- * cannot drift from the story.
- */
-
-function SheetStage({ children }: { children: ReactNode }) {
-	return (
-		<div className="relative mx-auto h-dvh w-full shrink-0 overflow-hidden bg-surface sm:my-6 sm:h-[520px] sm:w-[390px] sm:rounded-[2rem] sm:border sm:border-line sm:shadow-sm">
-			<BottomSheet open onClose={() => undefined}>
-				{children}
-			</BottomSheet>
-		</div>
-	);
-}
-
-const meta: Meta = {
-	title: "Flows/Smart Organize/Rule editor states",
-	parameters: { layout: "fullscreen" },
-};
-export default meta;
-
-type Story = StoryObj;
-
-/** Saving the filter — held while the create request is in flight. */
-export const Saving: Story = {
-	render: () => (
-		<SheetStage>
-			<SavingState />
-		</SheetStage>
-	),
-};
-
-/**
- * The back-apply running after a standing filter is created — the pass that
- * reaches the mail already in the mailbox, not only the mail that arrives next.
- */
-export const BackApplyInFlight: Story = {
-	name: "Back-apply in flight",
-	render: () => (
-		<SheetStage>
-			<JobProgress
-				progress={{
-					state: "Running",
-					matchedCount: 24,
-					appliedCount: 0,
-					failedCount: 0,
-					errorMessage: "",
-				}}
-				isDone={false}
-				runningLabel="Organizing mail from these senders…"
-				onClose={() => undefined}
-			/>
-		</SheetStage>
-	),
-};
-
-/** The back-apply finished — the count moved is stated plainly. */
-export const BackApplyDone: Story = {
-	name: "Back-apply done",
-	render: () => (
-		<SheetStage>
-			<JobProgress
-				progress={{
-					state: "Complete",
-					matchedCount: 24,
-					appliedCount: 24,
-					failedCount: 0,
-					errorMessage: "",
-				}}
-				isDone
-				runningLabel="Organizing mail from these senders…"
-				onClose={() => undefined}
-			/>
-		</SheetStage>
-	),
-};
-
-/** The back-apply failed — the rule is still saved, the move is what did not run. */
-export const BackApplyFailed: Story = {
-	name: "Back-apply failed",
-	render: () => (
-		<SheetStage>
-			<JobProgress
-				progress={{
-					state: "Failed",
-					matchedCount: 24,
-					appliedCount: 6,
-					failedCount: 18,
-					errorMessage: "Could not reach the mail server. Please try again.",
-				}}
-				isDone
-				runningLabel="Organizing mail from these senders…"
-				onClose={() => undefined}
-			/>
-		</SheetStage>
-	),
-};
-
-/**
- * The filter saved, but the back-apply's own request never got off the ground
- * (a 5xx or dropped connection on start). The rule is live for new mail; moving
- * the existing mail is what failed, and it is offered again — never swallowed
- * behind a plain "saved".
- */
-export const BackApplyStartFailed: Story = {
-	name: "Back-apply start failed",
-	render: () => (
-		<SheetStage>
-			<BackApplyError onRetry={() => undefined} onClose={() => undefined} />
-		</SheetStage>
-	),
-};
-
-/** The filter saved with nothing to back-apply — the plain confirmation. */
-export const FilterSavedState: Story = {
-	name: "Filter saved",
-	render: () => (
-		<SheetStage>
-			<FilterSaved onClose={() => undefined} />
-		</SheetStage>
-	),
-};
-
-/** The create failed — retry or dismiss. */
-export const CommitFailed: Story = {
-	name: "Commit failed",
-	render: () => (
-		<SheetStage>
-			<CommitError onRetry={() => undefined} onClose={() => undefined} />
-		</SheetStage>
-	),
-};

package/src/components/mail/organize/rule-editor-states.tsx

@@ -1,139 +0,0 @@
-import { Button } from "@remit/ui";
-import { CheckCircle2, Loader2 } from "lucide-react";
-import type { useOrganizeJob } from "@/hooks/useOrganizeJob";
-
-/**
- * The non-editing states a filter-rule editor lands in after commit, shared by
- * the Organize and filter-from-search surfaces so a back-apply job, a saved
- * standing rule, and a commit failure read identically wherever the rule was
- * authored (RFC 038 D1).
- */
-
-export function JobProgress({
-	progress,
-	isDone,
-	runningLabel,
-	onClose,
-}: {
-	progress: ReturnType<typeof useOrganizeJob>["progress"];
-	isDone: boolean;
-	/** In-flight copy — the caller names what it is organizing. */
-	runningLabel: string;
-	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">{runningLabel}</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>
-	);
-}
-
-export 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>
-	);
-}
-
-export 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>
-	);
-}
-
-export function BackApplyError({
-	onRetry,
-	onClose,
-}: {
-	onRetry: () => void;
-	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">Rule saved</p>
-			<p className="max-w-xs text-xs text-fg-muted">
-				New mail follows it automatically. Moving the mail already in your
-				mailbox didn't run — try again?
-			</p>
-			<div className="mt-2 flex gap-2">
-				<Button variant="primary" onClick={onRetry}>
-					Move existing mail
-				</Button>
-				<Button variant="ghost" onClick={onClose}>
-					Not now
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-export 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/hooks/useRuleEditorState.ts

@@ -1,182 +0,0 @@
-import type {
-	ClauseEditState,
-	ClauseField,
-	FilterRule,
-	MatchOperator,
-	RuleScope,
-} from "@remit/ui";
-import { useRef, useState } from "react";
-import {
-	normalizeClauseValue,
-	SUPPORTED_CLAUSE_FIELDS,
-} from "@/lib/organize/rule-model";
-
-export interface RuleEditorState {
-	rule: FilterRule;
-	setRule: (updater: (current: FilterRule) => FilterRule) => void;
-	/** The clause-editing and rule-mutation handlers a {@link FilterRuleEditor} binds. */
-	handlers: {
-		clauseEdit: ClauseEditState | undefined;
-		onStartAddClause: () => void;
-		onStartEditClause: (clauseId: string) => void;
-		onRemoveClause: (clauseId: string) => void;
-		onChangeDraftField: (field: ClauseField) => void;
-		onChangeDraftValue: (value: string) => void;
-		onSubmitClause: () => void;
-		onCancelClause: () => void;
-		onAddWiden: () => void;
-		onRemoveWiden: () => void;
-		onChangeMatchOperator: (matchOperator: MatchOperator) => void;
-		onChangeMove: (mailboxId: string) => void;
-		onChangeLabel: (labelId: string) => void;
-		onChangeScope: (scope: RuleScope) => void;
-		onChangeName: (name: string) => void;
-		onChangeUntil: (until: string) => void;
-	};
-}
-
-interface RuleEditorStateInput {
-	/** The rule the editor opens on. */
-	initialRule: FilterRule;
-	/**
-	 * How many anchors a widen the user adds inline should carry. A search-seeded
-	 * rule has no message anchor, so its editor never offers the widen and this is
-	 * unused; the Organize editor passes its selection size.
-	 */
-	widenAnchorCount?: number;
-}
-
-/**
- * The clause-editing and rule-mutation state a filter-rule editor owns, shared by
- * every entry point onto the chip editor (RFC 038 D1) so the Organize and
- * search-derived surfaces edit the rule identically. Preview and commit stay with
- * the caller — they differ by entry point (an anchored widen count and back-apply
- * job for Organize, a literal count for a search-derived rule).
- */
-export const useRuleEditorState = ({
-	initialRule,
-	widenAnchorCount = 1,
-}: RuleEditorStateInput): RuleEditorState => {
-	const [rule, setRuleState] = useState<FilterRule>(initialRule);
-	const [clauseEdit, setClauseEdit] = useState<ClauseEditState | undefined>();
-	const nextClauseId = useRef(0);
-
-	const setRule = (updater: (current: FilterRule) => FilterRule) =>
-		setRuleState(updater);
-
-	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;
-		setRuleState((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) =>
-		setRuleState((current) => ({
-			...current,
-			clauses: current.clauses.filter((clause) => clause.id !== clauseId),
-		}));
-
-	const addWiden = () =>
-		setRuleState((current) => ({
-			...current,
-			widen: { anchorCount: Math.max(widenAnchorCount, 1) },
-		}));
-
-	const removeWiden = () =>
-		setRuleState((current) => ({ ...current, widen: undefined }));
-
-	const changeMatchOperator = (matchOperator: MatchOperator) =>
-		setRuleState((current) => ({ ...current, matchOperator }));
-
-	const changeMove = (mailboxId: string) =>
-		setRuleState((current) => ({
-			...current,
-			moveMailboxId: mailboxId || undefined,
-		}));
-
-	const changeLabel = (labelId: string) =>
-		setRuleState((current) => ({
-			...current,
-			labelId: labelId || undefined,
-		}));
-
-	const changeScope = (scope: RuleScope) =>
-		setRuleState((current) => ({ ...current, scope }));
-
-	const changeName = (name: string) =>
-		setRuleState((current) => ({ ...current, name }));
-
-	const changeUntil = (until: string) =>
-		setRuleState((current) => ({ ...current, until }));
-
-	return {
-		rule,
-		setRule,
-		handlers: {
-			clauseEdit,
-			onStartAddClause: startAddClause,
-			onStartEditClause: startEditClause,
-			onRemoveClause: removeClause,
-			onChangeDraftField: changeDraftField,
-			onChangeDraftValue: changeDraftValue,
-			onSubmitClause: submitClause,
-			onCancelClause: () => setClauseEdit(undefined),
-			onAddWiden: addWiden,
-			onRemoveWiden: removeWiden,
-			onChangeMatchOperator: changeMatchOperator,
-			onChangeMove: changeMove,
-			onChangeLabel: changeLabel,
-			onChangeScope: changeScope,
-			onChangeName: changeName,
-			onChangeUntil: changeUntil,
-		},
-	};
-};

package/src/hooks/useSearchFilterSeed.render.test.ts

@@ -1,118 +0,0 @@
-/**
- * Opening the filter-from-search editor: the seed count comes from the converted
- * literal predicate in one request, under the account the filter targets. No
- * capability probe — the deployment's semantic reach is read from the search's
- * own results on the surface, so a seed success is never blocked by a probe.
- */
-
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-import { createElement } from "react";
-import type { OrganizeMatchPredicate } from "@/lib/organize/sender-fallback";
-import { createDomHarness, type DomHarness } from "../test-support/dom";
-import {
-	type HttpCall,
-	type HttpMock,
-	httpError,
-	mockFetch,
-} from "../test-support/http";
-import { useSearchFilterSeed } from "./useSearchFilterSeed";
-
-let harness: DomHarness | undefined;
-let http: HttpMock | undefined;
-
-afterEach(() => {
-	harness?.close();
-	harness = undefined;
-	http?.restore();
-	http = undefined;
-});
-
-const COUNTABLE: OrganizeMatchPredicate = {
-	matchOperator: "And",
-	literalClauses: [{ field: "From", value: "receipts@shop.example" }],
-};
-
-/**
- * A free-text search converts to a body-content clause, which the vector-free
- * matcher refuses. The seed must not ask.
- */
-const UNCOUNTABLE: OrganizeMatchPredicate = {
-	matchOperator: "And",
-	literalClauses: [{ field: "HasWords", value: "receipts" }],
-};
-
-function probeFor(predicate: OrganizeMatchPredicate) {
-	return function Probe() {
-		const seed = useSearchFilterSeed("acc-1", predicate);
-		return createElement(
-			"div",
-			null,
-			JSON.stringify({
-				seedCount: seed.seedCount ?? null,
-				isPending: seed.isPending,
-				isError: seed.isError,
-				uncountable: seed.uncountable,
-			}),
-		);
-	};
-}
-
-const mount = (
-	responder: (call: HttpCall) => unknown,
-	predicate: OrganizeMatchPredicate = COUNTABLE,
-): DomHarness => {
-	http = mockFetch(responder);
-	harness = createDomHarness();
-	harness.renderApp(createElement(probeFor(predicate)));
-	return harness;
-};
-
-const state = (dom: DomHarness) => JSON.parse(dom.text());
-
-describe("useSearchFilterSeed", () => {
-	it("seeds the count from the literal predicate in a single preview", async () => {
-		const dom = mount((call) =>
-			call.path.endsWith("/organize/preview")
-				? { matchedCount: 12, messageIds: [] }
-				: {},
-		);
-		await dom.flush();
-		await dom.flush();
-		assert.equal(state(dom).seedCount, 12);
-		// One preview, carrying the literal clauses and no anchor.
-		const previews = http?.to("/organize/preview") ?? [];
-		assert.equal(previews.length, 1);
-		assert.equal(previews[0].body?.anchorMessageId, undefined);
-		assert.deepEqual(previews[0].body?.literalClauses, [
-			{ field: "From", value: "receipts@shop.example" },
-		]);
-	});
-
-	it("surfaces the seed error so the caller can offer a retry", async () => {
-		const dom = mount(() => httpError(500));
-		await dom.flush();
-		await dom.flush();
-		assert.equal(state(dom).isError, true);
-	});
-
-	it("never asks for a count the matcher cannot produce", async () => {
-		const dom = mount(
-			(call) =>
-				call.path.endsWith("/organize/preview")
-					? { matchedCount: 12, messageIds: [] }
-					: {},
-			UNCOUNTABLE,
-		);
-		await dom.flush();
-		await dom.flush();
-		assert.equal(http?.to("/organize/preview").length, 0);
-		// Not pending and not an error — the editor opens, it just has no number.
-		assert.deepEqual(state(dom), {
-			seedCount: null,
-			isPending: false,
-			isError: false,
-			uncountable: true,
-		});
-	});
-});

package/src/hooks/useSearchFilterSeed.ts

@@ -1,79 +0,0 @@
-import { organizeOperationsPreviewOrganizeMutation } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { useMutation } from "@tanstack/react-query";
-import { useCallback, useEffect } from "react";
-import { buildOrganizeInput } from "@/lib/organize/organize-model";
-import { isEvaluablePredicate } from "@/lib/organize/rule-model";
-import type { OrganizeMatchPredicate } from "@/lib/organize/sender-fallback";
-
-interface SearchFilterSeed {
-	/** The live count for the converted literal predicate, seeding the editor. */
-	seedCount?: number;
-	/**
-	 * The converted predicate is one the vector-free matcher refuses — a free-text
-	 * search kept as a `HasWords` clause. There is no count to seed and no request
-	 * to make.
-	 */
-	uncountable: boolean;
-	isPending: boolean;
-	isError: boolean;
-	error: unknown;
-	retry: () => void;
-}
-
-/**
- * Open the filter-from-search editor: seed the live count from the converted
- * literal predicate. One `POST /organize/preview` under the account the filter
- * targets — the count on screen is the set a literal-only filter applies to.
- *
- * A search whose terms convert to a `HasWords` clause has no count to seed: the
- * vector-free matcher reads no message bodies and rejects the predicate outright
- * (`assertNoBodyContentClause`), so asking is a 500 and a 500 is not a count.
- * That search is still a legitimate standing filter — the index-time matcher
- * does read bodies — so the editor opens on the uncountable reason and holds only
- * the one-time apply, the same way {@link useRulePreview} handles the clause
- * being added by hand.
- *
- * The deployment's semantic reach is not probed here; it is read from the
- * search's own "Related" results on the surface that opens the editor (RFC 038
- * D5), a direct signal that needs no request and cannot hit the wrong account.
- */
-export const useSearchFilterSeed = (
-	accountId: string | undefined,
-	literalPredicate: OrganizeMatchPredicate,
-): SearchFilterSeed => {
-	const seed = useMutation(organizeOperationsPreviewOrganizeMutation());
-	const { mutate, reset } = seed;
-	const countable = isEvaluablePredicate(literalPredicate);
-
-	const run = useCallback(() => {
-		if (!accountId || !countable) return;
-		reset();
-		mutate({
-			path: { accountId },
-			body: buildOrganizeInput({
-				matchOperator: literalPredicate.matchOperator,
-				literalClauses: literalPredicate.literalClauses,
-			}),
-		});
-	}, [
-		accountId,
-		countable,
-		literalPredicate.matchOperator,
-		literalPredicate.literalClauses,
-		mutate,
-		reset,
-	]);
-
-	useEffect(() => {
-		run();
-	}, [run]);
-
-	return {
-		seedCount: seed.data?.matchedCount,
-		uncountable: !countable,
-		isPending: countable && (seed.isPending || seed.data === undefined),
-		isError: countable && seed.isError,
-		error: seed.error,
-		retry: run,
-	};
-};