fix: fix tag issue and sort tagged versions

Author: ShroXd

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

@@ -8,6 +8,7 @@ import {
   filterVersions,
   getVersionGroupKey,
   getVersionGroupLabel,
+  getTagPriority,
 } from '~/utils/versions'
 import { fetchAllPackageVersions } from '~/utils/npm/api'
 
@@ -65,6 +66,19 @@ async function ensureFullDataLoaded() {
 
 const versionToTagsMap = computed(() => buildVersionToTagsMap(distTags.value))
 const tagRows = computed(() => buildTaggedVersionRows(distTags.value))
+const latestTagRow = computed(() => tagRows.value.find(r => r.tags.includes('latest')) ?? null)
+const otherTagRows = computed(() =>
+  tagRows.value
+    .filter(r => !r.tags.includes('latest'))
+    .sort((a, b) => {
+      const pa = getTagPriority(a.primaryTag)
+      const pb = getTagPriority(b.primaryTag)
+      if (pa !== pb) return pa - pb
+      const ta = versionTimes.value[a.version] ?? ''
+      const tb = versionTimes.value[b.version] ?? ''
+      return tb.localeCompare(ta)
+    }),
+)
 
 function getVersionTime(version: string): string | undefined {
   return versionTimes.value[version]
@@ -215,39 +229,39 @@ const flatItems = computed<FlatItem[]>(() => {
 
         <!-- Latest — featured card -->
         <div
-          v-if="tagRows[0]"
+          v-if="latestTagRow"
           class="border-y sm:rounded-lg sm:border border-accent/40 bg-accent/5 px-5 py-4 relative flex items-center justify-between gap-4 hover:bg-accent/8 transition-colors"
         >
           <!-- Left: tags + version -->
           <div>
             <div class="flex items-center gap-2 mb-1.5 flex-wrap">
               <span class="text-3xs font-bold uppercase tracking-widest text-accent">latest</span>
               <span
-                v-for="tag in tagRows[0].tags.filter(t => t !== 'latest')"
+                v-for="tag in latestTagRow!.tags.filter(t => t !== 'latest')"
                 :key="tag"
                 class="text-3xs font-semibold uppercase tracking-wide text-fg-subtle"
                 >{{ tag }}</span
               >
             </div>
             <LinkBase
-              :to="packageRoute(packageName, tagRows[0].version)"
+              :to="packageRoute(packageName, latestTagRow!.version)"
               class="text-2xl font-semibold tracking-tight after:absolute after:inset-0 after:content-['']"
               dir="ltr"
-              >{{ tagRows[0].version }}</LinkBase
+              >{{ latestTagRow!.version }}</LinkBase
             >
           </div>
           <!-- Right: date + provenance -->
           <div class="flex flex-col items-end gap-1.5 shrink-0 relative z-10">
             <ProvenanceBadge
-              v-if="fullVersionMap?.get(tagRows[0].version)?.hasProvenance"
+              v-if="fullVersionMap?.get(latestTagRow!.version)?.hasProvenance"
               :package-name="packageName"
-              :version="tagRows[0].version"
+              :version="latestTagRow!.version"
               compact
               :linked="false"
             />
             <DateTime
-              v-if="getVersionTime(tagRows[0].version)"
-              :datetime="getVersionTime(tagRows[0].version)!"
+              v-if="getVersionTime(latestTagRow!.version)"
+              :datetime="getVersionTime(latestTagRow!.version)!"
               class="text-xs text-fg-subtle"
               year="numeric"
               month="short"
@@ -258,11 +272,11 @@ const flatItems = computed<FlatItem[]>(() => {
 
         <!-- Other tags — compact list (hidden when only latest exists) -->
         <div
-          v-if="tagRows.length > 1"
+          v-if="otherTagRows.length > 0"
           class="border-y sm:rounded-lg sm:border border-border sm:overflow-hidden"
         >
           <div
-            v-for="row in tagRows.slice(1)"
+            v-for="row in otherTagRows"
             :key="row.id"
             class="flex items-center gap-4 px-4 py-2.5 border-b border-border last:border-0 hover:bg-bg-subtle transition-colors relative"
           >

app/utils/versions.ts

@@ -51,6 +51,37 @@ export function getPrereleaseChannel(version: string): string {
   return match ? match[1]!.toLowerCase() : ''
 }
 
+/**
+ * Priority order for well-known dist-tags.
+ * Lower number = higher priority in display order.
+ * Unknown tags fall back to Infinity and are sorted by publish date descending.
+ */
+export const TAG_PRIORITY: Record<string, number> = {
+  stable: 0,
+  rc: 1,
+  beta: 2,
+  next: 3,
+  alpha: 4,
+  canary: 5,
+  nightly: 6,
+  experimental: 7,
+  legacy: 8,
+}
+
+/**
+ * Get the display priority for a dist-tag.
+ * Uses fuzzy matching so e.g. "v2-legacy" matches "legacy".
+ * @param tag - The tag name (e.g., "beta", "v2-legacy")
+ * @returns Numeric priority (lower = higher priority); Infinity for unknown tags
+ */
+export function getTagPriority(tag: string | undefined): number {
+  if (!tag) return Infinity
+  for (const [key, priority] of Object.entries(TAG_PRIORITY)) {
+    if (tag.toLowerCase().includes(key)) return priority
+  }
+  return Infinity
+}
+
 /**
  * Sort tags with 'latest' first, then alphabetically
  * @param tags - Array of tag names