@remit/web-client 0.0.99 → 0.0.100

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.99",
+  "version": "0.0.100",
   "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": {

package/src/components/mail/MoveToTrigger.tsx

@@ -15,9 +15,9 @@ import { Drawer } from "vaul";
 import { ErrorState } from "@/components/ui/ErrorState";
 import { useFolderAppointments } from "@/hooks/useArchiveMailbox";
 import { useCreateMailbox } from "@/hooks/useCreateMailbox";
+import { useFolderLabelTranslator } from "@/hooks/useFolderLabelTranslator";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
-import { buildMailboxRoleMap, labelForMailbox } from "@/lib/folder-roles";
-import { buildMoveTargets } from "@/lib/move-targets";
+import { buildMoveOptions } from "@/lib/move-options";
 import { cn } from "@/lib/utils";
 
 interface MoveToTriggerProps {
@@ -71,15 +71,7 @@ export const MoveToTrigger = ({
 	const triggerLabel = label ?? "Move to folder";
 	const popoverId = useId();
 	const { t } = useTranslation("mail", { useSuspense: false });
-	// `labelForMailbox` expects a translator with a positional `(key,
-	// fallback)` shape; i18next's `t` treats the second argument as an options
-	// object — passing it raw breaks fallback behavior. Wrap it the same way
-	// the sidebar adapter does, memoized so it's a stable `useMemo` dependency.
-	const translator = useCallback(
-		(key: string, fallback: string): string =>
-			t(key, { defaultValue: fallback }),
-		[t],
-	);
+	const translator = useFolderLabelTranslator();
 
 	const {
 		data: mailboxesResponse,
@@ -98,28 +90,21 @@ export const MoveToTrigger = ({
 	const folderAppointments = useFolderAppointments(accountId);
 	const { createFolder } = useCreateMailbox(accountId);
 
-	const options = useMemo<MoveMailboxOption[]>(() => {
-		const targets = buildMoveTargets(
-			mailboxesResponse?.items ?? [],
-			folderAppointments,
-		);
-		const roleMap = buildMailboxRoleMap(folderAppointments);
-		return targets.map((mailbox) => ({
-			id: mailbox.mailboxId,
-			label: labelForMailbox(
-				mailbox,
-				roleMap.get(mailbox.mailboxId),
+	const options = useMemo<MoveMailboxOption[]>(
+		() =>
+			buildMoveOptions({
+				mailboxes: mailboxesResponse?.items ?? [],
+				folderAppointments,
+				currentMailboxId,
 				translator,
-			),
-			searchValue: mailbox.fullPath,
-			isCurrent: mailbox.mailboxId === currentMailboxId,
-		}));
-	}, [
-		mailboxesResponse?.items,
-		folderAppointments,
-		currentMailboxId,
-		translator,
-	]);
+			}),
+		[
+			mailboxesResponse?.items,
+			folderAppointments,
+			currentMailboxId,
+			translator,
+		],
+	);
 
 	const handleSelect = useCallback(
 		(destinationMailboxId: string) => {

package/src/components/mail/SelectionWizardHost.tsx

@@ -41,16 +41,16 @@ import {
 	useEscalatedActions,
 } from "@/hooks/useEscalatedActions";
 import { useCreateFilter } from "@/hooks/useFilters";
+import { useFolderLabelTranslator } from "@/hooks/useFolderLabelTranslator";
 import { useMatchSample, useSearchMatchSample } from "@/hooks/useMatchSample";
 import { useOrganizeJob } from "@/hooks/useOrganizeJob";
 import { useOrganizeWiden } from "@/hooks/useOrganizeWiden";
 import { useRulePreview } from "@/hooks/useRulePreview";
 import { useSelectedSubjects } from "@/hooks/useSelectedSubjects";
 import type { BulkActionProgress, BulkRunOutcome } from "@/lib/bulk-actions";
-import { getMailboxDisplayName } from "@/lib/folder-roles";
 import { useListHeaderChrome } from "@/lib/list-header-chrome";
 import { useMailContext } from "@/lib/mail-context";
-import { buildMoveTargets } from "@/lib/move-targets";
+import { buildMoveOptions } from "@/lib/move-options";
 import {
 	buildWizardDraft,
 	canBackApplyDraft,
@@ -387,17 +387,16 @@ function SelectionWizardSession({
 		staleTime: Number.POSITIVE_INFINITY,
 	});
 	const folderAppointments = useFolderAppointments(accountId);
+	const translator = useFolderLabelTranslator();
 	const mailboxes = useMemo<MoveMailboxOption[]>(
 		() =>
-			buildMoveTargets(mailboxesData?.items ?? [], folderAppointments).map(
-				(mailbox) => ({
-					id: mailbox.mailboxId,
-					label: getMailboxDisplayName(mailbox.fullPath),
-					searchValue: mailbox.fullPath,
-					isCurrent: mailbox.mailboxId === mailboxId,
-				}),
-			),
-		[mailboxesData?.items, folderAppointments, mailboxId],
+			buildMoveOptions({
+				mailboxes: mailboxesData?.items ?? [],
+				folderAppointments,
+				currentMailboxId: mailboxId,
+				translator,
+			}),
+		[mailboxesData?.items, folderAppointments, mailboxId, translator],
 	);
 	const { createFolder } = useCreateMailbox(accountId);
 

package/src/components/mail/SpamRescue.tsx

@@ -14,13 +14,12 @@ import {
 	useRef,
 	useState,
 } from "react";
-import { useTranslation } from "react-i18next";
 import {
 	useFolderAppointments,
 	useInboxMailbox,
 } from "@/hooks/useArchiveMailbox";
-import { buildMailboxRoleMap, labelForMailbox } from "@/lib/folder-roles";
-import { buildMoveTargets } from "@/lib/move-targets";
+import { useFolderLabelTranslator } from "@/hooks/useFolderLabelTranslator";
+import { buildMoveOptions } from "@/lib/move-options";
 import {
 	recordRescueCandidatesSurfaced,
 	recordRescueCommitted,
@@ -51,12 +50,7 @@ export function SpamRescue({
 }: SpamRescueProps) {
 	const [open, setOpen] = useState(false);
 	const telemetry = useTelemetry();
-	const { t } = useTranslation("mail", { useSuspense: false });
-	const translator = useCallback(
-		(key: string, fallback: string): string =>
-			t(key, { defaultValue: fallback }),
-		[t],
-	);
+	const translator = useFolderLabelTranslator();
 
 	const { inboxMailboxId } = useInboxMailbox(accountId);
 	const folderAppointments = useFolderAppointments(accountId);
@@ -66,28 +60,21 @@ export function SpamRescue({
 		staleTime: Infinity,
 	});
 
-	const folders = useMemo<MoveMailboxOption[]>(() => {
-		const targets = buildMoveTargets(
-			mailboxesResponse?.items ?? [],
-			folderAppointments,
-		);
-		const roleMap = buildMailboxRoleMap(folderAppointments);
-		return targets.map((mailbox) => ({
-			id: mailbox.mailboxId,
-			label: labelForMailbox(
-				mailbox,
-				roleMap.get(mailbox.mailboxId),
+	const folders = useMemo<MoveMailboxOption[]>(
+		() =>
+			buildMoveOptions({
+				mailboxes: mailboxesResponse?.items ?? [],
+				folderAppointments,
+				currentMailboxId,
 				translator,
-			),
-			searchValue: mailbox.fullPath,
-			isCurrent: mailbox.mailboxId === currentMailboxId,
-		}));
-	}, [
-		mailboxesResponse?.items,
-		folderAppointments,
-		currentMailboxId,
-		translator,
-	]);
+			}),
+		[
+			mailboxesResponse?.items,
+			folderAppointments,
+			currentMailboxId,
+			translator,
+		],
+	);
 
 	const defaultDestinationId = useMemo(() => {
 		if (inboxMailboxId) return inboxMailboxId;

package/src/components/settings/DeleteFolderDialog.tsx

@@ -13,13 +13,10 @@ import { AlertTriangle, FolderInput, Loader2, Trash2, X } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useCreateMailbox } from "@/hooks/useCreateMailbox";
 import { useDeleteFolder } from "@/hooks/useDeleteFolder";
-import {
-	excludeFolder,
-	initialStage,
-	moveProgressLabel,
-} from "@/lib/delete-folder";
+import { useFolderLabelTranslator } from "@/hooks/useFolderLabelTranslator";
+import { initialStage, moveProgressLabel } from "@/lib/delete-folder";
 import { getMailboxDisplayName } from "@/lib/folder-roles";
-import { buildMoveTargets } from "@/lib/move-targets";
+import { buildMoveOptions } from "@/lib/move-options";
 
 interface DeleteFolderDialogProps {
 	open: boolean;
@@ -61,6 +58,7 @@ export function DeleteFolderDialog({
 		initialStage(folder.messageCount),
 	);
 	const { createFolder } = useCreateMailbox(accountId);
+	const translator = useFolderLabelTranslator();
 	const {
 		phase,
 		progress,
@@ -90,15 +88,13 @@ export function DeleteFolderDialog({
 
 	const destinations = useMemo<MoveMailboxOption[]>(
 		() =>
-			excludeFolder(
-				buildMoveTargets(mailboxes, appointments),
-				folder.mailboxId,
-			).map((mailbox) => ({
-				id: mailbox.mailboxId,
-				label: getMailboxDisplayName(mailbox.fullPath),
-				searchValue: mailbox.fullPath,
-			})),
-		[mailboxes, appointments, folder.mailboxId],
+			buildMoveOptions({
+				mailboxes,
+				folderAppointments: appointments,
+				excludeMailboxId: folder.mailboxId,
+				translator,
+			}),
+		[mailboxes, appointments, folder.mailboxId, translator],
 	);
 
 	const handleCreateFolder = async (

package/src/hooks/useFolderLabelTranslator.ts

@@ -0,0 +1,19 @@
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+
+/**
+ * `labelForMailbox` expects a positional `(key, fallback)` translator; i18next's
+ * `t` reads its second argument as an options object, which drops the fallback.
+ * Memoized so callers can hold it as a `useMemo` dependency.
+ */
+export const useFolderLabelTranslator = (): ((
+	key: string,
+	fallback: string,
+) => string) => {
+	const { t } = useTranslation("mail", { useSuspense: false });
+	return useCallback(
+		(key: string, fallback: string): string =>
+			t(key, { defaultValue: fallback }),
+		[t],
+	);
+};

package/src/lib/move-options.test.ts

@@ -0,0 +1,140 @@
+import assert from "node:assert";
+import { readFileSync } from "node:fs";
+import { describe, test } from "node:test";
+import { fileURLToPath } from "node:url";
+import type {
+	RemitImapFolderAppointment,
+	RemitImapMailboxResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import { buildMoveOptions } from "./move-options.js";
+
+const englishBundle = JSON.parse(
+	readFileSync(
+		fileURLToPath(
+			new URL("../../public/locales/en/mail.json", import.meta.url),
+		),
+		"utf8",
+	),
+) as { sidebar: Record<string, string> };
+
+// The picker is handed the same shipped English bundle the app loads, so the
+// expected labels are the product's own, not strings restated by the test.
+const translate = (key: string, fallback: string): string =>
+	englishBundle.sidebar[key.replace("sidebar.", "")] ?? fallback;
+
+const make = (
+	overrides: Partial<RemitImapMailboxResponse> & {
+		mailboxId: string;
+		fullPath: string;
+	},
+): RemitImapMailboxResponse =>
+	({
+		accountId: "acct-1",
+		namespaceType: "personal",
+		namespacePrefix: "",
+		hierarchyDelimiter: "/",
+		messageCount: 0,
+		unseenCount: 0,
+		deletedCount: 0,
+		createdAt: 0,
+		updatedAt: 0,
+		...overrides,
+	}) as RemitImapMailboxResponse;
+
+const appoint = (
+	role: RemitImapFolderAppointment["role"],
+	mailboxId: string,
+): RemitImapFolderAppointment => ({ role, mailboxId });
+
+const applePaths = [
+	make({ mailboxId: "mb-inbox", fullPath: "INBOX" }),
+	make({ mailboxId: "mb-trash", fullPath: "INBOX/Deleted Messages" }),
+	make({ mailboxId: "mb-junk", fullPath: "INBOX/Junk" }),
+	make({ mailboxId: "mb-receipts", fullPath: "INBOX/Receipts" }),
+];
+
+const appleAppointments = [
+	appoint("Inbox", "mb-inbox"),
+	appoint("Trash", "mb-trash"),
+	appoint("Junk", "mb-junk"),
+];
+
+const labelOf = (
+	options: ReturnType<typeof buildMoveOptions>,
+	id: string,
+): string | undefined => options.find((option) => option.id === id)?.label;
+
+describe("buildMoveOptions", () => {
+	test("labels appointed folders by role, not by the provider's leaf", () => {
+		const options = buildMoveOptions({
+			mailboxes: applePaths,
+			folderAppointments: appleAppointments,
+			translator: translate,
+		});
+		assert.equal(labelOf(options, "mb-inbox"), "Inbox");
+		assert.equal(labelOf(options, "mb-trash"), "Trash");
+		assert.equal(labelOf(options, "mb-junk"), "Spam");
+	});
+
+	test("a displayNameOverride wins over the role label", () => {
+		const options = buildMoveOptions({
+			mailboxes: [
+				make({
+					mailboxId: "mb-trash",
+					fullPath: "INBOX/Deleted Messages",
+					displayNameOverride: "Bin",
+				}),
+			],
+			folderAppointments: [appoint("Trash", "mb-trash")],
+			translator: translate,
+		});
+		assert.equal(labelOf(options, "mb-trash"), "Bin");
+	});
+
+	test("an unappointed folder keeps its own name", () => {
+		const options = buildMoveOptions({
+			mailboxes: applePaths,
+			folderAppointments: appleAppointments,
+			translator: translate,
+		});
+		assert.equal(labelOf(options, "mb-receipts"), "Receipts");
+	});
+
+	test("the full provider path stays searchable", () => {
+		const options = buildMoveOptions({
+			mailboxes: applePaths,
+			folderAppointments: appleAppointments,
+			translator: translate,
+		});
+		assert.equal(
+			options.find((option) => option.id === "mb-trash")?.searchValue,
+			"INBOX/Deleted Messages",
+		);
+	});
+
+	test("the current mailbox is marked and nothing else is", () => {
+		const options = buildMoveOptions({
+			mailboxes: applePaths,
+			folderAppointments: appleAppointments,
+			currentMailboxId: "mb-junk",
+			translator: translate,
+		});
+		assert.deepStrictEqual(
+			options.filter((option) => option.isCurrent).map((option) => option.id),
+			["mb-junk"],
+		);
+	});
+
+	test("an excluded mailbox is not offered as a destination", () => {
+		const options = buildMoveOptions({
+			mailboxes: applePaths,
+			folderAppointments: appleAppointments,
+			excludeMailboxId: "mb-receipts",
+			translator: translate,
+		});
+		assert.equal(
+			options.some((option) => option.id === "mb-receipts"),
+			false,
+		);
+	});
+});

package/src/lib/move-options.ts

@@ -0,0 +1,46 @@
+import type {
+	RemitImapFolderAppointment,
+	RemitImapMailboxResponse,
+} from "@remit/api-http-client/types.gen.ts";
+import type { MoveMailboxOption } from "@remit/ui";
+import { excludeFolder } from "./delete-folder.js";
+import { buildMailboxRoleMap, labelForMailbox } from "./folder-roles.js";
+import { buildMoveTargets } from "./move-targets.js";
+
+type Translator = (key: string, fallback: string) => string;
+
+interface MoveOptionsInput {
+	mailboxes: readonly RemitImapMailboxResponse[];
+	folderAppointments: readonly RemitImapFolderAppointment[];
+	/** Rendered as a non-selectable row, so the user sees where mail lives now. */
+	currentMailboxId?: string;
+	/** Dropped entirely — the folder being deleted is not its own destination. */
+	excludeMailboxId?: string;
+	translator?: Translator;
+}
+
+/**
+ * The single shaping of a mailbox list into Move-to picker options. Labels
+ * follow the account's role appointments (RFC 032, #976) and any
+ * `displayNameOverride`, so a picker reads `Inbox`/`Trash` rather than the
+ * provider's leaf; the full path stays searchable.
+ */
+export const buildMoveOptions = ({
+	mailboxes,
+	folderAppointments,
+	currentMailboxId,
+	excludeMailboxId,
+	translator,
+}: MoveOptionsInput): MoveMailboxOption[] => {
+	const targets = buildMoveTargets(mailboxes, folderAppointments);
+	const roleMap = buildMailboxRoleMap(folderAppointments);
+	const destinations = excludeMailboxId
+		? excludeFolder(targets, excludeMailboxId)
+		: targets;
+	return destinations.map((mailbox) => ({
+		id: mailbox.mailboxId,
+		label: labelForMailbox(mailbox, roleMap.get(mailbox.mailboxId), translator),
+		searchValue: mailbox.fullPath,
+		isCurrent: mailbox.mailboxId === currentMailboxId,
+	}));
+};