@remit/web-client 0.0.1

package/src/components/mail/MessageListItem.tsx

@@ -0,0 +1,267 @@
+import { messageOperationsDescribeMessageOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import {
+	Avatar,
+	ComfortableRowTextContent,
+	CompactRowBody,
+	comfortableRowClass,
+	compactRowClass,
+	type Density,
+	type SenderTrustLevel,
+	type ThreadRowData,
+} from "@remit/ui";
+import { useQueryClient } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { Check } from "lucide-react";
+import { type MouseEvent, memo, useCallback } from "react";
+import { useLongPress } from "@/hooks/useLongPress";
+import type { SelectionModifiers } from "@/hooks/useSelection";
+import { toDisplayCategory } from "@/lib/display-category";
+import { formatEmailDate } from "@/lib/format";
+import { cn } from "@/lib/utils";
+import { AutoMovedIndicator } from "./AutoMovedIndicator";
+
+interface MailboxLinkSearch {
+	selectedMessageId?: string;
+	q?: string;
+}
+
+interface MessageListItemProps {
+	thread: RemitImapThreadMessageResponse;
+	mailboxId: string;
+	/** Owning account, used to resolve the Inbox/Junk mailboxes for the auto-moved badge's undo action. */
+	accountId?: string;
+	isSelected: boolean;
+	/**
+	 * Roving keyboard focus cursor (#429). Distinct from `isSelected` (the open
+	 * thread): a focused-but-not-open row shows the left accent rail; the open
+	 * row shows the full highlight. Both can be true (the open row stays focused).
+	 */
+	isFocused?: boolean;
+	isChecked: boolean;
+	onToggleCheck: (id: string) => void;
+	/**
+	 * Desktop mouse selection. Called from the row's onClick with the click
+	 * modifiers. Returns true when selection consumed the click (the row should
+	 * not navigate); false for a plain click (navigation proceeds).
+	 */
+	onRowSelect: (messageId: string, modifiers: SelectionModifiers) => boolean;
+	messageCount?: number;
+	/** When true, the checkbox is always visible (e.g. mobile multi-select mode). */
+	isMultiSelectMode?: boolean;
+	/** Called on long press (mobile only). Receives the row's messageId. */
+	onLongPress?: (messageId: string) => void;
+	/** Whether the current viewport is desktop size. */
+	isDesktop?: boolean;
+	/** Row density — comfortable (default) or compact (mutt mode). */
+	density?: Density;
+}
+
+/**
+ * Map a RemitImapThreadMessageResponse to the ThreadRowData shape used by
+ * remit-ui row body components.
+ */
+const toThreadRowData = (
+	thread: RemitImapThreadMessageResponse,
+	messageCount: number | undefined,
+): ThreadRowData => {
+	// Use the backend's authoritative DKIM-alignment verdict rather than
+	// re-deriving it in the view: dkimMismatch already accounts for the
+	// multi-signature / alignment semantics a single string compare misses.
+	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 as SenderTrustLevel,
+		category: toDisplayCategory(thread.category),
+		messageCount,
+		suspicious,
+	};
+};
+
+const MessageListItemComponent = ({
+	thread,
+	mailboxId,
+	accountId,
+	isSelected,
+	isFocused = false,
+	isChecked,
+	onToggleCheck,
+	onRowSelect,
+	messageCount,
+	isMultiSelectMode = false,
+	onLongPress,
+	isDesktop = true,
+	density = "comfortable",
+}: MessageListItemProps) => {
+	const queryClient = useQueryClient();
+	const messageId = thread.messageId;
+	const rowData = toThreadRowData(thread, messageCount);
+
+	const handleCheckboxClick = (e: MouseEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		onToggleCheck(thread.messageId);
+	};
+
+	// Desktop mouse selection semantics. Plain click falls through to the Link's
+	// navigation; shift / cmd / ctrl click is routed to selection and the
+	// navigation is suppressed. On mobile this is a no-op so taps still open.
+	const handleRowClick = useCallback(
+		(e: MouseEvent) => {
+			if (!isDesktop) return;
+			const handled = onRowSelect(messageId, {
+				shiftKey: e.shiftKey,
+				metaKey: e.metaKey,
+				ctrlKey: e.ctrlKey,
+			});
+			if (handled) {
+				e.preventDefault();
+				e.stopPropagation();
+			}
+		},
+		[isDesktop, onRowSelect, messageId],
+	);
+
+	const handleLongPress = useCallback(() => {
+		onLongPress?.(messageId);
+	}, [onLongPress, messageId]);
+
+	const longPressHandlers = useLongPress({
+		onLongPress: handleLongPress,
+		delayMs: 500,
+	});
+
+	// Intent-based prefetch: by the time the user clicks, the body is in
+	// React Query's cache and the detail pane renders without a spinner.
+	const prefetchMessage = useCallback(() => {
+		queryClient.prefetchQuery(
+			messageOperationsDescribeMessageOptions({
+				path: { messageId: thread.messageId },
+			}),
+		);
+	}, [queryClient, thread.messageId]);
+
+	const unread = !thread.isRead;
+
+	if (density === "compact") {
+		return (
+			<Link
+				to="/mail/$mailboxId"
+				params={{ mailboxId }}
+				search={(prev: MailboxLinkSearch) => ({
+					...prev,
+					selectedMessageId: thread.messageId,
+				})}
+				data-message-row
+				onClick={handleRowClick}
+				onMouseEnter={prefetchMessage}
+				onFocus={prefetchMessage}
+				{...(!isDesktop && longPressHandlers.handlers)}
+				className={cn(
+					compactRowClass({ active: isSelected, focused: isFocused }),
+					isChecked && "bg-accent-soft",
+					!isDesktop && "min-h-11",
+				)}
+			>
+				<CompactRowBody thread={rowData} />
+			</Link>
+		);
+	}
+
+	// Comfortable density: avatar/checkbox leading slot + text content.
+	// The slot is a fixed 36px so the row never reflows when state changes.
+	// Unread dot is positioned absolute (left-1.5, vertically centered).
+	return (
+		<Link
+			to="/mail/$mailboxId"
+			params={{ mailboxId }}
+			search={(prev: MailboxLinkSearch) => ({
+				...prev,
+				selectedMessageId: thread.messageId,
+			})}
+			data-message-row
+			onClick={handleRowClick}
+			onMouseEnter={prefetchMessage}
+			onFocus={prefetchMessage}
+			{...(!isDesktop && longPressHandlers.handlers)}
+			className={cn(
+				"group",
+				comfortableRowClass({ active: isSelected, focused: isFocused }),
+				isChecked && "bg-accent-soft",
+				!isDesktop && "min-h-11",
+			)}
+		>
+			{/* Absolute unread dot — 6px gutter from the left pane hairline */}
+			{unread && (
+				<span className="absolute left-1.5 top-1/2 size-1.5 -translate-y-1/2 rounded-full bg-accent" />
+			)}
+
+			{/* Leading slot: avatar by default, checkbox on hover (desktop) or
+			    while checked / in multi-select mode. Fixed 28px slot (size-7,
+			    matching Avatar size="sm" in remit-ui ComfortableRow). */}
+			<div className="relative size-7 shrink-0">
+				<Avatar
+					name={thread.fromName ?? thread.fromEmail ?? "?"}
+					email={thread.fromEmail ?? undefined}
+					size="sm"
+					className={cn(
+						"absolute inset-0",
+						"sm:group-hover:opacity-0 transition-opacity",
+						(isChecked || isMultiSelectMode) && "opacity-0",
+					)}
+				/>
+				<button
+					type="button"
+					onClick={handleCheckboxClick}
+					className={cn(
+						"absolute inset-0 size-7 rounded-full border items-center justify-center transition-opacity",
+						isMultiSelectMode ? "flex" : "hidden sm:flex",
+						isChecked
+							? "bg-accent border-accent text-accent-fg opacity-100"
+							: isMultiSelectMode
+								? "border-fg-subtle/40 opacity-100 bg-canvas"
+								: "border-fg-subtle/40 opacity-0 group-hover:opacity-100 bg-canvas",
+					)}
+					aria-label={isChecked ? "Deselect message" : "Select message"}
+				>
+					{isChecked && <Check className="size-3" />}
+				</button>
+			</div>
+
+			{/* Text/glyph content block */}
+			<ComfortableRowTextContent
+				thread={rowData}
+				badge={
+					thread.autoMoved && (
+						<AutoMovedIndicator
+							accountId={accountId}
+							messageId={thread.messageId}
+							threadId={thread.threadId}
+							mailboxId={thread.mailboxId}
+							autoMoved={thread.autoMoved}
+							size="sm"
+						/>
+					)
+				}
+			/>
+		</Link>
+	);
+};
+
+// Wrapped in React.memo so virtualized rows don't re-render on every parent
+// state change. The `search` callback prop on Link is inline, but it gets a
+// stable reference because the parent itself is stable across re-renders
+// (mailboxId is a string from route params). React.memo with default shallow
+// equality is appropriate here since props are primitives + stable callback.
+export const MessageListItem = memo(MessageListItemComponent);

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

@@ -0,0 +1,57 @@
+/**
+ * Render invariants for the reading-pane toolbar (#799): the never-disable
+ * tenet (`doc/rules/ux.md`). The toolbar's action buttons must stay pressable
+ * even with no thread open — they no-op and explain rather than greying out.
+ *
+ * Asserted against the shared `MailActionToolbar` (remit-ui), which the live
+ * `MessageToolbar` composes. Uses `react-dom/server` so no jsdom is needed.
+ */
+
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { MailActionToolbar } from "@remit/ui";
+import React, { createElement } from "react";
+import { renderToString } from "react-dom/server";
+
+// The node test loader transpiles remit-ui's `.tsx` (resolved through
+// node_modules) with the classic JSX runtime, which references a global
+// `React`. Vite/Storybook use the automatic runtime, so this shim only exists
+// for the SSR test harness.
+(globalThis as { React?: typeof React }).React = React;
+
+const render = (props: Parameters<typeof MailActionToolbar>[0]): string =>
+	renderToString(createElement(MailActionToolbar, props) as never);
+
+describe("MailActionToolbar never disables its action buttons (#799)", () => {
+	it("renders no disabled button with no thread open", () => {
+		const html = render({ hasThread: false });
+		assert.equal(
+			/\sdisabled(=""|\s|>)/.test(html),
+			false,
+			"no toolbar button may carry a `disabled` attribute",
+		);
+	});
+
+	it("renders no disabled button with a thread open", () => {
+		const html = render({ hasThread: true });
+		assert.equal(/\sdisabled(=""|\s|>)/.test(html), false);
+	});
+
+	it("renders the inline explanation when supplied with no thread", () => {
+		const html = render({
+			hasThread: false,
+			unavailableHint: "Open a message first",
+		});
+		assert.match(html, /Open a message first/);
+		// Inline status, not a toast.
+		assert.match(html, /role="status"/);
+	});
+
+	it("keeps the action buttons present (reply/flag) so they stay pressable", () => {
+		const html = render({ hasThread: false });
+		assert.match(html, /aria-label="Reply"/);
+		assert.match(html, /aria-label="Flag"/);
+		// No archive verb — Remit is IMAP-backed (move-to-folder is the equivalent).
+		assert.doesNotMatch(html, /aria-label="Archive"/);
+	});
+});

package/src/components/mail/MessageToolbar.tsx

@@ -0,0 +1,166 @@
+import {
+	Button,
+	type MailAction,
+	MailActionToolbar,
+	SearchBar,
+} from "@remit/ui";
+import { Info, SquarePen } from "lucide-react";
+import { useState } from "react";
+import { AccountMenu } from "@/auth/AccountMenu";
+import { BugReportButton } from "@/components/ui/BugReportButton";
+import { tooltipForAction } from "@/lib/keymap";
+import { MoveToTrigger } from "./MoveToTrigger";
+
+/**
+ * Message action toolbar on the pane-header datum (40px, the shared
+ * `--spacing-pane-header`). The reading pane's verbs — reply / reply-all /
+ * forward, then delete / move / flag — Apple-Mail-style ghost icon buttons,
+ * then the search field top-right (still filters the current list), compose
+ * (✎) and the intelligence toggle (#422).
+ *
+ * Buttons are always pressable (never `disabled`): with no thread open a press
+ * is a no-op that surfaces a one-line inline explanation rather than greying
+ * out (`doc/rules/ux.md`).
+ */
+export interface MessageToolbarProps {
+	hasThread: boolean;
+	onCompose: () => void;
+	intelligenceOpen: boolean;
+	/**
+	 * Whether the intelligence toggle is shown at all. The rail is contextual
+	 * to an open message, so the toggle only appears once a thread is selected
+	 * (matches the remit-ui AppShell reference) — it never opens an empty rail.
+	 */
+	showIntelligenceToggle: boolean;
+	onToggleIntelligence: () => void;
+	searchValue: string;
+	onSearchChange: (value: string) => void;
+	/** Full clear (X button): drops the query and any selected thread (#538). */
+	onSearchClear: () => void;
+	/** Query-only clear (Esc): drops the query, keeps the thread open (#489). */
+	onSearchClearQuery?: () => void;
+
+	/* ---- wired action callbacks (omit to keep the no-op-explain behaviour) ---- */
+	onReply?: () => void;
+	onReplyAll?: () => void;
+	onForward?: () => void;
+	/** Delete all messages in the open thread. */
+	onDelete?: () => void;
+	/**
+	 * Override the enabled state of the delete button. Defaults to `hasThread`.
+	 * Pass `true` when a non-thread item (e.g. a Remit draft) is active so the
+	 * trash icon acts without acting on the other thread-scoped verbs.
+	 */
+	canDelete?: boolean;
+	/** Toggle the star on the most-recent message in the thread. */
+	onToggleStar?: () => void;
+	/** Whether the most-recent message is starred. */
+	isStarred?: boolean;
+	/**
+	 * Move-to-mailbox trigger context. When present the FolderInput button
+	 * is replaced by the full `MoveToTrigger` popover.
+	 */
+	moveContext?: {
+		accountId: string;
+		currentMailboxId: string;
+		onMove: (destinationMailboxId: string) => void;
+	};
+}
+
+const OPEN_FIRST = "Open a message first";
+
+export const MessageToolbar = ({
+	hasThread,
+	onCompose,
+	intelligenceOpen,
+	showIntelligenceToggle,
+	onToggleIntelligence,
+	searchValue,
+	onSearchChange,
+	onSearchClear,
+	onSearchClearQuery,
+	onReply,
+	onReplyAll,
+	onForward,
+	onDelete,
+	canDelete,
+	onToggleStar,
+	isStarred,
+	moveContext,
+}: MessageToolbarProps) => {
+	const [hint, setHint] = useState<string | null>(null);
+	const canDeleteResolved = canDelete ?? hasThread;
+	const explain = (message: string) => () => setHint(message);
+
+	return (
+		<MailActionToolbar
+			hasThread={hasThread}
+			isStarred={isStarred}
+			onUnavailable={(_action: MailAction) => setHint(OPEN_FIRST)}
+			unavailableHint={hint}
+			replyTitle={`Reply ${tooltipForAction("reply")}`}
+			replyAllTitle={`Reply all ${tooltipForAction("replyAll")}`}
+			forwardTitle={`Forward ${tooltipForAction("forward")}`}
+			deleteTitle={`Move to Trash ${tooltipForAction("delete")}`}
+			flagTitle={`Flag ${tooltipForAction("toggleStar")}`}
+			onReply={onReply}
+			onReplyAll={onReplyAll}
+			onForward={onForward}
+			onDelete={canDeleteResolved ? onDelete : explain(OPEN_FIRST)}
+			onToggleStar={onToggleStar}
+			onMove={explain(OPEN_FIRST)}
+			moveSlot={
+				moveContext ? (
+					<MoveToTrigger
+						accountId={moveContext.accountId}
+						currentMailboxId={moveContext.currentMailboxId}
+						onMove={moveContext.onMove}
+						label="Move to mailbox"
+					/>
+				) : undefined
+			}
+		>
+			{/* Apple Mail geometry: search sits top-right over the message area
+			    but still filters the current list. Reuses the wired SearchBar
+			    (the global "/" focus shortcut + Escape handling live in it). */}
+			<div className="w-64 min-w-40 shrink">
+				<SearchBar
+					value={searchValue}
+					onChange={onSearchChange}
+					onClear={onSearchClear}
+					onClearQuery={onSearchClearQuery}
+					placeholder="Search mail"
+				/>
+			</div>
+			<span className="mx-1 h-4 w-px bg-line" aria-hidden />
+			<Button
+				variant="ghost"
+				size="sm"
+				icon={<SquarePen className="size-4" />}
+				title={`Compose ${tooltipForAction("compose")}`}
+				aria-label="Compose"
+				onClick={onCompose}
+			/>
+			{showIntelligenceToggle && (
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={<Info className="size-4" />}
+					title="Intelligence"
+					aria-label={
+						intelligenceOpen
+							? "Hide intelligence sidebar"
+							: "Show intelligence sidebar"
+					}
+					aria-pressed={intelligenceOpen}
+					onClick={onToggleIntelligence}
+					className={
+						intelligenceOpen ? "bg-accent-2-soft text-accent-2" : undefined
+					}
+				/>
+			)}
+			<BugReportButton />
+			<AccountMenu />
+		</MailActionToolbar>
+	);
+};

package/src/components/mail/MobileMessageBar.tsx

@@ -0,0 +1,142 @@
+import {
+	messageBulkOperationsUpdateFlagsMutation,
+	threadDetailOperationsListThreadMessagesQueryKey,
+	threadOperationsListThreadsQueryKey,
+	threadOperationsSearchThreadsQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { MobileMessageActionBar, type PopoverMenuItem } from "@remit/ui";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { BadgeCheck, Check, Code } from "lucide-react";
+import { useCallback } from "react";
+import { useDeleteMessages } from "@/hooks/useDeleteMessages";
+import { useMoveMessages } from "@/hooks/useMoveMessages";
+import { useToggleTrusted } from "@/hooks/useToggleTrusted";
+import { MoveToTrigger } from "./MoveToTrigger";
+
+interface MobileMessageBarProps {
+	messageId: string;
+	threadId: string;
+	mailboxId: string;
+	accountId?: string;
+	isRead: boolean;
+	isStarred: boolean;
+	onToggleStar: () => void;
+	/** From-address id; enables the "Trusted sender" overflow item. */
+	fromAddressId?: string;
+	isTrusted: boolean;
+	showRaw: boolean;
+	onToggleRaw?: () => void;
+	onReply?: () => void;
+	onReplyAll?: () => void;
+	onForward?: () => void;
+}
+
+/**
+ * The live per-message action bar for the mobile single-pane reading view.
+ * Wraps the kit `MobileMessageActionBar` and owns this message's mutations:
+ * star (host), move-to-folder, delete, mark read/unread, plus the trusted /
+ * raw toggles in the overflow. Reply verbs come from the conversation.
+ */
+export const MobileMessageBar = ({
+	messageId,
+	threadId,
+	mailboxId,
+	accountId,
+	isRead,
+	isStarred,
+	onToggleStar,
+	fromAddressId,
+	isTrusted,
+	showRaw,
+	onToggleRaw,
+	onReply,
+	onReplyAll,
+	onForward,
+}: MobileMessageBarProps) => {
+	const queryClient = useQueryClient();
+
+	const { deleteMessages } = useDeleteMessages({ mailboxId, threadId });
+	const { moveMessages } = useMoveMessages({ mailboxId, threadId, accountId });
+	const { toggleTrusted } = useToggleTrusted({ messageId });
+
+	const { mutate: updateFlags } = useMutation({
+		...messageBulkOperationsUpdateFlagsMutation(),
+		onSettled: () => {
+			queryClient.invalidateQueries({
+				queryKey: threadDetailOperationsListThreadMessagesQueryKey({
+					path: { threadId },
+				}),
+			});
+			queryClient.invalidateQueries({
+				queryKey: threadOperationsListThreadsQueryKey({ path: { mailboxId } }),
+			});
+			queryClient.invalidateQueries({
+				queryKey: threadOperationsSearchThreadsQueryKey({
+					path: { mailboxId },
+				}),
+			});
+		},
+	});
+
+	const handleMove = useCallback(
+		(destinationMailboxId: string) => {
+			moveMessages([messageId], destinationMailboxId);
+		},
+		[moveMessages, messageId],
+	);
+
+	const handleDelete = useCallback(() => {
+		deleteMessages([messageId]);
+	}, [deleteMessages, messageId]);
+
+	const handleToggleRead = useCallback(() => {
+		updateFlags({ body: { messageIds: [messageId], isRead: !isRead } });
+	}, [updateFlags, messageId, isRead]);
+
+	const overflowItems: PopoverMenuItem[] = [];
+	if (fromAddressId) {
+		overflowItems.push({
+			key: "trusted",
+			label: isTrusted ? "Trusted sender" : "Mark sender trusted",
+			icon: isTrusted ? (
+				<BadgeCheck className="size-4 text-positive" />
+			) : (
+				<Check className="size-4" />
+			),
+			onSelect: () => toggleTrusted(fromAddressId, isTrusted),
+		});
+	}
+	if (onToggleRaw) {
+		overflowItems.push({
+			key: "raw",
+			label: showRaw ? "Show formatted" : "Show raw email",
+			icon: <Code className="size-4" />,
+			onSelect: onToggleRaw,
+		});
+	}
+
+	return (
+		<MobileMessageActionBar
+			hasThread
+			onReply={onReply}
+			onReplyAll={onReplyAll}
+			onForward={onForward}
+			isStarred={isStarred}
+			onToggleStar={onToggleStar}
+			onDelete={handleDelete}
+			isRead={isRead}
+			onToggleRead={handleToggleRead}
+			overflowItems={overflowItems}
+			moveSlot={
+				accountId ? (
+					<MoveToTrigger
+						accountId={accountId}
+						currentMailboxId={mailboxId}
+						onMove={handleMove}
+						label="Move this message"
+					/>
+				) : undefined
+			}
+		/>
+	);
+};