bolt.diy/CHANGES.md

File and Folder Locking Feature Implementation

Overview

This implementation adds persistent file and folder locking functionality to the BoltDIY project. When a file or folder is locked, it cannot be modified by either the user or the AI until it is unlocked. All locks are scoped to the current chat/project to prevent locks from one project affecting files with matching names in other projects.

New Files

1. app/components/chat/LockAlert.tsx

• A dedicated alert component for displaying lock-related error messages
• Features a distinctive amber/yellow color scheme and lock icon
• Provides clear instructions to the user about locked files

2. app/lib/persistence/lockedFiles.ts

• Core functionality for persisting file and folder locks in localStorage
• Provides functions for adding, removing, and retrieving locked files and folders
• Defines the lock modes: "full" (no modifications) and "scoped" (only additions allowed)
• Implements chat ID scoping to isolate locks to specific projects

3. app/utils/fileLocks.ts

• Utility functions for checking if a file or folder is locked
• Helps avoid circular dependencies between components and stores
• Provides a consistent interface for lock checking across the application
• Extracts chat ID from URL for project-specific lock scoping

Modified Files

1. app/components/chat/ChatAlert.tsx

• Updated to use the new LockAlert component for locked file errors
• Maintains backward compatibility with other error types

2. app/components/editor/codemirror/CodeMirrorEditor.tsx

• Added checks to prevent editing of locked files
• Updated to use the new fileLocks utility
• Displays appropriate tooltips when a user attempts to edit a locked file

3. app/components/workbench/EditorPanel.tsx

• Added safety checks for unsavedFiles to prevent errors
• Improved handling of locked files in the editor panel

4. app/components/workbench/FileTree.tsx

• Added visual indicators for locked files and folders in the file tree
• Improved handling of locked files and folders in the file tree
• Added context menu options for locking and unlocking folders

5. app/lib/stores/editor.ts

• Added checks to prevent updating locked files
• Improved error handling for locked files

6. app/lib/stores/files.ts

• Added core functionality for locking and unlocking files and folders
• Implemented persistence of locked files and folders across page refreshes
• Added methods for checking if a file or folder is locked
• Added chat ID scoping to prevent locks from affecting other projects

7. app/lib/stores/workbench.ts

• Added methods for locking and unlocking files and folders
• Improved error handling for locked files and folders
• Fixed issues with alert initialization
• Added support for chat ID scoping of locks

8. app/types/actions.ts

• Added isLockedFile property to the ActionAlert interface
• Improved type definitions for locked file alerts

Key Features

1. Persistent File and Folder Locking: Locks are stored in localStorage and persist across page refreshes
2. Visual Indicators: Locked files and folders are clearly marked in the UI with lock icons
3. Improved Error Messages: Clear, visually distinct error messages when attempting to modify locked items
4. Lock Modes: Support for both full locks (no modifications) and scoped locks (only additions allowed)
5. Prevention of AI Modifications: The AI is prevented from modifying locked files and folders
6. Project-Specific Locks: Locks are scoped to the current chat/project to prevent conflicts
7. Recursive Folder Locking: Locking a folder automatically locks all files and subfolders within it

UI Improvements

1. Enhanced Alert Design: Modern, visually appealing alert design with better spacing and typography
2. Contextual Icons: Different icons and colors for different types of alerts
3. Improved Error Details: Better formatting of error details with monospace font and left border
4. Responsive Buttons: Better positioned and styled buttons with appropriate hover effects

Built-in Figma Import Feature

Overview

This update adds the ability to import a Figma URL directly into BoltDIY. The application fetches the Figma file and generates starter React component files for each top-level frame, creating a new chat with the generated code ready for editing.

New Files

1. app/utils/figmaImport.ts

• Fetches Figma files and converts frames to simple React components

2. app/components/figma/FigmaImport.client.tsx

• Client component that imports a Figma design using query parameters

3. app/routes/figma.tsx

• Route to initiate the Figma import flow