Feat: add persisted folder rename

2026-06-24 17:07:08 +01:00
parent 268093d223
commit a5f0c41cba
7 changed files with 701 additions and 110 deletions
@@ -58,11 +58,18 @@ type PersistedWorkspaceFolderRecord = {
 type WorkspaceFoldersResponse = {
 	data?: {
 		folders?: PersistedWorkspaceFolderRecord[];
+		renamedFolder?: PersistedWorkspaceFolderRecord;
+		previousFolderId?: string;
 	};
 	error?: string;
 	message?: string;
 };

+type PendingWorkspaceFolderRename = {
+	folderId: string;
+	depth: number;
+};
+
 const LONG_PRESS_MS = 320;

 const getWorkspaceTreeNodeId = (node: WorkspaceTreeNode): string => node.id;
@@ -194,6 +201,11 @@ const WorkspaceTreeBranch = (props: {
 	onPendingFolderNameChange: (value: string) => void;
 	onSubmitPendingFolder: () => void;
 	onCancelPendingFolder: () => void;
+	pendingFolderRename: PendingWorkspaceFolderRename | null;
+	pendingFolderRenameName: string;
+	onPendingFolderRenameChange: (value: string) => void;
+	onSubmitPendingFolderRename: () => void;
+	onCancelPendingFolderRename: () => void;
 	onOpenContextMenu: (event: MouseEvent, target: WorkspaceContextMenuTarget) => void;
 	onOpenContextMenuFromKeyboard: (element: HTMLElement, target: WorkspaceContextMenuTarget) => void;
 	onNodePointerDown: (event: PointerEvent, nodeId: string) => void;
@@ -216,6 +228,7 @@ const WorkspaceTreeBranch = (props: {
 					const Icon = getWorkspaceNodeIcon(node);
 					const target = createWorkspaceTreeTarget(node);
 					const isCollapsed = (): boolean => (node.kind === "folder" ? props.isFolderCollapsed(node.id) : false);
+					const isRenaming = (): boolean => props.pendingFolderRename?.folderId === node.id;
 					const isDraggedNode = (): boolean => props.dragState?.draggedNodeId === node.id;
 					const dropIntent = (): WorkspaceDragTarget["intent"] | null => {
 						if (props.dragState?.dropTarget?.targetNodeId !== node.id) {
@@ -227,73 +240,86 @@ const WorkspaceTreeBranch = (props: {

 					return (
 						<li>
-							<button
-								type="button"
-								classList={{
-									[styles.treeItem]: true,
-									[styles.treeItemActive]: !!node.active,
-									[styles.treeItemFolder]: node.kind === "folder",
-									[styles.treeItemDragging]: isDraggedNode(),
-									[styles.treeItemDropBefore]: dropIntent() === "before",
-									[styles.treeItemDropAfter]: dropIntent() === "after",
-									[styles.treeItemDropInside]: dropIntent() === "inside",
-								}}
-								style={{ "--tree-depth": String(depth()) }}
-								aria-expanded={node.kind === "folder" ? !isCollapsed() : undefined}
-								aria-current={node.active ? "page" : undefined}
-								aria-label={node.label}
-								title={node.label}
-								data-slot="workspace-tree-item"
-								data-kind={node.kind}
-								data-item-type={node.kind === "item" ? node.itemType : undefined}
-								data-active={node.active ? "true" : "false"}
-								onClick={(): void => {
-									if (props.dragState || props.isTreeClickSuppressed()) {
-										return;
-									}
-
-									if (node.kind !== "folder") {
-										return;
-									}
-
-									props.onToggleFolder(node.id);
-								}}
-								onContextMenu={(event): void => {
-									event.stopPropagation();
-									props.onOpenContextMenu(event, target);
-								}}
-								onPointerDown={(event): void => props.onNodePointerDown(event, node.id)}
-								onPointerMove={(event): void =>
-									props.onNodePointerMove(event, parentId(), indexAccessor(), node)
-								}
-								onPointerEnter={(event): void =>
-									props.onNodePointerMove(event, parentId(), indexAccessor(), node)
-								}
-								onKeyDown={(event): void => {
-									if (!isContextMenuKeyboardTrigger(event)) {
-										return;
-									}
-
-									event.preventDefault();
-									props.onOpenContextMenuFromKeyboard(event.currentTarget, target);
-								}}
-							>
-								<Show when={node.kind === "folder"}>
-									<ChevronRight
+							<Show
+								when={node.kind === "folder" && isRenaming()}
+								fallback={
+									<button
+										type="button"
 										classList={{
-											[styles.folderChevron]: true,
-											[styles.folderChevronOpen]: !isCollapsed(),
+											[styles.treeItem]: true,
+											[styles.treeItemActive]: !!node.active,
+											[styles.treeItemFolder]: node.kind === "folder",
+											[styles.treeItemDragging]: isDraggedNode(),
+											[styles.treeItemDropBefore]: dropIntent() === "before",
+											[styles.treeItemDropAfter]: dropIntent() === "after",
+											[styles.treeItemDropInside]: dropIntent() === "inside",
 										}}
-										size={16}
-										strokeWidth={2}
-									/>
-								</Show>
-								<Icon class={styles.icon} size={18} strokeWidth={2} />
-								<span class={styles.label}>{node.label}</span>
-								<Show when={node.meta}>
-									<span class={styles.itemMeta}>{node.meta}</span>
-								</Show>
-							</button>
+										style={{ "--tree-depth": String(depth()) }}
+										aria-expanded={node.kind === "folder" ? !isCollapsed() : undefined}
+										aria-current={node.active ? "page" : undefined}
+										aria-label={node.label}
+										title={node.label}
+										data-slot="workspace-tree-item"
+										data-kind={node.kind}
+										data-item-type={node.kind === "item" ? node.itemType : undefined}
+										data-active={node.active ? "true" : "false"}
+										onClick={(): void => {
+											if (props.dragState || props.isTreeClickSuppressed()) {
+												return;
+											}
+
+											if (node.kind !== "folder") {
+												return;
+											}
+
+											props.onToggleFolder(node.id);
+										}}
+										onContextMenu={(event): void => {
+											event.stopPropagation();
+											props.onOpenContextMenu(event, target);
+										}}
+										onPointerDown={(event): void => props.onNodePointerDown(event, node.id)}
+										onPointerMove={(event): void =>
+											props.onNodePointerMove(event, parentId(), indexAccessor(), node)
+										}
+										onPointerEnter={(event): void =>
+											props.onNodePointerMove(event, parentId(), indexAccessor(), node)
+										}
+										onKeyDown={(event): void => {
+											if (!isContextMenuKeyboardTrigger(event)) {
+												return;
+											}
+
+											event.preventDefault();
+											props.onOpenContextMenuFromKeyboard(event.currentTarget, target);
+										}}
+									>
+										<Show when={node.kind === "folder"}>
+											<ChevronRight
+												classList={{
+													[styles.folderChevron]: true,
+													[styles.folderChevronOpen]: !isCollapsed(),
+												}}
+												size={16}
+												strokeWidth={2}
+											/>
+										</Show>
+										<Icon class={styles.icon} size={18} strokeWidth={2} />
+										<span class={styles.label}>{node.label}</span>
+										<Show when={node.meta}>
+											<span class={styles.itemMeta}>{node.meta}</span>
+										</Show>
+									</button>
+								}
+							>
+								<FolderDraftRow
+									depth={props.pendingFolderRename?.depth ?? depth()}
+									value={props.pendingFolderRenameName}
+									onInput={props.onPendingFolderRenameChange}
+									onSubmit={props.onSubmitPendingFolderRename}
+									onCancel={props.onCancelPendingFolderRename}
+								/>
+							</Show>

 							<Show when={node.kind === "folder" && !isCollapsed() && (((node.children?.length ?? 0) > 0) || props.pendingFolderDraft?.parentId === node.id)}>
 								<WorkspaceTreeBranch
@@ -307,6 +333,11 @@ const WorkspaceTreeBranch = (props: {
 									onPendingFolderNameChange={props.onPendingFolderNameChange}
 									onSubmitPendingFolder={props.onSubmitPendingFolder}
 									onCancelPendingFolder={props.onCancelPendingFolder}
+									pendingFolderRename={props.pendingFolderRename}
+									pendingFolderRenameName={props.pendingFolderRenameName}
+									onPendingFolderRenameChange={props.onPendingFolderRenameChange}
+									onSubmitPendingFolderRename={props.onSubmitPendingFolderRename}
+									onCancelPendingFolderRename={props.onCancelPendingFolderRename}
 									onOpenContextMenu={props.onOpenContextMenu}
 									onOpenContextMenuFromKeyboard={props.onOpenContextMenuFromKeyboard}
 									onNodePointerDown={props.onNodePointerDown}
@@ -342,6 +373,8 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 	const [collapsedFolderIds, setCollapsedFolderIds] = createSignal<readonly string[]>([]);
 	const [pendingFolderDraft, setPendingFolderDraft] = createSignal<PendingWorkspaceFolderDraft | null>(null);
 	const [pendingFolderName, setPendingFolderName] = createSignal("");
+	const [pendingFolderRename, setPendingFolderRename] = createSignal<PendingWorkspaceFolderRename | null>(null);
+	const [pendingFolderRenameName, setPendingFolderRenameName] = createSignal("");
 	const [dragState, setDragState] = createSignal<WorkspaceDragState | null>(null);
 	const [suppressNextTreeClick, setSuppressNextTreeClick] = createSignal(false);
 	let lastSelectedProjectId: string | null = null;
@@ -383,6 +416,8 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 		setCollapsedFolderIds([]);
 		setPendingFolderDraft(null);
 		setPendingFolderName("");
+		setPendingFolderRename(null);
+		setPendingFolderRenameName("");
 		setDragState(null);
 	};
 	const syncWorkspaceTree = (): void => {
@@ -530,10 +565,19 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 			setCollapsedFolderIds((current) => current.filter((id) => id !== parentId));
 		}

+		setPendingFolderRename(null);
+		setPendingFolderRenameName("");
 		setPendingFolderName("");
 		setPendingFolderDraft({ parentId, depth });
 	};

+	const beginFolderRename = (folderId: string, label: string, depth: number): void => {
+		setPendingFolderDraft(null);
+		setPendingFolderName("");
+		setPendingFolderRename({ folderId, depth });
+		setPendingFolderRenameName(label);
+	};
+
 	const submitPendingFolder = async (): Promise<void> => {
 		const name = pendingFolderName().trim();
 		const draft = pendingFolderDraft();
@@ -611,11 +655,71 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 		}
 	};

+	const submitPendingFolderRename = async (): Promise<void> => {
+		const draft = pendingFolderRename();
+		const name = pendingFolderRenameName().trim();
+		const projectId = activeProject()?.id ?? "";
+
+		if (!draft) {
+			return;
+		}
+
+		if (!name) {
+			setPendingFolderRename(null);
+			setPendingFolderRenameName("");
+			return;
+		}
+
+		if (!projectId || !isUuidString(projectId)) {
+			cancelPendingFolderRename();
+			return;
+		}
+
+		try {
+			const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/tree/folders`, {
+				method: "PATCH",
+				headers: {
+					Accept: "application/json",
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					folderId: draft.folderId,
+					name,
+				}),
+			});
+
+			const body = (await response.json()) as WorkspaceFoldersResponse;
+
+			if (!response.ok) {
+				throw new Error(body.message || "Failed to rename project tree folder.");
+			}
+
+			setPersistedFolders(readPersistedWorkspaceFolders(body));
+			setPendingFolderRename(null);
+			setPendingFolderRenameName("");
+
+			const previousFolderId = body.data?.previousFolderId;
+			const renamedFolderId = body.data?.renamedFolder?.id;
+			if (previousFolderId && renamedFolderId && previousFolderId !== renamedFolderId) {
+				setCollapsedFolderIds((current) =>
+					current.map((id) => (id === previousFolderId ? renamedFolderId : id)),
+				);
+			}
+		} catch (error) {
+			console.error(error);
+		}
+	};
+
 	const cancelPendingFolder = (): void => {
 		setPendingFolderDraft(null);
 		setPendingFolderName("");
 	};

+	const cancelPendingFolderRename = (): void => {
+		setPendingFolderRename(null);
+		setPendingFolderRenameName("");
+	};
+
 	const handleHeaderActionClick = (actionId: string): void => {
 		switch (actionId) {
 			case "toggle-workspace-folders":
@@ -689,6 +793,11 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 					void deletePersistedFolder(target.id);
 				}
 				return;
+			case "rename-folder":
+				if (target.kind === "folder") {
+					beginFolderRename(target.id, target.label, findTreeNodeDepth(workspaceTreeNodes(), target.id, workspaceTreeAdapter) ?? 0);
+				}
+				return;
 			default:
 				return;
 		}
@@ -815,13 +924,18 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 								onPendingFolderNameChange={setPendingFolderName}
 								onSubmitPendingFolder={submitPendingFolder}
 								onCancelPendingFolder={cancelPendingFolder}
-									onOpenContextMenu={contextMenu.openMenu}
-									onOpenContextMenuFromKeyboard={contextMenu.openMenuFromElement}
-									onNodePointerDown={handleNodePointerDown}
-									onNodePointerMove={handleNodePointerMove}
-									dragState={dragState()}
-									isTreeClickSuppressed={suppressNextTreeClick}
-								/>
+								pendingFolderRename={pendingFolderRename()}
+								pendingFolderRenameName={pendingFolderRenameName()}
+								onPendingFolderRenameChange={setPendingFolderRenameName}
+								onSubmitPendingFolderRename={submitPendingFolderRename}
+								onCancelPendingFolderRename={cancelPendingFolderRename}
+								onOpenContextMenu={contextMenu.openMenu}
+								onOpenContextMenuFromKeyboard={contextMenu.openMenuFromElement}
+								onNodePointerDown={handleNodePointerDown}
+								onNodePointerMove={handleNodePointerMove}
+								dragState={dragState()}
+								isTreeClickSuppressed={suppressNextTreeClick}
+							/>
 						</div>
 					</div>
 				</div>