Add Search bar Keyboard Shortcut

index.html

@@ -218,6 +218,11 @@
               class="w-full pl-10 pr-4 py-3 bg-gray-700 text-white border border-gray-600 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"
               placeholder="Search for a tool (e.g., 'split', 'organize'...)"
             />
+            <span
+              class="absolute inset-y-0 right-0 flex items-center rounded-lg pr-2"
+            >
+              <kbd id="shortcut" class="bg-gray-800 px-1 rounded-lg"></kbd>
+            </span>
           </div>
         </div>
 

src/js/main.ts

@@ -83,6 +83,22 @@ const init = () => {
     });
   });
 
+  window.addEventListener('keydown', function (e) {
+    const isMac = navigator.userAgent.toUpperCase().includes('MAC');
+    const isCtrlK = e.ctrlKey && e.key === 'k';
+    const isCmdK = isMac && e.metaKey && e.key === 'k';
+
+    if (isCtrlK || isCmdK) {
+      e.preventDefault();
+      searchBar.focus();
+    }
+  });
+
+  const shortcutK = document.getElementById('shortcut');
+  shortcutK.textContent = navigator.userAgent.toUpperCase().includes('MAC')
+    ? '⌘ K'
+    : 'Ctrl K';
+
   dom.toolGrid.addEventListener('click', (e) => {
     // @ts-expect-error TS(2339) FIXME: Property 'closest' does not exist on type 'EventTa... Remove this comment to see the full error message
     const card = e.target.closest('.tool-card');