fix: remove compare icon from header, add c shortcut (npmx-dev#571)

Author: serhalp

app/components/AppHeader.vue

@@ -72,6 +72,24 @@ onKeyStroke(
   },
   { dedupe: true },
 )
+
+onKeyStroke(
+  'c',
+  e => {
+    // Allow more specific handlers to take precedence
+    if (e.defaultPrevented) return
+
+    // Don't trigger if user is typing in an input
+    const target = e.target as HTMLElement
+    if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+      return
+    }
+
+    e.preventDefault()
+    navigateTo('/compare')
+  },
+  { dedupe: true },
+)
 </script>
 
 <template>
@@ -156,10 +174,16 @@ onKeyStroke(
         <!-- Desktop: Compare link -->
         <NuxtLink
           to="/compare"
-          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          aria-keyshortcuts="c"
         >
-          <span class="i-carbon:compare w-4 h-4" aria-hidden="true" />
           {{ $t('nav.compare') }}
+          <kbd
+            class="inline-flex items-center justify-center w-5 h-5 text-xs bg-bg-muted border border-border rounded"
+            aria-hidden="true"
+          >
+            c
+          </kbd>
         </NuxtLink>
 
         <!-- Desktop: Settings link -->

app/pages/[...package].vue

@@ -338,8 +338,9 @@ onKeyStroke(
   { dedupe: true },
 )
 
-onKeyStroke('c', () => {
+onKeyStroke('c', e => {
   if (pkg.value) {
+    e.preventDefault()
     router.push({ path: '/compare', query: { packages: pkg.value.name } })
   }
 })

test/e2e/interactions.spec.ts

@@ -76,3 +76,63 @@ test.describe('Search Pages', () => {
     await expect(headerSearchInput).toBeFocused()
   })
 })
+
+test.describe('Keyboard Shortcuts', () => {
+  test('"c" navigates to /compare', async ({ page, goto }) => {
+    await goto('/settings', { waitUntil: 'hydration' })
+
+    await page.keyboard.press('c')
+
+    await expect(page).toHaveURL(/\/compare/)
+  })
+
+  test('"c" on package page navigates to /compare with package pre-filled', async ({
+    page,
+    goto,
+  }) => {
+    await goto('/vue', { waitUntil: 'hydration' })
+
+    await page.keyboard.press('c')
+
+    // Should navigate to /compare with the package in the query
+    await expect(page).toHaveURL(/\/compare\?packages=vue/)
+  })
+
+  test('"c" does not navigate when search input is focused', async ({ page, goto }) => {
+    await goto('/settings', { waitUntil: 'hydration' })
+
+    const searchInput = page.locator('#header-search')
+    await searchInput.focus()
+    await expect(searchInput).toBeFocused()
+
+    await page.keyboard.press('c')
+
+    // Should still be on settings, not navigated to compare
+    await expect(page).toHaveURL(/\/settings/)
+    // The 'c' should have been typed into the input
+    await expect(searchInput).toHaveValue('c')
+  })
+
+  test('"," navigates to /settings', async ({ page, goto }) => {
+    await goto('/compare', { waitUntil: 'hydration' })
+
+    await page.keyboard.press(',')
+
+    await expect(page).toHaveURL(/\/settings/)
+  })
+
+  test('"," does not navigate when search input is focused', async ({ page, goto }) => {
+    await goto('/compare', { waitUntil: 'hydration' })
+
+    const searchInput = page.locator('#header-search')
+    await searchInput.focus()
+    await expect(searchInput).toBeFocused()
+
+    await page.keyboard.press(',')
+
+    // Should still be on compare, not navigated to settings
+    await expect(page).toHaveURL(/\/compare/)
+    // The ',' should have been typed into the input
+    await expect(searchInput).toHaveValue(',')
+  })
+})