@remit/web-client 0.0.324 → 0.0.326

package/src/components/mail/SpamRescue.tsx

@@ -1,126 +0,0 @@
-import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import {
-	type FolderTreeNode,
-	RescueBanner,
-	type RescueCandidate,
-	RescueFromSpamFlow,
-} from "@remit/ui";
-import { useQuery } from "@tanstack/react-query";
-import {
-	type ReactNode,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from "react";
-import {
-	useFolderAppointments,
-	useInboxMailbox,
-} from "@/hooks/useArchiveMailbox";
-import { useFolderLabelTranslator } from "@/hooks/useFolderLabelTranslator";
-import { buildMoveOptions, folderDelimiter } from "@/lib/move-options";
-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 translator = useFolderLabelTranslator();
-
-	const { inboxMailboxId } = useInboxMailbox(accountId);
-	const folderAppointments = useFolderAppointments(accountId);
-
-	const { data: mailboxesResponse } = useQuery({
-		...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
-		staleTime: Infinity,
-	});
-
-	const folders = useMemo<FolderTreeNode[]>(
-		() =>
-			buildMoveOptions({
-				mailboxes: mailboxesResponse?.items ?? [],
-				folderAppointments,
-				currentMailboxId,
-				translator,
-			}),
-		[
-			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}
-				delimiter={folderDelimiter(mailboxesResponse?.items ?? [])}
-				onConfirmMove={handleConfirmMove}
-				onCancel={() => setOpen(false)}
-			/>
-		</div>
-	);
-}

package/src/components/mail/SwipeableMessageRow.modifier-select.test.ts

@@ -1,243 +0,0 @@
-/**
- * A modifier can only come from a real keyboard, so the touch row honours it at
- * every width (#586).
- *
- * Below 1024px the list renders the swipe row, which reads a press as a pointer
- * gesture and opens the message from the release. Shift and cmd have to reach
- * selection before that gesture starts, or a half-screen window and a tablet
- * with a keyboard can only ever open messages one at a time.
- */
-
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import type { SelectionModifiers } from "@remit/ui";
-import {
-	type AnyRouter,
-	createMemoryHistory,
-	createRootRoute,
-	createRoute,
-	createRouter,
-	RouterContextProvider,
-} from "@tanstack/react-router";
-import { createElement } from "react";
-import { createDomHarness, type DomHarness } from "../../test-support/dom";
-import { SwipeableMessageRow } from "./SwipeableMessageRow";
-
-const HALF_SCREEN_WIDTH = 900;
-
-let harness: DomHarness | undefined;
-
-afterEach(() => {
-	harness?.close();
-	harness = undefined;
-});
-
-const thread = {
-	threadMessageId: "tm-1",
-	threadId: "th-1",
-	messageId: "msg-1",
-	accountId: "acc-1",
-	accountConfigId: "acc-1",
-	mailboxId: "mbx-1",
-	subject: "Q3 planning notes",
-	fromName: "Alex Rivera",
-	fromEmail: "alex@example.com",
-	snippet: "Notes from the planning session.",
-	sentDate: 0,
-	isRead: false,
-	hasAttachment: false,
-	hasStars: false,
-	star: "None",
-	isDeleted: false,
-	senderTrust: "unknown",
-	createdAt: 0,
-	updatedAt: 0,
-} as unknown as RemitImapThreadMessageResponse;
-
-// The router reads `self` at construction; the shared jsdom globals stop at
-// `window`.
-(globalThis as { self?: typeof globalThis }).self ??= globalThis;
-
-const rootRoute = createRootRoute();
-const mailRoute = createRoute({
-	getParentRoute: () => rootRoute,
-	path: "/mail/$mailboxId",
-});
-const messageRoute = createRoute({
-	getParentRoute: () => mailRoute,
-	path: "$threadId/$messageId",
-});
-
-interface Mounted {
-	row: HTMLElement;
-	router: AnyRouter;
-	selects: SelectionModifiers[];
-}
-
-const mountRow = (selectionTakesIt = true): Mounted => {
-	const selects: SelectionModifiers[] = [];
-	const router = createRouter({
-		routeTree: rootRoute.addChildren([mailRoute.addChildren([messageRoute])]),
-		history: createMemoryHistory({ initialEntries: ["/mail/mbx-1"] }),
-	}) as unknown as AnyRouter;
-	const created = createDomHarness({ viewportWidth: HALF_SCREEN_WIDTH });
-	harness = created;
-	created.render(
-		createElement(RouterContextProvider, {
-			router,
-			// biome-ignore lint/correctness/noChildrenProp: RouterContextProvider types `children` as a required prop, which createElement's rest-argument form does not satisfy
-			children: createElement(SwipeableMessageRow, {
-				thread,
-				mailboxId: "mbx-1",
-				isSelected: false,
-				isChecked: false,
-				onToggleCheck: () => undefined,
-				onRowSelect: (_id: string, modifiers: SelectionModifiers) => {
-					selects.push(modifiers);
-					return selectionTakesIt;
-				},
-				isMultiSelectMode: false,
-				onLongPress: () => undefined,
-				isDesktop: false,
-				onDelete: () => undefined,
-				onToggleRead: () => undefined,
-			}),
-		}),
-	);
-	const row = created.query("button[data-message-row]");
-	assert.ok(row, "the swipe row did not mount");
-	return { row, router, selects };
-};
-
-const press = (
-	row: Element,
-	modifiers: Partial<SelectionModifiers> = {},
-): PointerEvent => {
-	const event = new PointerEvent("pointerdown", {
-		bubbles: true,
-		cancelable: true,
-		buttons: 1,
-		pointerId: 1,
-		clientX: 10,
-		clientY: 10,
-		shiftKey: modifiers.shiftKey ?? false,
-		metaKey: modifiers.metaKey ?? false,
-		ctrlKey: modifiers.ctrlKey ?? false,
-	});
-	harness?.dispatch(row, event);
-	return event;
-};
-
-const release = (row: Element): void => {
-	harness?.dispatch(
-		row,
-		new PointerEvent("pointerup", { bubbles: true, pointerId: 1 }),
-	);
-};
-
-// A press whose default was taken still delivers a click, so the click has to
-// be consumed too rather than reaching selection a second time.
-const click = (
-	row: Element,
-	modifiers: Partial<SelectionModifiers> = {},
-): void =>
-	harness?.dispatch(
-		row,
-		new MouseEvent("click", {
-			bubbles: true,
-			cancelable: true,
-			shiftKey: modifiers.shiftKey ?? false,
-			metaKey: modifiers.metaKey ?? false,
-			ctrlKey: modifiers.ctrlKey ?? false,
-		}),
-	);
-
-// The conversation the row opened is the address, so the message it named is the
-// last segment of the path.
-const openedMessageId = (router: AnyRouter): string | undefined =>
-	router.state.location.pathname.split("/")[4];
-
-describe("SwipeableMessageRow — modifier selection below the desktop width", () => {
-	it("takes a shift-press for selection instead of opening the message", async () => {
-		const { row, router, selects } = mountRow();
-
-		const event = press(row, { shiftKey: true });
-		release(row);
-		await harness?.flush();
-
-		assert.deepEqual(selects, [
-			{ shiftKey: true, metaKey: false, ctrlKey: false },
-		]);
-		assert.equal(event.defaultPrevented, true);
-		assert.equal(openedMessageId(router), undefined);
-	});
-
-	it("takes a cmd-press for selection instead of opening the message", async () => {
-		const { row, router, selects } = mountRow();
-
-		press(row, { metaKey: true });
-		release(row);
-		click(row, { metaKey: true });
-		await harness?.flush();
-
-		assert.deepEqual(selects, [
-			{ shiftKey: false, metaKey: true, ctrlKey: false },
-		]);
-		assert.equal(openedMessageId(router), undefined);
-	});
-
-	it("drops the native text selection a shift-press would drag across rows", () => {
-		const { row } = mountRow();
-		const selection = harness?.window.getSelection();
-		assert.ok(selection, "jsdom exposes no selection");
-		const range = harness?.document.createRange();
-		assert.ok(range, "jsdom exposes no range");
-		range.selectNodeContents(row);
-		selection.removeAllRanges();
-		selection.addRange(range);
-
-		press(row, { shiftKey: true });
-
-		assert.equal(selection.rangeCount, 0);
-	});
-
-	it("suppresses the context menu a ctrl-press already spent on selection", () => {
-		const { row, selects } = mountRow();
-
-		press(row, { ctrlKey: true });
-		const menu = new MouseEvent("contextmenu", {
-			bubbles: true,
-			cancelable: true,
-			ctrlKey: true,
-		});
-		harness?.dispatch(row, menu);
-
-		assert.deepEqual(selects, [
-			{ shiftKey: false, metaKey: false, ctrlKey: true },
-		]);
-		assert.equal(menu.defaultPrevented, true);
-	});
-
-	it("opens on an unmodified tap", async () => {
-		const { row, router, selects } = mountRow();
-
-		press(row);
-		release(row);
-		click(row);
-		await harness?.flush();
-
-		assert.deepEqual(selects, []);
-		assert.equal(openedMessageId(router), "msg-1");
-	});
-
-	it("opens when selection declines the modified press", async () => {
-		const { row, router } = mountRow(false);
-
-		press(row, { metaKey: true });
-		release(row);
-		await harness?.flush();
-
-		assert.equal(openedMessageId(router), "msg-1");
-	});
-});

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

@@ -1,110 +0,0 @@
-/**
- * The touch row is not an anchor (#116).
- *
- * An `<a href>` is what the OS long-press callout and the link context menu
- * fire on, and they raced the row's own long-press-to-select gesture. Nothing
- * an anchor buys — middle-click, open in new tab, copy link address — exists
- * without a mouse, and the swipe row is the touch row.
- */
-
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import {
-	type AnyRouter,
-	createMemoryHistory,
-	createRootRoute,
-	createRoute,
-	createRouter,
-	RouterContextProvider,
-} from "@tanstack/react-router";
-import { createElement } from "react";
-import { createDomHarness, type DomHarness } from "../../test-support/dom";
-import { SwipeableMessageRow } from "./SwipeableMessageRow";
-
-const PHONE_WIDTH = 390;
-
-let harness: DomHarness | undefined;
-
-afterEach(() => {
-	harness?.close();
-	harness = undefined;
-});
-
-const thread = {
-	threadMessageId: "tm-1",
-	threadId: "th-1",
-	messageId: "msg-1",
-	accountId: "acc-1",
-	accountConfigId: "acc-1",
-	mailboxId: "mbx-1",
-	subject: "Q3 planning notes",
-	fromName: "Alex Rivera",
-	fromEmail: "alex@example.com",
-	snippet: "Notes from the planning session.",
-	sentDate: 0,
-	isRead: false,
-	hasAttachment: false,
-	hasStars: false,
-	star: "None",
-	isDeleted: false,
-	senderTrust: "unknown",
-	createdAt: 0,
-	updatedAt: 0,
-} as unknown as RemitImapThreadMessageResponse;
-
-// The router reads `self` at construction; the shared jsdom globals stop at
-// `window`.
-(globalThis as { self?: typeof globalThis }).self ??= globalThis;
-
-const rootRoute = createRootRoute();
-const mailRoute = createRoute({
-	getParentRoute: () => rootRoute,
-	path: "/mail/$mailboxId",
-});
-
-const testRouter = (): AnyRouter =>
-	createRouter({
-		routeTree: rootRoute.addChildren([mailRoute]),
-		history: createMemoryHistory({ initialEntries: ["/mail/mbx-1"] }),
-	}) as unknown as AnyRouter;
-
-const renderRow = (): DomHarness => {
-	const created = createDomHarness({ viewportWidth: PHONE_WIDTH });
-	created.render(
-		createElement(RouterContextProvider, {
-			router: testRouter(),
-			// biome-ignore lint/correctness/noChildrenProp: RouterContextProvider types `children` as a required prop, which createElement's rest-argument form does not satisfy
-			children: createElement(SwipeableMessageRow, {
-				thread,
-				mailboxId: "mbx-1",
-				isSelected: false,
-				isChecked: false,
-				onToggleCheck: () => undefined,
-				onRowSelect: () => false,
-				isMultiSelectMode: false,
-				onLongPress: () => undefined,
-				isDesktop: false,
-				onDelete: () => undefined,
-				onToggleRead: () => undefined,
-			}),
-		}),
-	);
-	return created;
-};
-
-describe("SwipeableMessageRow — the touch row's open affordance", () => {
-	it("renders no anchor at all", () => {
-		harness = renderRow();
-
-		assert.equal(harness.queryAll("a").length, 0);
-	});
-
-	it("opens through a button carrying the row marker", () => {
-		harness = renderRow();
-
-		const row = harness.query("button[data-message-row]");
-		assert.ok(row, "the row's open affordance is not a button");
-		assert.match(row.textContent ?? "", /Q3 planning notes/);
-	});
-});

package/src/components/mail/SwipeableMessageRow.tsx

@@ -1,160 +0,0 @@
-import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import {
-	type Density,
-	type SelectionModifiers,
-	SwipeableRow,
-	type SwipePeek,
-	type ThreadRowData,
-} from "@remit/ui";
-import { useCallback, useState } from "react";
-import { toDisplayCategory } from "@/lib/display-category";
-import { formatEmailDate } from "@/lib/format";
-import { rowSettlement } from "@/lib/row-settlement";
-import { useOpenThread } from "@/routing";
-import { MessageListItem } from "./MessageListItem";
-import { useModifierSelect } from "./useModifierSelect";
-
-interface SwipeableMessageRowProps {
-	thread: RemitImapThreadMessageResponse;
-	mailboxId: string;
-	isSelected: boolean;
-	/** Roving keyboard focus cursor — renders the left accent rail (#429). */
-	isFocused?: boolean;
-	/** The one row in the tab order (roving tabindex). */
-	isTabStop?: boolean;
-	/** Called when the row takes DOM focus, so the cursor follows it. */
-	onFocusRow?: (messageId: string) => void;
-	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;
-}
-
-/**
- * The mobile list builds its own row rather than delegating to
- * `MessageListItem` (see the `isDesktop || isMultiSelectMode` branch below),
- * so every row signal has to be repeated here. Exported so a test can hold it
- * to the same answers as the desktop mapper.
- */
-export const swipeableRowData = (
-	thread: RemitImapThreadMessageResponse,
-): ThreadRowData => {
-	const suspicious = thread.authenticity?.dkimMismatch === true;
-	return {
-		id: thread.messageId,
-		accountId: thread.accountId,
-		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,
-		category: toDisplayCategory(thread.category),
-		suspicious,
-		...rowSettlement(thread),
-	};
-};
-
-export const SwipeableMessageRow = ({
-	thread,
-	mailboxId,
-	isSelected,
-	isFocused,
-	isTabStop,
-	onFocusRow,
-	isChecked,
-	onToggleCheck,
-	onRowSelect,
-	isMultiSelectMode,
-	onLongPress,
-	isDesktop,
-	onDelete,
-	onToggleRead,
-	density,
-}: SwipeableMessageRowProps) => {
-	const [peek, setPeek] = useState<SwipePeek>("none");
-	const openThread = useOpenThread();
-
-	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]);
-
-	const handleOpen = useCallback(() => {
-		openThread({ threadId: thread.threadId, messageId: thread.messageId });
-	}, [openThread, thread.threadId, thread.messageId]);
-
-	const modifierSelect = useModifierSelect(thread.messageId, onRowSelect);
-
-	if (isDesktop || isMultiSelectMode) {
-		return (
-			<MessageListItem
-				thread={thread}
-				mailboxId={mailboxId}
-				isSelected={isSelected}
-				isFocused={isFocused}
-				isTabStop={isTabStop}
-				onFocusRow={onFocusRow}
-				isChecked={isChecked}
-				onToggleCheck={onToggleCheck}
-				onRowSelect={onRowSelect}
-				isMultiSelectMode={isMultiSelectMode}
-				onLongPress={onLongPress}
-				isDesktop={isDesktop}
-				density={density}
-			/>
-		);
-	}
-
-	// The swipe row reads the press as a pointer gesture, and it opens the message
-	// from the release — a `mousedown` handler on the row would already be behind
-	// it. Taking the modified press in the capture phase keeps it away from the
-	// gesture entirely, so a shift- or cmd-click selects instead of starting a
-	// swipe, a long press or an open.
-	return (
-		// biome-ignore lint/a11y/noStaticElementInteractions: the wrapper only intercepts mouse modifiers ahead of the row's own gesture; the row beneath keeps the button semantics and the whole keyboard path
-		<div
-			role="presentation"
-			onPointerDownCapture={modifierSelect.onMouseDown}
-			onClickCapture={modifierSelect.claimClick}
-			onContextMenu={modifierSelect.onContextMenu}
-		>
-			<SwipeableRow
-				thread={swipeableRowData(thread)}
-				selectionMode={false}
-				checked={false}
-				active={isSelected}
-				peek={peek}
-				onPeek={setPeek}
-				onToggleCheck={handleToggleCheck}
-				onLongPress={handleLongPress}
-				onOpen={handleOpen}
-				onAct={handleAct}
-			/>
-		</div>
-	);
-};