Toolbox search fixes

[lawsie]

Summary

Fix a number of issues with the toolbox search on mobile:

• Display block label text directly in the 'mobile results', this also means that other languages automatically work
• 'Mobile results' view only shown on portrait mobile phones (480px and below)
• Clicking Enter or the tick button on mobile hides the keyboard but doesn't close the results
• 'Mobile but not mobile results' view slides the search box to full screen width on tablets but shows flyout results
• Tapping on the flyout allows you to scroll and select a block, also hides the search box
• Properly translate the search instructions (including the 'search' box in the toolbox)
• Remove the trigram block where you had to type 3 chars on mobile - not necessary

Summary by CodeRabbit

• New Features

  • Mobile search results panel now includes smooth expand/collapse animations on tablet and mobile devices.

• Bug Fixes

  • Search results now properly rebuild when switching languages.

• Improvements

  • Block labels in search results display more descriptive, human-readable names.
  • Mobile search input styling enhanced with improved borders and visual feedback.
  • Mobile search panel interaction refined for better user experience.

[coderabbitai]

📝 Walkthrough

Walkthrough

Block labels are cached in a new workspace map and built from block field text and input shapes during search indexing. Mobile search results display these cached labels, and the mobile overlay refactors open/collapse behavior with state-driven animations and improved input handling for Enter-key acceptance and focus-based close logic.

Changes

Mobile search UI and block label caching

Layer / File(s)	Summary
Block label infrastructure and caching setup main/blocklyinit.js, main/translation.js	workspace.flockBlockLabelMap is initialized and getBlockLabel is introduced to retrieve cached, language-aware block labels with fallback prettification. buildBlockLabel constructs labels from block field text (with dropdown/editable/non-editable distinctions) and value-input placeholders. Language switching resets cached data to force fresh indexing.
Search indexing with label persistence main/blocklyinit.js	buildSearchIndex uses toString().trim() for indexing terms with translation message fallback, derives computed blockLabel via buildBlockLabel, and persists it into workspace.flockBlockLabelMap for consistent UI rendering.
Mobile search results label usage main/blocklyinit.js	Mobile search match scoring, results helper ranking, and item label rendering switch from old per-type label mappings to getBlockLabel, ensuring centralized, consistent label display.
Mobile search overlay state and interactions main/blocklyinit.js, style/blockly.css	Mobile overlay open/collapse flow adds expanding/collapsing CSS state management, conditional results panel mounting for narrower breakpoints, and improved search input event handling that accepts Enter key (suppressing blur-close) and distinguishes blur-triggered collapse from full close. Input styling with border, border radius, and no outline is added. Tablet-sized (481px–768px) expand/collapse animations are applied via CSS keyframes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• flipcomputing/flock#654: Both PRs modify main/blocklyinit.js's mobile toolbox/search behavior and the search plugin's indexing/matching logic, including how block labels and terms are built and used for mobile results UI.

Suggested labels

codex

Poem

🐰 A cache of labels, cached with care,
Built from block fields floating in air,
Mobile search springs to life anew,
Enter expands, blur collapses true,
Animations dance on tablet screens bright! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

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.
Title check	❓ Inconclusive	The title 'Toolbox search fixes' is vague and generic, using the non-specific term 'fixes' without clearly conveying the main changes (mobile search UI improvements, block label handling, responsive behavior adjustments).	Consider a more specific title that captures the primary change, such as 'Improve mobile toolbox search UI and block label display' or 'Refactor toolbox search for mobile and tablet layouts'.

✅ Passed checks (3 passed)

Check name	Status	Explanation
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.

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

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

[coderabbitai]

Actionable comments posted: 3

🤖 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 `@main/blocklyinit.js`:
- Around line 847-856: The collapseOverlay path currently only removes the
overlay, leaving mobile results mounted and searchCategory.matchBlocks stuck as
the no-op set by openOverlay(); update collapseOverlay to perform the same
mobile-results cleanup as the open/cancel path: if resultsPanel is mounted,
remove/unmount it and restore searchCategory.matchBlocks to the original
matching function (use whatever variable you saved earlier when openOverlay
replaced it), and clear any related state (e.g., blurTimeout) before removing
the overlay so the next search session works correctly; reference
functions/idents: collapseOverlay, openOverlay, resultsPanel,
searchCategory.matchBlocks, originalParent, searchInput, and blurTimeout.

In `@main/translation.js`:
- Around line 155-158: The search cache rebuild runs immediately by calling
workspace.flockSearchCategory.blockSearcher.indexBlocks() even when the earlier
import("../toolbox.js") branch is refreshing the toolbox; change the flow so you
await completion of the toolbox/language refresh before resetting
workspace.flockSearchIndexedBlocks and workspace.flockBlockLabelMap and before
calling blockSearcher.indexBlocks(), ensuring the rebuild uses the updated
workspace.options.languageTree; locate the import("../toolbox.js") branch and
the call to workspace.flockSearchCategory.blockSearcher.indexBlocks() and
chain/await the toolbox refresh promise (or make indexBlocks async and call it
after the await) so labels/results are built from the new language.

In `@style/blockly.css`:
- Around line 853-855: The current rule removes the only keyboard focus cue by
setting outline: none on the search input; add a focused-visible replacement for
.mobile-search-overlay input[type="search"] (e.g., .mobile-search-overlay
input[type="search"]:focus-visible) that restores a clear, accessible focus
indicator such as a visible outline or box-shadow (choose a high-contrast color,
set outline-width and outline-offset or a box-shadow) so keyboard users still
see focus while preserving the existing non-focused styling; keep outline: none
only if you rely on the new :focus-visible rule to provide the visible cue.

🪄 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: 06496495-249a-4c42-8fde-a95b5cb6df0d

📥 Commits

Reviewing files that changed from the base of the PR and between 1ff7d92 and a7d0ffb.

📒 Files selected for processing (3)

• main/blocklyinit.js
• main/translation.js
• style/blockly.css