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

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

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

  const sections = [
    {
      title: "Getting Started",
      items: [
        "Enter your Claude API key in Settings (gear icon)",
        "Set your working directory and click Connect",
        "Start chatting with Hikari - your AI assistant!",
      ],
    },
    {
      title: "Key Features",
      items: [
        "🗂️ File Management: Hikari can read, write, and edit files in your project",
        "💻 Terminal Access: Execute commands and run scripts",
        "🔍 Code Search: Find files and search through code",
        "🌐 Web Access: Fetch information from the web",
        "📊 MCP Servers: Connect to external tools via Model Context Protocol",
        "📁 Multi-tab Support: Work on multiple conversations simultaneously",
      ],
    },
    {
      title: "Available Commands",
      items: [
        "Type naturally - Hikari understands context!",
        "Ask to read, create, or modify files",
        "Request code explanations or debugging help",
        "Have Hikari run tests or build commands",
        "Search for specific functions or patterns",
      ],
    },
    {
      title: "Tips & Tricks",
      items: [
        "💡 Use the stats panel to track your usage",
        "🎯 Be specific about file paths and requirements",
        "🔒 Grant tool permissions as needed for security",
        "📌 Pin important conversations for quick access",
        "🎨 Customize your theme and preferences in Settings",
        "⌨️ Check the keyboard icon for available shortcuts",
      ],
    },
  ];
</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-2xl w-full max-h-[80vh] overflow-hidden flex flex-col"
    onclick={(e) => e.stopPropagation()}
    onkeydown={(e) => e.stopPropagation()}
    role="dialog"
    aria-labelledby="help-title"
    tabindex="-1"
  >
    <div class="flex items-center justify-between p-6 pb-4 border-b border-[var(--border-color)]">
      <h2 id="help-title" class="text-xl font-semibold text-[var(--text-primary)]">
        How to Use Hikari Desktop
      </h2>
      <button
        onclick={onClose}
        class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] 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 sections as section (section.title)}
        <div>
          <h3 class="font-medium text-[var(--text-primary)] mb-3">{section.title}</h3>
          <ul class="space-y-2 text-sm text-[var(--text-secondary)]">
            {#each section.items as item (item)}
              <li class="flex items-start">
                <span class="text-[var(--accent-primary)] mr-2 mt-0.5">•</span>
                <span>{item}</span>
              </li>
            {/each}
          </ul>
        </div>
      {/each}

      <div class="pt-4 border-t border-[var(--border-color)]">
        <p class="text-sm text-[var(--text-tertiary)]">
          <strong>Need more help?</strong> Join our Discord community for support and updates!
        </p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Ensure the panel appears above other content */
  [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);
    }
  }

  /* Custom scrollbar styling */
  .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>