yaak/apps/yaak-client/hooks/useEventViewerKeyboard.ts

import type { Virtualizer } from "@tanstack/react-virtual";
import { useCallback } from "react";
import { useKey } from "react-use";

interface UseEventViewerKeyboardProps {
  totalCount: number;
  activeIndex: number | null;
  setActiveIndex: (index: number | null) => void;
  virtualizer?: Virtualizer<HTMLDivElement, Element> | null;
  isContainerFocused: () => boolean;
  enabled?: boolean;
  closePanel?: () => void;
  openPanel?: () => void;
}

export function useEventViewerKeyboard({
  totalCount,
  activeIndex,
  setActiveIndex,
  virtualizer,
  isContainerFocused,
  enabled = true,
  closePanel,
  openPanel,
}: UseEventViewerKeyboardProps) {
  const selectPrev = useCallback(() => {
    if (totalCount === 0) return;

    const newIndex = activeIndex == null ? 0 : Math.max(0, activeIndex - 1);
    setActiveIndex(newIndex);
    virtualizer?.scrollToIndex(newIndex, { align: "auto" });
  }, [activeIndex, setActiveIndex, totalCount, virtualizer]);

  const selectNext = useCallback(() => {
    if (totalCount === 0) return;

    const newIndex = activeIndex == null ? 0 : Math.min(totalCount - 1, activeIndex + 1);
    setActiveIndex(newIndex);
    virtualizer?.scrollToIndex(newIndex, { align: "auto" });
  }, [activeIndex, setActiveIndex, totalCount, virtualizer]);

  useKey(
    (e) => e.key === "ArrowUp" || e.key === "k",
    (e) => {
      if (!enabled || !isContainerFocused()) return;
      e.preventDefault();
      selectPrev();
    },
    undefined,
    [enabled, isContainerFocused, selectPrev],
  );

  useKey(
    (e) => e.key === "ArrowDown" || e.key === "j",
    (e) => {
      if (!enabled || !isContainerFocused()) return;
      e.preventDefault();
      selectNext();
    },
    undefined,
    [enabled, isContainerFocused, selectNext],
  );

  useKey(
    (e) => e.key === "Escape",
    (e) => {
      if (!enabled || !isContainerFocused()) return;
      e.preventDefault();
      closePanel?.();
    },
    undefined,
    [enabled, isContainerFocused, closePanel],
  );

  useKey(
    (e) => e.key === "Enter" || e.key === " ",
    (e) => {
      if (!enabled || !isContainerFocused() || activeIndex == null) return;
      e.preventDefault();
      openPanel?.();
    },
    undefined,
    [enabled, isContainerFocused, activeIndex, openPanel],
  );
}