mirror of
https://github.com/stackblitz-labs/bolt.diy.git
synced 2025-06-18 01:49:07 +01:00
999d87b1e8
# 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
636 lines
26 KiB
TypeScript
636 lines
26 KiB
TypeScript
import * as RadixDialog from '@radix-ui/react-dialog';
|
|
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import React, { useState, useEffect, useMemo } from 'react';
|
|
import { classNames } from '~/utils/classNames';
|
|
import { DialogTitle } from '~/components/ui/Dialog';
|
|
import { Switch } from '~/components/ui/Switch';
|
|
import type { TabType, TabVisibilityConfig } from '~/components/settings/settings.types';
|
|
import { TAB_LABELS } from '~/components/settings/settings.types';
|
|
import { DeveloperWindow } from '~/components/settings/developer/DeveloperWindow';
|
|
import { TabTile } from '~/components/settings/shared/TabTile';
|
|
import { useStore } from '@nanostores/react';
|
|
import { DndProvider, useDrag, useDrop } from 'react-dnd';
|
|
import { HTML5Backend } from 'react-dnd-html5-backend';
|
|
import ProfileTab from '~/components/settings/profile/ProfileTab';
|
|
import SettingsTab from '~/components/settings/settings/SettingsTab';
|
|
import NotificationsTab from '~/components/settings/notifications/NotificationsTab';
|
|
import FeaturesTab from '~/components/settings/features/FeaturesTab';
|
|
import DataTab from '~/components/settings/data/DataTab';
|
|
import DebugTab from '~/components/settings/debug/DebugTab';
|
|
import { EventLogsTab } from '~/components/settings/event-logs/EventLogsTab';
|
|
import UpdateTab from '~/components/settings/update/UpdateTab';
|
|
import ConnectionsTab from '~/components/settings/connections/ConnectionsTab';
|
|
import { useUpdateCheck } from '~/lib/hooks/useUpdateCheck';
|
|
import { useFeatures } from '~/lib/hooks/useFeatures';
|
|
import { useNotifications } from '~/lib/hooks/useNotifications';
|
|
import { useConnectionStatus } from '~/lib/hooks/useConnectionStatus';
|
|
import { useDebugStatus } from '~/lib/hooks/useDebugStatus';
|
|
import CloudProvidersTab from '~/components/settings/providers/CloudProvidersTab';
|
|
import ServiceStatusTab from '~/components/settings/providers/ServiceStatusTab';
|
|
import LocalProvidersTab from '~/components/settings/providers/LocalProvidersTab';
|
|
import TaskManagerTab from '~/components/settings/task-manager/TaskManagerTab';
|
|
import {
|
|
tabConfigurationStore,
|
|
resetTabConfiguration,
|
|
updateTabConfiguration,
|
|
developerModeStore,
|
|
setDeveloperMode,
|
|
} from '~/lib/stores/settings';
|
|
import { DEFAULT_TAB_CONFIG } from '~/components/settings/settings.types';
|
|
|
|
interface DraggableTabTileProps {
|
|
tab: TabVisibilityConfig;
|
|
index: number;
|
|
moveTab: (dragIndex: number, hoverIndex: number) => void;
|
|
onClick: () => void;
|
|
isActive: boolean;
|
|
hasUpdate: boolean;
|
|
statusMessage: string;
|
|
description: string;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
const TAB_DESCRIPTIONS: Record<TabType, string> = {
|
|
profile: 'Manage your profile and account settings',
|
|
settings: 'Configure application preferences',
|
|
notifications: 'View and manage your notifications',
|
|
features: 'Explore new and upcoming features',
|
|
data: 'Manage your data and storage',
|
|
'cloud-providers': 'Configure cloud AI providers and models',
|
|
'local-providers': 'Configure local AI providers and models',
|
|
'service-status': 'Monitor cloud LLM service status',
|
|
connection: 'Check connection status and settings',
|
|
debug: 'Debug tools and system information',
|
|
'event-logs': 'View system events and logs',
|
|
update: 'Check for updates and release notes',
|
|
'task-manager': 'Monitor system resources and processes',
|
|
};
|
|
|
|
const DraggableTabTile = ({
|
|
tab,
|
|
index,
|
|
moveTab,
|
|
onClick,
|
|
isActive,
|
|
hasUpdate,
|
|
statusMessage,
|
|
description,
|
|
isLoading,
|
|
}: DraggableTabTileProps) => {
|
|
const [{ isDragging }, drag] = useDrag({
|
|
type: 'tab',
|
|
item: { index },
|
|
collect: (monitor) => ({
|
|
isDragging: monitor.isDragging(),
|
|
}),
|
|
});
|
|
|
|
const [, drop] = useDrop({
|
|
accept: 'tab',
|
|
hover: (item: { index: number }) => {
|
|
if (item.index === index) {
|
|
return;
|
|
}
|
|
|
|
moveTab(item.index, index);
|
|
item.index = index;
|
|
},
|
|
});
|
|
|
|
const dragDropRef = (node: HTMLDivElement | null) => {
|
|
if (node) {
|
|
drag(drop(node));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div ref={dragDropRef} style={{ opacity: isDragging ? 0.5 : 1 }}>
|
|
<TabTile
|
|
tab={tab}
|
|
onClick={onClick}
|
|
isActive={isActive}
|
|
hasUpdate={hasUpdate}
|
|
statusMessage={statusMessage}
|
|
description={description}
|
|
isLoading={isLoading}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
interface UsersWindowProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
interface TabWithType extends TabVisibilityConfig {
|
|
isExtraDevTab?: boolean;
|
|
}
|
|
|
|
export const UsersWindow = ({ open, onClose }: UsersWindowProps) => {
|
|
const [activeTab, setActiveTab] = useState<TabType | null>(null);
|
|
const [loadingTab, setLoadingTab] = useState<TabType | null>(null);
|
|
const tabConfiguration = useStore(tabConfigurationStore);
|
|
const developerMode = useStore(developerModeStore);
|
|
const [showDeveloperWindow, setShowDeveloperWindow] = useState(false);
|
|
const [profile, setProfile] = useState(() => {
|
|
const saved = localStorage.getItem('bolt_user_profile');
|
|
return saved ? JSON.parse(saved) : { avatar: null, notifications: true };
|
|
});
|
|
|
|
// Status hooks
|
|
const { hasUpdate, currentVersion, acknowledgeUpdate } = useUpdateCheck();
|
|
const { hasNewFeatures, unviewedFeatures, acknowledgeAllFeatures } = useFeatures();
|
|
const { hasUnreadNotifications, unreadNotifications, markAllAsRead } = useNotifications();
|
|
const { hasConnectionIssues, currentIssue, acknowledgeIssue } = useConnectionStatus();
|
|
const { hasActiveWarnings, activeIssues, acknowledgeAllIssues } = useDebugStatus();
|
|
|
|
// 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);
|
|
}, []);
|
|
|
|
// Listen for settings toggle event
|
|
useEffect(() => {
|
|
const handleToggleSettings = () => {
|
|
if (!open) {
|
|
// Open settings panel
|
|
setActiveTab('settings');
|
|
onClose(); // Close any other open panels
|
|
}
|
|
};
|
|
|
|
document.addEventListener('toggle-settings', handleToggleSettings);
|
|
|
|
return () => document.removeEventListener('toggle-settings', handleToggleSettings);
|
|
}, [open, onClose]);
|
|
|
|
// Ensure tab configuration is properly initialized
|
|
useEffect(() => {
|
|
if (!tabConfiguration || !tabConfiguration.userTabs || !tabConfiguration.developerTabs) {
|
|
console.warn('Tab configuration is invalid, resetting to defaults');
|
|
resetTabConfiguration();
|
|
} else {
|
|
// Validate tab configuration structure
|
|
const isValid =
|
|
tabConfiguration.userTabs.every(
|
|
(tab) =>
|
|
tab &&
|
|
typeof tab.id === 'string' &&
|
|
typeof tab.visible === 'boolean' &&
|
|
typeof tab.window === 'string' &&
|
|
typeof tab.order === 'number',
|
|
) &&
|
|
tabConfiguration.developerTabs.every(
|
|
(tab) =>
|
|
tab &&
|
|
typeof tab.id === 'string' &&
|
|
typeof tab.visible === 'boolean' &&
|
|
typeof tab.window === 'string' &&
|
|
typeof tab.order === 'number',
|
|
);
|
|
|
|
if (!isValid) {
|
|
console.warn('Tab configuration is malformed, resetting to defaults');
|
|
resetTabConfiguration();
|
|
}
|
|
}
|
|
}, [tabConfiguration]);
|
|
|
|
// Handle developer mode changes
|
|
const handleDeveloperModeChange = (checked: boolean) => {
|
|
setDeveloperMode(checked);
|
|
|
|
if (checked) {
|
|
setShowDeveloperWindow(true);
|
|
}
|
|
};
|
|
|
|
// Handle developer window close
|
|
const handleDeveloperWindowClose = () => {
|
|
setShowDeveloperWindow(false);
|
|
setDeveloperMode(false);
|
|
};
|
|
|
|
const handleBack = () => {
|
|
setActiveTab(null);
|
|
};
|
|
|
|
// Only show tabs that are assigned to the user window AND are visible
|
|
const visibleUserTabs = useMemo(() => {
|
|
if (!tabConfiguration?.userTabs || !Array.isArray(tabConfiguration.userTabs)) {
|
|
console.warn('Invalid tab configuration, using empty array');
|
|
return [];
|
|
}
|
|
|
|
// Get the base user tabs that are visible
|
|
const baseTabs = tabConfiguration.userTabs.filter((tab) => {
|
|
if (!tab || typeof tab.id !== 'string') {
|
|
console.warn('Invalid tab entry:', tab);
|
|
return false;
|
|
}
|
|
|
|
// Hide notifications tab if notifications are disabled
|
|
if (tab.id === 'notifications' && !profile.notifications) {
|
|
return false;
|
|
}
|
|
|
|
// Only show tabs that are explicitly visible and assigned to the user window
|
|
return tab.visible && tab.window === 'user';
|
|
});
|
|
|
|
// If in developer mode, add the developer-only tabs
|
|
if (developerMode) {
|
|
const developerOnlyTabs = DEFAULT_TAB_CONFIG.filter((tab) => {
|
|
/*
|
|
* Only include tabs that are:
|
|
* 1. Assigned to developer window
|
|
* 2. Not already in user tabs
|
|
* 3. Marked as visible in developer window
|
|
*/
|
|
return tab.window === 'developer' && tab.visible && !baseTabs.some((baseTab) => baseTab.id === tab.id);
|
|
}).map((tab) => ({
|
|
...tab,
|
|
isExtraDevTab: true,
|
|
order: baseTabs.length + tab.order, // Place after user tabs
|
|
}));
|
|
|
|
return [...baseTabs, ...developerOnlyTabs].sort((a, b) => a.order - b.order);
|
|
}
|
|
|
|
return baseTabs.sort((a, b) => a.order - b.order);
|
|
}, [tabConfiguration, profile.notifications, developerMode]);
|
|
|
|
const moveTab = (dragIndex: number, hoverIndex: number) => {
|
|
const draggedTab = visibleUserTabs[dragIndex];
|
|
const targetTab = visibleUserTabs[hoverIndex];
|
|
|
|
console.log('Moving tab:', { draggedTab, targetTab });
|
|
|
|
// Update the order of the dragged and target tabs
|
|
const updatedDraggedTab = { ...draggedTab, order: targetTab.order };
|
|
const updatedTargetTab = { ...targetTab, order: draggedTab.order };
|
|
|
|
// Update both tabs in the store
|
|
updateTabConfiguration(updatedDraggedTab);
|
|
updateTabConfiguration(updatedTargetTab);
|
|
};
|
|
|
|
const handleTabClick = async (tabId: TabType) => {
|
|
setLoadingTab(tabId);
|
|
setActiveTab(tabId);
|
|
|
|
// Acknowledge the status based on tab type
|
|
switch (tabId) {
|
|
case 'update':
|
|
await acknowledgeUpdate();
|
|
break;
|
|
case 'features':
|
|
await acknowledgeAllFeatures();
|
|
break;
|
|
case 'notifications':
|
|
await markAllAsRead();
|
|
break;
|
|
case 'connection':
|
|
acknowledgeIssue();
|
|
break;
|
|
case 'debug':
|
|
await acknowledgeAllIssues();
|
|
break;
|
|
}
|
|
|
|
// Simulate loading time (remove this in production)
|
|
await new Promise((resolve) => setTimeout(resolve, 1000));
|
|
setLoadingTab(null);
|
|
};
|
|
|
|
const getTabComponent = () => {
|
|
switch (activeTab) {
|
|
case 'profile':
|
|
return <ProfileTab />;
|
|
case 'settings':
|
|
return <SettingsTab />;
|
|
case 'notifications':
|
|
return <NotificationsTab />;
|
|
case 'features':
|
|
return <FeaturesTab />;
|
|
case 'data':
|
|
return <DataTab />;
|
|
case 'cloud-providers':
|
|
return <CloudProvidersTab />;
|
|
case 'service-status':
|
|
return <ServiceStatusTab />;
|
|
case 'local-providers':
|
|
return <LocalProvidersTab />;
|
|
case 'connection':
|
|
return <ConnectionsTab />;
|
|
case 'debug':
|
|
return <DebugTab />;
|
|
case 'event-logs':
|
|
return <EventLogsTab />;
|
|
case 'update':
|
|
return <UpdateTab />;
|
|
case 'task-manager':
|
|
return <TaskManagerTab />;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const getTabUpdateStatus = (tabId: TabType): boolean => {
|
|
switch (tabId) {
|
|
case 'update':
|
|
return hasUpdate;
|
|
case 'features':
|
|
return hasNewFeatures;
|
|
case 'notifications':
|
|
return hasUnreadNotifications;
|
|
case 'connection':
|
|
return hasConnectionIssues;
|
|
case 'debug':
|
|
return hasActiveWarnings;
|
|
default:
|
|
return false;
|
|
}
|
|
};
|
|
|
|
const getStatusMessage = (tabId: TabType): string => {
|
|
switch (tabId) {
|
|
case 'update':
|
|
return `New update available (v${currentVersion})`;
|
|
case 'features':
|
|
return `${unviewedFeatures.length} new feature${unviewedFeatures.length === 1 ? '' : 's'} to explore`;
|
|
case 'notifications':
|
|
return `${unreadNotifications.length} unread notification${unreadNotifications.length === 1 ? '' : 's'}`;
|
|
case 'connection':
|
|
return currentIssue === 'disconnected'
|
|
? 'Connection lost'
|
|
: currentIssue === 'high-latency'
|
|
? 'High latency detected'
|
|
: 'Connection issues detected';
|
|
case 'debug': {
|
|
const warnings = activeIssues.filter((i) => i.type === 'warning').length;
|
|
const errors = activeIssues.filter((i) => i.type === 'error').length;
|
|
|
|
return `${warnings} warning${warnings === 1 ? '' : 's'}, ${errors} error${errors === 1 ? '' : 's'}`;
|
|
}
|
|
default:
|
|
return '';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<DeveloperWindow open={showDeveloperWindow} onClose={handleDeveloperWindowClose} />
|
|
<DndProvider backend={HTML5Backend}>
|
|
<RadixDialog.Root open={open}>
|
|
<RadixDialog.Portal>
|
|
<div className="fixed inset-0 flex items-center justify-center z-[100]">
|
|
<RadixDialog.Overlay asChild>
|
|
<motion.div
|
|
className="absolute inset-0 bg-black/50 backdrop-blur-sm"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
/>
|
|
</RadixDialog.Overlay>
|
|
<RadixDialog.Content
|
|
aria-describedby={undefined}
|
|
onEscapeKeyDown={onClose}
|
|
onPointerDownOutside={onClose}
|
|
className="relative z-[101]"
|
|
>
|
|
<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-[51]',
|
|
)}
|
|
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
{/* Header */}
|
|
<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 ? (
|
|
<button
|
|
onClick={handleBack}
|
|
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">
|
|
{activeTab ? TAB_LABELS[activeTab] : 'Bolt Control Panel'}
|
|
</DialogTitle>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
<div className="flex items-center gap-2">
|
|
<Switch
|
|
checked={developerMode}
|
|
onCheckedChange={handleDeveloperModeChange}
|
|
className="data-[state=checked]:bg-purple-500"
|
|
aria-label="Toggle developer mode"
|
|
/>
|
|
<label className="text-sm text-gray-500 dark:text-gray-400">Switch to Developer Mode</label>
|
|
</div>
|
|
|
|
<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] animate-in fade-in-0 zoom-in-95"
|
|
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>
|
|
|
|
<button
|
|
onClick={onClose}
|
|
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-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div
|
|
className={classNames(
|
|
'flex-1',
|
|
'overflow-y-auto',
|
|
'hover:overflow-y-auto',
|
|
'scrollbar scrollbar-w-2',
|
|
'scrollbar-track-transparent',
|
|
'scrollbar-thumb-[#E5E5E5] hover:scrollbar-thumb-[#CCCCCC]',
|
|
'dark:scrollbar-thumb-[#333333] dark:hover:scrollbar-thumb-[#444444]',
|
|
'will-change-scroll',
|
|
'touch-auto',
|
|
)}
|
|
>
|
|
<motion.div
|
|
key={activeTab || 'home'}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
className="p-6"
|
|
>
|
|
{activeTab ? (
|
|
getTabComponent()
|
|
) : (
|
|
<motion.div
|
|
className="grid grid-cols-4 gap-4"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<AnimatePresence mode="popLayout">
|
|
{visibleUserTabs.map((tab: TabWithType, index: number) => (
|
|
<motion.div
|
|
key={tab.id}
|
|
layout
|
|
initial={{ opacity: 0, scale: 0.8, y: 20 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.8, y: -20 }}
|
|
transition={{
|
|
duration: 0.2,
|
|
delay: index * 0.05,
|
|
}}
|
|
>
|
|
<DraggableTabTile
|
|
tab={tab}
|
|
index={index}
|
|
moveTab={moveTab}
|
|
onClick={() => handleTabClick(tab.id)}
|
|
isActive={activeTab === tab.id}
|
|
hasUpdate={getTabUpdateStatus(tab.id)}
|
|
statusMessage={getStatusMessage(tab.id)}
|
|
description={TAB_DESCRIPTIONS[tab.id]}
|
|
isLoading={loadingTab === tab.id}
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
)}
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</RadixDialog.Content>
|
|
</div>
|
|
</RadixDialog.Portal>
|
|
</RadixDialog.Root>
|
|
</DndProvider>
|
|
</>
|
|
);
|
|
};
|