paint-ui/hooks/use-keyboard-shortcuts.ts

import { useEffect } from 'react';
import { useHistoryStore } from '@/store/history-store';

/**
 * Keyboard shortcuts configuration
 */
interface KeyboardShortcut {
  key: string;
  ctrl?: boolean;
  shift?: boolean;
  alt?: boolean;
  meta?: boolean;
  handler: () => void;
  description: string;
}

/**
 * Hook to manage keyboard shortcuts
 */
export function useKeyboardShortcuts() {
  const { undo, redo, canUndo, canRedo } = useHistoryStore();

  useEffect(() => {
    const shortcuts: KeyboardShortcut[] = [
      {
        key: 'z',
        ctrl: true,
        shift: false,
        handler: () => {
          if (canUndo()) {
            undo();
          }
        },
        description: 'Undo',
      },
      {
        key: 'z',
        ctrl: true,
        shift: true,
        handler: () => {
          if (canRedo()) {
            redo();
          }
        },
        description: 'Redo',
      },
      {
        key: 'y',
        ctrl: true,
        handler: () => {
          if (canRedo()) {
            redo();
          }
        },
        description: 'Redo (alternative)',
      },
    ];

    const handleKeyDown = (e: KeyboardEvent) => {
      // Check if we're in an input field
      const target = e.target as HTMLElement;
      if (
        target.tagName === 'INPUT' ||
        target.tagName === 'TEXTAREA' ||
        target.isContentEditable
      ) {
        return;
      }

      for (const shortcut of shortcuts) {
        const ctrlMatch = shortcut.ctrl ? (e.ctrlKey || e.metaKey) : !e.ctrlKey && !e.metaKey;
        const shiftMatch = shortcut.shift ? e.shiftKey : !e.shiftKey;
        const altMatch = shortcut.alt ? e.altKey : !e.altKey;

        if (
          e.key.toLowerCase() === shortcut.key.toLowerCase() &&
          ctrlMatch &&
          shiftMatch &&
          altMatch
        ) {
          e.preventDefault();
          shortcut.handler();
          break;
        }
      }
    };

    window.addEventListener('keydown', handleKeyDown);

    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [undo, redo, canUndo, canRedo]);
}

/**
 * Get keyboard shortcut display string
 */
export function getShortcutDisplay(shortcut: {
  key: string;
  ctrl?: boolean;
  shift?: boolean;
  alt?: boolean;
  meta?: boolean;
}): string {
  const parts: string[] = [];

  const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.platform);

  if (shortcut.ctrl || shortcut.meta) {
    parts.push(isMac ? '⌘' : 'Ctrl');
  }
  if (shortcut.shift) {
    parts.push(isMac ? '⇧' : 'Shift');
  }
  if (shortcut.alt) {
    parts.push(isMac ? '⌥' : 'Alt');
  }

  parts.push(shortcut.key.toUpperCase());

  return parts.join(isMac ? '' : '+');
}