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:
@@ -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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user