@remit/web-client 0.0.1

package/src/components/mail/SelectionToolbar.tsx

@@ -0,0 +1,139 @@
+import { Loader2, MailOpen, Sparkles, Trash2, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { MoveToTrigger } from "./MoveToTrigger";
+
+interface SelectionToolbarProps {
+	selectedCount: number;
+	onDelete: () => void;
+	onClearSelection: () => void;
+	onMarkAsRead?: () => void;
+	onMove?: (destinationMailboxId: string) => void;
+	/**
+	 * Open the smart-organize flow for the current selection. Rendered only
+	 * when a single-account move target is resolvable (same guard as Move) —
+	 * organize is account-scoped.
+	 */
+	onOrganize?: () => void;
+	isDeleting?: boolean;
+	/**
+	 * True while a move mutation is in flight. Action buttons no-op while
+	 * busy — never disabled.
+	 */
+	isMoving?: boolean;
+	/**
+	 * Owning account for the current mailbox view. Required to scope the
+	 * Move-to-folder picker. The Move button only renders when both
+	 * `onMove` and `accountId` are present.
+	 */
+	accountId?: string;
+	currentMailboxId?: string;
+	/**
+	 * When the user's selection spans multiple accounts the toolbar
+	 * disables Move and surfaces this hint inline next to the button.
+	 * Move only works within one account.
+	 */
+	moveDisabledHint?: string;
+}
+
+export const SelectionToolbar = ({
+	selectedCount,
+	onDelete,
+	onClearSelection,
+	onMarkAsRead,
+	onMove,
+	onOrganize,
+	isDeleting = false,
+	isMoving = false,
+	accountId,
+	currentMailboxId,
+	moveDisabledHint,
+}: SelectionToolbarProps) => {
+	const isBusy = isDeleting || isMoving;
+	if (selectedCount === 0) return null;
+
+	const canShowMove = !!onMove && !!accountId && !!currentMailboxId;
+	const canShowOrganize =
+		!!onOrganize && !!accountId && !!currentMailboxId && !moveDisabledHint;
+
+	return (
+		<div className="sticky top-0 z-10 flex items-center justify-between px-3 py-2 bg-surface-sunken border-b border-line">
+			<div className="flex items-center gap-3">
+				<button
+					type="button"
+					onClick={onClearSelection}
+					className="min-h-11 min-w-11 inline-flex items-center justify-center rounded hover:bg-surface-raised transition-colors"
+					aria-label="Clear selection"
+				>
+					<X className="size-4 text-fg-muted" />
+				</button>
+				<span className="text-sm font-medium">
+					{selectedCount} {selectedCount === 1 ? "message" : "messages"}{" "}
+					selected
+				</span>
+				{moveDisabledHint && (
+					// biome-ignore lint/a11y/useSemanticElements: <span> with role="status" keeps inline layout; <output> would shift flow
+					<span
+						className="text-xs text-fg-muted"
+						role="status"
+						aria-live="polite"
+					>
+						{moveDisabledHint}
+					</span>
+				)}
+			</div>
+			<div className="flex items-center gap-1">
+				{canShowOrganize && onOrganize && (
+					<button
+						type="button"
+						onClick={isBusy ? undefined : onOrganize}
+						className="min-h-11 inline-flex items-center justify-center gap-1.5 px-3 rounded text-sm font-medium transition-colors hover:bg-surface-raised"
+						aria-label="Organize similar messages"
+					>
+						<Sparkles className="size-4" />
+						<span className="hidden sm:inline">Organize</span>
+					</button>
+				)}
+				{onMarkAsRead && (
+					<button
+						type="button"
+						onClick={isBusy ? undefined : onMarkAsRead}
+						className="min-h-11 min-w-11 inline-flex items-center justify-center rounded text-sm font-medium transition-colors hover:bg-surface-raised"
+						aria-label="Mark as read"
+						aria-busy={isBusy}
+					>
+						<MailOpen className="size-4" />
+					</button>
+				)}
+				{canShowMove && onMove && accountId && currentMailboxId && (
+					<MoveToTrigger
+						accountId={accountId}
+						currentMailboxId={currentMailboxId}
+						onMove={isBusy ? () => {} : onMove}
+						disabledHint={moveDisabledHint}
+						variant="icon-only"
+						label="Move selected messages"
+					/>
+				)}
+				<button
+					type="button"
+					onClick={isBusy ? undefined : onDelete}
+					className={cn(
+						"min-h-11 min-w-11 inline-flex items-center justify-center gap-1.5 px-3 rounded text-sm font-medium transition-colors",
+						"bg-danger text-canvas hover:bg-danger/90",
+					)}
+					aria-label="Delete selected messages"
+					aria-busy={isDeleting}
+				>
+					{isDeleting ? (
+						<Loader2 className="size-4 animate-spin" />
+					) : (
+						<Trash2 className="size-4" />
+					)}
+					<span className="hidden sm:inline">
+						{isDeleting ? "Deleting..." : "Delete"}
+					</span>
+				</button>
+			</div>
+		</div>
+	);
+};

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

@@ -0,0 +1,35 @@
+/**
+ * The rescue banner is rendered by SpamRescue above the spam list. These tests
+ * cover the banner's rendering with a count sourced from the backend (via
+ * useRescueCandidates), exercising the component's output in isolation without
+ * app providers.
+ */
+
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { RescueBanner } from "@remit/ui";
+import React, { createElement } from "react";
+import { renderToString } from "react-dom/server";
+
+(globalThis as { React?: typeof React }).React = React;
+
+const noop = () => {};
+
+const renderBanner = (count: number): string =>
+	renderToString(createElement(RescueBanner, { count, onReview: noop }));
+
+describe("RescueBanner rendering", () => {
+	it("shows the candidate count for multiple messages", () => {
+		const html = renderBanner(2);
+		assert.match(html, /2 messages here/);
+	});
+
+	it("shows singular phrasing for a single message", () => {
+		const html = renderBanner(1);
+		assert.ok(html.includes("1"), "count should appear");
+	});
+
+	it("renders without throwing for zero count", () => {
+		assert.doesNotThrow(() => renderBanner(0));
+	});
+});

package/src/components/mail/SpamRescue.tsx

@@ -0,0 +1,138 @@
+import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import {
+	type MoveMailboxOption,
+	RescueBanner,
+	type RescueCandidate,
+	RescueFromSpamFlow,
+} from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import {
+	type ReactNode,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import { useTranslation } from "react-i18next";
+import {
+	useFolderAppointments,
+	useInboxMailbox,
+} from "@/hooks/useArchiveMailbox";
+import { buildMailboxRoleMap, labelForMailbox } from "@/lib/folder-roles";
+import { buildMoveTargets } from "@/lib/move-targets";
+import {
+	recordRescueCandidatesSurfaced,
+	recordRescueCommitted,
+	recordRescueFlowOpened,
+} from "@/lib/rescue-telemetry";
+import { useTelemetry } from "@/lib/telemetry-context";
+
+interface SpamRescueProps {
+	accountId: string;
+	currentMailboxId: string;
+	candidates: RescueCandidate[];
+	onMove: (messageIds: string[], destinationId: string) => void;
+	children: ReactNode;
+}
+
+/**
+ * Wraps the Spam folder list with the Rescue-from-Spam call-to-action and flow.
+ * Renders the banner above the list and the review sheet over it; the kit flow
+ * stays presentational, this component supplies the real folders, destination
+ * and move. Only mount it on the Spam folder when candidates exist.
+ */
+export function SpamRescue({
+	accountId,
+	currentMailboxId,
+	candidates,
+	onMove,
+	children,
+}: SpamRescueProps) {
+	const [open, setOpen] = useState(false);
+	const telemetry = useTelemetry();
+	const { t } = useTranslation("mail", { useSuspense: false });
+	const translator = useCallback(
+		(key: string, fallback: string): string =>
+			t(key, { defaultValue: fallback }),
+		[t],
+	);
+
+	const { inboxMailboxId } = useInboxMailbox(accountId);
+	const folderAppointments = useFolderAppointments(accountId);
+
+	const { data: mailboxesResponse } = useQuery({
+		...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
+		staleTime: Infinity,
+	});
+
+	const folders = useMemo<MoveMailboxOption[]>(() => {
+		const targets = buildMoveTargets(
+			mailboxesResponse?.items ?? [],
+			folderAppointments,
+		);
+		const roleMap = buildMailboxRoleMap(folderAppointments);
+		return targets.map((mailbox) => ({
+			id: mailbox.mailboxId,
+			label: labelForMailbox(
+				mailbox,
+				roleMap.get(mailbox.mailboxId),
+				translator,
+			),
+			searchValue: mailbox.fullPath,
+			isCurrent: mailbox.mailboxId === currentMailboxId,
+		}));
+	}, [
+		mailboxesResponse?.items,
+		folderAppointments,
+		currentMailboxId,
+		translator,
+	]);
+
+	const defaultDestinationId = useMemo(() => {
+		if (inboxMailboxId) return inboxMailboxId;
+		const inbox = folders.find((f) => f.label.toLowerCase() === "inbox");
+		return inbox?.id ?? folders.find((f) => !f.isCurrent)?.id ?? "";
+	}, [inboxMailboxId, folders]);
+
+	const surfacedRef = useRef(false);
+	useEffect(() => {
+		if (surfacedRef.current) return;
+		surfacedRef.current = true;
+		recordRescueCandidatesSurfaced(telemetry, candidates.length);
+	}, [telemetry, candidates.length]);
+
+	const handleReview = useCallback(() => {
+		recordRescueFlowOpened(telemetry, candidates.length);
+		setOpen(true);
+	}, [telemetry, candidates.length]);
+
+	const handleConfirmMove = useCallback(
+		(messageIds: string[], destinationId: string) => {
+			recordRescueCommitted(telemetry, {
+				selected: messageIds.length,
+				total: candidates.length,
+				toInbox: destinationId === inboxMailboxId,
+			});
+			onMove(messageIds, destinationId);
+		},
+		[telemetry, candidates.length, inboxMailboxId, onMove],
+	);
+
+	return (
+		<div className="relative flex h-full min-h-0 flex-col">
+			<div className="shrink-0 px-row-inset pt-2">
+				<RescueBanner count={candidates.length} onReview={handleReview} />
+			</div>
+			<div className="min-h-0 flex-1">{children}</div>
+			<RescueFromSpamFlow
+				open={open}
+				candidates={candidates}
+				defaultDestinationId={defaultDestinationId}
+				availableFolders={folders}
+				onConfirmMove={handleConfirmMove}
+				onCancel={() => setOpen(false)}
+			/>
+		</div>
+	);
+}

package/src/components/mail/SwipeableMessageRow.tsx

@@ -0,0 +1,148 @@
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import {
+	type Density,
+	SwipeableRow,
+	type SwipePeek,
+	type ThreadRowData,
+} from "@remit/ui";
+import { Link } from "@tanstack/react-router";
+import { useCallback, useState } from "react";
+import type { SelectionModifiers } from "@/hooks/useSelection";
+import { toDisplayCategory } from "@/lib/display-category";
+import { formatEmailDate } from "@/lib/format";
+import { MessageListItem } from "./MessageListItem";
+
+interface MailboxLinkSearch {
+	selectedMessageId?: string;
+	q?: string;
+}
+
+interface SwipeableMessageRowProps {
+	thread: RemitImapThreadMessageResponse;
+	mailboxId: string;
+	/** Owning account, forwarded to `MessageListItem` for the auto-moved badge's undo action. */
+	accountId?: string;
+	isSelected: boolean;
+	/** Roving keyboard focus cursor — renders the left accent rail (#429). */
+	isFocused?: boolean;
+	isChecked: boolean;
+	onToggleCheck: (id: string) => void;
+	onRowSelect: (messageId: string, modifiers: SelectionModifiers) => boolean;
+	isMultiSelectMode: boolean;
+	onLongPress: (messageId: string) => void;
+	isDesktop: boolean;
+	onDelete: (messageId: string) => void;
+	onToggleRead: (messageId: string, currentIsRead: boolean) => void;
+	density?: Density;
+}
+
+const toThreadRowData = (
+	thread: RemitImapThreadMessageResponse,
+): ThreadRowData => {
+	const suspicious = thread.authenticity?.dkimMismatch === true;
+	return {
+		id: thread.messageId,
+		accountId: thread.accountConfigId,
+		fromName: thread.fromName ?? thread.fromEmail ?? "Unknown",
+		fromEmail: thread.fromEmail ?? "",
+		subject: thread.subject ?? "(No subject)",
+		snippet: thread.snippet ?? "",
+		timeLabel: formatEmailDate(thread.sentDate),
+		isRead: thread.isRead,
+		hasAttachment: thread.hasAttachment,
+		starred:
+			thread.star != null && thread.star !== "none" && thread.hasStars === true,
+		trust: thread.senderTrust,
+		category: toDisplayCategory(thread.category),
+		suspicious,
+	};
+};
+
+export const SwipeableMessageRow = ({
+	thread,
+	mailboxId,
+	accountId,
+	isSelected,
+	isFocused,
+	isChecked,
+	onToggleCheck,
+	onRowSelect,
+	isMultiSelectMode,
+	onLongPress,
+	isDesktop,
+	onDelete,
+	onToggleRead,
+	density,
+}: SwipeableMessageRowProps) => {
+	const [peek, setPeek] = useState<SwipePeek>("none");
+
+	const handleAct = useCallback(
+		(side: "leading" | "trailing") => {
+			navigator.vibrate?.(10);
+			if (side === "trailing") {
+				onDelete(thread.messageId);
+			} else {
+				onToggleRead(thread.messageId, thread.isRead);
+			}
+			setPeek("none");
+		},
+		[onDelete, onToggleRead, thread.messageId, thread.isRead],
+	);
+
+	const handleLongPress = useCallback(() => {
+		onLongPress(thread.messageId);
+	}, [onLongPress, thread.messageId]);
+
+	const handleToggleCheck = useCallback(() => {
+		onToggleCheck(thread.messageId);
+	}, [onToggleCheck, thread.messageId]);
+
+	if (isDesktop || isMultiSelectMode) {
+		return (
+			<MessageListItem
+				thread={thread}
+				mailboxId={mailboxId}
+				accountId={accountId}
+				isSelected={isSelected}
+				isFocused={isFocused}
+				isChecked={isChecked}
+				onToggleCheck={onToggleCheck}
+				onRowSelect={onRowSelect}
+				isMultiSelectMode={isMultiSelectMode}
+				onLongPress={onLongPress}
+				isDesktop={isDesktop}
+				density={density}
+			/>
+		);
+	}
+
+	return (
+		<SwipeableRow
+			thread={toThreadRowData(thread)}
+			selectionMode={false}
+			checked={false}
+			active={isSelected}
+			peek={peek}
+			onPeek={setPeek}
+			onToggleCheck={handleToggleCheck}
+			onLongPress={handleLongPress}
+			onOpen={() => undefined}
+			onAct={handleAct}
+			linkComponent={({ onOpenClick, children, ...rowProps }) => (
+				<Link
+					{...rowProps}
+					to="/mail/$mailboxId"
+					params={{ mailboxId }}
+					search={(prev: MailboxLinkSearch) => ({
+						...prev,
+						selectedMessageId: thread.messageId,
+					})}
+					data-message-row
+					onClick={onOpenClick}
+				>
+					{children}
+				</Link>
+			)}
+		/>
+	);
+};

package/src/components/mail/message-body-error-banner-content.ts

@@ -0,0 +1,87 @@
+import {
+	BodyFetchError,
+	type BodyFetchReason,
+} from "@/hooks/useMessageBodyContent";
+
+export interface BannerContent {
+	title: string;
+	detail: string;
+}
+
+/**
+ * Pure helpers for `MessageBodyErrorBanner`. Extracted so they can be
+ * unit-tested with the Node test runner without importing React /
+ * @aws-amplify/ui-react / lucide-react. The banner component composes these
+ * with the React surface.
+ *
+ * The variant copy lives here so a glance at one file shows every banner
+ * variant the SPA can render — issue #401 / postmortem #394.
+ */
+
+/**
+ * Map a `BodyFetchReason` to user-facing banner copy.
+ *
+ * - `auth` — Lambda@Edge denied the JWT (missing/invalid/expired) or the
+ *            tenant didn't match. The user needs to sign in again.
+ * - `body-missing` — CloudFront/S3 returned 403/404 without the edge reason
+ *            header. The OAC bucket policy only grants `s3:GetObject` so a
+ *            missing object surfaces as 403. Either an in-flight sync failure
+ *            left the message stuck, or the body part was never written.
+ * - `content-type-mismatch` / `spa-shell-leak` — defensive guards; the user
+ *            sees a safer "couldn't load" message and is asked to report it.
+ * - `generic` — anything else; surfaces the underlying error message so the
+ *            user has something to attach to a support ticket.
+ */
+export const contentForReason = (
+	reason: BodyFetchReason,
+	fallback: string,
+): BannerContent => {
+	switch (reason) {
+		case "auth":
+			return {
+				title: "Your session expired",
+				detail:
+					"Sign in again to reload the message body. Other parts of the app may also stop responding until you do.",
+			};
+		case "body-missing":
+			return {
+				title: "Message body is missing in storage",
+				detail:
+					"A sync failure may have left this message without its body bytes. Contact support, or run the reconcile script to refetch from the upstream IMAP server.",
+			};
+		case "content-type-mismatch":
+			return {
+				title: "Couldn't load message body",
+				detail:
+					"The server returned an unexpected content type for this part. The message body has not been rendered to keep you safe.",
+			};
+		case "spa-shell-leak":
+			return {
+				title: "Couldn't load message body",
+				detail:
+					"The server returned the app shell instead of the message body. This is an infrastructure bug — please report it.",
+			};
+		case "not-ready":
+			return {
+				title: "Message body is still syncing",
+				detail:
+					"This message's body hasn't finished downloading from the mail server yet. It should appear shortly — reopen the message to try again.",
+			};
+		default:
+			return {
+				title: "Couldn't load message body",
+				detail: fallback,
+			};
+	}
+};
+
+export const extractReason = (error: unknown): BodyFetchReason => {
+	if (error instanceof BodyFetchError) return error.reason;
+	return "generic";
+};
+
+export const extractFallbackDetail = (error: unknown): string => {
+	if (error instanceof Error) return error.message;
+	if (typeof error === "string") return error;
+	return "An unexpected error occurred while loading the message body.";
+};

package/src/components/mail/organize/OrganizeDialog.render.test.ts

@@ -0,0 +1,37 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import React, { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { OrganizeDialog } from "./OrganizeDialog";
+
+// The node test loader transpiles remit-ui's `.tsx` with the classic JSX
+// runtime, which references a global `React`. Vite uses the automatic runtime,
+// so this shim only exists for the SSR test harness.
+(globalThis as { React?: typeof React }).React = React;
+
+const render = (open: boolean) =>
+	renderToString(
+		createElement(
+			QueryClientProvider,
+			{ client: new QueryClient() },
+			createElement(OrganizeDialog, {
+				open,
+				accountId: "acc-1",
+				mailboxId: "mbx-inbox",
+				selectedMessageIds: ["msg-1", "msg-2"],
+				onClose: () => undefined,
+			}),
+		) as never,
+	);
+
+describe("OrganizeDialog", () => {
+	it("renders nothing when closed", () => {
+		assert.equal(render(false), "");
+	});
+
+	it("shows the widen step while the preview is in flight", () => {
+		const html = render(true);
+		assert.match(html, /Finding similar messages/);
+	});
+});

package/src/components/mail/organize/OrganizeDialog.tsx

@@ -0,0 +1,83 @@
+import { Button, Dialog } from "@remit/ui";
+import { Loader2 } from "lucide-react";
+import { useEffect } from "react";
+import { useOrganizePreview } from "@/hooks/useOrganizePreview";
+import { OrganizePanel } from "./OrganizePanel";
+
+interface OrganizeDialogProps {
+	open: boolean;
+	accountId: string;
+	mailboxId: string;
+	selectedMessageIds: string[];
+	onClose: () => void;
+}
+
+/**
+ * Smart-organize flow entered from the selection toolbar. Widens the selection
+ * to similar mail once (POST /organize/preview), then lets the user commit the
+ * organize sentence at one of four scopes (RFC 034). The widen is the only
+ * corpus-wide query; everything after acts on that result.
+ */
+export function OrganizeDialog({
+	open,
+	accountId,
+	mailboxId,
+	selectedMessageIds,
+	onClose,
+}: OrganizeDialogProps) {
+	const anchorMessageId = selectedMessageIds[0];
+	const { preview, reset, matchedCount, isPending, isError, error } =
+		useOrganizePreview(accountId);
+
+	useEffect(() => {
+		if (!open || !anchorMessageId) return;
+		preview({
+			anchorMessageId,
+			matchOperator: "And",
+			literalClauses: [],
+		});
+	}, [open, anchorMessageId, preview]);
+
+	const handleClose = () => {
+		reset();
+		onClose();
+	};
+
+	if (!open) return null;
+
+	return (
+		<Dialog open={open} onClose={handleClose} title="Organize similar mail">
+			{isPending || matchedCount === undefined ? (
+				isError ? (
+					<div className="flex flex-col items-center gap-3 px-5 py-8 text-center">
+						<p className="text-sm font-medium text-danger">
+							Couldn't find similar messages
+						</p>
+						<p className="max-w-xs text-xs text-fg-muted">
+							{error instanceof Error ? error.message : "Please try again."}
+						</p>
+						<Button variant="ghost" onClick={handleClose} className="mt-2">
+							Close
+						</Button>
+					</div>
+				) : (
+					<div className="flex flex-col items-center gap-3 px-5 py-10 text-center">
+						<Loader2 className="size-8 animate-spin text-accent-2" />
+						<p className="text-sm font-medium text-fg">
+							Finding similar messages…
+						</p>
+					</div>
+				)
+			) : (
+				<OrganizePanel
+					accountId={accountId}
+					mailboxId={mailboxId}
+					selectedMessageIds={selectedMessageIds}
+					anchorMessageId={anchorMessageId}
+					matchedCount={matchedCount}
+					onClose={handleClose}
+				/>
+			)}
+		</Dialog>
+	);
+}