ui refactor
This commit is contained in:
Stijnus
378
app/components/settings/developer/DeveloperWindow.tsx
Normal file
378
app/components/settings/developer/DeveloperWindow.tsx
Normal file
@@ -0,0 +1,378 @@
|
||||
import * as RadixDialog from '@radix-ui/react-dialog';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useState } from 'react';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { TabManagement } from './TabManagement';
|
||||
import { TabTile } from '~/components/settings/shared/TabTile';
|
||||
import type { TabType, TabVisibilityConfig } from '~/components/settings/settings.types';
|
||||
import { tabConfigurationStore, updateTabConfiguration } from '~/lib/stores/settings';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { DndProvider, useDrag, useDrop } from 'react-dnd';
|
||||
import { HTML5Backend } from 'react-dnd-html5-backend';
|
||||
import DebugTab from '~/components/settings/debug/DebugTab';
|
||||
import { EventLogsTab } from '~/components/settings/event-logs/EventLogsTab';
|
||||
import UpdateTab from '~/components/settings/update/UpdateTab';
|
||||
import { ProvidersTab } from '~/components/settings/providers/ProvidersTab';
|
||||
import DataTab from '~/components/settings/data/DataTab';
|
||||
import FeaturesTab from '~/components/settings/features/FeaturesTab';
|
||||
import NotificationsTab from '~/components/settings/notifications/NotificationsTab';
|
||||
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';
|
||||
|
||||
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',
|
||||
providers: 'Configure AI providers and models',
|
||||
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',
|
||||
};
|
||||
|
||||
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;
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref={(node) => drag(drop(node))} style={{ opacity: isDragging ? 0.5 : 1 }}>
|
||||
<TabTile
|
||||
tab={tab}
|
||||
onClick={onClick}
|
||||
isActive={isActive}
|
||||
hasUpdate={hasUpdate}
|
||||
statusMessage={statusMessage}
|
||||
description={description}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface DeveloperWindowProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const DeveloperWindow = ({ open, onClose }: DeveloperWindowProps) => {
|
||||
const tabConfiguration = useStore(tabConfigurationStore);
|
||||
const [activeTab, setActiveTab] = useState<TabType | null>(null);
|
||||
const [showTabManagement, setShowTabManagement] = useState(false);
|
||||
const [loadingTab, setLoadingTab] = useState<TabType | null>(null);
|
||||
|
||||
// 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();
|
||||
|
||||
const handleBack = () => {
|
||||
if (showTabManagement) {
|
||||
setShowTabManagement(false);
|
||||
} else if (activeTab) {
|
||||
setActiveTab(null);
|
||||
}
|
||||
};
|
||||
|
||||
// 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)
|
||||
.sort((a: TabVisibilityConfig, b: TabVisibilityConfig) => (a.order || 0) - (b.order || 0));
|
||||
|
||||
const moveTab = (dragIndex: number, hoverIndex: number) => {
|
||||
const draggedTab = visibleDeveloperTabs[dragIndex];
|
||||
const targetTab = visibleDeveloperTabs[hoverIndex];
|
||||
|
||||
// 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 'providers':
|
||||
return <ProvidersTab />;
|
||||
case 'connection':
|
||||
return <ConnectionsTab />;
|
||||
case 'debug':
|
||||
return <DebugTab />;
|
||||
case 'event-logs':
|
||||
return <EventLogsTab />;
|
||||
case 'update':
|
||||
return <UpdateTab />;
|
||||
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 (
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<RadixDialog.Root open={open}>
|
||||
<RadixDialog.Portal>
|
||||
<div className="fixed inset-0 flex items-center justify-center z-[60]">
|
||||
<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} asChild>
|
||||
<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 }}
|
||||
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
||||
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
|
||||
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',
|
||||
)}
|
||||
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" />
|
||||
</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>
|
||||
</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
|
||||
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 }}
|
||||
>
|
||||
<div className="i-ph:x w-4 h-4 text-bolt-elements-textSecondary group-hover:text-purple-500 transition-colors" />
|
||||
</motion.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 initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="p-6">
|
||||
{showTabManagement ? (
|
||||
<TabManagement />
|
||||
) : activeTab ? (
|
||||
getTabComponent()
|
||||
) : (
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
{visibleDeveloperTabs.map((tab: TabVisibilityConfig, index: number) => (
|
||||
<DraggableTabTile
|
||||
key={tab.id}
|
||||
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}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</RadixDialog.Content>
|
||||
</div>
|
||||
</RadixDialog.Portal>
|
||||
</RadixDialog.Root>
|
||||
</DndProvider>
|
||||
);
|
||||
};
|
||||
315
app/components/settings/developer/TabManagement.tsx
Normal file
315
app/components/settings/developer/TabManagement.tsx
Normal file
@@ -0,0 +1,315 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import { useState } from 'react';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { tabConfigurationStore, updateTabConfiguration, resetTabConfiguration } from '~/lib/stores/settings';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { TAB_LABELS, type TabType, type TabVisibilityConfig } from '~/components/settings/settings.types';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
// Define icons for each tab type
|
||||
const TAB_ICONS: Record<TabType, string> = {
|
||||
profile: 'i-ph:user-circle-fill',
|
||||
settings: 'i-ph:gear-six-fill',
|
||||
notifications: 'i-ph:bell-fill',
|
||||
features: 'i-ph:sparkle-fill',
|
||||
data: 'i-ph:database-fill',
|
||||
providers: 'i-ph:robot-fill',
|
||||
connection: 'i-ph:plug-fill',
|
||||
debug: 'i-ph:bug-fill',
|
||||
'event-logs': 'i-ph:list-bullets-fill',
|
||||
update: 'i-ph:arrow-clockwise-fill',
|
||||
};
|
||||
|
||||
interface TabGroupProps {
|
||||
title: string;
|
||||
description?: string;
|
||||
tabs: TabVisibilityConfig[];
|
||||
onVisibilityChange: (tabId: TabType, enabled: boolean) => void;
|
||||
targetWindow: 'user' | 'developer';
|
||||
standardTabs: TabType[];
|
||||
}
|
||||
|
||||
const TabGroup = ({ title, description, tabs, onVisibilityChange, targetWindow }: TabGroupProps) => {
|
||||
// Split tabs into visible and hidden
|
||||
const visibleTabs = tabs.filter((tab) => tab.visible).sort((a, b) => (a.order || 0) - (b.order || 0));
|
||||
const hiddenTabs = tabs.filter((tab) => !tab.visible).sort((a, b) => (a.order || 0) - (b.order || 0));
|
||||
|
||||
return (
|
||||
<div className="mb-8 rounded-xl bg-white/5 p-6 backdrop-blur-sm dark:bg-gray-800/30">
|
||||
<div className="mb-6">
|
||||
<h3 className="flex items-center gap-2 text-lg font-medium text-gray-900 dark:text-white">
|
||||
<span className="i-ph:layout-fill h-5 w-5 text-purple-500" />
|
||||
{title}
|
||||
</h3>
|
||||
{description && <p className="mt-1.5 text-sm text-gray-600 dark:text-gray-400">{description}</p>}
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<motion.div layout className="space-y-2">
|
||||
{visibleTabs.map((tab) => (
|
||||
<motion.div
|
||||
key={tab.id}
|
||||
layout
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="group relative flex items-center justify-between rounded-lg border border-gray-200 bg-white px-4 py-3 shadow-sm transition-all hover:border-purple-200 hover:shadow-md dark:border-gray-700 dark:bg-gray-800 dark:hover:border-purple-500/30"
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div
|
||||
className={classNames(
|
||||
TAB_ICONS[tab.id],
|
||||
'h-5 w-5 transition-colors',
|
||||
tab.id === 'profile'
|
||||
? 'text-purple-500 dark:text-purple-400'
|
||||
: 'text-gray-500 group-hover:text-purple-500 dark:text-gray-400 dark:group-hover:text-purple-400',
|
||||
)}
|
||||
/>
|
||||
<span
|
||||
className={classNames(
|
||||
'text-sm font-medium transition-colors',
|
||||
tab.id === 'profile'
|
||||
? 'text-gray-900 dark:text-white'
|
||||
: 'text-gray-700 group-hover:text-gray-900 dark:text-gray-300 dark:group-hover:text-white',
|
||||
)}
|
||||
>
|
||||
{TAB_LABELS[tab.id]}
|
||||
</span>
|
||||
{tab.id === 'profile' && targetWindow === 'user' && (
|
||||
<span className="rounded-full bg-purple-50 px-2 py-0.5 text-xs font-medium text-purple-600 dark:bg-purple-500/10 dark:text-purple-400">
|
||||
Standard
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
{targetWindow === 'user' ? (
|
||||
<label className="relative inline-flex cursor-pointer items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={tab.visible}
|
||||
onChange={(e) => onVisibilityChange(tab.id, e.target.checked)}
|
||||
className="peer sr-only"
|
||||
/>
|
||||
<div
|
||||
className={classNames(
|
||||
'h-6 w-11 rounded-full bg-gray-200 transition-colors dark:bg-gray-700',
|
||||
'after:absolute after:left-[2px] after:top-[2px]',
|
||||
'after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow-sm',
|
||||
'after:transition-all after:content-[""]',
|
||||
'peer-checked:bg-purple-500 peer-checked:after:translate-x-full',
|
||||
'peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-500/20',
|
||||
)}
|
||||
/>
|
||||
</label>
|
||||
) : (
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400">Always visible</div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{hiddenTabs.length > 0 && (
|
||||
<motion.div layout className="space-y-2">
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-gray-500 dark:text-gray-400">
|
||||
<span className="i-ph:eye-slash-fill h-4 w-4" />
|
||||
Hidden Tabs
|
||||
</div>
|
||||
{hiddenTabs.map((tab) => (
|
||||
<motion.div
|
||||
key={tab.id}
|
||||
layout
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="group relative flex items-center justify-between rounded-lg border border-gray-200 bg-white/50 px-4 py-3 transition-all hover:border-purple-200 dark:border-gray-700 dark:bg-gray-800/50 dark:hover:border-purple-500/30"
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
<div
|
||||
className={classNames(
|
||||
TAB_ICONS[tab.id],
|
||||
'h-5 w-5 transition-colors',
|
||||
'text-gray-400 group-hover:text-purple-500 dark:text-gray-500 dark:group-hover:text-purple-400',
|
||||
)}
|
||||
/>
|
||||
<span className="text-sm font-medium text-gray-500 transition-colors group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white">
|
||||
{TAB_LABELS[tab.id]}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
{targetWindow === 'user' && (
|
||||
<label className="relative inline-flex cursor-pointer items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={tab.visible}
|
||||
onChange={(e) => onVisibilityChange(tab.id, e.target.checked)}
|
||||
className="peer sr-only"
|
||||
/>
|
||||
<div
|
||||
className={classNames(
|
||||
'h-6 w-11 rounded-full bg-gray-200 transition-colors dark:bg-gray-700',
|
||||
'after:absolute after:left-[2px] after:top-[2px]',
|
||||
'after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow-sm',
|
||||
'after:transition-all after:content-[""]',
|
||||
'peer-checked:bg-purple-500 peer-checked:after:translate-x-full',
|
||||
'peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-purple-500/20',
|
||||
)}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const TabManagement = () => {
|
||||
const config = useStore(tabConfigurationStore);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
|
||||
// Define standard (visible by default) tabs for each window
|
||||
const standardUserTabs: TabType[] = ['features', 'data', 'providers', 'connection', 'debug'];
|
||||
const standardDeveloperTabs: TabType[] = [
|
||||
'profile',
|
||||
'settings',
|
||||
'notifications',
|
||||
'features',
|
||||
'data',
|
||||
'providers',
|
||||
'connection',
|
||||
'debug',
|
||||
'event-logs',
|
||||
'update',
|
||||
];
|
||||
|
||||
const handleVisibilityChange = (tabId: TabType, enabled: boolean, targetWindow: 'user' | 'developer') => {
|
||||
const tabs = targetWindow === 'user' ? config.userTabs : config.developerTabs;
|
||||
const existingTab = tabs.find((tab) => tab.id === tabId);
|
||||
|
||||
const updatedTab: TabVisibilityConfig = existingTab
|
||||
? {
|
||||
...existingTab,
|
||||
visible: enabled,
|
||||
}
|
||||
: {
|
||||
id: tabId,
|
||||
visible: enabled,
|
||||
window: targetWindow,
|
||||
order: tabs.length,
|
||||
};
|
||||
|
||||
// Update the store
|
||||
updateTabConfiguration(updatedTab);
|
||||
|
||||
// Show toast notification
|
||||
toast.success(`${TAB_LABELS[tabId]} ${enabled ? 'enabled' : 'disabled'} in ${targetWindow} window`);
|
||||
};
|
||||
|
||||
const handleResetToDefaults = () => {
|
||||
resetTabConfiguration();
|
||||
toast.success('Tab settings reset to defaults');
|
||||
};
|
||||
|
||||
// Filter tabs based on search and window
|
||||
const userTabs = config.userTabs.filter((tab) =>
|
||||
TAB_LABELS[tab.id].toLowerCase().includes(searchQuery.toLowerCase()),
|
||||
);
|
||||
|
||||
const developerTabs = config.developerTabs.filter((tab) =>
|
||||
TAB_LABELS[tab.id].toLowerCase().includes(searchQuery.toLowerCase()),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="h-full overflow-y-auto px-6 py-6">
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="flex items-center gap-2 text-xl font-semibold text-gray-900 dark:text-white">
|
||||
<span className="i-ph:squares-four-fill h-6 w-6 text-purple-500" />
|
||||
Tab Management
|
||||
</h2>
|
||||
<p className="mt-1.5 text-sm text-gray-600 dark:text-gray-400">
|
||||
Configure which tabs are visible in the user and developer windows
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleResetToDefaults}
|
||||
className="inline-flex items-center gap-1.5 rounded-lg bg-purple-50 px-4 py-2 text-sm font-medium text-purple-600 transition-colors hover:bg-purple-100 focus:outline-none focus:ring-4 focus:ring-purple-500/20 dark:bg-purple-500/10 dark:text-purple-400 dark:hover:bg-purple-500/20"
|
||||
>
|
||||
<span className="i-ph:arrow-counter-clockwise-fill h-4 w-4" />
|
||||
Reset to Defaults
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex items-center gap-4">
|
||||
<div className="relative flex-1">
|
||||
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<span className="i-ph:magnifying-glass h-5 w-5 text-gray-400" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search tabs..."
|
||||
className="block w-full rounded-lg border border-gray-200 bg-white py-2.5 pl-10 pr-4 text-sm text-gray-900 placeholder:text-gray-500 focus:border-purple-500 focus:outline-none focus:ring-4 focus:ring-purple-500/20 dark:border-gray-700 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-purple-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
{/* User Window Section */}
|
||||
<div className="rounded-xl border border-purple-100 bg-purple-50/50 p-1 dark:border-purple-500/10 dark:bg-purple-500/5">
|
||||
<div className="rounded-lg bg-white p-6 dark:bg-gray-800">
|
||||
<div className="mb-6 flex items-center gap-3">
|
||||
<div className="rounded-lg bg-purple-100 p-2 dark:bg-purple-500/10">
|
||||
<span className="i-ph:user-circle-fill h-5 w-5 text-purple-500 dark:text-purple-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-base font-medium text-gray-900 dark:text-white">User Window</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">Configure tabs visible to regular users</p>
|
||||
</div>
|
||||
</div>
|
||||
<TabGroup
|
||||
title="User Interface"
|
||||
description="Manage which tabs are visible in the user window"
|
||||
tabs={userTabs}
|
||||
onVisibilityChange={(tabId, enabled) => handleVisibilityChange(tabId, enabled, 'user')}
|
||||
targetWindow="user"
|
||||
standardTabs={standardUserTabs}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Developer Window Section */}
|
||||
<div className="rounded-xl border border-blue-100 bg-blue-50/50 p-1 dark:border-blue-500/10 dark:bg-blue-500/5">
|
||||
<div className="rounded-lg bg-white p-6 dark:bg-gray-800">
|
||||
<div className="mb-6 flex items-center gap-3">
|
||||
<div className="rounded-lg bg-blue-100 p-2 dark:bg-blue-500/10">
|
||||
<span className="i-ph:code-fill h-5 w-5 text-blue-500 dark:text-blue-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-base font-medium text-gray-900 dark:text-white">Developer Window</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">Configure tabs visible to developers</p>
|
||||
</div>
|
||||
</div>
|
||||
<TabGroup
|
||||
title="Developer Interface"
|
||||
description="Manage which tabs are visible in the developer window"
|
||||
tabs={developerTabs}
|
||||
onVisibilityChange={(tabId, enabled) => handleVisibilityChange(tabId, enabled, 'developer')}
|
||||
targetWindow="developer"
|
||||
standardTabs={standardDeveloperTabs}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user