@remit/web-client 0.0.65 → 0.0.67

package/src/components/settings/FilterEditor.render.test.ts

@@ -0,0 +1,281 @@
+/**
+ * Editing a standing filter in the shared chip editor (RFC 038 D6), driven
+ * through the real component in a DOM over the live update / preview / apply
+ * endpoints.
+ *
+ * The contract these tests pin: a predicate or action change patches the
+ * predicate fields (so the server bumps `ruleChangedAt`) and offers a
+ * re-back-apply carrying exactly the previewed predicate; a cosmetic rename
+ * patches the name alone and offers nothing (RFC 034 Decision 3.2). A degraded
+ * filter lists its widen inactive and lets the user take it off.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import {
+	type HttpCall,
+	type HttpMock,
+	mockFetch,
+} from "../../test-support/http";
+import { FilterEditor } from "./FilterEditor";
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+const ACCOUNT_ID = "acc-1";
+
+const FOLDERS = [
+	{ id: "mbx-receipts", label: "Receipts" },
+	{ id: "mbx-archive", label: "Archive" },
+];
+
+const filterFixture = (
+	overrides: Partial<RemitImapFilterResponse> = {},
+): RemitImapFilterResponse => ({
+	filterId: "f-1",
+	accountConfigId: ACCOUNT_ID,
+	name: "Receipts",
+	scope: "Standing",
+	state: "Active",
+	hasAnchor: false,
+	ruleChangedAt: 100,
+	matchOperator: "And",
+	literalClauses: [{ field: "From", value: "receipts@stripe.com" }],
+	actionLabelId: "None",
+	actionMailboxId: "mbx-receipts",
+	createdAt: 0,
+	updatedAt: 0,
+	...overrides,
+});
+
+type Responder = (call: HttpCall) => unknown;
+
+/** Fields whose presence in a patch bumps `ruleChangedAt` (RFC 034 Decision 3.2). */
+const PREDICATE_OR_ACTION = [
+	"matchOperator",
+	"literalClauses",
+	"actionLabelId",
+	"actionMailboxId",
+];
+
+/**
+ * A backend that echoes the real update contract: the patch merges over the
+ * stored filter, `hasAnchor` survives it (the update endpoint carries no anchor
+ * field — `sanitizePatch` drops it), and `ruleChangedAt` advances only when the
+ * patch touches a predicate or action field.
+ */
+const backend = (
+	filter: RemitImapFilterResponse,
+	previewCount = 8,
+): Responder => {
+	return (call) => {
+		if (call.path.endsWith("/organize/preview")) {
+			return { matchedCount: previewCount, messageIds: [] };
+		}
+		if (call.path.endsWith("/filters/f-1") && call.method === "PATCH") {
+			const body = call.body ?? {};
+			const bumped = PREDICATE_OR_ACTION.some((field) => field in body);
+			return {
+				...filter,
+				...body,
+				hasAnchor: filter.hasAnchor,
+				ruleChangedAt: bumped ? filter.ruleChangedAt + 1 : filter.ruleChangedAt,
+			};
+		}
+		if (call.path.endsWith("/organize") && call.method === "POST") {
+			return { organizeJobId: "job-1", state: "Running" };
+		}
+		if (call.path.endsWith("/organize/job-1")) {
+			return {
+				organizeJobId: "job-1",
+				state: "Complete",
+				matchedCount: previewCount,
+				appliedCount: previewCount,
+				failedCount: 0,
+			};
+		}
+		return {};
+	};
+};
+
+const mount = (
+	filter: RemitImapFilterResponse,
+	responder?: Responder,
+	semanticUnavailable = false,
+): DomHarness => {
+	http = mockFetch(responder ?? backend(filter));
+	harness = createDomHarness();
+	harness.renderApp(
+		createElement(FilterEditor, {
+			accountId: ACCOUNT_ID,
+			filter,
+			folders: FOLDERS,
+			semanticUnavailable,
+			onClose: () => undefined,
+		}),
+	);
+	return harness;
+};
+
+async function settlePreview(dom: DomHarness): Promise<void> {
+	await dom.flush();
+	await dom.wait(400);
+	await dom.flush();
+	await dom.flush();
+}
+
+const primaryButton = (dom: DomHarness, label: string): HTMLButtonElement =>
+	dom.byText("button", label) as HTMLButtonElement;
+
+const addClause = (dom: DomHarness, field: string, value: string): void => {
+	dom.click(primaryButton(dom, "Add clause"));
+	dom.select(dom.byLabel("Clause field"), field);
+	dom.type(dom.byLabel("Clause value"), value);
+	dom.click(primaryButton(dom, "Add"));
+};
+
+const patchCalls = (): HttpCall[] =>
+	(http?.calls ?? []).filter(
+		(call) => call.path.endsWith("/filters/f-1") && call.method === "PATCH",
+	);
+
+describe("FilterEditor — open, edit, save round trip", () => {
+	it("loads the persisted rule into the editor", async () => {
+		const dom = mount(filterFixture());
+		await settlePreview(dom);
+		assert.match(dom.text(), /receipts@stripe\.com/);
+		assert.equal(
+			(dom.byLabel("Rule name") as HTMLInputElement).value,
+			"Receipts",
+		);
+		assert.match(dom.text(), /Save rule/);
+	});
+
+	it("patches only the predicate on a clause change, leaving the name untouched", async () => {
+		const dom = mount(filterFixture());
+		await settlePreview(dom);
+
+		addClause(dom, "Subject", "invoice");
+		await settlePreview(dom);
+
+		dom.click(primaryButton(dom, "Save rule"));
+		await dom.flush();
+
+		const patch = patchCalls();
+		assert.equal(patch.length, 1);
+		assert.equal(patch[0].body?.matchOperator, "And");
+		assert.equal(patch[0].body?.actionMailboxId, "mbx-receipts");
+		assert.deepEqual(patch[0].body?.literalClauses, [
+			{ field: "From", value: "receipts@stripe.com" },
+			{ field: "Subject", value: "invoice" },
+		]);
+		// The name is untouched, so it never travels — the partial patch preserves it.
+		assert.equal("name" in (patch[0].body ?? {}), false);
+	});
+});
+
+describe("FilterEditor — cosmetic rename (RFC 034 Decision 3.2)", () => {
+	it("patches the name alone and offers no re-apply", async () => {
+		const dom = mount(filterFixture());
+		await settlePreview(dom);
+
+		dom.type(dom.byLabel("Rule name"), "Invoices");
+		dom.click(primaryButton(dom, "Save rule"));
+		await dom.flush();
+
+		const patch = patchCalls();
+		assert.equal(patch.length, 1);
+		assert.deepEqual(patch[0].body, { name: "Invoices" });
+
+		// No predicate field, so the server leaves ruleChangedAt alone — and the
+		// editor never offers to move existing mail.
+		assert.match(dom.text(), /Filter updated/);
+		assert.doesNotMatch(dom.text(), /Move existing mail/);
+	});
+});
+
+describe("FilterEditor — rule change offers the re-back-apply", () => {
+	it("offers a re-apply that carries exactly the previewed predicate", async () => {
+		const dom = mount(filterFixture());
+		await settlePreview(dom);
+
+		addClause(dom, "Subject", "invoice");
+		await settlePreview(dom);
+
+		dom.click(primaryButton(dom, "Save rule"));
+		await dom.flush();
+
+		// The rule changed, so the editor offers to move the mail already filed.
+		assert.match(dom.text(), /Move existing mail/);
+
+		dom.click(primaryButton(dom, "Move existing mail"));
+		await dom.flush();
+
+		const previews = http?.to("/organize/preview") ?? [];
+		const lastPreview = previews[previews.length - 1];
+		const applied = (http?.calls ?? []).filter(
+			(call) => call.path.endsWith("/organize") && call.method === "POST",
+		);
+		assert.equal(applied.length, 1);
+		// Apply carries exactly the predicate the settled preview counted.
+		assert.equal(applied[0].body?.matchOperator, "And");
+		assert.deepEqual(
+			applied[0].body?.literalClauses,
+			lastPreview.body?.literalClauses,
+		);
+		assert.deepEqual(applied[0].body?.literalClauses, [
+			{ field: "From", value: "receipts@stripe.com" },
+			{ field: "Subject", value: "invoice" },
+		]);
+	});
+});
+
+describe("FilterEditor — degraded semantic filter (RFC 038 D4)", () => {
+	it("lists the widen inactive and display-only — the anchor is fixed at creation", async () => {
+		const dom = mount(filterFixture({ hasAnchor: true }), undefined, true);
+		await settlePreview(dom);
+
+		// The anchor this deployment cannot evaluate lists inactive.
+		assert.match(dom.text(), /not available here/i);
+
+		// The update endpoint carries no anchor, so the chip cannot be removed here:
+		// no remove affordance, and a note says the anchor is fixed at creation.
+		assert.equal(
+			dom.query('[aria-label="Remove the similar-mail widen"]'),
+			null,
+		);
+		assert.match(dom.text(), /set when a filter is created/i);
+	});
+});
+
+describe("FilterEditor — scope and expiry are read-only (reader #266)", () => {
+	it("shows an until-a-date filter's scope statically, with no scope or date control", async () => {
+		const dom = mount(
+			filterFixture({
+				scope: "Temporary",
+				expiresAt: "2027-09-01T23:59:59+00:00",
+			}),
+		);
+		await settlePreview(dom);
+
+		// The live scope segmented control and the date input are gone — a
+		// scope/date change cannot be persisted, so it is never offered.
+		assert.equal(dom.query('input[name="rule-scope"]'), null);
+		assert.equal(dom.query('[aria-label="Expiry date"]'), null);
+		assert.match(dom.text(), /Until 2027-09-01/);
+		assert.match(dom.text(), /set when a filter is created/i);
+
+		// The name stays editable.
+		assert.ok(dom.byLabel("Rule name"));
+	});
+});

package/src/components/settings/FilterEditor.tsx

@@ -0,0 +1,338 @@
+import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
+import {
+	Button,
+	type ClauseEditState,
+	type ClauseField,
+	type FilterRule,
+	FilterRuleEditor,
+	type FolderOption,
+	type MatchOperator,
+	previewCountSummary,
+} from "@remit/ui";
+import { CheckCircle2, Loader2 } from "lucide-react";
+import { useMemo, useRef, useState } from "react";
+import { useOrganizeJob } from "@/hooks/useOrganizeJob";
+import { useRulePreview } from "@/hooks/useRulePreview";
+import { useUpdateFilter } from "@/hooks/useUpdateFilter";
+import {
+	buildUpdateFilterInput,
+	filterToRule,
+	ruleChangesPredicateOrAction,
+} from "@/lib/organize/filter-edit-model";
+import {
+	normalizeClauseValue,
+	rulePredicate,
+	ruleToDraft,
+	SUPPORTED_CLAUSE_FIELDS,
+} from "@/lib/organize/rule-model";
+
+interface FilterEditorProps {
+	accountId: string;
+	filter: RemitImapFilterResponse;
+	folders: FolderOption[];
+	/**
+	 * This deployment ships no vector pipeline, so a semantic anchor cannot be
+	 * evaluated (RFC 038 D4). The filter's widen chip lists inactive and the rule
+	 * matches by its literal clauses only.
+	 */
+	semanticUnavailable?: boolean;
+	onClose: () => void;
+}
+
+/**
+ * Editing a standing filter in the same chip editor the Organize surface uses
+ * (RFC 038 D6). The row's persisted rule opens in the editor — clauses, match
+ * operator, move action, scope, and the semantic anchor as a widen chip. Saving
+ * a predicate or action change bumps `ruleChangedAt` and offers, never runs, a
+ * re-back-apply over existing mail; a cosmetic rename does neither (RFC 034
+ * Decision 3.2). The re-apply carries exactly the previewed predicate and is
+ * held behind the same settled-count commit gate as creation.
+ */
+export function FilterEditor({
+	accountId,
+	filter,
+	folders,
+	semanticUnavailable = false,
+	onClose,
+}: FilterEditorProps) {
+	const original = useMemo(
+		() => filterToRule(filter, semanticUnavailable),
+		[filter, semanticUnavailable],
+	);
+	const [rule, setRule] = useState<FilterRule>(original);
+	const [clauseEdit, setClauseEdit] = useState<ClauseEditState | undefined>();
+	const [offerReapply, setOfferReapply] = useState(false);
+	const nextClauseId = useRef(0);
+
+	const preview = useRulePreview(accountId, rulePredicate(rule));
+	const update = useUpdateFilter(accountId, filter.filterId);
+	const organizeJob = useOrganizeJob(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: `new-${nextClauseId.current}`, field, value },
+				],
+			};
+		});
+		setClauseEdit(undefined);
+	};
+
+	const removeClause = (clauseId: string) =>
+		setRule((current) => ({
+			...current,
+			clauses: current.clauses.filter((clause) => clause.id !== clauseId),
+		}));
+
+	const changeMatchOperator = (matchOperator: MatchOperator) =>
+		setRule((current) => ({ ...current, matchOperator }));
+
+	const changeMove = (mailboxId: string) =>
+		setRule((current) => ({
+			...current,
+			moveMailboxId: mailboxId || undefined,
+		}));
+
+	const changeName = (name: string) =>
+		setRule((current) => ({ ...current, name }));
+
+	const commit = () => {
+		const predicateChanged = ruleChangesPredicateOrAction(rule, original);
+		const body = buildUpdateFilterInput(rule, original);
+		if (Object.keys(body).length === 0) {
+			onClose();
+			return;
+		}
+		setOfferReapply(predicateChanged);
+		update.updateFilter(body);
+	};
+
+	const reapply = () => organizeJob.start(ruleToDraft(rule));
+
+	if (organizeJob.isStarting || organizeJob.isRunning || organizeJob.isDone) {
+		return (
+			<ReapplyProgress
+				progress={organizeJob.progress}
+				isDone={organizeJob.isDone}
+				onClose={onClose}
+			/>
+		);
+	}
+
+	if (update.isPending) return <SavingState />;
+
+	if (update.isError) {
+		return <SaveError onRetry={update.reset} onClose={onClose} />;
+	}
+
+	if (update.isSuccess) {
+		if (!offerReapply) return <FilterUpdated onClose={onClose} />;
+		return (
+			<ReapplyOffer
+				preview={previewCountSummary(preview)}
+				blocked={preview.status !== "ready" || preview.stale === true}
+				onReapply={reapply}
+				onClose={onClose}
+			/>
+		);
+	}
+
+	return (
+		<FilterRuleEditor
+			rule={rule}
+			folders={folders}
+			preview={preview}
+			// The update endpoint carries no anchor, so a widen can be neither added
+			// nor removed here: the "…and similar" add is never offered, and the
+			// existing chip is display-only (no onRemoveWiden). `semanticUnavailable`
+			// only drives the chip's inactive styling via `filterToRule`.
+			semanticAvailable={false}
+			clauseFields={SUPPORTED_CLAUSE_FIELDS}
+			lifecycleLocked
+			clauseEdit={clauseEdit}
+			onStartAddClause={startAddClause}
+			onStartEditClause={startEditClause}
+			onRemoveClause={removeClause}
+			onChangeDraftField={changeDraftField}
+			onChangeDraftValue={changeDraftValue}
+			onSubmitClause={submitClause}
+			onCancelClause={() => setClauseEdit(undefined)}
+			onChangeMatchOperator={changeMatchOperator}
+			onChangeMove={changeMove}
+			onChangeName={changeName}
+			onCommit={commit}
+			onCancel={onClose}
+		/>
+	);
+}
+
+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 changes…</p>
+		</div>
+	);
+}
+
+function FilterUpdated({ 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 updated</p>
+			<Button variant="primary" onClick={onClose} className="mt-2">
+				Done
+			</Button>
+		</div>
+	);
+}
+
+function ReapplyOffer({
+	preview,
+	blocked,
+	onReapply,
+	onClose,
+}: {
+	preview: string;
+	blocked: boolean;
+	onReapply: () => 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 the rule automatically. {preview} — move the mail
+				already in your mailbox too?
+			</p>
+			<div className="mt-2 flex gap-2">
+				<Button variant="primary" onClick={onReapply} disabled={blocked}>
+					Move existing mail
+				</Button>
+				<Button variant="ghost" onClick={onClose}>
+					Not now
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+function ReapplyProgress({
+	progress,
+	isDone,
+	onClose,
+}: {
+	progress: ReturnType<typeof useOrganizeJob>["progress"];
+	isDone: 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">Move failed</span>
+			) : (
+				<CheckCircle2 className="size-8 text-positive" />
+			)}
+
+			{!isDone && (
+				<p className="text-sm font-medium text-fg">Moving existing 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 SaveError({
+	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 changes</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/settings/FilterEditorSurface.tsx

@@ -0,0 +1,52 @@
+import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
+import { BottomSheet, Dialog, type FolderOption } from "@remit/ui";
+import { useIsDesktop } from "@/hooks/useMediaQuery";
+import { FilterEditor } from "./FilterEditor";
+
+interface FilterEditorSurfaceProps {
+	accountId: string;
+	filter: RemitImapFilterResponse;
+	folders: FolderOption[];
+	semanticUnavailable?: boolean;
+	onClose: () => void;
+}
+
+/**
+ * The settings filter editor in its responsive home: the centered dialog on
+ * desktop, the bottom sheet on mobile (RFC 038 D1), mounting the same
+ * {@link FilterEditor} so the two can never drift. Opened from a filter row in
+ * Settings › Filters.
+ */
+export function FilterEditorSurface({
+	accountId,
+	filter,
+	folders,
+	semanticUnavailable,
+	onClose,
+}: FilterEditorSurfaceProps) {
+	const isDesktop = useIsDesktop();
+
+	const editor = (
+		<FilterEditor
+			accountId={accountId}
+			filter={filter}
+			folders={folders}
+			semanticUnavailable={semanticUnavailable}
+			onClose={onClose}
+		/>
+	);
+
+	if (isDesktop) {
+		return (
+			<Dialog open onClose={onClose} title="Filter rule">
+				{editor}
+			</Dialog>
+		);
+	}
+
+	return (
+		<BottomSheet open onClose={onClose} dismissLabel="Dismiss filter rule">
+			{editor}
+		</BottomSheet>
+	);
+}