@remit/web-client 0.0.1

package/src/components/compose/PlateToolbar.tsx

@@ -0,0 +1,110 @@
+import {
+	BlockquotePlugin,
+	BoldPlugin,
+	ItalicPlugin,
+} from "@platejs/basic-nodes/react";
+import { insertLink } from "@platejs/link";
+import { Bold, Italic, Link, Quote, Redo2, Undo2 } from "lucide-react";
+import { useEditorRef, useEditorSelector } from "platejs/react";
+
+const ToolbarButton = ({
+	isActive,
+	onClick,
+	children,
+	title,
+}: {
+	isActive: boolean;
+	onClick: () => void;
+	children: React.ReactNode;
+	title: string;
+}) => (
+	<button
+		type="button"
+		onMouseDown={(e) => {
+			e.preventDefault();
+			onClick();
+		}}
+		title={title}
+		className={`p-1.5 rounded transition-colors ${
+			isActive
+				? "text-fg bg-accent-2-soft"
+				: "text-fg-muted hover:text-fg hover:bg-surface-raised"
+		}`}
+	>
+		{children}
+	</button>
+);
+
+export const PlateToolbar = () => {
+	const editor = useEditorRef();
+
+	const isBoldActive = useEditorSelector(
+		(editor) => !!editor.api.mark(BoldPlugin.key),
+		[],
+	);
+	const isItalicActive = useEditorSelector(
+		(editor) => !!editor.api.mark(ItalicPlugin.key),
+		[],
+	);
+	const isBlockquoteActive = useEditorSelector((editor) => {
+		const entry = editor.api.block();
+		return entry ? entry[0].type === BlockquotePlugin.key : false;
+	}, []);
+
+	const canUndo = useEditorSelector(
+		(editor) => editor.history.undos.length > 0,
+		[],
+	);
+	const canRedo = useEditorSelector(
+		(editor) => editor.history.redos.length > 0,
+		[],
+	);
+
+	return (
+		<div className="flex items-center gap-0.5 px-3 py-1 border-b border-line">
+			<ToolbarButton
+				isActive={isBoldActive}
+				onClick={() => editor.tf.toggleMark(BoldPlugin.key)}
+				title="Bold (Ctrl+B)"
+			>
+				<Bold className="size-4" />
+			</ToolbarButton>
+			<ToolbarButton
+				isActive={isItalicActive}
+				onClick={() => editor.tf.toggleMark(ItalicPlugin.key)}
+				title="Italic (Ctrl+I)"
+			>
+				<Italic className="size-4" />
+			</ToolbarButton>
+			<ToolbarButton
+				isActive={false}
+				onClick={() => insertLink(editor, { url: "" })}
+				title="Link (Ctrl+K)"
+			>
+				<Link className="size-4" />
+			</ToolbarButton>
+			<ToolbarButton
+				isActive={isBlockquoteActive}
+				onClick={() => editor.tf.toggleBlock(BlockquotePlugin.key)}
+				title="Blockquote"
+			>
+				<Quote className="size-4" />
+			</ToolbarButton>
+			<div className="mx-1.5 h-4 w-px bg-line" />
+			<ToolbarButton
+				isActive={false}
+				onClick={() => editor.undo()}
+				title="Undo (Ctrl+Z)"
+			>
+				<Undo2 className={`size-4 ${!canUndo ? "opacity-40" : ""}`} />
+			</ToolbarButton>
+			<ToolbarButton
+				isActive={false}
+				onClick={() => editor.redo()}
+				title="Redo (Ctrl+Y)"
+			>
+				<Redo2 className={`size-4 ${!canRedo ? "opacity-40" : ""}`} />
+			</ToolbarButton>
+		</div>
+	);
+};

package/src/components/compose/SubjectField.tsx

@@ -0,0 +1,19 @@
+interface SubjectFieldProps {
+	value: string;
+	onChange: (value: string) => void;
+}
+
+export const SubjectField = ({ value, onChange }: SubjectFieldProps) => (
+	<div className="flex items-start gap-2">
+		{/* biome-ignore lint/a11y/noLabelWithoutControl: label is visually adjacent to the sibling input; static id risks duplicates */}
+		<label className="text-sm text-fg-muted shrink-0 w-12 pt-1.5">Subj:</label>
+		<input
+			type="text"
+			value={value}
+			onChange={(e) => onChange(e.target.value)}
+			className="flex-1 px-2 py-1.5 border rounded-md bg-canvas text-sm"
+			placeholder="Subject"
+			data-subject-field
+		/>
+	</div>
+);

package/src/components/compose/draft-discard-banner.test.ts

@@ -0,0 +1,76 @@
+/**
+ * Draft-discard must surface a banner on a soft failure.
+ *
+ * `ComposeForm.handleDiscard` closes the compose dialog optimistically, then
+ * fires the delete mutation. Before #741 the delete had no `onError`, so a soft
+ * 4xx (409/404 "the draft is already gone") closed the dialog as if it
+ * succeeded — silent discard. The fix adds an `onError` that pushes a banner via
+ * `buildMutationErrorBanner("Couldn't discard draft", …)`, mirroring the
+ * outbox-delete pattern. A fatal 5xx still escalates globally; this pins the
+ * non-fatal branch.
+ *
+ * Exercising the real mutation `onError` headlessly (no DOM) via the same
+ * `MutationCache` wiring `ComposeForm` uses through `QueryClient`.
+ */
+
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { MutationCache, QueryClient } from "@tanstack/react-query";
+import { ApiError } from "../../lib/api.js";
+import {
+	buildMutationErrorBanner,
+	type PushErrorInput,
+} from "../ui/error-banners.js";
+
+describe("draft discard surfaces a banner on a soft failure (#741)", () => {
+	const buildDiscardMutation = (
+		pushError: (input: PushErrorInput) => void,
+		fail: () => Promise<never>,
+	) => {
+		const client = new QueryClient({
+			mutationCache: new MutationCache(),
+		});
+		return client.getMutationCache().build(client, {
+			mutationFn: fail,
+			onError: (error: unknown) => {
+				pushError(
+					buildMutationErrorBanner(
+						"Couldn't discard draft",
+						"The draft wasn't discarded.",
+						error,
+					),
+				);
+			},
+		});
+	};
+
+	it("pushes a 'Couldn't discard draft' banner on a 409 already-gone", async () => {
+		const pushed: PushErrorInput[] = [];
+		const mutation = buildDiscardMutation(
+			(input) => pushed.push(input),
+			async () => {
+				throw new ApiError("Draft already deleted", 409);
+			},
+		);
+
+		await mutation.execute(undefined).catch(() => {});
+
+		assert.equal(pushed.length, 1);
+		assert.equal(pushed[0].title, "Couldn't discard draft");
+		assert.equal(pushed[0].detail, "Draft already deleted");
+	});
+
+	it("falls back to a human detail when the error carries no message", async () => {
+		const pushed: PushErrorInput[] = [];
+		const mutation = buildDiscardMutation(
+			(input) => pushed.push(input),
+			async () => {
+				throw {};
+			},
+		);
+
+		await mutation.execute(undefined).catch(() => {});
+
+		assert.equal(pushed[0].detail, "The draft wasn't discarded.");
+	});
+});

package/src/components/compose/index.ts

@@ -0,0 +1,6 @@
+export { ComposeForm } from "./ComposeForm.js";
+export type { ComposeMode, ComposeState } from "./ComposeProvider.js";
+export { ComposeProvider, useCompose } from "./ComposeProvider.js";
+export { FullCompose } from "./FullCompose.js";
+export { InlineCompose } from "./InlineCompose.js";
+export { MobileComposeSheet } from "./MobileComposeSheet.js";

package/src/components/compose/sanitize-quote-html.ts

@@ -0,0 +1,23 @@
+import DOMPurify from "dompurify";
+
+const QUOTE_ALLOWED_TAGS = [
+	"p",
+	"br",
+	"strong",
+	"b",
+	"em",
+	"i",
+	"a",
+	"blockquote",
+	"ul",
+	"ol",
+	"li",
+];
+
+const QUOTE_ALLOWED_ATTR = ["href"];
+
+export const sanitizeQuoteHtml = (html: string): string =>
+	DOMPurify.sanitize(html, {
+		ALLOWED_TAGS: QUOTE_ALLOWED_TAGS,
+		ALLOWED_ATTR: QUOTE_ALLOWED_ATTR,
+	});

package/src/components/layout/AppShellSkeleton.tsx

@@ -0,0 +1,53 @@
+/**
+ * AppShellSkeleton — structural placeholder shown on cold load.
+ *
+ * Renders the inbox chrome (nav rail + list rows) immediately, before the
+ * auth session hydrates and the config query resolves, so the user sees the
+ * shape of the app instead of a blank screen or a "Loading..." string. The
+ * real list components swap in once their own data arrives.
+ */
+
+const NavRailSkeleton = () => (
+	<div className="hidden h-full w-[17%] min-w-40 max-w-64 shrink-0 flex-col gap-1 border-r border-line p-3 md:flex">
+		<div className="mb-3 h-6 w-24 rounded bg-surface-sunken" />
+		{Array.from({ length: 6 }).map((_, i) => (
+			<div
+				// biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows have no stable id
+				key={i}
+				className="flex items-center gap-2 py-1.5"
+			>
+				<div className="size-5 shrink-0 rounded bg-surface-sunken" />
+				<div className="h-3.5 flex-1 rounded bg-surface-sunken" />
+			</div>
+		))}
+	</div>
+);
+
+const ListRowsSkeleton = () => (
+	<div className="min-w-0 flex-1">
+		{Array.from({ length: 8 }).map((_, i) => (
+			<div
+				// biome-ignore lint/suspicious/noArrayIndexKey: skeleton rows have no stable id
+				key={i}
+				className="flex items-start gap-3 border-b border-line py-2 pl-5 pr-4"
+			>
+				<div className="mt-0.5 size-7 shrink-0 rounded-full bg-surface-sunken" />
+				<div className="flex-1 space-y-1.5">
+					<div className="flex justify-between gap-2">
+						<div className="h-3.5 w-28 rounded bg-surface-sunken" />
+						<div className="h-3 w-12 rounded bg-surface-sunken" />
+					</div>
+					<div className="h-3.5 w-48 rounded bg-surface-sunken" />
+					<div className="h-3 w-full rounded bg-surface-sunken" />
+				</div>
+			</div>
+		))}
+	</div>
+);
+
+export const AppShellSkeleton = () => (
+	<div className="flex h-dvh animate-pulse bg-canvas" aria-hidden="true">
+		<NavRailSkeleton />
+		<ListRowsSkeleton />
+	</div>
+);

package/src/components/layout/ComposeFab.tsx

@@ -0,0 +1,86 @@
+import { useLocation, useNavigate } from "@tanstack/react-router";
+import { Pencil } from "lucide-react";
+import { startTransition } from "react";
+import { useCompose } from "@/components/compose/ComposeProvider";
+
+/**
+ * Returns true when `pathname` is `/mail/<id>` for any id other than
+ * the reserved `outbox` segment. That route owns a `FullCompose` mount
+ * point, so the FAB can open compose in-place. From every other route
+ * the FAB has to send the user there first.
+ */
+const isOnMailboxRoute = (pathname: string): boolean =>
+	/^\/mail\/(?!outbox)[^/?]+/.test(pathname);
+
+/**
+ * Primary mobile surfaces where the FAB belongs: anywhere under
+ * `/mail` or under `/settings`. The bare `/` route (sign-in / OAuth
+ * landing) is intentionally excluded — compose has no useful target
+ * before the user has an account.
+ */
+const isOnPrimaryMobileRoute = (pathname: string): boolean =>
+	pathname.startsWith("/mail") || pathname.startsWith("/settings");
+
+/**
+ * Floating Action Button for composing a new message. Mobile-only.
+ *
+ * Layout follows Material 3: 56×56 surface, 16px from the right and
+ * bottom edges (plus the iOS safe-area inset). Hidden when any of:
+ *   - Viewport is `≥ md` (desktop has compose in the sidebar / etc.).
+ *   - The compose surface is already open.
+ *   - The user is reading a thread (`?selectedMessageId=…`) — the
+ *     conversation's Reply/Forward action bar covers that workflow.
+ *   - The user is not on a primary mobile route (`/mail` or
+ *     `/settings`).
+ *
+ * From routes that don't host a `FullCompose` (everything except
+ * `/mail/<mailboxId>` — i.e. `/mail`, `/mail/outbox`, `/settings/*`)
+ * tapping the FAB opens compose state and navigates to `/mail`, which
+ * the index loader redirects to the preferred mailbox (PR #138). The
+ * compose state survives the route transition because `ComposeProvider`
+ * lives in `__root.tsx`, so the destination route mounts straight into
+ * compose.
+ */
+export const ComposeFab = () => {
+	const { state, openCompose } = useCompose();
+	const location = useLocation();
+	const navigate = useNavigate();
+
+	const search = location.search as Record<string, unknown> | undefined;
+	const isReadingThread =
+		typeof search?.selectedMessageId === "string" &&
+		search.selectedMessageId.length > 0;
+
+	if (
+		!isOnPrimaryMobileRoute(location.pathname) ||
+		state.isOpen ||
+		isReadingThread
+	)
+		return null;
+
+	const handleClick = () => {
+		// Wrap in startTransition so the suspension that ComposeForm
+		// triggers on first mount (lazy chunks, queries) doesn't
+		// snap the surrounding chrome into a route-level fallback.
+		startTransition(() => {
+			openCompose({ mode: "new" });
+		});
+		if (isOnMailboxRoute(location.pathname)) return;
+		navigate({ to: "/mail" });
+	};
+
+	return (
+		<button
+			type="button"
+			onClick={handleClick}
+			aria-label="Compose new message"
+			className="lg:hidden fixed right-4 z-30 h-14 w-14 rounded-full bg-accent text-accent-fg shadow-lg flex items-center justify-center hover:opacity-90 active:scale-95 transition-all"
+			style={{
+				// 16px breathing room above the iOS home-indicator inset.
+				bottom: "calc(env(safe-area-inset-bottom, 0) + 1rem)",
+			}}
+		>
+			<Pencil className="size-6" />
+		</button>
+	);
+};

package/src/components/layout/Drawer.tsx

@@ -0,0 +1,105 @@
+import { X } from "lucide-react";
+import { type ReactNode, useEffect, useRef } from "react";
+import { cn } from "@/lib/utils";
+
+interface DrawerProps {
+	isOpen: boolean;
+	onClose: () => void;
+	children: ReactNode;
+	ariaLabel?: string;
+	side?: "left" | "right";
+	widthClassName?: string;
+}
+
+/**
+ * Modal navigation drawer. Slides in from the side with a scrim behind.
+ * Dismissed by scrim tap, escape key, or the close button. Focus moves into
+ * the drawer on open and returns to the previously focused element on close.
+ */
+export const Drawer = ({
+	isOpen,
+	onClose,
+	children,
+	ariaLabel = "Navigation",
+	side = "left",
+	widthClassName = "w-[80vw] max-w-[320px]",
+}: DrawerProps) => {
+	const drawerRef = useRef<HTMLDivElement>(null);
+	const previouslyFocusedRef = useRef<HTMLElement | null>(null);
+
+	useEffect(() => {
+		if (!isOpen) return;
+
+		previouslyFocusedRef.current = document.activeElement as HTMLElement | null;
+
+		const handleKey = (event: KeyboardEvent) => {
+			if (event.key === "Escape") {
+				event.preventDefault();
+				onClose();
+			}
+		};
+
+		document.addEventListener("keydown", handleKey);
+
+		// Move focus into the drawer
+		const focusable = drawerRef.current?.querySelector<HTMLElement>(
+			"button, [href], input, select, textarea, [tabindex]:not([tabindex='-1'])",
+		);
+		focusable?.focus();
+
+		// Lock body scroll
+		const previousOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+
+		return () => {
+			document.removeEventListener("keydown", handleKey);
+			document.body.style.overflow = previousOverflow;
+			previouslyFocusedRef.current?.focus();
+		};
+	}, [isOpen, onClose]);
+
+	if (!isOpen) return null;
+
+	const sideClasses =
+		side === "left"
+			? "left-0 border-r animate-in slide-in-from-left duration-150"
+			: "right-0 border-l animate-in slide-in-from-right duration-150";
+
+	return (
+		<div
+			className="fixed inset-0 z-50 lg:hidden"
+			role="dialog"
+			aria-modal="true"
+			aria-label={ariaLabel}
+		>
+			{/* Scrim */}
+			<button
+				type="button"
+				aria-label="Close menu"
+				onClick={onClose}
+				className="absolute inset-0 bg-black/40 animate-in fade-in duration-150 cursor-default"
+			/>
+			{/* Drawer panel */}
+			<div
+				ref={drawerRef}
+				className={cn(
+					"absolute top-0 bottom-0 bg-canvas border-line shadow-xl flex flex-col",
+					widthClassName,
+					sideClasses,
+				)}
+			>
+				<div className="flex items-center justify-end h-12 px-2 border-b border-line shrink-0">
+					<button
+						type="button"
+						onClick={onClose}
+						className="p-2 rounded-md hover:bg-surface-raised transition-colors min-h-11 min-w-11 inline-flex items-center justify-center"
+						aria-label="Close menu"
+					>
+						<X className="size-5" />
+					</button>
+				</div>
+				<div className="flex-1 overflow-y-auto">{children}</div>
+			</div>
+		</div>
+	);
+};

package/src/components/mail/AutoMovedIndicator.tsx

@@ -0,0 +1,48 @@
+import type { RemitImapAutoMovedInfo } from "@remit/api-http-client/types.gen.ts";
+import { AutoMovedBadge } from "@remit/ui";
+import { useAutoMovedBadge } from "@/hooks/useAutoMovedBadge";
+
+interface AutoMovedIndicatorProps {
+	accountId: string | undefined;
+	messageId: string;
+	threadId: string;
+	mailboxId: string;
+	autoMoved: RemitImapAutoMovedInfo | undefined;
+	/** `md` (reading view) adds the inline Undo action; `sm` (list row) is icon + label only. */
+	size?: "sm" | "md";
+}
+
+/**
+ * Renders the "auto-moved by Remit" badge only while the move is still in
+ * effect (current mailbox matches the verdict's implied destination) — see
+ * `useAutoMovedBadge`. Mount this only when `autoMoved` is present on the row
+ * (callers gate with `thread.autoMoved &&`) so rows without a move never pay
+ * for the Inbox/Junk mailbox lookups.
+ */
+export function AutoMovedIndicator({
+	accountId,
+	messageId,
+	threadId,
+	mailboxId,
+	autoMoved,
+	size = "sm",
+}: AutoMovedIndicatorProps) {
+	const badge = useAutoMovedBadge({
+		accountId,
+		messageId,
+		threadId,
+		mailboxId,
+		autoMoved,
+	});
+
+	if (!badge.show) return null;
+
+	return (
+		<AutoMovedBadge
+			label={badge.label}
+			size={size}
+			onUndo={badge.onUndo}
+			undoLabel={badge.isUndoing ? "Undoing…" : "Undo"}
+		/>
+	);
+}

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

@@ -0,0 +1,65 @@
+/**
+ * React-render smoke test for `BlockedImagesNotice` — the privacy "images
+ * blocked" bar extracted from `MessageBody`. Pins the never-disable-buttons
+ * rule (#943): the "Always trust" button stays active while the trust toggle
+ * is in flight. It must NOT render `disabled`; the in-flight state is reflected
+ * via `aria-busy` and a pending label instead, so the control stays focusable
+ * and clickable (the handler no-ops the second click on the consumer side).
+ *
+ * Uses `react-dom/server`'s `renderToString` so the assertion runs without
+ * jsdom/happy-dom (no new deps), matching `MessageBodyErrorBanner.render.test`.
+ */
+
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { BlockedImagesNotice } from "./BlockedImagesNotice";
+
+const noop = () => undefined;
+
+const render = (
+	overrides: Partial<Parameters<typeof BlockedImagesNotice>[0]>,
+) =>
+	renderToString(
+		createElement(BlockedImagesNotice, {
+			blockedImageCount: 3,
+			canAlwaysTrust: true,
+			isTrustPending: false,
+			onLoadOnce: noop,
+			onAlwaysTrust: noop,
+			...overrides,
+		}) as never,
+	);
+
+const alwaysTrustButton = (html: string): string | undefined =>
+	html.match(/<button\b[^>]*>(?:Always trust|Trusting…)<\/button>/)?.[0];
+
+describe("BlockedImagesNotice — never-disable the Always trust button (#943)", () => {
+	it("renders the Always trust button active when not pending", () => {
+		const html = render({ isTrustPending: false });
+		const btn = alwaysTrustButton(html);
+		assert.ok(btn, "Always trust button should render");
+		assert.doesNotMatch(btn, /\bdisabled\b/);
+		assert.match(btn, /Always trust/);
+	});
+
+	it("keeps the Always trust button NOT disabled while pending, reflecting state via aria-busy + label", () => {
+		const html = render({ isTrustPending: true });
+		const btn = alwaysTrustButton(html);
+		assert.ok(btn, "Always trust button should still render while pending");
+		assert.doesNotMatch(
+			btn,
+			/\bdisabled\b/,
+			"never disable the button — pending must not gray it out (#943)",
+		);
+		assert.match(btn, /aria-busy="true"/);
+		assert.match(btn, /Trusting…/);
+	});
+
+	it("hides the Always trust button when the sender can't be trusted", () => {
+		const html = render({ canAlwaysTrust: false });
+		assert.equal(alwaysTrustButton(html), undefined);
+		assert.match(html, /<button\b[^>]*>Load once<\/button>/);
+	});
+});

package/src/components/mail/BlockedImagesNotice.tsx

@@ -0,0 +1,41 @@
+interface BlockedImagesNoticeProps {
+	blockedImageCount: number;
+	canAlwaysTrust: boolean;
+	isTrustPending: boolean;
+	onLoadOnce: () => void;
+	onAlwaysTrust: () => void;
+}
+
+export const BlockedImagesNotice = ({
+	blockedImageCount,
+	canAlwaysTrust,
+	isTrustPending,
+	onLoadOnce,
+	onAlwaysTrust,
+}: BlockedImagesNoticeProps) => (
+	<div className="mb-3 flex items-center justify-between rounded-md bg-surface-sunken/50 px-3 py-2 text-sm">
+		<span className="text-fg-muted">
+			{blockedImageCount} image{blockedImageCount > 1 ? "s" : ""} blocked for
+			privacy
+		</span>
+		<div className="flex items-center gap-3">
+			<button
+				type="button"
+				onClick={onLoadOnce}
+				className="text-accent hover:underline"
+			>
+				Load once
+			</button>
+			{canAlwaysTrust && (
+				<button
+					type="button"
+					onClick={onAlwaysTrust}
+					aria-busy={isTrustPending}
+					className="text-accent hover:underline aria-busy:opacity-50"
+				>
+					{isTrustPending ? "Trusting…" : "Always trust"}
+				</button>
+			)}
+		</div>
+	</div>
+);