feat(ui): add a desktop panel rail to each sidebar

Each side stack hosts a Vue rail listing its panels; selecting one opens it
through PanelChrome. The shell owns one Vue runtime and Pinia instance, and a
panel store mirrors each side's panels from the DOM. The rail hides with its
stack, in Cockpit, clean view and recording, and on phones. Panels without a
catalog entry get a generic item, and Data Layers leaves the rail while the
f shortcut hides it.
This commit is contained in:
Sameh Khamis committed 2026-10-30 16:41:29 -07:00
1 parent eed7657516
commit 3d5d3ef014
29 files changed
+627 -32

No files matched your search

+27
View File
@@ -263,6 +263,33 @@
#left-panel-stack.layout-exclusive > [data-panel-id].collapsed {
display: none;
}
/* Panel rails (src/ui/panelNavigation.js). Each rail lives inside its stack,
so it shows and hides with the stack, and floats in the screen-edge gutter. */
.gev-panel-rail {
position: absolute;
top: 0;
z-index: 1;
pointer-events: auto;
}
.gev-panel-rail--left {
right: calc(100% + 6px);
}
.gev-panel-rail--right {
left: calc(100% + 6px);
}
body.mobile-shell #left-panel-stack > .gev-panel-rail,
body.mobile-shell #right-context-rail > .gev-panel-rail,
body.cockpit-mode .gev-panel-rail {
display: none;
}
/* Clean view and recording hide the panels one by one, not their stacks. */
body.ui-clean-view .gev-panel-rail,
body.recording-mode .gev-panel-rail {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
#right-context-rail.layout-focus > [data-panel-id].collapsed {
display: block;
flex: 0 0 auto;