@remit/ui 0.0.138 → 0.0.139

package/package.json

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

package/src/components/folder-manager.tsx

@@ -55,7 +55,7 @@ export const FolderManager = ({
 			delimiter={delimiter}
 			labels={{
 				treeAriaLabel: "Your folders",
-				optionLabel: (label) => label,
+				optionLabel: (folder) => folder.label,
 				...labels,
 			}}
 			rowActions={(folder) => {

package/src/components/folder-row.render.test.ts

@@ -81,6 +81,20 @@ describe("FolderRow", () => {
 		assert.ok(html.indexOf(">Delete<") > html.indexOf("</button>"));
 	});
 
+	it("shows how much mail the folder holds, and leaves zero visible", () => {
+		assert.match(render({ messageCount: 512 }), />512</);
+		assert.match(render({ messageCount: 512 }), />msgs</);
+		assert.match(render({ messageCount: 1 }), />msg</);
+		assert.match(render({ messageCount: 0 }), />0</);
+		assert.doesNotMatch(render({}), /msgs/);
+	});
+
+	it("keeps the count out of the accessible name it was not folded into", () => {
+		const html = render({ messageCount: 512 });
+		assert.match(html, /aria-label="Move to Travel"/);
+		assert.match(html, /aria-hidden="true"[^>]*class="[^"]*text-2xs/);
+	});
+
 	it("takes its place in a roving tab order", () => {
 		assert.match(render({ tabIndex: 0 }), /tabindex="0"/);
 		assert.match(render({ tabIndex: -1 }), /tabindex="-1"/);

package/src/components/folder-row.tsx

@@ -50,6 +50,12 @@ export interface FolderRowProps {
 	current?: boolean;
 	/** Inline tag shown on the current row, e.g. `current`. */
 	currentTag?: string;
+	/**
+	 * How much mail the folder holds, right-aligned. The accessible name is the
+	 * caller's `ariaLabel`, so a surface that needs the count announced folds it
+	 * in there rather than relying on this.
+	 */
+	messageCount?: number;
 	/** A hairline under the label, drawn for every row but the last. */
 	separated?: boolean;
 	/**
@@ -77,6 +83,7 @@ export const FolderRow = ({
 	context = false,
 	current = false,
 	currentTag,
+	messageCount,
 	separated = false,
 	actions,
 	tabIndex,
@@ -96,6 +103,12 @@ export const FolderRow = ({
 	const icon = (
 		<Folder className="size-4 shrink-0 text-fg-subtle" aria-hidden="true" />
 	);
+	const count =
+		messageCount === undefined ? null : (
+			<span aria-hidden="true" className="shrink-0 text-2xs text-fg-subtle">
+				{messageCount} {messageCount === 1 ? "msg" : "msgs"}
+			</span>
+		);
 	if (context) {
 		return (
 			<div className="relative flex items-center">
@@ -112,6 +125,7 @@ export const FolderRow = ({
 					{chevron}
 					{icon}
 					<span className="min-w-0 flex-1 truncate">{label}</span>
+					{count}
 				</div>
 				{actions}
 				{separated && <FolderRowSeparator depth={depth} />}
@@ -142,6 +156,7 @@ export const FolderRow = ({
 				{chevron}
 				{icon}
 				<span className="min-w-0 flex-1 truncate">{label}</span>
+				{count}
 				{current && currentTag && (
 					<span className="shrink-0 text-xs text-fg-muted">{currentTag}</span>
 				)}

package/src/components/folder-tree-picker.render.test.ts

@@ -101,8 +101,20 @@ describe("FolderTreePicker render", () => {
 
 	it("applies caller-supplied labels", () => {
 		const html = render({
-			labels: { optionLabel: (label) => `Verplaats naar ${label}` },
+			labels: { optionLabel: (folder) => `Verplaats naar ${folder.label}` },
 		});
 		assert.match(html, /aria-label="Verplaats naar Archive"/);
 	});
+
+	it("announces the message count as part of the row's own name", () => {
+		const html = render({
+			folders: [{ id: "t", label: "Trash", path: "Trash", messageCount: 512 }],
+			labels: {
+				optionLabel: (folder) =>
+					`Set ${folder.label}, ${folder.messageCount} messages, as Trash`,
+			},
+		});
+		assert.match(html, /aria-label="Set Trash, 512 messages, as Trash"/);
+		assert.match(html, />512</);
+	});
 });

package/src/components/folder-tree-picker.tsx

@@ -55,8 +55,12 @@ export interface FolderTreePickerLabels {
 	emptyMessage?: (query: string) => string;
 	/** Shown when there is no folder to list at all, filter or no filter. */
 	noFolders?: string;
-	/** Accessible label for a selectable row, e.g. `Move to X`. */
-	optionLabel?: (label: string) => string;
+	/**
+	 * Accessible label for a selectable row. Takes the folder rather than its
+	 * label, so a surface can announce the message count as part of the name
+	 * instead of leaving it as decoration beside it.
+	 */
+	optionLabel?: (folder: FolderTreeNode) => string;
 	newFolder?: string;
 	newSubfolder?: (label: string) => string;
 	nameLabel?: string;
@@ -113,7 +117,7 @@ const defaultLabels: Required<FolderTreePickerLabels> = {
 	contextSuffix: "(containing folder)",
 	emptyMessage: (query) => `No folders match "${query}"`,
 	noFolders: "No folders to show",
-	optionLabel: (label) => `Move to ${label}`,
+	optionLabel: (folder) => `Move to ${folder.label}`,
 	newFolder: "New folder",
 	newSubfolder: (label) => `New folder inside ${label}`,
 	topLevel: "Top level",
@@ -376,7 +380,7 @@ export const FolderTreePicker = ({
 
 	const rowAriaLabel = (row: FolderTreeRow): string => {
 		if (row.context) return `${row.folder.label} ${text.contextSuffix}`;
-		if (isSelectable(row)) return text.optionLabel(row.folder.label);
+		if (isSelectable(row)) return text.optionLabel(row.folder);
 		return `${row.folder.label} ${text.currentSuffix}`;
 	};
 
@@ -394,6 +398,7 @@ export const FolderTreePicker = ({
 				context={row.context}
 				current={folder.isCurrent}
 				currentTag={text.currentTag}
+				messageCount={folder.messageCount}
 				selected={selectable && folder.id === selectedId}
 				separated={separated}
 				actions={rowActions?.(folder)}

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

@@ -4,6 +4,7 @@ import { createElement } from "react";
 import { renderToString } from "react-dom/server";
 import {
 	type CandidateFolder,
+	type RoleAppointment,
 	RoleAppointmentList,
 } from "./role-appointment-list.js";
 
@@ -24,8 +25,13 @@ const folders: CandidateFolder[] = [
 	},
 ];
 
+const appointed = (mailboxId: string): RoleAppointment => ({
+	mailboxId,
+	source: "Appointed",
+});
+
 function render(
-	appointments: Record<string, string | null>,
+	appointments: Record<string, RoleAppointment>,
 	displayNames: Record<string, string> = {},
 ): string {
 	return renderToString(
@@ -42,7 +48,7 @@ function render(
 
 describe("RoleAppointmentList", () => {
 	it("titles the section with the account email", () => {
-		const html = render({ inbox: "mb-inbox" });
+		const html = render({ inbox: appointed("mb-inbox") });
 		assert.match(html, /Folder roles —/);
 		assert.match(html, /you@example.com/);
 	});
@@ -69,29 +75,143 @@ describe("RoleAppointmentList", () => {
 	});
 
 	it("shows the appointed folder's path and count under the role", () => {
-		const html = render({ drafts: "mb-concepten" });
+		const html = render({ drafts: appointed("mb-concepten") });
 		assert.match(html, /title="INBOX\/Concepten"/);
 		assert.match(html, /340/);
 		assert.match(html, /messages/);
 	});
 
 	it("renders a rename field only for an appointed role", () => {
-		const html = render({ drafts: "mb-concepten" });
+		const html = render({ drafts: appointed("mb-concepten") });
 		assert.match(html, /Display name for Drafts/);
 		assert.doesNotMatch(html, /Display name for Sent/);
 	});
 
 	it("lists unappointed folders under Other folders", () => {
-		const html = render({ drafts: "mb-concepten", inbox: "mb-inbox" });
+		const html = render({
+			drafts: appointed("mb-concepten"),
+			inbox: appointed("mb-inbox"),
+		});
 		assert.match(html, /Other folders/);
 		assert.match(html, /Nieuwsbrieven/);
 		assert.match(html, /Drafts/);
 	});
 
 	it("keeps an appointed folder out of the Other folders list", () => {
-		const html = render({ drafts: "mb-concepten" });
+		const html = render({ drafts: appointed("mb-concepten") });
 		const otherIdx = html.indexOf("Other folders");
 		assert.ok(otherIdx >= 0);
 		assert.doesNotMatch(html.slice(otherIdx), /Concepten/);
 	});
+
+	it("says where each answer came from, in front of the path", () => {
+		assert.match(
+			render({ drafts: appointed("mb-concepten") }),
+			/Chosen by you · INBOX\/Concepten/,
+		);
+		assert.match(
+			render({ drafts: { mailboxId: "mb-concepten", source: "Flagged" } }),
+			/The mail server marks it as Drafts · INBOX\/Concepten/,
+		);
+		assert.match(
+			render({ inbox: { mailboxId: "mb-inbox", source: "Reserved" } }),
+			/The account&#x27;s own INBOX · INBOX/,
+		);
+		assert.match(
+			render({ drafts: { mailboxId: "mb-concepten", source: "Proposed" } }),
+			/Matched by name, not confirmed · INBOX\/Concepten/,
+		);
+	});
+
+	it("announces the provenance with the control that changes it", () => {
+		const html = render({ drafts: appointed("mb-concepten") });
+		const described = /aria-describedby="([^"]+)"/.exec(html);
+		assert.ok(described);
+		assert.match(html, new RegExp(`id="${described[1]}"`));
+	});
+
+	it("reads an unfilled role as a decision waiting, not an error", () => {
+		const html = render({ archive: { mailboxId: null, source: "None" } });
+		assert.match(
+			html,
+			/Not set — pick the folder this account uses for Archive\.</,
+		);
+	});
+
+	it("says only Trash gates a verb when it is unfilled", () => {
+		const html = render({ trash: { mailboxId: null, source: "None" } });
+		assert.match(html, /Deleting mail needs one\./);
+	});
+
+	it("calls out a stale Trash with the folder that vanished and its repair", () => {
+		const html = render({
+			trash: {
+				mailboxId: null,
+				source: "Stale",
+				staleFolderPath: "INBOX/Prullenbak",
+			},
+		});
+		assert.match(
+			html,
+			/The folder you chose for Trash — INBOX\/Prullenbak — is gone from the mail server\./,
+		);
+		assert.match(html, /Deleting mail is stopped until you pick another one\./);
+		assert.match(html, /Pick a folder/);
+		assert.match(html, /role="alert"/);
+	});
+
+	it("names what reader fell back to for a stale non-Trash role", () => {
+		const html = render({
+			drafts: {
+				mailboxId: "mb-drafts",
+				source: "Stale",
+				staleFolderPath: "INBOX/Concepten",
+			},
+		});
+		assert.match(
+			html,
+			/The folder you chose for Drafts — INBOX\/Concepten — is gone from the mail server\./,
+		);
+		assert.match(html, /reader is using Drafts instead\./);
+		assert.doesNotMatch(html, /Deleting mail is stopped/);
+	});
+
+	it("drops the name clause when no path was ever recorded", () => {
+		const html = render({ trash: { mailboxId: null, source: "Stale" } });
+		assert.match(
+			html,
+			/The folder you chose for Trash is gone from the mail server\./,
+		);
+	});
+
+	it("says nothing about a fallback it cannot name", () => {
+		const html = render({
+			drafts: {
+				mailboxId: null,
+				source: "Stale",
+				staleFolderPath: "INBOX/Concepten",
+			},
+		});
+		assert.match(html, /is gone from the mail server\.</);
+		assert.doesNotMatch(html, /reader is using/);
+	});
+
+	it("announces the stale callout with the control that repairs it", () => {
+		const html = render({
+			trash: {
+				mailboxId: null,
+				source: "Stale",
+				staleFolderPath: "INBOX/Prullenbak",
+			},
+		});
+		const notice = /id="([^"]+)"[^>]*>The folder you chose for Trash/.exec(
+			html,
+		);
+		assert.ok(notice, "the callout carries an id");
+		assert.match(
+			html,
+			new RegExp(`aria-describedby="${notice[1]}"`),
+			"the Select that repairs the role points at it",
+		);
+	});
 });

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

@@ -3,6 +3,7 @@ import { useState } from "react";
 import type { FolderRole } from "./folder-role.js";
 import {
 	type CandidateFolder,
+	type RoleAppointment,
 	RoleAppointmentList,
 } from "./role-appointment-list.js";
 
@@ -48,26 +49,45 @@ const HOSTNET_FOLDERS: readonly CandidateFolder[] = [
 	{ mailboxId: "mb-spam", providerPath: "INBOX/Spam", messageCount: 88 },
 ];
 
+const appointed = (mailboxId: string): RoleAppointment => ({
+	mailboxId,
+	source: "Appointed",
+});
+
+/** Everything except the role each story is about, so one row carries the news. */
+const SETTLED: Record<string, RoleAppointment> = {
+	inbox: { mailboxId: "mb-inbox", source: "Reserved" },
+	drafts: appointed("mb-concepten"),
+	sent: appointed("mb-sent-messages"),
+	archive: appointed("mb-archive"),
+	junk: appointed("mb-spam"),
+	trash: appointed("mb-deleted"),
+};
+
 function Harness({
 	folders,
 	initial,
 }: {
 	folders: readonly CandidateFolder[];
-	initial: Record<string, string | null>;
+	initial: Record<string, RoleAppointment>;
 }) {
 	const [appointments, setAppointments] = useState(initial);
 	const [displayNames, setDisplayNames] = useState<Record<string, string>>({});
 
 	const handleAppoint = (role: FolderRole, mailboxId: string | null) => {
 		setAppointments((prev) => {
-			const next: Record<string, string | null> = {
+			const next: Record<string, RoleAppointment> = {
 				...prev,
-				[role]: mailboxId,
+				[role]: mailboxId
+					? { mailboxId, source: "Appointed" }
+					: { mailboxId: null, source: "None" },
 			};
 			// Exclusivity: appointing a folder to one role clears it from any other.
 			if (mailboxId) {
-				for (const r of Object.keys(next)) {
-					if (r !== role && next[r] === mailboxId) next[r] = null;
+				for (const other of Object.keys(next)) {
+					if (other === role) continue;
+					if (next[other]?.mailboxId !== mailboxId) continue;
+					next[other] = { mailboxId: null, source: "None" };
 				}
 			}
 			return next;
@@ -105,34 +125,96 @@ type Story = StoryObj<typeof Harness>;
  * The empty look-alikes drop to "Other folders".
  */
 export const Hostnet: Story = {
+	args: { folders: HOSTNET_FOLDERS, initial: SETTLED },
+};
+
+/**
+ * Flag-first proposal before the user corrects it: detection appointed the
+ * `\Drafts`-flagged but empty `INBOX/Drafts` (0) and the empty `INBOX/Sent`.
+ * The picker counts reveal the real folders so the user can re-appoint.
+ */
+export const ProposedDefaults: Story = {
 	args: {
 		folders: HOSTNET_FOLDERS,
 		initial: {
-			inbox: "mb-inbox",
-			drafts: "mb-concepten",
-			sent: "mb-sent-messages",
-			archive: "mb-archive",
-			junk: "mb-spam",
-			trash: "mb-deleted",
+			...SETTLED,
+			drafts: { mailboxId: "mb-drafts", source: "Flagged" },
+			sent: { mailboxId: "mb-sent", source: "Flagged" },
+		},
+	},
+};
+
+/** `Appointed` — a person decided, and the row says so. */
+export const AppointedSource: Story = {
+	name: "appointed",
+	args: { folders: HOSTNET_FOLDERS, initial: SETTLED },
+};
+
+/** `Flagged` — the mail server's own SPECIAL-USE flag, not a guess. */
+export const FlaggedSource: Story = {
+	name: "flagged",
+	args: {
+		folders: HOSTNET_FOLDERS,
+		initial: {
+			...SETTLED,
+			trash: { mailboxId: "mb-deleted", source: "Flagged" },
+		},
+	},
+};
+
+/** `Reserved` — INBOX is the one role the protocol names for us. */
+export const ReservedSource: Story = {
+	name: "reserved",
+	args: {
+		folders: HOSTNET_FOLDERS,
+		initial: {
+			...SETTLED,
+			inbox: { mailboxId: "mb-inbox", source: "Reserved" },
+		},
+	},
+};
+
+/** `Proposed` — a name matched. Nobody confirmed it, and the row does not pretend otherwise. */
+export const ProposedSource: Story = {
+	name: "proposed",
+	args: {
+		folders: HOSTNET_FOLDERS,
+		initial: {
+			...SETTLED,
+			trash: { mailboxId: "mb-deleted", source: "Proposed" },
 		},
 	},
 };
 
 /**
- * Flag-first proposal before the user corrects it: detection appointed the
- * `\Drafts`-flagged but empty `INBOX/Drafts` (0) and the empty `INBOX/Sent`.
- * The picker counts reveal the real folders so the user can re-appoint.
+ * `Stale` — the folder the user chose is gone from the mail server. The one row
+ * representing a broken decision, so it is a callout with its repair rather
+ * than a subtitle. Deleting mail is stopped until Trash is repaired.
  */
-export const ProposedDefaults: Story = {
+export const StaleSource: Story = {
+	name: "stale",
+	args: {
+		folders: HOSTNET_FOLDERS,
+		initial: {
+			...SETTLED,
+			trash: {
+				mailboxId: null,
+				source: "Stale",
+				staleFolderPath: "INBOX/Prullenbak",
+			},
+		},
+	},
+};
+
+/** `None` — a decision waiting to be made. No icon, no danger colour. */
+export const NoneSource: Story = {
+	name: "none",
 	args: {
 		folders: HOSTNET_FOLDERS,
 		initial: {
-			inbox: "mb-inbox",
-			drafts: "mb-drafts",
-			sent: "mb-sent",
-			archive: "mb-archive",
-			junk: "mb-spam",
-			trash: "mb-deleted",
+			...SETTLED,
+			trash: { mailboxId: null, source: "None" },
+			archive: { mailboxId: null, source: "None" },
 		},
 	},
 };