ui refactor
This commit is contained in:
Stijnus
158
app/components/settings/shared/DraggableTabList.tsx
Normal file
158
app/components/settings/shared/DraggableTabList.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
import { useDrag, useDrop } from 'react-dnd';
|
||||
import { motion } from 'framer-motion';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import type { TabVisibilityConfig } from '~/components/settings/settings.types';
|
||||
import { TAB_LABELS } from '~/components/settings/settings.types';
|
||||
import { Switch } from '~/components/ui/Switch';
|
||||
|
||||
interface DraggableTabListProps {
|
||||
tabs: TabVisibilityConfig[];
|
||||
onReorder: (tabs: TabVisibilityConfig[]) => void;
|
||||
onWindowChange?: (tab: TabVisibilityConfig, window: 'user' | 'developer') => void;
|
||||
onVisibilityChange?: (tab: TabVisibilityConfig, visible: boolean) => void;
|
||||
showControls?: boolean;
|
||||
}
|
||||
|
||||
interface DraggableTabItemProps {
|
||||
tab: TabVisibilityConfig;
|
||||
index: number;
|
||||
moveTab: (dragIndex: number, hoverIndex: number) => void;
|
||||
showControls?: boolean;
|
||||
onWindowChange?: (tab: TabVisibilityConfig, window: 'user' | 'developer') => void;
|
||||
onVisibilityChange?: (tab: TabVisibilityConfig, visible: boolean) => void;
|
||||
}
|
||||
|
||||
interface DragItem {
|
||||
type: string;
|
||||
index: number;
|
||||
id: string;
|
||||
}
|
||||
|
||||
const DraggableTabItem = ({
|
||||
tab,
|
||||
index,
|
||||
moveTab,
|
||||
showControls,
|
||||
onWindowChange,
|
||||
onVisibilityChange,
|
||||
}: DraggableTabItemProps) => {
|
||||
const [{ isDragging }, drag] = useDrag({
|
||||
type: 'tab',
|
||||
item: { type: 'tab', index, id: tab.id },
|
||||
collect: (monitor) => ({
|
||||
isDragging: monitor.isDragging(),
|
||||
}),
|
||||
});
|
||||
|
||||
const [, drop] = useDrop({
|
||||
accept: 'tab',
|
||||
hover: (item: DragItem, monitor) => {
|
||||
if (!monitor.isOver({ shallow: true })) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.index === index) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (item.id === tab.id) {
|
||||
return;
|
||||
}
|
||||
|
||||
moveTab(item.index, index);
|
||||
item.index = index;
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
ref={(node) => drag(drop(node))}
|
||||
initial={false}
|
||||
animate={{
|
||||
scale: isDragging ? 1.02 : 1,
|
||||
boxShadow: isDragging ? '0 8px 16px rgba(0,0,0,0.1)' : 'none',
|
||||
}}
|
||||
className={classNames(
|
||||
'flex items-center justify-between p-4 rounded-lg',
|
||||
'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
|
||||
'border border-[#E5E5E5] dark:border-[#333333]',
|
||||
isDragging ? 'z-50' : '',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="cursor-grab">
|
||||
<div className="i-ph:dots-six-vertical w-4 h-4 text-bolt-elements-textSecondary" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-bolt-elements-textPrimary">{TAB_LABELS[tab.id]}</div>
|
||||
{showControls && (
|
||||
<div className="text-xs text-bolt-elements-textSecondary">
|
||||
Order: {tab.order}, Window: {tab.window}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{showControls && !tab.locked && (
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
checked={tab.visible}
|
||||
onCheckedChange={(checked: boolean) => onVisibilityChange?.(tab, checked)}
|
||||
className="data-[state=checked]:bg-purple-500"
|
||||
aria-label={`Toggle ${TAB_LABELS[tab.id]} visibility`}
|
||||
/>
|
||||
<label className="text-sm text-bolt-elements-textSecondary">Visible</label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<label className="text-sm text-bolt-elements-textSecondary">User</label>
|
||||
<Switch
|
||||
checked={tab.window === 'developer'}
|
||||
onCheckedChange={(checked: boolean) => onWindowChange?.(tab, checked ? 'developer' : 'user')}
|
||||
className="data-[state=checked]:bg-purple-500"
|
||||
aria-label={`Toggle ${TAB_LABELS[tab.id]} window assignment`}
|
||||
/>
|
||||
<label className="text-sm text-bolt-elements-textSecondary">Dev</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export const DraggableTabList = ({
|
||||
tabs,
|
||||
onReorder,
|
||||
onWindowChange,
|
||||
onVisibilityChange,
|
||||
showControls = false,
|
||||
}: DraggableTabListProps) => {
|
||||
const moveTab = (dragIndex: number, hoverIndex: number) => {
|
||||
const items = Array.from(tabs);
|
||||
const [reorderedItem] = items.splice(dragIndex, 1);
|
||||
items.splice(hoverIndex, 0, reorderedItem);
|
||||
|
||||
// Update order numbers based on position
|
||||
const reorderedTabs = items.map((tab, index) => ({
|
||||
...tab,
|
||||
order: index + 1,
|
||||
}));
|
||||
|
||||
onReorder(reorderedTabs);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{tabs.map((tab, index) => (
|
||||
<DraggableTabItem
|
||||
key={tab.id}
|
||||
tab={tab}
|
||||
index={index}
|
||||
moveTab={moveTab}
|
||||
showControls={showControls}
|
||||
onWindowChange={onWindowChange}
|
||||
onVisibilityChange={onVisibilityChange}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
230
app/components/settings/shared/TabTile.tsx
Normal file
230
app/components/settings/shared/TabTile.tsx
Normal file
@@ -0,0 +1,230 @@
|
||||
import { motion } from 'framer-motion';
|
||||
import * as Tooltip from '@radix-ui/react-tooltip';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import type { TabVisibilityConfig } from '~/components/settings/settings.types';
|
||||
import { TAB_LABELS } from '~/components/settings/settings.types';
|
||||
|
||||
const TAB_ICONS = {
|
||||
profile: 'i-ph:user',
|
||||
settings: 'i-ph:gear',
|
||||
notifications: 'i-ph:bell',
|
||||
features: 'i-ph:star',
|
||||
data: 'i-ph:database',
|
||||
providers: 'i-ph:plug',
|
||||
connection: 'i-ph:wifi-high',
|
||||
debug: 'i-ph:bug',
|
||||
'event-logs': 'i-ph:list-bullets',
|
||||
update: 'i-ph:arrow-clockwise',
|
||||
};
|
||||
|
||||
interface TabTileProps {
|
||||
tab: TabVisibilityConfig;
|
||||
onClick: () => void;
|
||||
isActive?: boolean;
|
||||
hasUpdate?: boolean;
|
||||
statusMessage?: string;
|
||||
description?: string;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
export const TabTile = ({
|
||||
tab,
|
||||
onClick,
|
||||
isActive = false,
|
||||
hasUpdate = false,
|
||||
statusMessage,
|
||||
description,
|
||||
isLoading = false,
|
||||
}: TabTileProps) => {
|
||||
return (
|
||||
<Tooltip.Provider delayDuration={200}>
|
||||
<Tooltip.Root>
|
||||
<Tooltip.Trigger asChild>
|
||||
<motion.button
|
||||
onClick={onClick}
|
||||
disabled={isLoading}
|
||||
className={classNames(
|
||||
'relative flex flex-col items-center justify-center gap-3 p-6 rounded-xl',
|
||||
'w-full h-full min-h-[160px]',
|
||||
|
||||
// Background and border styles
|
||||
'bg-white dark:bg-[#141414]',
|
||||
'border border-[#E5E5E5]/50 dark:border-[#333333]/50',
|
||||
|
||||
// Shadow and glass effect
|
||||
'shadow-sm backdrop-blur-sm',
|
||||
'dark:shadow-[0_0_15px_rgba(0,0,0,0.1)]',
|
||||
'dark:bg-opacity-50',
|
||||
|
||||
// Hover effects
|
||||
'hover:border-purple-500/30 dark:hover:border-purple-500/30',
|
||||
'hover:bg-gradient-to-br hover:from-purple-50/50 hover:to-white dark:hover:from-purple-500/5 dark:hover:to-[#141414]',
|
||||
'hover:shadow-md hover:shadow-purple-500/5',
|
||||
'dark:hover:shadow-purple-500/10',
|
||||
|
||||
// Focus states for keyboard navigation
|
||||
'focus:outline-none',
|
||||
'focus:ring-2 focus:ring-purple-500/50 focus:ring-offset-2',
|
||||
'dark:focus:ring-offset-[#141414]',
|
||||
'focus:border-purple-500/30',
|
||||
|
||||
// Active state
|
||||
isActive
|
||||
? [
|
||||
'border-purple-500/50 dark:border-purple-500/50',
|
||||
'bg-gradient-to-br from-purple-50 to-white dark:from-purple-500/10 dark:to-[#141414]',
|
||||
'shadow-md shadow-purple-500/10',
|
||||
]
|
||||
: '',
|
||||
|
||||
// Loading state
|
||||
isLoading ? 'cursor-wait opacity-70' : '',
|
||||
|
||||
// Transitions
|
||||
'transition-all duration-300 ease-out',
|
||||
'group',
|
||||
)}
|
||||
whileHover={
|
||||
!isLoading
|
||||
? {
|
||||
scale: 1.02,
|
||||
transition: { duration: 0.2, ease: 'easeOut' },
|
||||
}
|
||||
: {}
|
||||
}
|
||||
whileTap={
|
||||
!isLoading
|
||||
? {
|
||||
scale: 0.98,
|
||||
transition: { duration: 0.1, ease: 'easeIn' },
|
||||
}
|
||||
: {}
|
||||
}
|
||||
>
|
||||
{/* Loading Overlay */}
|
||||
{isLoading && (
|
||||
<motion.div
|
||||
className={classNames(
|
||||
'absolute inset-0 rounded-xl z-10',
|
||||
'bg-white/50 dark:bg-black/50',
|
||||
'backdrop-blur-sm',
|
||||
'flex items-center justify-center',
|
||||
)}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<motion.div
|
||||
className={classNames('w-8 h-8 rounded-full', 'border-2 border-purple-500/30', 'border-t-purple-500')}
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{
|
||||
duration: 1,
|
||||
repeat: Infinity,
|
||||
ease: 'linear',
|
||||
}}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Status Indicator */}
|
||||
{hasUpdate && (
|
||||
<motion.div
|
||||
className={classNames(
|
||||
'absolute top-3 right-3',
|
||||
'w-2.5 h-2.5 rounded-full',
|
||||
'bg-green-500',
|
||||
'shadow-lg shadow-green-500/20',
|
||||
'ring-4 ring-green-500/20',
|
||||
)}
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ type: 'spring', bounce: 0.5 }}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Background glow effect */}
|
||||
<div
|
||||
className={classNames(
|
||||
'absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100',
|
||||
'bg-gradient-to-br from-purple-500/5 to-transparent dark:from-purple-500/10',
|
||||
'transition-opacity duration-300',
|
||||
isActive ? 'opacity-100' : '',
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Icon */}
|
||||
<div
|
||||
className={classNames(
|
||||
TAB_ICONS[tab.id],
|
||||
'w-12 h-12',
|
||||
'relative',
|
||||
'text-gray-600 dark:text-gray-300',
|
||||
'group-hover:text-purple-500 dark:group-hover:text-purple-400',
|
||||
'transition-all duration-300',
|
||||
isActive ? 'text-purple-500 dark:text-purple-400 scale-110' : '',
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Label and Description */}
|
||||
<div className="relative flex flex-col items-center text-center">
|
||||
<div
|
||||
className={classNames(
|
||||
'text-base font-medium',
|
||||
'text-gray-700 dark:text-gray-200',
|
||||
'group-hover:text-purple-500 dark:group-hover:text-purple-400',
|
||||
'transition-colors duration-300',
|
||||
isActive ? 'text-purple-500 dark:text-purple-400' : '',
|
||||
)}
|
||||
>
|
||||
{TAB_LABELS[tab.id]}
|
||||
</div>
|
||||
{description && (
|
||||
<div
|
||||
className={classNames(
|
||||
'text-xs mt-1',
|
||||
'text-gray-500 dark:text-gray-400',
|
||||
'group-hover:text-purple-400/70 dark:group-hover:text-purple-300/70',
|
||||
'transition-colors duration-300',
|
||||
'max-w-[180px]',
|
||||
isActive ? 'text-purple-400/70 dark:text-purple-300/70' : '',
|
||||
)}
|
||||
>
|
||||
{description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bottom indicator line */}
|
||||
<div
|
||||
className={classNames(
|
||||
'absolute bottom-0 left-1/2 -translate-x-1/2',
|
||||
'w-12 h-0.5 rounded-full',
|
||||
'bg-purple-500/0 group-hover:bg-purple-500/50',
|
||||
'transition-all duration-300 ease-out',
|
||||
'transform scale-x-0 group-hover:scale-x-100',
|
||||
isActive ? 'bg-purple-500 scale-x-100' : '',
|
||||
)}
|
||||
/>
|
||||
</motion.button>
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Portal>
|
||||
<Tooltip.Content
|
||||
className={classNames(
|
||||
'px-3 py-1.5 rounded-lg',
|
||||
'bg-[#18181B] text-white',
|
||||
'text-sm font-medium',
|
||||
'shadow-xl',
|
||||
'select-none',
|
||||
'z-[100]',
|
||||
)}
|
||||
side="top"
|
||||
sideOffset={5}
|
||||
>
|
||||
{statusMessage || TAB_LABELS[tab.id]}
|
||||
<Tooltip.Arrow className="fill-[#18181B]" />
|
||||
</Tooltip.Content>
|
||||
</Tooltip.Portal>
|
||||
</Tooltip.Root>
|
||||
</Tooltip.Provider>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user