UX/UI/perf pass: admin tabs, theme toggle, log polish, mod search, JAR cache
- Admin page split into tabs (Server/Players/Chat/Mods/Backups/Logs) with hash + localStorage persistence; inactive tabs no longer mount. - Log viewer: level color-coding, search, level filter chips, auto-scroll toggle, copy button, visible-line count. - Installed mods list: search field + side filter (all/both/server/client) with live count; public ModList gets skeleton + empty states and search. - Theme toggle with no-flash inline init, localStorage + system preference. - Layout: full OG / Twitter metadata, title template, keywords, dual-theme themeColor, metadataBase. - lib/mods.ts: per-jar mtime+size parse cache (cold 6s -> warm ~45ms on /api/mods for the full mod list); cache eviction on mod removal. - ChatBridge polling eased 3s -> 5s with 2s stale window. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
b6cf8c7cdc
commit
6c91f7fef0
10 changed files with 490 additions and 89 deletions
|
|
@ -1,8 +1,9 @@
|
|||
"use client";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
import { useMemo, useRef, useEffect, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
|
|
@ -11,11 +12,36 @@ import {
|
|||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
|
||||
type Level = "ERROR" | "WARN" | "INFO" | "DEBUG" | "OTHER";
|
||||
|
||||
const LEVEL_ORDER: Level[] = ["ERROR", "WARN", "INFO", "DEBUG", "OTHER"];
|
||||
|
||||
const levelClass: Record<Level, string> = {
|
||||
ERROR: "text-red-300",
|
||||
WARN: "text-amber-300",
|
||||
INFO: "text-muted-foreground",
|
||||
DEBUG: "text-blue-300/70",
|
||||
OTHER: "text-muted-foreground/70",
|
||||
};
|
||||
|
||||
function detectLevel(line: string): Level {
|
||||
if (/\b(ERROR|FATAL|SEVERE|Exception|Traceback)\b/i.test(line)) return "ERROR";
|
||||
if (/\b(WARN|WARNING)\b/i.test(line)) return "WARN";
|
||||
if (/\bINFO\b/i.test(line)) return "INFO";
|
||||
if (/\bDEBUG\b/i.test(line)) return "DEBUG";
|
||||
return "OTHER";
|
||||
}
|
||||
|
||||
export function LogViewer() {
|
||||
const logRef = useRef<HTMLPreElement>(null);
|
||||
const logRef = useRef<HTMLDivElement>(null);
|
||||
const [autoRefresh, setAutoRefresh] = useState(false);
|
||||
const [lines, setLines] = useState(100);
|
||||
const [hasLoaded, setHasLoaded] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
const [levelFilter, setLevelFilter] = useState<Set<Level>>(
|
||||
new Set(LEVEL_ORDER)
|
||||
);
|
||||
const [autoScroll, setAutoScroll] = useState(true);
|
||||
const [copied, setCopied] = useState(false);
|
||||
const autoScrollRef = useRef(true);
|
||||
|
||||
const { data, refetch, isFetching, isError, error } = useQuery<{ logs: string }>({
|
||||
|
|
@ -25,16 +51,31 @@ export function LogViewer() {
|
|||
if (!res.ok) throw new Error(`Failed to load logs (${res.status})`);
|
||||
return res.json();
|
||||
},
|
||||
enabled: hasLoaded,
|
||||
refetchInterval: autoRefresh ? 3000 : false,
|
||||
});
|
||||
|
||||
// Auto-scroll only if user is near the bottom
|
||||
const parsed = useMemo(() => {
|
||||
if (!data?.logs) return [] as { line: string; level: Level }[];
|
||||
return data.logs
|
||||
.split("\n")
|
||||
.filter((l) => l.length > 0)
|
||||
.map((line) => ({ line, level: detectLevel(line) }));
|
||||
}, [data?.logs]);
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const q = search.trim().toLowerCase();
|
||||
return parsed.filter(
|
||||
(r) =>
|
||||
levelFilter.has(r.level) &&
|
||||
(!q || r.line.toLowerCase().includes(q))
|
||||
);
|
||||
}, [parsed, search, levelFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
if (logRef.current && autoScrollRef.current) {
|
||||
if (autoScroll && logRef.current && autoScrollRef.current) {
|
||||
logRef.current.scrollTop = logRef.current.scrollHeight;
|
||||
}
|
||||
}, [data]);
|
||||
}, [filtered, autoScroll]);
|
||||
|
||||
const handleScroll = () => {
|
||||
if (!logRef.current) return;
|
||||
|
|
@ -42,10 +83,22 @@ export function LogViewer() {
|
|||
autoScrollRef.current = scrollHeight - scrollTop - clientHeight < 80;
|
||||
};
|
||||
|
||||
// Fetch on mount
|
||||
useEffect(() => {
|
||||
setHasLoaded(true);
|
||||
}, []);
|
||||
const toggleLevel = (lvl: Level) => {
|
||||
setLevelFilter((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(lvl)) next.delete(lvl);
|
||||
else next.add(lvl);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const copyAll = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(filtered.map((r) => r.line).join("\n"));
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 1500);
|
||||
} catch {}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
|
|
@ -55,14 +108,14 @@ export function LogViewer() {
|
|||
<CardTitle>Console Logs</CardTitle>
|
||||
<CardDescription>Server output from journalctl</CardDescription>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<select
|
||||
value={lines}
|
||||
onChange={(e) => {
|
||||
setLines(Number(e.target.value));
|
||||
setTimeout(() => refetch(), 50);
|
||||
}}
|
||||
className="h-10 rounded-md border border-input bg-muted px-2 text-sm text-foreground focus:outline-none"
|
||||
className="h-9 rounded-md border border-input bg-muted px-2 text-sm text-foreground focus:outline-none"
|
||||
>
|
||||
<option value={50}>50 lines</option>
|
||||
<option value={100}>100 lines</option>
|
||||
|
|
@ -89,19 +142,77 @@ export function LogViewer() {
|
|||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2 pt-3">
|
||||
<Input
|
||||
placeholder="Search logs..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="h-8 text-sm max-w-[220px]"
|
||||
/>
|
||||
<div className="flex gap-1">
|
||||
{LEVEL_ORDER.map((lvl) => {
|
||||
const active = levelFilter.has(lvl);
|
||||
return (
|
||||
<button
|
||||
key={lvl}
|
||||
onClick={() => toggleLevel(lvl)}
|
||||
className={`text-[10px] font-semibold uppercase rounded px-2 py-1 border transition ${
|
||||
active
|
||||
? `${levelClass[lvl]} border-current/40 bg-muted`
|
||||
: "text-muted-foreground/40 border-transparent hover:text-muted-foreground"
|
||||
}`}
|
||||
>
|
||||
{lvl}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<label className="flex items-center gap-1.5 text-xs text-muted-foreground ml-auto">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={autoScroll}
|
||||
onChange={(e) => setAutoScroll(e.target.checked)}
|
||||
className="h-3.5 w-3.5 accent-primary"
|
||||
/>
|
||||
Auto-scroll
|
||||
</label>
|
||||
<Button size="sm" variant="ghost" onClick={copyAll} className="text-xs h-8">
|
||||
{copied ? "Copied" : "Copy"}
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<pre
|
||||
<div
|
||||
ref={logRef}
|
||||
onScroll={handleScroll}
|
||||
className={`rounded-lg border bg-background p-3 sm:p-4 h-[300px] sm:h-[450px] overflow-y-auto font-mono text-xs leading-relaxed whitespace-pre-wrap break-all ${
|
||||
isError ? "border-red-500/30 text-red-300" : "border-border text-muted-foreground"
|
||||
className={`rounded-lg border bg-background p-3 sm:p-4 h-[300px] sm:h-[450px] overflow-y-auto font-mono text-xs leading-relaxed ${
|
||||
isError ? "border-red-500/30" : "border-border"
|
||||
}`}
|
||||
>
|
||||
{isError
|
||||
? `Failed to load logs: ${error instanceof Error ? error.message : "unknown error"}`
|
||||
: data?.logs || (isFetching ? "Loading logs..." : "No logs available.")}
|
||||
</pre>
|
||||
{isError ? (
|
||||
<p className="text-red-300">
|
||||
Failed to load logs:{" "}
|
||||
{error instanceof Error ? error.message : "unknown error"}
|
||||
</p>
|
||||
) : filtered.length === 0 ? (
|
||||
<p className="text-muted-foreground">
|
||||
{isFetching ? "Loading logs..." : "No log lines match the current filter."}
|
||||
</p>
|
||||
) : (
|
||||
filtered.map((r, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`whitespace-pre-wrap break-all ${levelClass[r.level]}`}
|
||||
>
|
||||
{r.line}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<p className="text-[10px] text-muted-foreground mt-2 tabular-nums">
|
||||
{filtered.length} / {parsed.length} lines
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue