@remit/web-client 0.0.299 → 0.0.301

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

@@ -0,0 +1,162 @@
+import type { RemitImapQuarantineResponse } from "@remit/api-http-client/types.gen.ts";
+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 { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import {
+	mailboxIdFor,
+	mailWorld,
+	NOW,
+	PERSONAL,
+} from "@/mocks/story-frame/mail-world";
+import { withRuntimeConfig } from "@/mocks/story-frame/session";
+
+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 unreadableBody = setAside(
+	"1",
+	"Inbox",
+	"UnreadableBody",
+	"multipart boundary was never closed",
+);
+const unknownCharset = setAside(
+	"2",
+	"Archive",
+	"UnknownCharset",
+	"declared charset is not a known encoding",
+);
+
+const meta = {
+	title: "Playground/Shipped/Settings/Advanced/Overview",
+	component: AppStory,
+	args: { url: "/settings/advanced" },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(mailWorld()) },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Advanced: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(/Every message has been read successfully/),
+		).toBeVisible();
+		await expect(canvas.getByText("About")).toBeVisible();
+		await expect(
+			canvas.queryByRole("link", { name: "Download root certificate" }),
+		).toBeNull();
+	},
+};
+
+export const AdvancedOneQuarantined: Story = {
+	parameters: {
+		msw: {
+			handlers: mailHandlers(mailWorld({ quarantine: [unreadableBody] })),
+		},
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(/multipart boundary was never closed/),
+		).toBeVisible();
+		await expect(canvas.queryByText(/messages could not be read/)).toBeNull();
+	},
+};
+
+export const AdvancedQuarantineAlert: 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 AdvancedQuarantineLoading: 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 messages set aside…"),
+		).toBeVisible();
+	},
+};
+
+export const AdvancedQuarantineUnreadable: 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 list of set-aside messages could not be read.",
+			),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Report this" }),
+		).toBeVisible();
+	},
+};
+
+export const AdvancedTlsInternal: Story = {
+	beforeEach: withRuntimeConfig({ tlsMode: "internal" }),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByRole("link", { name: "Download root certificate" }),
+		).toHaveAttribute("href", "/tls-root-ca.crt");
+	},
+};

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import { mailWorld } from "@/mocks/story-frame/mail-world";
+
+const meta = {
+	title: "Playground/Shipped/Settings/Appearance",
+	component: AppStory,
+	args: { url: "/settings/appearance" },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(mailWorld()) },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Appearance: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const density = await canvas.findByRole("radiogroup", { name: "Density" });
+		await expect(
+			within(density).getByRole("radio", { name: "Comfortable" }),
+		).toBeChecked();
+		const theme = canvas.getByRole("radiogroup", { name: "Theme" });
+		await expect(within(theme).getAllByRole("radio")).toHaveLength(3);
+		await expect(
+			canvas.getByText(/System default follows your OS preference/),
+		).toBeVisible();
+	},
+};

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

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import {
+	accountWithFolders,
+	foldersOf,
+	mailWorld,
+} from "@/mocks/story-frame/mail-world";
+import { makeMailbox } from "@/test-support/fixtures";
+
+const ACCOUNT_ID = "acc-work";
+const EMAIL = "alice@northwind.example";
+
+const folder = (path: string, messageCount: number) =>
+	makeMailbox({
+		accountId: ACCOUNT_ID,
+		mailboxId: `mbx-${path.toLowerCase().replaceAll("/", "-")}`,
+		fullPath: path,
+		messageCount,
+	});
+
+const world = mailWorld({
+	accounts: [accountWithFolders(ACCOUNT_ID, EMAIL, "Work")],
+	mailboxes: [
+		...foldersOf(ACCOUNT_ID),
+		folder("Travel", 0),
+		folder("Travel/Flights", 41),
+		folder("Travel/Hotels", 96),
+		folder("Finance", 0),
+		folder("Finance/Invoices", 12),
+		folder("Family", 230),
+	],
+});
+
+const meta = {
+	title: "Playground/Shipped/Settings/Folder roles",
+	component: AppStory,
+	args: { url: "/settings/folders" },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(world) },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const page = within(document.body);
+
+export const Desktop: Story = {
+	globals: { viewport: { value: "desktop", isRotated: false } },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByRole("heading", { name: `Your folders — ${EMAIL}` }),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("tree", { name: `All folders for ${EMAIL}` }),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Rename Travel" }),
+		).toBeInTheDocument();
+	},
+};
+
+export const Phone: Story = {
+	globals: { viewport: { value: "mobile", isRotated: false } },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByRole("tree", { name: `All folders for ${EMAIL}` }),
+		).toBeVisible();
+	},
+};
+
+export const Renaming: Story = {
+	globals: { viewport: { value: "desktop", isRotated: false } },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(
+			await canvas.findByRole("button", { name: "Rename Travel" }),
+		);
+		const dialog = within(
+			await page.findByRole("dialog", { name: "Rename Travel" }),
+		);
+		await expect(dialog.getByRole("textbox")).toBeVisible();
+	},
+};

package/src/components/settings/self-update.stories.tsx

@@ -0,0 +1,270 @@
+import type {
+	RemitImapSystemUpdateCheck,
+	RemitImapSystemUpdateResponse,
+	RemitImapSystemUpdateRun,
+} from "@remit/api-http-client/types.gen.ts";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { HttpResponse, http } from "msw";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import { mailWorld } from "@/mocks/story-frame/mail-world";
+
+const CURRENT = "0.9.3";
+const NEXT = "1.0.0";
+const LOGS = "remit logs updater --since 2026-09-24T12:40";
+
+const checked: RemitImapSystemUpdateCheck = {
+	status: "ok",
+	lastCheckedAt: "2026-09-24T12:39:00Z",
+	latestVersion: CURRENT,
+	updateAvailable: false,
+};
+
+const released: RemitImapSystemUpdateCheck = {
+	status: "ok",
+	lastCheckedAt: "2026-09-24T12:39:00Z",
+	latestVersion: NEXT,
+	publishedAt: "2026-09-22T09:00:00Z",
+	summary: "Faster search and a calmer daily brief.",
+	releaseNotesUrl: `https://github.com/remit-mail/reader/releases/tag/${NEXT}`,
+	updateAvailable: true,
+	schemaVersion: 42,
+};
+
+const run = (
+	outcome: RemitImapSystemUpdateRun["outcome"],
+	message: string,
+	startedAt = "2026-09-24T12:40:00Z",
+): RemitImapSystemUpdateRun => ({
+	runId: "run-1",
+	fromVersion: CURRENT,
+	targetVersion: NEXT,
+	phase: outcome === null ? "verifying" : "committing",
+	outcome,
+	startedAt,
+	updatedAt: startedAt,
+	message,
+	logCommand: LOGS,
+});
+
+const update = (
+	overrides: Partial<RemitImapSystemUpdateResponse>,
+): RemitImapSystemUpdateResponse => ({
+	currentVersion: CURRENT,
+	currentSchemaVersion: 42,
+	check: checked,
+	run: null,
+	...overrides,
+});
+
+const answering = (systemUpdate: RemitImapSystemUpdateResponse) => ({
+	msw: { handlers: mailHandlers(mailWorld({ systemUpdate })) },
+});
+
+const meta = {
+	title: "Playground/Shipped/Settings/Advanced/Self-update",
+	component: AppStory,
+	args: { url: "/settings/advanced" },
+	parameters: { layout: "fullscreen", ...answering(update({})) },
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const page = within(document.body);
+
+export const AdvancedUpToDate: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(`Remit ${CURRENT} is the latest version.`),
+		).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Check again" }),
+		).toBeVisible();
+	},
+};
+
+export const AdvancedNeverChecked: Story = {
+	parameters: answering(update({ check: { status: "disabled" } })),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(/No update check has run yet/),
+		).toBeVisible();
+	},
+};
+
+export const AdvancedUpdateAvailable: Story = {
+	parameters: answering(update({ check: released })),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByRole("button", { name: `Install ${NEXT}` }),
+		).toBeVisible();
+		await expect(canvas.getByText("update available")).toBeVisible();
+	},
+};
+
+export const AdvancedCheckFailed: Story = {
+	parameters: answering(
+		update({
+			check: {
+				status: "failed",
+				lastCheckedAt: "2026-09-21T12:00:00Z",
+				error: "No route to github.com — the server has no outbound network.",
+			},
+		}),
+	),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText("Could not reach the update source."),
+		).toBeVisible();
+		await expect(canvas.getByText(/No route to github.com/)).toBeVisible();
+		await expect(
+			canvas.getByRole("button", { name: "Try again" }),
+		).toBeVisible();
+	},
+};
+
+export const AdvancedSucceeded: Story = {
+	parameters: answering(
+		update({ currentVersion: NEXT, run: run("succeeded", "Updated") }),
+	),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(`Updated to Remit ${NEXT}.`),
+		).toBeVisible();
+		await expect(canvas.getByText(`Remit ${NEXT} is running.`)).toBeVisible();
+	},
+};
+
+export const AdvancedRolledBack: Story = {
+	parameters: answering(
+		update({
+			run: run(
+				"rolledBack",
+				'migration 0042_add_thread_index failed: relation "threads" does not exist',
+			),
+		}),
+	),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(/relation "threads" does not exist/),
+		).toBeVisible();
+		await expect(canvas.getByText(LOGS)).toBeVisible();
+	},
+};
+
+export const AdvancedRollbackFailed: Story = {
+	parameters: answering(
+		update({
+			run: run(
+				"rollbackFailed",
+				"migration 0042_add_thread_index failed and the snapshot restore errored: database is locked",
+			),
+		}),
+	),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(/the snapshot restore errored/),
+		).toBeVisible();
+		await expect(canvas.getByText(LOGS)).toBeVisible();
+	},
+};
+
+export const AdvancedAbandoned: Story = {
+	parameters: answering(
+		update({
+			run: run(
+				"abandoned",
+				"manifest fetch timed out before anything was pulled",
+			),
+		}),
+	),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(/manifest fetch timed out/),
+		).toBeVisible();
+	},
+};
+
+export const ConsentWithSchemaMigration: Story = {
+	parameters: answering(update({ currentSchemaVersion: 41, check: released })),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(
+			await canvas.findByRole("button", { name: `Install ${NEXT}` }),
+		);
+		const dialog = within(
+			await page.findByRole("dialog", { name: `Install Remit ${NEXT}` }),
+		);
+		await expect(
+			dialog.getByText(/updates the database while Remit is offline/),
+		).toBeVisible();
+		await expect(
+			dialog.getByRole("button", { name: "Install and restart" }),
+		).toBeVisible();
+	},
+};
+
+export const RestartInProgress: Story = {
+	parameters: answering(
+		update({
+			run: run(null, "", new Date(Date.now() - 52_000).toISOString()),
+		}),
+	),
+	play: async () => {
+		await expect(
+			await page.findByRole("heading", { name: `Installing Remit ${NEXT}` }),
+		).toBeVisible();
+	},
+};
+
+let answered = false;
+
+const realNow = Date.now;
+
+const clockAhead = (ms: number) => {
+	Date.now = () => realNow.call(Date) + ms;
+};
+
+export const ServerNeverCameBack: Story = {
+	parameters: {
+		msw: {
+			handlers: [
+				http.get("/api/system/update", () => {
+					if (answered) return HttpResponse.error();
+					answered = true;
+					return HttpResponse.json<RemitImapSystemUpdateResponse>(
+						update({ run: run(null, "", new Date().toISOString()) }),
+					);
+				}),
+				...mailHandlers(mailWorld()),
+			],
+		},
+	},
+	beforeEach: () => {
+		answered = false;
+		return () => {
+			Date.now = realNow;
+		};
+	},
+	play: async () => {
+		await page.findByRole("heading", { name: `Installing Remit ${NEXT}` });
+		clockAhead(20 * 60_000);
+		await waitFor(
+			() =>
+				expect(page.getByRole("alertdialog")).toHaveTextContent(
+					"Your mail is safe at your provider",
+				),
+			{ timeout: 10_000 },
+		);
+	},
+};

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

@@ -0,0 +1,155 @@
+import type {
+	RemitImapAddressResponse,
+	RemitImapVipSuggestionEntry,
+} from "@remit/api-http-client/types.gen.ts";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, userEvent, within } from "storybook/test";
+import { AppStory } from "@/mocks/story-frame/AppStory";
+import { mailHandlers } from "@/mocks/story-frame/mail-handlers";
+import { mailWorld, NOW } from "@/mocks/story-frame/mail-world";
+
+const suggestion = (
+	addressId: string,
+	displayName: string,
+	normalizedEmail: string,
+	inboundCount: number,
+	replyCount: number,
+): RemitImapVipSuggestionEntry => ({
+	addressId,
+	displayName,
+	normalizedEmail,
+	inboundCount,
+	outboundCount: replyCount,
+	replyCount,
+});
+
+const flagged = (
+	addressId: string,
+	displayName: string,
+	normalizedEmail: string,
+	flags: RemitImapAddressResponse["flags"],
+): RemitImapAddressResponse => {
+	const [localPart = "", domain = ""] = normalizedEmail.split("@");
+	return {
+		addressId,
+		accountConfigId: "cfg-1",
+		displayName,
+		localPart,
+		domain,
+		normalizedEmail,
+		flags,
+		inboundCount: 0,
+		outboundCount: 0,
+		replyCount: 0,
+		lastInboundAt: NOW,
+		lastReplyAt: 0,
+		createdAt: NOW,
+		updatedAt: NOW,
+	};
+};
+
+const world = mailWorld({
+	vipSuggestions: [
+		suggestion("addr-ada", "Ada Lovelace", "ada@acme.example", 48, 21),
+		suggestion("addr-grace", "Grace Hopper", "grace@example.org", 12, 4),
+		suggestion("addr-linus", "Linus", "linus@example.org", 7, 0),
+	],
+	addresses: [
+		flagged("addr-weekly", "The Weekly", "digest@weekly.example", {
+			muted: { value: true, setAt: NOW, reason: "too frequent" },
+		}),
+		flagged("addr-outdoor", "Outdoor Store", "news@outdoor.example", {
+			muted: { value: true, setAt: NOW },
+		}),
+		flagged("addr-spam", "Prize Desk", "win@prize.example", {
+			blocked: { value: true, setAt: NOW },
+		}),
+	],
+});
+
+const meta = {
+	title: "Playground/Shipped/Settings/Senders",
+	component: AppStory,
+	args: { url: "/settings/senders" },
+	parameters: {
+		layout: "fullscreen",
+		msw: { handlers: mailHandlers(world) },
+	},
+} satisfies Meta<typeof AppStory>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const SendersAndRules: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Ada Lovelace")).toBeVisible();
+		await expect(
+			canvas.getByText("48 received · you replied 21×"),
+		).toBeVisible();
+		await expect(
+			canvas.getByText("7 received · you've never replied"),
+		).toBeVisible();
+		await expect(
+			canvas.getAllByRole("button", { name: "Add VIP" }),
+		).toHaveLength(3);
+		await expect(canvas.getByText("3 of 3 flagged senders")).toBeVisible();
+	},
+};
+
+export const FilteredVips: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Ada Lovelace");
+		await userEvent.type(
+			canvas.getByPlaceholderText("Filter vips by name or address"),
+			"grace",
+		);
+		await expect(
+			await canvas.findByText("1 of 3 flagged senders"),
+		).toBeVisible();
+		await expect(canvas.queryByText("Ada Lovelace")).toBeNull();
+	},
+};
+
+export const MutedSearch: Story = {
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await canvas.findByText("Ada Lovelace");
+		await userEvent.click(canvas.getByRole("tab", { name: /^Muted/ }));
+		await expect(
+			canvas.getByText(/Type 2\+ characters to search muted senders/),
+		).toBeVisible();
+		await userEvent.type(
+			canvas.getByPlaceholderText("Filter muted by name or address"),
+			"example",
+		);
+		await expect(await canvas.findByText("The Weekly")).toBeVisible();
+		await expect(canvas.getByText("Outdoor Store")).toBeVisible();
+		await expect(canvas.queryByText("Prize Desk")).toBeNull();
+		await expect(
+			canvas.getAllByRole("button", { name: "Remove muted flag" }),
+		).toHaveLength(2);
+	},
+};
+
+export const Empty: Story = {
+	parameters: {
+		msw: { handlers: mailHandlers(mailWorld()) },
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(
+			await canvas.findByText(/No VIP suggestions yet/),
+		).toBeVisible();
+	},
+};
+
+export const Phone: Story = {
+	globals: { viewport: { value: "mobile", isRotated: false } },
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await expect(await canvas.findByText("Ada Lovelace")).toBeVisible();
+		await expect(canvas.getByRole("tab", { name: /^VIPs/ })).toBeVisible();
+	},
+};