7034b55288
Move terminal access from the header into a footer launcher and resizable bottom panel. - Add a TerminalLauncher footer control with dock, resize, collapse, and pop-out affordances. - Extend TerminalModal to support bottom-panel layout, drag resizing, and persistent panel state. - Remove terminal/script controls from header overflow while preserving compact Mailbox and tool ordering. - Update executor footer spacing, dashboard docs, changeset, and focused terminal/header tests. Files changed: .changeset/fn-6887-terminal-footer-panel.md | 5 + docs/dashboard-guide.md | 2 + packages/dashboard/app/App.tsx | 6 +- .../app/__tests__/tablet-header-controls.test.tsx | 95 +--- .../dashboard/app/components/ExecutorStatusBar.css | 8 + .../dashboard/app/components/ExecutorStatusBar.tsx | 27 +- packages/dashboard/app/components/Header.css | 27 - packages/dashboard/app/components/Header.tsx | 549 +-------------------- .../dashboard/app/components/TerminalLauncher.css | 180 +++++++ .../dashboard/app/components/TerminalLauncher.tsx | 306 ++++++++++++ .../dashboard/app/components/TerminalModal.css | 117 +++++ .../dashboard/app/components/TerminalModal.tsx | 360 +++++++++++++- .../__tests__/ExecutorStatusBar.test.tsx | 52 +- .../app/components/__tests__/Header.test.tsx | 304 ++---------- .../components/__tests__/TerminalLauncher.test.tsx | 57 +++ .../components/__tests__/TerminalModal.test.tsx | 111 +++++ 16 files changed, 1282 insertions(+), 924 deletions(-) Fusion-Task-Id: FN-6887 Fusion-Task-Lineage: 755f28b1-1ba5-43f8-b13c-264e31507658
181 lines
3.8 KiB
CSS
181 lines
3.8 KiB
CSS
:root {
|
|
--terminal-launcher-menu-min-width: calc(var(--space-xl) * 5);
|
|
--terminal-launcher-menu-width: calc(var(--space-xl) * 8.125);
|
|
--terminal-launcher-menu-height: calc(var(--space-xl) * 8.75);
|
|
}
|
|
|
|
.terminal-launcher {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-md);
|
|
background: var(--bg);
|
|
}
|
|
|
|
.terminal-launcher--footer {
|
|
background: transparent;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.terminal-launcher__main {
|
|
min-height: var(--control-height-sm);
|
|
gap: var(--space-xs);
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.terminal-launcher__main:hover,
|
|
.terminal-launcher__chevron:hover {
|
|
color: var(--text);
|
|
}
|
|
|
|
.terminal-launcher__label {
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.terminal-launcher__chevron {
|
|
min-height: var(--control-height-sm);
|
|
width: var(--control-height-sm);
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.terminal-launcher__divider {
|
|
width: var(--border-width, 1px);
|
|
height: var(--space-md);
|
|
background: var(--border);
|
|
}
|
|
|
|
.quick-scripts-dropdown__trigger-chevron {
|
|
color: currentColor;
|
|
transition: transform var(--transition-fast);
|
|
}
|
|
|
|
.quick-scripts-dropdown__trigger-chevron.rotate {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.quick-scripts-dropdown__menu {
|
|
position: absolute;
|
|
top: calc(100% + var(--space-xs));
|
|
right: 0;
|
|
min-width: var(--terminal-launcher-menu-width);
|
|
max-height: min(70vh, calc(var(--space-xl) * 11.25));
|
|
overflow-y: auto;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
box-shadow: var(--shadow-lg);
|
|
z-index: var(--z-popover);
|
|
padding: var(--space-sm);
|
|
}
|
|
|
|
.quick-scripts-dropdown__loading,
|
|
.quick-scripts-dropdown__empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
padding: var(--space-lg);
|
|
color: var(--text-muted);
|
|
text-align: center;
|
|
}
|
|
|
|
.quick-scripts-dropdown__empty-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.quick-scripts-dropdown__empty p {
|
|
margin: 0;
|
|
color: var(--text);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.quick-scripts-dropdown__empty-action {
|
|
min-height: var(--control-height-sm);
|
|
}
|
|
|
|
.quick-scripts-dropdown__list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xs);
|
|
}
|
|
|
|
.quick-scripts-dropdown__item,
|
|
.quick-scripts-dropdown__manage {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-sm);
|
|
width: 100%;
|
|
padding: var(--space-sm);
|
|
border: none;
|
|
border-radius: var(--radius-md);
|
|
background: transparent;
|
|
color: var(--text);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.quick-scripts-dropdown__item:hover,
|
|
.quick-scripts-dropdown__item.highlighted,
|
|
.quick-scripts-dropdown__manage:hover,
|
|
.quick-scripts-dropdown__manage.highlighted {
|
|
background: var(--card);
|
|
}
|
|
|
|
.quick-scripts-dropdown__item-icon,
|
|
.quick-scripts-dropdown__manage svg {
|
|
flex-shrink: 0;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.quick-scripts-dropdown__item-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-xxs);
|
|
min-width: 0;
|
|
}
|
|
|
|
.quick-scripts-dropdown__item-name {
|
|
color: var(--text);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.quick-scripts-dropdown__item-command {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-size-xs);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.quick-scripts-dropdown__footer {
|
|
padding-top: var(--space-xs);
|
|
margin-top: var(--space-xs);
|
|
border-top: 1px solid var(--border);
|
|
}
|
|
|
|
.quick-scripts-dropdown__manage {
|
|
color: var(--text-muted);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.quick-scripts-dropdown__manage span {
|
|
flex: 1;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.terminal-launcher {
|
|
display: none;
|
|
}
|
|
}
|