Fix: add persisted project folder deletion

Backend/internal/bootstrap/service.go

@@ -192,12 +192,23 @@ type CreateProjectFolderInput struct {
 	Name           string
 }
 
+type DeleteProjectFolderInput struct {
+	ProjectID string
+	FolderID  string
+}
+
 type CreateProjectFolderResult struct {
 	ProjectID     string                         `json:"projectId"`
 	CreatedFolder ProjectHierarchyFolderRecord   `json:"createdFolder"`
 	Folders       []ProjectHierarchyFolderRecord `json:"folders"`
 }
 
+type DeleteProjectFolderResult struct {
+	ProjectID       string                         `json:"projectId"`
+	DeletedFolderID string                         `json:"deletedFolderId"`
+	Folders         []ProjectHierarchyFolderRecord `json:"folders"`
+}
+
 type projectHierarchyFolderRow struct {
 	Path       string
 	ParentPath string
@@ -898,6 +909,14 @@ func (service *Service) CreateProjectTreeFolder(ctx context.Context, input Creat
 	return service.createProjectHierarchyFolder(ctx, input, projectTreeRootPath, service.createProjectTreeFolderOnDisk)
 }
 
+func (service *Service) DeleteProjectFolder(ctx context.Context, input DeleteProjectFolderInput) (DeleteProjectFolderResult, error) {
+	return service.deleteProjectHierarchyFolder(ctx, input, projectHierarchyRootPath, service.deleteProjectHierarchyFolderOnDisk)
+}
+
+func (service *Service) DeleteProjectTreeFolder(ctx context.Context, input DeleteProjectFolderInput) (DeleteProjectFolderResult, error) {
+	return service.deleteProjectHierarchyFolder(ctx, input, projectTreeRootPath, service.deleteProjectTreeFolderOnDisk)
+}
+
 func (service *Service) createProjectHierarchyFolder(
 	ctx context.Context,
 	input CreateProjectFolderInput,
@@ -935,6 +954,42 @@ func (service *Service) createProjectHierarchyFolder(
 	}, nil
 }
 
+func (service *Service) deleteProjectHierarchyFolder(
+	ctx context.Context,
+	input DeleteProjectFolderInput,
+	rootPath func(projectSlug string) string,
+	deleteOnDisk func(projectSlug, folderID string) (string, error),
+) (DeleteProjectFolderResult, error) {
+	project, err := service.loadProjectByID(ctx, strings.TrimSpace(input.ProjectID))
+	if err != nil {
+		return DeleteProjectFolderResult{}, err
+	}
+
+	deletedFolderID, err := deleteOnDisk(project.Slug, input.FolderID)
+	if err != nil {
+		return DeleteProjectFolderResult{}, err
+	}
+
+	if err := posixproj.NewProjector(service.db, service.posixRoot).Rebuild(ctx); err != nil {
+		return DeleteProjectFolderResult{}, fmt.Errorf("rebuild POSIX projection: %w", err)
+	}
+
+	folders, err := service.getProjectHierarchyFoldersByRootPath(ctx, project.ID, rootPath)
+	if err != nil {
+		return DeleteProjectFolderResult{}, err
+	}
+
+	if _, found := findProjectHierarchyFolder(folders, deletedFolderID); found {
+		return DeleteProjectFolderResult{}, fmt.Errorf("deleted project folder still present in projection")
+	}
+
+	return DeleteProjectFolderResult{
+		ProjectID:       project.ID,
+		DeletedFolderID: deletedFolderID,
+		Folders:         folders,
+	}, nil
+}
+
 func (service *Service) listWorkspaces(ctx context.Context) ([]WorkspaceRecord, error) {
 	rows, err := service.db.Pool.Query(ctx, `
 		SELECT id::text, organization_id::text, name, slug, kind::text, department_id::text, team_id::text, project_id::text
@@ -1218,6 +1273,14 @@ func (service *Service) createProjectTreeFolderOnDisk(projectSlug, parentFolderI
 	return service.createProjectFolderOnDisk(projectSlug, parentFolderID, name, projectTreeRootPath)
 }
 
+func (service *Service) deleteProjectHierarchyFolderOnDisk(projectSlug, folderID string) (string, error) {
+	return service.deleteProjectFolderOnDisk(projectSlug, folderID, projectHierarchyRootPath)
+}
+
+func (service *Service) deleteProjectTreeFolderOnDisk(projectSlug, folderID string) (string, error) {
+	return service.deleteProjectFolderOnDisk(projectSlug, folderID, projectTreeRootPath)
+}
+
 func (service *Service) createProjectFolderOnDisk(
 	projectSlug, parentFolderID, name string,
 	rootPathBuilder func(projectSlug string) string,
@@ -1294,6 +1357,45 @@ func (service *Service) createProjectFolderOnDisk(
 	return filepath.ToSlash(filepath.Join(containerProjectionPath, folderName)), folderSlug, nil
 }
 
+func (service *Service) deleteProjectFolderOnDisk(
+	projectSlug, folderID string,
+	rootPathBuilder func(projectSlug string) string,
+) (string, error) {
+	posixRoot := strings.TrimSpace(service.posixRoot)
+	if posixRoot == "" {
+		return "", fmt.Errorf("POSIX root is not configured")
+	}
+
+	trimmedFolderID := strings.TrimSpace(folderID)
+	if trimmedFolderID == "" {
+		return "", ErrProjectFolderNotFound
+	}
+
+	rootProjectionPath := rootPathBuilder(projectSlug)
+	folderProjectionPath := strings.TrimPrefix(filepath.ToSlash(filepath.Clean("/"+trimmedFolderID)), "/")
+	if folderProjectionPath == "." || folderProjectionPath == rootProjectionPath || !strings.HasPrefix(folderProjectionPath, rootProjectionPath+"/") {
+		return "", ErrProjectFolderNotFound
+	}
+
+	folderDir := filepath.Join(posixRoot, filepath.FromSlash(folderProjectionPath))
+	info, err := os.Stat(folderDir)
+	if err != nil {
+		if os.IsNotExist(err) {
+			return "", ErrProjectFolderNotFound
+		}
+		return "", fmt.Errorf("stat project folder: %w", err)
+	}
+	if !info.IsDir() {
+		return "", ErrProjectFolderNotFound
+	}
+
+	if err := os.RemoveAll(folderDir); err != nil {
+		return "", fmt.Errorf("delete project folder: %w", err)
+	}
+
+	return folderProjectionPath, nil
+}
+
 func buildProjectHierarchyFolderTree(rows []projectHierarchyFolderRow, rootParentPath string) []ProjectHierarchyFolderRecord {
 	if len(rows) == 0 {
 		return nil

Backend/internal/httpx/api_project_routes.go

@@ -17,6 +17,10 @@ type createProjectFolderRequest struct {
 	ParentFolderID string `json:"parentFolderId"`
 }
 
+type deleteProjectFolderRequest struct {
+	FolderID string `json:"folderId"`
+}
+
 func (routes apiRoutes) handleProjectFolders(w http.ResponseWriter, r *http.Request) {
 	projectID := strings.TrimSpace(chi.URLParam(r, "projectId"))
 	if projectID == "" {
@@ -26,7 +30,7 @@ func (routes apiRoutes) handleProjectFolders(w http.ResponseWriter, r *http.Requ
 
 	folders, err := routes.bootstrapService().GetProjectHierarchyFolders(r.Context(), projectID)
 	if err != nil {
-		routes.writeProjectFolderError(w, r, err)
+		routes.writeProjectFolderError(w, r, err, "load")
 		return
 	}
 
@@ -66,7 +70,7 @@ func (routes apiRoutes) handleCreateProjectFolder(w http.ResponseWriter, r *http
 		Name:           payload.Name,
 	})
 	if err != nil {
-		routes.writeProjectFolderError(w, r, err)
+		routes.writeProjectFolderError(w, r, err, "persist")
 		return
 	}
 
@@ -79,6 +83,37 @@ func (routes apiRoutes) handleCreateProjectFolder(w http.ResponseWriter, r *http
 	})
 }
 
+func (routes apiRoutes) handleDeleteProjectFolder(w http.ResponseWriter, r *http.Request) {
+	projectID := strings.TrimSpace(chi.URLParam(r, "projectId"))
+	if projectID == "" {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Project ID is required.")
+		return
+	}
+
+	payload := decodeDeleteProjectFolderRequest(r)
+	if strings.TrimSpace(payload.FolderID) == "" {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Folder ID is required.")
+		return
+	}
+
+	result, err := routes.bootstrapService().DeleteProjectFolder(r.Context(), bootstrapservice.DeleteProjectFolderInput{
+		ProjectID: projectID,
+		FolderID:  payload.FolderID,
+	})
+	if err != nil {
+		routes.writeProjectFolderError(w, r, err, "delete")
+		return
+	}
+
+	WriteJSON(w, http.StatusOK, map[string]any{
+		"data": result,
+		"meta": map[string]any{
+			"resource":  "project-folder-delete",
+			"persisted": true,
+		},
+	})
+}
+
 func (routes apiRoutes) handleProjectTreeFolders(w http.ResponseWriter, r *http.Request) {
 	projectID := strings.TrimSpace(chi.URLParam(r, "projectId"))
 	if projectID == "" {
@@ -88,7 +123,7 @@ func (routes apiRoutes) handleProjectTreeFolders(w http.ResponseWriter, r *http.
 
 	folders, err := routes.bootstrapService().GetProjectTreeFolders(r.Context(), projectID)
 	if err != nil {
-		routes.writeProjectFolderError(w, r, err)
+		routes.writeProjectFolderError(w, r, err, "load")
 		return
 	}
 
@@ -128,7 +163,7 @@ func (routes apiRoutes) handleCreateProjectTreeFolder(w http.ResponseWriter, r *
 		Name:           payload.Name,
 	})
 	if err != nil {
-		routes.writeProjectFolderError(w, r, err)
+		routes.writeProjectFolderError(w, r, err, "persist")
 		return
 	}
 
@@ -141,17 +176,54 @@ func (routes apiRoutes) handleCreateProjectTreeFolder(w http.ResponseWriter, r *
 	})
 }
 
-func (routes apiRoutes) writeProjectFolderError(w http.ResponseWriter, r *http.Request, err error) {
+func (routes apiRoutes) handleDeleteProjectTreeFolder(w http.ResponseWriter, r *http.Request) {
+	projectID := strings.TrimSpace(chi.URLParam(r, "projectId"))
+	if projectID == "" {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Project ID is required.")
+		return
+	}
+
+	payload := decodeDeleteProjectFolderRequest(r)
+	if strings.TrimSpace(payload.FolderID) == "" {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Folder ID is required.")
+		return
+	}
+
+	result, err := routes.bootstrapService().DeleteProjectTreeFolder(r.Context(), bootstrapservice.DeleteProjectFolderInput{
+		ProjectID: projectID,
+		FolderID:  payload.FolderID,
+	})
+	if err != nil {
+		routes.writeProjectFolderError(w, r, err, "delete")
+		return
+	}
+
+	WriteJSON(w, http.StatusOK, map[string]any{
+		"data": result,
+		"meta": map[string]any{
+			"resource":  "project-tree-folder-delete",
+			"persisted": true,
+		},
+	})
+}
+
+func (routes apiRoutes) writeProjectFolderError(w http.ResponseWriter, r *http.Request, err error, operation string) {
 	switch {
 	case errors.Is(err, bootstrapservice.ErrProjectNotFound), errors.Is(err, bootstrapservice.ErrProjectFolderNotFound):
 		WriteError(w, http.StatusNotFound, RequestIDFromContext(r.Context()), "not_found", err.Error())
 	default:
-		routes.cfg.Logger.Error("persist project folder", "error", err, "path", r.URL.Path)
+		routes.cfg.Logger.Error(operation+" project folder", "error", err, "path", r.URL.Path)
-		message := "Failed to persist project folder."
+		message := "Failed to " + operation + " project folder."
 		if routes.cfg.Config.IsDevelopment() {
 			message = message + " " + err.Error()
 		}
-		WriteError(w, http.StatusInternalServerError, RequestIDFromContext(r.Context()), "project_folder_persist_failed", message)
+		WriteError(w, http.StatusInternalServerError, RequestIDFromContext(r.Context()), "project_folder_"+operation+"_failed", message)
+	}
+}
+
+func decodeDeleteProjectFolderRequest(r *http.Request) deleteProjectFolderRequest {
+	return deleteProjectFolderRequest{
+		FolderID: strings.TrimSpace(r.URL.Query().Get("folderId")),
 	}
 }
 

Backend/internal/httpx/api_routes.go

@@ -36,8 +36,10 @@ func (routes apiRoutes) Register(router chi.Router) {
 		apiRouter.Route("/projects/{projectId}", func(projectRouter chi.Router) {
 			projectRouter.Get("/folders", routes.handleProjectFolders)
 			projectRouter.Post("/folders", routes.handleCreateProjectFolder)
+			projectRouter.Delete("/folders", routes.handleDeleteProjectFolder)
 			projectRouter.Get("/tree/folders", routes.handleProjectTreeFolders)
 			projectRouter.Post("/tree/folders", routes.handleCreateProjectTreeFolder)
+			projectRouter.Delete("/tree/folders", routes.handleDeleteProjectTreeFolder)
 		})
 
 		if routes.cfg.Config.IsDevelopment() {

Frontend/src/components/shell/ProjectSelector/ProjectSelector.module.scss

@@ -1,3 +1,5 @@
+@use "../shared/tree-nav" as treeNav;
+
 .root {
   display: grid;
   --project-drawer-gap: var(--space-3);
@@ -191,12 +193,9 @@
 }
 
 .treeSectionLabel {
-  @include text-caption;
+	@include treeNav.section-label;
   margin: 0;
   padding: 0 var(--space-3);
-  color: var(--color-text-subtle);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
 }
 
 .treeSectionHeader {
@@ -248,133 +247,72 @@
 }
 
 .treeList {
-  list-style: none;
+	@include treeNav.tree-list;
-  display: grid;
-  gap: var(--space-1);
-  padding: 0;
 }
 
 .treeEmptySlot {
-	min-height: calc(var(--control-size-lg) - var(--space-2));
+	@include treeNav.empty-slot;
-	padding-left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
-	border-radius: var(--radius-lg);
-	border: 1px dashed color-mix(in srgb, var(--color-border) 38%, transparent);
-	opacity: 0.35;
 }
 
 .treeInputRow {
-	width: 100%;
+	@include treeNav.input-row;
-	min-width: 0;
-	display: grid;
-	grid-template-columns: auto minmax(0, 1fr);
-	align-items: center;
-	gap: var(--space-2);
-	min-height: calc(var(--control-size-lg) - var(--space-2));
-	padding: var(--space-2) var(--space-3);
-	padding-left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
-	border: 1px solid color-mix(in srgb, var(--color-border) 42%, transparent);
-	border-radius: var(--radius-lg);
-	background: color-mix(in srgb, var(--color-surface) 94%, transparent);
 }
 
 .treeInput {
-	width: 100%;
+	@include treeNav.input;
-	min-width: 0;
-	border: 0;
-	background: transparent;
-	color: var(--color-text);
-	font: inherit;
-	outline: none;
-}
-
-.treeInput::placeholder {
-	color: var(--color-text-muted);
 }
 
 .treeItem {
-  width: 100%;
+	@include treeNav.item;
-  min-width: 0;
-  display: grid;
-  grid-template-columns: auto auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: var(--space-2);
-  min-height: calc(var(--control-size-lg) - var(--space-2));
-  padding: var(--space-2) var(--space-3);
-  padding-left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
-  border: 1px solid transparent;
-  border-radius: var(--radius-lg);
-  background: transparent;
-  color: var(--color-text-muted);
-  transition:
-    background 160ms var(--easing-standard),
-    color 160ms var(--easing-standard),
-    border-color 160ms var(--easing-standard),
-    box-shadow 160ms var(--easing-standard),
-    transform 180ms var(--easing-standard);
-  text-align: left;
 }
 
 .treeItem:hover,
 .treeItem:focus-visible {
-  background: color-mix(in srgb, var(--color-surface-hover) 80%, var(--color-accent-soft) 20%);
+	@include treeNav.item-hover;
-  color: var(--color-text);
-  box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
 }
 
 .treeItemFolder {
-  color: var(--color-text);
+	@include treeNav.item-folder;
 }
 
 .treeItemDragging {
-	opacity: 0.45;
+	@include treeNav.item-dragging;
-	transform: scale(0.985);
-	box-shadow: none;
 }
 
 .treeItemDropBefore {
-	box-shadow: inset 0 2px 0 color-mix(in srgb, var(--color-accent-strong) 78%, transparent);
+	@include treeNav.item-drop-before;
 }
 
 .treeItemDropAfter {
-	box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--color-accent-strong) 78%, transparent);
+	@include treeNav.item-drop-after;
 }
 
 .treeItemDropInside {
-	border-color: color-mix(in srgb, var(--color-accent-strong) 55%, transparent);
+	@include treeNav.item-drop-inside;
-	background: color-mix(in srgb, var(--color-accent-soft) 36%, var(--color-surface));
-	color: var(--color-text);
-	box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
 }
 
 .folderChevron {
-  color: var(--color-text-muted);
+	@include treeNav.folder-chevron;
-  transition: transform 160ms var(--easing-standard);
 }
 
 .folderChevronOpen {
-  transform: rotate(90deg);
+	@include treeNav.folder-chevron-open;
 }
 
 .treeItemActive {
-  border-color: var(--color-border);
+	@include treeNav.item-active;
-  background: var(--color-surface);
-  color: var(--color-text);
-  box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
 }
 
 .icon {
-  color: inherit;
+	@include treeNav.icon;
-  opacity: 0.85;
 }
 
 .label {
-  @include text-label;
+	@include treeNav.label;
-  min-width: 0;
 }
 
 .itemMeta {
-  @include text-caption;
+	@include treeNav.item-meta;
-  color: var(--color-text-muted);
 }
 
 @media (max-width: 720px) {

Frontend/src/components/shell/ProjectSelector/ProjectSelector.tsx

@@ -5,6 +5,17 @@ import { ChevronDown, ChevronRight, Folder, LayoutGrid, ListCollapse, UnfoldVert
 import { ProjectContextMenu } from "../ProjectContextMenu/ProjectContextMenu";
 import { useAppShellData } from "../data/app-shell.context";
 import { resolveAPIBase } from "../../../lib/api";
+import {
+	collectBranchNodeIds,
+	findTreeNodeDepth,
+	findTreeNodeLocation,
+	getPointerRelativeY,
+	isUuidString,
+	moveTreeNode,
+	resolveTreeDropTarget,
+	type NavTreeAdapter,
+	type NavTreeDropTarget,
+} from "../shared/navTreeDnd";
 import {
 	createProjectFolderTarget,
 	createProjectSurfaceTarget,
@@ -56,24 +67,13 @@ type PendingProjectFolderDraft = {
 	depth: number;
 };
 
-type ProjectDragTarget = {
+type ProjectDragTarget = NavTreeDropTarget;
-	parentId: string | null;
-	index: number;
-	intent: "before" | "after" | "inside";
-	targetNodeId?: string;
-};
 
 type ProjectDragState = {
 	draggedNodeId: string;
 	dropTarget: ProjectDragTarget | null;
 };
 
-type ProjectNodeLocation = {
-	parentId: string | null;
-	index: number;
-	node: ProjectTreeNode;
-};
-
 const LONG_PRESS_MS = 320;
 
 const getProjectTreeNodeId = (node: ProjectTreeNode): string =>
@@ -98,198 +98,20 @@ const buildProjectTree = (
 	...buildPersistedFolderNodes(folders),
 ];
 
-const collectProjectFolderIds = (nodes: readonly ProjectTreeNode[]): string[] => {
-	const ids: string[] = [];
-
-	for (const node of nodes) {
-		if (node.kind !== "folder") {
-			continue;
-		}
-
-		ids.push(node.id);
-		ids.push(...collectProjectFolderIds(node.children));
-	}
-
-	return ids;
-};
-
 const readPersistedFolders = (body: ProjectFoldersResponse): PersistedProjectFolderRecord[] =>
 	Array.isArray(body.data?.folders) ? body.data.folders : [];
 
-const cloneProjectTreeNode = (node: ProjectTreeNode): ProjectTreeNode => {
+const projectTreeAdapter: NavTreeAdapter<ProjectTreeNode> = {
-	if (node.kind === "project") {
+	getNodeId: getProjectTreeNodeId,
-		return {
+	isBranchNode: (node) => node.kind === "folder",
-			kind: "project",
+	getChildren: (node) => (node.kind === "folder" ? node.children : []),
-			item: { ...node.item },
+	withChildren: (node, children) =>
-		};
+		node.kind === "folder"
-	}
+			? {
-
-	return {
-		kind: "folder",
-		id: node.id,
-		label: node.label,
-		meta: node.meta,
-		children: node.children.map(cloneProjectTreeNode),
-	};
-};
-
-const findProjectNodeLocation = (
-	nodes: readonly ProjectTreeNode[],
-	nodeId: string,
-	parentId: string | null = null,
-): ProjectNodeLocation | null => {
-	for (let index = 0; index < nodes.length; index += 1) {
-		const node = nodes[index];
-
-		if (getProjectTreeNodeId(node) === nodeId) {
-			return { parentId, index, node };
-		}
-
-		if (node.kind === "folder") {
-			const nestedLocation = findProjectNodeLocation(node.children, nodeId, node.id);
-
-			if (nestedLocation) {
-				return nestedLocation;
-			}
-		}
-	}
-
-	return null;
-};
-
-const findProjectNodeDepth = (nodes: readonly ProjectTreeNode[], nodeId: string, depth = 0): number | null => {
-	for (const node of nodes) {
-		if (getProjectTreeNodeId(node) === nodeId) {
-			return depth;
-		}
-
-		if (node.kind === "folder") {
-			const nestedDepth = findProjectNodeDepth(node.children, nodeId, depth + 1);
-
-			if (nestedDepth !== null) {
-				return nestedDepth;
-			}
-		}
-	}
-
-	return null;
-};
-
-const projectTreeContainsNode = (nodes: readonly ProjectTreeNode[], nodeId: string): boolean => {
-	for (const node of nodes) {
-		if (getProjectTreeNodeId(node) === nodeId) {
-			return true;
-		}
-
-		if (node.kind === "folder" && projectTreeContainsNode(node.children, nodeId)) {
-			return true;
-		}
-	}
-
-	return false;
-};
-
-const removeProjectTreeNode = (
-	nodes: readonly ProjectTreeNode[],
-	nodeId: string,
-): { nodes: ProjectTreeNode[]; removed: ProjectTreeNode | null } => {
-	const nextNodes: ProjectTreeNode[] = [];
-	let removed: ProjectTreeNode | null = null;
-
-	for (const node of nodes) {
-		if (getProjectTreeNodeId(node) === nodeId) {
-			removed = node;
-			continue;
-		}
-
-		if (node.kind === "folder") {
-			const result = removeProjectTreeNode(node.children, nodeId);
-
-			if (result.removed) {
-				removed = result.removed;
-				nextNodes.push({
-					...node,
-					children: result.nodes,
-				});
-				continue;
-			}
-		}
-
-		nextNodes.push(node);
-	}
-
-	return { nodes: nextNodes, removed };
-};
-
-const insertProjectTreeNode = (
-	nodes: readonly ProjectTreeNode[],
-	parentId: string | null,
-	index: number,
-	nodeToInsert: ProjectTreeNode,
-): ProjectTreeNode[] => {
-	if (parentId === null) {
-		const nextNodes = [...nodes];
-		nextNodes.splice(Math.max(0, Math.min(index, nextNodes.length)), 0, nodeToInsert);
-		return nextNodes;
-	}
-
-	return nodes.map((node) => {
-		if (node.kind !== "folder") {
-			return node;
-		}
-
-		if (node.id === parentId) {
-			const nextChildren = [...node.children];
-			nextChildren.splice(Math.max(0, Math.min(index, nextChildren.length)), 0, nodeToInsert);
-			return {
 				...node,
-				children: nextChildren,
+				children: [...children],
-			};
+			}
-		}
+			: node,
-
-		return {
-			...node,
-			children: insertProjectTreeNode(node.children, parentId, index, nodeToInsert),
-		};
-	});
-};
-
-const moveProjectTreeNode = (
-	nodes: readonly ProjectTreeNode[],
-	draggedNodeId: string,
-	dropTarget: ProjectDragTarget,
-): ProjectTreeNode[] => {
-	const location = findProjectNodeLocation(nodes, draggedNodeId);
-
-	if (!location) {
-		return [...nodes];
-	}
-
-	if (
-		location.node.kind === "folder" &&
-		dropTarget.parentId !== null &&
-		(projectTreeContainsNode(location.node.children, dropTarget.parentId) || dropTarget.parentId === location.node.id)
-	) {
-		return [...nodes];
-	}
-
-	let normalizedIndex = dropTarget.index;
-
-	if (dropTarget.parentId === location.parentId && dropTarget.index > location.index) {
-		normalizedIndex -= 1;
-	}
-
-	if (dropTarget.parentId === location.parentId && normalizedIndex === location.index) {
-		return [...nodes];
-	}
-
-	const removalResult = removeProjectTreeNode(nodes, draggedNodeId);
-
-	if (!removalResult.removed) {
-		return [...nodes];
-	}
-
-	return insertProjectTreeNode(removalResult.nodes, dropTarget.parentId, normalizedIndex, removalResult.removed);
 };
 
 const ProjectFolderDraftRow = (props: {
@@ -385,18 +207,18 @@ const ProjectFolderBranch = (props: {
 									[styles.treeItemFolder]: true,
 									[styles.treeItemDragging]: isDraggedNode(),
 									[styles.treeItemDropBefore]: dropIntent() === "before",
-								[styles.treeItemDropAfter]: dropIntent() === "after",
+									[styles.treeItemDropAfter]: dropIntent() === "after",
-								[styles.treeItemDropInside]: dropIntent() === "inside",
+									[styles.treeItemDropInside]: dropIntent() === "inside",
-							}}
+								}}
-							style={{ "--tree-depth": String(props.depth) }}
+								style={{ "--tree-depth": String(props.depth) }}
-							aria-expanded={!isCollapsed()}
+								aria-expanded={!isCollapsed()}
-							onClick={() => {
+								onClick={() => {
-								if (props.dragState || props.isTreeClickSuppressed()) {
+									if (props.dragState || props.isTreeClickSuppressed()) {
-									return;
+										return;
-								}
+									}
 
-								props.onToggleFolder(node.id);
+									props.onToggleFolder(node.id);
-							}}
+								}}
 								onContextMenu={(event): void => props.onOpenFolderMenu(event, node)}
 								onPointerDown={(event): void => props.onNodePointerDown(event, node.id)}
 								onPointerMove={(event): void =>
@@ -550,7 +372,7 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 
 	const syncProjectTree = (): void => {
 		const nextTree = buildProjectTree(appShellData.projectItems(), persistedFolders());
-		const availableFolderIds = new Set(collectProjectFolderIds(nextTree));
+		const availableFolderIds = new Set(collectBranchNodeIds(nextTree, projectTreeAdapter));
 
 		setProjectTreeNodes(nextTree);
 		setCollapsedFolderIds((current) => current.filter((folderId) => availableFolderIds.has(folderId)));
@@ -563,7 +385,7 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 		setDragState(null);
 	};
 
-	const folderIds = (): string[] => collectProjectFolderIds(projectTreeNodes());
+	const folderIds = (): string[] => collectBranchNodeIds(projectTreeNodes(), projectTreeAdapter);
 
 	const expandAllFolders = (): void => {
 		setCollapsedFolderIds([]);
@@ -599,6 +421,11 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 			return;
 		}
 
+		if (!isUuidString(projectId)) {
+			setPersistedFolders([]);
+			return;
+		}
+
 		try {
 			const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/folders`, {
 				headers: {
@@ -713,7 +540,7 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 
 			suppressTreeClickTemporarily();
 			setProjectTreeNodes((current) =>
-				moveProjectTreeNode(current, nextDragState.draggedNodeId, nextDragState.dropTarget as ProjectDragTarget),
+				moveTreeNode(current, nextDragState.draggedNodeId, nextDragState.dropTarget as ProjectDragTarget, projectTreeAdapter),
 			);
 			setDragState(null);
 		};
@@ -765,7 +592,7 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 	};
 
 	const selectProject = (projectId: string): void => {
-		const location = findProjectNodeLocation(projectTreeNodes(), projectId);
+		const location = findTreeNodeLocation(projectTreeNodes(), projectId, projectTreeAdapter);
 
 		if (!location || location.node.kind !== "project") {
 			return;
@@ -787,6 +614,7 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 	const submitPendingFolder = async (): Promise<void> => {
 		const name = pendingFolderName().trim();
 		const draft = pendingFolderDraft();
+		const projectId = selectedProject().id;
 
 		if (!draft) {
 			return;
@@ -798,8 +626,13 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 			return;
 		}
 
+		if (!isUuidString(projectId)) {
+			cancelPendingFolder();
+			return;
+		}
+
 		try {
-			const response = await fetch(`${resolveAPIBase()}/projects/${selectedProject().id}/folders`, {
+			const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/folders`, {
 				method: "POST",
 				headers: {
 					Accept: "application/json",
@@ -825,28 +658,65 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 		}
 	};
 
+	const deletePersistedFolder = async (folderId: string): Promise<void> => {
+		const projectId = selectedProject().id;
+		if (!folderId || !isUuidString(projectId)) {
+			return;
+		}
+
+		try {
+			const response = await fetch(
+				`${resolveAPIBase()}/projects/${projectId}/folders?folderId=${encodeURIComponent(folderId)}`,
+				{
+					method: "DELETE",
+					headers: {
+						Accept: "application/json",
+					},
+				},
+			);
+
+			const body = (await response.json()) as ProjectFoldersResponse;
+
+			if (!response.ok) {
+				throw new Error(body.message || "Failed to delete project folder.");
+			}
+
+			setPersistedFolders(readPersistedFolders(body));
+			setCollapsedFolderIds((current) => current.filter((id) => id !== folderId));
+		} catch (error) {
+			console.error(error);
+		}
+	};
+
 	const cancelPendingFolder = (): void => {
 		setPendingFolderDraft(null);
 		setPendingFolderName("");
 	};
 
 	const handleContextActionSelect = (action: { id: string; label: string }, target: ProjectMenuTarget): void => {
-		if (action.id !== "new-folder") {
+		switch (action.id) {
-			return;
+			case "new-folder":
-		}
+				switch (target.kind) {
-
+					case "surface":
-		switch (target.kind) {
+						beginFolderDraft(null, 0);
-			case "surface":
+						return;
-				beginFolderDraft(null, 0);
+					case "folder":
+						beginFolderDraft(target.id, (findTreeNodeDepth(projectTreeNodes(), target.id, projectTreeAdapter) ?? 0) + 1);
+						return;
+					case "project": {
+						const parentId = findTreeNodeLocation(projectTreeNodes(), target.id, projectTreeAdapter)?.parentId ?? null;
+						beginFolderDraft(parentId, parentId ? (findTreeNodeDepth(projectTreeNodes(), parentId, projectTreeAdapter) ?? 0) + 1 : 0);
+						return;
+					}
+				}
 				return;
-			case "folder":
+			case "delete-folder":
-				beginFolderDraft(target.id, (findProjectNodeDepth(projectTreeNodes(), target.id) ?? 0) + 1);
+				if (target.kind === "folder") {
+					void deletePersistedFolder(target.id);
+				}
 				return;
-			case "project": {
+			default:
-				const parentId = findProjectNodeLocation(projectTreeNodes(), target.id)?.parentId ?? null;
-				beginFolderDraft(parentId, parentId ? (findProjectNodeDepth(projectTreeNodes(), parentId) ?? 0) + 1 : 0);
 				return;
-			}
 		}
 	};
 
@@ -886,50 +756,20 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
 			return;
 		}
 
-		const currentTarget = event.currentTarget;
+		const relativeY = getPointerRelativeY(event);
-		if (!(currentTarget instanceof HTMLElement)) {
+		if (relativeY === null) {
 			return;
 		}
 
-		const bounds = currentTarget.getBoundingClientRect();
-		const relativeY = bounds.height <= 0 ? 0.5 : (event.clientY - bounds.top) / bounds.height;
-		let nextTarget: ProjectDragTarget;
-
-		if (node.kind === "folder") {
-			if (relativeY < 0.28) {
-				nextTarget = {
-					parentId,
-					index,
-					intent: "before",
-					targetNodeId: node.id,
-				};
-			} else if (relativeY > 0.72) {
-				nextTarget = {
-					parentId,
-					index: index + 1,
-					intent: "after",
-					targetNodeId: node.id,
-				};
-			} else {
-				nextTarget = {
-					parentId: node.id,
-					index: node.children.length,
-					intent: "inside",
-					targetNodeId: node.id,
-				};
-			}
-		} else {
-			nextTarget = {
-				parentId,
-				index: relativeY < 0.5 ? index : index + 1,
-				intent: relativeY < 0.5 ? "before" : "after",
-				targetNodeId: node.item.id,
-			};
-		}
-
 		setDragState({
 			...nextDragState,
-			dropTarget: nextTarget,
+			dropTarget: resolveTreeDropTarget({
+				parentId,
+				index,
+				node,
+				relativeY,
+				adapter: projectTreeAdapter,
+			}),
 		});
 	};
 

Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.module.scss

@@ -1,3 +1,5 @@
+@use "../shared/tree-nav" as treeNav;
+
 .sidebar {
   --sidebar-nav-item-min-height: var(--control-size-lg);
   position: relative;
@@ -117,56 +119,25 @@
 }
 
 .treeSectionLabel {
-  @include text-caption;
+	@include treeNav.section-label;
   margin: var(--space-3) 0 var(--space-2);
   padding: 0 var(--space-3);
-  color: var(--color-text-subtle);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
 }
 
 .treeList {
-  list-style: none;
+	@include treeNav.tree-list;
-  display: grid;
-  gap: var(--space-1);
-  padding: 0;
 }
 
 .treeEmptySlot {
-	min-height: calc(var(--control-size-lg) - var(--space-2));
+	@include treeNav.empty-slot;
-	padding-left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
-	border-radius: var(--radius-lg);
-	border: 1px dashed color-mix(in srgb, var(--color-border) 38%, transparent);
-	opacity: 0.35;
 }
 
 .treeInputRow {
-	width: 100%;
+	@include treeNav.input-row;
-	min-width: 0;
-	display: grid;
-	grid-template-columns: auto minmax(0, 1fr);
-	align-items: center;
-	gap: var(--space-2);
-	min-height: calc(var(--control-size-lg) - var(--space-2));
-	padding: var(--space-2) var(--space-3);
-	padding-left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
-	border: 1px solid color-mix(in srgb, var(--color-border) 42%, transparent);
-	border-radius: var(--radius-lg);
-	background: color-mix(in srgb, var(--color-surface) 94%, transparent);
 }
 
 .treeInput {
-	width: 100%;
+	@include treeNav.input;
-	min-width: 0;
-	border: 0;
-	background: transparent;
-	color: var(--color-text);
-	font: inherit;
-	outline: none;
-}
-
-.treeInput::placeholder {
-	color: var(--color-text-muted);
 }
 
 .navItem {
@@ -184,125 +155,44 @@
 }
 
 .treeItem {
-  width: 100%;
+	@include treeNav.item;
-  min-width: 0;
-  display: grid;
-  position: relative;
-  isolation: isolate;
-  grid-template-columns: auto auto minmax(0, 1fr) auto;
-  align-items: center;
-  gap: var(--space-2);
-  min-height: calc(var(--control-size-lg) - var(--space-2));
-  padding: var(--space-2) var(--space-3);
-  padding-left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  color: var(--color-text-muted);
-  text-align: left;
-  transition:
-    color 160ms var(--easing-standard),
-    box-shadow 160ms var(--easing-standard),
-    transform 180ms var(--easing-standard);
-
-	&::after {
-		content: "";
-		position: absolute;
-		inset: 0;
-		border: 1px solid transparent;
-		border-radius: var(--radius-lg);
-		background: transparent;
-		transition:
-			background 160ms var(--easing-standard),
-			border-color 160ms var(--easing-standard),
-			box-shadow 160ms var(--easing-standard);
-		pointer-events: none;
-		z-index: 0;
-	}
-
-	> * {
-		position: relative;
-		z-index: 1;
-	}
 }
 
 .treeItem:hover,
 .treeItem:focus-visible {
-  color: var(--color-text);
+	@include treeNav.item-hover;
-
-	&::after {
-		background: color-mix(in srgb, var(--color-surface-hover) 80%, var(--color-accent-soft) 20%);
-		box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
-	}
 }
 
 .treeItemFolder {
-  color: var(--color-text);
+	@include treeNav.item-folder;
 }
 
 .treeItemDragging {
-	opacity: 0.45;
+	@include treeNav.item-dragging;
-	transform: scale(0.985);
-	box-shadow: none;
 }
 
 .treeItemDropBefore {
-	&::before {
+	@include treeNav.item-drop-before;
-		content: "";
-		position: absolute;
-		left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
-		right: var(--space-3);
-		top: calc((var(--space-1) * -0.5) - 1px);
-		height: 2px;
-		border-radius: 999px;
-		background: color-mix(in srgb, var(--color-accent-strong) 78%, transparent);
-		pointer-events: none;
-		z-index: 2;
-	}
 }
 
 .treeItemDropAfter {
-	&::before {
+	@include treeNav.item-drop-after;
-		content: "";
-		position: absolute;
-		left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
-		right: var(--space-3);
-		bottom: calc((var(--space-1) * -0.5) - 1px);
-		height: 2px;
-		border-radius: 999px;
-		background: color-mix(in srgb, var(--color-accent-strong) 78%, transparent);
-		pointer-events: none;
-		z-index: 2;
-	}
 }
 
 .treeItemDropInside {
-	color: var(--color-text);
+	@include treeNav.item-drop-inside;
-
-	&::after {
-		border-color: color-mix(in srgb, var(--color-accent-strong) 55%, transparent);
-		background: color-mix(in srgb, var(--color-accent-soft) 36%, var(--color-surface));
-		box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
-	}
 }
 
 .folderChevron {
-  color: var(--color-text-muted);
+	@include treeNav.folder-chevron;
-  transition: transform 160ms var(--easing-standard);
 }
 
 .folderChevronOpen {
-  transform: rotate(90deg);
+	@include treeNav.folder-chevron-open;
 }
 
 .treeItemActive {
-  color: var(--color-text);
+	@include treeNav.item-active;
-
-	&::after {
-		border-color: var(--color-border);
-		background: var(--color-surface);
-		box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
-	}
 }
 
 .navItemActive {
@@ -313,18 +203,15 @@
 }
 
 .icon {
-  color: inherit;
+	@include treeNav.icon;
-  opacity: 0.85;
 }
 
 .label {
-  @include text-label;
+	@include treeNav.label;
-  min-width: 0;
 }
 
 .itemMeta {
-  @include text-caption;
+	@include treeNav.item-meta;
-  color: var(--color-text-muted);
 }
 
 .sidebarCollapsed {

Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx

@@ -5,6 +5,16 @@ import { resolveAPIBase } from "../../../lib/api";
 import { ChevronLeft, ChevronRight, Folder, ListCollapse, UnfoldVertical } from "../../../lib/icons";
 import { useAppShellData } from "../data/app-shell.context";
 import { ProjectSelector } from "../ProjectSelector/ProjectSelector";
+import {
+	collectBranchNodeIds,
+	findTreeNodeDepth,
+	getPointerRelativeY,
+	isUuidString,
+	moveTreeNode,
+	resolveTreeDropTarget,
+	type NavTreeAdapter,
+	type NavTreeDropTarget,
+} from "../shared/navTreeDnd";
 import {
 	createWorkspaceStaticTarget,
 	createWorkspaceSurfaceTarget,
@@ -32,24 +42,13 @@ type PendingWorkspaceFolderDraft = {
 	depth: number;
 };
 
-type WorkspaceDragTarget = {
+type WorkspaceDragTarget = NavTreeDropTarget;
-	parentId: string | null;
-	index: number;
-	intent: "before" | "after" | "inside";
-	targetNodeId?: string;
-};
 
 type WorkspaceDragState = {
 	draggedNodeId: string;
 	dropTarget: WorkspaceDragTarget | null;
 };
 
-type WorkspaceNodeLocation = {
-	parentId: string | null;
-	index: number;
-	node: WorkspaceTreeNode;
-};
-
 type PersistedWorkspaceFolderRecord = {
 	id: string;
 	label: string;
@@ -79,183 +78,20 @@ const buildPersistedWorkspaceFolderNodes = (
 		children: buildPersistedWorkspaceFolderNodes(folder.children ?? []),
 	}));
 
-const collectWorkspaceFolderIds = (nodes: readonly WorkspaceTreeNode[]): string[] => {
-	const folderIds: string[] = [];
-
-	for (const node of nodes) {
-		if (node.kind !== "folder") {
-			continue;
-		}
-
-		folderIds.push(node.id);
-		folderIds.push(...collectWorkspaceFolderIds(node.children ?? []));
-	}
-
-	return folderIds;
-};
-
 const readPersistedWorkspaceFolders = (body: WorkspaceFoldersResponse): PersistedWorkspaceFolderRecord[] =>
 	Array.isArray(body.data?.folders) ? body.data.folders : [];
 
-const findWorkspaceFolderDepth = (nodes: readonly WorkspaceTreeNode[], folderId: string, depth = 0): number | null => {
+const workspaceTreeAdapter: NavTreeAdapter<WorkspaceTreeNode> = {
-	for (const node of nodes) {
+	getNodeId: getWorkspaceTreeNodeId,
-		if (node.kind !== "folder") {
+	isBranchNode: (node) => node.kind === "folder",
-			continue;
+	getChildren: (node) => (node.kind === "folder" ? (node.children ?? []) : []),
-		}
+	withChildren: (node, children) =>
-
+		node.kind === "folder"
-		if (node.id === folderId) {
+			? {
-			return depth;
-		}
-
-		const nestedDepth = node.children ? findWorkspaceFolderDepth(node.children, folderId, depth + 1) : null;
-		if (nestedDepth !== null) {
-			return nestedDepth;
-		}
-	}
-
-	return null;
-};
-
-const findWorkspaceNodeLocation = (
-	nodes: readonly WorkspaceTreeNode[],
-	nodeId: string,
-	parentId: string | null = null,
-): WorkspaceNodeLocation | null => {
-	for (let index = 0; index < nodes.length; index += 1) {
-		const node = nodes[index];
-
-		if (node.id === nodeId) {
-			return { parentId, index, node };
-		}
-
-		if (node.kind === "folder" && node.children) {
-			const nestedLocation = findWorkspaceNodeLocation(node.children, nodeId, node.id);
-
-			if (nestedLocation) {
-				return nestedLocation;
-			}
-		}
-	}
-
-	return null;
-};
-
-const workspaceTreeContainsNode = (nodes: readonly WorkspaceTreeNode[], nodeId: string): boolean => {
-	for (const node of nodes) {
-		if (node.id === nodeId) {
-			return true;
-		}
-
-		if (node.kind === "folder" && node.children && workspaceTreeContainsNode(node.children, nodeId)) {
-			return true;
-		}
-	}
-
-	return false;
-};
-
-const removeWorkspaceTreeNode = (
-	nodes: readonly WorkspaceTreeNode[],
-	nodeId: string,
-): { nodes: WorkspaceTreeNode[]; removed: WorkspaceTreeNode | null } => {
-	const nextNodes: WorkspaceTreeNode[] = [];
-	let removed: WorkspaceTreeNode | null = null;
-
-	for (const node of nodes) {
-		if (node.id === nodeId) {
-			removed = node;
-			continue;
-		}
-
-		if (node.kind === "folder" && node.children) {
-			const result = removeWorkspaceTreeNode(node.children, nodeId);
-
-			if (result.removed) {
-				removed = result.removed;
-				nextNodes.push({
-					...node,
-					children: result.nodes,
-				});
-				continue;
-			}
-		}
-
-		nextNodes.push(node);
-	}
-
-	return { nodes: nextNodes, removed };
-};
-
-const insertWorkspaceTreeNode = (
-	nodes: readonly WorkspaceTreeNode[],
-	parentId: string | null,
-	index: number,
-	nodeToInsert: WorkspaceTreeNode,
-): WorkspaceTreeNode[] => {
-	if (parentId === null) {
-		const nextNodes = [...nodes];
-		nextNodes.splice(Math.max(0, Math.min(index, nextNodes.length)), 0, nodeToInsert);
-		return nextNodes;
-	}
-
-	return nodes.map((node) => {
-		if (node.kind !== "folder") {
-			return node;
-		}
-
-		if (node.id === parentId) {
-			const nextChildren = [...(node.children ?? [])];
-			nextChildren.splice(Math.max(0, Math.min(index, nextChildren.length)), 0, nodeToInsert);
-			return {
 				...node,
-				children: nextChildren,
+				children: [...children],
-			};
+			}
-		}
+			: node,
-
-		return {
-			...node,
-			children: node.children ? insertWorkspaceTreeNode(node.children, parentId, index, nodeToInsert) : node.children,
-		};
-	});
-};
-
-const moveWorkspaceTreeNode = (
-	nodes: readonly WorkspaceTreeNode[],
-	draggedNodeId: string,
-	dropTarget: WorkspaceDragTarget,
-): WorkspaceTreeNode[] => {
-	const location = findWorkspaceNodeLocation(nodes, draggedNodeId);
-
-	if (!location) {
-		return [...nodes];
-	}
-
-	if (
-		location.node.kind === "folder" &&
-		dropTarget.parentId !== null &&
-		((location.node.children && workspaceTreeContainsNode(location.node.children, dropTarget.parentId)) ||
-			dropTarget.parentId === location.node.id)
-	) {
-		return [...nodes];
-	}
-
-	let normalizedIndex = dropTarget.index;
-
-	if (dropTarget.parentId === location.parentId && dropTarget.index > location.index) {
-		normalizedIndex -= 1;
-	}
-
-	if (dropTarget.parentId === location.parentId && normalizedIndex === location.index) {
-		return [...nodes];
-	}
-
-	const removalResult = removeWorkspaceTreeNode(nodes, draggedNodeId);
-
-	if (!removalResult.removed) {
-		return [...nodes];
-	}
-
-	return insertWorkspaceTreeNode(removalResult.nodes, dropTarget.parentId, normalizedIndex, removalResult.removed);
 };
 
 const FolderDraftRow = (props: {
@@ -394,12 +230,12 @@ const WorkspaceTreeBranch = (props: {
 							<button
 								type="button"
 								classList={{
-								[styles.treeItem]: true,
+									[styles.treeItem]: true,
-								[styles.treeItemActive]: !!node.active,
+									[styles.treeItemActive]: !!node.active,
-								[styles.treeItemFolder]: node.kind === "folder",
+									[styles.treeItemFolder]: node.kind === "folder",
-								[styles.treeItemDragging]: isDraggedNode(),
+									[styles.treeItemDragging]: isDraggedNode(),
-								[styles.treeItemDropBefore]: dropIntent() === "before",
+									[styles.treeItemDropBefore]: dropIntent() === "before",
-								[styles.treeItemDropAfter]: dropIntent() === "after",
+									[styles.treeItemDropAfter]: dropIntent() === "after",
 									[styles.treeItemDropInside]: dropIntent() === "inside",
 								}}
 								style={{ "--tree-depth": String(depth()) }}
@@ -469,15 +305,15 @@ const WorkspaceTreeBranch = (props: {
 									pendingFolderDraft={props.pendingFolderDraft}
 									pendingFolderName={props.pendingFolderName}
 									onPendingFolderNameChange={props.onPendingFolderNameChange}
-										onSubmitPendingFolder={props.onSubmitPendingFolder}
+									onSubmitPendingFolder={props.onSubmitPendingFolder}
-										onCancelPendingFolder={props.onCancelPendingFolder}
+									onCancelPendingFolder={props.onCancelPendingFolder}
-										onOpenContextMenu={props.onOpenContextMenu}
+									onOpenContextMenu={props.onOpenContextMenu}
-										onOpenContextMenuFromKeyboard={props.onOpenContextMenuFromKeyboard}
+									onOpenContextMenuFromKeyboard={props.onOpenContextMenuFromKeyboard}
-										onNodePointerDown={props.onNodePointerDown}
+									onNodePointerDown={props.onNodePointerDown}
-										onNodePointerMove={props.onNodePointerMove}
+									onNodePointerMove={props.onNodePointerMove}
-										dragState={props.dragState}
+									dragState={props.dragState}
-										isTreeClickSuppressed={props.isTreeClickSuppressed}
+									isTreeClickSuppressed={props.isTreeClickSuppressed}
-									/>
+								/>
 							</Show>
 						</li>
 					);
@@ -516,7 +352,7 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 	const railToggleLabel = (): string => (props.railCollapsed ? "Expand server rail" : "Collapse server rail");
 	const sidebarContextMenuTarget = createWorkspaceSurfaceTarget(appShellData.activeProject());
 	const isFolderCollapsed = (folderId: string): boolean => collapsedFolderIds().includes(folderId);
-	const folderIds = (): string[] => collectWorkspaceFolderIds(workspaceTreeNodes());
+	const folderIds = (): string[] => collectBranchNodeIds(workspaceTreeNodes(), workspaceTreeAdapter);
 	const totalFolderCount = (): number => folderIds().length;
 	const areAllFoldersCollapsed = (): boolean => {
 		const count = totalFolderCount();
@@ -553,7 +389,7 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 		const nextTree = activeProject()?.id
 			? buildPersistedWorkspaceFolderNodes(persistedFolders())
 			: appShellData.workspaceTree();
-		const availableFolderIds = new Set(collectWorkspaceFolderIds(nextTree));
+		const availableFolderIds = new Set(collectBranchNodeIds(nextTree, workspaceTreeAdapter));
 
 		setWorkspaceTreeNodes(nextTree);
 		setCollapsedFolderIds((current) => current.filter((id) => availableFolderIds.has(id)));
@@ -567,6 +403,11 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 			return;
 		}
 
+		if (!isUuidString(projectId)) {
+			setPersistedFolders([]);
+			return;
+		}
+
 		try {
 			const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/tree/folders`, {
 				headers: {
@@ -652,7 +493,7 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 
 			suppressTreeClickTemporarily();
 			setWorkspaceTreeNodes((current) =>
-				moveWorkspaceTreeNode(current, nextDragState.draggedNodeId, nextDragState.dropTarget as WorkspaceDragTarget),
+				moveTreeNode(current, nextDragState.draggedNodeId, nextDragState.dropTarget as WorkspaceDragTarget, workspaceTreeAdapter),
 			);
 			setDragState(null);
 		};
@@ -708,7 +549,7 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 			return;
 		}
 
-		if (!projectId) {
+		if (!projectId || !isUuidString(projectId)) {
 			cancelPendingFolder();
 			return;
 		}
@@ -740,6 +581,36 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 		}
 	};
 
+	const deletePersistedFolder = async (folderId: string): Promise<void> => {
+		const projectId = activeProject()?.id ?? "";
+		if (!folderId || !projectId || !isUuidString(projectId)) {
+			return;
+		}
+
+		try {
+			const response = await fetch(
+				`${resolveAPIBase()}/projects/${projectId}/tree/folders?folderId=${encodeURIComponent(folderId)}`,
+				{
+					method: "DELETE",
+					headers: {
+						Accept: "application/json",
+					},
+				},
+			);
+
+			const body = (await response.json()) as WorkspaceFoldersResponse;
+
+			if (!response.ok) {
+				throw new Error(body.message || "Failed to delete project tree folder.");
+			}
+
+			setPersistedFolders(readPersistedWorkspaceFolders(body));
+			setCollapsedFolderIds((current) => current.filter((id) => id !== folderId));
+		} catch (error) {
+			console.error(error);
+		}
+	};
+
 	const cancelPendingFolder = (): void => {
 		setPendingFolderDraft(null);
 		setPendingFolderName("");
@@ -780,59 +651,45 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 			return;
 		}
 
-		const currentTarget = event.currentTarget;
+		const relativeY = getPointerRelativeY(event);
-		if (!(currentTarget instanceof HTMLElement)) {
+		if (relativeY === null) {
 			return;
 		}
 
-		const bounds = currentTarget.getBoundingClientRect();
+		setDragState({
-		const relativeY = bounds.height <= 0 ? 0.5 : (event.clientY - bounds.top) / bounds.height;
+			...nextDragState,
-		let nextTarget: WorkspaceDragTarget;
+			dropTarget: resolveTreeDropTarget({
-
-		if (node.kind === "folder") {
-			const isFirstSibling = index === 0;
-			const beforeThreshold = isFirstSibling ? 0.42 : 0.28;
-			const afterThreshold = 0.72;
-
-			if (relativeY < beforeThreshold) {
-				nextTarget = { parentId, index, intent: "before", targetNodeId: node.id };
-			} else if (relativeY > afterThreshold) {
-				nextTarget = { parentId, index: index + 1, intent: "after", targetNodeId: node.id };
-			} else {
-				nextTarget = {
-					parentId: node.id,
-					index: (node.children ?? []).length,
-					intent: "inside",
-					targetNodeId: node.id,
-				};
-			}
-		} else {
-			nextTarget = {
 				parentId,
-				index: relativeY < 0.5 ? index : index + 1,
+				index,
-				intent: relativeY < 0.5 ? "before" : "after",
+				node,
-				targetNodeId: node.id,
+				relativeY,
-			};
+				adapter: workspaceTreeAdapter,
-		}
+			}),
-
+		});
-		setDragState({ ...nextDragState, dropTarget: nextTarget });
 	};
 
 	const handleContextActionSelect = (action: WorkspaceContextMenuAction, target: WorkspaceContextMenuTarget): void => {
-		if (action.id !== "new-folder") {
+		switch (action.id) {
-			return;
+			case "new-folder":
-		}
+				switch (target.kind) {
-
+					case "workspace":
-		switch (target.kind) {
+					case "home":
-			case "workspace":
+						beginFolderDraft(null, 0);
-			case "home":
+						return;
-				beginFolderDraft(null, 0);
+					case "folder":
+						beginFolderDraft(target.id, (findTreeNodeDepth(workspaceTreeNodes(), target.id, workspaceTreeAdapter) ?? 0) + 1);
+						return;
+					case "settings":
+					case "item":
+						return;
+				}
 				return;
-			case "folder":
+			case "delete-folder":
-				beginFolderDraft(target.id, (findWorkspaceFolderDepth(workspaceTreeNodes(), target.id) ?? 0) + 1);
+				if (target.kind === "folder") {
+					void deletePersistedFolder(target.id);
+				}
 				return;
-			case "settings":
+			default:
-			case "item":
 				return;
 		}
 	};

Frontend/src/components/shell/data/shell.data.ts

@@ -597,6 +597,11 @@ const getProjectCreateActions = (): readonly ProjectContextMenuAction[] =>
 		{ id: "new-folder", label: "New folder" },
 	] as const;
 
+const getProjectFolderDangerActions = (): readonly ProjectContextMenuAction[] =>
+	[
+		{ id: "delete-folder", label: "Delete", shortcut: { modifiers: ["meta"], key: "delete" }, tone: "danger" },
+	] as const;
+
 export const createProjectSurfaceTarget = (label = "Projects"): ProjectMenuTarget => ({
 	id: "project-surface",
 	label,
@@ -643,6 +648,10 @@ export const getProjectContextMenuSections = (target: ProjectMenuTarget): readon
 					id: "create",
 					items: createActions,
 				},
+				{
+					id: "organize",
+					items: getProjectFolderDangerActions(),
+				},
 			] as const;
 		case "project":
 			return [

Frontend/src/components/shell/shared/_tree-nav.scss

@@ -0,0 +1,188 @@
+@use "../../../styles/tools/mixins" as *;
+
+@mixin section-label {
+	@include text-caption;
+	color: var(--color-text-subtle);
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+}
+
+@mixin tree-list {
+	list-style: none;
+	display: grid;
+	gap: var(--space-1);
+	padding: 0;
+}
+
+@mixin empty-slot {
+	min-height: calc(var(--control-size-lg) - var(--space-2));
+	padding-left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
+	border-radius: var(--radius-lg);
+	border: 1px dashed color-mix(in srgb, var(--color-border) 38%, transparent);
+	opacity: 0.35;
+}
+
+@mixin input-row {
+	width: 100%;
+	min-width: 0;
+	display: grid;
+	grid-template-columns: auto minmax(0, 1fr);
+	align-items: center;
+	gap: var(--space-2);
+	min-height: calc(var(--control-size-lg) - var(--space-2));
+	padding: var(--space-2) var(--space-3);
+	padding-left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
+	border: 1px solid color-mix(in srgb, var(--color-border) 42%, transparent);
+	border-radius: var(--radius-lg);
+	background: color-mix(in srgb, var(--color-surface) 94%, transparent);
+}
+
+@mixin input {
+	width: 100%;
+	min-width: 0;
+	border: 0;
+	background: transparent;
+	color: var(--color-text);
+	font: inherit;
+	outline: none;
+
+	&::placeholder {
+		color: var(--color-text-muted);
+	}
+}
+
+@mixin item {
+	width: 100%;
+	min-width: 0;
+	display: grid;
+	position: relative;
+	isolation: isolate;
+	grid-template-columns: auto auto minmax(0, 1fr) auto;
+	align-items: center;
+	gap: var(--space-2);
+	min-height: calc(var(--control-size-lg) - var(--space-2));
+	padding: var(--space-2) var(--space-3);
+	padding-left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
+	border: 0;
+	border-radius: 0;
+	background: transparent;
+	color: var(--color-text-muted);
+	text-align: left;
+	transition:
+		color 160ms var(--easing-standard),
+		box-shadow 160ms var(--easing-standard),
+		transform 180ms var(--easing-standard);
+
+	&::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+		border: 1px solid transparent;
+		border-radius: var(--radius-lg);
+		background: transparent;
+		transition:
+			background 160ms var(--easing-standard),
+			border-color 160ms var(--easing-standard),
+			box-shadow 160ms var(--easing-standard);
+		pointer-events: none;
+		z-index: 0;
+	}
+
+	> * {
+		position: relative;
+		z-index: 1;
+	}
+}
+
+@mixin item-hover {
+	color: var(--color-text);
+
+	&::after {
+		background: color-mix(in srgb, var(--color-surface-hover) 80%, var(--color-accent-soft) 20%);
+		box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
+	}
+}
+
+@mixin item-folder {
+	color: var(--color-text);
+}
+
+@mixin item-dragging {
+	opacity: 0.45;
+	transform: scale(0.985);
+	box-shadow: none;
+}
+
+@mixin item-drop-before {
+	&::before {
+		content: "";
+		position: absolute;
+		left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
+		right: var(--space-3);
+		top: calc((var(--space-1) * -0.5) - 1px);
+		height: 2px;
+		border-radius: 999px;
+		background: color-mix(in srgb, var(--color-accent-strong) 78%, transparent);
+		pointer-events: none;
+		z-index: 2;
+	}
+}
+
+@mixin item-drop-after {
+	&::before {
+		content: "";
+		position: absolute;
+		left: calc(var(--space-3) + (var(--tree-depth, 0) * var(--space-4)));
+		right: var(--space-3);
+		bottom: calc((var(--space-1) * -0.5) - 1px);
+		height: 2px;
+		border-radius: 999px;
+		background: color-mix(in srgb, var(--color-accent-strong) 78%, transparent);
+		pointer-events: none;
+		z-index: 2;
+	}
+}
+
+@mixin item-drop-inside {
+	color: var(--color-text);
+
+	&::after {
+		border-color: color-mix(in srgb, var(--color-accent-strong) 55%, transparent);
+		background: color-mix(in srgb, var(--color-accent-soft) 36%, var(--color-surface));
+		box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
+	}
+}
+
+@mixin folder-chevron {
+	color: var(--color-text-muted);
+	transition: transform 160ms var(--easing-standard);
+}
+
+@mixin folder-chevron-open {
+	transform: rotate(90deg);
+}
+
+@mixin item-active {
+	color: var(--color-text);
+
+	&::after {
+		border-color: var(--color-border);
+		background: var(--color-surface);
+		box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
+	}
+}
+
+@mixin icon {
+	color: inherit;
+	opacity: 0.85;
+}
+
+@mixin label {
+	@include text-label;
+	min-width: 0;
+}
+
+@mixin item-meta {
+	@include text-caption;
+	color: var(--color-text-muted);
+}

Frontend/src/components/shell/shared/navTreeDnd.ts

@@ -0,0 +1,278 @@
+export type NavTreeDropIntent = "before" | "after" | "inside";
+
+export type NavTreeDropTarget = {
+	parentId: string | null;
+	index: number;
+	intent: NavTreeDropIntent;
+	targetNodeId?: string;
+};
+
+export type NavTreeDragState = {
+	draggedNodeId: string;
+	dropTarget: NavTreeDropTarget | null;
+};
+
+export type NavTreeLocation<TNode> = {
+	parentId: string | null;
+	index: number;
+	node: TNode;
+};
+
+export type NavTreeAdapter<TNode> = {
+	getNodeId: (node: TNode) => string;
+	isBranchNode: (node: TNode) => boolean;
+	getChildren: (node: TNode) => readonly TNode[];
+	withChildren: (node: TNode, children: readonly TNode[]) => TNode;
+};
+
+const UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+
+export const isUuidString = (value: string | null | undefined): boolean => {
+	if (typeof value !== "string") {
+		return false;
+	}
+
+	return UUID_PATTERN.test(value.trim());
+};
+
+export const collectBranchNodeIds = <TNode>(
+	nodes: readonly TNode[],
+	adapter: NavTreeAdapter<TNode>,
+): string[] => {
+	const ids: string[] = [];
+
+	for (const node of nodes) {
+		if (!adapter.isBranchNode(node)) {
+			continue;
+		}
+
+		ids.push(adapter.getNodeId(node));
+		ids.push(...collectBranchNodeIds(adapter.getChildren(node), adapter));
+	}
+
+	return ids;
+};
+
+export const findTreeNodeLocation = <TNode>(
+	nodes: readonly TNode[],
+	nodeId: string,
+	adapter: NavTreeAdapter<TNode>,
+	parentId: string | null = null,
+): NavTreeLocation<TNode> | null => {
+	for (let index = 0; index < nodes.length; index += 1) {
+		const node = nodes[index];
+
+		if (adapter.getNodeId(node) === nodeId) {
+			return { parentId, index, node };
+		}
+
+		if (!adapter.isBranchNode(node)) {
+			continue;
+		}
+
+		const nestedLocation = findTreeNodeLocation(adapter.getChildren(node), nodeId, adapter, adapter.getNodeId(node));
+		if (nestedLocation) {
+			return nestedLocation;
+		}
+	}
+
+	return null;
+};
+
+export const findTreeNodeDepth = <TNode>(
+	nodes: readonly TNode[],
+	nodeId: string,
+	adapter: NavTreeAdapter<TNode>,
+	depth = 0,
+): number | null => {
+	for (const node of nodes) {
+		if (adapter.getNodeId(node) === nodeId) {
+			return depth;
+		}
+
+		if (!adapter.isBranchNode(node)) {
+			continue;
+		}
+
+		const nestedDepth = findTreeNodeDepth(adapter.getChildren(node), nodeId, adapter, depth + 1);
+		if (nestedDepth !== null) {
+			return nestedDepth;
+		}
+	}
+
+	return null;
+};
+
+export const treeContainsNode = <TNode>(
+	nodes: readonly TNode[],
+	nodeId: string,
+	adapter: NavTreeAdapter<TNode>,
+): boolean => {
+	for (const node of nodes) {
+		if (adapter.getNodeId(node) === nodeId) {
+			return true;
+		}
+
+		if (adapter.isBranchNode(node) && treeContainsNode(adapter.getChildren(node), nodeId, adapter)) {
+			return true;
+		}
+	}
+
+	return false;
+};
+
+export const removeTreeNode = <TNode>(
+	nodes: readonly TNode[],
+	nodeId: string,
+	adapter: NavTreeAdapter<TNode>,
+): { nodes: TNode[]; removed: TNode | null } => {
+	const nextNodes: TNode[] = [];
+	let removed: TNode | null = null;
+
+	for (const node of nodes) {
+		if (adapter.getNodeId(node) === nodeId) {
+			removed = node;
+			continue;
+		}
+
+		if (adapter.isBranchNode(node)) {
+			const result = removeTreeNode(adapter.getChildren(node), nodeId, adapter);
+
+			if (result.removed) {
+				removed = result.removed;
+				nextNodes.push(adapter.withChildren(node, result.nodes));
+				continue;
+			}
+		}
+
+		nextNodes.push(node);
+	}
+
+	return { nodes: nextNodes, removed };
+};
+
+export const insertTreeNode = <TNode>(
+	nodes: readonly TNode[],
+	parentId: string | null,
+	index: number,
+	nodeToInsert: TNode,
+	adapter: NavTreeAdapter<TNode>,
+): TNode[] => {
+	if (parentId === null) {
+		const nextNodes = [...nodes];
+		nextNodes.splice(Math.max(0, Math.min(index, nextNodes.length)), 0, nodeToInsert);
+		return nextNodes;
+	}
+
+	return nodes.map((node) => {
+		if (!adapter.isBranchNode(node)) {
+			return node;
+		}
+
+		if (adapter.getNodeId(node) === parentId) {
+			const nextChildren = [...adapter.getChildren(node)];
+			nextChildren.splice(Math.max(0, Math.min(index, nextChildren.length)), 0, nodeToInsert);
+			return adapter.withChildren(node, nextChildren);
+		}
+
+		return adapter.withChildren(node, insertTreeNode(adapter.getChildren(node), parentId, index, nodeToInsert, adapter));
+	});
+};
+
+export const moveTreeNode = <TNode>(
+	nodes: readonly TNode[],
+	draggedNodeId: string,
+	dropTarget: NavTreeDropTarget,
+	adapter: NavTreeAdapter<TNode>,
+): TNode[] => {
+	const location = findTreeNodeLocation(nodes, draggedNodeId, adapter);
+
+	if (!location) {
+		return [...nodes];
+	}
+
+	if (
+		adapter.isBranchNode(location.node) &&
+		dropTarget.parentId !== null &&
+		(treeContainsNode(adapter.getChildren(location.node), dropTarget.parentId, adapter) ||
+			dropTarget.parentId === adapter.getNodeId(location.node))
+	) {
+		return [...nodes];
+	}
+
+	let normalizedIndex = dropTarget.index;
+	if (dropTarget.parentId === location.parentId && dropTarget.index > location.index) {
+		normalizedIndex -= 1;
+	}
+
+	if (dropTarget.parentId === location.parentId && normalizedIndex === location.index) {
+		return [...nodes];
+	}
+
+	const removalResult = removeTreeNode(nodes, draggedNodeId, adapter);
+	if (!removalResult.removed) {
+		return [...nodes];
+	}
+
+	return insertTreeNode(removalResult.nodes, dropTarget.parentId, normalizedIndex, removalResult.removed, adapter);
+};
+
+export const getPointerRelativeY = (event: PointerEvent): number | null => {
+	const currentTarget = event.currentTarget;
+	if (!(currentTarget instanceof HTMLElement)) {
+		return null;
+	}
+
+	const bounds = currentTarget.getBoundingClientRect();
+	return bounds.height <= 0 ? 0.5 : (event.clientY - bounds.top) / bounds.height;
+};
+
+export const resolveTreeDropTarget = <TNode>(params: {
+	parentId: string | null;
+	index: number;
+	node: TNode;
+	relativeY: number;
+	adapter: NavTreeAdapter<TNode>;
+	beforeThreshold?: number;
+	beforeThresholdFirstSibling?: number;
+	afterThreshold?: number;
+}): NavTreeDropTarget => {
+	const {
+		parentId,
+		index,
+		node,
+		relativeY,
+		adapter,
+		beforeThreshold = 0.28,
+		beforeThresholdFirstSibling = 0.42,
+		afterThreshold = 0.72,
+	} = params;
+
+	const targetNodeId = adapter.getNodeId(node);
+
+	if (adapter.isBranchNode(node)) {
+		const nextBeforeThreshold = index === 0 ? beforeThresholdFirstSibling : beforeThreshold;
+
+		if (relativeY < nextBeforeThreshold) {
+			return { parentId, index, intent: "before", targetNodeId };
+		}
+
+		if (relativeY > afterThreshold) {
+			return { parentId, index: index + 1, intent: "after", targetNodeId };
+		}
+
+		return {
+			parentId: targetNodeId,
+			index: adapter.getChildren(node).length,
+			intent: "inside",
+			targetNodeId,
+		};
+	}
+
+	return {
+		parentId,
+		index: relativeY < 0.5 ? index : index + 1,
+		intent: relativeY < 0.5 ? "before" : "after",
+		targetNodeId,
+	};
+};