chore: apply suggestions from copilot

Author: Gianthard-cyh

app/components/CommandBar.vue

@@ -1,45 +1,54 @@
 <template>
-  <Transition name="fade">
-    <div
-      class="fixed inset-0 z-[1000] flex items-start justify-center bg-black/50 backdrop-blur-sm"
-      v-show="show"
-    >
+  <Teleport to="body">
+    <Transition name="fade">
       <div
-        class="cmdbar-container flex items-center justify-center border border-border shadow-lg rounded-xl bg-bg p2 flex-col gap-2 mt-5rem"
+        class="fixed inset-0 z-[1000] flex items-start justify-center bg-black/50 backdrop-blur-sm"
+        v-show="show"
       >
-        <label for="command-input" class="sr-only">command-input</label>
-
-        <search class="relative w-xl h-12 flex items-center">
-          <span class="absolute inset-is-4 text-fg-subtle font-mono pointer-events-none"> > </span>
-          <input
-            type="text"
-            v-model="inputVal"
-            id="command-input"
-            ref="inputRef"
-            class="w-full h-full px-4 pl-8 text-fg outline-none bg-bg-subtle border border-border rounded-md"
-            :placeholder="placeholderText"
-            @keydown="handleKeydown"
-          />
-        </search>
-
-        <div class="w-xl max-h-lg overflow-auto" v-if="view.type != 'INPUT'">
-          <div
-            v-for="item in filteredCmdList"
-            :key="item.id"
-            class="flex-col items-center justify-between px-4 py-2 not-first:mt-2 hover:bg-bg-elevated select-none cursor-pointer rounded-md transition"
-            :class="{
-              'bg-bg-subtle': item.id === selected,
-              'trigger-anim': item.id === triggeringId,
-            }"
-            @click="onTrigger(item.id)"
-          >
-            <div class="text-fg">{{ item.name }}</div>
-            <div class="text-fg-subtle text-sm">{{ item.description }}</div>
+        <div
+          class="cmdbar-container flex items-center justify-center border border-border shadow-lg rounded-xl bg-bg p2 flex-col gap-2 mt-5rem"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="command-input-label"
+        >
+          <label for="command-input" id="command-input-label" class="sr-only">{{
+            t('command.label')
+          }}</label>
+
+          <search class="relative w-xl h-12 flex items-center">
+            <span class="absolute inset-is-4 text-fg-subtle font-mono pointer-events-none">
+              >
+            </span>
+            <input
+              type="text"
+              v-model="inputVal"
+              id="command-input"
+              ref="inputRef"
+              class="w-full h-full px-4 pl-8 text-fg outline-none bg-bg-subtle border border-border rounded-md"
+              :placeholder="placeholderText"
+              @keydown="handleKeydown"
+            />
+          </search>
+
+          <div class="w-xl max-h-lg overflow-auto" v-if="view.type != 'INPUT'">
+            <div
+              v-for="item in filteredCmdList"
+              :key="item.id"
+              class="px-4 py-2 not-first:mt-2 hover:bg-bg-elevated select-none cursor-pointer rounded-md transition"
+              :class="{
+                'bg-bg-subtle': item.id === selected,
+                'trigger-anim': item.id === triggeringId,
+              }"
+              @click="onTrigger(item.id)"
+            >
+              <div class="text-fg">{{ item.name }}</div>
+              <div class="text-fg-subtle text-sm">{{ item.description }}</div>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </Transition>
+    </Transition>
+  </Teleport>
 </template>
 
 <script setup lang="ts">
@@ -164,6 +173,11 @@ const handleKeydown = useThrottleFn((e: KeyboardEvent) => {
     return
   }
 
+  if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && !filteredCmdList.value.length) {
+    e.preventDefault()
+    return
+  }
+
   const currentIndex = filteredCmdList.value.findIndex((item: any) => item.id === selected.value)
 
   if (e.key === 'ArrowDown') {

app/plugins/commands.ts

@@ -2,10 +2,12 @@ export default defineNuxtPlugin(() => {
   const { register } = useCommandRegistry()
   const router = useRouter()
 
+  const { t } = useI18n()
+
   register({
     id: 'packages:search',
-    name: 'Search Packages',
-    description: 'Search for npm packages',
+    name: t('command.package_search'),
+    description: t('command.package_search_desc'),
     handler: async () => {
       const searchInput = document.querySelector<HTMLInputElement>(
         'input[type="search"], input[name="q"]',

i18n/locales/en.json

@@ -798,6 +798,9 @@
   },
   "command": {
     "placeholder": "Enter command...",
+    "label": "Command",
+    "package_search": "Search packages",
+    "package_search_desc": "Search for npm packages",
     "copy_install": "Copy install command",
     "copy_install_desc": "Copy install command to clipboard",
     "copy_run": "Copy run command",

i18n/locales/zh-CN.json

@@ -782,6 +782,9 @@
   },
   "command": {
     "placeholder": "输入命令...",
+    "label": "命令",
+    "package_search": "搜索包",
+    "package_search_desc": "搜索 npm 包",
     "copy_install": "复制安装命令",
     "copy_install_desc": "复制安装命令到剪贴板",
     "copy_run": "复制运行命令",