File Explorer Panel

[kris26658]

Purpose: Display the file/folder structure, allow creation, renaming, and drag-and-drop organization.

Core Features:

• Tree view of files and folders
• Buttons for “+ New File” and “+ New Folder”
• Right-click context menu (optional) for rename/delete
• Drag-and-drop support for reordering and nesting

Implementation Ideas:

• Use react-dnd for drag-and-drop

• Store the structure as a nested object or tree array, e.g.:

  [
  {
  id: '1',
  type: 'folder',
  name: 'src',
  description: '',
  children: [
  { id: '2', type: 'file', name: 'index.js', description: '' }
  ]
  }
  ]

• Persist state in localStorage