search: integrate find/replace into search overlay, add toolbar buttons

Moves board-wide find/replace from standalone overlay into the search
panel as a toggleable replace row. Adds editor toolbar find/replace
button. Ctrl+Shift+H now opens search in replace mode.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

public/js/app.js

@@ -9,7 +9,7 @@ import './modules/theme.js';
 import { loadBuckets, renderTagBar, activateBucket } from './modules/buckets.js';
 import { renderBoard, updateSortUI, getSelectedIds, clearSelection } from './modules/board.js';
 import { openDetail, closeDetail, showDetailCard, ungroupCard } from './modules/detail.js';
-import { openModal, closeModal, saveCard, saveOnly } from './modules/editor.js';
+import { openModal, closeModal, saveCard, saveOnly, openFindBar } from './modules/editor.js';
 import { openSearch, closeSearch } from './modules/search.js';
 import { showContextMenu } from './modules/context-menu.js';
 import { undo, canUndo } from './modules/undo.js';
@@ -39,6 +39,7 @@ window._ungroupCard = ungroupCard;
 window._getSelectedIds = getSelectedIds;
 window._clearSelection = clearSelection;
 window._refreshTasks = refreshTasksView;
+window.openFindBar = openFindBar;
 window._reloadAll = async () => { await loadBuckets(); state.cards = await api('api/cards') || []; renderBoard(); refreshCalendar(); };
 // Exposed for plugins that need to read the shared state (e.g. collab-buckets
 // reads `state.buckets` in its MutationObserver to find collab_uid mapping).
@@ -240,7 +241,7 @@ registerShortcut({ key: '#', guard: () => false, section: 'editor', keys: '<kbd>
 registerShortcut({ key: '?', guard: () => false, section: 'editor', keys: '<kbd>?</kbd><em>snippet</em>', label: 'snippet expand' });
 registerShortcut({ key: 'h', guard: () => false, section: 'editor', keys: '<kbd>⌃</kbd> <kbd>H</kbd>', label: 'find + replace' });
 registerShortcut({ key: 'f', guard: () => false, section: 'editor', keys: '<kbd>⌃</kbd> <kbd>F</kbd>', label: 'find' });
-registerShortcut({ key: 'H', ctrl: true, shift: true, guard: () => !isDialogOpen() && !guards.isOpen('modal'), section: 'global', keys: '<kbd>⌃</kbd> <kbd>⇧</kbd> <kbd>H</kbd>', label: 'find + replace across cards', handler: () => openBoardFindReplace() });
+registerShortcut({ key: 'H', ctrl: true, shift: true, guard: () => !isDialogOpen() && !guards.isOpen('modal'), section: 'global', keys: '<kbd>⌃</kbd> <kbd>⇧</kbd> <kbd>H</kbd>', label: 'find + replace across cards', handler: () => openSearch({ replace: true }) });
 
 // — Detail view —
 registerShortcut({ match: (e) => (e.key === 'ArrowLeft' || e.key === 'ArrowRight') && !e.ctrlKey && guards.isOpen('detail') && !!state.viewingCard, priority: 10, section: 'board + detail', keys: '<kbd>←</kbd> <kbd>→</kbd> <span class="mouse">in preview</span>', label: 'group prev / next', handler: (e) => {
@@ -509,148 +510,6 @@ function openTagQuickPick() {
     setTimeout(() => input.focus(), 0);
 }
 
-// ── Board-level find/replace (Ctrl+Shift+H) ──
-
-async function openBoardFindReplace() {
-    const existing = document.getElementById('board-find-replace');
-    if (existing) { existing.remove(); return; }
-
-    // Fetch all cards with bodies (state.cards may have body=null from lazy load)
-    const allCards = await api('api/cards') || [];
-
-    const overlay = document.createElement('div');
-    overlay.id = 'board-find-replace';
-    overlay.style.cssText = 'position:fixed;inset:0;z-index:120;background:var(--t-overlay,rgba(0,0,0,0.55));display:flex;align-items:flex-start;justify-content:center;padding:60px 16px 16px;backdrop-filter:blur(var(--ui-blur-overlay,0));';
-    const box = document.createElement('div');
-    box.style.cssText = 'background:var(--t-surface);border:1px solid var(--t-border);border-radius:var(--ui-radius-modal);box-shadow:var(--ui-shadow-modal);width:100%;max-width:560px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;';
-    box.innerHTML = `
-        <div style="padding:12px 14px;border-bottom:1px solid var(--t-border);display:flex;flex-direction:column;gap:8px;">
-            <div style="display:flex;align-items:center;gap:8px;">
-                <i class="ph ph-magnifying-glass text-t-accent"></i>
-                <span class="font-pixel text-xs text-t-accent">find + replace across all cards</span>
-            </div>
-            <div style="display:flex;gap:8px;">
-                <input id="bfr-find" type="text" placeholder="find…" style="flex:1;background:var(--t-bg);border:1px solid var(--t-border);border-radius:var(--ui-radius-input);color:var(--t-bright);padding:7px 10px;font-size:12px;font-family:var(--t-font-content,'JetBrains Mono',monospace);outline:none;">
-                <input id="bfr-replace" type="text" placeholder="replace with…" style="flex:1;background:var(--t-bg);border:1px solid var(--t-border);border-radius:var(--ui-radius-input);color:var(--t-bright);padding:7px 10px;font-size:12px;font-family:var(--t-font-content,'JetBrains Mono',monospace);outline:none;">
-            </div>
-        </div>
-        <div id="bfr-list" style="flex:1;overflow-y:auto;padding:6px 0;"></div>
-        <div id="bfr-footer" style="padding:10px 14px;border-top:1px solid var(--t-border);display:flex;align-items:center;gap:8px;">
-            <span id="bfr-status" class="font-pixel text-[9px] text-t-dim flex-1"></span>
-            <button id="bfr-apply" class="font-pixel text-[10px] px-3 py-1.5 border border-t-danger text-t-danger hover:bg-t-danger hover:text-t-bg transition-colors" disabled>Replace all</button>
-            <button id="bfr-close" class="font-pixel text-[10px] px-3 py-1.5 border border-t-border text-t-muted hover:text-t-bright transition-colors">Close</button>
-        </div>
-    `;
-    overlay.appendChild(box);
-    document.body.appendChild(overlay);
-
-    const findInp    = box.querySelector('#bfr-find');
-    const replInp    = box.querySelector('#bfr-replace');
-    const list       = box.querySelector('#bfr-list');
-    const statusEl   = box.querySelector('#bfr-status');
-    const applyBtn   = box.querySelector('#bfr-apply');
-
-    function escHtml(s) { return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
-
-    let matches = [];
-
-    function search() {
-        const needle = findInp.value;
-        matches = [];
-        if (!needle) {
-            list.innerHTML = '<div style="padding:24px 14px;text-align:center;font-size:11px;color:var(--t-dim);font-style:italic;">type to search across all card bodies</div>';
-            statusEl.textContent = '';
-            applyBtn.disabled = true;
-            return;
-        }
-        const nLower = needle.toLowerCase();
-        for (const c of allCards) {
-            const body = c.body || '';
-            const idx = body.toLowerCase().indexOf(nLower);
-            if (idx === -1) continue;
-            // Extract context around the first match
-            const start = Math.max(0, idx - 30);
-            const end = Math.min(body.length, idx + needle.length + 30);
-            const before = body.substring(start, idx);
-            const match = body.substring(idx, idx + needle.length);
-            const after = body.substring(idx + needle.length, end);
-            // Count all occurrences in this card
-            let count = 0, pos = 0;
-            while (true) {
-                const i = body.toLowerCase().indexOf(nLower, pos);
-                if (i === -1) break;
-                count++;
-                pos = i + 1;
-            }
-            matches.push({ card: c, context: { before, match, after }, count });
-        }
-        const totalOccurrences = matches.reduce((s, m) => s + m.count, 0);
-        statusEl.textContent = matches.length
-            ? `${totalOccurrences} occurrence${totalOccurrences !== 1 ? 's' : ''} in ${matches.length} card${matches.length !== 1 ? 's' : ''}`
-            : 'no matches';
-        applyBtn.disabled = !matches.length || !replInp.value.length;
-
-        if (!matches.length) {
-            list.innerHTML = '<div style="padding:24px 14px;text-align:center;font-size:11px;color:var(--t-dim);font-style:italic;">no matches found</div>';
-            return;
-        }
-        list.innerHTML = matches.map(m => `
-            <div style="padding:6px 14px;display:flex;align-items:flex-start;gap:10px;border-bottom:1px solid var(--t-border);">
-                <span style="width:6px;height:6px;border-radius:50%;background:${m.card.color || '#64748b'};flex-shrink:0;margin-top:5px;"></span>
-                <div style="flex:1;min-width:0;">
-                    <div class="font-pixel text-[10px] text-t-bright" style="margin-bottom:2px;">${escHtml(m.card.title)} <span class="text-t-dim">(${m.count}×)</span></div>
-                    <div style="font-size:11px;color:var(--t-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">…${escHtml(m.context.before)}<mark style="background:color-mix(in srgb, var(--t-accent) 30%, transparent);color:var(--t-bright);padding:0 2px;border-radius:2px;">${escHtml(m.context.match)}</mark>${escHtml(m.context.after)}…</div>
-                </div>
-            </div>
-        `).join('');
-    }
-
-    findInp.addEventListener('input', search);
-    replInp.addEventListener('input', () => { applyBtn.disabled = !matches.length || !replInp.value.length; });
-
-    applyBtn.addEventListener('click', async () => {
-        const needle = findInp.value;
-        const repl = replInp.value;
-        if (!needle || !matches.length) return;
-        const totalOccurrences = matches.reduce((s, m) => s + m.count, 0);
-        const ok = await showDialog({
-            title: 'replace_all',
-            message: `Replace ${totalOccurrences} occurrence${totalOccurrences !== 1 ? 's' : ''} of "${needle}" with "${repl}" across ${matches.length} card${matches.length !== 1 ? 's' : ''}?`,
-            danger: true,
-            okLabel: `Replace ${totalOccurrences}`,
-        });
-        if (!ok) return;
-        const escaped = needle.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-        const re = new RegExp(escaped, 'gi');
-        let patchCount = 0;
-        for (const m of matches) {
-            const newBody = (m.card.body || '').replace(re, repl);
-            if (newBody !== m.card.body) {
-                await api(`api/cards/${m.card.id}`, { method: 'PATCH', body: { body: newBody } });
-                patchCount++;
-            }
-        }
-        statusEl.textContent = `done — ${patchCount} card${patchCount !== 1 ? 's' : ''} updated`;
-        statusEl.style.color = 'var(--t-accent)';
-        applyBtn.disabled = true;
-        matches = [];
-        list.innerHTML = '<div style="padding:24px 14px;text-align:center;font-size:11px;color:var(--t-accent);">✓ replaced</div>';
-        await window._reloadAll();
-    });
-
-    function close() {
-        overlay.remove();
-        document.removeEventListener('keydown', onKey, true);
-    }
-    function onKey(e) {
-        if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); close(); }
-    }
-    overlay.addEventListener('click', e => { if (e.target === overlay) close(); });
-    box.querySelector('#bfr-close').addEventListener('click', close);
-    document.addEventListener('keydown', onKey, true);
-    setTimeout(() => findInp.focus(), 0);
-}
-
 // ── Boot ──
 
 renderShortcutHelp();

public/js/modules/editor.js

@@ -1001,7 +1001,7 @@ const replRow    = $('replace-row');
 let findMatches = [];
 let findCurrent = -1;
 
-function openFindBar(withReplace = true) {
+export function openFindBar(withReplace = true) {
     if (!findBar) return;
     findBar.classList.remove('hidden');
     replRow?.classList.toggle('hidden', !withReplace);

public/js/modules/search.js

@@ -3,6 +3,7 @@
 import { $, esc, escRe, api, fuzzyMatch, countSubstring, highlight } from './util.js';
 import { state, parseTags, tagChipHtml, getChildren } from './state.js';
 import { renderMd, stripMd } from './markdown.js';
+import { showDialog } from './dialog.js';
 
 const overlay = $('search');
 const input = $('search-input');
@@ -11,20 +12,59 @@ const footer = $('search-footer');
 const previewEmpty = $('search-preview-empty');
 const previewContent = $('search-preview-content');
 const bucketFilter = $('search-bucket-filter');
-let active = -1, hits = [];
+const replaceToggle = $('search-replace-toggle');
+const replaceRow = $('search-replace-row');
+const replaceInput = $('search-replace-input');
+const replaceStatus = $('search-replace-status');
+const replaceAllBtn = $('search-replace-all');
+let active = -1, hits = [], replaceMode = false, freshCards = null;
 
-export function openSearch() {
+export function openSearch({ replace = false } = {}) {
     window._closeTasks?.();
     input.value = '';
     results.innerHTML = '';
     footer.classList.add('hidden');
     active = -1;
     overlay.classList.add('open');
+    setReplaceMode(replace);
     input.focus();
     clearPreview();
     renderHome();
 }
 
+async function setReplaceMode(on) {
+    replaceMode = on;
+    replaceRow?.classList.toggle('hidden', !on);
+    replaceToggle?.classList.toggle('active', on);
+    if (on) {
+        replaceInput.value = '';
+        freshCards = await api('api/cards') || [];
+    } else {
+        freshCards = null;
+    }
+    updateReplaceState();
+}
+
+function updateReplaceState() {
+    if (!replaceMode || !replaceAllBtn) return;
+    const q = input.value.trim();
+    const hasRepl = replaceInput?.value.length > 0;
+    const hasMatch = hits.length > 0 && q.length > 0;
+    replaceAllBtn.disabled = !(hasMatch && hasRepl);
+    if (q && hits.length) {
+        let total = 0;
+        const nLower = q.toLowerCase();
+        for (const c of hits) {
+            const body = (c.body || '').toLowerCase();
+            let pos = 0;
+            while (true) { const i = body.indexOf(nLower, pos); if (i === -1) break; total++; pos = i + 1; }
+        }
+        replaceStatus.textContent = total ? `${total} in ${hits.length} card${hits.length !== 1 ? 's' : ''}` : '';
+    } else {
+        replaceStatus.textContent = '';
+    }
+}
+
 export function closeSearch() {
     overlay.classList.remove('open');
     if (document.activeElement && document.activeElement !== document.body) {
@@ -35,10 +75,11 @@ export function closeSearch() {
 function clearPreview() { previewEmpty.classList.remove('hidden'); previewContent.classList.add('hidden'); }
 
 function getPool() {
+    const cards = (replaceMode && freshCards) ? freshCards : state.cards;
     const bv = bucketFilter.value;
-    if (!bv) return state.cards;
-    if (bv === 'none') return state.cards.filter(c => !c.bucket_id);
-    return state.cards.filter(c => c.bucket_id == bv);
+    if (!bv) return cards;
+    if (bv === 'none') return cards.filter(c => !c.bucket_id);
+    return cards.filter(c => c.bucket_id == bv);
 }
 
 function updatePreview() {
@@ -90,7 +131,7 @@ function renderHome() {
         recent.map((c, i) => hitHtml(c, i, null)).join('');
     hits = recent; active = recent.length ? 0 : -1;
     footer.classList.remove('hidden');
-    bindHits(); updateActive(); updatePreview();
+    bindHits(); updateActive(); updatePreview(); updateReplaceState();
 }
 
 function search(query) {
@@ -115,10 +156,10 @@ function search(query) {
     // Tag-only search (no words)
     if (!words.length) {
         hits = pool; active = pool.length ? 0 : -1;
-        if (!pool.length) { results.innerHTML = `<div class="px-4 py-8 text-center"><i class="ph ph-hash text-2xl text-t-dim mb-2 block"></i><p class="text-xs text-t-dim font-pixel cursor-blink">no cards with ${tagFilters.map(t => '#' + t).join(' + ')}</p></div>`; footer.classList.add('hidden'); clearPreview(); return; }
+        if (!pool.length) { results.innerHTML = `<div class="px-4 py-8 text-center"><i class="ph ph-hash text-2xl text-t-dim mb-2 block"></i><p class="text-xs text-t-dim font-pixel cursor-blink">no cards with ${tagFilters.map(t => '#' + t).join(' + ')}</p></div>`; footer.classList.add('hidden'); clearPreview(); updateReplaceState(); return; }
         results.innerHTML = `<div class="px-4 pt-3 pb-1"><span class="font-pixel text-[9px] text-t-dim uppercase tracking-wider">${pool.length} tagged</span></div>` +
             pool.map((c, i) => hitHtml(c, i, null)).join('');
-        footer.classList.remove('hidden'); bindHits(); updateActive(); updatePreview(); return;
+        footer.classList.remove('hidden'); bindHits(); updateActive(); updatePreview(); updateReplaceState(); return;
     }
 
     const scored = pool.map(c => {
@@ -146,10 +187,10 @@ function search(query) {
     }).filter(Boolean).sort((a, b) => b.score - a.score);
 
     hits = scored.map(s => s.card); active = scored.length ? 0 : -1;
-    if (!scored.length) { results.innerHTML = `<div class="px-4 py-8 text-center"><i class="ph ph-magnifying-glass text-2xl text-t-dim mb-2 block"></i><p class="text-xs text-t-dim font-pixel cursor-blink">no results for "${esc(query)}"</p></div>`; footer.classList.add('hidden'); clearPreview(); return; }
+    if (!scored.length) { results.innerHTML = `<div class="px-4 py-8 text-center"><i class="ph ph-magnifying-glass text-2xl text-t-dim mb-2 block"></i><p class="text-xs text-t-dim font-pixel cursor-blink">no results for "${esc(query)}"</p></div>`; footer.classList.add('hidden'); clearPreview(); updateReplaceState(); return; }
     results.innerHTML = `<div class="px-4 pt-3 pb-1"><span class="font-pixel text-[9px] text-t-dim uppercase tracking-wider">${scored.length} result${scored.length > 1 ? 's' : ''}</span></div>` +
         scored.map((s, i) => hitHtml(s.card, i, words)).join('');
-    footer.classList.remove('hidden'); bindHits(); updateActive(); updatePreview();
+    footer.classList.remove('hidden'); bindHits(); updateActive(); updatePreview(); updateReplaceState();
 }
 
 function hitHtml(card, idx, words) {
@@ -251,3 +292,44 @@ input.addEventListener('keydown', e => {
 overlay.addEventListener('click', e => { if (e.target === overlay) closeSearch(); });
 $('search-btn')?.addEventListener('click', openSearch);
 $('search-close')?.addEventListener('click', closeSearch);
+replaceToggle?.addEventListener('click', () => setReplaceMode(!replaceMode));
+replaceInput?.addEventListener('input', updateReplaceState);
+
+replaceAllBtn?.addEventListener('click', async () => {
+    const needle = input.value.trim();
+    const repl = replaceInput.value;
+    if (!needle || !hits.length) return;
+    let totalOcc = 0;
+    const nLower = needle.toLowerCase();
+    for (const c of hits) {
+        let pos = 0;
+        const body = (c.body || '').toLowerCase();
+        while (true) { const i = body.indexOf(nLower, pos); if (i === -1) break; totalOcc++; pos = i + 1; }
+    }
+    const ok = await showDialog({
+        title: 'replace_all',
+        message: `Replace ${totalOcc} occurrence${totalOcc !== 1 ? 's' : ''} of "${needle}" with "${repl}" across ${hits.length} card${hits.length !== 1 ? 's' : ''}?`,
+        danger: true, okLabel: `Replace ${totalOcc}`,
+    });
+    if (!ok) return;
+    const freshCards = await api('api/cards') || [];
+    const freshMap = new Map(freshCards.map(c => [c.id, c]));
+    const escaped = needle.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const re = new RegExp(escaped, 'gi');
+    let patched = 0;
+    for (const c of hits) {
+        const fresh = freshMap.get(c.id);
+        const body = fresh?.body || c.body || '';
+        const newBody = body.replace(re, repl);
+        if (newBody !== body) {
+            await api(`api/cards/${c.id}`, { method: 'PATCH', body: { body: newBody } });
+            patched++;
+        }
+    }
+    replaceStatus.textContent = `done — ${patched} card${patched !== 1 ? 's' : ''} updated`;
+    replaceStatus.style.color = 'var(--t-accent)';
+    replaceAllBtn.disabled = true;
+    await window._reloadAll();
+    search(input.value);
+    setTimeout(() => { replaceStatus.style.color = ''; }, 3000);
+});