fix: address valid CodeRabbit feedback

Author: serhalp

app/composables/useCommandPaletteCommands.ts

@@ -164,9 +164,12 @@ export function useCommandPaletteCommands() {
   })
 
   const matchedCommands = computed(() => {
+    const availableGroups = new Set(commands.value.map(command => command.group))
     let nextCommands = results.value.map(result => result.item)
 
     queryOverrides.value.forEach(({ scopeId, group }) => {
+      if (!availableGroups.has(group)) return
+
       const resolve = resolveQueryOverride(scopeId, group)
       if (!resolve) return
       const overrideCommands = resolve(trimmedQuery.value)

app/composables/useCommandPalettePackageCommands.ts

@@ -31,17 +31,13 @@ export function useCommandPalettePackageCommands(
       const resolvedContext = toValue(context)
       if (!resolvedContext?.resolvedVersion) return []
 
+      const splitName = resolvedContext.packageName.split('/')
       const docsLink = {
         name: 'docs' as const,
         params: {
-          path: [resolvedContext.packageName, 'v', resolvedContext.resolvedVersion] satisfies [
-            string,
-            string,
-            string,
-          ],
+          path: [...splitName, 'v', resolvedContext.resolvedVersion] as [string, ...string[]],
         },
       }
-      const splitName = resolvedContext.packageName.split('/')
       const codeLink = {
         name: 'code' as const,
         params: {

app/composables/useCommandPalettePackageVersions.ts

@@ -5,31 +5,37 @@ export function useCommandPalettePackageVersions(
   packageName: MaybeRefOrGetter<string | null | undefined>,
 ) {
   const versions = shallowRef<string[] | null>(null)
-  let versionsPromise: Promise<void> | null = null
+  let pendingLoad: Promise<void> | null = null
+  let loadToken = 0
 
   watch(
     () => toValue(packageName),
     () => {
       versions.value = null
-      versionsPromise = null
+      pendingLoad = null
+      loadToken += 1
     },
   )
 
   async function ensureLoaded() {
     const resolvedPackageName = toValue(packageName)
     if (!resolvedPackageName || versions.value) return
-    if (versionsPromise) return versionsPromise
+    if (pendingLoad) return pendingLoad
 
-    versionsPromise = fetchAllPackageVersions(resolvedPackageName)
+    const requestToken = ++loadToken
+    const load = fetchAllPackageVersions(resolvedPackageName)
       .then(allVersions => {
-        if (toValue(packageName) !== resolvedPackageName) return
+        if (requestToken !== loadToken || toValue(packageName) !== resolvedPackageName) return
         versions.value = allVersions.map(version => version.version)
       })
       .finally(() => {
-        versionsPromise = null
+        if (pendingLoad === load) {
+          pendingLoad = null
+        }
       })
 
-    return versionsPromise
+    pendingLoad = load
+    return load
   }
 
   return {

app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue

@@ -336,9 +336,24 @@ defineOgImageComponent('Default', {
 
 useCommandPaletteContextCommands(
   computed((): CommandPaletteContextCommandInput[] => {
-    if (!isViewingFile.value || isBinaryFile.value || !fileContent.value) return []
+    if (!isViewingFile.value) return []
 
-    const commands: CommandPaletteContextCommandInput[] = [
+    const commands: CommandPaletteContextCommandInput[] = []
+
+    if (filePath.value) {
+      commands.push({
+        id: 'code-open-raw',
+        group: 'links',
+        label: $t('code.raw'),
+        keywords: [packageName.value, filePath.value],
+        iconClass: 'i-lucide:file-output',
+        href: `https://cdn.jsdelivr.net/npm/${packageName.value}@${version.value}/${filePath.value}`,
+      })
+    }
+
+    if (isBinaryFile.value || !fileContent.value) return commands
+
+    commands.push(
       {
         id: 'code-copy-link',
         group: 'actions',
@@ -359,18 +374,7 @@ useCommandPaletteContextCommands(
           copyFileContent()
         },
       },
-    ]
-
-    if (filePath.value) {
-      commands.push({
-        id: 'code-open-raw',
-        group: 'links',
-        label: $t('code.raw'),
-        keywords: [packageName.value, filePath.value],
-        iconClass: 'i-lucide:file-output',
-        href: `https://cdn.jsdelivr.net/npm/${packageName.value}@${version.value}/${filePath.value}`,
-      })
-    }
+    )
 
     if (fileContent.value.markdownHtml) {
       commands.push(

app/pages/profile/[identity]/index.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { updateProfile as updateProfileUtil } from '~/utils/atproto/profile'
 import type { CommandPaletteContextCommandInput } from '~/types/command-palette'
+import { getSafeHttpUrl } from '#shared/utils/url'
 
 const route = useRoute('profile-identity')
 const identity = computed(() => route.params.identity)
@@ -94,6 +95,7 @@ const inviteUrl = computed(() => {
   const text = $t('profile.invite.compose_text', { handle: profile.value.handle })
   return `https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`
 })
+const safeProfileWebsiteUrl = computed(() => getSafeHttpUrl(profile.value.website))
 
 useCommandPaletteContextCommands(
   computed((): CommandPaletteContextCommandInput[] => {
@@ -112,14 +114,14 @@ useCommandPaletteContextCommands(
       })
     }
 
-    if (profile.value.website) {
+    if (safeProfileWebsiteUrl.value) {
       commands.push({
         id: 'profile-website',
         group: 'links',
         label: $t('profile.website'),
-        keywords: [profile.value.website, profile.value.handle ?? identity.value],
+        keywords: [profile.value.website ?? '', profile.value.handle ?? identity.value],
         iconClass: 'i-lucide:link',
-        href: profile.value.website,
+        href: safeProfileWebsiteUrl.value,
       })
     }
 
@@ -207,7 +209,11 @@ defineOgImageComponent('Default', {
         <p v-if="profile.description">{{ profile.description }}</p>
         <div class="flex gap-4 items-center font-mono text-sm">
           <h2>@{{ profile.handle ?? identity }}</h2>
-          <LinkBase v-if="profile.website" :to="profile.website" classicon="i-lucide:link">
+          <LinkBase
+            v-if="safeProfileWebsiteUrl"
+            :to="safeProfileWebsiteUrl"
+            classicon="i-lucide:link"
+          >
             {{ profile.website }}
           </LinkBase>
           <ButtonBase

docs/content/index.md

@@ -39,7 +39,7 @@ links:
 :::u-page-feature{icon="i-lucide:link" to="/guide/url-structure" title="Use familiar URLs" description="Replace npmjs.com with npmx.dev in any URL and it just works."}
 :::
 
-:::u-page-feature{icon="i-lucide:keyboard" to="/guide/keyboard-shortcuts" title="Navigate with keyboard" description="Open the command palette with ⌘K on macOS or Ctrl+K on Windows and Linux, press / to search, and use arrow keys to move fast."}
+:::u-page-feature{icon="i-lucide:keyboard" to="/guide/keyboard-shortcuts" title="Navigate with keyboard" description="Open the command palette with ⌘K on macOS or Ctrl+K on Windows and Linux. Press / to search. Use arrow keys to browse results."}
 :::
 
 :::u-page-feature{icon="i-lucide:shield-check" to="/guide/features" title="Check security" description="Vulnerability warnings from OSV database and provenance indicators for verified builds."}

shared/utils/url.ts

@@ -27,6 +27,21 @@ export function areUrlsEquivalent(url1: string, url2: string): boolean {
   return normalizeUrlForComparison(url1) === normalizeUrlForComparison(url2)
 }
 
+export function getSafeHttpUrl(url?: string | null): string | null {
+  if (!url) return null
+
+  try {
+    const parsed = new URL(url)
+    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+      return null
+    }
+
+    return parsed.href
+  } catch {
+    return null
+  }
+}
+
 export function normalizeSearchParam(query?: LocationQueryValue | LocationQueryValue[]): string {
   if (!query) return ''
 

test/nuxt/a11y.spec.ts

@@ -48,6 +48,20 @@ async function runAxe(wrapper: VueWrapper): Promise<AxeResults> {
   return axe.run(container, axeRunOptions)
 }
 
+async function runAxeElements(elements: Array<Element | null | undefined>): Promise<AxeResults> {
+  const container = document.createElement('div')
+  container.id = `test-container-${Date.now()}`
+  document.body.appendChild(container)
+  mountedContainers.push(container)
+
+  for (const element of elements) {
+    if (!element) continue
+    container.appendChild(element.cloneNode(true))
+  }
+
+  return axe.run(container, axeRunOptions)
+}
+
 // --- Console warning assertion --------------------------------------------------
 // Fail any test that emits unexpected console.warn calls. This catches issues
 // like missing/invalid props that would otherwise silently pass.
@@ -504,11 +518,16 @@ describe('component accessibility audits', () => {
     })
 
     it('should have no accessibility violations when open', async () => {
-      const component = await mountSuspended(CommandPaletteHarness)
+      await mountSuspended(CommandPaletteHarness)
       await nextTick()
       await nextTick()
 
-      const results = await runAxe(component)
+      const dialog = document.getElementById('command-palette-modal')
+      const announcer = document.getElementById('command-palette-modal-announcement')
+
+      expect(dialog).not.toBeNull()
+
+      const results = await runAxeElements([announcer, dialog])
       expect(results.violations).toEqual([])
     })
   })

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

@@ -399,6 +399,24 @@ describe('useCommandPaletteCommands', () => {
     wrapper.unmount()
   })
 
+  it('does not inject version overrides into unrelated palette subviews', async () => {
+    const { wrapper, groupedCommands, flatCommands } = await captureCommandPalette({
+      view: 'languages',
+      query: '^3.4.0',
+      packageContext: {
+        packageName: 'vue',
+        resolvedVersion: '3.4.2',
+        latestVersion: '4.0.0',
+        versions: ['4.0.0', '3.5.0', '3.4.2', '3.3.0'],
+      },
+    })
+
+    expect(groupedCommands.value.map(group => group.id)).not.toContain('versions')
+    expect(flatCommands.value.some(command => command.id.startsWith('version:'))).toBe(false)
+
+    wrapper.unmount()
+  })
+
   it('shows accent color commands on the accent color subpage', async () => {
     const { wrapper, groupedCommands, flatCommands } = await captureCommandPalette({
       view: 'accent-colors',
@@ -474,7 +492,7 @@ describe('useCommandPaletteCommands', () => {
     expect(flatCommands.value.find(command => command.id === 'package-docs')?.to).toEqual({
       name: 'docs',
       params: {
-        path: ['@scope/pkg', 'v', '1.0.0'],
+        path: ['@scope', 'pkg', 'v', '1.0.0'],
       },
     })
 

test/nuxt/composables/use-command-palette-package-versions.spec.ts

@@ -118,4 +118,38 @@ describe('useCommandPalettePackageVersions', () => {
 
     wrapper.unmount()
   })
+
+  it('keeps deduping the active package while an older request finishes', async () => {
+    const pendingFetches = new Map<string, (value: Array<{ version: string }>) => void>()
+    mockFetchAllPackageVersions.mockImplementation(
+      (packageName: string) =>
+        new Promise<Array<{ version: string }>>(resolve => {
+          pendingFetches.set(packageName, resolve)
+        }),
+    )
+
+    const { wrapper, packageName, result } = await capturePackageVersions('vue')
+
+    const vueLoad = result.ensureLoaded()
+
+    packageName.value = 'react'
+    await nextTick()
+
+    const firstReactLoad = result.ensureLoaded()
+
+    pendingFetches.get('vue')?.([{ version: '3.5.0' }])
+    await vueLoad
+    await nextTick()
+
+    const secondReactLoad = result.ensureLoaded()
+
+    expect(mockFetchAllPackageVersions).toHaveBeenCalledTimes(2)
+
+    pendingFetches.get('react')?.([{ version: '19.0.0' }])
+    await Promise.all([firstReactLoad, secondReactLoad])
+
+    expect(result.versions.value).toEqual(['19.0.0'])
+
+    wrapper.unmount()
+  })
 })