@remit/web-client 0.0.321 → 0.0.322

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.321",
+  "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/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/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.
  *