Function useContextMenuPosition

src/browser/hooks/useContextMenuPosition.ts:41–200

(
  options?: UseContextMenuPositionOptions
)

 * AgentListItem (draft + regular) and ChatPane's transcript right-click menu.
 */
export function useContextMenuPosition(
  options?: UseContextMenuPositionOptions
): UseContextMenuPositionReturn {
  const [isOpen, setIsOpen] = useState(false);
  const [position, setPosition] = useState<ContextMenuPosition | null>(null);

  // Long-press refs (only used when longPress option is enabled)
  const longPressTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const touchStartPosRef = useRef<ContextMenuPosition | null>(null);
  const longPressTriggeredRef = useRef(false);

  // When opening at cursor coordinates, render once with the anchor mounted first,
  // then flip open in a layout effect. This avoids a one-frame "flash" at an
  // incorrect fallback anchor before Popover finishes resolving the new anchor.
  const pendingPositionOpenRef = useRef(false);
  // Keep canOpen guard fresh so delayed callbacks (like long-press timers)
  // use the latest availability instead of stale render-time closures.
  const canOpenRef = useRef(options?.canOpen);
  canOpenRef.current = options?.canOpen;
  const canOpenMenu = useCallback(() => {
    const guard = canOpenRef.current;
    return guard ? guard() : true;
  }, []);

  // Clean up timer on unmount
  useEffect(() => {
    return () => {
      if (longPressTimerRef.current) {
        clearTimeout(longPressTimerRef.current);
      }
    };
  }, []);

  const openAtPosition = useCallback((nextPosition: ContextMenuPosition) => {
    pendingPositionOpenRef.current = true;
    setIsOpen(false);
    setPosition(nextPosition);
  }, []);

  const close = useCallback(() => {
    pendingPositionOpenRef.current = false;
    setIsOpen(false);
    setPosition(null);
  }, []);

  const getContextMenuPositionFromEvent = useCallback(
    (e: React.MouseEvent): ContextMenuPosition => {
      // Keyboard-triggered activations (click/contextmenu) can report client
      // coordinates as 0,0. Anchor those opens to the trigger element so menus
      // appear next to the control.
      const isKeyboardActivation =
        (e.type === "click" && e.detail === 0) || (e.clientX === 0 && e.clientY === 0);

      if (!isKeyboardActivation) {
        return { x: e.clientX, y: e.clientY };
      }

      const rect = e.currentTarget.getBoundingClientRect();