Skip to content

Add show-hide button for gizmo HUD - #727

Merged
lawsie merged 2 commits into
flipcomputing:mainfrom
lawsie:hide-gizmo-hud
Jul 28, 2026
Merged

Add show-hide button for gizmo HUD#727
lawsie merged 2 commits into
flipcomputing:mainfrom
lawsie:hide-gizmo-hud

Conversation

@lawsie

@lawsie lawsie commented Jul 28, 2026

Copy link
Copy Markdown
Collaborator

Summary

The gizmo HUD is useful but it's not for everyone. A new button appears with the HUD allowing it to be shown or hidden depending on preference. The preference is remembered between gizmos

image

AI usage

Claude Opus 5 wrote all of the code in this pull request. I asked it to plan the feature and then I checked and approved the plan.

Summary by CodeRabbit

  • New Features

    • Added a collapsible on-screen controls HUD with persistent visibility settings.
    • Added an O keyboard shortcut to hide or show the HUD.
    • Added visual feedback when the HUD is hidden or shown.
    • HUD controls no longer intercept slider input while collapsed.
    • Added localized labels and status messages across supported languages.
  • Tests

    • Expanded coverage for HUD collapsing, persistence, keyboard interaction, and slider behavior.

@coderabbitai

coderabbitai Bot commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

Warning

Review limit reached

@lawsie, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 28 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: b55687be-8221-4a5c-a202-d041c9d25efd

📥 Commits

Reviewing files that changed from the base of the PR and between 84ae47f and 1ceb151.

📒 Files selected for processing (1)
  • ui/gizmo-mobile-hud.js
📝 Walkthrough

Walkthrough

The mobile HUD now supports persistent collapse and expansion through a touch handle or the O keyboard shortcut. Collapsed state affects visibility and pointer handling, status messages are localized, accessibility shortcuts list the new action, and tests cover persistence and interactions.

Changes

HUD collapse controls

Layer / File(s) Summary
Persistent HUD collapse behavior
ui/gizmo-mobile-hud.js
Adds a gear toggle handle, persisted collapsed state, collapsed-mode input gating, drag cleanup, and toggleCollapsed() / isCollapsed() accessors.
Keyboard shortcut and status integration
ui/gizmos.js, accessibility/keyboardui.js, locale/*.js
Maps O to HUD toggling, announces hidden/shown states, lists the shortcut, and adds translations for German, English, Spanish, French, Italian, Polish, Portuguese, and Swedish.
Collapse and pointer interaction tests
tests/gizmo-mobile-hud.test.js
Covers pointer-event isolation, state cleanup, toggle behavior, localStorage persistence, startup state, and collapsed slider interaction.

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

Sequence Diagram(s)

sequenceDiagram
  participant KeyboardHandler
  participant stopAxisKeyboard
  participant HUD
  participant StatusMessage
  KeyboardHandler->>stopAxisKeyboard: Receive O key
  stopAxisKeyboard->>HUD: toggleCollapsed()
  HUD-->>stopAxisKeyboard: Return collapsed state
  stopAxisKeyboard->>StatusMessage: Show localized hidden/shown message
Loading

Possibly related PRs

  • flipcomputing/flock#668: Modifies the same mobile HUD stack extended here with persistent collapse and keyboard wiring.
  • flipcomputing/flock#670: Introduces adjacent createAdaptiveInput and mobile HUD integration used by the new toggle path.
  • flipcomputing/flock#690: Modifies the same HUD slider pointer-handling logic affected by collapsed-mode gating.

Suggested reviewers: tracygardner, claude

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 11.11% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately captures the main change: adding a gizmo HUD show/hide control.
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.
✨ 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

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
tests/gizmo-mobile-hud.test.js (1)

222-226: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Stub pointer capture in this synthetic drag test.

This test still dispatches pointerdown directly, so it can throw the same NotFoundError described by the new helper. Wrap the sequence with withoutPointerCapture(canvas, ...).

Proposed fix
 expect(() => {
-  canvas.dispatchEvent(down);
-  canvas.dispatchEvent(move);
-  canvas.dispatchEvent(up);
+  withoutPointerCapture(canvas, () => {
+    canvas.dispatchEvent(down);
+    canvas.dispatchEvent(move);
+    canvas.dispatchEvent(up);
+  });
 }).to.not.throw();
🤖 Prompt for 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.

In `@tests/gizmo-mobile-hud.test.js` around lines 222 - 226, Wrap the synthetic
drag event sequence in the test’s existing withoutPointerCapture helper, passing
canvas and the callback that dispatches down, move, and up events. Preserve the
current no-throw assertion while ensuring pointer capture is stubbed for the
entire sequence.
🧹 Nitpick comments (2)
ui/gizmo-mobile-hud.js (1)

5-10: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Trim implementation-history commentary.

Lines 5-6 and 9-10 document design discussion rather than current behavior; retain required attribution, but condense the surrounding rationale. As per coding guidelines, comments should be infrequent and reflect the current state of code only.

🤖 Prompt for 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.

In `@ui/gizmo-mobile-hud.js` around lines 5 - 10, Trim the top-of-file comments in
gizmo-mobile-hud.js by removing implementation-history and dependency-rationale
discussion, while retaining the required Font Awesome attribution, license,
copyright, and any concise comment describing current behavior.

Source: Coding guidelines

locale/de.js (1)

1277-1279: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Remove translation-provenance comments.

// machine describes how text was produced, not the current behavior. Keep this provenance in review history rather than shipping it repeatedly in locale data.

  • locale/de.js#L1277-L1279: remove the // machine annotations.
  • locale/es.js#L1345-L1347: remove the // machine annotations.
  • locale/fr.js#L1284-L1286: remove the // machine annotations.
  • locale/it.js#L1286-L1288: remove the // machine annotations.
  • locale/pl.js#L1277-L1279: remove the // machine annotations.
  • locale/pt.js#L1288-L1290: remove the // machine annotations.
  • locale/sv.js#L1263-L1265: remove the // machine annotations.
🤖 Prompt for 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.

In `@locale/de.js` around lines 1277 - 1279, Remove the “// machine” provenance
annotations from the hud translation entries shortcut_toggle_hud, hud_hidden,
and hud_shown in locale/de.js (1277-1279), locale/es.js (1345-1347),
locale/fr.js (1284-1286), locale/it.js (1286-1288), locale/pl.js (1277-1279),
locale/pt.js (1288-1290), and locale/sv.js (1263-1265), leaving the translation
values unchanged.

Source: Coding guidelines

🤖 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.

Outside diff comments:
In `@tests/gizmo-mobile-hud.test.js`:
- Around line 222-226: Wrap the synthetic drag event sequence in the test’s
existing withoutPointerCapture helper, passing canvas and the callback that
dispatches down, move, and up events. Preserve the current no-throw assertion
while ensuring pointer capture is stubbed for the entire sequence.

---

Nitpick comments:
In `@locale/de.js`:
- Around line 1277-1279: Remove the “// machine” provenance annotations from the
hud translation entries shortcut_toggle_hud, hud_hidden, and hud_shown in
locale/de.js (1277-1279), locale/es.js (1345-1347), locale/fr.js (1284-1286),
locale/it.js (1286-1288), locale/pl.js (1277-1279), locale/pt.js (1288-1290),
and locale/sv.js (1263-1265), leaving the translation values unchanged.

In `@ui/gizmo-mobile-hud.js`:
- Around line 5-10: Trim the top-of-file comments in gizmo-mobile-hud.js by
removing implementation-history and dependency-rationale discussion, while
retaining the required Font Awesome attribution, license, copyright, and any
concise comment describing current behavior.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 76523c47-e701-4ce9-b0ad-49035d35c09c

📥 Commits

Reviewing files that changed from the base of the PR and between 28ea856 and 84ae47f.

📒 Files selected for processing (12)
  • accessibility/keyboardui.js
  • locale/de.js
  • locale/en.js
  • locale/es.js
  • locale/fr.js
  • locale/it.js
  • locale/pl.js
  • locale/pt.js
  • locale/sv.js
  • tests/gizmo-mobile-hud.test.js
  • ui/gizmo-mobile-hud.js
  • ui/gizmos.js

@lawsie
lawsie merged commit 82d1611 into flipcomputing:main Jul 28, 2026
2 of 3 checks passed
@lawsie
lawsie deleted the hide-gizmo-hud branch July 28, 2026 13:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant