Moku/Work
1
0
Fork 0
Code Issues Pull Requests Activity

Feat: add persisted folder rename

Browse Source
This commit is contained in:
MangoPig
2026-06-24 17:07:08 +01:00
parent 268093d223
commit a5f0c41cba
7 changed files with 701 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/src/components/shell/ProjectSelector/ProjectSelector.tsx
+152 -38
View File
@@ -57,6 +57,8 @@ type PersistedProjectFolderRecord = {
type ProjectFoldersResponse = {
data?: {
folders?: PersistedProjectFolderRecord[];
renamedFolder?: PersistedProjectFolderRecord;
previousFolderId?: string;
};
error?: string;
message?: string;
@@ -67,6 +69,11 @@ type PendingProjectFolderDraft = {
depth: number;
};
type PendingProjectFolderRename = {
folderId: string;
depth: number;
};
type ProjectDragTarget = NavTreeDropTarget;
type ProjectDragState = {
@@ -173,6 +180,11 @@ const ProjectFolderBranch = (props: {
onPendingFolderNameChange: (value: string) => void;
onSubmitPendingFolder: () => void;
onCancelPendingFolder: () => void;
pendingFolderRename: PendingProjectFolderRename | null;
pendingFolderRenameName: string;
onPendingFolderRenameChange: (value: string) => void;
onSubmitPendingFolderRename: () => void;
onCancelPendingFolderRename: () => void;
dragState: ProjectDragState | null;
isTreeClickSuppressed: () => boolean;
}): JSX.Element => (
@@ -197,51 +209,65 @@ const ProjectFolderBranch = (props: {
if (node.kind === "folder") {
const isCollapsed = (): boolean => props.isFolderCollapsed(node.id);
const isRenaming = (): boolean => props.pendingFolderRename?.folderId === node.id;
return (
<li>
<button
type="button"
classList={{
[styles.treeItem]: true,
[styles.treeItemFolder]: true,
[styles.treeItemDragging]: isDraggedNode(),
[styles.treeItemDropBefore]: dropIntent() === "before",
[styles.treeItemDropAfter]: dropIntent() === "after",
[styles.treeItemDropInside]: dropIntent() === "inside",
}}
style={{ "--tree-depth": String(props.depth) }}
aria-expanded={!isCollapsed()}
onClick={() => {
if (props.dragState || props.isTreeClickSuppressed()) {
return;
}
<Show
when={isRenaming()}
fallback={
<button
type="button"
classList={{
[styles.treeItem]: true,
[styles.treeItemFolder]: true,
[styles.treeItemDragging]: isDraggedNode(),
[styles.treeItemDropBefore]: dropIntent() === "before",
[styles.treeItemDropAfter]: dropIntent() === "after",
[styles.treeItemDropInside]: dropIntent() === "inside",
}}
style={{ "--tree-depth": String(props.depth) }}
aria-expanded={!isCollapsed()}
onClick={() => {
if (props.dragState || props.isTreeClickSuppressed()) {
return;
}
props.onToggleFolder(node.id);
}}
onContextMenu={(event): void => props.onOpenFolderMenu(event, node)}
onPointerDown={(event): void => props.onNodePointerDown(event, node.id)}
onPointerMove={(event): void =>
props.onNodePointerMove(event, props.parentId, indexAccessor(), node)
}
onPointerEnter={(event): void =>
props.onNodePointerMove(event, props.parentId, indexAccessor(), node)
props.onToggleFolder(node.id);
}}
onContextMenu={(event): void => props.onOpenFolderMenu(event, node)}
onPointerDown={(event): void => props.onNodePointerDown(event, node.id)}
onPointerMove={(event): void =>
props.onNodePointerMove(event, props.parentId, indexAccessor(), node)
}
onPointerEnter={(event): void =>
props.onNodePointerMove(event, props.parentId, indexAccessor(), node)
}
>
<ChevronRight
classList={{
[styles.folderChevron]: true,
[styles.folderChevronOpen]: !isCollapsed(),
}}
size={16}
strokeWidth={2}
/>
<Folder 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>
}
>
<ChevronRight
classList={{
[styles.folderChevron]: true,
[styles.folderChevronOpen]: !isCollapsed(),
}}
size={16}
strokeWidth={2}
<ProjectFolderDraftRow
depth={props.pendingFolderRename?.depth ?? props.depth}
value={props.pendingFolderRenameName}
onInput={props.onPendingFolderRenameChange}
onSubmit={props.onSubmitPendingFolderRename}
onCancel={props.onCancelPendingFolderRename}
/>
<Folder 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>
</Show>
<Show when={!isCollapsed() && ((node.children?.length ?? 0) > 0 || props.pendingFolderDraft?.parentId === node.id)}>
<ProjectFolderBranch
@@ -261,6 +287,11 @@ const ProjectFolderBranch = (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}
dragState={props.dragState}
isTreeClickSuppressed={props.isTreeClickSuppressed}
/>
@@ -331,6 +362,8 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
);
const [pendingFolderDraft, setPendingFolderDraft] = createSignal<PendingProjectFolderDraft | null>(null);
const [pendingFolderName, setPendingFolderName] = createSignal("");
const [pendingFolderRename, setPendingFolderRename] = createSignal<PendingProjectFolderRename | null>(null);
const [pendingFolderRenameName, setPendingFolderRenameName] = createSignal("");
const [dragState, setDragState] = createSignal<ProjectDragState | null>(null);
const [suppressNextTreeClick, setSuppressNextTreeClick] = createSignal(false);
let rootRef: HTMLDivElement | undefined;
@@ -382,6 +415,8 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
setCollapsedFolderIds([]);
setPendingFolderDraft(null);
setPendingFolderName("");
setPendingFolderRename(null);
setPendingFolderRenameName("");
setDragState(null);
};
@@ -607,10 +642,19 @@ export const ProjectSelector = (props: ProjectSelectorProps): 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();
@@ -688,11 +732,71 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
}
};
const submitPendingFolderRename = async (): Promise<void> => {
const draft = pendingFolderRename();
const name = pendingFolderRenameName().trim();
const projectId = selectedProject().id;
if (!draft) {
return;
}
if (!name) {
setPendingFolderRename(null);
setPendingFolderRenameName("");
return;
}
if (!isUuidString(projectId)) {
cancelPendingFolderRename();
return;
}
try {
const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/folders`, {
method: "PATCH",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
folderId: draft.folderId,
name,
}),
});
const body = (await response.json()) as ProjectFoldersResponse;
if (!response.ok) {
throw new Error(body.message || "Failed to rename project folder.");
}
setPersistedFolders(readPersistedFolders(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 handleContextActionSelect = (action: { id: string; label: string }, target: ProjectMenuTarget): void => {
switch (action.id) {
case "new-folder":
@@ -715,6 +819,11 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
void deletePersistedFolder(target.id);
}
return;
case "rename-folder":
if (target.kind === "folder") {
beginFolderRename(target.id, target.label, findTreeNodeDepth(projectTreeNodes(), target.id, projectTreeAdapter) ?? 0);
}
return;
default:
return;
}
@@ -887,6 +996,11 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
onPendingFolderNameChange={setPendingFolderName}
onSubmitPendingFolder={submitPendingFolder}
onCancelPendingFolder={cancelPendingFolder}
pendingFolderRename={pendingFolderRename()}
pendingFolderRenameName={pendingFolderRenameName()}
onPendingFolderRenameChange={setPendingFolderRenameName}
onSubmitPendingFolderRename={submitPendingFolderRename}
onCancelPendingFolderRename={cancelPendingFolderRename}
dragState={dragState()}
isTreeClickSuppressed={suppressNextTreeClick}
/>
Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx
+186 -72
View File
@@ -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>
Frontend/src/components/shell/data/shell.data.ts
+1
View File
@@ -599,6 +599,7 @@ const getProjectCreateActions = (): readonly ProjectContextMenuAction[] =>
const getProjectFolderDangerActions = (): readonly ProjectContextMenuAction[] =>
[
{ id: "rename-folder", label: "Rename", shortcut: { modifiers: ["meta"], key: "r" } },
{ id: "delete-folder", label: "Delete", shortcut: { modifiers: ["meta"], key: "delete" }, tone: "danger" },
] as const;