@remit/web-client 0.0.65 → 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

@@ -0,0 +1,91 @@
+import { organizeOperationsPreviewOrganizeMutation } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { PreviewCount } from "@remit/ui";
+import { useMutation } from "@tanstack/react-query";
+import { useEffect, useRef, useState } from "react";
+import { buildOrganizeInput } from "@/lib/organize/organize-model";
+import {
+	derivePreview,
+	PREVIEW_DEBOUNCE_MS,
+	type PreviewState,
+	predicateSignature,
+} from "@/lib/organize/rule-model";
+import type { OrganizeMatchPredicate } from "@/lib/organize/sender-fallback";
+
+/**
+ * The live match count for the edited rule (RFC 038 D1). Every predicate change
+ * schedules a debounced `POST /organize/preview` and, until it lands, reports
+ * the last count as stale so the count never blanks and the commit gate can
+ * hold apply. Seeded with the widen probe's count, so opening the editor shows a
+ * settled number without an immediate re-fetch.
+ *
+ * Out-of-order responses are dropped: only the reply to the most recent request
+ * 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,
+): PreviewCount => {
+	const mutation = useMutation(organizeOperationsPreviewOrganizeMutation());
+	const { mutateAsync } = mutation;
+	const currentSignature = predicateSignature(predicate);
+
+	const [state, setState] = useState<PreviewState>(() =>
+		seedCount === undefined
+			? {}
+			: { count: seedCount, previewedSignature: currentSignature },
+	);
+
+	const predicateRef = useRef(predicate);
+	predicateRef.current = predicate;
+	const latestRequested = useRef(currentSignature);
+
+	useEffect(() => {
+		if (!accountId) return;
+		if (currentSignature === state.previewedSignature) return;
+		if (currentSignature === state.errorSignature) return;
+
+		const handle = setTimeout(() => {
+			const signature = currentSignature;
+			latestRequested.current = signature;
+			mutateAsync({
+				path: { accountId },
+				body: buildOrganizeInput({ ...predicateRef.current }),
+			})
+				.then((response) => {
+					if (latestRequested.current !== signature) return;
+					setState({
+						count: response.matchedCount,
+						previewedSignature: signature,
+					});
+				})
+				.catch((error: unknown) => {
+					if (latestRequested.current !== signature) return;
+					setState((previous) => ({
+						...previous,
+						error:
+							error instanceof Error
+								? error.message
+								: "Couldn't count matches.",
+						errorSignature: signature,
+					}));
+				});
+		}, PREVIEW_DEBOUNCE_MS);
+
+		return () => clearTimeout(handle);
+	}, [
+		accountId,
+		currentSignature,
+		state.previewedSignature,
+		state.errorSignature,
+		mutateAsync,
+	]);
+
+	return derivePreview(state, currentSignature);
+};

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), {});
+	});
+});