fix: make "Search" nav item and "Search for query" separate

Trying to collapse them was causing more problems than it solved.

Author: serhalp

app/composables/useCommandPaletteCommands.ts

@@ -85,9 +85,7 @@ export function useCommandPaletteCommands() {
   }
 
   const trimmedQuery = computed(() => query.value.trim())
-  const { globalCommands, viewDefinitions } = useCommandPaletteGlobalCommands({
-    submitSearchQuery,
-  })
+  const { globalCommands, viewDefinitions } = useCommandPaletteGlobalCommands()
   const currentViewDefinition = computed(() =>
     view.value === 'root' ? null : viewDefinitions.value[view.value],
   )
@@ -126,13 +124,13 @@ export function useCommandPaletteCommands() {
   const trailingSearchCommand = computed<CommandPaletteCommand | null>(() => {
     if (view.value !== 'root' || !trimmedQuery.value) return null
 
-    const searchCommand = rootViewCommands.value.find(command => command.id === 'search')
-    if (!searchCommand) return null
-
     return {
-      ...searchCommand,
+      id: 'search-query',
+      group: 'actions' as const,
       label: t('command_palette.actions.search_for', { query: trimmedQuery.value }),
-      keywords: [...searchCommand.keywords, trimmedQuery.value],
+      keywords: [t('search.title_packages'), t('search.label'), trimmedQuery.value],
+      iconClass: 'i-lucide:search',
+      action: submitSearchQuery,
     }
   })
 

app/composables/useCommandPaletteGlobalCommands.ts

@@ -6,10 +6,6 @@ import {
   NPMX_DOCS_SITE,
 } from '#shared/utils/constants'
 
-interface UseCommandPaletteGlobalCommandsOptions {
-  submitSearchQuery: () => Promise<void>
-}
-
 type CommandPaletteSubview = Exclude<CommandPaletteView, 'root'>
 
 interface CommandPaletteViewDefinition {
@@ -73,9 +69,7 @@ function withRootSearchLabel(command: CommandPaletteCommand, label: string): Com
   }
 }
 
-export function useCommandPaletteGlobalCommands({
-  submitSearchQuery,
-}: UseCommandPaletteGlobalCommandsOptions) {
+export function useCommandPaletteGlobalCommands() {
   const { locale, locales, setLocale, t } = useI18n()
   const route = useRoute()
   const colorMode = useColorMode()
@@ -219,7 +213,9 @@ export function useCommandPaletteGlobalCommands({
         label: t('command_palette.actions.search'),
         keywords: [t('search.title_packages'), t('search.label')],
         iconClass: 'i-lucide:search',
-        action: submitSearchQuery,
+        active: route.name === 'search',
+        activeLabel: activeLabel(route.name === 'search', t('command_palette.here')),
+        to: { name: 'search' },
       },
       {
         id: 'keyboard-shortcuts',

test/nuxt/composables/use-command-palette-commands.spec.ts

@@ -336,7 +336,7 @@ describe('useCommandPaletteCommands', () => {
       },
     })
 
-    expect(flatCommands.value.find(command => command.id === 'search')).toBeTruthy()
+    expect(flatCommands.value.find(command => command.id === 'search-query')).toBeTruthy()
     expect(
       groupedCommands.value.find(group => group.id === 'versions')?.items.map(item => item.id),
     ).toEqual(['version:3.4.2', 'version:3.5.0'])
@@ -378,8 +378,8 @@ describe('useCommandPaletteCommands', () => {
       query: 'webpack',
     })
 
-    expect(flatCommands.value.find(command => command.id === 'search')).toBeTruthy()
-    expect(flatCommands.value.at(-1)?.id).toBe('search')
+    expect(flatCommands.value.find(command => command.id === 'search-query')).toBeTruthy()
+    expect(flatCommands.value.at(-1)?.id).toBe('search-query')
     expect(flatCommands.value.at(-1)?.label).toBe('Search for "webpack"')
 
     wrapper.unmount()