veza/apps/web/src/components/keyboard/KeyboardShortcutsHelp.tsx

import { Dialog } from '@/components/ui/dialog';
import { useTranslation } from '@/hooks/useTranslation';
import { KEYBOARD_SHORTCUTS } from '@/config/constants';

interface KeyboardShortcutsHelpProps {
  open: boolean;
  onClose: () => void;
}

export function KeyboardShortcutsHelp({
  open,
  onClose,
}: KeyboardShortcutsHelpProps) {
  const { t } = useTranslation();

  const shortcuts = [
    {
      key: KEYBOARD_SHORTCUTS.SEARCH,
      description: t(
        'keyboard.shortcuts.search',
        'Focus search or navigate to search page',
      ),
    },
    {
      key: KEYBOARD_SHORTCUTS.NEW_MESSAGE,
      description: t('keyboard.shortcuts.newMessage', 'Open new chat/message'),
    },
    {
      key: KEYBOARD_SHORTCUTS.PLAY_PAUSE,
      description: t(
        'keyboard.shortcuts.playPause',
        'Play or pause current track',
      ),
    },
    {
      key: KEYBOARD_SHORTCUTS.NEXT_TRACK,
      description: t('keyboard.shortcuts.nextTrack', 'Play next track'),
    },
    {
      key: KEYBOARD_SHORTCUTS.PREVIOUS_TRACK,
      description: t('keyboard.shortcuts.previousTrack', 'Play previous track'),
    },
    {
      key: KEYBOARD_SHORTCUTS.VOLUME_UP,
      description: t('keyboard.shortcuts.volumeUp', 'Increase volume'),
    },
    {
      key: KEYBOARD_SHORTCUTS.VOLUME_DOWN,
      description: t('keyboard.shortcuts.volumeDown', 'Decrease volume'),
    },
    {
      key: KEYBOARD_SHORTCUTS.MUTE,
      description: t('keyboard.shortcuts.mute', 'Toggle mute'),
    },
    {
      key: 'Ctrl+B / Cmd+B',
      description: t('keyboard.shortcuts.toggleSidebar', 'Toggle sidebar'),
    },
    {
      key: KEYBOARD_SHORTCUTS.ESCAPE,
      description: t('keyboard.shortcuts.escape', 'Close modals or go back'),
    },
    {
      key: KEYBOARD_SHORTCUTS.HELP,
      description: t('keyboard.shortcuts.help', 'Show this help dialog'),
    },
  ];

  return (
    <Dialog
      open={open}
      onClose={onClose}
      title={t('keyboard.shortcuts.title', 'Keyboard Shortcuts')}
      size="lg"
    >
      <div className="space-y-4">
        {shortcuts.map((shortcut, index) => (
          <div
            key={index}
            className="flex items-center justify-between border-b border-kodo-steel dark:border-kodo-steel pb-2 last:border-0"
          >
            <span className="text-sm text-kodo-content-dim dark:text-kodo-content-dim">
              {shortcut.description}
            </span>
            <kbd className="px-2 py-1 text-xs font-semibold text-kodo-text-main dark:text-kodo-text-main bg-kodo-void dark:bg-kodo-graphite border border-kodo-steel dark:border-kodo-steel rounded">
              {shortcut.key}
            </kbd>
          </div>
        ))}
      </div>
    </Dialog>
  );
}