@remit/web-client 0.0.276 → 0.0.278

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.276",
+  "version": "0.0.278",
   "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/IntelligencePane.tsx

@@ -159,16 +159,25 @@ function IntelligenceSkeleton() {
 /**
  * Reclassify picker: a small modal listing the category-override options. On
  * selection it PATCHes `AddressFlags.category` for the sender.
+ *
+ * A sender that already carries an override also gets the way back out. The
+ * override is an enum with no false-equivalent member, so removal is not a
+ * value to send — it is `clearFlags: ["category"]`, the contract's removal
+ * form for every flag (#615).
  */
 function ReclassifyDialog({
 	isOpen,
 	current,
+	hasOverride,
 	onSelect,
+	onClear,
 	onCancel,
 }: {
 	isOpen: boolean;
 	current: string;
+	hasOverride: boolean;
 	onSelect: (category: CategoryOverride) => void;
+	onClear: () => void;
 	onCancel: () => void;
 }) {
 	const dialogRef = useRef<HTMLDivElement>(null);
@@ -210,6 +219,15 @@ function ReclassifyDialog({
 							)}
 						</button>
 					))}
+					{hasOverride && (
+						<button
+							type="button"
+							onClick={onClear}
+							className="mt-1 flex min-h-11 items-center rounded border-t border-line px-3 text-left text-sm text-fg transition-colors hover:bg-surface-raised"
+						>
+							Remove override — classify automatically again
+						</button>
+					)}
 				</div>
 				<div className="mt-6 flex justify-end">
 					<button
@@ -247,6 +265,7 @@ function WiredPanel({
 }: WiredPanelProps) {
 	const {
 		data,
+		address,
 		addressId,
 		isSimilarLoading,
 		similarError,
@@ -256,7 +275,7 @@ function WiredPanel({
 	const [reclassifyOpen, setReclassifyOpen] = useState(false);
 	const senderEmail = thread.fromEmail ?? undefined;
 
-	const { updateFlags } = useUpdateAddressFlags({
+	const { updateFlags, clearFlags } = useUpdateAddressFlags({
 		addressId,
 		senderEmail,
 	});
@@ -315,6 +334,11 @@ function WiredPanel({
 		[updateFlags],
 	);
 
+	const handleReclassifyClear = useCallback(() => {
+		setReclassifyOpen(false);
+		clearFlags(["category"]);
+	}, [clearFlags]);
+
 	// Every per-sender flag toggle PATCHes the sender's address row, so none of
 	// them can be serviced until that row resolves. Leave them unwired until it
 	// does: the panel renders an unwired quick action as disabled, so the flow is
@@ -383,7 +407,9 @@ function WiredPanel({
 			<ReclassifyDialog
 				isOpen={reclassifyOpen}
 				current={data.category.value}
+				hasOverride={address?.flags?.category?.value != null}
 				onSelect={handleReclassifySelect}
+				onClear={handleReclassifyClear}
 				onCancel={() => setReclassifyOpen(false)}
 			/>
 		</>

package/src/components/mail/reclassify-remove-override.render.test.ts

@@ -0,0 +1,142 @@
+/**
+ * Removing a sender's category override (#615).
+ *
+ * A sender flag is removed by naming its key in `clearFlags`. `category` is the
+ * flag that has no other way out: its value is a `MessageCategory` enum with no
+ * false-equivalent member, so the `{ value: false }` form the boolean flags use
+ * cannot express "no override", and the `null` form the schema documents is
+ * rejected by the request validator. Before this the reclassify picker was
+ * one-way — a reader could set an override and never take it back.
+ *
+ * Drives the real chain: the real `IntelligencePane`, the real
+ * `useUpdateAddressFlags` mutation, and a fetch mock that answers the way the
+ * server does. Both halves are asserted — the body that goes on the wire, and
+ * that the override is gone from what the panel renders.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type { RemitImapAddressResponse } from "@remit/api-http-client/types.gen.ts";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "@/test-support/dom";
+import {
+	makeAccount,
+	makeConfig,
+	makeThreadMessage,
+} from "@/test-support/fixtures";
+import { type HttpMock, mockFetch } from "@/test-support/http";
+import { IntelligencePane } from "./IntelligencePane";
+
+const thread = makeThreadMessage({ messageId: "msg-1", category: "personal" });
+
+const addressWith = (
+	flags: RemitImapAddressResponse["flags"],
+): RemitImapAddressResponse => ({
+	addressId: "addr-1",
+	accountConfigId: "cfg-1",
+	displayName: "Alice",
+	localPart: "alice",
+	domain: "example.com",
+	normalizedEmail: "alice@example.com",
+	flags,
+	inboundCount: 6,
+	outboundCount: 1,
+	replyCount: 2,
+	lastInboundAt: 1_000,
+	lastReplyAt: 900,
+	createdAt: 0,
+	updatedAt: 0,
+});
+
+let harness: DomHarness | undefined;
+let http: HttpMock;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http.restore();
+});
+
+describe("the reclassify picker on a sender that already carries an override", () => {
+	it("removes the override with clearFlags, and the panel stops claiming one", async () => {
+		let stored: RemitImapAddressResponse = addressWith({
+			category: { value: "newsletter", setAt: 10 },
+		});
+
+		http = mockFetch((call) => {
+			if (call.path.endsWith("/config")) {
+				return makeConfig([makeAccount({ accountId: "acc-1" })], {
+					semanticSearchEnabled: false,
+				});
+			}
+			if (call.path.endsWith("/addresses/search")) {
+				return { items: [stored] };
+			}
+			if (call.method === "PATCH" && call.path.endsWith("/addresses/addr-1")) {
+				stored = addressWith({});
+				return stored;
+			}
+			return { items: [] };
+		});
+
+		harness = createDomHarness();
+		harness.renderApp(
+			createElement(IntelligencePane, { thread, onClose: () => {} }),
+		);
+
+		await harness.waitFor(
+			() => harness?.text().includes("your override") === true,
+			"the panel never showed the sender's category override",
+		);
+
+		harness.click(harness.byText("button", "reclassify"));
+		harness.click(
+			harness.byText(
+				"button",
+				"Remove override — classify automatically again",
+			),
+		);
+
+		await harness.waitFor(
+			() => http.to("/addresses/addr-1").length === 1,
+			"the remove control sent no request",
+		);
+
+		assert.deepEqual(http.to("/addresses/addr-1")[0].body, {
+			clearFlags: ["category"],
+		});
+
+		await harness.waitFor(
+			() => harness?.text().includes("your override") === false,
+			"the override survived its own removal",
+		);
+	});
+
+	it("offers no removal on a sender that carries no override", async () => {
+		http = mockFetch((call) => {
+			if (call.path.endsWith("/config")) {
+				return makeConfig([makeAccount({ accountId: "acc-1" })], {
+					semanticSearchEnabled: false,
+				});
+			}
+			if (call.path.endsWith("/addresses/search")) {
+				return { items: [addressWith({})] };
+			}
+			return { items: [] };
+		});
+
+		harness = createDomHarness();
+		harness.renderApp(
+			createElement(IntelligencePane, { thread, onClose: () => {} }),
+		);
+
+		await harness.waitFor(
+			() => harness?.text().includes("reclassify") === true,
+			"the panel never rendered the category section",
+		);
+
+		harness.click(harness.byText("button", "reclassify"));
+
+		assert.equal(harness.text().includes("Remove override"), false);
+	});
+});

package/src/hooks/useUpdateAddressFlags.ts

@@ -4,6 +4,7 @@ import {
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type {
 	AddressOperationsSearchAddressesResponse,
+	RemitImapAddressFlagKey,
 	RemitImapAddressFlags,
 	RemitImapUpdateAddressFlagsInput,
 } from "@remit/api-http-client/types.gen.ts";
@@ -25,15 +26,17 @@ interface MutationContext {
 }
 
 /**
- * Apply a flag-update patch onto an existing AddressFlags object. Each key in
- * `patch` is a flag update object (set) or `null` (remove). Mirrors the
- * server-side merge semantics so the optimistic cache matches what the API
- * returns. Typed loosely (the per-key flag value types differ — boolean for
- * most, a category enum for `category`) and re-narrowed at the return.
+ * Apply a flag update onto an existing AddressFlags object. Each key in
+ * `patch` is a flag update object; each key in `clear` is removed outright,
+ * after the patch, matching the server's ordering. Mirrors the server-side
+ * merge semantics so the optimistic cache matches what the API returns. Typed
+ * loosely (the per-key flag value types differ — boolean for most, a category
+ * enum for `category`) and re-narrowed at the return.
  */
 function applyFlagPatch(
 	current: RemitImapAddressFlags | undefined,
 	patch: RemitImapUpdateAddressFlagsInput,
+	clear: readonly RemitImapAddressFlagKey[] = [],
 ): RemitImapAddressFlags {
 	const next: Record<string, unknown> = { ...(current ?? {}) };
 	for (const [key, update] of Object.entries(patch)) {
@@ -45,6 +48,9 @@ function applyFlagPatch(
 			next[key] = { ...update, setAt: update.setAt ?? Date.now() };
 		}
 	}
+	for (const key of clear) {
+		delete next[key];
+	}
 	return next as RemitImapAddressFlags;
 }
 
@@ -69,6 +75,7 @@ export function useUpdateAddressFlags({
 		...addressDetailOperationsUpdateAddressMutation(),
 		onMutate: async (vars): Promise<MutationContext> => {
 			const patch = vars.body.flags ?? {};
+			const clear = vars.body.clearFlags ?? [];
 			await queryClient.cancelQueries({ queryKey: addressCacheKey });
 
 			const previous =
@@ -84,7 +91,7 @@ export function useUpdateAddressFlags({
 						...old,
 						items: old.items.map((addr) =>
 							addr.addressId === vars.path.addressId
-								? { ...addr, flags: applyFlagPatch(addr.flags, patch) }
+								? { ...addr, flags: applyFlagPatch(addr.flags, patch, clear) }
 								: addr,
 						),
 					};
@@ -108,8 +115,11 @@ export function useUpdateAddressFlags({
 		},
 	});
 
-	const updateFlags = useCallback(
-		(flags: RemitImapUpdateAddressFlagsInput) => {
+	const submit = useCallback(
+		(body: {
+			flags?: RemitImapUpdateAddressFlagsInput;
+			clearFlags?: RemitImapAddressFlagKey[];
+		}) => {
 			if (!addressId) {
 				reportFatalError(
 					new Error(
@@ -118,10 +128,25 @@ export function useUpdateAddressFlags({
 				);
 				return;
 			}
-			mutate({ path: { addressId }, body: { flags } });
+			mutate({ path: { addressId }, body });
 		},
 		[addressId, mutate, senderEmail],
 	);
 
-	return { updateFlags, isPending };
+	const updateFlags = useCallback(
+		(flags: RemitImapUpdateAddressFlagsInput) => submit({ flags }),
+		[submit],
+	);
+
+	/**
+	 * Remove flags outright. This is the removal form for every flag whatever
+	 * its value type: `category` holds an enum with no false-equivalent member,
+	 * so `{ value: false }` cannot express "no override" for it.
+	 */
+	const clearFlags = useCallback(
+		(keys: RemitImapAddressFlagKey[]) => submit({ clearFlags: keys }),
+		[submit],
+	);
+
+	return { updateFlags, clearFlags, isPending };
 }

package/src/routes/settings/-senders-remove-flag.render.test.ts

@@ -0,0 +1,105 @@
+// biome-ignore lint/style/useFilenamingConvention: TanStack Router convention
+/**
+ * Issue #615: the remove control in Settings > Senders sent `{ flags: {
+ * [group]: null } }`. The server's openapi-backend validator doesn't honour
+ * `nullable: true` on the `allOf`-wrapped flag schema TypeSpec emits for
+ * `TrustedFlag | null`, so it rejects the null form as invalid — the same gap
+ * `useToggleTrusted` already works around by sending `{ value: false }`
+ * instead of `null`. This mock server enforces that same rejection, so the
+ * pre-fix `null` body surfaces as a failed mutation (the row never clears)
+ * rather than a silently accepted no-op.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type { RemitImapAddressResponse } from "@remit/api-http-client/types.gen.ts";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "@/test-support/dom";
+import {
+	type HttpCall,
+	type HttpMock,
+	httpError,
+	mockFetch,
+} from "@/test-support/http";
+import { SearchGroupPane } from "./senders";
+
+const ADDRESS_ID = "addr-1";
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+let mutedFlag: { value: boolean; setAt: number } | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+	mutedFlag = undefined;
+});
+
+const address = (): RemitImapAddressResponse =>
+	({
+		addressId: ADDRESS_ID,
+		displayName: "Alex Rivera",
+		normalizedEmail: "alex@example.com",
+		flags: mutedFlag ? { muted: mutedFlag } : {},
+	}) as RemitImapAddressResponse;
+
+const readFlagsPatch = (call: HttpCall): unknown => {
+	const body = call.body as { flags?: Record<string, unknown> } | undefined;
+	return body?.flags?.muted;
+};
+
+const respond = (call: HttpCall): unknown => {
+	if (call.method === "GET" && call.path === "/addresses/search") {
+		return { items: [address()] };
+	}
+	if (call.method === "PATCH" && call.path === `/addresses/${ADDRESS_ID}`) {
+		const patch = readFlagsPatch(call);
+		if (patch === null) {
+			return httpError(400, "flags.muted: nullable removal is not accepted");
+		}
+		mutedFlag = patch as { value: boolean; setAt: number };
+		return address();
+	}
+	return {};
+};
+
+const mount = async (): Promise<void> => {
+	mutedFlag = { value: true, setAt: 1_700_000_000_000 };
+	http = mockFetch(respond);
+	harness = createDomHarness();
+	harness.renderApp(
+		createElement(SearchGroupPane, { group: "muted", query: "alex" }),
+	);
+	await harness.waitFor(
+		() => harness?.text().includes("alex@example.com") ?? false,
+	);
+};
+
+describe("removing a sender flag (#615)", () => {
+	it("sends a request body the server accepts, and the flag clears from the list", async () => {
+		await mount();
+		if (!harness) throw new Error("nothing mounted");
+
+		harness.click(harness.byLabel("Remove muted flag"));
+
+		await harness.waitFor(
+			() => !(harness?.text().includes("alex@example.com") ?? true),
+			"the unmuted sender to drop out of the muted list",
+		);
+
+		const patches = (http?.calls ?? []).filter(
+			(call) =>
+				call.method === "PATCH" && call.path === `/addresses/${ADDRESS_ID}`,
+		);
+		assert.equal(patches.length, 1);
+		const sentFlag = readFlagsPatch(patches[0]) as
+			| { value: boolean; setAt: number }
+			| null
+			| undefined;
+		assert.notEqual(sentFlag, null, "the server rejects a null flag removal");
+		assert.equal(sentFlag?.value, false);
+		assert.equal(typeof sentFlag?.setAt, "number");
+	});
+});

package/src/routes/settings/senders.tsx

@@ -174,7 +174,7 @@ function VipGroupPane({
 /* Muted / Blocked groups: search-based (backend gap noted)           */
 /* ------------------------------------------------------------------ */
 
-function SearchGroupPane({
+export function SearchGroupPane({
 	group,
 	query,
 	onCount,
@@ -303,7 +303,9 @@ function SearchGroupPane({
 										setRetryId(a.addressId);
 										removeMutation.mutate({
 											path: { addressId: a.addressId },
-											body: { flags: { [group]: null } },
+											body: {
+												flags: { [group]: { value: false, setAt: Date.now() } },
+											},
 										});
 									}}
 								>
@@ -321,7 +323,9 @@ function SearchGroupPane({
 										setRetryId(a.addressId);
 										removeMutation.mutate({
 											path: { addressId: a.addressId },
-											body: { flags: { [group]: null } },
+											body: {
+												flags: { [group]: { value: false, setAt: Date.now() } },
+											},
 										});
 									}}
 								/>