Merge branch 'main' into feat/bookmark-packages

Author: Flo0806

.github/workflows/autofix.yml

@@ -42,7 +42,8 @@ jobs:
       - name: 🏃 Update component test snapshots
         run: pnpm test:nuxt -u
 
-      - name: 🖥️ Update browser test snapshots
-        run: pnpm test:browser --update-snapshots
+      # TODO: re-enable when we have snapshots in browser tests
+      # - name: 🖥️ Update browser test snapshots
+      #   run: pnpm test:browser --update-snapshots
 
       - uses: autofix-ci/action@635ffb0c9798bd160680f18fd73371e355b85f27

CONTRIBUTING.md

@@ -242,7 +242,7 @@ npmx.dev uses [@nuxtjs/i18n](https://i18n.nuxtjs.org/) for internationalization.
 ### Approach
 
 - All user-facing strings should use translation keys via `$t()` in templates and script
-- Translation files live in `i18n/locales/` (e.g., `en-US.json`)
+- Translation files live in [`i18n/locales/`](i18n/locales) (e.g., `en-US.json`)
 - We use the `no_prefix` strategy (no `/en-US/` or `/fr-FR/` in URLs)
 - Locale preference is stored in cookies and respected on subsequent visits
 

app/components/AppFooter.vue

@@ -1,50 +1,51 @@
 <template>
   <footer class="border-t border-border mt-auto">
     <div class="container py-3 sm:py-8 flex flex-col gap-2 sm:gap-4 text-fg-subtle text-sm">
-      <div class="flex flex-col sm:flex-row items-center justify-start gap-2 sm:gap-4">
-        <p class="font-mono m-0 hidden sm:block">{{ $t('tagline') }}</p>
-        <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
-        <div class="flex items-center justify-start gap-3 sm:gap-6">
+      <div
+        class="flex flex-col sm:flex-row items-center sm:items-baseline justify-between gap-2 sm:gap-4"
+      >
+        <p class="font-mono text-balance m-0 hidden sm:block">{{ $t('tagline') }}</p>
+        <div class="flex items-center gap-3 sm:gap-6">
           <NuxtLink
             to="/about"
             class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center"
           >
-            <span>{{ $t('footer.about') }}</span>
+            {{ $t('footer.about') }}
           </NuxtLink>
           <a
             href="https://docs.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center justify-start gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
           >
-            <span>{{ $t('footer.docs') }}</span>
+            {{ $t('footer.docs') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
           <a
             href="https://repo.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex justify-start items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
           >
-            <span>{{ $t('footer.source') }}</span>
+            {{ $t('footer.source') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
           <a
             href="https://social.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center justify-start gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
           >
-            <span>{{ $t('footer.social') }}</span>
+            {{ $t('footer.social') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
           <a
             href="https://chat.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center justify-start gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
           >
-            <span>{{ $t('footer.chat') }}</span>
+            {{ $t('footer.chat') }}
             <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
         </div>

app/components/PackageDependencies.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useVulnerabilityTree } from '~/composables/useVulnerabilityTree'
+import { useDependencyAnalysis } from '~/composables/useDependencyAnalysis'
 import { SEVERITY_TEXT_COLORS, getHighestSeverity } from '#shared/utils/severity'
 
 const props = defineProps<{
@@ -15,7 +15,7 @@ const props = defineProps<{
 const outdatedDeps = useOutdatedDependencies(() => props.dependencies)
 
 // Get vulnerability info from shared cache (already fetched by PackageVulnerabilityTree)
-const { data: vulnTree } = useVulnerabilityTree(
+const { data: vulnTree } = useDependencyAnalysis(
   () => props.packageName,
   () => props.version,
 )
@@ -26,6 +26,12 @@ function getVulnerableDepInfo(depName: string) {
   return vulnTree.value.vulnerablePackages.find(p => p.name === depName && p.depth === 'direct')
 }
 
+// Check if a dependency is deprecated (only direct deps)
+function getDeprecatedDepInfo(depName: string) {
+  if (!vulnTree.value) return null
+  return vulnTree.value.deprecatedPackages.find(p => p.name === depName && p.depth === 'direct')
+}
+
 // Expanded state for each section
 const depsExpanded = shallowRef(false)
 const peerDepsExpanded = shallowRef(false)
@@ -80,7 +86,7 @@ const sortedOptionalDependencies = computed(() => {
         >
           {{ $t('package.dependencies.title', { count: sortedDependencies.length }) }}
           <span
-            class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+            class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
             aria-hidden="true"
           />
         </a>
@@ -89,7 +95,7 @@ const sortedOptionalDependencies = computed(() => {
         <li
           v-for="[dep, version] in sortedDependencies.slice(0, depsExpanded ? undefined : 10)"
           :key="dep"
-          class="flex items-center justify-between py-1 text-sm gap-2"
+          class="flex items-center justify-start py-1 text-sm gap-2"
         >
           <NuxtLink
             :to="{ name: 'package', params: { package: dep.split('/') } }"
@@ -105,8 +111,9 @@ const sortedOptionalDependencies = computed(() => {
               :title="getOutdatedTooltip(outdatedDeps[dep])"
               aria-hidden="true"
             >
-              <span class="i-carbon-warning-alt w-3 h-3 block" />
+              <span class="i-carbon:warning-alt w-3 h-3 block" />
             </span>
+            <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
             <NuxtLink
               v-if="getVulnerableDepInfo(dep)"
               :to="{
@@ -117,12 +124,24 @@ const sortedOptionalDependencies = computed(() => {
               :class="SEVERITY_TEXT_COLORS[getHighestSeverity(getVulnerableDepInfo(dep)!.counts)]"
               :title="`${getVulnerableDepInfo(dep)!.counts.total} vulnerabilities`"
             >
-              <span class="i-carbon-security w-3 h-3 block" aria-hidden="true" />
+              <span class="i-carbon:security w-3 h-3 block" aria-hidden="true" />
               <span class="sr-only">{{ $t('package.dependencies.view_vulnerabilities') }}</span>
             </NuxtLink>
+            <NuxtLink
+              v-if="getDeprecatedDepInfo(dep)"
+              :to="{
+                name: 'package',
+                params: { package: [...dep.split('/'), 'v', getDeprecatedDepInfo(dep)!.version] },
+              }"
+              class="shrink-0 text-purple-500"
+              :title="getDeprecatedDepInfo(dep)!.message"
+            >
+              <span class="i-carbon-warning-hex w-3 h-3 block" aria-hidden="true" />
+              <span class="sr-only">{{ $t('package.deprecated.label') }}</span>
+            </NuxtLink>
             <NuxtLink
               :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
-              class="font-mono text-xs text-right truncate"
+              class="font-mono text-xs text-end truncate"
               :class="getVersionClass(outdatedDeps[dep])"
               :title="outdatedDeps[dep] ? getOutdatedTooltip(outdatedDeps[dep]) : version"
             >
@@ -164,7 +183,7 @@ const sortedOptionalDependencies = computed(() => {
         >
           {{ $t('package.peer_dependencies.title', { count: sortedPeerDependencies.length }) }}
           <span
-            class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+            class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
             aria-hidden="true"
           />
         </a>
@@ -176,7 +195,7 @@ const sortedOptionalDependencies = computed(() => {
         <li
           v-for="peer in sortedPeerDependencies.slice(0, peerDepsExpanded ? undefined : 10)"
           :key="peer.name"
-          class="flex items-center justify-between py-1 text-sm gap-2"
+          class="flex items-center justify-start py-1 text-sm gap-2"
         >
           <div class="flex items-center gap-2 min-w-0">
             <NuxtLink
@@ -193,12 +212,13 @@ const sortedOptionalDependencies = computed(() => {
               {{ $t('package.dependencies.optional') }}
             </span>
           </div>
+          <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
           <NuxtLink
             :to="{
               name: 'package',
               params: { package: [...peer.name.split('/'), 'v', peer.version] },
             }"
-            class="font-mono text-xs text-fg-subtle max-w-[40%] text-right truncate"
+            class="font-mono text-xs text-fg-subtle max-w-[40%] text-end truncate"
             :title="peer.version"
           >
             {{ peer.version }}
@@ -234,7 +254,7 @@ const sortedOptionalDependencies = computed(() => {
             $t('package.optional_dependencies.title', { count: sortedOptionalDependencies.length })
           }}
           <span
-            class="i-carbon-link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+            class="i-carbon:link w-3 h-3 block opacity-0 group-hover:opacity-100 transition-opacity duration-200"
             aria-hidden="true"
           />
         </a>
@@ -249,17 +269,18 @@ const sortedOptionalDependencies = computed(() => {
             optionalDepsExpanded ? undefined : 10,
           )"
           :key="dep"
-          class="flex items-center justify-between py-1 text-sm gap-2"
+          class="flex items-center justify-start py-1 text-sm gap-2"
         >
           <NuxtLink
             :to="{ name: 'package', params: { package: dep.split('/') } }"
             class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0"
           >
             {{ dep }}
           </NuxtLink>
+          <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
           <NuxtLink
             :to="{ name: 'package', params: { package: [...dep.split('/'), 'v', version] } }"
-            class="font-mono text-xs text-fg-subtle max-w-[50%] text-right truncate"
+            class="font-mono text-xs text-fg-subtle max-w-[50%] text-end truncate"
             :title="version"
           >
             {{ version }}

app/components/PackageDeprecatedTree.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import type { DependencyDepth } from '#shared/types'
+
+const props = defineProps<{
+  packageName: string
+  version: string
+}>()
+
+const { data: analysisData, status } = useDependencyAnalysis(
+  () => props.packageName,
+  () => props.version,
+)
+
+const isExpanded = shallowRef(false)
+const showAll = shallowRef(false)
+
+const hasDeprecated = computed(
+  () => analysisData.value && analysisData.value.deprecatedPackages.length > 0,
+)
+
+// Banner color - purple for deprecated
+const bannerColor = 'border-purple-600/40 bg-purple-500/10 text-purple-700 dark:text-purple-400'
+
+// Styling for each depth level
+const depthStyles = {
+  root: {
+    bg: 'bg-purple-500/5 border-l-2 border-l-purple-600',
+    text: 'text-fg',
+  },
+  direct: {
+    bg: 'bg-purple-500/5 border-l-2 border-l-purple-500',
+    text: 'text-fg-muted',
+  },
+  transitive: {
+    bg: 'bg-purple-500/5 border-l-2 border-l-purple-400',
+    text: 'text-fg-muted',
+  },
+} as const
+
+function getDepthStyle(depth: DependencyDepth) {
+  return depthStyles[depth] || depthStyles.transitive
+}
+</script>
+
+<template>
+  <section
+    v-if="status === 'success' && hasDeprecated"
+    aria-labelledby="deprecated-tree-heading"
+    class="relative"
+  >
+    <div class="rounded-lg border overflow-hidden" :class="bannerColor">
+      <!-- Header -->
+      <button
+        type="button"
+        class="w-full flex items-center justify-between gap-3 px-4 py-3 text-left transition-colors duration-200 hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fg/50"
+        :aria-expanded="isExpanded"
+        aria-controls="deprecated-tree-details"
+        @click="isExpanded = !isExpanded"
+      >
+        <div class="flex items-center gap-2 min-w-0">
+          <span class="i-carbon-warning-hex w-4 h-4 shrink-0" aria-hidden="true" />
+          <span class="font-mono text-sm font-medium truncate">
+            {{ $t('package.deprecated.tree_found', analysisData!.deprecatedPackages.length) }}
+          </span>
+        </div>
+        <span
+          class="i-carbon-chevron-down w-4 h-4 transition-transform duration-200 shrink-0"
+          :class="{ 'rotate-180': isExpanded }"
+          aria-hidden="true"
+        />
+      </button>
+
+      <!-- Expandable details -->
+      <div
+        v-show="isExpanded"
+        id="deprecated-tree-details"
+        class="border-t border-border bg-bg-subtle"
+      >
+        <ul class="divide-y divide-border list-none m-0 p-0">
+          <li
+            v-for="pkg in analysisData!.deprecatedPackages.slice(0, showAll ? undefined : 5)"
+            :key="`${pkg.name}@${pkg.version}`"
+            class="px-4 py-3"
+            :class="getDepthStyle(pkg.depth).bg"
+          >
+            <div class="flex items-center gap-2 mb-1">
+              <!-- Path badge -->
+              <DependencyPathPopup v-if="pkg.path && pkg.path.length > 1" :path="pkg.path" />
+
+              <NuxtLink
+                :to="{
+                  name: 'package',
+                  params: { package: [...pkg.name.split('/'), 'v', pkg.version] },
+                }"
+                class="font-mono text-sm font-medium hover:underline truncate"
+                :class="getDepthStyle(pkg.depth).text"
+              >
+                {{ pkg.name }}@{{ pkg.version }}
+              </NuxtLink>
+            </div>
+            <p class="text-xs text-fg-muted m-0 line-clamp-2">
+              {{ pkg.message }}
+            </p>
+          </li>
+        </ul>
+
+        <button
+          v-if="analysisData!.deprecatedPackages.length > 5 && !showAll"
+          type="button"
+          class="w-full px-4 py-2 text-xs font-mono text-fg-muted hover:text-fg border-t border-border transition-colors duration-200"
+          @click="showAll = true"
+        >
+          {{
+            $t('package.deprecated.show_all', { count: analysisData!.deprecatedPackages.length })
+          }}
+        </button>
+      </div>
+    </div>
+  </section>
+</template>