Zoom control bar

[lawsie]

Summary

Adds a new toolbar at the bottom right of the editor workspace, with controls for zooming in and out, and undo/redo.

• New buttons appear in the tab order
• A new area 8 has been added to the area overlay to quickly tab to this area
• Layout works on mobile (tested on iPhone 14)

AI usage

Claude Sonnet 4.6 was used throughout this PR but all changes were approved individually by me.

Summary by CodeRabbit

• New Features

  • Added a workspace controls toolbar in the code editor with undo, redo, zoom in, and zoom out buttons.

• Accessibility

  • Keyboard navigation and focus handling extended to include the new toolbar; visual focus/highlight positioning improved.

• Style

  • Layout and responsive adjustments to accommodate the toolbar across screen sizes.

• Localization

  • Added translations for toolbar labels in multiple languages.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7499607c-7bf8-49bd-a44d-76368da9dda8

📥 Commits

Reviewing files that changed from the base of the PR and between 5d114f0 and d8a8a3a.

📒 Files selected for processing (11)

• index.html
• 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/accessibility.js
• main/main.js

✅ Files skipped from review due to trivial changes (7)

• locale/sv.js
• locale/pl.js
• locale/de.js
• locale/es.js
• locale/fr.js
• locale/it.js
• locale/pt.js

🚧 Files skipped from review as they are similar to previous changes (3)

• main/main.js
• index.html
• main/accessibility.js

---

📝 Walkthrough

Walkthrough

Adds a Blockly workspace controls toolbar (undo/redo, zoom out/in) with markup, styles and responsive adjustments, event handlers wired to workspace methods, accessibility area and tab-order integration, CSS formatting updates, and localized UI strings.

Changes

Workspace Controls Toolbar

Layer / File(s)	Summary
UI Markup index.html	Four toolbar buttons (undo, redo, zoom out, zoom in) with ARIA/title and i18n attributes plus a divider added to the code panel.
Styling & Responsive Layout style.css	New #codePanel and #blocklyZoomControls styles, divider styling, mobile safe-area bottom offset, and #blocklyDiv height adjustments for desktop/mobile.
Functionality Wiring main/main.js	initializeApp() wires optional click handlers that call workspace.zoomCenter(±1) and workspace.undo(false/true).
Accessibility & Keyboard Navigation main/accessibility.js, main/input.js	#blocklyZoomControls registered in accessibility areas with extend offsets; renderHighlights() uses area.extend; toolbar buttons added to setupTabOrder() focus list.
CSS Formatting style/blockly.css	Reformatted :root axis color vars and multiple selectors (scrollbar, non-editable text, focus rules, axis outlines) into multi-line blocks without changing styles.
Localization locale/en.js, locale/de.js, locale/es.js, locale/fr.js, locale/it.js, locale/pl.js, locale/pt.js, locale/sv.js	Added translation keys: toolbar_undo_ui, toolbar_redo_ui, toolbar_zoom_out_ui, toolbar_zoom_in_ui.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• flipcomputing/flock#515: Modifies locale translations overlapping locale/es.js keys.
• flipcomputing/flock#588: Adds area-menu/overlay infrastructure related to accessibility areas modified here.
• flipcomputing/flock#528: Changes accessibility module that may overlap with renderHighlights/area registration edits.

Suggested labels

codex

Poem

🐰 A tiny toolbar hops in sight,
Undo and redo, zoom day and night.
Buttons tidy, focus true,
Locale strings in every hue.
Hop on—editing feels just right!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% 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 'Zoom control bar' directly and clearly describes the main change: adding a new toolbar with zoom controls (and undo/redo buttons) to the workspace editor.
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

• X
• Mastodon
• Reddit
• LinkedIn

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

[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 `@index.html`:
- Around line 1347-1373: The toolbar buttons (undoBtn, redoBtn, zoomOutBtn,
zoomInBtn) contain hardcoded aria-label and title strings; replace these with
the i18n attributes so both tooltip and screen-reader text are localized by the
existing i18n initializer: remove the literal aria-label/title values and add
data-i18n="<translation.key>" plus data-i18n-attrs="aria-label:title" on each
<button>, using distinct translation keys like toolbar.undo, toolbar.redo,
toolbar.zoomOut, toolbar.zoomIn (or the app's existing key names), and ensure
the i18n loader that processes data-i18n-attrs will populate the aria-label and
title attributes at runtime.

🪄 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: 05c2bdd4-1272-4906-87a9-086d7872ad5e

📥 Commits

Reviewing files that changed from the base of the PR and between 299e1ae and 5d114f0.

📒 Files selected for processing (6)

• index.html
• main/accessibility.js
• main/input.js
• main/main.js
• style.css
• style/blockly.css