482 lines
14 KiB
TypeScript
482 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import Link from "next/link";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { cn } from "@/lib/utils";
|
|
import { authClient } from "@/lib/auth/client";
|
|
import {
|
|
LayoutDashboard,
|
|
Terminal,
|
|
Activity,
|
|
Clock,
|
|
Users,
|
|
Map,
|
|
Puzzle,
|
|
FolderOpen,
|
|
Archive,
|
|
Settings,
|
|
RefreshCw,
|
|
UserPlus,
|
|
ScrollText,
|
|
LogOut,
|
|
ChevronRight,
|
|
} from "lucide-react";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Types
|
|
// ---------------------------------------------------------------------------
|
|
interface NavItem {
|
|
label: string;
|
|
href: string;
|
|
icon: React.ElementType;
|
|
}
|
|
|
|
interface NavSection {
|
|
title: string;
|
|
items: NavItem[];
|
|
}
|
|
|
|
interface ServerStatus {
|
|
online: boolean;
|
|
status: "online" | "offline" | "starting" | "stopping";
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Navigation structure
|
|
// ---------------------------------------------------------------------------
|
|
const NAV_SECTIONS: NavSection[] = [
|
|
{
|
|
title: "Overview",
|
|
items: [
|
|
{ label: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
|
|
],
|
|
},
|
|
{
|
|
title: "Server",
|
|
items: [
|
|
{ label: "Console", href: "/console", icon: Terminal },
|
|
{ label: "Monitoring", href: "/monitoring", icon: Activity },
|
|
{ label: "Scheduler", href: "/scheduler", icon: Clock },
|
|
],
|
|
},
|
|
{
|
|
title: "World",
|
|
items: [
|
|
{ label: "Players", href: "/players", icon: Users },
|
|
{ label: "Map", href: "/map", icon: Map },
|
|
],
|
|
},
|
|
{
|
|
title: "Manage",
|
|
items: [
|
|
{ label: "Plugins", href: "/plugins", icon: Puzzle },
|
|
{ label: "Files", href: "/files", icon: FolderOpen },
|
|
{ label: "Backups", href: "/backups", icon: Archive },
|
|
{ label: "Settings", href: "/settings", icon: Settings },
|
|
{ label: "Updates", href: "/updates", icon: RefreshCw },
|
|
],
|
|
},
|
|
{
|
|
title: "Admin",
|
|
items: [
|
|
{ label: "Team", href: "/team", icon: UserPlus },
|
|
{ label: "Audit Log", href: "/audit", icon: ScrollText },
|
|
],
|
|
},
|
|
];
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// CubeAdmin Logo SVG
|
|
// ---------------------------------------------------------------------------
|
|
function CubeIcon({ className }: { className?: string }) {
|
|
return (
|
|
<svg
|
|
viewBox="0 0 32 32"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={className}
|
|
aria-hidden="true"
|
|
>
|
|
{/* Top face */}
|
|
<polygon
|
|
points="16,4 28,10 16,16 4,10"
|
|
fill="#059669"
|
|
opacity="0.9"
|
|
/>
|
|
{/* Left face */}
|
|
<polygon
|
|
points="4,10 16,16 16,28 4,22"
|
|
fill="#047857"
|
|
opacity="0.95"
|
|
/>
|
|
{/* Right face */}
|
|
<polygon
|
|
points="28,10 16,16 16,28 28,22"
|
|
fill="#10b981"
|
|
opacity="0.85"
|
|
/>
|
|
{/* Edge highlights */}
|
|
<polyline
|
|
points="4,10 16,4 28,10 16,16 4,10"
|
|
stroke="#34d399"
|
|
strokeWidth="0.75"
|
|
strokeLinejoin="round"
|
|
fill="none"
|
|
opacity="0.6"
|
|
/>
|
|
<line
|
|
x1="16" y1="16" x2="16" y2="28"
|
|
stroke="#34d399"
|
|
strokeWidth="0.75"
|
|
opacity="0.4"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Server status indicator
|
|
// ---------------------------------------------------------------------------
|
|
function ServerStatusBadge({ collapsed }: { collapsed: boolean }) {
|
|
const { data: status } = useQuery<ServerStatus>({
|
|
queryKey: ["server-status"],
|
|
queryFn: async () => {
|
|
const res = await fetch("/api/server/status");
|
|
if (!res.ok) return { online: false, status: "offline" as const };
|
|
return res.json();
|
|
},
|
|
refetchInterval: 10_000,
|
|
staleTime: 8_000,
|
|
});
|
|
|
|
const isOnline = status?.online ?? false;
|
|
const label = status?.status
|
|
? status.status.charAt(0).toUpperCase() + status.status.slice(1)
|
|
: "Unknown";
|
|
|
|
const dotColor = {
|
|
online: "bg-emerald-500",
|
|
offline: "bg-red-500",
|
|
starting: "bg-yellow-500 animate-pulse",
|
|
stopping: "bg-orange-500 animate-pulse",
|
|
}[status?.status ?? "offline"] ?? "bg-zinc-500";
|
|
|
|
if (collapsed) {
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger>
|
|
<div className="flex items-center justify-center p-1">
|
|
<span
|
|
className={cn("block h-2.5 w-2.5 rounded-full", dotColor)}
|
|
aria-label={`Server ${label}`}
|
|
/>
|
|
</div>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="right">
|
|
<span>Server: {label}</span>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-2 rounded-md bg-white/[0.04] px-2.5 py-1.5 ring-1 ring-white/[0.06]">
|
|
<span
|
|
className={cn("block h-2 w-2 flex-shrink-0 rounded-full", dotColor)}
|
|
/>
|
|
<span
|
|
className={cn(
|
|
"text-xs font-medium",
|
|
isOnline ? "text-emerald-400" : "text-zinc-400"
|
|
)}
|
|
>
|
|
{label}
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Individual nav item
|
|
// ---------------------------------------------------------------------------
|
|
function NavLink({
|
|
item,
|
|
isActive,
|
|
collapsed,
|
|
}: {
|
|
item: NavItem;
|
|
isActive: boolean;
|
|
collapsed: boolean;
|
|
}) {
|
|
const Icon = item.icon;
|
|
|
|
const linkContent = (
|
|
<Link
|
|
href={item.href}
|
|
className={cn(
|
|
"group flex items-center gap-3 rounded-md px-2.5 py-2 text-sm font-medium transition-all duration-150 outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/50",
|
|
collapsed && "justify-center px-2",
|
|
isActive
|
|
? "bg-emerald-600/20 text-emerald-400 ring-1 ring-emerald-500/20"
|
|
: "text-zinc-400 hover:bg-white/[0.05] hover:text-zinc-100"
|
|
)}
|
|
aria-current={isActive ? "page" : undefined}
|
|
>
|
|
<Icon
|
|
className={cn(
|
|
"h-4 w-4 flex-shrink-0 transition-colors duration-150",
|
|
isActive
|
|
? "text-emerald-400"
|
|
: "text-zinc-500 group-hover:text-zinc-300"
|
|
)}
|
|
/>
|
|
{!collapsed && (
|
|
<span className="truncate leading-none">{item.label}</span>
|
|
)}
|
|
{!collapsed && isActive && (
|
|
<ChevronRight className="ml-auto h-3 w-3 text-emerald-500/60" />
|
|
)}
|
|
</Link>
|
|
);
|
|
|
|
if (collapsed) {
|
|
return (
|
|
<Tooltip>
|
|
<TooltipTrigger>{linkContent}</TooltipTrigger>
|
|
<TooltipContent side="right">
|
|
<span>{item.label}</span>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
return linkContent;
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Sidebar
|
|
// ---------------------------------------------------------------------------
|
|
export function Sidebar() {
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
const [mounted, setMounted] = useState(false);
|
|
|
|
// Responsive: auto-collapse on small screens
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
const mq = window.matchMedia("(max-width: 1023px)");
|
|
const handler = (e: MediaQueryListEvent) => setCollapsed(e.matches);
|
|
setCollapsed(mq.matches);
|
|
mq.addEventListener("change", handler);
|
|
return () => mq.removeEventListener("change", handler);
|
|
}, []);
|
|
|
|
const { data: session } = useQuery({
|
|
queryKey: ["session"],
|
|
queryFn: async () => {
|
|
const { data } = await authClient.getSession();
|
|
return data;
|
|
},
|
|
staleTime: 5 * 60_000,
|
|
});
|
|
|
|
async function handleLogout() {
|
|
await authClient.signOut();
|
|
router.push("/login");
|
|
}
|
|
|
|
if (!mounted) return null;
|
|
|
|
const sidebarWidth = collapsed ? "w-[60px]" : "w-[240px]";
|
|
|
|
return (
|
|
<aside
|
|
className={cn(
|
|
"relative flex h-screen flex-shrink-0 flex-col border-r border-white/[0.06] bg-[#0a0a0a] transition-[width] duration-200 ease-in-out",
|
|
sidebarWidth
|
|
)}
|
|
aria-label="Main navigation"
|
|
>
|
|
{/* Logo */}
|
|
<div
|
|
className={cn(
|
|
"flex h-14 flex-shrink-0 items-center border-b border-white/[0.06]",
|
|
collapsed ? "justify-center px-0" : "gap-2.5 px-4"
|
|
)}
|
|
>
|
|
<CubeIcon className="h-7 w-7 flex-shrink-0" />
|
|
{!collapsed && (
|
|
<span className="text-sm font-semibold tracking-tight text-emerald-400">
|
|
CubeAdmin
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Server status */}
|
|
<div
|
|
className={cn(
|
|
"flex-shrink-0 border-b border-white/[0.06]",
|
|
collapsed ? "px-2 py-2" : "px-3 py-2.5"
|
|
)}
|
|
>
|
|
<ServerStatusBadge collapsed={collapsed} />
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="flex-1 overflow-y-auto overflow-x-hidden py-3 scrollbar-thin">
|
|
<div className={cn("space-y-4", collapsed ? "px-1.5" : "px-2")}>
|
|
{NAV_SECTIONS.map((section) => {
|
|
const hasActiveItem = section.items.some(
|
|
(item) =>
|
|
pathname === item.href || pathname.startsWith(item.href + "/")
|
|
);
|
|
|
|
return (
|
|
<div key={section.title}>
|
|
{!collapsed && (
|
|
<p className="mb-1 px-2.5 text-[10px] font-semibold uppercase tracking-widest text-zinc-600">
|
|
{section.title}
|
|
</p>
|
|
)}
|
|
{collapsed && hasActiveItem && (
|
|
<div className="mb-1 h-px w-full bg-emerald-500/20 rounded-full" />
|
|
)}
|
|
<div className="space-y-0.5">
|
|
{section.items.map((item) => {
|
|
const isActive =
|
|
pathname === item.href ||
|
|
pathname.startsWith(item.href + "/");
|
|
return (
|
|
<NavLink
|
|
key={item.href}
|
|
item={item}
|
|
isActive={isActive}
|
|
collapsed={collapsed}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Collapse toggle */}
|
|
<button
|
|
onClick={() => setCollapsed((c) => !c)}
|
|
className={cn(
|
|
"flex-shrink-0 flex items-center gap-2 border-t border-white/[0.06] px-3 py-2 text-xs text-zinc-600 transition-colors hover:bg-white/[0.04] hover:text-zinc-400",
|
|
collapsed && "justify-center"
|
|
)}
|
|
aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
|
|
>
|
|
<ChevronRight
|
|
className={cn(
|
|
"h-3.5 w-3.5 transition-transform duration-200",
|
|
!collapsed && "rotate-180"
|
|
)}
|
|
/>
|
|
{!collapsed && <span>Collapse</span>}
|
|
</button>
|
|
|
|
{/* User menu */}
|
|
<div
|
|
className={cn(
|
|
"flex-shrink-0 border-t border-white/[0.06]",
|
|
collapsed ? "p-2" : "p-3"
|
|
)}
|
|
>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
className={cn(
|
|
"flex w-full items-center gap-2.5 rounded-md p-1.5 text-left transition-colors hover:bg-white/[0.05] outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/50",
|
|
collapsed && "justify-center"
|
|
)}
|
|
>
|
|
{/* Avatar */}
|
|
<div className="relative flex-shrink-0">
|
|
{session?.user?.image ? (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={session.user.image}
|
|
alt={session.user.name ?? "User avatar"}
|
|
className="h-7 w-7 rounded-full object-cover ring-1 ring-white/10"
|
|
/>
|
|
) : (
|
|
<div className="flex h-7 w-7 items-center justify-center rounded-full bg-emerald-600/30 ring-1 ring-emerald-500/20">
|
|
<span className="text-xs font-semibold text-emerald-400">
|
|
{(session?.user?.name ?? session?.user?.email ?? "?")
|
|
.charAt(0)
|
|
.toUpperCase()}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{/* Online indicator */}
|
|
<span className="absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full bg-emerald-500 ring-1 ring-[#0a0a0a]" />
|
|
</div>
|
|
|
|
{!collapsed && (
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-xs font-medium text-zinc-200">
|
|
{session?.user?.name ?? "Loading…"}
|
|
</p>
|
|
<p className="truncate text-[10px] text-zinc-500">
|
|
{(session?.user as { role?: string } | undefined)?.role ?? "Admin"}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent
|
|
side={collapsed ? "right" : "top"}
|
|
align="start"
|
|
sideOffset={8}
|
|
className="w-52"
|
|
>
|
|
<DropdownMenuLabel className="font-normal">
|
|
<div className="flex flex-col gap-0.5">
|
|
<span className="text-sm font-medium text-foreground">
|
|
{session?.user?.name ?? "—"}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground truncate">
|
|
{session?.user?.email ?? "—"}
|
|
</span>
|
|
</div>
|
|
</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem onClick={() => router.push("/settings")}>
|
|
<Settings className="h-4 w-4" />
|
|
Account Settings
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
variant="destructive"
|
|
onClick={handleLogout}
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
Sign out
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|