mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-06-26 18:26:38 +00:00
113 lines
4.6 KiB
Markdown
113 lines
4.6 KiB
Markdown
# 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
|