feat: bolt dyi new settings UI V3 #1245
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# 🚀 Release v1.0.0 ## What's Changed 🌟 ### 🎨 UI/UX Improvements - **Dark Mode Support** - Implemented comprehensive dark theme across all components - Enhanced contrast and readability in dark mode - Added smooth theme transitions - Optimized dialog overlays and backdrops ### 🛠️ Settings Panel - **Data Management** - Added chat history export/import functionality - Implemented settings backup and restore - Added secure data deletion with confirmations - Added profile customization options - **Provider Management** - Added comprehensive provider configuration - Implemented URL-configurable providers - Added local model support (Ollama, LMStudio) - Added provider health checks - Added provider status indicators - **Ollama Integration** - Added Ollama Model Manager with real-time updates - Implemented model version tracking - Added bulk update capability - Added progress tracking for model updates - Displays model details (parameter size, quantization) - **GitHub Integration** - Added GitHub connection management - Implemented secure token storage - Added connection state persistence - Real-time connection status updates - Proper error handling and user feedback ### 📊 Event Logging - **System Monitoring** - Added real-time event logging system - Implemented log filtering by type (info, warning, error, debug) - Added log export functionality - Added auto-scroll and search capabilities - Enhanced log visualization with color coding ### 💫 Animations & Interactions - Added smooth page transitions - Implemented loading states with spinners - Added micro-interactions for better feedback - Enhanced button hover and active states - Added motion effects for UI elements ### 🔐 Security Features - Secure token storage - Added confirmation dialogs for destructive actions - Implemented data validation - Added file size and type validation - Secure connection management ### ♿️ Accessibility - Improved keyboard navigation - Enhanced screen reader support - Added ARIA labels and descriptions - Implemented focus management - Added proper dialog accessibility ### 🎯 Developer Experience - Added comprehensive debug information - Implemented system status monitoring - Added version control integration - Enhanced error handling and reporting - Added detailed logging system --- ## 🔧 Technical Details - **Frontend Stack** - React 18 with TypeScript - Framer Motion for animations - TailwindCSS for styling - Radix UI for accessible components - **State Management** - Local storage for persistence - React hooks for state - Custom stores for global state - **API Integration** - GitHub API integration - Ollama API integration - Provider API management - Error boundary implementation ## 📝 Notes - Initial release focusing on core functionality and user experience - Enhanced dark mode support across all components - Improved accessibility and keyboard navigation - Added comprehensive logging and debugging tools - Implemented robust error handling and user feedback
Bolt DIY UI
## New User Interface Features
### 🎨 Redesigned Control Panel
The Bolt DIY interface has been completely redesigned with a modern, intuitive layout featuring two main components:
1. **Users Window** - Main control panel for regular users
2. **Developer Window** - Advanced settings and debugging tools
### 💡 Core Features
- **Drag & Drop Tab Management**: Customize tab order in both User and Developer windows
- **Dynamic Status Updates**: Real-time status indicators for updates, notifications, and system health
- **Responsive Design**: Beautiful transitions and animations using Framer Motion
- **Dark/Light Mode Support**: Full theme support with consistent styling
- **Improved Accessibility**: Using Radix UI primitives for better accessibility
- **Enhanced Provider Management**: Split view for local and cloud providers
- **Resource Monitoring**: New Task Manager for system performance tracking
### 🎯 Tab Overview
#### User Window Tabs
1. **Profile**
- Manage user profile and account settings
- Avatar customization
- Account preferences
2. **Settings**
- Configure application preferences
- Customize UI behavior
- Manage general settings
3. **Notifications**
- Real-time notification center
- Unread notification tracking
- Notification preferences
4. **Features**
- Explore new and upcoming features
- Feature preview toggles
- Early access options
5. **Data**
- Data management tools
- Storage settings
- Backup and restore options
6. **Cloud Providers**
- Configure cloud-based AI providers
- API key management
- Cloud model selection
- Provider-specific settings
- Status monitoring for each provider
7. **Local Providers**
- Manage local AI models
- Ollama integration and model updates
- LM Studio configuration
- Local inference settings
- Model download and updates
8. **Task Manager**
- System resource monitoring
- Process management
- Performance metrics
- Resource usage graphs
- Alert configurations
9. **Connection**
- Network status monitoring
- Connection health metrics
- Troubleshooting tools
- Latency tracking
- Auto-reconnect settings
10. **Debug**
- System diagnostics
- Performance monitoring
- Error tracking
- Provider status checks
- System information
11. **Event Logs**
- Comprehensive system logs
- Filtered log views
- Log management tools
- Error tracking
- Performance metrics
12. **Update**
- Version management
- Update notifications
- Release notes
- Auto-update configuration
#### Developer Window Enhancements
- **Advanced Tab Management**
- Fine-grained control over tab visibility
- Custom tab ordering
- Tab permission management
- Category-based organization
- **Developer Tools**
- Enhanced debugging capabilities
- System metrics and monitoring
- Performance optimization tools
- Advanced logging features
### 🚀 UI Improvements
1. **Enhanced Navigation**
- Intuitive back navigation
- Breadcrumb-style header
- Context-aware menu system
- Improved tab organization
2. **Status Indicators**
- Dynamic update badges
- Real-time connection status
- System health monitoring
- Provider status tracking
3. **Profile Integration**
- Quick access profile menu
- Avatar support
- Fast settings access
- Personalization options
4. **Accessibility Features**
- Keyboard navigation
- Screen reader support
- Focus management
- ARIA attributes
### 🛠 Technical Enhancements
- **State Management**
- Nano Stores for efficient state handling
- Persistent settings storage
- Real-time state synchronization
- Provider state management
- **Performance Optimizations**
- Lazy loading of tab contents
- Efficient DOM updates
- Optimized animations
- Resource monitoring
- **Developer Experience**
- Improved error handling
- Better debugging tools
- Enhanced logging system
- Performance profiling
### 🎯 Future Roadmap
- [ ] Additional customization options
- [ ] Enhanced theme support
- [ ] More developer tools
- [ ] Extended API integrations
- [ ] Advanced monitoring capabilities
- [ ] Custom provider plugins
- [ ] Enhanced resource management
- [ ] Advanced debugging features
## 🔧 Technical Details
### Dependencies
- Radix UI for accessible components
- Framer Motion for animations
- React DnD for drag and drop
- Nano Stores for state management
### Browser Support
- Modern browsers (Chrome, Firefox, Safari, Edge)
- Progressive enhancement for older browsers
### Performance
- Optimized bundle size
- Efficient state updates
- Minimal re-renders
- Resource-aware operations
## 📝 Contributing
We welcome contributions! Please see our contributing guidelines for more information.
## 📄 License
MIT License - see LICENSE for details
This reverts commit 6e52114.
# Tab Management System Implementation ## What's Been Implemented 1. Complete Tab Management System with: - Drag and drop functionality for reordering tabs - Visual feedback during drag operations - Smooth animations and transitions - Dark mode support - Search functionality for tabs - Reset to defaults option 2. Developer Mode Features: - Shows ALL available tabs in developer mode - Maintains tab order across modes - Proper visibility toggles - Automatic inclusion of developer-specific tabs 3. User Mode Features: - Shows only user-configured tabs - Maintains separate tab configurations - Proper visibility management ## Key Components - `TabManagement.tsx`: Main management interface - `ControlPanel.tsx`: Main panel with tab display - Integration with tab configuration store - Proper type definitions and interfaces ## Technical Features - React DnD for drag and drop - Framer Motion for animations - TypeScript for type safety - UnoCSS for styling - Toast notifications for user feedback ## Next Steps 1. Testing: - Test tab visibility in both modes - Verify drag and drop persistence - Check dark mode compatibility - Verify search functionality - Test reset functionality 2. Potential Improvements: - Add tab grouping functionality - Implement tab pinning - Add keyboard shortcuts - Improve accessibility - Add tab descriptions - Add tab icons customization 3. Documentation: - Add inline code comments - Create user documentation - Document API interfaces - Add setup instructions 4. Future Features: - Tab export/import - Custom tab creation - Tab templates - User preferences sync - Tab statistics ## Known Issues to Address 1. Ensure all tabs are visible in developer mode 2. Improve drag and drop performance 3. Better state persistence 4. Enhanced error handling 5. Improved type safety ## Usage Instructions 1. Switch to developer mode to see all available tabs 2. Use drag and drop to reorder tabs 3. Toggle visibility using switches 4. Use search to filter tabs 5. Reset to defaults if needed ## Technical Debt 1. Refactor tab configuration store 2. Improve type definitions 3. Add proper error boundaries 4. Implement proper loading states 5. Add comprehensive testing ## Security Considerations 1. Validate tab configurations 2. Sanitize user input 3. Implement proper access control 4. Add audit logging 5. Secure state management
# UI V3 Changelog Major updates and improvements in this release: ## Core Changes - Complete NEW REWRITTEN UI system overhaul (V3) with semantic design tokens - New settings management system with drag-and-drop capabilities - Enhanced provider system supporting multiple AI services - Improved theme system with better dark mode support - New component library with consistent design patterns ## Technical Updates - Reorganized project architecture for better maintainability - Performance optimizations and bundle size improvements - Enhanced security features and access controls - Improved developer experience with better tooling - Comprehensive testing infrastructure ## New Features - Background rays effect for improved visual feedback - Advanced tab management system - Automatic and manual update support - Enhanced error handling and visualization - Improved accessibility across all components For detailed information about all changes and improvements, please see the full changelog.
## Changes to DebugTab.tsx & EventLogsTab.tsx ### Debug Tab Enhancements - Added multi-page support for PDF exports - Implemented proper page breaks and content flow - Added styled headers, key-value pairs, and horizontal lines - Added title and timestamp at the top of the PDF - Improved PDF layout with sections for system info, web app info, and performance metrics - Added footer with page numbers - Fixed memory usage calculations with proper null checks - Added error handling for undefined values ### Event Logs Tab Enhancements - Added comprehensive PDF export functionality with: - Professional header with bolt.diy branding - Report summary section - Log statistics with color-coded categories - Detailed log entries with proper formatting - Multi-page support with proper page breaks - Footer with page numbers and timestamp - Added multiple export formats (JSON, CSV, PDF, Text) - Fixed linter errors and improved type safety - Enhanced dark mode compatibility
|
@Stijnus Change defaults to this: profile icon has a strange background reactangle: Developer Mode (I know it is developer, but it shows also the normal ones which is ok, and some users will try anyway) |
leex279
approved these changes
Feb 2, 2025
MAC OS SHORTCUTS: - Toggle Terminal: ⌘ + ` - Toggle Theme: ⌘ + ⌥ + ⇧ + D - Toggle Chat: ⌘ + ⌥ + J - Toggle Settings: ⌘ + ⌥ + S WINDOWS/LINUX SHORTCUTS: - Toggle Terminal: Ctrl + ` - Toggle Theme: Win + Alt + Shift + D - Toggle Chat: Ctrl + Alt + J - Toggle Settings: Ctrl + Alt + S
|
all is changed please check just one small issue with the avatar fix in new release |
|
Updates and Profiles should aso have the beta badge ;) Also the local providers should still be marked as beta + disabled by default But lets just merge now and do this in another PR @thecodacus can you check and merge pls :) |
more enhanced UI and more details what is fixed, ect
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Bolt.DIY Project Changelog
Project Architecture
New Folder Structure:
/app- Core application code/components- React components/@settings- Settings system components/ui- Core UI component library/chat- Chat interface components/workbench- Code editor workspace/header- Application header components/sidebar- Sidebar components/git- Git integration components/editor- Code editor components/routes- Application routes/lib- Core libraries and utilities/utils- Utility functions/types- TypeScript definitions/styles- Global stylesCore Systems:
UI System V3
Design System:
Component Library:
Visual Features:
Feature Implementations
Settings System:
Provider System:
Update System:
Technical Improvements
Performance:
Development Experience:
Testing Infrastructure:
Security Enhancements
Data Protection:
Access Control:
Current Focus
Optimization:
Documentation:
Testing:
Enjoy testing any feedback is mutch welcome :)
Br,
Stijnus