fix(settings): improve keybind binding UX (OPEN-54)

[zortos293]

Summary

Addresses OPEN-54 by making shortcut configuration in Settings and the stream sidebar easier and safer.

Changes

• Press-to-bind: Shortcut fields are read-only; focus the field and press the desired key combination to bind (Escape blurs without saving invalid state from partial typing).
• Paste: Clipboard paste still works via explicit onPaste handlers (needed because read-only inputs often block default paste).
• Duplicate detection: Saving or capturing a shortcut now rejects conflicts with any other editable binding and with the fixed stream sidebar toggle (Meta+G on macOS, Ctrl+Shift+G elsewhere), matching the actual handler in StreamView.
• Recording shortcut in Settings: shortcutToggleRecording was already persisted but had no Settings UI; it is now editable alongside the others and included in reset-to-defaults.
• Stream sidebar shortcuts tab: Screenshot/recording fields use the same capture flow; conflict checks now include Anti-AFK; sidebar toggle display uses formatShortcutForDisplay with canonical Meta+G on Mac.
• UX: Replaced <label> wrappers around inputs with separate labels so clicking the label text no longer steals focus from the adjacent field. Read-only bind fields use a pointer cursor in CSS.

Testing

• npm install and npx tsc --noEmit for both tsconfig.node.json and tsconfig.json (pass).

Linear Issue: OPEN-54

  

[zortos293]

@cursoragent fix merge conflict

[cursor]

Here is what was done for “fix merge conflict”:

Cause

Merging origin/dev into cursor/fix-settings-keybinds-45a3 conflicted in SettingsPage.tsx: dev moved Input into a tabbed layout (settings-rows with clipboard, keyboard layout, mouse controls) while our branch still had the old flat structure and duplicated an Appearance block in the wrong place.

Resolution

1. SettingsPage.tsx – Kept dev’s Input structure (settings-rows → clipboard paste → keyboard layout → mouse sensitivity/accelerator) and wired our press-to-bind shortcuts (including recording, conflicts, sidebar hint) into that same section. Removed the stray duplicate Appearance section and the duplicate origin/dev Input block left inside the conflict markers.
2. App.tsx (post-merge typecheck) – Settings on dev includes posterSizeScale; the default useState<Settings> object was missing it, so posterSizeScale: 1 was added.
3. getAppStyle – Fixed the CSS custom property typing by using "--game-poster-scale": … with an as CSSProperties cast so tsc passes.

Git

• Merge completed and committed: merge origin/dev into cursor/fix-settings-keybinds-45a3
• Branch pushed to origin/cursor/fix-settings-keybinds-45a3
• npx tsc (both tsconfigs) passes

PR #265 should now show as mergeable with dev on GitHub; refresh the PR page to confirm the conflict banner is gone.