feat: improve command palette

Author: antfu

components/ColorSchemeToggle.vue

@@ -4,6 +4,19 @@ const colorMode = useColorMode()
 function toggleMode() {
   colorMode.preference = colorMode.value === 'light' ? 'dark' : 'light'
 }
+
+addCommands(
+  {
+    id: 'toggle-color-mode',
+    title: colorMode.value === 'light'
+      ? 'Switch to dark mode'
+      : 'Switch to light mode',
+    handler: toggleMode,
+    icon: colorMode.value === 'light'
+      ? 'i-ph-moon-stars-duotone'
+      : 'i-ph-sun-dim-duotone',
+  },
+)
 </script>
 
 <template>

components/TheNav.vue

@@ -7,6 +7,28 @@ const runtime = useRuntimeConfig()
 const repo = 'https://github.com/nuxt/learn.nuxt.com'
 const buildTime = new Date(runtime.public.buildTime)
 const timeAgo = useTimeAgo(buildTime)
+
+addCommands(
+  {
+    id: 'download-zip',
+    title: 'Download playground as ZIP',
+    visible: () => {
+      return play.status === 'ready' && guide.features.download !== false
+    },
+    handler: () => {
+      downloadZip(play.webcontainer!)
+    },
+    icon: 'i-ph-download-duotone',
+  },
+  {
+    id: 'toggle-terminal',
+    title: 'Toggle terminal',
+    handler: () => {
+      ui.toggleTerminal()
+    },
+    icon: 'i-ph-terminal-window-duotone',
+  },
+)
 </script>
 
 <template>

stores/commands.ts

@@ -42,12 +42,17 @@ export const useCommandsStore = defineStore('commands', () => {
   })
 
   const commandsResult = computed(() => {
-    if (!search.value)
-      return Array.from(commandsAll)
-    return [
-      ...fuse.value.search(search.value).map(i => i.item),
-      ...guidesResult.value,
-    ]
+    let result = !search.value
+      ? Array.from(commandsAll)
+      : [
+          ...fuse.value.search(search.value).map(i => i.item),
+          ...guidesResult.value,
+        ]
+
+    result = result
+      .filter(i => i.visible ? i.visible() : true)
+
+    return result
   })
 
   return {