platform/src/apps/officer-web/Screens/Dashboard/Layout/Dock.tsx

import { useEffect, useRef, useState } from 'react';
import { Link, useLocation } from 'react-router';
import type { LucideIcon } from 'lucide-react';
import { useMusicPlayer, MUSIC_DOCK_HEIGHT } from 'officerdev';

export type DockItem = {
  label: string;
  to: string;
  icon: LucideIcon;
  color: 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 { current } = useMusicPlayer();
  const musicDockPresent = !!current;
  // Read the latest value inside the (once-registered) mousemove handler, so it reacts to the music
  // dock appearing/disappearing without re-binding the listener.
  const musicPresentRef = useRef(musicDockPresent);
  musicPresentRef.current = musicDockPresent;

  const isActive = (to: string) => (to === '/' ? location.pathname === '/' : location.pathname.startsWith(to));

  useEffect(() => {
    const handleMouseMove = (ev: MouseEvent) => {
      const distFromBottom = window.innerHeight - ev.clientY;
      // When the music dock is present the nav dock rides MUSIC_DOCK_HEIGHT higher, so lift the hide/
      // magnify zone by the same amount — otherwise hovering the raised dock counts as past the hide
      // threshold and it slides away under the cursor. The reveal trigger stays at the bottom edge.
      const lift = musicPresentRef.current ? MUSIC_DOCK_HEIGHT : 0;
      const hideAt = HIDE_THRESHOLD + lift;
      setVisible((prev) => (prev ? distFromBottom <= hideAt : distFromBottom <= SHOW_THRESHOLD));
      if (distFromBottom <= hideAt) {
        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',
        // Slide up over the site-wide music dock when it's present so the nav dock clears it.
        transform: `translateX(-50%) translateY(${
          visible ? (musicDockPresent ? `-${MUSIC_DOCK_HEIGHT}px` : '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,
  ScrollText,
  FolderKanban,
  Monitor,
  Mail,
  Globe,
  MonitorSmartphone,
  Workflow,
  Music,
  Activity,
  Radio,
} 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: 'Music', to: '/music', icon: Music, color: '#22c55e' },
  { label: 'Editor', to: '/code-editor', icon: Code, color: '#a78bfa' },
  { label: 'Plans', to: '/plans', icon: FileText, color: '#f472b6' },
  { label: 'Jobs', to: '/jobs', icon: Workflow, color: '#14b8a6' },
  { 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: 'Browser', to: '/browser', icon: Globe, color: '#06b6d4' },
  { label: 'Desktop', to: '/desktop', icon: MonitorSmartphone, color: '#ec4899' },
  { label: 'Monitor', to: '/system-monitor', icon: Activity, color: '#0ea5e9' },
  { label: 'Activity', to: '/activity', icon: Radio, color: '#f59e0b' },
  { label: 'Dashboards', to: '/dashboards', icon: LayoutGrid, color: '#8b5cf6' },
];

export const DEFAULT_DOCK_PATHS = ['/', '/files', '/music', '/projects', '/dashboards', '/chat'];