File Browser & Code Editor
Relevant source files
The following files were used as context for generating this wiki page:
The File Browser & Code Editor module serves as the primary interface for users to navigate project structures and manipulate source code within the ATMOS platform. It integrates a recursive file navigation system with a professional-grade text editor, providing a seamless development experience directly in the web interface.
This system is built to handle complex file hierarchies, provide real-time code editing with syntax highlighting, and support specialized views such as side-by-side diff comparisons. It acts as the central hub for file-based operations, connecting the local file system state with the user's interactive workspace.
System Architecture
The architecture follows a component-based model where navigation and editing are decoupled but synchronized via a centralized state. The FileTree component handles the directory structure, while MonacoEditor and specialized viewers like DiffViewer handle content display and modification.
Component Relationship
The following diagram illustrates how the navigation components interact with the editing and viewing components.
File Navigation (FileTree)
The FileTree component provides a recursive, collapsible view of the project's directory structure. It is designed to handle hierarchical data, allowing users to expand or collapse folders and select specific files for editing.
Key Features
| Feature | Description |
|---|---|
| Recursive Rendering | Supports infinitely nested directory structures. |
| Collapsible Categories | Categories and folders can be toggled to manage visual complexity. |
| Selection State | Highlights the currently active file or folder. |
| Sorting | Items are typically sorted by an order field or alphabetically. |
Sources: apps/web/src/components/files/FileTree.tsx, specs/tech/project-wiki.md:126-140
Code Editing (MonacoEditor)
The primary code editing capability is powered by MonacoEditor, which provides advanced features such as syntax highlighting, command shortcuts, and read-only modes.
Editor Logic and Command Handling
The editor is integrated with system-level commands, such as saving via keyboard shortcuts. It also supports dynamic loading to optimize performance.
Configuration Options
The editor behavior is determined by several props that control its interaction and appearance.
| Prop | Type | Description |
|---|---|---|
language | string | Defines syntax highlighting (e.g., "markdown", "typescript"). |
value | string | The text content to be displayed in the editor. |
isReadOnly | boolean | If true, prevents user input. |
onMount | function | Callback for executing custom logic (like command registration) on editor initialization. |
Sources: apps/web/src/components/editor/MonacoEditor.tsx, apps/web/src/components/wiki/WikiContent.tsx:28-40
Specialized Viewers
Beyond standard text editing, the system includes specialized viewers for specific workflows, such as comparing changes and viewing documentation.
DiffViewer
The DiffViewer component is used to visualize differences between two versions of a file. It typically employs a side-by-side or unified view to show additions and deletions.
Sources: apps/web/src/components/diff/DiffViewer.tsx
WikiContent Viewer
The WikiContent component acts as a bridge between the file system and the documentation system. It supports a dual-mode interface: Preview (rendered Markdown) and Edit (Monaco Editor).
Data Flow and Persistence
File content is managed through a lifecycle that involves reading from the backend, local state synchronization, and writing back to the disk.
- Loading: The system uses
fsApi.readFileto fetch content based on theactivePageoractivePath. - Sync: Local state (e.g.,
localContentinWikiContent) tracks changes before they are committed. - Saving: A save operation triggers
fsApi.writeFile, updating the project's permanent storage. - Verification: Post-save, the system often triggers a reload of the catalog or file state to ensure consistency.
Sources: apps/web/src/components/wiki/WikiContent.tsx:112-132, specs/tech/project-wiki.md:65-72
Conclusion
The File Browser & Code Editor module provides a robust foundation for project management within ATMOS. By combining hierarchical navigation with a high-performance editor and specialized diffing tools, it enables efficient code interaction. The system's ability to switch between rendered previews and raw editing modes makes it particularly effective for both development and documentation workflows.