@remit/ui 0.0.68 → 0.0.70

package/src/components/folder-rename-dialog.tsx

@@ -0,0 +1,95 @@
+import { X } from "lucide-react";
+import { useId } from "react";
+import { Button } from "./button.js";
+import { Dialog } from "./dialog.js";
+import { FieldLabel } from "./field-label.js";
+import { Input } from "./input.js";
+
+export interface FolderRenameDialogProps {
+	open: boolean;
+	/** The folder as it reads now. */
+	folderLabel: string;
+	/** What the folder falls back to once the name is cleared. */
+	defaultLabel: string;
+	name: string;
+	onNameChange: (name: string) => void;
+	onSubmit: () => void;
+	onClose: () => void;
+	pending?: boolean;
+	error?: string;
+}
+
+/**
+ * Renames a folder for this account. The name is Remit's own — the folder keeps
+ * its place and its path on the mail server — so clearing it puts the folder
+ * back to what the server calls it.
+ */
+export const FolderRenameDialog = ({
+	open,
+	folderLabel,
+	defaultLabel,
+	name,
+	onNameChange,
+	onSubmit,
+	onClose,
+	pending = false,
+	error,
+}: FolderRenameDialogProps) => {
+	const fieldId = useId();
+	const title = `Rename ${folderLabel}`;
+
+	if (!open) return null;
+
+	return (
+		<Dialog open={open} onClose={onClose} title={title}>
+			<header className="flex items-center gap-2 border-b border-line px-5 py-3">
+				<span className="flex-1 text-sm font-semibold text-fg">{title}</span>
+				<Button
+					variant="ghost"
+					size="sm"
+					icon={<X className="size-3.5" />}
+					onClick={onClose}
+					aria-label="Cancel"
+				/>
+			</header>
+			<div className="space-y-3 px-5 py-4">
+				<div>
+					<FieldLabel htmlFor={fieldId}>Folder name</FieldLabel>
+					<Input
+						id={fieldId}
+						value={name}
+						placeholder={defaultLabel}
+						onChange={(event) => onNameChange(event.target.value)}
+						onKeyDown={(event) => {
+							if (event.key !== "Enter") return;
+							event.preventDefault();
+							onSubmit();
+						}}
+					/>
+				</div>
+				<p className="text-xs text-fg-muted">
+					Shown everywhere in Remit. Leave it blank to use{" "}
+					<span className="font-medium text-fg">{defaultLabel}</span>.
+				</p>
+				{error && (
+					<p className="text-xs text-danger" role="alert">
+						{error}
+					</p>
+				)}
+			</div>
+			<footer className="flex items-center justify-end gap-2 border-t border-line px-5 py-3">
+				<Button variant="secondary" size="sm" onClick={onClose}>
+					Cancel
+				</Button>
+				<Button
+					variant="primary"
+					size="sm"
+					onClick={onSubmit}
+					disabled={pending}
+				>
+					{pending ? "Saving…" : "Save name"}
+				</Button>
+			</footer>
+		</Dialog>
+	);
+};

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

@@ -74,6 +74,13 @@ describe("FolderRow", () => {
 		assert.doesNotMatch(render({ depth: 1 }), /left:74px/);
 	});
 
+	it("keeps its actions beside the tree item rather than inside it", () => {
+		const html = render({
+			actions: createElement("button", { type: "button" }, "Delete"),
+		});
+		assert.ok(html.indexOf(">Delete<") > html.indexOf("</button>"));
+	});
+
 	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

@@ -1,5 +1,5 @@
 import { Check, ChevronRight, Folder } from "lucide-react";
-import type { Ref } from "react";
+import type { ReactNode, Ref } from "react";
 import { cn } from "../lib/cn.js";
 
 export const FOLDER_ROW_BASE =
@@ -52,6 +52,12 @@ export interface FolderRowProps {
 	currentTag?: string;
 	/** A hairline under the label, drawn for every row but the last. */
 	separated?: boolean;
+	/**
+	 * Controls that operate on the folder rather than open it. They sit beside
+	 * the row instead of inside it — a button nested in a button is invalid, and
+	 * a tree item that swallows its own actions cannot be reached by keyboard.
+	 */
+	actions?: ReactNode;
 	tabIndex?: number;
 	onActivate?: () => void;
 	onFocus?: () => void;
@@ -72,6 +78,7 @@ export const FolderRow = ({
 	current = false,
 	currentTag,
 	separated = false,
+	actions,
 	tabIndex,
 	onActivate,
 	onFocus,
@@ -106,6 +113,7 @@ export const FolderRow = ({
 					{icon}
 					<span className="min-w-0 flex-1 truncate">{label}</span>
 				</div>
+				{actions}
 				{separated && <FolderRowSeparator depth={depth} />}
 			</div>
 		);
@@ -141,6 +149,7 @@ export const FolderRow = ({
 					<Check className="size-4 shrink-0 text-accent" aria-hidden="true" />
 				)}
 			</button>
+			{actions}
 			{separated && <FolderRowSeparator depth={depth} />}
 		</div>
 	);

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { type ReactNode, useState } from "react";
 import type { StepId } from "../lib/wizard-steps.js";
 import { type FolderTreeNode, FolderTreePicker } from "./folder-tree-picker.js";
-import { FooterNav, WizardScreen } from "./selection-wizard.js";
+import { FolderStepBody, FooterNav, WizardScreen } from "./selection-wizard.js";
 
 const folders: FolderTreeNode[] = [
 	{ id: "mbx-inbox", label: "Inbox", path: "INBOX", isCurrent: true },
@@ -332,30 +332,17 @@ function WizardFolderStep() {
 				/>
 			}
 		>
-			<div className="flex min-h-0 flex-col gap-3">
-				<p className="px-1 text-xs text-fg-muted">
-					{chosen
-						? `Moving to ${chosen.label}.`
-						: "Tap a folder to open it, or make a new one where you want it."}
-				</p>
-				<div className="flex min-h-0 flex-1 overflow-hidden rounded-lg border border-line bg-surface">
-					<FolderTreePicker
-						folders={known}
-						selectedId={selected}
-						onSelect={setSelected}
-						onCreateFolder={(name, parentPath) =>
-							createFolder(name, parentPath).then((created) => {
-								setKnown((current) => [...current, created]);
-								return created;
-							})
-						}
-						labels={{
-							createPending:
-								"Waiting for the mail server to confirm the folder…",
-						}}
-					/>
-				</div>
-			</div>
+			<FolderStepBody
+				folders={known}
+				mailboxId={selected}
+				onSelect={setSelected}
+				onCreateFolder={(name, parentPath) =>
+					createFolder(name, parentPath).then((created) => {
+						setKnown((current) => [...current, created]);
+						return created;
+					})
+				}
+			/>
 		</WizardScreen>
 	);
 }

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

@@ -1,6 +1,7 @@
 import { Search } from "lucide-react";
 import {
 	type KeyboardEvent as ReactKeyboardEvent,
+	type ReactNode,
 	useCallback,
 	useEffect,
 	useMemo,
@@ -72,8 +73,14 @@ export interface FolderTreePickerProps {
 	folders: readonly FolderTreeNode[];
 	/** The destination chosen so far. */
 	selectedId?: string;
-	/** Marks the row. Choosing a destination advances nothing on its own. */
-	onSelect: (folderId: string) => void;
+	/**
+	 * Marks the row. Choosing a destination advances nothing on its own. Absent
+	 * means the tree is browsed rather than chosen from, and a row does nothing
+	 * beyond opening and closing.
+	 */
+	onSelect?: (folderId: string) => void;
+	/** Controls beside each row, for a surface that acts on folders themselves. */
+	rowActions?: (folder: FolderTreeNode) => ReactNode;
 	/**
 	 * Creating a folder is an IMAP mutation, so this resolves only once the mail
 	 * server confirms the folder (docs/architecture/imap-mutations.md). The form
@@ -128,6 +135,7 @@ export const FolderTreePicker = ({
 	folders,
 	selectedId,
 	onSelect,
+	rowActions,
 	onCreateFolder,
 	onCancel,
 	delimiter = "/",
@@ -204,7 +212,7 @@ export const FolderTreePicker = ({
 
 	const activateRow = useCallback(
 		(row: FolderTreeRow) => {
-			if (isSelectable(row)) onSelect(row.folder.id);
+			if (isSelectable(row)) onSelect?.(row.folder.id);
 			setExpanded(row.folder.path, !row.expanded);
 		},
 		[onSelect, setExpanded],
@@ -252,7 +260,7 @@ export const FolderTreePicker = ({
 				setDraft(null);
 				setDraftName("");
 				if (parentPath) setExpanded(parentPath, true);
-				onSelect(created.id);
+				onSelect?.(created.id);
 			})
 			.catch((error: unknown) => {
 				if (isAbortError(error)) return;
@@ -367,6 +375,7 @@ export const FolderTreePicker = ({
 				currentTag={text.currentTag}
 				selected={selectable && folder.id === selectedId}
 				separated={separated}
+				actions={rowActions?.(folder)}
 				ariaLabel={rowAriaLabel(row)}
 				tabIndex={index === focusedIndex ? 0 : -1}
 				onActivate={() => activateRow(row)}

package/src/components/rescue-from-spam-flow.render.test.ts

@@ -2,7 +2,7 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import { createElement } from "react";
 import { renderToString } from "react-dom/server";
-import type { MoveMailboxOption } from "./move-mailbox-picker.js";
+import type { FolderTreeNode } from "./folder-tree-picker.js";
 import type { RescueCandidate } from "./rescue-candidate-row.js";
 import {
 	RescueFromSpamFlow,
@@ -34,9 +34,9 @@ const candidates: RescueCandidate[] = [
 	},
 ];
 
-const folders: MoveMailboxOption[] = [
-	{ id: "inbox", label: "Inbox" },
-	{ id: "spam", label: "Spam", isCurrent: true },
+const folders: FolderTreeNode[] = [
+	{ id: "inbox", label: "Inbox", path: "INBOX" },
+	{ id: "spam", label: "Spam", path: "Junk", isCurrent: true },
 ];
 
 const renderFlow = (open: boolean): string =>

package/src/components/rescue-from-spam-flow.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
 import { Button } from "./button.js";
-import type { MoveMailboxOption } from "./move-mailbox-picker.js";
+import type { FolderTreeNode } from "./folder-tree-picker.js";
 import type { RescueCandidate } from "./rescue-candidate-row.js";
 import { RescueFromSpamFlow } from "./rescue-from-spam-flow.js";
 
@@ -54,12 +54,14 @@ const CANDIDATES: RescueCandidate[] = [
 	},
 ];
 
-const FOLDERS: MoveMailboxOption[] = [
-	{ id: "inbox", label: "Inbox" },
-	{ id: "spam", label: "Spam", isCurrent: true },
-	{ id: "receipts", label: "Receipts" },
-	{ id: "family", label: "Family" },
-	{ id: "work", label: "Work", searchValue: "work clients projects" },
+const FOLDERS: FolderTreeNode[] = [
+	{ id: "inbox", label: "Inbox", path: "INBOX" },
+	{ id: "spam", label: "Spam", path: "Junk", isCurrent: true },
+	{ id: "receipts", label: "Receipts", path: "Receipts" },
+	{ id: "family", label: "Family", path: "Family" },
+	{ id: "work", label: "Work", path: "Work" },
+	{ id: "work-clients", label: "Clients", path: "Work/Clients" },
+	{ id: "work-projects", label: "Projects", path: "Work/Projects" },
 ];
 
 function Demo() {

package/src/components/rescue-from-spam-flow.tsx

@@ -3,10 +3,7 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { Banner } from "./banner.js";
 import { BottomSheet } from "./bottom-sheet.js";
 import { Button } from "./button.js";
-import {
-	type MoveMailboxOption,
-	MoveMailboxPicker,
-} from "./move-mailbox-picker.js";
+import { type FolderTreeNode, FolderTreePicker } from "./folder-tree-picker.js";
 import type { RescueCandidate } from "./rescue-candidate-row.js";
 import {
 	groupRescueCandidatesBySender,
@@ -23,7 +20,9 @@ export interface RescueFromSpamFlowProps {
 	/** Where the move lands unless the user picks another folder. */
 	defaultDestinationId: string;
 	/** Folders the user can send the rescued mail to. */
-	availableFolders: MoveMailboxOption[];
+	availableFolders: FolderTreeNode[];
+	/** The account's hierarchy separator, which the tree nests on. */
+	delimiter?: string;
 	/** Run the move. The flow shows the done state right after. */
 	onConfirmMove: (messageIds: string[], destinationId: string) => void;
 	/** Close the sheet without moving anything. */
@@ -42,7 +41,7 @@ export const rescueMoveConsequence = (
 ): string =>
 	`Moves ${count === 1 ? "this message" : `these ${count} ${plural(count)}`} out of Spam to ${destinationLabel} now. Nothing later.`;
 
-const folderLabel = (folders: MoveMailboxOption[], id: string): string =>
+const folderLabel = (folders: FolderTreeNode[], id: string): string =>
 	folders.find((f) => f.id === id)?.label ?? "Inbox";
 
 function ExplainWhy() {
@@ -157,13 +156,15 @@ function ReviewStep({
 function DestinationStep({
 	count,
 	folders,
+	delimiter,
 	destination,
 	onPick,
 	onMove,
 	onBack,
 }: {
 	count: number;
-	folders: MoveMailboxOption[];
+	folders: FolderTreeNode[];
+	delimiter?: string;
 	destination: string;
 	onPick: (id: string) => void;
 	onMove: () => void;
@@ -180,16 +181,17 @@ function DestinationStep({
 				</p>
 			</div>
 
-			<div className="min-h-0 flex-1 overflow-y-auto px-row-inset py-2">
+			<div className="flex min-h-0 flex-1 flex-col overflow-y-auto px-row-inset py-2">
 				{picking ? (
-					<div className="overflow-hidden rounded-xl border border-line bg-surface">
-						<MoveMailboxPicker
-							mailboxes={folders}
-							autoFocus
-							onSelect={(id) => {
-								onPick(id);
-								setPicking(false);
-							}}
+					<div className="flex min-h-0 flex-1 overflow-hidden rounded-xl border border-line bg-surface">
+						{/* Picking a folder also opens it, so the tree stays up: closing
+						    on the first tap would put anything nested out of reach. The
+						    consequence line below states the destination as it changes. */}
+						<FolderTreePicker
+							folders={folders}
+							selectedId={destination}
+							delimiter={delimiter}
+							onSelect={onPick}
 							onCancel={() => setPicking(false)}
 						/>
 					</div>
@@ -277,6 +279,7 @@ export function RescueFromSpamFlow({
 	candidates,
 	defaultDestinationId,
 	availableFolders,
+	delimiter,
 	onConfirmMove,
 	onCancel,
 }: RescueFromSpamFlowProps) {
@@ -345,6 +348,7 @@ export function RescueFromSpamFlow({
 				<DestinationStep
 					count={selectedCount}
 					folders={availableFolders}
+					delimiter={delimiter}
 					destination={destination}
 					onPick={setDestination}
 					onMove={move}

package/src/components/selection-wizard.render.test.ts

@@ -76,14 +76,16 @@ const propertiesProps = {
 };
 
 const folderProps = {
-	mailboxes: [
-		{ id: "mbx-archive", label: "Archive" },
-		{ id: "mbx-travel", label: "Travel" },
-		{ id: "mbx-inbox", label: "Inbox", isCurrent: true },
+	folders: [
+		{ id: "mbx-archive", label: "Archive", path: "Archive" },
+		{ id: "mbx-travel", label: "Travel", path: "Travel" },
+		{ id: "mbx-travel-2026", label: "2026", path: "Travel/2026" },
+		{ id: "mbx-inbox", label: "Inbox", path: "INBOX", isCurrent: true },
 	],
 	mailboxId: "mbx-travel",
 	onSelect: noop,
-	onCreateFolder: () => Promise.resolve({ id: "mbx-new", label: "Hotels" }),
+	onCreateFolder: () =>
+		Promise.resolve({ id: "mbx-new", label: "Hotels", path: "Travel/Hotels" }),
 };
 
 const draft = (over: Partial<WizardDraft> = {}): WizardDraft => ({
@@ -359,11 +361,16 @@ describe("FolderStepBody", () => {
 		assert.match(html, /Inbox \(current folder\)/);
 	});
 
-	it("says how to make a folder when none is chosen yet", () => {
+	it("starts at the top level, with nested folders behind the one holding them", () => {
+		const html = renderToString(createElement(FolderStepBody, folderProps));
+		assert.doesNotMatch(html, /Move to 2026/);
+	});
+
+	it("says how to reach a folder when none is chosen yet", () => {
 		const html = renderToString(
 			createElement(FolderStepBody, { ...folderProps, mailboxId: undefined }),
 		);
-		assert.match(text(html), /type a name that doesn&#x27;t exist yet/);
+		assert.match(text(html), /Tap a folder to open it/);
 	});
 });
 

package/src/components/selection-wizard.tsx

@@ -69,11 +69,8 @@ import {
 	scopeLabel,
 } from "./filter-rule.js";
 import type { ClauseEditState } from "./filter-rule-editor.js";
+import { type FolderTreeNode, FolderTreePicker } from "./folder-tree-picker.js";
 import { Input } from "./input.js";
-import {
-	type MoveMailboxOption,
-	MoveMailboxPicker,
-} from "./move-mailbox-picker.js";
 import { ProgressBar } from "./progress-bar.js";
 import type { SearchConversionNotice } from "./search-conversion.js";
 import { SearchConversionNoticeView } from "./search-conversion-notice.js";
@@ -651,7 +648,7 @@ export interface FolderStepProps {
 	 * (`buildMoveTargets`). The wizard does not reorder them: a second ordering
 	 * beside the one the Move picker already applies would fight it.
 	 */
-	mailboxes: readonly MoveMailboxOption[];
+	folders: readonly FolderTreeNode[];
 	/** The destination chosen so far. */
 	mailboxId?: string;
 	onSelect: (mailboxId: string) => void;
@@ -664,8 +661,11 @@ export interface FolderStepProps {
 	 */
 	onCreateFolder?: (
 		name: string,
+		parentPath: string,
 		signal?: AbortSignal,
-	) => Promise<MoveMailboxOption>;
+	) => Promise<FolderTreeNode>;
+	/** The account's hierarchy separator, which the tree nests on. */
+	delimiter?: string;
 	/**
 	 * Why there is no folder list to choose from — a selection spanning accounts
 	 * has no single account whose folders these could be (#477 5.5). Said here
@@ -675,13 +675,14 @@ export interface FolderStepProps {
 }
 
 export function FolderStepBody({
-	mailboxes,
+	folders,
 	mailboxId,
 	onSelect,
 	onCreateFolder,
+	delimiter,
 	restriction,
 }: FolderStepProps) {
-	const chosen = mailboxes.find((mailbox) => mailbox.id === mailboxId);
+	const chosen = folders.find((folder) => folder.id === mailboxId);
 	return (
 		<div className="flex min-h-0 flex-col gap-3">
 			<p
@@ -693,17 +694,16 @@ export function FolderStepBody({
 				{restriction ??
 					(chosen
 						? `Moving to ${chosen.label}.`
-						: "Search for a folder, or type a name that doesn't exist yet to make one.")}
+						: "Tap a folder to open it, or make a new one where you want it.")}
 			</p>
-			<div className="overflow-hidden rounded-lg border border-line bg-surface">
-				<MoveMailboxPicker
-					mailboxes={mailboxes}
+			<div className="flex min-h-0 flex-1 overflow-hidden rounded-lg border border-line bg-surface">
+				<FolderTreePicker
+					folders={folders}
+					selectedId={mailboxId}
 					onSelect={onSelect}
 					onCreateFolder={onCreateFolder}
-					autoFocus
+					delimiter={delimiter}
 					labels={{
-						searchPlaceholder: "Move to…",
-						optionLabel: (label) => `Move to ${label}`,
 						createPending: "Waiting for the mail server to confirm the folder…",
 					}}
 				/>

package/src/index.ts

@@ -198,6 +198,20 @@ export {
 	type FilterSheetProps,
 	type FilterSheetSource,
 } from "./components/filter-sheet.js";
+export {
+	FolderManageActions,
+	type FolderManageActionsProps,
+} from "./components/folder-manage-actions.js";
+export {
+	FolderManager,
+	type FolderManagerLabels,
+	type FolderManagerProps,
+	type ManagedFolder,
+} from "./components/folder-manager.js";
+export {
+	FolderRenameDialog,
+	type FolderRenameDialogProps,
+} from "./components/folder-rename-dialog.js";
 export {
 	canonicalRoleLabel,
 	type FolderRole,
@@ -316,12 +330,6 @@ export {
 	MobileSearchView,
 	type MobileSearchViewProps,
 } from "./components/mobile-search-view.js";
-export {
-	type MoveMailboxOption,
-	MoveMailboxPicker,
-	type MoveMailboxPickerLabels,
-	type MoveMailboxPickerProps,
-} from "./components/move-mailbox-picker.js";
 export {
 	NavSidebar,
 	type NavSidebarProps,