Make Logs rows keyboard-operable and fix minute rounding

Rows open with Enter or Space and expose aria-expanded, so the View trace
action is reachable without a mouse. Durations round to whole seconds before
splitting, so 119.6 s reads 2m 00s instead of 1m 60s.
This commit is contained in:
arc53-machine committed 2026-09-23 18:11:19 +01:00
1 parent efec1a2f83
commit 8157bcf3bf
3 files changed
+14 -2

No files matched your search

+9
View File
@@ -429,7 +429,16 @@ function Log({
return (
<div className="group dark:hover:bg-accent hover:bg-muted w-full rounded-xl bg-transparent">
<div
role="button"
tabIndex={0}
aria-expanded={isOpen}
onClick={() => onToggle(log.id)}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
onToggle(log.id);
}
}}
className={`text-foreground flex cursor-pointer flex-row items-start gap-2 p-2 px-4 py-3 ${
isOpen ? 'dark:bg-background rounded-t-xl bg-[#F1F1F1]' : ''
}`}
@@ -94,6 +94,7 @@ describe('formatDurationMs', () => {
[1234, '1.23 s'],
[15432, '15.4 s'],
[65000, '1m 05s'],
[119_600, '2m 00s'],
])('%s -> %s', (ms, expected) => {
expect(formatDurationMs(ms)).toBe(expected);
});
+4 -2
View File
@@ -78,8 +78,10 @@ export function formatDurationMs(ms: number | null | undefined): string {
if (ms < 1000) return `${Math.round(ms)} ms`;
if (ms < 10_000) return `${(ms / 1000).toFixed(2)} s`;
if (ms < 60_000) return `${(ms / 1000).toFixed(1)} s`;
const minutes = Math.floor(ms / 60_000);
const seconds = Math.round((ms % 60_000) / 1000);
// Round to whole seconds before splitting, so 119.6 s reads 2m 00s, not 1m 60s.
const totalSeconds = Math.round(ms / 1000);
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;
return `${minutes}m ${String(seconds).padStart(2, '0')}s`;
}