@remit/web-client 0.0.65 → 0.0.67

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;
+};

package/src/lib/organize/rule-model.test.ts

@@ -0,0 +1,297 @@
+/**
+ * The rule ↔ predicate wiring behind the Organize chip editor (RFC 038 D1). The
+ * load-bearing contract lives here: the predicate the editor previews is exactly
+ * the predicate a commit applies, so the count on screen is the set that moves.
+ */
+
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import type { FilterRule } from "@remit/ui";
+import { buildOrganizeInput } from "./organize-model";
+import {
+	buildInitialRule,
+	derivePreview,
+	normalizeClauseValue,
+	normalizeListId,
+	predicateSignature,
+	rulePredicate,
+	ruleToDraft,
+	SUPPORTED_CLAUSE_FIELDS,
+} from "./rule-model";
+
+describe("SUPPORTED_CLAUSE_FIELDS", () => {
+	it("offers every field the backend matcher now evaluates, ListId and FromDomain included (#262)", () => {
+		assert.deepEqual(SUPPORTED_CLAUSE_FIELDS, [
+			"From",
+			"Subject",
+			"HasWords",
+			"ListId",
+			"FromDomain",
+		]);
+	});
+});
+
+describe("normalizeListId", () => {
+	it("strips the bracketed identifier, trims, and case-folds — matching the backend", () => {
+		assert.equal(
+			normalizeListId("<Weekly.News.Example.com>"),
+			"weekly.news.example.com",
+		);
+		assert.equal(normalizeListId("  Weekly.News  "), "weekly.news");
+		assert.equal(normalizeListId(""), "");
+	});
+
+	it("only normalizes the ListId field, trimming the rest", () => {
+		assert.equal(
+			normalizeClauseValue("ListId", "<List.Example.COM>"),
+			"list.example.com",
+		);
+		assert.equal(normalizeClauseValue("From", "  a@x.com  "), "a@x.com");
+		assert.equal(
+			normalizeClauseValue("FromDomain", " github.com "),
+			"github.com",
+		);
+	});
+});
+
+describe("buildInitialRule", () => {
+	it("opens a semantic-capable rule on the widen anchor with no literal clauses", () => {
+		const rule = buildInitialRule({
+			anchorMessageId: "msg-1",
+			semanticUnavailable: false,
+			senders: [],
+			selectionCount: 3,
+		});
+		assert.equal(rule.clauses.length, 0);
+		assert.deepEqual(rule.widen, { anchorCount: 3 });
+		assert.equal(rule.matchOperator, "all");
+		assert.equal(rule.scope, "once");
+	});
+
+	it("opens the sender fallback on visible, editable derived From chips (#251)", () => {
+		const rule = buildInitialRule({
+			anchorMessageId: "msg-1",
+			semanticUnavailable: true,
+			senders: ["a@x.com", "b@y.com"],
+			selectionCount: 2,
+		});
+		assert.equal(rule.widen, undefined);
+		assert.equal(rule.matchOperator, "any");
+		assert.deepEqual(
+			rule.clauses.map((clause) => ({
+				field: clause.field,
+				value: clause.value,
+				derived: clause.derived,
+			})),
+			[
+				{ field: "From", value: "a@x.com", derived: true },
+				{ field: "From", value: "b@y.com", derived: true },
+			],
+		);
+	});
+
+	it("collapses senders sharing a registrable domain to one derived FromDomain chip (#262)", () => {
+		const rule = buildInitialRule({
+			semanticUnavailable: true,
+			senders: ["npm@github.com", "ci@sub.github.com"],
+			selectionCount: 2,
+		});
+		assert.equal(rule.matchOperator, "any");
+		assert.deepEqual(
+			rule.clauses.map((clause) => ({
+				field: clause.field,
+				value: clause.value,
+				derived: clause.derived,
+			})),
+			[{ field: "FromDomain", value: "github.com", derived: true }],
+		);
+	});
+
+	it("carries a Something-else seed's folder and scope", () => {
+		const rule = buildInitialRule({
+			anchorMessageId: "msg-1",
+			semanticUnavailable: false,
+			senders: [],
+			selectionCount: 1,
+			seedMailboxId: "mbx-archive",
+			seedScope: "standing",
+		});
+		assert.equal(rule.moveMailboxId, "mbx-archive");
+		assert.equal(rule.scope, "standing");
+	});
+
+	it("offers no widen when there is no anchor to ride on", () => {
+		const rule = buildInitialRule({
+			semanticUnavailable: false,
+			senders: [],
+			selectionCount: 0,
+		});
+		assert.equal(rule.widen, undefined);
+	});
+});
+
+const semanticRule: FilterRule = {
+	clauses: [{ id: "c1", field: "Subject", value: "receipt" }],
+	matchOperator: "all",
+	widen: { anchorCount: 2 },
+	moveMailboxId: "mbx-archive",
+	scope: "once",
+};
+
+describe("rulePredicate", () => {
+	it("includes the anchor while the widen is present and active", () => {
+		const predicate = rulePredicate(semanticRule, "msg-1");
+		assert.equal(predicate.anchorMessageId, "msg-1");
+		assert.equal(predicate.matchOperator, "And");
+		assert.deepEqual(predicate.literalClauses, [
+			{ field: "Subject", value: "receipt" },
+		]);
+	});
+
+	it("drops the anchor once the widen is removed", () => {
+		const predicate = rulePredicate(
+			{ ...semanticRule, widen: undefined },
+			"msg-1",
+		);
+		assert.equal(predicate.anchorMessageId, undefined);
+	});
+
+	it("drops the anchor for a widen the deployment cannot evaluate (D4 inactive)", () => {
+		const predicate = rulePredicate(
+			{ ...semanticRule, widen: { anchorCount: 2, inactive: true } },
+			"msg-1",
+		);
+		assert.equal(predicate.anchorMessageId, undefined);
+	});
+
+	it("maps the any operator to Or", () => {
+		const predicate = rulePredicate(
+			{ ...semanticRule, matchOperator: "any" },
+			"msg-1",
+		);
+		assert.equal(predicate.matchOperator, "Or");
+	});
+});
+
+describe("predicateSignature", () => {
+	it("is stable across identical predicates", () => {
+		assert.equal(
+			predicateSignature(rulePredicate(semanticRule, "msg-1")),
+			predicateSignature(rulePredicate(semanticRule, "msg-1")),
+		);
+	});
+
+	it("changes when a clause value changes", () => {
+		const changed: FilterRule = {
+			...semanticRule,
+			clauses: [{ id: "c1", field: "Subject", value: "invoice" }],
+		};
+		assert.notEqual(
+			predicateSignature(rulePredicate(semanticRule, "msg-1")),
+			predicateSignature(rulePredicate(changed, "msg-1")),
+		);
+	});
+
+	it("changes when the widen is removed", () => {
+		assert.notEqual(
+			predicateSignature(rulePredicate(semanticRule, "msg-1")),
+			predicateSignature(
+				rulePredicate({ ...semanticRule, widen: undefined }, "msg-1"),
+			),
+		);
+	});
+});
+
+describe("the previewed set equals the applied set", () => {
+	it("carries exactly the previewed predicate into the commit draft", () => {
+		const preview = buildOrganizeInput({
+			...rulePredicate(semanticRule, "msg-1"),
+			matchOperator: rulePredicate(semanticRule, "msg-1").matchOperator,
+			literalClauses: rulePredicate(semanticRule, "msg-1").literalClauses,
+		});
+		const apply = buildOrganizeInput(ruleToDraft(semanticRule, "msg-1"));
+		assert.equal(apply.anchorMessageId, preview.anchorMessageId);
+		assert.equal(apply.matchOperator, preview.matchOperator);
+		assert.deepEqual(apply.literalClauses, preview.literalClauses);
+	});
+
+	it("keeps them equal for the sender fallback (no anchor, Or)", () => {
+		const rule = buildInitialRule({
+			semanticUnavailable: true,
+			senders: ["a@x.com", "b@y.com"],
+			selectionCount: 2,
+		});
+		const predicate = rulePredicate(rule);
+		const apply = buildOrganizeInput(ruleToDraft(rule));
+		assert.equal(apply.anchorMessageId, undefined);
+		assert.equal(apply.matchOperator, "Or");
+		assert.deepEqual(apply.literalClauses, predicate.literalClauses);
+	});
+
+	it("adds the expiry only for the until scope, never touching the match set", () => {
+		const once = ruleToDraft(semanticRule, "msg-1");
+		assert.equal(once.expiresAt, undefined);
+
+		const until = ruleToDraft(
+			{ ...semanticRule, scope: "until", until: "2999-01-02" },
+			"msg-1",
+		);
+		assert.ok(until.expiresAt?.startsWith("2999-01-02"));
+		assert.deepEqual(until.literalClauses, once.literalClauses);
+		assert.equal(until.anchorMessageId, once.anchorMessageId);
+	});
+
+	it("carries the move destination into the draft", () => {
+		assert.equal(
+			ruleToDraft(semanticRule, "msg-1").moveMailboxId,
+			"mbx-archive",
+		);
+	});
+});
+
+describe("derivePreview", () => {
+	const signature = "sig-current";
+
+	it("is loading before the first count lands", () => {
+		assert.deepEqual(derivePreview({}, signature), { status: "loading" });
+	});
+
+	it("is ready when the count was counted for the current predicate", () => {
+		assert.deepEqual(
+			derivePreview({ count: 42, previewedSignature: signature }, signature),
+			{ status: "ready", count: 42 },
+		);
+	});
+
+	it("goes stale — never blank — when the predicate has moved past the count", () => {
+		assert.deepEqual(
+			derivePreview({ count: 42, previewedSignature: "sig-old" }, signature),
+			{ status: "ready", count: 42, stale: true },
+		);
+	});
+
+	it("surfaces an error raised for the current predicate", () => {
+		assert.deepEqual(
+			derivePreview(
+				{ count: 1, error: "boom", errorSignature: signature },
+				signature,
+			),
+			{ status: "error", reason: "boom" },
+		);
+	});
+
+	it("ignores an error raised for a predicate already moved past", () => {
+		assert.deepEqual(
+			derivePreview(
+				{
+					count: 5,
+					previewedSignature: signature,
+					error: "boom",
+					errorSignature: "sig-old",
+				},
+				signature,
+			),
+			{ status: "ready", count: 5 },
+		);
+	});
+});

package/src/lib/organize/rule-model.ts

@@ -0,0 +1,205 @@
+import type {
+	ClauseField,
+	FilterRule,
+	MatchOperator,
+	PreviewCount,
+	RuleClause,
+	RuleScope,
+} from "@remit/ui";
+import { pickedDateToExpiresAt } from "./filter-status";
+import type { OrganizeDraft } from "./organize-model";
+import {
+	deriveSenderClauses,
+	type OrganizeMatchPredicate,
+} from "./sender-fallback";
+
+/**
+ * The clause fields the Organize editor may offer (RFC 038 D2). Gated on what
+ * the backend matcher evaluates, not on what the generated enum carries: every
+ * one of these is honored by the literal matcher and the back-apply corpus
+ * projection (match.ts), so a chip never previews a set the apply can't
+ * reproduce. `ListId` and `FromDomain` joined once their matcher shipped (#262).
+ */
+export const SUPPORTED_CLAUSE_FIELDS: ClauseField[] = [
+	"From",
+	"Subject",
+	"HasWords",
+	"ListId",
+	"FromDomain",
+];
+
+/**
+ * Canonical form of a `ListId` clause value, matching the backend's
+ * `normalizeListId` (list-id.ts): the bracketed identifier when present,
+ * otherwise the whole value, trimmed and case-folded. Normalizing at input keeps
+ * the chip the user sees identical to the value the matcher compares, so
+ * `<weekly.news.example.com>` and `Weekly.News.Example.com` are one list.
+ */
+export const normalizeListId = (value: string): string => {
+	const trimmed = value.trim();
+	const bracketed = trimmed.match(/<([^>]+)>/);
+	return (bracketed ? bracketed[1] : trimmed).trim().toLowerCase();
+};
+
+/** Canonicalize a clause value for its field before it becomes a chip. */
+export const normalizeClauseValue = (
+	field: ClauseField,
+	value: string,
+): string => (field === "ListId" ? normalizeListId(value) : value.trim());
+
+const toApiOperator = (operator: MatchOperator): "And" | "Or" =>
+	operator === "all" ? "And" : "Or";
+
+export interface InitialRuleInput {
+	/** The semantic anchor — the first selected message. */
+	anchorMessageId?: string;
+	/**
+	 * The deployment ships no vector pipeline, so the widen cannot run. The rule
+	 * opens on the sender-derived literal clauses instead of an anchor.
+	 */
+	semanticUnavailable: boolean;
+	/** Distinct sender addresses of the selection, for the fallback clauses. */
+	senders: readonly string[];
+	/** How many messages the selection holds — the widen's anchor count. */
+	selectionCount: number;
+	/** A folder a "Something else" shortcut pre-picked. */
+	seedMailboxId?: string;
+	/** A scope a "Something else" shortcut pre-picked. */
+	seedScope?: RuleScope;
+}
+
+/**
+ * The rule the editor opens on, built from the widen probe. A semantic-capable
+ * deployment opens on the widen chip (the anchor, no literal clauses); one
+ * without the vector pipeline opens on the sender-fallback `From` chips (#251),
+ * visible and editable, matched with `Or`. Either way the move destination and
+ * scope come from any "Something else" seed.
+ */
+export const buildInitialRule = (input: InitialRuleInput): FilterRule => {
+	const scope = input.seedScope ?? "once";
+	if (input.semanticUnavailable) {
+		// The same derivation the widen fallback runs (#251, #262): one `From`
+		// clause per sender, or a single `FromDomain` clause when they share a
+		// registrable domain. Surfaced as ordinary editable chips.
+		const clauses: RuleClause[] = deriveSenderClauses(input.senders).map(
+			(clause, index) => ({
+				id: `derived-${index}`,
+				field: clause.field,
+				value: clause.value,
+				derived: true,
+			}),
+		);
+		return {
+			clauses,
+			matchOperator: "any",
+			moveMailboxId: input.seedMailboxId,
+			scope,
+			name: "",
+		};
+	}
+	return {
+		clauses: [],
+		matchOperator: "all",
+		widen: input.anchorMessageId
+			? { anchorCount: Math.max(input.selectionCount, 1) }
+			: undefined,
+		moveMailboxId: input.seedMailboxId,
+		scope,
+		name: "",
+	};
+};
+
+/**
+ * The match-relevant projection of a rule — the anchor (only while the widen is
+ * present and active), the operator, and the literal clauses. Preview and apply
+ * both derive from this, so the set the editor counts is the set a commit acts
+ * on. Fields that do not change the match set (folder, scope, name, date) are
+ * deliberately absent.
+ */
+export const rulePredicate = (
+	rule: FilterRule,
+	anchorMessageId?: string,
+): OrganizeMatchPredicate => {
+	const widenActive = rule.widen !== undefined && !rule.widen.inactive;
+	const literalClauses = rule.clauses.map((clause) => ({
+		field: clause.field,
+		value: clause.value,
+	}));
+	return {
+		...(widenActive && anchorMessageId ? { anchorMessageId } : {}),
+		matchOperator: toApiOperator(rule.matchOperator),
+		literalClauses,
+	};
+};
+
+/**
+ * A stable key for a predicate's match set. Two predicates with the same key
+ * match the same messages; a change to the key is what marks the live count
+ * stale and schedules the next preview.
+ */
+export const predicateSignature = (predicate: OrganizeMatchPredicate): string =>
+	JSON.stringify({
+		anchor: predicate.anchorMessageId ?? null,
+		operator: predicate.matchOperator,
+		clauses: predicate.literalClauses.map(
+			(clause) => `${clause.field} ${clause.value}`,
+		),
+	});
+
+/**
+ * The commit draft for a rule. The match fields are exactly
+ * {@link rulePredicate}'s — the previewed predicate — with the folder action
+ * and, for the `until` scope, the derived expiry added. The expiry never enters
+ * the match set, so preview and apply still count and act on the same messages.
+ */
+export const ruleToDraft = (
+	rule: FilterRule,
+	anchorMessageId?: string,
+): OrganizeDraft => {
+	const predicate = rulePredicate(rule, anchorMessageId);
+	return {
+		...(predicate.anchorMessageId
+			? { anchorMessageId: predicate.anchorMessageId }
+			: {}),
+		matchOperator: predicate.matchOperator,
+		literalClauses: predicate.literalClauses,
+		moveMailboxId: rule.moveMailboxId,
+		expiresAt:
+			rule.scope === "until"
+				? pickedDateToExpiresAt(rule.until ?? "")
+				: undefined,
+	};
+};
+
+export interface PreviewState {
+	/** The last count that came back, `undefined` before the first lands. */
+	count?: number;
+	/** The signature the {@link count} was counted for. */
+	previewedSignature?: string;
+	/** The signature the last error was raised for. */
+	errorSignature?: string;
+	error?: string;
+}
+
+/**
+ * The live count for the rule on screen. The count is `ready` only when it was
+ * counted for the current predicate; a predicate change since then reads
+ * `stale` (recounting, never blank) so the commit gate can hold apply until it
+ * settles.
+ */
+export const derivePreview = (
+	state: PreviewState,
+	currentSignature: string,
+): PreviewCount => {
+	if (state.error !== undefined && state.errorSignature === currentSignature) {
+		return { status: "error", reason: state.error };
+	}
+	if (state.count === undefined) return { status: "loading" };
+	if (state.previewedSignature === currentSignature) {
+		return { status: "ready", count: state.count };
+	}
+	return { status: "ready", count: state.count, stale: true };
+};
+
+/** How long a rule change settles before the next preview fires. */
+export const PREVIEW_DEBOUNCE_MS = 350;

package/src/routes/settings/filters.tsx

@@ -6,11 +6,13 @@ import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.
 import { SettingsShell } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { useCallback, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
+import { FilterEditorSurface } from "@/components/settings/FilterEditorSurface";
 import { FiltersList } from "@/components/settings/FiltersList";
 import { ErrorState } from "@/components/ui/ErrorState";
 import { useDeleteFilter, useFilterList } from "@/hooks/useFilters";
 import { getMailboxDisplayName } from "@/lib/folder-roles";
+import { buildMoveTargets } from "@/lib/move-targets";
 import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
 
 export const Route = createFileRoute("/settings/filters")({
@@ -36,6 +38,7 @@ function AccountFilters({ account }: { account: RemitImapAccountResponse }) {
 	const { filters, isPending, isError, error, refetch } =
 		useFilterList(accountId);
 	const { deleteFilter, deletingFilterId } = useDeleteFilter(accountId);
+	const [editingFilterId, setEditingFilterId] = useState<string | undefined>();
 
 	const { data: mailboxesData } = useQuery({
 		...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
@@ -52,9 +55,30 @@ function AccountFilters({ account }: { account: RemitImapAccountResponse }) {
 		[mailboxesData?.items],
 	);
 
+	const folders = useMemo(
+		() =>
+			buildMoveTargets(mailboxesData?.items ?? []).map((mailbox) => ({
+				id: mailbox.mailboxId,
+				label: getMailboxDisplayName(mailbox.fullPath),
+			})),
+		[mailboxesData?.items],
+	);
+
+	const editingFilter = filters.find(
+		(filter) => filter.filterId === editingFilterId,
+	);
+
 	return (
 		<section className="space-y-2">
 			<h2 className="text-sm font-semibold text-fg">{account.email}</h2>
+			{editingFilter && (
+				<FilterEditorSurface
+					accountId={accountId}
+					filter={editingFilter}
+					folders={folders}
+					onClose={() => setEditingFilterId(undefined)}
+				/>
+			)}
 			{isPending ? (
 				// biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label on loading skeleton provides useful context for assistive tech
 				<div
@@ -75,6 +99,7 @@ function AccountFilters({ account }: { account: RemitImapAccountResponse }) {
 				<FiltersList
 					filters={filters}
 					mailboxName={mailboxName}
+					onEdit={setEditingFilterId}
 					onDelete={deleteFilter}
 					deletingFilterId={deletingFilterId}
 				/>