Skip to content

UI: neutral EDA redesign (tokens, docked chrome, tabbed dock, dense tables) - #6

Merged
andrejvysny merged 12 commits into
masterfrom
ui/neutral-eda-redesign
Sep 6, 2026
Merged

UI: neutral EDA redesign (tokens, docked chrome, tabbed dock, dense tables)#6
andrejvysny merged 12 commits into
masterfrom
ui/neutral-eda-redesign

Conversation

@claude

@claude claude Bot commented Sep 5, 2026

Copy link
Copy Markdown

Summary

Refactors the desktop UI to the neutral EDA design from the Claude Design handoff (2a PCB shell, 3a Schematic, 3b Library, 3c BOM, 3d Home, 2b token sheet): violet chrome and pill geometry are retired for a near-black/warm-neutral token system with IBM Plex, docked toolbars, one tabbed right dock (Properties · DRC · Assistant), a layer tab strip, dense tables and a segmented status bar. Behaviour is unchanged — every callback, store, hotkey, persisted key, drag MIME contract and Playwright accessible name was preserved (see PLAN.md for the contract, run log and follow-ups).

Type of change

  • Bug fix
  • Feature
  • Refactor / cleanup
  • Docs
  • Test / CI

Test plan

  • npm run typecheck — no new errors. Note: root tsc -b already fails on master with 36 pre-existing errors in assistant/**, library/backend/** and core/backend/tests (AiProviderKind lacks "openpcb-cloud"); this branch adds none. Verified with tsc -p tsconfig.modules.json filtered to core/designer/library/shared frontend (empty) and the frontend workspace tsc --noEmit (exit 0).
  • npm run gen:check — no generated files touched
  • npm run test:backend — backend untouched
  • npm run test:react — 48 files / 341 tests (baseline 47 / 326; +15 for the new dock-prefs migration test)
  • npm run test:e2e — not run here (needs Electron/Chromium harness); selectors audited against the diff. Two specs updated because the Library now defaults to the table view: builtin-footprints.spec.ts and 3d-preview.spec.ts open components via library-component-row-* + double-click.
  • Manual smoke test — backend + Vite booted in the container and Home, Library (row selected), Schematic, PCB (with the Route parameter row), BOM and DRC were captured with Playwright in both themes; structure matches the mocks and light theme has parity.
  • npm run build:frontend — succeeds (pre-existing chunk-size warning only)

Notes for reviewers

Commits are one per task and reviewable in order: T1 tokens/fonts/docs → T2 shared primitives → T3 app shell → T7 BOM+Home → T6 Library → T4 designer shell + PCB → T8a PCB cleanup → T5 schematic.

  • Token foundation (src/core/frontend/src/index.css): the design's @theme + light/dark tokens, compatibility aliases for the old semantic names, and — as a documented stopgap — Tailwind's slate-*/violet-* scales and rounded-* radii remapped so the ~100 not-yet-migrated files (assistant, knowledge, settings panels, import wizard, comment popups) render neutral and flat. Follow-up: migrate them to semantic utilities.
  • Right dock consolidation (DesignerRightDock, stores/designer-dock-prefs.ts): the three legacy docks (inspector / DRC / chat) become one tabbed dock; legacy localStorage keys are read once and migrated (unit-tested).
  • Portal slots, not prop-lifting: PcbCanvas keeps every prop; it portals the toolbar, parameter row (Route/Tune/Bundle HUD content), layer strip and Properties body into slots Space.tsx renders — the same pattern the Layers panel already used.
  • Cursor readout goes through pcb-cursor-store so pointer moves never re-render the editor shell.
  • Omitted by decision, not oversight (no backing data): Sheets, design tags/activity, board-size/layer columns on Home, ERC dock tab, DRC waive/severity footer, BOM Group-by/Description/Stock, Library Pins/Mount columns, "Open…" file dialog.
  • Out of scope: the canvas palette (schematic wire colours, PCB layer colours, selection colour) lives in @openpcb/r3f-eda-canvas (OpenPCB-app/shared) — design values are listed in PLAN.md §9 for a follow-up there. Website (4a) is a separate repo.
  • docs/design/design-tokens.md was rewritten for the new system; ui-backlog.md notes that its mockups predate the redesign.

🤖 Generated with Claude Code

https://claude.ai/code/session_01Np3Vgtux8ZgiKcc75wYrZE

Generated by Claude Code

claude added 12 commits September 5, 2026 02:44
@claude
Add PLAN.md for the neutral EDA UI redesign
c75dc49 
Contract for the unattended implementation run: decisions, interfaces,
task breakdown with tiers, verification commands and follow-ups.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Np3Vgtux8ZgiKcc75wYrZE
@claude
T1: neutral EDA design tokens, bundled IBM Plex, docs
ab0c0f4 
Replace the slate/violet theme in index.css with the handoff token sheet
(light + dark), keep compatibility aliases for pre-redesign semantic
names, and remap Tailwind's slate/violet scales and radius scale so
unmigrated files render neutral and flat. Bundle IBM Plex Sans/Mono via
@fontsource (Electron runs offline). Rewrite docs/design/design-tokens.md
for the new system.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Np3Vgtux8ZgiKcc75wYrZE
@claude
T2: shared UI primitives on the neutral token sheet
ea10c37 
Restyle button/card/chip/pill/icon-button/tabs/tooltip/menus/textarea to
the design tokens (22px controls, 2px radii, no violet) with additive-only
API changes, and add the shared building blocks the redesigned screens
use: PanelSectionHeader, PropertyGrid/PropertyRow, TableHeaderRow/TableRow,
SegmentedControl, SearchField, Checkbox, StatusDot, SeverityDiamond,
DockTabs, StatusBar/StatusSegment, Toolbar/ToolbarButton.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Np3Vgtux8ZgiKcc75wYrZE
@claude
PLAN.md: run log through wave 2 launch
3ca81f7 
Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Np3Vgtux8ZgiKcc75wYrZE
@claude
T3: app shell on the neutral tokens
a2e5265 
Left rail restyled to the 80px icon+label design (72px items, 20px 1.5
stroke icons, 10px labels, neutral active state); title bar, theme toggle,
app context menu, dialog/scroll-area, module/settings screens and settings
panels moved from raw slate/violet classes to semantic tokens. Electron
window-controls-overlay colours updated to the new rail values.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Np3Vgtux8ZgiKcc75wYrZE
@claude
T7: BOM view and Home screen on the neutral design
186c592 
BOM: tier dot instead of row tint/stripe, Designators/Value/Footprint/
Qty/MPN/Unit/Ext columns, in-table totals row, 22px status footer, and
the sourcing rail as a property grid with a match-tier legend. Autosave,
export, bulk DNP, sorting and cross-probe logic unchanged.
Home: 34px header, 200px filters sidebar whose footer carries the
cloud-sync state ("Sign in to sync"), 64px list rows with thumbnails,
300px design-detail panel, status footer; grid view kept behind a toggle.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Np3Vgtux8ZgiKcc75wYrZE
@claude
T6: Library as a dense table with a sticky preview pane
fa3e098 
Table is the default view (Grid kept behind a toggle persisted in
localStorage); row click fills a 380px preview pane (symbol/footprint
previews, part fields, footprints, pins) via an extracted
useComponentDetail hook; double-click/Enter opens the unchanged detail
page. Rows carry the same drag payload as cards through a shared helper.
Facets, chips, tag inputs and the detail page move to semantic tokens.
E2E specs now open components via the row testid + double-click.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Np3Vgtux8ZgiKcc75wYrZE
@claude
T4: designer shell and PCB editor on the neutral design
0ef7b65 
Docked chrome via portal slots: 34px header with underline view tabs,
30px toolbar, contextual 28px parameter row hosting the route/tune/bundle
HUD content, 260px left panel, one tabbed right dock (Properties | DRC |
Assistant) with a localStorage migration from the three legacy docks,
a layer tab strip under the canvas, and a 22px status bar (cursor X/Y via
a dedicated store so pointer moves never re-render the shell). New
PcbPropertiesPanel renders board settings when idle, footprint details on
selection, and the former floating free-primitive editors. Every hotkey,
resize handler, persisted key, HUD editor contract and e2e accessible
name is preserved; ToolbarButton gains an optional title override.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Np3Vgtux8ZgiKcc75wYrZE
@claude
PLAN.md: run log through T4
7d77fd2 
Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Np3Vgtux8ZgiKcc75wYrZE
@claude
T8a: PCB overlays on tokens, drop dead toolbar props
129138b 
Remove the PcbTopToolbar props the docked toolbar no longer reads and the
unused boardPanelTarget portal; move the remaining raw palette classes in
PcbCanvas overlays (hint strips, badges, cursor readouts, DRC tooltip,
toasts) and the PCB dialogs/modals/autolayout UI to semantic tokens.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Np3Vgtux8ZgiKcc75wYrZE
@claude
T5: schematic editor on the neutral design; drop Library Mount column
a593e12 
Schematic: docked 30px toolbar (exact former accessible names), Outline
panel with section header, filter field, segmented Parts/Nets/Labels and
22px table rows, inspector panels as property grids inside the shared
right dock with a Sheet summary when nothing is selected, and a readable
status-bar selection summary. Library: remove the Mount column — the list
DTO carries no mount type, so it rendered a dash on every row.

Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Np3Vgtux8ZgiKcc75wYrZE
@claude
PLAN.md: final run log, gates and follow-ups
41bffa9 
Co-Authored-By: Claude Fable 5.1 <[email protected]>
Claude-Session: https://claude.ai/code/session_01Np3Vgtux8ZgiKcc75wYrZE
@andrejvysny
andrejvysny merged commit 41bffa9 into master Sep 6, 2026
1 of 2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@andrejvysny @claude