Merge remote-tracking branch 'origin/main' into feat/skills-modal-tabs

danielroe · danielroe · commit 734655299803 · 2026-02-01T09:59:34.000Z
diff --git a/app/app.vue b/app/app.vue
@@ -42,7 +42,7 @@ if (import.meta.server) {
 function handleGlobalKeydown(e: KeyboardEvent) {
   if (isEditableElement(e.target)) return
 
-  if (e.key === '/') {
+  if (isKeyWithoutModifiers(e, '/')) {
     e.preventDefault()
 
     // Try to find and focus search input on current page
@@ -58,7 +58,7 @@ function handleGlobalKeydown(e: KeyboardEvent) {
     router.push('/search')
   }
 
-  if (e.key === '?') {
+  if (isKeyWithoutModifiers(e, '?')) {
     e.preventDefault()
     showKbdHints.value = true
   }
diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
@@ -62,23 +62,21 @@ function handleSearchFocus() {
 }
 
 onKeyStroke(
-  ',',
+  e => isKeyWithoutModifiers(e, ',') && !isEditableElement(e.target),
   e => {
-    if (isEditableElement(e.target)) return
-
     e.preventDefault()
     navigateTo('/settings')
   },
   { dedupe: true },
 )
 
 onKeyStroke(
-  'c',
-  e => {
+  e =>
+    isKeyWithoutModifiers(e, 'c') &&
+    !isEditableElement(e.target) &&
     // Allow more specific handlers to take precedence
-    if (e.defaultPrevented) return
-    if (isEditableElement(e.target)) return
-
+    !e.defaultPrevented,
+  e => {
     e.preventDefault()
     navigateTo('/compare')
   },
diff --git a/app/components/MobileMenu.vue b/app/components/MobileMenu.vue
@@ -29,11 +29,12 @@ const route = useRoute()
 watch(() => route.fullPath, closeMenu)
 
 // Close on escape
-onKeyStroke('Escape', () => {
-  if (isOpen.value) {
+onKeyStroke(
+  e => isKeyWithoutModifiers(e, 'Escape') && isOpen.value,
+  e => {
     isOpen.value = false
-  }
-})
+  },
+)
 
 // Prevent body scroll when menu is open
 const isLocked = useScrollLock(document)
diff --git a/app/components/PackageDownloadAnalytics.vue b/app/components/PackageDownloadAnalytics.vue
@@ -19,9 +19,16 @@ const rootEl = shallowRef<HTMLElement | null>(null)
 
 const { width } = useElementSize(rootEl)
 
-onMounted(() => {
+const chartKey = ref(0)
+
+onMounted(async () => {
   rootEl.value = document.documentElement
   resolvedMode.value = colorMode.value === 'dark' ? 'dark' : 'light'
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      chartKey.value += 1
+    })
+  })
 })
 
 const { colors } = useCssVariables(
@@ -543,6 +550,7 @@ const config = computed(() => {
         show: false, // As long as a single package is displayed
       },
       tooltip: {
+        teleportTo: '#chart-modal',
         borderColor: 'transparent',
         backdropFilter: false,
         backgroundColor: 'transparent',
@@ -687,7 +695,12 @@ const config = computed(() => {
     </div>
 
     <ClientOnly v-if="inModal && chartData.dataset">
-      <VueUiXy :dataset="chartData.dataset" :config="config" class="[direction:ltr]">
+      <VueUiXy
+        :dataset="chartData.dataset"
+        :config="config"
+        class="[direction:ltr]"
+        :key="chartKey"
+      >
         <template #menuIcon="{ isOpen }">
           <span v-if="isOpen" class="i-carbon:close w-6 h-6" aria-hidden="true" />
           <span v-else class="i-carbon:overflow-menu-vertical w-6 h-6" aria-hidden="true" />
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
@@ -327,41 +327,38 @@ useSeoMeta({
 })
 
 onKeyStroke(
-  '.',
+  e => isKeyWithoutModifiers(e, '.') && !isEditableElement(e.target),
   e => {
-    if (isEditableElement(e.target)) return
-    if (pkg.value && displayVersion.value) {
-      e.preventDefault()
-      navigateTo({
-        name: 'code',
-        params: {
-          path: [pkg.value.name, 'v', displayVersion.value.version],
-        },
-      })
-    }
+    if (pkg.value == null || displayVersion.value == null) return
+    e.preventDefault()
+    navigateTo({
+      name: 'code',
+      params: {
+        path: [pkg.value.name, 'v', displayVersion.value.version],
+      },
+    })
   },
   { dedupe: true },
 )
 
 onKeyStroke(
-  'd',
+  e => isKeyWithoutModifiers(e, 'd') && !isEditableElement(e.target),
   e => {
-    if (isEditableElement(e.target)) return
-    if (docsLink.value) {
-      e.preventDefault()
-      navigateTo(docsLink.value)
-    }
+    if (!docsLink.value) return
+    e.preventDefault()
+    navigateTo(docsLink.value)
   },
   { dedupe: true },
 )
 
-onKeyStroke('c', e => {
-  if (isEditableElement(e.target)) return
-  if (pkg.value) {
+onKeyStroke(
+  e => isKeyWithoutModifiers(e, 'c') && !isEditableElement(e.target),
+  e => {
+    if (!pkg.value) return
     e.preventDefault()
     router.push({ path: '/compare', query: { packages: pkg.value.name } })
-  }
-})
+  },
+)
 
 defineOgImageComponent('Package', {
   name: () => pkg.value?.name ?? 'Package',
@@ -392,7 +389,7 @@ function handleClick(event: MouseEvent) {
 </script>
 
 <template>
-  <main class="container flex-1 py-8 xl:py-12">
+  <main class="container flex-1 w-full py-8 xl:py-12">
     <PackageSkeleton v-if="status === 'pending'" />
 
     <article v-else-if="status === 'success' && pkg" class="package-page">
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
@@ -5,18 +5,15 @@ const { locale, locales, setLocale: setNuxti18nLocale } = useI18n()
 const colorMode = useColorMode()
 const { currentLocaleStatus, isSourceLocale } = useI18nStatus()
 
-// Escape to go back (but not when focused on form elements)
+// Escape to go back (but not when focused on form elements or modal is open)
 onKeyStroke(
-  'Escape',
+  e =>
+    isKeyWithoutModifiers(e, 'Escape') &&
+    !isEditableElement(e.target) &&
+    !document.documentElement.matches('html:has(:modal)'),
   e => {
-    const target = e.target as HTMLElement
-    if (
-      !['INPUT', 'SELECT', 'TEXTAREA'].includes(target?.tagName) &&
-      !document.documentElement.matches('html:has(:modal)')
-    ) {
-      e.preventDefault()
-      router.back()
-    }
+    e.preventDefault()
+    router.back()
   },
   { dedupe: true },
 )
@@ -85,7 +82,9 @@ const setLocale: typeof setNuxti18nLocale = locale => {
                     | 'system'
                 "
               >
-                <option value="system">{{ $t('settings.theme_system') }}</option>
+                <option value="system">
+                  {{ $t('settings.theme_system') }}
+                </option>
                 <option value="light">{{ $t('settings.theme_light') }}</option>
                 <option value="dark">{{ $t('settings.theme_dark') }}</option>
               </select>
diff --git a/app/utils/input.ts b/app/utils/input.ts
@@ -13,3 +13,16 @@ export function isEditableElement(target: EventTarget | null): boolean {
   if (!target || !(target instanceof HTMLElement)) return false
   return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable
 }
+
+/**
+ * Check if a keyboard event matches a specific key without any modifier keys.
+ */
+export function isKeyWithoutModifiers(event: KeyboardEvent, key: string): boolean {
+  return (
+    event.key.toLowerCase() === key.toLowerCase() &&
+    !event.altKey &&
+    !event.ctrlKey &&
+    !event.metaKey &&
+    !event.shiftKey
+  )
+}
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -39,6 +39,12 @@ export default defineNuxtConfig({
 
   css: ['~/assets/main.css', 'vue-data-ui/style.css'],
 
+  $production: {
+    debug: {
+      hydration: true,
+    },
+  },
+
   runtimeConfig: {
     sessionPassword: '',
     // Upstash Redis for distributed OAuth token refresh locking in production
@@ -113,7 +119,7 @@ export default defineNuxtConfig({
     typedPages: true,
   },
 
-  compatibilityDate: '2024-04-03',
+  compatibilityDate: '2026-01-31',
 
   nitro: {
     experimental: {
@@ -219,10 +225,6 @@ export default defineNuxtConfig({
     },
   },
 
-  debug: {
-    hydration: true,
-  },
-
   typescript: {
     tsConfig: {
       compilerOptions: {
diff --git a/test/e2e/interactions.spec.ts b/test/e2e/interactions.spec.ts
@@ -48,7 +48,9 @@ test.describe('Search Pages', () => {
     // Wait for navigation to /search (debounce is 250ms)
     await expect(page).toHaveURL(/\/search/, { timeout: 10000 })
 
-    await expect(page.locator('[data-result-index="0"]').first()).toBeVisible({ timeout: 15000 })
+    await expect(page.locator('[data-result-index="0"]').first()).toBeVisible({
+      timeout: 15000,
+    })
 
     // Home search input should be gone (we're on /search now)
     await expect(homeSearchInput).not.toBeVisible()
@@ -70,7 +72,9 @@ test.describe('Search Pages', () => {
 
     await expect(page).toHaveURL(/\/search/, { timeout: 10000 })
 
-    await expect(page.locator('[data-result-index="0"]').first()).toBeVisible({ timeout: 15000 })
+    await expect(page.locator('[data-result-index="0"]').first()).toBeVisible({
+      timeout: 15000,
+    })
 
     const headerSearchInput = page.locator('#header-search')
     await expect(headerSearchInput).toBeFocused()
@@ -86,6 +90,21 @@ test.describe('Keyboard Shortcuts', () => {
     await expect(page).toHaveURL(/\/compare/)
   })
 
+  test('"c" does not navigate when any modifier key is pressed', async ({ page, goto }) => {
+    await goto('/settings', { waitUntil: 'hydration' })
+
+    await page.keyboard.press('Shift+c')
+    await expect(page).toHaveURL(/\/settings/)
+    await page.keyboard.press('Control+c')
+    await expect(page).toHaveURL(/\/settings/)
+    await page.keyboard.press('Alt+c')
+    await expect(page).toHaveURL(/\/settings/)
+    await page.keyboard.press('Meta+c')
+    await expect(page).toHaveURL(/\/settings/)
+    await page.keyboard.press('ControlOrMeta+Shift+c')
+    await expect(page).toHaveURL(/\/settings/)
+  })
+
   test('"c" on package page navigates to /compare with package pre-filled', async ({
     page,
     goto,
@@ -113,6 +132,24 @@ test.describe('Keyboard Shortcuts', () => {
     await expect(searchInput).toHaveValue('c')
   })
 
+  test('"c" on package page does not navigate when any modifier key is pressed', async ({
+    page,
+    goto,
+  }) => {
+    await goto('/vue', { waitUntil: 'hydration' })
+
+    await page.keyboard.press('Shift+c')
+    await expect(page).toHaveURL(/\/vue/)
+    await page.keyboard.press('Control+c')
+    await expect(page).toHaveURL(/\/vue/)
+    await page.keyboard.press('Alt+c')
+    await expect(page).toHaveURL(/\/vue/)
+    await page.keyboard.press('Meta+c')
+    await expect(page).toHaveURL(/\/vue/)
+    await page.keyboard.press('ControlOrMeta+Shift+c')
+    await expect(page).toHaveURL(/\/vue/)
+  })
+
   test('"," navigates to /settings', async ({ page, goto }) => {
     await goto('/compare', { waitUntil: 'hydration' })
 
@@ -121,6 +158,25 @@ test.describe('Keyboard Shortcuts', () => {
     await expect(page).toHaveURL(/\/settings/)
   })
 
+  test('"," does not navigate when any modifier key is pressed', 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('Shift+,')
+    await expect(page).toHaveURL(/\/settings/)
+    await page.keyboard.press('Control+,')
+    await expect(page).toHaveURL(/\/settings/)
+    await page.keyboard.press('Alt+,')
+    await expect(page).toHaveURL(/\/settings/)
+    await page.keyboard.press('Meta+,')
+    await expect(page).toHaveURL(/\/settings/)
+    await page.keyboard.press('ControlOrMeta+Shift+,')
+    await expect(page).toHaveURL(/\/settings/)
+  })
+
   test('"," does not navigate when search input is focused', async ({ page, goto }) => {
     await goto('/compare', { waitUntil: 'hydration' })
 

Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ if (import.meta.server) {`
`42`	`42`	`function handleGlobalKeydown(e: KeyboardEvent) {`
`43`	`43`	`if (isEditableElement(e.target)) return`
`44`	`44`
`45`		`- if (e.key === '/') {`
	`45`	`+ if (isKeyWithoutModifiers(e, '/')) {`
`46`	`46`	`e.preventDefault()`
`47`	`47`
`48`	`48`	`// Try to find and focus search input on current page`
`@@ -58,7 +58,7 @@ function handleGlobalKeydown(e: KeyboardEvent) {`
`58`	`58`	`router.push('/search')`
`59`	`59`	`}`
`60`	`60`
`61`		`- if (e.key === '?') {`
	`61`	`+ if (isKeyWithoutModifiers(e, '?')) {`
`62`	`62`	`e.preventDefault()`
`63`	`63`	`showKbdHints.value = true`
`64`	`64`	`}`