@remit/web-client 0.0.129 → 0.0.131

package/src/components/mail/SwipeableMessageRow.modifier-select.test.ts

@@ -0,0 +1,237 @@
+/**
+ * A modifier can only come from a real keyboard, so the touch row honours it at
+ * every width (#586).
+ *
+ * Below 1024px the list renders the swipe row, which reads a press as a pointer
+ * gesture and opens the message from the release. Shift and cmd have to reach
+ * selection before that gesture starts, or a half-screen window and a tablet
+ * with a keyboard can only ever open messages one at a time.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import type { SelectionModifiers } from "@remit/ui";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	RouterContextProvider,
+} from "@tanstack/react-router";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { SwipeableMessageRow } from "./SwipeableMessageRow";
+
+const HALF_SCREEN_WIDTH = 900;
+
+let harness: DomHarness | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+});
+
+const thread = {
+	threadMessageId: "tm-1",
+	threadId: "th-1",
+	messageId: "msg-1",
+	accountId: "acc-1",
+	accountConfigId: "acc-1",
+	mailboxId: "mbx-1",
+	subject: "Q3 planning notes",
+	fromName: "Alex Rivera",
+	fromEmail: "alex@example.com",
+	snippet: "Notes from the planning session.",
+	sentDate: 0,
+	isRead: false,
+	hasAttachment: false,
+	hasStars: false,
+	star: "None",
+	isDeleted: false,
+	senderTrust: "unknown",
+	createdAt: 0,
+	updatedAt: 0,
+} as unknown as RemitImapThreadMessageResponse;
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+const rootRoute = createRootRoute();
+const mailRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: "/mail/$mailboxId",
+});
+
+interface Mounted {
+	row: HTMLElement;
+	router: AnyRouter;
+	selects: SelectionModifiers[];
+}
+
+const mountRow = (selectionTakesIt = true): Mounted => {
+	const selects: SelectionModifiers[] = [];
+	const router = createRouter({
+		routeTree: rootRoute.addChildren([mailRoute]),
+		history: createMemoryHistory({ initialEntries: ["/mail/mbx-1"] }),
+	}) as unknown as AnyRouter;
+	const created = createDomHarness({ viewportWidth: HALF_SCREEN_WIDTH });
+	harness = created;
+	created.render(
+		createElement(RouterContextProvider, {
+			router,
+			// biome-ignore lint/correctness/noChildrenProp: RouterContextProvider types `children` as a required prop, which createElement's rest-argument form does not satisfy
+			children: createElement(SwipeableMessageRow, {
+				thread,
+				mailboxId: "mbx-1",
+				isSelected: false,
+				isChecked: false,
+				onToggleCheck: () => undefined,
+				onRowSelect: (_id: string, modifiers: SelectionModifiers) => {
+					selects.push(modifiers);
+					return selectionTakesIt;
+				},
+				isMultiSelectMode: false,
+				onLongPress: () => undefined,
+				isDesktop: false,
+				onDelete: () => undefined,
+				onToggleRead: () => undefined,
+			}),
+		}),
+	);
+	const row = created.query("button[data-message-row]");
+	assert.ok(row, "the swipe row did not mount");
+	return { row, router, selects };
+};
+
+const press = (
+	row: Element,
+	modifiers: Partial<SelectionModifiers> = {},
+): PointerEvent => {
+	const event = new PointerEvent("pointerdown", {
+		bubbles: true,
+		cancelable: true,
+		pointerId: 1,
+		clientX: 10,
+		clientY: 10,
+		shiftKey: modifiers.shiftKey ?? false,
+		metaKey: modifiers.metaKey ?? false,
+		ctrlKey: modifiers.ctrlKey ?? false,
+	});
+	harness?.dispatch(row, event);
+	return event;
+};
+
+const release = (row: Element): void => {
+	harness?.dispatch(
+		row,
+		new PointerEvent("pointerup", { bubbles: true, pointerId: 1 }),
+	);
+};
+
+// A press whose default was taken still delivers a click, so the click has to
+// be consumed too rather than reaching selection a second time.
+const click = (
+	row: Element,
+	modifiers: Partial<SelectionModifiers> = {},
+): void =>
+	harness?.dispatch(
+		row,
+		new MouseEvent("click", {
+			bubbles: true,
+			cancelable: true,
+			shiftKey: modifiers.shiftKey ?? false,
+			metaKey: modifiers.metaKey ?? false,
+			ctrlKey: modifiers.ctrlKey ?? false,
+		}),
+	);
+
+const openedMessageId = (router: AnyRouter): string | undefined =>
+	(router.state.location.search as { selectedMessageId?: string })
+		.selectedMessageId;
+
+describe("SwipeableMessageRow — modifier selection below the desktop width", () => {
+	it("takes a shift-press for selection instead of opening the message", async () => {
+		const { row, router, selects } = mountRow();
+
+		const event = press(row, { shiftKey: true });
+		release(row);
+		await harness?.flush();
+
+		assert.deepEqual(selects, [
+			{ shiftKey: true, metaKey: false, ctrlKey: false },
+		]);
+		assert.equal(event.defaultPrevented, true);
+		assert.equal(openedMessageId(router), undefined);
+	});
+
+	it("takes a cmd-press for selection instead of opening the message", async () => {
+		const { row, router, selects } = mountRow();
+
+		press(row, { metaKey: true });
+		release(row);
+		click(row, { metaKey: true });
+		await harness?.flush();
+
+		assert.deepEqual(selects, [
+			{ shiftKey: false, metaKey: true, ctrlKey: false },
+		]);
+		assert.equal(openedMessageId(router), undefined);
+	});
+
+	it("drops the native text selection a shift-press would drag across rows", () => {
+		const { row } = mountRow();
+		const selection = harness?.window.getSelection();
+		assert.ok(selection, "jsdom exposes no selection");
+		const range = harness?.document.createRange();
+		assert.ok(range, "jsdom exposes no range");
+		range.selectNodeContents(row);
+		selection.removeAllRanges();
+		selection.addRange(range);
+
+		press(row, { shiftKey: true });
+
+		assert.equal(selection.rangeCount, 0);
+	});
+
+	it("suppresses the context menu a ctrl-press already spent on selection", () => {
+		const { row, selects } = mountRow();
+
+		press(row, { ctrlKey: true });
+		const menu = new MouseEvent("contextmenu", {
+			bubbles: true,
+			cancelable: true,
+			ctrlKey: true,
+		});
+		harness?.dispatch(row, menu);
+
+		assert.deepEqual(selects, [
+			{ shiftKey: false, metaKey: false, ctrlKey: true },
+		]);
+		assert.equal(menu.defaultPrevented, true);
+	});
+
+	it("opens on an unmodified tap", async () => {
+		const { row, router, selects } = mountRow();
+
+		press(row);
+		release(row);
+		click(row);
+		await harness?.flush();
+
+		assert.deepEqual(selects, []);
+		assert.equal(openedMessageId(router), "msg-1");
+	});
+
+	it("opens when selection declines the modified press", async () => {
+		const { row, router } = mountRow(false);
+
+		press(row, { metaKey: true });
+		release(row);
+		await harness?.flush();
+
+		assert.equal(openedMessageId(router), "msg-1");
+	});
+});

package/src/components/mail/SwipeableMessageRow.tsx

@@ -11,6 +11,7 @@ import { useCallback, useState } from "react";
 import { toDisplayCategory } from "@/lib/display-category";
 import { formatEmailDate } from "@/lib/format";
 import { MessageListItem } from "./MessageListItem";
+import { useModifierSelect } from "./useModifierSelect";
 
 interface MailboxLinkSearch {
 	selectedMessageId?: string;
@@ -111,6 +112,8 @@ export const SwipeableMessageRow = ({
 		});
 	}, [navigate, mailboxId, thread.messageId]);
 
+	const modifierSelect = useModifierSelect(thread.messageId, onRowSelect);
+
 	if (isDesktop || isMultiSelectMode) {
 		return (
 			<MessageListItem
@@ -131,18 +134,31 @@ export const SwipeableMessageRow = ({
 		);
 	}
 
+	// The swipe row reads the press as a pointer gesture, and it opens the message
+	// from the release — a `mousedown` handler on the row would already be behind
+	// it. Taking the modified press in the capture phase keeps it away from the
+	// gesture entirely, so a shift- or cmd-click selects instead of starting a
+	// swipe, a long press or an open.
 	return (
-		<SwipeableRow
-			thread={toThreadRowData(thread)}
-			selectionMode={false}
-			checked={false}
-			active={isSelected}
-			peek={peek}
-			onPeek={setPeek}
-			onToggleCheck={handleToggleCheck}
-			onLongPress={handleLongPress}
-			onOpen={handleOpen}
-			onAct={handleAct}
-		/>
+		// biome-ignore lint/a11y/noStaticElementInteractions: the wrapper only intercepts mouse modifiers ahead of the row's own gesture; the row beneath keeps the button semantics and the whole keyboard path
+		<div
+			role="presentation"
+			onPointerDownCapture={modifierSelect.onMouseDown}
+			onClickCapture={modifierSelect.claimClick}
+			onContextMenu={modifierSelect.onContextMenu}
+		>
+			<SwipeableRow
+				thread={toThreadRowData(thread)}
+				selectionMode={false}
+				checked={false}
+				active={isSelected}
+				peek={peek}
+				onPeek={setPeek}
+				onToggleCheck={handleToggleCheck}
+				onLongPress={handleLongPress}
+				onOpen={handleOpen}
+				onAct={handleAct}
+			/>
+		</div>
 	);
 };

package/src/hooks/useAutoMovedBadge.ts

@@ -1,15 +1,20 @@
 import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import type { RemitImapAutoMovedInfo } from "@remit/api-http-client/types.gen.ts";
+import type {
+	RemitImapAutoMovedInfo,
+	RemitImapMessageSpamReport,
+} from "@remit/api-http-client/types.gen.ts";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 import {
 	autoMovedLabel,
 	isAutoMoveInEffect,
 	resolveUndoTargetMailboxId,
+	spamReportLabel,
 } from "@/lib/auto-moved";
 import { getMailboxDisplayName } from "@/lib/folder-roles";
 import { useInboxMailbox, useJunkMailbox } from "./useArchiveMailbox";
 import { useMoveMessages } from "./useMoveMessages";
+import { useReportSpam } from "./useReportSpam";
 
 interface UseAutoMovedBadgeOptions {
 	accountId: string | undefined;
@@ -18,6 +23,14 @@ interface UseAutoMovedBadgeOptions {
 	/** The message's current mailbox — the row/card it's rendered in. */
 	mailboxId: string;
 	autoMoved: RemitImapAutoMovedInfo | undefined;
+	/**
+	 * Present when the user reported this message as spam and the report has
+	 * not been undone (issue #648). Takes precedence over `autoMoved`: a
+	 * report can be a no-op move (the provider's own filter already placed the
+	 * message in Junk), so it carries its own badge independent of the
+	 * message's current folder, unlike a classifier/filter move.
+	 */
+	spamReport: RemitImapMessageSpamReport | undefined;
 }
 
 export interface AutoMovedBadgeState {
@@ -36,22 +49,27 @@ export interface AutoMovedBadgeState {
 }
 
 /**
- * Composes the account's mailboxes with the message's `autoMoved` projection
- * into everything the `AutoMovedBadge` kit component needs: the derived "still
- * in effect" gate, the plain-language label, and a one-click undo bound to the
- * existing `moveMessages` mutation (no new endpoint — moves back through the
- * same bulk move operation, the other direction).
+ * Composes the account's mailboxes with the message's `autoMoved` and
+ * `spamReport` projections into everything the `AutoMovedBadge` kit component
+ * needs: the derived "still in effect" gate, the plain-language label, and a
+ * one-click undo.
  *
- * Both auto-move shapes are handled. A classifier move resolves its
- * Inbox/Junk role mailboxes; a standing-filter move names an arbitrary source
- * folder, whose display name is resolved from the account's mailbox list, and
- * carries a Settings › Filters link so the filter that keeps moving mail is one
- * tap away — undo does not disable it.
+ * Three provenances are handled, `spamReport` taking priority when present:
+ * - A spam report (issue #648) undoes via `POST /messages/not-spam`, which
+ *   resolves its own restore target server-side — the client never needs an
+ *   Inbox/Junk lookup for it, and the badge shows regardless of the message's
+ *   current folder (a report can be a no-op move).
+ * - A classifier move resolves its Inbox/Junk role mailboxes and undoes via a
+ *   plain move back to the source role.
+ * - A standing-filter move names an arbitrary source folder, whose display
+ *   name is resolved from the account's mailbox list, and carries a
+ *   Settings › Filters link so the filter that keeps moving mail is one tap
+ *   away — undo does not disable it.
  *
- * `show` re-derives on every render from `mailboxId` — no local dismissed
- * flag. Once `moveMessages` settles, its query invalidation refetches the
- * thread row with its updated `mailboxId`, and the badge naturally stops
- * showing (doc/rules/data-flow.md).
+ * `show` re-derives on every render from `mailboxId` (or from `spamReport`'s
+ * presence) — no local dismissed flag. Once the undo mutation settles, its
+ * query invalidation refetches the thread row with its updated state, and the
+ * badge naturally stops showing (doc/rules/data-flow.md).
  */
 export const useAutoMovedBadge = ({
 	accountId,
@@ -59,10 +77,16 @@ export const useAutoMovedBadge = ({
 	threadId,
 	mailboxId,
 	autoMoved,
+	spamReport,
 }: UseAutoMovedBadgeOptions): AutoMovedBadgeState => {
 	const { inboxMailboxId } = useInboxMailbox(accountId);
 	const { junkMailboxId } = useJunkMailbox(accountId);
-	const { moveMessages, isPending } = useMoveMessages({
+	const { moveMessages, isPending: isMoveUndoing } = useMoveMessages({
+		mailboxId,
+		threadId,
+		accountId,
+	});
+	const { notSpam, isRestoring: isSpamUndoing } = useReportSpam({
 		mailboxId,
 		threadId,
 		accountId,
@@ -77,17 +101,30 @@ export const useAutoMovedBadge = ({
 	});
 
 	const roleMailboxes = { inboxMailboxId, junkMailboxId };
-	const show = isAutoMoveInEffect(autoMoved, mailboxId, roleMailboxes);
 	const undoTargetMailboxId = resolveUndoTargetMailboxId(
 		autoMoved,
 		roleMailboxes,
 	);
 
-	const handleUndo = useCallback(() => {
+	const handleUndoMove = useCallback(() => {
 		if (!undoTargetMailboxId) return;
 		moveMessages([messageId], undoTargetMailboxId);
 	}, [moveMessages, messageId, undoTargetMailboxId]);
 
+	const handleUndoReport = useCallback(() => {
+		notSpam([messageId]);
+	}, [notSpam, messageId]);
+
+	if (spamReport) {
+		return {
+			show: true,
+			label: spamReportLabel,
+			onUndo: handleUndoReport,
+			isUndoing: isSpamUndoing,
+		};
+	}
+
+	const show = isAutoMoveInEffect(autoMoved, mailboxId, roleMailboxes);
 	if (!show || !autoMoved) {
 		return { show: false, label: "", isUndoing: false };
 	}
@@ -101,8 +138,8 @@ export const useAutoMovedBadge = ({
 	return {
 		show: true,
 		label: autoMovedLabel(autoMoved, sourceFolderName),
-		onUndo: undoTargetMailboxId ? handleUndo : undefined,
-		isUndoing: isPending,
+		onUndo: undoTargetMailboxId ? handleUndoMove : undefined,
+		isUndoing: isMoveUndoing,
 		...(autoMoved.filterId ? { filtersHref: "/settings/filters" } : {}),
 	};
 };

package/src/hooks/useReportSpam.integration.test.ts

@@ -0,0 +1,93 @@
+/**
+ * Integration: prove a per-message report-spam/not-spam failure resolves to a
+ * banner, never the full-screen fatal overlay, through the REAL global
+ * `MutationCache` wiring (`lib/query-error-handler.ts`, wired on the
+ * `QueryClient` in `shell/index.tsx`) — not just `ErrorBannerProvider`'s own
+ * `isAlwaysFatal` check.
+ *
+ * That distinction is the whole point of this file. `ErrorBannerProvider.
+ * pushError` refuses to banner an always-fatal error, but every mutation
+ * ALSO reports to the MutationCache's global `onError`, independent of
+ * whatever the per-mutation `onError` did — and `shouldEscalate` (what the
+ * global handler calls) escalates by DEFAULT for any non-5xx that didn't opt
+ * out via `meta.softError`. A test that only checked `isAlwaysFatal` passed
+ * while the real app crashed to the fatal overlay on the same error: this is
+ * exactly `query-escalation.integration.test.ts`'s pattern, applied to
+ * `useReportSpam`'s own mutation shape (mutationFn + meta), because that is
+ * the seam the earlier fix went through unexercised.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { MutationCache, QueryCache, QueryClient } from "@tanstack/react-query";
+import { __resetFatalError, subscribeFatalError } from "../lib/fatal-error";
+import {
+	handleMutationCacheError,
+	handleQueryCacheError,
+} from "../lib/query-error-handler";
+import { throwOnBulkFailure } from "./useReportSpam.js";
+
+afterEach(() => {
+	__resetFatalError();
+});
+
+const makeClient = () =>
+	new QueryClient({
+		queryCache: new QueryCache({ onError: handleQueryCacheError }),
+		mutationCache: new MutationCache({ onError: handleMutationCacheError }),
+		defaultOptions: { mutations: { retry: false } },
+	});
+
+/** The exact shape a failed report-spam/not-spam call resolves to on the wire (200, not a rejection) — see `throwOnBulkFailure`. */
+const failedBulkResult = () => ({
+	successCount: 0,
+	failureCount: 1,
+	failures: [
+		{
+			messageId: "9m2k7x4vqz1jd0tn3wf8b6y5c",
+			reason:
+				"Message 9m2k7x4vqz1jd0tn3wf8b6y5c's move to Junk has not settled yet; try again in a moment.",
+		},
+	],
+});
+
+describe("useReportSpam's mutations under the real MutationCache (#648 review)", () => {
+	it("with meta.softError, a per-message failure does NOT escalate to the fatal overlay (regression)", async () => {
+		const seen: string[] = [];
+		subscribeFatalError((fatal) => seen.push(fatal.message));
+		const client = makeClient();
+
+		const mutation = client.getMutationCache().build(client, {
+			mutationFn: async () => {
+				throwOnBulkFailure(failedBulkResult());
+			},
+			meta: { softError: true },
+		});
+		await mutation.execute(undefined).catch(() => {});
+
+		assert.deepEqual(
+			seen,
+			[],
+			"a designed, retryable per-message failure must not reach the fatal overlay",
+		);
+	});
+
+	it("without meta.softError, the same failure DOES escalate — proving the opt-out is load-bearing, not a no-op", async () => {
+		const seen: string[] = [];
+		subscribeFatalError((fatal) => seen.push(fatal.message));
+		const client = makeClient();
+
+		const mutation = client.getMutationCache().build(client, {
+			mutationFn: async () => {
+				throwOnBulkFailure(failedBulkResult());
+			},
+		});
+		await mutation.execute(undefined).catch(() => {});
+
+		assert.equal(
+			seen.length,
+			1,
+			"this asserts the failure mode the fix removes — a non-5xx with no softError opt-out escalates by default",
+		);
+	});
+});

package/src/hooks/useReportSpam.render.test.ts

@@ -0,0 +1,113 @@
+/**
+ * Mounts the real hook against the real fetch seam to prove the pending state
+ * a press needs actually toggles (issue #648 review): with no optimistic
+ * cache patch, a press that never flips `isReporting`/`isRestoring` would be
+ * a genuinely dead control — nothing visible changes until the request lands.
+ */
+
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../test-support/dom";
+import { type HttpMock, mockFetch } from "../test-support/http";
+import { useReportSpam } from "./useReportSpam";
+
+let harness: DomHarness | undefined;
+let http: HttpMock;
+
+const mountHook = <T>(useHook: () => T): (() => T) => {
+	let value: T | undefined;
+	const Probe = () => {
+		value = useHook();
+		return null;
+	};
+	harness = createDomHarness();
+	harness.renderApp(createElement(Probe));
+	return () => {
+		if (value === undefined) throw new Error("hook did not render");
+		return value;
+	};
+};
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http.restore();
+});
+
+/**
+ * Polls `predicate` until it's true, yielding real event-loop turns between
+ * attempts rather than spinning a fixed count of microtask flushes — the
+ * chain from a resolved fetch to a re-render crosses enough async boundaries
+ * (response parsing, `throwOnBulkFailure`, `onSuccess`'s invalidation, React's
+ * commit) that a fixed count reads as flaky under load instead of wrong.
+ */
+const waitFor = async (
+	predicate: () => boolean,
+	timeoutMs = 2000,
+): Promise<void> => {
+	if (!harness) throw new Error("nothing mounted");
+	const deadline = Date.now() + timeoutMs;
+	while (!predicate()) {
+		if (Date.now() > deadline) {
+			throw new Error(
+				`waitFor: condition never became true within ${timeoutMs}ms`,
+			);
+		}
+		await harness.flush();
+		await harness.wait(5);
+	}
+};
+
+describe("useReportSpam pending state (#648 review)", () => {
+	it("isReporting goes true for the duration of an in-flight report, then false", async () => {
+		let resolveRequest: (() => void) | undefined;
+		http = mockFetch(
+			() =>
+				new Promise((resolve) => {
+					resolveRequest = () => resolve({ successCount: 1, failureCount: 0 });
+				}),
+		);
+		const hook = mountHook(() => useReportSpam({ mailboxId: "mbx-inbox" }));
+
+		assert.equal(hook().isReporting, false);
+
+		hook().reportSpam(["msg-1"]);
+		await waitFor(() => hook().isReporting === true);
+
+		assert.ok(resolveRequest, "the request never reached the mock");
+		resolveRequest?.();
+		await waitFor(() => hook().isReporting === false);
+	});
+
+	it("isRestoring goes true for the duration of an in-flight undo, then false", async () => {
+		let resolveRequest: (() => void) | undefined;
+		http = mockFetch(
+			() =>
+				new Promise((resolve) => {
+					resolveRequest = () => resolve({ successCount: 1, failureCount: 0 });
+				}),
+		);
+		const hook = mountHook(() => useReportSpam({ mailboxId: "mbx-junk" }));
+
+		assert.equal(hook().isRestoring, false);
+
+		hook().notSpam(["msg-1"]);
+		await waitFor(() => hook().isRestoring === true);
+
+		resolveRequest?.();
+		await waitFor(() => hook().isRestoring === false);
+	});
+
+	it("sends the request to the report-spam endpoint with the pressed message id", async () => {
+		http = mockFetch(() => ({ successCount: 1, failureCount: 0 }));
+		const hook = mountHook(() => useReportSpam({ mailboxId: "mbx-inbox" }));
+
+		hook().reportSpam(["msg-1"]);
+		await waitFor(() => http.to("/messages/report-spam").length > 0);
+
+		const calls = http.to("/messages/report-spam");
+		assert.equal(calls.length, 1);
+		assert.deepEqual(calls[0].body, { messageIds: ["msg-1"] });
+	});
+});