create folder nesting BEN-1076

[juancastano]

TL;DR

Enhanced the code editor with a hierarchical file tree view and improved visual styling.

What changed?

• Implemented a hierarchical file tree structure that organizes files into folders
• Added collapsible folder functionality with open/close toggles
• Introduced file type icons based on file extensions
• Improved the file selection UI with better visual indicators
• Widened the file sidebar from 180px to 320px for better readability
• Enhanced the empty state when no file is selected
• Added a new Collapsible component from Radix UI
• Implemented auto-opening of folders and auto-selection of the first file

How to test?

1. Open the UI Builder and navigate to the code editor component
2. Verify that files are organized in a hierarchical tree structure
3. Test collapsing and expanding folders by clicking on folder names
4. Check that different file types display appropriate icons
5. Confirm that selecting files works correctly and shows the file content
6. Verify that the UI is responsive and properly styled

Why make this change?

The previous flat file list became difficult to navigate with multiple files. This hierarchical structure provides a more intuitive and familiar IDE-like experience, making it easier for users to browse through project files. The visual enhancements with icons and better spacing improve the overall user experience and make the code editor more professional and user-friendly.

[juancastano]

• Clean up route file #38
• Updated error detection #37
• Fix code preview bug #36
• Move edit logic into open AI file #35
• Add toggle to control buggy code and fixer usage #34
• Fixed a few errors #33
• Fix build errors #32
• Fix error detection again BEN-1078 #31
• Add fix with AI functionality BEN-1080 #30
• Add editing functionality BEN-1079 #29
• Improved error detection BEN-1078 #28
• Adding error screen BEN-1077 #27
• create folder nesting BEN-1076 #26 👈 (View in Graphite)
• add download button BEN-1075 #25
• Add loading state BEN-1074 #24
• Add chat interface BEN-1073 #23
• Add support for adding new npm packages BEN-1072 #22
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[juancastano]

Merge activity

• Jun 13, 10:36 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Jun 13, 10:44 PM UTC: Graphite rebased this pull request as part of a merge.
• Jun 13, 10:45 PM UTC: @juancastano merged this pull request with Graphite.