markupr 2.1.8 → 2.5.0

package/src/renderer/components/HotkeyHint.tsx

@@ -1,261 +0,0 @@
-/**
- * HotkeyHint - Platform-aware keyboard shortcut display
- *
- * Renders keyboard shortcuts with plain-text key labels for maximum stability.
- *
- * Supports both inline (within buttons) and standalone rendering.
- */
-
-import React, { useMemo } from 'react';
-import {
-  isMacOS,
-  getDisplayKeys,
-} from '../../shared/hotkeys';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-interface HotkeyHintProps {
-  /**
-   * Keyboard keys to display.
-   * Can be an array of keys like ['Cmd', 'Shift', 'F']
-   * or a single accelerator string like 'CommandOrControl+Shift+F'
-   */
-  keys: string[] | string;
-
-  /**
-   * Render inline (smaller, within buttons/text) vs standalone
-   */
-  inline?: boolean;
-
-  /**
-   * Additional CSS class name
-   */
-  className?: string;
-
-  /**
-   * Custom styles
-   */
-  style?: React.CSSProperties;
-
-  /**
-   * Size variant
-   */
-  size?: 'small' | 'medium' | 'large';
-}
-
-// ============================================================================
-// Key Symbol Mappings (for array input)
-// ============================================================================
-
-const MAC_SYMBOLS: Record<string, string> = {
-  cmd: 'Cmd',
-  command: 'Cmd',
-  ctrl: 'Ctrl',
-  control: 'Ctrl',
-  alt: 'Option',
-  option: 'Option',
-  shift: 'Shift',
-  enter: 'Enter',
-  return: 'Return',
-  delete: 'Delete',
-  backspace: 'Delete',
-  esc: 'Esc',
-  escape: 'Esc',
-  tab: 'Tab',
-  space: 'Space',
-};
-
-const WIN_NAMES: Record<string, string> = {
-  cmd: 'Ctrl',
-  command: 'Ctrl',
-  ctrl: 'Ctrl',
-  control: 'Ctrl',
-  alt: 'Alt',
-  option: 'Alt',
-  shift: 'Shift',
-  enter: 'Enter',
-  return: 'Enter',
-  delete: 'Del',
-  backspace: 'Backspace',
-  esc: 'Esc',
-  escape: 'Esc',
-  tab: 'Tab',
-  space: 'Space',
-};
-
-// ============================================================================
-// Component
-// ============================================================================
-
-export const HotkeyHint: React.FC<HotkeyHintProps> = ({
-  keys,
-  inline = false,
-  className = '',
-  style,
-  size = 'medium',
-}) => {
-  const mac = useMemo(() => isMacOS(), []);
-
-  // Convert keys to display format
-  const displayKeys = useMemo(() => {
-    // If keys is a string (accelerator format), parse it
-    if (typeof keys === 'string') {
-      return getDisplayKeys(keys);
-    }
-
-    // If keys is an array, convert each key
-    return keys.map(key => {
-      const lowerKey = key.toLowerCase();
-
-      if (mac) {
-        return MAC_SYMBOLS[lowerKey] || key.toUpperCase();
-      } else {
-        return WIN_NAMES[lowerKey] || key.toUpperCase();
-      }
-    });
-  }, [keys, mac]);
-
-  // Size-based styles
-  const sizeStyles = useMemo(() => {
-    switch (size) {
-      case 'small':
-        return {
-          gap: 1,
-          keyMinWidth: 14,
-          keyHeight: 16,
-          keyPadding: '0 3px',
-          fontSize: 10,
-          borderRadius: 3,
-        };
-      case 'large':
-        return {
-          gap: 3,
-          keyMinWidth: 24,
-          keyHeight: 24,
-          keyPadding: '0 6px',
-          fontSize: 13,
-          borderRadius: 5,
-        };
-      default: // medium
-        return {
-          gap: 2,
-          keyMinWidth: 18,
-          keyHeight: 18,
-          keyPadding: '0 4px',
-          fontSize: 11,
-          borderRadius: 4,
-        };
-    }
-  }, [size]);
-
-  const containerStyle: React.CSSProperties = {
-    display: 'inline-flex',
-    alignItems: 'center',
-    gap: sizeStyles.gap,
-    marginLeft: inline ? 4 : 8,
-    opacity: inline ? 0.7 : 1,
-    ...style,
-  };
-
-  const keyStyle: React.CSSProperties = {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    minWidth: sizeStyles.keyMinWidth,
-    height: sizeStyles.keyHeight,
-    padding: sizeStyles.keyPadding,
-    backgroundColor: 'rgba(255, 255, 255, 0.08)',
-    borderRadius: sizeStyles.borderRadius,
-    fontSize: sizeStyles.fontSize,
-    fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif',
-    fontWeight: 500,
-    color: 'inherit',
-    lineHeight: 1,
-  };
-
-  const separatorStyle: React.CSSProperties = {
-    fontSize: sizeStyles.fontSize - 1,
-    color: 'currentColor',
-    opacity: 0.65,
-    marginLeft: 1,
-    marginRight: 1,
-  };
-
-  return (
-    <span className={`hotkey-hint ${inline ? 'inline' : ''} ${className}`} style={containerStyle}>
-      {displayKeys.map((key, index) => (
-        <React.Fragment key={index}>
-          <kbd style={keyStyle}>{key}</kbd>
-          {index < displayKeys.length - 1 && (
-            <span style={separatorStyle}>+</span>
-          )}
-        </React.Fragment>
-      ))}
-    </span>
-  );
-};
-
-// ============================================================================
-// Convenience Exports
-// ============================================================================
-
-/**
- * Simple hotkey display for the toggle recording shortcut
- */
-export const ToggleRecordingHint: React.FC<{ inline?: boolean }> = ({ inline }) => {
-  const mac = isMacOS();
-  return (
-    <HotkeyHint
-      keys={mac ? ['Cmd', 'Shift', 'F'] : ['Ctrl', 'Shift', 'F']}
-      inline={inline}
-    />
-  );
-};
-
-/**
- * Simple hotkey display for manual screenshot
- */
-export const ManualScreenshotHint: React.FC<{ inline?: boolean }> = ({ inline }) => {
-  const mac = isMacOS();
-  return (
-    <HotkeyHint
-      keys={mac ? ['Cmd', 'Shift', 'S'] : ['Ctrl', 'Shift', 'S']}
-      inline={inline}
-    />
-  );
-};
-
-/**
- * Simple hotkey display for pause/resume
- */
-export const PauseResumeHint: React.FC<{ inline?: boolean }> = ({ inline }) => {
-  const mac = isMacOS();
-  return (
-    <HotkeyHint
-      keys={mac ? ['Cmd', 'Shift', 'P'] : ['Ctrl', 'Shift', 'P']}
-      inline={inline}
-    />
-  );
-};
-
-/**
- * Get platform-aware hotkey text for status/tooltip displays
- */
-export function getHotkeyText(
-  hotkeyId: 'toggleRecording' | 'manualScreenshot' | 'pauseResume'
-): string {
-  switch (hotkeyId) {
-    case 'toggleRecording':
-      return isMacOS() ? 'Cmd+Shift+F' : 'Ctrl+Shift+F';
-    case 'manualScreenshot':
-      return isMacOS() ? 'Cmd+Shift+S' : 'Ctrl+Shift+S';
-    case 'pauseResume':
-      return isMacOS() ? 'Cmd+Shift+P' : 'Ctrl+Shift+P';
-    default:
-      return '';
-  }
-}
-
-export default HotkeyHint;