@remit/ui 0.0.139 → 0.0.140

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.139",
+  "version": "0.0.140",
   "type": "module",
   "files": [
     "src"

package/src/components/folder-role.tsx

@@ -48,7 +48,11 @@ export function canonicalRoleLabel(role: FolderRole): string {
 	return ROLE_LABEL[role];
 }
 
-/** Leaf segment of a provider path (`INBOX/Spam` → `Spam`). */
+/**
+ * Leaf segment of a provider path (`INBOX/Spam` → `Spam`). Only for the two
+ * surfaces whose wire payload carries no `hierarchyDelimiter` — quarantine
+ * entries and search-result provenance. Everything else: `folderLeaf`.
+ */
 export function providerLeaf(providerPath: string): string {
 	const parts = providerPath.split("/");
 	return parts[parts.length - 1] || providerPath;

package/src/components/role-appointment-list.render.test.ts

@@ -11,16 +11,28 @@ import {
 const noop = () => {};
 
 const folders: CandidateFolder[] = [
-	{ mailboxId: "mb-inbox", providerPath: "INBOX", messageCount: 4821 },
+	{
+		mailboxId: "mb-inbox",
+		providerPath: "INBOX",
+		hierarchyDelimiter: "/",
+		messageCount: 4821,
+	},
 	{
 		mailboxId: "mb-concepten",
 		providerPath: "INBOX/Concepten",
+		hierarchyDelimiter: "/",
 		messageCount: 340,
 	},
-	{ mailboxId: "mb-drafts", providerPath: "INBOX/Drafts", messageCount: 0 },
+	{
+		mailboxId: "mb-drafts",
+		providerPath: "INBOX/Drafts",
+		hierarchyDelimiter: "/",
+		messageCount: 0,
+	},
 	{
 		mailboxId: "mb-news",
 		providerPath: "INBOX/Nieuwsbrieven",
+		hierarchyDelimiter: "/",
 		messageCount: 2870,
 	},
 ];
@@ -215,3 +227,63 @@ describe("RoleAppointmentList", () => {
 		);
 	});
 });
+
+describe("RoleAppointmentList — the server’s own delimiter (#877)", () => {
+	const dotted: CandidateFolder[] = [
+		{
+			mailboxId: "mb-inbox",
+			providerPath: "INBOX",
+			hierarchyDelimiter: ".",
+			messageCount: 4821,
+		},
+		{
+			mailboxId: "mb-concepten",
+			providerPath: "INBOX.Projects.Concepten",
+			hierarchyDelimiter: ".",
+			messageCount: 340,
+		},
+		{
+			mailboxId: "mb-news",
+			providerPath: "INBOX.Projects.Nieuwsbrieven",
+			hierarchyDelimiter: ".",
+			messageCount: 2870,
+		},
+	];
+
+	const renderDotted = (
+		appointments: Record<string, RoleAppointment>,
+	): string =>
+		renderToString(
+			createElement(RoleAppointmentList, {
+				accountEmail: "you@example.com",
+				folders: dotted,
+				appointments,
+				displayNames: {},
+				onAppoint: noop,
+				onRename: noop,
+			}),
+		);
+
+	it("offers the picker option by its leaf", () => {
+		assert.match(renderDotted({}), /Concepten · 340 msgs/);
+		assert.doesNotMatch(renderDotted({}), /INBOX.Projects.Concepten · 340/);
+	});
+
+	it("names the stale-appointment fallback by its leaf", () => {
+		const html = renderDotted({
+			drafts: {
+				mailboxId: "mb-concepten",
+				source: "Stale",
+				staleFolderPath: "INBOX.Projects.Oud",
+			},
+		});
+		assert.match(html, /reader is using Concepten instead\./);
+	});
+
+	it("lists an unappointed folder by its leaf under Other folders", () => {
+		const html = renderDotted({ drafts: appointed("mb-concepten") });
+		const other = html.slice(html.indexOf("Other folders"));
+		assert.match(other, />Nieuwsbrieven</);
+		assert.doesNotMatch(other, />INBOX.Projects.Nieuwsbrieven</);
+	});
+});

package/src/components/role-appointment-list.stories.tsx

@@ -18,35 +18,60 @@ import {
  * numbers are wired in.
  */
 const HOSTNET_FOLDERS: readonly CandidateFolder[] = [
-	{ mailboxId: "mb-inbox", providerPath: "INBOX", messageCount: 4821 },
+	{
+		mailboxId: "mb-inbox",
+		providerPath: "INBOX",
+		hierarchyDelimiter: "/",
+		messageCount: 4821,
+	},
 	{
 		mailboxId: "mb-archive",
 		providerPath: "INBOX/Archive",
+		hierarchyDelimiter: "/",
 		messageCount: 19243,
 	},
 	{
 		mailboxId: "mb-concepten",
 		providerPath: "INBOX/Concepten",
+		hierarchyDelimiter: "/",
 		messageCount: 340,
 	},
 	{
 		mailboxId: "mb-deleted",
 		providerPath: "INBOX/Deleted Messages",
+		hierarchyDelimiter: "/",
 		messageCount: 512,
 	},
-	{ mailboxId: "mb-drafts", providerPath: "INBOX/Drafts", messageCount: 0 },
+	{
+		mailboxId: "mb-drafts",
+		providerPath: "INBOX/Drafts",
+		hierarchyDelimiter: "/",
+		messageCount: 0,
+	},
 	{
 		mailboxId: "mb-news",
 		providerPath: "INBOX/Nieuwsbrieven",
+		hierarchyDelimiter: "/",
 		messageCount: 2870,
 	},
-	{ mailboxId: "mb-sent", providerPath: "INBOX/Sent", messageCount: 0 },
+	{
+		mailboxId: "mb-sent",
+		providerPath: "INBOX/Sent",
+		hierarchyDelimiter: "/",
+		messageCount: 0,
+	},
 	{
 		mailboxId: "mb-sent-messages",
 		providerPath: "INBOX/Sent Messages",
+		hierarchyDelimiter: "/",
 		messageCount: 6105,
 	},
-	{ mailboxId: "mb-spam", providerPath: "INBOX/Spam", messageCount: 88 },
+	{
+		mailboxId: "mb-spam",
+		providerPath: "INBOX/Spam",
+		hierarchyDelimiter: "/",
+		messageCount: 88,
+	},
 ];
 
 const appointed = (mailboxId: string): RoleAppointment => ({

package/src/components/role-appointment-list.tsx

@@ -1,11 +1,11 @@
 import { Check, Folder } from "lucide-react";
 import { useId, useRef, useState } from "react";
+import { folderLeaf } from "../lib/folder-tree.js";
 import { Banner } from "./banner.js";
 import { Button } from "./button.js";
 import {
 	canonicalRoleLabel,
 	type FolderRole,
-	providerLeaf,
 	roleIcon,
 } from "./folder-role.js";
 import { Input } from "./input.js";
@@ -35,6 +35,8 @@ export interface CandidateFolder {
 	mailboxId: string;
 	/** Server truth — the IMAP path. Read-only. */
 	providerPath: string;
+	/** How the folder's own server separates path segments; `""` means flat. */
+	hierarchyDelimiter: string;
 	/** Live message count, so the user can pick the folder that holds mail. */
 	messageCount: number;
 }
@@ -64,7 +66,8 @@ const UNRESOLVED: RoleAppointment = { mailboxId: null, source: "None" };
 /** Picker option text: `Concepten · 340 msgs`. */
 function folderOptionLabel(folder: CandidateFolder): string {
 	const noun = folder.messageCount === 1 ? "msg" : "msgs";
-	return `${providerLeaf(folder.providerPath)} · ${folder.messageCount} ${noun}`;
+	const leaf = folderLeaf(folder.providerPath, folder.hierarchyDelimiter);
+	return `${leaf} · ${folder.messageCount} ${noun}`;
 }
 
 const messages = (count: number): string =>
@@ -151,7 +154,10 @@ function RoleAppointmentRow({
 		role === "trash"
 			? " Deleting mail is stopped until you pick another one."
 			: appointed
-				? ` reader is using ${providerLeaf(appointed.providerPath)} instead.`
+				? ` reader is using ${folderLeaf(
+						appointed.providerPath,
+						appointed.hierarchyDelimiter,
+					)} instead.`
 				: "";
 	const staleNotice = `The folder you chose for ${label}${
 		staleFolderPath ? ` — ${staleFolderPath} —` : ""
@@ -312,7 +318,7 @@ export function RoleAppointmentList({
 							>
 								<Folder className="size-4 shrink-0 text-fg-subtle" />
 								<span className="truncate">
-									{providerLeaf(folder.providerPath)}
+									{folderLeaf(folder.providerPath, folder.hierarchyDelimiter)}
 								</span>
 								<span className="ml-auto shrink-0 text-2xs text-fg-subtle">
 									{messages(folder.messageCount)}

package/src/index.ts

@@ -851,6 +851,7 @@ export {
 	filterFolderTree,
 	folderAncestors,
 	folderDepth,
+	folderLeaf,
 	folderParent,
 	matchesQuery,
 	orderFolderNodes,

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

@@ -6,6 +6,7 @@ import {
 	filterFolderTree,
 	folderAncestors,
 	folderDepth,
+	folderLeaf,
 	folderParent,
 	matchesQuery,
 	orderFolderNodes,
@@ -279,3 +280,21 @@ describe("create rows", () => {
 		]);
 	});
 });
+
+describe("folderLeaf", () => {
+	it("takes the leaf under a dot-delimited namespace", () => {
+		assert.equal(folderLeaf("INBOX.Projects.Q3", "."), "Q3");
+	});
+
+	it("takes the leaf under a slash-delimited namespace", () => {
+		assert.equal(folderLeaf("INBOX/Sent Messages", "/"), "Sent Messages");
+	});
+
+	it("keeps the whole name when the server reports no delimiter", () => {
+		assert.equal(folderLeaf("Projects/Q3", ""), "Projects/Q3");
+	});
+
+	it("keeps a top-level name that carries no delimiter", () => {
+		assert.equal(folderLeaf("INBOX", "."), "INBOX");
+	});
+});

package/src/lib/folder-tree.ts

@@ -38,6 +38,14 @@ export type FolderTreeDisplayRow =
 	| { kind: "folder"; row: FolderTreeRow; index: number }
 	| { kind: "create"; parent: FolderTreeNode; depth: number };
 
+// A server that reports no delimiter has a flat namespace, so the path is its
+// own leaf; splitting on "" would return single characters.
+export const folderLeaf = (path: string, delimiter: string): string => {
+	if (delimiter.length === 0) return path;
+	const parts = path.split(delimiter);
+	return parts[parts.length - 1] || path;
+};
+
 export const folderParent = (path: string, delimiter: string): string => {
 	const cut = path.lastIndexOf(delimiter);
 	return cut === -1 ? "" : path.slice(0, cut);