feat(frontend): rebuild as Ambient/WebGL console with all pages + command palette

Ground-up rombak UI: hapus semua component/page lama, bangun ulang dengan desain sistem Ambient (WebGL haze + drifting motes, signal-driven color) di atas kontrak API/WS/type yang sudah ada. - Design system: globals.css tokens + primitives (glass, button, badge, select, avatar, toast, chart SVG murni). - Shell: nav rail, topbar (status WS + pill signal + theme), AppFrame. - 8 halaman: dashboard, voice (orbital stage), media, messages (live feed + detail AI), moderation, analysis (search), recordings, + chatbot floating. - Command palette (Cmd/Ctrl+K) untuk navigasi cepat. - Server fetch di-page di-try/catch agar render graceful saat backend mati. Verified: tsc clean, next build 8/8 halaman, semua route 200.
2026-08-15 17:53:48 +07:00
parent b98101c576
commit 1b56212d1a
104 changed files with 2905 additions and 7048 deletions
@@ -0,0 +1,21 @@
+import { NavRail } from "./nav-rail";
+import { TopBar } from "./topbar";
+
+/**
+ * App chrome: slim nav rail + sticky top bar + scrollable content region.
+ * Sits above the fixed AmbientCanvas. Providers (Ambient + WS) are mounted in
+ * the route layout so every page shares one live link and signal context.
+ */
+export function AppFrame({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-dvh w-full overflow-hidden">
+      <NavRail />
+      <div className="flex min-w-0 flex-1 flex-col">
+        <TopBar />
+        <main className="min-h-0 flex-1 overflow-y-auto px-5 pb-8">
+          {children}
+        </main>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,4 @@
+export { AppFrame } from "./ambient-app";
+export { NavRail } from "./nav-rail";
+export { TopBar } from "./topbar";
+export { ConnectionStatus } from "./status-dot";
@@ -0,0 +1,50 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { navItems, isActivePath } from "@/lib/navigation";
+import { cn } from "@/lib/utils";
+import {
+  Tooltip,
+} from "@/components/primitives/tooltip";
+
+export function NavRail() {
+  const pathname = usePathname();
+  return (
+    <nav className="glass m-3 mr-0 flex w-[68px] flex-col items-center gap-1 rounded-[18px] py-4">
+      <Link
+        href="/dashboard"
+        className="mb-3 flex size-11 items-center justify-center rounded-[14px] bg-signal/15 text-signal glow-signal"
+        aria-label="GMW home"
+      >
+        <span className="display text-xl">G</span>
+      </Link>
+      <div className="flex flex-1 flex-col gap-1">
+        {navItems.map((item) => {
+          const active = isActivePath(pathname, item.matchPrefix);
+          const Icon = item.icon;
+          return (
+            <Tooltip key={item.href} label={item.label} side="bottom">
+              <Link
+                href={item.href}
+                aria-label={item.label}
+                aria-current={active ? "page" : undefined}
+                className={cn(
+                  "group relative flex size-11 items-center justify-center rounded-[13px] transition-all",
+                  active
+                    ? "bg-signal/15 text-signal"
+                    : "text-ink-faint hover:bg-white/5 hover:text-ink-soft",
+                )}
+              >
+                {active && (
+                  <span className="absolute -left-3 h-6 w-1 rounded-full bg-signal shadow-[0_0_12px_var(--color-signal-glow)]" />
+                )}
+                <Icon className="size-[18px]" strokeWidth={active ? 2.4 : 2} />
+              </Link>
+            </Tooltip>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}
@@ -0,0 +1,32 @@
+"use client";
+
+import { useWebSocket } from "@/lib/ws/context";
+import { Tooltip } from "@/components/primitives/tooltip";
+import { cn } from "@/lib/utils";
+
+const MAP = {
+  connected: { color: "bg-signal", label: "Live link" },
+  connecting: { color: "bg-amber animate-breathe", label: "Connecting…" },
+  disconnected: { color: "bg-ink-faint", label: "Offline" },
+  error: { color: "bg-vermilion", label: "Link error" },
+} as const;
+
+export function ConnectionStatus({ compact = false }: { compact?: boolean }) {
+  const { status } = useWebSocket();
+  const s = MAP[status];
+  return (
+    <Tooltip label={s.label}>
+      <span className="inline-flex items-center gap-2">
+        <span className="relative flex size-2.5">
+          <span className={cn("absolute inline-flex h-full w-full rounded-full opacity-60 animate-pulse-ring", s.color)} />
+          <span className={cn("relative inline-flex size-2.5 rounded-full", s.color)} />
+        </span>
+        {!compact && (
+          <span className="mono text-[0.7rem] uppercase tracking-wider text-ink-soft">
+            {s.label}
+          </span>
+        )}
+      </span>
+    </Tooltip>
+  );
+}
@@ -0,0 +1,74 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { useTheme } from "next-themes";
+import { Moon, Sun } from "lucide-react";
+import { navItems } from "@/lib/navigation";
+import { useAmbient } from "@/components/ambient/ambient-context";
+import { ConnectionStatus } from "./status-dot";
+import { useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
+
+function useActiveLabel() {
+  const pathname = usePathname();
+  const item = [...navItems]
+    .sort((a, b) => b.matchPrefix.length - a.matchPrefix.length)
+    .find((i) => pathname.startsWith(i.matchPrefix));
+  return item?.label ?? "Console";
+}
+
+export function TopBar() {
+  const label = useActiveLabel();
+  const { state } = useAmbient();
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  const signalTone =
+    state.tone === "vermilion"
+      ? "text-vermilion"
+      : state.tone === "amber"
+        ? "text-amber"
+        : "text-signal";
+
+  return (
+    <header className="sticky top-0 z-40 flex items-center gap-4 px-5 py-3.5">
+      <div className="flex min-w-0 items-baseline gap-3">
+        <span className="eyebrow">GMW</span>
+        <h1 className="display truncate text-[1.5rem] text-ink">{label}</h1>
+      </div>
+
+      <div className="ml-auto flex items-center gap-3">
+        <span className={cn("pill", signalTone)}>
+          <span
+            className={cn(
+              "size-1.5 rounded-full bg-current animate-breathe",
+            )}
+          />
+          {state.label ?? "nominal"}
+        </span>
+        <ConnectionStatus />
+        <button
+          type="button"
+          aria-label="Open command palette"
+          onClick={() => window.dispatchEvent(new Event("command-palette:open"))}
+          className="hidden items-center gap-1.5 rounded-[11px] border border-hairline bg-white/5 px-2.5 py-1.5 text-xs text-ink-soft transition-colors hover:text-ink hover:border-signal/40 sm:flex"
+        >
+          <span className="mono text-[0.65rem]">⌘K</span>
+        </button>
+        <button
+          type="button"
+          aria-label="Toggle theme"
+          onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+          className="flex size-9 items-center justify-center rounded-[11px] border border-hairline bg-white/5 text-ink-soft transition-colors hover:text-ink hover:border-signal/40"
+        >
+          {mounted && theme === "light" ? (
+            <Moon className="size-4" />
+          ) : (
+            <Sun className="size-4" />
+          )}
+        </button>
+      </div>
+    </header>
+  );
+}