@remit/web-client 0.0.272 → 0.0.274

package/src/components/mail/MessageCard.tsx

@@ -200,6 +200,12 @@ const ExpandedCard = ({
 	const isUnread = !threadMessage.isRead;
 	const isTrusted =
 		messageData?.envelope.from[0]?.flags?.trusted?.value === true;
+	// `BlockedFlag`: never load images, even on explicit click. Read alongside
+	// `trusted` and handed to the body, which lets blocked win over trusted —
+	// including on the header, where a trusted badge beside "you blocked this
+	// sender" would tell the user two opposite things about the same address.
+	const isBlocked =
+		messageData?.envelope.from[0]?.flags?.blocked?.value === true;
 	const fromAddressId = messageData?.envelope.from[0]?.addressId;
 	const message = toThreadMessageData(threadMessage, date);
 
@@ -220,7 +226,7 @@ const ExpandedCard = ({
 			message={message}
 			isFocused={mobile ? false : isFocused}
 			onHeaderClick={onToggle}
-			senderBadge={isTrusted ? <TrustedSenderBadge /> : undefined}
+			senderBadge={isTrusted && !isBlocked ? <TrustedSenderBadge /> : undefined}
 			trailing={
 				<span data-testid="message-date" className="text-2xs text-fg-subtle">
 					{date}
@@ -328,6 +334,7 @@ const ExpandedCard = ({
 								messageId={threadMessage.messageId}
 								fromAddressId={messageData?.envelope.from[0]?.addressId}
 								isTrusted={isTrusted}
+								isBlocked={isBlocked}
 								category={toDisplayCategory(threadMessage.category)}
 							/>
 							<MessageAttachments

package/src/components/mail/MessageList.run-reporting.test.ts

@@ -34,6 +34,7 @@ const expunging: DeleteOutcome[] = ["permanent", "unconfirmed"];
 const ended = (over: Partial<BulkRunOutcome> = {}): BulkRunOutcome => ({
 	done: 100,
 	failedIds: [],
+	refused: 0,
 	cancelled: false,
 	...over,
 });

package/src/components/mail/MessageListItem.test.ts

@@ -21,6 +21,7 @@ const baseThread = (
 		star: "None",
 		isDeleted: false,
 		senderTrust: "unknown",
+		abandonedMutation: "none",
 		createdAt: 0,
 		updatedAt: 0,
 		...overrides,
@@ -47,11 +48,58 @@ describe("threadToRowData — labels", () => {
 describe("threadToRowData — settlement (issue #1002)", () => {
 	it("marks a row whose delete gave up and came back", () => {
 		const row = threadToRowData(
-			baseThread({ status: "active", syncStatus: "failed" }),
+			baseThread({
+				status: "active",
+				syncStatus: "abandoned",
+				abandonedMutation: "delete",
+			}),
 		);
 		assert.equal(row.settlement, "delete_failed");
 	});
 
+	// Issue #1229. Both give-ups hand the row back the same way, so before the
+	// row named the mutation this rendered "Not deleted" over a move.
+	it("marks a row whose move gave up as a move, not a delete", () => {
+		const row = threadToRowData(
+			baseThread({
+				status: "active",
+				syncStatus: "abandoned",
+				abandonedMutation: "move",
+			}),
+		);
+		assert.equal(row.settlement, "move_failed");
+	});
+
+	it("says nothing about a copy that gave up, whose row no listing carries", () => {
+		const row = threadToRowData(
+			baseThread({
+				status: "deleted",
+				syncStatus: "abandoned",
+				abandonedMutation: "copy",
+			}),
+		);
+		assert.equal(row.settlement, undefined);
+	});
+
+	// `syncStatus` is the gate: a marker a later settle left behind says nothing.
+	it("says nothing about a settled row still carrying a stale marker", () => {
+		const row = threadToRowData(
+			baseThread({
+				status: "active",
+				syncStatus: "synced",
+				abandonedMutation: "delete",
+			}),
+		);
+		assert.equal(row.settlement, undefined);
+	});
+
+	it("says nothing about a transient attempt on an active row", () => {
+		const row = threadToRowData(
+			baseThread({ status: "active", syncStatus: "failed" }),
+		);
+		assert.equal(row.settlement, undefined);
+	});
+
 	it("says nothing about a move mid-retry, which writes the same failed flag", () => {
 		const row = threadToRowData(
 			baseThread({ status: "moving", syncStatus: "failed" }),
@@ -77,14 +125,22 @@ describe("threadToRowData — settlement (issue #1002)", () => {
 describe("the mobile and drafts rows carry the same mark", () => {
 	it("marks the swipeable mobile row", () => {
 		const row = swipeableRowData(
-			baseThread({ status: "active", syncStatus: "failed" }),
+			baseThread({
+				status: "active",
+				syncStatus: "abandoned",
+				abandonedMutation: "delete",
+			}),
 		);
 		assert.equal(row.settlement, "delete_failed");
 	});
 
 	it("marks the drafts row", () => {
 		const row = toImapDraftRowData(
-			baseThread({ status: "active", syncStatus: "failed" }),
+			baseThread({
+				status: "active",
+				syncStatus: "abandoned",
+				abandonedMutation: "delete",
+			}),
 		);
 		assert.equal(row.settlement, "delete_failed");
 	});

package/src/components/mail/MessageSettlementAlert.render.test.ts

@@ -0,0 +1,182 @@
+/**
+ * The reading-pane notice names the mutation that gave up and offers the way
+ * out for that one (#1229).
+ *
+ * A delete retries through the ordinary delete endpoint. A move cannot — the
+ * destination the give-up discarded is on no row — so its retry is the folder
+ * picker, which needs an account to scope its list to. The caller's `accountId`
+ * is absent on rows from per-mailbox endpoints and for as long as the
+ * conversation's own lookup is in flight, and a notice that names a failure and
+ * then offers nothing is the same dead end as one that offers the wrong thing.
+ */
+import assert from "node:assert/strict";
+import { afterEach, beforeEach, describe, it } from "node:test";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { createElement } from "react";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { type HttpMock, mockFetch } from "../../test-support/http";
+import { ErrorBannerProvider } from "../ui/ErrorBannerProvider";
+import { MessageSettlementAlert } from "./MessageSettlementAlert";
+import { RoleAppointmentPromptProvider } from "./RoleAppointmentPromptProvider";
+
+const ACCOUNT = "acc-1";
+const MAILBOX = "mbx-inbox";
+
+let harness: DomHarness | undefined;
+let http: HttpMock;
+
+const CONFIG = {
+	accounts: [{ accountId: ACCOUNT, email: "a@example.com" }],
+};
+
+const MAILBOXES = {
+	items: [
+		{
+			mailboxId: MAILBOX,
+			accountId: ACCOUNT,
+			fullPath: "INBOX",
+			hierarchyDelimiter: "/",
+			messageCount: 1,
+		},
+	],
+};
+
+const respond = (path: string): unknown => {
+	if (path.endsWith("/config")) return CONFIG;
+	if (path.endsWith("/mailboxes")) return MAILBOXES;
+	return {};
+};
+
+const thread = (
+	over: Partial<RemitImapThreadMessageResponse>,
+): RemitImapThreadMessageResponse =>
+	({
+		threadMessageId: "tm-1",
+		threadId: "th-1",
+		messageId: "msg-1",
+		accountConfigId: "cfg-1",
+		mailboxId: MAILBOX,
+		sentDate: 0,
+		isRead: true,
+		hasAttachment: false,
+		hasStars: false,
+		star: "None",
+		isDeleted: false,
+		senderTrust: "unknown",
+		category: "uncategorized",
+		status: "active",
+		syncStatus: "abandoned",
+		abandonedMutation: "none",
+		createdAt: 0,
+		updatedAt: 0,
+		...over,
+	}) as RemitImapThreadMessageResponse;
+
+const mount = (
+	threadMessage: RemitImapThreadMessageResponse,
+	accountId: string | undefined,
+): void => {
+	harness = createDomHarness();
+	harness.render(
+		createElement(
+			QueryClientProvider,
+			{ client: harness.queryClient },
+			createElement(
+				ErrorBannerProvider,
+				null,
+				createElement(
+					RoleAppointmentPromptProvider,
+					null,
+					createElement(MessageSettlementAlert, { threadMessage, accountId }),
+				),
+			),
+		),
+	);
+};
+
+const settle = async (done: () => boolean = () => false): Promise<void> => {
+	if (!harness) throw new Error("nothing mounted");
+	for (let round = 0; round < 40; round += 1) {
+		await harness.flush();
+		await harness.wait(0);
+		if (done()) return;
+	}
+};
+
+const labels = (): string[] =>
+	(harness?.queryAll("button") ?? []).map(
+		(button) => button.getAttribute("aria-label") ?? button.textContent ?? "",
+	);
+
+const notice = (): string => harness?.text() ?? "";
+
+beforeEach(() => {
+	http = mockFetch((call) => respond(call.path));
+});
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http.restore();
+});
+
+describe("MessageSettlementAlert", () => {
+	it("says nothing about a row no mutation gave up on", async () => {
+		mount(
+			thread({ syncStatus: "synced", abandonedMutation: "delete" }),
+			ACCOUNT,
+		);
+		await settle();
+
+		assert.equal(notice(), "");
+	});
+
+	it("offers Delete again for a delete that gave up", async () => {
+		mount(thread({ abandonedMutation: "delete" }), ACCOUNT);
+		await settle();
+
+		assert.match(notice(), /was not deleted/i);
+		assert.ok(labels().some((label) => /delete again/i.test(label)));
+	});
+
+	/**
+	 * The account lookup fans out to `/config` and then to every account's
+	 * mailbox list. Asking for it from each expanded message put that behind
+	 * every open row in the product — and it did, until it was scoped to the one
+	 * case that needs it. Pinned on the wire, because the cost is a request and
+	 * only the request proves it is not being made.
+	 */
+	it("asks for no configuration at all unless a move gave up", async () => {
+		mount(thread({ abandonedMutation: "delete" }), ACCOUNT);
+		await settle();
+
+		assert.deepEqual(http.to("/config"), []);
+	});
+
+	it("asks for none on a healthy row either", async () => {
+		mount(thread({ syncStatus: "synced" }), undefined);
+		await settle();
+
+		assert.deepEqual(http.to("/config"), []);
+	});
+
+	it("offers a folder picker for a move that gave up, never Delete again", async () => {
+		mount(thread({ abandonedMutation: "move" }), ACCOUNT);
+		await settle(() => labels().some((label) => /move again/i.test(label)));
+
+		assert.match(notice(), /was not moved/i);
+		assert.ok(labels().some((label) => /move again/i.test(label)));
+		assert.ok(!labels().some((label) => /delete again/i.test(label)));
+	});
+
+	it("resolves the account from the row's mailbox when the caller has none", async () => {
+		mount(thread({ abandonedMutation: "move" }), undefined);
+		await settle(() => labels().some((label) => /move again/i.test(label)));
+
+		assert.ok(
+			labels().some((label) => /move again/i.test(label)),
+			"a notice that names a failure always carries its way out",
+		);
+	});
+});

package/src/components/mail/MessageSettlementAlert.tsx

@@ -1,19 +1,34 @@
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import { hasAbandonedDelete } from "@remit/data-ports/message-settlement";
+import { abandonedMutationOf } from "@remit/data-ports/message-settlement";
+import { MessageMutation } from "@remit/domain-enums";
 import { MessageSettlementNotice, messageSettlementCopy } from "@remit/ui";
 import { useCallback, useMemo } from "react";
 import { useDeleteMessages } from "@/hooks/useDeleteMessages";
+import { useMailboxAccount } from "@/hooks/useMailboxAccount";
+import { useMoveMessages } from "@/hooks/useMoveMessages";
 import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
+import { MoveToTrigger } from "./MoveToTrigger";
 
 /**
- * States, on the open message, that Remit abandoned its delete (issue #1002) —
- * the failure the list can only chip.
+ * States, on the open message, that Remit gave up on a mutation (issue #1002) —
+ * the failure the list can only chip — and offers the way out for THAT
+ * mutation, never a different one (issue #1229).
  *
- * The retry is the ordinary delete endpoint, not a new one: abandoning put
- * `status` back to `active`, so `settledPlacement` passes the row through and
+ * A delete retries through the ordinary delete endpoint: giving up put `status`
+ * back to `active`, so `settledPlacement` passes the row through and
  * `POST /messages/delete` re-drives it against the folder the server actually
- * holds it in. Every other give-up gets no treatment — see `hasAbandonedDelete`
- * for the three the two fields cannot tell from a healthy row.
+ * holds it in. A move cannot retry that way — the destination the give-up
+ * discarded is on no row — so its retry is the same folder picker every other
+ * move goes through, which asks for one. Every other give-up gets no treatment;
+ * `abandonedMutationOf` says which and why.
+ *
+ * The picker needs an account to scope its folder list to, and the caller's
+ * `accountId` is absent on every row that came from a per-mailbox endpoint and
+ * for as long as the conversation's own lookup is in flight. It is resolved
+ * from the row's mailbox here rather than left out, because a notice that names
+ * a failure and offers no way to undo it is the same defect as one that offers
+ * the wrong way (#1229) — the resolver is the one `MessageActionMenu` already
+ * uses for exactly this.
  */
 export function MessageSettlementAlert({
 	threadMessage,
@@ -24,43 +39,86 @@ export function MessageSettlementAlert({
 	accountId: string | undefined;
 	className?: string;
 }) {
-	const abandoned = hasAbandonedDelete(threadMessage);
-	const { deleteMessages, isPending } = useDeleteMessages({
+	const abandoned = abandonedMutationOf(threadMessage);
+	const settlement =
+		abandoned === MessageMutation.delete
+			? ("delete_failed" as const)
+			: abandoned === MessageMutation.move
+				? ("move_failed" as const)
+				: undefined;
+
+	// Only a move that gave up, and only where the caller has no account of its
+	// own, has anything to resolve — so every other row subscribes to nothing.
+	// Asking unconditionally would pull `/config` and every account's mailbox
+	// list into each expanded message, for a case almost none of them are.
+	const { accountId: mailboxAccountId } = useMailboxAccount(
+		settlement === "move_failed" && !accountId
+			? threadMessage.mailboxId
+			: undefined,
+	);
+	const scopedAccountId = accountId ?? mailboxAccountId;
+
+	const { deleteMessages, isPending: isDeleting } = useDeleteMessages({
 		mailboxId: threadMessage.mailboxId,
 		threadId: threadMessage.threadId,
-		accountId,
+		accountId: scopedAccountId,
 		messages: [threadMessage],
 	});
+	const { moveMessages, isPending: isMoving } = useMoveMessages({
+		mailboxId: threadMessage.mailboxId,
+		threadId: threadMessage.threadId,
+		accountId: scopedAccountId,
+	});
 
-	const onRetry = useCallback(() => {
+	const onDeleteAgain = useCallback(() => {
 		deleteMessages([threadMessage.messageId]);
 	}, [deleteMessages, threadMessage.messageId]);
 
+	const onMoveAgain = useCallback(
+		(destinationMailboxId: string) => {
+			moveMessages([threadMessage.messageId], destinationMailboxId);
+		},
+		[moveMessages, threadMessage.messageId],
+	);
+
 	const reportHref = useMemo(
 		() =>
-			abandoned
+			settlement
 				? buildGitHubIssueUrl(
 						buildBugReportContext({
-							title: messageSettlementCopy.delete_failed.title,
-							errorMessage: `Message ${threadMessage.messageId}: status=${threadMessage.status} syncStatus=${threadMessage.syncStatus}`,
+							title: messageSettlementCopy[settlement].title,
+							errorMessage: `Message ${threadMessage.messageId}: status=${threadMessage.status} syncStatus=${threadMessage.syncStatus} abandonedMutation=${threadMessage.abandonedMutation}`,
 						}),
 					)
 				: undefined,
 		[
-			abandoned,
+			settlement,
 			threadMessage.messageId,
 			threadMessage.status,
 			threadMessage.syncStatus,
+			threadMessage.abandonedMutation,
 		],
 	);
 
-	if (!abandoned) return null;
+	if (!settlement) return null;
 
 	return (
 		<MessageSettlementNotice
-			settlement="delete_failed"
-			onRetry={onRetry}
-			retryPending={isPending}
+			settlement={settlement}
+			onRetry={settlement === "delete_failed" ? onDeleteAgain : undefined}
+			action={
+				settlement === "move_failed" && scopedAccountId ? (
+					<MoveToTrigger
+						accountId={scopedAccountId}
+						currentMailboxId={threadMessage.mailboxId}
+						onMove={onMoveAgain}
+						disabled={isMoving}
+						variant="compact"
+						label={messageSettlementCopy.move_failed.retryLabel}
+					/>
+				) : undefined
+			}
+			retryPending={settlement === "delete_failed" ? isDeleting : isMoving}
 			reportHref={reportHref}
 			className={className}
 		/>

package/src/components/mail/blocked-images-notice.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { BlockedImagesNotice } from "@/components/mail/BlockedImagesNotice";
+
+/**
+ * The bar above a message body whose remote images were not loaded.
+ *
+ * Two different facts wear the same strip. Images held back for privacy are a
+ * default the reader can lift, so the bar offers both ways out and neither
+ * control ever greys out. A blocked sender is an instruction the reader already
+ * gave — `BlockedFlag`: never load images, even on explicit click — so the bar
+ * carries no controls at all and says why instead, because an image-free
+ * message that explains nothing is indistinguishable from a broken one.
+ */
+const meta: Meta<typeof BlockedImagesNotice> = {
+	title: "Flows/Mail/Blocked Images Notice",
+	component: BlockedImagesNotice,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof BlockedImagesNotice>;
+
+const noop = () => {};
+
+const base = {
+	blockedImageCount: 3,
+	canAlwaysTrust: true,
+	isTrustPending: false,
+	isSenderBlocked: false,
+	onLoadOnce: noop,
+	onAlwaysTrust: noop,
+};
+
+const Column = ({ children }: { children: React.ReactNode }) => (
+	<div className="w-full max-w-2xl">{children}</div>
+);
+
+/** The default: images held back, and two ways to let them in. */
+export const Privacy: Story = {
+	render: () => (
+		<Column>
+			<BlockedImagesNotice {...base} />
+		</Column>
+	),
+};
+
+/** The trust toggle is in flight. The button stays pressable and says so. */
+export const Trusting: Story = {
+	render: () => (
+		<Column>
+			<BlockedImagesNotice {...base} isTrustPending />
+		</Column>
+	),
+};
+
+/** No parseable From-address, so there is nobody to trust — only Load once. */
+export const NoSenderToTrust: Story = {
+	render: () => (
+		<Column>
+			<BlockedImagesNotice {...base} canAlwaysTrust={false} />
+		</Column>
+	),
+};
+
+/** A blocked sender: no way in, and the reason stated rather than left blank. */
+export const SenderBlocked: Story = {
+	render: () => (
+		<Column>
+			<BlockedImagesNotice {...base} isSenderBlocked />
+		</Column>
+	),
+};
+
+/** Blocked outranks trusted — a sender carrying both is still blocked. */
+export const SenderBlockedAndTrusted: Story = {
+	render: () => (
+		<Column>
+			<BlockedImagesNotice {...base} isSenderBlocked canAlwaysTrust />
+		</Column>
+	),
+};
+
+/** One image, and the copy counts it as one. */
+export const SingleImage: Story = {
+	render: () => (
+		<Column>
+			<BlockedImagesNotice {...base} blockedImageCount={1} />
+		</Column>
+	),
+};

package/src/components/mail/bulk-run-state.test.ts

@@ -6,6 +6,7 @@ import { bulkRunReport } from "./bulk-run-state";
 const ended = (over: Partial<BulkRunOutcome> = {}): BulkRunOutcome => ({
 	done: 0,
 	failedIds: [],
+	refused: 0,
 	cancelled: false,
 	...over,
 });

package/src/components/mail/conversation-reply-identity.render.test.ts

@@ -97,6 +97,7 @@ const describeMessage: RemitImapDescribeMessageResponse = {
 		internalDate: 1_767_225_600_000,
 		status: "active",
 		syncStatus: "pending",
+		abandonedMutation: "none",
 	},
 	envelope: {
 		messageId: MESSAGE_ID,

package/src/components/mail/conversation-reply-reach.render.test.ts

@@ -80,6 +80,7 @@ const describeMessage: RemitImapDescribeMessageResponse = {
 		internalDate: 1_767_225_600_000,
 		status: "active",
 		syncStatus: "pending",
+		abandonedMutation: "none",
 	},
 	envelope: {
 		messageId: MESSAGE_ID,

package/src/components/mail/selection-wizard-run-controls.test.ts

@@ -145,6 +145,7 @@ describe("whether the run screen offers a way to end the run", () => {
 	const outcome: BulkRunOutcome = {
 		done: 2,
 		failedIds: [],
+		refused: 0,
 		cancelled: false,
 	};
 

package/src/components/mail/two-window-listeners-one-key.render.test.ts

@@ -94,6 +94,7 @@ const describeMessage: RemitImapDescribeMessageResponse = {
 		internalDate: LATEST_SENT,
 		status: "active",
 		syncStatus: "pending",
+		abandonedMutation: "none",
 	},
 	envelope: {
 		messageId: MESSAGE_ID,

package/src/components/ui/placement-refusal.test.ts

@@ -56,16 +56,6 @@ describe("placementRefusalBanner", () => {
 		assert.match(banner.detail ?? "", /try again in a moment/i);
 	});
 
-	it("tells an abandoned move to resync, not to wait", () => {
-		const banner = placementRefusalBanner(
-			{ reason: "unverified", messageId: "msg-1" },
-			1,
-			"delete",
-		);
-		assert.match(banner.detail ?? "", /sync the folder/i);
-		assert.doesNotMatch(banner.detail ?? "", /try again in a moment/i);
-	});
-
 	it("counts the selection in the title", () => {
 		assert.match(
 			placementRefusalBanner(
@@ -90,22 +80,19 @@ describe("placementRefusalBanner", () => {
 
 		const detail =
 			placementRefusalBanner(
-				{ reason: "unverified", messageId: "msg-1" },
+				{ reason: "in_flight", messageId: "msg-1" },
 				1,
 				"move",
 			).detail ?? "";
-		assert.match(detail, /move it again/i);
 		assert.doesNotMatch(detail, /delete/i);
 	});
 
 	it("never repeats the server's uuid at the user", () => {
-		for (const reason of ["in_flight", "unverified"] as const) {
-			const banner = placementRefusalBanner(
-				{ reason, messageId: "msg-1" },
-				1,
-				"delete",
-			);
-			assert.doesNotMatch(`${banner.title} ${banner.detail}`, /msg-1/);
-		}
+		const banner = placementRefusalBanner(
+			{ reason: "in_flight", messageId: "msg-1" },
+			1,
+			"delete",
+		);
+		assert.doesNotMatch(`${banner.title} ${banner.detail}`, /msg-1/);
 	});
 });