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.
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user