Merge branch 'main' into fix/ignore-shortcuts

Author: serhalp

.github/workflows/ci.yml

@@ -139,4 +139,4 @@ jobs:
         run: pnpm install
 
       - name: 🔍 Check for unused code
-        run: pnpm knip:production
+        run: pnpm knip

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Daniel Roe
+Copyright (c) 2026 npmx team and contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

app/components/AppHeader.vue

@@ -20,6 +20,7 @@ const isSearchExpandedManually = shallowRef(false)
 const searchBoxRef = shallowRef<{ focus: () => void } | null>(null)
 
 // On search page, always show search expanded on mobile
+const isOnHomePage = computed(() => route.name === 'index')
 const isOnSearchPage = computed(() => route.name === 'search')
 const isSearchExpanded = computed(() => isOnSearchPage.value || isSearchExpandedManually.value)
 
@@ -72,17 +73,36 @@ 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>
   <header class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border">
     <nav
       :aria-label="$t('nav.main_navigation')"
-      class="container min-h-14 flex items-center justify-between gap-2"
+      class="container min-h-14 flex items-center gap-2"
+      :class="isOnHomePage ? 'justify-end' : 'justify-between'"
     >
       <!-- Mobile: Logo + search button (expands search, doesn't navigate) -->
       <button
-        v-if="!isSearchExpanded"
+        v-if="!isSearchExpanded && !isOnHomePage"
         type="button"
         class="sm:hidden flex-shrink-0 inline-flex items-center gap-2 font-mono text-lg font-medium text-fg hover:text-fg transition-colors duration-200 focus-ring rounded"
         :aria-label="$t('nav.tap_to_search')"
@@ -156,10 +176,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 -->
@@ -185,7 +211,7 @@ onKeyStroke(
         <!-- Mobile: Menu button (always visible, toggles menu) -->
         <button
           type="button"
-          class="sm:hidden p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
+          class="sm:hidden flex items-center p-2 -m-2 text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
           :aria-label="showMobileMenu ? $t('common.close') : $t('nav.open_menu')"
           :aria-expanded="showMobileMenu"
           @click="showMobileMenu = !showMobileMenu"

app/components/PackageTableRow.vue

@@ -17,8 +17,7 @@ const emit = defineEmits<{
 const pkg = computed(() => props.result.package)
 const score = computed(() => props.result.score)
 
-// Get the best available date: prefer result.updated (from packument), fall back to package.date
-const updatedDate = computed(() => props.result.updated ?? props.result.package.date)
+const updatedDate = computed(() => props.result.package.date)
 
 function formatDownloads(count?: number): string {
   if (count === undefined) return '-'

app/components/PackageVulnerabilityTree.vue

@@ -7,17 +7,11 @@ const props = defineProps<{
   version: string
 }>()
 
-const {
-  data: vulnTree,
-  status,
-  fetch: fetchVulnTree,
-} = useDependencyAnalysis(
+const { data: vulnTree, status } = useDependencyAnalysis(
   () => props.packageName,
   () => props.version,
 )
 
-onMounted(() => fetchVulnTree())
-
 const isExpanded = shallowRef(false)
 const showAllPackages = shallowRef(false)
 const showAllVulnerabilities = shallowRef(false)

app/components/Toggle.client.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+defineProps<{
+  label?: string
+  description?: string
+}>()
+
+const checked = defineModel<boolean>({
+  default: false,
+})
+</script>
+
+<template>
+  <button
+    type="button"
+    class="w-full flex items-center justify-between gap-4 group"
+    role="switch"
+    :aria-checked="checked"
+    @click="checked = !checked"
+  >
+    <span v-if="label" class="text-sm text-fg font-medium text-start">
+      {{ label }}
+    </span>
+    <span
+      class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
+      :class="checked ? 'bg-accent' : 'bg-bg border border-border'"
+      aria-hidden="true"
+    >
+      <span
+        class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
+        :class="checked ? 'bg-bg' : 'bg-fg-muted'"
+      />
+    </span>
+  </button>
+  <p v-if="description" class="text-sm text-fg-muted">
+    {{ description }}
+  </p>
+</template>
+
+<style scoped>
+button[aria-checked='false'] > span:last-of-type > span {
+  translate: 0;
+}
+button[aria-checked='true'] > span:last-of-type > span {
+  translate: calc(100%);
+}
+html[dir='rtl'] button[aria-checked='true'] > span:last-of-type > span {
+  translate: calc(-100%);
+}
+</style>

app/components/ToggleSkeleton.vue app/components/Toggle.server.vueapp/components/ToggleSkeleton.vue renamed to app/components/Toggle.server.vue

@@ -1,14 +1,18 @@
 <script setup lang="ts">
 defineProps<{
-  label: string
+  label?: string
+  description?: string
 }>()
 </script>
 
 <template>
   <div class="w-full flex items-center justify-between gap-4">
-    <span class="text-sm text-fg font-medium text-start">
+    <span v-if="label" class="text-sm text-fg font-medium text-start">
       {{ label }}
     </span>
     <span class="skeleton block h-6 w-11 shrink-0 rounded-full" />
   </div>
+  <p v-if="description" class="text-sm text-fg-muted">
+    {{ description }}
+  </p>
 </template>

app/components/ViewModeToggle.vue

@@ -18,7 +18,7 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
       :aria-label="$t('filters.view_mode.cards')"
       @click="viewMode = 'cards'"
     >
-      <span class="i-carbon-grid w-4 h-4" aria-hidden="true" />
+      <span class="i-carbon-horizontal-view w-4 h-4" aria-hidden="true" />
       <span class="sr-only">{{ $t('filters.view_mode.cards') }}</span>
     </button>
     <button
@@ -29,7 +29,7 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
       :aria-label="$t('filters.view_mode.table')"
       @click="viewMode = 'table'"
     >
-      <span class="i-carbon-list w-4 h-4" aria-hidden="true" />
+      <span class="i-carbon-table-split w-4 h-4" aria-hidden="true" />
       <span class="sr-only">{{ $t('filters.view_mode.table') }}</span>
     </button>
   </div>

app/composables/useAtproto.ts

@@ -1,6 +1,5 @@
 import type { UserSession } from '#shared/schemas/userSession'
 
-/** @public */
 export function useAtproto() {
   const { data: user, pending, clear } = useFetch<UserSession | null>('/api/auth/session')
 

app/composables/useCachedFetch.ts

@@ -27,7 +27,6 @@ import type { CachedFetchResult } from '#shared/utils/fetch-cache-config'
  *   )
  * }
  * ```
- * @public
  */
 export function useCachedFetch(): CachedFetchFunction {
   // On client, return a function that just uses $fetch (no caching, not stale)