@remit/web-client 0.0.324 → 0.0.326

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

@@ -1,153 +0,0 @@
-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> = {},
-): RemitImapThreadMessageResponse =>
-	({
-		threadMessageId: "tm-1",
-		threadId: "th-1",
-		messageId: "msg-1",
-		accountConfigId: "acc-1",
-		mailboxId: "mbx-1",
-		sentDate: 0,
-		isRead: true,
-		hasAttachment: false,
-		hasStars: false,
-		star: "None",
-		isDeleted: false,
-		senderTrust: "unknown",
-		abandonedMutation: "none",
-		createdAt: 0,
-		updatedAt: 0,
-		...overrides,
-	}) as RemitImapThreadMessageResponse;
-
-describe("threadToRowData — labels", () => {
-	it("carries the message's applied labels through to the row (issue #26)", () => {
-		const row = threadToRowData(
-			baseThread({
-				labels: [{ labelId: "l1", name: "Receipts", color: "Blue" }],
-			}),
-		);
-		assert.deepEqual(row.labels, [
-			{ labelId: "l1", name: "Receipts", color: "Blue" },
-		]);
-	});
-
-	it("carries no labels when the message has none", () => {
-		const row = threadToRowData(baseThread());
-		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: "abandoned",
-				abandonedMutation: "delete",
-			}),
-		);
-		assert.equal(row.settlement, "delete_failed");
-	});
-
-	// Issue #1229. Both give-ups hand the row back the same way, so before the
-	// row named the mutation this rendered "Not deleted" over a move.
-	it("marks a row whose move gave up as a move, not a delete", () => {
-		const row = threadToRowData(
-			baseThread({
-				status: "active",
-				syncStatus: "abandoned",
-				abandonedMutation: "move",
-			}),
-		);
-		assert.equal(row.settlement, "move_failed");
-	});
-
-	it("says nothing about a copy that gave up, whose row no listing carries", () => {
-		const row = threadToRowData(
-			baseThread({
-				status: "deleted",
-				syncStatus: "abandoned",
-				abandonedMutation: "copy",
-			}),
-		);
-		assert.equal(row.settlement, undefined);
-	});
-
-	// `syncStatus` is the gate: a marker a later settle left behind says nothing.
-	it("says nothing about a settled row still carrying a stale marker", () => {
-		const row = threadToRowData(
-			baseThread({
-				status: "active",
-				syncStatus: "synced",
-				abandonedMutation: "delete",
-			}),
-		);
-		assert.equal(row.settlement, undefined);
-	});
-
-	it("says nothing about a transient attempt on an active row", () => {
-		const row = threadToRowData(
-			baseThread({ status: "active", syncStatus: "failed" }),
-		);
-		assert.equal(row.settlement, undefined);
-	});
-
-	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: "abandoned",
-				abandonedMutation: "delete",
-			}),
-		);
-		assert.equal(row.settlement, "delete_failed");
-	});
-
-	it("marks the drafts row", () => {
-		const row = toImapDraftRowData(
-			baseThread({
-				status: "active",
-				syncStatus: "abandoned",
-				abandonedMutation: "delete",
-			}),
-		);
-		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

@@ -1,106 +0,0 @@
-/**
- * MessageListItem — the mailbox list's adapter onto the shared `MessageRow`.
- *
- * It maps an API thread to the row's `ThreadRowData` shape and supplies the one
- * thing only the mailbox list has: route-linking rows. Everything visual and
- * 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,
-	SenderTrustLevel,
-	ThreadRowData,
-} from "@remit/ui";
-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 {
-	thread: RemitImapThreadMessageResponse;
-	mailboxId: string;
-	isSelected: boolean;
-	isFocused?: boolean;
-	isTabStop?: boolean;
-	onFocusRow?: (messageId: string) => void;
-	isChecked: boolean;
-	onToggleCheck: (id: string) => void;
-	onRowSelect: (messageId: string, modifiers: SelectionModifiers) => boolean;
-	messageCount?: number;
-	isMultiSelectMode?: boolean;
-	onLongPress?: (messageId: string) => void;
-	isDesktop?: boolean;
-	density?: Density;
-}
-
-/**
- * Map a RemitImapThreadMessageResponse to the ThreadRowData shape the shared
- * row renders.
- */
-export const threadToRowData = (
-	thread: RemitImapThreadMessageResponse,
-	messageCount?: number,
-): ThreadRowData => ({
-	id: thread.messageId,
-	accountId: thread.accountId,
-	mailboxId: thread.mailboxId,
-	threadId: thread.threadId,
-	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.hasStars === true,
-	trust: thread.senderTrust as SenderTrustLevel,
-	category: toDisplayCategory(thread.category),
-	messageCount,
-	// The backend's DKIM-alignment verdict is authoritative: it already accounts
-	// for the multi-signature / alignment semantics a single string compare
-	// misses.
-	suspicious: thread.authenticity?.dkimMismatch === true,
-	labels: thread.labels,
-	...rowSettlement(thread),
-});
-
-const MessageListItemComponent = ({
-	thread,
-	mailboxId,
-	isSelected,
-	isFocused,
-	isTabStop,
-	onFocusRow,
-	isChecked,
-	onToggleCheck,
-	onRowSelect,
-	messageCount,
-	isMultiSelectMode,
-	onLongPress,
-	isDesktop,
-	density,
-}: MessageListItemProps) => (
-	<MessageRow
-		thread={threadToRowData(thread, messageCount)}
-		link={{ mailboxId, threadId: thread.threadId }}
-		inListbox
-		active={isSelected}
-		focused={isFocused}
-		isTabStop={isTabStop}
-		density={density}
-		isDesktop={isDesktop}
-		onFocusRow={onFocusRow}
-		selection={{
-			isChecked,
-			onToggleCheck,
-			onRowSelect,
-			isMultiSelectMode,
-			onLongPress,
-		}}
-	/>
-);
-
-export const MessageListItem = memo(MessageListItemComponent);

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

@@ -1,54 +0,0 @@
-/**
- * Row semantics for the shared `MessageRow` (#149).
- *
- * `role="option"` belongs to the mailbox list, whose rows sit inside a
- * `role="listbox"` container. The brief and Flagged render rows in ordinary
- * containers: an orphan `option` there is invalid ARIA and, more concretely,
- * strips the row of its button role — which is how the black-box suite and any
- * screen reader address it.
- */
-
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import type { ThreadRowData } from "@remit/ui";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import React, { createElement } from "react";
-import { renderToString } from "react-dom/server";
-import { MessageRow } from "./MessageRow";
-
-(globalThis as { React?: typeof React }).React = React;
-
-const thread: ThreadRowData = {
-	id: "m1",
-	accountId: "a1",
-	fromName: "Alex Rivera",
-	fromEmail: "alex@example.com",
-	subject: "Quarterly numbers are in",
-	snippet: "The deck is on the shared drive.",
-	timeLabel: "9:42",
-	isRead: true,
-};
-
-const render = (props: Parameters<typeof MessageRow>[0]): string =>
-	renderToString(
-		createElement(
-			QueryClientProvider,
-			{ client: new QueryClient() },
-			createElement(MessageRow, props),
-		) as never,
-	);
-
-describe("MessageRow semantics", () => {
-	it("renders a plain button outside a listbox (brief, Flagged)", () => {
-		const html = render({ thread });
-		assert.match(html, /<button/);
-		assert.doesNotMatch(html, /role="option"/);
-		assert.doesNotMatch(html, /aria-selected/);
-	});
-
-	it("renders listbox option semantics when the container is a listbox", () => {
-		const html = render({ thread, inListbox: true });
-		assert.match(html, /role="option"/);
-		assert.match(html, /aria-selected/);
-	});
-});

package/src/components/mail/MessageRow.tsx

@@ -1,269 +0,0 @@
-/**
- * MessageRow — the one thread row every list in the app renders.
- *
- * The mailbox list, the daily brief and Flagged used to carry three
- * near-identical rows (#149). They differ in two axes only, both props here:
- *
- * - `link` — set for the mailbox list, whose rows are real links so a plain
- *   click routes and a middle click opens a tab. Omitted for the brief and
- *   Flagged, whose rows report the tap through `onClick`.
- * - `selection` — set where multi-select is available. Absent renders the
- *   avatar alone with no checkbox, which is what "non-selectable mode" means.
- */
-import { messageOperationsDescribeMessageOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import {
-	ComfortableRowBody,
-	CompactRowBody,
-	cn,
-	comfortableRowClass,
-	compactRowClass,
-	type Density,
-	mergeProps,
-	modifiersOf,
-	type RowToggleEvent,
-	type SelectionModifiers,
-	type ThreadRowData,
-	useLongPress,
-} from "@remit/ui";
-import { useQueryClient } from "@tanstack/react-query";
-import { type MouseEvent, memo, type ReactNode, useCallback } from "react";
-import { NavLink } from "@/routing";
-import { useThreadRowInteraction } from "./ThreadListInteraction";
-import { useModifierSelect } from "./useModifierSelect";
-
-export interface MessageRowSelection {
-	isChecked: boolean;
-	onToggleCheck: (messageId: string) => void;
-	/**
-	 * Desktop mouse selection. Returns true when selection consumed the click
-	 * (the row must not open); false for a plain click.
-	 */
-	onRowSelect: (messageId: string, modifiers: SelectionModifiers) => boolean;
-	/** Checkbox stays visible — mobile multi-select mode. */
-	isMultiSelectMode?: boolean;
-	/** Long press enters selection mode (mobile only). */
-	onLongPress?: (messageId: string) => void;
-}
-
-export interface MessageRowProps {
-	thread: ThreadRowData;
-	/** The row is the open thread. */
-	active?: boolean;
-	/**
-	 * Roving keyboard focus cursor (#429). Distinct from `active`: a
-	 * focused-but-not-open row shows the left accent rail; the open row shows the
-	 * full highlight. Both can be true.
-	 */
-	focused?: boolean;
-	/**
-	 * Whether this row holds the list's single tab stop (roving tabindex). Every
-	 * other row is `tabIndex={-1}`, so Tab enters the list at the cursor and
-	 * Shift+Tab leaves it rather than stepping through hundreds of rows.
-	 */
-	isTabStop?: boolean;
-	density?: Density;
-	isDesktop?: boolean;
-	/** Extra chip after the category badge (e.g. the auto-moved indicator). */
-	badge?: ReactNode;
-	selection?: MessageRowSelection;
-	/**
-	 * The row sits inside a container with `role="listbox"` (the mailbox list),
-	 * so it carries `role="option"` and `aria-selected`. Off everywhere else:
-	 * the brief and Flagged render their rows in ordinary containers, where an
-	 * orphan `option` is invalid ARIA and costs the row its button semantics.
-	 */
-	inListbox?: boolean;
-	/**
-	 * The address the row links to: the folder being browsed and the conversation
-	 * this row opens. Omit for callback-driven rows.
-	 */
-	link?: { mailboxId: string; threadId: string };
-	/** Called when the row is opened by a plain click on a non-linking row. */
-	onClick?: () => void;
-	/** Called when the row takes DOM focus, so the roving cursor follows it. */
-	onFocusRow?: (messageId: string) => void;
-}
-
-const MessageRowComponent = ({
-	thread,
-	active = false,
-	focused: focusedProp,
-	isTabStop: isTabStopProp,
-	density = "comfortable",
-	isDesktop: isDesktopProp,
-	badge,
-	selection: selectionProp,
-	inListbox = false,
-	link,
-	onClick,
-	onFocusRow: onFocusRowProp,
-}: MessageRowProps) => {
-	const queryClient = useQueryClient();
-	const messageId = thread.id;
-	// A list that renders its own rows (the brief, Flagged) supplies the cursor
-	// and selection through context; the mailbox list passes them as props.
-	const fromContext = useThreadRowInteraction(messageId);
-	const focused = focusedProp ?? fromContext?.focused ?? false;
-	const isTabStop = isTabStopProp ?? fromContext?.isTabStop ?? false;
-	const selection = selectionProp ?? fromContext?.selection;
-	const onFocusRow = onFocusRowProp ?? fromContext?.onFocusRow;
-	// The cursor and the row must agree on the device: the cursor's multi-select
-	// mode is derived from it, and the row's tap semantics branch on it.
-	const isDesktop = isDesktopProp ?? fromContext?.isDesktop ?? true;
-	const isChecked = selection?.isChecked ?? false;
-	const isMultiSelectMode = selection?.isMultiSelectMode ?? false;
-	const onToggleCheck = selection?.onToggleCheck;
-	const onRowSelect = selection?.onRowSelect;
-	const onLongPress = selection?.onLongPress;
-
-	const handleToggleCheck = useCallback(
-		(e: RowToggleEvent) => {
-			e.preventDefault();
-			e.stopPropagation();
-			onToggleCheck?.(messageId);
-		},
-		[onToggleCheck, messageId],
-	);
-
-	const modifierSelect = useModifierSelect(messageId, onRowSelect);
-
-	// A plain click falls through to the Link's navigation (or `onClick` on a
-	// non-linking row). A modified click belongs to selection and is consumed by
-	// `claimClick`, whichever of the press or the click the engine delivered.
-	//
-	// On mobile, once selection mode is active (#92) a plain tap toggles the row
-	// instead of opening it — the same tap-to-toggle contract every reference
-	// mail client uses once you're mid-selection.
-	const handleRowClick = useCallback(
-		(e: MouseEvent) => {
-			if (modifierSelect.claimClick(e)) return;
-			if (!isDesktop) {
-				if (isMultiSelectMode) {
-					e.preventDefault();
-					e.stopPropagation();
-					onToggleCheck?.(messageId);
-					return;
-				}
-				onClick?.();
-				return;
-			}
-			// A plain desktop click collapses any multi-selection and re-anchors it
-			// before the row opens.
-			onRowSelect?.(messageId, modifiersOf(e));
-			onClick?.();
-		},
-		[
-			modifierSelect,
-			isDesktop,
-			isMultiSelectMode,
-			onToggleCheck,
-			onRowSelect,
-			onClick,
-			messageId,
-		],
-	);
-
-	const handleLongPress = useCallback(() => {
-		onLongPress?.(messageId);
-	}, [onLongPress, messageId]);
-
-	// Threshold comes from useLongPress' default so the plain row and the
-	// swipeable row can't drift apart on timing.
-	const { longPressProps } = useLongPress({
-		onLongPress: handleLongPress,
-		accessibilityDescription: isChecked ? "Deselect message" : "Select message",
-	});
-
-	// 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 } }),
-		);
-	}, [queryClient, messageId]);
-
-	const handleRowFocus = useCallback(() => {
-		prefetchMessage();
-		onFocusRow?.(messageId);
-	}, [prefetchMessage, onFocusRow, messageId]);
-
-	// Listbox semantics + roving tabindex, shared by both densities. Merged (not
-	// spread) with the mobile long-press props, so the gesture's pointer
-	// handlers chain with the row's own instead of replacing them.
-	const interactionProps = mergeProps(
-		{
-			"data-list-row": "",
-			"data-message-row": true,
-			"data-message-id": messageId,
-			...(inListbox
-				? { role: "option" as const, "aria-selected": isChecked }
-				: {}),
-			tabIndex: isTabStop ? 0 : -1,
-			onClick: handleRowClick,
-			onMouseDown: modifierSelect.onMouseDown,
-			onContextMenu: modifierSelect.onContextMenu,
-			onMouseEnter: prefetchMessage,
-			onFocus: handleRowFocus,
-		},
-		isDesktop || !selection ? {} : longPressProps,
-	);
-
-	const className = cn(
-		density === "compact"
-			? compactRowClass({ active, focused })
-			: cn("group", comfortableRowClass({ active, focused })),
-		"outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset",
-		isChecked && "bg-accent-soft",
-		// Long-press enters selection mode; without these, Android Chrome opens
-		// the link context menu / starts text selection and iOS Safari fires the
-		// callout, racing the app's handler. useLongPress suppresses the
-		// touch-fired contextmenu; the callout fires no cancelable event, so
-		// `select-none` / `-webkit-touch-callout: none` are the only lever left.
-		!isDesktop && "min-h-11 select-none [-webkit-touch-callout:none]",
-	);
-
-	const body =
-		density === "compact" ? (
-			<CompactRowBody thread={thread} />
-		) : (
-			<ComfortableRowBody
-				thread={thread}
-				badge={badge}
-				selection={
-					selection
-						? {
-								checked: isChecked,
-								alwaysVisible: isMultiSelectMode,
-								onToggle: handleToggleCheck,
-							}
-						: undefined
-				}
-			/>
-		);
-
-	if (link === undefined) {
-		return (
-			<button type="button" {...interactionProps} className={className}>
-				{body}
-			</button>
-		);
-	}
-
-	return (
-		<NavLink
-			to="/mail/$mailboxId/$threadId/$messageId"
-			params={{ ...link, messageId }}
-			search={(prev) => prev}
-			variant="row"
-			{...interactionProps}
-			className={className}
-		>
-			{body}
-		</NavLink>
-	);
-};
-
-// Wrapped in React.memo so virtualized rows don't re-render on every parent
-// state change. Props are primitives plus callbacks the parents keep stable, so
-// default shallow equality is appropriate.
-export const MessageRow = memo(MessageRowComponent);