headquarter/apps/web/src/components/special-keys-strip.tsx

import React from "react";
import { getSequenceWithModifier, type SpecialKey, type ModifierKey } from "../hooks/use-special-keys";

interface SpecialKeysStripProps {
  onSend: (data: string) => void;
  isVisible: boolean;
  onMoreClick?: () => void;
  onKeepFocus?: () => void;
  activeModifier: ModifierKey | null;
  onModifierChange: (modifier: ModifierKey | null) => void;
}

const PRIMARY_KEYS: { key: SpecialKey; label: string; isModifier?: boolean }[] = [
  { key: "escape", label: "Esc" },
  { key: "tab", label: "Tab" },
  { key: "ctrl", label: "Ctrl", isModifier: true },
  { key: "alt", label: "Alt", isModifier: true },
  { key: "up", label: "↑" },
  { key: "down", label: "↓" },
  { key: "left", label: "←" },
  { key: "right", label: "→" },
];

export const SpecialKeysStrip: React.FC<SpecialKeysStripProps> = ({
  onSend,
  isVisible,
  onMoreClick,
  onKeepFocus,
  activeModifier,
  onModifierChange,
}) => {
  const handlePointerDown = (e: React.PointerEvent, key: SpecialKey) => {
    e.preventDefault();

    // Handle modifier keys (one-shot)
    if (key === "ctrl" || key === "alt") {
      onModifierChange(activeModifier === key ? null : key);
      requestAnimationFrame(() => {
        onKeepFocus?.();
      });
      return;
    }

    const result = getSequenceWithModifier(key, activeModifier);
    if (result) {
      onSend(result.sequence);
      if (result.clearModifier) {
        onModifierChange(null);
      }
    }

    // Always refocus terminal after sending
    requestAnimationFrame(() => {
      onKeepFocus?.();
    });
  };

  const handleMorePointerDown = (e: React.PointerEvent) => {
    e.preventDefault();
    onMoreClick?.();
    requestAnimationFrame(() => {
      onKeepFocus?.();
    });
  };

  return (
    <div className={`special-keys-strip ${isVisible ? "visible" : "hidden"}`}>
      {PRIMARY_KEYS.map(({ key, label, isModifier }) => (
        <button
          key={key}
          className={`special-key-button ${
            isModifier && activeModifier === key ? "active-modifier" : ""
          }`}
          onPointerDown={(e) => handlePointerDown(e, key)}
          type="button"
          tabIndex={-1}
          aria-label={`Send ${label}`}
          aria-pressed={isModifier && activeModifier === key}
        >
          {label}
        </button>
      ))}
      {onMoreClick && (
        <button
          className="special-key-button special-key-more"
          onPointerDown={handleMorePointerDown}
          type="button"
          tabIndex={-1}
          aria-label="More special keys"
        >
          More
        </button>
      )}
    </div>
  );
};