@remit/ui 0.0.67 → 0.0.69

package/src/components/new-folder-action.render.test.ts

@@ -0,0 +1,44 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import {
+	NewFolderAction,
+	type NewFolderActionProps,
+} from "./new-folder-action.js";
+
+const render = (props: Partial<NewFolderActionProps>) =>
+	renderToString(
+		createElement(NewFolderAction, {
+			label: "New folder",
+			ariaLabel: "New folder",
+			onOpen: () => {},
+			...props,
+		}),
+	);
+
+describe("NewFolderAction", () => {
+	it("says what it makes, and where", () => {
+		const html = render({ ariaLabel: "New folder inside Travel" });
+		assert.match(html, /<button[^>]*aria-label="New folder inside Travel"/);
+		assert.match(html, />New folder</);
+	});
+
+	it("takes the dashed add affordance where it is the pinned action", () => {
+		const html = render({});
+		assert.match(html, /data-prominence="prominent"/);
+		assert.match(html, /border-dashed/);
+	});
+
+	it("stays neutral where it is the last thing inside a folder", () => {
+		const html = render({ prominence: "quiet", depth: 1 });
+		assert.match(html, /data-prominence="quiet"/);
+		assert.doesNotMatch(html, /border-dashed/);
+		assert.match(html, /width:14px/);
+	});
+
+	it("insets the hairline to where the label starts", () => {
+		assert.match(render({ separated: true, depth: 1 }), /left:74px/);
+		assert.doesNotMatch(render({ depth: 1 }), /left:74px/);
+	});
+});

package/src/components/new-folder-action.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ReactNode } from "react";
+import { FolderRow } from "./folder-row.js";
+import { NewFolderAction } from "./new-folder-action.js";
+
+const meta: Meta<typeof NewFolderAction> = {
+	title: "Mail/NewFolderAction",
+	component: NewFolderAction,
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj<typeof NewFolderAction>;
+
+function List({ children }: { children: ReactNode }) {
+	return (
+		<div className="w-[320px] overflow-hidden rounded-lg border border-line bg-surface font-sans text-fg">
+			{children}
+		</div>
+	);
+}
+
+/** Pinned above a list, where it is the loudest thing a folder tree offers. */
+export const Prominent: Story = {
+	name: "Prominent (pinned above the list)",
+	render: () => (
+		<List>
+			<NewFolderAction
+				label="New folder"
+				ariaLabel="New folder"
+				onOpen={() => undefined}
+			/>
+		</List>
+	),
+};
+
+/** The last thing inside an opened folder, subordinate to the folder it sits in. */
+export const Quiet: Story = {
+	name: "Quiet (inside an opened folder)",
+	render: () => (
+		<List>
+			<FolderRow
+				label="Travel"
+				depth={0}
+				expanded
+				ariaLabel="Move to Travel"
+				separated
+			/>
+			<FolderRow
+				label="Hotels"
+				depth={1}
+				expanded={false}
+				ariaLabel="Move to Hotels"
+				separated
+			/>
+			<NewFolderAction
+				label="New folder"
+				ariaLabel="New folder inside Travel"
+				depth={1}
+				prominence="quiet"
+				onOpen={() => undefined}
+			/>
+		</List>
+	),
+};
+
+export const BothTreatments: Story = {
+	name: "Both treatments at once",
+	render: () => (
+		<List>
+			<NewFolderAction
+				label="New folder"
+				ariaLabel="New folder"
+				onOpen={() => undefined}
+			/>
+			<FolderRow
+				label="Finance"
+				depth={0}
+				expanded
+				ariaLabel="Move to Finance"
+				separated
+			/>
+			<NewFolderAction
+				label="New folder"
+				ariaLabel="New folder inside Finance"
+				depth={1}
+				prominence="quiet"
+				onOpen={() => undefined}
+			/>
+		</List>
+	),
+};

package/src/components/new-folder-action.tsx

@@ -0,0 +1,59 @@
+import { FolderPlus } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import {
+	FOLDER_ROW_BASE,
+	FolderRowIndent,
+	FolderRowSeparator,
+} from "./folder-row.js";
+
+/**
+ * How loudly a create action asks to be noticed. The pinned top-level one takes
+ * the kit's dashed "add" affordance; the one inside an opened folder stays
+ * neutral so it reads as the last thing in that folder rather than as a rival
+ * to the pinned one.
+ */
+export type NewFolderProminence = "prominent" | "quiet";
+
+export interface NewFolderActionProps {
+	label: string;
+	/** Names the folder it makes one inside, e.g. `New folder inside Travel`. */
+	ariaLabel: string;
+	/** Indents it to sit among the children of the folder it belongs to. */
+	depth?: number;
+	prominence?: NewFolderProminence;
+	/** A hairline under the label, drawn for every row but the last. */
+	separated?: boolean;
+	onOpen: () => void;
+}
+
+/** Makes a folder where the user is looking, as a row in the list. */
+export const NewFolderAction = ({
+	label,
+	ariaLabel,
+	depth = 0,
+	prominence = "prominent",
+	separated = false,
+	onOpen,
+}: NewFolderActionProps) => (
+	<div className={cn("relative", prominence === "prominent" && "p-2")}>
+		<button
+			type="button"
+			onClick={onOpen}
+			aria-label={ariaLabel}
+			data-prominence={prominence}
+			className={cn(
+				FOLDER_ROW_BASE,
+				"w-full active:bg-surface-sunken",
+				prominence === "prominent"
+					? "rounded-lg border border-line-strong border-dashed font-medium text-fg-muted hover:border-accent-2 hover:text-accent-2"
+					: "text-fg-subtle hover:bg-surface-raised hover:text-fg-muted",
+			)}
+		>
+			<FolderRowIndent depth={depth} />
+			<span aria-hidden="true" className="size-4 shrink-0" />
+			<FolderPlus className="size-4 shrink-0" aria-hidden="true" />
+			<span className="min-w-0 flex-1 truncate">{label}</span>
+		</button>
+		{separated && <FolderRowSeparator depth={depth} />}
+	</div>
+);

package/src/components/new-folder-form.render.test.ts

@@ -0,0 +1,64 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { NewFolderForm, type NewFolderFormProps } from "./new-folder-form.js";
+
+const render = (props: Partial<NewFolderFormProps>) =>
+	renderToString(
+		createElement(NewFolderForm, {
+			parentLabel: "Travel",
+			name: "",
+			onNameChange: () => {},
+			onSubmit: () => {},
+			onCancel: () => {},
+			...props,
+		}),
+	);
+
+describe("NewFolderForm", () => {
+	it("asks for a name and states where the folder goes", () => {
+		const html = render({ name: "Car hire" });
+		assert.match(html, /Folder name/);
+		assert.match(html, /value="Car hire"/);
+		assert.match(html, /placeholder="Hotels"/);
+		assert.match(html, /Inside/);
+		assert.match(html, />Travel</);
+	});
+
+	it("ties the label to the field it names", () => {
+		const html = render({});
+		const forId = html.match(/<label[^>]*for="([^"]+)"/)?.[1];
+		assert.ok(forId);
+		assert.match(html, new RegExp(`<input[^>]*id="${forId}"`));
+	});
+
+	it("states the parent as text rather than a second choice", () => {
+		assert.doesNotMatch(render({}), /<select/);
+	});
+
+	it("holds the wait and refuses a second submit while it runs", () => {
+		const html = render({ pending: true });
+		assert.match(html, /Creating folder…/);
+		assert.match(html, /<button[^>]*disabled/);
+		assert.doesNotMatch(html, />Create folder</);
+	});
+
+	it("states a failure where it happened", () => {
+		const html = render({ error: "The mail server refused that name." });
+		assert.match(html, /role="alert"[^>]*>The mail server refused that name\./);
+	});
+
+	it("says nothing about a failure that has not happened", () => {
+		assert.doesNotMatch(render({}), /role="alert"/);
+	});
+
+	it("applies caller-supplied labels", () => {
+		const html = render({
+			labels: { create: "Map maken", cancel: "Annuleren", insideLabel: "In" },
+		});
+		assert.match(html, />Map maken</);
+		assert.match(html, />Annuleren</);
+		assert.doesNotMatch(html, /Inside/);
+	});
+});

package/src/components/new-folder-form.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { type ReactNode, useState } from "react";
+import { NewFolderForm } from "./new-folder-form.js";
+
+const meta: Meta<typeof NewFolderForm> = {
+	title: "Mail/NewFolderForm",
+	component: NewFolderForm,
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj<typeof NewFolderForm>;
+
+function Frame({ children }: { children: ReactNode }) {
+	return (
+		<div className="w-[320px] overflow-hidden rounded-lg border border-line bg-surface font-sans text-fg">
+			{children}
+		</div>
+	);
+}
+
+function Form({
+	parentLabel = "Travel",
+	initialName = "",
+	pending,
+	error,
+}: {
+	parentLabel?: string;
+	initialName?: string;
+	pending?: boolean;
+	error?: string;
+}) {
+	const [name, setName] = useState(initialName);
+	return (
+		<Frame>
+			<NewFolderForm
+				parentLabel={parentLabel}
+				name={name}
+				onNameChange={setName}
+				onSubmit={() => undefined}
+				onCancel={() => undefined}
+				pending={pending}
+				error={error}
+			/>
+		</Frame>
+	);
+}
+
+export const Empty: Story = {
+	name: "Opened, waiting for a name",
+	render: () => <Form />,
+};
+
+export const TopLevel: Story = {
+	name: "At the top level",
+	render: () => <Form parentLabel="Top level" initialName="Insurance" />,
+};
+
+/** Creating a folder is an IMAP mutation: the form holds until the server confirms. */
+export const Pending: Story = {
+	name: "Waiting for the server",
+	render: () => <Form initialName="Car hire" pending />,
+};
+
+/** The failure is stated where it happened; the form stays open to retry. */
+export const Failed: Story = {
+	name: "Failed (retry in place)",
+	render: () => (
+		<Form
+			initialName="Car hire"
+			error="The mail server refused the folder name. Try another one."
+		/>
+	),
+};

package/src/components/new-folder-form.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useId, useRef } from "react";
+import { Button } from "./button.js";
+import { FieldLabel } from "./field-label.js";
+import { Input } from "./input.js";
+
+export interface NewFolderFormLabels {
+	nameLabel?: string;
+	namePlaceholder?: string;
+	/** Precedes the parent, e.g. `Inside Travel`. */
+	insideLabel?: string;
+	create?: string;
+	cancel?: string;
+	createPending?: string;
+}
+
+export const defaultNewFolderFormLabels: Required<NewFolderFormLabels> = {
+	nameLabel: "Folder name",
+	namePlaceholder: "Hotels",
+	insideLabel: "Inside",
+	create: "Create folder",
+	cancel: "Cancel",
+	createPending: "Creating folder…",
+};
+
+export interface NewFolderFormProps {
+	/** Where the folder is made, stated as text rather than a second choice. */
+	parentLabel: string;
+	name: string;
+	onNameChange: (name: string) => void;
+	onSubmit: () => void;
+	onCancel: () => void;
+	/** The mail server has the request and has not confirmed it yet. */
+	pending?: boolean;
+	error?: string;
+	labels?: NewFolderFormLabels;
+}
+
+/**
+ * Names a folder and holds the wait while the mail server makes it. Opens
+ * focused and in view, states a failure in place, and refuses a second submit
+ * while the first is still out.
+ */
+export const NewFolderForm = ({
+	parentLabel,
+	name,
+	onNameChange,
+	onSubmit,
+	onCancel,
+	pending = false,
+	error,
+	labels,
+}: NewFolderFormProps) => {
+	const text = { ...defaultNewFolderFormLabels, ...labels };
+	const fieldId = useId();
+	const nameRef = useRef<HTMLInputElement>(null);
+	const formRef = useRef<HTMLDivElement>(null);
+
+	/**
+	 * The whole form is brought into view, buttons included — focusing the field
+	 * would otherwise scroll to the field alone and leave Create below the fold,
+	 * under a footer or a soft keyboard.
+	 */
+	useEffect(() => {
+		nameRef.current?.focus({ preventScroll: true });
+		formRef.current?.scrollIntoView({ block: "nearest" });
+	}, []);
+
+	return (
+		<div
+			ref={formRef}
+			className="space-y-3 border-y border-line bg-surface-sunken px-3 py-3"
+		>
+			<div>
+				<FieldLabel htmlFor={fieldId}>{text.nameLabel}</FieldLabel>
+				<Input
+					id={fieldId}
+					ref={nameRef}
+					value={name}
+					placeholder={text.namePlaceholder}
+					onChange={(event) => onNameChange(event.target.value)}
+					onKeyDown={(event) => {
+						if (event.key === "Enter") {
+							event.preventDefault();
+							onSubmit();
+						}
+						if (event.key === "Escape") {
+							event.preventDefault();
+							onCancel();
+						}
+					}}
+				/>
+			</div>
+			<p className="text-xs text-fg-muted">
+				{text.insideLabel}{" "}
+				<span className="font-medium text-fg">{parentLabel}</span>
+			</p>
+			{error && (
+				<p className="text-xs text-danger" role="alert">
+					{error}
+				</p>
+			)}
+			{/* Sized to their labels rather than to the pane: a full-width primary
+			    here reads as loudly as the wizard's Continue below it, and making a
+			    folder is the smaller commitment of the two. */}
+			<div className="flex items-center gap-2">
+				<Button
+					variant="ghost"
+					size="md"
+					onClick={onCancel}
+					className="min-h-11 shrink-0"
+				>
+					{text.cancel}
+				</Button>
+				<Button
+					variant="secondary"
+					size="md"
+					onClick={onSubmit}
+					disabled={pending}
+					className="min-h-11 shrink-0"
+				>
+					{pending ? text.createPending : text.create}
+				</Button>
+			</div>
+		</div>
+	);
+};

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,
@@ -207,6 +221,10 @@ export {
 	type ResultFolder,
 	roleIcon,
 } from "./components/folder-role.js";
+export {
+	FolderRow,
+	type FolderRowProps,
+} from "./components/folder-row.js";
 export {
 	type FolderTreeNode,
 	FolderTreePicker,
@@ -322,6 +340,16 @@ export {
 	NavSidebar,
 	type NavSidebarProps,
 } from "./components/nav-sidebar.js";
+export {
+	NewFolderAction,
+	type NewFolderActionProps,
+	type NewFolderProminence,
+} from "./components/new-folder-action.js";
+export {
+	NewFolderForm,
+	type NewFolderFormLabels,
+	type NewFolderFormProps,
+} from "./components/new-folder-form.js";
 export { OutboxRow, type OutboxRowProps } from "./components/outbox-row.js";
 export {
 	type OutboxStatus,
@@ -619,6 +647,25 @@ export {
 	sanitizeInlineStyle,
 	sanitizeStyleElementCss,
 } from "./lib/email-sanitizer.js";
+export {
+	collapseFolderTree,
+	filterFolderTree,
+	folderAncestors,
+	folderDepth,
+	folderParent,
+	matchesQuery,
+	orderFolderNodes,
+	queryExpandedPaths,
+	withCreateRows,
+} from "./lib/folder-tree.js";
+export {
+	findFirstFocusable,
+	findLastFocusable,
+	findNextFocusable,
+	findParentRow,
+	isFocusable,
+	isSelectable,
+} from "./lib/folder-tree-focus.js";
 export {
 	isLabelColorValue,
 	type LabelColorValue,

package/src/lib/folder-tree-focus.test.ts

@@ -0,0 +1,98 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	collapseFolderTree,
+	type FolderTreeNode,
+	filterFolderTree,
+	orderFolderNodes,
+} from "./folder-tree.js";
+import {
+	findFirstFocusable,
+	findLastFocusable,
+	findNextFocusable,
+	findParentRow,
+	isSelectable,
+} from "./folder-tree-focus.js";
+
+const node = (
+	id: string,
+	label: string,
+	path: string,
+	isCurrent?: boolean,
+): FolderTreeNode => ({ id, label, path, isCurrent });
+
+const ordered = orderFolderNodes(
+	[
+		node("inbox", "Inbox", "INBOX", true),
+		node("hotels", "Hotels", "Travel/Hotels"),
+		node("archive", "Archive", "Archive"),
+		node("travel", "Travel", "Travel"),
+		node("receipts", "Receipts", "Travel/Hotels/Receipts"),
+		node("trash", "Trash", "Deleted Messages"),
+	],
+	"/",
+);
+
+describe("roving focus", () => {
+	const rows = filterFolderTree(ordered, "receipts", "/");
+
+	it("skips context rows, which are branches rather than folders to open", () => {
+		assert.equal(findFirstFocusable(rows), 2);
+		assert.equal(findLastFocusable(rows), 2);
+	});
+
+	it("reaches the current folder, which cannot be picked but can be opened", () => {
+		const all = collapseFolderTree(ordered, new Set(), "/");
+		assert.equal(findFirstFocusable(all), 0);
+		assert.equal(findNextFocusable(all, 3, 1), 0);
+		assert.equal(findNextFocusable(all, 0, -1), 3);
+	});
+
+	it("walks only what is on screen, so closed children are skipped", () => {
+		const closed = collapseFolderTree(ordered, new Set(), "/");
+		assert.equal(
+			closed[findNextFocusable(closed, 2, 1)]?.folder.path,
+			"Deleted Messages",
+		);
+		const open = collapseFolderTree(ordered, new Set(["Travel"]), "/");
+		assert.equal(
+			open[findNextFocusable(open, 2, 1)]?.folder.path,
+			"Travel/Hotels",
+		);
+	});
+
+	it("walks from nowhere into the list from either end", () => {
+		const all = collapseFolderTree(ordered, new Set(), "/");
+		assert.equal(findNextFocusable(all, -1, 1), 0);
+		assert.equal(findNextFocusable(all, -1, -1), 3);
+	});
+
+	it("finds the parent to move focus to when a row closes", () => {
+		const open = collapseFolderTree(ordered, new Set(["Travel"]), "/");
+		assert.equal(findParentRow(open, 3, "/"), 2);
+		assert.equal(findParentRow(open, 2, "/"), -1);
+	});
+
+	it("finds no parent for a row that is not on screen", () => {
+		const open = collapseFolderTree(ordered, new Set(["Travel"]), "/");
+		assert.equal(findParentRow(open, 99, "/"), -1);
+		assert.equal(
+			findParentRow(filterFolderTree(ordered, "hotels", "/"), 1, "/"),
+			-1,
+		);
+	});
+
+	it("returns -1 when there is nothing to walk", () => {
+		assert.equal(findFirstFocusable([]), -1);
+		assert.equal(findLastFocusable([]), -1);
+		assert.equal(findNextFocusable([], 0, 1), -1);
+	});
+
+	it("keeps the current folder and a context branch out of the selection", () => {
+		const all = collapseFolderTree(ordered, new Set(), "/");
+		assert.equal(isSelectable(all[0]), false);
+		assert.equal(isSelectable(all[1]), true);
+		assert.equal(isSelectable(rows[0]), false);
+		assert.equal(isSelectable(undefined), false);
+	});
+});

package/src/lib/folder-tree-focus.ts

@@ -0,0 +1,52 @@
+import { type FolderTreeRow, folderParent } from "./folder-tree.js";
+
+/** Every folder can hold a new one, so every row but a context row can open. */
+export const isFocusable = (row: FolderTreeRow | undefined): boolean =>
+	row !== undefined && !row.context;
+
+export const isSelectable = (row: FolderTreeRow | undefined): boolean =>
+	row !== undefined && !row.folder.isCurrent && !row.context;
+
+export const findFirstFocusable = (rows: readonly FolderTreeRow[]): number => {
+	for (let i = 0; i < rows.length; i += 1) {
+		if (isFocusable(rows[i])) return i;
+	}
+	return -1;
+};
+
+export const findLastFocusable = (rows: readonly FolderTreeRow[]): number => {
+	for (let i = rows.length - 1; i >= 0; i -= 1) {
+		if (isFocusable(rows[i])) return i;
+	}
+	return -1;
+};
+
+export const findNextFocusable = (
+	rows: readonly FolderTreeRow[],
+	from: number,
+	step: 1 | -1,
+): number => {
+	const count = rows.length;
+	if (count <= 0) return -1;
+	const start = from < 0 ? (step === 1 ? -1 : count) : from;
+	for (let offset = 1; offset <= count; offset += 1) {
+		const candidate = (((start + step * offset) % count) + count) % count;
+		if (isFocusable(rows[candidate])) return candidate;
+	}
+	return -1;
+};
+
+export const findParentRow = (
+	rows: readonly FolderTreeRow[],
+	from: number,
+	delimiter: string,
+): number => {
+	const child = rows[from];
+	if (!child) return -1;
+	const parent = folderParent(child.folder.path, delimiter);
+	if (!parent) return -1;
+	for (let i = from - 1; i >= 0; i -= 1) {
+		if (rows[i]?.folder.path === parent) return isFocusable(rows[i]) ? i : -1;
+	}
+	return -1;
+};