@remit/ui 0.0.48 → 0.0.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.48",
+  "version": "0.0.49",
   "type": "module",
   "files": [
     "src"

package/src/components/filter-rule-editor.stories.tsx

@@ -254,11 +254,13 @@ export const DegradedStandingWiden: Story = {
 };
 
 /**
- * Editing a persisted filter (RFC 038 D6): scope and expiry render read-only,
- * with a note that they — and the semantic anchor — are fixed at creation. The
- * name and the literal clauses stay editable; the widen chip is display-only.
+ * Editing a persisted filter (RFC 038 D6, reader #266): scope and expiry stay
+ * live and editable — a standing filter can move to "until a date" and back,
+ * or its date can change. The semantic anchor is the one thing fixed at
+ * creation: the widen chip renders display-only with a one-line note, and
+ * "Just once" drops out of the scope toggle since no saved filter can hold it.
  */
-export const LifecycleLocked: Story = {
+export const AnchorLocked: Story = {
 	args: {
 		rule: {
 			...demoRule,
@@ -269,7 +271,7 @@ export const LifecycleLocked: Story = {
 		folders: demoFolders,
 		preview: READY(31),
 		semanticAvailable: false,
-		lifecycleLocked: true,
+		anchorLocked: true,
 	},
 };
 

package/src/components/filter-rule-editor.tsx

@@ -56,14 +56,20 @@ export interface FilterRuleEditorProps {
 	 */
 	clauseFields?: ClauseField[];
 	/**
-	 * Render the scope and expiry read-only (RFC 038 D6). A persisted filter's
-	 * scope, expiry, and semantic anchor are fixed at creation — the update
-	 * endpoint carries none of them — so editing a filter shows them as a static
-	 * summary with a note rather than live controls that would silently discard
-	 * the change (reader #266 tracks lifting this). The name and the literal
-	 * predicate stay editable.
+	 * Whether the semantic anchor is fixed and cannot be added, removed, or
+	 * repointed (RFC 038 D6, reader #266). True for an existing, persisted
+	 * filter — the update endpoint carries no anchor field at all, so
+	 * repointing one would silently change what a saved filter matches with
+	 * nothing visible changing, and that deserves a new filter instead. The
+	 * widen chip renders display-only (no remove affordance regardless of
+	 * `onRemoveWiden`) and carries a one-line note explaining why.
+	 *
+	 * Scope and expiry are NOT covered by this flag — they stay editable even
+	 * on an existing filter (reader #266). The only other thing this locks is
+	 * the "Just once" scope option, meaningless for an already-persisted
+	 * filter, which is dropped from the scope toggle.
 	 */
-	lifecycleLocked?: boolean;
+	anchorLocked?: boolean;
 	/** The inline clause form, when adding or editing a clause. */
 	clauseEdit?: ClauseEditState;
 	onStartAddClause?: () => void;
@@ -252,7 +258,7 @@ export function FilterRuleEditor({
 	notice,
 	semanticAvailable = false,
 	clauseFields,
-	lifecycleLocked = false,
+	anchorLocked = false,
 	clauseEdit,
 	onStartAddClause,
 	onStartEditClause,
@@ -278,6 +284,12 @@ export function FilterRuleEditor({
 	const join = matchJoinWord(rule.matchOperator);
 	const blockedReason = commitBlockedReason(rule, preview);
 	const needsName = rule.scope === "standing" || rule.scope === "until";
+	// A persisted filter is always Standing or Temporary — "once" was never a
+	// scope a saved row could hold, so an existing filter's editor never offers
+	// it (reader #266).
+	const availableScopeOptions = anchorLocked
+		? scopeOptions.filter((option) => option.value !== "once")
+		: scopeOptions;
 
 	return (
 		<div className="flex min-h-0 flex-col">
@@ -314,16 +326,22 @@ export function FilterRuleEditor({
 										{join}
 									</span>
 								)}
-								<WidenChip widen={rule.widen} onRemove={onRemoveWiden} />
+								<WidenChip
+									widen={rule.widen}
+									onRemove={anchorLocked ? undefined : onRemoveWiden}
+								/>
 							</>
 						)}
 
 						{!clauseEdit && (
 							<AddChipButton label="Add clause" onClick={onStartAddClause} />
 						)}
-						{!rule.widen && semanticAvailable && !clauseEdit && (
-							<AddChipButton label="…and similar" onClick={onAddWiden} />
-						)}
+						{!rule.widen &&
+							!anchorLocked &&
+							semanticAvailable &&
+							!clauseEdit && (
+								<AddChipButton label="…and similar" onClick={onAddWiden} />
+							)}
 					</div>
 
 					{clauseEdit && (
@@ -338,6 +356,13 @@ export function FilterRuleEditor({
 						/>
 					)}
 
+					{anchorLocked && rule.widen && (
+						<p className="text-2xs text-fg-subtle">
+							This filter's similar-mail match is fixed to the message it was
+							created from — create a new filter to change it.
+						</p>
+					)}
+
 					{showOperator && (
 						<div className="flex items-center gap-2">
 							<span className="text-xs text-fg-muted">Match</span>
@@ -374,22 +399,14 @@ export function FilterRuleEditor({
 
 				<section className="space-y-2">
 					<p className="text-xs font-medium text-fg-muted">How long</p>
-					{lifecycleLocked ? (
-						<p className="text-xs text-fg">
-							{rule.scope === "until"
-								? `Until ${rule.until ?? ""}`
-								: "Always — runs on matching mail"}
-						</p>
-					) : (
-						<SegmentedControl
-							name="rule-scope"
-							size="sm"
-							aria-label="Rule scope"
-							options={scopeOptions}
-							value={rule.scope}
-							onChange={(value) => onChangeScope?.(value)}
-						/>
-					)}
+					<SegmentedControl
+						name="rule-scope"
+						size="sm"
+						aria-label="Rule scope"
+						options={availableScopeOptions}
+						value={rule.scope}
+						onChange={(value) => onChangeScope?.(value)}
+					/>
 					{needsName && (
 						<Input
 							value={rule.name ?? ""}
@@ -399,7 +416,7 @@ export function FilterRuleEditor({
 							className="w-full"
 						/>
 					)}
-					{!lifecycleLocked && rule.scope === "until" && (
+					{rule.scope === "until" && (
 						<div className="flex items-center gap-2 text-xs text-fg-muted">
 							<span>Until</span>
 							<Input
@@ -411,13 +428,6 @@ export function FilterRuleEditor({
 							/>
 						</div>
 					)}
-					{lifecycleLocked && (
-						<p className="text-2xs text-fg-subtle">
-							{rule.widen
-								? "The scope, expiry, and similar-mail match are set when a filter is created."
-								: "The scope and expiry are set when a filter is created."}
-						</p>
-					)}
 				</section>
 
 				<div className="border-t border-line pt-3">

package/src/components/filter-rule.render.test.ts

@@ -555,35 +555,48 @@ describe("FilterRuleEditor", () => {
 		assert.match(editor(), /47 messages match/);
 	});
 
-	it("renders scope and expiry read-only when the lifecycle is locked", () => {
+	it("keeps scope and expiry live and editable on an anchor-locked (existing) filter (reader #266)", () => {
 		const html = editor({
 			rule: { ...demoRule, scope: "until", until: "2027-09-01" },
-			lifecycleLocked: true,
+			anchorLocked: true,
 		});
-		// No live scope toggle, no editable date input — a static summary and a note.
-		assert.doesNotMatch(html, /aria-label="Rule scope"/);
-		assert.doesNotMatch(html, /aria-label="Expiry date"/);
-		assert.match(html, /Until 2027-09-01/);
-		assert.match(html, /set when a filter is created/);
-		// The name stays editable.
+		assert.match(html, /aria-label="Rule scope"/);
+		assert.match(html, /aria-label="Expiry date"/);
 		assert.match(html, /aria-label="Rule name"/);
 	});
 
-	it("names the similar-mail match in the locked note only when a widen is present", () => {
+	it("drops the once option from the scope toggle on an anchor-locked filter", () => {
+		const locked = editor({ anchorLocked: true });
+		assert.doesNotMatch(locked, />Just once</);
+		const unlocked = editor({ anchorLocked: false });
+		assert.match(unlocked, />Just once</);
+	});
+
+	it("locks the widen chip and explains why only when one is present", () => {
 		const withWiden = editor({
 			rule: { ...demoRule, widen: { anchorCount: 2 } },
-			lifecycleLocked: true,
+			anchorLocked: true,
 		});
-		assert.match(
+		assert.doesNotMatch(
 			withWiden,
-			/similar-mail match are set when a filter is created/,
+			/aria-label="Remove the similar-mail widen"/,
 		);
+		assert.match(withWiden, /similar-mail match is fixed to the message/);
+
 		const literal = editor({
 			rule: { ...demoRule, widen: undefined },
-			lifecycleLocked: true,
+			anchorLocked: true,
+		});
+		assert.doesNotMatch(literal, /similar-mail match is fixed/);
+	});
+
+	it("never offers to add a widen on an anchor-locked filter, even when the deployment can serve it", () => {
+		const html = editor({
+			rule: { ...demoRule, widen: undefined },
+			anchorLocked: true,
+			semanticAvailable: true,
 		});
-		assert.match(literal, /scope and expiry are set when a filter is created/);
-		assert.doesNotMatch(literal, /similar-mail match/);
+		assert.doesNotMatch(html, /…and similar/);
 	});
 });