hurkicorgi
19d66c2de6
- 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>
60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
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();
|
|
|
|
const inner =
|
|
failed || !name ? (
|
|
<div
|
|
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 (
|
|
<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>
|
|
);
|
|
}
|