Skip to content

1305 bugfixes#624

Open
lawsie wants to merge 6 commits into
flipcomputing:mainfrom
lawsie:1305-bugfixes
Open

1305 bugfixes#624
lawsie wants to merge 6 commits into
flipcomputing:mainfrom
lawsie:1305-bugfixes

Conversation

@lawsie
Copy link
Copy Markdown
Collaborator

@lawsie lawsie commented May 13, 2026

Summary

Small bug fixes

  • Re-render the area menu if the window gets resized/maximised/restored while it is open
  • Make the T shortcut work in all contexts
  • Add T shortcut to the keyboard shortcuts overlay, including translations
  • Make the currently highlighted tool in the toolbox more obvious - thick yellow in all themes.

AI usage

Claude Sonnet 4.6 used throughout with all changes approved by a human.

Summary by CodeRabbit

Release Notes

  • New Features

    • Added keyboard shortcut (T key) to quickly access the toolbox from the editor
  • Accessibility Improvements

    • Enhanced visual focus styling for toolbox categories with better color contrast options
    • Area navigation overlay now properly updates when the window is resized
  • Localization

    • Added toolbox keyboard shortcut translations in German, English, Spanish, French, Italian, Polish, Portuguese, and Swedish

Review Change Stack

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 13, 2026

Warning

Rate limit exceeded

@lawsie has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 44 minutes and 49 seconds before requesting another review.

You’ve run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e9deae14-5458-4ae9-a1a8-c98d927abb33

📥 Commits

Reviewing files that changed from the base of the PR and between ad49ad9 and 70dd88f.

📒 Files selected for processing (2)
  • locale/fr.js
  • main/main.js
📝 Walkthrough

Walkthrough

This PR adds a keyboard shortcut (T key) to focus the Blockly toolbox, complete with translated labels, dedicated focus styling, and supporting infrastructure improvements for overlay rendering and focus management in the keyboard UI.

Changes

Toolbox Keyboard Shortcut

Layer / File(s) Summary
Keyboard shortcut handler and registration
main/main.js, accessibility/keyboardui.js
Main.js imports ContextManager and registers a KeyT input handler that prevents default browser behavior and focuses the toolbox when not in typing/editor context and no modifiers are held. Keyboardui.js adds the T shortcut entry to the shortcuts list with label: translate("shortcut_toolbox").
Keyboard shortcut label translations
locale/en.js, locale/de.js, locale/es.js, locale/fr.js, locale/it.js, locale/pl.js, locale/pt.js, locale/sv.js
Eight locale files each receive a new shortcut_toolbox translation entry mapping to localized toolbox labels (e.g., "Toolbox", "Werkzeugkasten", "Caja de herramientas", "Boîte à outils", "Casella degli strumenti", "Przybornik", "Caixa de ferramentas", "Verktygslåda").
Toolbox focus styling and theming
style/blockly.css
Introduces a new --color-toolbox-focus CSS custom property that defaults to --color-outline-focus and overrides to #fc3 in low-vision theme. Updates toolbox category outline styles for both selected and keyboard-focused states to use the new token with adjusted outline offset and border-radius.
Keyboard UI infrastructure improvements
accessibility/keyboardui.js
AreaManager.toggle() refactors inert-state restoration to use multi-line forEach syntax. A new window resize listener re-renders area highlight overlays via requestAnimationFrame when the area overlay is visible.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

  • flipcomputing/flock#609: The KeyT toolbox shortcut handler depends on the ContextManager module introduced in this PR, making the changes tightly coupled.
  • flipcomputing/flock#616: Both PRs modify keyboard-shortcuts panel i18n dictionaries across the same locale files, with this PR adding the shortcut_toolbox label key.
  • flipcomputing/flock#621: Both PRs modify the AreaManager.toggle() logic in accessibility/keyboardui.js around inert-state restoration and focus management.

Suggested labels

codex

Poem

🐰 A toolbox key now fits the hand,
When T is pressed, focus flies bright,
From typing's grip to building's land,
With translations true and styles just right!

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check ❓ Inconclusive The title '1305 bugfixes' refers to the issue number and uses generic terminology that does not clearly convey the specific changes made in this pull request. Consider using a more descriptive title that summarizes the main changes, such as 'Add T keyboard shortcut for toolbox and improve area menu responsiveness' or similar, to clearly communicate the primary objectives.
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
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.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


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 and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 2

🧹 Nitpick comments (1)
style/blockly.css (1)

61-63: 💤 Low value

Consider consolidating low-vision theme rules.

The [data-theme="low-vision"] selector appears in two separate blocks (lines 50–59 and 61–63). While valid CSS, consolidating these into a single block improves maintainability and reduces cognitive load when updating theme styles.

♻️ Optional consolidation

Merge the --color-toolbox-focus override into the existing low-vision block:

 [data-theme="low-vision"] {
   --color-bg: `#121212`;
   --color-text: `#f0f0f0`;
   --color-text-label: `#f0f0f0`;
   --color-text-primary: `#f0f0f0`;
   --color-border-highlight: `#e0e0e0`;
   --color-search-highlight: `#cfcfcf`;
   --color-shadow: rgba(0, 0, 0, 0.6);
   --color-outline-focus: `#e0e0e0`;
+  --color-toolbox-focus: `#fc3`;
 }
-
-[data-theme="low-vision"] {
-  --color-toolbox-focus: `#fc3`;
-}
🤖 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 `@style/blockly.css` around lines 61 - 63, There are two separate CSS blocks
using the [data-theme="low-vision"] selector; consolidate them by merging the
--color-toolbox-focus declaration into the existing [data-theme="low-vision"]
rule so all low-vision overrides live in one block (locate the existing
[data-theme="low-vision"] rule and add the --color-toolbox-focus: `#fc3`;
declaration there, then remove the duplicate block).
🤖 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 `@locale/fr.js`:
- Line 1249: The file has a Prettier formatting warning (e.g., around the locale
key shortcut_toolbox), so run Prettier (or your project's formatter) against
locale/fr.js and apply the resulting formatting changes; ensure trailing commas,
quote style, and indentation match the project's Prettier configuration so the
line with "shortcut_toolbox: \"Boîte à outils\"," and surrounding lines are
formatted consistently.

In `@main/main.js`:
- Line 653: Prettier is flagging formatting in the line that defines toolboxDiv
(const toolboxDiv = toolbox.HtmlDiv ||
document.querySelector(".blocklyToolboxDiv");); run the project's formatter
(e.g., Prettier) on this file and commit the resulting changes so the expression
and surrounding lines conform to the project's code style and CI passes.

---

Nitpick comments:
In `@style/blockly.css`:
- Around line 61-63: There are two separate CSS blocks using the
[data-theme="low-vision"] selector; consolidate them by merging the
--color-toolbox-focus declaration into the existing [data-theme="low-vision"]
rule so all low-vision overrides live in one block (locate the existing
[data-theme="low-vision"] rule and add the --color-toolbox-focus: `#fc3`;
declaration there, then remove the duplicate block).
🪄 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

Run ID: 1eeefba4-3c54-4b52-ab04-5b90b00e20d9

📥 Commits

Reviewing files that changed from the base of the PR and between 3831306 and ad49ad9.

📒 Files selected for processing (11)
  • 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
  • main/main.js
  • style/blockly.css

Comment thread locale/fr.js
Comment thread main/main.js Outdated
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