feat: add timeline tab to package page (#2245)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Willow (GHOST) <git@willow.sh>
Co-authored-by: Alex Savelyev <91429106+alexdln@users.noreply.github.com>

Author: 4 people

app/components/AppFooter.vue

@@ -120,6 +120,10 @@ const closeModal = () => modalRef.value?.close?.()
                   <kbd class="kbd">f</kbd>
                   <span>{{ $t('shortcuts.open_diff') }}</span>
                 </li>
+                <li class="flex gap-2 items-center">
+                  <kbd class="kbd">t</kbd>
+                  <span>{{ $t('shortcuts.open_timeline') }}</span>
+                </li>
                 <li class="flex gap-2 items-center">
                   <kbd class="kbd">c</kbd>
                   <span>{{ $t('shortcuts.compare_from_package') }}</span>

app/components/Package/Header.vue

@@ -10,7 +10,7 @@ const props = defineProps<{
   latestVersion?: SlimVersion | null
   provenanceData?: ProvenanceDetails | null
   provenanceStatus?: string | null
-  page: 'main' | 'docs' | 'code' | 'diff'
+  page: 'main' | 'docs' | 'code' | 'diff' | 'timeline'
   versionUrlPattern: string
 }>()
 
@@ -162,12 +162,26 @@ const diffLink = computed((): RouteLocationRaw | null => {
   return diffRoute(props.pkg.name, props.resolvedVersion, props.latestVersion.version)
 })
 
+const timelineLink = computed((): RouteLocationRaw | null => {
+  if (props.pkg == null || props.resolvedVersion == null) return null
+  const split = props.pkg.name.split('/')
+  return {
+    name: 'timeline',
+    params: {
+      org: split.length === 2 ? split[0] : undefined,
+      packageName: split.length === 2 ? split[1]! : split[0]!,
+      version: props.resolvedVersion,
+    },
+  }
+})
+
 useShortcuts({
   '.': () => codeLink.value,
   'm': () => mainLink.value,
   'd': () => docsLink.value,
   'c': () => props.pkg && { name: 'compare' as const, query: { packages: props.pkg.name } },
   'f': () => diffLink.value,
+  't': () => timelineLink.value,
 })
 </script>
 
@@ -330,6 +344,15 @@ useShortcuts({
         >
           {{ $t('compare.compare_versions') }}
         </LinkBase>
+        <LinkBase
+          v-if="timelineLink"
+          :to="timelineLink"
+          aria-keyshortcuts="t"
+          class="decoration-none border-b-2 p-1 hover:border-accent/50 focus-visible:[outline-offset:-2px]!"
+          :class="page === 'timeline' ? 'border-accent text-accent!' : 'border-transparent'"
+        >
+          {{ $t('package.links.timeline') }}
+        </LinkBase>
       </nav>
     </div>
   </div>

app/composables/npm/usePackage.ts

@@ -86,12 +86,20 @@ export function transformPackument(
       const trustLevel = getTrustLevel(version)
       const hasProvenance = trustLevel !== 'none'
 
+      // Normalize license: some versions use { type: "MIT" } instead of "MIT"
+      let versionLicense = version.license
+      if (versionLicense && typeof versionLicense === 'object' && 'type' in versionLicense) {
+        versionLicense = (versionLicense as { type: string }).type
+      }
+
       filteredVersions[v] = {
         hasProvenance,
         trustLevel,
         version: version.version,
         deprecated: version.deprecated,
         tags: version.tags as string[],
+        license: typeof versionLicense === 'string' ? versionLicense : undefined,
+        type: typeof version.type === 'string' ? version.type : undefined,
       }
     }
   }