hikari-desktop/src/lib/components/KeyboardShortcutsModal.svelte

<script lang="ts">
  interface Props {
    onClose: () => void;
  }

  const { onClose }: Props = $props();

  const shortcuts = [
    {
      category: "General",
      items: [
        { keys: ["Escape"], description: "Close modals and panels" },
        { keys: ["Ctrl", "L"], description: "Clear the terminal" },
        { keys: ["Ctrl", ","], description: "Open settings" },
      ],
    },
    {
      category: "Chat",
      items: [
        { keys: ["Enter"], description: "Send message" },
        { keys: ["Shift", "Enter"], description: "New line in message" },
        { keys: ["Ctrl", "C"], description: "Interrupt/stop response" },
        { keys: ["↑"], description: "Previous input from history" },
        { keys: ["↓"], description: "Next input from history" },
      ],
    },
    {
      category: "Slash Commands",
      items: [
        { keys: ["↑", "↓"], description: "Navigate command menu" },
        { keys: ["Tab"], description: "Complete selected command" },
        { keys: ["Escape"], description: "Close command menu" },
      ],
    },
    {
      category: "Permission Prompts",
      items: [
        { keys: ["Enter"], description: "Allow & reconnect" },
        { keys: ["Escape"], description: "Dismiss" },
      ],
    },
  ];
</script>

<div
  class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
  onclick={onClose}
  role="button"
  tabindex="0"
  onkeydown={(e) => e.key === "Escape" && onClose()}
>
  <div
    class="bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg shadow-xl max-w-lg w-full max-h-[80vh] overflow-hidden flex flex-col"
    onclick={(e) => e.stopPropagation()}
    onkeydown={(e) => e.stopPropagation()}
    role="dialog"
    aria-labelledby="shortcuts-title"
    tabindex="-1"
  >
    <div class="flex items-center justify-between p-6 pb-4 border-b border-[var(--border-color)]">
      <div class="flex items-center gap-3">
        <div
          class="w-8 h-8 rounded-lg bg-[var(--accent-primary)]/20 flex items-center justify-center"
        >
          <svg
            class="w-5 h-5 text-[var(--accent-primary)]"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 3C10.22 3 8.47 3.23 6.86 3.68A2 2 0 005 5.57V18.43a2 2 0 001.86 1.89C8.47 20.77 10.22 21 12 21s3.53-.23 5.14-.68A2 2 0 0019 18.43V5.57a2 2 0 00-1.86-1.89C15.53 3.23 13.78 3 12 3z"
            />
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M8 7h.01M12 7h.01M16 7h.01M8 11h.01M12 11h.01M16 11h.01M8 15h8"
            />
          </svg>
        </div>
        <h2 id="shortcuts-title" class="text-xl font-semibold text-gray-100">Keyboard Shortcuts</h2>
      </div>
      <button
        onclick={onClose}
        class="p-1 text-gray-500 hover:text-gray-300 transition-colors"
        aria-label="Close"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    </div>

    <div class="overflow-y-auto flex-1 p-6 space-y-6">
      {#each shortcuts as section (section.category)}
        <div>
          <h3 class="text-sm font-medium text-gray-400 uppercase tracking-wider mb-3">
            {section.category}
          </h3>
          <div class="space-y-2">
            {#each section.items as item (item.description)}
              <div
                class="flex items-center justify-between py-2 px-3 bg-[var(--bg-secondary)] rounded-lg"
              >
                <span class="text-sm text-gray-300">{item.description}</span>
                <div class="flex items-center gap-1">
                  {#each item.keys as key, i (key)}
                    {#if i > 0}
                      <span class="text-gray-600 text-xs">+</span>
                    {/if}
                    <kbd
                      class="px-2 py-1 text-xs font-mono bg-[var(--bg-primary)] border border-[var(--border-color)] rounded text-gray-300 shadow-sm min-w-[24px] text-center"
                    >
                      {key}
                    </kbd>
                  {/each}
                </div>
              </div>
            {/each}
          </div>
        </div>
      {/each}
    </div>
  </div>
</div>

<style>
  [role="dialog"] {
    animation: slideIn 0.2s ease-out;
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: scale(0.95) translateY(10px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }

  .overflow-y-auto {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
  }

  .overflow-y-auto::-webkit-scrollbar {
    width: 8px;
  }

  .overflow-y-auto::-webkit-scrollbar-track {
    background: transparent;
  }

  .overflow-y-auto::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
  }

  .overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-primary);
  }
</style>