@remit/web-client 0.0.225 → 0.0.226

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.225",
+  "version": "0.0.226",
   "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/settings/QuarantinePanel.tsx

@@ -7,6 +7,7 @@
  * failure to read it at all. None of them is an empty panel.
  */
 import { meOperationsListQuarantineOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapQuarantineResponse } from "@remit/api-http-client/types.gen.ts";
 import {
 	Button,
 	QuarantineBugDialog,
@@ -17,11 +18,15 @@ import {
 } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { Bug } from "lucide-react";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import { formatErrorMessage } from "@/components/ui/ErrorState";
+import { useAccountDelimiters } from "@/hooks/useAccountDelimiters";
 import { buildBugReportContext, buildGitHubIssueUrl } from "@/lib/bug-report";
 import { toQuarantineEntry } from "@/lib/quarantine-entries";
 
+/** Stable identity, so an empty list does not rebuild the memos below. */
+const EMPTY_WIRE_ENTRIES: readonly RemitImapQuarantineResponse[] = [];
+
 function openIssue(url: string): void {
 	window.open(url, "_blank", "noopener,noreferrer");
 }
@@ -126,9 +131,23 @@ export function QuarantinePanel() {
 		meOperationsListQuarantineOptions(),
 	);
 
+	const wireEntries = data?.entries ?? EMPTY_WIRE_ENTRIES;
+	const accountIds = useMemo(
+		() => [...new Set(wireEntries.map((entry) => entry.accountId))],
+		[wireEntries],
+	);
+	const delimiters = useAccountDelimiters(accountIds);
+	const entries = useMemo(
+		() =>
+			wireEntries.map((entry) =>
+				toQuarantineEntry(entry, delimiters.get(entry.accountId) ?? "/"),
+			),
+		[wireEntries, delimiters],
+	);
+
 	return (
 		<QuarantinePanelView
-			entries={(data?.entries ?? []).map(toQuarantineEntry)}
+			entries={entries}
 			isPending={isPending}
 			error={error}
 		/>

package/src/hooks/useAccountDelimiters.ts

@@ -0,0 +1,41 @@
+/**
+ * The hierarchy separator each account's own server reports, for surfaces that
+ * hold a provider path but not the mailbox row it came from — quarantine, so
+ * far. Fans out the same per-account mailbox-list query as
+ * `useResultFolderIndex` (cached forever, react-query dedupes the identical key
+ * across call sites) and keeps only the delimiter.
+ */
+import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapMailboxResponse } from "@remit/api-http-client/types.gen.ts";
+import { useQueries } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { folderDelimiter } from "@/lib/move-options";
+
+/**
+ * Hoisted so `useQueries` treats this as a memo rather than a per-render
+ * reduce — see `useResultFolderIndex`.
+ */
+const combineDelimiters = (
+	results: { data?: { items: RemitImapMailboxResponse[] } }[],
+): string[] =>
+	results.map((result) => folderDelimiter(result.data?.items ?? []));
+
+export function useAccountDelimiters(
+	accountIds: readonly string[],
+): ReadonlyMap<string, string> {
+	const delimiters = useQueries({
+		queries: accountIds.map((accountId) => ({
+			...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
+			staleTime: Infinity,
+		})),
+		combine: combineDelimiters,
+	});
+
+	return useMemo(
+		() =>
+			new Map(
+				accountIds.map((accountId, i) => [accountId, delimiters[i] ?? "/"]),
+			),
+		[accountIds, delimiters],
+	);
+}

package/src/lib/quarantine-entries.test.ts

@@ -34,16 +34,16 @@ const wire: RemitImapQuarantineResponse = {
 
 describe("toQuarantineEntry", () => {
 	it("spells the folder role the way the kit does", () => {
-		assert.equal(toQuarantineEntry(wire).mailboxRole, "junk");
+		assert.equal(toQuarantineEntry(wire, "/").mailboxRole, "junk");
 	});
 
 	it("leaves the role absent when the folder has none appointed", () => {
 		const { mailboxRole: _dropped, ...roleless } = wire;
-		assert.equal(toQuarantineEntry(roleless).mailboxRole, undefined);
+		assert.equal(toQuarantineEntry(roleless, "/").mailboxRole, undefined);
 	});
 
 	it("carries every field the report and the row are built from", () => {
-		const entry = toQuarantineEntry(wire);
+		const entry = toQuarantineEntry(wire, "/");
 		assert.equal(entry.quarantineId, wire.quarantineId);
 		assert.equal(entry.uid, wire.uid);
 		assert.equal(entry.uidValidity, wire.uidValidity);
@@ -63,8 +63,13 @@ describe("toQuarantineEntry", () => {
 		assert.deepEqual(entry.structure, wire.structure);
 	});
 
+	it("carries the delimiter the caller resolved, which the wire has not", () => {
+		assert.equal("mailboxDelimiter" in wire, false);
+		assert.equal(toQuarantineEntry(wire, ".").mailboxDelimiter, ".");
+	});
+
 	it("drops the fields the settings surface has no use for", () => {
-		const entry = toQuarantineEntry(wire);
+		const entry = toQuarantineEntry(wire, "/");
 		assert.equal("accountConfigId" in entry, false);
 		assert.equal("createdAt" in entry, false);
 		assert.equal("updatedAt" in entry, false);

package/src/lib/quarantine-entries.ts

@@ -7,9 +7,14 @@ import { CANONICAL_TO_NAV_ROLE } from "./folder-roles";
  * the settings surface has no use for, and spells the folder role in the
  * canonical PascalCase the API uses everywhere. Both differences are resolved
  * here rather than by widening the kit's entry type.
+ *
+ * The record carries no hierarchy delimiter either, so the caller resolves the
+ * account's own from its mailbox list and hands it in — the row shows a folder
+ * name, and a path cannot be cut into one without it.
  */
 export function toQuarantineEntry(
 	wire: RemitImapQuarantineResponse,
+	mailboxDelimiter: string,
 ): QuarantineEntry {
 	return {
 		quarantineId: wire.quarantineId,
@@ -21,6 +26,7 @@ export function toQuarantineEntry(
 			? CANONICAL_TO_NAV_ROLE[wire.mailboxRole]
 			: undefined,
 		mailboxPath: wire.mailboxPath,
+		mailboxDelimiter,
 		failureStage: wire.failureStage,
 		failureCode: wire.failureCode,
 		failureMessage: wire.failureMessage,

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

@@ -1,5 +1,6 @@
 import assert from "node:assert/strict";
 import { describe, it } from "node:test";
+import { provenanceFolderLabel } from "@remit/ui";
 import {
 	type AccountMailboxes,
 	buildResultFolderIndex,
@@ -9,10 +10,11 @@ import {
 const account = (
 	appointments: { role: string; mailboxId: string }[],
 	mailboxes: { mailboxId: string; fullPath: string }[],
+	hierarchyDelimiter = "/",
 ): AccountMailboxes =>
 	({
 		folderAppointments: appointments,
-		mailboxes,
+		mailboxes: mailboxes.map((mailbox) => ({ ...mailbox, hierarchyDelimiter })),
 	}) as unknown as AccountMailboxes;
 
 describe("buildResultFolderIndex", () => {
@@ -30,9 +32,11 @@ describe("buildResultFolderIndex", () => {
 		assert.deepEqual(index.get("mb-junk"), {
 			role: "junk",
 			providerPath: "Bulk Mail",
+			hierarchyDelimiter: "/",
 		});
 		assert.deepEqual(index.get("mb-work"), {
 			providerPath: "Projects/Bookkeeping",
+			hierarchyDelimiter: "/",
 		});
 	});
 
@@ -72,7 +76,7 @@ describe("resolveResultFolder", () => {
 	it("skips a virtual folder for one that names a real place", () => {
 		assert.deepEqual(resolveResultFolder(index, ["mb-all", "mb-inbox"]), {
 			mailboxId: "mb-inbox",
-			folder: { role: "inbox", providerPath: "INBOX" },
+			folder: { role: "inbox", providerPath: "INBOX", hierarchyDelimiter: "/" },
 		});
 	});
 
@@ -83,7 +87,11 @@ describe("resolveResultFolder", () => {
 	it("falls back to the first id when none names a real place", () => {
 		assert.deepEqual(resolveResultFolder(index, ["mb-all"]), {
 			mailboxId: "mb-all",
-			folder: { role: "all", providerPath: "[Gmail]/All Mail" },
+			folder: {
+				role: "all",
+				providerPath: "[Gmail]/All Mail",
+				hierarchyDelimiter: "/",
+			},
 		});
 	});
 
@@ -113,3 +121,13 @@ describe("buildResultFolderIndex before the mailbox list arrives", () => {
 		assert.deepEqual(index.get("mb-junk"), { role: "junk" });
 	});
 });
+
+describe("buildResultFolderIndex on a dotted server", () => {
+	it("carries the delimiter the account reports, so the chip reads the leaf", () => {
+		const index = buildResultFolderIndex([
+			account([], [{ mailboxId: "mb-q3", fullPath: "INBOX.Projects.Q3" }], "."),
+		]);
+
+		assert.equal(provenanceFolderLabel(index.get("mb-q3") ?? {}), "Q3");
+	});
+});

package/src/lib/result-folder.ts

@@ -7,6 +7,10 @@
  * sidebar already loads: the id → folder map here is the only thing either
  * needs, so neither the search API nor the semantic index has to carry a folder.
  *
+ * The mailbox row carries the hierarchy delimiter its own server reports, and it
+ * is kept alongside the path: a chip labelled by path shows the folder's own
+ * name, which on a `.`-delimited account cannot be cut on a slash.
+ *
  * The role comes from the account's `folderAppointments` map (RFC 032), which
  * the server resolves from the IMAP SPECIAL-USE attributes — so `junk` means the
  * folder the account advertises as `\Junk`, whatever it is called. Names are
@@ -27,7 +31,7 @@ export interface AccountMailboxes {
 	folderAppointments: readonly RemitImapFolderAppointment[];
 	mailboxes: readonly Pick<
 		RemitImapMailboxResponse,
-		"mailboxId" | "fullPath"
+		"mailboxId" | "fullPath" | "hierarchyDelimiter"
 	>[];
 }
 
@@ -46,10 +50,11 @@ export function buildResultFolderIndex(
 		for (const [mailboxId, role] of roles) index.set(mailboxId, { role });
 		for (const mailbox of account.mailboxes) {
 			const role = roles.get(mailbox.mailboxId);
-			index.set(mailbox.mailboxId, {
-				...(role ? { role } : {}),
+			const path = {
 				providerPath: mailbox.fullPath,
-			});
+				hierarchyDelimiter: mailbox.hierarchyDelimiter,
+			};
+			index.set(mailbox.mailboxId, role ? { role, ...path } : path);
 		}
 	}
 	return index;