@remit/web-client 0.0.28 → 0.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/mail/MessageListItem.tsx

@@ -7,14 +7,15 @@ import {
 	comfortableRowClass,
 	compactRowClass,
 	type Density,
+	mergeProps,
 	type SenderTrustLevel,
 	type ThreadRowData,
+	useLongPress,
 } 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";
@@ -125,16 +126,27 @@ const MessageListItemComponent = ({
 
 	// 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.
+	// navigation is suppressed.
 	//
 	// A modified click must preventDefault: the router skips navigation for any
 	// modified click and leaves the anchor's own default in place, which in a
 	// browser means shift-click opens a new window and cmd-click a new tab.
 	// Shift-click also drags a native text selection across the rows it spans,
 	// so drop it — the row highlight is the selection the user asked for.
+	//
+	// 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. Outside selection
+	// mode a short tap still falls through to the Link's native navigation.
 	const handleRowClick = useCallback(
 		(e: MouseEvent) => {
-			if (!isDesktop) return;
+			if (!isDesktop) {
+				if (!isMultiSelectMode) return;
+				e.preventDefault();
+				e.stopPropagation();
+				onToggleCheck(messageId);
+				return;
+			}
 			const modifiers = {
 				shiftKey: e.shiftKey,
 				metaKey: e.metaKey,
@@ -148,7 +160,7 @@ const MessageListItemComponent = ({
 				window.getSelection()?.removeAllRanges();
 			}
 		},
-		[isDesktop, onRowSelect, messageId],
+		[isDesktop, isMultiSelectMode, onToggleCheck, onRowSelect, messageId],
 	);
 
 	// Shift-click starts a native text selection on mousedown; suppressing it
@@ -165,9 +177,10 @@ const MessageListItemComponent = ({
 		onLongPress?.(messageId);
 	}, [onLongPress, messageId]);
 
-	const longPressHandlers = useLongPress({
+	const { longPressProps } = useLongPress({
 		onLongPress: handleLongPress,
 		delayMs: 500,
+		accessibilityDescription: isChecked ? "Deselect message" : "Select message",
 	});
 
 	// Intent-based prefetch: by the time the user clicks, the body is in
@@ -185,18 +198,25 @@ const MessageListItemComponent = ({
 		onFocusRow?.(messageId);
 	}, [prefetchMessage, onFocusRow, messageId]);
 
-	// Listbox semantics + roving tabindex, shared by both densities.
-	const rowInteractionProps = {
-		"data-message-row": true,
-		"data-message-id": messageId,
-		role: "option" as const,
-		"aria-selected": isChecked,
-		tabIndex: isTabStop ? 0 : -1,
-		onClick: handleRowClick,
-		onMouseDown: handleRowMouseDown,
-		onMouseEnter: prefetchMessage,
-		onFocus: handleRowFocus,
-	};
+	// Listbox semantics + roving tabindex, shared by both densities. Merged
+	// (not spread) with the mobile long-press props: react-aria's pressProps
+	// carries its own onClick for its internal press bookkeeping, and a plain
+	// object spread would silently drop whichever onClick landed second
+	// instead of running both.
+	const rowInteractionProps = mergeProps(
+		{
+			"data-message-row": true,
+			"data-message-id": messageId,
+			role: "option" as const,
+			"aria-selected": isChecked,
+			tabIndex: isTabStop ? 0 : -1,
+			onClick: handleRowClick,
+			onMouseDown: handleRowMouseDown,
+			onMouseEnter: prefetchMessage,
+			onFocus: handleRowFocus,
+		},
+		isDesktop ? {} : longPressProps,
+	);
 
 	const unread = !thread.isRead;
 
@@ -210,12 +230,16 @@ const MessageListItemComponent = ({
 					selectedMessageId: thread.messageId,
 				})}
 				{...rowInteractionProps}
-				{...(!isDesktop && longPressHandlers.handlers)}
 				className={cn(
 					compactRowClass({ active: isSelected, focused: isFocused }),
 					"outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset",
 					isChecked && "bg-accent-soft",
-					!isDesktop && "min-h-11",
+					// 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. react-aria
+					// suppresses contextmenu/text-selection but not iOS's callout —
+					// it fires no cancelable event, so CSS is the only lever.
+					!isDesktop && "min-h-11 select-none [-webkit-touch-callout:none]",
 				)}
 			>
 				<CompactRowBody thread={rowData} />
@@ -235,13 +259,13 @@ const MessageListItemComponent = ({
 				selectedMessageId: thread.messageId,
 			})}
 			{...rowInteractionProps}
-			{...(!isDesktop && longPressHandlers.handlers)}
 			className={cn(
 				"group",
 				comfortableRowClass({ active: isSelected, focused: isFocused }),
 				"outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset",
 				isChecked && "bg-accent-soft",
-				!isDesktop && "min-h-11",
+				// See the compact-density Link above for why both are required.
+				!isDesktop && "min-h-11 select-none [-webkit-touch-callout:none]",
 			)}
 		>
 			{/* Absolute unread dot — 6px gutter from the left pane hairline */}

package/src/hooks/useVisualViewport.test.ts

@@ -3,8 +3,7 @@ import { beforeEach, describe, test } from "node:test";
 
 /**
  * Unit test for useVisualViewport hook logic.
- * Tests the core behaviour without React — mirrors the pattern used
- * by useLongPress.test.ts in this project.
+ * Tests the core behaviour without React.
  */
 
 const KEYBOARD_THRESHOLD = 150;

package/src/hooks/useLongPress.test.ts

@@ -1,291 +0,0 @@
-import assert from "node:assert";
-import { beforeEach, describe, mock, test } from "node:test";
-
-/**
- * Test harness for useLongPress. Since we can't use React Testing Library,
- * we test the handler logic directly by simulating pointer events and timers.
- */
-
-interface MockPointerEvent {
-	clientX: number;
-	clientY: number;
-}
-
-const createPointerEvent = (x: number, y: number): MockPointerEvent => ({
-	clientX: x,
-	clientY: y,
-});
-
-/**
- * Minimal implementation of useLongPress logic for testing.
- * Matches the hook's behavior without React dependencies.
- */
-class LongPressSimulator {
-	private timer: ReturnType<typeof setTimeout> | null = null;
-	private startPos: { x: number; y: number } | null = null;
-	private readonly MOVEMENT_THRESHOLD = 8;
-
-	constructor(
-		private readonly onLongPress: () => void,
-		private readonly delayMs: number = 500,
-	) {}
-
-	onPointerDown(e: MockPointerEvent): void {
-		this.clearTimer();
-		this.startPos = { x: e.clientX, y: e.clientY };
-		this.timer = setTimeout(() => {
-			this.onLongPress();
-			this.clearTimer();
-		}, this.delayMs);
-	}
-
-	onPointerMove(e: MockPointerEvent): void {
-		if (!this.startPos) return;
-
-		const dx = e.clientX - this.startPos.x;
-		const dy = e.clientY - this.startPos.y;
-		const distance = Math.sqrt(dx * dx + dy * dy);
-
-		if (distance > this.MOVEMENT_THRESHOLD) {
-			this.clearTimer();
-		}
-	}
-
-	onPointerUp(): void {
-		this.clearTimer();
-	}
-
-	onPointerCancel(): void {
-		this.clearTimer();
-	}
-
-	private clearTimer(): void {
-		if (this.timer) {
-			clearTimeout(this.timer);
-			this.timer = null;
-		}
-		this.startPos = null;
-	}
-
-	/** Test helper: check if timer is active */
-	hasActiveTimer(): boolean {
-		return this.timer !== null;
-	}
-
-	/** Test helper: cleanup */
-	cleanup(): void {
-		this.clearTimer();
-	}
-}
-
-describe("useLongPress", () => {
-	beforeEach(() => {
-		// Reset any timers between tests
-		mock.restoreAll();
-	});
-
-	test("fires callback after delay with no movement", async () => {
-		const onLongPress = mock.fn();
-		const sim = new LongPressSimulator(onLongPress, 500);
-
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Wait for the delay
-		await new Promise((resolve) => setTimeout(resolve, 550));
-
-		assert.strictEqual(onLongPress.mock.calls.length, 1);
-		sim.cleanup();
-	});
-
-	test("does not fire if pointer moves more than 8px", async () => {
-		const onLongPress = mock.fn();
-		const sim = new LongPressSimulator(onLongPress, 500);
-
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Move 10 pixels (more than threshold of 8)
-		sim.onPointerMove(createPointerEvent(110, 100));
-
-		// Wait beyond the delay
-		await new Promise((resolve) => setTimeout(resolve, 550));
-
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			0,
-			"callback should not fire after moving > threshold",
-		);
-		sim.cleanup();
-	});
-
-	test("does not fire on early pointerup", async () => {
-		const onLongPress = mock.fn();
-		const sim = new LongPressSimulator(onLongPress, 500);
-
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Release before delay completes
-		await new Promise((resolve) => setTimeout(resolve, 100));
-		sim.onPointerUp();
-
-		// Wait beyond the original delay
-		await new Promise((resolve) => setTimeout(resolve, 500));
-
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			0,
-			"callback should not fire after early pointerup",
-		);
-		sim.cleanup();
-	});
-
-	test("does not fire on pointercancel", async () => {
-		const onLongPress = mock.fn();
-		const sim = new LongPressSimulator(onLongPress, 500);
-
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Cancel before delay completes
-		await new Promise((resolve) => setTimeout(resolve, 100));
-		sim.onPointerCancel();
-
-		// Wait beyond the original delay
-		await new Promise((resolve) => setTimeout(resolve, 500));
-
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			0,
-			"callback should not fire after pointercancel",
-		);
-		sim.cleanup();
-	});
-
-	test("respects custom delayMs", async () => {
-		const onLongPress = mock.fn();
-		const customDelay = 200;
-		const sim = new LongPressSimulator(onLongPress, customDelay);
-
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Wait less than custom delay
-		await new Promise((resolve) => setTimeout(resolve, 150));
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			0,
-			"should not fire before custom delay",
-		);
-
-		// Wait past custom delay
-		await new Promise((resolve) => setTimeout(resolve, 100));
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			1,
-			"should fire after custom delay",
-		);
-		sim.cleanup();
-	});
-
-	test("allows movement within 8px threshold", async () => {
-		const onLongPress = mock.fn();
-		const sim = new LongPressSimulator(onLongPress, 500);
-
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Move 7 pixels (within threshold)
-		sim.onPointerMove(createPointerEvent(107, 100));
-
-		// Wait for the delay
-		await new Promise((resolve) => setTimeout(resolve, 550));
-
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			1,
-			"callback should fire when movement is within threshold",
-		);
-		sim.cleanup();
-	});
-
-	test("calculates diagonal movement correctly", async () => {
-		const onLongPress = mock.fn();
-		const sim = new LongPressSimulator(onLongPress, 500);
-
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Move 6px in both x and y (diagonal distance ~8.48px > 8px threshold)
-		sim.onPointerMove(createPointerEvent(106, 106));
-
-		// Wait beyond the delay
-		await new Promise((resolve) => setTimeout(resolve, 550));
-
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			0,
-			"callback should not fire when diagonal movement exceeds threshold",
-		);
-		sim.cleanup();
-	});
-
-	test("ignores pointer move before pointer down", async () => {
-		const onLongPress = mock.fn();
-		const sim = new LongPressSimulator(onLongPress, 500);
-
-		// Move without pressing down first
-		sim.onPointerMove(createPointerEvent(200, 200));
-
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Wait for the delay
-		await new Promise((resolve) => setTimeout(resolve, 550));
-
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			1,
-			"callback should fire - earlier move should be ignored",
-		);
-		sim.cleanup();
-	});
-
-	test("resets on new pointer down", async () => {
-		const onLongPress = mock.fn();
-		const sim = new LongPressSimulator(onLongPress, 500);
-
-		// First press
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Wait a bit
-		await new Promise((resolve) => setTimeout(resolve, 200));
-
-		// New press at different location (should reset timer)
-		sim.onPointerDown(createPointerEvent(200, 200));
-
-		// Wait for delay from second press
-		await new Promise((resolve) => setTimeout(resolve, 550));
-
-		// Should only fire once (from second press)
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			1,
-			"callback should fire once from second press",
-		);
-		sim.cleanup();
-	});
-
-	test("exact 8px movement does not cancel", async () => {
-		const onLongPress = mock.fn();
-		const sim = new LongPressSimulator(onLongPress, 500);
-
-		sim.onPointerDown(createPointerEvent(100, 100));
-
-		// Move exactly 8 pixels
-		sim.onPointerMove(createPointerEvent(108, 100));
-
-		// Wait for the delay
-		await new Promise((resolve) => setTimeout(resolve, 550));
-
-		assert.strictEqual(
-			onLongPress.mock.calls.length,
-			1,
-			"callback should fire - movement exactly at threshold is allowed",
-		);
-		sim.cleanup();
-	});
-});

package/src/hooks/useLongPress.ts

@@ -1,87 +0,0 @@
-import { useCallback, useRef } from "react";
-
-interface UseLongPressOptions {
-	onLongPress: () => void;
-	delayMs?: number;
-}
-
-interface LongPressHandlers {
-	onPointerDown: (e: PointerEvent | React.PointerEvent) => void;
-	onPointerMove: (e: PointerEvent | React.PointerEvent) => void;
-	onPointerUp: () => void;
-	onPointerCancel: () => void;
-}
-
-const MOVEMENT_THRESHOLD = 8; // pixels
-
-/**
- * Hook for detecting long-press gestures on touch/pointer devices.
- *
- * @param onLongPress - Callback fired after the delay if the pointer hasn't moved
- * @param delayMs - How long to wait before firing (default 500ms)
- *
- * @returns Pointer event handlers to spread onto your element
- *
- * @example
- * const { handlers } = useLongPress({ onLongPress: () => console.log('long press!') });
- * return <div {...handlers}>Press and hold me</div>;
- */
-export const useLongPress = ({
-	onLongPress,
-	delayMs = 500,
-}: UseLongPressOptions): { handlers: LongPressHandlers } => {
-	const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-	const startPosRef = useRef<{ x: number; y: number } | null>(null);
-
-	const clearTimer = useCallback(() => {
-		if (timerRef.current) {
-			clearTimeout(timerRef.current);
-			timerRef.current = null;
-		}
-		startPosRef.current = null;
-	}, []);
-
-	const onPointerDown = useCallback(
-		(e: PointerEvent | React.PointerEvent) => {
-			clearTimer();
-			startPosRef.current = { x: e.clientX, y: e.clientY };
-			timerRef.current = setTimeout(() => {
-				onLongPress();
-				clearTimer();
-			}, delayMs);
-		},
-		[onLongPress, delayMs, clearTimer],
-	);
-
-	const onPointerMove = useCallback(
-		(e: PointerEvent | React.PointerEvent) => {
-			if (!startPosRef.current) return;
-
-			const dx = e.clientX - startPosRef.current.x;
-			const dy = e.clientY - startPosRef.current.y;
-			const distance = Math.sqrt(dx * dx + dy * dy);
-
-			if (distance > MOVEMENT_THRESHOLD) {
-				clearTimer();
-			}
-		},
-		[clearTimer],
-	);
-
-	const onPointerUp = useCallback(() => {
-		clearTimer();
-	}, [clearTimer]);
-
-	const onPointerCancel = useCallback(() => {
-		clearTimer();
-	}, [clearTimer]);
-
-	return {
-		handlers: {
-			onPointerDown,
-			onPointerMove,
-			onPointerUp,
-			onPointerCancel,
-		},
-	};
-};