yaak/apps/yaak-client/components/core/Button.tsx

import { Button as BaseButton, type ButtonProps as BaseButtonProps } from "@yaakapp-internal/ui";
import { forwardRef, useImperativeHandle, useRef } from "react";
import type { HotkeyAction } from "../../hooks/useHotKey";
import { useFormattedHotkey, useHotKey } from "../../hooks/useHotKey";

export type ButtonProps = BaseButtonProps & {
  hotkeyAction?: HotkeyAction;
  hotkeyLabelOnly?: boolean;
  hotkeyPriority?: number;
};

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
  { hotkeyAction, hotkeyPriority, hotkeyLabelOnly, title, ...props }: ButtonProps,
  ref,
) {
  const hotkeyTrigger = useFormattedHotkey(hotkeyAction ?? null)?.join("");
  const fullTitle = hotkeyTrigger ? `${title ?? ""} ${hotkeyTrigger}`.trim() : title;

  const buttonRef = useRef<HTMLButtonElement>(null);
  useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(
    ref,
    () => buttonRef.current,
  );

  useHotKey(
    hotkeyAction ?? null,
    () => {
      buttonRef.current?.click();
    },
    { priority: hotkeyPriority, enable: !hotkeyLabelOnly },
  );

  return <BaseButton ref={buttonRef} title={fullTitle} {...props} />;
});