Add new features
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 commit is contained in:
Stijnus
@@ -4,6 +4,7 @@ import { useSettings } from '~/lib/hooks/useSettings';
|
||||
import { logStore } from '~/lib/stores/logs';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { toast } from 'react-toastify';
|
||||
import { Dialog, DialogRoot, DialogTitle, DialogDescription, DialogButton } from '~/components/ui/Dialog';
|
||||
|
||||
interface GitHubCommitResponse {
|
||||
sha: string;
|
||||
@@ -181,6 +182,9 @@ const UpdateTab = () => {
|
||||
checkInterval: 24,
|
||||
};
|
||||
});
|
||||
const [lastChecked, setLastChecked] = useState<Date | null>(null);
|
||||
const [showUpdateDialog, setShowUpdateDialog] = useState(false);
|
||||
const [updateChangelog, setUpdateChangelog] = useState<string[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem('update_settings', JSON.stringify(updateSettings));
|
||||
@@ -212,10 +216,17 @@ const UpdateTab = () => {
|
||||
};
|
||||
|
||||
const checkForUpdates = async () => {
|
||||
console.log('Starting update check...');
|
||||
setIsChecking(true);
|
||||
setError(null);
|
||||
setLastChecked(new Date());
|
||||
|
||||
// Add a minimum delay of 2 seconds to show the spinning animation
|
||||
const startTime = Date.now();
|
||||
|
||||
try {
|
||||
console.log('Fetching update info...');
|
||||
|
||||
const githubToken = localStorage.getItem('github_connection');
|
||||
const headers: HeadersInit = {};
|
||||
|
||||
@@ -226,6 +237,14 @@ const UpdateTab = () => {
|
||||
|
||||
const branchToCheck = isLatestBranch ? 'main' : 'stable';
|
||||
const info = await GITHUB_URLS.commitJson(branchToCheck, headers);
|
||||
|
||||
// Ensure we show the spinning animation for at least 2 seconds
|
||||
const elapsedTime = Date.now() - startTime;
|
||||
|
||||
if (elapsedTime < 2000) {
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000 - elapsedTime));
|
||||
}
|
||||
|
||||
setUpdateInfo(info);
|
||||
|
||||
if (info.hasUpdate) {
|
||||
@@ -248,25 +267,18 @@ const UpdateTab = () => {
|
||||
});
|
||||
|
||||
if (updateSettings.autoUpdate && !hasUserRespondedToUpdate) {
|
||||
const changelogText = info.changelog?.join('\n') || 'No changelog available';
|
||||
const userWantsUpdate = confirm(
|
||||
`An update is available.\n\nChangelog:\n${changelogText}\n\nDo you want to update now?`,
|
||||
);
|
||||
setHasUserRespondedToUpdate(true);
|
||||
|
||||
if (userWantsUpdate) {
|
||||
await initiateUpdate();
|
||||
} else {
|
||||
logStore.logSystem('Update cancelled by user');
|
||||
}
|
||||
setUpdateChangelog(info.changelog || ['No changelog available']);
|
||||
setShowUpdateDialog(true);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Detailed update check error:', err);
|
||||
setError('Failed to check for updates. Please try again later.');
|
||||
console.error('Update check failed:', err);
|
||||
setUpdateFailed(true);
|
||||
} finally {
|
||||
console.log('Update check completed');
|
||||
setIsChecking(false);
|
||||
}
|
||||
};
|
||||
@@ -483,9 +495,10 @@ const UpdateTab = () => {
|
||||
onClick={() => {
|
||||
setHasUserRespondedToUpdate(false);
|
||||
setUpdateFailed(false);
|
||||
setError(null);
|
||||
checkForUpdates();
|
||||
}}
|
||||
disabled={isChecking || (updateFailed && !hasUserRespondedToUpdate)}
|
||||
disabled={isChecking}
|
||||
className={classNames(
|
||||
'flex items-center gap-2 px-3 py-2 rounded-lg text-sm',
|
||||
'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
|
||||
@@ -538,6 +551,14 @@ const UpdateTab = () => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{lastChecked && (
|
||||
<div className="flex flex-col items-end mt-2">
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||
Last checked: {lastChecked.toLocaleString()}
|
||||
</span>
|
||||
{error && <span className="text-xs text-red-500 mt-1">{error}</span>}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{/* Update Details Card */}
|
||||
@@ -756,6 +777,66 @@ const UpdateTab = () => {
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Update Confirmation Dialog */}
|
||||
<DialogRoot open={showUpdateDialog} onOpenChange={setShowUpdateDialog}>
|
||||
<Dialog
|
||||
onClose={() => {
|
||||
setShowUpdateDialog(false);
|
||||
setHasUserRespondedToUpdate(true);
|
||||
logStore.logSystem('Update cancelled by user');
|
||||
}}
|
||||
>
|
||||
<div className="p-6 w-[500px]">
|
||||
<DialogTitle>Update Available</DialogTitle>
|
||||
<DialogDescription className="mt-2">
|
||||
A new version is available. Would you like to update now?
|
||||
</DialogDescription>
|
||||
|
||||
<div className="mt-3">
|
||||
<h3 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Changelog:</h3>
|
||||
<div
|
||||
className="bg-[#F5F5F5] dark:bg-[#1A1A1A] rounded-lg p-3 max-h-[300px] overflow-y-auto"
|
||||
style={{
|
||||
scrollbarWidth: 'thin',
|
||||
scrollbarColor: 'rgba(155, 155, 155, 0.5) transparent',
|
||||
}}
|
||||
>
|
||||
<div className="text-sm text-bolt-elements-textSecondary space-y-1.5">
|
||||
{updateChangelog.map((log, index) => (
|
||||
<div key={index} className="break-words leading-relaxed">
|
||||
{log}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-end gap-3">
|
||||
<DialogButton
|
||||
type="secondary"
|
||||
onClick={() => {
|
||||
setShowUpdateDialog(false);
|
||||
setHasUserRespondedToUpdate(true);
|
||||
logStore.logSystem('Update cancelled by user');
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</DialogButton>
|
||||
<DialogButton
|
||||
type="primary"
|
||||
onClick={async () => {
|
||||
setShowUpdateDialog(false);
|
||||
setHasUserRespondedToUpdate(true);
|
||||
await initiateUpdate();
|
||||
}}
|
||||
>
|
||||
Update Now
|
||||
</DialogButton>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</DialogRoot>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user