@remit/web-client 0.0.239 → 0.0.241

package/src/hooks/useEmptyTrash.ts

@@ -22,6 +22,7 @@ import {
 	type FolderRoleRefusal,
 	isFolderRoleRefusal,
 } from "@/components/ui/folder-role-refusal";
+import { softErrorStatuses } from "@/lib/error-classifier";
 import {
 	invalidateThreadListQueries,
 	threadListCacheKeys,
@@ -109,6 +110,9 @@ export const useEmptyTrash = ({
 
 	const { mutateAsync, isPending } = useMutation({
 		...trashOperationsEmptyTrashMutation(),
+		// The refusal is rendered in the pane, so it must not also take the whole
+		// screen. Only 409 — every other status is still the fatal page's (#1059).
+		meta: softErrorStatuses(409),
 		onMutate: (): EmptyTrashContext => {
 			inFlight.current = scope;
 			return { scope, listMailboxId: listMailboxIdNow() };

package/src/hooks/useMessageBodyContent.ts

@@ -351,6 +351,12 @@ export const useMessageBodyContent = ({
 
 	const isLoading = query.isLoading && !!picked;
 
+	// `picked` is null for two different reasons, and a caller that treats them
+	// alike is wrong about one of them: the message has not arrived yet, or it
+	// arrived carrying nothing renderable. Only the second is a fact about the
+	// message, and only it may be stated to the reader (#1030).
+	const hasNoRenderablePart = bodyParts !== undefined && picked === null;
+
 	useEffect(() => {
 		if (isLoading) {
 			loadStartRef.current = performance.now();
@@ -374,6 +380,7 @@ export const useMessageBodyContent = ({
 		picked,
 		data,
 		isLoading,
+		hasNoRenderablePart,
 		isError: query.isError,
 		error: query.error,
 		refetch: query.refetch,

package/src/hooks/useResultFolderIndex.ts

@@ -3,6 +3,10 @@
  * and `useMailboxNameIndex` run — cached forever, react-query dedupes the
  * identical key across call sites) and reduces it to the mailboxId → folder map
  * search results resolve their provenance against. See `lib/result-folder.ts`.
+ *
+ * The read state travels with the index: a folder label cut on a delimiter that
+ * has not arrived is wrong rather than late, so a surface that names folders can
+ * wait for this, and say so when it fails.
  */
 import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type {
@@ -18,37 +22,63 @@ import {
 
 type MailboxItems = RemitImapMailboxResponse[];
 
+interface MailboxListsState {
+	items: MailboxItems[];
+	isPending: boolean;
+	error: Error | null;
+}
+
+export interface ResultFolderIndexState {
+	index: ResultFolderIndex;
+	isPending: boolean;
+	error: Error | null;
+}
+
 /**
  * Hoisted, not inline: `useQueries` skips re-running `combine` when it is given
  * the same function, so a stable reference is what makes this a memo rather than
  * a per-render reduce. Without it the index — and every search-result memo keyed
  * on it — rebuilds on every render.
  */
-const combineMailboxItems = (
-	results: { data?: { items: MailboxItems } }[],
-): MailboxItems[] => results.map((result) => result.data?.items ?? []);
+const combineMailboxLists = (
+	results: {
+		data?: { items: MailboxItems };
+		isPending: boolean;
+		error: Error | null;
+	}[],
+): MailboxListsState => ({
+	items: results.map((result) => result.data?.items ?? []),
+	isPending: results.some((result) => result.isPending),
+	error: results.find((result) => result.error)?.error ?? null,
+});
 
 export function useResultFolderIndex(
 	accounts: RemitImapAccountResponse[],
-): ResultFolderIndex {
-	const mailboxItems = useQueries({
+): ResultFolderIndexState {
+	const mailboxLists = useQueries({
 		queries: accounts.map((account) => ({
 			...mailboxOperationsListMailboxesOptions({
 				path: { accountId: account.accountId },
 			}),
 			staleTime: Infinity,
 		})),
-		combine: combineMailboxItems,
+		combine: combineMailboxLists,
 	});
 
-	return useMemo(
+	const index = useMemo(
 		() =>
 			buildResultFolderIndex(
 				accounts.map((account, i) => ({
 					folderAppointments: account.folderAppointments,
-					mailboxes: mailboxItems[i] ?? [],
+					mailboxes: mailboxLists.items[i] ?? [],
 				})),
 			),
-		[accounts, mailboxItems],
+		[accounts, mailboxLists],
 	);
+
+	return {
+		index,
+		isPending: mailboxLists.isPending,
+		error: mailboxLists.error,
+	};
 }

package/src/lib/api.ts

@@ -1,3 +1,4 @@
+import type { ApiError as ApiErrorWireBody } from "@remit/api-http-client/types.gen.ts";
 import { taggedFetch } from "./network-error";
 
 export class ApiError extends Error {
@@ -11,6 +12,46 @@ export class ApiError extends Error {
 	}
 }
 
+/**
+ * The wire body's coded half, re-checked at runtime. `ApiErrorWireBody` is the
+ * generated flat shape the API sends; `ApiError` is the class every HTTP
+ * failure arrives in, carrying that body at `.body`. Reading `code` off the
+ * class is the bug #1004 is about, so nothing outside this module reaches for
+ * either shape directly.
+ */
+export interface CodedApiErrorBody {
+	code: ApiErrorWireBody["code"];
+	details: Record<string, unknown> | undefined;
+}
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+	typeof value === "object" && value !== null && !Array.isArray(value);
+
+export const codedApiErrorBody = (
+	error: unknown,
+): CodedApiErrorBody | undefined => {
+	const body = error instanceof ApiError ? error.body : error;
+	if (!isRecord(body)) return undefined;
+	const { code, details } = body;
+	if (typeof code !== "string") return undefined;
+	return { code, details: isRecord(details) ? details : undefined };
+};
+
+const failureMessage = (body: unknown, status: number): string => {
+	if (isRecord(body) && body.message !== undefined && body.message !== null) {
+		const message = String(body.message);
+		if (message) return message;
+	}
+	return `Request failed with status ${status}`;
+};
+
+/**
+ * The one place an HTTP failure becomes an `ApiError`, so a test can hand a
+ * consumer the exact value the error interceptor produces.
+ */
+export const wrapHttpFailure = (body: unknown, status: number): ApiError =>
+	new ApiError(failureMessage(body, status), status, body);
+
 interface RequestOptions extends Omit<RequestInit, "body"> {
 	params?: Record<string, string | number | boolean | undefined>;
 	body?: unknown;
@@ -52,11 +93,7 @@ const request = async <T>(
 
 	if (!response.ok) {
 		const errorBody = await response.json().catch(() => undefined);
-		throw new ApiError(
-			errorBody?.message || `Request failed with status ${response.status}`,
-			response.status,
-			errorBody,
-		);
+		throw wrapHttpFailure(errorBody, response.status);
 	}
 
 	if (response.status === 204) {

package/src/lib/client.test.ts

@@ -0,0 +1,68 @@
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { trashOperationsEmptyTrash } from "@remit/api-http-client/sdk.gen.ts";
+import { type HttpMock, mockFetch } from "../test-support/http";
+import { ApiError } from "./api";
+import "./client";
+
+let http: HttpMock | undefined;
+
+afterEach(() => {
+	http?.restore();
+	http = undefined;
+});
+
+const answer = (status: number, body: unknown): void => {
+	http = mockFetch(
+		() =>
+			new Response(JSON.stringify(body), {
+				status,
+				headers: { "content-type": "application/json" },
+			}),
+	);
+};
+
+const empty = (): Promise<unknown> =>
+	trashOperationsEmptyTrash({
+		path: { accountId: "acc-1" },
+		throwOnError: true,
+	});
+
+describe("the error interceptor", () => {
+	it("hands the app an ApiError carrying the status and the wire body", async () => {
+		answer(409, {
+			code: "folder_role_unresolved",
+			message: "Nobody has confirmed which folder is this account's Trash",
+			details: { reason: "unconfirmed", role: "Trash", accountId: "acc-1" },
+		});
+
+		const error = await empty().then(
+			() => undefined,
+			(reason: unknown) => reason,
+		);
+
+		assert.ok(error instanceof ApiError);
+		assert.equal(error.status, 409);
+		assert.equal(
+			error.message,
+			"Nobody has confirmed which folder is this account's Trash",
+		);
+		assert.deepEqual(error.body, {
+			code: "folder_role_unresolved",
+			message: "Nobody has confirmed which folder is this account's Trash",
+			details: { reason: "unconfirmed", role: "Trash", accountId: "acc-1" },
+		});
+	});
+
+	it("falls back to the status when the body states no message", async () => {
+		answer(503, {});
+
+		const error = await empty().then(
+			() => undefined,
+			(reason: unknown) => reason,
+		);
+
+		assert.ok(error instanceof ApiError);
+		assert.equal(error.message, "Request failed with status 503");
+	});
+});

package/src/lib/client.ts

@@ -1,6 +1,6 @@
 import { client } from "@remit/api-http-client/client.gen.ts";
 import { getRuntimeConfig } from "../runtime-config";
-import { ApiError } from "./api";
+import { ApiError, wrapHttpFailure } from "./api";
 import { taggedFetch } from "./network-error";
 
 // In production, the config.js apiUrl points at the deployed API Gateway.
@@ -27,13 +27,7 @@ client.interceptors.error.use((error, response) => {
 	if (error instanceof ApiError) return error;
 	if (!response) return error;
 
-	const body = error;
-	const message =
-		body && typeof body === "object" && "message" in body
-			? String((body as { message: unknown }).message)
-			: `Request failed with status ${response.status}`;
-
-	return new ApiError(message, response.status, body);
+	return wrapHttpFailure(error, response.status);
 });
 
 export { client };

package/src/lib/quarantine-entries.ts

@@ -8,9 +8,11 @@ import { CANONICAL_TO_NAV_ROLE } from "./folder-roles";
  * canonical PascalCase the API uses everywhere. Both differences are resolved
  * here rather than by widening the kit's entry type.
  *
- * The record carries no hierarchy delimiter either, so the caller resolves the
- * account's own from its mailbox list and hands it in — the row shows a folder
- * name, and a path cannot be cut into one without it.
+ * The record carries no hierarchy delimiter either, so the caller joins the
+ * mailbox id against the account's own mailbox list and hands the delimiter in
+ * — the row shows a folder name, and a path cannot be cut into one without it.
+ * An empty delimiter means no account lists that mailbox, and the row keeps its
+ * whole path rather than being cut on a guess.
  */
 export function toQuarantineEntry(
 	wire: RemitImapQuarantineResponse,

package/src/routes/mail.tsx

@@ -173,7 +173,7 @@ function MailLayout() {
 		[accounts],
 	);
 	const mailboxNameIndex = useMailboxNameIndex(accounts);
-	const resultFolderIndex = useResultFolderIndex(accounts);
+	const resultFolderIndex = useResultFolderIndex(accounts).index;
 	const accountNameIndex = useMemo(
 		() => buildAccountNameIndex(accounts),
 		[accounts],

package/src/routes/settings/folders.tsx

@@ -31,6 +31,7 @@ import { isMailboxNotSettledRefusal } from "@/components/ui/folder-role-refusal"
 import { useCreateMailbox } from "@/hooks/useCreateMailbox";
 import { useFolderLabelTranslator } from "@/hooks/useFolderLabelTranslator";
 import { guardFolderDeletion } from "@/lib/delete-folder";
+import { softErrorStatuses } from "@/lib/error-classifier";
 import {
 	buildMailboxRoleMap,
 	CANONICAL_TO_NAV_ROLE,
@@ -57,6 +58,9 @@ function AccountFolders({ account }: { account: RemitImapAccountResponse }) {
 
 	const appointMutation = useMutation({
 		...folderRoleOperationsAppointFolderRoleMutation(),
+		// The pane states a still-settling mailbox inline; see the same meta on
+		// the prompt's own write.
+		meta: softErrorStatuses(409),
 		onSuccess: () => {
 			queryClient.invalidateQueries({
 				queryKey: configOperationsGetConfigQueryKey(),

package/src/test-support/http.ts

@@ -71,8 +71,9 @@ export const mockFetch = (responder: Responder = () => ({})): HttpMock => {
 
 /**
  * A failed request. The status travels in the body as well as on the response:
- * the generated client throws the parsed body, and the app's error classifier
- * reads the status off it.
+ * the generated client throws the parsed body, which the error interceptor
+ * re-wraps as an `ApiError` carrying the response status. Anything read off the
+ * body — a `code`, its `details` — sits at `.body`, never at the top level.
  */
 export const httpError = (status: number, message = "boom"): Response =>
 	new Response(JSON.stringify({ status, message }), {

package/src/hooks/useAccountDelimiters.ts

@@ -1,41 +0,0 @@
-/**
- * The hierarchy separator each account's own server reports, for surfaces that
- * hold a provider path but not the mailbox row it came from — quarantine, so
- * far. Fans out the same per-account mailbox-list query as
- * `useResultFolderIndex` (cached forever, react-query dedupes the identical key
- * across call sites) and keeps only the delimiter.
- */
-import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import type { RemitImapMailboxResponse } from "@remit/api-http-client/types.gen.ts";
-import { useQueries } from "@tanstack/react-query";
-import { useMemo } from "react";
-import { folderDelimiter } from "@/lib/move-options";
-
-/**
- * Hoisted so `useQueries` treats this as a memo rather than a per-render
- * reduce — see `useResultFolderIndex`.
- */
-const combineDelimiters = (
-	results: { data?: { items: RemitImapMailboxResponse[] } }[],
-): string[] =>
-	results.map((result) => folderDelimiter(result.data?.items ?? []));
-
-export function useAccountDelimiters(
-	accountIds: readonly string[],
-): ReadonlyMap<string, string> {
-	const delimiters = useQueries({
-		queries: accountIds.map((accountId) => ({
-			...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
-			staleTime: Infinity,
-		})),
-		combine: combineDelimiters,
-	});
-
-	return useMemo(
-		() =>
-			new Map(
-				accountIds.map((accountId, i) => [accountId, delimiters[i] ?? "/"]),
-			),
-		[accountIds, delimiters],
-	);
-}