Compare commits

..

13 Commits

Author SHA1 Message Date
MangoPig 4fb073a1ff Merge branch 'Fix/Frontend/Folder-Move-Persistence' 2026-06-24 18:00:05 +01:00
MangoPig 9ddfa0c3c7 Fix: persist folder drag and drop moves 2026-06-24 17:59:43 +01:00
MangoPig a92e188f84 Merge branch 'Fix/Frontend/Folder-Casing' 2026-06-24 17:24:59 +01:00
MangoPig dcf181d640 Fix: preserve folder label casing 2026-06-24 17:24:59 +01:00
MangoPig 1a8556df68 Merge branch 'Feature/Renaming-Folders' 2026-06-24 17:07:27 +01:00
MangoPig a5f0c41cba Feat: add persisted folder rename 2026-06-24 17:07:08 +01:00
MangoPig 268093d223 Merge branch 'Fix/Backend/Project-Item-Deletion' 2026-06-24 16:15:49 +01:00
MangoPig c64a7b8d44 Fix: add persisted project folder deletion 2026-06-24 16:15:30 +01:00
MangoPig 0b368b09fa Merge branch 'Refactor/Frontend/Nav-DragAndDrop-Logic' 2026-06-24 02:11:23 +01:00
MangoPig 212dd1c435 Refactor: share nav drag and drop logic 2026-06-24 02:11:02 +01:00
MangoPig 69af324b1b Merge branch 'Fix/Project-Tree-Items-Persistence' 2026-06-24 01:29:40 +01:00
MangoPig 5758074f6f Feat: persist project tree hierarchy 2026-06-24 01:28:50 +01:00
MangoPig 5b9e14b442 Merge branch 'Fix/Backend/Project-Folder-Persistence' 2026-06-22 14:15:34 +01:00
13 changed files with 2540 additions and 820 deletions
+518 -17
View File
@@ -45,6 +45,7 @@ var (
ErrAdminNotConfigured = errors.New("bootstrap admin step has not been completed")
ErrProjectNotFound = errors.New("project not found")
ErrProjectFolderNotFound = errors.New("project folder not found")
ErrInvalidProjectFolderMove = errors.New("invalid project folder move")
)
type Service struct {
@@ -192,12 +193,49 @@ type CreateProjectFolderInput struct {
Name string
}
type DeleteProjectFolderInput struct {
ProjectID string
FolderID string
}
type RenameProjectFolderInput struct {
ProjectID string
FolderID string
Name string
}
type MoveProjectFolderInput struct {
ProjectID string
FolderID string
ParentFolderID 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 RenameProjectFolderResult struct {
ProjectID string `json:"projectId"`
PreviousFolderID string `json:"previousFolderId"`
RenamedFolder ProjectHierarchyFolderRecord `json:"renamedFolder"`
Folders []ProjectHierarchyFolderRecord `json:"folders"`
}
type MoveProjectFolderResult struct {
ProjectID string `json:"projectId"`
PreviousFolderID string `json:"previousFolderId"`
MovedFolder ProjectHierarchyFolderRecord `json:"movedFolder"`
Folders []ProjectHierarchyFolderRecord `json:"folders"`
}
type projectHierarchyFolderRow struct {
Path string
ParentPath string
@@ -841,19 +879,40 @@ 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
ORDER BY depth ASC, path ASC;
`, project.Slug)
SELECT
directories.path,
COALESCE(directories.parent_path, ''),
COALESCE(folder_meta.resource_name, directories.resource_name, '')
FROM posix_nodes AS directories
LEFT JOIN posix_nodes AS folder_meta
ON folder_meta.path = directories.path || '/folder.json'
AND folder_meta.node_kind = 'file'::posix_node_kind
WHERE directories.node_kind = 'directory'::posix_node_kind
AND directories.logical_type = 'hierarchy_folder'
AND directories.project_slug = $1
AND directories.path LIKE $2
ORDER BY directories.depth ASC, directories.path ASC;
`, project.Slug, rootParentPath+"/%")
if err != nil {
return nil, err
}
@@ -872,16 +931,53 @@ 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) 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) RenameProjectFolder(ctx context.Context, input RenameProjectFolderInput) (RenameProjectFolderResult, error) {
return service.renameProjectHierarchyFolder(ctx, input, projectHierarchyRootPath, service.renameProjectHierarchyFolderOnDisk)
}
func (service *Service) RenameProjectTreeFolder(ctx context.Context, input RenameProjectFolderInput) (RenameProjectFolderResult, error) {
return service.renameProjectHierarchyFolder(ctx, input, projectTreeRootPath, service.renameProjectTreeFolderOnDisk)
}
func (service *Service) MoveProjectFolder(ctx context.Context, input MoveProjectFolderInput) (MoveProjectFolderResult, error) {
return service.moveProjectHierarchyFolder(ctx, input, projectHierarchyRootPath, service.moveProjectHierarchyFolderOnDisk)
}
func (service *Service) MoveProjectTreeFolder(ctx context.Context, input MoveProjectFolderInput) (MoveProjectFolderResult, error) {
return service.moveProjectHierarchyFolder(ctx, input, projectTreeRootPath, service.moveProjectTreeFolderOnDisk)
}
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 +986,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
}
@@ -907,6 +1003,128 @@ func (service *Service) CreateProjectFolder(ctx context.Context, input CreatePro
}, 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) renameProjectHierarchyFolder(
ctx context.Context,
input RenameProjectFolderInput,
rootPath func(projectSlug string) string,
renameOnDisk func(projectSlug, folderID, name string) (string, string, error),
) (RenameProjectFolderResult, error) {
project, err := service.loadProjectByID(ctx, strings.TrimSpace(input.ProjectID))
if err != nil {
return RenameProjectFolderResult{}, err
}
previousFolderID, renamedFolderID, err := renameOnDisk(project.Slug, input.FolderID, input.Name)
if err != nil {
return RenameProjectFolderResult{}, err
}
if err := posixproj.NewProjector(service.db, service.posixRoot).Rebuild(ctx); err != nil {
return RenameProjectFolderResult{}, fmt.Errorf("rebuild POSIX projection: %w", err)
}
folders, err := service.getProjectHierarchyFoldersByRootPath(ctx, project.ID, rootPath)
if err != nil {
return RenameProjectFolderResult{}, err
}
renamedFolder, found := findProjectHierarchyFolder(folders, renamedFolderID)
if !found {
return RenameProjectFolderResult{}, fmt.Errorf("renamed project folder missing from projection")
}
if _, found := findProjectHierarchyFolder(folders, previousFolderID); found {
return RenameProjectFolderResult{}, fmt.Errorf("previous project folder path still present in projection")
}
return RenameProjectFolderResult{
ProjectID: project.ID,
PreviousFolderID: previousFolderID,
RenamedFolder: renamedFolder,
Folders: folders,
}, nil
}
func (service *Service) moveProjectHierarchyFolder(
ctx context.Context,
input MoveProjectFolderInput,
rootPath func(projectSlug string) string,
moveOnDisk func(projectSlug, folderID, parentFolderID string) (string, string, error),
) (MoveProjectFolderResult, error) {
project, err := service.loadProjectByID(ctx, strings.TrimSpace(input.ProjectID))
if err != nil {
return MoveProjectFolderResult{}, err
}
previousFolderID, movedFolderID, err := moveOnDisk(project.Slug, input.FolderID, input.ParentFolderID)
if err != nil {
return MoveProjectFolderResult{}, err
}
if err := posixproj.NewProjector(service.db, service.posixRoot).Rebuild(ctx); err != nil {
return MoveProjectFolderResult{}, fmt.Errorf("rebuild POSIX projection: %w", err)
}
folders, err := service.getProjectHierarchyFoldersByRootPath(ctx, project.ID, rootPath)
if err != nil {
return MoveProjectFolderResult{}, err
}
movedFolder, found := findProjectHierarchyFolder(folders, movedFolderID)
if !found {
return MoveProjectFolderResult{}, fmt.Errorf("moved project folder missing from projection")
}
if previousFolderID != movedFolderID {
if _, found := findProjectHierarchyFolder(folders, previousFolderID); found {
return MoveProjectFolderResult{}, fmt.Errorf("previous project folder path still present in projection")
}
}
return MoveProjectFolderResult{
ProjectID: project.ID,
PreviousFolderID: previousFolderID,
MovedFolder: movedFolder,
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
@@ -1183,8 +1401,43 @@ func (service *Service) ensureBootstrapPOSIXSkeleton(
}
func (service *Service) createProjectHierarchyFolderOnDisk(projectSlug, parentFolderID, name string) (string, string, error) {
rootPath := strings.TrimSpace(service.posixRoot)
if rootPath == "" {
return service.createProjectFolderOnDisk(projectSlug, parentFolderID, name, projectHierarchyRootPath)
}
func (service *Service) createProjectTreeFolderOnDisk(projectSlug, parentFolderID, name string) (string, string, error) {
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) renameProjectHierarchyFolderOnDisk(projectSlug, folderID, name string) (string, string, error) {
return service.renameProjectFolderOnDisk(projectSlug, folderID, name, projectHierarchyRootPath)
}
func (service *Service) renameProjectTreeFolderOnDisk(projectSlug, folderID, name string) (string, string, error) {
return service.renameProjectFolderOnDisk(projectSlug, folderID, name, projectTreeRootPath)
}
func (service *Service) moveProjectHierarchyFolderOnDisk(projectSlug, folderID, parentFolderID string) (string, string, error) {
return service.moveProjectFolderOnDisk(projectSlug, folderID, parentFolderID, projectHierarchyRootPath)
}
func (service *Service) moveProjectTreeFolderOnDisk(projectSlug, folderID, parentFolderID string) (string, string, error) {
return service.moveProjectFolderOnDisk(projectSlug, folderID, parentFolderID, 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 +1446,12 @@ func (service *Service) createProjectHierarchyFolderOnDisk(projectSlug, parentFo
return "", "", fmt.Errorf("folder name is required")
}
projectRoot := filepath.Join(rootPath, "projects", slugDir("project", projectSlug))
childrenRoot := filepath.Join(projectRoot, "children")
parentDir := childrenRoot
containerProjectionPath := projectHierarchyRootPath(projectSlug)
containerProjectionPath := rootPathBuilder(projectSlug)
parentDir := filepath.Join(posixRoot, filepath.FromSlash(containerProjectionPath))
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) {
@@ -1257,6 +1508,252 @@ func (service *Service) createProjectHierarchyFolderOnDisk(projectSlug, parentFo
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 (service *Service) renameProjectFolderOnDisk(
projectSlug, folderID, 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")
}
trimmedFolderID := strings.TrimSpace(folderID)
if trimmedFolderID == "" {
return "", "", ErrProjectFolderNotFound
}
trimmedName := strings.TrimSpace(name)
if trimmedName == "" {
return "", "", fmt.Errorf("folder name is required")
}
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
}
parentDir := filepath.Dir(folderDir)
baseSlug := normalizePOSIXSlug(trimmedName)
folderName := slugDir("folder", baseSlug)
folderSlug := baseSlug
destinationDir := filepath.Join(parentDir, folderName)
for attempt := 2; ; attempt += 1 {
if destinationDir == folderDir {
break
}
if _, err := os.Stat(destinationDir); os.IsNotExist(err) {
break
} else if err != nil {
return "", "", fmt.Errorf("stat candidate renamed project folder: %w", err)
}
folderSlug = fmt.Sprintf("%s-%d", baseSlug, attempt)
folderName = slugDir("folder", folderSlug)
destinationDir = filepath.Join(parentDir, folderName)
}
renamedProjectionPath := filepath.ToSlash(filepath.Join(filepath.Dir(folderProjectionPath), folderName))
if destinationDir != folderDir {
if err := os.Rename(folderDir, destinationDir); err != nil {
return "", "", fmt.Errorf("rename project folder: %w", err)
}
}
if err := writeJSONFile(filepath.Join(destinationDir, "folder.json"), map[string]any{
"name": trimmedName,
"slug": folderSlug,
"type": "folder",
}); err != nil {
return "", "", fmt.Errorf("write renamed project folder.json: %w", err)
}
return folderProjectionPath, renamedProjectionPath, nil
}
func (service *Service) moveProjectFolderOnDisk(
projectSlug, folderID, parentFolderID string,
rootPathBuilder func(projectSlug string) string,
) (string, string, error) {
posixRoot := strings.TrimSpace(service.posixRoot)
if posixRoot == "" {
return "", "", fmt.Errorf("POSIX root is not configured")
}
rootProjectionPath := rootPathBuilder(projectSlug)
folderProjectionPath := strings.TrimPrefix(filepath.ToSlash(filepath.Clean("/"+strings.TrimSpace(folderID))), "/")
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
}
trimmedParentFolderID := strings.TrimSpace(parentFolderID)
parentChildrenProjectionPath := rootProjectionPath
parentDir := filepath.Join(posixRoot, filepath.FromSlash(rootProjectionPath))
if trimmedParentFolderID != "" {
parentProjectionPath := strings.TrimPrefix(filepath.ToSlash(filepath.Clean("/"+trimmedParentFolderID)), "/")
if parentProjectionPath == "." || parentProjectionPath == rootProjectionPath || !strings.HasPrefix(parentProjectionPath, rootProjectionPath+"/") {
return "", "", ErrProjectFolderNotFound
}
if parentProjectionPath == folderProjectionPath || strings.HasPrefix(parentProjectionPath, folderProjectionPath+"/children/") {
return "", "", ErrInvalidProjectFolderMove
}
parentChildrenProjectionPath = filepath.ToSlash(filepath.Join(parentProjectionPath, "children"))
parentDir = filepath.Join(posixRoot, filepath.FromSlash(parentChildrenProjectionPath))
}
parentInfo, err := os.Stat(parentDir)
if err != nil {
if os.IsNotExist(err) {
return "", "", ErrProjectFolderNotFound
}
return "", "", fmt.Errorf("stat project folder parent: %w", err)
}
if !parentInfo.IsDir() {
return "", "", ErrProjectFolderNotFound
}
currentParentDir := filepath.Dir(folderDir)
if samePath(currentParentDir, parentDir) {
return folderProjectionPath, folderProjectionPath, nil
}
folderPayload := readJSONFileMap(filepath.Join(folderDir, "folder.json"))
folderName, _ := folderPayload["name"].(string)
if strings.TrimSpace(folderName) == "" {
folderName = fallbackFolderLabel(folderProjectionPath)
}
currentBase := filepath.Base(folderDir)
baseSlug := strings.TrimPrefix(currentBase, "folder-")
if strings.TrimSpace(baseSlug) == "" {
baseSlug = normalizePOSIXSlug(folderName)
}
folderSlug := baseSlug
folderDirName := slugDir("folder", folderSlug)
destinationDir := filepath.Join(parentDir, folderDirName)
for attempt := 2; ; attempt += 1 {
if _, err := os.Stat(destinationDir); os.IsNotExist(err) {
break
} else if err != nil {
return "", "", fmt.Errorf("stat candidate moved project folder: %w", err)
}
folderSlug = fmt.Sprintf("%s-%d", baseSlug, attempt)
folderDirName = slugDir("folder", folderSlug)
destinationDir = filepath.Join(parentDir, folderDirName)
}
if err := os.Rename(folderDir, destinationDir); err != nil {
return "", "", fmt.Errorf("move project folder: %w", err)
}
folderPayload["name"] = folderName
folderPayload["slug"] = folderSlug
folderPayload["type"] = "folder"
if err := writeJSONFile(filepath.Join(destinationDir, "folder.json"), folderPayload); err != nil {
return "", "", fmt.Errorf("write moved project folder.json: %w", err)
}
movedProjectionPath := filepath.ToSlash(filepath.Join(parentChildrenProjectionPath, folderDirName))
return folderProjectionPath, movedProjectionPath, nil
}
func samePath(left, right string) bool {
cleanLeft := filepath.Clean(left)
cleanRight := filepath.Clean(right)
if cleanLeft == cleanRight {
return true
}
leftInfo, leftErr := os.Stat(cleanLeft)
rightInfo, rightErr := os.Stat(cleanRight)
if leftErr == nil && rightErr == nil {
return os.SameFile(leftInfo, rightInfo)
}
return false
}
func readJSONFileMap(path string) map[string]any {
data, err := os.ReadFile(path)
if err != nil {
return map[string]any{}
}
var payload map[string]any
if err := json.Unmarshal(data, &payload); err != nil || payload == nil {
return map[string]any{}
}
return payload
}
func buildProjectHierarchyFolderTree(rows []projectHierarchyFolderRow, rootParentPath string) []ProjectHierarchyFolderRecord {
if len(rows) == 0 {
return nil
@@ -1324,6 +1821,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 == "" {
+291
View File
@@ -2,6 +2,7 @@ package bootstrap
import (
"encoding/json"
"errors"
"os"
"path/filepath"
"testing"
@@ -161,6 +162,296 @@ 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 TestRenameProjectHierarchyFolderOnDiskRenamesFolderShape(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, _, err := service.createProjectHierarchyFolderOnDisk("primary-project", "", "Design System")
if err != nil {
t.Fatalf("createProjectHierarchyFolderOnDisk root folder: %v", err)
}
nestedPath, _, err := service.createProjectHierarchyFolderOnDisk("primary-project", createdPath, "Research")
if err != nil {
t.Fatalf("createProjectHierarchyFolderOnDisk nested folder: %v", err)
}
previousPath, renamedPath, err := service.renameProjectHierarchyFolderOnDisk("primary-project", createdPath, "Platform Design")
if err != nil {
t.Fatalf("renameProjectHierarchyFolderOnDisk: %v", err)
}
if previousPath != createdPath {
t.Fatalf("expected previous path %s, got %s", createdPath, previousPath)
}
if renamedPath != "projects/project-primary-project/children/folder-platform-design" {
t.Fatalf("unexpected renamed path: %s", renamedPath)
}
if _, err := os.Stat(filepath.Join(rootPath, filepath.FromSlash(createdPath))); !os.IsNotExist(err) {
t.Fatalf("expected previous folder path to be gone, got err=%v", err)
}
renamedFolderPath := filepath.Join(rootPath, filepath.FromSlash(renamedPath))
if _, err := os.Stat(filepath.Join(renamedFolderPath, "children", filepath.Base(nestedPath))); err != nil {
t.Fatalf("expected nested child folder to move with renamed parent: %v", err)
}
folderPayload := readJSONFileForTest[map[string]any](t, filepath.Join(renamedFolderPath, "folder.json"))
if folderPayload["name"] != "Platform Design" {
t.Fatalf("expected renamed folder name Platform Design, got %#v", folderPayload["name"])
}
if folderPayload["slug"] != "platform-design" {
t.Fatalf("expected renamed folder slug platform-design, got %#v", folderPayload["slug"])
}
if folderPayload["type"] != "folder" {
t.Fatalf("expected renamed folder type folder, got %#v", folderPayload["type"])
}
}
func TestRenameProjectTreeFolderOnDiskRenamesFolderShape(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, _, err := service.createProjectTreeFolderOnDisk("primary-project", "", "Docs")
if err != nil {
t.Fatalf("createProjectTreeFolderOnDisk root folder: %v", err)
}
previousPath, renamedPath, err := service.renameProjectTreeFolderOnDisk("primary-project", createdPath, "Specifications")
if err != nil {
t.Fatalf("renameProjectTreeFolderOnDisk: %v", err)
}
if previousPath != createdPath {
t.Fatalf("expected previous path %s, got %s", createdPath, previousPath)
}
if renamedPath != "projects/project-primary-project/tree/folder-specifications" {
t.Fatalf("unexpected renamed path: %s", renamedPath)
}
folderPayload := readJSONFileForTest[map[string]any](t, filepath.Join(rootPath, filepath.FromSlash(renamedPath), "folder.json"))
if folderPayload["name"] != "Specifications" {
t.Fatalf("expected renamed folder name Specifications, got %#v", folderPayload["name"])
}
if folderPayload["slug"] != "specifications" {
t.Fatalf("expected renamed folder slug specifications, got %#v", folderPayload["slug"])
}
}
func TestMoveProjectHierarchyFolderOnDiskMovesFolderToNewParent(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)
}
designPath, _, err := service.createProjectHierarchyFolderOnDisk("primary-project", "", "Design")
if err != nil {
t.Fatalf("create design folder: %v", err)
}
operationsPath, _, err := service.createProjectHierarchyFolderOnDisk("primary-project", "", "Operations")
if err != nil {
t.Fatalf("create operations folder: %v", err)
}
researchPath, _, err := service.createProjectHierarchyFolderOnDisk("primary-project", designPath, "Research")
if err != nil {
t.Fatalf("create research folder: %v", err)
}
nestedPath, _, err := service.createProjectHierarchyFolderOnDisk("primary-project", researchPath, "Interview Notes")
if err != nil {
t.Fatalf("create nested folder: %v", err)
}
previousPath, movedPath, err := service.moveProjectHierarchyFolderOnDisk("primary-project", researchPath, operationsPath)
if err != nil {
t.Fatalf("moveProjectHierarchyFolderOnDisk: %v", err)
}
if previousPath != researchPath {
t.Fatalf("expected previous path %s, got %s", researchPath, previousPath)
}
if movedPath != "projects/project-primary-project/children/folder-operations/children/folder-research" {
t.Fatalf("unexpected moved path: %s", movedPath)
}
if _, err := os.Stat(filepath.Join(rootPath, filepath.FromSlash(researchPath))); !os.IsNotExist(err) {
t.Fatalf("expected previous folder path to be gone, got err=%v", err)
}
movedFolderPath := filepath.Join(rootPath, filepath.FromSlash(movedPath))
if _, err := os.Stat(filepath.Join(movedFolderPath, "children", filepath.Base(nestedPath))); err != nil {
t.Fatalf("expected nested child folder to move with moved parent: %v", err)
}
folderPayload := readJSONFileForTest[map[string]any](t, filepath.Join(movedFolderPath, "folder.json"))
if folderPayload["name"] != "Research" {
t.Fatalf("expected moved folder name Research, got %#v", folderPayload["name"])
}
if folderPayload["slug"] != "research" {
t.Fatalf("expected moved folder slug research, got %#v", folderPayload["slug"])
}
if folderPayload["type"] != "folder" {
t.Fatalf("expected moved folder type folder, got %#v", folderPayload["type"])
}
}
func TestMoveProjectTreeFolderOnDiskMovesFolderToNewParent(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)
}
docsPath, _, err := service.createProjectTreeFolderOnDisk("primary-project", "", "Docs")
if err != nil {
t.Fatalf("create docs folder: %v", err)
}
archivePath, _, err := service.createProjectTreeFolderOnDisk("primary-project", "", "Archive")
if err != nil {
t.Fatalf("create archive folder: %v", err)
}
previousPath, movedPath, err := service.moveProjectTreeFolderOnDisk("primary-project", docsPath, archivePath)
if err != nil {
t.Fatalf("moveProjectTreeFolderOnDisk: %v", err)
}
if previousPath != docsPath {
t.Fatalf("expected previous path %s, got %s", docsPath, previousPath)
}
if movedPath != "projects/project-primary-project/tree/folder-archive/children/folder-docs" {
t.Fatalf("unexpected moved path: %s", movedPath)
}
folderPayload := readJSONFileForTest[map[string]any](t, filepath.Join(rootPath, filepath.FromSlash(movedPath), "folder.json"))
if folderPayload["name"] != "Docs" {
t.Fatalf("expected moved folder name Docs, got %#v", folderPayload["name"])
}
if folderPayload["slug"] != "docs" {
t.Fatalf("expected moved folder slug docs, got %#v", folderPayload["slug"])
}
}
func TestMoveProjectHierarchyFolderOnDiskRejectsDescendantTarget(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)
}
parentPath, _, err := service.createProjectHierarchyFolderOnDisk("primary-project", "", "Parent")
if err != nil {
t.Fatalf("create parent folder: %v", err)
}
childPath, _, err := service.createProjectHierarchyFolderOnDisk("primary-project", parentPath, "Child")
if err != nil {
t.Fatalf("create child folder: %v", err)
}
_, _, err = service.moveProjectHierarchyFolderOnDisk("primary-project", parentPath, childPath)
if !errors.Is(err, ErrInvalidProjectFolderMove) {
t.Fatalf("expected ErrInvalidProjectFolderMove, got %v", err)
}
}
func TestBuildProjectHierarchyFolderTreeBuildsNestedStructure(t *testing.T) {
rows := []projectHierarchyFolderRow{
{Path: "projects/project-primary-project/children/folder-design", ParentPath: projectHierarchyRootPath("primary-project"), Label: "Design"},
+360 -6
View File
@@ -17,6 +17,20 @@ type createProjectFolderRequest struct {
ParentFolderID string `json:"parentFolderId"`
}
type renameProjectFolderRequest struct {
FolderID string `json:"folderId"`
Name string `json:"name"`
}
type deleteProjectFolderRequest struct {
FolderID string `json:"folderId"`
}
type moveProjectFolderRequest struct {
FolderID string `json:"folderId"`
ParentFolderID string `json:"parentFolderId"`
}
func (routes apiRoutes) handleProjectFolders(w http.ResponseWriter, r *http.Request) {
projectID := strings.TrimSpace(chi.URLParam(r, "projectId"))
if projectID == "" {
@@ -26,7 +40,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 +80,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,20 +93,360 @@ func (routes apiRoutes) handleCreateProjectFolder(w http.ResponseWriter, r *http
})
}
func (routes apiRoutes) writeProjectFolderError(w http.ResponseWriter, r *http.Request, err error) {
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) handleRenameProjectFolder(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 := decodeRenameProjectFolderRequest(w, r)
if !ok {
return
}
payload.FolderID = strings.TrimSpace(payload.FolderID)
payload.Name = strings.TrimSpace(payload.Name)
if payload.FolderID == "" {
WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Folder ID is required.")
return
}
if payload.Name == "" {
WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Folder name is required.")
return
}
result, err := routes.bootstrapService().RenameProjectFolder(r.Context(), bootstrapservice.RenameProjectFolderInput{
ProjectID: projectID,
FolderID: payload.FolderID,
Name: payload.Name,
})
if err != nil {
routes.writeProjectFolderError(w, r, err, "rename")
return
}
WriteJSON(w, http.StatusOK, map[string]any{
"data": result,
"meta": map[string]any{
"resource": "project-folder-rename",
"persisted": true,
},
})
}
func (routes apiRoutes) handleMoveProjectFolder(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 := decodeMoveProjectFolderRequest(w, r)
if !ok {
return
}
payload.FolderID = strings.TrimSpace(payload.FolderID)
payload.ParentFolderID = strings.TrimSpace(payload.ParentFolderID)
if payload.FolderID == "" {
WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Folder ID is required.")
return
}
result, err := routes.bootstrapService().MoveProjectFolder(r.Context(), bootstrapservice.MoveProjectFolderInput{
ProjectID: projectID,
FolderID: payload.FolderID,
ParentFolderID: payload.ParentFolderID,
})
if err != nil {
routes.writeProjectFolderError(w, r, err, "move")
return
}
WriteJSON(w, http.StatusOK, map[string]any{
"data": result,
"meta": map[string]any{
"resource": "project-folder-move",
"persisted": true,
},
})
}
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, "load")
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, "persist")
return
}
WriteJSON(w, http.StatusCreated, map[string]any{
"data": result,
"meta": map[string]any{
"resource": "project-tree-folder-create",
"persisted": true,
},
})
}
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) handleRenameProjectTreeFolder(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 := decodeRenameProjectFolderRequest(w, r)
if !ok {
return
}
payload.FolderID = strings.TrimSpace(payload.FolderID)
payload.Name = strings.TrimSpace(payload.Name)
if payload.FolderID == "" {
WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Folder ID is required.")
return
}
if payload.Name == "" {
WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Folder name is required.")
return
}
result, err := routes.bootstrapService().RenameProjectTreeFolder(r.Context(), bootstrapservice.RenameProjectFolderInput{
ProjectID: projectID,
FolderID: payload.FolderID,
Name: payload.Name,
})
if err != nil {
routes.writeProjectFolderError(w, r, err, "rename")
return
}
WriteJSON(w, http.StatusOK, map[string]any{
"data": result,
"meta": map[string]any{
"resource": "project-tree-folder-rename",
"persisted": true,
},
})
}
func (routes apiRoutes) handleMoveProjectTreeFolder(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 := decodeMoveProjectFolderRequest(w, r)
if !ok {
return
}
payload.FolderID = strings.TrimSpace(payload.FolderID)
payload.ParentFolderID = strings.TrimSpace(payload.ParentFolderID)
if payload.FolderID == "" {
WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", "Folder ID is required.")
return
}
result, err := routes.bootstrapService().MoveProjectTreeFolder(r.Context(), bootstrapservice.MoveProjectFolderInput{
ProjectID: projectID,
FolderID: payload.FolderID,
ParentFolderID: payload.ParentFolderID,
})
if err != nil {
routes.writeProjectFolderError(w, r, err, "move")
return
}
WriteJSON(w, http.StatusOK, map[string]any{
"data": result,
"meta": map[string]any{
"resource": "project-tree-folder-move",
"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())
case errors.Is(err, bootstrapservice.ErrInvalidProjectFolderMove):
WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_request", err.Error())
default:
routes.cfg.Logger.Error("persist project folder", "error", err, "path", r.URL.Path)
message := "Failed to persist project folder."
routes.cfg.Logger.Error(operation+" project folder", "error", err, "path", r.URL.Path)
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 decodeMoveProjectFolderRequest(w http.ResponseWriter, r *http.Request) (moveProjectFolderRequest, bool) {
var payload moveProjectFolderRequest
decoder := json.NewDecoder(r.Body)
decoder.DisallowUnknownFields()
if err := decoder.Decode(&payload); err != nil {
if errors.Is(err, io.EOF) {
WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_json", "The request body is required and must be valid JSON.")
return payload, false
}
WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_json", "The request body must be valid JSON.")
return payload, false
}
if err := decoder.Decode(&struct{}{}); !errors.Is(err, io.EOF) {
WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_json", "The request body must contain a single JSON object.")
return payload, false
}
return payload, true
}
func decodeDeleteProjectFolderRequest(r *http.Request) deleteProjectFolderRequest {
return deleteProjectFolderRequest{
FolderID: strings.TrimSpace(r.URL.Query().Get("folderId")),
}
}
func decodeRenameProjectFolderRequest(w http.ResponseWriter, r *http.Request) (renameProjectFolderRequest, bool) {
var payload renameProjectFolderRequest
decoder := json.NewDecoder(r.Body)
decoder.DisallowUnknownFields()
if err := decoder.Decode(&payload); err != nil {
if errors.Is(err, io.EOF) {
WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_json", "The request body is required and must be valid JSON.")
return payload, false
}
WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_json", "The request body must be valid JSON.")
return payload, false
}
if err := decoder.Decode(&struct{}{}); !errors.Is(err, io.EOF) {
WriteError(w, http.StatusBadRequest, RequestIDFromContext(r.Context()), "invalid_json", "The request body must contain a single JSON object.")
return payload, false
}
return payload, true
}
func decodeProjectFolderRequest(w http.ResponseWriter, r *http.Request) (createProjectFolderRequest, bool) {
var payload createProjectFolderRequest
+8
View File
@@ -36,6 +36,14 @@ 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.Patch("/folders", routes.handleRenameProjectFolder)
projectRouter.Patch("/folders/move", routes.handleMoveProjectFolder)
projectRouter.Delete("/folders", routes.handleDeleteProjectFolder)
projectRouter.Get("/tree/folders", routes.handleProjectTreeFolders)
projectRouter.Post("/tree/folders", routes.handleCreateProjectTreeFolder)
projectRouter.Patch("/tree/folders", routes.handleRenameProjectTreeFolder)
projectRouter.Patch("/tree/folders/move", routes.handleMoveProjectTreeFolder)
projectRouter.Delete("/tree/folders", routes.handleDeleteProjectTreeFolder)
})
if routes.cfg.Config.IsDevelopment() {
+2 -2
View File
@@ -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
+7 -1
View File
@@ -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)
@@ -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;
display: grid;
gap: var(--space-1);
padding: 0;
@include treeNav.tree-list;
}
.treeEmptySlot {
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;
@include treeNav.empty-slot;
}
.treeInputRow {
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);
@include treeNav.input-row;
}
.treeInput {
width: 100%;
min-width: 0;
border: 0;
background: transparent;
color: var(--color-text);
font: inherit;
outline: none;
}
.treeInput::placeholder {
color: var(--color-text-muted);
@include treeNav.input;
}
.treeItem {
width: 100%;
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;
@include treeNav.item;
}
.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);
@include treeNav.item-hover;
}
.treeItemFolder {
color: var(--color-text);
@include treeNav.item-folder;
}
.treeItemDragging {
opacity: 0.45;
transform: scale(0.985);
box-shadow: none;
@include treeNav.item-dragging;
}
.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);
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);
@include treeNav.item-drop-inside;
}
.folderChevron {
color: var(--color-text-muted);
transition: transform 160ms var(--easing-standard);
@include treeNav.folder-chevron;
}
.folderChevronOpen {
transform: rotate(90deg);
@include treeNav.folder-chevron-open;
}
.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);
@include treeNav.item-active;
}
.icon {
color: inherit;
opacity: 0.85;
@include treeNav.icon;
}
.label {
@include text-label;
min-width: 0;
@include treeNav.label;
}
.itemMeta {
@include text-caption;
color: var(--color-text-muted);
@include treeNav.item-meta;
}
@media (max-width: 720px) {
@@ -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,
@@ -46,6 +57,9 @@ type PersistedProjectFolderRecord = {
type ProjectFoldersResponse = {
data?: {
folders?: PersistedProjectFolderRecord[];
renamedFolder?: PersistedProjectFolderRecord;
movedFolder?: PersistedProjectFolderRecord;
previousFolderId?: string;
};
error?: string;
message?: string;
@@ -56,24 +70,18 @@ type PendingProjectFolderDraft = {
depth: number;
};
type ProjectDragTarget = {
parentId: string | null;
index: number;
intent: "before" | "after" | "inside";
targetNodeId?: string;
type PendingProjectFolderRename = {
folderId: string;
depth: number;
};
type ProjectDragTarget = NavTreeDropTarget;
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 +106,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 => {
if (node.kind === "project") {
return {
kind: "project",
item: { ...node.item },
};
}
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({
const projectTreeAdapter: NavTreeAdapter<ProjectTreeNode> = {
getNodeId: getProjectTreeNodeId,
isBranchNode: (node) => node.kind === "folder",
getChildren: (node) => (node.kind === "folder" ? node.children : []),
withChildren: (node, children) =>
node.kind === "folder"
? {
...node,
children: result.nodes,
});
continue;
children: [...children],
}
}
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,
};
}
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);
: node,
};
const ProjectFolderDraftRow = (props: {
@@ -351,6 +181,11 @@ const ProjectFolderBranch = (props: {
onPendingFolderNameChange: (value: string) => void;
onSubmitPendingFolder: () => void;
onCancelPendingFolder: () => void;
pendingFolderRename: PendingProjectFolderRename | null;
pendingFolderRenameName: string;
onPendingFolderRenameChange: (value: string) => void;
onSubmitPendingFolderRename: () => void;
onCancelPendingFolderRename: () => void;
dragState: ProjectDragState | null;
isTreeClickSuppressed: () => boolean;
}): JSX.Element => (
@@ -375,9 +210,13 @@ const ProjectFolderBranch = (props: {
if (node.kind === "folder") {
const isCollapsed = (): boolean => props.isFolderCollapsed(node.id);
const isRenaming = (): boolean => props.pendingFolderRename?.folderId === node.id;
return (
<li>
<Show
when={isRenaming()}
fallback={
<button
type="button"
classList={{
@@ -420,6 +259,16 @@ const ProjectFolderBranch = (props: {
<span class={styles.itemMeta}>{node.meta}</span>
</Show>
</button>
}
>
<ProjectFolderDraftRow
depth={props.pendingFolderRename?.depth ?? props.depth}
value={props.pendingFolderRenameName}
onInput={props.onPendingFolderRenameChange}
onSubmit={props.onSubmitPendingFolderRename}
onCancel={props.onCancelPendingFolderRename}
/>
</Show>
<Show when={!isCollapsed() && ((node.children?.length ?? 0) > 0 || props.pendingFolderDraft?.parentId === node.id)}>
<ProjectFolderBranch
@@ -439,6 +288,11 @@ const ProjectFolderBranch = (props: {
onPendingFolderNameChange={props.onPendingFolderNameChange}
onSubmitPendingFolder={props.onSubmitPendingFolder}
onCancelPendingFolder={props.onCancelPendingFolder}
pendingFolderRename={props.pendingFolderRename}
pendingFolderRenameName={props.pendingFolderRenameName}
onPendingFolderRenameChange={props.onPendingFolderRenameChange}
onSubmitPendingFolderRename={props.onSubmitPendingFolderRename}
onCancelPendingFolderRename={props.onCancelPendingFolderRename}
dragState={props.dragState}
isTreeClickSuppressed={props.isTreeClickSuppressed}
/>
@@ -509,6 +363,8 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
);
const [pendingFolderDraft, setPendingFolderDraft] = createSignal<PendingProjectFolderDraft | null>(null);
const [pendingFolderName, setPendingFolderName] = createSignal("");
const [pendingFolderRename, setPendingFolderRename] = createSignal<PendingProjectFolderRename | null>(null);
const [pendingFolderRenameName, setPendingFolderRenameName] = createSignal("");
const [dragState, setDragState] = createSignal<ProjectDragState | null>(null);
const [suppressNextTreeClick, setSuppressNextTreeClick] = createSignal(false);
let rootRef: HTMLDivElement | undefined;
@@ -550,7 +406,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)));
@@ -560,10 +416,12 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
setCollapsedFolderIds([]);
setPendingFolderDraft(null);
setPendingFolderName("");
setPendingFolderRename(null);
setPendingFolderRenameName("");
setDragState(null);
};
const folderIds = (): string[] => collectProjectFolderIds(projectTreeNodes());
const folderIds = (): string[] => collectBranchNodeIds(projectTreeNodes(), projectTreeAdapter);
const expandAllFolders = (): void => {
setCollapsedFolderIds([]);
@@ -599,6 +457,11 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
return;
}
if (!isUuidString(projectId)) {
setPersistedFolders([]);
return;
}
try {
const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/folders`, {
headers: {
@@ -712,9 +575,27 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
}
suppressTreeClickTemporarily();
const currentNodes = projectTreeNodes();
const draggedLocation = findTreeNodeLocation(currentNodes, nextDragState.draggedNodeId, projectTreeAdapter);
const persistedParentId = nextDragState.dropTarget.parentId;
const canPersistMove = isUuidString(selectedProject().id);
const persistedParentLocation = persistedParentId
? findTreeNodeLocation(currentNodes, persistedParentId, projectTreeAdapter)
: null;
if (
canPersistMove &&
draggedLocation?.node.kind === "folder" &&
(persistedParentId === null || persistedParentLocation?.node.kind === "folder")
) {
void movePersistedFolder(draggedLocation.node.id, persistedParentId);
} else {
setProjectTreeNodes((current) =>
moveProjectTreeNode(current, nextDragState.draggedNodeId, nextDragState.dropTarget as ProjectDragTarget),
moveTreeNode(current, nextDragState.draggedNodeId, nextDragState.dropTarget as ProjectDragTarget, projectTreeAdapter),
);
}
setDragState(null);
};
@@ -765,7 +646,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;
@@ -780,13 +661,23 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
setCollapsedFolderIds((current) => current.filter((id) => id !== parentId));
}
setPendingFolderRename(null);
setPendingFolderRenameName("");
setPendingFolderName("");
setPendingFolderDraft({ parentId, depth });
};
const beginFolderRename = (folderId: string, label: string, depth: number): void => {
setPendingFolderDraft(null);
setPendingFolderName("");
setPendingFolderRename({ folderId, depth });
setPendingFolderRenameName(label);
};
const submitPendingFolder = async (): Promise<void> => {
const name = pendingFolderName().trim();
const draft = pendingFolderDraft();
const projectId = selectedProject().id;
if (!draft) {
return;
@@ -798,8 +689,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,29 +721,170 @@ 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 movePersistedFolder = async (folderId: string, parentFolderId: string | null): Promise<void> => {
const projectId = selectedProject().id;
if (!folderId || !isUuidString(projectId)) {
return;
}
try {
const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/folders/move`, {
method: "PATCH",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
folderId,
parentFolderId,
}),
});
const body = (await response.json()) as ProjectFoldersResponse;
if (!response.ok) {
throw new Error(body.message || "Failed to move project folder.");
}
setPersistedFolders(readPersistedFolders(body));
const previousFolderId = body.data?.previousFolderId;
const movedFolderId = body.data?.movedFolder?.id;
if (previousFolderId && movedFolderId && previousFolderId !== movedFolderId) {
setCollapsedFolderIds((current) =>
current.map((id) => (id === previousFolderId ? movedFolderId : id)),
);
}
} catch (error) {
console.error(error);
}
};
const submitPendingFolderRename = async (): Promise<void> => {
const draft = pendingFolderRename();
const name = pendingFolderRenameName().trim();
const projectId = selectedProject().id;
if (!draft) {
return;
}
if (!name) {
setPendingFolderRename(null);
setPendingFolderRenameName("");
return;
}
if (!isUuidString(projectId)) {
cancelPendingFolderRename();
return;
}
try {
const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/folders`, {
method: "PATCH",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
folderId: draft.folderId,
name,
}),
});
const body = (await response.json()) as ProjectFoldersResponse;
if (!response.ok) {
throw new Error(body.message || "Failed to rename project folder.");
}
setPersistedFolders(readPersistedFolders(body));
setPendingFolderRename(null);
setPendingFolderRenameName("");
const previousFolderId = body.data?.previousFolderId;
const renamedFolderId = body.data?.renamedFolder?.id;
if (previousFolderId && renamedFolderId && previousFolderId !== renamedFolderId) {
setCollapsedFolderIds((current) =>
current.map((id) => (id === previousFolderId ? renamedFolderId : id)),
);
}
} catch (error) {
console.error(error);
}
};
const cancelPendingFolder = (): void => {
setPendingFolderDraft(null);
setPendingFolderName("");
};
const handleContextActionSelect = (action: { id: string; label: string }, target: ProjectMenuTarget): void => {
if (action.id !== "new-folder") {
return;
}
const cancelPendingFolderRename = (): void => {
setPendingFolderRename(null);
setPendingFolderRenameName("");
};
const handleContextActionSelect = (action: { id: string; label: string }, target: ProjectMenuTarget): void => {
switch (action.id) {
case "new-folder":
switch (target.kind) {
case "surface":
beginFolderDraft(null, 0);
return;
case "folder":
beginFolderDraft(target.id, (findProjectNodeDepth(projectTreeNodes(), target.id) ?? 0) + 1);
beginFolderDraft(target.id, (findTreeNodeDepth(projectTreeNodes(), target.id, projectTreeAdapter) ?? 0) + 1);
return;
case "project": {
const parentId = findProjectNodeLocation(projectTreeNodes(), target.id)?.parentId ?? null;
beginFolderDraft(parentId, parentId ? (findProjectNodeDepth(projectTreeNodes(), parentId) ?? 0) + 1 : 0);
const parentId = findTreeNodeLocation(projectTreeNodes(), target.id, projectTreeAdapter)?.parentId ?? null;
beginFolderDraft(parentId, parentId ? (findTreeNodeDepth(projectTreeNodes(), parentId, projectTreeAdapter) ?? 0) + 1 : 0);
return;
}
}
return;
case "delete-folder":
if (target.kind === "folder") {
void deletePersistedFolder(target.id);
}
return;
case "rename-folder":
if (target.kind === "folder") {
beginFolderRename(target.id, target.label, findTreeNodeDepth(projectTreeNodes(), target.id, projectTreeAdapter) ?? 0);
}
return;
default:
return;
}
};
const handleSurfaceContextMenu = (event: MouseEvent): void => {
@@ -886,50 +923,20 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
return;
}
const currentTarget = event.currentTarget;
if (!(currentTarget instanceof HTMLElement)) {
const relativeY = getPointerRelativeY(event);
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,
}),
});
};
@@ -1047,6 +1054,11 @@ export const ProjectSelector = (props: ProjectSelectorProps): JSX.Element => {
onPendingFolderNameChange={setPendingFolderName}
onSubmitPendingFolder={submitPendingFolder}
onCancelPendingFolder={cancelPendingFolder}
pendingFolderRename={pendingFolderRename()}
pendingFolderRenameName={pendingFolderRenameName()}
onPendingFolderRenameChange={setPendingFolderRenameName}
onSubmitPendingFolderRename={submitPendingFolderRename}
onCancelPendingFolderRename={cancelPendingFolderRename}
dragState={dragState()}
isTreeClickSuppressed={suppressNextTreeClick}
/>
@@ -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;
display: grid;
gap: var(--space-1);
padding: 0;
@include treeNav.tree-list;
}
.treeEmptySlot {
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;
@include treeNav.empty-slot;
}
.treeInputRow {
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);
@include treeNav.input-row;
}
.treeInput {
width: 100%;
min-width: 0;
border: 0;
background: transparent;
color: var(--color-text);
font: inherit;
outline: none;
}
.treeInput::placeholder {
color: var(--color-text-muted);
@include treeNav.input;
}
.navItem {
@@ -184,74 +155,44 @@
}
.treeItem {
width: 100%;
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);
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);
@include treeNav.item;
}
.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);
@include treeNav.item-hover;
}
.treeItemFolder {
color: var(--color-text);
@include treeNav.item-folder;
}
.treeItemDragging {
opacity: 0.45;
transform: scale(0.985);
box-shadow: none;
@include treeNav.item-dragging;
}
.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);
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);
@include treeNav.item-drop-inside;
}
.folderChevron {
color: var(--color-text-muted);
transition: transform 160ms var(--easing-standard);
@include treeNav.folder-chevron;
}
.folderChevronOpen {
transform: rotate(90deg);
@include treeNav.folder-chevron-open;
}
.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);
@include treeNav.item-active;
}
.navItemActive {
@@ -262,18 +203,15 @@
}
.icon {
color: inherit;
opacity: 0.85;
@include treeNav.icon;
}
.label {
@include text-label;
min-width: 0;
@include treeNav.label;
}
.itemMeta {
@include text-caption;
color: var(--color-text-muted);
@include treeNav.item-meta;
}
.sidebarCollapsed {
@@ -1,9 +1,21 @@
// 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 {
collectBranchNodeIds,
findTreeNodeDepth,
findTreeNodeLocation,
getPointerRelativeY,
isUuidString,
moveTreeNode,
resolveTreeDropTarget,
type NavTreeAdapter,
type NavTreeDropTarget,
} from "../shared/navTreeDnd";
import {
createWorkspaceStaticTarget,
createWorkspaceSurfaceTarget,
@@ -31,217 +43,64 @@ type PendingWorkspaceFolderDraft = {
depth: number;
};
type WorkspaceDragTarget = {
parentId: string | null;
index: number;
intent: "before" | "after" | "inside";
targetNodeId?: string;
};
type WorkspaceDragTarget = NavTreeDropTarget;
type WorkspaceDragState = {
draggedNodeId: string;
dropTarget: WorkspaceDragTarget | null;
};
type WorkspaceNodeLocation = {
parentId: string | null;
index: number;
node: WorkspaceTreeNode;
type PersistedWorkspaceFolderRecord = {
id: string;
label: string;
children?: PersistedWorkspaceFolderRecord[];
};
type WorkspaceFoldersResponse = {
data?: {
folders?: PersistedWorkspaceFolderRecord[];
renamedFolder?: PersistedWorkspaceFolderRecord;
movedFolder?: PersistedWorkspaceFolderRecord;
previousFolderId?: string;
};
error?: string;
message?: string;
};
type PendingWorkspaceFolderRename = {
folderId: string;
depth: number;
};
const LONG_PRESS_MS = 320;
const createWorkspaceFolderId = (): string => `folder-${Math.random().toString(36).slice(2, 10)}`;
const getWorkspaceTreeNodeId = (node: WorkspaceTreeNode): string => node.id;
const insertWorkspaceFolderNode = (
nodes: readonly WorkspaceTreeNode[],
parentId: string | null,
folder: WorkspaceTreeNode,
): readonly WorkspaceTreeNode[] => {
if (parentId === null) {
return [...nodes, folder];
}
const buildPersistedWorkspaceFolderNodes = (
folders: readonly PersistedWorkspaceFolderRecord[],
): WorkspaceTreeNode[] =>
folders.map((folder) => ({
id: folder.id,
label: folder.label,
kind: "folder",
icon: Folder,
children: buildPersistedWorkspaceFolderNodes(folder.children ?? []),
}));
return nodes.map((node) => {
if (node.kind !== "folder") {
return node;
}
const readPersistedWorkspaceFolders = (body: WorkspaceFoldersResponse): PersistedWorkspaceFolderRecord[] =>
Array.isArray(body.data?.folders) ? body.data.folders : [];
if (node.id === parentId) {
return {
const workspaceTreeAdapter: NavTreeAdapter<WorkspaceTreeNode> = {
getNodeId: getWorkspaceTreeNodeId,
isBranchNode: (node) => node.kind === "folder",
getChildren: (node) => (node.kind === "folder" ? (node.children ?? []) : []),
withChildren: (node, children) =>
node.kind === "folder"
? {
...node,
children: [...(node.children ?? []), folder],
};
children: [...children],
}
return {
...node,
children: node.children ? insertWorkspaceFolderNode(node.children, parentId, folder) : node.children,
};
});
};
const findWorkspaceFolderDepth = (nodes: readonly WorkspaceTreeNode[], folderId: string, depth = 0): number | null => {
for (const node of nodes) {
if (node.kind !== "folder") {
continue;
}
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,
};
}
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);
: node,
};
const FolderDraftRow = (props: {
@@ -292,10 +151,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);
@@ -348,8 +203,17 @@ const WorkspaceTreeBranch = (props: {
onPendingFolderNameChange: (value: string) => void;
onSubmitPendingFolder: () => void;
onCancelPendingFolder: () => void;
pendingFolderRename: PendingWorkspaceFolderRename | null;
pendingFolderRenameName: string;
onPendingFolderRenameChange: (value: string) => void;
onSubmitPendingFolderRename: () => void;
onCancelPendingFolderRename: () => void;
onOpenContextMenu: (event: MouseEvent, target: WorkspaceContextMenuTarget) => void;
onOpenContextMenuFromKeyboard: (element: HTMLElement, target: WorkspaceContextMenuTarget) => void;
onNodePointerDown: (event: PointerEvent, nodeId: string) => void;
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;
@@ -366,6 +230,7 @@ const WorkspaceTreeBranch = (props: {
const Icon = getWorkspaceNodeIcon(node);
const target = createWorkspaceTreeTarget(node);
const isCollapsed = (): boolean => (node.kind === "folder" ? props.isFolderCollapsed(node.id) : false);
const isRenaming = (): boolean => props.pendingFolderRename?.folderId === node.id;
const isDraggedNode = (): boolean => props.dragState?.draggedNodeId === node.id;
const dropIntent = (): WorkspaceDragTarget["intent"] | null => {
if (props.dragState?.dropTarget?.targetNodeId !== node.id) {
@@ -377,6 +242,9 @@ const WorkspaceTreeBranch = (props: {
return (
<li>
<Show
when={node.kind === "folder" && isRenaming()}
fallback={
<button
type="button"
classList={{
@@ -444,6 +312,16 @@ const WorkspaceTreeBranch = (props: {
<span class={styles.itemMeta}>{node.meta}</span>
</Show>
</button>
}
>
<FolderDraftRow
depth={props.pendingFolderRename?.depth ?? depth()}
value={props.pendingFolderRenameName}
onInput={props.onPendingFolderRenameChange}
onSubmit={props.onSubmitPendingFolderRename}
onCancel={props.onCancelPendingFolderRename}
/>
</Show>
<Show when={node.kind === "folder" && !isCollapsed() && (((node.children?.length ?? 0) > 0) || props.pendingFolderDraft?.parentId === node.id)}>
<WorkspaceTreeBranch
@@ -457,6 +335,11 @@ const WorkspaceTreeBranch = (props: {
onPendingFolderNameChange={props.onPendingFolderNameChange}
onSubmitPendingFolder={props.onSubmitPendingFolder}
onCancelPendingFolder={props.onCancelPendingFolder}
pendingFolderRename={props.pendingFolderRename}
pendingFolderRenameName={props.pendingFolderRenameName}
onPendingFolderRenameChange={props.onPendingFolderRenameChange}
onSubmitPendingFolderRename={props.onSubmitPendingFolderRename}
onCancelPendingFolderRename={props.onCancelPendingFolderRename}
onOpenContextMenu={props.onOpenContextMenu}
onOpenContextMenuFromKeyboard={props.onOpenContextMenuFromKeyboard}
onNodePointerDown={props.onNodePointerDown}
@@ -485,24 +368,109 @@ 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 [pendingFolderRename, setPendingFolderRename] = createSignal<PendingWorkspaceFolderRename | null>(null);
const [pendingFolderRenameName, setPendingFolderRenameName] = createSignal("");
const [dragState, setDragState] = createSignal<WorkspaceDragState | null>(null);
const [suppressNextTreeClick, setSuppressNextTreeClick] = createSignal(false);
let lastSelectedProjectId: string | null = null;
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[] => collectBranchNodeIds(workspaceTreeNodes(), workspaceTreeAdapter);
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("");
setPendingFolderRename(null);
setPendingFolderRenameName("");
setDragState(null);
};
const syncWorkspaceTree = (): void => {
const nextTree = activeProject()?.id
? buildPersistedWorkspaceFolderNodes(persistedFolders())
: appShellData.workspaceTree();
const availableFolderIds = new Set(collectBranchNodeIds(nextTree, workspaceTreeAdapter));
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;
}
if (!isUuidString(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 +491,27 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
};
createEffect(() => {
setWorkspaceTreeNodes(appShellData.workspaceTree());
setCollapsedFolderIds([]);
setPendingFolderDraft(null);
setPendingFolderName("");
setDragState(null);
syncWorkspaceTree();
});
createEffect(() => {
const projectId = activeProject()?.id ?? null;
if (lastSelectedProjectId === null) {
lastSelectedProjectId = projectId;
return;
}
if (projectId === lastSelectedProjectId) {
return;
}
lastSelectedProjectId = projectId;
resetWorkspaceTreeInteractionState();
});
createEffect(() => {
void loadPersistedFolders(activeProject()?.id ?? "");
});
onMount(() => {
@@ -545,9 +529,27 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
}
suppressTreeClickTemporarily();
const currentNodes = workspaceTreeNodes();
const draggedLocation = findTreeNodeLocation(currentNodes, nextDragState.draggedNodeId, workspaceTreeAdapter);
const persistedParentId = nextDragState.dropTarget.parentId;
const canPersistMove = isUuidString(activeProject()?.id ?? "");
const persistedParentLocation = persistedParentId
? findTreeNodeLocation(currentNodes, persistedParentId, workspaceTreeAdapter)
: null;
if (
canPersistMove &&
draggedLocation?.node.kind === "folder" &&
(persistedParentId === null || persistedParentLocation?.node.kind === "folder")
) {
void movePersistedFolder(draggedLocation.node.id, persistedParentId);
} else {
setWorkspaceTreeNodes((current) =>
moveWorkspaceTreeNode(current, nextDragState.draggedNodeId, nextDragState.dropTarget as WorkspaceDragTarget),
moveTreeNode(current, nextDragState.draggedNodeId, nextDragState.dropTarget as WorkspaceDragTarget, workspaceTreeAdapter),
);
}
setDragState(null);
};
@@ -583,13 +585,23 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
setCollapsedFolderIds((current) => current.filter((id) => id !== parentId));
}
setPendingFolderRename(null);
setPendingFolderRenameName("");
setPendingFolderName("");
setPendingFolderDraft({ parentId, depth });
};
const submitPendingFolder = (): void => {
const beginFolderRename = (folderId: string, label: string, depth: number): void => {
setPendingFolderDraft(null);
setPendingFolderName("");
setPendingFolderRename({ folderId, depth });
setPendingFolderRenameName(label);
};
const submitPendingFolder = async (): Promise<void> => {
const name = pendingFolderName().trim();
const draft = pendingFolderDraft();
const projectId = activeProject()?.id ?? "";
if (!draft) {
return;
@@ -601,17 +613,160 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
return;
}
setWorkspaceTreeNodes((current) =>
insertWorkspaceFolderNode(current, draft.parentId, {
id: createWorkspaceFolderId(),
label: name,
kind: "folder",
icon: Folder,
children: [],
if (!projectId || !isUuidString(projectId)) {
cancelPendingFolder();
return;
}
try {
const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/tree/folders`, {
method: "POST",
headers: {
Accept: "application/json",
"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 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 movePersistedFolder = async (folderId: string, parentFolderId: string | null): Promise<void> => {
const projectId = activeProject()?.id ?? "";
if (!folderId || !projectId || !isUuidString(projectId)) {
return;
}
try {
const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/tree/folders/move`, {
method: "PATCH",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
folderId,
parentFolderId,
}),
});
const body = (await response.json()) as WorkspaceFoldersResponse;
if (!response.ok) {
throw new Error(body.message || "Failed to move project tree folder.");
}
setPersistedFolders(readPersistedWorkspaceFolders(body));
const previousFolderId = body.data?.previousFolderId;
const movedFolderId = body.data?.movedFolder?.id;
if (previousFolderId && movedFolderId && previousFolderId !== movedFolderId) {
setCollapsedFolderIds((current) =>
current.map((id) => (id === previousFolderId ? movedFolderId : id)),
);
}
} catch (error) {
console.error(error);
}
};
const submitPendingFolderRename = async (): Promise<void> => {
const draft = pendingFolderRename();
const name = pendingFolderRenameName().trim();
const projectId = activeProject()?.id ?? "";
if (!draft) {
return;
}
if (!name) {
setPendingFolderRename(null);
setPendingFolderRenameName("");
return;
}
if (!projectId || !isUuidString(projectId)) {
cancelPendingFolderRename();
return;
}
try {
const response = await fetch(`${resolveAPIBase()}/projects/${projectId}/tree/folders`, {
method: "PATCH",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
folderId: draft.folderId,
name,
}),
});
const body = (await response.json()) as WorkspaceFoldersResponse;
if (!response.ok) {
throw new Error(body.message || "Failed to rename project tree folder.");
}
setPersistedFolders(readPersistedWorkspaceFolders(body));
setPendingFolderRename(null);
setPendingFolderRenameName("");
const previousFolderId = body.data?.previousFolderId;
const renamedFolderId = body.data?.renamedFolder?.id;
if (previousFolderId && renamedFolderId && previousFolderId !== renamedFolderId) {
setCollapsedFolderIds((current) =>
current.map((id) => (id === previousFolderId ? renamedFolderId : id)),
);
}
} catch (error) {
console.error(error);
}
};
const cancelPendingFolder = (): void => {
@@ -619,6 +774,22 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
setPendingFolderName("");
};
const cancelPendingFolderRename = (): void => {
setPendingFolderRename(null);
setPendingFolderRenameName("");
};
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,52 +814,52 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
return;
}
const bounds = event.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) {
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.id,
};
}
setDragState({ ...nextDragState, dropTarget: nextTarget });
};
const handleContextActionSelect = (action: WorkspaceContextMenuAction, target: WorkspaceContextMenuTarget): void => {
if (action.id !== "new-folder") {
const relativeY = getPointerRelativeY(event);
if (relativeY === null) {
return;
}
setDragState({
...nextDragState,
dropTarget: resolveTreeDropTarget({
parentId,
index,
node,
relativeY,
adapter: workspaceTreeAdapter,
}),
});
};
const handleContextActionSelect = (action: WorkspaceContextMenuAction, target: WorkspaceContextMenuTarget): void => {
switch (action.id) {
case "new-folder":
switch (target.kind) {
case "workspace":
case "home":
beginFolderDraft(null, 0);
return;
case "folder":
beginFolderDraft(target.id, (findWorkspaceFolderDepth(workspaceTreeNodes(), target.id) ?? 0) + 1);
beginFolderDraft(target.id, (findTreeNodeDepth(workspaceTreeNodes(), target.id, workspaceTreeAdapter) ?? 0) + 1);
return;
case "settings":
case "item":
return;
}
return;
case "delete-folder":
if (target.kind === "folder") {
void deletePersistedFolder(target.id);
}
return;
case "rename-folder":
if (target.kind === "folder") {
beginFolderRename(target.id, target.label, findTreeNodeDepth(workspaceTreeNodes(), target.id, workspaceTreeAdapter) ?? 0);
}
return;
default:
return;
}
};
return (
@@ -731,10 +902,28 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
<For each={workspaceSidebarHeaderActions}>
{(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 (
<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,6 +983,11 @@ export const WorkspaceSidebar = (props: WorkspaceSidebarProps): JSX.Element => {
onPendingFolderNameChange={setPendingFolderName}
onSubmitPendingFolder={submitPendingFolder}
onCancelPendingFolder={cancelPendingFolder}
pendingFolderRename={pendingFolderRename()}
pendingFolderRenameName={pendingFolderRenameName()}
onPendingFolderRenameChange={setPendingFolderRenameName}
onSubmitPendingFolderRename={submitPendingFolderRename}
onCancelPendingFolderRename={cancelPendingFolderRename}
onOpenContextMenu={contextMenu.openMenu}
onOpenContextMenuFromKeyboard={contextMenu.openMenuFromElement}
onNodePointerDown={handleNodePointerDown}
@@ -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[] = [
@@ -595,6 +597,12 @@ const getProjectCreateActions = (): readonly ProjectContextMenuAction[] =>
{ id: "new-folder", label: "New folder" },
] as const;
const getProjectFolderDangerActions = (): readonly ProjectContextMenuAction[] =>
[
{ id: "rename-folder", label: "Rename", shortcut: { modifiers: ["meta"], key: "r" } },
{ id: "delete-folder", label: "Delete", shortcut: { modifiers: ["meta"], key: "delete" }, tone: "danger" },
] as const;
export const createProjectSurfaceTarget = (label = "Projects"): ProjectMenuTarget => ({
id: "project-surface",
label,
@@ -641,6 +649,10 @@ export const getProjectContextMenuSections = (target: ProjectMenuTarget): readon
id: "create",
items: createActions,
},
{
id: "organize",
items: getProjectFolderDangerActions(),
},
] as const;
case "project":
return [
@@ -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);
}
@@ -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,
};
};