feat(frontend): revamp dashboard into tactical HUD and integrate GSAP reactive stages

services/frontend/src/components/shell/nav-rail.tsx

@@ -1,9 +1,16 @@
 "use client";
 
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
 import { usePathname } from "next/navigation";
+import { useRef } from "react";
 import { isActivePath, navItems } from "@/lib/navigation";
 import { cn } from "@/lib/utils";
 
+if (typeof window !== "undefined") {
+  gsap.registerPlugin(useGSAP);
+}
+
 function NavItem({
   href,
   label,
@@ -24,10 +31,10 @@ function NavItem({
       aria-current={active ? "page" : undefined}
       style={{ "--i": index } as React.CSSProperties}
       className={cn(
-        "game-nav-item group flex size-11 items-center justify-center rounded-[13px] transition-colors",
+        "nav-dock-item game-nav-item group relative flex size-11 items-center justify-center rounded-[13px] transition-all duration-200",
         active
-          ? "is-active bg-white/10 text-white"
-          : "text-ink-faint hover:bg-white/5 hover:text-ink-soft",
+          ? "is-active bg-white/10 text-white shadow-sm ring-1 ring-white/20"
+          : "text-ink-faint hover:bg-white/5 hover:text-ink-soft hover:scale-105",
       )}
     >
       {active && <span className="game-marker -left-3.5" />}
@@ -38,8 +45,9 @@ function NavItem({
         className="relative z-10 size-[18px]"
         strokeWidth={active ? 2.4 : 2}
       />
-      {/* hover tooltip — labels are hidden in the rail, so surface on hover */}
-      <span className="pointer-events-none absolute left-full z-50 ml-3 hidden whitespace-nowrap rounded-[9px] border border-hairline bg-canvas-2 px-2.5 py-1.5 font-mono text-xs font-medium text-ink-soft opacity-0 shadow-lg transition-opacity group-hover:opacity-100 md:block">
+      {/* HUD Tooltip on hover */}
+      <span className="pointer-events-none absolute left-full z-50 ml-3 hidden whitespace-nowrap rounded-md border border-hairline bg-canvas-2/95 px-2.5 py-1 font-mono text-[11px] font-semibold tracking-wider text-ink opacity-0 shadow-xl backdrop-blur-md transition-all group-hover:translate-x-1 group-hover:opacity-100 md:block">
+        <span className="text-signal mr-1.5">›</span>
         {label}
       </span>
     </a>
@@ -49,10 +57,35 @@ function NavItem({
 export function NavRail() {
   const pathname = usePathname();
   const path = pathname ?? "/";
+  const railRef = useRef<HTMLElement>(null);
+
+  useGSAP(
+    () => {
+      if (!railRef.current) return;
+      const items = railRef.current.querySelectorAll(".nav-dock-item");
+      gsap.fromTo(
+        items,
+        { opacity: 0, x: -8, scale: 0.9 },
+        {
+          opacity: 1,
+          x: 0,
+          scale: 1,
+          duration: 0.4,
+          stagger: 0.04,
+          ease: "power2.out",
+          clearProps: "transform",
+        },
+      );
+    },
+    { scope: railRef },
+  );
 
   return (
-    <nav className="glass mb-[calc(0.75rem+env(safe-area-inset-bottom))] ml-[calc(0.75rem+env(safe-area-inset-left))] mt-[calc(0.75rem+env(safe-area-inset-top))] hidden w-[68px] flex-col items-center gap-1 rounded-[18px] py-4 md:flex">
-      <div className="flex flex-1 flex-col gap-1">
+    <nav
+      ref={railRef}
+      className="glass mb-[calc(0.75rem+env(safe-area-inset-bottom))] ml-[calc(0.75rem+env(safe-area-inset-left))] mt-[calc(0.75rem+env(safe-area-inset-top))] hidden w-[68px] flex-col items-center gap-1 rounded-[18px] border border-hairline/80 py-4 shadow-2xl backdrop-blur-xl md:flex"
+    >
+      <div className="flex flex-1 flex-col gap-1.5">
         {navItems.map((item, i) => (
           <NavItem
             key={item.href}