@remit/web-client 0.0.70 → 0.0.72

package/src/lib/new-folder.ts

@@ -0,0 +1,58 @@
+export interface FolderTarget {
+	fullPath: string;
+	hierarchyDelimiter: string;
+}
+
+/**
+ * The full path of a new folder: the leaf name on its own for a root folder, or
+ * the parent's path joined to the name by the parent's hierarchy delimiter.
+ */
+export function composeFolderPath(name: string, parent?: FolderTarget): string {
+	const trimmed = name.trim();
+	if (!parent) return trimmed;
+	return `${parent.fullPath}${parent.hierarchyDelimiter}${trimmed}`;
+}
+
+/**
+ * IMAP treats the INBOX root case-insensitively; every other path segment is
+ * exact. Canonicalizing only a leading `inbox` segment lets the collision check
+ * match `inbox/x` against `INBOX/x` without folding case anywhere else.
+ */
+const canonicalizePath = (path: string, delimiter: string): string => {
+	const parts = path.split(delimiter);
+	if (parts[0]?.toLowerCase() === "inbox") parts[0] = "INBOX";
+	return parts.join(delimiter);
+};
+
+/**
+ * Why the folder can't be created, or `undefined` when the name is valid. A
+ * name must be non-empty, must not contain the hierarchy delimiter (nesting is
+ * expressed by the parent select, not by typing a path), and must not collide
+ * with an existing folder — INBOX compared case-insensitively, everything else
+ * exactly.
+ */
+export function validateNewFolderName({
+	name,
+	delimiter,
+	parent,
+	existingPaths,
+}: {
+	name: string;
+	delimiter: string;
+	parent?: FolderTarget;
+	existingPaths: readonly string[];
+}): string | undefined {
+	const trimmed = name.trim();
+	if (trimmed === "") return "Enter a folder name.";
+	if (trimmed.includes(delimiter))
+		return `A folder name can't contain "${delimiter}".`;
+	const candidate = canonicalizePath(
+		composeFolderPath(trimmed, parent),
+		delimiter,
+	);
+	const collides = existingPaths.some(
+		(path) => canonicalizePath(path, delimiter) === candidate,
+	);
+	if (collides) return "A folder with that name already exists.";
+	return undefined;
+}

package/src/routes/settings/folders.tsx

@@ -6,22 +6,38 @@ import {
 	mailboxOperationsListMailboxesOptions,
 	mailboxOperationsListMailboxesQueryKey,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
+import type {
+	RemitImapAccountResponse,
+	RemitImapMailboxResponse,
+} from "@remit/api-http-client/types.gen.ts";
 import {
 	Banner,
+	Button,
 	type CandidateFolder,
 	type FolderRole,
+	Input,
 	RoleAppointmentList,
+	Select,
 	SettingsShell,
 } from "@remit/ui";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { Trash2 } from "lucide-react";
 import { useState } from "react";
+import { DeleteFolderDialog } from "@/components/settings/DeleteFolderDialog";
 import { ErrorState } from "@/components/ui/ErrorState";
+import { useCreateMailbox } from "@/hooks/useCreateMailbox";
+import { guardFolderDeletion } from "@/lib/delete-folder";
 import {
 	CANONICAL_TO_NAV_ROLE,
+	getMailboxDisplayName,
 	NAV_ROLE_TO_CANONICAL,
 } from "@/lib/folder-roles";
+import {
+	composeFolderPath,
+	type FolderTarget,
+	validateNewFolderName,
+} from "@/lib/new-folder";
 import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
 
 export const Route = createFileRoute("/settings/folders")({
@@ -48,6 +64,121 @@ const foldersHelp = (
 	</div>
 );
 
+/**
+ * Create a folder for one account. A name, an optional parent to nest under,
+ * and a create button. The new folder is queued on the server with a pending
+ * sync and appears in the list below once it refetches.
+ */
+function NewFolder({
+	accountId,
+	mailboxes,
+}: {
+	accountId: string;
+	mailboxes: RemitImapMailboxResponse[];
+}) {
+	const { mutation } = useCreateMailbox(accountId);
+	const [name, setName] = useState("");
+	const [parentId, setParentId] = useState("");
+	const [validationError, setValidationError] = useState<string>();
+
+	const accountDelimiter = mailboxes[0]?.hierarchyDelimiter ?? "/";
+	const parentMailbox = mailboxes.find((box) => box.mailboxId === parentId);
+	const parent: FolderTarget | undefined = parentMailbox
+		? {
+				fullPath: parentMailbox.fullPath,
+				hierarchyDelimiter: parentMailbox.hierarchyDelimiter,
+			}
+		: undefined;
+	const delimiter = parent?.hierarchyDelimiter ?? accountDelimiter;
+
+	const handleCreate = () => {
+		const problem = validateNewFolderName({
+			name,
+			delimiter,
+			parent,
+			existingPaths: mailboxes.map((box) => box.fullPath),
+		});
+		if (problem) {
+			setValidationError(problem);
+			return;
+		}
+		setValidationError(undefined);
+		mutation.mutate(
+			{
+				path: { accountId },
+				body: {
+					fullPath: composeFolderPath(name, parent),
+					namespaceType: "personal",
+				},
+			},
+			{
+				onSuccess: () => {
+					setName("");
+					setParentId("");
+				},
+			},
+		);
+	};
+
+	return (
+		<div className="space-y-2 rounded-sm border border-line bg-surface p-3">
+			<p className="text-sm font-medium text-fg">New folder</p>
+			<div className="flex flex-col gap-2 sm:flex-row sm:items-end">
+				<div className="flex-1 space-y-1">
+					<span className="text-xs text-fg-muted">Name</span>
+					<Input
+						value={name}
+						onChange={(event) => {
+							setName(event.target.value);
+							if (validationError) setValidationError(undefined);
+						}}
+						placeholder="e.g. Receipts"
+						aria-label="Folder name"
+						onKeyDown={(event) => {
+							if (event.key === "Enter") {
+								event.preventDefault();
+								handleCreate();
+							}
+						}}
+					/>
+				</div>
+				<div className="flex-1 space-y-1">
+					<span className="text-xs text-fg-muted">Inside (optional)</span>
+					<Select
+						value={parentId}
+						onChange={(event) => setParentId(event.target.value)}
+						aria-label="Parent folder"
+					>
+						<option value="">No parent — top level</option>
+						{mailboxes.map((box) => (
+							<option key={box.mailboxId} value={box.mailboxId}>
+								{box.fullPath}
+							</option>
+						))}
+					</Select>
+				</div>
+				<Button
+					variant="primary"
+					onClick={handleCreate}
+					disabled={mutation.isPending || name.trim() === ""}
+				>
+					{mutation.isPending ? "Creating…" : "Create folder"}
+				</Button>
+			</div>
+			{validationError && (
+				<p className="text-xs text-danger" role="alert">
+					{validationError}
+				</p>
+			)}
+			{mutation.isError && (
+				<Banner tone="danger" variant="soft">
+					Couldn't create that folder. Please try again.
+				</Banner>
+			)}
+		</div>
+	);
+}
+
 /** One account's folder roles, fed to the kit list. Owns its own queries + mutations. */
 function AccountFolderRoles({
 	account,
@@ -81,6 +212,8 @@ function AccountFolderRoles({
 		},
 	});
 
+	const [deletingMailboxId, setDeletingMailboxId] = useState<string>();
+
 	const handleAppoint = (role: FolderRole, mailboxId: string | null) => {
 		appointMutation.mutate({
 			path: { accountId, role: NAV_ROLE_TO_CANONICAL[role] },
@@ -154,6 +287,55 @@ function AccountFolderRoles({
 				onAppoint={handleAppoint}
 				onRename={handleRename}
 			/>
+			<NewFolder accountId={accountId} mailboxes={data.items} />
+			<ul className="space-y-1" aria-label={`All folders for ${account.email}`}>
+				{data.items.map((mailbox) => {
+					const guard = guardFolderDeletion(
+						mailbox,
+						data.items,
+						account.folderAppointments,
+					);
+					const name = getMailboxDisplayName(mailbox.fullPath);
+					return (
+						<li
+							key={mailbox.mailboxId}
+							className="flex items-center gap-2 rounded-sm px-2 py-1 text-sm text-fg"
+						>
+							<span className="truncate">{name}</span>
+							<span className="ml-auto shrink-0 text-xs text-fg-muted">
+								{mailbox.fullPath}
+							</span>
+							<Button
+								variant="ghost"
+								size="sm"
+								icon={<Trash2 className="size-3.5" />}
+								aria-label={`Delete ${name}`}
+								disabled={!guard.deletable}
+								title={guard.deletable ? undefined : guard.message}
+								onClick={() => setDeletingMailboxId(mailbox.mailboxId)}
+								className={guard.deletable ? undefined : "opacity-40"}
+							/>
+						</li>
+					);
+				})}
+			</ul>
+			{deletingMailboxId &&
+				(() => {
+					const folder = data.items.find(
+						(box) => box.mailboxId === deletingMailboxId,
+					);
+					if (!folder) return null;
+					return (
+						<DeleteFolderDialog
+							open
+							accountId={accountId}
+							folder={folder}
+							mailboxes={data.items}
+							appointments={account.folderAppointments}
+							onClose={() => setDeletingMailboxId(undefined)}
+						/>
+					);
+				})()}
 		</div>
 	);
 }