feat: add version history page (#2025)

Author: ShroXd

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/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