ProjectFolderTree

The ProjectFolderTree component displays a hierarchical tree view of projects and their folders, allowing users to navigate through the folder structure.

Props

Name	Type	Required	Description
projects	Project[]	Yes	Array of projects to display
folders	Record<string, FolderTree[]>	Yes	Map of project IDs to their folder trees
showFiles	boolean	No	Whether to show files in the tree (default: false)
dragEnabled	boolean	No	Whether drag and drop is enabled (default: false)
loading	boolean	No	Loading state of the tree (default: false)
selectedNodeId	string | null	No	ID of the currently selected node
onNodeClick	(nodeId: string, item: TreeItem) => void	No	Callback when a node is clicked
onDragDrop	(sourceId: string, targetId: string) => void	No	Callback when a node is dragged and dropped

Usage

The component is used in two main contexts:

1. In the project navigation sidebar (ProjectView.tsx):

import { ProjectFolderTree } from '@lunchbox/apps/components/ProjectFolderTree/ProjectFolderTree'

function ProjectView() {
  const { folders, projects, isLoading } = useFolderOperations()
  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null)

  const handleNodeClick = (nodeId: string, item: TreeItem) => {
    setSelectedNodeId(nodeId)
    if (item.isFile === false) {
      navigate(
        `/l/${item.project}/folder/${nodeId}/${item.label}?project=${item.project}`
      )
    }
  }

  return (
    <ProjectFolderTree
      projects={projects}
      folders={folders}
      showFiles={true}
      dragEnabled={false}
      loading={isLoading}
      onNodeClick={handleNodeClick}
      selectedNodeId={selectedNodeId}
    />
  )
}

2. In the move to project modal (MoveToProjectModal.tsx):

import { ProjectFolderTree } from '@lunchbox/apps/components/ProjectFolderTree/ProjectFolderTree'

function MoveToProjectModal({
  projects,
  folders,
  onMove,
  opened,
  close,
  isLoading,
  isMoving
}: MoveToProjectModalProps) {
  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null)

  return (
    <Modal opened={opened} onClose={close} title="Move to Project" size="lg">
      <ProjectFolderTree
        projects={projects}
        folders={folders}
        showFiles={false}
        dragEnabled={false}
        loading={isLoading}
        onNodeClick={handleNodeClick}
        selectedNodeId={selectedNodeId}
      />
    </Modal>
  )
}

Features

Tree Structure

• Displays projects as root nodes
• Shows folder hierarchy within each project
• Optionally displays files within folders
• Uses icons to distinguish between projects, folders, and files

Interaction

• Click handling for navigation
• Optional drag and drop for reorganizing
• Visual feedback for selected items
• Loading states for async operations

Internal Implementation

The component uses several internal structures:

TreeItem Interface

interface TreeItem {
  id: string
  label: string
  children?: TreeItem[]
  icon?: React.ReactNode
  isFile?: boolean
  isProject?: boolean
  project: string
}

Data Conversion

const convertToTreeItems = ({
  projects,
  folders
}: {
  projects: Project[]
  folders: Record<string, FolderTree[]>
}): TreeItem[]

The component internally converts the projects and folders data into a tree structure that can be rendered by the underlying TreeView component.

Types

interface Project {
  _id: string
  name: string
  // other project properties...
}

interface FolderTree {
  _id: string
  name: string
  children?: FolderTree[]
  // other folder properties...
}