src/lib/components/AboutPanel.svelte

@@ -34,13 +34,13 @@
   <div
     class="bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg shadow-xl max-w-md w-full p-6"
     onclick={(e) => e.stopPropagation()}
+    onkeydown={(e) => e.stopPropagation()}
     role="dialog"
     aria-labelledby="about-title"
+    tabindex="-1"
   >
     <div class="flex items-center justify-between mb-4">
-      <h2 id="about-title" class="text-xl font-semibold text-gray-100">
-        About Hikari Desktop
-      </h2>
+      <h2 id="about-title" class="text-xl font-semibold text-gray-100">About Hikari Desktop</h2>
       <button
         onclick={onClose}
         class="p-1 text-gray-500 hover:text-gray-300 transition-colors"
@@ -61,8 +61,8 @@
       <div>
         <h3 class="font-medium text-gray-200 mb-2">What is Hikari Desktop?</h3>
         <p class="text-gray-400">
-          Hikari Desktop is an AI-powered desktop assistant that brings Claude directly to your desktop.
-          Built with love using Tauri, Svelte, and Rust for a fast, native experience.
+          Hikari Desktop is an AI-powered desktop assistant that brings Claude directly to your
+          desktop. Built with love using Tauri, Svelte, and Rust for a fast, native experience.
         </p>
       </div>
 
@@ -91,9 +91,7 @@
 
       <div>
         <h3 class="font-medium text-gray-200 mb-2">Support & Community</h3>
-        <p class="text-gray-400 mb-1">
-          Found a bug or have a suggestion?
-        </p>
+        <p class="text-gray-400 mb-1">Found a bug or have a suggestion?</p>
         <button
           onclick={() => openUrl(links.discord)}
           class="text-[var(--accent-primary)] hover:text-[var(--accent-primary-hover)] transition-colors underline"
@@ -150,4 +148,4 @@
       transform: scale(1);
     }
   }
-</style>
+</style>

src/lib/components/HelpPanel.svelte

@@ -11,8 +11,8 @@
       items: [
         "Enter your Claude API key in Settings (gear icon)",
         "Set your working directory and click Connect",
-        "Start chatting with Hikari - your AI assistant!"
-      ]
+        "Start chatting with Hikari - your AI assistant!",
+      ],
     },
     {
       title: "Key Features",
@@ -22,8 +22,8 @@
         "🔍 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"
-      ]
+        "📁 Multi-tab Support: Work on multiple conversations simultaneously",
+      ],
     },
     {
       title: "Available Commands",
@@ -32,8 +32,8 @@
         "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"
-      ]
+        "Search for specific functions or patterns",
+      ],
     },
     {
       title: "Tips & Tricks",
@@ -42,17 +42,17 @@
         "🎯 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"
-      ]
+        "🎨 Customize your theme and preferences in Settings",
+      ],
     },
     {
       title: "Keyboard Shortcuts",
       items: [
         "Ctrl/Cmd + Enter: Send message",
         "Ctrl/Cmd + K: Clear chat (when supported)",
-        "Escape: Close modals and panels"
-      ]
-    }
+        "Escape: Close modals and panels",
+      ],
+    },
   ];
 </script>
 
@@ -66,13 +66,13 @@
   <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-gray-100">
-        How to Use Hikari Desktop
-      </h2>
+      <h2 id="help-title" class="text-xl font-semibold text-gray-100">How to Use Hikari Desktop</h2>
       <button
         onclick={onClose}
         class="p-1 text-gray-500 hover:text-gray-300 transition-colors"
@@ -90,11 +90,11 @@
     </div>
 
     <div class="overflow-y-auto flex-1 p-6 space-y-6">
-      {#each sections as section}
+      {#each sections as section (section.title)}
         <div>
           <h3 class="font-medium text-gray-200 mb-3">{section.title}</h3>
           <ul class="space-y-2 text-sm text-gray-400">
-            {#each section.items as item}
+            {#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>
@@ -152,4 +152,4 @@
   .overflow-y-auto::-webkit-scrollbar-thumb:hover {
     background-color: var(--accent-primary);
   }
-</style>
+</style>