iBoss/bolt-diy
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

ui fix

Browse Source
This commit is contained in:
Stijnus
2025-01-21 11:55:26 +01:00
parent 436a8e54bf
commit 78d4e1bb54
13 changed files with 2011 additions and 548 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
app/components/settings/developer/DeveloperWindow.tsx
View File

@@ -1,9 +1,10 @@
import * as RadixDialog from '@radix-ui/react-dialog';
import { motion } from 'framer-motion';
import { useState } from 'react';
import { useState, useEffect } from 'react';
import { classNames } from '~/utils/classNames';
import { TabManagement } from './TabManagement';
import { TabTile } from '~/components/settings/shared/TabTile';
import { DialogTitle } from '~/components/ui/Dialog';
import type { TabType, TabVisibilityConfig } from '~/components/settings/settings.types';
import { tabConfigurationStore, updateTabConfiguration } from '~/lib/stores/settings';
import { useStore } from '@nanostores/react';
@@ -20,6 +21,7 @@ import SettingsTab from '~/components/settings/settings/SettingsTab';
import ProfileTab from '~/components/settings/profile/ProfileTab';
import ConnectionsTab from '~/components/settings/connections/ConnectionsTab';
import { useUpdateCheck, useFeatures, useNotifications, useConnectionStatus, useDebugStatus } from '~/lib/hooks';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
interface DraggableTabTileProps {
tab: TabVisibilityConfig;
@@ -102,6 +104,24 @@ export const DeveloperWindow = ({ open, onClose }: DeveloperWindowProps) => {
const [activeTab, setActiveTab] = useState<TabType | null>(null);
const [showTabManagement, setShowTabManagement] = useState(false);
const [loadingTab, setLoadingTab] = useState<TabType | null>(null);
const [profile, setProfile] = useState(() => {
const saved = localStorage.getItem('bolt_user_profile');
return saved ? JSON.parse(saved) : { avatar: null, notifications: true };
});
// Listen for profile changes
useEffect(() => {
const handleStorageChange = (e: StorageEvent) => {
if (e.key === 'bolt_user_profile') {
const newProfile = e.newValue ? JSON.parse(e.newValue) : { avatar: null, notifications: true };
setProfile(newProfile);
}
};
window.addEventListener('storage', handleStorageChange);
return () => window.removeEventListener('storage', handleStorageChange);
}, []);
// Status hooks
const { hasUpdate, currentVersion, acknowledgeUpdate } = useUpdateCheck();
@@ -120,7 +140,14 @@ export const DeveloperWindow = ({ open, onClose }: DeveloperWindowProps) => {
// Only show tabs that are assigned to the developer window AND are visible
const visibleDeveloperTabs = tabConfiguration.developerTabs
.filter((tab: TabVisibilityConfig) => tab.window === 'developer' && tab.visible)
.filter((tab) => {
// Hide notifications tab if notifications are disabled
if (tab.id === 'notifications' && !profile.notifications) {
return false;
}
return tab.visible;
})
.sort((a: TabVisibilityConfig, b: TabVisibilityConfig) => (a.order || 0) - (b.order || 0));
const moveTab = (dragIndex: number, hoverIndex: number) => {
@@ -136,32 +163,38 @@ export const DeveloperWindow = ({ open, onClose }: DeveloperWindowProps) => {
updateTabConfiguration(updatedTargetTab);
};
const handleTabClick = async (tabId: TabType) => {
const handleTabClick = (tabId: TabType) => {
// Don't allow clicking notifications tab if disabled
if (tabId === 'notifications' && !profile.notifications) {
return;
}
setLoadingTab(tabId);
setActiveTab(tabId);
// Acknowledge the status based on tab type
switch (tabId) {
case 'update':
await acknowledgeUpdate();
acknowledgeUpdate();
break;
case 'features':
await acknowledgeAllFeatures();
acknowledgeAllFeatures();
break;
case 'notifications':
await markAllAsRead();
markAllAsRead();
break;
case 'connection':
acknowledgeIssue();
break;
case 'debug':
await acknowledgeAllIssues();
acknowledgeAllIssues();
break;
}
// Simulate loading time (remove this in production)
await new Promise((resolve) => setTimeout(resolve, 1000));
setLoadingTab(null);
// Clear loading state after a short delay
setTimeout(() => {
setLoadingTab(null);
}, 500);
};
const getTabComponent = () => {
@@ -238,7 +271,7 @@ export const DeveloperWindow = ({ open, onClose }: DeveloperWindowProps) => {
<RadixDialog.Root open={open}>
<RadixDialog.Portal>
<div className="fixed inset-0 flex items-center justify-center z-[60]">
<RadixDialog.Overlay asChild>
<RadixDialog.Overlay className="fixed inset-0">
<motion.div
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
initial={{ opacity: 0 }}
@@ -247,16 +280,15 @@ export const DeveloperWindow = ({ open, onClose }: DeveloperWindowProps) => {
transition={{ duration: 0.2 }}
/>
</RadixDialog.Overlay>
<RadixDialog.Content aria-describedby={undefined} asChild>
<RadixDialog.Content aria-describedby={undefined} className="relative z-[61]">
<motion.div
className={classNames(
'relative',
'w-[1200px] h-[90vh]',
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
'rounded-2xl shadow-2xl',
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
'flex flex-col overflow-hidden',
'z-[61]',
)}
initial={{ opacity: 0, scale: 0.95, y: 20 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
@@ -264,68 +296,142 @@ export const DeveloperWindow = ({ open, onClose }: DeveloperWindowProps) => {
transition={{ duration: 0.2 }}
>
{/* Header */}
<div className="flex-none flex items-center justify-between px-6 py-4 border-b border-[#E5E5E5] dark:border-[#1A1A1A]">
<div className="flex items-center gap-4">
{(activeTab || showTabManagement) && (
<motion.button
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<div className="flex items-center space-x-4">
{activeTab || showTabManagement ? (
<button
onClick={handleBack}
className={classNames(
'flex items-center justify-center w-8 h-8 rounded-lg',
'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
'group transition-all duration-200',
)}
className="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-all duration-200"
>
<div className="i-ph:arrow-left w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
</button>
) : (
<motion.div
className="i-ph:lightning-fill w-5 h-5 text-purple-500"
initial={{ rotate: -10 }}
animate={{ rotate: 10 }}
transition={{
repeat: Infinity,
repeatType: 'reverse',
duration: 2,
ease: 'easeInOut',
}}
/>
)}
<DialogTitle className="text-xl font-semibold text-gray-900 dark:text-white">
{showTabManagement ? 'Tab Management' : activeTab ? 'Developer Tools' : 'Developer Settings'}
</DialogTitle>
</div>
<div className="flex items-center space-x-4">
{!activeTab && !showTabManagement && (
<motion.button
onClick={() => setShowTabManagement(true)}
className="flex items-center space-x-2 px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-all duration-200"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
>
<div className="i-ph:arrow-left w-4 h-4 text-bolt-elements-textSecondary group-hover:text-purple-500 transition-colors" />
<div className="i-ph:sliders-horizontal w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
<span className="text-sm text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors">
Manage Tabs
</span>
</motion.button>
)}
<div className="flex items-center gap-3">
<motion.div
className="i-ph:code-fill w-5 h-5 text-purple-500"
initial={{ rotate: 0 }}
animate={{ rotate: 360 }}
transition={{
repeat: Infinity,
duration: 8,
ease: 'linear',
}}
/>
<h2 className="text-lg font-medium text-bolt-elements-textPrimary">
{showTabManagement ? 'Tab Management' : activeTab ? 'Developer Tools' : 'Developer Dashboard'}
</h2>
<div className="relative">
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild>
<button className="flex items-center justify-center w-8 h-8 rounded-full overflow-hidden hover:ring-2 ring-gray-300 dark:ring-gray-600 transition-all">
{profile.avatar ? (
<img src={profile.avatar} alt="Profile" className="w-full h-full object-cover" />
) : (
<div className="w-full h-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
<svg
className="w-5 h-5 text-gray-500 dark:text-gray-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
</div>
)}
</button>
</DropdownMenu.Trigger>
<DropdownMenu.Portal>
<DropdownMenu.Content
className="min-w-[220px] bg-white dark:bg-gray-800 rounded-lg shadow-lg py-1 z-[200]"
sideOffset={5}
align="end"
>
<DropdownMenu.Item
className="group flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-500/10 dark:hover:bg-purple-500/20 cursor-pointer transition-colors"
onSelect={() => handleTabClick('profile')}
>
<div className="mr-3 flex h-5 w-5 items-center justify-center">
<div className="i-ph:user-circle w-[18px] h-[18px] text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
</div>
<span className="group-hover:text-purple-500 transition-colors">Profile</span>
</DropdownMenu.Item>
<DropdownMenu.Item
className="group flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-500/10 dark:hover:bg-purple-500/20 cursor-pointer transition-colors"
onSelect={() => handleTabClick('settings')}
>
<div className="mr-3 flex h-5 w-5 items-center justify-center">
<div className="i-ph:gear w-[18px] h-[18px] text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
</div>
<span className="group-hover:text-purple-500 transition-colors">Settings</span>
</DropdownMenu.Item>
{profile.notifications && (
<>
<DropdownMenu.Item
className="group flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-500/10 dark:hover:bg-purple-500/20 cursor-pointer transition-colors"
onSelect={() => handleTabClick('notifications')}
>
<div className="mr-3 flex h-5 w-5 items-center justify-center">
<div className="i-ph:bell w-[18px] h-[18px] text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
</div>
<span className="group-hover:text-purple-500 transition-colors">
Notifications
{hasUnreadNotifications && (
<span className="ml-2 px-1.5 py-0.5 text-xs bg-purple-500 text-white rounded-full">
{unreadNotifications.length}
</span>
)}
</span>
</DropdownMenu.Item>
<DropdownMenu.Separator className="my-1 h-px bg-gray-200 dark:bg-gray-700" />
</>
)}
<DropdownMenu.Item
className="group flex items-center px-4 py-2.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-500/10 dark:hover:bg-purple-500/20 cursor-pointer transition-colors"
onSelect={onClose}
>
<div className="mr-3 flex h-5 w-5 items-center justify-center">
<div className="i-ph:sign-out w-[18px] h-[18px] text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
</div>
<span className="group-hover:text-purple-500 transition-colors">Close</span>
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Portal>
</DropdownMenu.Root>
</div>
</div>
<div className="flex items-center gap-3">
{!showTabManagement && !activeTab && (
<motion.button
onClick={() => setShowTabManagement(true)}
className={classNames(
'px-3 py-1.5 rounded-lg text-sm',
'bg-purple-500/10 text-purple-500',
'hover:bg-purple-500/20',
'transition-colors duration-200',
)}
whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.98 }}
>
Manage Tabs
</motion.button>
)}
<motion.button
<button
onClick={onClose}
className={classNames(
'flex items-center justify-center w-8 h-8 rounded-lg',
'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
'group transition-all duration-200',
)}
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className="flex items-center justify-center w-8 h-8 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-purple-500/10 dark:hover:bg-purple-500/20 group transition-all duration-200"
>
<div className="i-ph:x w-4 h-4 text-bolt-elements-textSecondary group-hover:text-purple-500 transition-colors" />
</motion.button>
<div className="i-ph:x w-4 h-4 text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
</button>
</div>
</div>