@remit/web-client 0.0.66 → 0.0.67

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

@@ -31,12 +31,17 @@ const filter = (
 	...overrides,
 });
 
-const render = (filters: RemitImapFilterResponse[]) =>
+const render = (
+	filters: RemitImapFilterResponse[],
+	semanticUnavailable = false,
+) =>
 	renderToString(
 		createElement(FiltersList, {
 			filters,
 			mailboxName: (id: string) => (id === "mbx-travel" ? "Travel" : undefined),
+			onEdit: () => undefined,
 			onDelete: () => undefined,
+			semanticUnavailable,
 			now: NOW,
 		}) as never,
 	);
@@ -54,6 +59,27 @@ describe("FiltersList", () => {
 		assert.match(html, /always/);
 	});
 
+	it("opens the row's rule in the editor", () => {
+		const html = render([filter({})]);
+		assert.match(html, /Edit filter Travel/);
+	});
+
+	it("shows the widen chip for an anchored filter where the deployment can serve it", () => {
+		const html = render([filter({ hasAnchor: true })]);
+		assert.match(html, /and anything similar/i);
+	});
+
+	it("lists the widen chip inactive on a deployment that cannot evaluate it (D4)", () => {
+		const html = render([filter({ hasAnchor: true })], true);
+		assert.match(html, /not available here/i);
+		assert.doesNotMatch(html, /and anything similar/i);
+	});
+
+	it("shows no widen chip for a purely literal filter", () => {
+		const html = render([filter({ hasAnchor: false })]);
+		assert.doesNotMatch(html, /similar/i);
+	});
+
 	it("keeps an expired temporary filter visible and marks it Expired (RFC 034 Decision 1.2)", () => {
 		const html = render([
 			filter({

package/src/components/settings/FiltersList.tsx

@@ -1,5 +1,5 @@
 import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
-import { Badge, Button } from "@remit/ui";
+import { Badge, Button, WidenChip } from "@remit/ui";
 import { Trash2 } from "lucide-react";
 import {
 	filterDisplayStatus,
@@ -11,21 +11,34 @@ interface FiltersListProps {
 	filters: RemitImapFilterResponse[];
 	/** Resolve a destination mailbox id to a folder name for display. */
 	mailboxName: (mailboxId: string) => string | undefined;
+	/** Open the row's rule in the editor (RFC 038 D6). */
+	onEdit: (filterId: string) => void;
 	onDelete: (filterId: string) => void;
 	deletingFilterId?: string;
+	/**
+	 * This deployment ships no vector pipeline (RFC 038 D4). A filter carrying a
+	 * semantic anchor lists with its widen chip inactive — it matches by its
+	 * literal clauses only.
+	 */
+	semanticUnavailable?: boolean;
 	/** Injected for deterministic status in tests; defaults to now. */
 	now?: number;
 }
 
 /**
- * The account's standing filters. Expired temporary filters stay listed and
- * are marked Expired distinctly rather than hidden (RFC 034 Decision 1.2).
+ * The account's standing filters, each opening its rule in the editor (RFC 038
+ * D6). Expired temporary filters stay listed and are marked Expired distinctly
+ * rather than hidden (RFC 034 Decision 1.2). A filter with a semantic anchor
+ * shows the widen chip — inactive where this deployment cannot evaluate it
+ * (D4), so the list says honestly that it matches by literal clauses only.
  */
 export function FiltersList({
 	filters,
 	mailboxName,
+	onEdit,
 	onDelete,
 	deletingFilterId,
+	semanticUnavailable = false,
 	now = Date.now(),
 }: FiltersListProps) {
 	if (filters.length === 0) {
@@ -53,7 +66,12 @@ export function FiltersList({
 						key={filter.filterId}
 						className="flex items-start gap-3 px-3 py-2.5"
 					>
-						<div className="min-w-0 flex-1">
+						<button
+							type="button"
+							onClick={() => onEdit(filter.filterId)}
+							aria-label={`Edit filter ${filter.name}`}
+							className="min-w-0 flex-1 rounded-sm text-left hover:opacity-80"
+						>
 							<div className="flex items-center gap-2">
 								<span
 									className={`truncate text-sm font-medium ${
@@ -76,7 +94,17 @@ export function FiltersList({
 										? " · always"
 										: ""}
 							</p>
-						</div>
+							{filter.hasAnchor && (
+								<div className="mt-1.5 flex flex-wrap gap-1.5">
+									<WidenChip
+										widen={{
+											anchorCount: 1,
+											...(semanticUnavailable ? { inactive: true } : {}),
+										}}
+									/>
+								</div>
+							)}
+						</button>
 						<Button
 							variant="ghost"
 							size="sm"

package/src/components/settings/settings-filter.stories.tsx

@@ -0,0 +1,165 @@
+import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
+import { BottomSheet, type FolderOption } from "@remit/ui";
+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 { FilterEditor } from "./FilterEditor";
+
+/**
+ * `Flows/Settings Filters` — editing a standing filter in the same chip editor
+ * the Organize surface uses (RFC 038 D6), rendered from the real web-client
+ * component the settings page mounts. Each story opens a persisted filter into
+ * the editor: a literal rule, an anchored rule with its widen chip, an
+ * until-a-date rule, and the degraded case where the deployment cannot evaluate
+ * the anchor and the widen lists inactive (D4).
+ */
+
+const ACCOUNT_ID = "acc-1";
+
+const FOLDERS: FolderOption[] = [
+	{ id: "mbx-inbox", label: "Inbox" },
+	{ id: "mbx-archive", label: "Archive" },
+	{ id: "mbx-receipts", label: "Receipts" },
+	{ id: "mbx-travel", label: "Travel" },
+];
+
+const makeFilter = (
+	overrides: Partial<RemitImapFilterResponse> = {},
+): RemitImapFilterResponse => ({
+	filterId: "f-1",
+	accountConfigId: ACCOUNT_ID,
+	name: "Receipts",
+	scope: "Standing",
+	state: "Active",
+	hasAnchor: false,
+	ruleChangedAt: 0,
+	matchOperator: "And",
+	literalClauses: [
+		{ field: "From", value: "receipts@stripe.com" },
+		{ field: "Subject", value: "invoice" },
+	],
+	actionLabelId: "None",
+	actionMailboxId: "mbx-receipts",
+	createdAt: 0,
+	updatedAt: 0,
+	...overrides,
+});
+
+/**
+ * A bare client with no backend. The editor opens on `loading` and its preview
+ * settles to the count region's error state — these stories exercise the editor
+ * chrome (chips, read-only lifecycle, the widen chip), not the live count.
+ */
+function seededClient(): QueryClient {
+	return new QueryClient({
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+}
+
+/** Phone frame + a bottom sheet holding the editor, mirroring the mobile home. */
+function SheetStage({ children }: { children: ReactNode }) {
+	return (
+		<QueryClientProvider client={seededClient()}>
+			<ErrorBannerProvider>
+				<div className="relative mx-auto h-dvh w-full shrink-0 overflow-hidden bg-surface sm:my-6 sm:h-[760px] sm:w-[390px] sm:rounded-[2rem] sm:border sm:border-line sm:shadow-sm">
+					<div className="divide-y divide-line opacity-50">
+						{Array.from({ length: 8 }).map((_, index) => (
+							<div
+								// biome-ignore lint/suspicious/noArrayIndexKey: static backdrop skeleton, no ids
+								key={index}
+								className="flex items-start gap-3 px-row-inset py-2.5"
+							>
+								<div className="mt-0.5 size-7 shrink-0 rounded-full bg-surface-sunken" />
+								<div className="min-w-0 flex-1 space-y-1">
+									<div className="h-2.5 w-1/3 rounded bg-surface-sunken" />
+									<div className="h-2 w-2/3 rounded bg-surface-sunken" />
+								</div>
+							</div>
+						))}
+					</div>
+					<BottomSheet open onClose={() => undefined}>
+						{children}
+					</BottomSheet>
+				</div>
+			</ErrorBannerProvider>
+		</QueryClientProvider>
+	);
+}
+
+const meta: Meta = {
+	title: "Flows/Settings Filters",
+	parameters: { layout: "fullscreen" },
+};
+export default meta;
+
+type Story = StoryObj;
+
+/** A standing literal filter opened for editing. */
+export const EditStandingRule: Story = {
+	name: "Edit Standing Rule",
+	render: () => (
+		<SheetStage>
+			<FilterEditor
+				accountId={ACCOUNT_ID}
+				filter={makeFilter()}
+				folders={FOLDERS}
+				onClose={() => undefined}
+			/>
+		</SheetStage>
+	),
+};
+
+/** A filter with a semantic anchor — the widen lists as an active chip. */
+export const EditAnchoredRule: Story = {
+	name: "Edit Anchored Rule",
+	render: () => (
+		<SheetStage>
+			<FilterEditor
+				accountId={ACCOUNT_ID}
+				filter={makeFilter({ hasAnchor: true, name: "GitHub" })}
+				folders={FOLDERS}
+				onClose={() => undefined}
+			/>
+		</SheetStage>
+	),
+};
+
+/** A temporary filter — the scope loads as until-a-date with the stored date. */
+export const EditUntilADate: Story = {
+	name: "Edit Until A Date",
+	render: () => (
+		<SheetStage>
+			<FilterEditor
+				accountId={ACCOUNT_ID}
+				filter={makeFilter({
+					name: "Conference",
+					scope: "Temporary",
+					expiresAt: "2027-09-01T23:59:59+00:00",
+				})}
+				folders={FOLDERS}
+				onClose={() => undefined}
+			/>
+		</SheetStage>
+	),
+};
+
+/**
+ * The deployment cannot evaluate the filter's anchor (RFC 038 D4): the widen
+ * chip lists inactive, the rule matches by its literal clauses only, and the
+ * dead anchor is removable.
+ */
+export const DegradedAnchor: Story = {
+	name: "Degraded Anchor",
+	render: () => (
+		<SheetStage>
+			<FilterEditor
+				accountId={ACCOUNT_ID}
+				filter={makeFilter({ hasAnchor: true, name: "Newsletters" })}
+				folders={FOLDERS}
+				semanticUnavailable
+				onClose={() => undefined}
+			/>
+		</SheetStage>
+	),
+};

package/src/hooks/useRulePreview.ts

@@ -22,20 +22,25 @@ import type { OrganizeMatchPredicate } from "@/lib/organize/sender-fallback";
  * updates the count, so a slow early preview never overwrites a newer one. The
  * server bounds the match, so a broad predicate over a large mailbox stays a
  * single cheap request; the debounce is what keeps rapid edits from spamming it.
+ *
+ * `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.
  */
 export const useRulePreview = (
 	accountId: string | undefined,
 	predicate: OrganizeMatchPredicate,
-	seedCount: number,
+	seedCount?: number,
 ): PreviewCount => {
 	const mutation = useMutation(organizeOperationsPreviewOrganizeMutation());
 	const { mutateAsync } = mutation;
 	const currentSignature = predicateSignature(predicate);
 
-	const [state, setState] = useState<PreviewState>(() => ({
-		count: seedCount,
-		previewedSignature: currentSignature,
-	}));
+	const [state, setState] = useState<PreviewState>(() =>
+		seedCount === undefined
+			? {}
+			: { count: seedCount, previewedSignature: currentSignature },
+	);
 
 	const predicateRef = useRef(predicate);
 	predicateRef.current = predicate;

package/src/hooks/useUpdateFilter.ts

@@ -0,0 +1,56 @@
+import {
+	filterDetailOperationsGetFilterQueryKey,
+	filterDetailOperationsUpdateFilterMutation,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapUpdateFilterInput } from "@remit/api-http-client/types.gen.ts";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useCallback } from "react";
+import { buildFilterListKey } from "./useFilters";
+
+/**
+ * Patch an existing filter (RFC 038 D6). The server bumps `ruleChangedAt` only
+ * when the body touches a predicate or action field, never on a name-only
+ * rename (RFC 034 Decision 3.2) — the caller decides which fields to send. On
+ * success both the account's filter list and this filter's detail are
+ * invalidated so the settings page and any open editor read the saved rule.
+ */
+export const useUpdateFilter = (
+	accountId: string | undefined,
+	filterId: string | undefined,
+) => {
+	const queryClient = useQueryClient();
+	const mutation = useMutation({
+		...filterDetailOperationsUpdateFilterMutation(),
+		onSuccess: () => {
+			if (!accountId) return;
+			queryClient.invalidateQueries({
+				queryKey: buildFilterListKey(accountId),
+			});
+			if (filterId) {
+				queryClient.invalidateQueries({
+					queryKey: filterDetailOperationsGetFilterQueryKey({
+						path: { accountId, filterId },
+					}),
+				});
+			}
+		},
+	});
+	const { mutate } = mutation;
+
+	const updateFilter = useCallback(
+		(body: RemitImapUpdateFilterInput) => {
+			if (!accountId || !filterId) return;
+			mutate({ path: { accountId, filterId }, body });
+		},
+		[accountId, filterId, mutate],
+	);
+
+	return {
+		updateFilter,
+		isPending: mutation.isPending,
+		isSuccess: mutation.isSuccess,
+		isError: mutation.isError,
+		error: mutation.error,
+		reset: mutation.reset,
+	};
+};

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

@@ -0,0 +1,175 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
+import type { FilterRule } from "@remit/ui";
+import {
+	buildUpdateFilterInput,
+	expiresAtToPickedDate,
+	filterToRule,
+	ruleChangesPredicateOrAction,
+} from "./filter-edit-model";
+
+const filter = (
+	overrides: Partial<RemitImapFilterResponse> = {},
+): RemitImapFilterResponse => ({
+	filterId: "f-1",
+	accountConfigId: "acc-1",
+	name: "Receipts",
+	scope: "Standing",
+	state: "Active",
+	hasAnchor: false,
+	ruleChangedAt: 0,
+	matchOperator: "And",
+	literalClauses: [{ field: "From", value: "receipts@stripe.com" }],
+	actionLabelId: "None",
+	actionMailboxId: "mbx-receipts",
+	createdAt: 0,
+	updatedAt: 0,
+	...overrides,
+});
+
+describe("filterToRule", () => {
+	it("loads the persisted predicate, action and name unchanged", () => {
+		const rule = filterToRule(
+			filter({
+				matchOperator: "Or",
+				literalClauses: [
+					{ field: "From", value: "a@x.com" },
+					{ field: "Subject", value: "invoice" },
+				],
+			}),
+		);
+		assert.equal(rule.matchOperator, "any");
+		assert.equal(rule.name, "Receipts");
+		assert.equal(rule.moveMailboxId, "mbx-receipts");
+		assert.equal(rule.scope, "standing");
+		assert.deepEqual(
+			rule.clauses.map((clause) => [clause.field, clause.value]),
+			[
+				["From", "a@x.com"],
+				["Subject", "invoice"],
+			],
+		);
+	});
+
+	it("maps the None move sentinel to no action", () => {
+		const rule = filterToRule(filter({ actionMailboxId: "None" }));
+		assert.equal(rule.moveMailboxId, undefined);
+	});
+
+	it("loads a Temporary filter as an until-a-date rule", () => {
+		const rule = filterToRule(
+			filter({ scope: "Temporary", expiresAt: "2027-03-04T23:59:59+00:00" }),
+		);
+		assert.equal(rule.scope, "until");
+		assert.match(rule.until ?? "", /^\d{4}-\d{2}-\d{2}$/);
+	});
+
+	it("shows a semantic anchor as an active widen chip when the deployment can serve it", () => {
+		const rule = filterToRule(filter({ hasAnchor: true }));
+		assert.ok(rule.widen);
+		assert.equal(rule.widen?.inactive, undefined);
+	});
+
+	it("marks the widen inactive on a deployment that cannot evaluate it (D4)", () => {
+		const rule = filterToRule(filter({ hasAnchor: true }), true);
+		assert.equal(rule.widen?.inactive, true);
+	});
+
+	it("carries no widen when the filter has no anchor", () => {
+		assert.equal(filterToRule(filter({ hasAnchor: false })).widen, undefined);
+	});
+});
+
+describe("expiresAtToPickedDate", () => {
+	it("returns empty for absent or unparseable input", () => {
+		assert.equal(expiresAtToPickedDate(undefined), "");
+		assert.equal(expiresAtToPickedDate("not-a-date"), "");
+	});
+
+	it("reads the local calendar day", () => {
+		assert.match(
+			expiresAtToPickedDate("2027-03-04T12:00:00Z"),
+			/^2027-03-0[45]$/,
+		);
+	});
+});
+
+describe("ruleChangesPredicateOrAction", () => {
+	const base = filterToRule(filter({ hasAnchor: true }));
+
+	it("is false for an identical rule and for a rename only", () => {
+		assert.equal(ruleChangesPredicateOrAction(base, base), false);
+		assert.equal(
+			ruleChangesPredicateOrAction({ ...base, name: "New name" }, base),
+			false,
+		);
+	});
+
+	it("is true when a clause, operator, move target or widen changes", () => {
+		assert.equal(
+			ruleChangesPredicateOrAction({ ...base, matchOperator: "any" }, base),
+			true,
+		);
+		assert.equal(
+			ruleChangesPredicateOrAction(
+				{ ...base, moveMailboxId: "mbx-other" },
+				base,
+			),
+			true,
+		);
+		assert.equal(
+			ruleChangesPredicateOrAction({ ...base, widen: undefined }, base),
+			true,
+		);
+		assert.equal(
+			ruleChangesPredicateOrAction(
+				{ ...base, clauses: [{ id: "c", field: "Subject", value: "x" }] },
+				base,
+			),
+			true,
+		);
+	});
+});
+
+describe("buildUpdateFilterInput", () => {
+	const original = filterToRule(filter());
+
+	it("sends only the name for a cosmetic rename — no predicate fields", () => {
+		const body = buildUpdateFilterInput(
+			{ ...original, name: "Invoices" },
+			original,
+		);
+		assert.deepEqual(body, { name: "Invoices" });
+	});
+
+	it("sends the predicate and action on a rule change, so the server bumps ruleChangedAt", () => {
+		const changed: FilterRule = {
+			...original,
+			matchOperator: "any",
+			clauses: [{ id: "c", field: "ListId", value: "list.example.com" }],
+			moveMailboxId: "mbx-archive",
+		};
+		const body = buildUpdateFilterInput(changed, original);
+		assert.equal(body.matchOperator, "Or");
+		assert.equal(body.actionMailboxId, "mbx-archive");
+		assert.deepEqual(body.literalClauses, [
+			{ field: "ListId", value: "list.example.com" },
+		]);
+		assert.equal("name" in body, false);
+	});
+
+	it("drops a cleared move target to the None sentinel", () => {
+		const changed = {
+			...original,
+			moveMailboxId: undefined,
+			matchOperator: "any" as const,
+		};
+		const body = buildUpdateFilterInput(changed, original);
+		assert.equal(body.actionMailboxId, "None");
+	});
+
+	it("is empty when nothing changed", () => {
+		assert.deepEqual(buildUpdateFilterInput(original, original), {});
+	});
+});

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

@@ -0,0 +1,106 @@
+import type {
+	RemitImapFilterResponse,
+	RemitImapUpdateFilterInput,
+} from "@remit/api-http-client/types.gen.ts";
+import type { FilterRule, RuleClause } from "@remit/ui";
+import { NO_ACTION } from "./organize-model";
+
+/**
+ * The persisted filter as the chip editor's rule (RFC 038 D6). Loads the whole
+ * rule the user edits: literal clauses, the match operator, the move action, the
+ * scope (and, for a Temporary filter, the date it stops on), and the semantic
+ * anchor as a widen chip. The anchor renders inactive when this deployment
+ * cannot evaluate it (D4) — the rule then matches by its literal clauses only.
+ *
+ * The scope maps `Standing` → "standing" and `Temporary` → "until"; a persisted
+ * filter is never the one-time "once" scope. `moveMailboxId` drops the `"None"`
+ * sentinel to `undefined` so an empty folder select reads as "no move action".
+ */
+export const filterToRule = (
+	filter: RemitImapFilterResponse,
+	semanticUnavailable = false,
+): FilterRule => {
+	const clauses: RuleClause[] = filter.literalClauses.map((clause, index) => ({
+		id: `clause-${index}`,
+		field: clause.field,
+		value: clause.value,
+	}));
+	return {
+		clauses,
+		matchOperator: filter.matchOperator === "And" ? "all" : "any",
+		widen: filter.hasAnchor
+			? { anchorCount: 1, ...(semanticUnavailable ? { inactive: true } : {}) }
+			: undefined,
+		moveMailboxId:
+			filter.actionMailboxId !== NO_ACTION ? filter.actionMailboxId : undefined,
+		scope: filter.scope === "Temporary" ? "until" : "standing",
+		until:
+			filter.scope === "Temporary"
+				? expiresAtToPickedDate(filter.expiresAt)
+				: undefined,
+		name: filter.name,
+	};
+};
+
+/**
+ * The `YYYY-MM-DD` the date input shows for a stored `expiresAt`. The inverse of
+ * {@link pickedDateToExpiresAt}: it reads the local calendar day the timestamp
+ * falls on, so a date picked, saved, and reopened comes back unchanged. Empty
+ * or unparseable input yields an empty string — the picker's "no date" state.
+ */
+export const expiresAtToPickedDate = (
+	expiresAt: string | undefined,
+): string => {
+	if (!expiresAt) return "";
+	const ms = Date.parse(expiresAt);
+	if (Number.isNaN(ms)) return "";
+	const date = new Date(ms);
+	const pad = (value: number) => String(value).padStart(2, "0");
+	return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+};
+
+const predicateActionKey = (rule: FilterRule): string =>
+	JSON.stringify({
+		clauses: rule.clauses.map((clause) => [clause.field, clause.value]),
+		operator: rule.matchOperator,
+		move: rule.moveMailboxId ?? null,
+		widen: rule.widen ? (rule.widen.inactive ? "inactive" : "active") : "none",
+	});
+
+/**
+ * Whether the edited rule changes the predicate or the action versus the one it
+ * was loaded from — the clauses, the match operator, the move target, or the
+ * widen's presence. A change here is what bumps `ruleChangedAt` and offers the
+ * re-back-apply (RFC 034 Decision 3.2); the name is deliberately excluded, so a
+ * cosmetic rename is not a rule change.
+ */
+export const ruleChangesPredicateOrAction = (
+	rule: FilterRule,
+	original: FilterRule,
+): boolean => predicateActionKey(rule) !== predicateActionKey(original);
+
+/**
+ * The PATCH body for an edited filter. A cosmetic rename sends `{ name }` only,
+ * so the server's `changesPredicateOrAction` guard leaves `ruleChangedAt`
+ * untouched (RFC 034 Decision 3.2). A predicate or action change sends the
+ * operator, clauses, and move target, which bumps `ruleChangedAt`. Fields the
+ * editor never touches — the label action, the immutable scope/expiry — are
+ * absent from the patch, so the partial update preserves them.
+ */
+export const buildUpdateFilterInput = (
+	rule: FilterRule,
+	original: FilterRule,
+): RemitImapUpdateFilterInput => {
+	const body: RemitImapUpdateFilterInput = {};
+	const name = (rule.name ?? "").trim();
+	if (name !== (original.name ?? "").trim()) body.name = name;
+	if (ruleChangesPredicateOrAction(rule, original)) {
+		body.matchOperator = rule.matchOperator === "all" ? "And" : "Or";
+		body.literalClauses = rule.clauses.map((clause) => ({
+			field: clause.field,
+			value: clause.value,
+		}));
+		body.actionMailboxId = rule.moveMailboxId ?? NO_ACTION;
+	}
+	return body;
+};