@remit/web-client 0.0.1

package/src/components/mail/MessageActionMenu.tsx

@@ -0,0 +1,368 @@
+import {
+	messageBulkOperationsUpdateFlagsMutation,
+	threadDetailOperationsListThreadMessagesQueryKey,
+	threadOperationsListThreadsQueryKey,
+	threadOperationsSearchThreadsQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useNavigate, useSearch } from "@tanstack/react-router";
+import {
+	BadgeCheck,
+	Check,
+	Code,
+	MailOpen,
+	MoreVertical,
+	Trash2,
+} from "lucide-react";
+import { useCallback } from "react";
+import {
+	DropdownMenu,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+} from "@/components/ui/DropdownMenu";
+import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
+import { ErrorState } from "@/components/ui/ErrorState";
+import { formatErrorDetail } from "@/components/ui/error-banners";
+import { useDeleteMessages } from "@/hooks/useDeleteMessages";
+import { useMoveMessages } from "@/hooks/useMoveMessages";
+import { useToggleTrusted } from "@/hooks/useToggleTrusted";
+import { MoveToTrigger } from "./MoveToTrigger";
+
+interface ThreadMessagesData {
+	items: RemitImapThreadMessageResponse[];
+	[key: string]: unknown;
+}
+
+interface ThreadsListPage {
+	items: RemitImapThreadMessageResponse[];
+	[key: string]: unknown;
+}
+
+interface ThreadsListData {
+	pages: ThreadsListPage[];
+	pageParams: Array<string | undefined>;
+}
+
+interface SnapshotEntry<T> {
+	queryKey: readonly unknown[];
+	data: T;
+}
+
+interface MarkUnreadContext {
+	threadMessagesPrefix: readonly unknown[];
+	threadsListPrefix: readonly unknown[];
+	threadsSearchPrefix: readonly unknown[];
+	previousThreadMessages: SnapshotEntry<ThreadMessagesData>[];
+	previousThreadsList: SnapshotEntry<ThreadsListData>[];
+}
+
+interface MessageActionMenuProps {
+	messageId: string;
+	threadId: string;
+	mailboxId: string;
+	isRead: boolean;
+	/**
+	 * Account that owns this message's mailbox. When provided the
+	 * Move-to-folder trigger is rendered next to the overflow; when
+	 * omitted (e.g. the surrounding view hasn't resolved the account
+	 * yet) the trigger is hidden so we never present a picker scoped to
+	 * the wrong account.
+	 */
+	accountId?: string;
+	/**
+	 * The From-address `addressId` for the message. When omitted (e.g. the
+	 * envelope has no parseable From) the "Trusted sender" toggle is
+	 * disabled with an explanatory tooltip.
+	 */
+	fromAddressId?: string;
+	/**
+	 * Whether the From-address is currently flagged as trusted.
+	 */
+	isTrusted?: boolean;
+	/**
+	 * Whether the body area is currently showing the raw RFC822/MIME source
+	 * instead of the rendered body. Controls the label/icon of the toggle.
+	 */
+	showRaw?: boolean;
+	/**
+	 * Toggle between the rendered body and the raw source. Owned by the
+	 * parent card so the body area and this menu stay in sync.
+	 */
+	onToggleRaw?: () => void;
+}
+
+export const MessageActionMenu = ({
+	messageId,
+	threadId,
+	mailboxId,
+	isRead,
+	accountId,
+	fromAddressId,
+	isTrusted = false,
+	showRaw = false,
+	onToggleRaw,
+}: MessageActionMenuProps) => {
+	const queryClient = useQueryClient();
+	const navigate = useNavigate();
+	const { pushError } = useErrorBanners();
+	const { selectedMessageId } = useSearch({ strict: false }) as {
+		selectedMessageId?: string;
+	};
+
+	const { mutate: updateFlags, isPending: isUpdatingFlags } = useMutation({
+		...messageBulkOperationsUpdateFlagsMutation(),
+		onMutate: async (variables): Promise<MarkUnreadContext> => {
+			const isReadNext = variables.body.isRead ?? true;
+			const targetIds = new Set(variables.body.messageIds ?? []);
+
+			const threadMessagesPrefix =
+				threadDetailOperationsListThreadMessagesQueryKey({
+					path: { threadId },
+				});
+			const threadsListPrefix = threadOperationsListThreadsQueryKey({
+				path: { mailboxId },
+			});
+			const threadsSearchPrefix = threadOperationsSearchThreadsQueryKey({
+				path: { mailboxId },
+			});
+
+			await Promise.all([
+				queryClient.cancelQueries({ queryKey: threadMessagesPrefix }),
+				queryClient.cancelQueries({ queryKey: threadsListPrefix }),
+				queryClient.cancelQueries({ queryKey: threadsSearchPrefix }),
+			]);
+
+			const previousThreadMessages = queryClient
+				.getQueriesData<ThreadMessagesData>({ queryKey: threadMessagesPrefix })
+				.filter(
+					(entry): entry is [readonly unknown[], ThreadMessagesData] =>
+						entry[1] !== undefined,
+				)
+				.map(([queryKey, data]) => ({ queryKey, data }));
+
+			const previousThreadsList = queryClient
+				.getQueriesData<ThreadsListData>({ queryKey: threadsListPrefix })
+				.concat(
+					queryClient.getQueriesData<ThreadsListData>({
+						queryKey: threadsSearchPrefix,
+					}),
+				)
+				.filter(
+					(entry): entry is [readonly unknown[], ThreadsListData] =>
+						entry[1] !== undefined,
+				)
+				.map(([queryKey, data]) => ({ queryKey, data }));
+
+			queryClient.setQueriesData<ThreadMessagesData>(
+				{ queryKey: threadMessagesPrefix },
+				(old) => {
+					if (!old) return old;
+					return {
+						...old,
+						items: old.items.map((item) =>
+							targetIds.has(item.messageId)
+								? { ...item, isRead: isReadNext }
+								: item,
+						),
+					};
+				},
+			);
+
+			const patchListData = (old: ThreadsListData | undefined) => {
+				if (!old) return old;
+				return {
+					...old,
+					pages: old.pages.map((page) => ({
+						...page,
+						items: page.items.map((item) =>
+							targetIds.has(item.messageId)
+								? { ...item, isRead: isReadNext }
+								: item,
+						),
+					})),
+				};
+			};
+
+			queryClient.setQueriesData<ThreadsListData>(
+				{ queryKey: threadsListPrefix },
+				patchListData,
+			);
+			queryClient.setQueriesData<ThreadsListData>(
+				{ queryKey: threadsSearchPrefix },
+				patchListData,
+			);
+
+			return {
+				threadMessagesPrefix,
+				threadsListPrefix,
+				threadsSearchPrefix,
+				previousThreadMessages,
+				previousThreadsList,
+			};
+		},
+		onError: (err, variables, context) => {
+			if (context) {
+				for (const entry of context.previousThreadMessages) {
+					queryClient.setQueryData(entry.queryKey, entry.data);
+				}
+				for (const entry of context.previousThreadsList) {
+					queryClient.setQueryData(entry.queryKey, entry.data);
+				}
+			}
+			const isReadNext = variables.body.isRead ?? true;
+			pushError({
+				title: isReadNext ? "Couldn't mark as read" : "Couldn't mark as unread",
+				detail: formatErrorDetail(err),
+			});
+		},
+		onSettled: (_data, _err, _vars, context) => {
+			if (!context) return;
+			queryClient.invalidateQueries({
+				queryKey: context.threadMessagesPrefix,
+			});
+			queryClient.invalidateQueries({ queryKey: context.threadsListPrefix });
+			queryClient.invalidateQueries({
+				queryKey: context.threadsSearchPrefix,
+			});
+		},
+	});
+
+	// Deselect the thread before the server response arrives if the message
+	// being deleted is the one currently routed to. Mirrors the bulk-delete
+	// flow on the mailbox route — without this, the URL keeps a stale
+	// `selectedMessageId` after the row vanishes from the list.
+	const handleAfterOptimisticRemove = useCallback(
+		(removedIds: string[]) => {
+			if (!selectedMessageId) return;
+			if (!removedIds.includes(selectedMessageId)) return;
+			navigate({
+				to: "/mail/$mailboxId",
+				params: { mailboxId },
+				search: (prev: Record<string, unknown>) => ({
+					...prev,
+					selectedMessageId: undefined,
+				}),
+			});
+		},
+		[selectedMessageId, mailboxId, navigate],
+	);
+
+	const { deleteMessages, isPending: isDeleting } = useDeleteMessages({
+		mailboxId,
+		threadId,
+		onAfterOptimisticRemove: handleAfterOptimisticRemove,
+	});
+
+	const { moveMessages, isPending: isMoving } = useMoveMessages({
+		mailboxId,
+		threadId,
+		accountId,
+		onAfterOptimisticRemove: handleAfterOptimisticRemove,
+	});
+
+	const {
+		toggleTrusted,
+		isPending: isUpdatingTrusted,
+		error: trustedError,
+		reset: resetTrustedError,
+	} = useToggleTrusted({ messageId });
+
+	const handleMarkAsUnread = () => {
+		updateFlags({
+			body: {
+				messageIds: [messageId],
+				isRead: false,
+			},
+		});
+	};
+
+	const handleDelete = () => {
+		deleteMessages([messageId]);
+	};
+
+	const handleToggleTrusted = () => {
+		if (!fromAddressId) return;
+		toggleTrusted(fromAddressId, isTrusted);
+	};
+
+	const isDisabled =
+		isUpdatingFlags || isDeleting || isMoving || isUpdatingTrusted;
+	const trustedItemDisabled = isDisabled || !fromAddressId;
+
+	const handleMove = useCallback(
+		(destinationMailboxId: string) => {
+			moveMessages([messageId], destinationMailboxId);
+		},
+		[moveMessages, messageId],
+	);
+	const trustedItemTitle = !fromAddressId
+		? "Sender has no parseable address"
+		: undefined;
+
+	return (
+		<div className="flex flex-col items-end gap-1">
+			<div className="flex items-center gap-1">
+				{accountId && (
+					<MoveToTrigger
+						accountId={accountId}
+						currentMailboxId={mailboxId}
+						onMove={handleMove}
+						disabled={isDisabled}
+						label="Move this message"
+					/>
+				)}
+				<DropdownMenu trigger={<MoreVertical className="size-4" />}>
+					<DropdownMenuItem
+						onClick={handleToggleTrusted}
+						disabled={trustedItemDisabled}
+					>
+						{isTrusted ? (
+							<BadgeCheck className="size-4 text-positive" />
+						) : (
+							<Check className="size-4 opacity-0" />
+						)}
+						<span title={trustedItemTitle}>Trusted sender</span>
+					</DropdownMenuItem>
+					{isRead && (
+						<DropdownMenuItem
+							onClick={handleMarkAsUnread}
+							disabled={isDisabled}
+						>
+							<MailOpen className="size-4" />
+							Mark as unread
+						</DropdownMenuItem>
+					)}
+					{onToggleRaw && (
+						<DropdownMenuItem onClick={onToggleRaw}>
+							<Code className="size-4" />
+							{showRaw ? "Show formatted" : "Show raw email"}
+						</DropdownMenuItem>
+					)}
+					<DropdownMenuSeparator />
+					<DropdownMenuItem
+						onClick={handleDelete}
+						disabled={isDisabled}
+						destructive
+					>
+						<Trash2 className="size-4" />
+						Delete
+					</DropdownMenuItem>
+				</DropdownMenu>
+			</div>
+			{trustedError && (
+				<div className="w-64">
+					<ErrorState
+						variant="inline"
+						title="Couldn't update trust"
+						error={trustedError}
+						onRetry={() => {
+							resetTrustedError();
+							handleToggleTrusted();
+						}}
+					/>
+				</div>
+			)}
+		</div>
+	);
+};

package/src/components/mail/MessageBody.tsx

@@ -0,0 +1,207 @@
+import {
+	buildCidResolver,
+	type CidResolver,
+	type EmailRenderCategory,
+	MessageBodyView,
+} from "@remit/ui";
+import { useMemo, useState } from "react";
+import { useIsDark } from "@/hooks/useIsDark";
+import { useMessageBodyContent } from "@/hooks/useMessageBodyContent";
+import { useToggleTrusted } from "@/hooks/useToggleTrusted";
+import { cn } from "@/lib/utils";
+import { BlockedImagesNotice } from "./BlockedImagesNotice";
+import { MessageBodyErrorBanner } from "./MessageBodyErrorBanner";
+
+/**
+ * Subset of the OpenAPI `BodyPartResponse` consumed by this component for
+ * inline-image / attachment URL resolution and the body fetcher. Pinning a
+ * structural subset avoids a hard import on the generated types so this file
+ * compiles before `make` runs in fresh checkouts.
+ */
+export interface MessageBodyPart {
+	bodyPartId: string;
+	mediaType: string;
+	mediaSubtype: string;
+	contentId?: string;
+	contentUrl: string;
+	disposition?: string;
+	dispositionFilename?: string;
+	isMultipart: boolean;
+}
+
+interface MessageBodyProps {
+	/**
+	 * Body parts from `describeMessage`. The component picks the first
+	 * `text/html` part (fallback `text/plain`) and fetches its `contentUrl`
+	 * from CloudFront. `cid:CONTENT_ID` references in HTML resolve to other
+	 * parts' `contentUrl` via the same list (#224 PR 3).
+	 */
+	bodyParts?: readonly MessageBodyPart[];
+	/**
+	 * Local-render fallback for callers that don't have BodyParts (Outbox
+	 * drafts, Compose preview). When `bodyParts` is provided, these are
+	 * ignored — the component fetches via CloudFront instead.
+	 */
+	html?: string;
+	text?: string;
+	/**
+	 * Whether the From-address has the `trusted` flag set. Trusted senders
+	 * auto-load images. The "Load images" bar is suppressed entirely for
+	 * trusted senders.
+	 */
+	isTrusted?: boolean;
+	/**
+	 * The current message id. Required for the body-content query cache key
+	 * and by `useToggleTrusted` for the optimistic cache patch.
+	 */
+	messageId?: string;
+	/**
+	 * The From-address `addressId`. When omitted (e.g. the envelope has no
+	 * parseable From) the "Always trust" button is hidden.
+	 */
+	fromAddressId?: string;
+	/**
+	 * Message category (personal/newsletter/marketing/…). Together with
+	 * `hasAuthorBackground` this determines whether to apply the framed
+	 * newsletter treatment or the plain-email normalization CSS.
+	 */
+	category?: EmailRenderCategory;
+	/**
+	 * Extra classes for the `.message-body` wrapper. The single-message
+	 * reading view (`MessageDetail`) passes `px-4` here so the body shares
+	 * the header's horizontal inset (#729). `MessageCard` provides its own
+	 * `px-5` inset via the surrounding card and leaves this unset.
+	 */
+	className?: string;
+}
+
+const LoadingSkeleton = () => (
+	// biome-ignore lint/a11y/useSemanticElements: <div> with role="status" preserves block layout; <output> is inline
+	<div
+		className="animate-pulse space-y-2"
+		role="status"
+		aria-label="Loading message body"
+	>
+		<div className="h-4 bg-surface-sunken rounded w-full" />
+		<div className="h-4 bg-surface-sunken rounded w-11/12" />
+		<div className="h-4 bg-surface-sunken rounded w-3/4" />
+		<div className="h-4 bg-surface-sunken rounded w-5/6" />
+	</div>
+);
+
+const EmptyBody = () => (
+	<p className="text-fg-muted text-sm italic">
+		This message has no body content.
+	</p>
+);
+
+export const MessageBody = ({
+	bodyParts,
+	html,
+	text,
+	isTrusted = false,
+	messageId,
+	fromAddressId,
+	category,
+	className,
+}: MessageBodyProps) => {
+	const [allowImagesOnce, setAllowImagesOnce] = useState(false);
+	const allowImages = isTrusted || allowImagesOnce;
+	const isDark = useIsDark();
+	// `useToggleTrusted` surfaces its own failure (banner + rollback) and a fatal
+	// 5xx escalates globally — no consumer-side error effect needed here.
+	const { toggleTrusted, isPending: isTrustPending } = useToggleTrusted({
+		messageId: messageId ?? "",
+	});
+
+	const hasParts = !!bodyParts && bodyParts.length > 0;
+	const {
+		picked,
+		data: fetched,
+		isLoading: isBodyLoading,
+		isError: isBodyError,
+		error: bodyError,
+		refetch: refetchBody,
+	} = useMessageBodyContent({
+		messageId,
+		bodyParts,
+		enabled: hasParts,
+	});
+
+	const resolveCid: CidResolver = useMemo(
+		() => buildCidResolver(bodyParts ?? []),
+		[bodyParts],
+	);
+
+	const renderedHtml =
+		hasParts && fetched?.kind === "html" ? fetched.body : html;
+	const renderedText =
+		hasParts && fetched?.kind === "text" ? fetched.body : text;
+
+	if (hasParts) {
+		if (isBodyLoading) {
+			return (
+				<div className={cn("message-body", className)}>
+					<LoadingSkeleton />
+				</div>
+			);
+		}
+		if (isBodyError) {
+			return (
+				<div className={cn("message-body", className)}>
+					<MessageBodyErrorBanner
+						error={bodyError}
+						onRetry={() => refetchBody()}
+					/>
+				</div>
+			);
+		}
+		if (!picked) {
+			return (
+				<div className={cn("message-body", className)}>
+					<EmptyBody />
+				</div>
+			);
+		}
+	} else if (!html && !text) {
+		return (
+			<div className={cn("message-body", className)}>
+				<EmptyBody />
+			</div>
+		);
+	}
+
+	const canAlwaysTrust = Boolean(fromAddressId && messageId);
+	const handleAlwaysTrust = () => {
+		if (!fromAddressId || isTrustPending) return;
+		setAllowImagesOnce(true);
+		toggleTrusted(fromAddressId, false);
+	};
+
+	// The sanitize → classify → sandboxed-iframe rendering lives in the kit's
+	// `MessageBodyView` (the single source of truth, shared with Storybook's
+	// reading panes — #940). This component keeps the data orchestration:
+	// bodyParts → html/text, the allow-images-once trust state, and the
+	// privacy "images blocked" bar (it touches app trust state, so it stays
+	// here and is injected via `renderBlockedNotice`).
+	return (
+		<MessageBodyView
+			className={className}
+			html={renderedHtml}
+			text={renderedText}
+			isDark={isDark}
+			category={category}
+			allowImages={allowImages}
+			resolveCid={resolveCid}
+			renderBlockedNotice={(blockedImageCount) => (
+				<BlockedImagesNotice
+					blockedImageCount={blockedImageCount}
+					canAlwaysTrust={canAlwaysTrust}
+					isTrustPending={isTrustPending}
+					onLoadOnce={() => setAllowImagesOnce(true)}
+					onAlwaysTrust={handleAlwaysTrust}
+				/>
+			)}
+		/>
+	);
+};

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

@@ -0,0 +1,85 @@
+/**
+ * React-render smoke test for `MessageBodyErrorBanner`. Pure helpers are
+ * covered by `MessageBodyErrorBanner.test.ts`; this file proves the component
+ * itself renders without crashing in the two surfaces that matter:
+ *
+ *  1. local-dev (no Cognito, no `Authenticator.Provider` in scope) — the
+ *     previous version of this component called `useAuthenticator` at the
+ *     top of render, which throws `USE_AUTHENTICATOR_ERROR` outside the
+ *     provider and would crash the whole MessageBody subtree on the first
+ *     body-fetch failure. The fix gates the hook-using subcomponent behind
+ *     `isCognitoConfigured()`. This test pins that behaviour.
+ *  2. body-missing variant — no sign-in CTA regardless of config, so it
+ *     should also render fine without the provider.
+ *
+ * Uses `react-dom/server`'s `renderToString` so the assertion runs without
+ * pulling in jsdom/happy-dom (no new deps).
+ */
+
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { BodyFetchError } from "@/hooks/useMessageBodyContent";
+import { MessageBodyErrorBanner } from "./MessageBodyErrorBanner";
+
+const renderBanner = (error: unknown, onRetry?: () => void): string =>
+	renderToString(
+		createElement(MessageBodyErrorBanner, { error, onRetry }) as never,
+	);
+
+/**
+ * The sign-in CTA is rendered as a `<button>` whose text is "Sign in again".
+ * The string "Sign in again" also appears as the prefix of the auth-variant
+ * detail copy, so the assertion must look for the BUTTON tag specifically,
+ * not the bare substring.
+ */
+const hasSignInButton = (html: string): boolean =>
+	/<button\b[^>]*>Sign in again<\/button>/.test(html);
+
+describe("MessageBodyErrorBanner renders without an Authenticator.Provider in scope (#401 review)", () => {
+	it("renders the body-missing variant without throwing — local-dev / production both reach this branch", () => {
+		const html = renderBanner(
+			new BodyFetchError("body-missing", "missing", 403),
+		);
+		assert.match(html, /Message body is missing in storage/);
+		assert.match(html, /data-reason="body-missing"/);
+		assert.equal(
+			hasSignInButton(html),
+			false,
+			"sign-in CTA must not appear for body-missing — only the auth variant",
+		);
+	});
+
+	it("renders the auth variant in local-dev WITHOUT mounting the sign-in CTA — `useAuthenticator` would throw outside `Authenticator.Provider` and crash the subtree", () => {
+		// Default test env: `globalThis.__REMIT_CONFIG__` is unset, so
+		// `isCognitoConfigured()` returns false — same shape as `AuthShell`
+		// running without the provider. If `MessageBodyErrorBanner` calls
+		// `useAuthenticator` unconditionally again, this `renderToString`
+		// call throws.
+		const html = renderBanner(
+			new BodyFetchError("auth", "Invalid id_token", 401),
+		);
+		assert.match(html, /Your session expired/);
+		assert.match(html, /data-reason="auth"/);
+		assert.equal(
+			hasSignInButton(html),
+			false,
+			"sign-in CTA must be suppressed when Cognito is not configured (no Authenticator.Provider in the tree) — pre-fix regression: the button rendered and `useAuthenticator` crashed at render",
+		);
+	});
+
+	it("renders the generic variant for unknown errors without crashing", () => {
+		const html = renderBanner(new Error("network down"));
+		assert.match(html, /Couldn.+t load message body/);
+		assert.match(html, /network down/);
+	});
+
+	it("renders a Retry button when onRetry is supplied (every variant)", () => {
+		const html = renderBanner(
+			new BodyFetchError("body-missing", "missing", 403),
+			() => undefined,
+		);
+		assert.match(html, /<button\b[^>]*>Retry<\/button>/);
+	});
+});