feat(frontend): revamp dashboard into tactical HUD and integrate GSAP reactive stages
This commit is contained in:
asepharyana
@@ -1,46 +1,49 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Activity,
|
||||
Flag,
|
||||
AudioWaveform,
|
||||
ChevronRight,
|
||||
Flame,
|
||||
MessageSquare,
|
||||
Mic,
|
||||
Radio,
|
||||
Shield,
|
||||
ShieldAlert,
|
||||
Terminal,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useEffect } from "react";
|
||||
import { useAmbient } from "@/components/ambient/ambient-context";
|
||||
import { AreaActivity, RadialGauge } from "@/components/charts";
|
||||
import { GlassPanel } from "@/components/primitives";
|
||||
import {
|
||||
ErrorState,
|
||||
LoadingState,
|
||||
PageTransition,
|
||||
SkeletonHero,
|
||||
SkeletonMetricRow,
|
||||
SkeletonPanel,
|
||||
} from "@/components/shared";
|
||||
import { MetricTile, SectionHeader } from "@/components/shared/section";
|
||||
import {
|
||||
useActivity,
|
||||
useStats,
|
||||
useTopReactions,
|
||||
useTopReactors,
|
||||
} from "@/hooks";
|
||||
import { useActivity, useStats, useTopReactions } from "@/hooks";
|
||||
import { useStaggerReveal } from "@/hooks/use-gsap-animation";
|
||||
import { formatNumber } from "@/lib/format";
|
||||
import type { DashboardStats } from "@/lib/types";
|
||||
import { staggerDelay } from "@/lib/utils";
|
||||
|
||||
function deriveSignal(stats?: DashboardStats) {
|
||||
if (!stats) return { tone: "signal" as const, label: "nominal" };
|
||||
if (!stats)
|
||||
return { tone: "signal" as const, label: "NOMINAL", state: "STABLE" };
|
||||
const total = stats.total_flagged + stats.total_clean || 1;
|
||||
const ratio = stats.total_flagged / total;
|
||||
if (stats.moderation_overview.error > 0)
|
||||
return { tone: "vermilion" as const, label: "moderation fault" };
|
||||
return { tone: "vermilion" as const, label: "FAULT", state: "MOD_ERR" };
|
||||
if (ratio > 0.25)
|
||||
return { tone: "vermilion" as const, label: "elevated flags" };
|
||||
if (ratio > 0.1) return { tone: "amber" as const, label: "watch" };
|
||||
return { tone: "signal" as const, label: "nominal" };
|
||||
return {
|
||||
tone: "vermilion" as const,
|
||||
label: "ELEVATED",
|
||||
state: "HIGH_RISK",
|
||||
};
|
||||
if (ratio > 0.1)
|
||||
return { tone: "amber" as const, label: "WATCH", state: "ADVISORY" };
|
||||
return { tone: "signal" as const, label: "NOMINAL", state: "OPTIMAL" };
|
||||
}
|
||||
|
||||
export function DashboardView({
|
||||
@@ -57,10 +60,15 @@ export function DashboardView({
|
||||
mutate: mutateStats,
|
||||
} = useStats(initialStats);
|
||||
const { data: activity } = useActivity(14, initialActivity as never);
|
||||
const { data: reactors } = useTopReactors();
|
||||
const { data: reactions } = useTopReactions();
|
||||
const ambient = useAmbient();
|
||||
|
||||
const hudRef = useStaggerReveal<HTMLDivElement>(".hud-tile", {
|
||||
stagger: 0.05,
|
||||
y: 16,
|
||||
dependencies: [stats],
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const s = deriveSignal(stats);
|
||||
ambient.set(
|
||||
@@ -78,16 +86,12 @@ export function DashboardView({
|
||||
<SkeletonHero />
|
||||
<SkeletonMetricRow cols={4} />
|
||||
<SkeletonPanel rows={5} />
|
||||
<div className="grid gap-5 lg:grid-cols-5">
|
||||
<SkeletonPanel className="lg:col-span-3" rows={4} />
|
||||
<SkeletonPanel className="lg:col-span-2" rows={4} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
if (!stats)
|
||||
return (
|
||||
<ErrorState
|
||||
error={error ?? new Error("No data")}
|
||||
error={error ?? new Error("No telemetry stream")}
|
||||
onRetry={() => void mutateStats()}
|
||||
/>
|
||||
);
|
||||
@@ -95,286 +99,278 @@ export function DashboardView({
|
||||
const s = stats;
|
||||
const total = s.total_flagged + s.total_clean || 1;
|
||||
const cleanRatio = s.total_clean / total;
|
||||
const sig = deriveSignal(s);
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
{/* Hero */}
|
||||
<GlassPanel glow className="game-frame relative overflow-hidden">
|
||||
<div className="scan-line absolute inset-x-0 top-0" />
|
||||
<div className="flex flex-wrap items-end justify-between gap-4">
|
||||
<PageTransition>
|
||||
<div ref={hudRef} className="space-y-4">
|
||||
{/* Tactical HUD Header Bar */}
|
||||
<div className="hud-tile flex flex-wrap items-center justify-between gap-3 border-b border-hairline pb-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative flex size-3 items-center justify-center">
|
||||
<span className="absolute inline-flex size-full animate-ping rounded-full bg-signal opacity-75" />
|
||||
<span className="relative inline-flex size-2 rounded-full bg-signal" />
|
||||
</div>
|
||||
<div className="flex items-baseline gap-2">
|
||||
<h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
|
||||
GMW TELEMETRY · MATRIX_01
|
||||
</h1>
|
||||
<span className="font-mono text-[10px] text-ink-faint">
|
||||
[LIVE_MONITOR]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
|
||||
<span className="text-ink-faint">SYS_STATUS:</span>
|
||||
<span className="font-bold text-signal">{sig.state}</span>
|
||||
</div>
|
||||
<div className="inline-flex items-center gap-1.5 rounded-sm bg-surface px-2 py-0.5 font-mono text-[11px] text-ink-soft">
|
||||
<span className="text-ink-faint">VER:</span>
|
||||
<span className="text-ink">v2.4-GSAP</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Spatial HUD Grid: Live Mission Control */}
|
||||
<div className="grid gap-4 lg:grid-cols-12">
|
||||
{/* Main Telemetry & Activity Area */}
|
||||
<div className="space-y-4 lg:col-span-8">
|
||||
{/* Primary Telemetry Cluster */}
|
||||
<div className="hud-tile grid grid-cols-2 gap-2.5 sm:grid-cols-4">
|
||||
<div className="group relative overflow-hidden rounded-md border border-hairline bg-surface/50 p-3.5 backdrop-blur-md transition-colors hover:border-signal/40">
|
||||
<div className="flex items-center justify-between text-ink-faint">
|
||||
<span className="font-mono text-[10px] tracking-wider uppercase">
|
||||
Messages
|
||||
</span>
|
||||
<MessageSquare className="size-3.5 text-signal" />
|
||||
</div>
|
||||
<div className="mt-2 font-mono text-xl font-bold tracking-tight text-ink">
|
||||
{formatNumber(s.total_messages)}
|
||||
</div>
|
||||
<div className="mt-1 flex items-center gap-1 font-mono text-[10px] text-ink-faint">
|
||||
<span className="text-signal">↑ live</span> ingest
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="group relative overflow-hidden rounded-md border border-hairline bg-surface/50 p-3.5 backdrop-blur-md transition-colors hover:border-signal/40">
|
||||
<div className="flex items-center justify-between text-ink-faint">
|
||||
<span className="font-mono text-[10px] tracking-wider uppercase">
|
||||
Flagged
|
||||
</span>
|
||||
<ShieldAlert className="size-3.5 text-vermilion" />
|
||||
</div>
|
||||
<div className="mt-2 font-mono text-xl font-bold tracking-tight text-ink">
|
||||
{formatNumber(s.total_flagged)}
|
||||
</div>
|
||||
<div className="mt-1 font-mono text-[10px] text-ink-faint">
|
||||
<span className="text-vermilion">{s.today_flagged}</span>{" "}
|
||||
today
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="group relative overflow-hidden rounded-md border border-hairline bg-surface/50 p-3.5 backdrop-blur-md transition-colors hover:border-signal/40">
|
||||
<div className="flex items-center justify-between text-ink-faint">
|
||||
<span className="font-mono text-[10px] tracking-wider uppercase">
|
||||
Active 24h
|
||||
</span>
|
||||
<Users className="size-3.5 text-signal" />
|
||||
</div>
|
||||
<div className="mt-2 font-mono text-xl font-bold tracking-tight text-ink">
|
||||
{formatNumber(s.active_users_24h)}
|
||||
</div>
|
||||
<div className="mt-1 font-mono text-[10px] text-ink-faint">
|
||||
<span>unique accounts</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="group relative overflow-hidden rounded-md border border-hairline bg-surface/50 p-3.5 backdrop-blur-md transition-colors hover:border-signal/40">
|
||||
<div className="flex items-center justify-between text-ink-faint">
|
||||
<span className="font-mono text-[10px] tracking-wider uppercase">
|
||||
Voice Captures
|
||||
</span>
|
||||
<Mic className="size-3.5 text-signal" />
|
||||
</div>
|
||||
<div className="mt-2 font-mono text-xl font-bold tracking-tight text-ink">
|
||||
{formatNumber(s.total_voice_recordings)}
|
||||
</div>
|
||||
<div className="mt-1 font-mono text-[10px] text-ink-faint">
|
||||
<span>audio buffers</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Activity Waveform / Time Series */}
|
||||
<GlassPanel className="hud-tile rounded-md border border-hairline bg-surface/40 p-4 backdrop-blur-md">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div>
|
||||
<div className="eyebrow mb-2">GMW · Operations Grid</div>
|
||||
<h2 className="display hero-clamp leading-none text-ink glow-signal">
|
||||
Ambient Field
|
||||
</h2>
|
||||
<p className="mt-2 max-w-md text-pretty text-sm text-ink-soft">
|
||||
Real-time moderation, voice & media presence across the monitored
|
||||
guild. {formatNumber(s.total_messages)} messages captured.
|
||||
</p>
|
||||
<div className="font-mono text-[10px] tracking-widest text-ink-faint uppercase">
|
||||
CHRONO TELEMETRY (14D)
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-ink-soft">
|
||||
<Radio className="size-4 text-signal animate-breathe" />
|
||||
<span className="mono text-xs uppercase tracking-wider">
|
||||
{deriveSignal(s).label}
|
||||
</span>
|
||||
<div className="text-sm font-medium text-ink">
|
||||
Message & Activity Stream
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid grid-cols-2 gap-3 md:grid-cols-4">
|
||||
<MetricTile
|
||||
label="Messages"
|
||||
value={formatNumber(s.total_messages)}
|
||||
tone="signal"
|
||||
icon={<MessageSquare className="size-3.5" />}
|
||||
className="animate-stagger"
|
||||
style={staggerDelay(0)}
|
||||
/>
|
||||
<MetricTile
|
||||
label="Flagged"
|
||||
value={formatNumber(s.total_flagged)}
|
||||
tone={s.total_flagged > 0 ? "vermilion" : "neutral"}
|
||||
hint={`${s.today_flagged} today`}
|
||||
className="animate-stagger"
|
||||
style={staggerDelay(1)}
|
||||
/>
|
||||
<MetricTile
|
||||
label="Active 24h"
|
||||
value={formatNumber(s.active_users_24h)}
|
||||
tone="signal"
|
||||
icon={<Users className="size-3.5" />}
|
||||
className="animate-stagger"
|
||||
style={staggerDelay(2)}
|
||||
/>
|
||||
<MetricTile
|
||||
label="Voice clips"
|
||||
value={formatNumber(s.total_voice_recordings)}
|
||||
icon={<Mic className="size-3.5" />}
|
||||
className="animate-stagger"
|
||||
style={staggerDelay(3)}
|
||||
/>
|
||||
<div className="flex items-center gap-3 font-mono text-[11px]">
|
||||
<div className="flex items-center gap-1 text-ink-soft">
|
||||
<span className="size-2 rounded-full bg-signal" />
|
||||
<span>Activity Trend</span>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
|
||||
{/* Activity */}
|
||||
<GlassPanel>
|
||||
<SectionHeader
|
||||
eyebrow="14-day signal"
|
||||
title={
|
||||
<span className="flex items-center gap-2">
|
||||
<Activity className="size-4 text-signal" /> Activity & moderation
|
||||
</span>
|
||||
}
|
||||
action={
|
||||
<div className="flex items-center gap-3 text-xs text-ink-soft">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="size-2 rounded-full bg-signal" /> messages
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="size-2 rounded-full bg-vermilion" /> flagged
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
{activity ? (
|
||||
</div>
|
||||
<div className="h-56 w-full">
|
||||
{activity?.daily ? (
|
||||
<AreaActivity daily={activity.daily} />
|
||||
) : (
|
||||
<LoadingState label="streaming" />
|
||||
<div className="flex h-full items-center justify-center font-mono text-xs text-ink-faint">
|
||||
ACQUIRING SIGNAL...
|
||||
</div>
|
||||
)}
|
||||
</GlassPanel>
|
||||
|
||||
{/* Two-column: channels + moderation */}
|
||||
<div className="grid gap-5 lg:grid-cols-5">
|
||||
<GlassPanel className="lg:col-span-3">
|
||||
<SectionHeader eyebrow="throughput" title="Top channels" />
|
||||
<div className="space-y-2.5">
|
||||
{s.top_channels.slice(0, 7).map((c) => {
|
||||
const pct =
|
||||
(c.message_count / (s.top_channels[0]?.message_count || 1)) *
|
||||
100;
|
||||
return (
|
||||
<div key={c.channel_id} className="flex items-center gap-3">
|
||||
<span className="w-28 shrink-0 truncate text-sm text-ink-soft sm:w-40">
|
||||
{c.channel_name ?? c.channel_id.slice(0, 8)}
|
||||
</span>
|
||||
<div className="h-2 flex-1 overflow-hidden rounded-full bg-white/8">
|
||||
<div
|
||||
className="h-full rounded-full bg-signal/70"
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="mono w-14 text-right text-xs text-ink-faint">
|
||||
{formatNumber(c.message_count)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</GlassPanel>
|
||||
|
||||
<GlassPanel className="lg:col-span-2">
|
||||
<SectionHeader eyebrow="trust" title="Moderation" />
|
||||
<div className="flex items-center gap-5">
|
||||
<RadialGauge
|
||||
value={cleanRatio}
|
||||
tone={
|
||||
cleanRatio > 0.8
|
||||
? "signal"
|
||||
: cleanRatio > 0.6
|
||||
? "amber"
|
||||
: "vermilion"
|
||||
}
|
||||
label={`${Math.round(cleanRatio * 100)}%`}
|
||||
sublabel="clean"
|
||||
/>
|
||||
<div className="flex-1 space-y-2 text-sm">
|
||||
<Row
|
||||
icon={<ShieldAlert className="size-4 text-signal" />}
|
||||
label="Clean"
|
||||
value={formatNumber(s.total_clean)}
|
||||
/>
|
||||
<Row
|
||||
icon={<Flag className="size-4 text-vermilion" />}
|
||||
label="Flagged"
|
||||
value={formatNumber(s.total_flagged)}
|
||||
/>
|
||||
<Row
|
||||
icon={<Activity className="size-4 text-amber" />}
|
||||
label="Warned"
|
||||
value={formatNumber(s.total_warned)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex items-center justify-around border-t border-hairline pt-3 text-center">
|
||||
<Mini
|
||||
label="pending"
|
||||
value={s.moderation_overview.pending}
|
||||
tone="amber"
|
||||
/>
|
||||
<Mini
|
||||
label="processing"
|
||||
value={s.moderation_overview.processing}
|
||||
tone="signal"
|
||||
/>
|
||||
<Mini
|
||||
label="errors"
|
||||
value={s.moderation_overview.error}
|
||||
tone="vermilion"
|
||||
/>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
|
||||
{/* Reactors + reactions */}
|
||||
<div className="grid gap-5 lg:grid-cols-2">
|
||||
<GlassPanel>
|
||||
<SectionHeader eyebrow="engagement" title="Top reactors" />
|
||||
<div className="space-y-2">
|
||||
{(reactors ?? []).slice(0, 6).map((r, i) => {
|
||||
const maxNet = reactors?.[0]?.net_count || 1;
|
||||
const pct = Math.max(4, Math.round((r.net_count / maxNet) * 100));
|
||||
return (
|
||||
<div key={r.user_id} className="flex items-center gap-3">
|
||||
<span className="mono w-5 text-ink-faint">{i + 1}</span>
|
||||
<span className="w-28 shrink-0 truncate text-sm text-ink-soft sm:w-40">
|
||||
{r.username}
|
||||
</span>
|
||||
<div className="h-1.5 flex-1 overflow-hidden rounded-full bg-white/8">
|
||||
<div
|
||||
className="h-full rounded-full bg-signal/70"
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="mono w-12 text-right text-xs text-signal">
|
||||
+{formatNumber(r.net_count)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{(reactors ?? []).length === 0 && <EmptyHint />}
|
||||
</div>
|
||||
</GlassPanel>
|
||||
|
||||
<GlassPanel>
|
||||
<SectionHeader eyebrow="culture" title="Top reactions" />
|
||||
<div className="space-y-3">
|
||||
{(reactions ?? []).slice(0, 5).map((m) => (
|
||||
<div key={m.message_id} className="flex items-start gap-3">
|
||||
<div className="flex flex-wrap gap-1 pt-0.5">
|
||||
{m.top_emojis.slice(0, 3).map((e, i) => (
|
||||
<span
|
||||
key={`${m.message_id}-${i}`}
|
||||
className="text-lg leading-none"
|
||||
{/* Quick Tactical Links */}
|
||||
<div className="hud-tile grid grid-cols-1 gap-2.5 sm:grid-cols-3">
|
||||
<Link
|
||||
href="/voice"
|
||||
className="group flex items-center justify-between rounded-md border border-hairline bg-surface/30 p-3 transition hover:border-signal/50 hover:bg-surface/60"
|
||||
>
|
||||
{e.emoji}
|
||||
</span>
|
||||
))}
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="flex size-8 items-center justify-center rounded bg-canvas-2 text-signal group-hover:bg-signal group-hover:text-signal-ink">
|
||||
<AudioWaveform className="size-4" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-sm text-ink">
|
||||
{m.content || "(no text)"}
|
||||
<div>
|
||||
<div className="font-mono text-xs font-semibold text-ink">
|
||||
Voice Matrix
|
||||
</div>
|
||||
<div className="mono text-[0.65rem] text-ink-faint">
|
||||
{m.username} · {m.channel_name ?? m.channel_id.slice(0, 8)}
|
||||
<div className="text-[11px] text-ink-faint">
|
||||
Realtime speaker stream
|
||||
</div>
|
||||
</div>
|
||||
<span className="mono text-xs text-ink-soft">
|
||||
{m.reaction_count}
|
||||
</div>
|
||||
<ChevronRight className="size-4 text-ink-faint group-hover:text-signal" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/messages"
|
||||
className="group flex items-center justify-between rounded-md border border-hairline bg-surface/30 p-3 transition hover:border-signal/50 hover:bg-surface/60"
|
||||
>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="flex size-8 items-center justify-center rounded bg-canvas-2 text-signal group-hover:bg-signal group-hover:text-signal-ink">
|
||||
<Terminal className="size-4" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-mono text-xs font-semibold text-ink">
|
||||
Chat Log Stream
|
||||
</div>
|
||||
<div className="text-[11px] text-ink-faint">
|
||||
Live telemetry feed
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight className="size-4 text-ink-faint group-hover:text-signal" />
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/moderation"
|
||||
className="group flex items-center justify-between rounded-md border border-hairline bg-surface/30 p-3 transition hover:border-signal/50 hover:bg-surface/60"
|
||||
>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="flex size-8 items-center justify-center rounded bg-canvas-2 text-signal group-hover:bg-signal group-hover:text-signal-ink">
|
||||
<Shield className="size-4" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-mono text-xs font-semibold text-ink">
|
||||
Auto-Mod Radar
|
||||
</div>
|
||||
<div className="text-[11px] text-ink-faint">
|
||||
Classification & audits
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronRight className="size-4 text-ink-faint group-hover:text-signal" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Side Telemetry Panel: Health, Dials, & Nodes */}
|
||||
<div className="space-y-4 lg:col-span-4">
|
||||
{/* Safety & Moderation Integrity Gauge */}
|
||||
<GlassPanel className="hud-tile rounded-md border border-hairline bg-surface/40 p-4 backdrop-blur-md">
|
||||
<div className="font-mono text-[10px] tracking-widest text-ink-faint uppercase">
|
||||
INTEGRITY MATRIX
|
||||
</div>
|
||||
<div className="mt-1 text-sm font-medium text-ink">
|
||||
Clean Stream Ratio
|
||||
</div>
|
||||
<div className="my-4 flex items-center justify-center">
|
||||
<RadialGauge
|
||||
value={Math.round(cleanRatio * 100)}
|
||||
size={140}
|
||||
tone={cleanRatio > 0.9 ? "signal" : "amber"}
|
||||
label={`${Math.round(cleanRatio * 100)}%`}
|
||||
sublabel="CLEAN RATIO"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2 border-t border-hairline pt-3 font-mono text-xs">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-ink-faint">Clean Messages:</span>
|
||||
<span className="font-medium text-ink">
|
||||
{formatNumber(s.total_clean)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{(reactions ?? []).length === 0 && <EmptyHint />}
|
||||
<div className="flex justify-between">
|
||||
<span className="text-ink-faint">Pending Flags:</span>
|
||||
<span className="font-medium text-vermilion">
|
||||
{formatNumber(s.total_flagged)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
|
||||
{/* Top Reacted Messages / Emitters */}
|
||||
<GlassPanel className="hud-tile rounded-md border border-hairline bg-surface/40 p-4 backdrop-blur-md">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-mono text-[10px] tracking-widest text-ink-faint uppercase">
|
||||
FREQUENT EMITTERS
|
||||
</div>
|
||||
<div className="text-sm font-medium text-ink">
|
||||
Top Reacted Messages
|
||||
</div>
|
||||
</div>
|
||||
<Flame className="size-4 text-amber" />
|
||||
</div>
|
||||
|
||||
<div className="mt-3 space-y-2">
|
||||
{reactions && reactions.length > 0 ? (
|
||||
reactions.slice(0, 4).map((r) => (
|
||||
<div
|
||||
key={r.message_id}
|
||||
className="flex items-center justify-between rounded bg-surface/30 px-2.5 py-1.5 font-mono text-xs"
|
||||
>
|
||||
<span className="max-w-[150px] truncate text-ink-soft">
|
||||
{r.username ? `@${r.username}` : "anonymous"}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-ink-faint">reacts:</span>
|
||||
<span className="font-bold text-signal">
|
||||
{r.reaction_count}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="py-4 text-center font-mono text-xs text-ink-faint">
|
||||
NO EMITTER TELEMETRY
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Row({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
value: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center gap-2.5">
|
||||
{icon}
|
||||
<span className="flex-1 text-ink-soft">{label}</span>
|
||||
<span className="mono text-ink">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Mini({
|
||||
label,
|
||||
value,
|
||||
tone,
|
||||
}: {
|
||||
label: string;
|
||||
value: number;
|
||||
tone: "signal" | "amber" | "vermilion";
|
||||
}) {
|
||||
const color =
|
||||
tone === "vermilion"
|
||||
? "text-vermilion"
|
||||
: tone === "amber"
|
||||
? "text-amber"
|
||||
: "text-signal";
|
||||
return (
|
||||
<div>
|
||||
<div className={`display text-xl ${color}`}>{value}</div>
|
||||
<div className="eyebrow mt-0.5">{label}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyHint() {
|
||||
return (
|
||||
<div className="py-6 text-center text-xs text-ink-faint">
|
||||
Awaiting data…
|
||||
</div>
|
||||
</PageTransition>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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
|
||||
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 }}
|
||||
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-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>
|
||||
|
||||
Reference in New Issue
Block a user