Function useShortcut

src/web-ui/src/infrastructure/hooks/useShortcut.ts:25–62

(
  id: string,
  config: ShortcutConfig,
  callback: ShortcutCallback,
  options: UseShortcutOptions = {}
)

 * @param options  Optional description, priority, enabled flag
 */
export function useShortcut(
  id: string,
  config: ShortcutConfig,
  callback: ShortcutCallback,
  options: UseShortcutOptions = {}
): void {
  const { description, priority, enabled = true } = options;

  // Keep the latest callback in a ref so changes don't trigger re-registration.
  const callbackRef = useRef<ShortcutCallback>(callback);
  callbackRef.current = callback;

  // Stable wrapper that delegates to the current callback ref.
  const stableCallback = useRef<ShortcutCallback>((e) => callbackRef.current(e));

  // Serialize config to a stable string for the dependency array.
  const configKey = JSON.stringify({
    key: config.key,
    ctrl: config.ctrl,
    shift: config.shift,
    alt: config.alt,
    meta: config.meta,
    scope: config.scope,
    allowInInput: config.allowInInput,
  });

  useEffect(() => {
    if (!enabled) return;

    const unregister = shortcutManager.register(id, config, stableCallback.current, {
      description,
      priority,
    });

    return unregister;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id, configKey, enabled, description, priority]);
}