feat(ui): flat nav rail, compact assistant, responsive layouts
Implements the redesign from docs/ui-audit.html. Rearrangement only — no
feature was removed; every control that moved kept its handler, and the
gates that used to hide things now grey them out instead.
Navigation
* The rail is one flat list: the five Workspace sub-views sit at the top
level instead of behind an accordion, with Dashboard/Monitoring pinned
at the foot and Settings below them.
* Cowork and GraphRAG stay listed and greyed while no project is
selected, rather than vanishing and resizing the menu under the user.
* Monitoring keeps its eight sub-views in its own tab strip (unhidden)
instead of doubling the rail's length.
* _goto now moves the highlight itself, fixing a long-standing bug where
programmatic navigation left the rail pointing at the previous screen.
* Rail header gained the project picker and "New chat"; RECENTS lists the
active project's threads. Both are second views of existing state — the
Cowork toolbar button and the full History panel are untouched.
* Provider / language / theme moved from the top bar to an account row at
the foot of the rail (same widgets, same signals).
Screens
* Co4E: the flow tab strip is gone (per the design); Flow Status became a
toolbar toggle with its own way back, and the three icon-only tabs became
four labelled, foldable sections in one column. One flow open at a time
is the one capability this costs; background runs are unaffected.
* Dashboard: header split into two rows; cost promoted to a hero card.
* Monitoring Overview: one scrolling column of titled sections; the model
price table got its own full-width section instead of sharing a row with
the CPU meters.
* Settings and Task editor gained a section index down the left.
* Help dock: 84x64 launcher + chevron became one 26px dot that expands to
a labelled pill on hover; "hide to the edge" moved into the panel's menu.
Layout
* The window's minimum width dropped from 1453px to 768px. The main cause
was a QTabWidget taking its minimum from the widest page even when that
page is hidden, so Co4E was forcing Project and Cowork wide.
* Secondary panes fold themselves on a narrow window and restore when it
grows, never overriding a fold the user made.
* The long dialogs no longer scroll sideways at any font size.
Verification: tools/check_*.py build a real MainWindow offscreen against a
copy of ~/.cowork_local with the schedulers no-oped. check_design_parity.py
reads its checklist straight from the audit page's own proposals.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -372,6 +372,55 @@ QWidget#navWrap QTreeWidget::item:selected, QWidget#navWrap QListWidget::item:se
|
||||
background: $nav_selected; color: $text;
|
||||
border-left: 2px solid $accent; font-weight: 600;
|
||||
}
|
||||
/* Rows the project gate is holding shut: still listed, visibly not open. */
|
||||
QWidget#navWrap QTreeWidget::item:disabled { color: $text_faint; }
|
||||
/* The pinned bottom group (Dashboard, Monitoring) — one hairline separates it
|
||||
from the list above so "occasional" reads apart from "everyday". */
|
||||
QTreeWidget#navrailBottom { border-top: 1px solid $nav_border; }
|
||||
/* Table of contents down the left of the long dialogs (Settings, Task editor). */
|
||||
QListWidget#sectionIndex { background: $surface; border-right: 1px solid $border; }
|
||||
QListWidget#sectionIndex::item { padding: 7px 10px; border-radius: ${radius}px; }
|
||||
QListWidget#sectionIndex::item:hover { background: $hover; }
|
||||
QListWidget#sectionIndex::item:selected {
|
||||
background: $nav_selected; color: $text; font-weight: 600;
|
||||
}
|
||||
/* Co4E sidebar section headings — same quiet caps as the rail's RECENTS, so
|
||||
"which list am I looking at" is answered on screen, not in a tooltip. */
|
||||
QPushButton#co4eSectionHdr {
|
||||
color: $text_faint; font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
|
||||
background: transparent; border: none; text-align: left; padding: 2px 0;
|
||||
}
|
||||
QPushButton#co4eSectionHdr:hover { color: $text; }
|
||||
/* Account row at the foot of the rail: who you are + the settings that follow
|
||||
you (provider, language, theme). Separated by a hairline like the group above. */
|
||||
QWidget#navAccount { border-top: 1px solid $nav_border; }
|
||||
QWidget#navAccount QComboBox {
|
||||
background: $surface_raised; border: 1px solid $nav_border; color: $text;
|
||||
padding: 3px 6px; border-radius: ${radius}px;
|
||||
}
|
||||
/* RECENTS section label — quiet, so the thread titles under it read first. */
|
||||
QLabel#navSectionHdr {
|
||||
color: $text_faint; font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
|
||||
padding: 8px 8px 2px 8px; background: transparent;
|
||||
}
|
||||
QTreeWidget#navRecents { border-top: 1px solid $nav_border; }
|
||||
/* Rail header — the primary action, so it is the one filled button up there. */
|
||||
QPushButton#navNewChatBtn {
|
||||
background: $accent_solid; color: #FFFFFF; border: none; font-weight: 600;
|
||||
padding: 7px 10px; border-radius: ${radius}px; text-align: left;
|
||||
}
|
||||
QPushButton#navNewChatBtn:hover { background: $accent_solid_hover; }
|
||||
QPushButton#navNewChatBtn:disabled { background: $border_strong; color: $text_faint; }
|
||||
QComboBox#navProjectPick {
|
||||
background: $surface_raised; border: 1px solid $nav_border; color: $text;
|
||||
padding: 4px 8px; border-radius: ${radius}px;
|
||||
}
|
||||
QPushButton#navSettingsBtn {
|
||||
background: transparent; border: none; color: $text_muted;
|
||||
padding: 6px 8px; text-align: left; border-radius: ${radius}px; margin: 2px 6px 6px 6px;
|
||||
}
|
||||
QPushButton#navSettingsBtn:hover { background: $nav_hover; color: $text; }
|
||||
QPushButton#navSettingsBtn:pressed { background: $active; }
|
||||
|
||||
/* ---- surfaces --------------------------------------------------------- */
|
||||
QGroupBox {
|
||||
|
||||
Reference in New Issue
Block a user