@remit/web-client 0.0.194 → 0.0.195

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.194",
+  "version": "0.0.195",
   "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": {
@@ -75,6 +75,7 @@
   "dependencies": {
     "@hookform/resolvers": "*",
     "@remit/api-http-client": "*",
+    "@remit/data-ports": "*",
     "@remit/domain-enums": "*",
     "@remit/ui": "*",
     "@tanstack/react-query": "^5",

package/src/hooks/useAutoMovedBadge.ts

@@ -3,6 +3,7 @@ import type {
 	RemitImapAutoMovedInfo,
 	RemitImapMessageSpamReport,
 } from "@remit/api-http-client/types.gen.ts";
+import { mailboxLeafName } from "@remit/data-ports/mailbox-name";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback } from "react";
 import {
@@ -11,7 +12,6 @@ import {
 	resolveUndoTargetMailboxId,
 	spamReportLabel,
 } from "@/lib/auto-moved";
-import { getMailboxDisplayName } from "@/lib/folder-roles";
 import { useInboxMailbox, useJunkMailbox } from "./useArchiveMailbox";
 import { useMoveMessages } from "./useMoveMessages";
 import { useReportSpam } from "./useReportSpam";
@@ -132,7 +132,7 @@ export const useAutoMovedBadge = ({
 	const sourceFolderName = autoMoved.fromMailboxId
 		? mailboxes?.items
 				.filter((mailbox) => mailbox.mailboxId === autoMoved.fromMailboxId)
-				.map((mailbox) => getMailboxDisplayName(mailbox.fullPath))[0]
+				.map((mailbox) => mailboxLeafName(mailbox))[0]
 		: undefined;
 
 	return {

package/src/hooks/useCreateMailbox.render.test.ts

@@ -67,6 +67,7 @@ const mount = (
 				mailboxId: `mbx-${body.fullPath}`,
 				accountId: ACCOUNT,
 				fullPath: body.fullPath,
+				hierarchyDelimiter: "/",
 				syncStatus: createdSyncStatus,
 			} as RemitImapMailboxResponse);
 			return { mailboxId: `mbx-${body.fullPath}`, fullPath: body.fullPath };
@@ -173,6 +174,7 @@ describe("useCreateMailbox.createFolder validation", () => {
 					mailboxId: `mbx-${body.fullPath}`,
 					accountId: ACCOUNT,
 					fullPath: body.fullPath,
+					hierarchyDelimiter: "/",
 				} as RemitImapMailboxResponse);
 				return { mailboxId: `mbx-${body.fullPath}`, fullPath: body.fullPath };
 			}

package/src/hooks/useCreateMailbox.ts

@@ -3,10 +3,10 @@ import {
 	mailboxOperationsListMailboxesOptions,
 	mailboxOperationsListMailboxesQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { mailboxLeafName } from "@remit/data-ports/mailbox-name";
 import type { FolderTreeNode } from "@remit/ui";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useRef } from "react";
-import { getMailboxDisplayName } from "@/lib/folder-roles";
 import { waitForMailboxSynced } from "@/lib/mailbox-sync-wait";
 import {
 	composeFolderPath,
@@ -136,7 +136,7 @@ export function useCreateMailbox(accountId: string | undefined) {
 			pendingByPath.current.delete(fullPath);
 			return {
 				id: confirmed.mailboxId,
-				label: getMailboxDisplayName(confirmed.fullPath),
+				label: mailboxLeafName(confirmed),
 				path: confirmed.fullPath,
 			};
 		},

package/src/lib/folder-roles.test.ts

@@ -3,7 +3,6 @@ import { describe, test } from "node:test";
 import type { RemitImapFolderAppointment } from "@remit/api-http-client/types.gen.ts";
 import {
 	buildMailboxRoleMap,
-	getMailboxDisplayName,
 	labelForMailbox,
 	shouldShowUnreadBadgeForRole,
 } from "./folder-roles.js";
@@ -43,16 +42,6 @@ describe("buildMailboxRoleMap", () => {
 	});
 });
 
-describe("getMailboxDisplayName", () => {
-	test("returns the leaf segment of a nested path", () => {
-		assert.equal(getMailboxDisplayName("INBOX/Sent Messages"), "Sent Messages");
-	});
-
-	test("returns the whole path when there is no delimiter", () => {
-		assert.equal(getMailboxDisplayName("INBOX"), "INBOX");
-	});
-});
-
 describe("labelForMailbox", () => {
 	const t = (key: string, fallback: string) =>
 		key === "sidebar.sent" ? "Verzonden" : fallback;
@@ -60,7 +49,11 @@ describe("labelForMailbox", () => {
 	test("a trimmed displayNameOverride wins over everything", () => {
 		assert.equal(
 			labelForMailbox(
-				{ fullPath: "INBOX/Sent", displayNameOverride: "  My Sent  " },
+				{
+					fullPath: "INBOX/Sent",
+					hierarchyDelimiter: "/",
+					displayNameOverride: "  My Sent  ",
+				},
 				"sent",
 				t,
 			),
@@ -70,26 +63,44 @@ describe("labelForMailbox", () => {
 
 	test("falls back to the translated canonical role label", () => {
 		assert.equal(
-			labelForMailbox({ fullPath: "INBOX/Verzonden" }, "sent", t),
+			labelForMailbox(
+				{ fullPath: "INBOX/Verzonden", hierarchyDelimiter: "/" },
+				"sent",
+				t,
+			),
 			"Verzonden",
 		);
 	});
 
 	test("falls back to the provider leaf when there is no role", () => {
 		assert.equal(
-			labelForMailbox({ fullPath: "INBOX/Nieuwsbrieven" }, undefined, t),
+			labelForMailbox(
+				{ fullPath: "INBOX/Nieuwsbrieven", hierarchyDelimiter: "/" },
+				undefined,
+				t,
+			),
 			"Nieuwsbrieven",
 		);
 	});
 
 	test("falls back to the leaf when no translator is supplied", () => {
-		assert.equal(labelForMailbox({ fullPath: "INBOX/Sent" }, "sent"), "Sent");
+		assert.equal(
+			labelForMailbox(
+				{ fullPath: "INBOX/Sent", hierarchyDelimiter: "/" },
+				"sent",
+			),
+			"Sent",
+		);
 	});
 
 	test("a blank/whitespace override is ignored", () => {
 		assert.equal(
 			labelForMailbox(
-				{ fullPath: "INBOX/Sent", displayNameOverride: "   " },
+				{
+					fullPath: "INBOX/Sent",
+					hierarchyDelimiter: "/",
+					displayNameOverride: "   ",
+				},
 				"sent",
 				t,
 			),
@@ -98,6 +109,38 @@ describe("labelForMailbox", () => {
 	});
 });
 
+describe("labelForMailbox — the server’s own delimiter (#877)", () => {
+	test("a dot-delimited nested folder renders its leaf", () => {
+		assert.equal(
+			labelForMailbox(
+				{ fullPath: "INBOX.Projects.Q3", hierarchyDelimiter: "." },
+				undefined,
+			),
+			"Q3",
+		);
+	});
+
+	test("a flat namespace renders the whole name", () => {
+		assert.equal(
+			labelForMailbox(
+				{ fullPath: "Projects/Q3", hierarchyDelimiter: "" },
+				undefined,
+			),
+			"Projects/Q3",
+		);
+	});
+
+	test("a slash in a dot-delimited name is part of the name", () => {
+		assert.equal(
+			labelForMailbox(
+				{ fullPath: "INBOX.Reading/Writing", hierarchyDelimiter: "." },
+				undefined,
+			),
+			"Reading/Writing",
+		);
+	});
+});
+
 describe("shouldShowUnreadBadgeForRole", () => {
 	test("hides the badge for Sent, Drafts, and Trash", () => {
 		assert.equal(shouldShowUnreadBadgeForRole("sent"), false);

package/src/lib/folder-roles.ts

@@ -2,6 +2,10 @@ import type {
 	RemitImapCanonicalMailboxRole,
 	RemitImapFolderAppointment,
 } from "@remit/api-http-client/types.gen.ts";
+import {
+	type MailboxPath,
+	mailboxLeafName,
+} from "@remit/data-ports/mailbox-name";
 import type { NavMailboxRole } from "@remit/ui";
 
 /**
@@ -79,12 +83,6 @@ export function buildMailboxRoleMap(
 	return byMailbox;
 }
 
-/** Leaf segment of a provider path (`INBOX/Spam` → `Spam`). */
-export const getMailboxDisplayName = (fullPath: string): string => {
-	const parts = fullPath.split("/");
-	return parts[parts.length - 1] || fullPath;
-};
-
 type Translator = (key: string, fallback: string) => string;
 
 /**
@@ -92,13 +90,13 @@ type Translator = (key: string, fallback: string) => string;
  * canonical localized label for the appointed role, else the provider leaf.
  */
 export function labelForMailbox(
-	mailbox: { fullPath: string; displayNameOverride?: string },
+	mailbox: MailboxPath & { displayNameOverride?: string },
 	role: NavMailboxRole | undefined,
 	t?: Translator,
 ): string {
 	const override = mailbox.displayNameOverride?.trim();
 	if (override) return override;
-	const leaf = getMailboxDisplayName(mailbox.fullPath);
+	const leaf = mailboxLeafName(mailbox);
 	if (!role || !t) return leaf;
 	return t(`sidebar.${role}`, leaf);
 }

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

@@ -214,3 +214,22 @@ describe("buildMoveTargets — Outbox locale exclusion (#290)", () => {
 		assert.deepStrictEqual(ids, ["custom", "inbox", "outboxy", "trash"]);
 	});
 });
+
+describe("buildMoveTargets — the server’s own delimiter (#877)", () => {
+	test("orders and filters by the leaf under a dot-delimited namespace", () => {
+		const dotted = (mailboxId: string, fullPath: string) =>
+			make({ mailboxId, fullPath, hierarchyDelimiter: "." });
+		const result = buildMoveTargets(
+			[
+				dotted("beta", "INBOX.Projects.Beta"),
+				dotted("outbox", "INBOX.Outbox"),
+				dotted("alpha", "INBOX.Zoo.Alpha"),
+			],
+			[],
+		);
+		assert.deepStrictEqual(
+			result.map((mailbox) => mailbox.mailboxId),
+			["alpha", "beta"],
+		);
+	});
+});

package/src/lib/move-targets.ts

@@ -2,11 +2,8 @@ import type {
 	RemitImapFolderAppointment,
 	RemitImapMailboxResponse,
 } from "@remit/api-http-client/types.gen.ts";
-import {
-	buildMailboxRoleMap,
-	getMailboxDisplayName,
-	ROLE_PRIORITY,
-} from "./folder-roles.js";
+import { mailboxLeafName } from "@remit/data-ports/mailbox-name";
+import { buildMailboxRoleMap, ROLE_PRIORITY } from "./folder-roles.js";
 
 // Outbox has no IMAP special-use flag (RFC 6154 doesn't define one) and isn't
 // a canonical role (RFC 032 exclusive-folder-appointment) either — it's
@@ -27,7 +24,7 @@ const OUTBOX_LOCALE_NAMES: ReadonlySet<string> = new Set([
 ]);
 
 const isOutboxDestination = (mailbox: RemitImapMailboxResponse): boolean => {
-	const leaf = getMailboxDisplayName(mailbox.fullPath).trim().toLowerCase();
+	const leaf = mailboxLeafName(mailbox).trim().toLowerCase();
 	return OUTBOX_LOCALE_NAMES.has(leaf);
 };
 
@@ -65,10 +62,9 @@ export const buildMoveTargets = (
 			? ROLE_PRIORITY.indexOf(roleMap.get(b.mailboxId) ?? "inbox")
 			: NON_SYSTEM_PRIORITY;
 		if (aPriority !== bPriority) return aPriority - bPriority;
-		return getMailboxDisplayName(a.fullPath).localeCompare(
-			getMailboxDisplayName(b.fullPath),
-			undefined,
-			{ sensitivity: "base", numeric: true },
-		);
+		return mailboxLeafName(a).localeCompare(mailboxLeafName(b), undefined, {
+			sensitivity: "base",
+			numeric: true,
+		});
 	});
 };

package/src/lib/search-token-index.test.ts

@@ -209,3 +209,32 @@ describe("buildAccountSuggestionValues", () => {
 		);
 	});
 });
+
+describe("the server’s own delimiter (#877)", () => {
+	it("offers the leaf of a dot-delimited folder as its shortest spelling", () => {
+		const values = buildMailboxSuggestionValues([
+			[
+				mailbox({
+					mailboxId: "m1",
+					fullPath: "INBOX.Projects.Q3",
+					hierarchyDelimiter: ".",
+				}),
+			],
+		]);
+		assert.deepEqual(values, [{ value: "Q3", label: "Q3" }]);
+	});
+
+	it("resolves in: by the leaf of a dot-delimited folder", () => {
+		const index = buildMailboxNameIndex([
+			[
+				mailbox({
+					mailboxId: "m1",
+					fullPath: "INBOX.Projects.Q3",
+					hierarchyDelimiter: ".",
+				}),
+			],
+		]);
+		assert.equal(index.get("q3"), "m1");
+		assert.equal(index.get("inbox.projects.q3"), "m1");
+	});
+});

package/src/lib/search-token-index.ts

@@ -13,7 +13,7 @@ import type {
 	RemitImapAccountResponse,
 	RemitImapMailboxResponse,
 } from "@remit/api-http-client/types.gen.ts";
-import { getMailboxDisplayName } from "./folder-roles.js";
+import { mailboxLeafName } from "@remit/data-ports/mailbox-name";
 import type { SearchSuggestionValue } from "./search-suggestions.js";
 
 /**
@@ -52,11 +52,9 @@ export function buildMailboxNameIndex(
 		for (const mailbox of mailboxes) {
 			const fullPath = mailbox.fullPath?.toLowerCase();
 			if (!fullPath) continue;
-			const lastSegment = fullPath.split("/").pop();
+			const leaf = mailboxLeafName(mailbox).toLowerCase();
 			if (!index.has(fullPath)) index.set(fullPath, mailbox.mailboxId);
-			if (lastSegment && !index.has(lastSegment)) {
-				index.set(lastSegment, mailbox.mailboxId);
-			}
+			if (!index.has(leaf)) index.set(leaf, mailbox.mailboxId);
 		}
 	}
 	return index;
@@ -78,14 +76,14 @@ export function buildMailboxSuggestionValues(
 	const all = mailboxesByAccount.flat().filter((mailbox) => mailbox.fullPath);
 	const leafCounts = new Map<string, number>();
 	for (const mailbox of all) {
-		const leaf = getMailboxDisplayName(mailbox.fullPath).toLowerCase();
+		const leaf = mailboxLeafName(mailbox).toLowerCase();
 		leafCounts.set(leaf, (leafCounts.get(leaf) ?? 0) + 1);
 	}
 	const emailByAccountId = new Map(
 		accounts.map((account) => [account.accountId, account.email]),
 	);
 	return all.map((mailbox) => {
-		const leaf = getMailboxDisplayName(mailbox.fullPath);
+		const leaf = mailboxLeafName(mailbox);
 		const unique = leafCounts.get(leaf.toLowerCase()) === 1;
 		const hint =
 			accounts.length > 1 ? emailByAccountId.get(mailbox.accountId) : undefined;

package/src/routes/settings/folders.tsx

@@ -166,6 +166,7 @@ function AccountFolders({ account }: { account: RemitImapAccountResponse }) {
 	const candidates: CandidateFolder[] = mailboxes.map((mailbox) => ({
 		mailboxId: mailbox.mailboxId,
 		providerPath: mailbox.fullPath,
+		hierarchyDelimiter: mailbox.hierarchyDelimiter,
 		messageCount: mailbox.messageCount,
 	}));
 
@@ -241,7 +242,10 @@ function AccountFolders({ account }: { account: RemitImapAccountResponse }) {
 						translator,
 					)}
 					defaultLabel={labelForMailbox(
-						{ fullPath: renaming.fullPath },
+						{
+							fullPath: renaming.fullPath,
+							hierarchyDelimiter: renaming.hierarchyDelimiter,
+						},
 						roleMap.get(renaming.mailboxId),
 						translator,
 					)}