feat(frontend): revamp UI to Linear Precision Clean Dark with GSAP micro-interactions
This commit is contained in:
asepharyana
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user