@remit/web-client 0.0.74 → 0.0.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.74",
+  "version": "0.0.75",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

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

@@ -60,12 +60,17 @@ const filterFixture = (
 
 type Responder = (call: HttpCall) => unknown;
 
-/** Fields whose presence in a patch bumps `ruleChangedAt` (RFC 034 Decision 3.2). */
-const PREDICATE_OR_ACTION = [
+/**
+ * Fields whose presence in a patch bumps `ruleChangedAt` (RFC 034 Decision
+ * 3.2, reader #266).
+ */
+const RULE_ASSERTION_FIELDS = [
 	"matchOperator",
 	"literalClauses",
 	"actionLabelId",
 	"actionMailboxId",
+	"scope",
+	"expiresAt",
 ];
 
 /**
@@ -84,7 +89,7 @@ const backend = (
 		}
 		if (call.path.endsWith("/filters/f-1") && call.method === "PATCH") {
 			const body = call.body ?? {};
-			const bumped = PREDICATE_OR_ACTION.some((field) => field in body);
+			const bumped = RULE_ASSERTION_FIELDS.some((field) => field in body);
 			return {
 				...filter,
 				...body,
@@ -254,12 +259,12 @@ describe("FilterEditor — degraded semantic filter (RFC 038 D4)", () => {
 			dom.query('[aria-label="Remove the similar-mail widen"]'),
 			null,
 		);
-		assert.match(dom.text(), /set when a filter is created/i);
+		assert.match(dom.text(), /similar-mail match is fixed to the message/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 () => {
+describe("FilterEditor — scope and expiry are editable (reader #266)", () => {
+	it("keeps the scope toggle and date input live, minus the once option", async () => {
 		const dom = mount(
 			filterFixture({
 				scope: "Temporary",
@@ -268,14 +273,56 @@ describe("FilterEditor — scope and expiry are read-only (reader #266)", () =>
 		);
 		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);
+		assert.ok(dom.query('input[name="rule-scope"]'));
+		assert.ok(dom.byLabel("Expiry date"));
+		assert.doesNotMatch(dom.text(), /Just once/);
 
-		// The name stays editable.
+		// The name stays editable too.
 		assert.ok(dom.byLabel("Rule name"));
 	});
+
+	it("moves a standing filter to until-a-date, patches scope and expiresAt, and offers the re-apply", async () => {
+		const dom = mount(filterFixture());
+		await settlePreview(dom);
+
+		dom.click(dom.byText("label", "Until a date"));
+		dom.type(dom.byLabel("Expiry date"), "2027-09-01");
+		await dom.flush();
+
+		dom.click(primaryButton(dom, "Save until then"));
+		await dom.flush();
+
+		const patch = patchCalls();
+		assert.equal(patch.length, 1);
+		assert.equal(patch[0].body?.scope, "Temporary");
+		assert.match(String(patch[0].body?.expiresAt ?? ""), /^2027-09-01T/);
+		// The predicate/action and the name are untouched, so neither travels.
+		assert.equal("matchOperator" in (patch[0].body ?? {}), false);
+		assert.equal("name" in (patch[0].body ?? {}), false);
+
+		// A scope/expiry change is a rule reassertion too — it offers the
+		// re-apply exactly like a predicate/action change does.
+		assert.match(dom.text(), /Move existing mail/);
+	});
+
+	it("moves an until-a-date filter back to standing and clears the expiry", async () => {
+		const dom = mount(
+			filterFixture({
+				scope: "Temporary",
+				expiresAt: "2027-09-01T23:59:59+00:00",
+			}),
+		);
+		await settlePreview(dom);
+
+		dom.click(dom.byText("label", "Keep doing this"));
+		await dom.flush();
+
+		dom.click(primaryButton(dom, "Save rule"));
+		await dom.flush();
+
+		const patch = patchCalls();
+		assert.equal(patch.length, 1);
+		assert.equal(patch[0].body?.scope, "Standing");
+		assert.equal("expiresAt" in (patch[0].body ?? {}), false);
+	});
 });

package/src/components/settings/FilterEditor.tsx

@@ -8,6 +8,7 @@ import {
 	type FolderOption,
 	type MatchOperator,
 	previewCountSummary,
+	type RuleScope,
 } from "@remit/ui";
 import { CheckCircle2, Loader2 } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
@@ -19,6 +20,7 @@ import {
 	buildUpdateFilterInput,
 	filterToRule,
 	ruleChangesPredicateOrAction,
+	ruleChangesScopeOrExpiry,
 } from "@/lib/organize/filter-edit-model";
 import {
 	normalizeClauseValue,
@@ -43,11 +45,14 @@ interface FilterEditorProps {
 /**
  * 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.
+ * operator, move action, scope, expiry, and the semantic anchor as a widen
+ * chip. Saving a predicate, action, scope, or expiry change bumps
+ * `ruleChangedAt` and offers, never runs, a re-back-apply over existing mail;
+ * a cosmetic rename does neither (RFC 034 Decision 3.2, reader #266). The
+ * re-apply carries exactly the previewed predicate and is held behind the
+ * same settled-count commit gate as creation. The anchor stays fixed at
+ * creation regardless — repointing it would silently change what the filter
+ * matches, which deserves a new filter instead.
  */
 export function FilterEditor({
 	accountId,
@@ -142,14 +147,26 @@ export function FilterEditor({
 	const changeName = (name: string) =>
 		setRule((current) => ({ ...current, name }));
 
+	const changeScope = (scope: RuleScope) =>
+		setRule((current) => ({
+			...current,
+			scope,
+			until: scope === "until" ? current.until : undefined,
+		}));
+
+	const changeUntil = (until: string) =>
+		setRule((current) => ({ ...current, until }));
+
 	const commit = () => {
-		const predicateChanged = ruleChangesPredicateOrAction(rule, original);
+		const rulesChanged =
+			ruleChangesPredicateOrAction(rule, original) ||
+			ruleChangesScopeOrExpiry(rule, original);
 		const body = buildUpdateFilterInput(rule, original);
 		if (Object.keys(body).length === 0) {
 			onClose();
 			return;
 		}
-		setOfferReapply(predicateChanged);
+		setOfferReapply(rulesChanged);
 		update.updateFilter(body);
 	};
 
@@ -188,13 +205,15 @@ export function FilterEditor({
 			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`.
+			// The update endpoint carries no anchor field at all (reader #266), 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 — anchorLocked enforces that regardless).
+			// `semanticUnavailable` only drives the chip's inactive styling via
+			// `filterToRule`.
 			semanticAvailable={false}
 			clauseFields={SUPPORTED_CLAUSE_FIELDS}
-			lifecycleLocked
+			anchorLocked
 			clauseEdit={clauseEdit}
 			onStartAddClause={startAddClause}
 			onStartEditClause={startEditClause}
@@ -207,6 +226,8 @@ export function FilterEditor({
 			onChangeMove={changeMove}
 			onCreateFolder={createFolder}
 			onChangeName={changeName}
+			onChangeScope={changeScope}
+			onChangeUntil={changeUntil}
 			onCommit={commit}
 			onCancel={onClose}
 		/>

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

@@ -7,6 +7,7 @@ import {
 	expiresAtToPickedDate,
 	filterToRule,
 	ruleChangesPredicateOrAction,
+	ruleChangesScopeOrExpiry,
 } from "./filter-edit-model";
 
 const filter = (
@@ -132,6 +133,48 @@ describe("ruleChangesPredicateOrAction", () => {
 	});
 });
 
+describe("ruleChangesScopeOrExpiry (reader #266)", () => {
+	const base = filterToRule(filter());
+
+	it("is false for an identical rule and for a rename only", () => {
+		assert.equal(ruleChangesScopeOrExpiry(base, base), false);
+		assert.equal(
+			ruleChangesScopeOrExpiry({ ...base, name: "New name" }, base),
+			false,
+		);
+	});
+
+	it("is true when scope moves to until-a-date", () => {
+		assert.equal(
+			ruleChangesScopeOrExpiry(
+				{ ...base, scope: "until", until: "2027-01-01" },
+				base,
+			),
+			true,
+		);
+	});
+
+	it("is true when only the until date changes", () => {
+		const untilBase = filterToRule(
+			filter({ scope: "Temporary", expiresAt: "2027-01-01T23:59:59+00:00" }),
+		);
+		assert.equal(
+			ruleChangesScopeOrExpiry(
+				{ ...untilBase, until: "2027-06-01" },
+				untilBase,
+			),
+			true,
+		);
+	});
+
+	it("is false when moving between standing and once-equivalent scopes with no until set", () => {
+		assert.equal(
+			ruleChangesScopeOrExpiry({ ...base, scope: "standing" }, base),
+			false,
+		);
+	});
+});
+
 describe("buildUpdateFilterInput", () => {
 	const original = filterToRule(filter());
 
@@ -172,4 +215,47 @@ describe("buildUpdateFilterInput", () => {
 	it("is empty when nothing changed", () => {
 		assert.deepEqual(buildUpdateFilterInput(original, original), {});
 	});
+
+	it("sends scope Temporary and a derived expiresAt when moving to until-a-date (reader #266)", () => {
+		const changed: FilterRule = {
+			...original,
+			scope: "until",
+			until: "2027-03-04",
+		};
+		const body = buildUpdateFilterInput(changed, original);
+		assert.equal(body.scope, "Temporary");
+		assert.match(body.expiresAt ?? "", /^2027-03-04T/);
+		assert.equal("matchOperator" in body, false);
+		assert.equal("name" in body, false);
+	});
+
+	it("sends scope Standing with no expiresAt when moving off a Temporary filter", () => {
+		const temporaryOriginal = filterToRule(
+			filter({ scope: "Temporary", expiresAt: "2027-01-01T23:59:59+00:00" }),
+		);
+		const changed: FilterRule = { ...temporaryOriginal, scope: "standing" };
+		const body = buildUpdateFilterInput(changed, temporaryOriginal);
+		assert.equal(body.scope, "Standing");
+		assert.equal("expiresAt" in body, false);
+	});
+
+	it("sends scope and the new expiresAt when only the date changes", () => {
+		const temporaryOriginal = filterToRule(
+			filter({ scope: "Temporary", expiresAt: "2027-01-01T23:59:59+00:00" }),
+		);
+		const changed: FilterRule = { ...temporaryOriginal, until: "2027-06-01" };
+		const body = buildUpdateFilterInput(changed, temporaryOriginal);
+		assert.equal(body.scope, "Temporary");
+		assert.match(body.expiresAt ?? "", /^2027-06-01T/);
+	});
+
+	it("carries no anchor field — the editor never has one to send (reader #266)", () => {
+		const changed: FilterRule = {
+			...original,
+			scope: "until",
+			until: "2027-03-04",
+		};
+		const body = buildUpdateFilterInput(changed, original);
+		assert.equal("anchorMessageId" in body, false);
+	});
 });

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

@@ -3,6 +3,7 @@ import type {
 	RemitImapUpdateFilterInput,
 } from "@remit/api-http-client/types.gen.ts";
 import type { FilterRule, RuleClause } from "@remit/ui";
+import { pickedDateToExpiresAt } from "./filter-status";
 import { NO_ACTION } from "./organize-model";
 
 /**
@@ -79,13 +80,34 @@ export const ruleChangesPredicateOrAction = (
 	original: FilterRule,
 ): boolean => predicateActionKey(rule) !== predicateActionKey(original);
 
+const scopeExpiryKey = (rule: FilterRule): string =>
+	JSON.stringify({
+		scope: rule.scope === "until" ? "until" : "standing",
+		until: rule.scope === "until" ? (rule.until ?? "") : "",
+	});
+
+/**
+ * Whether the edited rule changes scope (standing ↔ until-a-date) or the date
+ * itself, versus the one it was loaded from (reader #266). Scope and expiry
+ * are mutable on an existing filter, unlike the anchor, and a change here
+ * bumps `ruleChangedAt` the same way a predicate/action change does — moving a
+ * lapsed filter back to Standing (or extending its date) is the same kind of
+ * "the user just reasserted this rule" moment, and re-offers the back-apply so
+ * mail delivered while the filter sat inactive can be caught up.
+ */
+export const ruleChangesScopeOrExpiry = (
+	rule: FilterRule,
+	original: FilterRule,
+): boolean => scopeExpiryKey(rule) !== scopeExpiryKey(original);
+
 /**
  * The PATCH body for an edited filter. A cosmetic rename sends `{ name }` only,
- * so the server's `changesPredicateOrAction` guard leaves `ruleChangedAt`
+ * so the server's `changesRuleAssertion` 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.
+ * operator, clauses, and move target; a scope or expiry change sends `scope`
+ * and, for the `until` scope, `expiresAt` (reader #266) — either bumps
+ * `ruleChangedAt`. The label action and the anchor are never in the editor's
+ * gift, so they never enter the patch; the partial update preserves them.
  */
 export const buildUpdateFilterInput = (
 	rule: FilterRule,
@@ -102,5 +124,11 @@ export const buildUpdateFilterInput = (
 		}));
 		body.actionMailboxId = rule.moveMailboxId ?? NO_ACTION;
 	}
+	if (ruleChangesScopeOrExpiry(rule, original)) {
+		body.scope = rule.scope === "until" ? "Temporary" : "Standing";
+		if (rule.scope === "until") {
+			body.expiresAt = pickedDateToExpiresAt(rule.until ?? "");
+		}
+	}
 	return body;
 };