Function NotePickerOverlay

packages/app-core/src/components/QuickCaptureApp.tsx:747–834

({ notes, onPick, onCancel }: NotePickerOverlayProps)

}

function NotePickerOverlay({ notes, onPick, onCancel }: NotePickerOverlayProps): JSX.Element {
  const [query, setQuery] = useState('')
  const [active, setActive] = useState(0)
  const inputRef = useRef<HTMLInputElement | null>(null)

  useEffect(() => {
    inputRef.current?.focus()
  }, [])

  const searchIndex = useMemo(() => buildNoteSearchIndex(notes), [notes])

  const results = useMemo(() => {
    return searchNoteIndex(searchIndex, query, {
      limit: 30,
      defaultOrder: 'quick-first-recent'
    })
  }, [query, searchIndex])

  useEffect(() => setActive(0), [query])

  const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {
    // While composing (IME), let the input own Enter/Arrows. (#183)
    if (isImeComposing(e)) return
    if (isPaletteNextKey(e)) {
      e.preventDefault()
      setActive((i) => Math.min(results.length - 1, i + 1))
    } else if (isPalettePreviousKey(e)) {
      e.preventDefault()
      setActive((i) => Math.max(0, i - 1))
    } else if (e.key === 'Enter') {
      e.preventDefault()
      const picked = results[active]
      if (picked) onPick(picked)
    } else if (e.key === 'Escape') {
      // Stop the native event so the window-level Esc listener doesn't
      // also run and try to save+hide the underlying buffer.
      e.preventDefault()
      e.stopPropagation()
      e.nativeEvent.stopImmediatePropagation()
      onCancel()
    }
  }

  return (
    <OverlayShell>
      <div className="border-b border-paper-300/70 px-4 py-2">
        <input
          ref={inputRef}
          type="text"
          value={query}
          placeholder="Search notes — type, or use #tag filters"
          onChange={(e) => setQuery(e.target.value)}
          onKeyDown={onKeyDown}
          className="w-full bg-transparent text-sm outline-none placeholder:text-ink-400"
        />
      </div>
      <div className="min-h-0 flex-1 overflow-y-auto">
        {results.length === 0 ? (