# LedGrab · Global Settings · redesign mockup

SETTINGS · REDESIGN MOCKUP Global Settings — Lumenworks rack panel
Implementation status v0.5.1 · LIVE 2026-04 · device-settings.html

The `.ds-section` rack-panel pattern below is live in production on the per-device General Settings modal (`#device-settings-modal`). The unified Global Settings shell with the left rail, notification matrix, and per-section save bars is still a concept — only the section vocabulary itself shipped first.

Shipped SIGNAL

- Sectioned device settings — `templates/modals/device-settings.html` now groups fields into Identity (signal) · Connection (cyan) · Hardware (amber) · Behavior (violet).
- Auto-hide empty sections via `data-ds-empty`, set by `_updateSettingsSectionVisibility()` in `features/devices.ts` after device-type field masking runs.
- Inline DMX pair row — `.ds-pair-row` places Universe + Channel on the same row; collapses to single column <480 px.
- Sub-panel toggle — `.ds-toggle-row` wraps Auto-Restore as a recessed rack switch instead of a flat checkbox row.
- Floating hint popover — replaces the legacy inline `<small>` reveal that pushed every field below it down on every `?` click. New `toggleHint()` in `core/ui.ts` anchors a single shared `.hint-popover` via `getBoundingClientRect()`, auto-flips above/below, dismisses on outside click / ESC / scroll / resize / language change / modal close.
- i18n keys in en/ru/zh: `settings.section.identity`, `.connection`, `.hardware`, `.behavior`.

Gotcha — header element CORAL

- The section header MUST be `<div>`, not `<header>`.
- The bare `header` selector in `layout.css:5` styles the app's transport bar (sticky, grid, `height: 60px`) — every `<header>` on the page inherits it, including section headers nested inside a modal.
- Symptom: each section header rendered as a 60 px-tall band with the title floating at the top, no matter how aggressive the local `padding` override was.
- Fix: use `<div class="ds-section-header">` everywhere; or scope the offending rule to `body > header` if a future rewrite of `layout.css` happens.

Still mockup-only VIOLET

- Left rail navigation — current Global Settings still uses the top tab strip.
- Notification routing matrix — cell-grid binding event types to channels.
- Per-section save bars with dirty indicator + revert.
- Status / Auto-check / Release-notes panels on the Updates tab.
- Lifecycle "danger zone" for factory-reset / wipe-and-restore flows.
- `ds-section-meta` badges (e.g. `2 KEYS`, `NOISE`) — not yet used by any production section.

##
Settings

Identity & API 2 KEYS 01
API Keys
Defined in `config.yaml` — restart the server after editing.
dev ••••••••••••3a92 Read-only
homeassistant ••••••••••••f1c0 Read-only
Server 02
External URL
Log level
Shutdown action
Unsaved changes in External URL
Lifecycle DESTRUCTIVE 03
Server logs
Live tail of server log output, filterable by level. Opens in a full-screen overlay.
Restart server
Bounce the LedGrab process. Active capture and connected devices will pause for ~3 seconds.
Manual 01
Download backup
All devices, targets, streams, templates, automations into a single `.db` file.
Restore from file
Replaces ALL configuration with the contents of an uploaded backup. Server restarts automatically.
Auto-backup RUNNING 02
Enable auto-backup
Last run · 3 hr ago · next at 18:00 · 4 backups stored.
Interval
Max backups
Saved backups 4 FILES · 1.2 MB 03
backup-2026-04-28T15-00.db
312 KB · 3 hr ago
backup-2026-04-28T03-00.db
309 KB · 15 hr ago
backup-2026-04-27T15-00.db
301 KB · 1 day ago
backup-2026-04-27T03-00.db
298 KB · 1 day ago
Channels 4 EVENTS 01
Pick the delivery channel for each device event. Snack shows in-app, OS uses system notifications, Both fires both, None silences the event.
Event
Snack
OS
Both
None
Device came online
Device went offline
New device discovered
Discovered device lost
Discovery 02
Background discovery
Continuously scan the LAN (mDNS) and serial bus for new devices. Disable to silence "discovered/lost" events at the source.
OS Permission GRANTED 03
System notifications enabled
Browser permission for OS-level notifications. Granted for `leds.dolgolyov-family.by`.
Style preset DEFAULT 01
Reuses the existing `.ap-card` grid — no change needed beyond wrapping it in a `.ds-section`.
Default
Aurora
Daylight
Ember
Background effect NOISE 02
None
Noise
Aurora
Stars
Status UPDATE AVAILABLE 01
v0.6.0 ready to install
Channel: stable · 28.4 MB · checked 5 min ago
View release notes
What's new in v0.6.0 — major UI redesign, device event notifications, auto-backup history.
Auto-check 02
Check periodically
Background polls the release feed at the chosen interval.
Interval
Channel
L
LedGrab
v 0.5.1 · build 33ec
Studio-grade ambient lighting · made with care.