feat(frontend): revamp UI to Linear Precision Clean Dark with GSAP micro-interactions
This commit is contained in:
asepharyana
@@ -7,8 +7,6 @@ import {
|
||||
MessageSquare,
|
||||
Mic,
|
||||
Shield,
|
||||
ShieldAlert,
|
||||
Terminal,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
@@ -18,7 +16,9 @@ import { AreaActivity, RadialGauge } from "@/components/charts";
|
||||
import { GlassPanel } from "@/components/primitives";
|
||||
import {
|
||||
ErrorState,
|
||||
MetricTile,
|
||||
PageTransition,
|
||||
SectionHeader,
|
||||
SkeletonHero,
|
||||
SkeletonMetricRow,
|
||||
SkeletonPanel,
|
||||
@@ -63,9 +63,9 @@ export function DashboardView({
|
||||
const { data: reactions } = useTopReactions();
|
||||
const ambient = useAmbient();
|
||||
|
||||
const hudRef = useStaggerReveal<HTMLDivElement>(".hud-tile", {
|
||||
stagger: 0.05,
|
||||
y: 16,
|
||||
const hudRef = useStaggerReveal<HTMLDivElement>(".linear-tile", {
|
||||
stagger: 0.035,
|
||||
y: 8,
|
||||
dependencies: [stats],
|
||||
});
|
||||
|
||||
@@ -82,10 +82,10 @@ export function DashboardView({
|
||||
return <ErrorState error={error} onRetry={() => void mutateStats()} />;
|
||||
if (!stats && isLoading)
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div className="space-y-4">
|
||||
<SkeletonHero />
|
||||
<SkeletonMetricRow cols={4} />
|
||||
<SkeletonPanel rows={5} />
|
||||
<SkeletonPanel rows={4} />
|
||||
</div>
|
||||
);
|
||||
if (!stats)
|
||||
@@ -99,276 +99,155 @@ 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 (
|
||||
<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>
|
||||
{/* Precision Sub-Header Bar */}
|
||||
<div className="linear-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span className="h-2 w-2 rounded-full bg-[#7170ff] shadow-[0_0_8px_#7170ff]" />
|
||||
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
|
||||
Telemetry Overview · Node 01
|
||||
</h1>
|
||||
</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 className="flex items-center gap-2 font-mono text-[11px] text-[#8a8f98]">
|
||||
<span>SIGNAL:</span>
|
||||
<span className="rounded bg-white/[0.04] px-1.5 py-0.5 font-medium text-[#7170ff] border border-white/[0.06]">
|
||||
STABLE_STREAM
|
||||
</span>
|
||||
</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>
|
||||
{/* Primary Metric Deck */}
|
||||
<div className="linear-tile grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<MetricTile
|
||||
label="Total Messages"
|
||||
value={formatNumber(s.total_messages)}
|
||||
hint={`${formatNumber(s.today_messages)} today`}
|
||||
icon={<MessageSquare className="size-4" />}
|
||||
/>
|
||||
<MetricTile
|
||||
label="Clean Filter Ratio"
|
||||
value={`${Math.round(cleanRatio * 100)}%`}
|
||||
hint={`${formatNumber(s.total_clean)} verified clean`}
|
||||
tone="signal"
|
||||
icon={<Shield className="size-4" />}
|
||||
/>
|
||||
<MetricTile
|
||||
label="Voice Recordings"
|
||||
value={formatNumber(s.total_voice_recordings)}
|
||||
hint="Archived audio sessions"
|
||||
icon={<Mic className="size-4" />}
|
||||
/>
|
||||
<MetricTile
|
||||
label="Total Profiles"
|
||||
value={formatNumber(s.total_profiles)}
|
||||
hint={`${formatNumber(s.active_users_24h)} active 24h`}
|
||||
icon={<Users className="size-4" />}
|
||||
/>
|
||||
</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>
|
||||
{/* Dynamic Activity Area & Telemetry Gauges */}
|
||||
<div className="grid gap-3 lg:grid-cols-3">
|
||||
<GlassPanel className="linear-tile lg:col-span-2">
|
||||
<SectionHeader
|
||||
eyebrow="Activity Stream"
|
||||
title="Message Volume & Signal Density"
|
||||
/>
|
||||
<div className="mt-4">
|
||||
<AreaActivity daily={activity?.daily ?? []} />
|
||||
</div>
|
||||
</GlassPanel>
|
||||
|
||||
{/* 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="font-mono text-[10px] tracking-widest text-ink-faint uppercase">
|
||||
CHRONO TELEMETRY (14D)
|
||||
</div>
|
||||
<div className="text-sm font-medium text-ink">
|
||||
Message & Activity Stream
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-56 w-full">
|
||||
{activity?.daily ? (
|
||||
<AreaActivity daily={activity.daily} />
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center font-mono text-xs text-ink-faint">
|
||||
ACQUIRING SIGNAL...
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</GlassPanel>
|
||||
|
||||
{/* 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"
|
||||
>
|
||||
<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>
|
||||
<div className="font-mono text-xs font-semibold text-ink">
|
||||
Voice Matrix
|
||||
</div>
|
||||
<div className="text-[11px] text-ink-faint">
|
||||
Realtime speaker stream
|
||||
</div>
|
||||
</div>
|
||||
</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">
|
||||
<GlassPanel className="linear-tile flex flex-col justify-between">
|
||||
<div>
|
||||
<SectionHeader
|
||||
eyebrow="Security State"
|
||||
title="Moderation Accuracy"
|
||||
/>
|
||||
<div className="my-6 flex items-center justify-center">
|
||||
<RadialGauge
|
||||
value={Math.round(cleanRatio * 100)}
|
||||
label="Clean Ratio"
|
||||
tone={cleanRatio > 0.85 ? "signal" : "amber"}
|
||||
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>
|
||||
<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 className="grid grid-cols-2 gap-2 border-t border-white/[0.06] pt-3 text-center">
|
||||
<div>
|
||||
<div className="font-mono text-[10px] text-[#8a8f98]">CLEAN</div>
|
||||
<div className="font-sans text-sm font-semibold text-[#10b981]">
|
||||
{formatNumber(s.total_clean)}
|
||||
</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>
|
||||
<div className="font-mono text-[10px] text-[#8a8f98]">FLAGGED</div>
|
||||
<div className="font-sans text-sm font-semibold text-[#f43f5e]">
|
||||
{formatNumber(s.total_flagged)}
|
||||
</div>
|
||||
<Flame className="size-4 text-amber" />
|
||||
</div>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
|
||||
{/* Secondary Insights Deck */}
|
||||
<div className="grid gap-3 lg:grid-cols-2">
|
||||
{reactions && reactions.length > 0 && (
|
||||
<GlassPanel className="linear-tile">
|
||||
<SectionHeader
|
||||
eyebrow="Engagement"
|
||||
title="Top Reacted Messages"
|
||||
/>
|
||||
<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
|
||||
{reactions.slice(0, 4).map((r) => (
|
||||
<div
|
||||
key={r.message_id}
|
||||
className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 hover:bg-white/[0.04]"
|
||||
>
|
||||
<span className="truncate pr-2 text-xs text-[#d0d6e0]">
|
||||
{r.content || "[Media/Attachment]"}
|
||||
</span>
|
||||
<span className="font-mono text-xs font-semibold text-[#7170ff] shrink-0">
|
||||
{formatNumber(r.reaction_count)} reactions
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<GlassPanel className="linear-tile flex flex-col justify-between">
|
||||
<div>
|
||||
<SectionHeader
|
||||
eyebrow="Navigation"
|
||||
title="Quick Diagnostics"
|
||||
/>
|
||||
<div className="mt-2 space-y-1.5">
|
||||
<Link
|
||||
href="/moderation"
|
||||
className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs text-[#d0d6e0] transition-colors hover:border-white/[0.12] hover:bg-white/[0.04] hover:text-[#f7f8f8]"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<Shield className="size-3.5 text-[#7170ff]" />
|
||||
Review Live Moderation Queue
|
||||
</span>
|
||||
<ChevronRight className="size-3.5 text-[#8a8f98]" />
|
||||
</Link>
|
||||
<Link
|
||||
href="/voice"
|
||||
className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs text-[#d0d6e0] transition-colors hover:border-white/[0.12] hover:bg-white/[0.04] hover:text-[#f7f8f8]"
|
||||
>
|
||||
<span className="flex items-center gap-2">
|
||||
<AudioWaveform className="size-3.5 text-[#10b981]" />
|
||||
Inspect Active Voice Stages
|
||||
</span>
|
||||
<ChevronRight className="size-3.5 text-[#8a8f98]" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
</div>
|
||||
</PageTransition>
|
||||
|
||||
@@ -16,6 +16,7 @@ import { Button, GlassPanel, Input, toast } from "@/components/primitives";
|
||||
import {
|
||||
ErrorState,
|
||||
PageTransition,
|
||||
SectionHeader,
|
||||
SkeletonHero,
|
||||
SkeletonPanel,
|
||||
} from "@/components/shared";
|
||||
@@ -52,14 +53,10 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
|
||||
const playing = media?.playing ?? false;
|
||||
const current = media?.current ?? null;
|
||||
const queueList = media?.queue ?? [];
|
||||
const queueTotal = queueList.reduce(
|
||||
(acc, it) => acc + (it.durationMs ?? 0),
|
||||
0,
|
||||
);
|
||||
|
||||
const mediaRef = useStaggerReveal<HTMLDivElement>(".media-tile", {
|
||||
stagger: 0.06,
|
||||
y: 16,
|
||||
stagger: 0.04,
|
||||
y: 8,
|
||||
dependencies: [playing, queueList.length],
|
||||
});
|
||||
|
||||
@@ -67,21 +64,21 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
|
||||
useEffect(() => {
|
||||
ambient.set(
|
||||
tone,
|
||||
playing ? 0.5 : 0.25,
|
||||
playing ? "now playing" : "media idle",
|
||||
playing ? 0.45 : 0.2,
|
||||
playing ? "playing stream" : "media ready",
|
||||
);
|
||||
}, [tone, playing, ambient]);
|
||||
|
||||
const onPlay = async () => {
|
||||
const u = url.trim();
|
||||
if (!u) {
|
||||
toast({ title: "Enter a media URL", tone: "vermilion" });
|
||||
toast({ title: "Enter media URL", tone: "vermilion" });
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await queue.mutateAsync({ url: u, mode: "music" });
|
||||
setUrl("");
|
||||
toast({ title: "Queued track", tone: "signal" });
|
||||
toast({ title: "Track queued", tone: "signal" });
|
||||
} catch (e) {
|
||||
toast({
|
||||
title: "Queue failed",
|
||||
@@ -95,205 +92,151 @@ export function MediaView({ initialStatus }: { initialStatus?: MediaState }) {
|
||||
return <ErrorState error={error} onRetry={() => void mutate()} />;
|
||||
if (!media && isLoading)
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div className="space-y-4">
|
||||
<SkeletonHero />
|
||||
<SkeletonPanel rows={4} />
|
||||
<SkeletonPanel rows={3} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const mockLevels = playing
|
||||
? [0.4, 0.7, 0.9, 0.6, 0.8, 0.5, 0.9, 0.7, 0.4, 0.8, 0.6, 0.9]
|
||||
: [0.1, 0.1, 0.1, 0.1, 0.1, 0.1];
|
||||
: [0.08, 0.08, 0.08, 0.08, 0.08, 0.08];
|
||||
|
||||
return (
|
||||
<PageTransition>
|
||||
<div ref={mediaRef} className="space-y-5">
|
||||
{/* Top Media Matrix Stage */}
|
||||
<div className="media-tile relative overflow-hidden rounded-xl border border-hairline/80 bg-surface/40 p-6 shadow-2xl backdrop-blur-xl">
|
||||
{/* Spatial Grid Header */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-4 border-b border-hairline/60 pb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-9 items-center justify-center rounded-lg bg-canvas-2 border border-hairline text-signal shadow-inner">
|
||||
<Disc
|
||||
className={`size-5 ${playing ? "animate-spin-disc text-signal" : "text-ink-faint"}`}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="font-mono text-sm font-bold tracking-widest text-ink uppercase">
|
||||
MEDIA FREQUENCY DECK
|
||||
</h1>
|
||||
<div className="font-mono text-[11px] text-ink-faint">
|
||||
{playing
|
||||
? "STREAM_ACTIVE · 48KHZ STEREO"
|
||||
: "DECK_IDLE · STANDBY"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={`inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 font-mono text-xs font-semibold ${playing ? "bg-signal/10 text-signal border border-signal/30" : "bg-surface text-ink-faint border border-hairline"}`}
|
||||
>
|
||||
<span
|
||||
className={`size-1.5 rounded-full ${playing ? "bg-signal animate-breathe" : "bg-ink-faint"}`}
|
||||
/>
|
||||
{playing ? "TRANSMITTING" : "STANDBY"}
|
||||
</span>
|
||||
</div>
|
||||
<div ref={mediaRef} className="space-y-4">
|
||||
{/* Precision Sub-Header Bar */}
|
||||
<div className="media-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span
|
||||
className={`h-2 w-2 rounded-full ${
|
||||
playing
|
||||
? "bg-[#7170ff] shadow-[0_0_8px_#7170ff]"
|
||||
: "bg-[#8a8f98]"
|
||||
}`}
|
||||
/>
|
||||
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
|
||||
Audio Engine · Media Gateway
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Player Core View */}
|
||||
<div className="mt-6 grid gap-6 lg:grid-cols-12 items-center">
|
||||
{/* Vinyl & Visualizer Stage */}
|
||||
<div className="lg:col-span-5 flex flex-col items-center justify-center">
|
||||
<div className="relative flex size-44 items-center justify-center rounded-full border-2 border-dashed border-hairline/60 bg-canvas-2 shadow-2xl">
|
||||
<div
|
||||
className={`absolute inset-2 rounded-full border border-hairline/30 ${playing ? "animate-spin-disc" : ""}`}
|
||||
/>
|
||||
{current?.thumbnailUrl ? (
|
||||
<div
|
||||
className="size-32 rounded-full bg-cover bg-center border-2 border-hairline/80 shadow-lg"
|
||||
style={{ backgroundImage: `url(${current.thumbnailUrl})` }}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex size-32 items-center justify-center rounded-full bg-surface border border-hairline">
|
||||
<ListMusic className="size-12 text-ink-faint" />
|
||||
</div>
|
||||
)}
|
||||
{playing && (
|
||||
<div className="absolute -inset-2 rounded-full ring-2 ring-signal/40 animate-pulse-ring pointer-events-none" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Current Track Telemetry & Controls */}
|
||||
<div className="lg:col-span-7 space-y-4">
|
||||
<div>
|
||||
<div className="font-mono text-[10px] font-bold tracking-widest text-signal uppercase">
|
||||
{current ? "CURRENT TRANSMISSION" : "DECK UNLOADED"}
|
||||
</div>
|
||||
<h2 className="text-xl font-bold text-ink mt-1 truncate">
|
||||
{current?.title ?? "No active stream"}
|
||||
</h2>
|
||||
<div className="font-mono text-xs text-ink-soft mt-1">
|
||||
{current?.source
|
||||
? `Source: ${current.source}`
|
||||
: "Queue a URL below to broadcast"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Realtime Equalizer preview */}
|
||||
<div className="h-12 w-full rounded-md border border-hairline bg-canvas-2/50 p-2">
|
||||
<Equalizer
|
||||
bars={mockLevels}
|
||||
color={
|
||||
playing ? "var(--color-signal)" : "var(--color-ink-faint)"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Interactive Playback Toolbar */}
|
||||
<div className="flex flex-wrap items-center gap-2.5 pt-2">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => stop.mutateAsync()}
|
||||
disabled={!playing || stop.isPending}
|
||||
className="font-mono text-xs font-bold"
|
||||
>
|
||||
<Square className="mr-1.5 size-3.5" /> STOP
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => skip.mutateAsync()}
|
||||
disabled={!playing || skip.isPending}
|
||||
className="font-mono text-xs font-bold"
|
||||
>
|
||||
<SkipForward className="mr-1.5 size-3.5" /> SKIP
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant={media?.loop ? "primary" : "outline"}
|
||||
onClick={() => loop.mutateAsync(!media?.loop)}
|
||||
disabled={loop.isPending}
|
||||
className="font-mono text-xs font-bold"
|
||||
>
|
||||
<Repeat className="mr-1.5 size-3.5" /> LOOP{" "}
|
||||
{media?.loop ? "ON" : "OFF"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 font-mono text-[11px]">
|
||||
<span className="text-[#8a8f98]">ENGINE:</span>
|
||||
<span
|
||||
className={`rounded px-1.5 py-0.5 font-medium border ${
|
||||
playing
|
||||
? "border-[#7170ff]/30 bg-[#7170ff]/10 text-[#7170ff]"
|
||||
: "border-white/[0.06] bg-white/[0.02] text-[#8a8f98]"
|
||||
}`}
|
||||
>
|
||||
{playing ? "STREAMING" : "IDLE"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ingest & Queue Spatial Deck */}
|
||||
<div className="grid gap-5 lg:grid-cols-12">
|
||||
{/* URL Ingest Box */}
|
||||
<div className="media-tile lg:col-span-5 space-y-4">
|
||||
<GlassPanel className="rounded-xl border border-hairline/80 bg-surface/40 p-5 shadow-xl backdrop-blur-xl">
|
||||
<div className="font-mono text-xs font-bold tracking-wider text-ink uppercase mb-3 flex items-center justify-between">
|
||||
<span>INJECT AUDIO STREAM</span>
|
||||
<Sliders className="size-4 text-signal" />
|
||||
{/* Media Playback Deck */}
|
||||
<div className="media-tile">
|
||||
<GlassPanel className="p-5">
|
||||
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
||||
<div className="flex items-center gap-3.5">
|
||||
<div className="flex size-11 items-center justify-center rounded-[8px] border border-white/[0.08] bg-white/[0.03] text-[#7170ff]">
|
||||
<Disc
|
||||
className={`size-6 ${playing ? "animate-spin-disc text-[#7170ff]" : "text-[#8a8f98]"}`}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-semibold tracking-tight text-[#f7f8f8]">
|
||||
{current?.title ?? "No Active Media Stream"}
|
||||
</div>
|
||||
<div className="font-mono text-[11px] text-[#8a8f98]">
|
||||
{current
|
||||
? `${formatDuration(current.durationMs ?? 0)} · High Fidelity Stream`
|
||||
: "Queue a track via URL below"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<Input
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
placeholder="Paste YouTube or Audio URL..."
|
||||
className="font-mono text-xs"
|
||||
/>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={onPlay}
|
||||
disabled={queue.isPending || !url.trim()}
|
||||
className="w-full font-mono text-xs font-bold py-2.5"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => loop.mutateAsync()}
|
||||
className={media?.loop ? "border-[#7170ff] text-[#7170ff]" : ""}
|
||||
>
|
||||
<Play className="mr-1.5 size-4" /> BROADCAST STREAM
|
||||
<Repeat className="size-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => skip.mutateAsync()}
|
||||
>
|
||||
<SkipForward className="size-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={() => stop.mutateAsync()}
|
||||
>
|
||||
<Square className="size-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Queue List Stage */}
|
||||
<div className="media-tile lg:col-span-7">
|
||||
<GlassPanel className="rounded-xl border border-hairline/80 bg-surface/40 p-5 shadow-xl backdrop-blur-xl">
|
||||
<div className="flex items-center justify-between border-b border-hairline/60 pb-3 mb-3">
|
||||
<div className="font-mono text-xs font-bold tracking-wider text-ink uppercase">
|
||||
QUEUE STACK ({queueList.length})
|
||||
</div>
|
||||
<div className="font-mono text-[11px] text-ink-faint">
|
||||
Total: {formatDuration(queueTotal)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Quick URL Input */}
|
||||
<div className="mt-4 flex gap-2 border-t border-white/[0.06] pt-4">
|
||||
<Input
|
||||
placeholder="Paste YouTube, SoundCloud, or Direct Stream URL..."
|
||||
value={url}
|
||||
onChange={(e) => setUrl(e.target.value)}
|
||||
className="flex-1 text-xs"
|
||||
/>
|
||||
<Button variant="primary" size="md" onClick={onPlay}>
|
||||
<Play className="size-3.5" />
|
||||
Queue Track
|
||||
</Button>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 max-h-64 overflow-y-auto pr-1">
|
||||
{queueList.length > 0 ? (
|
||||
queueList.map((item, idx) => (
|
||||
<div
|
||||
key={item.id ?? idx}
|
||||
className="flex items-center justify-between rounded-lg border border-hairline bg-surface/30 p-2.5 font-mono text-xs transition hover:border-signal/40"
|
||||
>
|
||||
<div className="flex items-center gap-2.5 min-w-0">
|
||||
<span className="text-ink-faint font-bold">
|
||||
{idx + 1}.
|
||||
</span>
|
||||
<span className="truncate text-ink font-medium">
|
||||
{item.title ?? "Unknown Track"}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-ink-faint text-[11px] shrink-0 ml-2">
|
||||
{formatDuration(item.durationMs ?? 0)}
|
||||
</span>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<div className="py-8 text-center font-mono text-xs text-ink-faint">
|
||||
NO QUEUED AUDIO IN BUFFER
|
||||
{/* Spectrum & Queue Grid */}
|
||||
<div className="grid gap-3 lg:grid-cols-3">
|
||||
<GlassPanel className="media-tile lg:col-span-2">
|
||||
<SectionHeader
|
||||
eyebrow="Visualizer"
|
||||
title="Realtime Frequency Array"
|
||||
/>
|
||||
<div className="my-6 flex items-center justify-center">
|
||||
<Equalizer bars={mockLevels} />
|
||||
</div>
|
||||
</GlassPanel>
|
||||
|
||||
<GlassPanel className="media-tile">
|
||||
<SectionHeader
|
||||
eyebrow="Playlist"
|
||||
title={`Queue (${queueList.length})`}
|
||||
/>
|
||||
<div className="mt-3 space-y-2">
|
||||
{queueList.length === 0 ? (
|
||||
<div className="py-8 text-center font-mono text-xs text-[#8a8f98]">
|
||||
QUEUE EMPTY
|
||||
</div>
|
||||
) : (
|
||||
queueList.map((item, idx) => (
|
||||
<div
|
||||
key={item.id ?? idx}
|
||||
className="flex items-center justify-between rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-2.5 text-xs text-[#d0d6e0]"
|
||||
>
|
||||
<span className="truncate pr-2 font-medium">
|
||||
{item.title}
|
||||
</span>
|
||||
<span className="font-mono text-[10px] text-[#8a8f98] shrink-0">
|
||||
{formatDuration(item.durationMs ?? 0)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
</div>
|
||||
</PageTransition>
|
||||
|
||||
@@ -1,500 +1,198 @@
|
||||
"use client";
|
||||
|
||||
import { useGSAP } from "@gsap/react";
|
||||
import gsap from "gsap";
|
||||
import {
|
||||
AlertTriangle,
|
||||
Ban,
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
Filter,
|
||||
MessageSquareWarning,
|
||||
MicOff,
|
||||
Shield,
|
||||
ShieldAlert,
|
||||
Trash2,
|
||||
UserX,
|
||||
XCircle,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useGSAP } from "@gsap/react";
|
||||
import gsap from "gsap";
|
||||
import { useAmbient } from "@/components/ambient/ambient-context";
|
||||
import { CategoryDrilldown } from "@/components/CategoryDrilldown";
|
||||
import { CoverageTiles } from "@/components/CoverageTiles";
|
||||
import { Donut } from "@/components/charts";
|
||||
import { LiveModerationFeed } from "@/components/LiveModerationFeed";
|
||||
import { ModerationHeatmap } from "@/components/ModerationHeatmap";
|
||||
import {
|
||||
Badge,
|
||||
GlassPanel,
|
||||
Select,
|
||||
type SelectOption,
|
||||
} from "@/components/primitives";
|
||||
import { ScamDomains } from "@/components/ScamDomains";
|
||||
import { Button, GlassPanel } from "@/components/primitives";
|
||||
import {
|
||||
ErrorState,
|
||||
MetricTile,
|
||||
PageTransition,
|
||||
SectionHeader,
|
||||
SkeletonMetricRow,
|
||||
SkeletonPanel,
|
||||
SkeletonRows,
|
||||
} from "@/components/shared";
|
||||
import { TopChannels } from "@/components/TopChannels";
|
||||
import { TopicTrends } from "@/components/TopicTrends";
|
||||
import {
|
||||
useHourlyModeration,
|
||||
useLiveModeration,
|
||||
useModerationActions,
|
||||
useModerationByCategory,
|
||||
useModerationCoverage,
|
||||
useModerationStats,
|
||||
useModerationTrends,
|
||||
useTopFlaggedChannels,
|
||||
useTopFlaggedDomains,
|
||||
} from "@/hooks";
|
||||
import { aiTone } from "@/lib/ai-status";
|
||||
import { downloadCsv } from "@/lib/csv";
|
||||
import { formatNumber, formatRelativeTime } from "@/lib/format";
|
||||
import { useStaggerReveal } from "@/hooks/use-gsap-animation";
|
||||
import { formatNumber } from "@/lib/format";
|
||||
import type {
|
||||
ModerationAction,
|
||||
ModerationActionType,
|
||||
ModerationCoverage,
|
||||
ModerationStats,
|
||||
} from "@/lib/types";
|
||||
import { staggerDelay } from "@/lib/utils";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(useGSAP);
|
||||
}
|
||||
|
||||
const ACTION_ICON: Record<ModerationActionType, React.ReactNode> = {
|
||||
delete_message: <Trash2 className="size-3.5" />,
|
||||
mute_user: <MicOff className="size-3.5" />,
|
||||
warn_user: <MessageSquareWarning className="size-3.5" />,
|
||||
kick_user: <UserX className="size-3.5" />,
|
||||
ban_user: <Ban className="size-3.5" />,
|
||||
};
|
||||
|
||||
const ACTION_LABEL: Record<ModerationActionType, string> = {
|
||||
delete_message: "Delete",
|
||||
mute_user: "Mute",
|
||||
warn_user: "Warn",
|
||||
kick_user: "Kick",
|
||||
ban_user: "Ban",
|
||||
};
|
||||
|
||||
export function ModerationView({
|
||||
initialStats,
|
||||
initialActions,
|
||||
initialCoverage,
|
||||
}: {
|
||||
initialStats?: ModerationStats;
|
||||
initialActions?: ModerationAction[];
|
||||
initialCoverage?: ModerationCoverage;
|
||||
}) {
|
||||
const {
|
||||
data: stats,
|
||||
isLoading,
|
||||
error,
|
||||
mutate: mutateStats,
|
||||
mutate,
|
||||
} = useModerationStats(initialStats);
|
||||
const [statusFilter, setStatusFilter] = useState<string>("");
|
||||
const [typeFilter, setTypeFilter] = useState<string>("");
|
||||
const { data: actions } = useModerationActions(
|
||||
statusFilter || undefined,
|
||||
typeFilter || undefined,
|
||||
!statusFilter && !typeFilter ? initialActions : undefined,
|
||||
undefined,
|
||||
undefined,
|
||||
initialActions,
|
||||
);
|
||||
const liveActions = useLiveModeration(initialActions ?? [], 50);
|
||||
const { data: trends } = useModerationTrends(30);
|
||||
const { data: domains } = useTopFlaggedDomains(30);
|
||||
const { data: channels } = useTopFlaggedChannels(30);
|
||||
const { data: hourly } = useHourlyModeration(30);
|
||||
const { data: hourly } = useHourlyModeration();
|
||||
const { data: trends } = useModerationTrends(14);
|
||||
const { data: coverage } = useModerationCoverage(30);
|
||||
const [drilldown, setDrilldown] = useState<string | null>(null);
|
||||
const { data: categoryActions, isValidating: categoryLoading } =
|
||||
useModerationByCategory(drilldown ? 30 : 0, drilldown);
|
||||
|
||||
const failedRate = stats ? stats.failed_rate * 100 : 0;
|
||||
|
||||
const byAction = stats?.by_action ?? {};
|
||||
const segments = Object.entries(byAction).map(([k, _v]) => ({
|
||||
value: 1,
|
||||
color:
|
||||
k === "ban_user" || k === "kick_user"
|
||||
? "var(--color-vermilion)"
|
||||
: k === "warn_user"
|
||||
? "var(--color-amber)"
|
||||
: "var(--color-signal)",
|
||||
label: k,
|
||||
}));
|
||||
|
||||
const ambient = useAmbient();
|
||||
useEffect(() => {
|
||||
ambient.set(
|
||||
failedRate > 20 ? "vermilion" : failedRate > 5 ? "amber" : "signal",
|
||||
0.3 + Math.min(0.4, failedRate / 50),
|
||||
"moderation",
|
||||
);
|
||||
}, [failedRate, ambient]);
|
||||
|
||||
// Alert-priority HUD: a GSAP pulse loop on the inverted mono badge when
|
||||
// there is anything pending review — cleared up when the queue empties.
|
||||
const alertRef = useRef<HTMLDivElement>(null);
|
||||
const pendingCount = stats?.pending ?? 0;
|
||||
useGSAP(
|
||||
() => {
|
||||
if (!alertRef.current || pendingCount <= 0) return;
|
||||
const prefersReduced = window.matchMedia(
|
||||
"(prefers-reduced-motion: reduce)",
|
||||
).matches;
|
||||
if (prefersReduced) return;
|
||||
const tl = gsap.timeline({ repeat: -1, yoyo: true });
|
||||
tl.to(alertRef.current, {
|
||||
opacity: 0.45,
|
||||
duration: 0.7,
|
||||
ease: "sine.inOut",
|
||||
});
|
||||
return () => {
|
||||
tl.kill();
|
||||
if (alertRef.current)
|
||||
gsap.set(alertRef.current, { clearProps: "opacity" });
|
||||
};
|
||||
},
|
||||
{ scope: alertRef, dependencies: [pendingCount] },
|
||||
const [filterMode, setFilterMode] = useState<"all" | "flagged" | "clean">(
|
||||
"all",
|
||||
);
|
||||
|
||||
const containerRef = useStaggerReveal<HTMLDivElement>(".mod-tile", {
|
||||
stagger: 0.035,
|
||||
y: 8,
|
||||
dependencies: [stats],
|
||||
});
|
||||
|
||||
const executed = stats?.executed ?? 0;
|
||||
const failed = stats?.failed ?? 0;
|
||||
const total = stats?.total || 1;
|
||||
const failedRatio = failed / total;
|
||||
|
||||
useEffect(() => {
|
||||
if (failedRatio > 0.15) ambient.set("vermilion", 0.5, "high failure rate");
|
||||
else if (failedRatio > 0.05) ambient.set("amber", 0.35, "moderate issues");
|
||||
else ambient.set("signal", 0.25, "moderation nominal");
|
||||
}, [failedRatio, ambient]);
|
||||
|
||||
if (error && !stats)
|
||||
return <ErrorState error={error} onRetry={() => void mutateStats()} />;
|
||||
return <ErrorState error={error} onRetry={() => void mutate()} />;
|
||||
if (!stats && isLoading)
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<SkeletonMetricRow cols={4} />
|
||||
<SkeletonPanel rows={5} />
|
||||
<SkeletonRows rows={6} />
|
||||
<div className="space-y-4">
|
||||
<SkeletonMetricRow cols={3} />
|
||||
<SkeletonPanel rows={6} />
|
||||
</div>
|
||||
);
|
||||
if (!stats)
|
||||
return (
|
||||
<ErrorState
|
||||
error={error ?? new Error("No data")}
|
||||
onRetry={() => void mutateStats()}
|
||||
/>
|
||||
);
|
||||
|
||||
const statusOpts: SelectOption[] = [
|
||||
{ value: "", label: "All statuses" },
|
||||
{ value: "pending", label: "Pending" },
|
||||
{ value: "executed", label: "Executed" },
|
||||
{ value: "failed", label: "Failed" },
|
||||
];
|
||||
const typeOpts: SelectOption[] = [
|
||||
{ value: "", label: "All actions" },
|
||||
...Object.keys(byAction).map((k) => ({
|
||||
value: k,
|
||||
label: ACTION_LABEL[k as ModerationActionType] ?? k,
|
||||
})),
|
||||
];
|
||||
if (!stats) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Alert-priority HUD header */}
|
||||
<div className="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">
|
||||
<PageTransition>
|
||||
<div ref={containerRef} className="space-y-4">
|
||||
{/* Precision Sub-Header Bar */}
|
||||
<div className="mod-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span
|
||||
className={`absolute inline-flex size-full rounded-full opacity-75 ${
|
||||
pendingCount > 0 ? "animate-ping bg-ink" : "bg-signal"
|
||||
}`}
|
||||
/>
|
||||
<span
|
||||
className={`relative inline-flex size-2 rounded-full ${
|
||||
pendingCount > 0 ? "bg-ink" : "bg-signal"
|
||||
className={`h-2 w-2 rounded-full ${
|
||||
failedRatio > 0.1
|
||||
? "bg-[#f43f5e] shadow-[0_0_8px_#f43f5e]"
|
||||
: "bg-[#7170ff] shadow-[0_0_8px_#7170ff]"
|
||||
}`}
|
||||
/>
|
||||
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
|
||||
Moderation Intelligence Console
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 rounded-[5px] border border-white/[0.06] bg-white/[0.02] p-0.5">
|
||||
{(["all", "flagged", "clean"] as const).map((mode) => (
|
||||
<button
|
||||
key={mode}
|
||||
type="button"
|
||||
onClick={() => setFilterMode(mode)}
|
||||
className={`rounded-[4px] px-2.5 py-1 font-mono text-[10px] font-medium transition-all ${
|
||||
filterMode === mode
|
||||
? "bg-white/[0.08] text-white border border-white/[0.12]"
|
||||
: "text-[#8a8f98] hover:text-[#d0d6e0]"
|
||||
}`}
|
||||
>
|
||||
{mode.toUpperCase()}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
|
||||
AUTO-MOD RADAR · ALERT_QUEUE
|
||||
</h1>
|
||||
</div>
|
||||
<div
|
||||
ref={alertRef}
|
||||
className={`inline-flex items-center gap-1.5 rounded-sm px-2 py-0.5 font-mono text-[11px] font-bold uppercase ${
|
||||
pendingCount > 0
|
||||
? "border border-ink bg-ink text-canvas"
|
||||
: "bg-surface text-ink-soft"
|
||||
}`}
|
||||
>
|
||||
<span>{pendingCount > 0 ? "PENDING" : "QUEUE CLEAR"}</span>
|
||||
{pendingCount > 0 && <span>· {pendingCount}</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3 md:grid-cols-4">
|
||||
<MetricTile
|
||||
label="Total actions"
|
||||
value={formatNumber(stats.total)}
|
||||
tone="signal"
|
||||
icon={<ShieldAlert className="size-3.5" />}
|
||||
/>
|
||||
<MetricTile
|
||||
label="Executed"
|
||||
value={formatNumber(stats.executed)}
|
||||
tone="signal"
|
||||
icon={<CheckCircle2 className="size-3.5" />}
|
||||
/>
|
||||
<MetricTile
|
||||
label="Failed"
|
||||
value={formatNumber(stats.failed)}
|
||||
tone={stats.failed > 0 ? "vermilion" : "neutral"}
|
||||
icon={<XCircle className="size-3.5" />}
|
||||
/>
|
||||
<MetricTile
|
||||
label="Pending"
|
||||
value={formatNumber(stats?.pending)}
|
||||
tone={stats?.pending > 0 ? "amber" : "neutral"}
|
||||
icon={<Clock className="size-3.5" />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-5 lg:grid-cols-5">
|
||||
<div className="lg:col-span-2">
|
||||
{trends ? (
|
||||
<TopicTrends trends={trends} />
|
||||
) : (
|
||||
<SkeletonPanel rows={6} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-5">
|
||||
<LiveModerationFeed actions={liveActions} />
|
||||
</div>
|
||||
|
||||
{coverage ? (
|
||||
<CoverageTiles coverage={coverage} />
|
||||
) : (
|
||||
<SkeletonPanel rows={3} className="lg:col-span-5" />
|
||||
)}
|
||||
|
||||
<div className="lg:col-span-2">
|
||||
{domains ? (
|
||||
<ScamDomains domains={domains} />
|
||||
) : (
|
||||
<SkeletonPanel rows={6} />
|
||||
)}
|
||||
</div>
|
||||
<div className="lg:col-span-2">
|
||||
{hourly ? (
|
||||
<ModerationHeatmap hours={hourly} />
|
||||
) : (
|
||||
<SkeletonPanel rows={6} />
|
||||
)}
|
||||
</div>
|
||||
<div className="lg:col-span-1">
|
||||
{channels ? (
|
||||
<TopChannels channels={channels} />
|
||||
) : (
|
||||
<SkeletonPanel rows={6} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="lg:col-span-3">
|
||||
<CategoryDrilldown
|
||||
trends={trends ?? { categories: [], severities: [], actions: [] }}
|
||||
selected={drilldown}
|
||||
actions={categoryActions ?? []}
|
||||
loading={categoryLoading}
|
||||
onSelect={setDrilldown}
|
||||
{/* Primary Metric Grid */}
|
||||
<div className="mod-tile grid gap-3 sm:grid-cols-3">
|
||||
<MetricTile
|
||||
label="Total Audited"
|
||||
value={formatNumber(stats.total)}
|
||||
hint="Continuous LLM inspection"
|
||||
icon={<Shield className="size-4" />}
|
||||
/>
|
||||
<MetricTile
|
||||
label="Clean Executed"
|
||||
value={formatNumber(stats.executed)}
|
||||
hint={`${Math.round((executed / total) * 100)}% execution rate`}
|
||||
tone="signal"
|
||||
icon={<CheckCircle2 className="size-4" />}
|
||||
/>
|
||||
<MetricTile
|
||||
label="Pending / Failed"
|
||||
value={formatNumber(stats.pending + stats.failed)}
|
||||
hint={`${stats.failed} failed items`}
|
||||
tone={failedRatio > 0.05 ? "vermilion" : "neutral"}
|
||||
icon={<AlertTriangle className="size-4" />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<GlassPanel className="lg:col-span-2">
|
||||
<SectionHeader eyebrow="health" title="Breakdown" />
|
||||
<div className="flex items-center gap-5">
|
||||
<Donut
|
||||
segments={
|
||||
segments.length
|
||||
? segments
|
||||
: [
|
||||
{
|
||||
value: 1,
|
||||
color: "var(--color-ink-faint)",
|
||||
label: "none",
|
||||
},
|
||||
]
|
||||
}
|
||||
centerLabel={`${Math.round(failedRate)}%`}
|
||||
centerSub="fail rate"
|
||||
{/* Live Moderation Stream */}
|
||||
<div className="mod-tile">
|
||||
<GlassPanel>
|
||||
<SectionHeader
|
||||
eyebrow="Realtime Feed"
|
||||
title="Live Stream Audit Log"
|
||||
/>
|
||||
<div className="flex-1 space-y-2 text-sm">
|
||||
{Object.entries(byAction).map(([k, v]) => {
|
||||
const count = typeof v === "number" ? v : null;
|
||||
return (
|
||||
<div key={k} className="flex items-center gap-2.5">
|
||||
<span className="text-ink-soft">
|
||||
{ACTION_ICON[k as ModerationActionType]}
|
||||
</span>
|
||||
<span className="flex-1 text-ink-soft">
|
||||
{ACTION_LABEL[k as ModerationActionType] ?? k}
|
||||
</span>
|
||||
{count !== null && (
|
||||
<span className="mono text-ink">{count}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{Object.keys(byAction).length === 0 && (
|
||||
<div className="text-xs text-ink-faint">
|
||||
No actions recorded yet.
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-3">
|
||||
<LiveModerationFeed
|
||||
actions={
|
||||
actions?.filter((r) => {
|
||||
if (filterMode === "flagged") return r.status === "failed";
|
||||
if (filterMode === "clean") return r.status === "executed";
|
||||
return true;
|
||||
}) ?? []
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
|
||||
<GlassPanel className="lg:col-span-3">
|
||||
<SectionHeader
|
||||
eyebrow="filter"
|
||||
title="Action log"
|
||||
action={
|
||||
<div className="flex items-center gap-2">
|
||||
<Filter className="size-3.5 text-ink-faint" />
|
||||
<Select
|
||||
value={typeFilter}
|
||||
onChange={setTypeFilter}
|
||||
options={typeOpts}
|
||||
size="sm"
|
||||
className="w-36"
|
||||
/>
|
||||
<Select
|
||||
value={statusFilter}
|
||||
onChange={setStatusFilter}
|
||||
options={statusOpts}
|
||||
size="sm"
|
||||
className="w-32"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
downloadCsv(
|
||||
"moderation-actions.csv",
|
||||
(actions ?? []).map((a) => ({
|
||||
id: a.id,
|
||||
user: a.username ?? a.user_id,
|
||||
action_type: a.action_type,
|
||||
status: a.status,
|
||||
severity: a.severity ?? "",
|
||||
categories: (a.categories ?? []).join("|"),
|
||||
reason: a.reason ?? "",
|
||||
created_at: a.created_at
|
||||
? new Date(a.created_at).toISOString()
|
||||
: "",
|
||||
})),
|
||||
)
|
||||
}
|
||||
className="rounded-full border border-hairline bg-white/[0.03] px-3 py-1 text-xs text-ink-soft transition-colors hover:bg-white/[0.06]"
|
||||
title="Download moderation actions as CSV"
|
||||
>
|
||||
CSV
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
<div className="max-h-[60vh] space-y-1.5 overflow-y-auto pr-1">
|
||||
{(actions ?? []).map((a, i) => (
|
||||
<ActionRow key={a.id} a={a} index={i} />
|
||||
))}
|
||||
{(actions ?? []).length === 0 && (
|
||||
<div className="py-10 text-center text-xs text-ink-faint">
|
||||
No matching actions.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ActionRow({ a, index = 0 }: { a: ModerationAction; index?: number }) {
|
||||
const tone =
|
||||
a.status === "executed"
|
||||
? "signal"
|
||||
: a.status === "failed"
|
||||
? "vermilion"
|
||||
: "amber";
|
||||
const icon = ACTION_ICON[a.action_type] ?? (
|
||||
<AlertTriangle className="size-3.5" />
|
||||
);
|
||||
// Map moderation severity → design-system tone (reuse aiTone with a
|
||||
// severity→status projection so "none" reads as clean/signal).
|
||||
const severityTone =
|
||||
a.severity == null
|
||||
? null
|
||||
: aiTone(
|
||||
a.severity === "none"
|
||||
? "clean"
|
||||
: a.severity === "low" || a.severity === "medium"
|
||||
? "warn"
|
||||
: "flagged",
|
||||
);
|
||||
return (
|
||||
<div
|
||||
className="animate-stagger flex items-start gap-3 rounded-[10px] border border-hairline bg-white/[0.03] p-3"
|
||||
style={staggerDelay(index)}
|
||||
>
|
||||
<span
|
||||
className={`mt-0.5 ${tone === "vermilion" ? "text-vermilion" : tone === "amber" ? "text-amber" : "text-signal"}`}
|
||||
>
|
||||
{icon}
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-semibold text-ink">
|
||||
{a.username ?? "unknown"}
|
||||
</span>
|
||||
<Badge tone={tone}>{a.status}</Badge>
|
||||
<span className="mono ml-auto text-[0.6rem] text-ink-faint">
|
||||
{formatRelativeTime(a.created_at)}
|
||||
</span>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
{a.reason && (
|
||||
<div className="mt-0.5 text-xs text-ink-soft">“{a.reason}”</div>
|
||||
)}
|
||||
{severityTone && a.severity && (
|
||||
<div className="mt-1 flex flex-wrap items-center gap-1">
|
||||
<Badge tone={severityTone}>{a.severity}</Badge>
|
||||
{a.confidence != null && (
|
||||
<span className="mono text-[0.6rem] text-ink-faint">
|
||||
conf {(a.confidence * 100).toFixed(0)}%
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Heatmap Section */}
|
||||
{hourly && hourly.length > 0 && (
|
||||
<div className="mod-tile">
|
||||
<GlassPanel>
|
||||
<SectionHeader
|
||||
eyebrow="Distribution"
|
||||
title="Hourly Incident Heatmap"
|
||||
/>
|
||||
<div className="mt-3">
|
||||
<ModerationHeatmap hours={hourly} />
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
)}
|
||||
{a.flags?.length ? (
|
||||
<div className="mt-1 flex flex-wrap gap-1">
|
||||
{a.flags.slice(0, 6).map((f) => (
|
||||
<Badge key={f} tone="amber">
|
||||
{f}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
{a.evidence?.length ? (
|
||||
<div className="mt-1 border-l-2 border-hairline pl-2 text-xs text-ink-faint">
|
||||
“{a.evidence[0]}”
|
||||
</div>
|
||||
) : null}
|
||||
{a.executed_by && (
|
||||
<div className="mono mt-0.5 text-[0.6rem] text-ink-faint">
|
||||
by {a.executed_by}
|
||||
{a.executed_at ? ` · ${formatRelativeTime(a.executed_at)}` : ""}
|
||||
</div>
|
||||
)}
|
||||
{a.content && (
|
||||
<div className="mt-1 line-clamp-2 rounded-[8px] bg-white/[0.03] px-2 py-1 text-xs text-ink-faint">
|
||||
{a.content}
|
||||
</div>
|
||||
)}
|
||||
{a.error && (
|
||||
<div className="mt-1 text-xs text-vermilion">{a.error}</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</PageTransition>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
AudioWaveform,
|
||||
Disc,
|
||||
Headphones,
|
||||
Mic,
|
||||
MicOff,
|
||||
@@ -16,6 +18,7 @@ import { Button, GlassPanel, toast } from "@/components/primitives";
|
||||
import {
|
||||
EmptyState,
|
||||
ErrorState,
|
||||
PageTransition,
|
||||
SectionHeader,
|
||||
SkeletonPanel,
|
||||
} from "@/components/shared";
|
||||
@@ -60,13 +63,12 @@ export function VoiceView({
|
||||
const [channelId, setChannelId] = useState<string | null>(
|
||||
initialStatus?.activeChannelId ?? null,
|
||||
);
|
||||
const [micOn, setMicOn] = useState(false);
|
||||
const [micVol, setMicVol] = useState(100);
|
||||
const [listenVol, setListenVol] = useState(75);
|
||||
|
||||
const hudRef = useStaggerReveal<HTMLDivElement>(".hud-tile", {
|
||||
stagger: 0.06,
|
||||
y: 14,
|
||||
const containerRef = useStaggerReveal<HTMLDivElement>(".voice-tile", {
|
||||
stagger: 0.04,
|
||||
y: 8,
|
||||
dependencies: [status],
|
||||
});
|
||||
|
||||
@@ -76,278 +78,203 @@ export function VoiceView({
|
||||
}, [subscribe, ws]);
|
||||
|
||||
useEffect(() => {
|
||||
if (status?.connected) ambient.set("signal", 0.55, "voice live");
|
||||
else ambient.set("vermilion", 0.35, "voice idle");
|
||||
if (status?.connected) ambient.set("signal", 0.45, "voice active");
|
||||
else ambient.set("vermilion", 0.25, "voice disconnected");
|
||||
}, [status?.connected, ambient]);
|
||||
|
||||
if (error && !status)
|
||||
return <ErrorState error={error} onRetry={() => void mutate()} />;
|
||||
if (!status && isLoading)
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<SkeletonPanel rows={2} />
|
||||
<div className="grid gap-5 lg:grid-cols-3">
|
||||
<SkeletonPanel className="lg:col-span-2" rows={4} />
|
||||
<SkeletonPanel rows={4} />
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<SkeletonPanel rows={3} />
|
||||
<SkeletonPanel rows={5} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const connected = status?.connected ?? false;
|
||||
const listenBars = Array.from(listen.levels.values()).slice(0, 32);
|
||||
const micBars = mic.micLevel
|
||||
? Array.from({ length: 12 }, (_, i) =>
|
||||
Math.max(
|
||||
0.08,
|
||||
Math.min(1, mic.micLevel * (1 - i * 0.06) + (i % 3) * 0.05),
|
||||
),
|
||||
)
|
||||
: [];
|
||||
|
||||
const onConnect = async () => {
|
||||
if (!guildId || !channelId) {
|
||||
toast({ title: "Pick a guild + channel", tone: "vermilion" });
|
||||
toast({ title: "Select target channel", tone: "vermilion" });
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await connect.mutateAsync({ guildId, channelId });
|
||||
toast({ title: "Connected to voice", tone: "signal" });
|
||||
toast({ title: "Connected to voice channel", tone: "signal" });
|
||||
} catch (e) {
|
||||
toast({
|
||||
title: "Connect failed",
|
||||
title: "Connection failed",
|
||||
description: String(e),
|
||||
tone: "vermilion",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const onMic = async (on: boolean) => {
|
||||
const onDisconnect = async () => {
|
||||
try {
|
||||
await mic.mutateAsync(on);
|
||||
setMicOn(on);
|
||||
await disconnect.mutateAsync();
|
||||
toast({ title: "Disconnected from voice", tone: "neutral" });
|
||||
} catch (e) {
|
||||
toast({ title: "Mic error", description: String(e), tone: "vermilion" });
|
||||
toast({
|
||||
title: "Disconnect failed",
|
||||
description: String(e),
|
||||
tone: "vermilion",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<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">
|
||||
<PageTransition>
|
||||
<div ref={containerRef} className="space-y-4">
|
||||
{/* Precision Sub-Header Bar */}
|
||||
<div className="voice-tile flex flex-wrap items-center justify-between gap-3 border-b border-white/[0.06] pb-3">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span
|
||||
className={`absolute inline-flex size-full rounded-full opacity-75 ${
|
||||
connected ? "animate-ping bg-signal" : "bg-vermilion"
|
||||
}`}
|
||||
/>
|
||||
<span
|
||||
className={`relative inline-flex size-2 rounded-full ${
|
||||
connected ? "bg-signal" : "bg-vermilion"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<h1 className="font-mono text-xs font-semibold tracking-widest text-ink uppercase">
|
||||
VOICE MATRIX · LIVE_LINK
|
||||
</h1>
|
||||
</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">LINK:</span>
|
||||
<span
|
||||
className={`font-bold ${connected ? "text-signal" : "text-vermilion"}`}
|
||||
>
|
||||
{connected ? "ESTABLISHED" : "STANDBY"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<GlassPanel className="hud-tile">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<GuildChannelPicker
|
||||
mode="voice"
|
||||
guildsInitial={initialGuilds}
|
||||
guildId={guildId}
|
||||
channelId={channelId}
|
||||
onChange={(g, c) => {
|
||||
setGuildId(g);
|
||||
setChannelId(c);
|
||||
}}
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
{connected ? (
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
onClick={() => disconnect.mutate()}
|
||||
disabled={disconnect.isPending}
|
||||
>
|
||||
<PhoneOff className="size-4" /> Disconnect
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={onConnect}
|
||||
disabled={connect.isPending}
|
||||
>
|
||||
<Radio className="size-4" /> Connect
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
variant={micOn ? "primary" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => onMic(!micOn)}
|
||||
disabled={mic.isPending}
|
||||
aria-pressed={micOn}
|
||||
>
|
||||
{micOn ? <Mic className="size-4" /> : <MicOff className="size-4" />}
|
||||
{micOn ? "Mic live" : "Push-to-talk"}
|
||||
</Button>
|
||||
{micOn && (
|
||||
<div
|
||||
className="flex items-center gap-2 rounded-[10px] border border-signal/30 bg-signal/[0.06] px-3 py-1.5"
|
||||
role="status"
|
||||
aria-label="Microphone level meter"
|
||||
>
|
||||
<Mic className="size-4 text-signal" />
|
||||
<Equalizer bars={micBars} className="w-28" />
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
variant={listen.active ? "primary" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => listen.toggle(!listen.active)}
|
||||
>
|
||||
{listen.active ? (
|
||||
<Headphones className="size-4" />
|
||||
) : (
|
||||
<Volume2 className="size-4" />
|
||||
)}
|
||||
{listen.active ? "Listening" : "Listen in"}
|
||||
</Button>
|
||||
{listen.active && (
|
||||
<div className="flex items-center gap-2 rounded-[10px] border border-hairline bg-white/5 px-3 py-1.5">
|
||||
<Waves className="size-4 text-signal" />
|
||||
<Equalizer bars={listenBars} className="w-40" />
|
||||
</div>
|
||||
)}
|
||||
<div className="ml-auto flex items-center gap-3">
|
||||
<label className="flex items-center gap-2 text-xs text-ink-faint">
|
||||
<MicOff className="size-3.5" />
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={100}
|
||||
value={micVol}
|
||||
onChange={(e) => {
|
||||
const v = Number(e.target.value);
|
||||
setMicVol(v);
|
||||
mic.setVolume(v);
|
||||
}}
|
||||
aria-label="Mic transmit volume"
|
||||
className="h-1 w-24 cursor-pointer accent-[var(--color-signal)]"
|
||||
/>
|
||||
<span className="mono w-8 text-right">{micVol}%</span>
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-xs text-ink-faint">
|
||||
<Volume2 className="size-3.5" />
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={100}
|
||||
value={listenVol}
|
||||
onChange={(e) => {
|
||||
const v = Number(e.target.value);
|
||||
setListenVol(v);
|
||||
listen.setVolume(v);
|
||||
}}
|
||||
aria-label="Listen volume"
|
||||
className="h-1 w-24 cursor-pointer accent-[var(--color-signal)]"
|
||||
/>
|
||||
<span className="mono w-8 text-right">{listenVol}%</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-3">
|
||||
<GlassPanel className="hud-tile lg:col-span-2">
|
||||
<SectionHeader
|
||||
eyebrow="stage · radar"
|
||||
title="Live speakers"
|
||||
action={
|
||||
<span className="mono text-xs text-ink-faint">
|
||||
{speakers.length} present
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
{speakers.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={<MicOff className="size-7" />}
|
||||
title={connected ? "Silent right now" : "Not connected"}
|
||||
description={
|
||||
className={`h-2 w-2 rounded-full ${
|
||||
connected
|
||||
? "Speakers appear as they talk."
|
||||
: "Connect to a voice channel to see presence."
|
||||
}
|
||||
? "bg-[#10b981] shadow-[0_0_8px_#10b981]"
|
||||
: "bg-[#8a8f98]"
|
||||
}`}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<VoiceStage speakers={speakers} />
|
||||
<div className="mt-2 flex flex-wrap justify-center gap-2">
|
||||
{speakers.map((sp) => (
|
||||
<span
|
||||
key={sp.userId}
|
||||
className={`mono flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs ${
|
||||
sp.speaking
|
||||
? "border-signal/40 bg-signal/10 text-signal"
|
||||
: "border-hairline bg-white/5 text-ink-soft"
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`size-1.5 rounded-full ${sp.speaking ? "bg-signal animate-breathe" : "bg-ink-faint"}`}
|
||||
/>
|
||||
{sp.username}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</GlassPanel>
|
||||
<h1 className="font-mono text-xs font-semibold tracking-wide text-[#f7f8f8] uppercase">
|
||||
Voice Spectrum & Stage Controls
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 font-mono text-[11px]">
|
||||
<span className="text-[#8a8f98]">STAGE:</span>
|
||||
<span
|
||||
className={`rounded px-1.5 py-0.5 font-medium border ${
|
||||
connected
|
||||
? "border-[#10b981]/30 bg-[#10b981]/10 text-[#10b981]"
|
||||
: "border-white/[0.06] bg-white/[0.02] text-[#8a8f98]"
|
||||
}`}
|
||||
>
|
||||
{connected ? "LIVE_BRIDGE" : "OFFLINE"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<GlassPanel className="hud-tile">
|
||||
<SectionHeader eyebrow="links" title="Connections" />
|
||||
<div className="space-y-2">
|
||||
{(status?.connections ?? []).map((c) => (
|
||||
<div
|
||||
key={`${c.guildId}-${c.channelId}`}
|
||||
className="flex items-center gap-2 rounded-[10px] border border-hairline bg-white/5 px-3 py-2 text-sm"
|
||||
>
|
||||
<span className="size-2 rounded-full bg-signal" />
|
||||
<span className="flex-1 truncate text-ink-soft">
|
||||
{c.channelName}
|
||||
</span>
|
||||
<span className="mono text-[0.6rem] text-ink-faint">
|
||||
{new Date(c.connectedAt).toLocaleTimeString()}
|
||||
</span>
|
||||
{/* Channel Router Stage */}
|
||||
<div className="voice-tile">
|
||||
<GlassPanel className="p-4">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div className="flex-1 min-w-[240px]">
|
||||
<GuildChannelPicker
|
||||
guildId={guildId}
|
||||
channelId={channelId}
|
||||
guildsInitial={initialGuilds}
|
||||
onChange={(g, c) => {
|
||||
setGuildId(g);
|
||||
setChannelId(c);
|
||||
}}
|
||||
mode="voice"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{(status?.connections ?? []).length === 0 && (
|
||||
<div className="py-6 text-center text-xs text-ink-faint">
|
||||
No active links
|
||||
<div className="flex items-center gap-2">
|
||||
{connected ? (
|
||||
<Button
|
||||
variant="danger"
|
||||
size="md"
|
||||
onClick={onDisconnect}
|
||||
className="gap-1.5"
|
||||
>
|
||||
<PhoneOff className="size-3.5" />
|
||||
Disconnect
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="primary"
|
||||
size="md"
|
||||
onClick={onConnect}
|
||||
className="gap-1.5"
|
||||
>
|
||||
<Radio className="size-3.5" />
|
||||
Connect Bridge
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-3 rounded-[10px] border border-hairline bg-white/5 px-3 py-2 text-xs text-ink-soft">
|
||||
<span className="mono text-ink-faint">channel</span>{" "}
|
||||
{status?.activeChannelName ?? "—"}
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
|
||||
{/* Voice Stage Grid */}
|
||||
<div className="grid gap-3 lg:grid-cols-3">
|
||||
<GlassPanel className="voice-tile lg:col-span-2">
|
||||
<SectionHeader
|
||||
eyebrow="Participants"
|
||||
title="Active Stage Members"
|
||||
/>
|
||||
<div className="mt-4 min-h-[160px]">
|
||||
<VoiceStage speakers={speakers} />
|
||||
</div>
|
||||
</GlassPanel>
|
||||
|
||||
<GlassPanel className="voice-tile flex flex-col justify-between">
|
||||
<div>
|
||||
<SectionHeader
|
||||
eyebrow="Telemetry"
|
||||
title="Input / Output Mix"
|
||||
/>
|
||||
<div className="mt-4 space-y-4">
|
||||
<div>
|
||||
<div className="flex justify-between text-xs font-medium text-[#d0d6e0]">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Mic className="size-3.5 text-[#7170ff]" />
|
||||
Mic Sensitivity
|
||||
</span>
|
||||
<span className="font-mono text-[11px] text-[#8a8f98]">
|
||||
{micVol}%
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={150}
|
||||
value={micVol}
|
||||
onChange={(e) => {
|
||||
const v = Number(e.target.value);
|
||||
setMicVol(v);
|
||||
mic.setVolume(v / 100);
|
||||
}}
|
||||
className="mt-2 h-1.5 w-full appearance-none rounded-full bg-white/[0.08] accent-[#7170ff]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex justify-between text-xs font-medium text-[#d0d6e0]">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Volume2 className="size-3.5 text-[#10b981]" />
|
||||
Monitor Output
|
||||
</span>
|
||||
<span className="font-mono text-[11px] text-[#8a8f98]">
|
||||
{listenVol}%
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={150}
|
||||
value={listenVol}
|
||||
onChange={(e) => {
|
||||
const v = Number(e.target.value);
|
||||
setListenVol(v);
|
||||
listen.setVolume(v / 100);
|
||||
}}
|
||||
className="mt-2 h-1.5 w-full appearance-none rounded-full bg-white/[0.08] accent-[#10b981]"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 border-t border-white/[0.06] pt-3">
|
||||
<div className="font-mono text-[10px] text-[#8a8f98]">
|
||||
CODEC: OPUS 48KHZ · LOW_LATENCY
|
||||
</div>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageTransition>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,88 +3,98 @@
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/*
|
||||
* GMW — Ambient Ops Console design system.
|
||||
* GMW — Linear Precision Clean Dark Design System
|
||||
*
|
||||
* A signal-driven, immersive ops aesthetic. Hierarchy comes from scale/weight
|
||||
* and tonal surface blocks, not borders. The whole app sits behind a live
|
||||
* WebGL haze (see components/ambient) tinted by a semantic signal:
|
||||
* lime = OK / live
|
||||
* amber = warn
|
||||
* vermilion = flag / danger
|
||||
* Inspired by Linear's ultra-precise, dark-mode native interface.
|
||||
* Built on achromatic luminance hierarchy, near-black canvas (#08090a),
|
||||
* ultra-crisp hairline borders, subtle indigo/violet accents (#5e6ad2 / #7170ff),
|
||||
* and buttery smooth GSAP-driven micro-interactions.
|
||||
*/
|
||||
|
||||
@theme {
|
||||
/* ── Surfaces (dark-first; light overrides below) ── */
|
||||
--color-canvas: oklch(0.12 0.014 70);
|
||||
--color-canvas-2: oklch(0.16 0.02 70);
|
||||
--color-surface: oklch(0.2 0.022 70 / 0.45);
|
||||
--color-surface-2: oklch(0.26 0.024 70 / 0.45);
|
||||
/* ── Canvas & Surface Stack (Luminance Stacking) ── */
|
||||
--color-canvas: #08090a;
|
||||
--color-canvas-2: #0f1011;
|
||||
--color-surface: rgba(255, 255, 255, 0.035);
|
||||
--color-surface-2: rgba(255, 255, 255, 0.06);
|
||||
--color-surface-elevated: #191a1b;
|
||||
--color-surface-hover: rgba(255, 255, 255, 0.08);
|
||||
|
||||
/* ── Ink ── */
|
||||
--color-ink: oklch(0.95 0.008 75);
|
||||
--color-ink-soft: oklch(0.66 0.02 75);
|
||||
--color-ink-faint: oklch(0.5 0.02 75);
|
||||
/* ── Typography & Ink ── */
|
||||
--color-ink: #f7f8f8;
|
||||
--color-ink-soft: #d0d6e0;
|
||||
--color-ink-muted: #8a8f98;
|
||||
--color-ink-faint: #62666d;
|
||||
|
||||
/* ── Structural ── */
|
||||
--color-hairline: oklch(1 0 0 / 0.1);
|
||||
/* ── Hairline Structural Borders ── */
|
||||
--color-hairline: rgba(255, 255, 255, 0.08);
|
||||
--color-hairline-subtle: rgba(255, 255, 255, 0.05);
|
||||
--color-hairline-focus: rgba(255, 255, 255, 0.16);
|
||||
--hairline-w: 1px;
|
||||
|
||||
/* ── Semantic signals (monochrome: tone = luminance steps) ── */
|
||||
--color-signal: oklch(0.97 0 0);
|
||||
--color-signal-ink: oklch(0.1 0 0);
|
||||
--color-signal-glow: oklch(1 0 0 / 0.35);
|
||||
--color-amber: oklch(0.72 0 0);
|
||||
--color-vermilion: oklch(0.85 0 0);
|
||||
--color-vermilion-glow: oklch(1 0 0 / 0.45);
|
||||
/* ── Brand & Accent Signals (Subdued Precision) ── */
|
||||
--color-brand: #5e6ad2;
|
||||
--color-brand-accent: #7170ff;
|
||||
--color-brand-hover: #828fff;
|
||||
--color-brand-subtle: rgba(94, 106, 210, 0.15);
|
||||
|
||||
--color-ring: var(--color-signal);
|
||||
--color-signal: #7170ff;
|
||||
--color-signal-ink: #ffffff;
|
||||
--color-signal-glow: rgba(113, 112, 255, 0.25);
|
||||
|
||||
/* ── Fonts ── */
|
||||
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
|
||||
--font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
|
||||
/* Semantic status colors (crisp, purposeful) */
|
||||
--color-status-success: #10b981;
|
||||
--color-status-success-subtle: rgba(16, 185, 129, 0.15);
|
||||
--color-amber: #f59e0b;
|
||||
--color-amber-subtle: rgba(245, 158, 11, 0.15);
|
||||
--color-vermilion: #f43f5e;
|
||||
--color-vermilion-subtle: rgba(244, 63, 94, 0.15);
|
||||
--color-vermilion-glow: rgba(244, 63, 94, 0.3);
|
||||
|
||||
/* ── Radii ── */
|
||||
--radius-r: 16px;
|
||||
--radius-r-panel: 12px;
|
||||
--radius-r-control: 9px;
|
||||
--color-ring: var(--color-brand-accent);
|
||||
|
||||
/* ── Typography Stack ── */
|
||||
--font-sans: var(--font-inter), "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
--font-mono: var(--font-jetbrains-mono), "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
--font-display: var(--font-inter), "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
|
||||
/* ── Radii (Refined, tighter precision) ── */
|
||||
--radius-r: 10px;
|
||||
--radius-r-panel: 8px;
|
||||
--radius-r-control: 6px;
|
||||
--radius-r-pill: 9999px;
|
||||
}
|
||||
|
||||
/* ── Light theme overrides ── */
|
||||
/* ── Light Theme Fallbacks ── */
|
||||
.light {
|
||||
color-scheme: light;
|
||||
--color-canvas: oklch(0.96 0.012 80);
|
||||
--color-canvas-2: oklch(0.92 0.014 80);
|
||||
--color-surface: oklch(1 0 0 / 0.7);
|
||||
--color-surface-2: oklch(1 0 0 / 0.5);
|
||||
--color-canvas: #f7f8f8;
|
||||
--color-canvas-2: #f3f4f5;
|
||||
--color-surface: rgba(0, 0, 0, 0.03);
|
||||
--color-surface-2: rgba(0, 0, 0, 0.05);
|
||||
--color-surface-elevated: #ffffff;
|
||||
--color-surface-hover: rgba(0, 0, 0, 0.06);
|
||||
|
||||
--color-ink: oklch(0.22 0.02 70);
|
||||
--color-ink-soft: oklch(0.46 0.02 70);
|
||||
--color-ink-faint: oklch(0.6 0.02 70);
|
||||
--color-ink: #171717;
|
||||
--color-ink-soft: #404040;
|
||||
--color-ink-muted: #737373;
|
||||
--color-ink-faint: #a3a3a3;
|
||||
|
||||
--color-hairline: oklch(0.22 0.02 70 / 0.12);
|
||||
}
|
||||
|
||||
/* Light-theme scrollbar + selection tuned for pale canvas */
|
||||
.light ::-webkit-scrollbar-thumb {
|
||||
background: oklch(0.22 0.02 70 / 0.2);
|
||||
}
|
||||
.light ::-webkit-scrollbar-thumb:hover {
|
||||
background: oklch(0.22 0.02 70 / 0.34);
|
||||
}
|
||||
.light ::selection {
|
||||
background: oklch(0.2 0 0 / 0.9);
|
||||
color: oklch(1 0 0);
|
||||
--color-hairline: rgba(0, 0, 0, 0.08);
|
||||
--color-hairline-subtle: rgba(0, 0, 0, 0.04);
|
||||
--color-hairline-focus: rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-transparent;
|
||||
font-feature-settings: "cv01", "ss03";
|
||||
}
|
||||
|
||||
html {
|
||||
@apply font-sans antialiased scroll-smooth;
|
||||
background-color: var(--color-canvas);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -93,72 +103,87 @@
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--color-signal-glow);
|
||||
color: inherit;
|
||||
background: rgba(113, 112, 255, 0.28);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
/* Linear-style minimalist slim scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: oklch(1 0 0 / 0.14);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-radius: 9999px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: oklch(1 0 0 / 0.26);
|
||||
background: rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-signal);
|
||||
outline: 2px solid var(--color-brand-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Glass panel — the workhorse container. Floating, blurred, faint glow. */
|
||||
/* Precision Surface Panel (Linear Card) */
|
||||
.glass {
|
||||
background: var(--color-surface);
|
||||
border: var(--hairline-w) solid var(--color-hairline);
|
||||
border: 1px solid var(--color-hairline);
|
||||
border-radius: var(--radius-r);
|
||||
backdrop-filter: blur(18px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(140%);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
box-shadow:
|
||||
0 1px 0 0 oklch(1 0 0 / 0.06) inset,
|
||||
0 18px 50px -28px oklch(0 0 0 / 0.8);
|
||||
0 1px 0 0 rgba(255, 255, 255, 0.03) inset,
|
||||
0 12px 32px -16px rgba(0, 0, 0, 0.7);
|
||||
transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.glass-2 {
|
||||
background: var(--color-surface-2);
|
||||
border: var(--hairline-w) solid var(--color-hairline);
|
||||
border: 1px solid var(--color-hairline-subtle);
|
||||
border-radius: var(--radius-r-panel);
|
||||
backdrop-filter: blur(14px) saturate(130%);
|
||||
-webkit-backdrop-filter: blur(14px) saturate(130%);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
/* Section label — small uppercase mono eyebrow */
|
||||
/* Linear-style subtle interactive hover card */
|
||||
.linear-card {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: var(--radius-r-panel);
|
||||
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.linear-card:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-color: rgba(255, 255, 255, 0.12);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Precision Eyebrow Header */
|
||||
.eyebrow {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.68rem;
|
||||
letter-spacing: 0.18em;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-ink-faint);
|
||||
color: var(--color-ink-muted);
|
||||
}
|
||||
|
||||
/* Micro-Pill Tag */
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.22rem 0.7rem;
|
||||
gap: 0.35rem;
|
||||
padding: 0.18rem 0.55rem;
|
||||
border-radius: var(--radius-r-pill);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
background: oklch(1 0 0 / 0.06);
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border: 1px solid var(--color-hairline);
|
||||
color: var(--color-ink-soft);
|
||||
}
|
||||
@@ -166,294 +191,83 @@
|
||||
.mono {
|
||||
font-family: var(--font-mono);
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
/* Display Typography (Compressed Linear-style tracking) */
|
||||
.display {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
line-height: 0.96;
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.035em;
|
||||
line-height: 1.05;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-signal { color: var(--color-signal); }
|
||||
.text-signal { color: var(--color-brand-accent); }
|
||||
.text-brand { color: var(--color-brand-accent); }
|
||||
.text-amber { color: var(--color-amber); }
|
||||
.text-vermilion { color: var(--color-vermilion); }
|
||||
.text-success { color: var(--color-status-success); }
|
||||
.text-ink-soft { color: var(--color-ink-soft); }
|
||||
.text-ink-muted { color: var(--color-ink-muted); }
|
||||
.text-ink-faint { color: var(--color-ink-faint); }
|
||||
|
||||
/* Fluid hero title — never overflows on small screens. */
|
||||
.hero-clamp { font-size: clamp(1.9rem, 1.2rem + 4vw, 2.6rem); }
|
||||
.hero-clamp {
|
||||
font-size: clamp(1.85rem, 1.2rem + 3.5vw, 2.5rem);
|
||||
letter-spacing: -0.04em;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.glow-signal {
|
||||
text-shadow: 0 0 22px var(--color-signal-glow);
|
||||
}
|
||||
.glow-vermilion {
|
||||
text-shadow: 0 0 22px var(--color-vermilion-glow);
|
||||
}
|
||||
|
||||
/* animated scan line for live headers */
|
||||
.scan-line {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.scan-line::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--color-signal) 25%,
|
||||
var(--color-signal) 75%,
|
||||
transparent
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: scan 2.8s linear infinite;
|
||||
opacity: 0.7;
|
||||
text-shadow: 0 0 16px var(--color-signal-glow);
|
||||
}
|
||||
|
||||
.ring-focus {
|
||||
transition: box-shadow 0.18s ease, border-color 0.18s ease;
|
||||
transition: box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.18s ease;
|
||||
}
|
||||
.ring-focus:hover {
|
||||
box-shadow: 0 0 0 1px var(--color-signal-glow);
|
||||
border-color: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
.ring-focus:focus-visible {
|
||||
box-shadow: 0 0 0 2px var(--color-brand-accent);
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══ Micro Navigation Elements ═══ */
|
||||
.nav-dock-item {
|
||||
position: relative;
|
||||
transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
.nav-dock-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
.nav-dock-item.is-active {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #ffffff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* ── Keyframes ── */
|
||||
@keyframes scan {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
@keyframes eq {
|
||||
0%, 100% { transform: scaleY(0.25); }
|
||||
30% { transform: scaleY(1); }
|
||||
60% { transform: scaleY(0.5); }
|
||||
}
|
||||
@keyframes fade-up {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes spin-disc {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes pulse-ring {
|
||||
0% { transform: scale(0.85); opacity: 1; }
|
||||
100% { transform: scale(2.6); opacity: 0; }
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
@keyframes breathe {
|
||||
0%, 100% { opacity: 0.55; }
|
||||
50% { opacity: 1; }
|
||||
0% { transform: scale(0.85); opacity: 0.8; }
|
||||
100% { transform: scale(2.2); opacity: 0; }
|
||||
}
|
||||
|
||||
.animate-eq {
|
||||
animation: eq 0.9s ease-in-out infinite;
|
||||
transform-origin: bottom;
|
||||
}
|
||||
.animate-spin-disc { animation: spin-disc 9s linear infinite; }
|
||||
.animate-spin-disc.paused { animation-play-state: paused; }
|
||||
.animate-pulse-ring { animation: pulse-ring 1.6s ease-out infinite; }
|
||||
.animate-shimmer {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
oklch(0.86 0.19 128 / 0.1),
|
||||
transparent
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.6s infinite;
|
||||
}
|
||||
.animate-breathe { animation: breathe 3.5s ease-in-out infinite; }
|
||||
|
||||
/* Page-enter: subtle rise+settle. Respect reduced-motion (handled globally). */
|
||||
.animate-fade-up {
|
||||
animation: fade-up 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
/* List stagger: each child rises in sequence. Pair with inline
|
||||
style={{ animationDelay }} set via staggerDelay(). */
|
||||
.animate-stagger {
|
||||
animation: fade-up 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
/* Toast: slide up + settle from the dock edge. */
|
||||
.animate-toast-in {
|
||||
animation: toast-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
@keyframes toast-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(14px) scale(0.98);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══ Game-menu nav (monochrome) ═══
|
||||
Corner brackets + one-shot light sweep + staggered entrance.
|
||||
Pure transform/opacity — compositor only. */
|
||||
|
||||
.game-nav-item {
|
||||
--i: 0;
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
animation: nav-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
animation-delay: calc(var(--i) * 45ms);
|
||||
}
|
||||
/* corner brackets on hover/active */
|
||||
.game-nav-item::before,
|
||||
.game-nav-item::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.game-nav-item::before {
|
||||
border-left: 2px solid currentColor;
|
||||
border-top: 2px solid currentColor;
|
||||
border-top-left-radius: 13px;
|
||||
clip-path: polygon(0 0, 62% 0, 62% 30%, 30% 30%, 30% 100%, 0 100%);
|
||||
}
|
||||
.game-nav-item::after {
|
||||
border-right: 2px solid currentColor;
|
||||
border-bottom: 2px solid currentColor;
|
||||
border-bottom-right-radius: 13px;
|
||||
clip-path: polygon(100% 100%, 38% 100%, 38% 70%, 70% 70%, 70% 0, 100% 0);
|
||||
}
|
||||
.game-nav-item:hover::before,
|
||||
.game-nav-item:hover::after,
|
||||
.game-nav-item.is-active::before,
|
||||
.game-nav-item.is-active::after {
|
||||
opacity: 1;
|
||||
}
|
||||
/* one-shot sweep */
|
||||
.game-nav-item .game-sweep {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
.game-nav-item .game-sweep > i {
|
||||
position: absolute;
|
||||
top: -20%;
|
||||
bottom: -20%;
|
||||
width: 34%;
|
||||
left: -60%;
|
||||
background: linear-gradient(
|
||||
105deg,
|
||||
transparent,
|
||||
oklch(1 0 0 / 0.16),
|
||||
transparent
|
||||
);
|
||||
transform: skewX(-14deg);
|
||||
}
|
||||
.game-nav-item:hover .game-sweep > i,
|
||||
.game-nav-item.is-active .game-sweep > i {
|
||||
animation: sweep-x 0.55s ease-out both;
|
||||
}
|
||||
/* active triangle marker (game cursor) */
|
||||
.game-marker {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-block: 7px solid transparent;
|
||||
border-left: 11px solid currentColor;
|
||||
transform: translateY(-50%);
|
||||
filter: drop-shadow(0 0 6px var(--color-signal-glow));
|
||||
animation: marker-nudge 1.6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes marker-nudge {
|
||||
0%, 100% { transform: translateY(-50%) translateX(0); }
|
||||
50% { transform: translateY(-50%) translateX(3px); }
|
||||
}
|
||||
|
||||
@keyframes sweep-x {
|
||||
from { left: -60%; }
|
||||
to { left: 130%; }
|
||||
}
|
||||
@keyframes nav-in {
|
||||
from { opacity: 0; transform: translateX(-10px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
|
||||
/* ── Game frame: panel with cut corners + drawn-in edge lines ── */
|
||||
.game-frame {
|
||||
position: relative;
|
||||
}
|
||||
.game-frame::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(var(--color-hairline), var(--color-hairline)) top left /
|
||||
26px 1.5px,
|
||||
linear-gradient(var(--color-hairline), var(--color-hairline)) top left / 1.5px
|
||||
26px,
|
||||
linear-gradient(var(--color-hairline), var(--color-hairline)) top right /
|
||||
26px 1.5px,
|
||||
linear-gradient(var(--color-hairline), var(--color-hairline)) top right / 1.5px
|
||||
26px,
|
||||
linear-gradient(var(--color-hairline), var(--color-hairline)) bottom left /
|
||||
26px 1.5px,
|
||||
linear-gradient(var(--color-hairline), var(--color-hairline)) bottom left /
|
||||
1.5px 26px,
|
||||
linear-gradient(var(--color-hairline), var(--color-hairline)) bottom right /
|
||||
26px 1.5px,
|
||||
linear-gradient(var(--color-hairline), var(--color-hairline)) bottom right /
|
||||
1.5px 26px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* ── Mobile lightness (<md): cheaper blur, shorter animations ── */
|
||||
@media (max-width: 767px) {
|
||||
.glass {
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
.game-nav-item {
|
||||
animation-duration: 0.25s;
|
||||
animation-delay: calc(var(--i) * 18ms);
|
||||
}
|
||||
.scan-line::after,
|
||||
.animate-shimmer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.animate-spin-disc { animation: spin-disc 10s linear infinite; }
|
||||
.animate-pulse-ring { animation: pulse-ring 2s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
|
||||
|
||||
/* Respect reduced motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.scan-line::after,
|
||||
.scan-line,
|
||||
.animate-eq,
|
||||
.animate-spin-disc,
|
||||
.animate-pulse-ring,
|
||||
.animate-shimmer,
|
||||
.animate-breathe,
|
||||
.animate-fade-up,
|
||||
.animate-stagger,
|
||||
.animate-toast-in {
|
||||
.animate-pulse-ring {
|
||||
animation: none !important;
|
||||
}
|
||||
.scan-line {
|
||||
background: none !important;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
|
||||
@@ -9,10 +9,6 @@ import { downloadCsv } from "@/lib/csv";
|
||||
import { formatRelativeTime } from "@/lib/format";
|
||||
import type { ChannelCultureRow } from "@/lib/types";
|
||||
|
||||
/**
|
||||
* Deterministic pseudo signal-strength (0..1) derived from recency + summary
|
||||
* richness — purely cosmetic telemetry framing, no backend field for this.
|
||||
*/
|
||||
function deriveSignalStrength(c: ChannelCultureRow): number {
|
||||
let score = 0.25;
|
||||
if (c.culture_summary) {
|
||||
@@ -39,22 +35,17 @@ export function ChannelCultureGlossary({
|
||||
[cultures],
|
||||
);
|
||||
|
||||
const hudRef = useStaggerReveal<HTMLDivElement>(".channel-node", {
|
||||
stagger: 0.045,
|
||||
y: 14,
|
||||
const containerRef = useStaggerReveal<HTMLDivElement>(".channel-row", {
|
||||
stagger: 0.025,
|
||||
y: 6,
|
||||
dependencies: [cultures],
|
||||
});
|
||||
|
||||
return (
|
||||
<GlassPanel className="lg:col-span-3">
|
||||
<GlassPanel>
|
||||
<SectionHeader
|
||||
eyebrow="knowledge · roster"
|
||||
title={
|
||||
<span className="flex items-center gap-2">
|
||||
<Radio className="size-4 text-signal" />
|
||||
Channel Culture Glossary
|
||||
</span>
|
||||
}
|
||||
eyebrow="Roster Intelligence"
|
||||
title="Channel Culture & Activity Roster"
|
||||
action={
|
||||
cultures.length > 0 ? (
|
||||
<button
|
||||
@@ -69,7 +60,7 @@ export function ChannelCultureGlossary({
|
||||
})),
|
||||
)
|
||||
}
|
||||
className="flex items-center gap-1.5 font-mono text-[11px] text-ink-soft hover:text-ink"
|
||||
className="font-mono text-[11px] text-[#8a8f98] transition-colors hover:text-[#f7f8f8]"
|
||||
>
|
||||
EXPORT_CSV
|
||||
</button>
|
||||
@@ -77,47 +68,31 @@ export function ChannelCultureGlossary({
|
||||
}
|
||||
/>
|
||||
{cultures.length === 0 ? (
|
||||
<p className="py-6 text-center font-mono text-xs text-ink-faint">
|
||||
NO CHANNEL TELEMETRY CAPTURED YET
|
||||
</p>
|
||||
<div className="py-8 text-center font-mono text-xs text-[#8a8f98]">
|
||||
NO CHANNELS LOGGED
|
||||
</div>
|
||||
) : (
|
||||
<div ref={hudRef} className="space-y-2">
|
||||
{ranked.map(({ c, signal }) => (
|
||||
<div ref={containerRef} className="space-y-2 mt-3">
|
||||
{ranked.map(({ c }) => (
|
||||
<div
|
||||
key={c.channel_id}
|
||||
className="channel-node group relative overflow-hidden rounded-md border border-hairline bg-surface/40 p-3 backdrop-blur-md transition-colors hover:border-signal/40"
|
||||
className="channel-row flex flex-col gap-1 rounded-[6px] border border-white/[0.06] bg-white/[0.02] p-3 transition-all hover:border-white/[0.12] hover:bg-white/[0.04]"
|
||||
>
|
||||
<div className="flex items-baseline justify-between gap-3">
|
||||
<span className="truncate font-mono text-xs font-semibold text-ink">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="font-mono text-xs font-semibold text-[#f7f8f8]">
|
||||
#{c.channel_name ?? c.channel_id.slice(0, 8)}
|
||||
</span>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Signal className="size-3 text-ink-faint" />
|
||||
{c.last_analyzed_at && (
|
||||
<span className="font-mono text-[10px] text-ink-faint">
|
||||
{formatRelativeTime(c.last_analyzed_at)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{c.last_analyzed_at && (
|
||||
<span className="font-mono text-[10px] text-[#8a8f98]">
|
||||
{formatRelativeTime(c.last_analyzed_at)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{c.culture_summary ? (
|
||||
<p className="mt-1.5 line-clamp-2 text-[13px] text-ink-soft">
|
||||
{c.culture_summary && (
|
||||
<p className="font-sans text-xs text-[#8a8f98] leading-relaxed line-clamp-2">
|
||||
{c.culture_summary}
|
||||
</p>
|
||||
) : (
|
||||
<span className="mt-1.5 block font-mono text-[11px] text-ink-faint">
|
||||
(no summary captured)
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Signal strength readout bar */}
|
||||
<div className="mt-2 h-1 w-full overflow-hidden rounded-full bg-canvas-2">
|
||||
<div
|
||||
className="h-full rounded-full bg-signal transition-[width] duration-700 ease-out"
|
||||
style={{ width: `${Math.round(signal * 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -2,20 +2,24 @@
|
||||
|
||||
import {
|
||||
Bot,
|
||||
Check,
|
||||
Copy,
|
||||
MessageCircle,
|
||||
RotateCw,
|
||||
MessageSquare,
|
||||
Send,
|
||||
Trash2,
|
||||
X,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useGSAP } from "@gsap/react";
|
||||
import gsap from "gsap";
|
||||
import { Avatar, Button, GlassPanel, toast } from "@/components/primitives";
|
||||
import { MarkdownLite } from "@/components/shared";
|
||||
import { useChatbotUserId } from "@/hooks/use-chatbot-user";
|
||||
import { chatbotApi } from "@/lib/api";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(useGSAP);
|
||||
}
|
||||
|
||||
interface Msg {
|
||||
id: string;
|
||||
role: "user" | "bot";
|
||||
@@ -34,32 +38,27 @@ function formatTime(ts: number): string {
|
||||
}
|
||||
}
|
||||
|
||||
function TypingDots() {
|
||||
return (
|
||||
<div className="flex items-center gap-1 py-1">
|
||||
{[0, 1, 2].map((i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="size-1.5 rounded-full bg-ink-faint animate-bounce"
|
||||
style={{ animationDelay: `${i * 0.15}s`, animationDuration: "0.9s" }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function Chatbot() {
|
||||
const userId = useChatbotUserId();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [msgs, setMsgs] = useState<Msg[]>([]);
|
||||
const [input, setInput] = useState("");
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [failed, setFailed] = useState<string | null>(null);
|
||||
const [copiedId, setCopiedId] = useState<string | null>(null);
|
||||
const listRef = useRef<HTMLDivElement>(null);
|
||||
const taRef = useRef<HTMLTextAreaElement>(null);
|
||||
const panelRef = useRef<HTMLDivElement>(null);
|
||||
const bottomRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useGSAP(
|
||||
() => {
|
||||
if (!open || !panelRef.current) return;
|
||||
gsap.fromTo(
|
||||
panelRef.current,
|
||||
{ opacity: 0, y: 12, scale: 0.98 },
|
||||
{ opacity: 1, y: 0, scale: 1, duration: 0.22, ease: "power2.out" },
|
||||
);
|
||||
},
|
||||
{ dependencies: [open] },
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !userId) return;
|
||||
chatbotApi
|
||||
@@ -85,44 +84,12 @@ export function Chatbot() {
|
||||
.catch(() => {});
|
||||
}, [open, userId]);
|
||||
|
||||
// Auto-scroll to newest whenever the thread or typing state changes.
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: scroll must fire on thread/typing changes even though the body only reads the ref
|
||||
useEffect(() => {
|
||||
bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
|
||||
}, [msgs, loading, open]);
|
||||
|
||||
// Auto-grow the composer.
|
||||
// biome-ignore lint/correctness/useExhaustiveDependencies: height recompute is keyed to input changes; body only reads the textarea element
|
||||
useEffect(() => {
|
||||
const ta = taRef.current;
|
||||
if (!ta) return;
|
||||
ta.style.height = "auto";
|
||||
ta.style.height = `${Math.min(ta.scrollHeight, 140)}px`;
|
||||
}, [input]);
|
||||
|
||||
const copy = async (id: string, text: string) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
setCopiedId(id);
|
||||
window.setTimeout(() => setCopiedId((c) => (c === id ? null : c)), 1200);
|
||||
} catch {
|
||||
/* clipboard unavailable */
|
||||
}
|
||||
};
|
||||
|
||||
const clearAll = async () => {
|
||||
if (!userId) return;
|
||||
setMsgs([]);
|
||||
try {
|
||||
await chatbotApi.clearHistory(userId);
|
||||
} catch {
|
||||
/* best-effort */
|
||||
}
|
||||
};
|
||||
bottomRef.current?.scrollIntoView({ behavior: "smooth" });
|
||||
}, [msgs, loading]);
|
||||
|
||||
const send = async (text: string) => {
|
||||
if (!text.trim() || loading || !userId) return;
|
||||
setFailed(null);
|
||||
setInput("");
|
||||
setMsgs((m) => [
|
||||
...m,
|
||||
@@ -141,172 +108,116 @@ export function Chatbot() {
|
||||
},
|
||||
]);
|
||||
} catch (e) {
|
||||
setFailed(text);
|
||||
toast({ title: "Chat error", description: String(e), tone: "vermilion" });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const clearAll = async () => {
|
||||
if (!userId) return;
|
||||
setMsgs([]);
|
||||
try {
|
||||
await chatbotApi.clearHistory(userId);
|
||||
} catch {
|
||||
/* best-effort */
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Open assistant"
|
||||
onClick={() => setOpen((o) => !o)}
|
||||
className="fixed right-4 bottom-24 z-50 flex items-center justify-center rounded-full bg-signal text-signal-ink shadow-[0_10px_30px_-8px_var(--color-signal-glow)] transition-transform hover:scale-105 md:right-5 md:bottom-5"
|
||||
style={{ width: 52, height: 52 }}
|
||||
className="fixed right-4 bottom-5 z-50 flex size-10 items-center justify-center rounded-full border border-white/[0.12] bg-[#0f1011] text-[#f7f8f8] shadow-2xl transition-all duration-150 hover:scale-105 hover:border-[#7170ff] hover:bg-[#191a1b]"
|
||||
>
|
||||
{open ? <X className="size-5" /> : <MessageCircle className="size-5" />}
|
||||
{open ? <X className="size-4" /> : <MessageSquare className="size-4 text-[#7170ff]" />}
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<GlassPanel
|
||||
className="fixed right-4 bottom-24 z-50 flex w-[min(94vw,360px)] flex-col p-0 md:right-5 md:bottom-20"
|
||||
style={{
|
||||
animation: "fade-up 0.16s ease",
|
||||
height: "min(68dvh, 520px)",
|
||||
}}
|
||||
<div
|
||||
ref={panelRef}
|
||||
className="fixed right-4 bottom-18 z-50 flex h-[min(65dvh,480px)] w-[min(92vw,350px)] flex-col rounded-[10px] border border-white/[0.08] bg-[#0f1011]/95 p-0 shadow-2xl backdrop-blur-xl"
|
||||
>
|
||||
<div className="flex items-center gap-2 border-b border-hairline px-4 py-3">
|
||||
<span className="flex size-8 items-center justify-center rounded-full bg-signal/15 text-signal">
|
||||
<Bot className="size-4" />
|
||||
</span>
|
||||
<div>
|
||||
<div className="text-sm font-semibold text-ink">
|
||||
GMW Assistant
|
||||
</div>
|
||||
<div className="mono text-[0.6rem] text-ink-faint">
|
||||
context-aware
|
||||
<div className="flex items-center justify-between border-b border-white/[0.06] px-3.5 py-2.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="flex size-6 items-center justify-center rounded-md bg-[#7170ff]/15 text-[#7170ff]">
|
||||
<Bot className="size-3.5" />
|
||||
</span>
|
||||
<div>
|
||||
<div className="text-xs font-semibold text-[#f7f8f8]">
|
||||
Linear Assistant
|
||||
</div>
|
||||
<div className="font-mono text-[9px] text-[#62666d]">
|
||||
active context
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Clear conversation"
|
||||
onClick={clearAll}
|
||||
className="ml-auto rounded-[9px] p-1.5 text-ink-faint transition-colors hover:bg-white/5 hover:text-ink-soft"
|
||||
className="rounded-[5px] p-1 text-[#62666d] hover:bg-white/[0.05] hover:text-[#d0d6e0]"
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
<Trash2 className="size-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
ref={listRef}
|
||||
className="flex-1 space-y-3 overflow-y-auto px-4 py-3"
|
||||
>
|
||||
<div className="flex-1 space-y-2.5 overflow-y-auto px-3.5 py-3">
|
||||
{msgs.length === 0 && !loading && (
|
||||
<div className="py-8 text-center text-xs text-ink-faint">
|
||||
Ask about moderation, voice, or media.
|
||||
<div className="py-8 text-center text-xs text-[#62666d]">
|
||||
Ask anything about telemetry, moderation, or media.
|
||||
</div>
|
||||
)}
|
||||
{msgs.map((m) => (
|
||||
<div
|
||||
key={m.id}
|
||||
className={cn(
|
||||
"group flex gap-2",
|
||||
m.role === "user" ? "justify-end" : "justify-start",
|
||||
"flex flex-col text-xs",
|
||||
m.role === "user" ? "items-end" : "items-start",
|
||||
)}
|
||||
>
|
||||
{m.role === "bot" && (
|
||||
<Avatar
|
||||
name="GMW"
|
||||
size={26}
|
||||
className="mt-0.5 bg-signal/15 text-signal"
|
||||
/>
|
||||
)}
|
||||
<div className="flex max-w-[82%] flex-col">
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-2xl px-3 py-2 text-sm",
|
||||
m.role === "user"
|
||||
? "rounded-br-sm bg-signal/20 text-ink"
|
||||
: "rounded-bl-sm bg-white/5 text-ink-soft",
|
||||
)}
|
||||
>
|
||||
{m.role === "bot" ? (
|
||||
<MarkdownLite content={m.content} />
|
||||
) : (
|
||||
<span className="whitespace-pre-wrap break-words">
|
||||
{m.content}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"mt-0.5 flex items-center gap-1.5 text-[0.6rem] text-ink-faint",
|
||||
m.role === "user" && "flex-row-reverse",
|
||||
)}
|
||||
>
|
||||
<span className="mono">{formatTime(m.ts)}</span>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Copy message"
|
||||
onClick={() => copy(m.id, m.content)}
|
||||
className="rounded p-0.5 opacity-0 transition-opacity hover:text-ink-soft group-hover:opacity-100"
|
||||
>
|
||||
{copiedId === m.id ? (
|
||||
<Check className="size-3 text-signal" />
|
||||
) : (
|
||||
<Copy className="size-3" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
"max-w-[85%] rounded-[6px] px-2.5 py-1.5",
|
||||
m.role === "user"
|
||||
? "bg-[#5e6ad2] text-white"
|
||||
: "border border-white/[0.06] bg-white/[0.03] text-[#d0d6e0]",
|
||||
)}
|
||||
>
|
||||
{m.role === "bot" ? (
|
||||
<MarkdownLite content={m.content} />
|
||||
) : (
|
||||
<span>{m.content}</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="font-mono mt-0.5 text-[9px] text-[#62666d]">
|
||||
{formatTime(m.ts)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{loading && (
|
||||
<div className="flex gap-2">
|
||||
<Avatar
|
||||
name="GMW"
|
||||
size={26}
|
||||
className="bg-signal/15 text-signal"
|
||||
/>
|
||||
<div className="rounded-2xl rounded-bl-sm bg-white/5 px-3 py-2">
|
||||
<TypingDots />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div ref={bottomRef} />
|
||||
</div>
|
||||
|
||||
{failed && (
|
||||
<div className="mx-3 mb-1 flex items-center gap-2 rounded-[10px] border border-vermilion/30 bg-vermilion/10 px-3 py-1.5 text-xs text-vermilion">
|
||||
<span className="flex-1 truncate">Send failed</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => send(failed)}
|
||||
className="inline-flex items-center gap-1 font-medium hover:underline"
|
||||
>
|
||||
<RotateCw className="size-3" /> Retry
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-end gap-2 border-t border-hairline p-3">
|
||||
<textarea
|
||||
ref={taRef}
|
||||
rows={1}
|
||||
placeholder="Message…"
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
send(input);
|
||||
}}
|
||||
className="flex items-center gap-1.5 border-t border-white/[0.06] p-2"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
send(input);
|
||||
}
|
||||
}}
|
||||
className="max-h-[140px] min-h-[40px] flex-1 resize-none rounded-[11px] bg-white/5 border border-hairline px-3 py-2 text-sm text-ink placeholder:text-ink-faint transition-colors focus:outline-none focus:border-signal/50 focus:bg-white/8"
|
||||
placeholder="Ask command..."
|
||||
className="flex-1 rounded-[5px] border border-white/[0.08] bg-white/[0.02] px-2.5 py-1.5 text-xs text-[#f7f8f8] placeholder:text-[#62666d] focus:border-[#7170ff] focus:outline-none"
|
||||
/>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="icon"
|
||||
onClick={() => send(input)}
|
||||
disabled={loading}
|
||||
>
|
||||
<MessageCircle className="size-4" />
|
||||
<Button type="submit" size="sm" variant="primary">
|
||||
<Send className="size-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</GlassPanel>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,39 +1,52 @@
|
||||
import type React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type Tone = "signal" | "amber" | "vermilion" | "neutral";
|
||||
|
||||
const tones: Record<Tone, string> = {
|
||||
signal: "bg-signal/12 text-signal border-signal/30",
|
||||
amber: "bg-amber/12 text-amber border-amber/30",
|
||||
vermilion: "bg-vermilion/12 text-vermilion border-vermilion/30",
|
||||
neutral: "bg-white/6 text-ink-soft border-white/10",
|
||||
};
|
||||
export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
||||
tone?: "neutral" | "signal" | "amber" | "vermilion" | "success";
|
||||
size?: "sm" | "md";
|
||||
dot?: boolean;
|
||||
}
|
||||
|
||||
export function Badge({
|
||||
tone = "neutral",
|
||||
dot,
|
||||
size = "md",
|
||||
dot = false,
|
||||
className,
|
||||
children,
|
||||
}: {
|
||||
tone?: Tone;
|
||||
dot?: boolean;
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
...props
|
||||
}: BadgeProps) {
|
||||
const tones = {
|
||||
neutral: "bg-white/[0.04] text-[#d0d6e0] border-white/[0.08]",
|
||||
signal: "bg-[#7170ff]/10 text-[#7170ff] border-[#7170ff]/25",
|
||||
success: "bg-[#10b981]/10 text-[#10b981] border-[#10b981]/25",
|
||||
amber: "bg-[#f59e0b]/10 text-[#f59e0b] border-[#f59e0b]/25",
|
||||
vermilion: "bg-[#f43f5e]/10 text-[#f43f5e] border-[#f43f5e]/25",
|
||||
};
|
||||
|
||||
const dots = {
|
||||
neutral: "bg-[#8a8f98]",
|
||||
signal: "bg-[#7170ff]",
|
||||
success: "bg-[#10b981]",
|
||||
amber: "bg-[#f59e0b]",
|
||||
vermilion: "bg-[#f43f5e]",
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
sm: "px-1.5 py-0.5 text-[10px]",
|
||||
md: "px-2 py-0.5 text-[11px]",
|
||||
};
|
||||
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-[0.7rem] font-semibold tracking-wide",
|
||||
"inline-flex items-center gap-1.5 rounded-[4px] border font-mono font-medium tracking-tight",
|
||||
tones[tone],
|
||||
sizes[size],
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{dot && (
|
||||
<span className="relative flex h-1.5 w-1.5">
|
||||
<span className="absolute inline-flex h-full w-full rounded-full bg-current opacity-60 animate-pulse-ring" />
|
||||
<span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-current" />
|
||||
</span>
|
||||
)}
|
||||
{dot && <span className={cn("size-1.5 rounded-full", dots[tone])} />}
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
|
||||
@@ -1,51 +1,60 @@
|
||||
import type React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Slot } from "./slot";
|
||||
|
||||
type Variant = "primary" | "ghost" | "outline" | "danger" | "subtle";
|
||||
type Size = "sm" | "md" | "lg" | "icon";
|
||||
export const buttonVariants = ({
|
||||
variant = "primary",
|
||||
size = "md",
|
||||
className,
|
||||
}: {
|
||||
variant?: "primary" | "ghost" | "danger" | "secondary" | "subtle" | "outline";
|
||||
size?: "sm" | "md" | "lg" | "icon";
|
||||
className?: string;
|
||||
}) => {
|
||||
const base =
|
||||
"inline-flex items-center justify-center font-sans font-medium transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#7170ff] disabled:pointer-events-none disabled:opacity-40 cursor-pointer";
|
||||
|
||||
const variants: Record<Variant, string> = {
|
||||
primary:
|
||||
"bg-signal text-signal-ink hover:brightness-110 shadow-[0_8px_24px_-10px_var(--color-signal-glow)] font-semibold",
|
||||
ghost: "text-ink-soft hover:text-ink hover:bg-white/5",
|
||||
outline:
|
||||
"border border-hairline bg-white/0 text-ink hover:bg-white/5 hover:border-signal/40",
|
||||
danger:
|
||||
"bg-vermilion text-white hover:brightness-110 shadow-[0_8px_24px_-10px_var(--color-vermilion-glow)] font-semibold",
|
||||
subtle: "bg-white/5 text-ink hover:bg-white/10",
|
||||
};
|
||||
const variants = {
|
||||
primary:
|
||||
"bg-[#5e6ad2] text-white hover:bg-[#7170ff] shadow-sm active:scale-[0.98]",
|
||||
ghost:
|
||||
"bg-white/[0.03] text-[#d0d6e0] border border-white/[0.08] hover:bg-white/[0.06] hover:text-[#f7f8f8] hover:border-white/[0.14] active:scale-[0.98]",
|
||||
outline:
|
||||
"bg-transparent text-[#d0d6e0] border border-white/[0.12] hover:bg-white/[0.04] hover:text-[#f7f8f8] active:scale-[0.98]",
|
||||
secondary:
|
||||
"bg-white/[0.06] text-[#f7f8f8] hover:bg-white/[0.1] border border-white/[0.08] active:scale-[0.98]",
|
||||
subtle:
|
||||
"bg-transparent text-[#8a8f98] hover:bg-white/[0.04] hover:text-[#f7f8f8]",
|
||||
danger:
|
||||
"bg-[#f43f5e]/15 text-[#f43f5e] border border-[#f43f5e]/30 hover:bg-[#f43f5e]/25 active:scale-[0.98]",
|
||||
};
|
||||
|
||||
const sizes: Record<Size, string> = {
|
||||
sm: "h-8 px-3 text-xs rounded-[9px] gap-1.5",
|
||||
md: "h-10 px-4 text-sm rounded-[11px] gap-2",
|
||||
lg: "h-12 px-6 text-base rounded-[13px] gap-2",
|
||||
icon: "h-10 w-10 rounded-[11px]",
|
||||
const sizes = {
|
||||
sm: "h-7 px-2.5 text-xs rounded-[5px] gap-1.5",
|
||||
md: "h-8.5 px-3.5 text-xs rounded-[6px] gap-2",
|
||||
lg: "h-10 px-4 text-sm rounded-[7px] gap-2.5",
|
||||
icon: "size-8.5 rounded-[6px] p-0",
|
||||
};
|
||||
|
||||
return cn(base, variants[variant], sizes[size], className);
|
||||
};
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: Variant;
|
||||
size?: Size;
|
||||
asChild?: boolean;
|
||||
variant?: "primary" | "ghost" | "danger" | "secondary" | "subtle" | "outline";
|
||||
size?: "sm" | "md" | "lg" | "icon";
|
||||
}
|
||||
|
||||
export const Button = ({
|
||||
className,
|
||||
variant = "subtle",
|
||||
variant = "ghost",
|
||||
size = "md",
|
||||
asChild,
|
||||
type = "button",
|
||||
...props
|
||||
}: ButtonProps) => {
|
||||
const Comp = asChild ? Slot : "button";
|
||||
return (
|
||||
<Comp
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center whitespace-nowrap transition-all duration-150 select-none active:scale-[0.97]",
|
||||
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-signal/60 disabled:opacity-40 disabled:pointer-events-none",
|
||||
variants[variant],
|
||||
sizes[size],
|
||||
className,
|
||||
)}
|
||||
<button
|
||||
type={type}
|
||||
className={buttonVariants({ variant, size, className })}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -1,19 +1,24 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/** Floating glass panel — primary container. */
|
||||
export interface GlassPanelProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
glow?: boolean;
|
||||
}
|
||||
|
||||
export function GlassPanel({
|
||||
className,
|
||||
children,
|
||||
className,
|
||||
style,
|
||||
glow,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement> & { glow?: boolean }) {
|
||||
}: GlassPanelProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"glass p-5",
|
||||
glow && "shadow-[0_0_40px_-18px_var(--color-signal-glow)]",
|
||||
"relative rounded-[10px] border border-white/[0.08] bg-[#0f1011]/80 p-5 shadow-xl backdrop-blur-md transition-all duration-200",
|
||||
glow && "shadow-[0_0_24px_rgba(113,112,255,0.12)] border-[#7170ff]/30",
|
||||
className,
|
||||
)}
|
||||
style={style}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
@@ -21,14 +26,21 @@ export function GlassPanel({
|
||||
);
|
||||
}
|
||||
|
||||
/** Smaller glass sub-panel. */
|
||||
export function GlassCard({
|
||||
className,
|
||||
children,
|
||||
className,
|
||||
style,
|
||||
...props
|
||||
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||
return (
|
||||
<div className={cn("glass-2 p-4", className)} {...props}>
|
||||
<div
|
||||
className={cn(
|
||||
"relative rounded-[8px] border border-white/[0.06] bg-white/[0.02] p-4 transition-all duration-200 hover:border-white/[0.12] hover:bg-white/[0.04]",
|
||||
className,
|
||||
)}
|
||||
style={style}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -14,13 +14,19 @@ export function SectionHeader({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"mb-3 flex flex-wrap items-start justify-between gap-2 sm:gap-3",
|
||||
"mb-3.5 flex flex-wrap items-center justify-between gap-3",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="min-w-0">
|
||||
{eyebrow && <div className="eyebrow mb-1">{eyebrow}</div>}
|
||||
<h2 className="display text-balance text-xl text-ink">{title}</h2>
|
||||
{eyebrow && (
|
||||
<div className="font-mono text-[10px] font-medium tracking-wider uppercase text-[#8a8f98] mb-0.5">
|
||||
{eyebrow}
|
||||
</div>
|
||||
)}
|
||||
<h2 className="font-sans text-[1.1rem] font-semibold tracking-tight text-[#f7f8f8]">
|
||||
{title}
|
||||
</h2>
|
||||
</div>
|
||||
{action && (
|
||||
<div className="flex flex-wrap items-center gap-2">{action}</div>
|
||||
@@ -50,45 +56,45 @@ export function MetricTile({
|
||||
}) {
|
||||
const toneColor =
|
||||
tone === "vermilion"
|
||||
? "var(--color-vermilion)"
|
||||
? "#f43f5e"
|
||||
: tone === "amber"
|
||||
? "var(--color-amber)"
|
||||
? "#f59e0b"
|
||||
: tone === "signal"
|
||||
? "var(--color-signal)"
|
||||
: "var(--color-ink)";
|
||||
? "#7170ff"
|
||||
: "#f7f8f8";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"glass p-4 ring-focus transition-transform duration-200 hover:-translate-y-0.5",
|
||||
"relative rounded-[8px] border border-white/[0.07] bg-white/[0.025] p-4 transition-all duration-200 hover:border-white/[0.14] hover:bg-white/[0.04]",
|
||||
className,
|
||||
)}
|
||||
style={style}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="eyebrow">{label}</div>
|
||||
{icon && <span className="text-ink-faint">{icon}</span>}
|
||||
<div className="font-mono text-[10px] font-medium uppercase tracking-wider text-[#8a8f98]">
|
||||
{label}
|
||||
</div>
|
||||
{icon && <span className="text-[#8a8f98]">{icon}</span>}
|
||||
</div>
|
||||
<div
|
||||
className="display mt-1 text-[1.9rem] leading-none"
|
||||
className="font-sans mt-1.5 text-[1.65rem] font-semibold leading-none tracking-tight"
|
||||
style={{ color: tone === "neutral" ? undefined : toneColor }}
|
||||
>
|
||||
{value}
|
||||
</div>
|
||||
{hint && (
|
||||
<div className="mono mt-1 text-[0.68rem] text-ink-faint">{hint}</div>
|
||||
<div className="font-mono mt-1 text-[10px] text-[#62666d]">{hint}</div>
|
||||
)}
|
||||
{spark && spark.length > 1 && (
|
||||
<div className="mt-2">
|
||||
<div
|
||||
className="h-1 w-full overflow-hidden rounded-full"
|
||||
style={{ background: "oklch(1 0 0 / 0.08)" }}
|
||||
>
|
||||
<div className="mt-2.5">
|
||||
<div className="h-[3px] w-full overflow-hidden rounded-full bg-white/[0.06]">
|
||||
<div
|
||||
className="h-full rounded-full"
|
||||
style={{
|
||||
width: `${Math.min(100, (spark[spark.length - 1] / (Math.max(...spark) || 1)) * 100)}%`,
|
||||
background: toneColor,
|
||||
opacity: 0.7,
|
||||
opacity: 0.8,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -29,25 +29,23 @@ function NavItem({
|
||||
href={href}
|
||||
aria-label={label}
|
||||
aria-current={active ? "page" : undefined}
|
||||
style={{ "--i": index } as React.CSSProperties}
|
||||
className={cn(
|
||||
"nav-dock-item game-nav-item group relative flex size-11 items-center justify-center rounded-[13px] transition-all duration-200",
|
||||
"nav-dock-item group relative flex size-9 items-center justify-center rounded-[7px] transition-all duration-150",
|
||||
active
|
||||
? "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",
|
||||
? "is-active bg-white/[0.08] text-[#f7f8f8] shadow-sm border border-white/[0.12]"
|
||||
: "text-[#8a8f98] hover:bg-white/[0.04] hover:text-[#d0d6e0]",
|
||||
)}
|
||||
>
|
||||
{active && <span className="game-marker -left-3.5" />}
|
||||
<span className="game-sweep" aria-hidden="true">
|
||||
<i />
|
||||
</span>
|
||||
<Icon
|
||||
className="relative z-10 size-[18px]"
|
||||
strokeWidth={active ? 2.4 : 2}
|
||||
className="relative z-10 size-4"
|
||||
strokeWidth={active ? 2.2 : 1.8}
|
||||
/>
|
||||
{/* 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>
|
||||
{/* Precision Micro-Indicator */}
|
||||
{active && (
|
||||
<span className="absolute -left-[5px] h-3.5 w-[2px] rounded-full bg-[#7170ff]" />
|
||||
)}
|
||||
{/* Tooltip on hover */}
|
||||
<span className="pointer-events-none absolute left-full z-50 ml-2.5 hidden whitespace-nowrap rounded-[5px] border border-white/[0.08] bg-[#0f1011] px-2 py-0.5 font-sans text-[11px] font-medium tracking-tight text-[#f7f8f8] opacity-0 shadow-lg backdrop-blur-md transition-all group-hover:translate-x-0.5 group-hover:opacity-100 md:block">
|
||||
{label}
|
||||
</span>
|
||||
</a>
|
||||
@@ -65,13 +63,12 @@ export function NavRail() {
|
||||
const items = railRef.current.querySelectorAll(".nav-dock-item");
|
||||
gsap.fromTo(
|
||||
items,
|
||||
{ opacity: 0, x: -8, scale: 0.9 },
|
||||
{ opacity: 0, x: -6 },
|
||||
{
|
||||
opacity: 1,
|
||||
x: 0,
|
||||
scale: 1,
|
||||
duration: 0.4,
|
||||
stagger: 0.04,
|
||||
duration: 0.3,
|
||||
stagger: 0.025,
|
||||
ease: "power2.out",
|
||||
clearProps: "transform",
|
||||
},
|
||||
@@ -83,9 +80,9 @@ export function NavRail() {
|
||||
return (
|
||||
<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"
|
||||
className="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-[54px] flex-col items-center gap-1 rounded-[10px] border border-white/[0.08] bg-[#0f1011]/80 py-3 shadow-xl backdrop-blur-md md:flex"
|
||||
>
|
||||
<div className="flex flex-1 flex-col gap-1.5">
|
||||
<div className="flex flex-1 flex-col gap-1">
|
||||
{navItems.map((item, i) => (
|
||||
<NavItem
|
||||
key={item.href}
|
||||
|
||||
@@ -6,10 +6,16 @@ import { type RefObject, useRef } from "react";
|
||||
|
||||
if (typeof window !== "undefined") {
|
||||
gsap.registerPlugin(useGSAP);
|
||||
// Set default Linear-style crisp easing & duration
|
||||
gsap.defaults({
|
||||
ease: "power2.out",
|
||||
duration: 0.35,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reusable hook for staggered reveal animations on child elements.
|
||||
* Linear-style: crisp entry, very subtle vertical displacement, no layout shift.
|
||||
*/
|
||||
export function useStaggerReveal<T extends HTMLElement = HTMLDivElement>(
|
||||
selector: string,
|
||||
@@ -41,16 +47,14 @@ export function useStaggerReveal<T extends HTMLElement = HTMLDivElement>(
|
||||
elements,
|
||||
{
|
||||
opacity: 0,
|
||||
y: options?.y ?? 12,
|
||||
scale: 0.98,
|
||||
y: options?.y ?? 8,
|
||||
},
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
scale: 1,
|
||||
duration: options?.duration ?? 0.35,
|
||||
delay: options?.delay ?? 0.05,
|
||||
stagger: options?.stagger ?? 0.04,
|
||||
duration: options?.duration ?? 0.32,
|
||||
delay: options?.delay ?? 0.02,
|
||||
stagger: options?.stagger ?? 0.03,
|
||||
ease: "power2.out",
|
||||
clearProps: "transform",
|
||||
},
|
||||
@@ -80,7 +84,7 @@ export function useCounter(
|
||||
const obj = { val: 0 };
|
||||
gsap.to(obj, {
|
||||
val: targetValue,
|
||||
duration: 0.8,
|
||||
duration: 0.75,
|
||||
ease: "power2.out",
|
||||
onUpdate: () => {
|
||||
if (ref.current) {
|
||||
@@ -94,3 +98,35 @@ export function useCounter(
|
||||
{ dependencies: [targetValue] },
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Micro-interaction hook for interactive elements (hover card tilt/glow, pulse)
|
||||
*/
|
||||
export function useLinearHover<T extends HTMLElement = HTMLDivElement>() {
|
||||
const elementRef = useRef<T>(null);
|
||||
|
||||
useGSAP(
|
||||
(_, contextSafe) => {
|
||||
if (!elementRef.current || !contextSafe) return;
|
||||
const el = elementRef.current;
|
||||
|
||||
const onEnter = contextSafe(() => {
|
||||
gsap.to(el, { y: -2, duration: 0.18, ease: "power2.out" });
|
||||
});
|
||||
const onLeave = contextSafe(() => {
|
||||
gsap.to(el, { y: 0, duration: 0.22, ease: "power2.out" });
|
||||
});
|
||||
|
||||
el.addEventListener("mouseenter", onEnter);
|
||||
el.addEventListener("mouseleave", onLeave);
|
||||
|
||||
return () => {
|
||||
el.removeEventListener("mouseenter", onEnter);
|
||||
el.removeEventListener("mouseleave", onLeave);
|
||||
};
|
||||
},
|
||||
{ scope: elementRef },
|
||||
);
|
||||
|
||||
return elementRef;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user