@remit/web-client 0.0.252 → 0.0.253

package/package.json

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

@@ -17,6 +17,7 @@ import { AutoMovedIndicator } from "./AutoMovedIndicator";
 import { MessageActionMenu } from "./MessageActionMenu";
 import { MessageAttachments } from "./MessageAttachments";
 import { MessageBody } from "./MessageBody";
+import { MessageSettlementAlert } from "./MessageSettlementAlert";
 import { MobileMessageBar } from "./MobileMessageBar";
 import { RawMessageView } from "./RawMessageView";
 
@@ -291,46 +292,53 @@ const ExpandedCard = ({
 				) : undefined
 			}
 			body={
-				isLoading ? (
-					<div className="mt-3 animate-pulse space-y-2">
-						<div className="h-4 bg-surface-sunken rounded w-full" />
-						<div className="h-4 bg-surface-sunken rounded w-3/4" />
-						<div className="h-4 bg-surface-sunken rounded w-1/2" />
-					</div>
-				) : isError && isMessageNotFoundError(error) ? (
-					<div className="mt-3">
-						<EmptyState message="This message has been deleted" />
-					</div>
-				) : isError ? (
-					<div className="mt-3">
-						<ErrorState
-							variant="inline"
-							title="Couldn't load this message"
-							error={error}
-							onRetry={onRetry}
-						/>
-					</div>
-				) : showRaw ? (
-					<div className="mt-3">
-						<RawMessageView messageId={threadMessage.messageId} />
-					</div>
-				) : (
-					<div className="mt-3">
-						<MessageBody
-							bodyParts={messageData?.bodyParts}
-							messageId={threadMessage.messageId}
-							fromAddressId={messageData?.envelope.from[0]?.addressId}
-							isTrusted={isTrusted}
-							category={toDisplayCategory(threadMessage.category)}
-						/>
-						<MessageAttachments
-							messageId={threadMessage.messageId}
-							bodyParts={messageData?.bodyParts}
-							hasAttachment={threadMessage.hasAttachment}
-							className="mt-4"
-						/>
-					</div>
-				)
+				<>
+					<MessageSettlementAlert
+						threadMessage={threadMessage}
+						accountId={accountId}
+						className="mt-3"
+					/>
+					{isLoading ? (
+						<div className="mt-3 animate-pulse space-y-2">
+							<div className="h-4 bg-surface-sunken rounded w-full" />
+							<div className="h-4 bg-surface-sunken rounded w-3/4" />
+							<div className="h-4 bg-surface-sunken rounded w-1/2" />
+						</div>
+					) : isError && isMessageNotFoundError(error) ? (
+						<div className="mt-3">
+							<EmptyState message="This message has been deleted" />
+						</div>
+					) : isError ? (
+						<div className="mt-3">
+							<ErrorState
+								variant="inline"
+								title="Couldn't load this message"
+								error={error}
+								onRetry={onRetry}
+							/>
+						</div>
+					) : showRaw ? (
+						<div className="mt-3">
+							<RawMessageView messageId={threadMessage.messageId} />
+						</div>
+					) : (
+						<div className="mt-3">
+							<MessageBody
+								bodyParts={messageData?.bodyParts}
+								messageId={threadMessage.messageId}
+								fromAddressId={messageData?.envelope.from[0]?.addressId}
+								isTrusted={isTrusted}
+								category={toDisplayCategory(threadMessage.category)}
+							/>
+							<MessageAttachments
+								messageId={threadMessage.messageId}
+								bodyParts={messageData?.bodyParts}
+								hasAttachment={threadMessage.hasAttachment}
+								className="mt-4"
+							/>
+						</div>
+					)}
+				</>
 			}
 		/>
 	);

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

@@ -1,7 +1,9 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { toImapDraftRowData } from "@/lib/drafts";
 import { threadToRowData } from "./MessageListItem";
+import { swipeableRowData } from "./SwipeableMessageRow";
 
 const baseThread = (
 	overrides: Partial<RemitImapThreadMessageResponse> = {},
@@ -41,3 +43,55 @@ describe("threadToRowData — labels", () => {
 		assert.equal(row.labels, undefined);
 	});
 });
+
+describe("threadToRowData — settlement (issue #1002)", () => {
+	it("marks a row whose delete gave up and came back", () => {
+		const row = threadToRowData(
+			baseThread({ status: "active", syncStatus: "failed" }),
+		);
+		assert.equal(row.settlement, "delete_failed");
+	});
+
+	it("says nothing about a move mid-retry, which writes the same failed flag", () => {
+		const row = threadToRowData(
+			baseThread({ status: "moving", syncStatus: "failed" }),
+		);
+		assert.equal(row.settlement, undefined);
+	});
+
+	it("says nothing about a delete still being pushed", () => {
+		const row = threadToRowData(
+			baseThread({ status: "deleting", syncStatus: "pending" }),
+		);
+		assert.equal(row.settlement, undefined);
+	});
+
+	it("leaves an ordinary inbound row unmarked, pending and all", () => {
+		const row = threadToRowData(
+			baseThread({ status: "active", syncStatus: "pending" }),
+		);
+		assert.equal(row.settlement, undefined);
+	});
+});
+
+describe("the mobile and drafts rows carry the same mark", () => {
+	it("marks the swipeable mobile row", () => {
+		const row = swipeableRowData(
+			baseThread({ status: "active", syncStatus: "failed" }),
+		);
+		assert.equal(row.settlement, "delete_failed");
+	});
+
+	it("marks the drafts row", () => {
+		const row = toImapDraftRowData(
+			baseThread({ status: "active", syncStatus: "failed" }),
+		);
+		assert.equal(row.settlement, "delete_failed");
+	});
+
+	it("leaves a move mid-retry unmarked on both", () => {
+		const thread = baseThread({ status: "moving", syncStatus: "failed" });
+		assert.equal(swipeableRowData(thread).settlement, undefined);
+		assert.equal(toImapDraftRowData(thread).settlement, undefined);
+	});
+});

package/src/components/mail/MessageListItem.tsx

@@ -6,6 +6,7 @@
  * interactive lives in `MessageRow`, which the brief and Flagged render too.
  */
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+
 import type {
 	Density,
 	SelectionModifiers,
@@ -15,6 +16,7 @@ import type {
 import { memo } from "react";
 import { toDisplayCategory } from "@/lib/display-category";
 import { formatEmailDate } from "@/lib/format";
+import { rowSettlement } from "@/lib/row-settlement";
 import { MessageRow } from "./MessageRow";
 
 interface MessageListItemProps {
@@ -62,6 +64,7 @@ export const threadToRowData = (
 	// misses.
 	suspicious: thread.authenticity?.dkimMismatch === true,
 	labels: thread.labels,
+	...rowSettlement(thread),
 });
 
 const MessageListItemComponent = ({

package/src/components/mail/MessageSettlementAlert.tsx

@@ -0,0 +1,68 @@
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { hasAbandonedDelete } from "@remit/data-ports/message-settlement";
+import { MessageSettlementNotice, messageSettlementCopy } from "@remit/ui";
+import { useCallback, useMemo } from "react";
+import { useDeleteMessages } from "@/hooks/useDeleteMessages";
+import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
+
+/**
+ * States, on the open message, that Remit abandoned its delete (issue #1002) —
+ * the failure the list can only chip.
+ *
+ * The retry is the ordinary delete endpoint, not a new one: abandoning 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.
+ */
+export function MessageSettlementAlert({
+	threadMessage,
+	accountId,
+	className,
+}: {
+	threadMessage: RemitImapThreadMessageResponse;
+	accountId: string | undefined;
+	className?: string;
+}) {
+	const abandoned = hasAbandonedDelete(threadMessage);
+	const { deleteMessages, isPending } = useDeleteMessages({
+		mailboxId: threadMessage.mailboxId,
+		threadId: threadMessage.threadId,
+		accountId,
+		messages: [threadMessage],
+	});
+
+	const onRetry = useCallback(() => {
+		deleteMessages([threadMessage.messageId]);
+	}, [deleteMessages, threadMessage.messageId]);
+
+	const reportHref = useMemo(
+		() =>
+			abandoned
+				? buildGitHubIssueUrl(
+						buildBugReportContext({
+							title: messageSettlementCopy.delete_failed.title,
+							errorMessage: `Message ${threadMessage.messageId}: status=${threadMessage.status} syncStatus=${threadMessage.syncStatus}`,
+						}),
+					)
+				: undefined,
+		[
+			abandoned,
+			threadMessage.messageId,
+			threadMessage.status,
+			threadMessage.syncStatus,
+		],
+	);
+
+	if (!abandoned) return null;
+
+	return (
+		<MessageSettlementNotice
+			settlement="delete_failed"
+			onRetry={onRetry}
+			retryPending={isPending}
+			reportHref={reportHref}
+			className={className}
+		/>
+	);
+}

package/src/components/mail/SwipeableMessageRow.tsx

@@ -9,6 +9,7 @@ import {
 import { useCallback, useState } from "react";
 import { toDisplayCategory } from "@/lib/display-category";
 import { formatEmailDate } from "@/lib/format";
+import { rowSettlement } from "@/lib/row-settlement";
 import { useOpenThread } from "@/routing";
 import { MessageListItem } from "./MessageListItem";
 import { useModifierSelect } from "./useModifierSelect";
@@ -34,7 +35,13 @@ interface SwipeableMessageRowProps {
 	density?: Density;
 }
 
-const toThreadRowData = (
+/**
+ * The mobile list builds its own row rather than delegating to
+ * `MessageListItem` (see the `isDesktop || isMultiSelectMode` branch below),
+ * so every row signal has to be repeated here. Exported so a test can hold it
+ * to the same answers as the desktop mapper.
+ */
+export const swipeableRowData = (
 	thread: RemitImapThreadMessageResponse,
 ): ThreadRowData => {
 	const suspicious = thread.authenticity?.dkimMismatch === true;
@@ -52,6 +59,7 @@ const toThreadRowData = (
 		trust: thread.senderTrust,
 		category: toDisplayCategory(thread.category),
 		suspicious,
+		...rowSettlement(thread),
 	};
 };
 
@@ -136,7 +144,7 @@ export const SwipeableMessageRow = ({
 			onContextMenu={modifierSelect.onContextMenu}
 		>
 			<SwipeableRow
-				thread={toThreadRowData(thread)}
+				thread={swipeableRowData(thread)}
 				selectionMode={false}
 				checked={false}
 				active={isSelected}

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

@@ -95,6 +95,8 @@ const describeMessage: RemitImapDescribeMessageResponse = {
 		uid: 1,
 		rfc822Size: 512,
 		internalDate: 1_767_225_600_000,
+		status: "active",
+		syncStatus: "pending",
 	},
 	envelope: {
 		messageId: MESSAGE_ID,

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

@@ -78,6 +78,8 @@ const describeMessage: RemitImapDescribeMessageResponse = {
 		uid: 1,
 		rfc822Size: 512,
 		internalDate: 1_767_225_600_000,
+		status: "active",
+		syncStatus: "pending",
 	},
 	envelope: {
 		messageId: MESSAGE_ID,

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

@@ -92,6 +92,8 @@ const describeMessage: RemitImapDescribeMessageResponse = {
 		uid: 1,
 		rfc822Size: 512,
 		internalDate: LATEST_SENT,
+		status: "active",
+		syncStatus: "pending",
 	},
 	envelope: {
 		messageId: MESSAGE_ID,

package/src/hooks/useToggleStar.test.ts

@@ -12,6 +12,8 @@ const make = (
 	hasStars: boolean,
 ): RemitImapThreadMessageResponse => ({
 	senderTrust: "unknown",
+	status: "active",
+	syncStatus: "pending",
 	category: "uncategorized",
 	threadId: "t1",
 	threadMessageId: `tm-${messageId}`,

package/src/hooks/useToggleTrusted.test.ts

@@ -68,6 +68,8 @@ describe("patchDescribeMessage", () => {
 				uid: 1,
 				rfc822Size: 1,
 				internalDate: 1,
+				status: "active",
+				syncStatus: "pending",
 			},
 			envelope: {
 				messageId: "m",

package/src/lib/brief.test.ts

@@ -35,6 +35,8 @@ function threadResponse(
 		hasStars: false,
 		star: "none",
 		senderTrust: "unknown",
+		status: "active",
+		syncStatus: "pending",
 		muted: false,
 		createdAt: 0,
 		updatedAt: 0,

package/src/lib/brief.ts

@@ -46,6 +46,7 @@ import type {
 } from "@remit/ui";
 import { toDisplayCategory } from "./display-category.js";
 import { formatEmailDate } from "./format.js";
+import { rowSettlement } from "./row-settlement.js";
 import type { SearchToken } from "./search-tokens.js";
 
 /**
@@ -74,6 +75,7 @@ export function toThreadRowData(
 		trust: thread.senderTrust as SenderTrustLevel,
 		category: toDisplayCategory(thread.category),
 		suspicious,
+		...rowSettlement(thread),
 	};
 }
 

package/src/lib/dedupe-thread-messages.test.ts

@@ -24,6 +24,8 @@ function threadMessage(
 		hasStars: false,
 		star: "none",
 		senderTrust: "unknown",
+		status: "active",
+		syncStatus: "pending",
 		muted: false,
 		createdAt: 0,
 		updatedAt: 0,

package/src/lib/drafts.ts

@@ -26,6 +26,7 @@ import type {
 } from "@remit/api-http-client/types.gen.ts";
 import type { ThreadRowData, ThreadSection } from "@remit/ui";
 import { formatEmailDate } from "./format.js";
+import { rowSettlement } from "./row-settlement.js";
 
 /**
  * Map a Remit outbox draft to the ThreadRowData shape used by remit-ui row
@@ -65,6 +66,7 @@ export function toImapDraftRowData(
 		isRead: thread.isRead,
 		hasAttachment: thread.hasAttachment,
 		starred: thread.hasStars === true,
+		...rowSettlement(thread),
 	};
 }
 

package/src/lib/row-settlement.ts

@@ -0,0 +1,15 @@
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { hasAbandonedDelete } from "@remit/data-ports/message-settlement";
+import type { ThreadRowData } from "@remit/ui";
+
+/**
+ * The row treatment for a message whose delete Remit abandoned (issue #1002). The
+ * client decides nothing: `hasAbandonedDelete` owns which `status`/`syncStatus`
+ * pair proves a terminal give-up, and why no other pair does. Any other row —
+ * settled, mid-retry, or an undecidable move — carries no key at all and
+ * renders exactly as it always has.
+ */
+export const rowSettlement = (
+	thread: Pick<RemitImapThreadMessageResponse, "status" | "syncStatus">,
+): Pick<ThreadRowData, "settlement"> =>
+	hasAbandonedDelete(thread) ? { settlement: "delete_failed" } : {};

package/src/lib/thread-search-tokens.test.ts

@@ -41,6 +41,8 @@ const thread = (
 	hasStars: false,
 	star: "none",
 	senderTrust: "unknown",
+	status: "active",
+	syncStatus: "pending",
 	muted: false,
 	createdAt: 0,
 	updatedAt: 0,

package/src/test-support/fixtures.ts

@@ -78,6 +78,8 @@ export const makeThreadMessage = (
 	star: "none",
 	hasStars: false,
 	isDeleted: false,
+	status: "active",
+	syncStatus: "pending",
 	senderTrust: "unknown",
 	muted: false,
 	createdAt: 0,