asepharyana
392db8eba1
Ground-up rebuild of the GMW frontend as an Ambient Field console: - WebGL ambient background (Three.js shader, drifting motes, reduced-motion aware) - Glassmorphism dark cyber theme across all 8 routes - SSR page + client view split with SWR fallback; realtime via WebSocket - Command palette (Cmd+K), chatbot FAB, guild/channel pickers - Chart primitives: donut, radial-gauge, area-activity, sparkline, equalizer Cleanup (review pass): - Remove stray Puppeteer nav-test/nav-debug scripts - Replace non-null assertions with guards (dashboard/moderation) - Drop unused useGuilds fetches in messages/voice views - Type implicit-any `let` declarations across pages - Add a11y roles/labels to SVG charts and audio, tidy imports
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { Tooltip } from "@/components/primitives/tooltip";
|
|
import { cn } from "@/lib/utils";
|
|
import { useWebSocket } from "@/lib/ws/context";
|
|
|
|
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>
|
|
);
|
|
}
|