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
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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue