Skip to content

Workspace search on mobile #661

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lawsie merged 5 commits into from
Jun 1, 2026
Merged

Workspace search on mobile #661

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
435438f
Add WS search to context menu
lawsie Jun 1, 2026
baf81ad
Add WS search box tablet/mobile
lawsie Jun 1, 2026
6afb69b
Add button
lawsie Jun 1, 2026
616716d
Trigger review
lawsie Jun 1, 2026
483ea32
Rabbit fixes
lawsie Jun 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions index.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1340,6 +1340,23 @@ <h2 id="modal-title" data-i18n="about_heading">
role="toolbar"
aria-label="Workspace controls"
>
<button
class="bigbutton"
id="workspaceSearchBtn"
aria-label="Find in workspace"
title="Find in workspace"
>
<div class="icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
<path
fill="currentColor"
d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"
/>
</svg>
</div>
</button>
<div class="toolbar-divider" aria-hidden="true"></div>
<button
class="bigbutton"
id="undoBtn"
Expand Down
1 change: 1 addition & 0 deletions locale/de.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1122,6 +1122,7 @@ export default {
toolbox_search_placeholder: "Suchen",
search_no_matching: "Keine passenden Blöcke gefunden",
workspace_search_placeholder: "Im Bereich suchen",
close: "Schließen",
code_workspace_focused: "Code-Arbeitsbereich fokussiert",
interactive_element_label: "Interaktives Element",
panel_resizer_focused:
Expand Down
1 change: 1 addition & 0 deletions locale/en.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1130,6 +1130,7 @@ export default {
focused_element_suffix: "{name} focused",
search_toolbox_focused: "Search toolbox focused",
workspace_search_placeholder: "Find in workspace",
close: "Close",
toolbox_search_placeholder: "Search",
search_no_matching: "No matching blocks found",
code_workspace_focused: "Code workspace focused",
Expand Down
1 change: 1 addition & 0 deletions locale/es.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1141,6 +1141,7 @@ export default {
search_toolbox_focused: "Búsqueda de la caja de herramientas enfocada", // human
toolbox_search_placeholder: "Buscar",
workspace_search_placeholder: "Buscar en el espacio",
close: "Cerrar",
search_no_matching: "No se encontraron bloques",
code_workspace_focused: "Espacio de trabajo de código enfocado", // human
interactive_element_label: "Elemento interactivo", // human
Expand Down
1 change: 1 addition & 0 deletions locale/fr.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1136,6 +1136,7 @@ export default {
toolbox_search_placeholder: "Rechercher",
search_no_matching: "Aucun bloc correspondant",
workspace_search_placeholder: "Chercher dans l'espace",
close: "Fermer",
code_workspace_focused: "Espace de travail du code focalisé",
interactive_element_label: "Élément interactif",
panel_resizer_focused:
Expand Down
1 change: 1 addition & 0 deletions locale/it.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1137,6 +1137,7 @@ export default {
toolbox_search_placeholder: "Cerca",
search_no_matching: "Nessun blocco trovato",
workspace_search_placeholder: "Trova nell'area",
close: "Chiudi",
code_workspace_focused: "Area di lavoro del codice focalizzata",
interactive_element_label: "Elemento interattivo",
panel_resizer_focused:
Expand Down
1 change: 1 addition & 0 deletions locale/pl.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1136,6 +1136,7 @@ export default {
toolbox_search_placeholder: "Szukaj",
search_no_matching: "Nie znaleziono pasujących bloków",
workspace_search_placeholder: "Znajdź w obszarze",
close: "Zamknij",
code_workspace_focused: "Skupiono przestrzeń kodu",
interactive_element_label: "Element interaktywny",
panel_resizer_focused:
Expand Down
1 change: 1 addition & 0 deletions locale/pt.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1128,6 +1128,7 @@ export default {
toolbox_search_placeholder: "Pesquisar",
search_no_matching: "Nenhum bloco encontrado",
workspace_search_placeholder: "Localizar no espaço",
close: "Fechar",
code_workspace_focused: "Área de trabalho de código focada",
interactive_element_label: "Elemento interativo",
panel_resizer_focused:
Expand Down
1 change: 1 addition & 0 deletions locale/sv.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -1117,6 +1117,7 @@ export default {
toolbox_search_placeholder: "Sök",
search_no_matching: "Inga matchande block hittades",
workspace_search_placeholder: "Sök i arbetsytan",
close: "Stäng",
code_workspace_focused: "Kodarbetsytan har fokus",
interactive_element_label: "Interaktivt element",
panel_resizer_focused:
Expand Down
116 changes: 114 additions & 2 deletions main/blocklyinit.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -766,6 +766,7 @@ export function initializeWorkspace() {
const cancelBtn = document.createElement('button');
cancelBtn.type = 'button';
cancelBtn.className = 'mobile-search-cancel';
cancelBtn.setAttribute('aria-label', translate('close'));
cancelBtn.textContent = '×';
overlay.appendChild(cancelBtn);

Expand DownExpand Up@@ -971,7 +972,7 @@ export function initializeWorkspace() {
cancelBtn.addEventListener('mousedown', (e) => e.preventDefault());
cancelBtn.addEventListener('click', closeOverlay);

// Close search overlay if screen resizes above tablet size
// Close search overlay if screen resizes above tablet size (768px)
window.matchMedia('(max-width: 768px)').addEventListener('change', (e) => {
if (!e.matches && overlay.isConnected) closeOverlay();
});
Expand DownExpand Up@@ -1014,11 +1015,107 @@ export function initializeWorkspace() {
const blocklyDiv = document.getElementById('blocklyDiv');
const originalOpen = workspaceSearch.open.bind(workspaceSearch);
const originalClose = workspaceSearch.close.bind(workspaceSearch);

// Mobile workspace search bar (≤480px): full-width fixed bar with prev/next
const isMobileWS = () => window.matchMedia('(max-width: 768px)').matches;

const wsMobileBar = document.createElement('div');
wsMobileBar.className = 'ws-search-mobile-bar';

const wsMobileInput = document.createElement('input');
wsMobileInput.type = 'text';
wsMobileInput.className = 'ws-search-mobile-input';
wsMobileInput.placeholder = translate('workspace_search_placeholder');
wsMobileInput.setAttribute('autocomplete', 'one-time-code');

const wsMobileCount = document.createElement('span');
wsMobileCount.className = 'ws-search-mobile-count';
wsMobileCount.setAttribute('aria-live', 'polite');

const wsMobilePrev = document.createElement('button');
wsMobilePrev.type = 'button';
wsMobilePrev.className = 'ws-search-mobile-btn';
wsMobilePrev.setAttribute('aria-label', translate('shortcut_select_previous_result'));
wsMobilePrev.textContent = '▲';

const wsMobileNext = document.createElement('button');
wsMobileNext.type = 'button';
wsMobileNext.className = 'ws-search-mobile-btn';
wsMobileNext.setAttribute('aria-label', translate('shortcut_select_next_result'));
wsMobileNext.textContent = '▼';

const wsMobileClose = document.createElement('button');
wsMobileClose.type = 'button';
wsMobileClose.className = 'ws-search-mobile-btn ws-search-mobile-close';
wsMobileClose.setAttribute('aria-label', translate('close'));
wsMobileClose.textContent = '×';
Comment on lines +1025 to +1051

@coderabbitaicoderabbitaiBotJun 1, 2026

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.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Localize the mobile search controls too.

These labels are hard-coded in English, so the mobile workspace search stays partially untranslated after a language switch even though the toolbar button and plugin placeholder are updated elsewhere. Please drive the placeholder and the Prev/Next/Close labels from translate(...) as well.

🤖 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 `@main/blocklyinit.js` around lines 1024 - 1050, Replace the hard-coded English
strings for the mobile search controls with calls to translate(...): use
translate('workspace_search_placeholder') for wsMobileInput.placeholder (already
used elsewhere), and replace the aria-label/textContent values on wsMobilePrev,
wsMobileNext, and wsMobileClose to use translate('workspace_search_prev'),
translate('workspace_search_next'), and translate('workspace_search_close')
respectively (update the setAttribute('aria-label', ...) and textContent
assignments for wsMobilePrev, wsMobileNext, wsMobileClose). Ensure the translate
keys match your i18n resource names and keep the visual symbols (▲, ▼, ×) if
desired while localizing the aria-labels and any visible label strings.


wsMobileBar.append(wsMobileInput, wsMobileCount, wsMobilePrev, wsMobileNext, wsMobileClose);

const updateWsMobileCount = () => {
const total = workspaceSearch.blocks?.length ?? 0;
const idx = workspaceSearch.currentBlockIndex ?? -1;
wsMobileCount.textContent = wsMobileInput.value.trim()
? total === 0
? '0'
: `${idx + 1}/${total}`
: '';
};

const originalSetCurrentBlock = workspaceSearch.setCurrentBlock?.bind(workspaceSearch);
if (originalSetCurrentBlock) {
workspaceSearch.setCurrentBlock = function (index) {
originalSetCurrentBlock(index);
if (wsMobileBar.isConnected) updateWsMobileCount();
};
}

const originalSearchAndHighlight = workspaceSearch.searchAndHighlight.bind(workspaceSearch);
workspaceSearch.searchAndHighlight = function (text, preserve) {
originalSearchAndHighlight(text, preserve);
if (wsMobileBar.isConnected) updateWsMobileCount();
};

wsMobileInput.addEventListener('input', () => {
workspaceSearch.searchAndHighlight(
wsMobileInput.value.trim(),
workspaceSearch.preserveSelected
);
});
wsMobileInput.addEventListener('keydown', (e) => {
if (e.key === 'Escape') workspaceSearch.close();
else if (e.key === 'Enter') e.shiftKey ? workspaceSearch.previous() : workspaceSearch.next();
});
wsMobilePrev.addEventListener('mousedown', (e) => e.preventDefault());
wsMobilePrev.addEventListener('click', () => workspaceSearch.previous());
wsMobileNext.addEventListener('mousedown', (e) => e.preventDefault());
wsMobileNext.addEventListener('click', () => workspaceSearch.next());
wsMobileClose.addEventListener('mousedown', (e) => e.preventDefault());
wsMobileClose.addEventListener('click', () => workspaceSearch.close());

window.matchMedia('(max-width: 768px)').addEventListener('change', (e) => {
if (!e.matches && wsMobileBar.isConnected) workspaceSearch.close();
});

workspaceSearch.open = function () {
originalOpen();
if (isMobileWS()) {
document.body.appendChild(wsMobileBar);
wsMobileInput.value = workspaceSearch.searchText || '';
if (wsMobileInput.value) {
workspaceSearch.searchAndHighlight(wsMobileInput.value, workspaceSearch.preserveSelected);
}
updateWsMobileCount();
wsMobileInput.focus();
} else {
originalOpen();
}
blocklyDiv?.classList.add('blockly-search-active');
};
workspaceSearch.close = function () {
if (wsMobileBar.isConnected) {
wsMobileInput.value = '';
wsMobileBar.remove();
}
originalClose();
blocklyDiv?.classList.remove('blockly-search-active');
};
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Expand DownExpand Up@@ -1792,6 +1889,21 @@ export function createBlocklyWorkspace() {
});
})();

// Add "Find in workspace" to the workspace context menu.
(function registerWorkspaceSearchContextMenuItem() {
const registry = Blockly.ContextMenuRegistry.registry;
const id = 'workspaceFindInWorkspace';
if (registry.getItem?.(id)) return;
registry.register({
id,
weight: 50,
displayText: () => translate('workspace_search_placeholder'),
preconditionFn: () => 'enabled',
callback: () => window.flockWorkspaceSearch?.open(),
scopeType: Blockly.ContextMenuRegistry.ScopeType.WORKSPACE,
});
})();

// Register cut/copy/paste at the top of the block context menu (weights 1/2/3).
(function registerClipboardContextMenuItems() {
const registry = Blockly.ContextMenuRegistry.registry;
Expand Down
6 changes: 3 additions & 3 deletions main/input.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -112,7 +112,7 @@ export function setupInput() {

// 6) Blockly MAIN WORKSPACE
document
.querySelectorAll('.blockly-ws-search input, .blockly-ws-search button')
.querySelectorAll('.blockly-ws-search input, .blockly-ws-search button, .ws-search-mobile-bar input, .ws-search-mobile-bar button')
.forEach(pushUnique);
const blocklySvg = document.querySelector('svg.blocklySvg');
const workspaceGroup = blocklySvg?.querySelector('g.blocklyWorkspace');
Expand DownExpand Up@@ -142,7 +142,7 @@ export function setupInput() {
shortcutsPanel.querySelectorAll('a[href], button:not([disabled])').forEach(pushUnique);
}

['#undoBtn', '#redoBtn', '#zoomOutBtn', '#zoomInBtn'].forEach((sel) =>
['#workspaceSearchBtn', '#undoBtn', '#redoBtn', '#zoomOutBtn', '#zoomInBtn'].forEach((sel) =>
pushUnique(document.querySelector(sel))
);

Expand DownExpand Up@@ -196,7 +196,7 @@ export function setupInput() {
const activeElement = document.activeElement;

// Let workspace search handle tabs when focussed
if (activeElement?.closest?.('.blockly-ws-search')) {
if (activeElement?.closest?.('.blockly-ws-search, .ws-search-mobile-bar')) {
return;
}

Expand Down
3 changes: 3 additions & 0 deletions main/main.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -821,6 +821,9 @@ function initializeApp() {
zoomInBtn.addEventListener("click", () => workspace.zoomCenter(1));
if (zoomOutBtn)
zoomOutBtn.addEventListener("click", () => workspace.zoomCenter(-1));
const workspaceSearchBtn = document.getElementById("workspaceSearchBtn");
if (workspaceSearchBtn)
workspaceSearchBtn.addEventListener("click", () => window.flockWorkspaceSearch?.open());
if (undoBtn) undoBtn.addEventListener("click", () => workspace.undo(false));
if (redoBtn) redoBtn.addEventListener("click", () => workspace.undo(true));
const shortcutsBtn = document.getElementById("shortcutsBtn");
Expand Down
8 changes: 7 additions & 1 deletion main/translation.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -113,8 +113,14 @@ export async function setLanguage(language) {
window.flockColorPicker.refreshTranslations();
}

// Update workspace search placeholder
// Update workspace search placeholder and toolbar button
window.flockWorkspaceSearch?.setSearchPlaceholder?.(translate("workspace_search_placeholder"));
const wsSearchBtn = document.getElementById("workspaceSearchBtn");
if (wsSearchBtn) {
const label = translate("workspace_search_placeholder");
wsSearchBtn.setAttribute("aria-label", label);
wsSearchBtn.title = label;
}

// Update shortcuts panel if open
if (window.flockShortcutsPanel?.refreshTranslations) {
Expand Down
7 changes: 7 additions & 0 deletions style.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -502,6 +502,13 @@ button {
position: relative;
}

@media (min-width: 769px) {
#workspaceSearchBtn,
#workspaceSearchBtn + .toolbar-divider {
display: none;
}
}
Comment thread
coderabbitai[bot] marked this conversation as resolved.

#blocklyZoomControls {
position: absolute;
bottom: 0;
Expand Down
82 changes: 79 additions & 3 deletions style/blockly.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -258,9 +258,11 @@ body[data-theme='low-vision'] {
transition: opacity 0.15s ease;
}

/* Non-current matches get a pale yellow background */
#blocklyDiv.blockly-search-active .ws-search-match:not(.ws-search-current) > path.blocklyPath {
fill: rgba(255, 242, 0, 0.3) !important;
/* Non-current matches get a pale yellow background (desktop only) */
@media (min-width: 769px) {
#blocklyDiv.blockly-search-active .ws-search-match:not(.ws-search-current) > path.blocklyPath {
fill: rgba(255, 242, 0, 0.3) !important;
}
}

/* Low-vision: replace fill with a dashed white stroke for better contrast */
Expand DownExpand Up@@ -954,6 +956,80 @@ body[data-theme='low-vision'] .blocklyField text.blocklyText.blocklyFieldText.bl
}
}

@media (max-width: 768px) {
.ws-search-mobile-bar::before {
content: '';
position: absolute;
bottom: 100%;
left: 0;
right: 0;
height: calc(var(--dynamic-offset, 65px) - 50px);
background: var(--color-bg);
}

.ws-search-mobile-bar {
position: fixed;
top: var(--dynamic-offset, 65px);
left: 0;
right: 0;
z-index: 10000;
display: flex;
align-items: center;
gap: 4px;
padding: 8px;
background: var(--color-bg);
box-shadow: 0 2px 12px var(--color-shadow);
}

.ws-search-mobile-input {
flex: 1;
height: 40px;
font-size: 16px;
box-sizing: border-box;
min-width: 0;
border: 1px solid #888;
border-radius: 4px;
outline: none;
padding: 0 8px;
color: var(--color-text);
background: var(--color-bg);
}

.ws-search-mobile-input:focus-visible {
outline: 3px solid var(--color-outline-focus);
outline-offset: 2px;
}

.ws-search-mobile-count {
font-size: 13px;
color: var(--color-text);
opacity: 0.7;
min-width: 36px;
text-align: center;
flex-shrink: 0;
}

.ws-search-mobile-btn {
flex-shrink: 0;
background: none;
border: none;
color: var(--color-text-primary);
font-size: 18px;
line-height: 1;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 4px;
}

.ws-search-mobile-close {
font-size: 30px;
}
}

/* Keyboard focus for image BUTTON fields only (e.g. plus/minus/toggle icons) */
.blocklyKeyboardNavigation .blocklyActiveFocus.blocklyImageField {
outline: 5px solid var(--block-outline-focus);
Expand Down
Loading