@remit/ui 0.0.149 → 0.0.151

package/package.json

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

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

@@ -258,6 +258,29 @@ function RoleAppointmentRow({
 	);
 }
 
+export function FolderRolesHelp() {
+	return (
+		<div className="space-y-3">
+			<p>
+				Each canonical role — Inbox, Drafts, Sent, Archive, Spam, Trash — points
+				at one of your account's real folders. Pick the one that actually holds
+				the mail; the message counts tell real folders from empty look-alikes.
+			</p>
+			<p>
+				Appointing a folder to a role here doesn't touch any other role, and
+				doesn't move or rename anything on the server — it just tells Remit
+				which folder to treat as e.g. "Drafts" everywhere (sidebar, unread
+				badges, the compose flow).
+			</p>
+			<p>
+				<strong className="text-fg">Your folders</strong> is the account's real
+				hierarchy. Open a folder to see what's inside it, make a new one where
+				you're looking, and rename or delete any of them from its row.
+			</p>
+		</div>
+	);
+}
+
 export interface RoleAppointmentListProps {
 	accountEmail: string;
 	/** Every folder the account exposes (candidates for any role). */
@@ -299,10 +322,8 @@ export function RoleAppointmentList({
 					Folder roles — {accountEmail}
 				</h2>
 				<p className="text-xs text-fg-muted">
-					Each role points to one folder. Pick the folder that holds the mail —
-					the counts help you tell real folders from empty look-alikes. Each row
-					says where its answer came from — your choice, the mail server's own
-					flag, or a name reader matched.
+					Each row says where its answer came from — your choice, the mail
+					server's own flag, or a name reader matched.
 				</p>
 			</header>
 			<div className="rounded-sm border border-line bg-surface">

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

@@ -27,6 +27,14 @@ const folders: FolderTreeNode[] = [
 
 const noop = () => {};
 
+/** A delete refused because its rows already sit in the folder reader guessed. */
+const refusedInPlace: Partial<RoleAppointmentPromptProps> = {
+	reason: "unconfirmed",
+	action: { kind: "delete", count: 3 },
+	trashFolderLabel: "Deleted Messages",
+	guessedMailboxId: "mb-deleted",
+};
+
 const render = (props: Partial<RoleAppointmentPromptProps>) =>
 	renderToString(
 		createElement(RoleAppointmentPrompt, {
@@ -127,6 +135,19 @@ describe("roleAppointmentPromptCopy", () => {
 		);
 		assert.equal(copy.confirmLabel, "Set as Trash and empty it");
 	});
+
+	it("words the irreversibility as a delete of these rows, not a folder emptying (#876)", () => {
+		const copy = roleAppointmentPromptCopy(
+			"unconfirmed",
+			{ kind: "delete", count: 3 },
+			{ trashFolderLabel: "Deleted Messages" },
+		);
+		assert.equal(
+			copy.description,
+			"Nothing has been deleted. reader files this account's deleted mail in Deleted Messages because of its name — you never chose it, and the mail server doesn't mark it as Trash. Deleting 3 messages there erases them from the mail server, and that cannot be restored.",
+		);
+		assert.equal(copy.confirmLabel, "Set as Trash and delete 3 messages");
+	});
 });
 
 describe("RoleAppointmentPrompt", () => {
@@ -214,6 +235,37 @@ describe("RoleAppointmentPrompt", () => {
 		);
 	});
 
+	it("narrates a delete inside the confirmed folder as an erase, not a move (#876)", () => {
+		const inPlace = render({
+			...refusedInPlace,
+			selectedId: "mb-deleted",
+			phase: { kind: "acting" },
+		});
+		assert.match(inPlace, /Erasing them from Deleted Messages/);
+		assert.doesNotMatch(inPlace, /Moving them to/);
+
+		// The rows are in the guessed folder; into any other folder they move.
+		assert.match(
+			render({
+				...refusedInPlace,
+				selectedId: "mb-prullenbak",
+				phase: { kind: "acting" },
+			}),
+			/Moving them to Prullenbak/,
+		);
+	});
+
+	it("marks the confirm that erases in place as the destructive one", () => {
+		assert.match(
+			render({ ...refusedInPlace, selectedId: "mb-deleted" }),
+			/text-danger/,
+		);
+		assert.match(
+			render({ ...refusedInPlace, selectedId: "mb-prullenbak" }),
+			/text-warning/,
+		);
+	});
+
 	it("keeps the picker and the selection through a failed appointment", () => {
 		const html = render({
 			selectedId: "mb-prullenbak",

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

@@ -129,6 +129,55 @@ export const Unconfirmed: Story = {
 	},
 };
 
+/**
+ * A delete refused because the rows are already inside the folder reader only
+ * matched by name: confirming it expunges them where they sit, so the copy says
+ * "delete", never "empty", and the confirm is the danger variant.
+ */
+export const UnconfirmedDelete: Story = {
+	name: "unconfirmed — delete in place",
+	args: {
+		reason: "unconfirmed",
+		action: { kind: "delete", count: 3 },
+		trashFolderLabel: "Deleted Messages",
+		guessedMailboxId: "mb-deleted",
+		initialSelectedId: "mb-deleted",
+		phase: choosing,
+	},
+};
+
+/**
+ * The same refusal answered with a different folder. The rows are not in that
+ * one, so the delete moves them there and the confirm is not destructive.
+ */
+export const UnconfirmedDeleteElsewhere: Story = {
+	name: "unconfirmed — delete into another folder",
+	args: {
+		reason: "unconfirmed",
+		action: { kind: "delete", count: 3 },
+		trashFolderLabel: "Deleted Messages",
+		guessedMailboxId: "mb-deleted",
+		initialSelectedId: "mb-prullenbak",
+		phase: choosing,
+	},
+};
+
+/**
+ * That confirm in flight. It says the rows are being erased where they sit —
+ * "moving them to Deleted Messages" would narrate the opposite.
+ */
+export const UnconfirmedDeleteInFlight: Story = {
+	name: "unconfirmed — delete in place, acting",
+	args: {
+		reason: "unconfirmed",
+		action: { kind: "delete", count: 3 },
+		trashFolderLabel: "Deleted Messages",
+		guessedMailboxId: "mb-deleted",
+		initialSelectedId: "mb-deleted",
+		phase: { kind: "acting" },
+	},
+};
+
 /**
  * Two writes behind one press, and the story steps through both: the
  * appointment, then the delete it unblocks. Neither has a way out — the write

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

@@ -102,7 +102,9 @@ export const roleAppointmentPromptCopy = (
 	}
 
 	const irreversible =
-		"Emptying a folder erases everything in it from the mail server, and that cannot be restored.";
+		action.kind === "delete"
+			? `Deleting ${quantified(action.count)} there erases them from the mail server, and that cannot be restored.`
+			: "Emptying a folder erases everything in it from the mail server, and that cannot be restored.";
 	return {
 		title: "Confirm this account's Trash folder",
 		description: trashFolderLabel
@@ -125,6 +127,7 @@ const pendingCopy = (
 	phase: PromptPhase,
 	action: PromptAction,
 	folderLabel: string,
+	inPlace: boolean,
 ): PendingCopy => {
 	if (phase.kind === "appointing") {
 		return { headline: "Setting the Trash folder…", status: folderLabel };
@@ -132,7 +135,9 @@ const pendingCopy = (
 	if (action.kind === "delete") {
 		return {
 			headline: `Deleting ${quantified(action.count)}…`,
-			status: `Moving them to ${folderLabel}`,
+			status: inPlace
+				? `Erasing them from ${folderLabel}. This can't be undone.`
+				: `Moving them to ${folderLabel}`,
 		};
 	}
 	return {
@@ -141,6 +146,24 @@ const pendingCopy = (
 	};
 };
 
+/**
+ * The confirm expunges rather than moves. A delete is only refused as
+ * `unconfirmed` because its rows are already inside the folder reader guessed
+ * (#876), so confirming that same folder deletes them where they sit — and
+ * "moving them there" would narrate the opposite of what happens. Any other
+ * folder still moves them.
+ */
+const deletesInPlace = (
+	reason: PromptReason,
+	action: PromptAction,
+	guessedMailboxId: string | undefined,
+	selectedId: string | undefined,
+): boolean =>
+	reason === "unconfirmed" &&
+	action.kind === "delete" &&
+	guessedMailboxId !== undefined &&
+	selectedId === guessedMailboxId;
+
 const failureCopy = (
 	cause: "generic" | "mailbox-pending",
 	action: PromptAction,
@@ -159,6 +182,11 @@ export interface RoleAppointmentPromptProps {
 	delimiter: string;
 	/** `unconfirmed`: the folder reader guessed from its name. */
 	trashFolderLabel?: string;
+	/**
+	 * `unconfirmed`: that same folder, by id. Confirming it completes a delete of
+	 * rows already inside it, which erases them rather than moving them.
+	 */
+	guessedMailboxId?: string;
 	/** `stale`: the folder that vanished from the mail server. */
 	staleFolderLabel?: string;
 	/** Only on instances holding more than one account. */
@@ -188,6 +216,7 @@ export const RoleAppointmentPrompt = ({
 	folders,
 	delimiter,
 	trashFolderLabel,
+	guessedMailboxId,
 	staleFolderLabel,
 	accountEmail,
 	phase,
@@ -214,12 +243,13 @@ export const RoleAppointmentPrompt = ({
 		staleFolderLabel,
 		selectedCount: selected?.messageCount,
 	});
-	const expunges = action.kind === "emptyTrash";
+	const inPlace = deletesInPlace(reason, action, guessedMailboxId, selectedId);
+	const expunges = action.kind === "emptyTrash" || inPlace;
 
 	if (!open) return null;
 
 	if (pending) {
-		const words = pendingCopy(phase, action, selected?.label ?? "");
+		const words = pendingCopy(phase, action, selected?.label ?? "", inPlace);
 		return (
 			<Dialog open={open} onClose={() => {}} title={copy.title}>
 				<div

package/src/index.ts

@@ -591,6 +591,7 @@ export {
 export {
 	APPOINTABLE_ROLES,
 	type CandidateFolder,
+	FolderRolesHelp,
 	type RoleAppointment,
 	RoleAppointmentList,
 	type RoleAppointmentListProps,