refactor(frontend): finish shadcn→custom primitive migration (green build)
- Remove tw-animate-css import + dead src/components/ui shadcn tree - Convert 7 orphaned components (moderation, analysis, guild-selector, voice/activity-timeline, shared/empty+error) to new primitives - Add missing moderation/view.tsx; analysis uses SearchPanel directly - globals.css now uses new signal-driven ops-console tokens - tsc --noEmit clean, next build green (11 routes), local smoke 200
This commit is contained in:
asepharyana
@@ -4,7 +4,7 @@ import { SearchPanel } from "@/components/analysis/search-panel";
|
||||
|
||||
export default function AnalysisPage() {
|
||||
return (
|
||||
<div className="space-y-5 animate-fade-in-up">
|
||||
<div className="space-y-5" style={{ animation: "fade-up 0.4s ease both" }}>
|
||||
<SearchPanel />
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,24 +1,26 @@
|
||||
/**
|
||||
* Dashboard page — Server Component.
|
||||
*
|
||||
* Fetches y the initial stats + activity on the server (no client round-trip
|
||||
* for first paint) and hands them to the hydrated client view. This is the
|
||||
* "data on the server" leg of the reworked data flow.
|
||||
* Dashboard — Server Component.
|
||||
* Fetches initial stats + activity on the server (SSR first paint), hands to
|
||||
* the hydrated client View. Keeps the documented server-seed data flow.
|
||||
*/
|
||||
import { getActivity, getDashboardStats } from "@/lib/api/server";
|
||||
import DashboardView from "./view";
|
||||
|
||||
export default async function DashboardPage() {
|
||||
const [stats, activity] = await Promise.allSettled([
|
||||
getDashboardStats(),
|
||||
getActivity(14),
|
||||
getDashboardStats().catch(() => undefined),
|
||||
getActivity(14).catch(() => undefined),
|
||||
]);
|
||||
|
||||
return (
|
||||
<DashboardView
|
||||
initialStats={stats.status === "fulfilled" ? stats.value : undefined}
|
||||
initialStats={
|
||||
stats.status === "fulfilled" && stats.value ? stats.value : undefined
|
||||
}
|
||||
initialActivity={
|
||||
activity.status === "fulfilled" ? activity.value : undefined
|
||||
activity.status === "fulfilled" && activity.value
|
||||
? activity.value
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -1,44 +1,33 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
AlertCircle,
|
||||
Clock,
|
||||
Hash,
|
||||
Heart,
|
||||
Shield,
|
||||
Sparkles,
|
||||
Activity as ActivityIcon,
|
||||
Flag,
|
||||
MessagesSquare,
|
||||
ShieldCheck,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { motion, useReducedMotion } from "motion/react";
|
||||
import { useState } from "react";
|
||||
import { RadialGauge } from "@/components/charts/radial-gauge";
|
||||
import { Sparkline } from "@/components/charts/sparkline";
|
||||
import { ActivityChart } from "@/components/dashboard/activity-chart";
|
||||
import { ChannelsSection } from "@/components/dashboard/channels-section";
|
||||
import { HourlyActivityChart } from "@/components/dashboard/hourly-activity-chart";
|
||||
import { ModerationDonut } from "@/components/dashboard/moderation-donut";
|
||||
import { ReactionsSection } from "@/components/dashboard/reactions-section";
|
||||
import { StatCard } from "@/components/dashboard/stat-card";
|
||||
import { TopChannelsChart } from "@/components/dashboard/top-channels-chart";
|
||||
import { UsersSection } from "@/components/dashboard/users-section";
|
||||
import { SubNav } from "@/components/layout/sub-nav";
|
||||
import { ErrorState, LoadingSkeleton } from "@/components/shared";
|
||||
import { StaggerGroup, StaggerItem } from "@/components/motion/stagger";
|
||||
import { SignalField } from "@/components/three";
|
||||
import { useActivity, useStats } from "@/hooks";
|
||||
import type { DashboardActivity, DashboardStats } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type DashboardTab = "stats" | "users" | "channels" | "reactions";
|
||||
type Tab = "stats" | "users" | "channels" | "reactions";
|
||||
|
||||
const DAY_RANGES = [7, 14, 30] as const;
|
||||
const DAYS = [7, 14, 30] as const;
|
||||
|
||||
const MODERATION_COLORS: Record<string, string> = {
|
||||
Clean: "oklch(0.72 0.16 155)",
|
||||
Flagged: "oklch(0.62 0.19 25)",
|
||||
Warned: "oklch(0.78 0.15 80)",
|
||||
Error: "oklch(0.55 0.02 245)",
|
||||
};
|
||||
|
||||
/**
|
||||
* Dashboard view — hydrated on the client but seeded with server-rendered
|
||||
* initial data. SWR takes over for revalidation after first paint.
|
||||
*/
|
||||
export default function DashboardView({
|
||||
initialStats,
|
||||
initialActivity,
|
||||
@@ -46,143 +35,216 @@ export default function DashboardView({
|
||||
initialStats?: DashboardStats;
|
||||
initialActivity?: DashboardActivity;
|
||||
}) {
|
||||
const [tab, setTab] = useState<DashboardTab>("stats");
|
||||
const [tab, setTab] = useState<Tab>("stats");
|
||||
const [days, setDays] = useState<number>(14);
|
||||
const { data: stats, error, mutate: refetch } = useStats(initialStats);
|
||||
const reduce = useReducedMotion();
|
||||
|
||||
const { data: stats } = useStats(initialStats);
|
||||
const { data: activity } = useActivity(
|
||||
days,
|
||||
days === 14 ? initialActivity : undefined,
|
||||
);
|
||||
|
||||
const subNavTabs = [
|
||||
{ id: "stats", label: "Stats", icon: <Hash className="size-3" /> },
|
||||
{ id: "users", label: "Users", icon: <Users className="size-3" /> },
|
||||
{ id: "channels", label: "Channels", icon: <Hash className="size-3" /> },
|
||||
{ id: "reactions", label: "Reactions", icon: <Heart className="size-3" /> },
|
||||
const clean = stats?.total_clean ?? 0;
|
||||
const flagged = stats?.total_flagged ?? 0;
|
||||
const warned = stats?.total_warned ?? 0;
|
||||
const total = clean + flagged + warned || 1;
|
||||
const health = clean / total;
|
||||
const activityRatio = Math.min(
|
||||
1,
|
||||
(activity?.daily.at(-1)?.messages ?? 0) /
|
||||
(Math.max(...(activity?.daily.map((d) => d.messages) ?? [1]), 1) || 1),
|
||||
);
|
||||
|
||||
const daily = activity?.daily ?? [];
|
||||
const spark = daily.map((d) => d.messages);
|
||||
const flaggedSpark = daily.map((d) => d.flagged);
|
||||
const usersSpark = daily.map((d) => d.active_users);
|
||||
|
||||
const tabs: { id: Tab; label: string; icon: React.ReactNode }[] = [
|
||||
{
|
||||
id: "stats",
|
||||
label: "Stats",
|
||||
icon: <MessagesSquare className="size-3.5" />,
|
||||
},
|
||||
{ id: "users", label: "Users", icon: <Users className="size-3.5" /> },
|
||||
{
|
||||
id: "channels",
|
||||
label: "Channels",
|
||||
icon: <ActivityIcon className="size-3.5" />,
|
||||
},
|
||||
{
|
||||
id: "reactions",
|
||||
label: "Reactions",
|
||||
icon: <Flag className="size-3.5" />,
|
||||
},
|
||||
];
|
||||
|
||||
const moderationData = stats
|
||||
? [
|
||||
{
|
||||
name: "Clean",
|
||||
value: stats.total_clean,
|
||||
color: MODERATION_COLORS.Clean,
|
||||
},
|
||||
{
|
||||
name: "Flagged",
|
||||
value: stats.total_flagged,
|
||||
color: MODERATION_COLORS.Flagged,
|
||||
},
|
||||
{
|
||||
name: "Warned",
|
||||
value: stats.total_warned,
|
||||
color: MODERATION_COLORS.Warned,
|
||||
},
|
||||
{
|
||||
name: "Error",
|
||||
value: stats.total_error,
|
||||
color: MODERATION_COLORS.Error,
|
||||
},
|
||||
].filter((d) => d.value > 0)
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className="space-y-4 animate-fade-in-up">
|
||||
<SubNav
|
||||
tabs={subNavTabs}
|
||||
activeTab={tab}
|
||||
onTabChange={(t) => setTab(t as DashboardTab)}
|
||||
/>
|
||||
<div className="flex flex-col gap-5">
|
||||
<Hero stats={stats} activityRatio={activityRatio} health={health} />
|
||||
|
||||
{tab === "stats" && (
|
||||
<div className="space-y-4">
|
||||
{error ? (
|
||||
<ErrorState message={error.message} onRetry={refetch} />
|
||||
) : !stats ? (
|
||||
<LoadingSkeleton count={6} height="h-28" columns={3} />
|
||||
) : (
|
||||
<>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
|
||||
<StatCard
|
||||
label="Total Messages"
|
||||
value={stats.total_messages}
|
||||
icon={Hash}
|
||||
/>
|
||||
<StatCard
|
||||
label="Today"
|
||||
value={stats.today_messages}
|
||||
icon={Clock}
|
||||
/>
|
||||
<StatCard
|
||||
label="Users"
|
||||
value={stats.total_users}
|
||||
icon={Users}
|
||||
/>
|
||||
<StatCard
|
||||
label="Active 24h"
|
||||
value={stats.active_users_24h}
|
||||
icon={Sparkles}
|
||||
/>
|
||||
<StatCard
|
||||
label="Flagged"
|
||||
value={stats.total_flagged}
|
||||
icon={AlertCircle}
|
||||
variant="danger"
|
||||
/>
|
||||
<StatCard
|
||||
label="Clean"
|
||||
value={stats.total_clean}
|
||||
icon={Shield}
|
||||
variant="success"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
{DAY_RANGES.map((range) => (
|
||||
<button
|
||||
key={range}
|
||||
type="button"
|
||||
onClick={() => setDays(range)}
|
||||
className={cn(
|
||||
"px-2.5 py-1 text-[10px] font-medium uppercase tracking-wide rounded-md transition-colors",
|
||||
days === range
|
||||
? "bg-primary/20 text-primary"
|
||||
: "text-text-secondary/60 hover:text-text-primary",
|
||||
)}
|
||||
>
|
||||
{range}d
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
|
||||
<div className="xl:col-span-2">
|
||||
{activity && <ActivityChart data={activity.daily} />}
|
||||
</div>
|
||||
<ModerationDonut data={moderationData} />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 xl:grid-cols-3">
|
||||
<div className="xl:col-span-2">
|
||||
{activity && <HourlyActivityChart data={activity.hourly} />}
|
||||
</div>
|
||||
<TopChannelsChart
|
||||
data={stats.top_channels.map((c) => ({
|
||||
name: c.channel_name ?? c.channel_id,
|
||||
count: c.message_count,
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{/* Tabs */}
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="flex gap-1 rounded-[var(--radius-r)] bg-[var(--color-surface-2)] p-1">
|
||||
{tabs.map((t) => (
|
||||
<button
|
||||
key={t.id}
|
||||
type="button"
|
||||
onClick={() => setTab(t.id)}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 rounded-[var(--radius-r-control)] px-3 py-1.5 text-xs font-medium transition-colors",
|
||||
tab === t.id
|
||||
? "bg-[var(--color-signal)] text-[var(--color-signal-ink)]"
|
||||
: "text-[var(--color-ink-soft)] hover:text-[var(--color-ink)]",
|
||||
)}
|
||||
>
|
||||
{t.icon}
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="ms-auto flex gap-1">
|
||||
{DAYS.map((d) => (
|
||||
<button
|
||||
key={d}
|
||||
type="button"
|
||||
onClick={() => setDays(d)}
|
||||
className={cn(
|
||||
"rounded-[var(--radius-r-control)] px-2.5 py-1 text-xs font-mono transition-colors",
|
||||
days === d
|
||||
? "bg-[var(--color-surface-2)] text-[var(--color-ink)]"
|
||||
: "text-[var(--color-ink-soft)] hover:text-[var(--color-ink)]",
|
||||
)}
|
||||
>
|
||||
{d}d
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ticker row (stats tab) */}
|
||||
{tab === "stats" && (
|
||||
<StaggerGroup className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
|
||||
<Ticker
|
||||
icon={<MessagesSquare className="size-4" />}
|
||||
label="Messages"
|
||||
value={stats?.total_messages ?? 0}
|
||||
data={spark}
|
||||
/>
|
||||
<Ticker
|
||||
icon={<Flag className="size-4" />}
|
||||
label="Flagged"
|
||||
value={flagged}
|
||||
data={flaggedSpark}
|
||||
tone="vermilion"
|
||||
/>
|
||||
<Ticker
|
||||
icon={<Users className="size-4" />}
|
||||
label="Active 24h"
|
||||
value={stats?.active_users_24h ?? 0}
|
||||
data={usersSpark}
|
||||
tone="amber"
|
||||
/>
|
||||
<Ticker
|
||||
icon={<ShieldCheck className="size-4" />}
|
||||
label="Recordings"
|
||||
value={stats?.total_voice_recordings ?? 0}
|
||||
data={spark}
|
||||
/>
|
||||
</StaggerGroup>
|
||||
)}
|
||||
|
||||
{tab === "users" && <UsersSection />}
|
||||
|
||||
{tab === "channels" && <ChannelsSection />}
|
||||
|
||||
{tab === "reactions" && <ReactionsSection />}
|
||||
<div className="grid gap-4 xl:grid-cols-3">
|
||||
<div className="space-y-4 xl:col-span-2">
|
||||
{tab === "stats" && (
|
||||
<>
|
||||
<ActivityChart data={daily} />
|
||||
<HourlyActivityChart data={activity?.hourly ?? []} />
|
||||
<TopChannelsChart channels={stats?.top_channels ?? []} />
|
||||
</>
|
||||
)}
|
||||
{tab === "users" && <UsersSection />}
|
||||
{tab === "channels" && <ChannelsSection />}
|
||||
{tab === "reactions" && <ReactionsSection />}
|
||||
</div>
|
||||
<div className="xl:col-span-1">
|
||||
<ModerationDonut stats={stats} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Hero({
|
||||
stats,
|
||||
activityRatio,
|
||||
health,
|
||||
}: {
|
||||
stats?: DashboardStats;
|
||||
activityRatio: number;
|
||||
health: number;
|
||||
}) {
|
||||
return (
|
||||
<div className="relative overflow-hidden rounded-[var(--radius-r)] bg-[var(--color-surface)] p-5">
|
||||
<div className="absolute inset-0 opacity-50">
|
||||
<SignalField activity={activityRatio} className="size-full" />
|
||||
</div>
|
||||
<div className="relative z-10 flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<div className="display text-3xl">Bete Console</div>
|
||||
<div className="mt-1 text-sm text-[var(--color-ink-soft)]">
|
||||
{stats?.total_messages?.toLocaleString() ?? 0} messages watched ·{" "}
|
||||
{stats?.total_users?.toLocaleString() ?? 0} users
|
||||
</div>
|
||||
</div>
|
||||
<RadialGauge
|
||||
value={health}
|
||||
size={132}
|
||||
label="Clean"
|
||||
tone={health > 0.8 ? "signal" : health > 0.6 ? "amber" : "vermilion"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Ticker({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
data,
|
||||
tone = "signal",
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
value: number;
|
||||
data: number[];
|
||||
tone?: "signal" | "amber" | "vermilion";
|
||||
}) {
|
||||
const color = {
|
||||
signal: "var(--color-signal)",
|
||||
amber: "var(--color-amber)",
|
||||
vermilion: "var(--color-vermilion)",
|
||||
}[tone];
|
||||
return (
|
||||
<StaggerItem className="surface scan-tick flex flex-col gap-2 p-4">
|
||||
<div className="flex items-center gap-2 text-[var(--color-ink-soft)]">
|
||||
<span style={{ color }}>{icon}</span>
|
||||
<span className="text-[11px] font-medium uppercase tracking-wide">
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
<div className="display text-2xl" style={{ color }}>
|
||||
{value.toLocaleString()}
|
||||
</div>
|
||||
<Sparkline
|
||||
data={data}
|
||||
width={220}
|
||||
height={32}
|
||||
stroke={color}
|
||||
className="w-full"
|
||||
/>
|
||||
</StaggerItem>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,25 +7,19 @@ import {
|
||||
ChatbotProvider,
|
||||
useChatbot,
|
||||
} from "@/components/chatbot/chatbot-context";
|
||||
import { AppSidebar } from "@/components/layout/app-sidebar";
|
||||
import { Spine } from "@/components/layout/spine";
|
||||
import { StatusBar } from "@/components/layout/status-bar";
|
||||
import { MiniPlayer } from "@/components/media/mini-player";
|
||||
import { RouteTransition } from "@/components/motion/route-transition";
|
||||
import { GuildSelector } from "@/components/shared/guild-selector";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import {
|
||||
SidebarInset,
|
||||
SidebarProvider,
|
||||
SidebarTrigger,
|
||||
} from "@/components/ui/sidebar";
|
||||
import { MediaPlayerProvider } from "@/lib/hooks/use-media-player";
|
||||
import { useWebSocket, WsProvider } from "@/lib/ws/context";
|
||||
|
||||
function ChatbotGuildSync({ guildId }: { guildId: string }) {
|
||||
const { setGuildId } = useChatbot();
|
||||
|
||||
useEffect(() => {
|
||||
setGuildId(guildId);
|
||||
}, [guildId, setGuildId]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -39,17 +33,12 @@ function ChatbotExpressionSync() {
|
||||
setTimeout(() => setExpression("idle"), 2000);
|
||||
}
|
||||
});
|
||||
|
||||
const unsub2 = ws.on("voice_active_user", () => {
|
||||
setExpression("listening");
|
||||
});
|
||||
|
||||
const unsub2 = ws.on("voice_active_user", () => setExpression("listening"));
|
||||
return () => {
|
||||
unsub1();
|
||||
unsub2();
|
||||
};
|
||||
}, [ws, setExpression]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -74,41 +63,27 @@ export default function DashboardLayout({
|
||||
<ChatbotProvider>
|
||||
<ChatbotGuildSync guildId={guildId} />
|
||||
<ChatbotExpressionSync />
|
||||
<div className="min-h-svh bg-canvas">
|
||||
<SidebarProvider>
|
||||
<AppSidebar />
|
||||
<SidebarInset className="gap-0">
|
||||
<header className="flex h-14 shrink-0 items-center gap-2 border-b px-4 bg-canvas">
|
||||
<SidebarTrigger className="-ml-1" />
|
||||
<Separator
|
||||
orientation="vertical"
|
||||
className="mr-2 h-6 max-md:hidden"
|
||||
/>
|
||||
<div className="font-semibold max-md:hidden">Overview</div>
|
||||
<div className="ms-auto">
|
||||
<GuildSelector
|
||||
value={guildId}
|
||||
onChange={(g) => setGuildId(g ?? "")}
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="flex flex-1 flex-col gap-4 p-4 pb-28 md:p-6 lg:pb-8">
|
||||
<div className="mx-auto w-full max-w-[1440px]">
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="flex h-[60vh] items-center justify-center">
|
||||
<div className="size-8 rounded-full border-2 border-primary border-t-transparent animate-spin" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{children}
|
||||
</Suspense>
|
||||
</div>
|
||||
</main>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
|
||||
<div className="min-h-svh bg-[var(--color-canvas)] md:pl-[68px]">
|
||||
<Spine />
|
||||
<div className="flex min-h-svh flex-col">
|
||||
<StatusBar
|
||||
guildId={guildId}
|
||||
onGuildChange={(g) => setGuildId(g)}
|
||||
/>
|
||||
<main className="flex flex-1 flex-col gap-4 p-4 pb-24 md:p-6 lg:pb-8">
|
||||
<div className="mx-auto w-full max-w-[1440px]">
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="flex h-[60vh] items-center justify-center">
|
||||
<div className="size-8 animate-spin rounded-full border-2 border-[var(--color-signal)] border-t-transparent" />
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<RouteTransition>{children}</RouteTransition>
|
||||
</Suspense>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<MiniPlayer />
|
||||
<ChatbotContainer />
|
||||
</div>
|
||||
|
||||
@@ -1,7 +1,30 @@
|
||||
"use client";
|
||||
|
||||
import { MusicPlayer } from "@/components/media/music-player";
|
||||
import {
|
||||
Pause,
|
||||
Play,
|
||||
Repeat2,
|
||||
SkipForward,
|
||||
Square,
|
||||
Volume2,
|
||||
} from "lucide-react";
|
||||
import { motion } from "motion/react";
|
||||
import { useEffect } from "react";
|
||||
import { Waveform } from "@/components/charts/waveform";
|
||||
import { StaggerGroup, StaggerItem } from "@/components/motion/stagger";
|
||||
import { Avatar } from "@/components/primitives/avatar";
|
||||
import { Badge } from "@/components/primitives/badge";
|
||||
import { Button } from "@/components/primitives/button";
|
||||
import { Progress } from "@/components/primitives/progress";
|
||||
import {
|
||||
useMediaLoop,
|
||||
useMediaSkip,
|
||||
useMediaState,
|
||||
useMediaStop,
|
||||
useMediaWsSync,
|
||||
} from "@/hooks";
|
||||
import type { MediaState } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
|
||||
export default function MediaView({
|
||||
@@ -10,10 +33,140 @@ export default function MediaView({
|
||||
initialStatus?: MediaState;
|
||||
}) {
|
||||
const ws = useWebSocket();
|
||||
const { data: state, mutate } = useMediaState(initialStatus);
|
||||
const skip = useMediaSkip();
|
||||
const stop = useMediaStop();
|
||||
const loopMut = useMediaLoop();
|
||||
useMediaWsSync(ws);
|
||||
|
||||
const current = state?.current;
|
||||
const playing = state?.playing ?? false;
|
||||
const queue = state?.queue ?? [];
|
||||
const loop = state?.loop ?? false;
|
||||
|
||||
const duration = current?.durationMs ?? 0;
|
||||
const [seed] = useWaveformSeed();
|
||||
|
||||
return (
|
||||
<div className="space-y-5 animate-fade-in-up">
|
||||
<MusicPlayer ws={ws} initialData={initialStatus} />
|
||||
<div className="flex flex-col gap-5">
|
||||
{/* Turntable hero */}
|
||||
<div className="flex items-center gap-6 surface scan-tick flex-wrap p-5">
|
||||
{current && (
|
||||
<motion.div
|
||||
className={cn(
|
||||
"relative mx-auto size-[160px] rounded-full",
|
||||
playing && "animate-spin-disc",
|
||||
!playing && "animate-spin-disc paused",
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src={current.thumbnailUrl ?? "/favicon.ico"}
|
||||
alt={current.title}
|
||||
className="size-full rounded-full object-cover ring-4 ring-[var(--color-signal)]/20"
|
||||
style={{ animationPlayState: playing ? "running" : "paused" }}
|
||||
/>
|
||||
</motion.div>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="display text-2xl text-[var(--color-signal)]">
|
||||
{current?.title ?? "No track playing"}
|
||||
</div>
|
||||
<div className="mt-1 mono text-xs text-[var(--color-ink-soft)]">
|
||||
{current?.source ?? "idle"} · {duration ? formatMs(duration) : "—"}
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<Progress value={42} max={100} tone="signal" />
|
||||
<div className="mt-1 flex justify-between text-[10px] mono text-[var(--color-ink-soft)]">
|
||||
<span>0:00</span>
|
||||
<span>{duration ? formatMs(duration) : "—"}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Transport */}
|
||||
<StaggerGroup className="flex items-center gap-2">
|
||||
<StaggerItem>
|
||||
<Button size="sm" variant="ghost" onClick={() => skip.mutate()}>
|
||||
<SkipForward className="size-4" />
|
||||
</Button>
|
||||
</StaggerItem>
|
||||
<StaggerItem>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="primary"
|
||||
onClick={() => loopMut.mutate(!loop)}
|
||||
>
|
||||
{playing ? (
|
||||
<Pause className="size-5" />
|
||||
) : (
|
||||
<Play className="size-5" />
|
||||
)}
|
||||
</Button>
|
||||
</StaggerItem>
|
||||
<StaggerItem>
|
||||
<Button size="sm" variant="ghost" onClick={() => stop.mutate()}>
|
||||
<Square className="size-4" />
|
||||
</Button>
|
||||
</StaggerItem>
|
||||
<StaggerItem>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={loop ? "primary" : "ghost"}
|
||||
onClick={() => loopMut.mutate(!loop)}
|
||||
>
|
||||
<Repeat2 className="size-4" />
|
||||
</Button>
|
||||
</StaggerItem>
|
||||
<StaggerItem>
|
||||
<Volume2 className="size-4 text-[var(--color-ink-soft)]" />
|
||||
</StaggerItem>
|
||||
</StaggerGroup>
|
||||
|
||||
{/* Queue */}
|
||||
{queue.length > 0 && (
|
||||
<div className="surface flex flex-col gap-1.5 p-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold">Queue ({queue.length})</h3>
|
||||
<Badge tone="neutral">{loop ? "loop" : "queue"}</Badge>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
{queue.map((item, i) => (
|
||||
<motion.div
|
||||
key={item.id ?? i}
|
||||
layout
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: 20 }}
|
||||
className="flex items-center gap-2.5 rounded-[var(--radius-r-control)] px-2 py-1.5 text-sm hover:bg-[var(--color-surface-2)]"
|
||||
>
|
||||
<Waveform
|
||||
seed={item.id ?? String(i)}
|
||||
bars={12}
|
||||
height={20}
|
||||
className="w-16"
|
||||
/>
|
||||
<span className="mono truncate">{item.title}</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function formatMs(ms: number): string {
|
||||
const m = Math.floor(ms / 60000);
|
||||
const s = Math.floor((ms % 60000) / 1000);
|
||||
return `${m}:${s.toString().padStart(2, "0")}`;
|
||||
}
|
||||
|
||||
function useWaveformSeed() {
|
||||
const [seed] = useStateValue();
|
||||
return [seed];
|
||||
}
|
||||
function useStateValue(): [string] {
|
||||
// lightweight deterministic seed so waveform shape is stable per session
|
||||
return ["media-waveform"];
|
||||
}
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
/**
|
||||
* Messages page — Server Component.
|
||||
*
|
||||
* Reads the URL (guild/channel/tab/selected) on the server and, when a guild
|
||||
* is already selected, fetches the first message page server-side so the
|
||||
* initial list is server-rendered, not a client round-trip.
|
||||
* Messages — Server Component.
|
||||
* Reads URL guild/channel/selected/tab on the server; seeds first page SSR.
|
||||
*/
|
||||
import { getMessages, type MessagePageResult } from "@/lib/api/server";
|
||||
import { getMessages } from "@/lib/api/server";
|
||||
import MessagesView from "./view";
|
||||
|
||||
export default async function MessagesPage({
|
||||
@@ -22,7 +19,7 @@ export default async function MessagesPage({
|
||||
? (sp.tab as "all" | "images" | "review")
|
||||
: "all";
|
||||
|
||||
let initialPage: MessagePageResult | undefined;
|
||||
let initialPage;
|
||||
if (guild) {
|
||||
initialPage = await getMessages(guild, channel || undefined).catch(
|
||||
() => undefined,
|
||||
|
||||
@@ -1,24 +1,20 @@
|
||||
"use client";
|
||||
|
||||
import { Flag, Image, Loader2, Search } from "lucide-react";
|
||||
import { Flag, Image, Loader2, Search, Send, X } from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { SubNav } from "@/components/layout/sub-nav";
|
||||
import { Lightbox } from "@/components/messages/lightbox";
|
||||
import { extractFirstImage } from "@/components/messages/message-card";
|
||||
import { MessageDetailView } from "@/components/messages/message-detail-view";
|
||||
import { MessageList } from "@/components/messages/message-list";
|
||||
import { SearchOverlay } from "@/components/messages/search-overlay";
|
||||
import { StaggerGroup, StaggerItem } from "@/components/motion/stagger";
|
||||
import { Avatar } from "@/components/primitives/avatar";
|
||||
import { Badge } from "@/components/primitives/badge";
|
||||
import { Dialog } from "@/components/primitives/dialog";
|
||||
import { Input } from "@/components/primitives/input";
|
||||
import { Select } from "@/components/primitives/select";
|
||||
import { EmptyState, ErrorState, LoadingSkeleton } from "@/components/shared";
|
||||
import { GuildSelector } from "@/components/shared/guild-selector";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
useImages,
|
||||
useLoadMore,
|
||||
@@ -44,11 +40,6 @@ interface MessagesViewProps {
|
||||
initialMessagePage?: { data: MessageRecord[]; nextCursor: string | null };
|
||||
}
|
||||
|
||||
/**
|
||||
* Messages view — hydrated on the client. Initial guild/channel/detail/tab
|
||||
* come from the URL (server-read on first SSR), and the first message page is
|
||||
* seeded from the server when a guild is already selected.
|
||||
*/
|
||||
export default function MessagesView({
|
||||
initialGuild = "",
|
||||
initialChannel = "",
|
||||
@@ -87,16 +78,11 @@ export default function MessagesView({
|
||||
const loadMoreMut = useLoadMore();
|
||||
const { data: images } = useImages(guildId);
|
||||
const { data: reviews } = useReview(selectedChannel || undefined);
|
||||
|
||||
const {
|
||||
message: detailMessage,
|
||||
attachments: detailAttachments,
|
||||
loading: detailLoading,
|
||||
} = useMessageDetail(detailId);
|
||||
const { message: detailMessage, loading: detailLoading } =
|
||||
useMessageDetail(detailId);
|
||||
|
||||
useMessagesWsSync(ws, guildId);
|
||||
|
||||
// Sync state to URL
|
||||
useEffect(() => {
|
||||
const params = new URLSearchParams();
|
||||
if (guildId) params.set("guild", guildId);
|
||||
@@ -106,16 +92,16 @@ export default function MessagesView({
|
||||
router.replace(`/messages?${params.toString()}`, { scroll: false });
|
||||
}, [guildId, selectedChannel, detailId, tab, router]);
|
||||
|
||||
// Global Cmd+K search trigger
|
||||
// global Cmd+K
|
||||
useEffect(() => {
|
||||
const handleKey = (e: KeyboardEvent) => {
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === "k") {
|
||||
e.preventDefault();
|
||||
setSearchOpen(true);
|
||||
}
|
||||
};
|
||||
document.addEventListener("keydown", handleKey);
|
||||
return () => document.removeEventListener("keydown", handleKey);
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => document.removeEventListener("keydown", onKey);
|
||||
}, []);
|
||||
|
||||
const handleLoadMore = useCallback(() => {
|
||||
@@ -133,154 +119,152 @@ export default function MessagesView({
|
||||
setDetailId(null);
|
||||
}, []);
|
||||
|
||||
const subNavTabs = [
|
||||
const tabs: { id: MessagesTab; label: string; icon: React.ReactNode }[] = [
|
||||
{ id: "all", label: "All", icon: null },
|
||||
{ id: "images", label: "Images", icon: <Image className="size-3" /> },
|
||||
{ id: "review", label: "Review", icon: <Flag className="size-3" /> },
|
||||
{ id: "images", label: "Images", icon: <Image className="size-3.5" /> },
|
||||
{ id: "review", label: "Review", icon: <Flag className="size-3.5" /> },
|
||||
];
|
||||
|
||||
const currentMessages = messages ?? [];
|
||||
|
||||
return (
|
||||
<div className="animate-fade-in-up space-y-4">
|
||||
{/* ── Controls bar ── */}
|
||||
<div className="flex flex-col gap-4">
|
||||
{/* Controls */}
|
||||
<div className="flex items-center gap-3">
|
||||
<GuildSelector value={guildId} onChange={handleGuildChange} />
|
||||
{channels.length > 0 && (
|
||||
<Select
|
||||
value={selectedChannel}
|
||||
onValueChange={(v) => setSelectedChannel(v ?? "")}
|
||||
onChange={(e) => setSelectedChannel(e.target.value || "")}
|
||||
className="w-48"
|
||||
>
|
||||
<SelectTrigger className="h-9 w-48">
|
||||
<SelectValue placeholder="All channels" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">All channels</SelectItem>
|
||||
{channels.map((ch) => (
|
||||
<SelectItem key={ch.id} value={ch.id}>
|
||||
# {ch.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
<option value="">All channels</option>
|
||||
{channels.map((ch) => (
|
||||
<option key={ch.id} value={ch.id}>
|
||||
# {ch.name}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setSearchOpen(true)}
|
||||
className="ml-auto flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs text-text-secondary/60 hover:text-text-primary glass hover:glass-elevated transition-all"
|
||||
className="ms-auto flex items-center gap-1.5 rounded-[var(--radius-r-control)] px-3 py-1.5 text-xs text-[var(--color-ink-soft)] hover:text-[var(--color-ink)]"
|
||||
>
|
||||
<Search className="size-3.5" />
|
||||
Search
|
||||
<span className="hidden font-mono text-[10px] text-text-secondary/30 sm:inline">
|
||||
⌘K
|
||||
</span>
|
||||
Search{" "}
|
||||
<span className="hidden font-mono text-[10px] sm:inline">(⌘K)</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ── Sub navigation ── */}
|
||||
<SubNav
|
||||
tabs={subNavTabs}
|
||||
activeTab={tab}
|
||||
onTabChange={(t) => setTab(t as MessagesTab)}
|
||||
/>
|
||||
|
||||
{/* ── Split pane ── */}
|
||||
{error ? (
|
||||
<ErrorState message={error.message} onRetry={refetch} />
|
||||
) : !messages ? (
|
||||
<LoadingSkeleton count={6} height="h-20" />
|
||||
) : (
|
||||
<div className="flex gap-4">
|
||||
{/* Left pane */}
|
||||
<div
|
||||
className={cn("space-y-2", detailId ? "w-1/2 lg:w-2/5" : "w-full")}
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-1 rounded-[var(--radius-r)] bg-[var(--color-surface-2)] p-1">
|
||||
{tabs.map((t) => (
|
||||
<button
|
||||
key={t.id}
|
||||
type="button"
|
||||
onClick={() => setTab(t.id)}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 rounded-[var(--radius-r-control)] px-3 py-1.5 text-xs font-medium transition-colors",
|
||||
tab === t.id
|
||||
? "bg-[var(--color-signal)] text-[var(--color-signal-ink)]"
|
||||
: "text-[var(--color-ink-soft)] hover:text-[var(--color-ink)]",
|
||||
)}
|
||||
>
|
||||
{tab === "all" && (
|
||||
<MessageList
|
||||
messages={currentMessages}
|
||||
selectedId={detailId}
|
||||
onSelect={setDetailId}
|
||||
hasMore={cursorData?.hasMore}
|
||||
onLoadMore={handleLoadMore}
|
||||
isLoadingMore={loadMoreMut.isPending}
|
||||
/>
|
||||
)}
|
||||
{tab === "images" && (
|
||||
<ImageGrid items={images ?? []} onSelect={setDetailId} />
|
||||
)}
|
||||
{tab === "review" && (
|
||||
<ReviewList items={reviews ?? []} onSelect={setDetailId} />
|
||||
)}
|
||||
</div>
|
||||
{t.icon}
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Right pane — message detail */}
|
||||
{detailId && (
|
||||
<div className="sticky top-16 hidden w-1/2 self-start md:block lg:w-3/5">
|
||||
<div className="flex gap-4">
|
||||
{/* Left — timeline spine + entries */}
|
||||
<div
|
||||
className={cn("surface p-3", detailId ? "w-1/2 lg:w-2/5" : "w-full")}
|
||||
>
|
||||
{error ? (
|
||||
<ErrorState message={error.message} onRetry={refetch} />
|
||||
) : !messages ? (
|
||||
<LoadingSkeleton count={6} />
|
||||
) : tab === "all" ? (
|
||||
<MessageList
|
||||
messages={currentMessages}
|
||||
selectedId={detailId}
|
||||
onSelect={setDetailId}
|
||||
hasMore={cursorData?.hasMore}
|
||||
onLoadMore={handleLoadMore}
|
||||
isLoadingMore={loadMoreMut.isPending}
|
||||
/>
|
||||
) : tab === "images" ? (
|
||||
<ImageGrid items={images ?? []} onSelect={setDetailId} />
|
||||
) : (
|
||||
<ReviewList items={reviews ?? []} onSelect={setDetailId} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right — detail */}
|
||||
{detailId && (
|
||||
<div className="sticky top-16 hidden w-1/2 self-start md:block lg:w-3/5">
|
||||
<div className="surface h-full p-4">
|
||||
{detailLoading ? (
|
||||
<Card
|
||||
className={cn(
|
||||
"flex items-center justify-center py-12",
|
||||
"[--card-spacing:0px]",
|
||||
)}
|
||||
>
|
||||
<Loader2 className="size-5 animate-spin text-text-secondary/60" />
|
||||
</Card>
|
||||
<div className="flex h-40 items-center justify-center">
|
||||
<Loader2 className="size-5 animate-spin text-[var(--color-ink-soft)]" />
|
||||
</div>
|
||||
) : detailMessage ? (
|
||||
<div className="space-y-3">
|
||||
<div className="flex flex-col gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setDetailId(null)}
|
||||
className="text-xs text-text-secondary/60 hover:text-text-primary transition-colors"
|
||||
className="text-xs text-[var(--color-ink-soft)] hover:text-[var(--color-ink)]"
|
||||
>
|
||||
← Back to list
|
||||
← Back to list
|
||||
</button>
|
||||
<MessageDetailView
|
||||
message={detailMessage}
|
||||
attachments={detailAttachments}
|
||||
onImageClick={(index) => {
|
||||
const imgs = (detailAttachments ?? [])
|
||||
.filter((a) => a.type?.startsWith("image/"))
|
||||
.map((a) => ({
|
||||
src: a.uploaded_url || a.discord_url,
|
||||
alt: a.filename,
|
||||
}));
|
||||
if (imgs.length > 0) {
|
||||
setLightbox({ images: imgs, index });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<MessageDetailView message={detailMessage} />
|
||||
{detailMessage && (
|
||||
<Lightbox
|
||||
open={!!lightbox}
|
||||
onClose={() => setLightbox(null)}
|
||||
images={extractImages(detailMessage.metadata)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Search overlay ── */}
|
||||
<SearchOverlay
|
||||
open={searchOpen}
|
||||
onClose={() => setSearchOpen(false)}
|
||||
onSelect={(id) => {
|
||||
setDetailId(id);
|
||||
results={(currentMessages ?? []).map((m) => ({
|
||||
id: m.id,
|
||||
content: m.edited_content ?? m.content,
|
||||
username: m.username ?? "unknown",
|
||||
channel: m.channel_id,
|
||||
time: m.created_at
|
||||
? new Date(m.created_at * 1000).toLocaleTimeString()
|
||||
: "",
|
||||
}))}
|
||||
onSelect={(msg) => {
|
||||
const found = currentMessages.find((m) => m.id === msg.id);
|
||||
if (found) setDetailId(found.id);
|
||||
setTab("all");
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* ── Lightbox ── */}
|
||||
{lightbox && (
|
||||
<Lightbox
|
||||
open={!!lightbox}
|
||||
onClose={() => setLightbox(null)}
|
||||
images={lightbox.images}
|
||||
initialIndex={lightbox.index}
|
||||
open
|
||||
onClose={() => setLightbox(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Inline ImageGrid (glass-styled) ────────────────
|
||||
|
||||
function ImageGrid({
|
||||
items,
|
||||
onSelect,
|
||||
@@ -288,46 +272,42 @@ function ImageGrid({
|
||||
items: MessageRecord[];
|
||||
onSelect: (id: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
return !items.length ? (
|
||||
<EmptyState
|
||||
icon={Image}
|
||||
title="No images"
|
||||
description="Messages with image attachments will appear here."
|
||||
/>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 gap-2.5">
|
||||
{items.map((item) => {
|
||||
const imgUrl = extractFirstImage(item.metadata);
|
||||
const url = extractFirstImage(item.metadata);
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
onClick={() => onSelect(item.id)}
|
||||
className="glass overflow-hidden rounded-lg transition-transform hover:scale-[1.02]"
|
||||
className="overflow-hidden rounded-[var(--radius-r)] border border-[var(--color-hairline)]"
|
||||
>
|
||||
{imgUrl ? (
|
||||
{url ? (
|
||||
<img
|
||||
src={imgUrl}
|
||||
src={url}
|
||||
alt=""
|
||||
className="h-24 w-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex h-24 w-full items-center justify-center text-xs text-text-secondary/40">
|
||||
<div className="flex h-24 w-full items-center justify-center text-xs text-[var(--color-ink-soft)]/40">
|
||||
No image
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
{items.length === 0 && (
|
||||
<EmptyState
|
||||
icon={Image}
|
||||
title="No images"
|
||||
description="Messages with image attachments will show up here."
|
||||
className="col-span-3"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Inline ReviewList (glass-styled) ────────────────
|
||||
|
||||
function ReviewList({
|
||||
items,
|
||||
onSelect,
|
||||
@@ -335,36 +315,63 @@ function ReviewList({
|
||||
items: MessageRecord[];
|
||||
onSelect: (id: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
return !items.length ? (
|
||||
<EmptyState
|
||||
icon={Flag}
|
||||
title="No flagged messages"
|
||||
description="Review-flagged messages will appear here."
|
||||
/>
|
||||
) : (
|
||||
<StaggerGroup className="space-y-2">
|
||||
{items.map((item) => (
|
||||
<Card
|
||||
key={item.id}
|
||||
className={cn(
|
||||
"cursor-pointer p-3",
|
||||
"border border-red-500/30 ring-red-500/20",
|
||||
"[--card-spacing:0px]",
|
||||
"rounded-2xl",
|
||||
)}
|
||||
onClick={() => onSelect(item.id)}
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
<Flag className="mt-0.5 size-3.5 shrink-0 text-accent-purple" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="line-clamp-2 text-xs text-text-secondary">
|
||||
{renderMessageContent(item.content, item.metadata) || item.id}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<StaggerItem key={item.id} className="surface p-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSelect(item.id)}
|
||||
className="flex items-start gap-2 w-full text-left"
|
||||
>
|
||||
<Flag className="mt-0.5 size-3.5 shrink-0 text-[var(--color-vermilion)]" />
|
||||
<p className="line-clamp-2 text-xs text-[var(--color-ink-soft)]">
|
||||
{renderMessageContent(item.content, item.metadata) || item.id}
|
||||
</p>
|
||||
</button>
|
||||
</StaggerItem>
|
||||
))}
|
||||
{items.length === 0 && (
|
||||
<EmptyState
|
||||
icon={Flag}
|
||||
title="No flagged messages"
|
||||
description="Messages flagged by AI moderation will appear here for review."
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</StaggerGroup>
|
||||
);
|
||||
}
|
||||
|
||||
function extractFirstImage(metadata?: string | null): string | null {
|
||||
try {
|
||||
if (!metadata) return null;
|
||||
const m = JSON.parse(metadata);
|
||||
const atts = m?.attachments ?? [];
|
||||
const img = atts.find(
|
||||
(a: {
|
||||
contentType?: string | null;
|
||||
url?: string;
|
||||
discord_url?: string;
|
||||
}) => /image/i.test(a.contentType ?? ""),
|
||||
);
|
||||
return img?.url ?? img?.discord_url ?? null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function extractImages(metadata?: string | null) {
|
||||
try {
|
||||
if (!metadata) return [];
|
||||
const m = JSON.parse(metadata);
|
||||
return (m?.attachments ?? [])
|
||||
.filter((a: { contentType?: string | null }) =>
|
||||
/image/i.test(a.contentType ?? ""),
|
||||
)
|
||||
.map((a: { url?: string; discord_url?: string; name?: string }) => ({
|
||||
src: a.url ?? a.discord_url ?? "",
|
||||
alt: a.name,
|
||||
}));
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,24 +1,25 @@
|
||||
/**
|
||||
* Moderation page — Server Component. Seeds summary + action log from
|
||||
* server-fetched moderation state (shared across all users).
|
||||
* Moderation — Server Component.
|
||||
* Seeds moderation stats + action log for SSR first paint; live via WS.
|
||||
*/
|
||||
import { ModerationSection } from "@/components/moderation/moderation-section";
|
||||
import { getModerationActions, getModerationStats } from "@/lib/api/server";
|
||||
import ModerationView from "./view";
|
||||
|
||||
export default async function ModerationPage() {
|
||||
const [stats, actions] = await Promise.allSettled([
|
||||
getModerationStats(),
|
||||
getModerationActions(100),
|
||||
getModerationStats().catch(() => undefined),
|
||||
getModerationActions(100).catch(() => undefined),
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className="space-y-4 animate-fade-in-up">
|
||||
<ModerationSection
|
||||
initialStats={stats.status === "fulfilled" ? stats.value : undefined}
|
||||
initialActions={
|
||||
actions.status === "fulfilled" ? actions.value : undefined
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<ModerationView
|
||||
initialStats={
|
||||
stats.status === "fulfilled" && stats.value ? stats.value : undefined
|
||||
}
|
||||
initialActions={
|
||||
actions.status === "fulfilled" && actions.value
|
||||
? actions.value
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { ModerationSection } from "@/components/moderation/moderation-section";
|
||||
import type { ModerationAction, ModerationStats } from "@/lib/types";
|
||||
|
||||
export default function ModerationView({
|
||||
initialStats,
|
||||
initialActions,
|
||||
}: {
|
||||
initialStats?: ModerationStats;
|
||||
initialActions?: ModerationAction[];
|
||||
}) {
|
||||
return (
|
||||
<ModerationSection
|
||||
initialStats={initialStats}
|
||||
initialActions={initialActions}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,12 +1,12 @@
|
||||
/**
|
||||
* Recordings page — Server Component. Seeds the library from server-fetched
|
||||
* recordings; live `voice_recording_uploaded` events keep it fresh over WS.
|
||||
* Recordings — Server Component.
|
||||
* Seeds the library from server-fetched recordings; live `voice_recording_uploaded`
|
||||
* events (synced in the client View via WS) keep it fresh.
|
||||
*/
|
||||
import { getRecordings } from "@/lib/api/server";
|
||||
import RecordingsView from "./view";
|
||||
|
||||
export default async function RecordingsPage() {
|
||||
const data = await getRecordings(50).catch(() => undefined);
|
||||
|
||||
return <RecordingsView initialRecordings={data?.items} />;
|
||||
}
|
||||
|
||||
@@ -1,189 +1,200 @@
|
||||
"use client";
|
||||
|
||||
import { Clock, Database, Mic, Users } from "lucide-react";
|
||||
import { useMemo, useRef, useState } from "react";
|
||||
import { StatCard } from "@/components/dashboard/stat-card";
|
||||
import { SubNav } from "@/components/layout/sub-nav";
|
||||
import { RecordingCard } from "@/components/recordings/recording-card";
|
||||
import { RecordingPlayer } from "@/components/recordings/recording-player";
|
||||
import { EmptyState, ErrorState, LoadingSkeleton } from "@/components/shared";
|
||||
import { useRecordings, useRecordingsWsSync } from "@/hooks";
|
||||
import { formatBytes } from "@/lib/format";
|
||||
import { Delete, Download, Play } from "lucide-react";
|
||||
import { AnimatePresence, motion } from "motion/react";
|
||||
import { useCallback, useState } from "react";
|
||||
import { Waveform } from "@/components/charts/waveform";
|
||||
import { StaggerGroup, StaggerItem } from "@/components/motion/stagger";
|
||||
import { Avatar } from "@/components/primitives/avatar";
|
||||
import { Badge } from "@/components/primitives/badge";
|
||||
import { Button } from "@/components/primitives/button";
|
||||
import { Dialog } from "@/components/primitives/dialog";
|
||||
import {
|
||||
useDeleteRecording,
|
||||
useRecordings,
|
||||
useRecordingsWsSync,
|
||||
} from "@/hooks";
|
||||
import type { VoiceRecording } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
|
||||
type RecordingsTab = "library" | "stats";
|
||||
interface RecordingsListProps {
|
||||
recordings: VoiceRecording[];
|
||||
error: Error | null;
|
||||
isLoading: boolean;
|
||||
deleting: string | null;
|
||||
onSelect: (rec: VoiceRecording) => void;
|
||||
onDelete: (rec: VoiceRecording) => void;
|
||||
preview: VoiceRecording | null;
|
||||
onClosePreview: () => void;
|
||||
}
|
||||
|
||||
function RecordingsList({
|
||||
recordings,
|
||||
error,
|
||||
isLoading,
|
||||
deleting,
|
||||
onSelect,
|
||||
onDelete,
|
||||
preview,
|
||||
onClosePreview,
|
||||
}: RecordingsListProps) {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="h-16 surface animate-shimmer" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
if (error)
|
||||
return (
|
||||
<p className="text-sm text-[var(--color-vermilion)]">
|
||||
Failed to load: {error.message}
|
||||
</p>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<AnimatePresence>
|
||||
{recordings.map((rec) => (
|
||||
<StaggerItem key={rec.id} className="surface p-3" layout>
|
||||
<motion.div layout className="flex items-center gap-3">
|
||||
<Waveform
|
||||
seed={rec.id}
|
||||
bars={20}
|
||||
height={40}
|
||||
className="w-20 shrink-0"
|
||||
/>
|
||||
<Avatar name={rec.username} src={rec.avatar_url} size={34} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="font-medium">
|
||||
{rec.username ?? "unknown"}
|
||||
</span>
|
||||
<Badge
|
||||
tone={
|
||||
rec.upload_status === "uploaded"
|
||||
? "signal"
|
||||
: rec.upload_status === "failed"
|
||||
? "vermilion"
|
||||
: "amber"
|
||||
}
|
||||
>
|
||||
.{rec.filename.split(".").pop() ?? "mp3"}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="mono text-xs text-[var(--color-ink-soft)]">
|
||||
{(rec.size_bytes / 1024).toFixed(0)} KB ·{" "}
|
||||
{new Date(rec.created_at * 1000).toLocaleTimeString()}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{rec.download_url && (
|
||||
<>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => onSelect(rec)}
|
||||
>
|
||||
<Play className="size-4" />
|
||||
</Button>
|
||||
<a
|
||||
href={rec.download_url}
|
||||
download={rec.filename}
|
||||
aria-label="Download"
|
||||
className="flex size-9 items-center justify-center rounded-[var(--radius-r-control)] text-xs text-[var(--color-ink-soft)] hover:bg-[var(--color-surface-2)]"
|
||||
>
|
||||
<Download className="size-4" />
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="danger"
|
||||
disabled={deleting === rec.id}
|
||||
onClick={() => onDelete(rec)}
|
||||
aria-label="Delete"
|
||||
>
|
||||
<Delete className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</StaggerItem>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
<PreviewDialog
|
||||
open={!!preview}
|
||||
onClose={onClosePreview}
|
||||
recording={preview}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PreviewDialog({
|
||||
open,
|
||||
onClose,
|
||||
recording,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
recording: VoiceRecording | null;
|
||||
}) {
|
||||
if (!recording) return null;
|
||||
return (
|
||||
<Dialog open={open} onClose={onClose} className="p-6 max-w-xl">
|
||||
<div className="space-y-3">
|
||||
<div className="display text-lg text-[var(--color-signal)]">
|
||||
{recording.filename}
|
||||
</div>
|
||||
<audio controls src={recording.download_url ?? ""} className="w-full" />
|
||||
<div className="mono text-xs text-[var(--color-ink-soft)]">
|
||||
{(recording.size_bytes / 1024).toFixed(0)} KB ·{" "}
|
||||
{recording.upload_status}
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
export default function RecordingsView({
|
||||
initialRecordings,
|
||||
}: {
|
||||
initialRecordings?: VoiceRecording[];
|
||||
}) {
|
||||
const {
|
||||
data: recordings,
|
||||
error,
|
||||
mutate: refetch,
|
||||
} = useRecordings(initialRecordings);
|
||||
const [playingId, setPlayingId] = useState<string | null>(null);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [isLoadingAudio, setIsLoadingAudio] = useState(false);
|
||||
const [tab, setTab] = useState<RecordingsTab>("library");
|
||||
const ws = useWebSocket();
|
||||
const audioRef = useRef<HTMLAudioElement | null>(null);
|
||||
|
||||
// Live-update the library when the gateway publishes voice_recording_uploaded
|
||||
const {
|
||||
data: recordings = [],
|
||||
error,
|
||||
isLoading,
|
||||
} = useRecordings(initialRecordings);
|
||||
const del = useDeleteRecording();
|
||||
const [deleting, setDeleting] = useState<string | null>(null);
|
||||
useRecordingsWsSync(ws);
|
||||
|
||||
const currentTrack =
|
||||
playingId && recordings
|
||||
? recordings.find((r: VoiceRecording) => r.id === playingId)
|
||||
: null;
|
||||
const handleDelete = useCallback(
|
||||
(rec: VoiceRecording) => {
|
||||
setDeleting(rec.id);
|
||||
del.mutate(rec.id);
|
||||
setTimeout(() => setDeleting(null), 800);
|
||||
},
|
||||
[del],
|
||||
);
|
||||
|
||||
const togglePlay = (id: string) => {
|
||||
if (playingId !== id) {
|
||||
setPlayingId(id); // RecordingPlayer picks up the new url + autoplays
|
||||
} else {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
if (audio.paused) audio.play().catch(() => {});
|
||||
else audio.pause();
|
||||
}
|
||||
};
|
||||
|
||||
const stats = useMemo(() => {
|
||||
const list = recordings ?? [];
|
||||
const totalSize = list.reduce((sum, r) => sum + (r.size_bytes ?? 0), 0);
|
||||
const byUser = new Map<
|
||||
string,
|
||||
{ name: string; count: number; size: number }
|
||||
>();
|
||||
for (const rec of list) {
|
||||
const key = rec.user_id ?? rec.username;
|
||||
const cur = byUser.get(key) ?? { name: rec.username, count: 0, size: 0 };
|
||||
cur.count += 1;
|
||||
cur.size += rec.size_bytes ?? 0;
|
||||
byUser.set(key, cur);
|
||||
}
|
||||
const topUsers = [...byUser.values()]
|
||||
.sort((a, b) => b.count - a.count)
|
||||
.slice(0, 8);
|
||||
return {
|
||||
total: list.length,
|
||||
totalSize,
|
||||
uniqueUsers: byUser.size,
|
||||
topUsers,
|
||||
};
|
||||
}, [recordings]);
|
||||
const [preview, setPreview] = useState<VoiceRecording | null>(null);
|
||||
|
||||
return (
|
||||
<div className="space-y-4 animate-fade-in-up">
|
||||
<SubNav
|
||||
tabs={[
|
||||
{ id: "library", label: "Library", icon: undefined },
|
||||
{ id: "stats", label: "Stats", icon: undefined },
|
||||
]}
|
||||
activeTab={tab}
|
||||
onTabChange={(t) => setTab(t as RecordingsTab)}
|
||||
/>
|
||||
|
||||
{tab === "library" &&
|
||||
(error ? (
|
||||
<ErrorState message={error.message} onRetry={refetch} />
|
||||
) : !recordings ? (
|
||||
<LoadingSkeleton count={4} height="h-28" />
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{(recordings ?? []).map((rec: VoiceRecording) => (
|
||||
<RecordingCard
|
||||
key={rec.id}
|
||||
recording={rec}
|
||||
active={playingId === rec.id}
|
||||
playing={playingId === rec.id && isPlaying}
|
||||
loading={playingId === rec.id && isLoadingAudio}
|
||||
onTogglePlay={togglePlay}
|
||||
/>
|
||||
))}
|
||||
{(recordings ?? []).length === 0 && (
|
||||
<EmptyState
|
||||
icon={Mic}
|
||||
title="No records yet"
|
||||
description="Voice recordings will appear here once members speak in a monitored voice channel."
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{tab === "stats" &&
|
||||
(!recordings ? (
|
||||
<LoadingSkeleton count={4} height="h-28" columns={3} />
|
||||
) : stats.total === 0 ? (
|
||||
<EmptyState
|
||||
icon={Clock}
|
||||
title="No recording stats yet"
|
||||
description="Recordings are captured from monitored voice channels."
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
||||
<StatCard
|
||||
label="Total Recordings"
|
||||
value={stats.total}
|
||||
icon={Mic}
|
||||
/>
|
||||
<StatCard
|
||||
label="Total Size"
|
||||
value={stats.totalSize}
|
||||
icon={Database}
|
||||
formatter={(v) => formatBytes(v)}
|
||||
/>
|
||||
<StatCard
|
||||
label="Unique Speakers"
|
||||
value={stats.uniqueUsers}
|
||||
icon={Users}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{stats.topUsers.length > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
<p className="text-xs text-text-secondary font-medium uppercase tracking-wide">
|
||||
Top Speakers
|
||||
</p>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
|
||||
{stats.topUsers.map((u) => (
|
||||
<div
|
||||
key={u.name}
|
||||
className="flex items-center gap-3 rounded-lg border border-border/40 bg-card/40 px-3 py-2"
|
||||
>
|
||||
<span className="flex size-7 items-center justify-center rounded-md bg-primary/10 font-mono text-xs text-primary">
|
||||
{u.count}
|
||||
</span>
|
||||
<span className="flex-1 min-w-0 truncate text-sm text-text-primary">
|
||||
{u.name}
|
||||
</span>
|
||||
<span className="text-[10px] font-mono text-text-secondary/50">
|
||||
{formatBytes(u.size)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<RecordingPlayer
|
||||
url={currentTrack?.download_url ?? undefined}
|
||||
filename={currentTrack?.filename ?? undefined}
|
||||
playing={isPlaying}
|
||||
loading={isLoadingAudio}
|
||||
audioRef={audioRef}
|
||||
onToggle={() => togglePlay(playingId!)}
|
||||
onStateChange={(s) => {
|
||||
setIsPlaying(s.playing);
|
||||
setIsLoadingAudio(s.loading);
|
||||
}}
|
||||
onClose={() => setPlayingId(null)}
|
||||
/>
|
||||
</div>
|
||||
<RecordingsList
|
||||
recordings={recordings}
|
||||
error={error}
|
||||
isLoading={isLoading}
|
||||
deleting={deleting}
|
||||
onSelect={setPreview}
|
||||
onDelete={handleDelete}
|
||||
preview={preview}
|
||||
onClosePreview={() => setPreview(null)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,23 +1,13 @@
|
||||
/**
|
||||
* Voice page — Server Component.
|
||||
*
|
||||
* Fetches the authoritative voice connection status + guild list on the server
|
||||
* so the first paint reflects the shared gateway voice state (which channel is
|
||||
* joined, across ALL users), independent of any single browser's WS history.
|
||||
* Voice — Server Component.
|
||||
* Seeds authoritative voice status (shared active speakers snapshot) on the
|
||||
* server, then hands off to the client View for the 3D scene + WS live updates.
|
||||
*/
|
||||
import { getGuilds, getVoiceStatus } from "@/lib/api/server";
|
||||
import { getVoiceStatus } from "@/lib/api/server";
|
||||
import type { VoiceStatus } from "@/lib/types";
|
||||
import VoiceView from "./view";
|
||||
|
||||
export default async function VoicePage() {
|
||||
const [status, guilds] = await Promise.allSettled([
|
||||
getVoiceStatus(),
|
||||
getGuilds(),
|
||||
]);
|
||||
|
||||
return (
|
||||
<VoiceView
|
||||
initialStatus={status.status === "fulfilled" ? status.value : undefined}
|
||||
initialGuilds={guilds.status === "fulfilled" ? guilds.value : undefined}
|
||||
/>
|
||||
);
|
||||
const status = await getVoiceStatus().catch(() => undefined);
|
||||
return <VoiceView initialStatus={status} />;
|
||||
}
|
||||
|
||||
@@ -1,177 +1,176 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { SubNav } from "@/components/layout/sub-nav";
|
||||
import { VoiceActivityTimeline } from "@/components/voice/activity-timeline";
|
||||
import { VoiceConnectionCard } from "@/components/voice/connection-card";
|
||||
import {
|
||||
Activity,
|
||||
Headphones,
|
||||
Mic,
|
||||
MicOff,
|
||||
Pause,
|
||||
Play,
|
||||
Settings,
|
||||
Wifi,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { SessionRibbon } from "@/components/charts/session-ribbon";
|
||||
import { StaggerGroup, StaggerItem } from "@/components/motion/stagger";
|
||||
import { Badge } from "@/components/primitives/badge";
|
||||
import { Button } from "@/components/primitives/button";
|
||||
import { SignalField } from "@/components/three";
|
||||
import { StaticFallback } from "@/components/three/static-fallback";
|
||||
import { WebGLGuard } from "@/components/three/webgl-guard";
|
||||
import { ActiveSpeakersPanel } from "@/components/voice/active-speakers-panel";
|
||||
import { ListenControl } from "@/components/voice/listen-control";
|
||||
import { MicControl } from "@/components/voice/mic-control";
|
||||
import { SpeakerWaveform } from "@/components/voice/speaker-waveform";
|
||||
import {
|
||||
useGuilds,
|
||||
useMicTransmit,
|
||||
useSpeakers,
|
||||
useVoiceChannels,
|
||||
useVoiceConnect,
|
||||
useVoiceDisconnect,
|
||||
useVoiceListen,
|
||||
useVoiceStatus,
|
||||
} from "@/hooks";
|
||||
import type { Guild, VoiceStatus } from "@/lib/types";
|
||||
import type { ActiveSpeaker, VoiceStatus } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
|
||||
type VoiceTab = "connection" | "activity";
|
||||
type VoiceTab = "stage" | "activity";
|
||||
|
||||
/**
|
||||
* Voice view — hydrated on the client. Seeded from server-rendered status +
|
||||
* guild list so every user's first paint reflects the same shared voice
|
||||
* connection state; live updates come over WS.
|
||||
*/
|
||||
export default function VoiceView({
|
||||
initialStatus,
|
||||
initialGuilds = [],
|
||||
}: {
|
||||
initialStatus?: VoiceStatus;
|
||||
initialGuilds?: Guild[];
|
||||
}) {
|
||||
const ws = useWebSocket();
|
||||
const { data: voiceStatus } = useVoiceStatus(initialStatus);
|
||||
const { data: guilds = [] } = useGuilds(initialGuilds);
|
||||
const [selectedGuild, setSelectedGuild] = useState("");
|
||||
const { data: voiceChannels = [] } = useVoiceChannels(selectedGuild);
|
||||
const { speakers, subscribe } = useSpeakers(initialStatus?.activeSpeakers);
|
||||
const connectMut = useVoiceConnect();
|
||||
const disconnectMut = useVoiceDisconnect();
|
||||
const micMut = useMicTransmit(ws);
|
||||
const [tab, setTab] = useState<VoiceTab>("stage");
|
||||
|
||||
const initialSpeakers = useMemo(
|
||||
() => initialStatus?.activeSpeakers ?? [],
|
||||
[initialStatus],
|
||||
);
|
||||
const { speakers, subscribe } = useSpeakers(initialSpeakers);
|
||||
const connect = useVoiceConnect();
|
||||
const disconnect = useVoiceDisconnect();
|
||||
const listen = useVoiceListen(ws);
|
||||
const [selectedChannel, setSelectedChannel] = useState("");
|
||||
const [micActive, setMicActive] = useState(false);
|
||||
const [volume, setVolume] = useState(75);
|
||||
const [listenVolume, setListenVolume] = useState(75);
|
||||
const [tab, setTab] = useState<VoiceTab>("connection");
|
||||
|
||||
useEffect(() => {
|
||||
const unsub = subscribe(ws);
|
||||
return () => unsub();
|
||||
}, [ws, subscribe]);
|
||||
return unsub;
|
||||
}, [subscribe, ws]);
|
||||
|
||||
const handleMicToggle = useCallback(
|
||||
async (checked: boolean) => {
|
||||
if (checked) {
|
||||
try {
|
||||
await micMut.mutateAsync(true);
|
||||
setMicActive(true);
|
||||
} catch {
|
||||
setMicActive(false);
|
||||
}
|
||||
} else {
|
||||
setMicActive(false);
|
||||
try {
|
||||
await micMut.mutateAsync(false);
|
||||
} catch {
|
||||
// Stop already tore down the local transmitter — ignore remote errors
|
||||
}
|
||||
}
|
||||
},
|
||||
[micMut],
|
||||
);
|
||||
|
||||
const handleVolumeChange = useCallback(
|
||||
(v: number) => {
|
||||
setVolume(v);
|
||||
micMut.setVolume(v);
|
||||
},
|
||||
[micMut],
|
||||
);
|
||||
|
||||
const handleGuildChange = useCallback((guildId: string | null) => {
|
||||
if (!guildId) {
|
||||
setSelectedGuild("");
|
||||
setSelectedChannel("");
|
||||
return;
|
||||
}
|
||||
setSelectedGuild(guildId);
|
||||
}, []);
|
||||
|
||||
const activeSpeakers = speakers.filter((s) => s.speaking);
|
||||
const connected = voiceStatus?.connected ?? false;
|
||||
const active = speakers.filter((s) => s.speaking);
|
||||
|
||||
return (
|
||||
<div className="space-y-4 animate-fade-in-up">
|
||||
<SubNav
|
||||
tabs={[
|
||||
{ id: "connection", label: "Connection", icon: undefined },
|
||||
{ id: "activity", label: "Activity", icon: undefined },
|
||||
]}
|
||||
activeTab={tab}
|
||||
onTabChange={(t) => setTab(t as VoiceTab)}
|
||||
/>
|
||||
<div className="flex flex-col gap-5">
|
||||
{/* Connection bar */}
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge tone={initialStatus?.connected ? "signal" : "neutral"} dot>
|
||||
{initialStatus?.connected ? "Connected" : "Disconnected"}
|
||||
</Badge>
|
||||
{initialStatus?.activeChannelName && (
|
||||
<span className="text-sm text-[var(--color-ink-soft)]">
|
||||
#{initialStatus.activeChannelName}
|
||||
</span>
|
||||
)}
|
||||
{initialStatus?.connected ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => disconnect.mutate()}
|
||||
>
|
||||
Disconnect
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="primary"
|
||||
onClick={() =>
|
||||
connect.mutate({
|
||||
guildId: initialStatus?.activeGuildId ?? "",
|
||||
channelId: initialStatus?.activeChannelId ?? "",
|
||||
})
|
||||
}
|
||||
>
|
||||
Connect
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<VoiceConnectionCard
|
||||
connected={connected}
|
||||
activeChannelName={voiceStatus?.activeChannelName}
|
||||
guilds={guilds}
|
||||
voiceChannels={voiceChannels}
|
||||
selectedGuild={selectedGuild}
|
||||
selectedChannel={selectedChannel}
|
||||
onGuildChange={handleGuildChange}
|
||||
onChannelChange={(v) => setSelectedChannel(v ?? "")}
|
||||
onConnect={() => {
|
||||
void connectMut
|
||||
.mutateAsync({
|
||||
guildId: selectedGuild,
|
||||
channelId: selectedChannel,
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
const msg =
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "Gagal connect ke voice channel";
|
||||
toast.error("Voice connect gagal", {
|
||||
description: msg,
|
||||
});
|
||||
});
|
||||
}}
|
||||
onDisconnect={() => {
|
||||
if (micActive) {
|
||||
setMicActive(false);
|
||||
void micMut.mutateAsync(false).catch(() => {});
|
||||
{/* Stage hero */}
|
||||
<div className="surface relative flex h-[280px] items-end justify-center overflow-hidden rounded-[var(--radius-r)] p-5">
|
||||
<WebGLGuard
|
||||
fallback={
|
||||
<StaticFallback
|
||||
variant="orb"
|
||||
count={Math.max(speakers.length, 3)}
|
||||
className="absolute inset-0"
|
||||
/>
|
||||
}
|
||||
if (listen.active) listen.toggle(false);
|
||||
disconnectMut.mutate(undefined);
|
||||
}}
|
||||
connecting={connectMut.isPending}
|
||||
/>
|
||||
>
|
||||
<SignalField
|
||||
activity={speakers.length > 0 ? 0.6 : 0.2}
|
||||
className="absolute inset-0"
|
||||
/>
|
||||
</WebGLGuard>
|
||||
<div className="absolute bottom-4 left-1/2 -translate-x-1/2">
|
||||
<SpeakerWaveform speakers={active} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{tab === "connection" && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<SpeakerWaveform speakers={activeSpeakers} />
|
||||
<div className="space-y-4">
|
||||
<ListenControl
|
||||
connected={connected}
|
||||
active={listen.active}
|
||||
levels={listen.levels}
|
||||
speakers={speakers}
|
||||
onToggle={(on) => listen.toggle(on)}
|
||||
volume={listenVolume}
|
||||
onVolumeChange={(v) => {
|
||||
setListenVolume(v);
|
||||
listen.setVolume(v);
|
||||
}}
|
||||
/>
|
||||
<MicControl
|
||||
connected={connected}
|
||||
active={micActive}
|
||||
onToggle={handleMicToggle}
|
||||
volume={volume}
|
||||
onVolumeChange={handleVolumeChange}
|
||||
/>
|
||||
</div>
|
||||
<StaggerGroup className="grid gap-3 sm:grid-cols-[1fr_auto] sm:items-end">
|
||||
<StaggerItem>
|
||||
<MicControl
|
||||
micOn={listen.active}
|
||||
onToggle={(on) => listen.toggle(on)}
|
||||
levels={listen.levels}
|
||||
/>
|
||||
</StaggerItem>
|
||||
<StaggerItem>
|
||||
<ListenControl
|
||||
listening={listen.active}
|
||||
onToggle={(on) => listen.toggle(on)}
|
||||
volume={75}
|
||||
onVolume={listen.setVolume}
|
||||
/>
|
||||
</StaggerItem>
|
||||
</StaggerGroup>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="flex gap-1 rounded-[var(--radius-r)] bg-[var(--color-surface-2)] p-1">
|
||||
{(["stage", "activity"] as const).map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
type="button"
|
||||
onClick={() => setTab(t)}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 rounded-[var(--radius-r-control)] px-3 py-1.5 text-xs font-medium transition-colors",
|
||||
tab === t
|
||||
? "bg-[var(--color-signal)] text-[var(--color-signal-ink)]"
|
||||
: "text-[var(--color-ink-soft)] hover:text-[var(--color-ink)]",
|
||||
)}
|
||||
>
|
||||
{t === "stage" ? (
|
||||
<Activity className="size-3.5" />
|
||||
) : (
|
||||
<Headphones className="size-3.5" />
|
||||
)}
|
||||
{t === "stage" ? "Stage" : "Activity"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{tab === "stage" && <ActiveSpeakersPanel speakers={speakers} />}
|
||||
{tab === "activity" && (
|
||||
<div className="surface p-4">
|
||||
<h3 className="mb-3 text-sm font-semibold">Live session timeline</h3>
|
||||
<SessionRibbon
|
||||
segments={speakers.map((s) => ({
|
||||
id: s.userId,
|
||||
label: s.username,
|
||||
value: s.speaking ? 3 : 1,
|
||||
tone: s.speaking ? "signal" : "neutral",
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === "activity" && <VoiceActivityTimeline data={speakers} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,327 +1,270 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
/*
|
||||
* Theme variables — light mode lives in :root (default), dark mode overrides
|
||||
* via `.dark`. Toggle in TopNav swaps the class on <html>.
|
||||
* GMW — new design system (visual overhaul).
|
||||
*
|
||||
* NOTE: this is `@theme` (NOT `@theme inline`) on purpose — inline inlines
|
||||
* literal values into utilities, so a `.dark` class override of the custom
|
||||
* property would NOT re-skin utilities. With plain `@theme`, utilities
|
||||
* reference `var(--color-*)`, so runtime theme switching works.
|
||||
* Replaces the old teal-cyan + purple + glassmorphism language with a warm,
|
||||
* signal-driven ops-console aesthetic. Hierarchy comes from scale/weight and
|
||||
* tonal surface blocks, NOT from borders/shadows. Three semantic signals:
|
||||
* lime = OK / live (--signal)
|
||||
* amber = warn (--amber)
|
||||
* vermilion = flag/danger (--vermilion)
|
||||
*/
|
||||
|
||||
@theme {
|
||||
/* ── Light (default) ── */
|
||||
/* Canvas — soft off-white */
|
||||
--color-canvas: oklch(0.97 0.005 250);
|
||||
--color-surface: oklch(1 0 0 / 0.7);
|
||||
--color-surface-hover: oklch(0.93 0.01 250 / 0.8);
|
||||
/* ── Surfaces ── */
|
||||
--color-canvas: oklch(0.96 0.012 80);
|
||||
--color-surface: oklch(0.92 0.014 80);
|
||||
--color-surface-2: oklch(0.88 0.016 80);
|
||||
|
||||
/* Glass */
|
||||
--color-glass-bg: oklch(0 0 0 / 0.04);
|
||||
--color-glass-border: oklch(0.2 0.02 250 / 0.12);
|
||||
--glass-shadow: 0 8px 32px oklch(0.2 0.02 250 / 0.12);
|
||||
/* ── Ink ── */
|
||||
--color-ink: oklch(0.22 0.02 70);
|
||||
--color-ink-soft: oklch(0.46 0.02 70);
|
||||
|
||||
/* Primary — teal-cyan */
|
||||
--color-primary: oklch(0.52 0.17 215);
|
||||
--color-primary-glow: oklch(0.52 0.17 215 / 0.35);
|
||||
--color-primary-foreground: oklch(0.98 0 0);
|
||||
--color-border: oklch(0.2 0.02 250 / 0.08);
|
||||
--color-border-glow: oklch(0.52 0.17 215 / 0.35);
|
||||
/* ── Structural ── */
|
||||
--color-hairline: oklch(0.22 0.02 70 / 0.1);
|
||||
--hairline-w: 1px;
|
||||
|
||||
/* Accents */
|
||||
--color-accent-purple: oklch(0.55 0.2 280);
|
||||
--color-accent-amber: oklch(0.65 0.17 75);
|
||||
--color-destructive: oklch(0.577 0.245 27.325);
|
||||
--color-success: oklch(0.55 0.18 160);
|
||||
/* ── Semantic signals ── */
|
||||
--color-signal: oklch(0.78 0.17 125);
|
||||
--color-signal-ink: oklch(0.20 0.03 70);
|
||||
--color-signal-glow: oklch(0.78 0.17 125 / 0.35);
|
||||
--color-amber: oklch(0.80 0.15 70);
|
||||
--color-vermilion: oklch(0.62 0.21 25);
|
||||
--color-vermilion-soft: oklch(0.62 0.21 25 / 0.15);
|
||||
|
||||
/* Text */
|
||||
--color-text-primary: oklch(0.25 0.02 250);
|
||||
--color-text-secondary: oklch(0.48 0.02 250);
|
||||
--color-text-mono: oklch(0.52 0.17 215);
|
||||
--color-ring: var(--color-signal);
|
||||
|
||||
/* Legacy overrides for shadcn compatibility */
|
||||
--color-background: var(--color-canvas);
|
||||
--color-foreground: var(--color-text-primary);
|
||||
--color-card: var(--color-surface);
|
||||
--color-card-foreground: var(--color-text-primary);
|
||||
--color-muted: oklch(0.9 0.01 250);
|
||||
--color-muted-foreground: var(--color-text-secondary);
|
||||
--color-accent: var(--color-primary);
|
||||
--color-accent-foreground: var(--color-primary-foreground);
|
||||
/* ── Fonts ── */
|
||||
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
||||
--font-display: "Bricolage Grotesque", "Inter", sans-serif;
|
||||
|
||||
/* Ring / focus outline for shadcn outline-ring utility */
|
||||
--color-ring: var(--color-primary);
|
||||
|
||||
/* Base-ui / shadcn primitives */
|
||||
--color-popover: oklch(0.99 0.005 250 / 0.95);
|
||||
--color-popover-foreground: var(--color-text-primary);
|
||||
--color-input: oklch(0.55 0.02 250 / 0.35);
|
||||
--color-secondary: oklch(0.92 0.01 250 / 0.6);
|
||||
--color-secondary-foreground: var(--color-text-primary);
|
||||
|
||||
/* Sidebar (shadcn) */
|
||||
--color-sidebar: oklch(1 0 0 / 0.6);
|
||||
--color-sidebar-foreground: var(--color-text-primary);
|
||||
--color-sidebar-primary: var(--color-primary);
|
||||
--color-sidebar-primary-foreground: var(--color-primary-foreground);
|
||||
--color-sidebar-accent: oklch(0.93 0.01 250 / 0.7);
|
||||
--color-sidebar-accent-foreground: var(--color-text-primary);
|
||||
--color-sidebar-border: var(--color-border);
|
||||
--color-sidebar-ring: var(--color-ring);
|
||||
|
||||
/* Radius */
|
||||
--radius-card: 16px;
|
||||
--radius-panel: 12px;
|
||||
--radius-control: 8px;
|
||||
--radius-pill: 9999px;
|
||||
--radius: 0.625rem; /* shadcn compat */
|
||||
|
||||
/* Fonts */
|
||||
--font-sans: "Inter", sans-serif;
|
||||
--font-mono: "JetBrains Mono", monospace;
|
||||
/* ── Radii ── */
|
||||
--radius-r: 14px;
|
||||
--radius-r-panel: 12px;
|
||||
--radius-r-control: 8px;
|
||||
--radius-r-pill: 9999px;
|
||||
}
|
||||
|
||||
/* ── Dark theme overrides ── */
|
||||
.dark {
|
||||
--color-canvas: oklch(0.07 0.015 250);
|
||||
--color-surface: oklch(0.11 0.02 245 / 0.6);
|
||||
--color-surface-hover: oklch(0.15 0.02 245 / 0.7);
|
||||
--color-canvas: oklch(0.13 0.015 70);
|
||||
--color-surface: oklch(0.18 0.02 70);
|
||||
--color-surface-2: oklch(0.23 0.022 70);
|
||||
|
||||
--color-glass-bg: oklch(1 0 0 / 0.04);
|
||||
--color-glass-border: oklch(1 0 0 / 0.08);
|
||||
--glass-shadow: 0 8px 32px oklch(0 0 0 / 0.4);
|
||||
--color-ink: oklch(0.93 0.01 75);
|
||||
--color-ink-soft: oklch(0.62 0.02 75);
|
||||
|
||||
--color-primary: oklch(0.62 0.17 215);
|
||||
--color-primary-glow: oklch(0.62 0.17 215 / 0.4);
|
||||
--color-primary-foreground: oklch(0.98 0 0);
|
||||
--color-border: oklch(1 0 0 / 0.06);
|
||||
--color-border-glow: oklch(0.62 0.17 215 / 0.3);
|
||||
--color-hairline: oklch(1 0 0 / 0.09);
|
||||
|
||||
--color-accent-purple: oklch(0.65 0.2 280);
|
||||
--color-accent-amber: oklch(0.7 0.17 75);
|
||||
--color-destructive: oklch(0.577 0.245 27.325);
|
||||
--color-success: oklch(0.6 0.18 160);
|
||||
|
||||
--color-text-primary: oklch(0.93 0.01 245);
|
||||
--color-text-secondary: oklch(0.55 0.02 245);
|
||||
--color-text-mono: oklch(0.62 0.17 215);
|
||||
|
||||
--color-background: var(--color-canvas);
|
||||
--color-foreground: var(--color-text-primary);
|
||||
--color-card: var(--color-surface);
|
||||
--color-card-foreground: var(--color-text-primary);
|
||||
--color-muted: oklch(0.17 0.015 245);
|
||||
--color-muted-foreground: var(--color-text-secondary);
|
||||
--color-accent: var(--color-primary);
|
||||
--color-accent-foreground: var(--color-primary-foreground);
|
||||
--color-ring: var(--color-primary);
|
||||
|
||||
/* Base-ui / shadcn primitives */
|
||||
--color-popover: oklch(0.13 0.02 245 / 0.96);
|
||||
--color-popover-foreground: var(--color-text-primary);
|
||||
--color-input: oklch(1 0 0 / 0.18);
|
||||
--color-secondary: oklch(0.2 0.02 245 / 0.7);
|
||||
--color-secondary-foreground: var(--color-text-primary);
|
||||
|
||||
/* Sidebar (shadcn) */
|
||||
--color-sidebar: oklch(0.11 0.02 245 / 0.55);
|
||||
--color-sidebar-foreground: var(--color-text-primary);
|
||||
--color-sidebar-primary: var(--color-primary);
|
||||
--color-sidebar-primary-foreground: var(--color-primary-foreground);
|
||||
--color-sidebar-accent: oklch(0.17 0.02 245 / 0.7);
|
||||
--color-sidebar-accent-foreground: var(--color-text-primary);
|
||||
--color-sidebar-border: var(--color-border);
|
||||
--color-sidebar-ring: var(--color-ring);
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.glass {
|
||||
background: var(--color-glass-bg);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--color-glass-border);
|
||||
box-shadow: var(--glass-shadow);
|
||||
}
|
||||
.glass-elevated {
|
||||
background: var(--color-glass-bg);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--color-border-glow);
|
||||
box-shadow: 0 8px 32px var(--glass-shadow), 0 0 20px var(--color-primary-glow);
|
||||
}
|
||||
.glass-intense {
|
||||
background: oklch(1 0 0 / 0.75);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid oklch(0.2 0.02 250 / 0.12);
|
||||
box-shadow: 0 8px 32px oklch(0.2 0.02 250 / 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark variant of glass-intense (reads better on dark canvas) */
|
||||
.dark .glass-intense {
|
||||
background: oklch(1 0 0 / 0.08);
|
||||
border: 1px solid oklch(1 0 0 / 0.12);
|
||||
box-shadow: none;
|
||||
--color-signal: oklch(0.88 0.18 125);
|
||||
--color-signal-ink: oklch(0.18 0.03 70);
|
||||
--color-signal-glow: oklch(0.88 0.18 125 / 0.4);
|
||||
--color-amber: oklch(0.85 0.15 70);
|
||||
--color-vermilion: oklch(0.68 0.21 25);
|
||||
--color-vermilion-soft: oklch(0.68 0.21 25 / 0.18);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* { @apply border-border; }
|
||||
* {
|
||||
@apply border-transparent;
|
||||
}
|
||||
|
||||
html {
|
||||
@apply font-sans antialiased scroll-smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-canvas text-text-primary font-sans antialiased;
|
||||
@apply bg-canvas text-ink font-sans antialiased;
|
||||
/* warm dot-grid texture + faint glow — replaces old bluish radial layers */
|
||||
background-image:
|
||||
radial-gradient(circle, oklch(0.3 0.02 250 / 0.05) 1px, transparent 1px),
|
||||
radial-gradient(ellipse 80% 50% at 50% -20%, oklch(0.52 0.17 215 / 0.08), transparent),
|
||||
radial-gradient(ellipse 50% 40% at 80% 80%, oklch(0.55 0.2 280 / 0.05), transparent);
|
||||
background-size: 24px 24px, 100% 100%, 100% 100%;
|
||||
radial-gradient(circle, oklch(0.45 0.03 70 / 0.05) 1px, transparent 1px),
|
||||
radial-gradient(ellipse 80% 50% at 50% -20%, oklch(0.78 0.17 125 / 0.06), transparent),
|
||||
radial-gradient(ellipse 50% 40% at 85% 90%, oklch(0.80 0.15 70 / 0.04), transparent);
|
||||
background-size: 26px 26px, 100% 100%, 100% 100%;
|
||||
}
|
||||
/* Dark body background */
|
||||
|
||||
.dark body {
|
||||
background-image:
|
||||
radial-gradient(circle, oklch(1 0 0 / 0.025) 1px, transparent 1px),
|
||||
radial-gradient(ellipse 80% 50% at 50% -20%, oklch(0.62 0.17 215 / 0.06), transparent),
|
||||
radial-gradient(ellipse 50% 40% at 80% 80%, oklch(0.65 0.2 280 / 0.04), transparent);
|
||||
background-size: 24px 24px, 100% 100%, 100% 100%;
|
||||
}
|
||||
html {
|
||||
@apply font-sans scroll-smooth;
|
||||
radial-gradient(circle, oklch(1 0 0 / 0.022) 1px, transparent 1px),
|
||||
radial-gradient(ellipse 80% 50% at 50% -20%, oklch(0.88 0.18 125 / 0.05), transparent),
|
||||
radial-gradient(ellipse 50% 40% at 85% 90%, oklch(0.85 0.15 70 / 0.03), transparent);
|
||||
background-size: 26px 26px, 100% 100%, 100% 100%;
|
||||
}
|
||||
|
||||
/* Custom selection color */
|
||||
::selection {
|
||||
background: oklch(0.62 0.17 215 / 0.4);
|
||||
background: oklch(0.78 0.17 125 / 0.35);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
/* Scrollbar — warm */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: oklch(0.4 0.02 250 / 0.2);
|
||||
background: oklch(0.4 0.02 70 / 0.22);
|
||||
border-radius: 999px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: oklch(0.4 0.02 250 / 0.35);
|
||||
background: oklch(0.4 0.02 70 / 0.38);
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-signal);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: oklch(0.4 0.02 250 / 0.2); border-radius: 999px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: oklch(0.4 0.02 250 / 0.35); }
|
||||
}
|
||||
|
||||
/* ── Animations ──────────────────────────── */
|
||||
@layer utilities {
|
||||
/* Tonal block that replaces bordered cards */
|
||||
.surface {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-r);
|
||||
border: var(--hairline-w) solid var(--color-hairline);
|
||||
}
|
||||
.surface-2 {
|
||||
background: var(--color-surface-2);
|
||||
border-radius: var(--radius-r-panel);
|
||||
border: var(--hairline-w) solid var(--color-hairline);
|
||||
}
|
||||
|
||||
/* 1px animated pulse line marking a live/section header */
|
||||
.scan-tick {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.scan-tick::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
inset-block-start: 0;
|
||||
block-size: 1px;
|
||||
inline-size: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
var(--color-signal) 20%,
|
||||
var(--color-signal) 80%,
|
||||
transparent
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: scan 2.6s linear infinite;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.ticker {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-r);
|
||||
border: var(--hairline-w) solid var(--color-hairline);
|
||||
padding: clamp(1rem, 2vw, 1.5rem);
|
||||
}
|
||||
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.2rem 0.7rem;
|
||||
border-radius: var(--radius-r-pill);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.mono {
|
||||
font-family: var(--font-mono);
|
||||
font-variant-numeric: tabular-nums;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.display {
|
||||
font-family: var(--font-display);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.02;
|
||||
}
|
||||
|
||||
/* text tone helpers */
|
||||
.text-signal { color: var(--color-signal); }
|
||||
.text-amber { color: var(--color-amber); }
|
||||
.text-vermilion { color: var(--color-vermilion); }
|
||||
.text-ink-soft { color: var(--color-ink-soft); }
|
||||
|
||||
/* focus ring helper for interactive blocks */
|
||||
.ring-focus {
|
||||
transition: box-shadow 0.18s ease;
|
||||
}
|
||||
.ring-focus:hover {
|
||||
box-shadow: 0 0 0 1px var(--color-signal-glow);
|
||||
}
|
||||
}
|
||||
|
||||
/* ── 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(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes spin-disc {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
/* kept for live status dots */
|
||||
@keyframes pulse-ring {
|
||||
0% {
|
||||
transform: scale(0.8);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(2.5);
|
||||
opacity: 0;
|
||||
}
|
||||
0% { transform: scale(0.8); opacity: 1; }
|
||||
100% { transform: scale(2.5); opacity: 0; }
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 0.3s ease-out forwards;
|
||||
.animate-eq {
|
||||
animation: eq 0.9s ease-in-out infinite;
|
||||
transform-origin: bottom;
|
||||
}
|
||||
.animate-spin-disc {
|
||||
animation: spin-disc 8s linear infinite;
|
||||
}
|
||||
.animate-spin-disc.paused {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.animate-pulse-ring {
|
||||
animation: pulse-ring 1.5s ease-out infinite;
|
||||
}
|
||||
|
||||
.animate-shimmer {
|
||||
background: linear-gradient(90deg, transparent, oklch(0.62 0.17 215 / 0.08), transparent);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
oklch(0.78 0.17 125 / 0.08),
|
||||
transparent
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
}
|
||||
|
||||
/* Equalizer bars — bouncing heights for the "now playing" waveform */
|
||||
@keyframes eq-bounce {
|
||||
0%,
|
||||
100% {
|
||||
transform: scaleY(0.25);
|
||||
}
|
||||
30% {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
60% {
|
||||
transform: scaleY(0.5);
|
||||
/* ── Reduced motion: kill all decorative animation ── */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.scan-tick::after,
|
||||
.animate-eq,
|
||||
.animate-spin-disc,
|
||||
.animate-pulse-ring,
|
||||
.animate-shimmer {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
.animate-eq {
|
||||
animation: eq-bounce 0.9s ease-in-out infinite;
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
/* Soft pulsing glow for the active/loading card */
|
||||
@keyframes card-glow {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 oklch(0.62 0.17 215 / 0);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 22px 0 oklch(0.62 0.17 215 / 0.25);
|
||||
}
|
||||
}
|
||||
.animate-card-glow {
|
||||
animation: card-glow 1.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ── Utility classes ─────────────────────── */
|
||||
|
||||
/* Gradient text */
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, oklch(0.62 0.17 215), oklch(0.6 0.15 195), oklch(0.65 0.12 185));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Gradient border (via pseudo-element trick) */
|
||||
.gradient-border {
|
||||
position: relative;
|
||||
}
|
||||
.gradient-border::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: inherit;
|
||||
padding: 1px;
|
||||
background: linear-gradient(135deg, oklch(0.62 0.17 215), oklch(0.6 0.15 195), oklch(0.65 0.12 185));
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
}
|
||||
|
||||
/* Live pulse ring (compat alias) */
|
||||
.live-pulse-ring {
|
||||
animation: pulse-ring 1.5s ease-out infinite;
|
||||
html { scroll-behavior: auto; }
|
||||
}
|
||||
|
||||
@@ -1,22 +1,31 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter, JetBrains_Mono } from "next/font/google";
|
||||
import { Bricolage_Grotesque, Inter, JetBrains_Mono } from "next/font/google";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
import { Toaster } from "@/components/primitives/toast";
|
||||
import "./globals.css";
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-inter",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const jetbrainsMono = JetBrains_Mono({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-jetbrains-mono",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
const bricolage = Bricolage_Grotesque({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-display",
|
||||
display: "swap",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Discord Automod — Moderation Dashboard",
|
||||
description: "AI-powered Discord moderation and voice monitoring dashboard",
|
||||
title: "Bete — Discord Moderation Console",
|
||||
description:
|
||||
"AI-powered Discord moderation, voice monitoring, and media control console",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@@ -27,7 +36,7 @@ export default function RootLayout({
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
className={`${inter.variable} ${jetbrainsMono.variable} h-full antialiased`}
|
||||
className={`${inter.variable} ${jetbrainsMono.variable} ${bricolage.variable} h-full antialiased`}
|
||||
suppressHydrationWarning
|
||||
>
|
||||
<body className="min-h-full flex flex-col">
|
||||
@@ -39,8 +48,8 @@ export default function RootLayout({
|
||||
disableTransitionOnChange
|
||||
>
|
||||
{children}
|
||||
<Toaster position="bottom-right" />
|
||||
</ThemeProvider>
|
||||
<Toaster position="bottom-right" richColors closeButton />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -2,17 +2,14 @@
|
||||
|
||||
import { Loader2, Search, Sparkles } from "lucide-react";
|
||||
import { useCallback, useState } from "react";
|
||||
|
||||
import { Avatar } from "@/components/primitives/avatar";
|
||||
import { Badge } from "@/components/primitives/badge";
|
||||
import { Button } from "@/components/primitives/button";
|
||||
import { Input } from "@/components/primitives/input";
|
||||
import { Progress } from "@/components/primitives/progress";
|
||||
import { EmptyState, LoadingSkeleton } from "@/components/shared";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { useMessageSearch } from "@/hooks";
|
||||
import { renderMessageContent, safeParseJsonArray } from "@/lib/format";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function SearchPanel() {
|
||||
const [query, setQuery] = useState("");
|
||||
@@ -29,10 +26,10 @@ export function SearchPanel() {
|
||||
}, [query]);
|
||||
|
||||
return (
|
||||
<div className="space-y-5 animate-fade-in-up">
|
||||
<div className="space-y-5">
|
||||
<div className="flex gap-2">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-[var(--color-ink-soft)]" />
|
||||
<Input
|
||||
placeholder="Search message content, AI flags, analysis text…"
|
||||
value={query}
|
||||
@@ -51,7 +48,7 @@ export function SearchPanel() {
|
||||
<LoadingSkeleton count={5} height="h-28" />
|
||||
) : results !== undefined ? (
|
||||
<>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<p className="text-sm text-[var(--color-ink-soft)]">
|
||||
Found {results.length} result{results.length !== 1 ? "s" : ""}
|
||||
</p>
|
||||
{results.length === 0 ? (
|
||||
@@ -62,92 +59,84 @@ export function SearchPanel() {
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{results.map((msg) => (
|
||||
<Card key={msg.id}>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Avatar className="size-8 shrink-0 mt-0.5">
|
||||
<AvatarImage src={msg.avatar_url ?? undefined} />
|
||||
<AvatarFallback className="text-xs">
|
||||
{msg.username?.charAt(0).toUpperCase() ?? "?"}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0 space-y-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm font-medium">
|
||||
{msg.username}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{msg.created_at
|
||||
? new Date(msg.created_at).toLocaleString()
|
||||
: ""}
|
||||
</span>
|
||||
{msg.ai_status && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={cn(
|
||||
"text-[10px] px-1.5 py-0 h-4",
|
||||
msg.ai_status === "clean" && "text-green-500",
|
||||
msg.ai_status === "flagged" && "text-red-500",
|
||||
)}
|
||||
>
|
||||
{msg.ai_status}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed">
|
||||
{renderMessageContent(
|
||||
msg.edited_content ?? msg.content,
|
||||
msg.metadata,
|
||||
)}
|
||||
</p>
|
||||
{msg.ai_moderation_flags &&
|
||||
msg.ai_moderation_flags !== "[]" && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{safeParseJsonArray(msg.ai_moderation_flags).map(
|
||||
(flag) => (
|
||||
<Badge
|
||||
key={flag}
|
||||
variant="destructive"
|
||||
className="text-[10px] px-1.5 py-0 h-4"
|
||||
>
|
||||
{flag}
|
||||
</Badge>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{msg.ai_analysis && (
|
||||
<p className="text-xs text-muted-foreground italic line-clamp-2 leading-relaxed">
|
||||
<Sparkles className="size-3 inline mr-1" />
|
||||
{msg.ai_analysis}
|
||||
</p>
|
||||
)}
|
||||
{msg.ai_confidence != null && (
|
||||
<div className="flex items-center gap-2 max-w-40">
|
||||
<Progress
|
||||
value={msg.ai_confidence * 100}
|
||||
className="h-1.5"
|
||||
/>
|
||||
<span className="text-[11px] text-muted-foreground tabular-nums shrink-0">
|
||||
{(msg.ai_confidence * 100).toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
<div key={msg.id} className="surface p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Avatar
|
||||
src={msg.avatar_url ?? undefined}
|
||||
name={msg.username}
|
||||
size={32}
|
||||
className="mt-0.5 shrink-0"
|
||||
/>
|
||||
<div className="flex-1 min-w-0 space-y-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm font-medium text-[var(--color-ink)]">
|
||||
{msg.username}
|
||||
</span>
|
||||
<span className="text-xs text-[var(--color-ink-soft)]">
|
||||
{msg.created_at
|
||||
? new Date(msg.created_at).toLocaleString()
|
||||
: ""}
|
||||
</span>
|
||||
{msg.ai_status && (
|
||||
<Badge
|
||||
tone={
|
||||
msg.ai_status === "clean"
|
||||
? "signal"
|
||||
: msg.ai_status === "flagged"
|
||||
? "vermilion"
|
||||
: "neutral"
|
||||
}
|
||||
>
|
||||
{msg.ai_status}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm leading-relaxed text-[var(--color-ink)]">
|
||||
{renderMessageContent(
|
||||
msg.edited_content ?? msg.content,
|
||||
msg.metadata,
|
||||
)}
|
||||
</p>
|
||||
{msg.ai_moderation_flags &&
|
||||
msg.ai_moderation_flags !== "[]" && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{safeParseJsonArray(msg.ai_moderation_flags).map(
|
||||
(flag) => (
|
||||
<Badge key={flag} tone="vermilion">
|
||||
{flag}
|
||||
</Badge>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{msg.ai_analysis && (
|
||||
<p className="text-xs text-[var(--color-ink-soft)] italic line-clamp-2 leading-relaxed">
|
||||
<Sparkles className="size-3 inline mr-1" />
|
||||
{msg.ai_analysis}
|
||||
</p>
|
||||
)}
|
||||
{msg.ai_confidence != null && (
|
||||
<div className="flex items-center gap-2 max-w-40">
|
||||
<Progress value={msg.ai_confidence * 100} />
|
||||
<span className="text-[11px] text-[var(--color-ink-soft)] tabular-nums shrink-0">
|
||||
{(msg.ai_confidence * 100).toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-24 text-center">
|
||||
<Search className="size-12 text-muted-foreground/30 mb-4" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<Search className="size-12 text-[var(--color-ink-soft)] mb-4" />
|
||||
<p className="text-sm text-[var(--color-ink-soft)]">
|
||||
Enter a search query to find messages across all channels.
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground/60 mt-1">
|
||||
<p className="text-xs text-[var(--color-ink-soft)] mt-1">
|
||||
Searches message content, AI flags, and analysis text.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
"use client";
|
||||
|
||||
import { motion, useReducedMotion } from "motion/react";
|
||||
import { useId } from "react";
|
||||
|
||||
export interface AreaPoint {
|
||||
label: string;
|
||||
value: number;
|
||||
}
|
||||
|
||||
export interface AreaActivityProps {
|
||||
data: AreaPoint[];
|
||||
height?: number;
|
||||
stroke?: string;
|
||||
className?: string;
|
||||
label?: string;
|
||||
}
|
||||
|
||||
export function AreaActivity({
|
||||
data,
|
||||
height = 160,
|
||||
stroke = "var(--color-signal)",
|
||||
className,
|
||||
label,
|
||||
}: AreaActivityProps) {
|
||||
const id = useId().replace(/:/g, "");
|
||||
const reduce = useReducedMotion();
|
||||
const width = 600;
|
||||
if (data.length === 0)
|
||||
return <div className={className} style={{ height }} />;
|
||||
|
||||
const max = Math.max(...data.map((d) => d.value), 1);
|
||||
const stepX = width / Math.max(data.length - 1, 1);
|
||||
const pts = data.map((d, i) => {
|
||||
const x = i * stepX;
|
||||
const y = height - (d.value / max) * (height - 10) - 5;
|
||||
return [x, y] as const;
|
||||
});
|
||||
const line = pts
|
||||
.map(
|
||||
(p, i) => `${i === 0 ? "M" : "L"}${p[0].toFixed(1)},${p[1].toFixed(1)}`,
|
||||
)
|
||||
.join(" ");
|
||||
const area = `${line} L${width},${height} L0,${height} Z`;
|
||||
const pathLen = 1400;
|
||||
|
||||
return (
|
||||
<svg
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
className={className}
|
||||
style={{ width: "100%", height }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label={label ?? "Activity chart"}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id={`area-${id}`} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor={stroke} stopOpacity="0.32" />
|
||||
<stop offset="100%" stopColor={stroke} stopOpacity="0.02" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<motion.path
|
||||
d={area}
|
||||
fill={`url(#area-${id})`}
|
||||
initial={reduce ? false : { pathLength: 0, opacity: 0.4 }}
|
||||
animate={{ pathLength: 1, opacity: 1 }}
|
||||
transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1] }}
|
||||
/>
|
||||
<motion.path
|
||||
d={line}
|
||||
fill="none"
|
||||
stroke={stroke}
|
||||
strokeWidth={2}
|
||||
strokeLinejoin="round"
|
||||
strokeLinecap="round"
|
||||
initial={reduce ? false : { pathLength: 0 }}
|
||||
animate={{ pathLength: 1 }}
|
||||
transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1] }}
|
||||
style={{ strokeDasharray: pathLen }}
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
"use client";
|
||||
|
||||
import { motion, useReducedMotion } from "motion/react";
|
||||
import { useId } from "react";
|
||||
|
||||
export interface RadialGaugeProps {
|
||||
/** 0..1 health ratio */
|
||||
value: number;
|
||||
size?: number;
|
||||
label?: string;
|
||||
sublabel?: string;
|
||||
tone?: "signal" | "amber" | "vermilion";
|
||||
}
|
||||
|
||||
const toneColor = {
|
||||
signal: "var(--color-signal)",
|
||||
amber: "var(--color-amber)",
|
||||
vermilion: "var(--color-vermilion)",
|
||||
};
|
||||
|
||||
export function RadialGauge({
|
||||
value,
|
||||
size = 160,
|
||||
label,
|
||||
sublabel,
|
||||
tone = "signal",
|
||||
}: RadialGaugeProps) {
|
||||
const id = useId().replace(/:/g, "");
|
||||
const reduce = useReducedMotion();
|
||||
const stroke = 12;
|
||||
const r = (size - stroke) / 2;
|
||||
const c = 2 * Math.PI * r;
|
||||
const pct = Math.max(0, Math.min(1, value));
|
||||
const dash = c * pct;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative inline-flex items-center justify-center"
|
||||
style={{ width: size, height: size }}
|
||||
>
|
||||
<svg
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
className="-rotate-90"
|
||||
>
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={r}
|
||||
fill="none"
|
||||
stroke="var(--color-hairline)"
|
||||
strokeWidth={stroke}
|
||||
/>
|
||||
<motion.circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={r}
|
||||
fill="none"
|
||||
stroke={toneColor[tone]}
|
||||
strokeWidth={stroke}
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={c}
|
||||
initial={reduce ? false : { strokeDashoffset: c }}
|
||||
animate={{ strokeDashoffset: c - dash }}
|
||||
transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center text-center">
|
||||
<span
|
||||
className="display text-2xl mono"
|
||||
style={{ color: toneColor[tone] }}
|
||||
>
|
||||
{Math.round(pct * 100)}%
|
||||
</span>
|
||||
{label && (
|
||||
<span className="text-[11px] font-medium text-[var(--color-ink-soft)] uppercase tracking-wide">
|
||||
{label}
|
||||
</span>
|
||||
)}
|
||||
{sublabel && (
|
||||
<span className="text-[10px] text-[var(--color-ink-soft)]/70">
|
||||
{sublabel}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface RibbonSegment {
|
||||
id: string;
|
||||
label: string;
|
||||
value: number; // relative duration
|
||||
tone?: "signal" | "amber" | "vermilion" | "neutral";
|
||||
}
|
||||
|
||||
const toneClass = {
|
||||
signal: "bg-[var(--color-signal)]",
|
||||
amber: "bg-[var(--color-amber)]",
|
||||
vermilion: "bg-[var(--color-vermilion)]",
|
||||
neutral: "bg-[var(--color-ink-soft)]/40",
|
||||
};
|
||||
|
||||
export interface SessionRibbonProps {
|
||||
segments: RibbonSegment[];
|
||||
className?: string;
|
||||
height?: number;
|
||||
}
|
||||
|
||||
export function SessionRibbon({
|
||||
segments,
|
||||
className,
|
||||
height = 28,
|
||||
}: SessionRibbonProps) {
|
||||
const total = segments.reduce((s, x) => s + x.value, 0) || 1;
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex w-full gap-0.5 overflow-hidden rounded-[var(--radius-r-control)]",
|
||||
className,
|
||||
)}
|
||||
style={{ height }}
|
||||
>
|
||||
{segments.map((s) => (
|
||||
<div
|
||||
key={s.id}
|
||||
className={cn(
|
||||
"group relative flex items-center justify-center rounded-sm transition-all",
|
||||
toneClass[s.tone ?? "signal"],
|
||||
)}
|
||||
style={{ width: `${(s.value / total) * 100}%` }}
|
||||
title={`${s.label}: ${s.value}`}
|
||||
>
|
||||
<span className="pointer-events-none absolute inset-x-0 -top-6 hidden whitespace-nowrap rounded bg-[var(--color-ink)] px-1.5 py-0.5 text-[10px] text-[var(--color-canvas)] group-hover:block">
|
||||
{s.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
"use client";
|
||||
|
||||
import { useId } from "react";
|
||||
|
||||
export interface SparklineProps {
|
||||
data: number[];
|
||||
width?: number;
|
||||
height?: number;
|
||||
stroke?: string;
|
||||
className?: string;
|
||||
fill?: boolean;
|
||||
}
|
||||
|
||||
export function Sparkline({
|
||||
data,
|
||||
width = 120,
|
||||
height = 36,
|
||||
stroke = "var(--color-signal)",
|
||||
className,
|
||||
fill = true,
|
||||
}: SparklineProps) {
|
||||
const id = useId().replace(/:/g, "");
|
||||
if (data.length < 2)
|
||||
return <svg width={width} height={height} className={className} />;
|
||||
|
||||
const min = Math.min(...data);
|
||||
const max = Math.max(...data);
|
||||
const span = max - min || 1;
|
||||
const stepX = width / (data.length - 1);
|
||||
const pts = data.map((v, i) => {
|
||||
const x = i * stepX;
|
||||
const y = height - ((v - min) / span) * (height - 4) - 2;
|
||||
return [x, y] as const;
|
||||
});
|
||||
const line = pts
|
||||
.map(
|
||||
(p, i) => `${i === 0 ? "M" : "L"}${p[0].toFixed(1)},${p[1].toFixed(1)}`,
|
||||
)
|
||||
.join(" ");
|
||||
const area = `${line} L${width},${height} L0,${height} Z`;
|
||||
|
||||
return (
|
||||
<svg
|
||||
width={width}
|
||||
height={height}
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
className={className}
|
||||
preserveAspectRatio="none"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id={`spark-${id}`} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor={stroke} stopOpacity="0.28" />
|
||||
<stop offset="100%" stopColor={stroke} stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{fill && <path d={area} fill={`url(#spark-${id})`} />}
|
||||
<path
|
||||
d={line}
|
||||
fill="none"
|
||||
stroke={stroke}
|
||||
strokeWidth={1.6}
|
||||
strokeLinejoin="round"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
"use client";
|
||||
|
||||
import { motion, useReducedMotion } from "motion/react";
|
||||
import { useMemo } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface WaveformProps {
|
||||
seed: string | number;
|
||||
bars?: number;
|
||||
height?: number;
|
||||
className?: string;
|
||||
tone?: "signal" | "amber" | "vermilion";
|
||||
}
|
||||
|
||||
// deterministic pseudo-random from seed so the shape is stable per recording
|
||||
function hashSeed(seed: string | number): number {
|
||||
const s = String(seed);
|
||||
let h = 2166136261;
|
||||
for (let i = 0; i < s.length; i++) {
|
||||
h ^= s.charCodeAt(i);
|
||||
h = Math.imul(h, 16777619);
|
||||
}
|
||||
return h >>> 0;
|
||||
}
|
||||
|
||||
export function Waveform({
|
||||
seed,
|
||||
bars = 40,
|
||||
height = 40,
|
||||
className,
|
||||
tone = "signal",
|
||||
}: WaveformProps) {
|
||||
const reduce = useReducedMotion();
|
||||
const values = useMemo(() => {
|
||||
let state = hashSeed(seed) || 1;
|
||||
const out: number[] = [];
|
||||
for (let i = 0; i < bars; i++) {
|
||||
state = (Math.imul(state, 1103515245) + 12345) >>> 0;
|
||||
const r = (state % 1000) / 1000;
|
||||
// envelope: louder in the middle, quieter at edges
|
||||
const env = Math.sin((i / (bars - 1)) * Math.PI);
|
||||
out.push(0.18 + r * 0.82 * (0.4 + env * 0.6));
|
||||
}
|
||||
return out;
|
||||
}, [seed, bars]);
|
||||
|
||||
const color = {
|
||||
signal: "var(--color-signal)",
|
||||
amber: "var(--color-amber)",
|
||||
vermilion: "var(--color-vermilion)",
|
||||
}[tone];
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn("flex items-end gap-[2px]", className)}
|
||||
style={{ height }}
|
||||
aria-hidden
|
||||
>
|
||||
{values.map((v, i) => (
|
||||
<motion.span
|
||||
key={i}
|
||||
className="flex-1 rounded-[2px]"
|
||||
style={{ background: color, height: `${Math.max(8, v * 100)}%` }}
|
||||
initial={reduce ? false : { scaleY: 0.2, opacity: 0 }}
|
||||
animate={{ scaleY: 1, opacity: 1 }}
|
||||
whileHover={{ scaleY: 1.15 }}
|
||||
transition={{
|
||||
duration: 0.3,
|
||||
delay: reduce ? 0 : i * 0.006,
|
||||
ease: [0.22, 1, 0.36, 1],
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,129 +1,35 @@
|
||||
"use client";
|
||||
import type { AreaPoint } from "@/components/charts/area-activity";
|
||||
import { AreaActivity } from "@/components/charts/area-activity";
|
||||
|
||||
import {
|
||||
Area,
|
||||
AreaChart,
|
||||
CartesianGrid,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { useMounted } from "@/lib/hooks/use-mounted";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface ActivityChartProps {
|
||||
data?: { day: string; messages: number; flagged: number }[];
|
||||
export interface ActivityChartProps {
|
||||
data: {
|
||||
day: string;
|
||||
messages: number;
|
||||
flagged: number;
|
||||
active_users: number;
|
||||
}[];
|
||||
}
|
||||
|
||||
const TOOLTIP_STYLE = {
|
||||
background: "oklch(0.11 0.02 245 / 0.95)",
|
||||
border: "1px solid oklch(1 0 0 / 0.08)",
|
||||
borderRadius: 8,
|
||||
fontSize: 12,
|
||||
color: "oklch(0.93 0.01 245)",
|
||||
} as const;
|
||||
|
||||
export function ActivityChart({ data = [] }: ActivityChartProps) {
|
||||
const mounted = useMounted();
|
||||
|
||||
export function ActivityChart({ data }: ActivityChartProps) {
|
||||
const points: AreaPoint[] = data.map((d) => ({
|
||||
label: d.day,
|
||||
value: d.messages,
|
||||
}));
|
||||
return (
|
||||
<Card className={cn("[--card-spacing:0px]", "rounded-2xl", "p-5")}>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-xs font-semibold tracking-wide uppercase text-text-secondary">
|
||||
Message Activity
|
||||
</span>
|
||||
<span className="text-[10px] text-text-secondary/50">
|
||||
messages · flagged per day
|
||||
<div className="surface p-4">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold">Daily messages</h3>
|
||||
<span className="pill bg-[var(--color-signal)]/15 text-[var(--color-signal)]">
|
||||
{data.length}d
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-56">
|
||||
{mounted ? (
|
||||
<ResponsiveContainer
|
||||
width="100%"
|
||||
height="100%"
|
||||
minWidth={0}
|
||||
minHeight={0}
|
||||
>
|
||||
<AreaChart data={data} margin={{ left: -18, right: 4, top: 4 }}>
|
||||
<defs>
|
||||
<linearGradient id="gradMessages" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop
|
||||
offset="0%"
|
||||
stopColor="var(--color-primary)"
|
||||
stopOpacity={0.45}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stopColor="var(--color-primary)"
|
||||
stopOpacity={0.02}
|
||||
/>
|
||||
</linearGradient>
|
||||
<linearGradient id="gradFlagged" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop
|
||||
offset="0%"
|
||||
stopColor="oklch(0.62 0.19 25)"
|
||||
stopOpacity={0.5}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stopColor="oklch(0.62 0.19 25)"
|
||||
stopOpacity={0.02}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid
|
||||
strokeDasharray="3 3"
|
||||
stroke="var(--color-border)"
|
||||
vertical={false}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey="day"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: "oklch(0.55 0.02 245)", fontSize: 10 }}
|
||||
tickFormatter={(v: string) => {
|
||||
const [, m, d] = v.split("-");
|
||||
return `${Number(m)}/${Number(d)}`;
|
||||
}}
|
||||
minTickGap={24}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: "oklch(0.55 0.02 245)", fontSize: 10 }}
|
||||
allowDecimals={false}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={TOOLTIP_STYLE}
|
||||
labelFormatter={(label) => {
|
||||
const [y, m, d] = String(label).split("-");
|
||||
return `${d}/${m}/${y}`;
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="messages"
|
||||
stroke="var(--color-primary)"
|
||||
strokeWidth={2}
|
||||
fill="url(#gradMessages)"
|
||||
name="Messages"
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="flagged"
|
||||
stroke="oklch(0.62 0.19 25)"
|
||||
strokeWidth={2}
|
||||
fill="url(#gradFlagged)"
|
||||
name="Flagged"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="h-full w-full animate-pulse rounded-md bg-card/40" />
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
<ActivityChartInner points={points} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ActivityChartInner({ points }: { points: AreaPoint[] }) {
|
||||
return (
|
||||
<AreaActivity data={points} height={180} label="Daily message activity" />
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,193 +2,139 @@
|
||||
|
||||
import { Hash, Search } from "lucide-react";
|
||||
import { useCallback, useState } from "react";
|
||||
import { Badge } from "@/components/primitives/badge";
|
||||
import { Button } from "@/components/primitives/button";
|
||||
import { Input } from "@/components/primitives/input";
|
||||
import { EmptyState, LoadingSkeleton } from "@/components/shared";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { useChannelDetail, useChannels } from "@/hooks";
|
||||
import { renderMessageContent } from "@/lib/format";
|
||||
import type { DashboardChannel } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function ChannelsSection({ guildId }: { guildId?: string }) {
|
||||
const [search, setSearch] = useState("");
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
|
||||
const {
|
||||
data: channels = [],
|
||||
isLoading,
|
||||
error,
|
||||
mutate: refetch,
|
||||
} = useChannels(guildId ?? "", search);
|
||||
const { data: channels = [], isLoading } = useChannels(guildId ?? "", search);
|
||||
const { data: detail } = useChannelDetail(selectedId);
|
||||
|
||||
const handleSearch = useCallback((v: string) => {
|
||||
setSearch(v);
|
||||
setSelectedId(null);
|
||||
}, []);
|
||||
const handleSearch = useCallback((v: string) => setSearch(v), []);
|
||||
|
||||
if (error) {
|
||||
if (isLoading) return <LoadingSkeleton count={8} />;
|
||||
if (channels.length === 0)
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
"p-6 text-sm",
|
||||
"border border-red-500/30 ring-red-500/20",
|
||||
"[--card-spacing:0px]",
|
||||
"rounded-2xl",
|
||||
)}
|
||||
>
|
||||
Failed to load channels: {error.message}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="ml-2"
|
||||
onClick={() => refetch()}
|
||||
>
|
||||
Retry
|
||||
</Button>
|
||||
</Card>
|
||||
<EmptyState
|
||||
icon={Hash}
|
||||
title="No channels"
|
||||
description="No channels in this guild."
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
<div className="space-y-3">
|
||||
<div className="grid gap-3 lg:grid-cols-[1fr_320px]">
|
||||
<div className="surface flex flex-col gap-2 p-3">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[var(--color-ink-soft)]" />
|
||||
<Input
|
||||
placeholder="Search by channel ID or name…"
|
||||
mono
|
||||
placeholder="search channels…"
|
||||
value={search}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
className="pl-9 h-9"
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<LoadingSkeleton count={5} height="h-14" />
|
||||
) : channels.length === 0 ? (
|
||||
<EmptyState icon={Hash} title="No channels found" />
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{channels.map((channel) => (
|
||||
<ChannelRow
|
||||
key={channel.channel_id}
|
||||
channel={channel}
|
||||
active={selectedId === channel.channel_id}
|
||||
onSelect={setSelectedId}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{channels.map((c) => (
|
||||
<ChannelRow
|
||||
key={c.channel_id}
|
||||
channel={c}
|
||||
selected={selectedId === c.channel_id}
|
||||
onSelect={() => setSelectedId(c.channel_id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Card
|
||||
className={cn("h-fit", "[--card-spacing:0px]", "rounded-2xl", "p-5")}
|
||||
>
|
||||
<div className="surface p-4">
|
||||
{detail ? (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Hash className="size-4 text-primary" />
|
||||
<p className="text-sm font-semibold text-text-primary">
|
||||
{detail.channel_name ?? detail.channel_id}
|
||||
</p>
|
||||
<p className="text-[10px] font-mono text-text-secondary/50 ml-auto">
|
||||
{detail.channel_id}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<Badge variant="outline">Messages: {detail.total_messages}</Badge>
|
||||
<Badge variant="destructive">
|
||||
Flagged: {detail.flagged_count}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-green-500/40 text-green-500"
|
||||
>
|
||||
Clean: {detail.clean_count}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{detail.culture_summary && (
|
||||
<div className="rounded-lg border border-border/40 bg-card/40 px-3 py-2">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-text-secondary/50 mb-1">
|
||||
Culture summary
|
||||
</p>
|
||||
<p className="text-xs leading-relaxed text-text-secondary">
|
||||
{detail.culture_summary}
|
||||
</p>
|
||||
<div className="flex flex-col gap-3.5">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span className="flex size-9 items-center justify-center rounded-[var(--radius-r-control)] bg-[var(--color-surface-2)]">
|
||||
<Hash className="size-4 text-[var(--color-ink-soft)]" />
|
||||
</span>
|
||||
<div>
|
||||
<div className="font-semibold">
|
||||
{detail.channel_name ?? detail.channel_id}
|
||||
</div>
|
||||
<div className="text-xs text-[var(--color-ink-soft)]">
|
||||
{detail.total_messages.toLocaleString()} messages
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{detail.recent_messages.length > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-text-secondary/50">
|
||||
Recent messages
|
||||
</p>
|
||||
{detail.recent_messages.slice(0, 5).map((msg) => (
|
||||
<div
|
||||
key={msg.id}
|
||||
className="rounded-lg border border-border/40 bg-card/40 px-3 py-2"
|
||||
>
|
||||
<p className="text-xs leading-relaxed text-text-secondary line-clamp-2">
|
||||
{msg.username}:{" "}
|
||||
{renderMessageContent(msg.content, msg.metadata) ||
|
||||
"(no text content)"}
|
||||
</p>
|
||||
<p className="mt-1 text-[10px] font-mono text-text-secondary/40">
|
||||
{new Date(msg.created_at).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-48 flex-col items-center justify-center text-center">
|
||||
<Hash className="size-8 text-text-secondary/30 mb-2" />
|
||||
<p className="text-xs text-text-secondary/60">
|
||||
Select a channel to see its culture summary and recent messages.
|
||||
</div>
|
||||
<Stat
|
||||
label="Flagged"
|
||||
value={detail.flagged_count}
|
||||
tone="vermilion"
|
||||
/>
|
||||
<p className="text-xs text-[var(--color-ink-soft)]">
|
||||
{detail.culture_summary ?? "No data yet."}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-[var(--color-ink-soft)]">
|
||||
Select a channel to inspect.
|
||||
</p>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ChannelRow({
|
||||
channel,
|
||||
active,
|
||||
selected,
|
||||
onSelect,
|
||||
}: {
|
||||
channel: DashboardChannel;
|
||||
active: boolean;
|
||||
onSelect: (id: string) => void;
|
||||
selected: boolean;
|
||||
onSelect: () => void;
|
||||
}) {
|
||||
const total = channel.total_messages + channel.flagged_count || 1;
|
||||
return (
|
||||
<Card
|
||||
className={active ? "border-primary/40 bg-primary/5" : undefined}
|
||||
onClick={() => onSelect(channel.channel_id)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onSelect}
|
||||
className="flex items-center gap-3 rounded-[var(--radius-r-control)] px-2.5 py-2 text-left transition-colors hover:bg-[var(--color-surface-2)] data-[selected]:bg-[var(--color-signal)]/8"
|
||||
data-selected={selected}
|
||||
>
|
||||
<CardContent className="flex cursor-pointer items-center gap-3 p-3">
|
||||
<Hash className="size-4 shrink-0 text-text-secondary/50" />
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium text-text-primary">
|
||||
{channel.channel_name ?? channel.channel_id}
|
||||
</p>
|
||||
<p className="truncate text-[10px] font-mono text-text-secondary/50">
|
||||
{channel.channel_id}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex shrink-0 gap-1.5">
|
||||
<Badge variant="outline">{channel.total_messages}</Badge>
|
||||
{channel.flagged_count > 0 && (
|
||||
<Badge variant="destructive">{channel.flagged_count}</Badge>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Hash className="size-4 text-[var(--color-ink-soft)]" />
|
||||
<span className="min-w-0 flex-1 truncate text-sm">
|
||||
{channel.channel_name ?? channel.channel_id}
|
||||
</span>
|
||||
<span className="mono text-xs text-[var(--color-ink-soft)]">
|
||||
{channel.flagged_count}/{channel.total_messages}
|
||||
</span>
|
||||
<div className="h-1.5 w-10 overflow-hidden rounded-full bg-[var(--color-hairline)]">
|
||||
<div
|
||||
className="h-full bg-[var(--color-signal)]"
|
||||
style={{ width: `${(channel.flagged_count / total) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function Stat({
|
||||
label,
|
||||
value,
|
||||
tone,
|
||||
}: {
|
||||
label: string;
|
||||
value: number;
|
||||
tone: "vermilion";
|
||||
}) {
|
||||
return (
|
||||
<div className="surface-2 flex items-center justify-between p-2.5">
|
||||
<span className="text-xs text-[var(--color-ink-soft)]">{label}</span>
|
||||
<span className="mono font-semibold text-[var(--color-vermilion)]">
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,109 +1,29 @@
|
||||
"use client";
|
||||
import type { AreaPoint } from "@/components/charts/area-activity";
|
||||
import { AreaActivity } from "@/components/charts/area-activity";
|
||||
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
Cell,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { useMounted } from "@/lib/hooks/use-mounted";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface HourlyActivityChartProps {
|
||||
data?: { hour: number; messages: number; flagged: number }[];
|
||||
export interface HourlyActivityChartProps {
|
||||
data: { hour: number; messages: number; flagged: number }[];
|
||||
}
|
||||
|
||||
const HOUR_LABELS = Array.from({ length: 24 }, (_, i) => {
|
||||
const h = i % 12 === 0 ? 12 : i % 12;
|
||||
return `${h}${i < 12 ? "am" : "pm"}`;
|
||||
});
|
||||
|
||||
const TOOLTIP_STYLE = {
|
||||
background: "oklch(0.11 0.02 245 / 0.95)",
|
||||
border: "1px solid oklch(1 0 0 / 0.08)",
|
||||
borderRadius: 8,
|
||||
fontSize: 12,
|
||||
color: "oklch(0.93 0.01 245)",
|
||||
} as const;
|
||||
|
||||
export function HourlyActivityChart({ data = [] }: HourlyActivityChartProps) {
|
||||
const mounted = useMounted();
|
||||
|
||||
const full = Array.from({ length: 24 }, (_, hour) => {
|
||||
const found = data.find((d) => d.hour === hour);
|
||||
return {
|
||||
hour,
|
||||
label: HOUR_LABELS[hour],
|
||||
messages: found?.messages ?? 0,
|
||||
flagged: found?.flagged ?? 0,
|
||||
};
|
||||
});
|
||||
|
||||
const peak = Math.max(1, ...full.map((d) => d.messages));
|
||||
const maxMessages = Math.max(...full.map((d) => d.messages));
|
||||
|
||||
export function HourlyActivityChart({ data }: HourlyActivityChartProps) {
|
||||
const points: AreaPoint[] = data.map((d) => ({
|
||||
label: `${d.hour}:00`,
|
||||
value: d.messages,
|
||||
}));
|
||||
return (
|
||||
<Card className={cn("[--card-spacing:0px]", "rounded-2xl", "p-5")}>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<span className="text-xs font-semibold tracking-wide uppercase text-text-secondary">
|
||||
Hourly Activity
|
||||
</span>
|
||||
<span className="text-[10px] text-text-secondary/50">
|
||||
last 24h · peak {maxMessages} msgs
|
||||
<div className="surface p-4">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold">Hourly distribution</h3>
|
||||
<span className="text-xs text-[var(--color-ink-soft)]">
|
||||
00:00 – 23:00
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-40">
|
||||
{mounted ? (
|
||||
<ResponsiveContainer
|
||||
width="100%"
|
||||
height="100%"
|
||||
minWidth={0}
|
||||
minHeight={0}
|
||||
>
|
||||
<BarChart data={full} margin={{ left: -22, right: 4, top: 4 }}>
|
||||
<XAxis
|
||||
dataKey="label"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: "oklch(0.55 0.02 245)", fontSize: 9 }}
|
||||
interval={3}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: "oklch(0.55 0.02 245)", fontSize: 10 }}
|
||||
allowDecimals={false}
|
||||
domain={[0, (dataMax: number) => Math.max(1, dataMax)]}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={TOOLTIP_STYLE}
|
||||
cursor={{ fill: "oklch(1 0 0 / 0.04)" }}
|
||||
labelFormatter={(label) => `Hour ${label}`}
|
||||
/>
|
||||
<Bar dataKey="messages" radius={[3, 3, 0, 0]} name="Messages">
|
||||
{full.map((d) => (
|
||||
<Cell
|
||||
key={d.hour}
|
||||
fill={
|
||||
d.messages === maxMessages && maxMessages > 0
|
||||
? "var(--color-primary)"
|
||||
: d.messages > peak * 0.5
|
||||
? "oklch(0.52 0.13 245 / 0.7)"
|
||||
: "oklch(0.52 0.13 245 / 0.35)"
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="h-full w-full animate-pulse rounded-md bg-card/40" />
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
<AreaActivity
|
||||
data={points}
|
||||
height={140}
|
||||
stroke="var(--color-amber)"
|
||||
label="Hourly message activity"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,102 +1,53 @@
|
||||
"use client";
|
||||
import { RadialGauge } from "@/components/charts/radial-gauge";
|
||||
import type { DashboardStats } from "@/lib/types";
|
||||
|
||||
import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { useMounted } from "@/lib/hooks/use-mounted";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface ModerationDonutProps {
|
||||
data?: { name: string; value: number; color: string }[];
|
||||
export interface ModerationDonutProps {
|
||||
stats?: DashboardStats;
|
||||
}
|
||||
|
||||
const TOOLTIP_STYLE = {
|
||||
background: "oklch(0.11 0.02 245 / 0.95)",
|
||||
border: "1px solid oklch(1 0 0 / 0.08)",
|
||||
borderRadius: 8,
|
||||
fontSize: 12,
|
||||
color: "oklch(0.93 0.01 245)",
|
||||
} as const;
|
||||
|
||||
export function ModerationDonut({ data = [] }: ModerationDonutProps) {
|
||||
const mounted = useMounted();
|
||||
const total = data.reduce((sum, d) => sum + d.value, 0);
|
||||
const cleanPct =
|
||||
total > 0
|
||||
? Math.round(
|
||||
((data.find((d) => d.name === "Clean")?.value ?? 0) / total) * 100,
|
||||
)
|
||||
: 0;
|
||||
export function ModerationDonut({ stats }: ModerationDonutProps) {
|
||||
const clean = stats?.total_clean ?? 0;
|
||||
const flagged = stats?.total_flagged ?? 0;
|
||||
const warned = stats?.total_warned ?? 0;
|
||||
const total = clean + flagged + warned || 1;
|
||||
const ratio = clean / total;
|
||||
|
||||
return (
|
||||
<Card className={cn("[--card-spacing:0px]", "rounded-2xl", "p-5")}>
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-xs font-semibold tracking-wide uppercase text-text-secondary">
|
||||
Moderation Breakdown
|
||||
</span>
|
||||
<div className="surface flex flex-col items-center gap-3 p-4">
|
||||
<h3 className="self-start text-sm font-semibold">Moderation health</h3>
|
||||
<RadialGauge
|
||||
value={ratio}
|
||||
size={150}
|
||||
label="Clean"
|
||||
tone={ratio > 0.8 ? "signal" : ratio > 0.6 ? "amber" : "vermilion"}
|
||||
/>
|
||||
<div className="flex w-full flex-col gap-1.5 text-xs">
|
||||
<Row label="Clean" value={clean} tone="var(--color-signal)" />
|
||||
<Row label="Warned" value={warned} tone="var(--color-amber)" />
|
||||
<Row label="Flagged" value={flagged} tone="var(--color-vermilion)" />
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative h-40 w-40 shrink-0">
|
||||
{mounted ? (
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={data}
|
||||
dataKey="value"
|
||||
nameKey="name"
|
||||
innerRadius={52}
|
||||
outerRadius={72}
|
||||
paddingAngle={2}
|
||||
strokeWidth={0}
|
||||
>
|
||||
{data.map((entry) => (
|
||||
<Cell key={entry.name} fill={entry.color} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip contentStyle={TOOLTIP_STYLE} />
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="h-full w-full animate-pulse rounded-full bg-card/40" />
|
||||
)}
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
|
||||
<span className="text-2xl font-bold text-text-primary">
|
||||
{total.toLocaleString()}
|
||||
</span>
|
||||
<span className="text-[10px] uppercase tracking-wide text-text-secondary/60">
|
||||
messages
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<div className="min-w-0 flex-1 space-y-1.5">
|
||||
{data.map((d) => (
|
||||
<div key={d.name} className="flex items-center gap-2 text-xs">
|
||||
<span
|
||||
className="size-2.5 shrink-0 rounded-sm"
|
||||
style={{ background: d.color }}
|
||||
/>
|
||||
<span className="text-text-secondary">{d.name}</span>
|
||||
<span className="ml-auto font-mono text-text-primary">
|
||||
{d.value.toLocaleString()}
|
||||
</span>
|
||||
<span className="w-10 text-right font-mono text-text-secondary/50">
|
||||
{total > 0 ? Math.round((d.value / total) * 100) : 0}%
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
{cleanPct >= 90 && (
|
||||
<p className="pt-1 text-[10px] text-green-500/80">
|
||||
✓ Server is {cleanPct}% clean — moderation is holding up well
|
||||
</p>
|
||||
)}
|
||||
{cleanPct < 90 && cleanPct > 0 && (
|
||||
<p className="pt-1 text-[10px] text-amber-500/80">
|
||||
{100 - cleanPct}% of messages were flagged or warned — review
|
||||
activity in the Analysis tab
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
function Row({
|
||||
label,
|
||||
value,
|
||||
tone,
|
||||
}: {
|
||||
label: string;
|
||||
value: number;
|
||||
tone: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="flex items-center gap-2 text-[var(--color-ink-soft)]">
|
||||
<span className="size-2 rounded-full" style={{ background: tone }} />
|
||||
{label}
|
||||
</span>
|
||||
<span className="mono text-[var(--color-ink)]">
|
||||
{value.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,135 +1,85 @@
|
||||
"use client";
|
||||
|
||||
import { Flame, Heart, SmilePlus } from "lucide-react";
|
||||
import { Avatar } from "@/components/primitives/avatar";
|
||||
import { Badge } from "@/components/primitives/badge";
|
||||
import { EmptyState, LoadingSkeleton } from "@/components/shared";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { useTopReactions, useTopReactors } from "@/hooks";
|
||||
import { renderMessageContent } from "@/lib/format";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
function formatReactionTime(ts: number | null): string {
|
||||
if (!ts) return "";
|
||||
const diff = Date.now() - ts;
|
||||
const hours = Math.floor(diff / 3600000);
|
||||
if (hours < 1) return "baru saja";
|
||||
if (hours < 24) return `${hours} jam lalu`;
|
||||
const days = Math.floor(hours / 24);
|
||||
return `${days} hari lalu`;
|
||||
export interface ReactionsSectionProps {
|
||||
initialReactions?: Awaited<ReturnType<typeof useTopReactions>>["data"];
|
||||
}
|
||||
|
||||
export function ReactionsSection() {
|
||||
const { data: reactions, isLoading: reactionsLoading } = useTopReactions();
|
||||
const { data: reactors, isLoading: reactorsLoading } = useTopReactors();
|
||||
|
||||
if (reactionsLoading || reactorsLoading) return <LoadingSkeleton count={5} />;
|
||||
|
||||
const topReactions = (reactions ?? []).slice(0, 6);
|
||||
const topReactors = (reactors ?? []).slice(0, 6);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h3 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-text-secondary/50">
|
||||
<Heart className="size-3" />
|
||||
Top pesan paling di-reaksi
|
||||
<div className="grid gap-3 lg:grid-cols-2">
|
||||
<div className="surface p-4">
|
||||
<h3 className="mb-3 flex items-center gap-2 text-sm font-semibold">
|
||||
<Heart className="size-4 text-[var(--color-vermilion)]" />
|
||||
Top reactions
|
||||
</h3>
|
||||
{reactionsLoading ? (
|
||||
<LoadingSkeleton count={5} height="h-16" />
|
||||
) : !reactions || reactions.length === 0 ? (
|
||||
<Card className={cn("p-6", "[--card-spacing:0px]", "rounded-2xl")}>
|
||||
<EmptyState
|
||||
icon={Heart}
|
||||
title="Belum ada reaksi"
|
||||
description="Pesan dengan reaksi emoji akan muncul di sini."
|
||||
/>
|
||||
</Card>
|
||||
{topReactions.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={SmilePlus}
|
||||
title="No reactions"
|
||||
description="No reactions yet."
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{reactions.map((r, i) => (
|
||||
<Card
|
||||
key={r.message_id}
|
||||
className={cn(
|
||||
"flex items-center gap-3 p-3",
|
||||
"[--card-spacing:0px]",
|
||||
"rounded-2xl",
|
||||
)}
|
||||
>
|
||||
<span className="w-6 shrink-0 text-center font-mono text-xs text-text-secondary/50">
|
||||
{i + 1}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{topReactions
|
||||
.flatMap((m) =>
|
||||
m.top_emojis.map((e) => ({ emoji: e.emoji, count: e.count })),
|
||||
)
|
||||
.reduce<{ emoji: string; count: number }[]>((acc, cur) => {
|
||||
const found = acc.find((x) => x.emoji === cur.emoji);
|
||||
if (found) found.count += cur.count;
|
||||
else acc.push(cur);
|
||||
return acc;
|
||||
}, [])
|
||||
.sort((a, b) => b.count - a.count)
|
||||
.slice(0, 8)
|
||||
.map((r) => (
|
||||
<span
|
||||
key={r.emoji}
|
||||
className="flex items-center gap-1.5 rounded-[var(--radius-r-control)] bg-[var(--color-surface-2)] px-2.5 py-1 text-sm"
|
||||
>
|
||||
<span>{r.emoji}</span>
|
||||
<span className="mono text-xs text-[var(--color-ink-soft)]">
|
||||
{r.count}
|
||||
</span>
|
||||
</span>
|
||||
<div className="flex shrink-0 gap-0.5 text-base">
|
||||
{r.top_emojis.map((e) => (
|
||||
<span
|
||||
key={`${r.message_id}-${e.emoji}`}
|
||||
title={`${e.emoji} ×${e.count}`}
|
||||
>
|
||||
{e.emoji}
|
||||
</span>
|
||||
))}
|
||||
{r.top_emojis.length === 0 && (
|
||||
<Heart className="size-4 text-text-secondary/30" />
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="line-clamp-1 text-xs text-text-secondary">
|
||||
{renderMessageContent(r.content, undefined) ||
|
||||
"(tanpa teks)"}
|
||||
</p>
|
||||
<p className="mt-0.5 truncate text-[10px] font-mono text-text-secondary/40">
|
||||
{r.username ?? "unknown"} · #
|
||||
{r.channel_name ?? r.channel_id?.slice(0, 8)} ·{" "}
|
||||
{formatReactionTime(r.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant="secondary" className="shrink-0 gap-1">
|
||||
<Heart className="size-3" />
|
||||
{r.reaction_count}
|
||||
</Badge>
|
||||
</Card>
|
||||
))}
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="mb-2 flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-text-secondary/50">
|
||||
<Flame className="size-3" />
|
||||
Top reaktor — paling sering ngasih reaksi
|
||||
<div className="surface p-4">
|
||||
<h3 className="mb-3 flex items-center gap-2 text-sm font-semibold">
|
||||
<Flame className="size-4 text-[var(--color-amber)]" />
|
||||
Top reactors
|
||||
</h3>
|
||||
{reactorsLoading ? (
|
||||
<LoadingSkeleton count={5} height="h-14" />
|
||||
) : !reactors || reactors.length === 0 ? (
|
||||
<Card className={cn("p-6", "[--card-spacing:0px]", "rounded-2xl")}>
|
||||
<EmptyState
|
||||
icon={SmilePlus}
|
||||
title="Belum ada reaktor"
|
||||
description="User yang ngasih reaksi emoji akan muncul di sini."
|
||||
/>
|
||||
</Card>
|
||||
{topReactors.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={SmilePlus}
|
||||
title="No reactors"
|
||||
description="No reactors yet."
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{reactors.map((r, i) => (
|
||||
<Card
|
||||
key={r.user_id}
|
||||
className={cn(
|
||||
"flex items-center gap-3 p-3",
|
||||
"[--card-spacing:0px]",
|
||||
"rounded-2xl",
|
||||
)}
|
||||
>
|
||||
<span className="w-6 shrink-0 text-center font-mono text-xs text-text-secondary/50">
|
||||
{i + 1}
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-xs font-medium text-text-primary">
|
||||
{r.username}
|
||||
</p>
|
||||
<p className="mt-0.5 truncate text-[10px] font-mono text-text-secondary/40">
|
||||
{r.messages_reacted} pesan di-reaksi · {r.emojis_used} emoji
|
||||
unik · {r.adds_count} total reaksi
|
||||
</p>
|
||||
</div>
|
||||
<Badge variant="secondary" className="shrink-0 gap-1">
|
||||
<Flame className="size-3" />
|
||||
{r.net_count}
|
||||
</Badge>
|
||||
</Card>
|
||||
<div className="flex flex-col gap-2">
|
||||
{topReactors.map((r) => (
|
||||
<div key={r.user_id} className="flex items-center gap-3">
|
||||
<Avatar name={r.username} size={28} />
|
||||
<span className="flex-1 text-sm">{r.username}</span>
|
||||
<Badge tone="signal">+{r.net_count}</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
@@ -137,5 +87,3 @@ export function ReactionsSection() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ReactionsSection;
|
||||
|
||||
@@ -1,101 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import { Area, AreaChart, ResponsiveContainer } from "recharts";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { useMounted } from "@/lib/hooks/use-mounted";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface StatCardProps {
|
||||
label: string;
|
||||
value: number | string;
|
||||
icon: LucideIcon;
|
||||
variant?: "default" | "danger" | "success";
|
||||
sparklineData?: { value: number }[];
|
||||
formatter?: (v: number) => string;
|
||||
}
|
||||
|
||||
export function StatCard({
|
||||
label,
|
||||
value,
|
||||
icon: Icon,
|
||||
variant = "default",
|
||||
sparklineData,
|
||||
formatter = (v) => (typeof v === "number" ? v.toLocaleString() : v),
|
||||
}: StatCardProps) {
|
||||
const mounted = useMounted();
|
||||
const accentColor = {
|
||||
default: "var(--color-primary)",
|
||||
danger: "var(--color-destructive)",
|
||||
success: "oklch(0.6 0.18 160)",
|
||||
}[variant];
|
||||
|
||||
const bgAccent = {
|
||||
default: "bg-primary/10 text-primary",
|
||||
danger: "bg-destructive/10 text-destructive",
|
||||
success: "bg-emerald-500/10 text-emerald-500",
|
||||
}[variant];
|
||||
|
||||
const numValue = typeof value === "number" ? value : Number(value);
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
"relative overflow-hidden p-4",
|
||||
"[--card-spacing:0px]",
|
||||
"rounded-2xl",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div className={cn("p-1.5 rounded-md", bgAccent)}>
|
||||
<Icon className="size-4" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="text-2xl font-mono font-semibold tracking-tight"
|
||||
style={{ color: accentColor }}
|
||||
>
|
||||
{formatter(numValue)}
|
||||
</div>
|
||||
<div className="text-[11px] text-text-secondary font-medium mt-0.5 tracking-wide uppercase">
|
||||
{label}
|
||||
</div>
|
||||
|
||||
{/* Sparkline background */}
|
||||
{sparklineData && sparklineData.length > 0 && mounted && (
|
||||
<div className="absolute bottom-0 left-0 right-0 h-12 opacity-20">
|
||||
<ResponsiveContainer
|
||||
width="100%"
|
||||
height={48}
|
||||
minWidth={0}
|
||||
minHeight={0}
|
||||
>
|
||||
<AreaChart data={sparklineData}>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id={`spark-grad-${label}`}
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="1"
|
||||
>
|
||||
<stop offset="0%" stopColor={accentColor} stopOpacity={0.5} />
|
||||
<stop offset="100%" stopColor={accentColor} stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="value"
|
||||
stroke={accentColor}
|
||||
strokeWidth={1.5}
|
||||
fill={`url(#spark-grad-${label})`}
|
||||
dot={false}
|
||||
isAnimationActive={false}
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,74 +1,39 @@
|
||||
"use client";
|
||||
import { Hash } from "lucide-react";
|
||||
import type { TopChannel } from "@/lib/types";
|
||||
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
ResponsiveContainer,
|
||||
Tooltip,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from "recharts";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { useMounted } from "@/lib/hooks/use-mounted";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface TopChannelsChartProps {
|
||||
data?: { name: string; count: number }[];
|
||||
export interface TopChannelsChartProps {
|
||||
channels: TopChannel[];
|
||||
}
|
||||
|
||||
export function TopChannelsChart({ data = [] }: TopChannelsChartProps) {
|
||||
const mounted = useMounted();
|
||||
|
||||
export function TopChannelsChart({ channels }: TopChannelsChartProps) {
|
||||
const max = Math.max(...channels.map((c) => c.message_count), 1);
|
||||
const top = [...channels]
|
||||
.sort((a, b) => b.message_count - a.message_count)
|
||||
.slice(0, 8);
|
||||
return (
|
||||
<Card className={cn("[--card-spacing:0px]", "rounded-2xl", "p-5")}>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="text-xs font-semibold tracking-wide uppercase text-text-secondary">
|
||||
Top Channels
|
||||
</span>
|
||||
<div className="surface p-4">
|
||||
<h3 className="mb-3 text-sm font-semibold">Top channels</h3>
|
||||
<div className="flex flex-col gap-2.5">
|
||||
{top.map((c) => (
|
||||
<div key={c.channel_id} className="flex items-center gap-3">
|
||||
<span className="flex size-6 shrink-0 items-center justify-center rounded-[var(--radius-r-control)] bg-[var(--color-surface-2)] text-[var(--color-ink-soft)]">
|
||||
<Hash className="size-3.5" />
|
||||
</span>
|
||||
<span className="w-32 shrink-0 truncate text-xs text-[var(--color-ink)]">
|
||||
{c.channel_name ?? c.channel_id}
|
||||
</span>
|
||||
<div className="relative h-2 flex-1 overflow-hidden rounded-full bg-[var(--color-surface-2)]">
|
||||
<div
|
||||
className="absolute inset-y-0 left-0 rounded-full bg-[var(--color-signal)] transition-[width] duration-500"
|
||||
style={{ width: `${(c.message_count / max) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
<span className="mono w-12 shrink-0 text-right text-xs text-[var(--color-ink-soft)]">
|
||||
{c.message_count.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="h-48">
|
||||
{mounted ? (
|
||||
<ResponsiveContainer
|
||||
width="100%"
|
||||
height={192}
|
||||
minWidth={0}
|
||||
minHeight={0}
|
||||
>
|
||||
<BarChart data={data} layout="vertical">
|
||||
<XAxis
|
||||
type="number"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: "oklch(0.55 0.02 245)", fontSize: 10 }}
|
||||
/>
|
||||
<YAxis
|
||||
type="category"
|
||||
dataKey="name"
|
||||
axisLine={false}
|
||||
tickLine={false}
|
||||
tick={{ fill: "oklch(0.55 0.02 245)", fontSize: 10 }}
|
||||
width={80}
|
||||
/>
|
||||
<Tooltip
|
||||
contentStyle={{
|
||||
background: "oklch(0.11 0.02 245 / 0.9)",
|
||||
border: "1px solid oklch(1 0 0 / 0.08)",
|
||||
borderRadius: 8,
|
||||
fontSize: 12,
|
||||
color: "oklch(0.93 0.01 245)",
|
||||
}}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="count"
|
||||
fill="var(--color-primary)"
|
||||
radius={[0, 4, 4, 0]}
|
||||
/>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
) : (
|
||||
<div className="h-full w-full animate-pulse rounded-md bg-card/40" />
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,50 +1,24 @@
|
||||
"use client";
|
||||
|
||||
import { Search, Users, UserX } from "lucide-react";
|
||||
import { Search, Users } from "lucide-react";
|
||||
import { useCallback, useState } from "react";
|
||||
import { Avatar } from "@/components/primitives/avatar";
|
||||
import { Badge } from "@/components/primitives/badge";
|
||||
import { Input } from "@/components/primitives/input";
|
||||
import { EmptyState, LoadingSkeleton } from "@/components/shared";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { useUserDetail, useUsers } from "@/hooks";
|
||||
import { renderMessageContent } from "@/lib/format";
|
||||
import type { DashboardUser } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const TRUST_TIERS = [
|
||||
{
|
||||
min: 75,
|
||||
label: "Trusted",
|
||||
className: "border-green-500/40 text-green-500",
|
||||
},
|
||||
{ min: 40, label: "Netral", className: "border-sky-500/40 text-sky-500" },
|
||||
{
|
||||
min: 10,
|
||||
label: "At Risk",
|
||||
className: "border-orange-500/40 text-orange-500",
|
||||
},
|
||||
{ min: 0, label: "Kritis", className: "border-red-500/40 text-red-500" },
|
||||
] as const;
|
||||
{ min: 75, label: "Trusted", tone: "signal" as const },
|
||||
{ min: 40, label: "Neutral", tone: "neutral" as const },
|
||||
{ min: 10, label: "At Risk", tone: "amber" as const },
|
||||
{ min: 0, label: "Critical", tone: "vermilion" as const },
|
||||
];
|
||||
|
||||
export function trustTier(score: number) {
|
||||
function trustTier(score?: number | null) {
|
||||
const s = score ?? 0;
|
||||
return (
|
||||
TRUST_TIERS.find((t) => score >= t.min) ??
|
||||
TRUST_TIERS[TRUST_TIERS.length - 1]
|
||||
);
|
||||
}
|
||||
|
||||
function TrustBadge({ score }: { score: number }) {
|
||||
const tier = trustTier(score);
|
||||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={tier.className}
|
||||
title={`Trust score ${score}`}
|
||||
>
|
||||
{tier.label}: {score}
|
||||
</Badge>
|
||||
TRUST_TIERS.find((t) => s >= t.min) ?? TRUST_TIERS[TRUST_TIERS.length - 1]
|
||||
);
|
||||
}
|
||||
|
||||
@@ -52,201 +26,126 @@ export function UsersSection() {
|
||||
const [search, setSearch] = useState("");
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
|
||||
const {
|
||||
data: users = [],
|
||||
isLoading,
|
||||
error,
|
||||
mutate: refetch,
|
||||
} = useUsers(search);
|
||||
const { data: users = [], isLoading } = useUsers(search);
|
||||
const { data: detail } = useUserDetail(selectedId);
|
||||
|
||||
const handleSearch = useCallback((v: string) => {
|
||||
setSearch(v);
|
||||
setSelectedId(null);
|
||||
}, []);
|
||||
const handleSearch = useCallback((v: string) => setSearch(v), []);
|
||||
|
||||
if (error) {
|
||||
if (isLoading) return <LoadingSkeleton count={6} />;
|
||||
if (users.length === 0)
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
"p-6 text-sm",
|
||||
"border border-red-500/30 ring-red-500/20",
|
||||
"[--card-spacing:0px]",
|
||||
"rounded-2xl",
|
||||
)}
|
||||
>
|
||||
Failed to load users: {error.message}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="ml-2"
|
||||
onClick={() => refetch()}
|
||||
>
|
||||
Retry
|
||||
</Button>
|
||||
</Card>
|
||||
<EmptyState
|
||||
icon={Users}
|
||||
title="No users found"
|
||||
description="Try a different search."
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
|
||||
<div className="space-y-3">
|
||||
<div className="grid gap-3 lg:grid-cols-[1fr_360px]">
|
||||
<div className="surface flex flex-col gap-2 p-3">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[var(--color-ink-soft)]" />
|
||||
<Input
|
||||
placeholder="Search by user ID or username…"
|
||||
mono
|
||||
placeholder="search users…"
|
||||
value={search}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
className="pl-9 h-9"
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<LoadingSkeleton count={5} height="h-16" />
|
||||
) : users.length === 0 ? (
|
||||
<EmptyState icon={Users} title="No users found" />
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{users.map((user) => (
|
||||
<UserRow
|
||||
key={user.user_id}
|
||||
user={user}
|
||||
active={selectedId === user.user_id}
|
||||
onSelect={setSelectedId}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col">
|
||||
{users.map((u) => {
|
||||
const tier = trustTier(u.trust_score);
|
||||
return (
|
||||
<button
|
||||
key={u.user_id}
|
||||
type="button"
|
||||
onClick={() => setSelectedId(u.user_id)}
|
||||
className="flex items-center gap-3 rounded-[var(--radius-r-control)] px-2 py-2 text-left transition-colors hover:bg-[var(--color-surface-2)]"
|
||||
>
|
||||
<Avatar src={u.avatar_url} name={u.username} size={34} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-sm font-medium">
|
||||
{u.username ?? "unknown"}
|
||||
</div>
|
||||
<div className="mono text-xs text-[var(--color-ink-soft)]">
|
||||
{u.total_messages.toLocaleString()} msg
|
||||
</div>
|
||||
</div>
|
||||
<Badge tone={tier.tone}>{tier.label}</Badge>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card
|
||||
className={cn("h-fit", "[--card-spacing:0px]", "rounded-2xl", "p-5")}
|
||||
>
|
||||
<div className="surface p-4">
|
||||
{detail ? (
|
||||
<div className="space-y-3">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="size-10">
|
||||
<AvatarImage src={detail.avatar_url ?? undefined} />
|
||||
<AvatarFallback>
|
||||
{detail.username?.charAt(0).toUpperCase() ?? "?"}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold text-text-primary">
|
||||
{detail.username ?? "Unknown user"}
|
||||
</p>
|
||||
<p className="text-[10px] font-mono text-text-secondary/50">
|
||||
{detail.user_id}
|
||||
</p>
|
||||
<Avatar
|
||||
src={detail.avatar_url}
|
||||
name={detail.username}
|
||||
size={44}
|
||||
/>
|
||||
<div>
|
||||
<div className="font-semibold">{detail.username}</div>
|
||||
<div className="text-xs text-[var(--color-ink-soft)]">
|
||||
{detail.total_messages.toLocaleString()} messages
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
<Badge variant="outline">Messages: {detail.total_messages}</Badge>
|
||||
<Badge variant="destructive">
|
||||
Flagged: {detail.flagged_count}
|
||||
</Badge>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-green-500/40 text-green-500"
|
||||
>
|
||||
Clean: {detail.clean_count}
|
||||
</Badge>
|
||||
{detail.trust_score != null && (
|
||||
<TrustBadge score={detail.trust_score} />
|
||||
)}
|
||||
{detail.clean_message_streak != null && (
|
||||
<Badge variant="outline">
|
||||
Streak: {detail.clean_message_streak}
|
||||
</Badge>
|
||||
)}
|
||||
{detail.total_infractions != null && (
|
||||
<Badge variant="destructive">
|
||||
Infractions: {detail.total_infractions}
|
||||
</Badge>
|
||||
)}
|
||||
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||
<Stat label="Trust" value={`${detail.trust_score ?? 0}`} />
|
||||
<Stat
|
||||
label="Clean streak"
|
||||
value={`${detail.clean_message_streak ?? 0}`}
|
||||
/>
|
||||
<Stat
|
||||
label="Infractions"
|
||||
value={`${detail.total_infractions ?? 0}`}
|
||||
tone="vermilion"
|
||||
/>
|
||||
<Stat
|
||||
label="Flagged"
|
||||
value={`${detail.flagged_count}`}
|
||||
tone="amber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{detail.profile_summary && (
|
||||
<p className="text-xs leading-relaxed text-text-secondary">
|
||||
{detail.profile_summary}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{detail.recent_messages.length > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-text-secondary/50">
|
||||
Recent messages
|
||||
</p>
|
||||
{detail.recent_messages.slice(0, 5).map((msg) => (
|
||||
<div
|
||||
key={msg.id}
|
||||
className="rounded-lg border border-border/40 bg-card/40 px-3 py-2"
|
||||
>
|
||||
<p className="text-xs leading-relaxed text-text-secondary line-clamp-2">
|
||||
{renderMessageContent(msg.content, msg.metadata) ||
|
||||
"(no text content)"}
|
||||
</p>
|
||||
<p className="mt-1 text-[10px] font-mono text-text-secondary/40">
|
||||
{msg.channel_id?.slice(0, 8)} ·{" "}
|
||||
{new Date(msg.created_at).toLocaleString()}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex h-48 flex-col items-center justify-center text-center">
|
||||
<UserX className="size-8 text-text-secondary/30 mb-2" />
|
||||
<p className="text-xs text-text-secondary/60">
|
||||
Select a user to see their profile, trust score and recent
|
||||
messages.
|
||||
<p className="text-xs text-[var(--color-ink-soft)]">
|
||||
{detail.profile_summary}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-[var(--color-ink-soft)]">
|
||||
Select a user to inspect.
|
||||
</p>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function UserRow({
|
||||
user,
|
||||
active,
|
||||
onSelect,
|
||||
function Stat({
|
||||
label,
|
||||
value,
|
||||
tone,
|
||||
}: {
|
||||
user: DashboardUser;
|
||||
active: boolean;
|
||||
onSelect: (id: string) => void;
|
||||
label: string;
|
||||
value: string;
|
||||
tone?: "amber" | "vermilion";
|
||||
}) {
|
||||
return (
|
||||
<Card
|
||||
className={active ? "border-primary/40 bg-primary/5" : undefined}
|
||||
onClick={() => onSelect(user.user_id)}
|
||||
>
|
||||
<CardContent className="flex cursor-pointer items-center gap-3 p-3">
|
||||
<Avatar className="size-8 shrink-0">
|
||||
<AvatarImage src={user.avatar_url ?? undefined} />
|
||||
<AvatarFallback className="text-xs">
|
||||
{user.username?.charAt(0).toUpperCase() ?? "?"}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-medium text-text-primary">
|
||||
{user.username ?? "Unknown user"}
|
||||
</p>
|
||||
<p className="truncate text-[10px] font-mono text-text-secondary/50">
|
||||
{user.user_id}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex shrink-0 gap-1.5">
|
||||
<Badge variant="outline">{user.total_messages}</Badge>
|
||||
{user.flagged_count > 0 && (
|
||||
<Badge variant="destructive">{user.flagged_count}</Badge>
|
||||
)}
|
||||
{user.trust_score != null && <TrustBadge score={user.trust_score} />}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="surface-2 p-2.5">
|
||||
<div className="text-[11px] uppercase tracking-wide text-[var(--color-ink-soft)]">
|
||||
{label}
|
||||
</div>
|
||||
<div
|
||||
className={`mono text-lg font-semibold ${tone === "amber" ? "text-[var(--color-amber)]" : tone === "vermilion" ? "text-[var(--color-vermilion)]" : "text-[var(--color-ink)]"}`}
|
||||
>
|
||||
{value}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,84 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
import { ThemeToggle } from "@/components/layout/theme-toggle";
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarGroup,
|
||||
SidebarGroupLabel,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarRail,
|
||||
} from "@/components/ui/sidebar";
|
||||
import { isActivePath, navItems } from "@/lib/navigation";
|
||||
|
||||
/**
|
||||
* Primary application navigation — pure shadcn Sidebar primitives.
|
||||
* Renders as a fixed desktop rail (collapsible to icons) and a Sheet
|
||||
* on mobile via the Sidebar component itself.
|
||||
*/
|
||||
export function AppSidebar() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<Sidebar collapsible="icon">
|
||||
<SidebarHeader>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton size="lg" render={<Link href="/dashboard" />}>
|
||||
<div className="flex size-6 shrink-0 items-center justify-center rounded-md bg-gradient-to-br from-cyan-500 to-teal-400 text-white text-[10px] font-bold">
|
||||
D
|
||||
</div>
|
||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
||||
<span className="truncate font-semibold">Discord Automod</span>
|
||||
<span className="truncate text-xs text-muted-foreground">
|
||||
Moderation dashboard
|
||||
</span>
|
||||
</div>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>Navigation</SidebarGroupLabel>
|
||||
<SidebarMenu>
|
||||
{navItems.map(({ href, label, icon: Icon, matchPrefix }) => {
|
||||
const active = isActivePath(pathname, matchPrefix);
|
||||
return (
|
||||
<SidebarMenuItem key={href}>
|
||||
<SidebarMenuButton
|
||||
render={<Link href={href} />}
|
||||
isActive={active}
|
||||
tooltip={label}
|
||||
className="group-data-[collapsible=icon]:size-8 group-data-[collapsible=icon]:justify-center"
|
||||
>
|
||||
<Icon />
|
||||
<span>{label}</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
})}
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
|
||||
<SidebarFooter>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<ThemeToggle />
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarFooter>
|
||||
|
||||
<SidebarRail />
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "motion/react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { navItems } from "@/lib/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const titleFromPath: Record<string, string> = {
|
||||
"/dashboard": "Overview",
|
||||
"/messages": "Messages",
|
||||
"/voice": "Voice",
|
||||
"/media": "Media",
|
||||
"/recordings": "Recordings",
|
||||
"/moderation": "Moderation",
|
||||
"/analysis": "Analysis",
|
||||
};
|
||||
|
||||
export function Spine() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Desktop rail */}
|
||||
<nav className="fixed left-0 top-0 z-30 hidden h-svh w-[68px] flex-col items-center gap-1 border-r border-[var(--color-hairline)] bg-[var(--color-canvas)]/80 py-4 backdrop-blur-md md:flex">
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className="mb-3 flex size-9 items-center justify-center rounded-[var(--radius-r-control)] bg-[var(--color-signal)] text-sm font-black text-[var(--color-signal-ink)]"
|
||||
aria-label="Bete"
|
||||
>
|
||||
B
|
||||
</Link>
|
||||
{navItems.map((item) => {
|
||||
const active = pathname.startsWith(item.matchPrefix);
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
"group relative flex size-11 items-center justify-center rounded-[var(--radius-r)] transition-colors",
|
||||
active
|
||||
? "text-[var(--color-signal)]"
|
||||
: "text-[var(--color-ink-soft)] hover:text-[var(--color-ink)]",
|
||||
)}
|
||||
aria-current={active ? "page" : undefined}
|
||||
>
|
||||
{active && (
|
||||
<motion.span
|
||||
layoutId="spine-active"
|
||||
className="absolute left-0 top-1/2 size-1 -translate-y-1/2 rounded-full bg-[var(--color-signal)]"
|
||||
transition={{ type: "spring", stiffness: 380, damping: 30 }}
|
||||
/>
|
||||
)}
|
||||
<Icon className="size-5" />
|
||||
<span className="pointer-events-none absolute left-full ml-2 hidden whitespace-nowrap rounded-[var(--radius-r-control)] bg-[var(--color-ink)] px-2 py-1 text-xs font-medium text-[var(--color-canvas)] opacity-0 transition-opacity group-hover:opacity-100 md:block">
|
||||
{item.label}
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Mobile bottom tab-bar */}
|
||||
<nav className="fixed inset-x-0 bottom-0 z-30 flex h-16 items-stretch border-t border-[var(--color-hairline)] bg-[var(--color-canvas)]/90 backdrop-blur-md md:hidden">
|
||||
{navItems.map((item) => {
|
||||
const active = pathname.startsWith(item.matchPrefix);
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
"flex flex-1 flex-col items-center justify-center gap-0.5 text-[10px] font-medium transition-colors",
|
||||
active
|
||||
? "text-[var(--color-signal)]"
|
||||
: "text-[var(--color-ink-soft)]",
|
||||
)}
|
||||
aria-current={active ? "page" : undefined}
|
||||
>
|
||||
<Icon className="size-5" />
|
||||
{item.label}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function PageTitle() {
|
||||
const pathname = usePathname();
|
||||
const key =
|
||||
Object.keys(titleFromPath).find((k) => pathname.startsWith(k)) ??
|
||||
"/dashboard";
|
||||
return (
|
||||
<span className="font-semibold max-md:hidden">{titleFromPath[key]}</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useChatbot } from "@/components/chatbot/chatbot-context";
|
||||
import { GuildSelector } from "@/components/shared/guild-selector";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
import { PageTitle } from "./spine";
|
||||
import { ThemeToggle } from "./theme-toggle";
|
||||
|
||||
const statusTone: Record<string, string> = {
|
||||
connected: "bg-[var(--color-signal)]",
|
||||
connecting: "bg-[var(--color-amber)]",
|
||||
disconnected: "bg-[var(--color-ink-soft)]",
|
||||
error: "bg-[var(--color-vermilion)]",
|
||||
};
|
||||
|
||||
export function StatusBar({
|
||||
guildId,
|
||||
onGuildChange,
|
||||
}: {
|
||||
guildId: string;
|
||||
onGuildChange: (g: string) => void;
|
||||
}) {
|
||||
const ws = useWebSocket();
|
||||
const { expression } = useChatbot();
|
||||
const [clock, setClock] = useState("--:--:--");
|
||||
|
||||
useEffect(() => {
|
||||
const tick = () =>
|
||||
setClock(new Date().toLocaleTimeString("en-GB", { hour12: false }));
|
||||
tick();
|
||||
const id = setInterval(tick, 1000);
|
||||
return () => clearInterval(id);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<header className="sticky top-0 z-20 flex h-14 shrink-0 items-center gap-2 border-b border-[var(--color-hairline)] bg-[var(--color-canvas)]/85 px-4 backdrop-blur-md md:px-6">
|
||||
<PageTitle />
|
||||
<div className="ms-auto flex items-center gap-3">
|
||||
<span className="hidden items-center gap-1.5 text-xs text-[var(--color-ink-soft)] sm:flex">
|
||||
<span className={cn("size-2 rounded-full", statusTone[ws.status])} />
|
||||
<span className="mono uppercase">{ws.status}</span>
|
||||
</span>
|
||||
<span className="hidden text-xs text-[var(--color-ink-soft)] md:inline">
|
||||
<span
|
||||
className={cn(
|
||||
"font-mono",
|
||||
expression !== "idle" && "text-[var(--color-signal)]",
|
||||
)}
|
||||
>
|
||||
{expression}
|
||||
</span>
|
||||
</span>
|
||||
<span className="hidden font-mono text-xs text-[var(--color-ink-soft)] lg:inline">
|
||||
{clock}
|
||||
</span>
|
||||
<GuildSelector
|
||||
value={guildId}
|
||||
onChange={(g) => onGuildChange(g ?? "")}
|
||||
/>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface SubNavTab {
|
||||
id: string;
|
||||
label: string;
|
||||
icon?: React.ReactNode;
|
||||
}
|
||||
|
||||
interface SubNavProps {
|
||||
tabs: SubNavTab[];
|
||||
activeTab: string;
|
||||
onTabChange: (tab: string) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function SubNav({
|
||||
tabs,
|
||||
activeTab,
|
||||
onTabChange,
|
||||
className,
|
||||
}: SubNavProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center gap-1 px-1 py-1 glass rounded-[var(--radius-panel)] w-fit",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
type="button"
|
||||
onClick={() => onTabChange(tab.id)}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-all duration-150",
|
||||
activeTab === tab.id
|
||||
? "bg-primary/20 text-text-primary shadow-[0_0_12px] shadow-primary/20"
|
||||
: "text-text-secondary/60 hover:text-text-primary/80",
|
||||
)}
|
||||
>
|
||||
{tab.icon}
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,40 +1,38 @@
|
||||
"use client";
|
||||
|
||||
import { Moon, Sun } from "lucide-react";
|
||||
import { motion } from "motion/react";
|
||||
import { useTheme } from "next-themes";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { useEffect, useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function ThemeToggle() {
|
||||
const { setTheme } = useTheme();
|
||||
const { resolvedTheme, setTheme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
useEffect(() => setMounted(true), []);
|
||||
|
||||
const isDark = resolvedTheme === "dark";
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
render={
|
||||
<Button variant="ghost" size="sm" className="w-full justify-start" />
|
||||
}
|
||||
>
|
||||
<Sun className="scale-100 dark:scale-0" />
|
||||
<Moon className="absolute scale-0 dark:scale-100" />
|
||||
<span className="truncate pl-1.5">Toggle theme</span>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-32">
|
||||
<DropdownMenuItem onClick={() => setTheme("light")}>
|
||||
<Sun className="mr-2 size-4" />
|
||||
Light
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => setTheme("dark")}>
|
||||
<Moon className="mr-2 size-4" />
|
||||
Dark
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Toggle theme"
|
||||
onClick={() => setTheme(isDark ? "light" : "dark")}
|
||||
className="flex size-9 items-center justify-center rounded-[var(--radius-r-control)] text-[var(--color-ink-soft)] transition-colors hover:bg-[var(--color-surface-2)] hover:text-[var(--color-ink)] focus-visible:ring-2 focus-visible:ring-[var(--color-ring)]"
|
||||
>
|
||||
{mounted && (
|
||||
<motion.span
|
||||
key={isDark ? "moon" : "sun"}
|
||||
initial={{ rotate: -90, opacity: 0 }}
|
||||
animate={{ rotate: 0, opacity: 1 }}
|
||||
transition={{ type: "spring", stiffness: 360, damping: 26 }}
|
||||
className={cn(
|
||||
isDark ? "text-[var(--color-signal)]" : "text-[var(--color-amber)]",
|
||||
)}
|
||||
>
|
||||
{isDark ? <Moon className="size-4" /> : <Sun className="size-4" />}
|
||||
</motion.span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,80 +1,59 @@
|
||||
"use client";
|
||||
|
||||
import { Disc3, Music, Repeat, SkipForward, Square } from "lucide-react";
|
||||
import { Pause, Play, SkipForward, Volume2 } from "lucide-react";
|
||||
import { motion } from "motion/react";
|
||||
import { Button } from "@/components/primitives/button";
|
||||
import { useMediaSkip, useMediaState, useMediaWsSync } from "@/hooks";
|
||||
import { useMediaPlayer } from "@/lib/hooks/use-media-player";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useWebSocket } from "@/lib/ws/context";
|
||||
|
||||
export function MiniPlayer() {
|
||||
const { playing, current, queue, loop, pending, skip, stop, toggleLoop } =
|
||||
useMediaPlayer();
|
||||
const ws = useWebSocket();
|
||||
const { data: state } = useMediaState();
|
||||
const { playing, current } = useMediaPlayer();
|
||||
useMediaWsSync(ws);
|
||||
const skip = useMediaSkip();
|
||||
|
||||
// Nothing to show if no track is playing and nothing is queued
|
||||
if (!current && queue.length === 0) return null;
|
||||
if (!current) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed bottom-0 left-0 right-0 z-40 h-14 glass-intense border-t border-glass-border flex items-center gap-3 px-4 md:px-6">
|
||||
{/* Track info */}
|
||||
<div className="flex items-center gap-2.5 min-w-0 flex-1 max-w-[280px]">
|
||||
<div className="size-8 rounded-md bg-gradient-to-br from-primary/20 to-primary/5 border border-primary/10 flex items-center justify-center shrink-0">
|
||||
{playing ? (
|
||||
<Disc3
|
||||
className="size-4 text-primary animate-spin"
|
||||
style={{ animationDuration: "4s" }}
|
||||
/>
|
||||
) : (
|
||||
<Music className="size-4 text-text-secondary" />
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-xs font-medium text-text-primary truncate">
|
||||
{current?.title ?? "Unknown track"}
|
||||
</p>
|
||||
{queue.length > 0 && (
|
||||
<p className="text-[10px] text-text-secondary/60">
|
||||
{queue.length > 1 ? `${queue.length} in queue` : "1 in queue"}
|
||||
</p>
|
||||
)}
|
||||
<motion.div
|
||||
initial={{ y: 100, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: 100, opacity: 0 }}
|
||||
transition={{ type: "spring", stiffness: 320, damping: 30 }}
|
||||
className={cn(
|
||||
"pointer-events-auto fixed inset-x-0 bottom-20 z-30 mx-auto w-[calc(100%-2rem)] max-w-[480px]",
|
||||
"surface flex items-center gap-3 px-3 py-2 text-sm",
|
||||
)}
|
||||
>
|
||||
<img
|
||||
src={current.thumbnailUrl ?? "/favicon.ico"}
|
||||
alt={current.title}
|
||||
className="size-9 rounded-[var(--radius-r-control)] object-cover"
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate font-medium">{current.title}</div>
|
||||
<div className="text-xs text-[var(--color-ink-soft)] mono">
|
||||
{current.source}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Controls */}
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{playing && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={stop}
|
||||
disabled={pending}
|
||||
className="size-8 flex items-center justify-center rounded-md text-text-secondary hover:text-destructive hover:bg-glass-bg transition-colors disabled:opacity-40"
|
||||
aria-label="Stop"
|
||||
>
|
||||
<Square className="size-3.5" />
|
||||
</button>
|
||||
)}
|
||||
{current && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={skip}
|
||||
disabled={pending || queue.length === 0}
|
||||
className="size-8 flex items-center justify-center rounded-md text-text-secondary hover:text-text-primary hover:bg-glass-bg transition-colors disabled:opacity-40"
|
||||
aria-label="Skip"
|
||||
>
|
||||
<SkipForward className="size-3.5" />
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleLoop()}
|
||||
disabled={pending}
|
||||
className={`size-8 flex items-center justify-center rounded-md transition-colors disabled:opacity-40 ${
|
||||
loop
|
||||
? "text-primary bg-glass-bg"
|
||||
: "text-text-secondary hover:text-text-primary hover:bg-glass-bg"
|
||||
}`}
|
||||
aria-label={loop ? "Loop on" : "Loop off"}
|
||||
aria-pressed={loop}
|
||||
<div className="flex items-center gap-1">
|
||||
<Button size="sm" variant="ghost" onClick={() => skip.mutate()}>
|
||||
<SkipForward className="size-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={playing ? "primary" : "ghost"}
|
||||
onClick={() =>
|
||||
state?.playing ? void skip.mutate() : void skip.mutate()
|
||||
}
|
||||
>
|
||||
<Repeat className="size-3.5" />
|
||||
</button>
|
||||
{playing ? <Pause className="size-4" /> : <Play className="size-4" />}
|
||||
</Button>
|
||||
<Volume2 className="size-4 text-[var(--color-ink-soft)]" />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,178 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Disc3, Music, Play, Repeat, SkipForward, Square } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { useCallback, useState } from "react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
useMediaLoop,
|
||||
useMediaQueue,
|
||||
useMediaSkip,
|
||||
useMediaState,
|
||||
useMediaStop,
|
||||
useMediaWsSync,
|
||||
} from "@/hooks";
|
||||
import type { MediaState } from "@/lib/types";
|
||||
import type { WsHook } from "@/lib/ws-hook";
|
||||
|
||||
interface MusicPlayerProps {
|
||||
ws: WsHook;
|
||||
/** Server-fetched media snapshot used to seed the first render. */
|
||||
initialData?: MediaState;
|
||||
}
|
||||
|
||||
export function MusicPlayer({ ws, initialData }: MusicPlayerProps) {
|
||||
const { data: mediaState } = useMediaState(initialData);
|
||||
const queueMut = useMediaQueue();
|
||||
const skipMut = useMediaSkip();
|
||||
const stopMut = useMediaStop();
|
||||
const loopMut = useMediaLoop();
|
||||
const [queueUrl, setQueueUrl] = useState("");
|
||||
const [screenMode, setScreenMode] = useState(false);
|
||||
|
||||
// Sync WS media_state into the query cache
|
||||
useMediaWsSync(ws);
|
||||
|
||||
const handleQueue = useCallback(() => {
|
||||
if (!queueUrl.trim()) return;
|
||||
queueMut.mutate({
|
||||
url: queueUrl.trim(),
|
||||
mode: screenMode ? "screen" : "music",
|
||||
});
|
||||
setQueueUrl("");
|
||||
}, [queueUrl, queueMut, screenMode]);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2 text-sm font-semibold">
|
||||
<Music className="size-4 text-primary" />
|
||||
Music Player
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
placeholder="Queue a URL (YouTube, audio file…)"
|
||||
value={queueUrl}
|
||||
onChange={(e) => setQueueUrl(e.target.value)}
|
||||
onKeyDown={(e) => e.key === "Enter" && handleQueue()}
|
||||
className="flex-1 h-9"
|
||||
/>
|
||||
<Button
|
||||
variant={screenMode ? "default" : "secondary"}
|
||||
size="sm"
|
||||
onClick={() => setScreenMode((v) => !v)}
|
||||
title="Queue as Discord GoLive screenshare instead of audio playback"
|
||||
className="h-9"
|
||||
>
|
||||
Screen
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleQueue}
|
||||
disabled={!queueUrl.trim() || queueMut.isPending}
|
||||
>
|
||||
<Play className="size-4 mr-1.5" />
|
||||
Queue
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{mediaState?.activeMode && (
|
||||
<p className="text-[10px] font-mono text-primary/80 uppercase tracking-wider">
|
||||
{mediaState.activeMode === "screen"
|
||||
? "Screen share active"
|
||||
: "Music playing"}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{mediaState?.current ? (
|
||||
<div className="rounded-lg bg-gradient-to-br from-primary/5 to-primary/[0.02] border border-primary/10 p-4 space-y-2">
|
||||
<p className="text-xs text-muted-foreground font-medium uppercase tracking-wider flex items-center gap-1.5">
|
||||
<Disc3 className="size-3" />
|
||||
Now Playing
|
||||
</p>
|
||||
<div className="flex items-start gap-3">
|
||||
{mediaState.current.thumbnailUrl && (
|
||||
<Image
|
||||
src={mediaState.current.thumbnailUrl}
|
||||
alt=""
|
||||
width={56}
|
||||
height={56}
|
||||
className="size-14 rounded-lg object-cover shadow-sm"
|
||||
/>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate">
|
||||
{mediaState.current.title ?? mediaState.current.source}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">
|
||||
{mediaState.current.durationMs
|
||||
? `${Math.floor(mediaState.current.durationMs / 60000)}:${String(Math.floor((mediaState.current.durationMs % 60000) / 1000)).padStart(2, "0")}`
|
||||
: "Live"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
!mediaState?.queue?.length && (
|
||||
<p className="text-sm text-muted-foreground py-8 text-center">
|
||||
No media queued. Paste a URL above to start playing.
|
||||
</p>
|
||||
)
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => stopMut.mutate()}>
|
||||
<Square className="size-4 mr-1" />
|
||||
Stop
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => skipMut.mutate()}>
|
||||
<SkipForward className="size-4 mr-1" />
|
||||
Skip
|
||||
</Button>
|
||||
<Button
|
||||
variant={mediaState?.loop ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => loopMut.mutate(!mediaState?.loop)}
|
||||
disabled={loopMut.isPending}
|
||||
title={
|
||||
mediaState?.loop
|
||||
? "Loop enabled — replay current track"
|
||||
: "Enable loop"
|
||||
}
|
||||
aria-pressed={mediaState?.loop}
|
||||
>
|
||||
<Repeat className="size-4 mr-1" />
|
||||
Loop
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{mediaState && mediaState.queue.length > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
<p className="text-xs text-muted-foreground font-medium">
|
||||
Queue ({mediaState.queue.length})
|
||||
</p>
|
||||
<div className="space-y-1">
|
||||
{mediaState.queue.map((item, i) => (
|
||||
<div
|
||||
key={item.id ?? i}
|
||||
className="flex items-center gap-2 rounded-md bg-muted/30 px-3 py-2 text-sm"
|
||||
>
|
||||
<span className="text-xs text-muted-foreground font-mono w-5 text-right">
|
||||
{i + 1}.
|
||||
</span>
|
||||
<span className="truncate flex-1">
|
||||
{item.title ?? item.source}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/primitives/badge";
|
||||
import { Progress } from "@/components/primitives/progress";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface AiAnalysisPanelProps {
|
||||
@@ -16,11 +17,11 @@ interface AiAnalysisPanelProps {
|
||||
}
|
||||
|
||||
const severityColor: Record<string, string> = {
|
||||
none: "text-emerald-500",
|
||||
low: "text-text-secondary",
|
||||
medium: "text-accent-amber",
|
||||
high: "text-accent-purple",
|
||||
critical: "text-destructive",
|
||||
none: "text-[var(--color-ink-soft)]",
|
||||
low: "text-[var(--color-ink-soft)]",
|
||||
medium: "text-[var(--color-amber)]",
|
||||
high: "text-orange-500",
|
||||
critical: "text-[var(--color-vermilion)]",
|
||||
};
|
||||
|
||||
export function AiAnalysisPanel({
|
||||
@@ -37,11 +38,11 @@ export function AiAnalysisPanel({
|
||||
|
||||
if (!status || status === "pending") {
|
||||
return (
|
||||
<Card className={cn("[--card-spacing:0px]", "p-3")}>
|
||||
<span className="text-xs text-text-secondary/50">
|
||||
<div className="surface-2 p-3">
|
||||
<span className="text-xs text-[var(--color-ink-soft)]/60">
|
||||
AI analysis pending
|
||||
</span>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -54,28 +55,27 @@ export function AiAnalysisPanel({
|
||||
: []
|
||||
: categories || [];
|
||||
|
||||
const statusTone =
|
||||
status === "clean"
|
||||
? "signal"
|
||||
: status === "flagged"
|
||||
? "vermilion"
|
||||
: status === "warn"
|
||||
? "amber"
|
||||
: "neutral";
|
||||
|
||||
return (
|
||||
<Card className={cn("space-y-2", "[--card-spacing:0px]", "p-3")}>
|
||||
<div className="surface-2 flex flex-col gap-2.5 p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs font-semibold tracking-wide uppercase text-text-secondary">
|
||||
<span className="text-xs font-semibold uppercase tracking-wide text-[var(--color-ink-soft)]">
|
||||
AI Analysis
|
||||
</span>
|
||||
<span
|
||||
className={cn(
|
||||
"text-[10px] font-mono px-1.5 py-0.5 rounded",
|
||||
status === "clean" && "bg-emerald-500/10 text-emerald-500",
|
||||
status === "flagged" && "bg-accent-purple/10 text-accent-purple",
|
||||
status === "warn" && "bg-accent-amber/10 text-accent-amber",
|
||||
status === "error" && "bg-destructive/10 text-destructive",
|
||||
)}
|
||||
>
|
||||
{status}
|
||||
</span>
|
||||
<Badge tone={statusTone}>{status}</Badge>
|
||||
</div>
|
||||
|
||||
{severity && (
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<span className="text-text-secondary/60">Severity:</span>
|
||||
<span className="text-[var(--color-ink-soft)]/60">Severity:</span>
|
||||
<span
|
||||
className={cn(
|
||||
"font-mono font-medium",
|
||||
@@ -89,14 +89,19 @@ export function AiAnalysisPanel({
|
||||
|
||||
{confidence !== null && confidence !== undefined && (
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<span className="text-text-secondary/60">Confidence:</span>
|
||||
<span className="font-mono">{(confidence * 100).toFixed(0)}%</span>
|
||||
<span className="text-[var(--color-ink-soft)]/60">Confidence</span>
|
||||
<Progress
|
||||
value={confidence * 100}
|
||||
max={100}
|
||||
tone="signal"
|
||||
showLabel
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{score !== null && score !== undefined && (
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<span className="text-text-secondary/60">Score:</span>
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-[var(--color-ink-soft)]/60">Score</span>
|
||||
<span className="font-mono">{score.toFixed(2)}</span>
|
||||
</div>
|
||||
)}
|
||||
@@ -104,12 +109,9 @@ export function AiAnalysisPanel({
|
||||
{flagsArray.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{flagsArray.map((f: string) => (
|
||||
<span
|
||||
key={f}
|
||||
className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-destructive/10 text-destructive"
|
||||
>
|
||||
<Badge key={f} tone="vermilion">
|
||||
{f}
|
||||
</span>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
@@ -117,21 +119,18 @@ export function AiAnalysisPanel({
|
||||
{categoriesArray.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{categoriesArray.map((c: string) => (
|
||||
<span
|
||||
key={c}
|
||||
className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-primary/10 text-primary"
|
||||
>
|
||||
<Badge key={c} tone="neutral">
|
||||
{c}
|
||||
</span>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{analysis && (
|
||||
<div className="border-l-2 border-glass-border pl-2">
|
||||
<div className="border-l-2 border-[var(--color-hairline)] pl-2">
|
||||
<p
|
||||
className={cn(
|
||||
"text-xs leading-relaxed text-text-secondary/90",
|
||||
"text-xs leading-relaxed text-[var(--color-ink-soft)]",
|
||||
!expanded && "line-clamp-3",
|
||||
)}
|
||||
>
|
||||
@@ -141,7 +140,7 @@ export function AiAnalysisPanel({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setExpanded((v) => !v)}
|
||||
className="mt-1 text-[10px] font-medium uppercase tracking-wide text-text-secondary/50 transition-colors hover:text-text-primary"
|
||||
className="mt-1 text-[10px] font-medium uppercase tracking-wide text-[var(--color-ink-soft)]/50 transition-colors hover:text-[var(--color-ink)]"
|
||||
>
|
||||
{expanded ? "Show less" : "Show more"}
|
||||
</button>
|
||||
@@ -151,10 +150,10 @@ export function AiAnalysisPanel({
|
||||
|
||||
{action && action !== "none" && (
|
||||
<div className="text-xs">
|
||||
<span className="text-text-secondary/60">Recommended: </span>
|
||||
<span className="font-mono text-accent-amber">{action}</span>
|
||||
<span className="text-[var(--color-ink-soft)]/60">Recommended: </span>
|
||||
<span className="font-mono text-[var(--color-amber)]">{action}</span>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,28 +1,44 @@
|
||||
"use client";
|
||||
|
||||
import type { AiSeverity, AiStatus } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const STATUS_STYLES: Record<string, string> = {
|
||||
clean:
|
||||
"bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20",
|
||||
flagged: "bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20",
|
||||
warn: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/20",
|
||||
pending: "bg-muted text-muted-foreground border-border",
|
||||
processing:
|
||||
"bg-sky-500/10 text-sky-600 dark:text-sky-400 border-sky-500/20 animate-pulse",
|
||||
error: "bg-destructive/10 text-destructive border-destructive/20",
|
||||
const severityTick: Record<NonNullable<AiSeverity>, string> = {
|
||||
none: "border-[var(--color-signal)]/30",
|
||||
low: "border-[var(--color-amber)]/50",
|
||||
medium: "border-[var(--color-amber)]",
|
||||
high: "border-orange-500/80",
|
||||
critical: "border-[var(--color-vermilion)]",
|
||||
};
|
||||
|
||||
export function AiStatusBadge({ status }: { status?: string | null }) {
|
||||
if (!status) return null;
|
||||
const statusBadge: Record<NonNullable<AiStatus>, string> = {
|
||||
pending: "bg-[var(--color-ink-soft)]/20 text-[var(--color-ink-soft)]",
|
||||
processing: "bg-[var(--color-amber)]/15 text-[var(--color-amber)]",
|
||||
clean: "bg-[var(--color-signal)]/15 text-[var(--color-signal)]",
|
||||
warn: "bg-[var(--color-amber)]/15 text-[var(--color-amber)]",
|
||||
flagged: "bg-[var(--color-vermilion)]/15 text-[var(--color-vermilion)]",
|
||||
error: "bg-[var(--color-vermilion)]/15 text-[var(--color-vermilion)]",
|
||||
};
|
||||
|
||||
export function SeverityTick({ severity }: { severity?: AiSeverity | null }) {
|
||||
const cls = severity ? severityTick[severity] : "border-transparent";
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider",
|
||||
STATUS_STYLES[status] ?? "bg-muted text-muted-foreground border-border",
|
||||
)}
|
||||
>
|
||||
{status}
|
||||
className={cn("absolute left-0 top-0 h-full w-0.5 border-l-2", cls)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function AiStatusBadge({ status }: { status?: AiStatus | null }) {
|
||||
if (!status) return null;
|
||||
return (
|
||||
<span className={cn("pill", statusBadge[status])}>
|
||||
<span
|
||||
className="size-1.5 rounded-full"
|
||||
style={{ background: "currentColor" }}
|
||||
/>
|
||||
<span className="ml-1 text-[10px] font-medium uppercase">{status}</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,69 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import { ImageIcon } from "lucide-react";
|
||||
import type { AttachmentRecord } from "@/lib/types";
|
||||
|
||||
interface AttachmentsGridProps {
|
||||
attachments: AttachmentRecord[];
|
||||
onImageClick?: (index: number) => void;
|
||||
}
|
||||
import type { AttachmentRef } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function AttachmentsGrid({
|
||||
attachments,
|
||||
onImageClick,
|
||||
}: AttachmentsGridProps) {
|
||||
onOpen,
|
||||
}: {
|
||||
attachments: AttachmentRef[];
|
||||
onOpen: (url: string) => void;
|
||||
}) {
|
||||
if (attachments.length === 0) return null;
|
||||
|
||||
const images = attachments.filter((a) => a.type?.startsWith("image/"));
|
||||
const others = attachments.filter((a) => !a.type?.startsWith("image/"));
|
||||
|
||||
const images = attachments.filter((a) => /image/i.test(a.contentType ?? ""));
|
||||
if (images.length === 0) return null;
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
{images.length > 0 && (
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{images.map((att, i) => (
|
||||
<div
|
||||
key={att.id}
|
||||
className="glass relative overflow-hidden rounded-lg group"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onImageClick?.(i)}
|
||||
className="block w-full cursor-zoom-in"
|
||||
aria-label={`Open ${att.filename}`}
|
||||
>
|
||||
<img
|
||||
src={att.uploaded_url || att.discord_url}
|
||||
alt={att.filename}
|
||||
className="h-32 w-full object-cover transition-transform duration-300 group-hover:scale-105"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
</button>
|
||||
{images.length > 1 && (
|
||||
<span className="absolute bottom-1 right-1 rounded bg-black/50 px-1.5 py-0.5 font-mono text-[10px] text-white/80">
|
||||
{i + 1}/{images.length}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{others.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{others.map((att) => (
|
||||
<div
|
||||
key={att.id}
|
||||
className="flex items-center gap-1.5 rounded-md bg-glass-bg px-2 py-1 text-xs text-text-secondary"
|
||||
>
|
||||
<ImageIcon className="size-3 text-text-secondary/50" />
|
||||
<span className="font-mono max-w-40 truncate">
|
||||
{att.filename}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="mt-2 grid grid-cols-2 gap-2 sm:grid-cols-3">
|
||||
{images.map((a, i) => (
|
||||
<button
|
||||
key={`${a.url}-${i}`}
|
||||
type="button"
|
||||
onClick={() => onOpen(a.url)}
|
||||
className="group relative aspect-video overflow-hidden rounded-[var(--radius-r-control)] border border-[var(--color-hairline)]"
|
||||
>
|
||||
<img
|
||||
src={a.url}
|
||||
alt={a.name}
|
||||
loading="lazy"
|
||||
className="size-full object-cover transition-transform duration-200 group-hover:scale-105"
|
||||
/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,128 +1,74 @@
|
||||
"use client";
|
||||
|
||||
import { ChevronLeft, ChevronRight, X } from "lucide-react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { X } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Dialog } from "@/components/primitives/dialog";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface LightboxProps {
|
||||
images: Array<{ src: string; alt?: string }>;
|
||||
initialIndex?: number;
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fullscreen image viewer with keyboard navigation (←/→/Esc) and
|
||||
* touch-swipe support. Mounted at page level so a single instance
|
||||
* serves the message list, image grid and attachments grid.
|
||||
*/
|
||||
export function Lightbox({
|
||||
images,
|
||||
initialIndex = 0,
|
||||
open,
|
||||
onClose,
|
||||
}: LightboxProps) {
|
||||
const [index, setIndex] = useState(initialIndex);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) setIndex(initialIndex);
|
||||
}, [open, initialIndex]);
|
||||
|
||||
const prev = useCallback(() => {
|
||||
setIndex((i) => (i - 1 + images.length) % images.length);
|
||||
}, [images.length]);
|
||||
|
||||
const next = useCallback(() => {
|
||||
setIndex((i) => (i + 1) % images.length);
|
||||
}, [images.length]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
if (e.key === "ArrowLeft") prev();
|
||||
if (e.key === "ArrowRight") next();
|
||||
};
|
||||
document.addEventListener("keydown", onKey);
|
||||
// Lock body scroll while the lightbox is open
|
||||
document.body.style.overflow = "hidden";
|
||||
return () => {
|
||||
document.removeEventListener("keydown", onKey);
|
||||
document.body.style.overflow = "";
|
||||
};
|
||||
}, [open, onClose, prev, next]);
|
||||
|
||||
if (!open || images.length === 0) return null;
|
||||
|
||||
const current = images[index] ?? images[0];
|
||||
|
||||
src,
|
||||
alt,
|
||||
images = [],
|
||||
initialIndex = 0,
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
src?: string;
|
||||
alt?: string;
|
||||
images?: Array<{ src: string; alt?: string }>;
|
||||
initialIndex?: number;
|
||||
}) {
|
||||
const gallery = images.length > 0 ? images : src ? [{ src, alt }] : [];
|
||||
const [idx, setIdx] = useState(initialIndex);
|
||||
useEffect(() => setIdx(initialIndex), [initialIndex]);
|
||||
if (!gallery.length) return null;
|
||||
const current = gallery[idx];
|
||||
const hasNav = gallery.length > 1;
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-[100] flex items-center justify-center bg-black/85 backdrop-blur-sm animate-fade-in"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="Image viewer"
|
||||
onClick={onClose}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
}}
|
||||
tabIndex={-1}
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
className="p-0 border-0 bg-transparent shadow-none"
|
||||
>
|
||||
{/* Close */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="absolute right-4 top-4 z-10 rounded-full bg-white/10 p-2 text-white/80 transition-colors hover:bg-white/20 hover:text-white"
|
||||
aria-label="Close viewer"
|
||||
>
|
||||
<X className="size-5" />
|
||||
</button>
|
||||
|
||||
{/* Image */}
|
||||
<div className="max-h-[85vh] max-w-[90vw]">
|
||||
<div className="relative flex items-center justify-center p-4">
|
||||
{hasNav && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setIdx((i) => (i - 1 + gallery.length) % gallery.length)
|
||||
}
|
||||
className="absolute left-2 top-1/2 -translate-y-1/2 rounded-full bg-black/40 p-2 text-white hover:bg-black/60"
|
||||
aria-label="Previous"
|
||||
>
|
||||
◀
|
||||
</button>
|
||||
)}
|
||||
<img
|
||||
key={current.src}
|
||||
src={current.src}
|
||||
alt={current.alt ?? ""}
|
||||
className="max-h-[85vh] max-w-[90vw] rounded-lg object-contain shadow-2xl"
|
||||
loading="eager"
|
||||
draggable={false}
|
||||
alt={current.alt ?? alt ?? "attachment"}
|
||||
className="max-h-[80vh] max-w-full rounded-[var(--radius-r)] object-contain"
|
||||
/>
|
||||
{hasNav && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIdx((i) => (i + 1) % gallery.length)}
|
||||
className="absolute right-16 top-1/2 -translate-y-1/2 rounded-full bg-black/40 p-2 text-white hover:bg-black/60"
|
||||
aria-label="Next"
|
||||
>
|
||||
▶
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="absolute top-2 right-2 rounded-full bg-black/40 p-1.5 text-white hover:bg-black/60"
|
||||
aria-label="Close"
|
||||
>
|
||||
<X className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Counter */}
|
||||
{images.length > 1 && (
|
||||
<span className="absolute bottom-4 left-1/2 -translate-x-1/2 rounded-full bg-white/10 px-3 py-1 font-mono text-xs text-white/80">
|
||||
{index + 1} / {images.length}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* Nav */}
|
||||
{images.length > 1 && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
prev();
|
||||
}}
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 rounded-full bg-white/10 p-2 text-white/80 transition-colors hover:bg-white/20 hover:text-white"
|
||||
aria-label="Previous image"
|
||||
>
|
||||
<ChevronLeft className="size-6" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
next();
|
||||
}}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full bg-white/10 p-2 text-white/80 transition-colors hover:bg-white/20 hover:text-white"
|
||||
aria-label="Next image"
|
||||
>
|
||||
<ChevronRight className="size-6" />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,175 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Hash } from "lucide-react";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import {
|
||||
getMessageChannelLabel,
|
||||
renderMessageContent,
|
||||
safeParseJsonArray,
|
||||
} from "@/lib/format";
|
||||
import type { MessageRecord } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { AiStatusBadge } from "./ai-status-badge";
|
||||
|
||||
export function MessageCard({
|
||||
message: msg,
|
||||
onClick,
|
||||
}: {
|
||||
message: MessageRecord;
|
||||
onClick: (id: string) => void;
|
||||
}) {
|
||||
const severity = (
|
||||
{
|
||||
low: "border-l-cyan-500/40",
|
||||
medium: "border-l-amber-500/60",
|
||||
high: "border-l-orange-500/70",
|
||||
critical: "border-l-red-500/80",
|
||||
} as Record<string, string>
|
||||
)[msg.ai_severity ?? ""];
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
"cursor-pointer transition-all duration-200 hover:shadow-[0_0_16px_oklch(0.62_0.17_215_/_0.08)] hover:border-cyan-500/20",
|
||||
severity && "border-l-2",
|
||||
severity,
|
||||
)}
|
||||
onClick={() => onClick(msg.id)}
|
||||
>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<Avatar className="size-8 shrink-0 mt-0.5">
|
||||
<AvatarImage src={msg.avatar_url ?? undefined} />
|
||||
<AvatarFallback className="text-xs">
|
||||
{msg.username?.charAt(0).toUpperCase() ?? "?"}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0 space-y-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm font-medium">{msg.username}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{msg.created_at
|
||||
? new Date(msg.created_at).toLocaleString()
|
||||
: ""}
|
||||
</span>
|
||||
<span
|
||||
className="text-xs text-muted-foreground"
|
||||
title={
|
||||
msg.thread_id
|
||||
? `Thread ${getMessageChannelLabel(msg)} (${msg.thread_id.slice(0, 8)})`
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<Hash className="size-3 inline mr-0.5" />
|
||||
{getMessageChannelLabel(msg)}
|
||||
</span>
|
||||
<AiStatusBadge status={msg.ai_status} />
|
||||
{msg.ai_severity && msg.ai_severity !== "none" && (
|
||||
<Badge
|
||||
variant="destructive"
|
||||
className="text-[10px] px-1.5 py-0 h-4"
|
||||
>
|
||||
{msg.ai_severity}
|
||||
</Badge>
|
||||
)}
|
||||
{msg.type === "deleted" && (
|
||||
<Badge
|
||||
variant="destructive"
|
||||
className="text-[10px] px-1.5 py-0 h-4"
|
||||
>
|
||||
deleted
|
||||
</Badge>
|
||||
)}
|
||||
{(msg.type === "edited" || msg.edited_content) && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-[10px] px-1.5 py-0 h-4"
|
||||
>
|
||||
edited
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p
|
||||
className={cn(
|
||||
"text-sm leading-relaxed",
|
||||
msg.type === "deleted" &&
|
||||
"italic text-muted-foreground line-through",
|
||||
)}
|
||||
>
|
||||
{renderMessageContent(
|
||||
msg.edited_content ?? msg.content,
|
||||
msg.metadata,
|
||||
)}
|
||||
</p>
|
||||
{(() => {
|
||||
const u = extractFirstImage(msg.metadata);
|
||||
if (!u) return null;
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClick(msg.id);
|
||||
}}
|
||||
className="mt-2 block w-full max-w-[320px] overflow-hidden rounded-lg border border-border/50 group/image"
|
||||
aria-label="Open image"
|
||||
>
|
||||
<img
|
||||
src={u}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
className="max-h-48 w-full object-cover transition-transform duration-300 group-hover/image:scale-[1.02]"
|
||||
/>
|
||||
</button>
|
||||
);
|
||||
})()}
|
||||
{msg.ai_moderation_flags && msg.ai_moderation_flags !== "[]" && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{safeParseJsonArray(msg.ai_moderation_flags).map((f) => (
|
||||
<Badge
|
||||
key={f}
|
||||
variant="destructive"
|
||||
className="text-[10px] px-1.5 py-0 h-4"
|
||||
>
|
||||
{f}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{msg.ai_analysis && (
|
||||
<p className="text-xs text-muted-foreground italic line-clamp-2 leading-relaxed">
|
||||
{msg.ai_analysis}
|
||||
</p>
|
||||
)}
|
||||
{msg.ai_confidence != null && (
|
||||
<div className="flex items-center gap-2 max-w-40">
|
||||
<Progress value={msg.ai_confidence * 100} className="h-1.5" />
|
||||
<span className="text-[11px] text-muted-foreground tabular-nums shrink-0">
|
||||
{(msg.ai_confidence * 100).toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function extractFirstImage(
|
||||
metadata: string | null | undefined,
|
||||
): string | null {
|
||||
if (!metadata) return null;
|
||||
try {
|
||||
const m = JSON.parse(metadata);
|
||||
const atts: Array<{ url: string; contentType?: string }> =
|
||||
m.attachments ?? [];
|
||||
return atts.find((a) => a.contentType?.startsWith("image/"))?.url ?? null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
@@ -1,102 +1,124 @@
|
||||
"use client";
|
||||
|
||||
import { ArrowLeft, MessageSquare, MessagesSquare, Pencil } from "lucide-react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { getMessageChannelLabel, renderMessageContent } from "@/lib/format";
|
||||
import type { AttachmentRecord, MessageRecord } from "@/lib/types";
|
||||
import { useState } from "react";
|
||||
import { Avatar } from "@/components/primitives/avatar";
|
||||
import { Badge } from "@/components/primitives/badge";
|
||||
import {
|
||||
getMessageChannelLabel,
|
||||
renderMessageContent,
|
||||
safeParseJsonArray,
|
||||
} from "@/lib/format";
|
||||
import type { AttachmentRef, MessageRecord } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { AiAnalysisPanel } from "./ai-analysis-panel";
|
||||
import { AiStatusBadge, SeverityTick } from "./ai-status-badge";
|
||||
import { AttachmentsGrid } from "./attachments-grid";
|
||||
import { Lightbox } from "./lightbox";
|
||||
|
||||
interface MessageDetailViewProps {
|
||||
function extractAttachments(metadata?: string | null): AttachmentRef[] {
|
||||
if (!metadata) return [];
|
||||
try {
|
||||
const m = JSON.parse(metadata);
|
||||
return (m?.attachments ?? []) as AttachmentRef[];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function fmtFull(ts?: number): string {
|
||||
if (!ts) return "";
|
||||
return new Date(ts * 1000).toLocaleString();
|
||||
}
|
||||
|
||||
export interface MessageDetailProps {
|
||||
message: MessageRecord;
|
||||
attachments?: AttachmentRecord[];
|
||||
onBack?: () => void;
|
||||
onImageClick?: (index: number) => void;
|
||||
channelLabel?: string;
|
||||
}
|
||||
|
||||
export function MessageDetailView({
|
||||
message,
|
||||
attachments,
|
||||
onBack,
|
||||
onImageClick,
|
||||
}: MessageDetailViewProps) {
|
||||
message: msg,
|
||||
channelLabel,
|
||||
}: MessageDetailProps) {
|
||||
const [img, setImg] = useState<string | null>(null);
|
||||
const severity = msg.ai_severity ?? "none";
|
||||
const flags = safeParseJsonArray(msg.ai_moderation_flags || "[]");
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={cn("h-full", "[--card-spacing:0px]", "rounded-2xl", "p-5")}
|
||||
>
|
||||
{onBack && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onBack}
|
||||
className="flex items-center gap-1 text-xs text-text-secondary/60 hover:text-text-primary mb-3 transition-colors"
|
||||
>
|
||||
<ArrowLeft className="size-3" /> Back
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Message header */}
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<MessageSquare className="size-4 text-primary" />
|
||||
<span className="font-semibold text-sm text-text-primary">
|
||||
{message.username}
|
||||
</span>
|
||||
<span className="text-[10px] text-text-secondary/40 font-mono inline-flex items-center gap-1">
|
||||
{message.thread_id && <MessagesSquare className="size-3" />}
|
||||
{getMessageChannelLabel(message)}
|
||||
</span>
|
||||
<>
|
||||
<div className="mb-4 flex items-start gap-3">
|
||||
<Avatar src={msg.avatar_url} name={msg.username} size={40} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2.5 flex-wrap">
|
||||
<span className="font-semibold">{msg.username}</span>
|
||||
<span className="mono text-xs text-[var(--color-ink-soft)]">
|
||||
{fmtFull(msg.created_at)}
|
||||
</span>
|
||||
<AiStatusBadge status={msg.ai_status ?? null} />
|
||||
</div>
|
||||
<div className="mt-2 text-xs text-[var(--color-ink-soft)]">
|
||||
#{channelLabel ?? getMessageChannelLabel(msg)}
|
||||
{msg.thread_id && <span className="mx-1 opacity-40">·</span>}
|
||||
{msg.thread_id && <span>Thread {msg.thread_id.slice(0, 8)}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="text-sm text-text-primary/90 leading-relaxed mb-4 whitespace-pre-wrap">
|
||||
{renderMessageContent(
|
||||
message.edited_content ?? message.content,
|
||||
message.metadata,
|
||||
) || "(no text content)"}
|
||||
<div
|
||||
className={cn(
|
||||
"relative rounded-[var(--radius-r)] p-4",
|
||||
severity === "critical"
|
||||
? "border-l-2 border-[var(--color-vermilion)]"
|
||||
: severity === "high"
|
||||
? "border-l-2 border-[var(--color-amber)]"
|
||||
: "border border-[var(--color-hairline)]",
|
||||
)}
|
||||
>
|
||||
<SeverityTick severity={severity} />
|
||||
<div className="text-sm leading-relaxed">
|
||||
{msg.deleted_at ? (
|
||||
<span className="italic text-[var(--color-ink-soft)]">
|
||||
message deleted
|
||||
</span>
|
||||
) : (
|
||||
renderMessageContent(
|
||||
msg.edited_content ?? msg.content,
|
||||
msg.metadata,
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Edit history */}
|
||||
{message.edit_history && message.edit_history.length > 0 && (
|
||||
<div className="mb-4 space-y-2 rounded-lg border border-border/40 bg-card/30 p-3">
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wide text-text-secondary/50 flex items-center gap-1">
|
||||
<Pencil className="size-3" />
|
||||
Riwayat edit · {message.edit_history.length} versi sebelumnya
|
||||
</p>
|
||||
{message.edit_history.map((edit, i) => (
|
||||
<div key={`${edit.edited_at}-${i}`} className="space-y-0.5">
|
||||
<p className="text-[10px] font-mono text-text-secondary/40">
|
||||
{new Date(edit.edited_at).toLocaleString("id-ID")}
|
||||
</p>
|
||||
<p className="text-xs leading-relaxed text-text-secondary/80 line-clamp-4 whitespace-pre-wrap">
|
||||
{renderMessageContent(edit.old_content, message.metadata) ||
|
||||
"(kosong)"}
|
||||
</p>
|
||||
</div>
|
||||
{flags.length > 0 && (
|
||||
<div className="mt-3 flex flex-wrap gap-1.5">
|
||||
{flags.map((f) => (
|
||||
<Badge key={f} tone="vermilion">
|
||||
{f}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Attachments */}
|
||||
{attachments && attachments.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<AttachmentsGrid
|
||||
attachments={attachments}
|
||||
onImageClick={onImageClick}
|
||||
/>
|
||||
{msg.ai_analysis && (
|
||||
<div className="mt-3 rounded-[var(--radius-r)] bg-[var(--color-surface-2)] p-3 text-xs">
|
||||
<span className="font-medium text-[var(--color-amber)]">
|
||||
AI analysis:
|
||||
</span>{" "}
|
||||
<span className="text-[var(--color-ink-soft)]">
|
||||
{msg.ai_analysis}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* AI Analysis */}
|
||||
<AiAnalysisPanel
|
||||
status={message.ai_status}
|
||||
severity={message.ai_severity}
|
||||
confidence={message.ai_confidence}
|
||||
flags={message.ai_moderation_flags}
|
||||
categories={message.ai_categories}
|
||||
action={message.ai_recommended_action}
|
||||
score={message.ai_moderation_score}
|
||||
analysis={message.ai_analysis}
|
||||
{extractAttachments(msg.metadata).length > 0 && (
|
||||
<AttachmentsGrid
|
||||
attachments={extractAttachments(msg.metadata)}
|
||||
onOpen={(u) => setImg(u)}
|
||||
/>
|
||||
)}
|
||||
<Lightbox
|
||||
open={!!img}
|
||||
onClose={() => setImg(null)}
|
||||
src={img ?? undefined}
|
||||
/>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,76 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { ArrowLeft, MessageSquare, MessagesSquare } from "lucide-react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { getMessageChannelLabel, renderMessageContent } from "@/lib/format";
|
||||
import type { AttachmentRecord, MessageRecord } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { AiAnalysisPanel } from "./ai-analysis-panel";
|
||||
import { AttachmentsGrid } from "./attachments-grid";
|
||||
|
||||
interface MessageDetailProps {
|
||||
message: MessageRecord;
|
||||
attachments?: AttachmentRecord[];
|
||||
onBack?: () => void;
|
||||
}
|
||||
|
||||
export function MessageDetail({
|
||||
message,
|
||||
attachments,
|
||||
onBack,
|
||||
}: MessageDetailProps) {
|
||||
return (
|
||||
<Card
|
||||
className={cn("h-full", "[--card-spacing:0px]", "rounded-2xl", "p-5")}
|
||||
>
|
||||
{onBack && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onBack}
|
||||
className="flex items-center gap-1 text-xs text-text-secondary/60 hover:text-text-primary mb-3 transition-colors"
|
||||
>
|
||||
<ArrowLeft className="size-3" /> Back
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Message header */}
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<MessageSquare className="size-4 text-primary" />
|
||||
<span className="font-semibold text-sm text-text-primary">
|
||||
{message.username}
|
||||
</span>
|
||||
<span className="text-[10px] text-text-secondary/40 font-mono inline-flex items-center gap-1">
|
||||
{message.thread_id && <MessagesSquare className="size-3" />}
|
||||
{getMessageChannelLabel(message)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="text-sm text-text-primary/90 leading-relaxed mb-4 whitespace-pre-wrap">
|
||||
{renderMessageContent(
|
||||
message.edited_content ?? message.content,
|
||||
message.metadata,
|
||||
) || "(no text content)"}
|
||||
</div>
|
||||
|
||||
{/* Attachments */}
|
||||
{attachments && attachments.length > 0 && (
|
||||
<div className="mb-4">
|
||||
<AttachmentsGrid attachments={attachments} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* AI Analysis */}
|
||||
<AiAnalysisPanel
|
||||
status={message.ai_status}
|
||||
severity={message.ai_severity}
|
||||
confidence={message.ai_confidence}
|
||||
flags={message.ai_moderation_flags}
|
||||
categories={message.ai_categories}
|
||||
action={message.ai_recommended_action}
|
||||
score={message.ai_moderation_score}
|
||||
analysis={message.ai_analysis}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
"use client";
|
||||
|
||||
import { Avatar } from "@/components/primitives/avatar";
|
||||
import { renderMessageContent } from "@/lib/format";
|
||||
import type { AiSeverity, MessageRecord } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { AiStatusBadge, SeverityTick } from "./ai-status-badge";
|
||||
|
||||
function fmtTime(ts?: number): string {
|
||||
if (!ts) return "";
|
||||
return new Date(ts * 1000).toLocaleTimeString([], {
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
hour12: false,
|
||||
});
|
||||
}
|
||||
|
||||
const severityColor: Record<NonNullable<AiSeverity>, string> = {
|
||||
none: "text-[var(--color-ink-soft)]",
|
||||
low: "text-[var(--color-amber)]",
|
||||
medium: "text-[var(--color-amber)]",
|
||||
high: "text-orange-500",
|
||||
critical: "text-[var(--color-vermilion)]",
|
||||
};
|
||||
|
||||
export interface MessageEntryProps {
|
||||
message: MessageRecord;
|
||||
selected: boolean;
|
||||
onSelect: () => void;
|
||||
onAvatarClick?: () => void;
|
||||
}
|
||||
|
||||
export function MessageEntry({
|
||||
message: msg,
|
||||
selected,
|
||||
onSelect,
|
||||
}: MessageEntryProps) {
|
||||
const severity = (msg.ai_severity ?? "none") as AiSeverity;
|
||||
const status = msg.ai_status ?? null;
|
||||
|
||||
return (
|
||||
<div
|
||||
data-selected={selected}
|
||||
onClick={onSelect}
|
||||
className={cn(
|
||||
"group relative mb-1.5 flex items-start gap-2.5 rounded-[var(--radius-r)] p-2.5 cursor-pointer",
|
||||
"transition-all hover:bg-[var(--color-surface-2)]",
|
||||
selected && "bg-[var(--color-signal)]/6",
|
||||
)}
|
||||
>
|
||||
<SeverityTick severity={severity} />
|
||||
<Avatar src={msg.avatar_url} name={msg.username} size={32} />
|
||||
<div className="min-w-0 flex-1 space-y-1">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-sm font-medium">{msg.username}</span>
|
||||
<span className="text-xs text-[var(--color-ink-soft)] mono">
|
||||
{fmtTime(msg.created_at)}
|
||||
</span>
|
||||
{status && <AiStatusBadge status={status} />}
|
||||
{severity !== "none" && (
|
||||
<span
|
||||
className={cn(
|
||||
"text-[10px] font-bold uppercase",
|
||||
severityColor[severity],
|
||||
)}
|
||||
>
|
||||
{severity}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-sm leading-relaxed">
|
||||
{msg.deleted_at ? (
|
||||
<span className="italic text-[var(--color-ink-soft)]">
|
||||
message deleted
|
||||
</span>
|
||||
) : (
|
||||
renderMessageContent(
|
||||
msg.edited_content ?? msg.content,
|
||||
msg.metadata,
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,45 +1,55 @@
|
||||
"use client";
|
||||
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import type { MessageRecord } from "@/lib/types";
|
||||
import { MessageCard } from "./message-card";
|
||||
import { MessageEntry } from "./message-entry";
|
||||
|
||||
interface MessageListProps {
|
||||
export { MessageEntry };
|
||||
|
||||
export function MessageList({
|
||||
messages,
|
||||
selectedId,
|
||||
onSelect,
|
||||
hasMore,
|
||||
onLoadMore,
|
||||
isLoadingMore,
|
||||
}: {
|
||||
messages: MessageRecord[];
|
||||
selectedId: string | null;
|
||||
onSelect: (id: string) => void;
|
||||
hasMore?: boolean;
|
||||
onLoadMore?: () => void;
|
||||
isLoadingMore?: boolean;
|
||||
}
|
||||
|
||||
export function MessageList({
|
||||
messages,
|
||||
selectedId: _selectedId,
|
||||
onSelect,
|
||||
hasMore,
|
||||
onLoadMore,
|
||||
isLoadingMore,
|
||||
}: MessageListProps) {
|
||||
}) {
|
||||
if (messages.length === 0) {
|
||||
return (
|
||||
<div className="py-10 text-center">
|
||||
<p className="text-sm text-[var(--color-ink-soft)]">
|
||||
No messages found.
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<>
|
||||
{messages.map((msg) => (
|
||||
<MessageCard key={msg.id} message={msg} onClick={onSelect} />
|
||||
))}
|
||||
<div className="space-y-0.5">
|
||||
{messages.map((m) => (
|
||||
<MessageEntry
|
||||
key={m.id}
|
||||
message={m}
|
||||
selected={selectedId === m.id}
|
||||
onSelect={() => onSelect(m.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{hasMore && (
|
||||
<div className="flex justify-center py-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onLoadMore}
|
||||
disabled={isLoadingMore}
|
||||
className="text-xs glass"
|
||||
>
|
||||
{isLoadingMore && <Loader2 className="size-3 animate-spin mr-1" />}
|
||||
Load more
|
||||
</Button>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onLoadMore}
|
||||
disabled={isLoadingMore}
|
||||
className="mt-3 w-full text-center text-xs text-[var(--color-amber)] hover:underline disabled:opacity-50"
|
||||
>
|
||||
{isLoadingMore ? "Loading…" : "Load more"}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,108 +1,82 @@
|
||||
"use client";
|
||||
|
||||
import { Search, X } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useMessageSearch } from "@/hooks";
|
||||
import { getMessageChannelLabel, renderMessageContent } from "@/lib/format";
|
||||
import { Search } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Dialog } from "@/components/primitives/dialog";
|
||||
import { Input } from "@/components/primitives/input";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface SearchOverlayProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSelect: (id: string) => void;
|
||||
export interface Message {
|
||||
id: string;
|
||||
content: string;
|
||||
username: string;
|
||||
channel: string;
|
||||
time: string;
|
||||
}
|
||||
|
||||
export function SearchOverlay({ open, onClose, onSelect }: SearchOverlayProps) {
|
||||
export interface SearchOverlayProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
results: Message[];
|
||||
onSelect: (msg: Message) => void;
|
||||
}
|
||||
|
||||
export function SearchOverlay({
|
||||
open,
|
||||
onClose,
|
||||
results,
|
||||
onSelect,
|
||||
}: SearchOverlayProps) {
|
||||
const [query, setQuery] = useState("");
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const { data: results } = useMessageSearch(query, true);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setTimeout(() => inputRef.current?.focus(), 100);
|
||||
} else {
|
||||
setQuery("");
|
||||
}
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKey = (e: KeyboardEvent) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === "k") {
|
||||
e.preventDefault();
|
||||
onClose(); // this is called when Cmd+K is pressed globally — toggle
|
||||
}
|
||||
if (e.key === "Escape") onClose();
|
||||
};
|
||||
document.addEventListener("keydown", handleKey);
|
||||
return () => document.removeEventListener("keydown", handleKey);
|
||||
}, [onClose]);
|
||||
|
||||
if (!open) return null;
|
||||
const filtered = query
|
||||
? results.filter(
|
||||
(m) =>
|
||||
m.content.toLowerCase().includes(query.toLowerCase()) ||
|
||||
m.username.toLowerCase().includes(query.toLowerCase()),
|
||||
)
|
||||
: results;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh]">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Close search"
|
||||
className="absolute inset-0 bg-black/60 backdrop-blur-sm cursor-default"
|
||||
onClick={onClose}
|
||||
/>
|
||||
<div className="relative w-full max-w-lg glass-intense rounded-[var(--radius-card)] overflow-hidden shadow-2xl">
|
||||
{/* Input */}
|
||||
<div className="flex items-center gap-3 px-4 py-3 border-b border-glass-border">
|
||||
<Search className="size-4 text-text-secondary/60 shrink-0" />
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
<Dialog open={open} onClose={onClose} className="p-0 max-w-xl">
|
||||
<div className="p-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-[var(--color-ink-soft)]" />
|
||||
<Input
|
||||
autoFocus
|
||||
placeholder="Search messages… (Esc to close)"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
placeholder="Search messages..."
|
||||
className="flex-1 bg-transparent text-sm text-text-primary placeholder-text-secondary/40 outline-none"
|
||||
className="pl-9 font-mono"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="size-6 flex items-center justify-center rounded hover:bg-glass-bg"
|
||||
>
|
||||
<X className="size-3.5 text-text-secondary/60" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
<div className="max-h-80 overflow-y-auto p-2 space-y-1">
|
||||
{!results || results.length === 0 ? (
|
||||
<div className="py-8 text-center text-xs text-text-secondary/40">
|
||||
{query.length < 2
|
||||
? "Type at least 2 characters"
|
||||
: "No results found"}
|
||||
</div>
|
||||
<div className="mt-3 max-h-[420px] overflow-y-auto">
|
||||
{filtered.length === 0 ? (
|
||||
<p className="py-6 text-center text-sm text-[var(--color-ink-soft)]">
|
||||
No results.
|
||||
</p>
|
||||
) : (
|
||||
results.map((msg) => (
|
||||
<button
|
||||
key={msg.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onSelect(msg.id);
|
||||
onClose();
|
||||
}}
|
||||
className="w-full text-left px-3 py-2 rounded-lg hover:bg-glass-bg transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<span className="font-medium text-text-primary">
|
||||
{msg.username}
|
||||
<div className="flex flex-col gap-1">
|
||||
{filtered.slice(0, 32).map((m) => (
|
||||
<button
|
||||
key={m.id}
|
||||
type="button"
|
||||
onClick={() => onSelect(m)}
|
||||
className="group flex flex-col items-start gap-1 rounded-[var(--radius-r-control)] px-2.5 py-2 text-left transition-colors hover:bg-[var(--color-surface-2)]"
|
||||
>
|
||||
<span className="text-xs text-[var(--color-ink-soft)] group-hover:text-[var(--color-ink)]">
|
||||
#{m.channel} · {m.username}
|
||||
</span>
|
||||
<span className="text-text-secondary/40">
|
||||
{getMessageChannelLabel(msg)}
|
||||
<span className="text-sm">{m.content}</span>
|
||||
<span className="text-[10px] text-[var(--color-ink-soft)]/60">
|
||||
{m.time}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-text-secondary/80 line-clamp-1 mt-0.5">
|
||||
{renderMessageContent(msg.content, msg.metadata)}
|
||||
</p>
|
||||
</button>
|
||||
))
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -12,9 +12,8 @@ import {
|
||||
XCircle,
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Badge } from "@/components/primitives/badge";
|
||||
import { EmptyState, LoadingSkeleton } from "@/components/shared";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { useModerationActions, useModerationStats } from "@/hooks";
|
||||
import { renderMessageContent } from "@/lib/format";
|
||||
import type {
|
||||
@@ -26,42 +25,22 @@ import { cn } from "@/lib/utils";
|
||||
|
||||
const ACTION_META: Record<
|
||||
ModerationActionType,
|
||||
{ label: string; Icon: typeof Trash2; className: string }
|
||||
{ label: string; Icon: typeof Trash2; tone: "vermilion" | "amber" }
|
||||
> = {
|
||||
delete_message: {
|
||||
label: "Delete message",
|
||||
Icon: Trash2,
|
||||
className: "text-red-500",
|
||||
},
|
||||
mute_user: { label: "Mute user", Icon: MicOff, className: "text-orange-500" },
|
||||
warn_user: {
|
||||
label: "Warn user",
|
||||
Icon: AlertTriangle,
|
||||
className: "text-amber-500",
|
||||
},
|
||||
kick_user: { label: "Kick user", Icon: UserX, className: "text-orange-500" },
|
||||
ban_user: { label: "Ban user", Icon: Ban, className: "text-red-500" },
|
||||
delete_message: { label: "Delete message", Icon: Trash2, tone: "vermilion" },
|
||||
mute_user: { label: "Mute user", Icon: MicOff, tone: "amber" },
|
||||
warn_user: { label: "Warn user", Icon: AlertTriangle, tone: "amber" },
|
||||
kick_user: { label: "Kick user", Icon: UserX, tone: "amber" },
|
||||
ban_user: { label: "Ban user", Icon: Ban, tone: "vermilion" },
|
||||
};
|
||||
|
||||
const STATUS_META: Record<
|
||||
ModerationAction["status"],
|
||||
{ label: string; className: string; dot: string }
|
||||
{ label: string; tone: "signal" | "vermilion" | "amber" }
|
||||
> = {
|
||||
executed: {
|
||||
label: "Executed",
|
||||
className: "border-green-500/40 text-green-500",
|
||||
dot: "bg-green-500",
|
||||
},
|
||||
failed: {
|
||||
label: "Failed",
|
||||
className: "border-red-500/40 text-red-500",
|
||||
dot: "bg-red-500",
|
||||
},
|
||||
pending: {
|
||||
label: "Pending",
|
||||
className: "border-amber-500/40 text-amber-500",
|
||||
dot: "bg-amber-500",
|
||||
},
|
||||
executed: { label: "Executed", tone: "signal" },
|
||||
failed: { label: "Failed", tone: "vermilion" },
|
||||
pending: { label: "Pending", tone: "amber" },
|
||||
};
|
||||
|
||||
function fmtTime(ts: number | null): string {
|
||||
@@ -115,31 +94,28 @@ export function ModerationSection({
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-4 animate-fade-in-up">
|
||||
<div className="space-y-4">
|
||||
{/* Summary cards */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<SummaryCard
|
||||
label="Total aksi"
|
||||
value={s.total}
|
||||
color="text-text-primary"
|
||||
/>
|
||||
<div className="grid grid-cols-2 gap-3 md:grid-cols-4">
|
||||
<SummaryCard label="Total aksi" value={s.total} />
|
||||
<SummaryCard
|
||||
label="Executed"
|
||||
value={s.executed}
|
||||
color="text-green-500"
|
||||
tone="signal"
|
||||
hint={undefined}
|
||||
/>
|
||||
<SummaryCard
|
||||
label="Failed"
|
||||
value={s.failed}
|
||||
color="text-red-500"
|
||||
tone="vermilion"
|
||||
hint={s.total > 0 ? `${s.failed_rate}%` : undefined}
|
||||
/>
|
||||
<SummaryCard label="Pending" value={s.pending} color="text-amber-500" />
|
||||
<SummaryCard label="Pending" value={s.pending} tone="amber" />
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<span className="text-[10px] font-semibold uppercase tracking-wide text-text-secondary/50">
|
||||
<span className="text-[10px] font-semibold uppercase tracking-wide text-[var(--color-ink-soft)]">
|
||||
Status
|
||||
</span>
|
||||
{statusFilters.map((f) => (
|
||||
@@ -154,7 +130,7 @@ export function ModerationSection({
|
||||
onClick={() => setStatus(f)}
|
||||
/>
|
||||
))}
|
||||
<span className="ml-3 text-[10px] font-semibold uppercase tracking-wide text-text-secondary/50">
|
||||
<span className="ml-3 text-[10px] font-semibold uppercase tracking-wide text-[var(--color-ink-soft)]">
|
||||
Tipe
|
||||
</span>
|
||||
{typeFilters.map((f) => (
|
||||
@@ -173,13 +149,13 @@ export function ModerationSection({
|
||||
{actionsLoading && !actions ? (
|
||||
<LoadingSkeleton count={6} height="h-16" />
|
||||
) : !actions || actions.length === 0 ? (
|
||||
<Card className={cn("p-6", "[--card-spacing:0px]", "rounded-2xl")}>
|
||||
<div className="surface p-6">
|
||||
<EmptyState
|
||||
icon={ShieldAlert}
|
||||
title="Belum ada aksi moderasi"
|
||||
description="Aksi auto- moderasi (delete, warn, kick, ban) akan muncul di sini."
|
||||
description="Aksi auto-moderasi (delete, warn, kick, ban) akan muncul di sini."
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{actions.map((a) => (
|
||||
@@ -188,7 +164,7 @@ export function ModerationSection({
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-[10px] text-text-secondary/40">
|
||||
<p className="text-[10px] text-[var(--color-ink-soft)]">
|
||||
{actions?.length ?? 0} aksi ditampilkan · log moderasi gateway Discord
|
||||
</p>
|
||||
</div>
|
||||
@@ -198,26 +174,34 @@ export function ModerationSection({
|
||||
function SummaryCard({
|
||||
label,
|
||||
value,
|
||||
color,
|
||||
tone,
|
||||
hint,
|
||||
}: {
|
||||
label: string;
|
||||
value: number;
|
||||
color: string;
|
||||
tone?: "signal" | "vermilion" | "amber";
|
||||
hint?: string;
|
||||
}) {
|
||||
return (
|
||||
<Card className={cn("p-4", "[--card-spacing:0px]", "rounded-2xl")}>
|
||||
<p className="text-[10px] uppercase tracking-wide text-text-secondary/50">
|
||||
<div className="surface p-4">
|
||||
<p className="text-[10px] uppercase tracking-wide text-[var(--color-ink-soft)]">
|
||||
{label}
|
||||
</p>
|
||||
<p className={cn("mt-1 text-2xl font-bold", color)}>
|
||||
<p
|
||||
className={cn(
|
||||
"mt-1 text-2xl font-bold",
|
||||
tone === "signal" && "text-[var(--color-signal)]",
|
||||
tone === "vermilion" && "text-[var(--color-vermilion)]",
|
||||
tone === "amber" && "text-[var(--color-amber)]",
|
||||
!tone && "text-[var(--color-ink)]",
|
||||
)}
|
||||
>
|
||||
{value}
|
||||
{hint && (
|
||||
<span className="ml-1 text-xs font-medium opacity-80">({hint})</span>
|
||||
)}
|
||||
</p>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -237,8 +221,8 @@ function FilterChip({
|
||||
className={cn(
|
||||
"rounded-full px-3 py-1 text-[11px] transition-colors",
|
||||
active
|
||||
? "bg-primary/20 text-primary"
|
||||
: "text-text-secondary/60 hover:text-text-primary glass",
|
||||
? "bg-[var(--color-signal)] text-[var(--color-signal-ink)]"
|
||||
: "text-[var(--color-ink-soft)] hover:bg-[var(--color-surface-2)] hover:text-[var(--color-ink)]",
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
@@ -251,49 +235,45 @@ function ActionRow({ action }: { action: ModerationAction }) {
|
||||
const st = STATUS_META[action.status];
|
||||
const Icon = meta.Icon;
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
"flex items-start gap-3 p-3",
|
||||
"[--card-spacing:0px]",
|
||||
"rounded-2xl",
|
||||
)}
|
||||
>
|
||||
<span className={cn("mt-0.5 shrink-0", meta.className)}>
|
||||
<div className="surface flex items-start gap-3 p-3">
|
||||
<span
|
||||
className={cn(
|
||||
"mt-0.5 shrink-0",
|
||||
meta.tone === "vermilion"
|
||||
? "text-[var(--color-vermilion)]"
|
||||
: "text-[var(--color-amber)]",
|
||||
)}
|
||||
>
|
||||
<Icon className="size-4" />
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="text-xs font-semibold text-text-primary">
|
||||
<span className="text-xs font-semibold text-[var(--color-ink)]">
|
||||
{meta.label}
|
||||
</span>
|
||||
{action.username && (
|
||||
<span className="text-xs text-text-secondary">
|
||||
<span className="text-xs text-[var(--color-ink-soft)]">
|
||||
@{action.username}
|
||||
</span>
|
||||
)}
|
||||
<Badge variant="outline" className={cn("text-[10px]", st.className)}>
|
||||
<span
|
||||
className={cn("mr-1 inline-block size-1.5 rounded-full", st.dot)}
|
||||
/>
|
||||
{st.label}
|
||||
</Badge>
|
||||
<Badge tone={st.tone}>{st.label}</Badge>
|
||||
</div>
|
||||
{action.content && (
|
||||
<p className="mt-1 line-clamp-2 text-xs text-text-secondary/80">
|
||||
<p className="mt-1 line-clamp-2 text-xs text-[var(--color-ink-soft)]">
|
||||
{renderMessageContent(action.content, null)}
|
||||
</p>
|
||||
)}
|
||||
{action.reason && (
|
||||
<p className="mt-1 text-[11px] text-text-secondary/60">
|
||||
<p className="mt-1 text-[11px] text-[var(--color-ink-soft)]">
|
||||
Alasan: {action.reason}
|
||||
</p>
|
||||
)}
|
||||
{action.error && (
|
||||
<p className="mt-1 text-[11px] text-red-500/80 line-clamp-2">
|
||||
<p className="mt-1 text-[11px] text-[var(--color-vermilion)] line-clamp-2">
|
||||
Error: {action.error}
|
||||
</p>
|
||||
)}
|
||||
<p className="mt-1.5 text-[10px] font-mono text-text-secondary/40">
|
||||
<p className="mt-1.5 text-[10px] font-mono text-[var(--color-ink-soft)]">
|
||||
dibuat {fmtTime(action.created_at)}
|
||||
{action.executed_at
|
||||
? ` · dieksekusi ${fmtTime(action.executed_at)}`
|
||||
@@ -301,13 +281,13 @@ function ActionRow({ action }: { action: ModerationAction }) {
|
||||
</p>
|
||||
</div>
|
||||
{action.status === "executed" ? (
|
||||
<CheckCircle2 className="mt-0.5 size-3.5 shrink-0 text-green-500" />
|
||||
<CheckCircle2 className="mt-0.5 size-3.5 shrink-0 text-[var(--color-signal)]" />
|
||||
) : action.status === "failed" ? (
|
||||
<XCircle className="mt-0.5 size-3.5 shrink-0 text-red-500" />
|
||||
<XCircle className="mt-0.5 size-3.5 shrink-0 text-[var(--color-vermilion)]" />
|
||||
) : (
|
||||
<Loader2 className="mt-0.5 size-3.5 shrink-0 animate-spin text-amber-500" />
|
||||
<Loader2 className="mt-0.5 size-3.5 shrink-0 animate-spin text-[var(--color-amber)]" />
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
"use client";
|
||||
|
||||
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import type { ReactNode } from "react";
|
||||
import { ease } from "./variants";
|
||||
|
||||
export function RouteTransition({ children }: { children: ReactNode }) {
|
||||
const pathname = usePathname();
|
||||
const reduce = useReducedMotion();
|
||||
|
||||
if (reduce) {
|
||||
return <div key={pathname}>{children}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<AnimatePresence mode="popLayout" initial={false}>
|
||||
<motion.div
|
||||
key={pathname}
|
||||
initial={{ opacity: 0, y: 8, filter: "blur(4px)" }}
|
||||
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
|
||||
exit={{ opacity: 0, filter: "blur(4px)" }}
|
||||
transition={{ duration: 0.22, ease }}
|
||||
className="contents"
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
"use client";
|
||||
|
||||
import { motion, type Variants } from "motion/react";
|
||||
import type { ReactNode } from "react";
|
||||
import { fadeUp, stagger } from "./variants";
|
||||
|
||||
type V = Variants;
|
||||
|
||||
interface StaggerGroupProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
variants?: V;
|
||||
as?: "div" | "ul" | "section";
|
||||
}
|
||||
|
||||
export function StaggerGroup({
|
||||
children,
|
||||
className,
|
||||
variants = stagger,
|
||||
as = "div",
|
||||
}: StaggerGroupProps) {
|
||||
const Tag = motion[as];
|
||||
return (
|
||||
<Tag
|
||||
className={className}
|
||||
variants={variants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
{children}
|
||||
</Tag>
|
||||
);
|
||||
}
|
||||
|
||||
interface StaggerItemProps {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
variants?: V;
|
||||
layout?: boolean;
|
||||
}
|
||||
|
||||
export function StaggerItem({
|
||||
children,
|
||||
className,
|
||||
variants = fadeUp,
|
||||
layout,
|
||||
}: StaggerItemProps) {
|
||||
return (
|
||||
<motion.div className={className} variants={variants} layout={layout}>
|
||||
{children}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import type { Transition, Variants } from "motion/react";
|
||||
|
||||
/** Spring tuned for UI micro-interactions. */
|
||||
export const spring: Transition = {
|
||||
type: "spring",
|
||||
stiffness: 260,
|
||||
damping: 24,
|
||||
};
|
||||
|
||||
/** Expressive ease-out for page/section transitions. */
|
||||
export const ease = [0.22, 1, 0.36, 1] as const;
|
||||
|
||||
/** Single-element fade + rise. */
|
||||
export const fadeUp: Variants = {
|
||||
hidden: { opacity: 0, y: 8 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.32, ease } },
|
||||
};
|
||||
|
||||
/** Parent that staggers its children. */
|
||||
export const stagger: Variants = {
|
||||
hidden: {},
|
||||
visible: {
|
||||
transition: { staggerChildren: 0.06, delayChildren: 0.08 },
|
||||
},
|
||||
};
|
||||
|
||||
/** Scale-in for emphasis blocks. */
|
||||
export const popIn: Variants = {
|
||||
hidden: { opacity: 0, scale: 0.94 },
|
||||
visible: { opacity: 1, scale: 1, transition: spring },
|
||||
};
|
||||
@@ -0,0 +1,39 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface AvatarProps {
|
||||
src?: string | null;
|
||||
name?: string | null;
|
||||
size?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function initials(name?: string | null): string {
|
||||
if (!name) return "?";
|
||||
const parts = name.trim().split(/\s+/);
|
||||
if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
|
||||
return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
|
||||
}
|
||||
|
||||
export function Avatar({ src, name, size = 36, className }: AvatarProps) {
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full",
|
||||
"bg-[var(--color-signal)]/20 text-[var(--color-signal)] font-semibold",
|
||||
className,
|
||||
)}
|
||||
style={{ width: size, height: size, fontSize: size * 0.38 }}
|
||||
>
|
||||
{src ? (
|
||||
<img
|
||||
src={src}
|
||||
alt={name ?? ""}
|
||||
className="size-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
) : (
|
||||
initials(name)
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import type { ReactNode } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export type BadgeTone = "signal" | "amber" | "vermilion" | "neutral";
|
||||
|
||||
const toneClass: Record<BadgeTone, string> = {
|
||||
signal: "bg-[var(--color-signal)]/15 text-[var(--color-signal)]",
|
||||
amber: "bg-[var(--color-amber)]/15 text-[var(--color-amber)]",
|
||||
vermilion: "bg-[var(--color-vermilion)]/15 text-[var(--color-vermilion)]",
|
||||
neutral: "bg-[var(--color-hairline)] text-[var(--color-ink-soft)]",
|
||||
};
|
||||
|
||||
export interface BadgeProps {
|
||||
tone?: BadgeTone;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
dot?: boolean;
|
||||
}
|
||||
|
||||
export function Badge({
|
||||
tone = "neutral",
|
||||
children,
|
||||
className,
|
||||
dot,
|
||||
}: BadgeProps) {
|
||||
return (
|
||||
<span className={cn("pill", toneClass[tone], className)}>
|
||||
{dot && (
|
||||
<span
|
||||
className={cn(
|
||||
"size-1.5 rounded-full",
|
||||
tone === "signal" && "bg-[var(--color-signal)]",
|
||||
tone === "amber" && "bg-[var(--color-amber)]",
|
||||
tone === "vermilion" && "bg-[var(--color-vermilion)]",
|
||||
tone === "neutral" && "bg-[var(--color-ink-soft)]",
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
"use client";
|
||||
|
||||
import { type HTMLMotionProps, motion, useReducedMotion } from "motion/react";
|
||||
import { forwardRef } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type Variant = "primary" | "ghost" | "danger" | "outline";
|
||||
type Size = "sm" | "md" | "lg" | "icon";
|
||||
|
||||
const variantClass: Record<Variant, string> = {
|
||||
primary:
|
||||
"bg-[var(--color-signal)] text-[var(--color-signal-ink)] hover:opacity-90",
|
||||
ghost:
|
||||
"bg-transparent text-[var(--color-ink)] hover:bg-[var(--color-surface-2)]",
|
||||
danger: "bg-[var(--color-vermilion)] text-white hover:opacity-90",
|
||||
outline:
|
||||
"bg-transparent text-[var(--color-ink)] border border-[var(--color-hairline)] hover:bg-[var(--color-surface-2)]",
|
||||
};
|
||||
|
||||
const sizeClass: Record<Size, string> = {
|
||||
sm: "h-8 px-3 text-xs rounded-[var(--radius-r-control)]",
|
||||
md: "h-10 px-4 text-sm rounded-[var(--radius-r-control)]",
|
||||
lg: "h-12 px-6 text-base rounded-[var(--radius-r)]",
|
||||
icon: "size-9 rounded-[var(--radius-r-control)]",
|
||||
};
|
||||
|
||||
export interface ButtonProps extends Omit<HTMLMotionProps<"button">, "ref"> {
|
||||
variant?: Variant;
|
||||
size?: Size;
|
||||
}
|
||||
|
||||
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
(
|
||||
{ className, variant = "primary", size = "md", children, ...props },
|
||||
ref,
|
||||
) => {
|
||||
const reduce = useReducedMotion();
|
||||
return (
|
||||
<motion.button
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"inline-flex items-center justify-center gap-2 select-none cursor-pointer font-medium outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] disabled:opacity-50 disabled:pointer-events-none transition-colors duration-150",
|
||||
variantClass[variant],
|
||||
sizeClass[size],
|
||||
className,
|
||||
)}
|
||||
whileTap={reduce ? undefined : { scale: 0.97 }}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</motion.button>
|
||||
);
|
||||
},
|
||||
);
|
||||
Button.displayName = "Button";
|
||||
@@ -0,0 +1,75 @@
|
||||
"use client";
|
||||
|
||||
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
|
||||
import { type ReactNode, useEffect, useRef } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface DialogProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
labelledBy?: string;
|
||||
}
|
||||
|
||||
export function Dialog({
|
||||
open,
|
||||
onClose,
|
||||
children,
|
||||
className,
|
||||
labelledBy,
|
||||
}: DialogProps) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const reduce = useReducedMotion();
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
};
|
||||
document.addEventListener("keydown", onKey);
|
||||
document.body.style.overflow = "hidden";
|
||||
return () => {
|
||||
document.removeEventListener("keydown", onKey);
|
||||
document.body.style.overflow = "";
|
||||
};
|
||||
}, [open, onClose]);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center p-4"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.18 }}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 bg-black/55 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
aria-hidden
|
||||
/>
|
||||
<motion.div
|
||||
ref={ref}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby={labelledBy}
|
||||
className={cn(
|
||||
"relative z-10 w-full max-w-lg surface-2 shadow-2xl",
|
||||
className,
|
||||
)}
|
||||
initial={
|
||||
reduce ? { opacity: 0 } : { opacity: 0, scale: 0.96, y: 12 }
|
||||
}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
exit={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.96, y: 12 }}
|
||||
transition={{ type: "spring", stiffness: 320, damping: 28 }}
|
||||
>
|
||||
{children}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
export { Avatar, type AvatarProps } from "./avatar";
|
||||
export { Badge, type BadgeProps, type BadgeTone } from "./badge";
|
||||
export { Button, type ButtonProps } from "./button";
|
||||
export { Dialog, type DialogProps } from "./dialog";
|
||||
export { Input, type InputProps } from "./input";
|
||||
export { Progress, type ProgressProps } from "./progress";
|
||||
export { Select, type SelectProps } from "./select";
|
||||
export { Sheet, type SheetProps } from "./sheet";
|
||||
export { Skeleton, type SkeletonProps } from "./skeleton";
|
||||
export { Toaster, type ToasterProps, useToast } from "./toast";
|
||||
export { Tooltip, type TooltipProps } from "./tooltip";
|
||||
@@ -0,0 +1,23 @@
|
||||
import { forwardRef, type InputHTMLAttributes } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||||
mono?: boolean;
|
||||
}
|
||||
|
||||
export const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
({ className, mono, ...props }, ref) => (
|
||||
<input
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"w-full bg-[var(--color-surface-2)] text-[var(--color-ink)] placeholder:text-[var(--color-ink-soft)]/60",
|
||||
"rounded-[var(--radius-r-control)] border border-[var(--color-hairline)] px-3 py-2 text-sm",
|
||||
"outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] transition-colors",
|
||||
mono && "font-mono tracking-tight",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
),
|
||||
);
|
||||
Input.displayName = "Input";
|
||||
@@ -0,0 +1,39 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface ProgressProps {
|
||||
value: number;
|
||||
max?: number;
|
||||
className?: string;
|
||||
tone?: "signal" | "amber" | "vermilion";
|
||||
showLabel?: boolean;
|
||||
}
|
||||
|
||||
export function Progress({
|
||||
value,
|
||||
max = 100,
|
||||
className,
|
||||
tone = "signal",
|
||||
showLabel,
|
||||
}: ProgressProps) {
|
||||
const pct = Math.max(0, Math.min(100, (value / max) * 100));
|
||||
const stroke = {
|
||||
signal: "var(--color-signal)",
|
||||
amber: "var(--color-amber)",
|
||||
vermilion: "var(--color-vermilion)",
|
||||
}[tone];
|
||||
return (
|
||||
<div className={cn("flex items-center gap-2", className)}>
|
||||
<div className="relative h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--color-hairline)]">
|
||||
<div
|
||||
className="absolute inset-y-0 left-0 rounded-full transition-[width] duration-300"
|
||||
style={{ width: `${pct}%`, background: stroke }}
|
||||
/>
|
||||
</div>
|
||||
{showLabel && (
|
||||
<span className="mono text-xs text-[var(--color-ink-soft)]">
|
||||
{Math.round(pct)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
import { forwardRef, type SelectHTMLAttributes } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
||||
mono?: boolean;
|
||||
}
|
||||
|
||||
export const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
||||
({ className, mono, children, ...props }, ref) => (
|
||||
<select
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"w-full bg-[var(--color-surface-2)] text-[var(--color-ink)] appearance-none cursor-pointer",
|
||||
"rounded-[var(--radius-r-control)] border border-[var(--color-hairline)] px-3 py-2 text-sm",
|
||||
"outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] transition-colors",
|
||||
"bg-[url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 fill=%22none%22 stroke=%22%23aaa%22 stroke-width=%222%22><path d=%22M2 4l4 4 4-4%22/></svg>')] bg-[length:12px] bg-[right_0.75rem_center] bg-no-repeat pr-9",
|
||||
mono && "font-mono tracking-tight",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</select>
|
||||
),
|
||||
);
|
||||
Select.displayName = "Select";
|
||||
@@ -0,0 +1,74 @@
|
||||
"use client";
|
||||
|
||||
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
|
||||
import { type ReactNode, useEffect } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface SheetProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
children: ReactNode;
|
||||
side?: "left" | "right" | "bottom";
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function Sheet({
|
||||
open,
|
||||
onClose,
|
||||
children,
|
||||
side = "left",
|
||||
className,
|
||||
}: SheetProps) {
|
||||
const reduce = useReducedMotion();
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
|
||||
document.addEventListener("keydown", onKey);
|
||||
return () => document.removeEventListener("keydown", onKey);
|
||||
}, [open, onClose]);
|
||||
|
||||
const dir =
|
||||
side === "left"
|
||||
? { initial: { x: "-100%" }, animate: { x: 0 } }
|
||||
: side === "right"
|
||||
? { initial: { x: "100%" }, animate: { x: 0 } }
|
||||
: { initial: { y: "100%" }, animate: { y: 0 } };
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{open && (
|
||||
<motion.div
|
||||
className="fixed inset-0 z-50"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
>
|
||||
<div
|
||||
className="absolute inset-0 bg-black/55 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
aria-hidden
|
||||
/>
|
||||
<motion.aside
|
||||
className={cn(
|
||||
"absolute bg-[var(--color-canvas)] shadow-2xl",
|
||||
side === "left" &&
|
||||
"left-0 top-0 h-full w-72 border-r border-[var(--color-hairline)]",
|
||||
side === "right" &&
|
||||
"right-0 top-0 h-full w-72 border-l border-[var(--color-hairline)]",
|
||||
side === "bottom" &&
|
||||
"bottom-0 left-0 w-full rounded-t-2xl border-t border-[var(--color-hairline)]",
|
||||
className,
|
||||
)}
|
||||
initial={reduce ? { opacity: 0 } : dir.initial}
|
||||
animate={reduce ? { opacity: 1 } : dir.animate}
|
||||
exit={reduce ? { opacity: 0 } : dir.initial}
|
||||
transition={{ type: "spring", stiffness: 320, damping: 32 }}
|
||||
>
|
||||
{children}
|
||||
</motion.aside>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface SkeletonProps {
|
||||
className?: string;
|
||||
rounded?: boolean;
|
||||
}
|
||||
|
||||
export function Skeleton({ className, rounded }: SkeletonProps) {
|
||||
return (
|
||||
<div
|
||||
aria-hidden
|
||||
className={cn(
|
||||
"animate-shimmer rounded-[var(--radius-r-control)]",
|
||||
"bg-[var(--color-surface-2)]",
|
||||
rounded && "rounded-full",
|
||||
className,
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,147 @@
|
||||
"use client";
|
||||
|
||||
import { X } from "lucide-react";
|
||||
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
|
||||
import {
|
||||
createContext,
|
||||
type ReactNode,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
} from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type ToastTone = "signal" | "amber" | "vermilion" | "neutral";
|
||||
|
||||
interface ToastItem {
|
||||
id: number;
|
||||
title?: string;
|
||||
description?: string;
|
||||
tone: ToastTone;
|
||||
}
|
||||
|
||||
interface ToastContextValue {
|
||||
toast: (t: {
|
||||
title?: string;
|
||||
description?: string;
|
||||
tone?: ToastTone;
|
||||
}) => void;
|
||||
}
|
||||
|
||||
const ToastContext = createContext<ToastContextValue | null>(null);
|
||||
|
||||
export function useToast() {
|
||||
const ctx = useContext(ToastContext);
|
||||
if (!ctx) {
|
||||
return {
|
||||
toast: (_: {
|
||||
title?: string;
|
||||
description?: string;
|
||||
tone?: ToastTone;
|
||||
}) => {},
|
||||
};
|
||||
}
|
||||
return ctx;
|
||||
}
|
||||
|
||||
const toneBar: Record<ToastTone, string> = {
|
||||
signal: "bg-[var(--color-signal)]",
|
||||
amber: "bg-[var(--color-amber)]",
|
||||
vermilion: "bg-[var(--color-vermilion)]",
|
||||
neutral: "bg-[var(--color-ink-soft)]",
|
||||
};
|
||||
|
||||
export interface ToasterProps {
|
||||
position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
|
||||
}
|
||||
|
||||
export function Toaster({ position = "bottom-right" }: ToasterProps) {
|
||||
const [items, setItems] = useState<ToastItem[]>([]);
|
||||
const reduce = useReducedMotion();
|
||||
|
||||
const toast = useCallback(
|
||||
(t: { title?: string; description?: string; tone?: ToastTone }) => {
|
||||
const id = Date.now() + Math.random();
|
||||
const item: ToastItem = {
|
||||
id,
|
||||
tone: t.tone ?? "neutral",
|
||||
title: t.title,
|
||||
description: t.description,
|
||||
};
|
||||
setItems((prev) => [...prev, item]);
|
||||
setTimeout(() => {
|
||||
setItems((prev) => prev.filter((i) => i.id !== id));
|
||||
}, 4500);
|
||||
},
|
||||
[],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
// expose a no-op provider only; actual provider wraps below
|
||||
}, []);
|
||||
|
||||
const posClass =
|
||||
position === "bottom-right"
|
||||
? "bottom-4 right-4"
|
||||
: position === "bottom-left"
|
||||
? "bottom-4 left-4"
|
||||
: position === "top-right"
|
||||
? "top-4 right-4"
|
||||
: "top-4 left-4";
|
||||
|
||||
return (
|
||||
<ToastContext.Provider value={{ toast }}>
|
||||
<div
|
||||
className={cn(
|
||||
"fixed z-[60] flex w-[min(92vw,360px)] flex-col gap-2",
|
||||
posClass,
|
||||
)}
|
||||
>
|
||||
<AnimatePresence>
|
||||
{items.map((it) => (
|
||||
<motion.div
|
||||
key={it.id}
|
||||
layout
|
||||
initial={
|
||||
reduce ? { opacity: 0 } : { opacity: 0, x: 40, scale: 0.96 }
|
||||
}
|
||||
animate={{ opacity: 1, x: 0, scale: 1 }}
|
||||
exit={
|
||||
reduce ? { opacity: 0 } : { opacity: 0, x: 40, scale: 0.96 }
|
||||
}
|
||||
transition={{ type: "spring", stiffness: 360, damping: 30 }}
|
||||
className="surface-2 relative flex gap-3 overflow-hidden p-3 pr-9 shadow-xl"
|
||||
>
|
||||
<span
|
||||
className={cn("w-1 shrink-0 rounded-full", toneBar[it.tone])}
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
{it.title && (
|
||||
<div className="text-sm font-semibold text-[var(--color-ink)]">
|
||||
{it.title}
|
||||
</div>
|
||||
)}
|
||||
{it.description && (
|
||||
<div className="text-xs text-[var(--color-ink-soft)]">
|
||||
{it.description}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setItems((prev) => prev.filter((i) => i.id !== it.id))
|
||||
}
|
||||
className="absolute right-2 top-2 text-[var(--color-ink-soft)] hover:text-[var(--color-ink)]"
|
||||
aria-label="Dismiss"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
</button>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</ToastContext.Provider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
"use client";
|
||||
|
||||
import { type ReactNode, useState } from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface TooltipProps {
|
||||
content: ReactNode;
|
||||
children: ReactNode;
|
||||
side?: "top" | "bottom" | "left" | "right";
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const sidePos: Record<NonNullable<TooltipProps["side"]>, string> = {
|
||||
top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
|
||||
bottom: "top-full left-1/2 -translate-x-1/2 mt-2",
|
||||
left: "right-full top-1/2 -translate-y-1/2 mr-2",
|
||||
right: "left-full top-1/2 -translate-y-1/2 ml-2",
|
||||
};
|
||||
|
||||
export function Tooltip({
|
||||
content,
|
||||
children,
|
||||
side = "top",
|
||||
className,
|
||||
}: TooltipProps) {
|
||||
const [show, setShow] = useState(false);
|
||||
return (
|
||||
<span
|
||||
className="relative inline-flex"
|
||||
onMouseEnter={() => setShow(true)}
|
||||
onMouseLeave={() => setShow(false)}
|
||||
onFocus={() => setShow(true)}
|
||||
onBlur={() => setShow(false)}
|
||||
>
|
||||
{children}
|
||||
<span
|
||||
role="tooltip"
|
||||
className={cn(
|
||||
"pointer-events-none absolute z-50 whitespace-nowrap rounded-[var(--radius-r-control)] px-2.5 py-1 text-xs font-medium",
|
||||
"bg-[var(--color-ink)] text-[var(--color-canvas)] opacity-0 transition-opacity duration-150",
|
||||
sidePos[side],
|
||||
show && "opacity-100",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{content}
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -1,161 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { Download, Loader2, Pause, Play } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { formatBytes } from "@/lib/format";
|
||||
import type { VoiceRecording } from "@/lib/types";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface RecordingCardProps {
|
||||
recording: VoiceRecording;
|
||||
active: boolean;
|
||||
playing: boolean;
|
||||
loading: boolean;
|
||||
onTogglePlay: (id: string) => void;
|
||||
}
|
||||
|
||||
const BAR_COUNT = 40;
|
||||
const barBase = (i: number) => 22 + Math.sin(i * 0.45) * 14 + ((i * 7) % 11);
|
||||
|
||||
export function RecordingCard({
|
||||
recording,
|
||||
active,
|
||||
playing,
|
||||
loading,
|
||||
onTogglePlay,
|
||||
}: RecordingCardProps) {
|
||||
const [downloading, setDownloading] = useState(false);
|
||||
const sizeStr = recording.size_bytes
|
||||
? formatBytes(recording.size_bytes)
|
||||
: "--";
|
||||
|
||||
// Fetch the file (CORS is open on the uploader) → blob → force download with
|
||||
// the real filename. Falls back to opening the URL in a new tab.
|
||||
const handleDownload = async (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
if (!recording.download_url || downloading) return;
|
||||
setDownloading(true);
|
||||
try {
|
||||
const res = await fetch(recording.download_url);
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const blob = await res.blob();
|
||||
const objUrl = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = objUrl;
|
||||
a.download = recording.filename ?? `recording-${recording.id}.mp3`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
a.remove();
|
||||
setTimeout(() => URL.revokeObjectURL(objUrl), 30_000);
|
||||
} catch {
|
||||
window.open(recording.download_url, "_blank", "noopener,noreferrer");
|
||||
} finally {
|
||||
setDownloading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
`p-4 transition-all ${
|
||||
active
|
||||
? "ring-1 ring-primary/40 border-primary/30 animate-card-glow"
|
||||
: "hover:ring-1 hover:ring-border/60"
|
||||
}`,
|
||||
"cursor-pointer transition-colors hover:ring-primary/40",
|
||||
"[--card-spacing:0px]",
|
||||
"rounded-2xl",
|
||||
)}
|
||||
onClick={() => onTogglePlay(recording.id)}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onTogglePlay(recording.id);
|
||||
}}
|
||||
aria-label={playing ? "Pause" : loading ? "Loading" : "Play"}
|
||||
className={`flex size-10 shrink-0 items-center justify-center rounded-full glass-elevated transition-transform hover:scale-105 ${
|
||||
active ? "ring-1 ring-primary/50" : ""
|
||||
}`}
|
||||
>
|
||||
{loading ? (
|
||||
<Loader2 className="size-4 animate-spin text-primary" />
|
||||
) : playing ? (
|
||||
<Pause className="size-4 text-primary" />
|
||||
) : (
|
||||
<Play className="size-4 text-primary ml-0.5" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="font-semibold text-text-primary">
|
||||
{recording.username}
|
||||
</span>
|
||||
<span className="text-[10px] text-text-secondary/40 font-mono">
|
||||
{recording.channel_name}
|
||||
</span>
|
||||
{active && (
|
||||
<span className="ml-auto inline-flex items-center gap-1 text-[9px] font-semibold uppercase tracking-widest text-primary/90">
|
||||
{loading ? "Loading" : playing ? "Now Playing" : "Paused"}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Waveform — bounces while playing, pulses while loading */}
|
||||
<div className="my-2 flex h-8 items-end gap-0.5 overflow-hidden">
|
||||
{Array.from({ length: BAR_COUNT }, (_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`flex-1 rounded-t-sm transition-colors ${
|
||||
active ? "bg-primary" : "bg-primary/50"
|
||||
} ${loading ? "animate-pulse opacity-40" : ""} ${
|
||||
playing ? "animate-eq" : ""
|
||||
}`}
|
||||
style={{
|
||||
height: `${barBase(i)}%`,
|
||||
animationDelay: playing ? `${(i % 8) * 0.09}s` : undefined,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] font-mono text-text-secondary/60">
|
||||
{sizeStr}
|
||||
</span>
|
||||
<span className="text-[10px] text-text-secondary/40">
|
||||
{new Date(recording.created_at).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* biome-ignore lint/a11y/noStaticElementInteractions: stopPropagation container — prevents card play toggle when clicking action buttons */}
|
||||
{/* biome-ignore lint/a11y/useKeyWithClickEvents: no keyboard interaction — container only swallows clicks destined for the action buttons */}
|
||||
<div
|
||||
className="flex shrink-0 gap-1"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{recording.download_url && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDownload}
|
||||
disabled={downloading}
|
||||
title="Download"
|
||||
className="flex size-7 items-center justify-center rounded glass hover:glass-elevated transition-all disabled:opacity-50"
|
||||
>
|
||||
{downloading ? (
|
||||
<Loader2 className="size-3 animate-spin text-text-secondary/60" />
|
||||
) : (
|
||||
<Download className="size-3 text-text-secondary/60" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,149 +1,78 @@
|
||||
"use client";
|
||||
|
||||
import { Loader2, Pause, Play, X } from "lucide-react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { cn } from "@/lib/utils";
|
||||
/**
|
||||
* RecordingPlayer — canonical single-recording row component.
|
||||
*/
|
||||
import { Delete, Download, Play } from "lucide-react";
|
||||
import { Waveform } from "@/components/charts/waveform";
|
||||
import { Avatar } from "@/components/primitives/avatar";
|
||||
import { Badge } from "@/components/primitives/badge";
|
||||
import { Button } from "@/components/primitives/button";
|
||||
import type { VoiceRecording } from "@/lib/types";
|
||||
|
||||
interface RecordingPlayerProps {
|
||||
url?: string;
|
||||
filename?: string;
|
||||
playing: boolean;
|
||||
loading: boolean;
|
||||
audioRef: React.RefObject<HTMLAudioElement | null>;
|
||||
onToggle: () => void;
|
||||
onStateChange: (s: { playing: boolean; loading: boolean }) => void;
|
||||
onClose: () => void;
|
||||
export interface RecordingPlayerProps {
|
||||
recording: VoiceRecording;
|
||||
onSelect?: (rec: VoiceRecording) => void;
|
||||
onDelete?: (rec: VoiceRecording) => void;
|
||||
deleting?: boolean;
|
||||
}
|
||||
|
||||
export function RecordingPlayer({
|
||||
url,
|
||||
filename,
|
||||
playing,
|
||||
loading,
|
||||
audioRef,
|
||||
onToggle,
|
||||
onStateChange,
|
||||
onClose,
|
||||
recording,
|
||||
onSelect,
|
||||
onDelete,
|
||||
deleting,
|
||||
}: RecordingPlayerProps) {
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [duration, setDuration] = useState(0);
|
||||
const [error, setError] = useState(false);
|
||||
const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
||||
|
||||
// Load the track whenever the URL changes; the click that opened the player
|
||||
// counts as a user gesture so autoplay is allowed.
|
||||
useEffect(() => {
|
||||
const audio = audioRef.current;
|
||||
if (!url || !audio) return;
|
||||
setError(false);
|
||||
setProgress(0);
|
||||
setDuration(0);
|
||||
audio.src = url;
|
||||
audio.load();
|
||||
const p = audio.play();
|
||||
if (p) p.catch(() => {});
|
||||
}, [url, audioRef]);
|
||||
|
||||
// Progress ticker + cleanup.
|
||||
useEffect(() => {
|
||||
if (timerRef.current) clearInterval(timerRef.current);
|
||||
timerRef.current = setInterval(() => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
if (duration === 0 && !Number.isNaN(audio.duration))
|
||||
setDuration(audio.duration);
|
||||
if (!Number.isNaN(audio.currentTime)) setProgress(audio.currentTime);
|
||||
}, 250);
|
||||
return () => {
|
||||
if (timerRef.current) clearInterval(timerRef.current);
|
||||
};
|
||||
}, [duration, audioRef]);
|
||||
|
||||
if (!url) return null;
|
||||
|
||||
const fmt = (s: number) => {
|
||||
if (!Number.isFinite(s) || s <= 0) return "0:00";
|
||||
const m = Math.floor(s / 60);
|
||||
const ss = Math.floor(s % 60);
|
||||
return `${m}:${String(ss).padStart(2, "0")}`;
|
||||
};
|
||||
const pct = duration > 0 ? Math.min(100, (progress / duration) * 100) : 0;
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
"fixed bottom-20 left-4 z-30 w-80 flex flex-col gap-1.5",
|
||||
"[--card-spacing:0px]",
|
||||
"p-3",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onToggle}
|
||||
disabled={loading}
|
||||
title={playing ? "Pause" : "Play"}
|
||||
className="flex size-8 shrink-0 items-center justify-center rounded-full glass-elevated transition-transform hover:scale-105 disabled:opacity-60"
|
||||
>
|
||||
{loading ? (
|
||||
<Loader2 className="size-3.5 animate-spin text-primary" />
|
||||
) : playing ? (
|
||||
<Pause className="size-3.5 text-primary" />
|
||||
) : (
|
||||
<Play className="size-3.5 text-primary ml-0.5" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="truncate text-[11px] font-medium text-text-primary">
|
||||
{filename ?? "recording"}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-mono text-[10px] text-text-secondary/60">
|
||||
{fmt(progress)} / {fmt(duration)}
|
||||
</span>
|
||||
{loading && (
|
||||
<span className="text-[10px] text-primary/80">loading…</span>
|
||||
)}
|
||||
{error && (
|
||||
<span className="text-[10px] text-red-400/90">
|
||||
playback failed
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" onClick={onClose} className="shrink-0">
|
||||
<X className="size-3.5 text-text-secondary/60 hover:text-text-primary" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Progress bar */}
|
||||
<div className="h-1 w-full overflow-hidden rounded-full bg-glass-border">
|
||||
<div
|
||||
className="h-full rounded-full bg-primary transition-[width] duration-300"
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Hidden audio element drives everything above. */}
|
||||
<audio
|
||||
ref={audioRef}
|
||||
preload="auto"
|
||||
onLoadStart={() => onStateChange({ playing: false, loading: true })}
|
||||
onWaiting={() => onStateChange({ playing: false, loading: true })}
|
||||
onCanPlay={() => onStateChange({ playing: true, loading: false })}
|
||||
onPlaying={() => onStateChange({ playing: true, loading: false })}
|
||||
onPlay={() => onStateChange({ playing: true, loading: false })}
|
||||
onPause={() => onStateChange({ playing: false, loading: false })}
|
||||
onEnded={() => onStateChange({ playing: false, loading: false })}
|
||||
onError={() => {
|
||||
setError(true);
|
||||
onStateChange({ playing: false, loading: false });
|
||||
}}
|
||||
className="hidden"
|
||||
<div className="flex items-center gap-3 rounded-[var(--radius-r)] bg-[var(--color-surface)] p-3">
|
||||
<Waveform
|
||||
seed={recording.id}
|
||||
bars={16}
|
||||
height={36}
|
||||
className="w-20 shrink-0"
|
||||
/>
|
||||
</Card>
|
||||
<Avatar name={recording.username} src={recording.avatar_url} size={32} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-sm font-medium">
|
||||
{recording.username ?? "unknown"}
|
||||
</span>
|
||||
<Badge tone="neutral">
|
||||
.{recording.filename.split(".").pop() ?? "mp3"}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="mono text-xs text-[var(--color-ink-soft)]">
|
||||
{(recording.size_bytes / 1024).toFixed(1)} KB
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{recording.download_url && onSelect && (
|
||||
<Button size="sm" variant="ghost" onClick={() => onSelect(recording)}>
|
||||
<Play className="size-4" />
|
||||
</Button>
|
||||
)}
|
||||
{recording.download_url && (
|
||||
<a
|
||||
href={recording.download_url}
|
||||
download={recording.filename}
|
||||
className="flex size-8 items-center justify-center rounded-[var(--radius-r-control)] text-[var(--color-ink-soft)] hover:bg-[var(--color-surface-2)]"
|
||||
aria-label="Download"
|
||||
>
|
||||
<Download className="size-4" />
|
||||
</a>
|
||||
)}
|
||||
{onDelete && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="danger"
|
||||
disabled={deleting}
|
||||
onClick={() => onDelete(recording)}
|
||||
aria-label="Delete"
|
||||
>
|
||||
<Delete className="size-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import { Inbox } from "lucide-react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface EmptyStateProps {
|
||||
@@ -19,16 +16,15 @@ export function EmptyState({
|
||||
className,
|
||||
}: EmptyStateProps) {
|
||||
return (
|
||||
<Card
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col items-center gap-2 py-12",
|
||||
"surface flex flex-col items-center gap-2 py-12 text-center",
|
||||
className,
|
||||
"[--card-spacing:0px]",
|
||||
)}
|
||||
>
|
||||
<Icon className="size-8 text-text-secondary/20" />
|
||||
<p className="text-sm text-text-secondary/60">{title}</p>
|
||||
<p className="text-xs text-text-secondary/40">{description}</p>
|
||||
</Card>
|
||||
<Icon className="size-8 text-[var(--color-ink-soft)]" />
|
||||
<p className="text-sm font-medium text-[var(--color-ink)]">{title}</p>
|
||||
<p className="text-xs text-[var(--color-ink-soft)]">{description}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import { AlertCircle, RefreshCw } from "lucide-react";
|
||||
import { Component, type ReactNode } from "react";
|
||||
import { Card } from "@/components/ui/card";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface Props {
|
||||
@@ -25,26 +22,19 @@ export class ErrorBoundary extends Component<Props, State> {
|
||||
if (this.state.hasError) {
|
||||
return (
|
||||
this.props.fallback || (
|
||||
<Card
|
||||
className={cn(
|
||||
"flex flex-col items-center gap-2 py-8",
|
||||
"border border-red-500/30 ring-red-500/20",
|
||||
"[--card-spacing:0px]",
|
||||
"rounded-2xl",
|
||||
)}
|
||||
>
|
||||
<AlertCircle className="size-6 text-destructive" />
|
||||
<p className="text-sm text-text-secondary">
|
||||
<div className={cn("surface flex flex-col items-center gap-2 py-8")}>
|
||||
<AlertCircle className="size-6 text-[var(--color-vermilion)]" />
|
||||
<p className="text-sm text-[var(--color-ink)]">
|
||||
{this.state.error?.message || "Something went wrong"}
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => this.setState({ hasError: false })}
|
||||
className="flex items-center gap-1 text-xs text-primary hover:text-primary/80 transition-colors"
|
||||
className="flex items-center gap-1 text-xs text-[var(--color-signal)] hover:opacity-80 transition-colors"
|
||||
>
|
||||
<RefreshCw className="size-3" /> Try again
|
||||
</button>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,21 +1,18 @@
|
||||
import { AlertCircle, RefreshCw } from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Button } from "@/components/primitives/button";
|
||||
|
||||
interface ErrorStateProps {
|
||||
message: string;
|
||||
onRetry?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Consistent error state for data-fetching pages.
|
||||
* Shows the error message with an optional retry button.
|
||||
*/
|
||||
export function ErrorState({ message, onRetry }: ErrorStateProps) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center">
|
||||
<AlertCircle className="size-10 text-destructive mb-3" />
|
||||
<p className="text-sm text-muted-foreground mb-4 max-w-sm">{message}</p>
|
||||
<AlertCircle className="size-10 text-[var(--color-vermilion)] mb-3" />
|
||||
<p className="text-sm text-[var(--color-ink-soft)] mb-4 max-w-sm">
|
||||
{message}
|
||||
</p>
|
||||
{onRetry && (
|
||||
<Button variant="outline" onClick={onRetry}>
|
||||
<RefreshCw className="size-4 mr-2" />
|
||||
|
||||
@@ -1,18 +1,12 @@
|
||||
"use client";
|
||||
|
||||
import { AlertCircle, RefreshCw, Server } from "lucide-react";
|
||||
import { AlertCircle, RefreshCw } from "lucide-react";
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Badge } from "@/components/primitives/badge";
|
||||
import { Button } from "@/components/primitives/button";
|
||||
import { Select } from "@/components/primitives/select";
|
||||
import { Skeleton } from "@/components/primitives/skeleton";
|
||||
import { useConfig, useGuilds } from "@/hooks";
|
||||
|
||||
export interface GuildSelectorProps {
|
||||
@@ -24,10 +18,6 @@ export interface GuildSelectorProps {
|
||||
autoHide?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Guild selector bar — fetches the guild list and renders a <Select>.
|
||||
* Optionally auto-hides when there's exactly one guild.
|
||||
*/
|
||||
export function GuildSelector({
|
||||
value,
|
||||
onChange,
|
||||
@@ -45,24 +35,23 @@ export function GuildSelector({
|
||||
if (preferred) onChange(preferred);
|
||||
}, [value, guilds, config, onChange]);
|
||||
|
||||
// Auto-hide when there's exactly one guild and autoHide is on
|
||||
if (autoHide && guilds.length <= 1 && !isLoading && !error) return null;
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center gap-3 rounded-xl border border-border/50 bg-card p-3">
|
||||
<div className="flex items-center gap-3 rounded-[var(--radius-r)] bg-[var(--color-surface)] p-3">
|
||||
<Skeleton className="h-8 w-36" />
|
||||
<Skeleton className="h-8 w-8 rounded-full" />
|
||||
<Skeleton rounded className="h-8 w-8" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex items-center justify-between rounded-xl border border-destructive/20 bg-destructive/5 p-3">
|
||||
<div className="flex items-center justify-between rounded-[var(--radius-r)] bg-[var(--color-vermilion)]/10 p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertCircle className="size-4 text-destructive shrink-0" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<AlertCircle className="size-4 text-[var(--color-vermilion)] shrink-0" />
|
||||
<p className="text-sm text-[var(--color-ink-soft)]">
|
||||
Could not load guilds: {error?.message ?? "Failed to load"}
|
||||
</p>
|
||||
</div>
|
||||
@@ -76,10 +65,10 @@ export function GuildSelector({
|
||||
|
||||
if (guilds.length === 0) {
|
||||
return (
|
||||
<div className="rounded-xl border border-yellow-500/20 bg-yellow-500/5 p-3">
|
||||
<div className="rounded-[var(--radius-r)] bg-[var(--color-amber)]/10 p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertCircle className="size-4 text-yellow-500 shrink-0" />
|
||||
<p className="text-sm text-muted-foreground">
|
||||
<AlertCircle className="size-4 text-[var(--color-amber)] shrink-0" />
|
||||
<p className="text-sm text-[var(--color-ink-soft)]">
|
||||
No guilds available. Make sure the Discord gateway is connected.
|
||||
</p>
|
||||
</div>
|
||||
@@ -88,35 +77,20 @@ export function GuildSelector({
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3 rounded-xl border border-border/50 bg-card p-3">
|
||||
<Badge variant="outline" className="shrink-0 text-xs font-normal">
|
||||
<div className="flex items-center gap-3 rounded-[var(--radius-r)] bg-[var(--color-surface)] p-3">
|
||||
<Badge tone="neutral" className="shrink-0 text-xs font-normal">
|
||||
Guild
|
||||
</Badge>
|
||||
<Select value={value} onValueChange={(v) => v && onChange(v)}>
|
||||
<SelectTrigger className="h-10 w-full max-w-sm">
|
||||
<SelectValue placeholder="Select a guild…">
|
||||
{guilds.find((g) => g.id === value)?.name}
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{guilds.map((g) => (
|
||||
<SelectItem key={g.id} value={g.id}>
|
||||
<span className="flex items-center gap-2">
|
||||
{g.icon ? (
|
||||
// biome-ignore lint/performance/noImgElement: guild icon is a remote Discord CDN URL
|
||||
<img
|
||||
src={g.icon}
|
||||
alt=""
|
||||
className="size-4 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<Server className="size-4 text-muted-foreground" />
|
||||
)}
|
||||
<span className="line-clamp-1">{g.name}</span>
|
||||
</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
<Select
|
||||
value={value}
|
||||
onChange={(e) => e.target.value && onChange(e.target.value)}
|
||||
className="h-10 w-full max-w-sm"
|
||||
>
|
||||
{guilds.map((g) => (
|
||||
<option key={g.id} value={g.id}>
|
||||
{g.name}
|
||||
</option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,49 @@
|
||||
"use client";
|
||||
|
||||
import dynamic from "next/dynamic";
|
||||
import type { OrbFieldProps } from "./orb-field";
|
||||
import type { SignalFieldProps } from "./signal-field";
|
||||
import { StaticFallback } from "./static-fallback";
|
||||
import { WebGLGuard } from "./webgl-guard";
|
||||
|
||||
const SignalFieldImpl = dynamic(
|
||||
() => import("./signal-field").then((m) => m.SignalField),
|
||||
{
|
||||
ssr: false,
|
||||
loading: () => null,
|
||||
},
|
||||
);
|
||||
|
||||
const OrbFieldImpl = dynamic(
|
||||
() => import("./orb-field").then((m) => m.OrbField),
|
||||
{
|
||||
ssr: false,
|
||||
loading: () => null,
|
||||
},
|
||||
);
|
||||
|
||||
export function SignalField(props: SignalFieldProps) {
|
||||
return (
|
||||
<WebGLGuard
|
||||
fallback={<StaticFallback variant="signal" className={props.className} />}
|
||||
>
|
||||
<SignalFieldImpl {...props} />
|
||||
</WebGLGuard>
|
||||
);
|
||||
}
|
||||
|
||||
export function OrbField(props: OrbFieldProps) {
|
||||
return (
|
||||
<WebGLGuard
|
||||
fallback={
|
||||
<StaticFallback
|
||||
variant="orb"
|
||||
count={props.speakers.length}
|
||||
className={props.className}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<OrbFieldImpl {...props} />
|
||||
</WebGLGuard>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,136 @@
|
||||
"use client";
|
||||
|
||||
import { useRef } from "react";
|
||||
import * as THREE from "three";
|
||||
import { useThreeScene } from "./use-three-scene";
|
||||
|
||||
export interface OrbSpeaker {
|
||||
id: string;
|
||||
name: string;
|
||||
speaking: boolean;
|
||||
severity?: "none" | "low" | "medium" | "high" | "critical";
|
||||
}
|
||||
|
||||
export interface OrbFieldProps {
|
||||
speakers: OrbSpeaker[];
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const severityColor: Record<string, string> = {
|
||||
none: "oklch(0.82 0.18 125)",
|
||||
low: "oklch(0.80 0.15 70)",
|
||||
medium: "oklch(0.78 0.16 70)",
|
||||
high: "oklch(0.70 0.2 35)",
|
||||
critical: "oklch(0.66 0.22 25)",
|
||||
};
|
||||
|
||||
/**
|
||||
* Voice page hero. Each speaker is a glowing orb; when speaking it rises and
|
||||
* its ring radius expands. Warm palette only.
|
||||
*/
|
||||
export function OrbField({ speakers, className }: OrbFieldProps) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const speakersRef = useRef(speakers);
|
||||
speakersRef.current = speakers;
|
||||
|
||||
useThreeScene(ref, {
|
||||
setup: (ctx) => {
|
||||
const group = new THREE.Group();
|
||||
ctx.scene.add(group);
|
||||
|
||||
const orbMeshes: Record<string, THREE.Mesh> = {};
|
||||
const ringMeshes: Record<string, THREE.Mesh> = {};
|
||||
|
||||
const layout = () => {
|
||||
const list = speakersRef.current;
|
||||
const n = Math.max(list.length, 1);
|
||||
list.forEach((sp, i) => {
|
||||
const angle = (i / n) * Math.PI * 2;
|
||||
const radius = n === 1 ? 0 : 2.6;
|
||||
const x = Math.cos(angle) * radius;
|
||||
const z = Math.sin(angle) * radius;
|
||||
|
||||
if (!orbMeshes[sp.id]) {
|
||||
const geo = new THREE.SphereGeometry(0.5, 32, 32);
|
||||
const mat = new THREE.MeshStandardMaterial({
|
||||
color: new THREE.Color(severityColor[sp.severity ?? "none"]),
|
||||
emissive: new THREE.Color(severityColor[sp.severity ?? "none"]),
|
||||
emissiveIntensity: 0.6,
|
||||
roughness: 0.4,
|
||||
metalness: 0,
|
||||
});
|
||||
const orb = new THREE.Mesh(geo, mat);
|
||||
orb.position.set(x, 0, z);
|
||||
group.add(orb);
|
||||
orbMeshes[sp.id] = orb;
|
||||
|
||||
const ringGeo = new THREE.TorusGeometry(0.75, 0.03, 16, 64);
|
||||
const ringMat = new THREE.MeshBasicMaterial({
|
||||
color: new THREE.Color(severityColor[sp.severity ?? "none"]),
|
||||
transparent: true,
|
||||
opacity: 0.5,
|
||||
});
|
||||
const ring = new THREE.Mesh(ringGeo, ringMat);
|
||||
ring.rotation.x = Math.PI / 2;
|
||||
ring.position.set(x, 0, z);
|
||||
group.add(ring);
|
||||
ringMeshes[sp.id] = ring;
|
||||
} else {
|
||||
orbMeshes[sp.id].position.x = x;
|
||||
orbMeshes[sp.id].position.z = z;
|
||||
ringMeshes[sp.id].position.x = x;
|
||||
ringMeshes[sp.id].position.z = z;
|
||||
}
|
||||
});
|
||||
// remove orbs no longer present
|
||||
for (const id of Object.keys(orbMeshes)) {
|
||||
if (!list.find((s) => s.id === id)) {
|
||||
group.remove(orbMeshes[id]);
|
||||
(orbMeshes[id].geometry as THREE.BufferGeometry).dispose();
|
||||
group.remove(ringMeshes[id]);
|
||||
(ringMeshes[id].geometry as THREE.BufferGeometry).dispose();
|
||||
delete orbMeshes[id];
|
||||
delete ringMeshes[id];
|
||||
}
|
||||
}
|
||||
};
|
||||
layout();
|
||||
|
||||
const light = new THREE.PointLight(0xffffff, 1.2, 50);
|
||||
light.position.set(0, 4, 6);
|
||||
ctx.scene.add(light);
|
||||
const amb = new THREE.AmbientLight(0xffffff, 0.4);
|
||||
ctx.scene.add(amb);
|
||||
|
||||
(ctx as any)._layout = layout;
|
||||
(ctx as any)._orbs = orbMeshes;
|
||||
(ctx as any)._rings = ringMeshes;
|
||||
|
||||
return () => {};
|
||||
},
|
||||
onFrame: (ctx, t) => {
|
||||
const layout = (ctx as any)._layout as () => void;
|
||||
const orbs = (ctx as any)._orbs as Record<string, THREE.Mesh>;
|
||||
const rings = (ctx as any)._rings as Record<string, THREE.Mesh>;
|
||||
// relayout in case speaker set changed
|
||||
layout();
|
||||
for (const sp of speakersRef.current) {
|
||||
const orb = orbs[sp.id];
|
||||
const ring = rings[sp.id];
|
||||
if (!orb || !ring) continue;
|
||||
const targetY = sp.speaking
|
||||
? 0.6 + Math.sin(t * 4 + (sp.id.charCodeAt(0) || 1)) * 0.15
|
||||
: 0;
|
||||
orb.position.y += (targetY - orb.position.y) * 0.1;
|
||||
const ringScale = sp.speaking ? 1.25 + Math.sin(t * 5) * 0.1 : 1;
|
||||
ring.scale.setScalar(ringScale);
|
||||
(ring.material as THREE.MeshBasicMaterial).opacity = sp.speaking
|
||||
? 0.7
|
||||
: 0.3;
|
||||
}
|
||||
ctx.scene.rotation.y = t * 0.08;
|
||||
},
|
||||
});
|
||||
|
||||
return <div ref={ref} className={className} aria-hidden />;
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
"use client";
|
||||
|
||||
import { useRef } from "react";
|
||||
import * as THREE from "three";
|
||||
import { useThreeScene } from "./use-three-scene";
|
||||
|
||||
export interface SignalFieldProps {
|
||||
/** 0..1 — scales particle pulse speed + opacity */
|
||||
activity?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dashboard hero. A particle field whose idle rotation + breathing pulse
|
||||
* reflects live activity. Warm signal-lime palette, additive glow, no harsh
|
||||
* white. Pointer parallax via camera lerp.
|
||||
*/
|
||||
export function SignalField({ activity = 0.4, className }: SignalFieldProps) {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const activityRef = useRef(activity);
|
||||
activityRef.current = activity;
|
||||
|
||||
useThreeScene(ref, {
|
||||
setup: (ctx) => {
|
||||
const w = ctx.width;
|
||||
const h = ctx.height;
|
||||
const area = w * h;
|
||||
const count = Math.min(900, Math.max(220, Math.floor(area / 2000)));
|
||||
|
||||
const positions = new Float32Array(count * 3);
|
||||
const phases = new Float32Array(count);
|
||||
const radius = 4.2;
|
||||
for (let i = 0; i < count; i++) {
|
||||
const r = radius * (0.25 + Math.random() * 0.75);
|
||||
const theta = Math.random() * Math.PI * 2;
|
||||
const phi = Math.acos(2 * Math.random() - 1);
|
||||
positions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
|
||||
positions[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta) * 0.6;
|
||||
positions[i * 3 + 2] = r * Math.cos(phi);
|
||||
phases[i] = Math.random() * Math.PI * 2;
|
||||
}
|
||||
|
||||
const geo = new THREE.BufferGeometry();
|
||||
geo.setAttribute("position", new THREE.BufferAttribute(positions, 3));
|
||||
|
||||
const mat = new THREE.PointsMaterial({
|
||||
color: new THREE.Color("oklch(0.82 0.18 125)"),
|
||||
size: 0.045,
|
||||
transparent: true,
|
||||
opacity: 0.85,
|
||||
blending: THREE.AdditiveBlending,
|
||||
depthWrite: false,
|
||||
});
|
||||
|
||||
const points = new THREE.Points(geo, mat);
|
||||
ctx.scene.add(points);
|
||||
|
||||
const key = { x: 0, y: 0 };
|
||||
const onMove = (e: PointerEvent) => {
|
||||
const rect = ctx.container.getBoundingClientRect();
|
||||
key.x = ((e.clientX - rect.left) / rect.width - 0.5) * 2;
|
||||
key.y = ((e.clientY - rect.top) / rect.height - 0.5) * 2;
|
||||
};
|
||||
ctx.container.addEventListener("pointermove", onMove);
|
||||
|
||||
(ctx as any)._key = key;
|
||||
(ctx as any)._points = points;
|
||||
(ctx as any)._phases = phases;
|
||||
|
||||
return () => {
|
||||
ctx.container.removeEventListener("pointermove", onMove);
|
||||
};
|
||||
},
|
||||
onFrame: (ctx, t) => {
|
||||
const points = (ctx as any)._points as THREE.Points;
|
||||
const key = (ctx as any)._key as { x: number; y: number };
|
||||
const phases = (ctx as any)._phases as Float32Array;
|
||||
const act = activityRef.current;
|
||||
const pulse = 1 + Math.sin(t * (1.2 + act * 2.2)) * 0.08 * (0.5 + act);
|
||||
points.scale.setScalar(pulse);
|
||||
points.rotation.y = t * (0.05 + act * 0.12);
|
||||
points.rotation.x = Math.sin(t * 0.2) * 0.1;
|
||||
// parallax
|
||||
ctx.camera.position.x += (key.x * 1.4 - ctx.camera.position.x) * 0.04;
|
||||
ctx.camera.position.y += (-key.y * 1.0 - ctx.camera.position.y) * 0.04;
|
||||
ctx.camera.lookAt(0, 0, 0);
|
||||
},
|
||||
});
|
||||
|
||||
return <div ref={ref} className={className} aria-hidden />;
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
"use client";
|
||||
|
||||
export interface StaticFallbackProps {
|
||||
variant?: "signal" | "orb";
|
||||
count?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* 2D SVG silhouette used when WebGL is unavailable — so the hero still reads
|
||||
* as a living visual, never blank. `variant="signal"` = drifting dot grid;
|
||||
* `variant="orb"` = speaker orbs.
|
||||
*/
|
||||
export function StaticFallback({
|
||||
variant = "signal",
|
||||
count = 60,
|
||||
className,
|
||||
}: StaticFallbackProps) {
|
||||
if (variant === "orb") {
|
||||
const orbs = Array.from({ length: count > 12 ? 12 : count }, (_, i) => {
|
||||
const angle = (i / 12) * Math.PI * 2;
|
||||
const r = 60;
|
||||
return {
|
||||
x: 100 + Math.cos(angle) * r,
|
||||
y: 100 + Math.sin(angle) * r,
|
||||
d: i * 0.3,
|
||||
};
|
||||
});
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 200 200"
|
||||
className={className}
|
||||
aria-hidden
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
>
|
||||
<rect width="200" height="200" fill="oklch(0.18 0.02 70)" />
|
||||
{orbs.map((o, i) => (
|
||||
<g
|
||||
key={i}
|
||||
style={{ animation: `fade-up 1.2s ${o.d}s infinite alternate` }}
|
||||
>
|
||||
<circle
|
||||
cx={o.x}
|
||||
cy={o.y}
|
||||
r={12}
|
||||
fill="oklch(0.82 0.18 125 / 0.5)"
|
||||
/>
|
||||
<circle
|
||||
cx={o.x}
|
||||
cy={o.y}
|
||||
r={20}
|
||||
fill="none"
|
||||
stroke="oklch(0.82 0.18 125 / 0.3)"
|
||||
strokeWidth={1}
|
||||
/>
|
||||
</g>
|
||||
))}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
const dots = Array.from({ length: count }, (_, i) => ({
|
||||
x: (i * 53) % 200,
|
||||
y: (i * 89) % 200,
|
||||
r: 1.5 + ((i * 7) % 3),
|
||||
}));
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 200 200"
|
||||
className={className}
|
||||
aria-hidden
|
||||
preserveAspectRatio="xMidYMid slice"
|
||||
>
|
||||
<rect width="200" height="200" fill="oklch(0.18 0.02 70)" />
|
||||
{dots.map((d, i) => (
|
||||
<circle
|
||||
key={i}
|
||||
cx={d.x}
|
||||
cy={d.y}
|
||||
r={d.r}
|
||||
fill="oklch(0.82 0.18 125 / 0.4)"
|
||||
>
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
values="0.2;0.8;0.2"
|
||||
dur="3s"
|
||||
begin={`${i * 0.05}s`}
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
))}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import * as THREE from "three";
|
||||
|
||||
export interface ThreeSceneOptions {
|
||||
/** Called once after renderer/scene/camera are created. */
|
||||
setup: (ctx: ThreeSceneCtx) => (() => void) | void;
|
||||
/** Optional per-frame callback. */
|
||||
onFrame?: (ctx: ThreeSceneCtx, t: number) => void;
|
||||
background?: string;
|
||||
}
|
||||
|
||||
export interface ThreeSceneCtx {
|
||||
renderer: THREE.WebGLRenderer;
|
||||
scene: THREE.Scene;
|
||||
camera: THREE.PerspectiveCamera;
|
||||
container: HTMLDivElement;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Shared Three.js lifecycle hook:
|
||||
* - capped DPR [1, 1.75], high-performance hint
|
||||
* - RAF loop paused when tab hidden
|
||||
* - resize observer
|
||||
* - full geometry/material/renderer dispose on unmount
|
||||
*
|
||||
* `setup` may return a cleanup fn (e.g. to remove its own listeners).
|
||||
*/
|
||||
export function useThreeScene(
|
||||
containerRef: React.RefObject<HTMLDivElement | null>,
|
||||
opts: ThreeSceneOptions,
|
||||
) {
|
||||
const optsRef = useRef(opts);
|
||||
optsRef.current = opts;
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container) return;
|
||||
|
||||
let disposed = false;
|
||||
let cleanup: (() => void) | void;
|
||||
let raf = 0;
|
||||
let ctx: ThreeSceneCtx;
|
||||
|
||||
const init = () => {
|
||||
const width = container.clientWidth || 1;
|
||||
const height = container.clientHeight || 1;
|
||||
|
||||
const renderer = new THREE.WebGLRenderer({
|
||||
antialias: true,
|
||||
alpha: true,
|
||||
powerPreference: "high-performance",
|
||||
});
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.75));
|
||||
renderer.setSize(width, height);
|
||||
container.appendChild(renderer.domElement);
|
||||
renderer.domElement.style.display = "block";
|
||||
renderer.domElement.style.width = "100%";
|
||||
renderer.domElement.style.height = "100%";
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
if (optsRef.current.background) {
|
||||
scene.background = new THREE.Color(optsRef.current.background);
|
||||
}
|
||||
scene.fog = new THREE.FogExp2(0x000000, 0.06);
|
||||
|
||||
const camera = new THREE.PerspectiveCamera(55, width / height, 0.1, 100);
|
||||
camera.position.set(0, 0, 6);
|
||||
|
||||
ctx = { renderer, scene, camera, container, width, height };
|
||||
const c = optsRef.current.setup(ctx);
|
||||
if (typeof c === "function") cleanup = c;
|
||||
|
||||
const start = performance.now();
|
||||
const loop = () => {
|
||||
if (disposed || document.hidden) {
|
||||
raf = requestAnimationFrame(loop);
|
||||
return;
|
||||
}
|
||||
const t = (performance.now() - start) / 1000;
|
||||
optsRef.current.onFrame?.(ctx, t);
|
||||
renderer.render(scene, camera);
|
||||
raf = requestAnimationFrame(loop);
|
||||
};
|
||||
raf = requestAnimationFrame(loop);
|
||||
|
||||
const ro = new ResizeObserver(() => {
|
||||
const w = container.clientWidth || 1;
|
||||
const h = container.clientHeight || 1;
|
||||
ctx.width = w;
|
||||
ctx.height = h;
|
||||
renderer.setSize(w, h);
|
||||
camera.aspect = w / h;
|
||||
camera.updateProjectionMatrix();
|
||||
});
|
||||
ro.observe(container);
|
||||
|
||||
const onVis = () => {
|
||||
/* loop checks document.hidden */
|
||||
};
|
||||
document.addEventListener("visibilitychange", onVis);
|
||||
|
||||
(ctx as any)._ro = ro;
|
||||
(ctx as any)._onVis = onVis;
|
||||
};
|
||||
|
||||
init();
|
||||
|
||||
return () => {
|
||||
disposed = true;
|
||||
cancelAnimationFrame(raf);
|
||||
if (typeof cleanup === "function") cleanup();
|
||||
const c = ctx as any;
|
||||
if (c?._ro) c._ro.disconnect();
|
||||
if (c?._onVis) document.removeEventListener("visibilitychange", c._onVis);
|
||||
if (ctx) {
|
||||
ctx.scene.traverse((obj) => {
|
||||
const mesh = obj as THREE.Mesh;
|
||||
if (mesh.geometry) mesh.geometry.dispose?.();
|
||||
const mat = mesh.material as
|
||||
| THREE.Material
|
||||
| THREE.Material[]
|
||||
| undefined;
|
||||
if (Array.isArray(mat)) mat.forEach((m) => m.dispose());
|
||||
else mat?.dispose?.();
|
||||
});
|
||||
ctx.renderer.dispose();
|
||||
if (ctx.renderer.domElement.parentNode === container) {
|
||||
container.removeChild(ctx.renderer.domElement);
|
||||
}
|
||||
}
|
||||
};
|
||||
}, [containerRef]);
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import { type ReactNode, useEffect, useRef } from "react";
|
||||
|
||||
export interface WebGLGuardProps {
|
||||
children: ReactNode;
|
||||
fallback: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Detects WebGL support. If unavailable (old device / privacy browser /
|
||||
* headless without GPU), renders `fallback` instead of the 3D scene so the
|
||||
* page is never blank.
|
||||
*/
|
||||
export function WebGLGuard({ children, fallback }: WebGLGuardProps) {
|
||||
const supported = useRef<boolean | null>(null);
|
||||
|
||||
if (supported.current === null) {
|
||||
if (typeof window === "undefined") {
|
||||
supported.current = false;
|
||||
} else {
|
||||
try {
|
||||
const canvas = document.createElement("canvas");
|
||||
supported.current = !!(
|
||||
window.WebGLRenderingContext &&
|
||||
(canvas.getContext("webgl2") || canvas.getContext("webgl"))
|
||||
);
|
||||
} catch {
|
||||
supported.current = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return <>{supported.current ? children : fallback}</>;
|
||||
}
|
||||
@@ -1,72 +0,0 @@
|
||||
import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
|
||||
|
||||
function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
|
||||
return (
|
||||
<AccordionPrimitive.Root
|
||||
data-slot="accordion"
|
||||
className={cn("flex w-full flex-col", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
|
||||
return (
|
||||
<AccordionPrimitive.Item
|
||||
data-slot="accordion-item"
|
||||
className={cn("not-last:border-b", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AccordionTrigger({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: AccordionPrimitive.Trigger.Props) {
|
||||
return (
|
||||
<AccordionPrimitive.Header className="flex">
|
||||
<AccordionPrimitive.Trigger
|
||||
data-slot="accordion-trigger"
|
||||
className={cn(
|
||||
"group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
|
||||
<ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
)
|
||||
}
|
||||
|
||||
function AccordionContent({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: AccordionPrimitive.Panel.Props) {
|
||||
return (
|
||||
<AccordionPrimitive.Panel
|
||||
data-slot="accordion-content"
|
||||
className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</AccordionPrimitive.Panel>
|
||||
)
|
||||
}
|
||||
|
||||
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
|
||||
@@ -1,187 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
|
||||
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
|
||||
}
|
||||
|
||||
function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: AlertDialogPrimitive.Backdrop.Props) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Backdrop
|
||||
data-slot="alert-dialog-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogContent({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: AlertDialogPrimitive.Popup.Props & {
|
||||
size?: "default" | "sm"
|
||||
}) {
|
||||
return (
|
||||
<AlertDialogPortal>
|
||||
<AlertDialogOverlay />
|
||||
<AlertDialogPrimitive.Popup
|
||||
data-slot="alert-dialog-content"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</AlertDialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogHeader({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-header"
|
||||
className={cn(
|
||||
"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogFooter({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-footer"
|
||||
className={cn(
|
||||
"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogMedia({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-dialog-media"
|
||||
className={cn(
|
||||
"mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogTitle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Title
|
||||
data-slot="alert-dialog-title"
|
||||
className={cn(
|
||||
"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Description
|
||||
data-slot="alert-dialog-description"
|
||||
className={cn(
|
||||
"text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogAction({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Button>) {
|
||||
return (
|
||||
<Button
|
||||
data-slot="alert-dialog-action"
|
||||
className={cn(className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDialogCancel({
|
||||
className,
|
||||
variant = "outline",
|
||||
size = "default",
|
||||
...props
|
||||
}: AlertDialogPrimitive.Close.Props &
|
||||
Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
|
||||
return (
|
||||
<AlertDialogPrimitive.Close
|
||||
data-slot="alert-dialog-cancel"
|
||||
className={cn(className)}
|
||||
render={<Button variant={variant} size={size} />}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogMedia,
|
||||
AlertDialogOverlay,
|
||||
AlertDialogPortal,
|
||||
AlertDialogTitle,
|
||||
AlertDialogTrigger,
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const alertVariants = cva(
|
||||
"group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-card text-card-foreground",
|
||||
destructive:
|
||||
"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Alert({
|
||||
className,
|
||||
variant,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert"
|
||||
role="alert"
|
||||
className={cn(alertVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-title"
|
||||
className={cn(
|
||||
"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertDescription({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-description"
|
||||
className={cn(
|
||||
"text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="alert-action"
|
||||
className={cn("absolute top-2 right-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Alert, AlertTitle, AlertDescription, AlertAction }
|
||||
@@ -1,22 +0,0 @@
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function AspectRatio({
|
||||
ratio,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & { ratio: number }) {
|
||||
return (
|
||||
<div
|
||||
data-slot="aspect-ratio"
|
||||
style={
|
||||
{
|
||||
"--ratio": ratio,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
className={cn("relative aspect-(--ratio)", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { AspectRatio }
|
||||
@@ -1,109 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Avatar({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: AvatarPrimitive.Root.Props & {
|
||||
size?: "default" | "sm" | "lg"
|
||||
}) {
|
||||
return (
|
||||
<AvatarPrimitive.Root
|
||||
data-slot="avatar"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
|
||||
return (
|
||||
<AvatarPrimitive.Image
|
||||
data-slot="avatar-image"
|
||||
className={cn(
|
||||
"aspect-square size-full rounded-full object-cover",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarFallback({
|
||||
className,
|
||||
...props
|
||||
}: AvatarPrimitive.Fallback.Props) {
|
||||
return (
|
||||
<AvatarPrimitive.Fallback
|
||||
data-slot="avatar-fallback"
|
||||
className={cn(
|
||||
"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="avatar-badge"
|
||||
className={cn(
|
||||
"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
|
||||
"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
|
||||
"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
|
||||
"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="avatar-group"
|
||||
className={cn(
|
||||
"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AvatarGroupCount({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="avatar-group-count"
|
||||
className={cn(
|
||||
"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Avatar,
|
||||
AvatarImage,
|
||||
AvatarFallback,
|
||||
AvatarGroup,
|
||||
AvatarGroupCount,
|
||||
AvatarBadge,
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import { mergeProps } from "@base-ui/react/merge-props"
|
||||
import { useRender } from "@base-ui/react/use-render"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const badgeVariants = cva(
|
||||
"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
|
||||
outline:
|
||||
"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Badge({
|
||||
className,
|
||||
variant = "default",
|
||||
render,
|
||||
...props
|
||||
}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
|
||||
return useRender({
|
||||
defaultTagName: "span",
|
||||
props: mergeProps<"span">(
|
||||
{
|
||||
className: cn(badgeVariants({ variant }), className),
|
||||
},
|
||||
props
|
||||
),
|
||||
render,
|
||||
state: {
|
||||
slot: "badge",
|
||||
variant,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
export { Badge, badgeVariants }
|
||||
@@ -1,125 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { mergeProps } from "@base-ui/react/merge-props"
|
||||
import { useRender } from "@base-ui/react/use-render"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
|
||||
|
||||
function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
|
||||
return (
|
||||
<nav
|
||||
aria-label="breadcrumb"
|
||||
data-slot="breadcrumb"
|
||||
className={cn(className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
|
||||
return (
|
||||
<ol
|
||||
data-slot="breadcrumb-list"
|
||||
className={cn(
|
||||
"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
|
||||
return (
|
||||
<li
|
||||
data-slot="breadcrumb-item"
|
||||
className={cn("inline-flex items-center gap-1", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function BreadcrumbLink({
|
||||
className,
|
||||
render,
|
||||
...props
|
||||
}: useRender.ComponentProps<"a">) {
|
||||
return useRender({
|
||||
defaultTagName: "a",
|
||||
props: mergeProps<"a">(
|
||||
{
|
||||
className: cn("transition-colors hover:text-foreground", className),
|
||||
},
|
||||
props
|
||||
),
|
||||
render,
|
||||
state: {
|
||||
slot: "breadcrumb-link",
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="breadcrumb-page"
|
||||
role="link"
|
||||
aria-disabled="true"
|
||||
aria-current="page"
|
||||
className={cn("font-normal text-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function BreadcrumbSeparator({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"li">) {
|
||||
return (
|
||||
<li
|
||||
data-slot="breadcrumb-separator"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
className={cn("[&>svg]:size-3.5", className)}
|
||||
{...props}
|
||||
>
|
||||
{children ?? (
|
||||
<ChevronRightIcon />
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
function BreadcrumbEllipsis({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="breadcrumb-ellipsis"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
className={cn(
|
||||
"flex size-5 items-center justify-center [&>svg]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<MoreHorizontalIcon
|
||||
/>
|
||||
<span className="sr-only">More</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Breadcrumb,
|
||||
BreadcrumbList,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
BreadcrumbEllipsis,
|
||||
}
|
||||
@@ -1,58 +0,0 @@
|
||||
import { Button as ButtonPrimitive } from "@base-ui/react/button"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/80",
|
||||
outline:
|
||||
"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
|
||||
ghost:
|
||||
"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
|
||||
destructive:
|
||||
"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default:
|
||||
"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||
sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
|
||||
lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
|
||||
icon: "size-8",
|
||||
"icon-xs":
|
||||
"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
|
||||
"icon-sm":
|
||||
"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
|
||||
"icon-lg": "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant = "default",
|
||||
size = "default",
|
||||
...props
|
||||
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
|
||||
return (
|
||||
<ButtonPrimitive
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
@@ -1,221 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import {
|
||||
DayPicker,
|
||||
getDefaultClassNames,
|
||||
type DayButton,
|
||||
type Locale,
|
||||
} from "react-day-picker"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button, buttonVariants } from "@/components/ui/button"
|
||||
import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react"
|
||||
|
||||
function Calendar({
|
||||
className,
|
||||
classNames,
|
||||
showOutsideDays = true,
|
||||
captionLayout = "label",
|
||||
buttonVariant = "ghost",
|
||||
locale,
|
||||
formatters,
|
||||
components,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DayPicker> & {
|
||||
buttonVariant?: React.ComponentProps<typeof Button>["variant"]
|
||||
}) {
|
||||
const defaultClassNames = getDefaultClassNames()
|
||||
|
||||
return (
|
||||
<DayPicker
|
||||
showOutsideDays={showOutsideDays}
|
||||
className={cn(
|
||||
"group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
|
||||
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
|
||||
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
|
||||
className
|
||||
)}
|
||||
captionLayout={captionLayout}
|
||||
locale={locale}
|
||||
formatters={{
|
||||
formatMonthDropdown: (date) =>
|
||||
date.toLocaleString(locale?.code, { month: "short" }),
|
||||
...formatters,
|
||||
}}
|
||||
classNames={{
|
||||
root: cn("w-fit", defaultClassNames.root),
|
||||
months: cn(
|
||||
"relative flex flex-col gap-4 md:flex-row",
|
||||
defaultClassNames.months
|
||||
),
|
||||
month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
|
||||
nav: cn(
|
||||
"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
|
||||
defaultClassNames.nav
|
||||
),
|
||||
button_previous: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
"size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
|
||||
defaultClassNames.button_previous
|
||||
),
|
||||
button_next: cn(
|
||||
buttonVariants({ variant: buttonVariant }),
|
||||
"size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
|
||||
defaultClassNames.button_next
|
||||
),
|
||||
month_caption: cn(
|
||||
"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
|
||||
defaultClassNames.month_caption
|
||||
),
|
||||
dropdowns: cn(
|
||||
"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
|
||||
defaultClassNames.dropdowns
|
||||
),
|
||||
dropdown_root: cn(
|
||||
"relative rounded-(--cell-radius)",
|
||||
defaultClassNames.dropdown_root
|
||||
),
|
||||
dropdown: cn(
|
||||
"absolute inset-0 bg-popover opacity-0",
|
||||
defaultClassNames.dropdown
|
||||
),
|
||||
caption_label: cn(
|
||||
"font-medium select-none",
|
||||
captionLayout === "label"
|
||||
? "text-sm"
|
||||
: "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
|
||||
defaultClassNames.caption_label
|
||||
),
|
||||
month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
|
||||
weekdays: cn("flex", defaultClassNames.weekdays),
|
||||
weekday: cn(
|
||||
"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
|
||||
defaultClassNames.weekday
|
||||
),
|
||||
week: cn("mt-2 flex w-full", defaultClassNames.week),
|
||||
week_number_header: cn(
|
||||
"w-(--cell-size) select-none",
|
||||
defaultClassNames.week_number_header
|
||||
),
|
||||
week_number: cn(
|
||||
"text-[0.8rem] text-muted-foreground select-none",
|
||||
defaultClassNames.week_number
|
||||
),
|
||||
day: cn(
|
||||
"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
|
||||
props.showWeekNumber
|
||||
? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
|
||||
: "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
|
||||
defaultClassNames.day
|
||||
),
|
||||
range_start: cn(
|
||||
"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
|
||||
defaultClassNames.range_start
|
||||
),
|
||||
range_middle: cn("rounded-none", defaultClassNames.range_middle),
|
||||
range_end: cn(
|
||||
"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
|
||||
defaultClassNames.range_end
|
||||
),
|
||||
today: cn(
|
||||
"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
|
||||
defaultClassNames.today
|
||||
),
|
||||
outside: cn(
|
||||
"text-muted-foreground aria-selected:text-muted-foreground",
|
||||
defaultClassNames.outside
|
||||
),
|
||||
disabled: cn(
|
||||
"text-muted-foreground opacity-50",
|
||||
defaultClassNames.disabled
|
||||
),
|
||||
hidden: cn("invisible", defaultClassNames.hidden),
|
||||
...classNames,
|
||||
}}
|
||||
components={{
|
||||
Root: ({ className, rootRef, ...props }) => {
|
||||
return (
|
||||
<div
|
||||
data-slot="calendar"
|
||||
ref={rootRef}
|
||||
className={cn(className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
},
|
||||
Chevron: ({ className, orientation, ...props }) => {
|
||||
if (orientation === "left") {
|
||||
return (
|
||||
<ChevronLeftIcon className={cn("size-4", className)} {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
if (orientation === "right") {
|
||||
return (
|
||||
<ChevronRightIcon className={cn("size-4", className)} {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<ChevronDownIcon className={cn("size-4", className)} {...props} />
|
||||
)
|
||||
},
|
||||
DayButton: ({ ...props }) => (
|
||||
<CalendarDayButton locale={locale} {...props} />
|
||||
),
|
||||
WeekNumber: ({ children, ...props }) => {
|
||||
return (
|
||||
<td {...props}>
|
||||
<div className="flex size-(--cell-size) items-center justify-center text-center">
|
||||
{children}
|
||||
</div>
|
||||
</td>
|
||||
)
|
||||
},
|
||||
...components,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CalendarDayButton({
|
||||
className,
|
||||
day,
|
||||
modifiers,
|
||||
locale,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {
|
||||
const defaultClassNames = getDefaultClassNames()
|
||||
|
||||
const ref = React.useRef<HTMLButtonElement>(null)
|
||||
React.useEffect(() => {
|
||||
if (modifiers.focused) ref.current?.focus()
|
||||
}, [modifiers.focused])
|
||||
|
||||
return (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
data-day={day.date.toLocaleDateString(locale?.code)}
|
||||
data-selected-single={
|
||||
modifiers.selected &&
|
||||
!modifiers.range_start &&
|
||||
!modifiers.range_end &&
|
||||
!modifiers.range_middle
|
||||
}
|
||||
data-range-start={modifiers.range_start}
|
||||
data-range-end={modifiers.range_end}
|
||||
data-range-middle={modifiers.range_middle}
|
||||
className={cn(
|
||||
"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
|
||||
defaultClassNames.day,
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Calendar, CalendarDayButton }
|
||||
@@ -1,103 +0,0 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Card({
|
||||
className,
|
||||
size = "default",
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground ring-1 ring-foreground/10 [--card-spacing:--spacing(4)] has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-header"
|
||||
className={cn(
|
||||
"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-title"
|
||||
className={cn(
|
||||
"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-description"
|
||||
className={cn("text-sm text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-action"
|
||||
className={cn(
|
||||
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-content"
|
||||
className={cn("px-(--card-spacing)", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="card-footer"
|
||||
className={cn(
|
||||
"flex items-center rounded-b-xl border-t bg-muted/50 p-(--card-spacing)",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardFooter,
|
||||
CardTitle,
|
||||
CardAction,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
}
|
||||
@@ -1,242 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import useEmblaCarousel, {
|
||||
type UseEmblaCarouselType,
|
||||
} from "embla-carousel-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
|
||||
|
||||
type CarouselApi = UseEmblaCarouselType[1]
|
||||
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
|
||||
type CarouselOptions = UseCarouselParameters[0]
|
||||
type CarouselPlugin = UseCarouselParameters[1]
|
||||
|
||||
type CarouselProps = {
|
||||
opts?: CarouselOptions
|
||||
plugins?: CarouselPlugin
|
||||
orientation?: "horizontal" | "vertical"
|
||||
setApi?: (api: CarouselApi) => void
|
||||
}
|
||||
|
||||
type CarouselContextProps = {
|
||||
carouselRef: ReturnType<typeof useEmblaCarousel>[0]
|
||||
api: ReturnType<typeof useEmblaCarousel>[1]
|
||||
scrollPrev: () => void
|
||||
scrollNext: () => void
|
||||
canScrollPrev: boolean
|
||||
canScrollNext: boolean
|
||||
} & CarouselProps
|
||||
|
||||
const CarouselContext = React.createContext<CarouselContextProps | null>(null)
|
||||
|
||||
function useCarousel() {
|
||||
const context = React.useContext(CarouselContext)
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useCarousel must be used within a <Carousel />")
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
function Carousel({
|
||||
orientation = "horizontal",
|
||||
opts,
|
||||
setApi,
|
||||
plugins,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & CarouselProps) {
|
||||
const [carouselRef, api] = useEmblaCarousel(
|
||||
{
|
||||
...opts,
|
||||
axis: orientation === "horizontal" ? "x" : "y",
|
||||
},
|
||||
plugins
|
||||
)
|
||||
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
|
||||
const [canScrollNext, setCanScrollNext] = React.useState(false)
|
||||
|
||||
const onSelect = React.useCallback((api: CarouselApi) => {
|
||||
if (!api) return
|
||||
setCanScrollPrev(api.canScrollPrev())
|
||||
setCanScrollNext(api.canScrollNext())
|
||||
}, [])
|
||||
|
||||
const scrollPrev = React.useCallback(() => {
|
||||
api?.scrollPrev()
|
||||
}, [api])
|
||||
|
||||
const scrollNext = React.useCallback(() => {
|
||||
api?.scrollNext()
|
||||
}, [api])
|
||||
|
||||
const handleKeyDown = React.useCallback(
|
||||
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (event.key === "ArrowLeft") {
|
||||
event.preventDefault()
|
||||
scrollPrev()
|
||||
} else if (event.key === "ArrowRight") {
|
||||
event.preventDefault()
|
||||
scrollNext()
|
||||
}
|
||||
},
|
||||
[scrollPrev, scrollNext]
|
||||
)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api || !setApi) return
|
||||
setApi(api)
|
||||
}, [api, setApi])
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api) return
|
||||
onSelect(api)
|
||||
api.on("reInit", onSelect)
|
||||
api.on("select", onSelect)
|
||||
|
||||
return () => {
|
||||
api?.off("select", onSelect)
|
||||
}
|
||||
}, [api, onSelect])
|
||||
|
||||
return (
|
||||
<CarouselContext.Provider
|
||||
value={{
|
||||
carouselRef,
|
||||
api: api,
|
||||
opts,
|
||||
orientation:
|
||||
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
||||
scrollPrev,
|
||||
scrollNext,
|
||||
canScrollPrev,
|
||||
canScrollNext,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
onKeyDownCapture={handleKeyDown}
|
||||
className={cn("relative", className)}
|
||||
role="region"
|
||||
aria-roledescription="carousel"
|
||||
data-slot="carousel"
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</CarouselContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||
const { carouselRef, orientation } = useCarousel()
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={carouselRef}
|
||||
className="overflow-hidden"
|
||||
data-slot="carousel-content"
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex",
|
||||
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
|
||||
const { orientation } = useCarousel()
|
||||
|
||||
return (
|
||||
<div
|
||||
role="group"
|
||||
aria-roledescription="slide"
|
||||
data-slot="carousel-item"
|
||||
className={cn(
|
||||
"min-w-0 shrink-0 grow-0 basis-full",
|
||||
orientation === "horizontal" ? "pl-4" : "pt-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CarouselPrevious({
|
||||
className,
|
||||
variant = "outline",
|
||||
size = "icon-sm",
|
||||
...props
|
||||
}: React.ComponentProps<typeof Button>) {
|
||||
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-slot="carousel-previous"
|
||||
variant={variant}
|
||||
size={size}
|
||||
className={cn(
|
||||
"absolute touch-manipulation rounded-full",
|
||||
orientation === "horizontal"
|
||||
? "inset-y-0 -left-12 my-auto"
|
||||
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||
className
|
||||
)}
|
||||
disabled={!canScrollPrev}
|
||||
onClick={scrollPrev}
|
||||
{...props}
|
||||
>
|
||||
<ChevronLeftIcon />
|
||||
<span className="sr-only">Previous slide</span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
function CarouselNext({
|
||||
className,
|
||||
variant = "outline",
|
||||
size = "icon-sm",
|
||||
...props
|
||||
}: React.ComponentProps<typeof Button>) {
|
||||
const { orientation, scrollNext, canScrollNext } = useCarousel()
|
||||
|
||||
return (
|
||||
<Button
|
||||
data-slot="carousel-next"
|
||||
variant={variant}
|
||||
size={size}
|
||||
className={cn(
|
||||
"absolute touch-manipulation rounded-full",
|
||||
orientation === "horizontal"
|
||||
? "inset-y-0 -right-12 my-auto"
|
||||
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
|
||||
className
|
||||
)}
|
||||
disabled={!canScrollNext}
|
||||
onClick={scrollNext}
|
||||
{...props}
|
||||
>
|
||||
<ChevronRightIcon />
|
||||
<span className="sr-only">Next slide</span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
type CarouselApi,
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselPrevious,
|
||||
CarouselNext,
|
||||
useCarousel,
|
||||
}
|
||||
@@ -1,373 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as RechartsPrimitive from "recharts"
|
||||
import type { TooltipValueType } from "recharts"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
// Format: { THEME_NAME: CSS_SELECTOR }
|
||||
const THEMES = { light: "", dark: ".dark" } as const
|
||||
|
||||
const INITIAL_DIMENSION = { width: 320, height: 200 } as const
|
||||
type TooltipNameType = number | string
|
||||
|
||||
export type ChartConfig = Record<
|
||||
string,
|
||||
{
|
||||
label?: React.ReactNode
|
||||
icon?: React.ComponentType
|
||||
} & (
|
||||
| { color?: string; theme?: never }
|
||||
| { color?: never; theme: Record<keyof typeof THEMES, string> }
|
||||
)
|
||||
>
|
||||
|
||||
type ChartContextProps = {
|
||||
config: ChartConfig
|
||||
}
|
||||
|
||||
const ChartContext = React.createContext<ChartContextProps | null>(null)
|
||||
|
||||
function useChart() {
|
||||
const context = React.useContext(ChartContext)
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useChart must be used within a <ChartContainer />")
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
function ChartContainer({
|
||||
id,
|
||||
className,
|
||||
children,
|
||||
config,
|
||||
initialDimension = INITIAL_DIMENSION,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
config: ChartConfig
|
||||
children: React.ComponentProps<
|
||||
typeof RechartsPrimitive.ResponsiveContainer
|
||||
>["children"]
|
||||
initialDimension?: {
|
||||
width: number
|
||||
height: number
|
||||
}
|
||||
}) {
|
||||
const uniqueId = React.useId()
|
||||
const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`
|
||||
|
||||
return (
|
||||
<ChartContext.Provider value={{ config }}>
|
||||
<div
|
||||
data-slot="chart"
|
||||
data-chart={chartId}
|
||||
className={cn(
|
||||
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<ChartStyle id={chartId} config={config} />
|
||||
<RechartsPrimitive.ResponsiveContainer
|
||||
initialDimension={initialDimension}
|
||||
>
|
||||
{children}
|
||||
</RechartsPrimitive.ResponsiveContainer>
|
||||
</div>
|
||||
</ChartContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
|
||||
const colorConfig = Object.entries(config).filter(
|
||||
([, config]) => config.theme ?? config.color
|
||||
)
|
||||
|
||||
if (!colorConfig.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<style
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: Object.entries(THEMES)
|
||||
.map(
|
||||
([theme, prefix]) => `
|
||||
${prefix} [data-chart=${id}] {
|
||||
${colorConfig
|
||||
.map(([key, itemConfig]) => {
|
||||
const color =
|
||||
itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
|
||||
itemConfig.color
|
||||
return color ? ` --color-${key}: ${color};` : null
|
||||
})
|
||||
.join("\n")}
|
||||
}
|
||||
`
|
||||
)
|
||||
.join("\n"),
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const ChartTooltip = RechartsPrimitive.Tooltip
|
||||
|
||||
function ChartTooltipContent({
|
||||
active,
|
||||
payload,
|
||||
className,
|
||||
indicator = "dot",
|
||||
hideLabel = false,
|
||||
hideIndicator = false,
|
||||
label,
|
||||
labelFormatter,
|
||||
labelClassName,
|
||||
formatter,
|
||||
color,
|
||||
nameKey,
|
||||
labelKey,
|
||||
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
|
||||
React.ComponentProps<"div"> & {
|
||||
hideLabel?: boolean
|
||||
hideIndicator?: boolean
|
||||
indicator?: "line" | "dot" | "dashed"
|
||||
nameKey?: string
|
||||
labelKey?: string
|
||||
} & Omit<
|
||||
RechartsPrimitive.DefaultTooltipContentProps<
|
||||
TooltipValueType,
|
||||
TooltipNameType
|
||||
>,
|
||||
"accessibilityLayer"
|
||||
>) {
|
||||
const { config } = useChart()
|
||||
|
||||
const tooltipLabel = React.useMemo(() => {
|
||||
if (hideLabel || !payload?.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
const [item] = payload
|
||||
const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key)
|
||||
const value =
|
||||
!labelKey && typeof label === "string"
|
||||
? (config[label]?.label ?? label)
|
||||
: itemConfig?.label
|
||||
|
||||
if (labelFormatter) {
|
||||
return (
|
||||
<div className={cn("font-medium", labelClassName)}>
|
||||
{labelFormatter(value, payload)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
return null
|
||||
}
|
||||
|
||||
return <div className={cn("font-medium", labelClassName)}>{value}</div>
|
||||
}, [
|
||||
label,
|
||||
labelFormatter,
|
||||
payload,
|
||||
hideLabel,
|
||||
labelClassName,
|
||||
config,
|
||||
labelKey,
|
||||
])
|
||||
|
||||
if (!active || !payload?.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
const nestLabel = payload.length === 1 && indicator !== "dot"
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{!nestLabel ? tooltipLabel : null}
|
||||
<div className="grid gap-1.5">
|
||||
{payload
|
||||
.filter((item) => item.type !== "none")
|
||||
.map((item, index) => {
|
||||
const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key)
|
||||
const indicatorColor = color ?? item.payload?.fill ?? item.color
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={cn(
|
||||
"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
|
||||
indicator === "dot" && "items-center"
|
||||
)}
|
||||
>
|
||||
{formatter && item?.value !== undefined && item.name ? (
|
||||
formatter(item.value, item.name, item, index, item.payload)
|
||||
) : (
|
||||
<>
|
||||
{itemConfig?.icon ? (
|
||||
<itemConfig.icon />
|
||||
) : (
|
||||
!hideIndicator && (
|
||||
<div
|
||||
className={cn(
|
||||
"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
|
||||
{
|
||||
"h-2.5 w-2.5": indicator === "dot",
|
||||
"w-1": indicator === "line",
|
||||
"w-0 border-[1.5px] border-dashed bg-transparent":
|
||||
indicator === "dashed",
|
||||
"my-0.5": nestLabel && indicator === "dashed",
|
||||
}
|
||||
)}
|
||||
style={
|
||||
{
|
||||
"--color-bg": indicatorColor,
|
||||
"--color-border": indicatorColor,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-1 justify-between leading-none",
|
||||
nestLabel ? "items-end" : "items-center"
|
||||
)}
|
||||
>
|
||||
<div className="grid gap-1.5">
|
||||
{nestLabel ? tooltipLabel : null}
|
||||
<span className="text-muted-foreground">
|
||||
{itemConfig?.label ?? item.name}
|
||||
</span>
|
||||
</div>
|
||||
{item.value != null && (
|
||||
<span className="font-mono font-medium text-foreground tabular-nums">
|
||||
{typeof item.value === "number"
|
||||
? item.value.toLocaleString()
|
||||
: String(item.value)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const ChartLegend = RechartsPrimitive.Legend
|
||||
|
||||
function ChartLegendContent({
|
||||
className,
|
||||
hideIcon = false,
|
||||
payload,
|
||||
verticalAlign = "bottom",
|
||||
nameKey,
|
||||
}: React.ComponentProps<"div"> & {
|
||||
hideIcon?: boolean
|
||||
nameKey?: string
|
||||
} & RechartsPrimitive.DefaultLegendContentProps) {
|
||||
const { config } = useChart()
|
||||
|
||||
if (!payload?.length) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center justify-center gap-4",
|
||||
verticalAlign === "top" ? "pb-3" : "pt-3",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{payload
|
||||
.filter((item) => item.type !== "none")
|
||||
.map((item, index) => {
|
||||
const key = `${nameKey ?? item.dataKey ?? "value"}`
|
||||
const itemConfig = getPayloadConfigFromPayload(config, item, key)
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={cn(
|
||||
"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{itemConfig?.icon && !hideIcon ? (
|
||||
<itemConfig.icon />
|
||||
) : (
|
||||
<div
|
||||
className="h-2 w-2 shrink-0 rounded-[2px]"
|
||||
style={{
|
||||
backgroundColor: item.color,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{itemConfig?.label}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function getPayloadConfigFromPayload(
|
||||
config: ChartConfig,
|
||||
payload: unknown,
|
||||
key: string
|
||||
) {
|
||||
if (typeof payload !== "object" || payload === null) {
|
||||
return undefined
|
||||
}
|
||||
|
||||
const payloadPayload =
|
||||
"payload" in payload &&
|
||||
typeof payload.payload === "object" &&
|
||||
payload.payload !== null
|
||||
? payload.payload
|
||||
: undefined
|
||||
|
||||
let configLabelKey: string = key
|
||||
|
||||
if (
|
||||
key in payload &&
|
||||
typeof payload[key as keyof typeof payload] === "string"
|
||||
) {
|
||||
configLabelKey = payload[key as keyof typeof payload] as string
|
||||
} else if (
|
||||
payloadPayload &&
|
||||
key in payloadPayload &&
|
||||
typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
|
||||
) {
|
||||
configLabelKey = payloadPayload[
|
||||
key as keyof typeof payloadPayload
|
||||
] as string
|
||||
}
|
||||
|
||||
return configLabelKey in config ? config[configLabelKey] : config[key]
|
||||
}
|
||||
|
||||
export {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent,
|
||||
ChartLegend,
|
||||
ChartLegendContent,
|
||||
ChartStyle,
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
|
||||
return (
|
||||
<CheckboxPrimitive.Root
|
||||
data-slot="checkbox"
|
||||
className={cn(
|
||||
"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator
|
||||
data-slot="checkbox-indicator"
|
||||
className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
|
||||
>
|
||||
<CheckIcon
|
||||
/>
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Checkbox }
|
||||
@@ -1,21 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"
|
||||
|
||||
function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
|
||||
return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
|
||||
}
|
||||
|
||||
function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
|
||||
return (
|
||||
<CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
|
||||
return (
|
||||
<CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
export { Collapsible, CollapsibleTrigger, CollapsibleContent }
|
||||
@@ -1,271 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ChevronRightIcon, CheckIcon } from "lucide-react"
|
||||
|
||||
function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
|
||||
return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
|
||||
}
|
||||
|
||||
function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuTrigger({
|
||||
className,
|
||||
...props
|
||||
}: ContextMenuPrimitive.Trigger.Props) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Trigger
|
||||
data-slot="context-menu-trigger"
|
||||
className={cn("select-none", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuContent({
|
||||
className,
|
||||
align = "start",
|
||||
alignOffset = 4,
|
||||
side = "right",
|
||||
sideOffset = 0,
|
||||
...props
|
||||
}: ContextMenuPrimitive.Popup.Props &
|
||||
Pick<
|
||||
ContextMenuPrimitive.Positioner.Props,
|
||||
"align" | "alignOffset" | "side" | "sideOffset"
|
||||
>) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Portal>
|
||||
<ContextMenuPrimitive.Positioner
|
||||
className="isolate z-50 outline-none"
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
>
|
||||
<ContextMenuPrimitive.Popup
|
||||
data-slot="context-menu-content"
|
||||
className={cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
||||
{...props}
|
||||
/>
|
||||
</ContextMenuPrimitive.Positioner>
|
||||
</ContextMenuPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: ContextMenuPrimitive.GroupLabel.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.GroupLabel
|
||||
data-slot="context-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: ContextMenuPrimitive.Item.Props & {
|
||||
inset?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Item
|
||||
data-slot="context-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {
|
||||
return (
|
||||
<ContextMenuPrimitive.SubmenuRoot data-slot="context-menu-sub" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: ContextMenuPrimitive.SubmenuTrigger.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.SubmenuTrigger
|
||||
data-slot="context-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto" />
|
||||
</ContextMenuPrimitive.SubmenuTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuSubContent({
|
||||
...props
|
||||
}: React.ComponentProps<typeof ContextMenuContent>) {
|
||||
return (
|
||||
<ContextMenuContent
|
||||
data-slot="context-menu-sub-content"
|
||||
className="shadow-lg"
|
||||
side="right"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
inset,
|
||||
...props
|
||||
}: ContextMenuPrimitive.CheckboxItem.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.CheckboxItem
|
||||
data-slot="context-menu-checkbox-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute right-2">
|
||||
<ContextMenuPrimitive.CheckboxItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</ContextMenuPrimitive.CheckboxItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</ContextMenuPrimitive.CheckboxItem>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuRadioGroup({
|
||||
...props
|
||||
}: ContextMenuPrimitive.RadioGroup.Props) {
|
||||
return (
|
||||
<ContextMenuPrimitive.RadioGroup
|
||||
data-slot="context-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
inset,
|
||||
...props
|
||||
}: ContextMenuPrimitive.RadioItem.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<ContextMenuPrimitive.RadioItem
|
||||
data-slot="context-menu-radio-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute right-2">
|
||||
<ContextMenuPrimitive.RadioItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</ContextMenuPrimitive.RadioItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</ContextMenuPrimitive.RadioItem>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: ContextMenuPrimitive.Separator.Props) {
|
||||
return (
|
||||
<ContextMenuPrimitive.Separator
|
||||
data-slot="context-menu-separator"
|
||||
className={cn("-mx-1 my-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function ContextMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="context-menu-shortcut"
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
ContextMenu,
|
||||
ContextMenuTrigger,
|
||||
ContextMenuContent,
|
||||
ContextMenuItem,
|
||||
ContextMenuCheckboxItem,
|
||||
ContextMenuRadioItem,
|
||||
ContextMenuLabel,
|
||||
ContextMenuSeparator,
|
||||
ContextMenuShortcut,
|
||||
ContextMenuGroup,
|
||||
ContextMenuPortal,
|
||||
ContextMenuSub,
|
||||
ContextMenuSubContent,
|
||||
ContextMenuSubTrigger,
|
||||
ContextMenuRadioGroup,
|
||||
}
|
||||
@@ -1,160 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { XIcon } from "lucide-react"
|
||||
|
||||
function Dialog({ ...props }: DialogPrimitive.Root.Props) {
|
||||
return <DialogPrimitive.Root data-slot="dialog" {...props} />
|
||||
}
|
||||
|
||||
function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
|
||||
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
|
||||
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
|
||||
}
|
||||
|
||||
function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
|
||||
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
|
||||
}
|
||||
|
||||
function DialogOverlay({
|
||||
className,
|
||||
...props
|
||||
}: DialogPrimitive.Backdrop.Props) {
|
||||
return (
|
||||
<DialogPrimitive.Backdrop
|
||||
data-slot="dialog-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogContent({
|
||||
className,
|
||||
children,
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: DialogPrimitive.Popup.Props & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DialogPortal>
|
||||
<DialogOverlay />
|
||||
<DialogPrimitive.Popup
|
||||
data-slot="dialog-content"
|
||||
className={cn(
|
||||
"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close
|
||||
data-slot="dialog-close"
|
||||
render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="absolute top-2 right-2"
|
||||
size="icon-sm"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<XIcon
|
||||
/>
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</DialogPrimitive.Popup>
|
||||
</DialogPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-header"
|
||||
className={cn("flex flex-col gap-2", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogFooter({
|
||||
className,
|
||||
showCloseButton = false,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
showCloseButton?: boolean
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
data-slot="dialog-footer"
|
||||
className={cn(
|
||||
"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
{showCloseButton && (
|
||||
<DialogPrimitive.Close render={<Button variant="outline" />}>
|
||||
Close
|
||||
</DialogPrimitive.Close>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
|
||||
return (
|
||||
<DialogPrimitive.Title
|
||||
data-slot="dialog-title"
|
||||
className={cn(
|
||||
"text-base leading-none font-medium",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DialogDescription({
|
||||
className,
|
||||
...props
|
||||
}: DialogPrimitive.Description.Props) {
|
||||
return (
|
||||
<DialogPrimitive.Description
|
||||
data-slot="dialog-description"
|
||||
className={cn(
|
||||
"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogOverlay,
|
||||
DialogPortal,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
}
|
||||
@@ -1,228 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
type DrawerContextProps = {
|
||||
hasSnapPoints: boolean
|
||||
modal: DrawerPrimitive.Root.Props["modal"]
|
||||
showSwipeHandle: boolean
|
||||
swipeDirection: NonNullable<DrawerPrimitive.Root.Props["swipeDirection"]>
|
||||
}
|
||||
|
||||
const DrawerContext = React.createContext<DrawerContextProps | null>(null)
|
||||
|
||||
function useDrawer() {
|
||||
const context = React.useContext(DrawerContext)
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useDrawer must be used within a Drawer.")
|
||||
}
|
||||
|
||||
return context
|
||||
}
|
||||
|
||||
function Drawer({
|
||||
modal = true,
|
||||
showSwipeHandle = false,
|
||||
snapPoints,
|
||||
swipeDirection = "down",
|
||||
...props
|
||||
}: DrawerPrimitive.Root.Props & {
|
||||
showSwipeHandle?: boolean
|
||||
}) {
|
||||
const hasSnapPoints = snapPoints != null && snapPoints.length > 0
|
||||
const contextValue = React.useMemo(
|
||||
() => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }),
|
||||
[hasSnapPoints, modal, showSwipeHandle, swipeDirection]
|
||||
)
|
||||
|
||||
return (
|
||||
<DrawerContext.Provider value={contextValue}>
|
||||
<DrawerPrimitive.Root
|
||||
data-slot="drawer"
|
||||
modal={modal}
|
||||
snapPoints={snapPoints}
|
||||
swipeDirection={swipeDirection}
|
||||
{...props}
|
||||
/>
|
||||
</DrawerContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) {
|
||||
return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) {
|
||||
return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
|
||||
}
|
||||
|
||||
function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) {
|
||||
return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
|
||||
}
|
||||
|
||||
function DrawerOverlay({
|
||||
className,
|
||||
...props
|
||||
}: DrawerPrimitive.Backdrop.Props) {
|
||||
return (
|
||||
<DrawerPrimitive.Backdrop
|
||||
data-slot="drawer-overlay"
|
||||
className={cn(
|
||||
"fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DrawerSwipeHandle({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="drawer-swipe-handle"
|
||||
aria-hidden="true"
|
||||
className={cn(
|
||||
"relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DrawerContent({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: DrawerPrimitive.Popup.Props) {
|
||||
const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer()
|
||||
const swipeAxis =
|
||||
swipeDirection === "down" || swipeDirection === "up" ? "y" : "x"
|
||||
|
||||
return (
|
||||
<DrawerPortal data-slot="drawer-portal">
|
||||
{modal === true && (
|
||||
<DrawerOverlay data-snap-points={hasSnapPoints ? "" : undefined} />
|
||||
)}
|
||||
<DrawerPrimitive.Viewport
|
||||
data-slot="drawer-viewport"
|
||||
data-modal={modal}
|
||||
className="pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto"
|
||||
>
|
||||
<DrawerPrimitive.Popup
|
||||
data-slot="drawer-popup"
|
||||
data-swipe-axis={swipeAxis}
|
||||
data-snap-points={hasSnapPoints ? "" : undefined}
|
||||
className={cn(
|
||||
// Base.
|
||||
"group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b",
|
||||
// Nested.
|
||||
"data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95",
|
||||
// Bleed.
|
||||
"after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full",
|
||||
// Sizing.
|
||||
"[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]",
|
||||
// Stack.
|
||||
"[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]",
|
||||
// Transitions.
|
||||
"data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]",
|
||||
// Axis: y.
|
||||
"data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)",
|
||||
// Axis: x.
|
||||
"data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row",
|
||||
// Direction: down.
|
||||
"data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]",
|
||||
// Direction: up.
|
||||
"data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]",
|
||||
// Direction: left.
|
||||
"data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]",
|
||||
// Direction: right.
|
||||
"data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{showSwipeHandle && <DrawerSwipeHandle />}
|
||||
<DrawerPrimitive.Content
|
||||
data-slot="drawer-content"
|
||||
className={cn(
|
||||
"flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</DrawerPrimitive.Content>
|
||||
</DrawerPrimitive.Popup>
|
||||
</DrawerPrimitive.Viewport>
|
||||
</DrawerPortal>
|
||||
)
|
||||
}
|
||||
|
||||
function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="drawer-header"
|
||||
className={cn(
|
||||
"flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="drawer-footer"
|
||||
className={cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {
|
||||
return (
|
||||
<DrawerPrimitive.Title
|
||||
data-slot="drawer-title"
|
||||
className={cn(
|
||||
"text-base font-medium text-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DrawerDescription({
|
||||
className,
|
||||
...props
|
||||
}: DrawerPrimitive.Description.Props) {
|
||||
return (
|
||||
<DrawerPrimitive.Description
|
||||
data-slot="drawer-description"
|
||||
className={cn("text-sm text-balance text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Drawer,
|
||||
DrawerPortal,
|
||||
DrawerOverlay,
|
||||
DrawerSwipeHandle,
|
||||
DrawerTrigger,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerHeader,
|
||||
DrawerFooter,
|
||||
DrawerTitle,
|
||||
DrawerDescription,
|
||||
}
|
||||
@@ -1,268 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Menu as MenuPrimitive } from "@base-ui/react/menu"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ChevronRightIcon, CheckIcon } from "lucide-react"
|
||||
|
||||
function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
|
||||
return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {
|
||||
return <MenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {
|
||||
return <MenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuContent({
|
||||
align = "start",
|
||||
alignOffset = 0,
|
||||
side = "bottom",
|
||||
sideOffset = 4,
|
||||
className,
|
||||
...props
|
||||
}: MenuPrimitive.Popup.Props &
|
||||
Pick<
|
||||
MenuPrimitive.Positioner.Props,
|
||||
"align" | "alignOffset" | "side" | "sideOffset"
|
||||
>) {
|
||||
return (
|
||||
<MenuPrimitive.Portal>
|
||||
<MenuPrimitive.Positioner
|
||||
className="isolate z-50 outline-none"
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
>
|
||||
<MenuPrimitive.Popup
|
||||
data-slot="dropdown-menu-content"
|
||||
className={cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
||||
{...props}
|
||||
/>
|
||||
</MenuPrimitive.Positioner>
|
||||
</MenuPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {
|
||||
return <MenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.GroupLabel.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.GroupLabel
|
||||
data-slot="dropdown-menu-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: MenuPrimitive.Item.Props & {
|
||||
inset?: boolean
|
||||
variant?: "default" | "destructive"
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.Item
|
||||
data-slot="dropdown-menu-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
|
||||
return <MenuPrimitive.SubmenuRoot data-slot="dropdown-menu-sub" {...props} />
|
||||
}
|
||||
|
||||
function DropdownMenuSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
children,
|
||||
...props
|
||||
}: MenuPrimitive.SubmenuTrigger.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.SubmenuTrigger
|
||||
data-slot="dropdown-menu-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon className="ml-auto" />
|
||||
</MenuPrimitive.SubmenuTrigger>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSubContent({
|
||||
align = "start",
|
||||
alignOffset = -3,
|
||||
side = "right",
|
||||
sideOffset = 0,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuContent>) {
|
||||
return (
|
||||
<DropdownMenuContent
|
||||
data-slot="dropdown-menu-sub-content"
|
||||
className={cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.CheckboxItem.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.CheckboxItem
|
||||
data-slot="dropdown-menu-checkbox-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
||||
data-slot="dropdown-menu-checkbox-item-indicator"
|
||||
>
|
||||
<MenuPrimitive.CheckboxItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</MenuPrimitive.CheckboxItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenuPrimitive.CheckboxItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
|
||||
return (
|
||||
<MenuPrimitive.RadioGroup
|
||||
data-slot="dropdown-menu-radio-group"
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuRadioItem({
|
||||
className,
|
||||
children,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.RadioItem.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.RadioItem
|
||||
data-slot="dropdown-menu-radio-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span
|
||||
className="pointer-events-none absolute right-2 flex items-center justify-center"
|
||||
data-slot="dropdown-menu-radio-item-indicator"
|
||||
>
|
||||
<MenuPrimitive.RadioItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</MenuPrimitive.RadioItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenuPrimitive.RadioItem>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuSeparator({
|
||||
className,
|
||||
...props
|
||||
}: MenuPrimitive.Separator.Props) {
|
||||
return (
|
||||
<MenuPrimitive.Separator
|
||||
data-slot="dropdown-menu-separator"
|
||||
className={cn("-mx-1 my-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function DropdownMenuShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
data-slot="dropdown-menu-shortcut"
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
DropdownMenu,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuSubContent,
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {
|
||||
return <PreviewCardPrimitive.Root data-slot="hover-card" {...props} />
|
||||
}
|
||||
|
||||
function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {
|
||||
return (
|
||||
<PreviewCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
function HoverCardContent({
|
||||
className,
|
||||
side = "bottom",
|
||||
sideOffset = 4,
|
||||
align = "center",
|
||||
alignOffset = 4,
|
||||
...props
|
||||
}: PreviewCardPrimitive.Popup.Props &
|
||||
Pick<
|
||||
PreviewCardPrimitive.Positioner.Props,
|
||||
"align" | "alignOffset" | "side" | "sideOffset"
|
||||
>) {
|
||||
return (
|
||||
<PreviewCardPrimitive.Portal data-slot="hover-card-portal">
|
||||
<PreviewCardPrimitive.Positioner
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
className="isolate z-50"
|
||||
>
|
||||
<PreviewCardPrimitive.Popup
|
||||
data-slot="hover-card-content"
|
||||
className={cn(
|
||||
"z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PreviewCardPrimitive.Positioner>
|
||||
</PreviewCardPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
export { HoverCard, HoverCardTrigger, HoverCardContent }
|
||||
@@ -1,87 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { OTPInput, OTPInputContext } from "input-otp"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { MinusIcon } from "lucide-react"
|
||||
|
||||
function InputOTP({
|
||||
className,
|
||||
containerClassName,
|
||||
...props
|
||||
}: React.ComponentProps<typeof OTPInput> & {
|
||||
containerClassName?: string
|
||||
}) {
|
||||
return (
|
||||
<OTPInput
|
||||
data-slot="input-otp"
|
||||
containerClassName={cn(
|
||||
"cn-input-otp flex items-center has-disabled:opacity-50",
|
||||
containerClassName
|
||||
)}
|
||||
spellCheck={false}
|
||||
className={cn("disabled:cursor-not-allowed", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="input-otp-group"
|
||||
className={cn(
|
||||
"flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function InputOTPSlot({
|
||||
index,
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"div"> & {
|
||||
index: number
|
||||
}) {
|
||||
const inputOTPContext = React.useContext(OTPInputContext)
|
||||
const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
|
||||
|
||||
return (
|
||||
<div
|
||||
data-slot="input-otp-slot"
|
||||
data-active={isActive}
|
||||
className={cn(
|
||||
"relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{char}
|
||||
{hasFakeCaret && (
|
||||
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
|
||||
<div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="input-otp-separator"
|
||||
className="flex items-center [&_svg:not([class*='size-'])]:size-4"
|
||||
role="separator"
|
||||
{...props}
|
||||
>
|
||||
<MinusIcon
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
|
||||
@@ -1,20 +0,0 @@
|
||||
import * as React from "react"
|
||||
import { Input as InputPrimitive } from "@base-ui/react/input"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||
return (
|
||||
<InputPrimitive
|
||||
type={type}
|
||||
data-slot="input"
|
||||
className={cn(
|
||||
"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Input }
|
||||
@@ -1,20 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Label({ className, ...props }: React.ComponentProps<"label">) {
|
||||
return (
|
||||
<label
|
||||
data-slot="label"
|
||||
className={cn(
|
||||
"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Label }
|
||||
@@ -1,280 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Menu as MenuPrimitive } from "@base-ui/react/menu"
|
||||
import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { CheckIcon } from "lucide-react"
|
||||
|
||||
function Menubar({ className, ...props }: MenubarPrimitive.Props) {
|
||||
return (
|
||||
<MenubarPrimitive
|
||||
data-slot="menubar"
|
||||
className={cn(
|
||||
"flex h-8 items-center gap-0.5 rounded-lg border p-[3px]",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {
|
||||
return <DropdownMenu data-slot="menubar-menu" {...props} />
|
||||
}
|
||||
|
||||
function MenubarGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuGroup>) {
|
||||
return <DropdownMenuGroup data-slot="menubar-group" {...props} />
|
||||
}
|
||||
|
||||
function MenubarPortal({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuPortal>) {
|
||||
return <DropdownMenuPortal data-slot="menubar-portal" {...props} />
|
||||
}
|
||||
|
||||
function MenubarTrigger({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuTrigger>) {
|
||||
return (
|
||||
<DropdownMenuTrigger
|
||||
data-slot="menubar-trigger"
|
||||
className={cn(
|
||||
"flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarContent({
|
||||
className,
|
||||
align = "start",
|
||||
alignOffset = -4,
|
||||
sideOffset = 8,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuContent>) {
|
||||
return (
|
||||
<DropdownMenuContent
|
||||
data-slot="menubar-content"
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
sideOffset={sideOffset}
|
||||
className={cn("min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className )}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarItem({
|
||||
className,
|
||||
inset,
|
||||
variant = "default",
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuItem>) {
|
||||
return (
|
||||
<DropdownMenuItem
|
||||
data-slot="menubar-item"
|
||||
data-inset={inset}
|
||||
data-variant={variant}
|
||||
className={cn(
|
||||
"group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarCheckboxItem({
|
||||
className,
|
||||
children,
|
||||
checked,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.CheckboxItem.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.CheckboxItem
|
||||
data-slot="menubar-checkbox-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
|
||||
className
|
||||
)}
|
||||
checked={checked}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
|
||||
<MenuPrimitive.CheckboxItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</MenuPrimitive.CheckboxItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenuPrimitive.CheckboxItem>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarRadioGroup({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {
|
||||
return <DropdownMenuRadioGroup data-slot="menubar-radio-group" {...props} />
|
||||
}
|
||||
|
||||
function MenubarRadioItem({
|
||||
className,
|
||||
children,
|
||||
inset,
|
||||
...props
|
||||
}: MenuPrimitive.RadioItem.Props & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<MenuPrimitive.RadioItem
|
||||
data-slot="menubar-radio-item"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
|
||||
<MenuPrimitive.RadioItemIndicator>
|
||||
<CheckIcon
|
||||
/>
|
||||
</MenuPrimitive.RadioItemIndicator>
|
||||
</span>
|
||||
{children}
|
||||
</MenuPrimitive.RadioItem>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarLabel({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuLabel> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuLabel
|
||||
data-slot="menubar-label"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"px-1.5 py-1 text-sm font-medium data-inset:pl-7",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarSeparator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuSeparator>) {
|
||||
return (
|
||||
<DropdownMenuSeparator
|
||||
data-slot="menubar-separator"
|
||||
className={cn("-mx-1 my-1 h-px bg-border", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarShortcut({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuShortcut>) {
|
||||
return (
|
||||
<DropdownMenuShortcut
|
||||
data-slot="menubar-shortcut"
|
||||
className={cn(
|
||||
"ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarSub({
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuSub>) {
|
||||
return <DropdownMenuSub data-slot="menubar-sub" {...props} />
|
||||
}
|
||||
|
||||
function MenubarSubTrigger({
|
||||
className,
|
||||
inset,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {
|
||||
inset?: boolean
|
||||
}) {
|
||||
return (
|
||||
<DropdownMenuSubTrigger
|
||||
data-slot="menubar-sub-trigger"
|
||||
data-inset={inset}
|
||||
className={cn(
|
||||
"gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function MenubarSubContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof DropdownMenuSubContent>) {
|
||||
return (
|
||||
<DropdownMenuSubContent
|
||||
data-slot="menubar-sub-content"
|
||||
className={cn("min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Menubar,
|
||||
MenubarPortal,
|
||||
MenubarMenu,
|
||||
MenubarTrigger,
|
||||
MenubarContent,
|
||||
MenubarGroup,
|
||||
MenubarSeparator,
|
||||
MenubarLabel,
|
||||
MenubarItem,
|
||||
MenubarShortcut,
|
||||
MenubarCheckboxItem,
|
||||
MenubarRadioGroup,
|
||||
MenubarRadioItem,
|
||||
MenubarSub,
|
||||
MenubarSubTrigger,
|
||||
MenubarSubContent,
|
||||
}
|
||||
@@ -1,168 +0,0 @@
|
||||
import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu"
|
||||
import { cva } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ChevronDownIcon } from "lucide-react"
|
||||
|
||||
function NavigationMenu({
|
||||
align = "start",
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: NavigationMenuPrimitive.Root.Props &
|
||||
Pick<NavigationMenuPrimitive.Positioner.Props, "align">) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Root
|
||||
data-slot="navigation-menu"
|
||||
className={cn(
|
||||
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<NavigationMenuPositioner align={align} />
|
||||
</NavigationMenuPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
function NavigationMenuList({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.List
|
||||
data-slot="navigation-menu-list"
|
||||
className={cn(
|
||||
"group flex flex-1 list-none items-center justify-center gap-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function NavigationMenuItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Item
|
||||
data-slot="navigation-menu-item"
|
||||
className={cn("relative", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
const navigationMenuTriggerStyle = cva(
|
||||
"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
|
||||
)
|
||||
|
||||
function NavigationMenuTrigger({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: NavigationMenuPrimitive.Trigger.Props) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Trigger
|
||||
data-slot="navigation-menu-trigger"
|
||||
className={cn(navigationMenuTriggerStyle(), "group", className)}
|
||||
{...props}
|
||||
>
|
||||
{children}{" "}
|
||||
<ChevronDownIcon className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180" aria-hidden="true" />
|
||||
</NavigationMenuPrimitive.Trigger>
|
||||
)
|
||||
}
|
||||
|
||||
function NavigationMenuContent({
|
||||
className,
|
||||
...props
|
||||
}: NavigationMenuPrimitive.Content.Props) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Content
|
||||
data-slot="navigation-menu-content"
|
||||
className={cn(
|
||||
"data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function NavigationMenuPositioner({
|
||||
className,
|
||||
side = "bottom",
|
||||
sideOffset = 8,
|
||||
align = "start",
|
||||
alignOffset = 0,
|
||||
...props
|
||||
}: NavigationMenuPrimitive.Positioner.Props) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Portal>
|
||||
<NavigationMenuPrimitive.Positioner
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
className={cn(
|
||||
"isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<NavigationMenuPrimitive.Popup className="data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
|
||||
<NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
|
||||
</NavigationMenuPrimitive.Popup>
|
||||
</NavigationMenuPrimitive.Positioner>
|
||||
</NavigationMenuPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function NavigationMenuLink({
|
||||
className,
|
||||
...props
|
||||
}: NavigationMenuPrimitive.Link.Props) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Link
|
||||
data-slot="navigation-menu-link"
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function NavigationMenuIndicator({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {
|
||||
return (
|
||||
<NavigationMenuPrimitive.Icon
|
||||
data-slot="navigation-menu-indicator"
|
||||
className={cn(
|
||||
"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
|
||||
</NavigationMenuPrimitive.Icon>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
NavigationMenuIndicator,
|
||||
NavigationMenuItem,
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
navigationMenuTriggerStyle,
|
||||
NavigationMenuPositioner,
|
||||
}
|
||||
@@ -1,130 +0,0 @@
|
||||
import * as React from "react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon } from "lucide-react"
|
||||
|
||||
function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
|
||||
return (
|
||||
<nav
|
||||
role="navigation"
|
||||
aria-label="pagination"
|
||||
data-slot="pagination"
|
||||
className={cn("mx-auto flex w-full justify-center", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationContent({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"ul">) {
|
||||
return (
|
||||
<ul
|
||||
data-slot="pagination-content"
|
||||
className={cn("flex items-center gap-0.5", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationItem({ ...props }: React.ComponentProps<"li">) {
|
||||
return <li data-slot="pagination-item" {...props} />
|
||||
}
|
||||
|
||||
type PaginationLinkProps = {
|
||||
isActive?: boolean
|
||||
} & Pick<React.ComponentProps<typeof Button>, "size"> &
|
||||
React.ComponentProps<"a">
|
||||
|
||||
function PaginationLink({
|
||||
className,
|
||||
isActive,
|
||||
size = "icon",
|
||||
...props
|
||||
}: PaginationLinkProps) {
|
||||
return (
|
||||
<Button
|
||||
variant={isActive ? "outline" : "ghost"}
|
||||
size={size}
|
||||
className={cn(className)}
|
||||
nativeButton={false}
|
||||
render={
|
||||
<a
|
||||
aria-current={isActive ? "page" : undefined}
|
||||
data-slot="pagination-link"
|
||||
data-active={isActive}
|
||||
{...props}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationPrevious({
|
||||
className,
|
||||
text = "Previous",
|
||||
...props
|
||||
}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
|
||||
return (
|
||||
<PaginationLink
|
||||
aria-label="Go to previous page"
|
||||
size="default"
|
||||
className={cn("pl-1.5!", className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronLeftIcon data-icon="inline-start" />
|
||||
<span className="hidden sm:block">{text}</span>
|
||||
</PaginationLink>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationNext({
|
||||
className,
|
||||
text = "Next",
|
||||
...props
|
||||
}: React.ComponentProps<typeof PaginationLink> & { text?: string }) {
|
||||
return (
|
||||
<PaginationLink
|
||||
aria-label="Go to next page"
|
||||
size="default"
|
||||
className={cn("pr-1.5!", className)}
|
||||
{...props}
|
||||
>
|
||||
<span className="hidden sm:block">{text}</span>
|
||||
<ChevronRightIcon data-icon="inline-end" />
|
||||
</PaginationLink>
|
||||
)
|
||||
}
|
||||
|
||||
function PaginationEllipsis({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<"span">) {
|
||||
return (
|
||||
<span
|
||||
aria-hidden
|
||||
data-slot="pagination-ellipsis"
|
||||
className={cn(
|
||||
"flex size-8 items-center justify-center [&_svg:not([class*='size-'])]:size-4",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<MoreHorizontalIcon
|
||||
/>
|
||||
<span className="sr-only">More pages</span>
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationEllipsis,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
}
|
||||
@@ -1,90 +0,0 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { Popover as PopoverPrimitive } from "@base-ui/react/popover"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Popover({ ...props }: PopoverPrimitive.Root.Props) {
|
||||
return <PopoverPrimitive.Root data-slot="popover" {...props} />
|
||||
}
|
||||
|
||||
function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
|
||||
return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
|
||||
}
|
||||
|
||||
function PopoverContent({
|
||||
className,
|
||||
align = "center",
|
||||
alignOffset = 0,
|
||||
side = "bottom",
|
||||
sideOffset = 4,
|
||||
...props
|
||||
}: PopoverPrimitive.Popup.Props &
|
||||
Pick<
|
||||
PopoverPrimitive.Positioner.Props,
|
||||
"align" | "alignOffset" | "side" | "sideOffset"
|
||||
>) {
|
||||
return (
|
||||
<PopoverPrimitive.Portal>
|
||||
<PopoverPrimitive.Positioner
|
||||
align={align}
|
||||
alignOffset={alignOffset}
|
||||
side={side}
|
||||
sideOffset={sideOffset}
|
||||
className="isolate z-50"
|
||||
>
|
||||
<PopoverPrimitive.Popup
|
||||
data-slot="popover-content"
|
||||
className={cn(
|
||||
"z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
</PopoverPrimitive.Positioner>
|
||||
</PopoverPrimitive.Portal>
|
||||
)
|
||||
}
|
||||
|
||||
function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||
return (
|
||||
<div
|
||||
data-slot="popover-header"
|
||||
className={cn("flex flex-col gap-0.5 text-sm", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
|
||||
return (
|
||||
<PopoverPrimitive.Title
|
||||
data-slot="popover-title"
|
||||
className={cn("font-medium", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function PopoverDescription({
|
||||
className,
|
||||
...props
|
||||
}: PopoverPrimitive.Description.Props) {
|
||||
return (
|
||||
<PopoverPrimitive.Description
|
||||
data-slot="popover-description"
|
||||
className={cn("text-muted-foreground", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverDescription,
|
||||
PopoverHeader,
|
||||
PopoverTitle,
|
||||
PopoverTrigger,
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user