@remit/web-client 0.0.321 → 0.0.323

package/src/components/settings/settings-filter.stories.tsx

@@ -10,9 +10,7 @@ import { FilterEditor } from "./FilterEditor";
  * `Flows/Settings Filters` — editing a standing filter in the same chip editor
  * the Organize surface uses (RFC 038 D6), rendered from the real web-client
  * component the settings page mounts. Each story opens a persisted filter into
- * the editor: a literal rule, an anchored rule with its widen chip, an
- * until-a-date rule, and the degraded case where the deployment cannot evaluate
- * the anchor and the widen lists inactive (D4).
+ * the editor: a literal rule and an until-a-date rule.
  */
 
 const ACCOUNT_ID = "acc-1";
@@ -47,7 +45,6 @@ const makeFilter = (
 	scope: "Standing",
 	state: "Active",
 	disabledReason: "None",
-	hasAnchor: false,
 	ruleChangedAt: 0,
 	actionChangedAt: 0,
 	matchOperator: "And",
@@ -65,7 +62,7 @@ const makeFilter = (
 /**
  * A bare client with no backend. The editor opens on `loading` and its preview
  * settles to the count region's error state — these stories exercise the editor
- * chrome (chips, read-only lifecycle, the widen chip), not the live count.
+ * chrome (chips, read-only lifecycle), not the live count.
  */
 function seededClient(): QueryClient {
 	return new QueryClient({
@@ -127,22 +124,6 @@ export const EditStandingRule: Story = {
 	),
 };
 
-/** A filter with a semantic anchor — the widen lists as an active chip. */
-export const EditAnchoredRule: Story = {
-	name: "Edit Anchored Rule",
-	render: () => (
-		<SheetStage>
-			<FilterEditor
-				accountId={ACCOUNT_ID}
-				filter={makeFilter({ hasAnchor: true, name: "GitHub" })}
-				folders={FOLDERS}
-				labels={LABELS}
-				onClose={() => undefined}
-			/>
-		</SheetStage>
-	),
-};
-
 /** A temporary filter — the scope loads as until-a-date with the stored date. */
 export const EditUntilADate: Story = {
 	name: "Edit Until A Date",
@@ -162,24 +143,3 @@ export const EditUntilADate: Story = {
 		</SheetStage>
 	),
 };
-
-/**
- * The deployment cannot evaluate the filter's anchor (RFC 038 D4): the widen
- * chip lists inactive, the rule matches by its literal clauses only, and the
- * dead anchor is removable.
- */
-export const DegradedAnchor: Story = {
-	name: "Degraded Anchor",
-	render: () => (
-		<SheetStage>
-			<FilterEditor
-				accountId={ACCOUNT_ID}
-				filter={makeFilter({ hasAnchor: true, name: "Newsletters" })}
-				folders={FOLDERS}
-				labels={LABELS}
-				semanticUnavailable
-				onClose={() => undefined}
-			/>
-		</SheetStage>
-	),
-};

package/src/components/settings/warnings.stories.tsx

@@ -0,0 +1,290 @@
+import type {
+	RemitImapQuarantineResponse,
+	RemitImapSyncWarningResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { HttpResponse, http } from "msw";
+import { expect, userEvent, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import {
+	MINUTE,
+	mailboxIdFor,
+	mailWorld,
+	NOW,
+	PERSONAL,
+} from "@/mocks/story-frame/mail-world";
+
+const setAside = (
+	id: string,
+	role: "Inbox" | "Archive",
+	failureCode: RemitImapQuarantineResponse["failureCode"],
+	failureMessage: string,
+): RemitImapQuarantineResponse => ({
+	quarantineId: `q-${id}`,
+	accountConfigId: "cfg-1",
+	accountId: PERSONAL,
+	mailboxId: mailboxIdFor(PERSONAL, role),
+	uidValidity: 1_712_000_000,
+	uid: 40_217,
+	mailboxRole: role,
+	mailboxPath: role === "Inbox" ? "INBOX" : "Archive",
+	quarantinedAt: NOW,
+	attempts: 3,
+	failureStage: "BodyParse",
+	failureCode,
+	failureMessage,
+	workerVersion: "worker 1.0.0",
+	contentType: "multipart/mixed",
+	sizeBytes: 184_233,
+	structure: [{ depth: 0, contentType: "multipart/mixed" }],
+	createdAt: NOW,
+	updatedAt: NOW,
+});
+
+const failing = (
+	uid: number,
+	role: "Inbox" | "Archive",
+	stage: RemitImapSyncWarningResponse["stage"],
+	attempts: number,
+): RemitImapSyncWarningResponse => ({
+	syncWarningId: `w-${uid}`,
+	accountConfigId: "cfg-1",
+	accountId: PERSONAL,
+	mailboxId: mailboxIdFor(PERSONAL, role),
+	uidValidity: 1_712_000_000,
+	uid,
+	stage,
+	attempts,
+	createdAt: NOW - uid * MINUTE,
+});
+
+const unreadableBody = setAside(
+	"1",
+	"Inbox",
+	"UnreadableBody",
+	"multipart boundary was never closed",
+);
+const unknownCharset = setAside(
+	"2",
+	"Archive",
+	"UnknownCharset",
+	"declared charset is not a known encoding",
+);
+
+const bodyGaveUp = failing(3, "Inbox", "Body", 3);
+const headerRetrying = failing(5, "Archive", "Header", 6);
+
+const meta = {
+	title: "Playground/Shipped/Settings/Warnings",
+	component: AppStory,
+	args: { url: "/settings/warnings" },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(mailWorld()) },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Empty: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(/Every message is syncing/),
+		).toBeVisible();
+		await expect(
+			canvas.getByText(/Every message has been read successfully/),
+		).toBeVisible();
+	},
+};
+
+export const Mixed: Story = {
+	parameters: {
+		msw: {
+			handlers: mailHandlers(
+				mailWorld({
+					syncWarnings: [bodyGaveUp, headerRetrying],
+					syncWarningsTotal: 2,
+					quarantine: [unreadableBody],
+				}),
+			),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Gave up")).toBeVisible();
+		await expect(canvas.getByText("Retrying")).toBeVisible();
+		await expect(
+			canvas.getByText(/multipart boundary was never closed/),
+		).toBeVisible();
+	},
+};
+
+export const OverCap: Story = {
+	parameters: {
+		msw: {
+			handlers: mailHandlers(
+				mailWorld({
+					syncWarnings: [bodyGaveUp, headerRetrying],
+					syncWarningsTotal: 4_812,
+				}),
+			),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(/Showing the 2 newest of 4812/),
+		).toBeVisible();
+	},
+};
+
+export const QuarantineAlert: Story = {
+	parameters: {
+		msw: {
+			handlers: mailHandlers(
+				mailWorld({ quarantine: [unreadableBody, unknownCharset] }),
+			),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("2 messages could not be read."),
+		).toBeVisible();
+	},
+};
+
+export const Loading: Story = {
+	parameters: {
+		msw: {
+			handlers: [
+				http.get(
+					"/api/me/quarantine",
+					() => new Promise<never>(() => undefined),
+				),
+				...mailHandlers(mailWorld()),
+			],
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("Checking for warnings…"),
+		).toBeVisible();
+	},
+};
+
+export const ReadFailure: Story = {
+	parameters: {
+		msw: {
+			handlers: [
+				http.get("/api/me/quarantine", () => HttpResponse.error()),
+				...mailHandlers(mailWorld()),
+			],
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("The warnings could not be read."),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Report this" }),
+		).toBeVisible();
+	},
+};
+
+export const SignedOut: Story = {
+	parameters: {
+		msw: {
+			handlers: [
+				http.get("/api/me/quarantine", () =>
+					HttpResponse.json(
+						{ status: 401, message: "Unauthorized" },
+						{ status: 401 },
+					),
+				),
+				...mailHandlers(mailWorld()),
+			],
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("Your session has ended."),
+		).toBeVisible();
+		await expect(canvas.queryByText(/Every message is syncing/)).toBeNull();
+	},
+};
+
+const failingWorld = () =>
+	mailHandlers(mailWorld({ syncWarnings: [bodyGaveUp], syncWarningsTotal: 1 }));
+
+export const NavDot: Story = {
+	parameters: { msw: { handlers: failingWorld() } },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Sync warnings")).toBeInTheDocument();
+	},
+};
+
+export const DotOnMail: Story = {
+	args: { url: "/mail/flagged" },
+	parameters: { msw: { handlers: failingWorld() } },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByRole("button", { name: "Settings — Sync warnings" }),
+		).toBeVisible();
+	},
+};
+
+export const NoDotOnMail: Story = {
+	args: { url: "/mail/flagged" },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByRole("button", { name: "Settings" }),
+		).toBeVisible();
+		await expect(canvas.queryByText("Sync warnings")).toBeNull();
+	},
+};
+
+export const DotOnPhone: Story = {
+	args: { url: "/mail/flagged" },
+	globals: { viewport: { value: "mobile", isRotated: false } },
+	parameters: { msw: { handlers: failingWorld() } },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const [menu] = await canvas.findAllByRole("button", { name: "Menu" });
+		await userEvent.click(menu);
+		const page = within(canvasElement.ownerDocument.body);
+		await expect(await page.findByText("Sync warnings")).toBeInTheDocument();
+	},
+};
+
+export const DotOnSignedOut: Story = {
+	args: { url: "/mail/flagged" },
+	parameters: {
+		msw: {
+			handlers: [
+				http.get("/api/me/quarantine", () =>
+					HttpResponse.json(
+						{ status: 401, message: "Unauthorized" },
+						{ status: 401 },
+					),
+				),
+				...mailHandlers(mailWorld()),
+			],
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByRole("button", { name: "Settings — Session ended" }),
+		).toBeVisible();
+	},
+};

package/src/components/ui/ErrorBannerProvider.tsx

@@ -1,3 +1,8 @@
+import {
+	type ErrorBannerAction,
+	type ErrorBannerEntry,
+	ErrorBannerStack,
+} from "@remit/ui";
 import {
 	createContext,
 	type ReactNode,
@@ -9,13 +14,10 @@ import {
 import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
 import { isAlwaysFatal } from "@/lib/error-classifier";
 import { reportFatalError } from "@/lib/fatal-error";
-import { ErrorBannerStack } from "./ErrorBannerStack.js";
 import {
 	appendBanner,
 	buildEntry,
 	dismissBanner,
-	type ErrorBannerAction,
-	type ErrorBannerEntry,
 	type PushErrorInput,
 } from "./error-banners.js";
 

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

@@ -1,11 +1,10 @@
 import assert from "node:assert";
 import { describe, test } from "node:test";
+import type { ErrorBannerEntry } from "@remit/ui";
 import {
 	appendBanner,
-	buildEntry,
 	buildMutationErrorBanner,
 	dismissBanner,
-	type ErrorBannerEntry,
 	formatErrorDetail,
 	isMessageNotFoundError,
 } from "./error-banners.js";
@@ -20,26 +19,6 @@ const make = (
 	...overrides,
 });
 
-describe("buildEntry", () => {
-	test("defaults to error severity", () => {
-		const entry = buildEntry({ title: "boom" }, "id-1", 1000);
-		assert.equal(entry.severity, "error");
-		assert.equal(entry.title, "boom");
-		assert.equal(entry.id, "id-1");
-		assert.equal(entry.createdAt, 1000);
-	});
-
-	test("preserves explicit severity and detail", () => {
-		const entry = buildEntry(
-			{ severity: "warning", title: "watch", detail: "context" },
-			"id-2",
-			2000,
-		);
-		assert.equal(entry.severity, "warning");
-		assert.equal(entry.detail, "context");
-	});
-});
-
 describe("appendBanner", () => {
 	test("adds an entry at the end of the stack", () => {
 		const a = make({ id: "1", title: "first" });

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

@@ -1,23 +1,9 @@
-export type ErrorBannerSeverity = "error" | "warning" | "info";
-
-/**
- * A way out of the banner. A failure the user cannot act on is still theirs to
- * report, and a link they have to assemble themselves is one nobody follows.
- */
-export interface ErrorBannerAction {
-	label: string;
-	href: string;
-}
-
-export interface ErrorBannerEntry {
-	id: string;
-	severity: ErrorBannerSeverity;
-	title: string;
-	detail?: string;
-	action?: ErrorBannerAction;
-	createdAt: number;
-}
-
+import type {
+	ErrorBannerAction,
+	ErrorBannerEntry,
+	ErrorBannerSeverity,
+} from "@remit/ui";
+import { codedApiErrorBody } from "@/lib/api";
 export interface PushErrorInput {
 	severity?: ErrorBannerSeverity;
 	title: string;
@@ -67,6 +53,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/hooks/calendar/useCalendarCollectionWrites.ts

@@ -10,6 +10,7 @@
  * editor's picker and the address filter all read. A delete or a rezone also
  * moves or removes occurrences, so the event reads are invalidated with it.
  */
+
 import {
 	calendarDetailOperationsDeleteCalendarMutation,
 	calendarDetailOperationsUpdateCalendarMutation,
@@ -20,9 +21,9 @@ import type {
 	RemitImapCreateCalendarInput,
 	RemitImapUpdateCalendarInput,
 } from "@remit/api-http-client/types.gen.ts";
+import { formatErrorMessage } from "@remit/ui";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useMemo } from "react";
-import { formatErrorMessage } from "@/components/ui/ErrorState";
 import { softErrorStatuses } from "@/lib/error-classifier";
 import { useInvalidateCalendarReads } from "./useCalendarWrites";
 

package/src/hooks/calendar/useCalendarSuggestions.ts

@@ -11,6 +11,7 @@
  * must state from a fault it must not swallow. A lapsed session is neither, and
  * escalates the way it does everywhere else.
  */
+
 import {
 	calendarSuggestionActionOperationsAcceptCalendarSuggestionMutation,
 	calendarSuggestionActionOperationsDeclineCalendarSuggestionMutation,
@@ -24,6 +25,7 @@ import type {
 	RemitImapAcceptCalendarSuggestionInput,
 	RemitImapCalendarSuggestionResponse,
 } from "@remit/api-http-client/types.gen.ts";
+import { formatErrorMessage } from "@remit/ui";
 import {
 	type QueryClient,
 	useMutation,
@@ -31,7 +33,6 @@ import {
 	useQueryClient,
 } from "@tanstack/react-query";
 import { useCallback, useMemo } from "react";
-import { formatErrorMessage } from "@/components/ui/ErrorState";
 import { softErrorStatuses } from "@/lib/error-classifier";
 
 const SUGGESTION_META = softErrorStatuses(400, 404);

package/src/hooks/calendar/useCalendarWrites.ts

@@ -13,6 +13,7 @@
  * statuses this surface owns, so a lapsed session takes the screen the way it
  * does everywhere else.
  */
+
 import {
 	calendarEventDetailOperationsDeleteCalendarEventMutation,
 	calendarEventDetailOperationsUpdateCalendarEventMutation,
@@ -24,9 +25,9 @@ import type {
 	RemitImapUpdateCalendarEventInput,
 } from "@remit/api-http-client/types.gen.ts";
 import type { RecurrenceScope } from "@remit/ui";
+import { formatErrorMessage } from "@remit/ui";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useMemo } from "react";
-import { formatErrorMessage } from "@/components/ui/ErrorState";
 import { getErrorStatus, softErrorStatuses } from "@/lib/error-classifier";
 
 /** The refusals a calendar surface renders itself. A 401 is not among them. */

package/src/hooks/intelligence-calendar.render.test.ts

@@ -53,7 +53,6 @@ const sender: IntelligenceData = {
 		summary: "Signed by example.test.",
 	},
 	category: { value: "personal" },
-	similar: [],
 };
 
 const calendars = [

package/src/hooks/useDeleteMessages.test.ts

@@ -1,10 +1,7 @@
 import assert from "node:assert";
 import { describe, test } from "node:test";
 import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
-import {
-	dropDeletedThreads,
-	removeMessagesFromItems,
-} from "./useDeleteMessages.js";
+import { dropDeletedThreads } from "./useDeleteMessages.js";
 
 const make = (
 	overrides: Partial<RemitImapThreadMessageResponse> & {
@@ -26,44 +23,6 @@ const make = (
 		...overrides,
 	}) as RemitImapThreadMessageResponse;
 
-describe("removeMessagesFromItems", () => {
-	test("drops items whose messageId is in the set", () => {
-		const items = [
-			make({ messageId: "m1", threadMessageId: "tm1" }),
-			make({ messageId: "m2", threadMessageId: "tm2" }),
-			make({ messageId: "m3", threadMessageId: "tm3" }),
-		];
-		const got = removeMessagesFromItems(items, new Set(["m2"]));
-		assert.deepStrictEqual(
-			got.map((i) => i.messageId),
-			["m1", "m3"],
-		);
-	});
-
-	test("returns the input unchanged when nothing matches", () => {
-		const items = [
-			make({ messageId: "m1", threadMessageId: "tm1" }),
-			make({ messageId: "m2", threadMessageId: "tm2" }),
-		];
-		const got = removeMessagesFromItems(items, new Set(["does-not-exist"]));
-		assert.equal(got.length, 2);
-	});
-
-	test("returns an empty array when all items match", () => {
-		const items = [
-			make({ messageId: "m1", threadMessageId: "tm1" }),
-			make({ messageId: "m2", threadMessageId: "tm2" }),
-		];
-		const got = removeMessagesFromItems(items, new Set(["m1", "m2"]));
-		assert.deepStrictEqual(got, []);
-	});
-
-	test("returns an empty array for empty input", () => {
-		const got = removeMessagesFromItems([], new Set(["m1"]));
-		assert.deepStrictEqual(got, []);
-	});
-});
-
 describe("dropDeletedThreads (#212)", () => {
 	// Belt-and-braces UI filter for issue #212. If the backend regresses and
 	// returns a soft-deleted row, the inbox list must still hide it. The

package/src/hooks/useFilters.test.ts

@@ -32,7 +32,6 @@ const filter = (
 		name: "Travel",
 		scope: "Standing",
 		state: "Active",
-		hasAnchor: false,
 		ruleChangedAt: 0,
 		actionChangedAt: 0,
 		matchOperator: "And",
@@ -79,13 +78,6 @@ describe("buildFilterListKey", () => {
 			filterOperationsListFiltersQueryKey({ path: { accountId: ACCOUNT_ID } }),
 		);
 	});
-
-	test("is distinct per account, so one account's list is not invalidated by another's write", () => {
-		assert.notDeepEqual(
-			buildFilterListKey("acc-1"),
-			buildFilterListKey("acc-2"),
-		);
-	});
 });
 
 describe("useFilterList", () => {

package/src/hooks/useFollowFocusOpen.render.test.ts

@@ -12,10 +12,7 @@ import assert from "node:assert/strict";
 import { afterEach, describe, it } from "node:test";
 import { createElement } from "react";
 import { createDomHarness, type DomHarness } from "../test-support/dom";
-import {
-	FOLLOW_FOCUS_DELAY_MS,
-	useFollowFocusOpen,
-} from "./useFollowFocusOpen";
+import { useFollowFocusOpen } from "./useFollowFocusOpen";
 
 let harness: DomHarness | undefined;
 
@@ -146,10 +143,3 @@ describe("useFollowFocusOpen", () => {
 		assert.deepEqual(driver.opened, []);
 	});
 });
-
-describe("FOLLOW_FOCUS_DELAY_MS", () => {
-	it("sits above key repeat and below what reads as a wait", () => {
-		assert.ok(FOLLOW_FOCUS_DELAY_MS >= 60);
-		assert.ok(FOLLOW_FOCUS_DELAY_MS <= 250);
-	});
-});