homeio

1"use client";
2
3import {
4  ShoppingBag   as AppStore24Regular,
5  LayoutGrid    as GridDotsRegular,
6  FolderOpen    as OpenFolderRegular,
7  Cpu           as PulseRegular,
8  Settings      as SettingsRegular,
9  TerminalSquare as WindowConsoleRegular,
10} from "@/components/icons/platform-icons";
11import {
12  Tooltip,
13  TooltipContent,
14  TooltipTrigger,
15} from "@/components/ui/tooltip";
16import { OsIcon } from "@/components/icons/OsIcon";
17import { APP_ICONS } from "@/components/icons/icon-assets";
18import { useRef, useState } from "react";
19
20export type DockItemDef = {
21  id: string;
22  name: string;
23  icon: React.ComponentType<{ className?: string }>;
24  iconBg: string;
25};
26
27export const dockItemDefs: DockItemDef[] = [
28  { id: "apps",      name: "Home",      icon: GridDotsRegular,      iconBg: "bg-blue-500/80" },
29  { id: "terminal",  name: "Terminal",  icon: WindowConsoleRegular, iconBg: "bg-slate-700/90" },
30  { id: "files",     name: "Files",     icon: OpenFolderRegular,    iconBg: "bg-amber-500/80" },
31  { id: "monitor",   name: "Monitor",   icon: PulseRegular,         iconBg: "bg-emerald-600/80" },
32  { id: "app-store", name: "App Store", icon: AppStore24Regular,    iconBg: "bg-purple-600/80" },
33  { id: "settings",  name: "Settings",  icon: SettingsRegular,      iconBg: "bg-zinc-600/80" },
34];
35
36type DockProps = {
37  activeWindows?: string[];
38  focusedWindow?: string | null;
39  onItemClick?: (id: string) => void;
40  position?: "bottom" | "left" | "right";
41  animationsEnabled?: boolean;
42};
43
44export function Dock({
45  activeWindows = [],
46  focusedWindow = null,
47  onItemClick,
48  position = "bottom",
49  animationsEnabled = true,
50}: DockProps) {
51  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
52  const dockRef = useRef<HTMLDivElement>(null);
53  const isVertical = position === "left" || position === "right";
54
55  function getScale(index: number) {
56    return hoveredIndex === index ? 1.18 : 1;
57  }
58
59  const dockPositionClass =
60    position === "bottom"
61      ? "fixed bottom-4 left-1/2 -translate-x-1/2"
62      : position === "left"
63        ? "fixed left-4 top-1/2 -translate-y-1/2"
64        : "fixed right-4 top-1/2 -translate-y-1/2";
65
66  return (
67    <div className={`${dockPositionClass} z-50`}>
68      <nav
69        ref={dockRef}
70        className={`flex gap-3 border border-white/[0.09] rounded-[calc(var(--radius)+0.375rem)] shadow-2xl shadow-black/40 ${
71          isVertical
72            ? "flex-col items-center px-2.5 py-3"
73            : "items-end px-3 py-2.5"
74        }`}
75        style={{
76          background: "var(--system-surface)",
77          backdropFilter: "blur(40px) saturate(160%)",
78          boxShadow: "var(--system-shadow-dock), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 -1px 0 rgba(0,0,0,0.07)",
79        }}
80        onMouseLeave={() => setHoveredIndex(null)}
81        aria-label="Quick launch dock"
82      >
83        {dockItemDefs.map((item, index) => {
84          const scale = animationsEnabled ? getScale(index) : 1;
85          const isRunning = activeWindows.includes(item.id);
86          const isFocused = focusedWindow === item.id;
87          const osSrc = APP_ICONS[item.id];
88
89          const iconFallback = (
90            <div
91              className={`size-full rounded-2xl flex items-center justify-center ${item.iconBg}`}
92            >
93              <item.icon className="size-5 text-white" />
94            </div>
95          );
96
97          return (
98            <div key={item.id} className="flex flex-col items-center gap-1">
99              <Tooltip>
100                <TooltipTrigger asChild>
101                  <button
102                    onMouseEnter={() => setHoveredIndex(index)}
103                    onClick={() => onItemClick?.(item.id)}
104                    style={{
105                      transform: `scale(${scale})`,
106                      transition: animationsEnabled
107                        ? "transform 0.16s ease-out"
108                        : "none",
109                    }}
110                    className="relative size-11 rounded-2xl overflow-hidden cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
111                    aria-label={item.name}
112                    aria-pressed={isFocused}
113                  >
114                    <OsIcon
115                      src={osSrc}
116                      alt={item.name}
117                      className={`size-full rounded-2xl object-contain transition-[box-shadow] duration-150 ${
118                        isFocused
119                          ? "shadow-[0_0_0_2px_hsl(var(--primary)/0.5),0_2px_8px_rgba(0,0,0,0.3)]"
120                          : isRunning
121                            ? "shadow-[0_1px_4px_rgba(0,0,0,0.2)]"
122                            : "opacity-90 hover:opacity-100"
123                      }`}
124                      fallback={iconFallback}
125                    />
126                  </button>
127                </TooltipTrigger>
128                <TooltipContent side={isVertical ? (position === "left" ? "right" : "left") : "top"} sideOffset={8}>
129                  {item.name}
130                </TooltipContent>
131              </Tooltip>
132              {/* Always rendered to reserve space — invisible when not running */}
133              <span
134                className={`rounded-full transition-all duration-200 ${
135                  isRunning
136                    ? isFocused
137                      ? "h-[3px] w-4 bg-primary"
138                      : "h-[3px] w-2.5 bg-foreground/30"
139                    : "invisible h-[3px] w-4"
140                }`}
141              />
142            </div>
143          );
144        })}
145      </nav>
146    </div>
147  );
148}
149