@remit/web-client 0.0.322 → 0.0.324

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.322",
+  "version": "0.0.324",
   "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": {
@@ -86,10 +86,10 @@
     "aws-amplify": "^6",
     "@aws-amplify/ui-react": "^6",
     "aws-rum-web": "^3",
-    "better-auth": "^1.6.23",
+    "better-auth": "^1.7.12",
     "i18next": "^24",
     "i18next-browser-languagedetector": "^8",
-    "i18next-http-backend": "^3.0.6",
+    "i18next-http-backend": "^4.0.2",
     "lucide-react": "^0.468",
     "p-map": "*",
     "react-hook-form": "*",
@@ -115,7 +115,7 @@
     "react-dom": "^19.2.4",
     "tailwindcss": "^4",
     "typescript": "*",
-    "vite": "^7.3.6"
+    "vite": "^7.3.7"
   },
   "license": "MIT",
   "publishConfig": {

package/src/auth/SignInAgain.tsx

@@ -0,0 +1,18 @@
+import { useAuthProvider } from "@/auth/provider";
+
+export function SignInAgain() {
+	const { Account } = useAuthProvider();
+	return (
+		<Account>
+			{({ signOut }) => (
+				<button
+					type="button"
+					onClick={() => signOut()}
+					className="rounded-md border border-line px-2.5 py-1 text-sm font-medium text-fg outline-none hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring"
+				>
+					Sign in again
+				</button>
+			)}
+		</Account>
+	);
+}

package/src/auth/amplify-config.test.ts

@@ -1,5 +1,5 @@
 import assert from "node:assert";
-import { beforeEach, describe, test } from "node:test";
+import { describe, test } from "node:test";
 
 type TestConfig = {
 	cognito?: {
@@ -10,36 +10,11 @@ type TestConfig = {
 	};
 	appOrigin?: string;
 };
-type AmplifyCall = {
-	Auth?: {
-		Cognito?: {
-			userPoolId?: string;
-			userPoolClientId?: string;
-			loginWith?: {
-				oauth?: {
-					domain?: string;
-					redirectSignIn?: string[];
-					redirectSignOut?: string[];
-					responseType?: string;
-					scopes?: string[];
-				};
-			};
-		};
-	};
-};
-
-declare global {
-	var __AMPLIFY_MOCKS__: { configureCalls: AmplifyCall[] } | undefined;
-	var __CACHE_BUST__: number | undefined;
-}
-
 let cacheBust = 0;
 
 const loadModule = async (config: TestConfig) => {
 	cacheBust += 1;
-	globalThis.__CACHE_BUST__ = cacheBust;
 	globalThis.__REMIT_CONFIG__ = config;
-	globalThis.__AMPLIFY_MOCKS__ = { configureCalls: [] };
 	return import(`./amplify-config.ts?v=${cacheBust}`);
 };
 
@@ -50,7 +25,6 @@ const fullConfig: TestConfig = {
 		domain: "example.auth.us-east-1.amazoncognito.com",
 		region: "us-east-1",
 	},
-	appOrigin: "https://app.example.com",
 };
 
 describe("isCognitoConfigured", () => {
@@ -74,83 +48,3 @@ describe("isCognitoConfigured", () => {
 		assert.equal(mod.isCognitoConfigured(), false);
 	});
 });
-
-describe("configureAmplify", () => {
-	let originalWarn: typeof console.warn;
-	let warnings: unknown[][];
-
-	beforeEach(() => {
-		originalWarn = console.warn;
-		warnings = [];
-		console.warn = (...args: unknown[]) => {
-			warnings.push(args);
-		};
-	});
-
-	test("warns and does not call Amplify.configure when unconfigured", async () => {
-		const mod = await loadModule({});
-		mod.configureAmplify();
-		console.warn = originalWarn;
-		assert.equal(globalThis.__AMPLIFY_MOCKS__?.configureCalls.length, 0);
-		assert.equal(warnings.length, 1);
-		const message = String(warnings[0][0]);
-		assert.ok(
-			message.includes("Cognito"),
-			`expected warning to mention Cognito, got: ${message}`,
-		);
-	});
-
-	test("passes userPoolId and clientId to Amplify.configure", async () => {
-		const mod = await loadModule(fullConfig);
-		mod.configureAmplify();
-		console.warn = originalWarn;
-		const calls = globalThis.__AMPLIFY_MOCKS__?.configureCalls ?? [];
-		assert.equal(calls.length, 1);
-		const cognito = calls[0]?.Auth?.Cognito;
-		assert.equal(cognito?.userPoolId, "us-east-1_pool");
-		assert.equal(cognito?.userPoolClientId, "client-id");
-	});
-
-	test("wires OAuth block with appOrigin in redirect arrays when domain set", async () => {
-		const mod = await loadModule(fullConfig);
-		mod.configureAmplify();
-		console.warn = originalWarn;
-		const oauth =
-			globalThis.__AMPLIFY_MOCKS__?.configureCalls[0]?.Auth?.Cognito?.loginWith
-				?.oauth;
-		assert.ok(oauth, "expected oauth block to be present");
-		assert.equal(oauth?.domain, "example.auth.us-east-1.amazoncognito.com");
-		assert.deepEqual(oauth?.redirectSignIn, ["https://app.example.com"]);
-		assert.deepEqual(oauth?.redirectSignOut, ["https://app.example.com"]);
-		assert.equal(oauth?.responseType, "code");
-	});
-
-	test("omits loginWith block when no domain configured", async () => {
-		const mod = await loadModule({
-			cognito: { userPoolId: "pool", clientId: "client" },
-		});
-		mod.configureAmplify();
-		console.warn = originalWarn;
-		const cognito =
-			globalThis.__AMPLIFY_MOCKS__?.configureCalls[0]?.Auth?.Cognito;
-		assert.equal(cognito?.loginWith, undefined);
-	});
-
-	test("uses empty redirect arrays when domain present but appOrigin missing", async () => {
-		const mod = await loadModule({
-			cognito: {
-				userPoolId: "pool",
-				clientId: "client",
-				domain: "example.auth.us-east-1.amazoncognito.com",
-			},
-		});
-		mod.configureAmplify();
-		console.warn = originalWarn;
-		const oauth =
-			globalThis.__AMPLIFY_MOCKS__?.configureCalls[0]?.Auth?.Cognito?.loginWith
-				?.oauth;
-		assert.ok(oauth);
-		assert.deepEqual(oauth?.redirectSignIn, []);
-		assert.deepEqual(oauth?.redirectSignOut, []);
-	});
-});

package/src/auth/auth-interceptor.test.ts

@@ -41,12 +41,6 @@ const sentHeaders = (): Record<string, string> => {
 };
 
 describe("installAuthInterceptor", () => {
-	test("registers exactly one request interceptor", async () => {
-		const mod = await loadInterceptor();
-		mod.installAuthInterceptor(providerWithToken(async () => null));
-		assert.equal(client.interceptors.request.fns.length, 1);
-	});
-
 	test("is idempotent — subsequent calls do not register additional interceptors", async () => {
 		const mod = await loadInterceptor();
 		const provider = providerWithToken(async () => null);

package/src/auth/better-auth-config.ts

@@ -1,5 +1,6 @@
 import { createAuthClient } from "better-auth/react";
 import { NetworkError, taggedFetch } from "../lib/network-error";
+import { sessionStore } from "../lib/session-storage";
 import { getRuntimeConfig } from "../runtime-config";
 
 /**
@@ -46,16 +47,8 @@ interface CachedToken {
 	expiresAt: number;
 }
 
-const tokenStore = (): Storage | null => {
-	try {
-		return globalThis.sessionStorage ?? null;
-	} catch {
-		return null;
-	}
-};
-
 const readStore = (): CachedToken | null => {
-	const raw = tokenStore()?.getItem(STORAGE_KEY);
+	const raw = sessionStore()?.getItem(STORAGE_KEY);
 	if (!raw) return null;
 	try {
 		const parsed: unknown = JSON.parse(raw);
@@ -77,7 +70,7 @@ const readStore = (): CachedToken | null => {
 };
 
 const writeStore = (token: CachedToken | null): void => {
-	const store = tokenStore();
+	const store = sessionStore();
 	if (!store) return;
 	try {
 		if (!token) {

package/src/auth/cognito/cognito-token.test.ts

@@ -9,9 +9,7 @@ type AmplifyAuthMocks = {
 
 declare global {
 	var __AMPLIFY_AUTH_MOCKS__: AmplifyAuthMocks | undefined;
-	var __AMPLIFY_CONFIG_MOCKS__:
-		| { configured: boolean; configureCalls: number }
-		| undefined;
+	var __AMPLIFY_CONFIG_MOCKS__: { configured: boolean } | undefined;
 }
 
 let cacheBust = 2000;
@@ -32,7 +30,7 @@ const loadCognitoToken = async (
 ) => {
 	cacheBust += 1;
 	globalThis.__REMIT_CONFIG__ = {};
-	globalThis.__AMPLIFY_CONFIG_MOCKS__ = { configured, configureCalls: 0 };
+	globalThis.__AMPLIFY_CONFIG_MOCKS__ = { configured };
 	globalThis.__AMPLIFY_AUTH_MOCKS__ = {
 		session: { tokens: {} },
 		fetchCalls: 0,

package/src/components/calendar/AgendaStrip.tsx

@@ -5,11 +5,11 @@ import {
 	type CalendarDescriptor,
 	type CalendarSlotPick,
 	type Density,
+	ErrorState,
 	NextUpCard,
 	readNextUp,
 } from "@remit/ui";
 import { useMemo } from "react";
-import { ErrorState } from "@/components/ui/ErrorState";
 import type { FreeLookup } from "@/hooks/calendar";
 import { agendaDensityOf } from "@/lib/calendar-density";
 

package/src/components/calendar/CalendarWorkspace.tsx

@@ -7,6 +7,7 @@ import {
 	type CalendarViewId,
 	CalendarViewSwitch,
 	type Density,
+	ErrorState,
 	Segmented,
 	type SegmentOption,
 } from "@remit/ui";
@@ -14,7 +15,6 @@ import { Loader2 } from "lucide-react";
 import { type ReactNode, useState } from "react";
 import { CalendarViewPlaceholder } from "@/components/calendar/CalendarViewPlaceholder";
 import { NavMenuButton } from "@/components/mail/NavMenuButton";
-import { ErrorState } from "@/components/ui/ErrorState";
 import {
 	calendarViewMountsAgenda,
 	calendarViewMountsGrid,

package/src/components/calendar/ChangeCalendarSuggestion.tsx

@@ -1,12 +1,12 @@
 import type { RemitImapCalendarSuggestionResponse } from "@remit/api-http-client/types.gen.ts";
 import {
 	CalendarFailureNote,
+	EmptyState,
 	type EventDraft,
 	EventEditorPane,
 } from "@remit/ui";
 import { useEffect, useState } from "react";
 import { CalendarComposePane } from "@/components/calendar/CalendarComposePane";
-import { EmptyState } from "@/components/ui/EmptyState";
 import {
 	acceptEditedInputFromDrafts,
 	anchorZoneFor,

package/src/components/calendar/OpenCalendarEvent.tsx

@@ -5,7 +5,7 @@ import {
 } from "@remit/ui";
 import { Navigate } from "@tanstack/react-router";
 import { useState } from "react";
-import { useAuthProvider } from "@/auth/provider";
+import { SignInAgain } from "@/auth/SignInAgain";
 import { CalendarComposePane } from "@/components/calendar/CalendarComposePane";
 import {
 	type CalendarEventAbsence,
@@ -66,23 +66,6 @@ const CONFLICT =
 
 type Intent = "edit" | "delete";
 
-function SignInAgain() {
-	const { Account } = useAuthProvider();
-	return (
-		<Account>
-			{({ signOut }) => (
-				<button
-					type="button"
-					onClick={() => signOut()}
-					className="rounded-md border border-line px-2.5 py-1 text-sm font-medium text-fg outline-none hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring"
-				>
-					Sign in again
-				</button>
-			)}
-		</Account>
-	);
-}
-
 const absenceOf = (
 	search: CalendarJumpSearch,
 	loading: boolean,

package/src/components/compose/ComposeForm.tsx

@@ -185,12 +185,17 @@ const getReferences = (
 	msg: RemitImapDescribeMessageResponse,
 ): { inReplyTo?: string; references: string[] } => {
 	const messageIdValue = msg.envelope.messageIdValue;
-	const existingRefs = msg.references
-		.filter((r) => r.referenceType === "references")
-		.sort((a, b) => a.referenceOrder - b.referenceOrder)
-		.map((r) => r.messageIdValue);
-
-	const references = [...existingRefs];
+	const ofType = (
+		type: RemitImapDescribeMessageResponse["references"][number]["referenceType"],
+	): string[] =>
+		msg.references
+			.filter((r) => r.referenceType === type)
+			.sort((a, b) => a.referenceOrder - b.referenceOrder)
+			.map((r) => r.messageIdValue);
+	const existingRefs = ofType("references");
+
+	const references =
+		existingRefs.length > 0 ? [...existingRefs] : ofType("in_reply_to");
 	if (messageIdValue && !references.includes(messageIdValue)) {
 		references.push(messageIdValue);
 	}

package/src/components/compose/FullCompose.tsx

@@ -1,7 +1,7 @@
 import { configOperationsGetConfigOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { ErrorState } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { X } from "lucide-react";
-import { ErrorState } from "@/components/ui/ErrorState";
 import { useKeyboardNavigation } from "@/hooks/useKeyboardNavigation";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import {

package/src/components/compose/MobileComposeSheet.tsx

@@ -1,9 +1,8 @@
 import { configOperationsGetConfigOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { ConfirmDialog, useOverlayScope } from "@remit/ui";
+import { ConfirmDialog, ErrorState, useOverlayScope } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback, useRef, useState } from "react";
 import { Drawer } from "vaul";
-import { ErrorState } from "@/components/ui/ErrorState";
 import {
 	useAdoptComposeDraft,
 	useCloseCompose,

package/src/components/compose/compose.stories.tsx

@@ -310,6 +310,24 @@ export const SaveFailed: Story = {
 	},
 };
 
+export const DiscardFailed: Story = {
+	args: { url: `/mail/${INBOX}/compose/out-plain` },
+	parameters: {
+		msw: { handlers: mailHandlers(world, { draftDiscard: "refused" }) },
+	},
+	play: async () => {
+		await userEvent.click(
+			await page().findByRole("button", { name: "Discard" }),
+		);
+		await expect(
+			await page().findByText("Couldn't discard draft"),
+		).toBeVisible();
+		await expect(
+			await page().findByText("The draft is already gone."),
+		).toBeVisible();
+	},
+};
+
 export const Sending: Story = {
 	args: { url: `/mail/${INBOX}/compose/out-misspelt` },
 	parameters: {

package/src/components/compose/draft-discard-failure.render.test.ts

@@ -0,0 +1,138 @@
+import assert from "node:assert/strict";
+import { afterEach, it } from "node:test";
+import type {
+	RemitImapAccountResponse,
+	RemitImapDescribeMessageResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import { MutationCache, QueryCache, QueryClient } from "@tanstack/react-query";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	RouterContextProvider,
+} from "@tanstack/react-router";
+import { createElement } from "react";
+import { __resetFatalError } from "../../lib/fatal-error";
+import {
+	handleMutationCacheError,
+	handleQueryCacheError,
+} from "../../lib/query-error-handler";
+import { createDomHarness, type DomHarness } from "../../test-support/dom";
+import { type HttpMock, httpError, mockFetch } from "../../test-support/http";
+import { ComposeForm } from "./ComposeForm";
+import { ComposeProvider } from "./ComposeProvider";
+
+const OUTBOX_MESSAGE_ID = "ob-1";
+
+const account = {
+	accountId: "acc-1",
+	email: "me@example.com",
+	smtpEnabled: true,
+} as unknown as RemitImapAccountResponse;
+
+const sourceMessage = {
+	message: { messageId: "msg-1" },
+	envelope: {
+		subject: "Lunch",
+		messageIdValue: "<m1@example.com>",
+		from: [{ normalizedEmail: "them@example.com", displayName: "Them" }],
+		replyTo: [],
+		to: [],
+		cc: [],
+	},
+	references: [],
+	bodyParts: [],
+} as unknown as RemitImapDescribeMessageResponse;
+
+const outboxEntry = {
+	outboxMessageId: OUTBOX_MESSAGE_ID,
+	accountId: account.accountId,
+	fromAddress: account.email,
+	toAddresses: ["them@example.com"],
+	attachments: [],
+	ccAddresses: [],
+	bccAddresses: [],
+	references: [],
+	subject: "Fwd: Lunch",
+	textBody: "here you go",
+	status: "draft",
+};
+
+let harness: DomHarness | undefined;
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+	http?.restore();
+	http = undefined;
+	__resetFatalError();
+});
+
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+const rootRoute = createRootRoute();
+const mailboxRoute = createRoute({
+	getParentRoute: () => rootRoute,
+	path: "/mail/$mailboxId",
+	validateSearch: (search: Record<string, unknown>) => search,
+});
+
+const testRouter = (): AnyRouter =>
+	createRouter({
+		routeTree: rootRoute.addChildren([mailboxRoute]),
+		history: createMemoryHistory({ initialEntries: ["/mail/mbx-1"] }),
+	}) as unknown as AnyRouter;
+
+it("banners a refused draft discard instead of closing as if it worked", async () => {
+	http = mockFetch(async (call) => {
+		if (call.path.endsWith("/config")) return { accounts: [account] };
+		if (call.method === "DELETE") {
+			return httpError(409, "the draft is already gone");
+		}
+		return outboxEntry;
+	});
+
+	const queryClient = new QueryClient({
+		queryCache: new QueryCache({ onError: handleQueryCacheError }),
+		mutationCache: new MutationCache({ onError: handleMutationCacheError }),
+		defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+	});
+
+	harness = createDomHarness({ queryClient });
+	harness.renderApp(
+		createElement(RouterContextProvider, {
+			router: testRouter(),
+			// biome-ignore lint/correctness/noChildrenProp: RouterContextProvider types `children` as a required prop, which createElement's rest-argument form does not satisfy
+			children: createElement(
+				ComposeProvider,
+				null,
+				createElement(ComposeForm, {
+					mode: "forward",
+					account,
+					sourceMessage,
+					outboxMessageId: OUTBOX_MESSAGE_ID,
+					onDraftCreated: () => {},
+					onClose: () => {},
+				}),
+			),
+		}),
+	);
+	await harness.flush();
+	await harness.wait(50);
+
+	const discard = harness.query('[aria-label="Discard"]');
+	if (!discard) throw new Error("the discard button is not mounted");
+	harness.click(discard);
+	await harness.flush();
+	await harness.wait(100);
+
+	const alerts = harness.queryAll(
+		'[aria-label="Notifications"] [role="alert"]',
+	);
+	assert.equal(alerts.length, 1, "one banner reports the failure");
+	assert.match(alerts[0]?.textContent ?? "", /Couldn.t discard draft/);
+	assert.match(alerts[0]?.textContent ?? "", /the draft is already gone/);
+});

package/src/components/config-import/config-import.fixtures.ts

@@ -174,7 +174,7 @@ export const partialImportReport: RemitImapConfigImportReport = report({
 		{
 			code: "import_write_failed",
 			message:
-				"the filter store refused the write The items above it were written and remain; the import stopped here.",
+				"the filter store refused the write The items above it were written and remain; import the same file again with merge to finish.",
 			details: { section: "filters", key: "Bonnetjes" },
 		},
 	],
@@ -182,26 +182,25 @@ export const partialImportReport: RemitImapConfigImportReport = report({
 });
 
 /**
- * The same stop with no section written: a store that holds the import in one
- * transaction undoes the earlier writes, so the report carries no landed item
- * and `applied` is false. Warnings go with them.
+ * The same stop with no section written: the first write was the one that
+ * failed, so the report carries no landed item and `applied` is false.
  */
 export const nothingLandedImportReport: RemitImapConfigImportReport = report({
 	applied: false,
 	items: [
 		item(
-			"filters",
-			"Bonnetjes",
+			"accounts",
+			"matthijs@ischen.nl",
 			"rejected",
-			"the filter store refused the write",
+			"the account store refused the write",
 		),
 	],
 	errors: [
 		{
 			code: "import_write_failed",
 			message:
-				"the filter store refused the write Nothing was written; the import stopped here.",
-			details: { section: "filters", key: "Bonnetjes" },
+				"the account store refused the write The items above it were written and remain; import the same file again with merge to finish.",
+			details: { section: "accounts", key: "matthijs@ischen.nl" },
 		},
 	],
 	warnings: [],

package/src/components/config-import/config-import.stories.tsx

@@ -436,8 +436,8 @@ export const PartiallyLandedImport: Story = {
 };
 
 /**
- * The same stop with no section written — a transaction undid the earlier
- * writes, or the first write was the one that failed. No section may carry a
+ * The same stop with no section written — the first write was the one that
+ * failed. No section may carry a
  * tick, and the screen counts nothing as landed.
  */
 export const NothingLandedImport: Story = {

package/src/components/layout/MailTopBar.tsx

@@ -13,6 +13,7 @@ import { useMemo } from "react";
 import { AccountMenu } from "@/auth/AccountMenu";
 import { useRefreshControl } from "@/hooks/useRefreshControl";
 import { useSearchScope } from "@/hooks/useSearchScope";
+import { useWarningsAttention } from "@/hooks/useWarningsAttention";
 import { openBugReport } from "@/lib/bug-report";
 import { useMailContext } from "@/lib/mail-context";
 import { useMailFreshness } from "@/lib/mail-freshness";
@@ -38,6 +39,7 @@ export function MailTopBar({ accounts }: MailTopBarProps) {
 	const goToSection = useGoToSection();
 	const compose = useOpenCompose();
 	const { scope, clearScope } = useSearchScope(accounts);
+	const settingsAttention = useWarningsAttention();
 	const chips =
 		scope.kind === "scoped"
 			? [{ id: scope.chip.id, label: scope.chip.label, tone: "scope" as const }]
@@ -80,6 +82,7 @@ export function MailTopBar({ accounts }: MailTopBarProps) {
 			onCompose={compose}
 			onReportBug={openBugReport}
 			onOpenSettings={() => goToSection("accounts")}
+			settingsAttention={settingsAttention}
 			composeShortcut={shortcutHintForAction("compose")}
 			refreshControl={
 				<RefreshButton

package/src/components/mail/BriefPane.tsx

@@ -374,7 +374,6 @@ function BriefReading() {
 				isOpen={intelligence.drawerOpen}
 				onClose={intelligence.closeDrawer}
 				thread={selectedThread}
-				mailboxId={selectedThread?.mailboxId}
 				accountId={selectedThread?.accountId}
 				onAfterOptimisticRemove={handleDeselectIfRemoved}
 				onReplyWithText={replyWithText}
@@ -398,7 +397,6 @@ function BriefIntelligence() {
 		<IntelligencePane
 			onClose={onToggleIntelligence}
 			thread={selectedThread}
-			mailboxId={selectedThread?.mailboxId}
 			accountId={selectedThread?.accountId}
 			onAfterOptimisticRemove={handleDeselectIfRemoved}
 			onReplyWithText={replyWithText}
@@ -444,7 +442,6 @@ function BriefPhone() {
 					isOpen={drawer.isOpen}
 					onClose={drawer.close}
 					thread={selectedThread}
-					mailboxId={selectedThread?.mailboxId}
 					accountId={selectedThread?.accountId}
 					onAfterOptimisticRemove={handleDeselectIfRemoved}
 					onReplyWithText={replyWithText}

package/src/components/mail/ConversationView.tsx

@@ -1,11 +1,9 @@
 import { threadDetailOperationsListThreadMessagesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapMessageAuthenticity } from "@remit/api-http-client/types.gen.ts";
-import { MobileReadingPane } from "@remit/ui";
+import { EmptyState, ErrorState, MobileReadingPane } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { ConversationCompose } from "@/components/compose/ConversationCompose";
-import { EmptyState } from "@/components/ui/EmptyState";
-import { ErrorState } from "@/components/ui/ErrorState";
 import { useKeyboardNavigation } from "@/hooks/useKeyboardNavigation";
 import { useMailboxAccount } from "@/hooks/useMailboxAccount";
 import { useMarkAsRead } from "@/hooks/useMarkAsRead";