From b33681297f18e62e0624ae27b3f59b27fbf650e7 Mon Sep 17 00:00:00 2001
From: Samuel <samuferfort@gmail.com>
Date: Tue, 5 Nov 2024 16:41:20 +0100
Subject: [PATCH 1/3] Add cross-platform keyboard shortcut

---
 src/components/search.svelte | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/search.svelte b/src/components/search.svelte
index 15585c14..3e2cc95b 100644
--- a/src/components/search.svelte
+++ b/src/components/search.svelte
@@ -6,9 +6,13 @@
   export let placeholder: string = 'Search...';
   export let clearSearch: () => void;
   import { X } from 'lucide-svelte';
+  import { onMount } from 'svelte';
 
   let inputElement;
-
+  let isMac = true;
+  onMount(() => {
+    isMac = /(Macintosh|iPhone|iPod|iPad)/i.test(navigator.userAgent);
+  });
   function focusInput(node: HTMLElement) {
     const handleKeydown = (event: KeyboardEvent) => {
       if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
@@ -67,10 +71,16 @@
       </div>
     {:else}
       <div class="absolute inset-y-0 right-0 flex items-center pr-4 text-neutral-500">
-        <div class="flex h-full items-center pointer-events-none gap-x-1 font-mono">
-          <Command size={16} />
-          <span>K</span>
-        </div>
+        {#if isMac}
+          <Command size={18} />
+        {:else}
+          <kbd class="rounded border border-neutral-500 px-1 py-0.5 text-xs shadow-sm">Ctrl</kbd>
+        {/if}
+        <kbd
+          class={isMac
+            ? ''
+            : 'ml-1 rounded border border-neutral-500 px-1 py-0.5 text-xs shadow-sm'}>K</kbd
+        >
       </div>
     {/if}
   </div>

From 8a2d3e433aa7c7e32ce0192d1199de22d1d3e5c4 Mon Sep 17 00:00:00 2001
From: SamuelFerfort <155412471+SamuelFerfort@users.noreply.github.com>
Date: Tue, 5 Nov 2024 16:51:02 +0100
Subject: [PATCH 2/3] Use same size for command as before

---
 src/components/search.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/search.svelte b/src/components/search.svelte
index 3e2cc95b..1e59939f 100644
--- a/src/components/search.svelte
+++ b/src/components/search.svelte
@@ -72,7 +72,7 @@
     {:else}
       <div class="absolute inset-y-0 right-0 flex items-center pr-4 text-neutral-500">
         {#if isMac}
-          <Command size={18} />
+          <Command size={16} />
         {:else}
           <kbd class="rounded border border-neutral-500 px-1 py-0.5 text-xs shadow-sm">Ctrl</kbd>
         {/if}

From 8418661502934e75a0472a1a8725bb6f23ed1a56 Mon Sep 17 00:00:00 2001
From: SamuelFerfort <155412471+SamuelFerfort@users.noreply.github.com>
Date: Tue, 5 Nov 2024 17:04:54 +0100
Subject: [PATCH 3/3] add pointer-events-none and same separation as before

---
 src/components/search.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/search.svelte b/src/components/search.svelte
index 1e59939f..ad1559ff 100644
--- a/src/components/search.svelte
+++ b/src/components/search.svelte
@@ -70,7 +70,7 @@
         </button>
       </div>
     {:else}
-      <div class="absolute inset-y-0 right-0 flex items-center pr-4 text-neutral-500">
+      <div class="absolute inset-y-0 right-0 flex items-center pointer-events-none  pr-4 text-neutral-500">
         {#if isMac}
           <Command size={16} />
         {:else}
@@ -78,7 +78,7 @@
         {/if}
         <kbd
           class={isMac
-            ? ''
+            ? 'ml-1'
             : 'ml-1 rounded border border-neutral-500 px-1 py-0.5 text-xs shadow-sm'}>K</kbd
         >
       </div>