@remit/web-client 0.0.102 → 0.0.104

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.102",
+  "version": "0.0.104",
   "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/mail/SelectionWizardHost.search-entry.test.ts

@@ -0,0 +1,41 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { describe, it } from "node:test";
+import { fileURLToPath } from "node:url";
+
+/**
+ * A filter made from a search belongs to the account the search ran over (#524).
+ * The surface hands its account to the host on the props; a search entry that
+ * reads past it writes the rule against whichever account happens to be first in
+ * the list, and the mail the user was looking at is never filtered.
+ *
+ * Which account wins is decided — and tested — in
+ * `../../lib/organize/search-to-rule.test.ts`. What is read off the source here
+ * is that the host asks that question with the surface's account in hand, which
+ * is the wiring the bug lived in and which no unit of the resolver can prove.
+ * The host wires routing, history and several data hooks together, so it is read
+ * rather than rendered, as this package's other component-level rules are (see
+ * `SelectionWizardHost.run-exit.test.ts`).
+ */
+
+const here = dirname(fileURLToPath(import.meta.url));
+const source = readFileSync(resolve(here, "SelectionWizardHost.tsx"), "utf8");
+
+const host = source.match(
+	/export function SelectionWizardHost\(([\s\S]*)$/,
+)?.[1];
+
+describe("the search entry's account", () => {
+	it("is resolved with the account the surface handed over", () => {
+		assert.ok(host, "the host is gone");
+		const call = host.match(/searchRuleAccountId\(([\s\S]*?)\)/)?.[1];
+		assert.ok(call, "the search entry resolves no account of its own");
+		assert.match(call, /\bprops\.accountId\b/);
+	});
+
+	it("never reaches past it for the first configured account", () => {
+		assert.ok(host, "the host is gone");
+		assert.doesNotMatch(host, /accounts\[0\]/);
+	});
+});

package/src/components/mail/SelectionWizardHost.tsx

@@ -62,6 +62,7 @@ import {
 	normalizeClauseValue,
 	SUPPORTED_CLAUSE_FIELDS,
 } from "@/lib/organize/rule-model";
+import { searchRuleAccountId } from "@/lib/organize/search-to-rule";
 import type { OrganizeMatchPredicate } from "@/lib/organize/sender-fallback";
 import { useWizardEntryValue, useWizardStep } from "@/lib/wizard-history";
 
@@ -1003,9 +1004,9 @@ function SelectionWizardSession({
  *
  * The URL says which affordance opened the wizard, and that decides two things
  * and no more: which step it opens on, and whether the query seeds the clauses.
- * A search entry ticks nothing and its rule belongs to the account the query
- * names, so the selection the bar would have handed over is not the one it
- * walks.
+ * A search entry ticks nothing, so the selection the bar would have handed over
+ * is not the one it walks; its rule belongs to the account the surface handed
+ * over, and to the one the query names when it names one (#524).
  */
 export function SelectionWizardHost(props: SelectionWizardHostProps) {
 	const fromSearch = useWizardEntryValue() === "search";
@@ -1024,7 +1025,11 @@ export function SelectionWizardHost(props: SelectionWizardHostProps) {
 			{...(conversion
 				? {
 						verb: "organize" as const,
-						accountId: conversion.targetAccountId ?? accounts[0]?.accountId,
+						accountId: searchRuleAccountId(
+							conversion,
+							props.accountId,
+							accounts,
+						),
 						selection: EMPTY_SELECTION,
 						crossAccount: false,
 						escalated: undefined,

package/src/lib/move-targets.test.ts

@@ -61,12 +61,15 @@ describe("buildMoveTargets — excluded destinations (#236, #976)", () => {
 	});
 
 	test("with no appointments at all, nothing is excluded by role (only Outbox by name)", () => {
-		const result = buildMoveTargets([
-			make({ mailboxId: "m1", fullPath: "INBOX" }),
-			make({ mailboxId: "m2", fullPath: "Drafts" }),
-			make({ mailboxId: "m3", fullPath: "Outbox" }),
-			make({ mailboxId: "m4", fullPath: "Sent Mail" }),
-		]);
+		const result = buildMoveTargets(
+			[
+				make({ mailboxId: "m1", fullPath: "INBOX" }),
+				make({ mailboxId: "m2", fullPath: "Drafts" }),
+				make({ mailboxId: "m3", fullPath: "Outbox" }),
+				make({ mailboxId: "m4", fullPath: "Sent Mail" }),
+			],
+			[],
+		);
 		const ids = result.map((mailbox) => mailbox.mailboxId).sort();
 		assert.deepStrictEqual(ids, ["m1", "m2", "m4"]);
 	});
@@ -89,11 +92,14 @@ describe("buildMoveTargets — excluded destinations (#236, #976)", () => {
 	});
 
 	test("keeps user-defined folders", () => {
-		const result = buildMoveTargets([
-			make({ mailboxId: "m1", fullPath: "INBOX" }),
-			make({ mailboxId: "m2", fullPath: "Project Alpha" }),
-			make({ mailboxId: "m3", fullPath: "Receipts/2025" }),
-		]);
+		const result = buildMoveTargets(
+			[
+				make({ mailboxId: "m1", fullPath: "INBOX" }),
+				make({ mailboxId: "m2", fullPath: "Project Alpha" }),
+				make({ mailboxId: "m3", fullPath: "Receipts/2025" }),
+			],
+			[],
+		);
 		const ids = result.map((mailbox) => mailbox.mailboxId);
 		assert.deepStrictEqual(ids.sort(), ["m1", "m2", "m3"]);
 	});
@@ -121,10 +127,13 @@ describe("buildMoveTargets — sort order", () => {
 	});
 
 	test("plain folders sort alphabetically, case-insensitively", () => {
-		const result = buildMoveTargets([
-			make({ mailboxId: "b", fullPath: "banana" }),
-			make({ mailboxId: "a", fullPath: "Apple" }),
-		]);
+		const result = buildMoveTargets(
+			[
+				make({ mailboxId: "b", fullPath: "banana" }),
+				make({ mailboxId: "a", fullPath: "Apple" }),
+			],
+			[],
+		);
 		assert.deepStrictEqual(
 			result.map((m) => m.mailboxId),
 			["a", "b"],
@@ -150,45 +159,57 @@ describe("buildMoveTargets — Outbox locale exclusion (#290)", () => {
 
 	for (const name of localizedOutboxNames) {
 		test(`drops localized Outbox "${name}"`, () => {
-			const result = buildMoveTargets([
-				make({ mailboxId: "inbox", fullPath: "INBOX" }),
-				make({ mailboxId: "outbox", fullPath: name }),
-			]);
+			const result = buildMoveTargets(
+				[
+					make({ mailboxId: "inbox", fullPath: "INBOX" }),
+					make({ mailboxId: "outbox", fullPath: name }),
+				],
+				[],
+			);
 			const ids = result.map((mailbox) => mailbox.mailboxId);
 			assert.deepStrictEqual(ids, ["inbox"]);
 		});
 	}
 
 	test("matches Outbox locale names case-insensitively", () => {
-		const result = buildMoveTargets([
-			make({ mailboxId: "inbox", fullPath: "INBOX" }),
-			make({ mailboxId: "m1", fullPath: "POSTVAK UIT" }),
-			make({ mailboxId: "m2", fullPath: "postausgang" }),
-			make({ mailboxId: "m3", fullPath: "BOÎTE D'ENVOI" }),
-		]);
+		const result = buildMoveTargets(
+			[
+				make({ mailboxId: "inbox", fullPath: "INBOX" }),
+				make({ mailboxId: "m1", fullPath: "POSTVAK UIT" }),
+				make({ mailboxId: "m2", fullPath: "postausgang" }),
+				make({ mailboxId: "m3", fullPath: "BOÎTE D'ENVOI" }),
+			],
+			[],
+		);
 		const ids = result.map((mailbox) => mailbox.mailboxId);
 		assert.deepStrictEqual(ids, ["inbox"]);
 	});
 
 	test("matches Outbox locale names with surrounding whitespace", () => {
-		const result = buildMoveTargets([
-			make({ mailboxId: "inbox", fullPath: "INBOX" }),
-			make({ mailboxId: "m1", fullPath: "  Outbox  " }),
-			make({ mailboxId: "m2", fullPath: " Postvak UIT " }),
-		]);
+		const result = buildMoveTargets(
+			[
+				make({ mailboxId: "inbox", fullPath: "INBOX" }),
+				make({ mailboxId: "m1", fullPath: "  Outbox  " }),
+				make({ mailboxId: "m2", fullPath: " Postvak UIT " }),
+			],
+			[],
+		);
 		const ids = result.map((mailbox) => mailbox.mailboxId);
 		assert.deepStrictEqual(ids, ["inbox"]);
 	});
 
 	test("does not over-match unrelated mailbox names", () => {
-		const result = buildMoveTargets([
-			make({ mailboxId: "inbox", fullPath: "INBOX" }),
-			make({ mailboxId: "trash", fullPath: "Trash" }),
-			make({ mailboxId: "custom", fullPath: "Custom Folder" }),
-			// Substring of a locale name must not trigger the filter — only
-			// the exact normalized leaf matches.
-			make({ mailboxId: "outboxy", fullPath: "Outbox Archive" }),
-		]);
+		const result = buildMoveTargets(
+			[
+				make({ mailboxId: "inbox", fullPath: "INBOX" }),
+				make({ mailboxId: "trash", fullPath: "Trash" }),
+				make({ mailboxId: "custom", fullPath: "Custom Folder" }),
+				// Substring of a locale name must not trigger the filter — only
+				// the exact normalized leaf matches.
+				make({ mailboxId: "outboxy", fullPath: "Outbox Archive" }),
+			],
+			[],
+		);
 		const ids = result.map((mailbox) => mailbox.mailboxId).sort();
 		assert.deepStrictEqual(ids, ["custom", "inbox", "outboxy", "trash"]);
 	});

package/src/lib/move-targets.ts

@@ -49,7 +49,7 @@ const NON_SYSTEM_PRIORITY = ROLE_PRIORITY.length;
  */
 export const buildMoveTargets = (
 	mailboxes: readonly RemitImapMailboxResponse[],
-	folderAppointments: readonly RemitImapFolderAppointment[] = [],
+	folderAppointments: readonly RemitImapFolderAppointment[],
 ): RemitImapMailboxResponse[] => {
 	const roleMap = buildMailboxRoleMap(folderAppointments);
 	const filtered = mailboxes.filter((mailbox) => {

package/src/lib/organize/search-to-rule.test.ts

@@ -2,7 +2,7 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import { isConvertible } from "@remit/ui";
 import { parseSearchTokens, type SearchTokenContext } from "../search-tokens";
-import { convertSearchToRule } from "./search-to-rule";
+import { convertSearchToRule, searchRuleAccountId } from "./search-to-rule";
 
 const CONTEXT: SearchTokenContext = {
 	mailboxesByName: new Map([["archive", "mbx-archive"]]),
@@ -124,3 +124,39 @@ describe("convertSearchToRule — nothing left to make a filter from", () => {
 		assert.equal(isConvertible(convert("in:archive receipts")), true);
 	});
 });
+
+describe("searchRuleAccountId — whose account the filter belongs to", () => {
+	const ACCOUNTS = [{ accountId: "acc-first" }, { accountId: "acc-work" }];
+
+	it("uses the account the surface is showing for an ordinary search", () => {
+		assert.equal(
+			searchRuleAccountId(convert("invoice"), "acc-work", ACCOUNTS),
+			"acc-work",
+		);
+	});
+
+	it("lets an account: facet name a different account than the surface", () => {
+		assert.equal(
+			searchRuleAccountId(
+				convert("account:work invoice"),
+				"acc-other",
+				ACCOUNTS,
+			),
+			"acc-work",
+		);
+	});
+
+	it("falls back to the first configured account only when nothing names one", () => {
+		assert.equal(
+			searchRuleAccountId(convert("invoice"), undefined, ACCOUNTS),
+			"acc-first",
+		);
+	});
+
+	it("has no account to give when none is configured", () => {
+		assert.equal(
+			searchRuleAccountId(convert("invoice"), undefined, []),
+			undefined,
+		);
+	});
+});

package/src/lib/organize/search-to-rule.ts

@@ -1,3 +1,4 @@
+import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
 import type {
 	DroppedFacet,
 	DroppedFacetType,
@@ -103,3 +104,17 @@ export const convertSearchToRule = (
 		droppedSemantic: keptTerms && searchHadSemanticReach,
 	};
 };
+
+/**
+ * Which account a rule converted from a search belongs to (#524). A query names
+ * one only through an explicit `account:` facet, which an ordinary search does
+ * not carry; without it the rule belongs to the account whose mail the search
+ * ran over, which is the account the surface handed over. Only a surface that
+ * has no single account of its own leaves the first configured one to answer.
+ */
+export const searchRuleAccountId = (
+	conversion: SearchConversion,
+	surfaceAccountId: string | undefined,
+	accounts: readonly Pick<RemitImapAccountResponse, "accountId">[],
+): string | undefined =>
+	conversion.targetAccountId ?? surfaceAccountId ?? accounts[0]?.accountId;

package/src/routes/settings/-filters.test.ts

@@ -0,0 +1,114 @@
+// biome-ignore lint/style/useFilenamingConvention: TanStack Router convention
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type { RemitImapFilterResponse } from "@remit/api-http-client/types.gen.ts";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { makeAccount, makeMailbox } from "../../test-support/fixtures";
+import { type HttpMock, mockFetch } from "../../test-support/http";
+import { AccountFilters } from "./filters.tsx";
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+});
+
+const ACCOUNT_ID = "acc-1";
+
+const account = makeAccount({
+	accountId: ACCOUNT_ID,
+	folderAppointments: [
+		{ role: "Inbox", mailboxId: "mbx-inbox" },
+		{ role: "Drafts", mailboxId: "mbx-concepten" },
+		{ role: "Sent", mailboxId: "mbx-verzonden" },
+		{ role: "Archive", mailboxId: "mbx-archief" },
+	],
+});
+
+// Dutch leaf names for the appointed Drafts and Sent: only the appointment can
+// exclude them, so a name-based filter would not pass this.
+const mailboxes = [
+	makeMailbox({ mailboxId: "mbx-receipts", fullPath: "INBOX/Receipts" }),
+	makeMailbox({ mailboxId: "mbx-concepten", fullPath: "INBOX/Concepten" }),
+	makeMailbox({ mailboxId: "mbx-verzonden", fullPath: "INBOX/Verzonden" }),
+	makeMailbox({ mailboxId: "mbx-archief", fullPath: "INBOX/Archief" }),
+	makeMailbox({ mailboxId: "mbx-inbox", fullPath: "INBOX" }),
+];
+
+const filter: RemitImapFilterResponse = {
+	filterId: "f-1",
+	accountConfigId: ACCOUNT_ID,
+	name: "Receipts",
+	scope: "Standing",
+	state: "Active",
+	hasAnchor: false,
+	ruleChangedAt: 0,
+	actionChangedAt: 0,
+	matchOperator: "And",
+	literalClauses: [{ field: "From", value: "receipts@stripe.com" }],
+	actionLabelId: "None",
+	actionMailboxId: "mbx-receipts",
+	createdAt: 0,
+	updatedAt: 0,
+};
+
+/**
+ * Wait on the DOM answering rather than on a turn count: how much React work
+ * lands per turn varies with the machine, so a fixed flush is a flake and a
+ * ceiling is what keeps a surface that never renders a failure, not a hang.
+ */
+const settleUntil = async (
+	dom: DomHarness,
+	done: () => boolean,
+): Promise<void> => {
+	const deadline = Date.now() + 5000;
+	for (;;) {
+		await dom.flush();
+		if (done() || Date.now() >= deadline) return;
+		await dom.wait(10);
+	}
+};
+
+const offeredDestinations = async (): Promise<string[]> => {
+	http = mockFetch((call) => {
+		if (call.path.endsWith("/mailboxes")) return { items: mailboxes };
+		if (call.path.endsWith("/filters")) return { items: [filter] };
+		if (call.path.endsWith("/labels")) return { items: [] };
+		if (call.path.endsWith("/organize/preview"))
+			return { matchedCount: 0, messageIds: [] };
+		return {};
+	});
+	const dom = createDomHarness();
+	harness = dom;
+	dom.renderApp(createElement(AccountFilters, { account }));
+	await settleUntil(
+		dom,
+		() => !!dom.query('[aria-label="Edit filter Receipts"]'),
+	);
+	dom.click(dom.byLabel("Edit filter Receipts"));
+	await settleUntil(
+		dom,
+		() => !!dom.query('select[aria-label="Destination folder"]'),
+	);
+	return dom
+		.queryAll<HTMLOptionElement>(
+			'select[aria-label="Destination folder"] option',
+		)
+		.map((option) => option.value)
+		.filter((value) => value.startsWith("mbx-"));
+};
+
+describe("Settings › Filters — move destinations (#236, #540)", () => {
+	it("offers every folder but the appointed Drafts and Sent, in role order", async () => {
+		assert.deepEqual(await offeredDestinations(), [
+			"mbx-inbox",
+			"mbx-archief",
+			"mbx-receipts",
+		]);
+	});
+});

package/src/routes/settings/filters.tsx

@@ -34,7 +34,11 @@ const filtersHelp = (
 	</div>
 );
 
-function AccountFilters({ account }: { account: RemitImapAccountResponse }) {
+export function AccountFilters({
+	account,
+}: {
+	account: RemitImapAccountResponse;
+}) {
 	const accountId = account.accountId;
 	const { filters, isPending, isError, error, refetch } =
 		useFilterList(accountId);
@@ -58,11 +62,14 @@ function AccountFilters({ account }: { account: RemitImapAccountResponse }) {
 
 	const folders = useMemo(
 		() =>
-			buildMoveTargets(mailboxesData?.items ?? []).map((mailbox) => ({
+			buildMoveTargets(
+				mailboxesData?.items ?? [],
+				account.folderAppointments,
+			).map((mailbox) => ({
 				id: mailbox.mailboxId,
 				label: getMailboxDisplayName(mailbox.fullPath),
 			})),
-		[mailboxesData?.items],
+		[mailboxesData?.items, account.folderAppointments],
 	);
 
 	const { labels: labelItems } = useLabelList(accountId);