Feat: persist project tree hierarchy

Backend/internal/bootstrap/service.go

@@ -841,19 +841,34 @@ func (service *Service) loadProjectByID(ctx context.Context, projectID string) (
 }
 
 func (service *Service) GetProjectHierarchyFolders(ctx context.Context, projectID string) ([]ProjectHierarchyFolderRecord, error) {
+	return service.getProjectHierarchyFoldersByRootPath(ctx, projectID, projectHierarchyRootPath)
+}
+
+func (service *Service) GetProjectTreeFolders(ctx context.Context, projectID string) ([]ProjectHierarchyFolderRecord, error) {
+	return service.getProjectHierarchyFoldersByRootPath(ctx, projectID, projectTreeRootPath)
+}
+
+func (service *Service) getProjectHierarchyFoldersByRootPath(
+	ctx context.Context,
+	projectID string,
+	rootPath func(projectSlug string) string,
+) ([]ProjectHierarchyFolderRecord, error) {
 	project, err := service.loadProjectByID(ctx, projectID)
 	if err != nil {
 		return nil, err
 	}
 
+	rootParentPath := rootPath(project.Slug)
+
 	rows, err := service.db.Pool.Query(ctx, `
 		SELECT path, COALESCE(parent_path, ''), COALESCE(resource_name, '')
 		FROM posix_nodes
 		WHERE node_kind = 'directory'::posix_node_kind
 		  AND logical_type = 'hierarchy_folder'
 		  AND project_slug = $1
+		  AND path LIKE $2
 		ORDER BY depth ASC, path ASC;
-	`, project.Slug)
+	`, project.Slug, rootParentPath+"/%")
 	if err != nil {
 		return nil, err
 	}
@@ -872,16 +887,29 @@ func (service *Service) GetProjectHierarchyFolders(ctx context.Context, projectI
 		return nil, err
 	}
 
-	return buildProjectHierarchyFolderTree(folderRows, projectHierarchyRootPath(project.Slug)), nil
+	return buildProjectHierarchyFolderTree(folderRows, rootParentPath), nil
 }
 
 func (service *Service) CreateProjectFolder(ctx context.Context, input CreateProjectFolderInput) (CreateProjectFolderResult, error) {
+	return service.createProjectHierarchyFolder(ctx, input, projectHierarchyRootPath, service.createProjectHierarchyFolderOnDisk)
+}
+
+func (service *Service) CreateProjectTreeFolder(ctx context.Context, input CreateProjectFolderInput) (CreateProjectFolderResult, error) {
+	return service.createProjectHierarchyFolder(ctx, input, projectTreeRootPath, service.createProjectTreeFolderOnDisk)
+}
+
+func (service *Service) createProjectHierarchyFolder(
+	ctx context.Context,
+	input CreateProjectFolderInput,
+	rootPath func(projectSlug string) string,
+	createOnDisk func(projectSlug, parentFolderID, name string) (string, string, error),
+) (CreateProjectFolderResult, error) {
 	project, err := service.loadProjectByID(ctx, strings.TrimSpace(input.ProjectID))
 	if err != nil {
 		return CreateProjectFolderResult{}, err
 	}
 
-	createdPath, _, err := service.createProjectHierarchyFolderOnDisk(project.Slug, strings.TrimSpace(input.ParentFolderID), input.Name)
+	createdPath, _, err := createOnDisk(project.Slug, strings.TrimSpace(input.ParentFolderID), input.Name)
 	if err != nil {
 		return CreateProjectFolderResult{}, err
 	}
@@ -890,7 +918,7 @@ func (service *Service) CreateProjectFolder(ctx context.Context, input CreatePro
 		return CreateProjectFolderResult{}, fmt.Errorf("rebuild POSIX projection: %w", err)
 	}
 
-	folders, err := service.GetProjectHierarchyFolders(ctx, project.ID)
+	folders, err := service.getProjectHierarchyFoldersByRootPath(ctx, project.ID, rootPath)
 	if err != nil {
 		return CreateProjectFolderResult{}, err
 	}
@@ -1183,8 +1211,19 @@ func (service *Service) ensureBootstrapPOSIXSkeleton(
 }
 
 func (service *Service) createProjectHierarchyFolderOnDisk(projectSlug, parentFolderID, name string) (string, string, error) {
-	rootPath := strings.TrimSpace(service.posixRoot)
+	return service.createProjectFolderOnDisk(projectSlug, parentFolderID, name, projectHierarchyRootPath)
-	if rootPath == "" {
+}
+
+func (service *Service) createProjectTreeFolderOnDisk(projectSlug, parentFolderID, name string) (string, string, error) {
+	return service.createProjectFolderOnDisk(projectSlug, parentFolderID, name, projectTreeRootPath)
+}
+
+func (service *Service) createProjectFolderOnDisk(
+	projectSlug, parentFolderID, name string,
+	rootPathBuilder func(projectSlug string) string,
+) (string, string, error) {
+	posixRoot := strings.TrimSpace(service.posixRoot)
+	if posixRoot == "" {
 		return "", "", fmt.Errorf("POSIX root is not configured")
 	}
 
@@ -1193,14 +1232,12 @@ func (service *Service) createProjectHierarchyFolderOnDisk(projectSlug, parentFo
 		return "", "", fmt.Errorf("folder name is required")
 	}
 
-	projectRoot := filepath.Join(rootPath, "projects", slugDir("project", projectSlug))
+	containerProjectionPath := rootPathBuilder(projectSlug)
-	childrenRoot := filepath.Join(projectRoot, "children")
+	parentDir := filepath.Join(posixRoot, filepath.FromSlash(containerProjectionPath))
-	parentDir := childrenRoot
-	containerProjectionPath := projectHierarchyRootPath(projectSlug)
 
 	if strings.TrimSpace(parentFolderID) != "" {
 		containerProjectionPath = filepath.ToSlash(filepath.Join(strings.TrimSpace(parentFolderID), "children"))
-		parentDir = filepath.Join(rootPath, filepath.FromSlash(containerProjectionPath))
+		parentDir = filepath.Join(posixRoot, filepath.FromSlash(containerProjectionPath))
 		info, err := os.Stat(parentDir)
 		if err != nil {
 			if os.IsNotExist(err) {
@@ -1324,6 +1361,10 @@ func projectHierarchyRootPath(projectSlug string) string {
 	return filepath.ToSlash(filepath.Join("projects", slugDir("project", projectSlug), "children"))
 }
 
+func projectTreeRootPath(projectSlug string) string {
+	return filepath.ToSlash(filepath.Join("projects", slugDir("project", projectSlug), "tree"))
+}
+
 func normalizePOSIXSlug(value string) string {
 	trimmed := strings.TrimSpace(strings.ToLower(value))
 	if trimmed == "" {

Backend/internal/bootstrap/service_test.go

@@ -161,6 +161,56 @@ func TestCreateProjectHierarchyFolderOnDiskCreatesExpectedFolderShape(t *testing
 	}
 }
 
+func TestCreateProjectTreeFolderOnDiskCreatesExpectedFolderShape(t *testing.T) {
+	rootPath := filepath.Join(t.TempDir(), "POSIX")
+	service := NewService(nil, rootPath)
+
+	err := service.ensureBootstrapPOSIXSkeleton(
+		InstallationRecord{ID: "installation-1", Name: "MangoPig", Mode: "personal", Access: "local", Protocol: "http", Host: "localhost", IsBootstrapped: true},
+		AdminSummary{ID: "admin-1", Email: "ronald@example.com", DisplayName: "Ronald"},
+		namedRecord{ID: "org-1", Name: "Primary Organization", Slug: "primary-organization"},
+		namedRecord{ID: "dept-1", Name: "Primary Department", Slug: "primary-department"},
+		namedRecord{ID: "team-1", Name: "Primary Team", Slug: "primary-team"},
+		namedRecord{ID: "project-1", Name: "Primary Project", Slug: "primary-project"},
+	)
+	if err != nil {
+		t.Fatalf("ensure bootstrap POSIX skeleton: %v", err)
+	}
+
+	createdPath, createdSlug, err := service.createProjectTreeFolderOnDisk("primary-project", "", "Docs")
+	if err != nil {
+		t.Fatalf("createProjectTreeFolderOnDisk root folder: %v", err)
+	}
+	if createdPath != "projects/project-primary-project/tree/folder-docs" {
+		t.Fatalf("unexpected created path: %s", createdPath)
+	}
+	if createdSlug != "docs" {
+		t.Fatalf("unexpected created slug: %s", createdSlug)
+	}
+
+	createdFolderPath := filepath.Join(rootPath, "projects", "project-primary-project", "tree", "folder-docs")
+	for _, path := range []string{
+		filepath.Join(createdFolderPath, "folder.json"),
+		filepath.Join(createdFolderPath, "acl.json"),
+		filepath.Join(createdFolderPath, "children"),
+	} {
+		if _, err := os.Stat(path); err != nil {
+			t.Fatalf("expected path to exist %s: %v", path, err)
+		}
+	}
+
+	nestedPath, nestedSlug, err := service.createProjectTreeFolderOnDisk("primary-project", createdPath, "Research")
+	if err != nil {
+		t.Fatalf("createProjectTreeFolderOnDisk nested folder: %v", err)
+	}
+	if nestedPath != "projects/project-primary-project/tree/folder-docs/children/folder-research" {
+		t.Fatalf("unexpected nested path: %s", nestedPath)
+	}
+	if nestedSlug != "research" {
+		t.Fatalf("unexpected nested slug: %s", nestedSlug)
+	}
+}
+
 func TestBuildProjectHierarchyFolderTreeBuildsNestedStructure(t *testing.T) {
 	rows := []projectHierarchyFolderRow{
 		{Path: "projects/project-primary-project/children/folder-design", ParentPath: projectHierarchyRootPath("primary-project"), Label: "Design"},

Backend/internal/httpx/api_project_routes.go

@@ -79,6 +79,68 @@ func (routes apiRoutes) handleCreateProjectFolder(w http.ResponseWriter, r *http
 	})
 }
 
+func (routes apiRoutes) handleProjectTreeFolders(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
+	}
+
+	folders, err := routes.bootstrapService().GetProjectTreeFolders(r.Context(), projectID)
+	if err != nil {
+		routes.writeProjectFolderError(w, r, err)
+		return
+	}
+
+	WriteJSON(w, http.StatusOK, map[string]any{
+		"data": map[string]any{
+			"projectId": projectID,
+			"folders":   folders,
+		},
+		"meta": map[string]any{
+			"resource": "project-tree-folders",
+		},
+	})
+}
+
+func (routes apiRoutes) handleCreateProjectTreeFolder(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, ok := decodeProjectFolderRequest(w, r)
+	if !ok {
+		return
+	}
+
+	payload.Name = strings.TrimSpace(payload.Name)
+	payload.ParentFolderID = strings.TrimSpace(payload.ParentFolderID)
+	if payload.Name == "" {
+		WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Folder name is required.")
+		return
+	}
+
+	result, err := routes.bootstrapService().CreateProjectTreeFolder(r.Context(), bootstrapservice.CreateProjectFolderInput{
+		ProjectID:      projectID,
+		ParentFolderID: payload.ParentFolderID,
+		Name:           payload.Name,
+	})
+	if err != nil {
+		routes.writeProjectFolderError(w, r, err)
+		return
+	}
+
+	WriteJSON(w, http.StatusCreated, map[string]any{
+		"data": result,
+		"meta": map[string]any{
+			"resource":  "project-tree-folder-create",
+			"persisted": true,
+		},
+	})
+}
+
 func (routes apiRoutes) writeProjectFolderError(w http.ResponseWriter, r *http.Request, err error) {
 	switch {
 	case errors.Is(err, bootstrapservice.ErrProjectNotFound), errors.Is(err, bootstrapservice.ErrProjectFolderNotFound):

Backend/internal/httpx/api_routes.go

@@ -36,6 +36,8 @@ 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.Get("/tree/folders", routes.handleProjectTreeFolders)
+			projectRouter.Post("/tree/folders", routes.handleCreateProjectTreeFolder)
 		})
 
 		if routes.cfg.Config.IsDevelopment() {

Backend/internal/posixproj/projector.go

@@ -411,7 +411,7 @@ func classifyPath(relPath string, isDir bool) (logicalType, fileRole string) {
 				return "hierarchy_folder", ""
 			}
 			if hasTreeAncestor && strings.HasPrefix(name, "folder-") {
-				return "folder", ""
+				return "hierarchy_folder", ""
 			}
 			if hasTreeAncestor && strings.HasPrefix(name, "item-") {
 				return "item", ""
@@ -425,7 +425,7 @@ func classifyPath(relPath string, isDir bool) (logicalType, fileRole string) {
 				return "item", fileRole
 			}
 			if strings.HasPrefix(parentName, "folder-") {
-				return "folder", fileRole
+				return "hierarchy_folder", fileRole
 			}
 		}
 		return "project", fileRole

Backend/internal/posixproj/projector_test.go

@@ -16,6 +16,7 @@ func TestScanRootBuildsProjectedNodesFromBootstrapShape(t *testing.T) {
 	mustMkdirAll(t, filepath.Join(root, "projects", "project-primary-project", "children", "folder-design", "children", "project-web", "children"))
 	mustMkdirAll(t, filepath.Join(root, "projects", "project-primary-project", "children", "folder-design", "children", "project-web", "tree"))
 	mustMkdirAll(t, filepath.Join(root, "projects", "project-primary-project", "tree"))
+	mustMkdirAll(t, filepath.Join(root, "projects", "project-primary-project", "tree", "folder-docs", "children"))
 	mustMkdirAll(t, filepath.Join(root, "projects", "project-primary-project", "tree", "folder-docs", "item-roadmap"))
 	mustMkdirAll(t, filepath.Join(root, "users", "personals"))
 
@@ -185,10 +186,15 @@ func TestScanRootBuildsProjectedNodesFromBootstrapShape(t *testing.T) {
 	}
 
 	treeFolder := index["projects/project-primary-project/tree/folder-docs"]
-	if treeFolder.LogicalType != "folder" || treeFolder.ProjectSlug != "primary-project" {
+	if treeFolder.LogicalType != "hierarchy_folder" || treeFolder.ProjectSlug != "primary-project" {
 		t.Fatalf("unexpected tree folder node: %#v", treeFolder)
 	}
 
+	treeFolderACL := index["projects/project-primary-project/tree/folder-docs/folder.json"]
+	if treeFolderACL.LogicalType != "hierarchy_folder" || treeFolderACL.FileRole != "folder" {
+		t.Fatalf("unexpected tree folder file classification: %#v", treeFolderACL)
+	}
+
 	treeItem := index["projects/project-primary-project/tree/folder-docs/item-roadmap/item.json"]
 	if treeItem.LogicalType != "item" || treeItem.FileRole != "item" {
 		t.Fatalf("unexpected tree item classification: %#v", treeItem)

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

@@ -187,30 +187,53 @@
   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: 1px solid transparent;
+  border: 0;
-  border-radius: var(--radius-lg);
+  border-radius: 0;
   background: transparent;
   color: var(--color-text-muted);
   text-align: left;
   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);
+
+	&::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 {
-  background: color-mix(in srgb, var(--color-surface-hover) 80%, var(--color-accent-soft) 20%);
   color: var(--color-text);
-  box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
+
+	&::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 {
@@ -224,18 +247,43 @@
 }
 
 .treeItemDropBefore {
-	box-shadow: inset 0 2px 0 color-mix(in srgb, var(--color-accent-strong) 78%, transparent);
+	&::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 {
-	box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--color-accent-strong) 78%, transparent);
+	&::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;
+	}
 }
 
 .treeItemDropInside {
-	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));
 	color: var(--color-text);
-	box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
+
+	&::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 {
@@ -248,10 +296,13 @@
 }
 
 .treeItemActive {
-  border-color: var(--color-border);
-  background: var(--color-surface);
   color: var(--color-text);
-  box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
+
+	&::after {
+		border-color: var(--color-border);
+		background: var(--color-surface);
+		box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
+	}
 }
 
 .navItemActive {

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

@@ -1,7 +1,8 @@
 // Path: Frontend/src/components/shell/WorkspaceSidebar/WorkspaceSidebar.tsx
 
 import { For, Show, createEffect, createSignal, onCleanup, onMount, type JSX } from "solid-js";
-import { ChevronLeft, ChevronRight, Folder } from "../../../lib/icons";
+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 {
@@ -49,40 +50,53 @@ type WorkspaceNodeLocation = {
 	node: WorkspaceTreeNode;
 };
 
-const LONG_PRESS_MS = 320;
+type PersistedWorkspaceFolderRecord = {
+	id: string;
+	label: string;
+	children?: PersistedWorkspaceFolderRecord[];
+};
 
-const createWorkspaceFolderId = (): string => `folder-${Math.random().toString(36).slice(2, 10)}`;
+type WorkspaceFoldersResponse = {
+	data?: {
+		folders?: PersistedWorkspaceFolderRecord[];
+	};
+	error?: string;
+	message?: string;
+};
+
+const LONG_PRESS_MS = 320;
 
 const getWorkspaceTreeNodeId = (node: WorkspaceTreeNode): string => node.id;
 
-const insertWorkspaceFolderNode = (
+const buildPersistedWorkspaceFolderNodes = (
-	nodes: readonly WorkspaceTreeNode[],
+	folders: readonly PersistedWorkspaceFolderRecord[],
-	parentId: string | null,
+): WorkspaceTreeNode[] =>
-	folder: WorkspaceTreeNode,
+	folders.map((folder) => ({
-): readonly WorkspaceTreeNode[] => {
+		id: folder.id,
-	if (parentId === null) {
+		label: folder.label,
-		return [...nodes, folder];
+		kind: "folder",
+		icon: Folder,
+		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 nodes.map((node) => {
+	return folderIds;
-		if (node.kind !== "folder") {
-			return node;
-		}
-
-		if (node.id === parentId) {
-			return {
-				...node,
-				children: [...(node.children ?? []), folder],
-			};
-		}
-
-		return {
-			...node,
-			children: node.children ? insertWorkspaceFolderNode(node.children, parentId, folder) : node.children,
-		};
-	});
 };
 
+const readPersistedWorkspaceFolders = (body: WorkspaceFoldersResponse): PersistedWorkspaceFolderRecord[] =>
+	Array.isArray(body.data?.folders) ? body.data.folders : [];
+
 const findWorkspaceFolderDepth = (nodes: readonly WorkspaceTreeNode[], folderId: string, depth = 0): number | null => {
 	for (const node of nodes) {
 		if (node.kind !== "folder") {
@@ -292,10 +306,6 @@ const WorkspaceHomeEntry = (props: {
 	item: WorkspaceStaticItem;
 	onOpenContextMenu: (event: MouseEvent, target: WorkspaceContextMenuTarget) => void;
 	onOpenContextMenuFromKeyboard: (element: HTMLElement, target: WorkspaceContextMenuTarget) => void;
-	onNodePointerDown: (event: PointerEvent, nodeId: string) => void;
-	onNodePointerMove: (event: PointerEvent, parentId: string | null, index: number, node: WorkspaceTreeNode) => void;
-	dragState: WorkspaceDragState | null;
-	isTreeClickSuppressed: () => boolean;
 }): JSX.Element => {
 	const Icon = props.item.icon;
 	const target = createWorkspaceStaticTarget(props.item);
@@ -350,17 +360,21 @@ const WorkspaceTreeBranch = (props: {
 	onCancelPendingFolder: () => void;
 	onOpenContextMenu: (event: MouseEvent, target: WorkspaceContextMenuTarget) => void;
 	onOpenContextMenuFromKeyboard: (element: HTMLElement, target: WorkspaceContextMenuTarget) => void;
+	onNodePointerDown: (event: PointerEvent, nodeId: string) => void;
+	onNodePointerMove: (event: PointerEvent, parentId: string | null, index: number, node: WorkspaceTreeNode) => void;
+	dragState: WorkspaceDragState | null;
+	isTreeClickSuppressed: () => boolean;
 }): JSX.Element => {
 	const depth = () => props.depth ?? 0;
 	const parentId = () => props.parentId ?? null;
 
 	return (
 		<ul class={styles.treeList} role="list">
-		<Show when={props.nodes.length === 0 && props.pendingFolderDraft?.parentId !== parentId()}>
+			<Show when={props.nodes.length === 0 && props.pendingFolderDraft?.parentId !== parentId()}>
-			<li>
+				<li>
-				<div class={styles.treeEmptySlot} style={{ "--tree-depth": String(depth()) }} />
+					<div class={styles.treeEmptySlot} style={{ "--tree-depth": String(depth()) }} />
-			</li>
+				</li>
-		</Show>
+			</Show>
 			<For each={props.nodes}>
 				{(node, indexAccessor): JSX.Element => {
 					const Icon = getWorkspaceNodeIcon(node);
@@ -380,12 +394,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()) }}
@@ -455,15 +469,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>
 					);
@@ -485,24 +499,100 @@ const WorkspaceTreeBranch = (props: {
 
 export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 	const appShellData = useAppShellData();
+	const activeProject = () => appShellData.activeProject();
 	const [isProjectDrawerOpen, setIsProjectDrawerOpen] = createSignal(false);
 	const [workspaceTreeNodes, setWorkspaceTreeNodes] = createSignal<readonly WorkspaceTreeNode[]>(appShellData.workspaceTree());
+	const [persistedFolders, setPersistedFolders] = createSignal<readonly PersistedWorkspaceFolderRecord[]>([]);
 	const [collapsedFolderIds, setCollapsedFolderIds] = createSignal<readonly string[]>([]);
 	const [pendingFolderDraft, setPendingFolderDraft] = createSignal<PendingWorkspaceFolderDraft | null>(null);
 	const [pendingFolderName, setPendingFolderName] = createSignal("");
 	const [dragState, setDragState] = createSignal<WorkspaceDragState | null>(null);
 	const [suppressNextTreeClick, setSuppressNextTreeClick] = createSignal(false);
+	let lastSelectedProjectId: string | null = null;
+	let latestPersistedFoldersRequest = 0;
 	const contextMenu = createWorkspaceContextMenuController();
 	let longPressTimer: number | undefined;
 	let suppressClickTimer: number | undefined;
 	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 totalFolderCount = (): number => folderIds().length;
+	const areAllFoldersCollapsed = (): boolean => {
+		const count = totalFolderCount();
+		return count > 0 && collapsedFolderIds().length >= count;
+	};
+	const workspaceFolderToggleLabel = (): string =>
+		areAllFoldersCollapsed() ? "Expand all folders" : "Collapse all folders";
 	const toggleFolder = (folderId: string): void => {
 		setCollapsedFolderIds((current) =>
 			current.includes(folderId) ? current.filter((id) => id !== folderId) : [...current, folderId],
 		);
 	};
+	const expandAllFolders = (): void => {
+		setCollapsedFolderIds([]);
+	};
+	const collapseAllFolders = (): void => {
+		setCollapsedFolderIds(folderIds());
+	};
+	const toggleAllFolders = (): void => {
+		if (areAllFoldersCollapsed()) {
+			expandAllFolders();
+			return;
+		}
+
+		collapseAllFolders();
+	};
+	const resetWorkspaceTreeInteractionState = (): void => {
+		setCollapsedFolderIds([]);
+		setPendingFolderDraft(null);
+		setPendingFolderName("");
+		setDragState(null);
+	};
+	const syncWorkspaceTree = (): void => {
+		const nextTree = activeProject()?.id
+			? buildPersistedWorkspaceFolderNodes(persistedFolders())
+			: appShellData.workspaceTree();
+		const availableFolderIds = new Set(collectWorkspaceFolderIds(nextTree));
+
+		setWorkspaceTreeNodes(nextTree);
+		setCollapsedFolderIds((current) => current.filter((id) => availableFolderIds.has(id)));
+	};
+	const loadPersistedFolders = async (projectId: string): Promise<void> => {
+		const requestId = latestPersistedFoldersRequest + 1;
+		latestPersistedFoldersRequest = requestId;
+
+		if (!projectId) {
+			setPersistedFolders([]);
+			return;
+		}
+
+		try {
+			const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/tree/folders`, {
+				headers: {
+					Accept: "application/json",
+				},
+			});
+			const body = (await response.json()) as WorkspaceFoldersResponse;
+
+			if (requestId !== latestPersistedFoldersRequest) {
+				return;
+			}
+
+			if (!response.ok) {
+				throw new Error(body.message || "Failed to load project tree folders.");
+			}
+
+			setPersistedFolders(readPersistedWorkspaceFolders(body));
+		} catch (error) {
+			if (requestId !== latestPersistedFoldersRequest) {
+				return;
+			}
+
+			console.error(error);
+			setPersistedFolders([]);
+		}
+	};
 	const clearLongPressTimer = (): void => {
 		if (longPressTimer !== undefined) {
 			window.clearTimeout(longPressTimer);
@@ -523,11 +613,27 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 	};
 
 	createEffect(() => {
-		setWorkspaceTreeNodes(appShellData.workspaceTree());
+		syncWorkspaceTree();
-		setCollapsedFolderIds([]);
+	});
-		setPendingFolderDraft(null);
+
-		setPendingFolderName("");
+	createEffect(() => {
-		setDragState(null);
+		const projectId = activeProject()?.id ?? null;
+
+		if (lastSelectedProjectId === null) {
+			lastSelectedProjectId = projectId;
+			return;
+		}
+
+		if (projectId === lastSelectedProjectId) {
+			return;
+		}
+
+		lastSelectedProjectId = projectId;
+		resetWorkspaceTreeInteractionState();
+	});
+
+	createEffect(() => {
+		void loadPersistedFolders(activeProject()?.id ?? "");
 	});
 
 	onMount(() => {
@@ -587,9 +693,10 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 		setPendingFolderDraft({ parentId, depth });
 	};
 
-	const submitPendingFolder = (): void => {
+	const submitPendingFolder = async (): Promise<void> => {
 		const name = pendingFolderName().trim();
 		const draft = pendingFolderDraft();
+		const projectId = activeProject()?.id ?? "";
 
 		if (!draft) {
 			return;
@@ -601,17 +708,36 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 			return;
 		}
 
-		setWorkspaceTreeNodes((current) =>
+		if (!projectId) {
-			insertWorkspaceFolderNode(current, draft.parentId, {
+			cancelPendingFolder();
-				id: createWorkspaceFolderId(),
+			return;
-				label: name,
+		}
-				kind: "folder",
+
-				icon: Folder,
+		try {
-				children: [],
+			const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/tree/folders`, {
-			}),
+				method: "POST",
-		);
+				headers: {
-		setPendingFolderDraft(null);
+					Accept: "application/json",
-		setPendingFolderName("");
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					name,
+					parentFolderId: draft.parentId,
+				}),
+			});
+
+			const body = (await response.json()) as WorkspaceFoldersResponse;
+
+			if (!response.ok) {
+				throw new Error(body.message || "Failed to create project tree folder.");
+			}
+
+			setPersistedFolders(readPersistedWorkspaceFolders(body));
+			setPendingFolderDraft(null);
+			setPendingFolderName("");
+		} catch (error) {
+			console.error(error);
+		}
 	};
 
 	const cancelPendingFolder = (): void => {
@@ -619,6 +745,17 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 		setPendingFolderName("");
 	};
 
+	const handleHeaderActionClick = (actionId: string): void => {
+		switch (actionId) {
+			case "toggle-workspace-folders":
+				toggleAllFolders();
+				return;
+			case "search-workspace":
+			default:
+				return;
+		}
+	};
+
 	const handleNodePointerDown = (event: PointerEvent, nodeId: string): void => {
 		if (event.button !== 0 || pendingFolderDraft()) {
 			return;
@@ -643,14 +780,23 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 			return;
 		}
 
-		const bounds = event.currentTarget.getBoundingClientRect();
+		const currentTarget = event.currentTarget;
+		if (!(currentTarget instanceof HTMLElement)) {
+			return;
+		}
+
+		const bounds = currentTarget.getBoundingClientRect();
 		const relativeY = bounds.height <= 0 ? 0.5 : (event.clientY - bounds.top) / bounds.height;
 		let nextTarget: WorkspaceDragTarget;
 
 		if (node.kind === "folder") {
-			if (relativeY < 0.28) {
+			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 > 0.72) {
+			} else if (relativeY > afterThreshold) {
 				nextTarget = { parentId, index: index + 1, intent: "after", targetNodeId: node.id };
 			} else {
 				nextTarget = {
@@ -729,12 +875,30 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 							{props.railCollapsed ? <ChevronRight size={16} strokeWidth={2} /> : <ChevronLeft size={16} strokeWidth={2} />}
 						</button>
 
-						<For each={workspaceSidebarHeaderActions}>
+					<For each={workspaceSidebarHeaderActions}>
-							{(action): JSX.Element => {
+						{(action): JSX.Element => {
-								const Icon = action.icon;
+							const label =
+								action.id === "toggle-workspace-folders"
+										? workspaceFolderToggleLabel()
+										: action.label;
+							const Icon =
+								action.id === "toggle-workspace-folders"
+										? areAllFoldersCollapsed()
+											? UnfoldVertical
+											: ListCollapse
+										: action.icon;
 
-								return (
+							return (
-									<button type="button" class={styles.headerActionButton} aria-label={action.label} title={action.label} data-slot="workspace-sidebar-header-action" data-action-id={action.id}>
+								<button
+									type="button"
+									class={styles.headerActionButton}
+									aria-label={label}
+									title={label}
+									data-slot="workspace-sidebar-header-action"
+									data-action-id={action.id}
+									disabled={action.id === "toggle-workspace-folders" && totalFolderCount() === 0}
+									onClick={(): void => handleHeaderActionClick(action.id)}
+									>
 										<Icon size={16} strokeWidth={2} />
 									</button>
 								);
@@ -794,13 +958,13 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
 								onPendingFolderNameChange={setPendingFolderName}
 								onSubmitPendingFolder={submitPendingFolder}
 								onCancelPendingFolder={cancelPendingFolder}
-								onOpenContextMenu={contextMenu.openMenu}
+									onOpenContextMenu={contextMenu.openMenu}
-								onOpenContextMenuFromKeyboard={contextMenu.openMenuFromElement}
+									onOpenContextMenuFromKeyboard={contextMenu.openMenuFromElement}
-								onNodePointerDown={handleNodePointerDown}
+									onNodePointerDown={handleNodePointerDown}
-								onNodePointerMove={handleNodePointerMove}
+									onNodePointerMove={handleNodePointerMove}
-								dragState={dragState()}
+									dragState={dragState()}
-								isTreeClickSuppressed={suppressNextTreeClick}
+									isTreeClickSuppressed={suppressNextTreeClick}
-							/>
+								/>
 						</div>
 					</div>
 				</div>

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

@@ -9,6 +9,7 @@ import {
 	Home,
 	Keyboard,
 	LayoutGrid,
+	ListCollapse,
 	LogOut,
 	Repeat,
 	Search,
@@ -476,6 +477,7 @@ export const workspaceTree: readonly WorkspaceTreeNode[] = [
 
 export const workspaceSidebarHeaderActions: readonly SidebarHeaderAction[] = [
 	{ id: "search-workspace", label: "Search workspace", icon: Search },
+	{ id: "toggle-workspace-folders", label: "Collapse all folders", icon: ListCollapse },
 ] as const;
 
 export const mobileBottomNavItems: readonly MobileBottomNavItem[] = [