Function SearchDialog

apps/web/src/components/SearchDialog.tsx:32–213

({ open, onClose, onSelectFile }: SearchDialogProps)

 * - Hybrid: fuses Text + Semantic via Reciprocal Rank Fusion (best of both).
 */
export function SearchDialog({ open, onClose, onSelectFile }: SearchDialogProps) {
  const [mode, setMode] = useState<SearchMode>('text');
  const [query, setQuery] = useState('');
  const [items, setItems] = useState<DisplayItem[]>([]);
  const [activeIndex, setActiveIndex] = useState(0);
  const [error, setError] = useState<string | null>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (open) {
      setMode('text');
      setQuery('');
      setItems([]);
      setActiveIndex(0);
      setError(null);
      requestAnimationFrame(() => inputRef.current?.focus());
    }
  }, [open]);

  useEffect(() => {
    if (!open) {
      return;
    }

    const trimmed = query.trim();
    if (!trimmed) {
      setItems([]);
      setError(null);
      return;
    }

    let cancelled = false;
    const handle = window.setTimeout(async () => {
      try {
        const next = await runSearch(mode, trimmed);
        if (!cancelled) {
          setItems(next);
          setActiveIndex(0);
          setError(null);
        }
      } catch (err: unknown) {
        if (!cancelled) {
          setError(getErrorMessage(err));
          setItems([]);
        }
      }
    }, 150);

    return () => {
      cancelled = true;
      window.clearTimeout(handle);
    };
  }, [query, mode, open]);

  if (!open) {
    return null;
  }