feat(maestro): port the sidebar to React

Ports catalog.ts's tree renderer to components under
src/components/sidebar/, following docs/SIDEBAR.md: two-line cards
behind a 5px activity rail, adaptive meta line (duration, detail,
program, diff stat), collapsible folders, j/k walk, inline rename and a
right-click menu.

The nav walk reads a pure model (model.ts) rather than the DOM, so the
rule that an expanded folder header is skipped and a collapsed one is
not is testable without a render. Rail motion needs @keyframes, so it
stays in sidebar.css rather than the Tailwind config.

Closes #244
This commit is contained in:
Miguel Palhas
2026-09-09 00:21:13 +01:00
parent b286323c9c
commit e8e98baf4d
13 changed files with 1343 additions and 0 deletions
+49
View File
@@ -0,0 +1,49 @@
/* Motion for the activity rail (docs/SIDEBAR.md): a hard blink while
AwaitingInput, a fast flash while Error. Active and Idle are solid and
still — colour alone is the signal. Kept as real CSS rather than Tailwind
utilities because both need @keyframes of their own. */
@keyframes maestro-rail-blink {
0%,
50% {
opacity: 1;
}
50.01%,
100% {
opacity: 0;
}
}
@keyframes maestro-rail-flash {
0%,
100% {
opacity: 1;
}
15% {
opacity: 0.25;
}
30% {
opacity: 1;
}
45% {
opacity: 0.25;
}
60% {
opacity: 1;
}
}
.rail-blink {
animation: maestro-rail-blink 1.2s steps(1) infinite;
}
.rail-flash {
animation: maestro-rail-flash 1.4s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.rail-blink,
.rail-flash {
animation: none;
}
}