feat: lay the input controls over the wall and rebuild Settings

[BernardJen]

Implements the Claude Design handoff HANDOFF-2b.md: dropdown 2b "Over the wall" and the new Settings (1e). Behaviour follows the functional spec for v3.3.4 (2e26017).

Dropdown 2b

• There's no panel any more. Opening it (hover or tap the top tab) lays a picker over each half: the current input, a strip of 128×72 snapshot tiles, and that half's volume. A capsule at the top holds Dual/Single, Output and Settings, and a 56px Close pill sits at the bottom.
• Number-key chips appear only where a tap does what the key does: in single view, and in dual view without Multi-view.
• The pickers re-render after number keys, renames, enable/disable and hot-plug, not only after clicks. The cursor stays visible while they are open.

Multi-view (multiView, default true)

• Off: dual view always shows the same input on both halves, with one "Both halves" strip and one volume slider that sets both sides.
• It is in the save allowlist and in main's defaultSettings. Turning it off brings the right half in line with the left, and startup enforces the same.

Settings

• A 920×680 modal with a side nav: Inputs, Layout, Remote keyboard, Art-Net lighting. Each nav item shows a status. The footer moved into the nav.
• Removed: the shortcut table (the legend has the same rows) and the No-Signal Detection section.
• Inputs:
  • Multi-view switch.
  • The orphaned-reference banner has correct grammar and the "only unplugged" caveat.
  • Columns are Key / On / Name / Startup / No-signal.
  • The Name field shows the hardware label as its placeholder. The Startup pill can be cleared.
  • The No-signal panel has "Capture from left/right half". It is disabled with "Put this input on the wall first" when the input isn't showing, and it shows an inline message when a capture fails.
  • An input switched off while on screen shows "Still on the wall until you switch".
• Layout: a to-scale drawing of the 5:1 wall above the two sliders.
• Remote keyboard: API key Show/Hide, and a status line built from the result of the last press.
• Art-Net: a status line driven by the previously unused getStatus(), a count of customised screensavers, and a two-column grid of per-screensaver modes.

Fixes

• Remote keyboard never added .local to a bare hostname (http:// was prepended first). The URL logic is now in settings-status.js and unit tested.
• Remote keyboard presses go through the main process (remote-key-send), for the same CORS reason Art-Net does.
• Shortcuts now ignore every form control. With a <select> focused, Q used to quit the app. Escape still gets through.
• Esc does one thing per press: with a panel open it closes the panel and stops there, without leaving fullscreen.
• textContent is used instead of innerHTML for names in Settings and the volume rows.
• The input-name toast timer is now cleared, and the toast is suppressed while the pickers are open.
• The presenter debug overlay is hidden while Remote Keyboard is off.
• The Art-Net scene catalogue is fetched debounced instead of once per keystroke.

After review in the dev instance

• The shortcut drop-up is restyled with the same surface, corners, mono title and key chips. It fades instead of sliding, and its tab gets keyboard and ARIA handling.
• Range sliders fill blue up to the thumb. This is done with a --fill CSS variable set by paintRangeFill().
• The settings icon is a real gear. The placeholder looked like a sun.
• The volume sliders have a speaker icon. It shows a mute cross at 0, then one, two or three waves as the volume rises. The waves draw in with a stagger.
• The Close pill is removed. The controls now close when the pointer goes more than 48px below the lowest picker row, which is the volume slider. On touch, tapping that area closes them. Esc and the 30 s idle close are unchanged.

Where this differs from the handoff

• System fonts only. TT Interphases is licensed for internal SBP use, and this repo and its installers are public.
• Icons are placeholders. They are simple line SVGs until the design file and settings-gear.svg are exported. The square corner of the containers (--radius-container) is a guess.
• Auto-close after 30 s idle. This is not in the handoff. The controls cover the wall and don't close when the pointer leaves, so without it they could stay over an unattended wall.
• Changed reference hint text. It said "use Capture above"; it now says "capture it below", because the button moved.
• Settings path removed from the README. The README said the Settings panel shows the settings file path; it never did.

For design review

At 6000×1200 everything is the handoff's size (128×72 tiles, 22px names), but it fills only the top-left of each ~3000px half. It probably wants scaling on the wall.

Testing

• npm run lint passes, and npm test passes 933 tests, 47 of them new:
  • settings-status.test.js covers the pure status logic.
  • settings-panel.test.js runs against the real index.html, and checks that the page contains every id renderer.js looks up.
• electron-vite build succeeds.
• Checked by hand in --mock and --mock=8:
  • sizes: 1280×800 and 6000×1200
  • long names, Multi-view on and off, and all four Settings panes
• Not done: a real capture card, the wall itself, and touch hardware.

🤖 Generated with Claude Code