Function SearchPalette

app/components/SearchPalette.tsx:30–210

({
  onSelect,
  onClose,
}: {
  onSelect?: (entry: string) => void;
  onClose?: () => void;
})

import { Match } from "@jsonhero/fuzzy-json-search/lib/fuzzyScoring";

export function SearchPalette({
  onSelect,
  onClose,
}: {
  onSelect?: (entry: string) => void;
  onClose?: () => void;
}) {
  const searchState = useJsonSearchState();
  const searchApi = useJsonSearchApi();

  useHotkeys(
    "esc",
    (e) => {
      e.preventDefault();
      searchApi.reset();
      onClose?.();
    },
    [onClose]
  );

  const listRef = useRef<HTMLElement>(null);

  const rowVirtualizer = useVirtual({
    size: (searchState.results ?? []).length,
    parentRef: listRef,
    estimateSize: useCallback(() => 70, []),
    overscan: 6,
  });

  function comboboxReducer(
    state: UseComboboxState<SearchResult<string>>,
    actionAndChanges: UseComboboxStateChangeOptions<SearchResult<string>>
  ): Partial<UseComboboxState<SearchResult<string>>> {
    const { changes, ...action } = actionAndChanges;

    // Don't update the input field when selecting an item
    switch (action.type) {
      case useCombobox.stateChangeTypes.ItemClick:
      case useCombobox.stateChangeTypes.InputKeyDownEnter: {
        return {
          ...changes,
          inputValue: state.inputValue,
        };
      }
      default:
        return changes;
    }
  }

  const cb = useCombobox({
    items: searchState.results ?? [],
    stateReducer: comboboxReducer,
    circularNavigation: false,
    scrollIntoView: () => {},
    onSelectedItemChange: ({ selectedItem }) => {
      if (selectedItem) {
        onSelect?.(selectedItem.item);
        searchApi.reset();