From 539e43195ff45c4249b7b1916ebfd24574a858e7 Mon Sep 17 00:00:00 2001 From: "alexei.dolgolyov" Date: Fri, 24 Apr 2026 15:46:47 +0300 Subject: [PATCH] feat(ui): Lumenworks studio-console WebUI redesign MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Full-app UI/UX refresh committing to a tech-instrument / studio-console aesthetic inspired by hardware synths, Eurorack panels, and DAW layouts. Design tokens and fonts: - Embed Manrope (body), JetBrains Mono (labels/metrics), Big Shoulders Display (numeric readouts) as local .woff2 variable fonts with latin + latin-ext + cyrillic + cyrillic-ext subsets via unicode-range. - New Lumenworks token layer in base.css: --lux-bg-0..3, --lux-line(-bold), --lux-ink(-dim/-mute/-faint), --ch-signal/-cyan/-magenta/-amber/-coral/ -violet channel palette, --lux-signal-glow, --lux-shadow-rack, all theme-aware for dark + light. Existing tokens untouched for compat. Shell (header + sidebar): - Header rebuilt as a 3-column CSS-grid transport bar (brand | center | toolbar) with a glowing LED brand mark rendered via pseudo-elements on .header-title. Gradient channel-color rule under the bottom border. - New sidebar.css introduces a vertical channel-strip nav. Active tab gets a glowing left stripe + radial tint + LED pip. .sidebar-foot contains a live CPU/FPS meter plate. - Sidebar collapses to a 56 px icon rail at <=1100 px and hides via display:contents at <=600 px so mobile.css's fixed bottom tab-bar flows through unchanged. Cards and dashboard: - .card gets channel stripe (data-card-type + .ch-* utilities auto-map from data-target-id / data-stream-id / data-automation-id etc.), corner bracket, gradient background, subtle rack shadow. - .card-running replaces the old @property --border-angle conic-gradient rotating border with a lightweight signalFlow linear-gradient strip on the bottom edge (cheaper paint, no GPU layer compositing per card). - Skeleton loaders rewritten: left hairline + corner bracket + gradient shimmer instead of the old text-color opacity pulse. - .dashboard-target rows pick up the same channel-stripe + signalFlow treatment. Section headers use mono micro-caps with a channel-green underline accent consistent across the app. - .perf-chart-card: channel stripe replaces old border-top; per-metric accents moved to the channel palette (CPU=coral, RAM=violet, GPU=green, temp=amber). Metric values use tabular-nums + a soft glow. Live bindings (no new endpoints): - _updateSidebarMeter: binds the sidebar Load + FPS bars to the existing /system/performance poll. - _updateTransportStatus: toggles the transport chip between "Ready" and "Armed - N live" whenever the dashboard's running-target set is recomputed. Tree-nav + sub-tabs: - tree-nav.css trigger pill gets a channel-stripe left edge that glows when open; panel has a gradient channel-accent rule across the top; group headers use silkscreened micro-caps; active leaf has a pulsing LED pip + channel tint. - .stream-tab-btn / .subtab-section-header adopt the same mono-caps + channel-underline language for consistency. - Graph editor toolbar gets gradient + hairline + rack shadow + backdrop blur. Canvas and nodes untouched. Modals (40+ modals share modal.css): - Radial-dim + 6 px blur backdrop. Content gets a gradient background, hairline border, deep rack shadow, top channel-accent rule driven by --modal-ch, bottom-right corner bracket (hidden on mobile fullscreen). - Per-modal-ID channel lanes: target editors = green, source/input editors = cyan, audio = magenta, automation/scene/game = violet, settings/auth = amber, confirm = coral. - Modal headers: vertical channel stripe left of the title + hairline divider. Modal footers: hairline top border + subtle gradient wash. Forms: - Inputs use hairline borders; number inputs switch to mono + tabular-nums for column alignment. Focus state: channel-green ring + soft glow. - Buttons use mono-uppercase type with signal-glow on primary and coral- glow on danger. Mobile (<=600 px): - Fixed bottom .tab-bar gets the full Lumenworks treatment: gradient fill, top channel-accent rule matching the transport bar, backdrop blur. Active tab has an LED pip above the icon + channel tint + icon recolor. - Fullscreen modals: corner bracket hidden, header stripe slimmed. Microcopy (en / ru / zh): - "Targets" -> "Channels" / "Каналы" / "通道" - "Sources" -> "Inputs" / "Входы" / "输入" - Internal tab keys (dashboard/automations/targets/streams/integrations/ graph) kept stable so no JS or localStorage migration is needed. - Added: sidebar.workspaces, sidebar.load, sidebar.fps, transport.status.ready, transport.status.armed. Compatibility: - All existing class hooks preserved (.tab-bar, .tab-btn, .card, .card-running, .tree-dd-*, .cs-*, .perf-chart-card, .modal-content, .dashboard-target, etc.). No JS or API changes required for the new look to take effect. - Tour selectors survive (header .header-title, #tab-btn-*, onclick markers on theme/settings/search, #cp-wrap-accent, etc.). - Mobile <=600 px bottom tab-bar keeps working via display:contents fall-through in the new sidebar. Build: tsc --noEmit clean; npm run build clean. CSS bundle grew from ~177 KB to ~201 KB for the full new visual system. Fonts loaded lazily per unicode-range subset (~98 KB critical path for English). Phased plan + deferred follow-ups (dashboard hero strip, legacy-token cleanup) recorded at the top of TODO.md. Reference mockup: server/docs/ui-redesign-mockup.html. --- TODO.md | 171 ++ server/docs/ui-redesign-mockup.html | 1378 +++++++++++++++++ server/package-lock.json | 48 + server/package.json | 3 + server/src/ledgrab/static/css/all.css | 1 + server/src/ledgrab/static/css/base.css | 75 +- server/src/ledgrab/static/css/cards.css | 280 ++-- server/src/ledgrab/static/css/components.css | 82 +- server/src/ledgrab/static/css/dashboard.css | 182 ++- server/src/ledgrab/static/css/fonts.css | 103 +- .../src/ledgrab/static/css/graph-editor.css | 12 +- server/src/ledgrab/static/css/layout.css | 234 ++- server/src/ledgrab/static/css/mobile.css | 118 +- server/src/ledgrab/static/css/modal.css | 135 +- server/src/ledgrab/static/css/sidebar.css | 305 ++++ server/src/ledgrab/static/css/streams.css | 68 +- server/src/ledgrab/static/css/tree-nav.css | 198 ++- .../big-shoulders-display-latin-ext.woff2 | Bin 0 -> 28688 bytes .../fonts/big-shoulders-display-latin.woff2 | Bin 0 -> 35504 bytes .../fonts/jetbrains-mono-cyrillic-ext.woff2 | Bin 0 -> 2028 bytes .../fonts/jetbrains-mono-cyrillic.woff2 | Bin 0 -> 12108 bytes .../fonts/jetbrains-mono-latin-ext.woff2 | Bin 0 -> 15196 bytes .../static/fonts/jetbrains-mono-latin.woff2 | Bin 0 -> 40404 bytes .../static/fonts/manrope-cyrillic-ext.woff2 | Bin 0 -> 2552 bytes .../static/fonts/manrope-cyrillic.woff2 | Bin 0 -> 14500 bytes .../static/fonts/manrope-latin-ext.woff2 | Bin 0 -> 15120 bytes .../ledgrab/static/fonts/manrope-latin.woff2 | Bin 0 -> 24836 bytes .../ledgrab/static/js/features/dashboard.ts | 19 + .../ledgrab/static/js/features/perf-charts.ts | 16 + server/src/ledgrab/static/locales/en.json | 11 +- server/src/ledgrab/static/locales/ru.json | 11 +- server/src/ledgrab/static/locales/zh.json | 11 +- server/src/ledgrab/templates/index.html | 42 +- 33 files changed, 3145 insertions(+), 358 deletions(-) create mode 100644 server/docs/ui-redesign-mockup.html create mode 100644 server/src/ledgrab/static/css/sidebar.css create mode 100644 server/src/ledgrab/static/fonts/big-shoulders-display-latin-ext.woff2 create mode 100644 server/src/ledgrab/static/fonts/big-shoulders-display-latin.woff2 create mode 100644 server/src/ledgrab/static/fonts/jetbrains-mono-cyrillic-ext.woff2 create mode 100644 server/src/ledgrab/static/fonts/jetbrains-mono-cyrillic.woff2 create mode 100644 server/src/ledgrab/static/fonts/jetbrains-mono-latin-ext.woff2 create mode 100644 server/src/ledgrab/static/fonts/jetbrains-mono-latin.woff2 create mode 100644 server/src/ledgrab/static/fonts/manrope-cyrillic-ext.woff2 create mode 100644 server/src/ledgrab/static/fonts/manrope-cyrillic.woff2 create mode 100644 server/src/ledgrab/static/fonts/manrope-latin-ext.woff2 create mode 100644 server/src/ledgrab/static/fonts/manrope-latin.woff2 diff --git a/TODO.md b/TODO.md index d02a243..6710b64 100644 --- a/TODO.md +++ b/TODO.md @@ -1,5 +1,176 @@ # LedGrab TODO +## WebUI Redesign — "Lumenworks" Studio-Console Aesthetic + +Full-app UI/UX refresh. Design direction committed to by user 2026-04-24. +Mockup lives at [server/docs/ui-redesign-mockup.html](server/docs/ui-redesign-mockup.html). +Phases are independent and CSS-only where possible — backend untouched. + +### Phase 1 — Design tokens & font embed + +- [x] Embed variable fonts (`server/src/ledgrab/static/fonts/`): + Manrope (latin + latin-ext + cyrillic + cyrillic-ext), + JetBrains Mono (same 4 subsets), + Big Shoulders Display (latin + latin-ext). Total +201 KB gzipped, + served via `unicode-range` so only latin paints on first load. +- [x] `fonts.css` — declare `@font-face` entries for all new families with + proper `unicode-range` subsetting; keep DM Sans + Orbitron registered + for legacy-token callers during migration. +- [x] `base.css` — add additive Lumenworks tokens: + `--font-display/--font-brand/--font-body`, `--lux-r-*`, `--lux-hairline`, + `--lux-rule`. Both `[data-theme="dark"]` and `[data-theme="light"]` + define `--lux-bg-0…3`, `--lux-line/-bold`, `--lux-ink/-dim/-mute/-faint`, + `--ch-signal/-cyan/-magenta/-amber/-coral/-violet`, `--lux-signal-glow`, + `--lux-shadow-rack`. Existing tokens untouched — no visual regression. + +### Phase 2 — Shell (header → transport bar + channel-strip sidebar) + +- [x] `index.html` — `.tab-bar` moved out of `
` into a new + `