[AugistineCreates]

this pr closes #31

Summary

This PR replaces the read-only SyntaxHighlighter view of selected files inside the generation tab with a fully interactive and editable Monaco Editor using @monaco-editor/react. This enables live manual editing, syntax auto-completion, and inline lint warnings directly within the UI, significantly improving developer productivity when tweaking generated code.

Key Changes

1. Interactive Code Editor (@monaco-editor/react):

   • Replaced SyntaxHighlighter with the interactive Monaco Editor component for selected files.
   • Configured with vs-dark theme, custom font sizes, line numbers, automatic layout scaling, and disabled minimap for a cleaner appearance.
   • Dynamic language detection based on the selected file extension (css, json, html, typescript, javascript).

2. Unsaved Changes & Dynamic Save Actions:

   • Added a live visual • Unsaved Changes indicator that appears next to the filename when the editor content deviates from the saved code.
   • Added a "Save" button in the panel header that dynamically enables only when changes are detected.
   • Created a backend saving API endpoint (/api/save-file) which calls the active sandbox provider's writeFile method to persist edits.
   • Saves are automatically pushed to the local UI states (sandboxFiles and generationProgress.files) and trigger an instant hot-reload of the preview iframe.

3. Autosave Keybindings:

   • Implemented an onMount handler for the Monaco Editor to support Ctrl+S / Cmd+S shortcuts, allowing users to save edits seamlessly without leaving the keyboard.

4. Lint Warnings & Autocompletes:

   • Enabled built-in Monaco language markers to highlight syntax warnings and errors inline, and provide rich autocomplete suggestions.

---