130 lines
4.8 KiB
TypeScript
130 lines
4.8 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import { Link, useLocation } from 'react-router';
|
|
import type { LucideIcon } from 'lucide-react';
|
|
|
|
export type DockItem = {
|
|
label: string;
|
|
to: string;
|
|
icon: LucideIcon;
|
|
color: string;
|
|
role?: string;
|
|
};
|
|
|
|
type DockProps = {
|
|
items: DockItem[];
|
|
className?: string;
|
|
};
|
|
|
|
const ICON_SIZE = 48;
|
|
const ICON_GAP = 24;
|
|
const DOCK_PADDING = 12;
|
|
const MAX_SCALE = 1.5;
|
|
const MAX_DISTANCE = 150;
|
|
const SHOW_THRESHOLD = 24;
|
|
const HIDE_THRESHOLD = 100;
|
|
|
|
const getScale = (mouseX: number | null, iconCenterX: number) => {
|
|
if (mouseX === null) return 1;
|
|
const distance = Math.abs(mouseX - iconCenterX);
|
|
if (distance > MAX_DISTANCE) return 1;
|
|
return 1 + (MAX_SCALE - 1) * Math.cos((distance / MAX_DISTANCE) * (Math.PI / 2));
|
|
};
|
|
|
|
export const Dock = ({ items, className }: DockProps) => {
|
|
const [mouseX, setMouseX] = useState<number | null>(null);
|
|
const [visible, setVisible] = useState(false);
|
|
const dockRef = useRef<HTMLDivElement | null>(null);
|
|
const location = useLocation();
|
|
|
|
const isActive = (to: string) => (to === '/' ? location.pathname === '/' : location.pathname.startsWith(to));
|
|
|
|
useEffect(() => {
|
|
const handleMouseMove = (ev: MouseEvent) => {
|
|
const distFromBottom = window.innerHeight - ev.clientY;
|
|
setVisible((prev) => {
|
|
if (!prev) return distFromBottom <= SHOW_THRESHOLD;
|
|
return distFromBottom <= HIDE_THRESHOLD;
|
|
});
|
|
if (distFromBottom <= HIDE_THRESHOLD) {
|
|
const rect = dockRef.current?.getBoundingClientRect();
|
|
if (rect) setMouseX(ev.clientX - rect.left);
|
|
} else {
|
|
setMouseX(null);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
return () => document.removeEventListener('mousemove', handleMouseMove);
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
ref={dockRef}
|
|
className={`fixed left-1/2 z-5 items-end gap-2 md:gap-6 px-2 py-1.5 md:px-3 md:py-2 rounded-2xl border backdrop-blur-xl shadow-lg transition-transform duration-300 ease-in-out ${className ?? 'flex'}`}
|
|
style={{
|
|
backgroundColor: 'var(--dock-bg)',
|
|
borderColor: 'var(--dock-border)',
|
|
bottom: '16px',
|
|
transform: `translateX(-50%) translateY(${visible ? '0' : 'calc(100% + 24px)'})`,
|
|
}}
|
|
>
|
|
{items.map((item, index) => {
|
|
const iconCenter = DOCK_PADDING + index * (ICON_SIZE + ICON_GAP) + ICON_SIZE / 2;
|
|
const scale = getScale(mouseX, iconCenter);
|
|
const active = isActive(item.to);
|
|
|
|
return (
|
|
<Link
|
|
key={item.to}
|
|
to={item.to}
|
|
className="group relative flex flex-col items-center"
|
|
style={{
|
|
transform: `scale(${scale})`,
|
|
transformOrigin: 'bottom center',
|
|
transition: 'transform 150ms ease-out',
|
|
}}
|
|
>
|
|
<span
|
|
className="absolute -top-9 px-2 py-1 rounded-md text-white text-xs whitespace-nowrap hidden md:block opacity-0 group-hover:opacity-100 transition-opacity duration-150 pointer-events-none"
|
|
style={{ backgroundColor: 'var(--dock-tooltip-bg)' }}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
<div
|
|
className="w-10 h-10 md:w-12 md:h-12 rounded-xl flex items-center justify-center transition-all"
|
|
style={{
|
|
background: item.color,
|
|
boxShadow: active ? `0 0 12px ${item.color}40` : 'none',
|
|
}}
|
|
>
|
|
<item.icon className="h-5 w-5 md:h-6 md:w-6 text-white" />
|
|
</div>
|
|
{active && (
|
|
<div className="absolute -bottom-1.5 w-1.5 h-1.5 rounded-full" style={{ background: item.color }} />
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
|
|
import { Home, MessageCircle, FileText, FolderOpen, Code, LayoutGrid, Bot, ScrollText, FolderKanban, Monitor, Mail } from 'lucide-react';
|
|
|
|
export const ALL_DOCK_ITEMS: DockItem[] = [
|
|
{ label: 'Home', to: '/', icon: Home, color: '#f59e0b' },
|
|
{ label: 'Files', to: '/files', icon: FolderOpen, color: '#fbbf24' },
|
|
{ label: 'Email', to: '/email', icon: Mail, color: '#ef4444' },
|
|
{ label: 'Chat', to: '/chat', icon: MessageCircle, color: '#60a5fa' },
|
|
{ label: 'Editor', to: '/code-editor', icon: Code, color: '#a78bfa' },
|
|
{ label: 'Plans', to: '/plans', icon: FileText, color: '#f472b6' },
|
|
{ label: 'Automation', to: '/automation', icon: Bot, color: '#2dd4bf' },
|
|
{ label: 'Logs', to: '/task-logs', icon: ScrollText, color: '#94a3b8' },
|
|
{ label: 'Terminal', to: '/terminal', icon: Monitor, color: '#f97316' },
|
|
{ label: 'Projects', to: '/projects', icon: FolderKanban, color: '#10b981' },
|
|
{ label: 'Workspaces', to: '/workspaces', icon: LayoutGrid, color: '#8b5cf6' },
|
|
];
|
|
|
|
export const DEFAULT_DOCK_PATHS = ['/', '/files', '/automation', '/projects', '/workspaces', '/chat'];
|