@remit/web-client 0.0.300 → 0.0.301

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();
+	},
+};

package/src/mocks/story-frame/AppStory.tsx

@@ -6,6 +6,11 @@ import {
 } from "@tanstack/react-query";
 import { createMemoryHistory, RouterProvider } from "@tanstack/react-router";
 import { useState } from "react";
+import {
+	type AuthProvider,
+	AuthProviderProvider,
+	noneAuthProvider,
+} from "@/auth/provider";
 import {
 	handleMutationCacheError,
 	handleQueryCacheError,
@@ -17,6 +22,7 @@ import "@/lib/client";
 
 export interface AppStoryProps {
 	url: string;
+	authProvider?: AuthProvider;
 }
 
 const createStoryQueryClient = (): QueryClient =>
@@ -29,19 +35,28 @@ const createStoryQueryClient = (): QueryClient =>
 		},
 	});
 
-export function AppStory({ url }: AppStoryProps) {
+export function AppStory({
+	url,
+	authProvider = noneAuthProvider,
+}: AppStoryProps) {
 	const [queryClient] = useState(createStoryQueryClient);
-	const [router] = useState(() =>
-		createAppRouter(
+	const [router] = useState(() => {
+		authProvider.configure();
+		return createAppRouter(
 			queryClient,
 			noopTelemetry,
 			createMemoryHistory({ initialEntries: [url] }),
-		),
-	);
+		);
+	});
+	const { Shell } = authProvider;
 
 	return (
 		<QueryClientProvider client={queryClient}>
-			<RouterProvider router={router} />
+			<AuthProviderProvider value={authProvider}>
+				<Shell>
+					<RouterProvider router={router} />
+				</Shell>
+			</AuthProviderProvider>
 		</QueryClientProvider>
 	);
 }

package/src/mocks/story-frame/mail-handlers.ts

@@ -1,6 +1,10 @@
 import type {
+	AccountDetailOperationsUpdateAccountResponse,
+	AddressDetailOperationsUpdateAddressResponse,
+	AddressOperationsSearchAddressesResponse,
 	FilterOperationsListFiltersResponse,
 	LabelOperationsListLabelsResponse,
+	MailboxDetailOperationsRenameMailboxResponse,
 	MailboxOperationsListMailboxesResponse,
 	MeOperationsListQuarantineResponse,
 	MeOperationsListVipSuggestionsResponse,
@@ -169,6 +173,22 @@ export const mailHandlers = (
 				makeConfig(world.accounts),
 			),
 		),
+		http.patch(
+			`${API}/accounts/:accountId/mailboxes/:mailboxId`,
+			({ params }) => {
+				const mailbox = world.mailboxes.find(
+					(candidate) => candidate.mailboxId === params.mailboxId,
+				);
+				if (!mailbox)
+					return HttpResponse.json(
+						{ status: 404, message: "Mailbox not found" },
+						{ status: 404 },
+					);
+				return HttpResponse.json<MailboxDetailOperationsRenameMailboxResponse>(
+					mailbox,
+				);
+			},
+		),
 		http.get(`${API}/accounts/:accountId/mailboxes`, ({ params }) =>
 			HttpResponse.json<MailboxOperationsListMailboxesResponse>({
 				items: world.mailboxes.filter(
@@ -176,6 +196,48 @@ export const mailHandlers = (
 				),
 			}),
 		),
+		http.patch(`${API}/accounts/:accountId`, ({ params }) => {
+			const account = world.accounts.find(
+				(candidate) => candidate.accountId === params.accountId,
+			);
+			if (!account)
+				return HttpResponse.json(
+					{ status: 404, message: "Account not found" },
+					{ status: 404 },
+				);
+			return HttpResponse.json<AccountDetailOperationsUpdateAccountResponse>(
+				account,
+			);
+		}),
+		http.delete(
+			`${API}/accounts/:accountId`,
+			() => new HttpResponse(null, { status: 204 }),
+		),
+		http.get(`${API}/addresses/search`, ({ request }) => {
+			const needle = (
+				new URL(request.url).searchParams.get("q") ?? ""
+			).toLowerCase();
+			return HttpResponse.json<AddressOperationsSearchAddressesResponse>({
+				items: world.addresses.filter(
+					(address) =>
+						address.normalizedEmail.includes(needle) ||
+						(address.displayName ?? "").toLowerCase().includes(needle),
+				),
+			});
+		}),
+		http.patch(`${API}/addresses/:addressId`, ({ params }) => {
+			const address = world.addresses.find(
+				(candidate) => candidate.addressId === params.addressId,
+			);
+			if (!address)
+				return HttpResponse.json(
+					{ status: 404, message: "Address not found" },
+					{ status: 404 },
+				);
+			return HttpResponse.json<AddressDetailOperationsUpdateAddressResponse>(
+				address,
+			);
+		}),
 		http.get(`${API}/accounts/:accountId/sync/status`, ({ params }) =>
 			HttpResponse.json<SyncOperationsGetSyncStatusResponse>({
 				accountId: String(params.accountId),
@@ -272,19 +334,19 @@ export const mailHandlers = (
 			}),
 		),
 		http.get(`${API}/me/quarantine`, () =>
-			HttpResponse.json<MeOperationsListQuarantineResponse>({ entries: [] }),
+			HttpResponse.json<MeOperationsListQuarantineResponse>({
+				entries: world.quarantine,
+			}),
 		),
 		http.get(`${API}/me/vip-suggestions`, () =>
 			HttpResponse.json<MeOperationsListVipSuggestionsResponse>({
-				suggestions: [],
+				suggestions: world.vipSuggestions,
 			}),
 		),
 		http.get(`${API}/system/update`, () =>
-			HttpResponse.json<SystemOperationsGetSystemUpdateResponse>({
-				currentVersion: "0.0.0-storybook",
-				check: { status: "disabled" },
-				run: null,
-			}),
+			HttpResponse.json<SystemOperationsGetSystemUpdateResponse>(
+				world.systemUpdate,
+			),
 		),
 		http.all(`${API}/*`, ({ request }) =>
 			HttpResponse.json(

package/src/mocks/story-frame/mail-world.ts

@@ -1,11 +1,15 @@
 import type {
 	RemitImapAccountResponse,
+	RemitImapAddressResponse,
 	RemitImapCanonicalMailboxRole,
 	RemitImapMailboxResponse,
 	RemitImapMessageCategory,
 	RemitImapOutboxMessageResponse,
 	RemitImapOutboxMessageStatus,
+	RemitImapQuarantineResponse,
+	RemitImapSystemUpdateResponse,
 	RemitImapThreadMessageResponse,
+	RemitImapVipSuggestionEntry,
 } from "@remit/api-http-client/types.gen.ts";
 import {
 	makeAccount,
@@ -18,12 +22,16 @@ export interface MailWorld {
 	mailboxes: RemitImapMailboxResponse[];
 	threads: RemitImapThreadMessageResponse[];
 	outbox: RemitImapOutboxMessageResponse[];
+	quarantine: RemitImapQuarantineResponse[];
+	vipSuggestions: RemitImapVipSuggestionEntry[];
+	addresses: RemitImapAddressResponse[];
+	systemUpdate: RemitImapSystemUpdateResponse;
 }
 
 const MINUTE = 60_000;
 const HOUR = 60 * MINUTE;
 const DAY = 24 * HOUR;
-const NOW = Date.UTC(2026, 8, 24, 13, 0);
+export const NOW = Date.UTC(2026, 8, 24, 13, 0);
 
 const ROLES = [
 	"Inbox",
@@ -48,7 +56,7 @@ export const mailboxIdFor = (
 	role: RemitImapCanonicalMailboxRole,
 ): string => `mbx-${accountId}-${role.toLowerCase()}`;
 
-const accountWithFolders = (
+export const accountWithFolders = (
 	accountId: string,
 	email: string,
 	displayName: string,
@@ -67,7 +75,7 @@ const accountWithFolders = (
 		})),
 	});
 
-const foldersOf = (accountId: string): RemitImapMailboxResponse[] =>
+export const foldersOf = (accountId: string): RemitImapMailboxResponse[] =>
 	ROLES.map((role) =>
 		makeMailbox({
 			accountId,
@@ -382,8 +390,18 @@ export const newsletterBacklog = (
 
 export const mailWorld = (overrides: Partial<MailWorld> = {}): MailWorld => ({
 	accounts,
-	mailboxes: accounts.flatMap((account) => foldersOf(account.accountId)),
+	mailboxes: (overrides.accounts ?? accounts).flatMap((account) =>
+		foldersOf(account.accountId),
+	),
 	threads: [...inboxThreads, ...serverDrafts],
 	outbox: [...remitDrafts, ...outboxInEveryStatus],
+	quarantine: [],
+	vipSuggestions: [],
+	addresses: [],
+	systemUpdate: {
+		currentVersion: "0.0.0-storybook",
+		check: { status: "disabled" },
+		run: null,
+	},
 	...overrides,
 });