Overview

Build a recursive file explorer tree view with expandable and collapsible folders, similar to VS Code's sidebar.

Requirements

• Render a tree of files and folders from a given FileNode[] data structure.
• Each folder manages its own expand/collapse state independently.
• Folder contents are hidden by default and shown when the folder is clicked.
• Clicking a folder again hides its contents (toggle behavior).
• Support nested folder expansion (folders within folders).
• Files are not clickable — only folders expand/collapse.
• Use indentation to visually represent the depth of each node in the tree.
• Use the provided ChevronIcon, FolderIcon, and FileIcon components from Components.tsx.
• Display the title "File explorer" at the top of the page.

Notes

• Use a recursive React component to render the tree structure.
• Give each node its own useState for expand/collapse — this avoids needing a global state object.
• Calculate indentation based on the depth passed to each recursive call.
• When rendering children of an expanded folder, pass depth + 1 to the recursive TreeNode.
• Use the ChevronIcon, FolderIcon, and FileIcon helpers from Components.tsx — they handle the visual states.
• Files should render a spacer instead of a chevron so their names align with folder names.
• Add aria-expanded to folder buttons for accessibility.

Tests

1. renders the app title
2. renders root-level files and folders
3. hides folder contents by default
4. shows folder contents when folder is clicked
5. hides folder contents when folder is clicked again
6. supports nested folder expansion
7. allows expanding public folder independently