@remit/ui 0.0.139 → 0.0.141

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.139",
+  "version": "0.0.141",
   "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);

package/src/lib/use-long-press.test.ts

@@ -12,17 +12,25 @@
  * need a real `document`/`window`/`PointerEvent`, which `renderToString`
  * (the pattern used elsewhere in this repo for presentational components)
  * cannot exercise.
+ *
+ * The clock is mocked. Every timing assertion here is about one boundary —
+ * the press crossed the threshold, or it ended first — and racing that
+ * boundary against a wall clock on a loaded runner turns a passing test red
+ * (#645). Time only moves when `advance` moves it.
  */
 
 import "@remit/test-dom";
 import assert from "node:assert/strict";
-import { afterEach, beforeEach, describe, it } from "node:test";
+import { afterEach, beforeEach, describe, it, mock } from "node:test";
 import { act, createElement } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { useLongPress } from "./use-long-press.js";
 
 const THRESHOLD = 40;
 
+/** Past react-aria's own teardown of its transient post-pointerup contextmenu listener. */
+const AFTER_ARIA_CONTEXTMENU_TEARDOWN = 100;
+
 let container: HTMLElement;
 let root: Root;
 
@@ -106,17 +114,27 @@ function pointerCancel(row: Element) {
 	row.dispatchEvent(new PointerEvent("pointercancel", { bubbles: true }));
 }
 
-function wait(ms: number) {
-	return act(() => new Promise((resolve) => setTimeout(resolve, ms)));
+function advance(ms: number) {
+	return act(() => {
+		mock.timers.tick(ms);
+	});
 }
 
 beforeEach(() => {
 	container = document.getElementById("root") as unknown as HTMLElement;
 	container.innerHTML = "";
 	root = createRoot(container);
+	mock.timers.enable({ apis: ["setTimeout"] });
 });
 
 afterEach(() => {
+	// The hook's contextmenu arming is module state bounded by a timer, and a
+	// test that leaves the finger down leaves it armed. Release the pointer so
+	// the next test starts disarmed rather than inheriting a dead timer id.
+	act(() => {
+		pointerUp();
+	});
+	mock.timers.reset();
 	act(() => {
 		root.unmount();
 	});
@@ -128,7 +146,10 @@ describe("useLongPress (react-aria wrapper)", () => {
 		const row = mount({ onLongPress: () => fired++ });
 
 		pointerDown(row);
-		await wait(THRESHOLD + 40);
+		await advance(THRESHOLD - 1);
+		assert.equal(fired, 0, "the threshold had not elapsed yet");
+
+		await advance(1);
 
 		assert.equal(fired, 1);
 	});
@@ -138,9 +159,9 @@ describe("useLongPress (react-aria wrapper)", () => {
 		const row = mount({ onLongPress: () => fired++ });
 
 		pointerDown(row);
-		await wait(THRESHOLD / 2);
+		await advance(THRESHOLD - 1);
 		pointerUp();
-		await wait(THRESHOLD + 40);
+		await advance(THRESHOLD);
 
 		assert.equal(fired, 0);
 	});
@@ -153,9 +174,9 @@ describe("useLongPress (react-aria wrapper)", () => {
 		const row = mount({ onLongPress: () => fired++ });
 
 		pointerDown(row);
-		await wait(THRESHOLD / 2);
+		await advance(THRESHOLD - 1);
 		pointerCancel(row);
-		await wait(THRESHOLD + 40);
+		await advance(THRESHOLD);
 
 		assert.equal(fired, 0);
 	});
@@ -165,7 +186,7 @@ describe("useLongPress (react-aria wrapper)", () => {
 		const row = mount({ onLongPress: () => fired++, isDisabled: true });
 
 		pointerDown(row);
-		await wait(THRESHOLD + 40);
+		await advance(THRESHOLD);
 
 		assert.equal(fired, 0);
 	});
@@ -175,7 +196,7 @@ describe("useLongPress (react-aria wrapper)", () => {
 		const row = mount({ onLongPress: () => fired++ });
 
 		pointerDown(row);
-		await wait(THRESHOLD + 40);
+		await advance(THRESHOLD);
 		assert.equal(
 			fired,
 			1,
@@ -228,7 +249,7 @@ describe("useLongPress (react-aria wrapper)", () => {
 			"the touch long-press menu is still suppressed",
 		);
 		pointerUpOn(row);
-		await wait(THRESHOLD);
+		await advance(AFTER_ARIA_CONTEXTMENU_TEARDOWN);
 
 		assert.equal(
 			dispatchContextMenu(row).defaultPrevented,
@@ -238,15 +259,15 @@ describe("useLongPress (react-aria wrapper)", () => {
 	});
 
 	it("does not suppress the keyboard menu after a touch tap that raised no menu", async () => {
-		// A tap that lifts without a menu must still disarm suppression. The wait
-		// clears react-aria's own transient post-touch contextmenu listener,
-		// which it removes shortly after pointerup — in a browser a keyboard menu
-		// arrives long after that window, so only this hook's ref decides.
+		// A tap that lifts without a menu must still disarm suppression. The
+		// advance clears react-aria's own transient post-touch contextmenu
+		// listener, which it removes shortly after pointerup — in a browser a
+		// keyboard menu arrives long after that, so only this hook's ref decides.
 		const row = mount({ onLongPress: () => undefined });
 
 		pointerDown(row, "touch");
 		pointerUpOn(row);
-		await wait(THRESHOLD);
+		await advance(AFTER_ARIA_CONTEXTMENU_TEARDOWN);
 
 		assert.equal(dispatchContextMenu(row).defaultPrevented, false);
 	});