Merge pull request #49 from Utkarsh-0304/feature/searchbar_shortcut

feat: 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,29 @@ const init = () => {
     });
   });
 
+  window.addEventListener('keydown', function (e) {
+    const key = e.key.toLowerCase();
+    const isMac = navigator.userAgent.toUpperCase().includes('MAC');
+    const isCtrlK = e.ctrlKey && key === 'k';
+    const isCmdK = isMac && e.metaKey && key === 'k';
+
+    if (isCtrlK || isCmdK) {
+      e.preventDefault();
+      searchBar.focus();
+    }
+  });
+
+  const shortcutK = document.getElementById('shortcut');
+  const isIosOrAndroid = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+
+  if (isIosOrAndroid) {
+    shortcutK.style.display = 'none';
+  } else {
+    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');