@remit/ui 0.0.154 → 0.0.155

package/package.json

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

package/src/components/folder-role.test.ts

@@ -10,18 +10,55 @@ describe("provenanceFolderLabel", () => {
 
 	it("reads a junk appointment as Spam whatever the server calls it", () => {
 		assert.equal(
-			provenanceFolderLabel({ role: "junk", providerPath: "Bulk Mail" }),
+			provenanceFolderLabel({
+				role: "junk",
+				providerPath: "Bulk Mail",
+				hierarchyDelimiter: "/",
+			}),
 			"Spam",
 		);
 	});
 
 	it("falls back to the leaf of a folder nobody appointed", () => {
 		assert.equal(
-			provenanceFolderLabel({ providerPath: "Projects/Bookkeeping" }),
+			provenanceFolderLabel({
+				providerPath: "Projects/Bookkeeping",
+				hierarchyDelimiter: "/",
+			}),
 			"Bookkeeping",
 		);
 	});
 
+	it("cuts the path on the delimiter the server reports, not on a slash", () => {
+		assert.equal(
+			provenanceFolderLabel({
+				providerPath: "INBOX.Projects.Q3",
+				hierarchyDelimiter: ".",
+			}),
+			"Q3",
+		);
+	});
+
+	it("leaves a slash alone in a folder name on a dotted server", () => {
+		assert.equal(
+			provenanceFolderLabel({
+				providerPath: "INBOX.Reading/Writing",
+				hierarchyDelimiter: ".",
+			}),
+			"Reading/Writing",
+		);
+	});
+
+	it("treats a flat namespace as one folder name", () => {
+		assert.equal(
+			provenanceFolderLabel({
+				providerPath: "Projects/Q3",
+				hierarchyDelimiter: "",
+			}),
+			"Projects/Q3",
+		);
+	});
+
 	it("refuses to label a view rather than a place", () => {
 		assert.equal(provenanceFolderLabel({ role: "all" }), undefined);
 		assert.equal(provenanceFolderLabel({ role: "flagged" }), undefined);
@@ -29,28 +66,43 @@ describe("provenanceFolderLabel", () => {
 
 	it("refuses to label Gmail's own reserved namespace", () => {
 		assert.equal(
-			provenanceFolderLabel({ providerPath: "[Gmail]/All Mail" }),
+			provenanceFolderLabel({
+				providerPath: "[Gmail]/All Mail",
+				hierarchyDelimiter: "/",
+			}),
 			undefined,
 		);
 		assert.equal(
-			provenanceFolderLabel({ providerPath: "[Gmail]/Starred" }),
+			provenanceFolderLabel({
+				providerPath: "[Gmail]/Starred",
+				hierarchyDelimiter: "/",
+			}),
 			undefined,
 		);
 	});
 
 	it("refuses the googlemail.com spelling of the same namespace", () => {
 		assert.equal(
-			provenanceFolderLabel({ providerPath: "[Google Mail]/All Mail" }),
+			provenanceFolderLabel({
+				providerPath: "[Google Mail]/All Mail",
+				hierarchyDelimiter: "/",
+			}),
 			undefined,
 		);
 		assert.equal(
-			provenanceFolderLabel({ providerPath: "[Google Mail]/Starred" }),
+			provenanceFolderLabel({
+				providerPath: "[Google Mail]/Starred",
+				hierarchyDelimiter: "/",
+			}),
 			undefined,
 		);
 	});
 
 	it("labels a user folder that merely mentions Gmail", () => {
-		assert.equal(provenanceFolderLabel({ providerPath: "Gmail" }), "Gmail");
+		assert.equal(
+			provenanceFolderLabel({ providerPath: "Gmail", hierarchyDelimiter: "/" }),
+			"Gmail",
+		);
 	});
 
 	it("has nothing to say about a folder it knows nothing about", () => {

package/src/components/folder-role.tsx

@@ -9,6 +9,7 @@ import {
 	Trash2,
 } from "lucide-react";
 import type { ReactNode } from "react";
+import { folderLeaf, folderPathSegments } from "../lib/folder-tree.js";
 
 /* ------------------------------------------------------------------ */
 /* Folder role vocabulary (RFC 032 exclusive-folder-appointment,       */
@@ -48,30 +49,28 @@ export function canonicalRoleLabel(role: FolderRole): string {
 	return ROLE_LABEL[role];
 }
 
-/**
- * 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;
-}
-
 /* ------------------------------------------------------------------ */
 /* Provenance: where a search result actually lives                    */
 /* ------------------------------------------------------------------ */
 
 /**
  * The folder a search result was read from. `role` is the account's IMAP
- * special-use appointment (`junk` is `\Junk`); accounts that expose a folder
- * nobody appointed carry only a `providerPath`.
+ * special-use appointment (`junk` is `\Junk`); a folder nobody appointed a role
+ * to carries only its path.
+ *
+ * The path and the separator its own server cuts it on travel together or not
+ * at all: `INBOX.Projects.Q3` is three segments on a `.`-delimited server and a
+ * single folder name on a `/`-delimited one, so a path alone cannot be cut.
  */
-export interface ResultFolder {
-	role?: FolderRole;
-	/** Provider path as the server spells it, e.g. `Projects/Bookkeeping`. */
-	providerPath?: string;
-}
+export type ResultFolder =
+	| {
+			role?: FolderRole;
+			/** Provider path as the server spells it, e.g. `Projects/Bookkeeping`. */
+			providerPath: string;
+			/** The account's own hierarchy separator; `""` means a flat namespace. */
+			hierarchyDelimiter: string;
+	  }
+	| { role?: FolderRole; providerPath?: never; hierarchyDelimiter?: never };
 
 /**
  * Roles that name a view rather than a place a message is filed. A message in
@@ -113,8 +112,12 @@ export function provenanceFolderLabel(
 		return canonicalRoleLabel(folder.role);
 	}
 	if (!folder.providerPath) return undefined;
-	if (GMAIL_NAMESPACES.has(folder.providerPath.split("/")[0])) return undefined;
-	return providerLeaf(folder.providerPath);
+	const segments = folderPathSegments(
+		folder.providerPath,
+		folder.hierarchyDelimiter,
+	);
+	if (GMAIL_NAMESPACES.has(segments[0])) return undefined;
+	return folderLeaf(folder.providerPath, folder.hierarchyDelimiter);
 }
 
 export function roleIcon(role: FolderRole): ReactNode {

package/src/components/mobile-search-view.stories.tsx

@@ -123,7 +123,7 @@ const crossFolderMatches: SearchResult[] = [
 		subject: "Invoices for the quarter",
 		snippet: "The quarterly set, filed with the rest of the bookkeeping.",
 		date: "Jan 30",
-		folder: { providerPath: "Projects/Bookkeeping" },
+		folder: { providerPath: "Projects/Bookkeeping", hierarchyDelimiter: "/" },
 	},
 ];
 

package/src/components/quarantine-entry-row.tsx

@@ -1,7 +1,8 @@
 import { Bug } from "lucide-react";
+import { folderLeaf } from "../lib/folder-tree.js";
 import { Badge } from "./badge.js";
 import { Button } from "./button.js";
-import { canonicalRoleLabel, providerLeaf } from "./folder-role.js";
+import { canonicalRoleLabel } from "./folder-role.js";
 import {
 	type QuarantineEntry,
 	quarantineSummary,
@@ -47,7 +48,7 @@ export function QuarantineEntryRow({
 						</Badge>
 					)}
 					<span className="truncate" title={entry.mailboxPath}>
-						{providerLeaf(entry.mailboxPath)}
+						{folderLeaf(entry.mailboxPath, entry.mailboxDelimiter)}
 					</span>
 					<span aria-hidden>·</span>
 					<span>{`uid ${entry.uid}`}</span>

package/src/components/quarantine-fixtures.ts

@@ -14,6 +14,7 @@ export const quarantineDemoEntries: readonly QuarantineEntry[] = [
 		uid: 40217,
 		mailboxRole: "inbox",
 		mailboxPath: "INBOX",
+		mailboxDelimiter: "/",
 		failureStage: "BodyParse",
 		failureCode: "UnreadableBody",
 		failureMessage: "multipart boundary was never closed",
@@ -42,6 +43,7 @@ export const quarantineDemoEntries: readonly QuarantineEntry[] = [
 		uid: 40219,
 		mailboxRole: "archive",
 		mailboxPath: "Archive/2026",
+		mailboxDelimiter: "/",
 		failureStage: "BodyParse",
 		failureCode: "UnknownCharset",
 		failureMessage: "declared charset is not a known encoding",
@@ -65,7 +67,9 @@ export const quarantineDemoEntries: readonly QuarantineEntry[] = [
 		// A folder the user never appointed a role to — the ordinary state of a
 		// plain folder, and the reason mailboxRole is optional.
 		mailboxRole: undefined,
-		mailboxPath: "Clients/Acme Holdings",
+		mailboxPath: "INBOX.Clients.Acme Holdings",
+		// A `.`-delimited server: the row still reads the leaf, not the path.
+		mailboxDelimiter: ".",
 		failureStage: "BodyParse",
 		failureCode: "UnreadableBody",
 		failureMessage: "stream ended before the declared body length",
@@ -91,6 +95,7 @@ export const quarantineDemoEntries: readonly QuarantineEntry[] = [
 		uid: 40263,
 		mailboxRole: "inbox",
 		mailboxPath: "INBOX",
+		mailboxDelimiter: "/",
 		failureStage: "BodyParse",
 		failureCode: "UnreadableBody",
 		failureMessage: "connection closed mid-body",

package/src/components/quarantine-report.ts

@@ -78,6 +78,12 @@ export interface QuarantineEntry {
 	mailboxRole?: FolderRole;
 	/** The user's own folder name. Shown on screen, withheld from the report. */
 	mailboxPath: string;
+	/**
+	 * The separator that folder's own server cuts its paths on, so the row can
+	 * show the leaf. Resolved from the account's mailbox list — the quarantine
+	 * record itself carries no delimiter. `""` means a flat namespace.
+	 */
+	mailboxDelimiter: string;
 	failureStage: QuarantineFailureStage;
 	failureCode: QuarantineFailureCode;
 	/** Parser error text. Shown on screen, never in the report. */

package/src/components/quarantine-section.render.test.ts

@@ -44,6 +44,19 @@ describe("QuarantineSection", () => {
 		assert.match(html, /Acme Holdings/);
 	});
 
+	it("shows the folder name of a dotted path, not the whole path", () => {
+		const html = render([
+			{
+				...base,
+				mailboxPath: "INBOX.Projects.Q3",
+				mailboxDelimiter: ".",
+				mailboxRole: undefined,
+			},
+		]);
+		assert.match(html, />Q3</);
+		assert.doesNotMatch(html, />INBOX\.Projects\.Q3</);
+	});
+
 	it("offers reporting as the only per-row action", () => {
 		const html = render([base]);
 		assert.match(html, /Cut a bug/);

package/src/components/search-results.render.test.ts

@@ -235,7 +235,10 @@ describe("SearchResults provenance labels", () => {
 							{
 								...result,
 								id: "c1",
-								folder: { providerPath: "Projects/Books" },
+								folder: {
+									providerPath: "Projects/Books",
+									hierarchyDelimiter: "/",
+								},
 							},
 						],
 					},
@@ -274,7 +277,10 @@ describe("SearchResults provenance labels", () => {
 							{
 								...result,
 								id: "v3",
-								folder: { providerPath: "[Gmail]/Important" },
+								folder: {
+									providerPath: "[Gmail]/Important",
+									hierarchyDelimiter: "/",
+								},
 							},
 						],
 					},

package/src/components/search-results.stories.tsx

@@ -112,7 +112,7 @@ const crossFolderMatches: SearchResult[] = [
 		subject: "Invoices for the quarter",
 		snippet: "The quarterly set, filed with the rest of the bookkeeping.",
 		date: "Jan 30",
-		folder: { providerPath: "Projects/Bookkeeping" },
+		folder: { providerPath: "Projects/Bookkeeping", hierarchyDelimiter: "/" },
 	},
 ];
 
@@ -355,7 +355,10 @@ export const VirtualFoldersGoUnlabelled: Story = {
 						{
 							...topMatches[2],
 							id: "v3",
-							folder: { providerPath: "[Gmail]/Important" },
+							folder: {
+								providerPath: "[Gmail]/Important",
+								hierarchyDelimiter: "/",
+							},
 						},
 						...crossFolderMatches.slice(0, 1),
 					],

package/src/index.ts

@@ -354,7 +354,6 @@ export {
 	type FolderRole,
 	isVirtualFolderRole,
 	provenanceFolderLabel,
-	providerLeaf,
 	type ResultFolder,
 	roleIcon,
 } from "./components/folder-role.js";