MythEclipse/GMW
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
asepharyana
2026-08-25 22:59:29 +07:00
parent f34811e9b6
commit 183a51003a
3 changed files with 383 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/frontend/src/components/shell/nav-rail.tsx
+40 -7
View File
@@ -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}
services/frontend/src/components/voice/voice-stage.tsx
+56 -19
View File
@@ -1,63 +1,100 @@
"use client";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import { Radio } from "lucide-react";
import { useRef } from "react";
import { Avatar } from "@/components/primitives";
import type { ActiveSpeaker } from "@/lib/types";
if (typeof window !== "undefined") {
gsap.registerPlugin(useGSAP);
}
export function VoiceStage({ speakers }: { speakers: ActiveSpeaker[] }) {
const containerRef = useRef<HTMLDivElement>(null);
const n = speakers.length;
const speaking = speakers.filter((s) => s.speaking).length;
const live = speaking > 0;
useGSAP(
() => {
if (!containerRef.current) return;
const speakerNodes =
containerRef.current.querySelectorAll(".speaker-node");
if (speakerNodes.length > 0) {
gsap.fromTo(
speakerNodes,
{ scale: 0.7, opacity: 0 },
{
scale: 1,
opacity: 1,
duration: 0.4,
stagger: 0.05,
ease: "back.out(1.5)",
},
);
}
},
{ scope: containerRef, dependencies: [speakers.length] },
);
return (
<div className="relative mx-auto aspect-square w-full max-w-[360px]">
{/* orbiting dashed ring */}
<div className="absolute inset-8 rounded-full border border-dashed border-hairline opacity-40 animate-spin-disc" />
{/* ripple halos */}
<div className="absolute left-1/2 top-1/2 size-72 -translate-x-1/2 -translate-y-1/2 rounded-full border border-hairline" />
<div
ref={containerRef}
className="relative mx-auto aspect-square w-full max-w-[380px]"
>
{/* Tactical radar coordinate grids & rings */}
<div className="absolute inset-4 rounded-full border border-hairline/30" />
<div className="absolute inset-12 rounded-full border border-dashed border-hairline/40 animate-spin-disc" />
<div className="absolute left-1/2 top-1/2 size-80 -translate-x-1/2 -translate-y-1/2 rounded-full border border-hairline/20" />
<div
className="absolute left-1/2 top-1/2 size-48 -translate-x-1/2 -translate-y-1/2 rounded-full bg-signal/5 animate-breathe"
style={{ opacity: live ? 1 : 0.4 }}
className="absolute left-1/2 top-1/2 size-56 -translate-x-1/2 -translate-y-1/2 rounded-full bg-signal/5 transition-opacity duration-500"
style={{ opacity: live ? 1 : 0.2 }}
/>
{/* central core */}
{/* Central Command Beacon */}
<div
className="absolute left-1/2 top-1/2 flex size-24 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center rounded-full border backdrop-blur transition-colors"
className="absolute left-1/2 top-1/2 flex size-28 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center rounded-full border backdrop-blur-md transition-all duration-300"
style={{
borderColor: live ? "var(--color-signal)" : "var(--color-hairline)",
boxShadow: live ? "0 0 50px -8px var(--color-signal-glow)" : "none",
background: "oklch(1 0 0 / 0.04)",
background: "oklch(0.15 0.02 70 / 0.7)",
}}
>
<Radio
className={`size-7 ${live ? "text-signal" : "text-ink-faint"}`}
className={`size-7 transition-colors ${live ? "text-signal animate-breathe" : "text-ink-faint"}`}
/>
<span className="mono mt-1 text-xs text-ink-soft">{n} live</span>
<span className="font-mono mt-1 text-[11px] font-bold tracking-wider text-ink uppercase">
{live ? `${speaking} SPEAKING` : `${n} CONNECTED`}
</span>
</div>
{/* speakers on orbit */}
{/* Orbiting Speakers */}
{speakers.map((s, i) => {
const angle = (i / Math.max(n, 1)) * Math.PI * 2 - Math.PI / 2;
const radius = 42;
const radius = 44;
const x = 50 + radius * Math.cos(angle);
const y = 50 + radius * Math.sin(angle);
return (
<div
key={s.userId}
className="absolute -translate-x-1/2 -translate-y-1/2"
className="speaker-node absolute -translate-x-1/2 -translate-y-1/2 transition-all duration-300"
style={{ left: `${x}%`, top: `${y}%` }}
>
<div className="relative flex flex-col items-center gap-1">
<div className="relative flex flex-col items-center gap-1.5">
<span className="relative">
<Avatar
src={s.avatar}
name={s.username}
size={46}
size={50}
ring={s.speaking}
/>
{s.speaking && (
<span className="absolute inset-0 rounded-full ring-2 ring-signal animate-pulse-ring" />
<span className="absolute -inset-1 rounded-full ring-2 ring-signal ring-offset-2 ring-offset-canvas animate-pulse-ring" />
)}
</span>
<span className="mono max-w-[88px] truncate rounded-full bg-black/40 px-2 py-0.5 text-[0.6rem] text-ink-soft">
<span className="font-mono max-w-[100px] truncate rounded-md border border-hairline bg-canvas-2/90 px-2 py-0.5 text-[10px] font-semibold text-ink shadow-md backdrop-blur-md">
{s.username}
</span>
</div>