Merge branch 'main' into feat/action-bar

Author: MatteoGabriele

app/components/Package/Header.vue

@@ -247,7 +247,7 @@ const likeAction = async () => {
 
 <template>
   <!-- Package header -->
-  <header class="bg-bg pt-5 w-full container">
+  <header class="bg-bg pt-5 pb-1 w-full container">
     <!-- Package name and version -->
     <div class="flex items-baseline justify-between gap-x-2 gap-y-1 flex-wrap min-w-0">
       <CopyToClipboardButton
@@ -319,7 +319,7 @@ const likeAction = async () => {
   </header>
   <div
     ref="header"
-    class="w-full bg-bg sticky top-14 z-50 border-b border-border pt-2"
+    class="w-full bg-bg sticky top-14 z-10 border-b border-border pt-2"
     :class="[$style.packageHeader]"
     data-testid="package-subheader"
   >
@@ -395,7 +395,7 @@ const likeAction = async () => {
           v-if="mainLink"
           :to="mainLink"
           aria-keyshortcuts="m"
-          class="decoration-none border-b-2 p-1 hover:border-accent/50 lowercase"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50 lowercase focus-visible:[outline-offset:-2px]!"
           :class="page === 'main' ? 'border-accent text-accent!' : 'border-transparent'"
         >
           {{ $t('package.links.main') }}
@@ -404,7 +404,7 @@ const likeAction = async () => {
           v-if="docsLink"
           :to="docsLink"
           aria-keyshortcuts="d"
-          class="decoration-none border-b-2 p-1 hover:border-accent/50"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
           :class="page === 'docs' ? 'border-accent text-accent!' : 'border-transparent'"
         >
           {{ $t('package.links.docs') }}
@@ -413,7 +413,7 @@ const likeAction = async () => {
           v-if="codeLink"
           :to="codeLink"
           aria-keyshortcuts="."
-          class="decoration-none border-b-2 p-1 hover:border-accent/50"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
           :class="page === 'code' ? 'border-accent text-accent!' : 'border-transparent'"
         >
           {{ $t('package.links.code') }}
@@ -423,7 +423,7 @@ const likeAction = async () => {
           :to="diffLink"
           :title="$t('compare.compare_versions_title')"
           aria-keyshortcuts="f"
-          class="decoration-none border-b-2 p-1 hover:border-accent/50"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
           :class="page === 'diff' ? 'border-accent text-accent!' : 'border-transparent'"
         >
           {{ $t('compare.compare_versions') }}

app/components/Package/Versions.vue

@@ -95,6 +95,14 @@ function versionRoute(version: string): RouteLocationRaw {
   return packageRoute(props.packageName, version)
 }
 
+// Route to the full versions history page
+const versionsPageRoute = computed((): RouteLocationRaw => {
+  const [org, name = ''] = props.packageName.startsWith('@')
+    ? props.packageName.split('/')
+    : ['', props.packageName]
+  return { name: 'package-versions', params: { org, name } }
+})
+
 // Version to tags lookup (supports multiple tags per version)
 const versionToTags = computed(() => buildVersionToTagsMap(props.distTags))
 
@@ -521,15 +529,27 @@ function majorGroupContainsCurrent(group: (typeof otherMajorGroups.value)[0]): b
     id="versions"
   >
     <template #actions>
-      <ButtonBase
-        variant="secondary"
-        class="text-fg-subtle hover:text-fg transition-colors min-w-6 min-h-6 -m-1 p-1 rounded"
-        :title="$t('package.downloads.community_distribution')"
-        classicon="i-lucide:file-stack"
-        @click="openDistributionModal"
-      >
-        <span class="sr-only">{{ $t('package.downloads.community_distribution') }}</span>
-      </ButtonBase>
+      <div class="flex items-center gap-3">
+        <LinkBase
+          :to="versionsPageRoute"
+          variant="button-secondary"
+          class="text-fg-subtle hover:text-fg transition-colors min-w-6 min-h-6 p-1 rounded"
+          :title="$t('package.versions.view_all_versions')"
+          classicon="i-lucide:history"
+          data-testid="view-all-versions-link"
+        >
+          <span class="sr-only">{{ $t('package.versions.view_all_versions') }}</span>
+        </LinkBase>
+        <ButtonBase
+          variant="secondary"
+          class="text-fg-subtle hover:text-fg transition-colors min-w-6 min-h-6 -m-1 p-1 rounded"
+          :title="$t('package.downloads.community_distribution')"
+          classicon="i-lucide:file-stack"
+          @click="openDistributionModal"
+        >
+          <span class="sr-only">{{ $t('package.downloads.community_distribution') }}</span>
+        </ButtonBase>
+      </div>
     </template>
     <div class="space-y-0.5 min-w-0">
       <!-- Semver range filter -->

app/pages/compare.vue

@@ -5,6 +5,7 @@ import FacetBarChart from '~/components/Compare/FacetBarChart.vue'
 
 definePageMeta({
   name: 'compare',
+  preserveScrollOnQuery: true,
 })
 
 const { locale } = useI18n()

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

@@ -211,6 +211,9 @@ const { diff: sizeDiff } = useInstallSizeDiff(packageName, resolvedVersion, pkg,
 //    → Preserve the server-rendered DOM, don't flash to skeleton.
 const nuxtApp = useNuxtApp()
 const route = useRoute()
+// Gates template rendering only — data fetches intentionally still run.
+// immediate is set once at mount — skipped requests won't re-fire on navigation, leaving data permanently missing.
+const isVersionsRoute = computed(() => route.name === 'package-versions')
 const hasEmptyPayload =
   import.meta.client &&
   nuxtApp.payload.serverRendered &&
@@ -479,7 +482,8 @@ const showSkeleton = shallowRef(false)
 </script>
 
 <template>
-  <DevOnly>
+  <NuxtPage v-if="isVersionsRoute" />
+  <DevOnly v-else>
     <ButtonBase
       class="fixed bottom-4 inset-is-4 z-50 shadow-lg rounded-full! px-3! py-2!"
       classicon="i-simple-icons:skeleton"
@@ -491,7 +495,7 @@ const showSkeleton = shallowRef(false)
       <span class="text-xs">Skeleton</span>
     </ButtonBase>
   </DevOnly>
-  <main class="flex-1 pb-8">
+  <main v-if="!isVersionsRoute" class="flex-1 pb-8">
     <!-- Scenario 1: SPA fallback — show skeleton (no real content to preserve) -->
     <!-- Scenario 2: SSR with missing payload — preserve server DOM, skip skeleton -->
     <PackageSkeleton
@@ -593,10 +597,8 @@ const showSkeleton = shallowRef(false)
                   <!-- Direct deps (muted) -->
                   <span class="text-fg-muted">{{ numberFormatter.format(dependencyCount) }}</span>
 
-                  <!-- Separator and total transitive deps -->
+                  <!-- Total transitive deps in parens -->
                   <template v-if="dependencyCount > 0 && dependencyCount !== totalDepsCount">
-                    <span class="text-fg-subtle">/</span>
-
                     <ClientOnly>
                       <span
                         v-if="
@@ -605,14 +607,16 @@ const showSkeleton = shallowRef(false)
                         "
                         class="inline-flex items-center gap-1 text-fg-subtle"
                       >
-                        <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
+                        (<span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />)
                       </span>
-                      <span v-else-if="totalDepsCount !== null">{{
-                        numberFormatter.format(totalDepsCount)
-                      }}</span>
-                      <span v-else class="text-fg-subtle">-</span>
+                      <span v-else-if="totalDepsCount !== null"
+                        ><span class="text-fg-subtle">(</span
+                        >{{ numberFormatter.format(totalDepsCount)
+                        }}<span class="text-fg-subtle">)</span></span
+                      >
+                      <span v-else class="text-fg-subtle">(-)</span>
                       <template #fallback>
-                        <span class="text-fg-subtle">-</span>
+                        <span class="text-fg-subtle">(-)</span>
                       </template>
                     </ClientOnly>
                   </template>
@@ -662,20 +666,22 @@ const showSkeleton = shallowRef(false)
                   <span v-else>-</span>
                 </span>
 
-                <!-- Separator and install size -->
+                <!-- Total install size in parens -->
                 <template v-if="displayVersion?.dist?.unpackedSize !== installSize?.totalSize">
-                  <span class="text-fg-subtle mx-1">/</span>
-
-                  <span
-                    v-if="installSizeStatus === 'pending'"
-                    class="inline-flex items-center gap-1 text-fg-subtle"
-                  >
-                    <span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />
-                  </span>
-                  <span v-else-if="installSize?.totalSize" dir="ltr">
-                    {{ bytesFormatter.format(installSize.totalSize) }}
+                  <span class="ms-1">
+                    <span
+                      v-if="installSizeStatus === 'pending'"
+                      class="inline-flex items-center gap-1 text-fg-subtle"
+                    >
+                      (<span class="i-svg-spinners:ring-resize w-3 h-3" aria-hidden="true" />)
+                    </span>
+                    <span v-else-if="installSize?.totalSize" dir="ltr">
+                      <span class="text-fg-subtle">(</span
+                      >{{ bytesFormatter.format(installSize.totalSize)
+                      }}<span class="text-fg-subtle">)</span>
+                    </span>
+                    <span v-else class="text-fg-subtle">(-)</span>
                   </span>
-                  <span v-else class="text-fg-subtle">-</span>
                 </template>
               </dd>
             </div>