feat(diagnostics): walk the log lines from the keyboard; name the console "Server log"

Both log viewers put their lines in a NavGrid: j/k (and the arrows) step
from line to line, and Enter opens one exactly as a click does (the line's
button is its `data-nav-open`). A focused line is named by its code and
message.

The console's nav entry is "Szervernapló" / "Server log", its page title:
"Diagnosztika" was already the Settings tab that holds the user's own log,
and two places with one name read as one place.
This commit is contained in:
2026-09-19 02:02:45 +02:00
parent 8cfab498cf
commit 142593083f
6 changed files with 77 additions and 49 deletions
+10 -1
View File
@@ -1,10 +1,12 @@
import type { ReactNode } from "react";
import type { Level } from "../lib/log";
import { navItemAttrs } from "../lib/listNav";
// One log line as both log viewers draw it — "Saját napló" (this tab's ring) and the admin
// diagnostics console (the server's stored log): time, level, event code, message, and the line opens
// in place to whatever detail its screen has. One component, so a level reads the same on both.
// Inside a NavGrid the keyboard walks the lines (`j`/`k`) and Enter opens one, as a click does.
const LEVEL_TAG: Record<Level, { text: string; className: string }> = {
TRACE: { text: "TRACE", className: "text-muted opacity-80" },
@@ -30,6 +32,7 @@ export default function LogLine({
open,
onToggle,
title,
navIndex,
children,
}: {
ts: string;
@@ -40,14 +43,20 @@ export default function LogLine({
onToggle: () => void;
/** The row button's tooltip — the admin console puts the full date there. */
title?: string;
/** The line's place in its NavGrid. */
navIndex: number;
/** The detail shown while the line is open. */
children: ReactNode;
}) {
const tag = LEVEL_TAG[level];
return (
<div className="border-b border-border/50 last:border-b-0">
<div
className="border-b border-border/50 last:border-b-0"
{...navItemAttrs(navIndex, `${event} ${msg}`)}
>
<button
type="button"
data-nav-open
aria-expanded={open}
onClick={onToggle}
title={title}