Add tab for on-screen and gamepad controls

[lawsie]

Summary

Add new on-screen and gamepad controls button next to the keyboard controls button

AI usage

Claude Opus 5 and Haiku 4.5 both used on this. Several iterations were made because I wasn't happy with the format initially.

Summary by CodeRabbit

• New Features

  • Added a docked Player Controls panel displaying on-screen and gamepad controls.
  • Added control sections for movement, camera actions, interaction, buttons, and D-pad navigation.
  • Added adjustable font sizing for the Player Controls panel.
  • Added English translations for the new panel and its controls.

• Accessibility

  • Included Player Controls content in keyboard focus navigation.
  • Player Controls now updates when the application language changes.

• Style

  • Added visual styling for control chips, SVG icons, D-pad layouts, and explanatory notes.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a docked Player Controls panel with translated on-screen and gamepad controls, focus-order and language-refresh integration, responsive styling, and updated shortcuts-panel icon markup.

Changes

Player Controls Panel

Layer / File(s)	Summary
Player control data and panel accessibility/keyboardui.js	Defines player control SVG/chip data, renders grouped controls in the docked PlayerPanel, supports font scaling and Escape-to-close behavior, and updates the shortcuts tab icon.
Panel integration and translations accessibility/keyboardui.js, main/input.js, main/translation.js, locale/en.js	Initializes and exports PlayerPanel, includes its visible controls in tab order, refreshes it on language changes, and adds English player-control strings.
Player controls presentation style.css	Adds player control list, chip, D-pad, SVG, note, and font-size styling.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Browser
  participant PlayerPanel
  participant InfoPanel
  participant PlayerPanelDOM
  Browser->>PlayerPanel: init()
  PlayerPanel->>InfoPanel: register('player', ...)
  PlayerPanel->>PlayerPanelDOM: render grouped controls
  PlayerPanelDOM-->>Browser: display player controls

Loading

Possibly related PRs

• flipcomputing/flock#645: Establishes the related tabbed InfoPanel infrastructure used by the new PlayerPanel.
• flipcomputing/flock#643: Modifies the shortcuts-panel keyboard UI and focus plumbing extended here for PlayerPanel.
• flipcomputing/flock#652: Updates focus and tab activation behavior in the same accessibility flow.

Suggested reviewers: tracygardner

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: adding a new tab for on-screen and gamepad controls.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@accessibility/keyboardui.js`:
- Around line 1049-1088: Complete localization for the Player Controls entries:
in accessibility/keyboardui.js lines 1049-1088, replace hardcoded
controller-label strings with translation keys and resolve them before passing
values to formatKeys(). In locale/en.js lines 1347-1364, add the corresponding
controller-label keys to the active Spanish translation table alongside the
English definitions.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 45d03e45-801c-4525-bd48-c6c9a6c086ee

📥 Commits

Reviewing files that changed from the base of the PR and between a98c5a1 and ec4b319.

📒 Files selected for processing (5)

• accessibility/keyboardui.js
• locale/en.js
• main/input.js
• main/translation.js
• style.css