// ─── Search ─── one box that finds anything in Laminar Flow.
//
// Ctrl+K (or "/") from anywhere, or the 🔍 button in the top bar. Searches the
// tree already in memory — no server call — and groups hits by what they are.
// Clicking one jumps to it and flashes it.
//
// Documents live on the Evidence screen and are deliberately NOT searched here:
// this is about his own items, so a search for "1406" returns his tasks, not
// every drawing that mentions the room.
//
// Matching, grouping and snippets are in lib-search.js (pure, unit-tested).
(function () {
const { useState, useEffect, useRef, useMemo, useCallback } = React;
const S = window.LFSearch;
const KIND_ICON = { project: '◆', milestone: '▬', task: '•', subtask: '·', capture: '⊡' };
// The matched span, marked. Everything else is plain text, so a note full of
// pasted HTML can't inject anything into the overlay.
function Highlighted({ text, ranges }) {
if (!ranges || !ranges.length) return {text};
const out = [];
let at = 0;
ranges.forEach(([s, e], i) => {
if (s > at) out.push({text.slice(at, s)});
out.push({text.slice(s, e)});
at = e;
});
if (at < text.length) out.push({text.slice(at)});
return {out};
}
function SearchOverlay({ open, onClose }) {
const [q, setQ] = useState('');
const [typed, setTyped] = useState(''); // what's in the box right now
const debounceRef = useRef(0);
const [status, setStatus] = useState('open'); // open | done | all
const [projectId, setProjectId] = useState('');
const [cursor, setCursor] = useState(0);
const inputRef = useRef(null);
const listRef = useRef(null);
// ~60 ms: long enough to skip the keystrokes in the middle of a word,
// short enough that it still feels instant.
useEffect(() => {
clearTimeout(debounceRef.current);
debounceRef.current = setTimeout(() => setQ(typed), 60);
return () => clearTimeout(debounceRef.current);
}, [typed]);
const projects = window.useLFState ? window.useLFState('projects', [])[0] : [];
const captures = window.useLFState ? window.useLFState('inboxItems', [])[0] : [];
// Rebuilt when the tree changes, not on every keystroke.
const index = useMemo(() => S.buildIndex(projects, captures), [projects, captures]);
const result = useMemo(
() => S.search(index, q, { status, projectId: projectId || undefined, limitPerGroup: 40 }),
[index, q, status, projectId]);
const flat = useMemo(() => S.flatten(result), [result]);
useEffect(() => { setCursor(0); }, [q, status, projectId]);
// The tree can change while the box is open (a sync, an agent write). Keep
// the cursor on a row that exists, or Enter would quietly do nothing.
useEffect(() => {
setCursor((c) => (flat.length === 0 ? 0 : Math.min(c, flat.length - 1)));
}, [flat.length]);
useEffect(() => {
if (!open) return;
// Start clean every time. A project filter left on from an earlier search
// is invisible until you look for it, and silently hides half the app —
// captures have no project at all, so they'd never appear again.
setStatus('open');
setProjectId('');
setCursor(0);
setQ(typed);
setTimeout(() => { try { inputRef.current && inputRef.current.focus(); inputRef.current.select(); } catch (e) {} }, 10);
}, [open]);
// Keep the highlighted row in view while arrowing through.
useEffect(() => {
const el = listRef.current && listRef.current.querySelector('[data-cursor="1"]');
if (el && el.scrollIntoView) el.scrollIntoView({ block: 'nearest' });
}, [cursor, q, status, projectId]);
const go = useCallback((hit) => {
if (!hit) return;
onClose();
try { window.LFNav.go(hit); } catch (e) {}
}, [onClose]);
// Escape closes from anywhere in the panel; the list keys are bound to the
// query box and the results only, so the project dropdown and the
// Open/Done/All buttons keep their normal keyboard behaviour.
const onPanelKeyDown = (e) => {
if (e.key === 'Escape') { e.preventDefault(); onClose(); }
};
const onListKeyDown = (e) => {
if (e.key === 'ArrowDown') { e.preventDefault(); setCursor((c) => (flat.length ? Math.min(c + 1, flat.length - 1) : 0)); return; }
if (e.key === 'ArrowUp') { e.preventDefault(); setCursor((c) => Math.max(0, c - 1)); return; }
if (e.key === 'Enter') { e.preventDefault(); if (flat.length) go(flat[Math.min(cursor, flat.length - 1)]); }
};
// If the matcher failed to load, stay out of the way rather than throwing
// inside the app shell.
if (!open || !S) return null;
let running = -1; // index within the flattened list, for the cursor
const pill = (active) => ({
background: active ? '#1d283a' : 'transparent', color: active ? '#cbd5e1' : '#555',
border: 'none', borderRadius: 6, padding: '4px 9px', fontSize: 10, fontWeight: 700,
letterSpacing: '0.06em', textTransform: 'uppercase', cursor: 'pointer', fontFamily: 'inherit',
});
return (