Pass 3 next slice: snapshot polish, analytics depth, player drawer
- Snapshots now include recursive sizeBytes (lib/snapshots.ts dirSize),
rendered as a badge next to mod count.
- Snapshot restore/delete is now type-to-confirm: click Restore/Delete,
type the literal snapshot name, press Enter or click Confirm. Esc
cancels, matches the existing wizard Esc handler.
- Analytics card:
- Uptime ring showing % of datapoints with tps>0 (color-graded
green/amber/red) + numeric % over selected range.
- Peak-player marker dot on the Players sparkline + peak caption.
- "Online now" player list (up to 8) with small PlayerAvatar badges,
sourced from the latest analytics entry's players[] array.
- Player profile drawer (new):
- Slide-in right panel opened by clicking any PlayerAvatar.
- Shows Online / Op / Whitelisted / Banned badges, UUID, ban reason.
- Quick toggles for op/deop, whitelist add/remove, ban (with reason
input) and pardon — reuses /api/players POST contract.
- Global event bus (lib/events.ts) decouples avatars from drawer.
- Esc / backdrop / close-button dismiss.
- PlayerAvatar now renders as a <button> by default (stopPropagation on
click, focus-visible ring); pass interactive={false} to opt out (used
inside the drawer itself).
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
a011423017
commit
19d66c2de6
7 changed files with 589 additions and 109 deletions
|
|
@ -5,6 +5,7 @@ import { SessionProvider } from "next-auth/react";
|
|||
import { Toaster } from "sonner";
|
||||
import { useEffect, useState } from "react";
|
||||
import { CommandPalette } from "@/components/CommandPalette";
|
||||
import { PlayerDrawer } from "@/components/PlayerDrawer";
|
||||
|
||||
export function Providers({ children }: { children: React.ReactNode }) {
|
||||
const [queryClient] = useState(
|
||||
|
|
@ -34,6 +35,7 @@ export function Providers({ children }: { children: React.ReactNode }) {
|
|||
<QueryClientProvider client={queryClient}>
|
||||
{children}
|
||||
<CommandPalette />
|
||||
<PlayerDrawer />
|
||||
<Toaster
|
||||
theme={theme}
|
||||
position="bottom-right"
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@
|
|||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { PlayerAvatar } from "@/components/PlayerAvatar";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
|
|
@ -18,8 +20,53 @@ type MetricEntry = {
|
|||
ramTotalMB: number;
|
||||
cpuPercent: number;
|
||||
playersOnline: number;
|
||||
players?: string[];
|
||||
};
|
||||
|
||||
function UptimeRing({ percent, size = 64 }: { percent: number; size?: number }) {
|
||||
const r = size / 2 - 5;
|
||||
const c = 2 * Math.PI * r;
|
||||
const off = c * (1 - percent / 100);
|
||||
const color =
|
||||
percent >= 95 ? "#4ade80" : percent >= 80 ? "#facc15" : "#f87171";
|
||||
return (
|
||||
<svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} aria-label={`Uptime ${percent.toFixed(0)}%`}>
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={r}
|
||||
stroke="currentColor"
|
||||
strokeOpacity="0.15"
|
||||
strokeWidth="5"
|
||||
fill="none"
|
||||
/>
|
||||
<circle
|
||||
cx={size / 2}
|
||||
cy={size / 2}
|
||||
r={r}
|
||||
stroke={color}
|
||||
strokeWidth="5"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={c}
|
||||
strokeDashoffset={off}
|
||||
fill="none"
|
||||
transform={`rotate(-90 ${size / 2} ${size / 2})`}
|
||||
/>
|
||||
<text
|
||||
x="50%"
|
||||
y="50%"
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
className="fill-foreground"
|
||||
fontSize={size * 0.28}
|
||||
fontWeight="700"
|
||||
>
|
||||
{Math.round(percent)}%
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function Sparkline({
|
||||
data,
|
||||
color,
|
||||
|
|
@ -28,6 +75,8 @@ function Sparkline({
|
|||
label,
|
||||
unit,
|
||||
currentValue,
|
||||
peakIndex,
|
||||
peakLabel,
|
||||
}: {
|
||||
data: number[];
|
||||
color: string;
|
||||
|
|
@ -36,6 +85,8 @@ function Sparkline({
|
|||
label: string;
|
||||
unit: string;
|
||||
currentValue: string;
|
||||
peakIndex?: number;
|
||||
peakLabel?: string;
|
||||
}) {
|
||||
if (data.length < 2) {
|
||||
return (
|
||||
|
|
@ -55,17 +106,27 @@ function Sparkline({
|
|||
);
|
||||
}
|
||||
|
||||
const { pathD, areaD, w } = useMemo(() => {
|
||||
const { pathD, areaD, w, peakXY } = useMemo(() => {
|
||||
const dataMax = max || Math.max(...data, 1);
|
||||
const width = 300;
|
||||
const pts = data.map((v, i) => {
|
||||
const coords = data.map((v, i) => {
|
||||
const x = (i / (data.length - 1)) * width;
|
||||
const y = height - (v / dataMax) * (height - 10) - 5;
|
||||
return `${x},${y}`;
|
||||
return { x, y };
|
||||
});
|
||||
const pts = coords.map((c) => `${c.x},${c.y}`);
|
||||
const p = `M${pts.join(" L")}`;
|
||||
return { pathD: p, areaD: `${p} L${width},${height} L0,${height} Z`, w: width };
|
||||
}, [data, max, height]);
|
||||
const peak =
|
||||
typeof peakIndex === "number" && peakIndex >= 0 && peakIndex < coords.length
|
||||
? coords[peakIndex]
|
||||
: null;
|
||||
return {
|
||||
pathD: p,
|
||||
areaD: `${p} L${width},${height} L0,${height} Z`,
|
||||
w: width,
|
||||
peakXY: peak,
|
||||
};
|
||||
}, [data, max, height, peakIndex]);
|
||||
|
||||
return (
|
||||
<div className="rounded-lg bg-muted p-4">
|
||||
|
|
@ -87,7 +148,18 @@ function Sparkline({
|
|||
</defs>
|
||||
<path d={areaD} fill={`url(#grad-${label})`} />
|
||||
<path d={pathD} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
{peakXY && (
|
||||
<>
|
||||
<circle cx={peakXY.x} cy={peakXY.y} r={3.5} fill={color} />
|
||||
<circle cx={peakXY.x} cy={peakXY.y} r={6} fill={color} fillOpacity="0.25" />
|
||||
</>
|
||||
)}
|
||||
</svg>
|
||||
{peakLabel && (
|
||||
<p className="text-[10px] text-muted-foreground mt-1 tabular-nums">
|
||||
peak {peakLabel}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -105,6 +177,25 @@ export function Analytics() {
|
|||
|
||||
const latest = metrics.length > 0 ? metrics[metrics.length - 1] : null;
|
||||
|
||||
const { uptimePct, peakPlayers, peakIndex, onlineNow } = useMemo(() => {
|
||||
if (metrics.length === 0) {
|
||||
return { uptimePct: 0, peakPlayers: 0, peakIndex: -1, onlineNow: [] as string[] };
|
||||
}
|
||||
const alive = metrics.filter((m) => m.tps > 0 || m.playersOnline > 0).length;
|
||||
const pct = (alive / metrics.length) * 100;
|
||||
let peak = -Infinity;
|
||||
let idx = -1;
|
||||
metrics.forEach((m, i) => {
|
||||
if (m.playersOnline > peak) {
|
||||
peak = m.playersOnline;
|
||||
idx = i;
|
||||
}
|
||||
});
|
||||
const online =
|
||||
(latest?.players?.filter((p): p is string => typeof p === "string" && p.length > 0)) || [];
|
||||
return { uptimePct: pct, peakPlayers: peak, peakIndex: idx, onlineNow: online };
|
||||
}, [metrics, latest]);
|
||||
|
||||
const ranges = [
|
||||
{ label: "1h", value: 1 },
|
||||
{ label: "6h", value: 6 },
|
||||
|
|
@ -138,7 +229,57 @@ export function Analytics() {
|
|||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardContent className="space-y-4">
|
||||
{metrics.length > 0 && (
|
||||
<div className="flex items-center gap-4 flex-wrap rounded-lg bg-muted p-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<UptimeRing percent={uptimePct} />
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Uptime</p>
|
||||
<p className="text-sm font-semibold">
|
||||
{uptimePct.toFixed(1)}%{" "}
|
||||
<span className="text-xs text-muted-foreground">
|
||||
over last {hours}h
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-10 w-px bg-border hidden sm:block" />
|
||||
<div>
|
||||
<p className="text-xs text-muted-foreground">Peak players</p>
|
||||
<p className="text-sm font-semibold tabular-nums">
|
||||
{peakPlayers >= 0 ? peakPlayers : 0}
|
||||
</p>
|
||||
</div>
|
||||
<div className="h-10 w-px bg-border hidden sm:block" />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-xs text-muted-foreground mb-1">
|
||||
Online now ({onlineNow.length})
|
||||
</p>
|
||||
{onlineNow.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">—</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{onlineNow.slice(0, 8).map((name) => (
|
||||
<Badge
|
||||
key={name}
|
||||
variant="secondary"
|
||||
className="gap-1.5 text-xs px-1.5 py-0.5 font-normal"
|
||||
>
|
||||
<PlayerAvatar name={name} size={14} />
|
||||
{name}
|
||||
</Badge>
|
||||
))}
|
||||
{onlineNow.length > 8 && (
|
||||
<Badge variant="secondary" className="text-xs px-1.5 py-0.5">
|
||||
+{onlineNow.length - 8}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<Sparkline
|
||||
data={metrics.map((m) => m.tps)}
|
||||
|
|
@ -171,6 +312,8 @@ export function Analytics() {
|
|||
label="Players"
|
||||
unit=""
|
||||
currentValue={latest ? latest.playersOnline.toString() : "0"}
|
||||
peakIndex={peakPlayers > 0 ? peakIndex : undefined}
|
||||
peakLabel={peakPlayers > 0 ? peakPlayers.toString() : undefined}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { Badge } from "@/components/ui/badge";
|
|||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { timeAgo } from "@/lib/time";
|
||||
import { timeAgo, formatBytes } from "@/lib/time";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
|
|
@ -67,6 +67,7 @@ type SnapshotInfo = {
|
|||
createdAt: string;
|
||||
modCount: number;
|
||||
mods: string[];
|
||||
sizeBytes?: number;
|
||||
};
|
||||
|
||||
type WizardStep = "idle" | "searching" | "reviewing" | "installing";
|
||||
|
|
@ -170,6 +171,7 @@ export function ModManager() {
|
|||
const [confirmDeleteSnap, setConfirmDeleteSnap] = useState<string | null>(null);
|
||||
const [installedQuery, setInstalledQuery] = useState("");
|
||||
const [sideFilter, setSideFilter] = useState<"all" | ModSide>("all");
|
||||
const [typedConfirm, setTypedConfirm] = useState("");
|
||||
const debounceRef = useRef<ReturnType<typeof setTimeout>>(null);
|
||||
|
||||
// Installed mods
|
||||
|
|
@ -209,6 +211,7 @@ export function ModManager() {
|
|||
setConfirmRemove(null);
|
||||
setConfirmRestore(null);
|
||||
setConfirmDeleteSnap(null);
|
||||
setTypedConfirm("");
|
||||
return;
|
||||
}
|
||||
if (step === "searching" || step === "reviewing") {
|
||||
|
|
@ -1036,97 +1039,128 @@ export function ModManager() {
|
|||
</CardHeader>
|
||||
<CardContent>
|
||||
<ul className="space-y-1">
|
||||
{snapshots.map((snap) => (
|
||||
<li
|
||||
key={snap.dirName}
|
||||
className="flex items-center justify-between px-3 py-2.5 rounded-md bg-muted/50 group"
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">{snap.name}</span>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="text-xs px-1.5 py-0"
|
||||
>
|
||||
{snap.modCount} mods
|
||||
</Badge>
|
||||
{snapshots.map((snap) => {
|
||||
const pending =
|
||||
confirmRestore === snap.dirName || confirmDeleteSnap === snap.dirName;
|
||||
const mode = confirmRestore === snap.dirName ? "restore" : "delete";
|
||||
const matched = typedConfirm === snap.name;
|
||||
return (
|
||||
<li
|
||||
key={snap.dirName}
|
||||
className="rounded-md bg-muted/50 group"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2 px-3 py-2.5">
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm font-medium">{snap.name}</span>
|
||||
<Badge variant="secondary" className="text-xs px-1.5 py-0">
|
||||
{snap.modCount} mods
|
||||
</Badge>
|
||||
{typeof snap.sizeBytes === "number" && snap.sizeBytes > 0 && (
|
||||
<Badge variant="secondary" className="text-xs px-1.5 py-0">
|
||||
{formatBytes(snap.sizeBytes)}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p
|
||||
className="text-xs text-muted-foreground"
|
||||
title={new Date(snap.createdAt).toLocaleString()}
|
||||
>
|
||||
{timeAgo(snap.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-1 shrink-0 flex-wrap justify-end">
|
||||
{pending ? (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
setConfirmRestore(null);
|
||||
setConfirmDeleteSnap(null);
|
||||
setTypedConfirm("");
|
||||
}}
|
||||
className="text-xs h-9"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setConfirmRestore(snap.dirName);
|
||||
setConfirmDeleteSnap(null);
|
||||
setTypedConfirm("");
|
||||
}}
|
||||
disabled={isBusy}
|
||||
className="text-xs h-9 sm:opacity-0 sm:group-hover:opacity-100 transition"
|
||||
>
|
||||
Restore
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
setConfirmDeleteSnap(snap.dirName);
|
||||
setConfirmRestore(null);
|
||||
setTypedConfirm("");
|
||||
}}
|
||||
disabled={isBusy}
|
||||
className="text-xs h-9 text-muted-foreground sm:opacity-0 sm:group-hover:opacity-100 transition"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className="text-xs text-muted-foreground"
|
||||
title={new Date(snap.createdAt).toLocaleString()}
|
||||
>
|
||||
{timeAgo(snap.createdAt)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-1 shrink-0 flex-wrap justify-end">
|
||||
{confirmRestore === snap.dirName ? (
|
||||
<>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="default"
|
||||
onClick={() => restoreSnap.mutate(snap.dirName)}
|
||||
disabled={isBusy}
|
||||
className="text-xs h-9"
|
||||
>
|
||||
Confirm Restore
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => setConfirmRestore(null)}
|
||||
className="text-xs h-9"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</>
|
||||
) : confirmDeleteSnap === snap.dirName ? (
|
||||
<>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={() => {
|
||||
deleteSnap.mutate(snap.dirName);
|
||||
setConfirmDeleteSnap(null);
|
||||
}}
|
||||
disabled={isBusy}
|
||||
className="text-xs h-9"
|
||||
>
|
||||
Confirm Delete
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => setConfirmDeleteSnap(null)}
|
||||
className="text-xs h-9"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => setConfirmRestore(snap.dirName)}
|
||||
disabled={isBusy}
|
||||
className="text-xs h-9 sm:opacity-0 sm:group-hover:opacity-100 transition"
|
||||
>
|
||||
Restore
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => setConfirmDeleteSnap(snap.dirName)}
|
||||
disabled={isBusy}
|
||||
className="text-xs h-9 text-muted-foreground sm:opacity-0 sm:group-hover:opacity-100 transition"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</>
|
||||
{pending && (
|
||||
<div className="px-3 pb-3 pt-0 border-t border-border/60">
|
||||
<p className="text-xs text-muted-foreground mt-2 mb-1.5">
|
||||
Type <span className="font-mono text-foreground">{snap.name}</span> to{" "}
|
||||
{mode === "restore" ? "confirm restore" : "confirm delete"}
|
||||
</p>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
value={typedConfirm}
|
||||
autoFocus
|
||||
onChange={(e) => setTypedConfirm(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && matched) {
|
||||
if (mode === "restore") restoreSnap.mutate(snap.dirName);
|
||||
else {
|
||||
deleteSnap.mutate(snap.dirName);
|
||||
setConfirmDeleteSnap(null);
|
||||
setTypedConfirm("");
|
||||
}
|
||||
}
|
||||
}}
|
||||
placeholder={snap.name}
|
||||
className="h-9 text-sm flex-1 font-mono"
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={mode === "restore" ? "default" : "destructive"}
|
||||
onClick={() => {
|
||||
if (mode === "restore") restoreSnap.mutate(snap.dirName);
|
||||
else {
|
||||
deleteSnap.mutate(snap.dirName);
|
||||
setConfirmDeleteSnap(null);
|
||||
setTypedConfirm("");
|
||||
}
|
||||
}}
|
||||
disabled={!matched || isBusy}
|
||||
className="text-xs h-9"
|
||||
>
|
||||
{mode === "restore" ? "Confirm Restore" : "Confirm Delete"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
|
|
|||
|
|
@ -2,41 +2,59 @@
|
|||
|
||||
import Image from "next/image";
|
||||
import { useState } from "react";
|
||||
import { dispatchAppEvent } from "@/lib/events";
|
||||
|
||||
export function PlayerAvatar({
|
||||
name,
|
||||
size = 24,
|
||||
className = "",
|
||||
interactive = true,
|
||||
}: {
|
||||
name: string;
|
||||
size?: number;
|
||||
className?: string;
|
||||
interactive?: boolean;
|
||||
}) {
|
||||
const [failed, setFailed] = useState(false);
|
||||
const dim = `${size}px`;
|
||||
const initial = name.slice(0, 1).toUpperCase();
|
||||
|
||||
if (failed || !name) {
|
||||
return (
|
||||
const inner =
|
||||
failed || !name ? (
|
||||
<div
|
||||
className={`rounded bg-muted text-muted-foreground shrink-0 flex items-center justify-center font-bold ${className}`}
|
||||
className="rounded bg-muted text-muted-foreground shrink-0 flex items-center justify-center font-bold"
|
||||
style={{ width: dim, height: dim, fontSize: size * 0.5 }}
|
||||
aria-label={name}
|
||||
>
|
||||
{initial}
|
||||
</div>
|
||||
) : (
|
||||
<Image
|
||||
src={`https://mc-heads.net/avatar/${encodeURIComponent(name)}/${size}`}
|
||||
alt=""
|
||||
width={size}
|
||||
height={size}
|
||||
unoptimized
|
||||
onError={() => setFailed(true)}
|
||||
className="rounded shrink-0 bg-muted"
|
||||
/>
|
||||
);
|
||||
|
||||
if (!interactive || !name) {
|
||||
return <span className={`inline-flex shrink-0 ${className}`}>{inner}</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<Image
|
||||
src={`https://mc-heads.net/avatar/${encodeURIComponent(name)}/${size}`}
|
||||
alt=""
|
||||
width={size}
|
||||
height={size}
|
||||
unoptimized
|
||||
onError={() => setFailed(true)}
|
||||
className={`rounded shrink-0 bg-muted ${className}`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={`Open profile for ${name}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
dispatchAppEvent("player:open", { name });
|
||||
}}
|
||||
className={`inline-flex shrink-0 rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-ring hover:brightness-110 transition ${className}`}
|
||||
>
|
||||
{inner}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
243
components/PlayerDrawer.tsx
Normal file
243
components/PlayerDrawer.tsx
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
"use client";
|
||||
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { PlayerAvatar } from "@/components/PlayerAvatar";
|
||||
import { onAppEvent } from "@/lib/events";
|
||||
|
||||
type PlayerData = {
|
||||
ops: { name: string; uuid: string; level: number }[];
|
||||
whitelist: { name: string; uuid: string }[];
|
||||
banned: { name: string; uuid: string; reason: string }[];
|
||||
};
|
||||
|
||||
type MetricEntry = { ts: string; players?: string[] };
|
||||
|
||||
export function PlayerDrawer() {
|
||||
const { data: session } = useSession();
|
||||
const queryClient = useQueryClient();
|
||||
const [name, setName] = useState<string | null>(null);
|
||||
const [banReason, setBanReason] = useState("");
|
||||
|
||||
useEffect(() => onAppEvent("player:open", ({ name }) => setName(name)), []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!name) return;
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") setName(null);
|
||||
};
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
}, [name]);
|
||||
|
||||
const authed = !!session;
|
||||
|
||||
const players = useQuery<PlayerData>({
|
||||
queryKey: ["players"],
|
||||
queryFn: () => fetch("/api/players").then((r) => r.json()),
|
||||
enabled: authed && !!name,
|
||||
staleTime: 10_000,
|
||||
});
|
||||
|
||||
// Use existing analytics cache (last entry) to determine online now
|
||||
const analytics = queryClient.getQueryData<MetricEntry[]>(["analytics", 6]);
|
||||
const onlineNow =
|
||||
(analytics && analytics.length > 0
|
||||
? analytics[analytics.length - 1].players || []
|
||||
: []) as string[];
|
||||
|
||||
const isOp = !!name && !!players.data?.ops.some((p) => p.name === name);
|
||||
const isWhitelisted =
|
||||
!!name && !!players.data?.whitelist.some((p) => p.name === name);
|
||||
const bannedEntry =
|
||||
(name && players.data?.banned.find((p) => p.name === name)) || null;
|
||||
const isBanned = !!bannedEntry;
|
||||
const isOnline = !!name && onlineNow.includes(name);
|
||||
|
||||
const action = useMutation({
|
||||
mutationFn: async (params: { action: string; reason?: string }) => {
|
||||
if (!name) throw new Error("No player selected");
|
||||
const res = await fetch("/api/players", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ action: params.action, player: name, reason: params.reason }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!res.ok) throw new Error(data.error);
|
||||
return data;
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
toast.success(data.response || "Done");
|
||||
setBanReason("");
|
||||
queryClient.invalidateQueries({ queryKey: ["players"] });
|
||||
},
|
||||
onError: (err) => toast.error("Action failed", { description: err.message }),
|
||||
});
|
||||
|
||||
if (!name) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-40 flex justify-end bg-black/40 backdrop-blur-[2px]"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={`Profile for ${name}`}
|
||||
onClick={(e) => {
|
||||
if (e.target === e.currentTarget) setName(null);
|
||||
}}
|
||||
>
|
||||
<aside className="h-full w-full sm:max-w-sm bg-card border-l border-border shadow-2xl flex flex-col animate-in slide-in-from-right duration-150">
|
||||
<header className="p-4 border-b border-border flex items-start gap-3">
|
||||
<PlayerAvatar name={name} size={48} interactive={false} />
|
||||
<div className="min-w-0 flex-1">
|
||||
<h2 className="text-base font-semibold truncate">{name}</h2>
|
||||
<div className="flex items-center gap-1.5 mt-1 flex-wrap">
|
||||
{isOnline && (
|
||||
<Badge className="text-xs px-1.5 py-0 bg-emerald-500/20 text-emerald-300 border border-emerald-500/30">
|
||||
Online
|
||||
</Badge>
|
||||
)}
|
||||
{isOp && (
|
||||
<Badge variant="secondary" className="text-xs px-1.5 py-0">
|
||||
Op
|
||||
</Badge>
|
||||
)}
|
||||
{isWhitelisted && (
|
||||
<Badge variant="secondary" className="text-xs px-1.5 py-0">
|
||||
Whitelisted
|
||||
</Badge>
|
||||
)}
|
||||
{isBanned && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-xs px-1.5 py-0 border-red-500/40 text-red-300"
|
||||
>
|
||||
Banned
|
||||
</Badge>
|
||||
)}
|
||||
{!isOp && !isWhitelisted && !isBanned && (
|
||||
<span className="text-xs text-muted-foreground">No roles</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
aria-label="Close"
|
||||
onClick={() => setName(null)}
|
||||
className="shrink-0"
|
||||
>
|
||||
✕
|
||||
</Button>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-4">
|
||||
{!authed ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Log in as admin to manage this player.
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
{bannedEntry?.reason && (
|
||||
<div>
|
||||
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1">
|
||||
Ban reason
|
||||
</p>
|
||||
<p className="text-sm text-red-300 break-words">
|
||||
{bannedEntry.reason}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button
|
||||
variant={isOp ? "outline" : "default"}
|
||||
onClick={() =>
|
||||
action.mutate({ action: isOp ? "deop" : "op" })
|
||||
}
|
||||
disabled={action.isPending}
|
||||
className="text-sm"
|
||||
>
|
||||
{isOp ? "Deop" : "Make Op"}
|
||||
</Button>
|
||||
<Button
|
||||
variant={isWhitelisted ? "outline" : "default"}
|
||||
onClick={() =>
|
||||
action.mutate({
|
||||
action: isWhitelisted ? "whitelist remove" : "whitelist add",
|
||||
})
|
||||
}
|
||||
disabled={action.isPending}
|
||||
className="text-sm"
|
||||
>
|
||||
{isWhitelisted ? "Remove whitelist" : "Add to whitelist"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
|
||||
{isBanned ? "Ban" : "Ban player"}
|
||||
</p>
|
||||
{isBanned ? (
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => action.mutate({ action: "pardon" })}
|
||||
disabled={action.isPending}
|
||||
className="w-full"
|
||||
>
|
||||
Pardon
|
||||
</Button>
|
||||
) : (
|
||||
<>
|
||||
<Input
|
||||
placeholder="Reason (optional)"
|
||||
value={banReason}
|
||||
onChange={(e) => setBanReason(e.target.value)}
|
||||
className="h-9 text-sm"
|
||||
/>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() =>
|
||||
action.mutate({ action: "ban", reason: banReason || undefined })
|
||||
}
|
||||
disabled={action.isPending}
|
||||
className="w-full"
|
||||
>
|
||||
Ban {name}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="text-xs text-muted-foreground space-y-1">
|
||||
<p>
|
||||
<span className="text-foreground font-medium">UUID:</span>{" "}
|
||||
<span className="font-mono break-all">
|
||||
{players.data?.ops.find((p) => p.name === name)?.uuid ||
|
||||
players.data?.whitelist.find((p) => p.name === name)?.uuid ||
|
||||
players.data?.banned.find((p) => p.name === name)?.uuid ||
|
||||
"—"}
|
||||
</span>
|
||||
</p>
|
||||
<p>
|
||||
Actions use RCON on the live server. Some commands take a
|
||||
moment to reflect.
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
lib/events.ts
Normal file
21
lib/events.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
export type AppEvents = {
|
||||
"player:open": { name: string };
|
||||
};
|
||||
|
||||
export function dispatchAppEvent<K extends keyof AppEvents>(
|
||||
name: K,
|
||||
detail: AppEvents[K]
|
||||
): void {
|
||||
if (typeof window === "undefined") return;
|
||||
window.dispatchEvent(new CustomEvent(name, { detail }));
|
||||
}
|
||||
|
||||
export function onAppEvent<K extends keyof AppEvents>(
|
||||
name: K,
|
||||
handler: (detail: AppEvents[K]) => void
|
||||
): () => void {
|
||||
if (typeof window === "undefined") return () => {};
|
||||
const listener = (e: Event) => handler((e as CustomEvent<AppEvents[K]>).detail);
|
||||
window.addEventListener(name, listener);
|
||||
return () => window.removeEventListener(name, listener);
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@ import {
|
|||
readdirSync,
|
||||
copyFileSync,
|
||||
rmSync,
|
||||
statSync,
|
||||
writeFileSync,
|
||||
readFileSync,
|
||||
unlinkSync,
|
||||
|
|
@ -11,6 +12,22 @@ import {
|
|||
import { join } from "path";
|
||||
import { MODS_DIR, CLIENT_MODS_DIR, MOD_METADATA_FILE } from "./constants";
|
||||
|
||||
function dirSize(dir: string): number {
|
||||
let total = 0;
|
||||
try {
|
||||
for (const entry of readdirSync(dir, { withFileTypes: true })) {
|
||||
const p = join(dir, entry.name);
|
||||
if (entry.isDirectory()) total += dirSize(p);
|
||||
else if (entry.isFile()) {
|
||||
try {
|
||||
total += statSync(p).size;
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
} catch {}
|
||||
return total;
|
||||
}
|
||||
|
||||
const SNAPSHOTS_DIR = "/home/minecraft/server/snapshots";
|
||||
const MAX_SNAPSHOTS = 10;
|
||||
|
||||
|
|
@ -19,6 +36,7 @@ export type SnapshotMeta = {
|
|||
createdAt: string;
|
||||
modCount: number;
|
||||
mods: string[];
|
||||
sizeBytes?: number;
|
||||
};
|
||||
|
||||
function ensureDir(dir: string) {
|
||||
|
|
@ -133,7 +151,8 @@ export function listSnapshots(): (SnapshotMeta & { dirName: string })[] {
|
|||
const meta = JSON.parse(
|
||||
readFileSync(join(SNAPSHOTS_DIR, dirName, "meta.json"), "utf8")
|
||||
) as SnapshotMeta;
|
||||
return { ...meta, dirName };
|
||||
const sizeBytes = dirSize(join(SNAPSHOTS_DIR, dirName));
|
||||
return { ...meta, dirName, sizeBytes };
|
||||
})
|
||||
.sort(
|
||||
(a, b) =>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue