@remit/web-client 0.0.320 → 0.0.322

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.320",
+  "version": "0.0.322",
   "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/ConversationView.tsx

@@ -10,7 +10,6 @@ import { useKeyboardNavigation } from "@/hooks/useKeyboardNavigation";
 import { useMailboxAccount } from "@/hooks/useMailboxAccount";
 import { useMarkAsRead } from "@/hooks/useMarkAsRead";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
-import { useSwipeNavigation } from "@/hooks/useSwipeNavigation";
 import { useToggleStar } from "@/hooks/useToggleStar";
 import { type ReplyMode, useOpenReply, useReplySurface } from "@/routing";
 import { AuthenticityBanner } from "./AuthenticityBanner";
@@ -98,10 +97,6 @@ export const ConversationView = ({
 	listOnScreen = false,
 }: ConversationViewProps) => {
 	const isDesktop = useIsDesktop();
-	const { handlers: swipeHandlers } = useSwipeNavigation({
-		onSwipeLeft: onSwipeNext,
-		onSwipeRight: onSwipePrevious,
-	});
 	const { accountId: mailboxAccountId } = useMailboxAccount(mailboxId);
 	const {
 		data: messagesResponse,
@@ -482,8 +477,7 @@ export const ConversationView = ({
 	// Mobile: the kit MobileReadingPane owns the chrome — a top app bar with
 	// back, the email subject and the intelligence toggle (the host owns the
 	// drawer). Each expanded card owns its per-message action bar; there is no
-	// thread-level reply footer. The phishing warning leads the scroll content;
-	// horizontal swipe between messages is wired through touchHandlers (#693).
+	// thread-level reply footer. The phishing warning leads the scroll content.
 	if (!isDesktop) {
 		return (
 			<MobileReadingPane
@@ -491,7 +485,8 @@ export const ConversationView = ({
 				onBack={onBack ?? (() => undefined)}
 				intelligenceOpen={mobileIntelligenceOpen}
 				onToggleIntelligence={onOpenIntelligence}
-				touchHandlers={swipeHandlers}
+				onSwipeNext={onSwipeNext}
+				onSwipePrevious={onSwipePrevious}
 			>
 				{authenticity?.dkimMismatch && (
 					<AuthenticityBanner

package/src/components/mail/MessageCard.tsx

@@ -10,7 +10,10 @@ import { BadgeCheck, Paperclip, Star } from "lucide-react";
 import { useState } from "react";
 import { EmptyState } from "@/components/ui/EmptyState";
 import { ErrorState } from "@/components/ui/ErrorState";
-import { isMessageNotFoundError } from "@/components/ui/error-banners";
+import {
+	isMessageGoneFromServerError,
+	isMessageNotFoundError,
+} from "@/components/ui/error-banners";
 import { toDisplayCategory } from "@/lib/display-category";
 import { formatDatePreset } from "@/lib/format";
 import { AutoMovedIndicator } from "./AutoMovedIndicator";
@@ -310,6 +313,10 @@ const ExpandedCard = ({
 							<div className="h-4 bg-surface-sunken rounded w-3/4" />
 							<div className="h-4 bg-surface-sunken rounded w-1/2" />
 						</div>
+					) : isError && isMessageGoneFromServerError(error) ? (
+						<div className="mt-3">
+							<EmptyState message="This message is no longer on the mail server. It was moved or deleted in another mail app." />
+						</div>
 					) : isError && isMessageNotFoundError(error) ? (
 						<div className="mt-3">
 							<EmptyState message="This message has been deleted" />

package/src/components/mail/MessageRow.tsx

@@ -188,10 +188,8 @@ const MessageRowComponent = ({
 	}, [prefetchMessage, onFocusRow, messageId]);
 
 	// 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.
+	// 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": "",

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

@@ -117,6 +117,7 @@ const press = (
 	const event = new PointerEvent("pointerdown", {
 		bubbles: true,
 		cancelable: true,
+		buttons: 1,
 		pointerId: 1,
 		clientX: 10,
 		clientY: 10,

package/src/components/mail/message-gone.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { HttpResponse, http } from "msw";
+import { expect, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { composeWorld, messageUrl } from "@/mocks/story-frame/compose-world";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+
+const world = composeWorld();
+
+const goneFromServer = http.get("/api/messages/msg-q3-planning", () =>
+	HttpResponse.json(
+		{
+			code: "message_gone_from_server",
+			message: "This message is no longer on the mail server.",
+			details: { messageId: "msg-q3-planning" },
+		},
+		{ status: 404 },
+	),
+);
+
+const meta = {
+	title: "Playground/Shipped/Mail/Message gone from server",
+	component: AppStory,
+	args: { url: messageUrl("q3-planning") },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: [goneFromServer, ...mailHandlers(world)] },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const MovedOrDeletedElsewhere: Story = {
+	play: async () => {
+		await expect(
+			await within(document.body).findByText(
+				"This message is no longer on the mail server. It was moved or deleted in another mail app.",
+			),
+		).toBeVisible();
+	},
+};

package/src/components/ui/error-banners.ts

@@ -1,3 +1,4 @@
+import { codedApiErrorBody } from "@/lib/api";
 export type ErrorBannerSeverity = "error" | "warning" | "info";
 
 /**
@@ -67,6 +68,9 @@ export const formatErrorDetail = (error: unknown): string | undefined => {
 	return undefined;
 };
 
+export const isMessageGoneFromServerError = (error: unknown): boolean =>
+	codedApiErrorBody(error)?.code === "message_gone_from_server";
+
 /**
  * Detect a "describeMessage hit a deleted/missing row" error.
  *

package/src/mocks/story-frame/touch.ts

@@ -5,6 +5,7 @@ const touch = (target: HTMLElement, type: string) => {
 	target.dispatchEvent(
 		new PointerEvent(type, {
 			bubbles: true,
+			buttons: type === "pointerup" ? 0 : 1,
 			pointerType: "touch",
 			pointerId: 1,
 			isPrimary: true,

package/src/hooks/useSwipeNavigation.test.ts

@@ -1,35 +0,0 @@
-import assert from "node:assert";
-import { describe, test } from "node:test";
-import { resolveSwipe } from "./useSwipeNavigation.js";
-
-const THRESHOLD = 60;
-
-describe("resolveSwipe", () => {
-	test("classifies a left swipe (next) when dragging right→left", () => {
-		assert.strictEqual(resolveSwipe(-80, 0, THRESHOLD).direction, "left");
-	});
-
-	test("classifies a right swipe (previous) when dragging left→right", () => {
-		assert.strictEqual(resolveSwipe(80, 0, THRESHOLD).direction, "right");
-	});
-
-	test("ignores a gesture shorter than the threshold", () => {
-		assert.strictEqual(resolveSwipe(-40, 0, THRESHOLD).direction, null);
-		assert.strictEqual(resolveSwipe(59, 0, THRESHOLD).direction, null);
-	});
-
-	test("ignores a mostly-vertical gesture so it never hijacks scroll", () => {
-		// Long horizontal travel but even longer vertical travel: this is a scroll.
-		assert.strictEqual(resolveSwipe(70, 200, THRESHOLD).direction, null);
-		assert.strictEqual(resolveSwipe(-70, -200, THRESHOLD).direction, null);
-	});
-
-	test("accepts a horizontal swipe with mild vertical drift", () => {
-		assert.strictEqual(resolveSwipe(-100, 20, THRESHOLD).direction, "left");
-	});
-
-	test("rejects a diagonal gesture that is not horizontally dominant", () => {
-		// dx 70, dy 60: not 1.5x dominant, so treated as ambiguous → no swipe.
-		assert.strictEqual(resolveSwipe(70, 60, THRESHOLD).direction, null);
-	});
-});

package/src/hooks/useSwipeNavigation.ts

@@ -1,99 +0,0 @@
-import { useCallback, useRef } from "react";
-
-export type SwipeDirection = "left" | "right";
-
-interface UseSwipeNavigationOptions {
-	/**
-	 * Swipe left (content advances, finger moves right→left): go to the NEXT
-	 * item — the platform convention for paging through content (photos, mail).
-	 */
-	onSwipeLeft?: () => void;
-	/** Swipe right: go to the PREVIOUS item. */
-	onSwipeRight?: () => void;
-	/** Minimum horizontal travel (px) before a swipe registers. */
-	thresholdPx?: number;
-}
-
-interface SwipeHandlers {
-	onPointerDown: (e: React.PointerEvent) => void;
-	onPointerMove: (e: React.PointerEvent) => void;
-	onPointerUp: (e: React.PointerEvent) => void;
-	onPointerCancel: () => void;
-}
-
-const DEFAULT_THRESHOLD = 60;
-/**
- * A gesture only counts as a horizontal swipe when its horizontal travel
- * dominates the vertical. Anything more vertical than this is the user
- * scrolling the message body, and we leave it alone.
- */
-const HORIZONTAL_DOMINANCE = 1.5;
-
-export interface SwipeResolution {
-	direction: SwipeDirection | null;
-}
-
-/**
- * Pure swipe classifier. Returns the swipe direction, or `null` when the
- * gesture is too short or too vertical to count as a horizontal swipe (so it
- * never hijacks vertical scrolling).
- */
-export const resolveSwipe = (
-	dx: number,
-	dy: number,
-	thresholdPx: number,
-): SwipeResolution => {
-	const absX = Math.abs(dx);
-	const absY = Math.abs(dy);
-	if (absX < thresholdPx) return { direction: null };
-	if (absX < absY * HORIZONTAL_DOMINANCE) return { direction: null };
-	return { direction: dx < 0 ? "left" : "right" };
-};
-
-/**
- * Detects horizontal swipe gestures from pointer events and routes them to
- * next/previous callbacks. Only reacts to touch/pen pointers so mouse drags on
- * desktop never trigger navigation. Vertical scroll is left untouched: a
- * gesture must travel mostly sideways to register.
- */
-export const useSwipeNavigation = ({
-	onSwipeLeft,
-	onSwipeRight,
-	thresholdPx = DEFAULT_THRESHOLD,
-}: UseSwipeNavigationOptions): { handlers: SwipeHandlers } => {
-	const startRef = useRef<{ x: number; y: number } | null>(null);
-
-	const onPointerDown = useCallback((e: React.PointerEvent) => {
-		if (e.pointerType === "mouse") {
-			startRef.current = null;
-			return;
-		}
-		startRef.current = { x: e.clientX, y: e.clientY };
-	}, []);
-
-	const onPointerMove = useCallback(() => {}, []);
-
-	const onPointerUp = useCallback(
-		(e: React.PointerEvent) => {
-			const start = startRef.current;
-			startRef.current = null;
-			if (!start) return;
-			const { direction } = resolveSwipe(
-				e.clientX - start.x,
-				e.clientY - start.y,
-				thresholdPx,
-			);
-			if (direction === "left") onSwipeLeft?.();
-			if (direction === "right") onSwipeRight?.();
-		},
-		[onSwipeLeft, onSwipeRight, thresholdPx],
-	);
-
-	const onPointerCancel = useCallback(() => {
-		startRef.current = null;
-	}, []);
-
-	return {
-		handlers: { onPointerDown, onPointerMove, onPointerUp, onPointerCancel },
-	};
-};