From e197a1dbe9a79a0e2fa13d1b8856b11d722c701f Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <shuuji3@gmail.com>
Date: Sun, 29 Jan 2023 16:41:42 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20use=20"=E2=8C=98"=20as=20modifier=20key?=
 =?UTF-8?q?=20name=20on=20macOS=20(#1506)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: use 'Command' as modifier key name on macOS

* fix: use more reliable `useIsMac()` instead of `userAgentData`

* refactor: apply suggestion from @userquin

* fix: use `⌘` as Command key symbol
---
 components/command/CommandPanel.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/command/CommandPanel.vue b/components/command/CommandPanel.vue
index 03086dbe..1c955a15 100644
--- a/components/command/CommandPanel.vue
+++ b/components/command/CommandPanel.vue
@@ -64,6 +64,9 @@ const result = $computed<QueryResult>(() => commandMode
   : searchResult,
 )
 
+const isMac = useIsMac()
+const modifierKeyName = $computed(() => isMac.value ? '⌘' : 'Ctrl')
+
 let active = $ref(0)
 watch($$(result), (n, o) => {
   if (n.length !== o.length || !n.items.every((i, idx) => i === o.items[idx]))
@@ -233,8 +236,8 @@ const onKeyDown = (e: KeyboardEvent) => {
     <!-- Footer -->
     <div class="flex items-center px-3 py-1 text-xs">
       <div i-ri:lightbulb-flash-line /> Tip: Use
-      <CommandKey name="Ctrl+K" /> to search,
-      <CommandKey name="Ctrl+/" /> to activate command mode.
+      <CommandKey :name="`${modifierKeyName}+K`" /> to search,
+      <CommandKey :name="`${modifierKeyName}+/`" /> to activate command mode.
     </div>
   </div>
 </template>