@remit/ui 0.0.66 → 0.0.68

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

@@ -1,36 +1,45 @@
-import { Check, Folder, FolderPlus, Search } from "lucide-react";
+import { Search } from "lucide-react";
 import {
 	type KeyboardEvent as ReactKeyboardEvent,
 	useCallback,
 	useEffect,
-	useId,
 	useMemo,
 	useRef,
 	useState,
 } from "react";
 import { isAbortError } from "../lib/abort.js";
-import { cn } from "../lib/cn.js";
-import { Button } from "./button.js";
-import { FieldLabel } from "./field-label.js";
+import {
+	collapseFolderTree,
+	type FolderTreeDisplayRow,
+	type FolderTreeNode,
+	type FolderTreeRow,
+	filterFolderTree,
+	folderAncestors,
+	orderFolderNodes,
+	queryExpandedPaths,
+	withCreateRows,
+} from "../lib/folder-tree.js";
+import {
+	findFirstFocusable,
+	findLastFocusable,
+	findNextFocusable,
+	findParentRow,
+	isFocusable,
+	isSelectable,
+} from "../lib/folder-tree-focus.js";
+import { FolderRow } from "./folder-row.js";
 import { Input } from "./input.js";
+import { NewFolderAction } from "./new-folder-action.js";
+import {
+	defaultNewFolderFormLabels,
+	NewFolderForm,
+} from "./new-folder-form.js";
 
-export interface FolderTreeNode {
-	/** Stable identity passed back to `onSelect`. */
-	id: string;
-	/**
-	 * What the row reads as. An appointed folder is labelled by its role, so
-	 * `Deleted Messages` shows as "Trash" while still nesting under its real
-	 * path — which is why the label is not derived from the path.
-	 */
-	label: string;
-	/** The provider path. Nesting, indentation and filtering all read this. */
-	path: string;
-	/**
-	 * Where the messages live now. A "you are here" marker: never a target, and
-	 * rendered as a marker rather than a disabled control.
-	 */
-	isCurrent?: boolean;
-}
+export type {
+	FolderTreeDisplayRow,
+	FolderTreeNode,
+	FolderTreeRow,
+} from "../lib/folder-tree.js";
 
 export interface FolderTreePickerLabels {
 	filterPlaceholder?: string;
@@ -86,6 +95,7 @@ export interface FolderTreePickerProps {
 }
 
 const defaultLabels: Required<FolderTreePickerLabels> = {
+	...defaultNewFolderFormLabels,
 	filterPlaceholder: "Filter folders…",
 	filterAriaLabel: "Filter folders",
 	treeAriaLabel: "Destination folders",
@@ -96,137 +106,11 @@ const defaultLabels: Required<FolderTreePickerLabels> = {
 	optionLabel: (label) => `Move to ${label}`,
 	newFolder: "New folder",
 	newSubfolder: (label) => `New folder inside ${label}`,
-	nameLabel: "Folder name",
-	namePlaceholder: "Hotels",
-	insideLabel: "Inside",
 	topLevel: "Top level",
-	create: "Create folder",
-	cancel: "Cancel",
 	nameRequired: "Give the folder a name.",
-	createPending: "Creating folder…",
 	createError: "Couldn't create that folder. Please try again.",
 };
 
-const ROW_BASE =
-	"flex min-h-11 min-w-0 flex-1 items-center gap-2 px-3 py-2.5 text-left text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset";
-
-const INDENT_STEP = 14;
-
-const folderParent = (path: string, delimiter: string): string => {
-	const cut = path.lastIndexOf(delimiter);
-	return cut === -1 ? "" : path.slice(0, cut);
-};
-
-const folderDepth = (path: string, delimiter: string): number =>
-	path.split(delimiter).length - 1;
-
-/**
- * Puts every child straight after its parent so the list reads as a tree, while
- * leaving the order of unrelated folders alone. A folder whose parent is absent
- * from the list renders as a root rather than disappearing.
- */
-const orderFolderNodes = (
-	folders: readonly FolderTreeNode[],
-	delimiter: string,
-): FolderTreeNode[] => {
-	const present = new Set(folders.map((folder) => folder.path));
-	const emitted = new Set<string>();
-	const out: FolderTreeNode[] = [];
-
-	const emit = (folder: FolderTreeNode) => {
-		if (emitted.has(folder.path)) return;
-		emitted.add(folder.path);
-		out.push(folder);
-		for (const candidate of folders) {
-			if (folderParent(candidate.path, delimiter) === folder.path) {
-				emit(candidate);
-			}
-		}
-	};
-
-	for (const folder of folders) {
-		const parent = folderParent(folder.path, delimiter);
-		if (parent && present.has(parent)) continue;
-		emit(folder);
-	}
-	return out;
-};
-
-const matchesQuery = (folder: FolderTreeNode, query: string): boolean =>
-	folder.label.toLowerCase().includes(query) ||
-	folder.path.toLowerCase().includes(query);
-
-export interface FolderTreeRow {
-	folder: FolderTreeNode;
-	depth: number;
-	/**
-	 * On screen only to keep a match below it in place. It reads as the branch
-	 * it is, not as an answer to what was typed.
-	 */
-	context: boolean;
-}
-
-const filterFolderTree = (
-	ordered: readonly FolderTreeNode[],
-	query: string,
-	delimiter: string,
-): FolderTreeRow[] => {
-	const row = (folder: FolderTreeNode, context: boolean): FolderTreeRow => ({
-		folder,
-		depth: folderDepth(folder.path, delimiter),
-		context,
-	});
-	if (!query) return ordered.map((folder) => row(folder, false));
-
-	const matched = new Set<string>();
-	for (const folder of ordered) {
-		if (matchesQuery(folder, query)) matched.add(folder.path);
-	}
-	const visible = new Set(matched);
-	for (const path of matched) {
-		let parent = folderParent(path, delimiter);
-		while (parent) {
-			visible.add(parent);
-			parent = folderParent(parent, delimiter);
-		}
-	}
-	return ordered
-		.filter((folder) => visible.has(folder.path))
-		.map((folder) => row(folder, !matched.has(folder.path)));
-};
-
-const isSelectable = (row: FolderTreeRow | undefined): boolean =>
-	row !== undefined && !row.folder.isCurrent && !row.context;
-
-const findFirstSelectable = (rows: readonly FolderTreeRow[]): number => {
-	for (let i = 0; i < rows.length; i += 1) {
-		if (isSelectable(rows[i])) return i;
-	}
-	return -1;
-};
-
-const findLastSelectable = (rows: readonly FolderTreeRow[]): number => {
-	for (let i = rows.length - 1; i >= 0; i -= 1) {
-		if (isSelectable(rows[i])) return i;
-	}
-	return -1;
-};
-
-const findNextSelectable = (
-	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 (isSelectable(rows[candidate])) return candidate;
-	}
-	return -1;
-};
-
 interface Draft {
 	/** The row the form was opened from; `null` is the top-level row. */
 	anchorId: string | null;
@@ -235,10 +119,10 @@ interface Draft {
 }
 
 /**
- * Browsable destination picker: the folders as a tree you look through and tap,
- * with a filter for narrowing a long list and folder creation in place. Data
- * stays app-shaped — the kit owns ordering, filtering, focus and the create
- * wait; the app owns labels, paths and the move itself.
+ * Browsable destination picker: the folders as a tree that starts at its top
+ * level, opens a folder where you tap it, and makes a new folder wherever you
+ * are looking. Data stays app-shaped — the kit owns ordering, filtering, focus
+ * and the create wait; the app owns labels, paths and the move itself.
  */
 export const FolderTreePicker = ({
 	folders,
@@ -251,33 +135,46 @@ export const FolderTreePicker = ({
 }: FolderTreePickerProps) => {
 	const text = { ...defaultLabels, ...labels };
 	const [query, setQuery] = useState("");
+	const [opened, setOpened] = useState<ReadonlySet<string>>(new Set());
 	const [draft, setDraft] = useState<Draft | null>(null);
 	const [draftName, setDraftName] = useState("");
 	const [draftError, setDraftError] = useState<string>();
 	const [creating, setCreating] = useState(false);
 	const [focusedIndex, setFocusedIndex] = useState(-1);
 
-	const nameFieldId = useId();
 	const rowRefs = useRef<Array<HTMLButtonElement | null>>([]);
-	const nameRef = useRef<HTMLInputElement>(null);
 	const roving = useRef(false);
 	const createAbort = useRef<AbortController | null>(null);
 	useEffect(() => () => createAbort.current?.abort(), []);
 
 	const trimmedQuery = query.trim().toLowerCase();
+	const ordered = useMemo(
+		() => orderFolderNodes(folders, delimiter),
+		[folders, delimiter],
+	);
+
+	const expanded = useMemo(() => {
+		const auto = queryExpandedPaths(ordered, trimmedQuery, delimiter);
+		if (auto.size === 0) return opened;
+		return new Set([...opened, ...auto]);
+	}, [ordered, opened, trimmedQuery, delimiter]);
+
 	const rows = useMemo(
 		() =>
-			filterFolderTree(
-				orderFolderNodes(folders, delimiter),
-				trimmedQuery,
-				delimiter,
-			),
-		[folders, trimmedQuery, delimiter],
+			trimmedQuery
+				? filterFolderTree(ordered, trimmedQuery, delimiter, expanded)
+				: collapseFolderTree(ordered, expanded, delimiter),
+		[ordered, trimmedQuery, delimiter, expanded],
+	);
+
+	const displayRows = useMemo(
+		() => (onCreateFolder ? withCreateRows(rows, delimiter) : undefined),
+		[rows, delimiter, onCreateFolder],
 	);
 
 	useEffect(() => {
 		setFocusedIndex((current) =>
-			isSelectable(rows[current]) ? current : findFirstSelectable(rows),
+			isFocusable(rows[current]) ? current : findFirstFocusable(rows),
 		);
 	}, [rows]);
 
@@ -288,6 +185,31 @@ export const FolderTreePicker = ({
 		rowRefs.current[focusedIndex]?.focus();
 	}, [focusedIndex]);
 
+	/**
+	 * One open branch: opening a folder closes every folder that is not an
+	 * ancestor of it, so the list never grows past what a phone screen holds.
+	 * Its ancestors stay open because otherwise it could not be on screen.
+	 */
+	const setExpanded = useCallback(
+		(path: string, open: boolean) => {
+			setOpened((current) => {
+				if (open) return new Set([...folderAncestors(path, delimiter), path]);
+				const next = new Set(current);
+				next.delete(path);
+				return next;
+			});
+		},
+		[delimiter],
+	);
+
+	const activateRow = useCallback(
+		(row: FolderTreeRow) => {
+			if (isSelectable(row)) onSelect(row.folder.id);
+			setExpanded(row.folder.path, !row.expanded);
+		},
+		[onSelect, setExpanded],
+	);
+
 	const closeDraft = useCallback(() => {
 		createAbort.current?.abort();
 		setDraft(null);
@@ -311,10 +233,6 @@ export const FolderTreePicker = ({
 		[text.topLevel],
 	);
 
-	useEffect(() => {
-		if (draft) nameRef.current?.focus();
-	}, [draft]);
-
 	const submitDraft = useCallback(() => {
 		if (!onCreateFolder || !draft || creating) return;
 		const name = draftName.trim();
@@ -327,11 +245,13 @@ export const FolderTreePicker = ({
 		createAbort.current?.abort();
 		const controller = new AbortController();
 		createAbort.current = controller;
-		onCreateFolder(name, draft.parentPath, controller.signal)
+		const parentPath = draft.parentPath;
+		onCreateFolder(name, parentPath, controller.signal)
 			.then((created) => {
 				setCreating(false);
 				setDraft(null);
 				setDraftName("");
+				if (parentPath) setExpanded(parentPath, true);
 				onSelect(created.id);
 			})
 			.catch((error: unknown) => {
@@ -347,6 +267,7 @@ export const FolderTreePicker = ({
 		creating,
 		draftName,
 		onSelect,
+		setExpanded,
 		text.nameRequired,
 		text.createError,
 	]);
@@ -358,21 +279,43 @@ export const FolderTreePicker = ({
 				roving.current = true;
 				setFocusedIndex(next);
 			};
+			const focused = rows[focusedIndex];
 			switch (event.key) {
 				case "ArrowDown":
-					return move(findNextSelectable(rows, focusedIndex, 1));
+					return move(findNextFocusable(rows, focusedIndex, 1));
 				case "ArrowUp":
-					return move(findNextSelectable(rows, focusedIndex, -1));
+					return move(findNextFocusable(rows, focusedIndex, -1));
 				case "Home":
-					return move(findFirstSelectable(rows));
+					return move(findFirstFocusable(rows));
 				case "End":
-					return move(findLastSelectable(rows));
+					return move(findLastFocusable(rows));
+				case "ArrowRight": {
+					if (!isFocusable(focused) || !focused) return;
+					event.preventDefault();
+					if (!focused.expanded) {
+						setExpanded(focused.folder.path, true);
+						return;
+					}
+					const next = focusedIndex + 1;
+					if (isFocusable(rows[next])) move(next);
+					return;
+				}
+				case "ArrowLeft": {
+					if (!isFocusable(focused) || !focused) return;
+					event.preventDefault();
+					if (focused.expanded) {
+						setExpanded(focused.folder.path, false);
+						return;
+					}
+					const parent = findParentRow(rows, focusedIndex, delimiter);
+					if (parent >= 0) move(parent);
+					return;
+				}
 				case "Enter":
 				case " ": {
-					const target = rows[focusedIndex];
-					if (!isSelectable(target) || !target) return;
+					if (!isFocusable(focused) || !focused) return;
 					event.preventDefault();
-					onSelect(target.folder.id);
+					activateRow(focused);
 					return;
 				}
 				case "Escape":
@@ -383,67 +326,57 @@ export const FolderTreePicker = ({
 					return;
 			}
 		},
-		[rows, focusedIndex, onSelect, onCancel],
+		[rows, focusedIndex, delimiter, activateRow, setExpanded, onCancel],
 	);
 
 	const draftForm = draft && (
-		<div className="space-y-3 border-y border-line bg-surface-sunken px-3 py-3">
-			<div>
-				<FieldLabel htmlFor={nameFieldId}>{text.nameLabel}</FieldLabel>
-				<Input
-					id={nameFieldId}
-					ref={nameRef}
-					value={draftName}
-					placeholder={text.namePlaceholder}
-					onChange={(event) => {
-						setDraftName(event.target.value);
-						setDraftError(undefined);
-					}}
-					onKeyDown={(event) => {
-						if (event.key === "Enter") {
-							event.preventDefault();
-							submitDraft();
-						}
-						if (event.key === "Escape") {
-							event.preventDefault();
-							closeDraft();
-						}
-					}}
-				/>
-			</div>
-			<p className="text-xs text-fg-muted">
-				{text.insideLabel}{" "}
-				<span className="font-medium text-fg">{draft.parentLabel}</span>
-			</p>
-			{draftError && (
-				<p className="text-xs text-danger" role="alert">
-					{draftError}
-				</p>
-			)}
-			<div className="flex items-center gap-2">
-				<Button
-					variant="ghost"
-					size="touch"
-					onClick={closeDraft}
-					className="w-auto shrink-0 px-3"
-				>
-					{text.cancel}
-				</Button>
-				<Button
-					variant="primary"
-					size="touch"
-					onClick={submitDraft}
-					disabled={creating}
-					className="w-auto flex-1 px-3"
-				>
-					{creating ? text.createPending : text.create}
-				</Button>
-			</div>
-		</div>
+		<NewFolderForm
+			parentLabel={draft.parentLabel}
+			name={draftName}
+			onNameChange={(value) => {
+				setDraftName(value);
+				setDraftError(undefined);
+			}}
+			onSubmit={submitDraft}
+			onCancel={closeDraft}
+			pending={creating}
+			error={draftError}
+			labels={text}
+		/>
 	);
 
+	const rowAriaLabel = (row: FolderTreeRow): string => {
+		if (row.context) return `${row.folder.label} ${text.contextSuffix}`;
+		if (isSelectable(row)) return text.optionLabel(row.folder.label);
+		return `${row.folder.label} ${text.currentSuffix}`;
+	};
+
+	const folderRow = (row: FolderTreeRow, index: number, separated: boolean) => {
+		const { folder, depth } = row;
+		const selectable = isSelectable(row);
+		return (
+			<FolderRow
+				ref={(node) => {
+					rowRefs.current[index] = node;
+				}}
+				label={folder.label}
+				depth={depth}
+				expanded={row.expanded}
+				context={row.context}
+				current={folder.isCurrent}
+				currentTag={text.currentTag}
+				selected={selectable && folder.id === selectedId}
+				separated={separated}
+				ariaLabel={rowAriaLabel(row)}
+				tabIndex={index === focusedIndex ? 0 : -1}
+				onActivate={() => activateRow(row)}
+				onFocus={() => setFocusedIndex(index)}
+			/>
+		);
+	};
+
 	return (
-		<div className="flex min-h-0 flex-col">
+		<div className="flex min-h-0 w-full min-w-0 flex-col">
 			<Input
 				variant="inline"
 				className="border-b border-line px-3 py-2"
@@ -459,9 +392,9 @@ export const FolderTreePicker = ({
 					}
 					if (event.key !== "ArrowDown") return;
 					event.preventDefault();
-					const first = isSelectable(rows[focusedIndex])
+					const first = isFocusable(rows[focusedIndex])
 						? focusedIndex
-						: findFirstSelectable(rows);
+						: findFirstFocusable(rows);
 					if (first < 0) return;
 					roving.current = true;
 					setFocusedIndex(first);
@@ -472,16 +405,17 @@ export const FolderTreePicker = ({
 			/>
 
 			{onCreateFolder && (
-				<div className="shrink-0">
-					<button
-						type="button"
-						onClick={() => openDraft(null)}
-						className="flex min-h-11 w-full items-center gap-2 px-3 py-2.5 text-left text-sm font-medium text-accent-2 hover:bg-surface-raised"
-					>
-						<FolderPlus className="size-4 shrink-0" aria-hidden="true" />
-						{text.newFolder}
-					</button>
-					{draft?.anchorId === null && draftForm}
+				<div className="shrink-0 border-b border-line" data-create-anchor="top">
+					{draft?.anchorId === null ? (
+						draftForm
+					) : (
+						<NewFolderAction
+							label={text.newFolder}
+							ariaLabel={text.newFolder}
+							prominence="prominent"
+							onOpen={() => openDraft(null)}
+						/>
+					)}
 				</div>
 			)}
 
@@ -491,100 +425,51 @@ export const FolderTreePicker = ({
 				</p>
 			) : (
 				// A flattened tree: `aria-level` carries the nesting the indentation
-				// shows. The row wrapper is presentational and the button itself is
-				// the treeitem — a role on a wrapper around a separately-interactive
+				// shows. The row wrapper is presentational and the row itself is the
+				// treeitem — a role on a wrapper around a separately-interactive
 				// button is invalid ARIA.
 				<div
 					role="tree"
 					aria-label={text.treeAriaLabel}
-					className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden"
+					className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden pb-24"
 					onKeyDown={handleTreeKeyDown}
 				>
-					{rows.map((row, index) => {
-						const { folder, depth } = row;
-						const selectable = isSelectable(row);
-						const indent = depth > 0 && (
-							<span
-								aria-hidden="true"
-								className="shrink-0"
-								style={{ width: depth * INDENT_STEP }}
-							/>
-						);
-						const icon = (
-							<Folder
-								className="size-4 shrink-0 text-fg-subtle"
-								aria-hidden="true"
-							/>
-						);
-						return (
-							<div key={folder.id} role="none">
-								<div className="flex items-center">
-									{selectable ? (
-										<button
-											ref={(node) => {
-												rowRefs.current[index] = node;
-											}}
-											type="button"
-											role="treeitem"
-											aria-level={depth + 1}
-											aria-selected={folder.id === selectedId}
-											aria-label={text.optionLabel(folder.label)}
-											tabIndex={index === focusedIndex ? 0 : -1}
-											onClick={() => onSelect(folder.id)}
-											onFocus={() => setFocusedIndex(index)}
-											className={cn(ROW_BASE, "hover:bg-surface-raised")}
-										>
-											{indent}
-											{icon}
-											<span className="min-w-0 flex-1 truncate">
-												{folder.label}
-											</span>
-											{folder.id === selectedId && (
-												<Check
-													className="size-4 shrink-0 text-accent"
-													aria-hidden="true"
-												/>
-											)}
-										</button>
+					{(
+						displayRows ??
+						rows.map(
+							(row, index): FolderTreeDisplayRow => ({
+								kind: "folder",
+								row,
+								index,
+							}),
+						)
+					).map((entry, position, all) => {
+						const separated = position < all.length - 1;
+						if (entry.kind === "create") {
+							return (
+								<div
+									key={`new:${entry.parent.id}`}
+									role="none"
+									data-create-anchor={entry.parent.id}
+								>
+									{draft?.anchorId === entry.parent.id ? (
+										draftForm
 									) : (
-										// biome-ignore lint/a11y/useFocusableInteractive: a marker row, not a destination — focus belongs to the selectable rows
-										<div
-											role="treeitem"
-											aria-level={depth + 1}
-											aria-selected={false}
-											aria-current={folder.isCurrent ? "true" : undefined}
-											aria-label={`${folder.label} ${
-												folder.isCurrent
-													? text.currentSuffix
-													: text.contextSuffix
-											}`}
-											className={cn(ROW_BASE, "opacity-60")}
-										>
-											{indent}
-											{icon}
-											<span className="min-w-0 flex-1 truncate">
-												{folder.label}
-											</span>
-											{folder.isCurrent && (
-												<span className="shrink-0 text-xs text-fg-muted">
-													{text.currentTag}
-												</span>
-											)}
-										</div>
-									)}
-									{onCreateFolder && (
-										<button
-											type="button"
-											onClick={() => openDraft(folder)}
-											aria-label={text.newSubfolder(folder.label)}
-											title={text.newSubfolder(folder.label)}
-											className="flex size-11 shrink-0 items-center justify-center text-fg-subtle hover:bg-surface-raised hover:text-fg"
-										>
-											<FolderPlus className="size-4" aria-hidden="true" />
-										</button>
+										<NewFolderAction
+											label={text.newFolder}
+											ariaLabel={text.newSubfolder(entry.parent.label)}
+											depth={entry.depth}
+											prominence="quiet"
+											separated={separated}
+											onOpen={() => openDraft(entry.parent)}
+										/>
 									)}
 								</div>
-								{draft?.anchorId === folder.id && draftForm}
+							);
+						}
+						return (
+							<div key={entry.row.folder.id} role="none">
+								{folderRow(entry.row, entry.index, separated)}
 							</div>
 						);
 					})}
@@ -593,18 +478,3 @@ export const FolderTreePicker = ({
 		</div>
 	);
 };
-
-/**
- * Pure ordering, filtering and roving-focus helpers, exposed for unit testing
- * without a DOM. Consumers should use {@link FolderTreePicker}.
- */
-export const folderTreePickerInternals = {
-	folderParent,
-	folderDepth,
-	orderFolderNodes,
-	filterFolderTree,
-	matchesQuery,
-	findFirstSelectable,
-	findLastSelectable,
-	findNextSelectable,
-};