From ec7a5b87db4c3c749982b2bd548c948c61cfc061 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Fri, 6 Feb 2026 02:16:54 +0530
Subject: [PATCH 1/5] fix(style): make whole card clickable using strechted
 link method instead of just the version number

---
 app/components/Package/Versions.vue | 110 ++++++++++++++++++----------
 1 file changed, 71 insertions(+), 39 deletions(-)

diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index cb4010b46..b85d5e29c 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -319,14 +319,14 @@ function getTagVersions(tag: string): VersionDisplay[] {
       <!-- Dist-tag rows (limited to MAX_VISIBLE_TAGS) -->
       <div v-for="row in visibleTagRows" :key="row.id">
         <div
-          class="flex items-center gap-2 pe-2 px-1"
-          :class="row.tag === 'latest' ? 'bg-bg-subtle rounded-lg' : ''"
+          class="flex items-center gap-2 pe-2 px-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
+          :class="row.tag === 'latest' ? 'bg-bg-subtle' : ''"
         >
           <!-- Expand button (only if there are more versions to show) -->
           <button
             v-if="getTagVersions(row.tag).length > 1 || !hasLoadedAll"
             type="button"
-            class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors rounded-sm"
+            class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors rounded-sm relative z-10"
             :aria-expanded="expandedTags.has(row.tag)"
             :aria-label="
               expandedTags.has(row.tag)
@@ -359,11 +359,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <div>
                 <NuxtLink
                   :to="versionRoute(row.primaryVersion.version)"
-                  class="block font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1 focus-visible:outline-none focus-visible:text-accent"
+                  class="block font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1 focus-visible:outline-none focus-visible:text-accent after:absolute after:inset-0 after:content-['']"
                   :class="
                     row.primaryVersion.deprecated
-                      ? 'text-red-400 hover:text-red-300'
-                      : 'text-fg-muted hover:text-fg'
+                      ? 'text-red-400 group-hover/version-row:text-red-300'
+                      : 'text-fg-muted group-hover/version-row:text-fg'
                   "
                   :title="
                     row.primaryVersion.deprecated
@@ -381,7 +381,10 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   {{ row.primaryVersion.version }}
                 </NuxtLink>
               </div>
-              <div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
+              <div
+                v-if="row.tags.length"
+                class="flex items-center gap-1 mt-0.5 flex-wrap relative z-10"
+              >
                 <span
                   v-for="tag in row.tags"
                   :key="tag"
@@ -392,7 +395,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 </span>
               </div>
             </div>
-            <div class="flex items-center gap-2 shrink-0">
+            <div class="flex items-center gap-2 shrink-0 relative z-10">
               <DateTime
                 v-if="row.primaryVersion.time"
                 :datetime="row.primaryVersion.time"
@@ -406,6 +409,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 :package-name="packageName"
                 :version="row.primaryVersion.version"
                 compact
+                :linked="false"
               />
             </div>
           </div>
@@ -416,15 +420,19 @@ function getTagVersions(tag: string): VersionDisplay[] {
           v-if="expandedTags.has(row.tag) && getTagVersions(row.tag).length > 1"
           class="ms-4 ps-2 border-is border-border space-y-0.5 pe-2"
         >
-          <div v-for="v in getTagVersions(row.tag).slice(1)" :key="v.version" class="py-1">
+          <div
+            v-for="v in getTagVersions(row.tag).slice(1)"
+            :key="v.version"
+            class="py-1 relative group/version-row hover:bg-bg-elevated/20 focus-within:bg-bg-elevated/20 transition-colors duration-200"
+          >
             <div class="flex items-center justify-between gap-2">
               <NuxtLink
                 :to="versionRoute(v.version)"
-                class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
+                class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
                 :class="
                   v.deprecated
-                    ? 'text-red-400 hover:text-red-300'
-                    : 'text-fg-subtle hover:text-fg-muted'
+                    ? 'text-red-400 group-hover/version-row:text-red-300'
+                    : 'text-fg-subtle group-hover/version-row:text-fg-muted'
                 "
                 :title="
                   v.deprecated
@@ -439,7 +447,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 />
                 {{ v.version }}
               </NuxtLink>
-              <div class="flex items-center gap-2 shrink-0">
+              <div class="flex items-center gap-2 shrink-0 relative z-10">
                 <DateTime
                   v-if="v.time"
                   :datetime="v.time"
@@ -453,12 +461,13 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   :package-name="packageName"
                   :version="v.version"
                   compact
+                  :linked="false"
                 />
               </div>
             </div>
             <div
               v-if="v.tags?.length && filterExcludedTags(v.tags, row.tags).length"
-              class="flex items-center gap-1 mt-0.5"
+              class="flex items-center gap-1 mt-0.5 relative z-10"
             >
               <span
                 v-for="tag in filterExcludedTags(v.tags, row.tags)"
@@ -519,15 +528,19 @@ function getTagVersions(tag: string): VersionDisplay[] {
         <!-- Expanded other versions -->
         <div v-if="otherVersionsExpanded" class="ms-4 ps-2 border-is border-border space-y-0.5">
           <!-- Hidden tag rows (overflow from visible tags) -->
-          <div v-for="row in hiddenTagRows" :key="row.id" class="py-1">
+          <div
+            v-for="row in hiddenTagRows"
+            :key="row.id"
+            class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
+          >
             <div class="flex items-center justify-between gap-2">
               <NuxtLink
                 :to="versionRoute(row.primaryVersion.version)"
-                class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
+                class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
                 :class="
                   row.primaryVersion.deprecated
-                    ? 'text-red-400 hover:text-red-300'
-                    : 'text-fg-muted hover:text-fg'
+                    ? 'text-red-400 group-hover/version-row:text-red-300'
+                    : 'text-fg-muted group-hover/version-row:text-fg'
                 "
                 :title="
                   row.primaryVersion.deprecated
@@ -544,7 +557,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 />
                 {{ row.primaryVersion.version }}
               </NuxtLink>
-              <div class="flex items-center gap-2 shrink-0 pe-2">
+              <div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
                 <DateTime
                   v-if="row.primaryVersion.time"
                   :datetime="row.primaryVersion.time"
@@ -555,7 +568,10 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 />
               </div>
             </div>
-            <div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
+            <div
+              v-if="row.tags.length"
+              class="flex items-center gap-1 mt-0.5 flex-wrap relative z-10"
+            >
               <span
                 v-for="tag in row.tags"
                 :key="tag"
@@ -571,12 +587,15 @@ function getTagVersions(tag: string): VersionDisplay[] {
           <template v-if="otherMajorGroups.length > 0">
             <div v-for="group in otherMajorGroups" :key="group.groupKey">
               <!-- Version group header -->
-              <div v-if="group.versions.length > 1" class="py-1">
+              <div
+                v-if="group.versions.length > 1"
+                class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
+              >
                 <div class="flex items-center justify-between gap-2">
                   <div class="flex items-center gap-2 min-w-0">
                     <button
                       type="button"
-                      class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0 focus-visible:outline-accent/70 rounded-sm"
+                      class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0 focus-visible:outline-accent/70 rounded-sm relative z-10"
                       :aria-expanded="expandedMajorGroups.has(group.groupKey)"
                       :aria-label="
                         expandedMajorGroups.has(group.groupKey)
@@ -599,11 +618,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <NuxtLink
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
+                      class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
                       :class="
                         group.versions[0]?.deprecated
-                          ? 'text-red-400 hover:text-red-300'
-                          : 'text-fg-muted hover:text-fg'
+                          ? 'text-red-400 group-hover/version-row:text-red-300'
+                          : 'text-fg-muted group-hover/version-row:text-fg'
                       "
                       :title="
                         group.versions[0]?.deprecated
@@ -621,7 +640,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       {{ group.versions[0]?.version }}
                     </NuxtLink>
                   </div>
-                  <div class="flex items-center gap-2 shrink-0 pe-2">
+                  <div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
                     <DateTime
                       v-if="group.versions[0]?.time"
                       :datetime="group.versions[0]?.time"
@@ -635,12 +654,13 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       :package-name="packageName"
                       :version="group.versions[0]?.version"
                       compact
+                      :linked="false"
                     />
                   </div>
                 </div>
                 <div
                   v-if="group.versions[0]?.tags?.length"
-                  class="flex items-center gap-1 ms-5 flex-wrap"
+                  class="flex items-center gap-1 ms-5 flex-wrap relative z-10"
                 >
                   <span
                     v-for="tag in group.versions[0].tags"
@@ -653,18 +673,21 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 </div>
               </div>
               <!-- Single version (no expand needed) -->
-              <div v-else class="py-1">
+              <div
+                v-else
+                class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
+              >
                 <div class="flex items-center justify-between gap-2">
                   <div class="flex items-center gap-2 min-w-0">
                     <span class="w-4 shrink-0" />
                     <NuxtLink
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
+                      class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
                       :class="
                         group.versions[0]?.deprecated
-                          ? 'text-red-400 hover:text-red-300'
-                          : 'text-fg-muted hover:text-fg'
+                          ? 'text-red-400 group-hover/version-row:text-red-300'
+                          : 'text-fg-muted group-hover/version-row:text-fg'
                       "
                       :title="
                         group.versions[0]?.deprecated
@@ -682,7 +705,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       {{ group.versions[0]?.version }}
                     </NuxtLink>
                   </div>
-                  <div class="flex items-center gap-2 shrink-0 pe-2">
+                  <div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
                     <DateTime
                       v-if="group.versions[0]?.time"
                       :datetime="group.versions[0]?.time"
@@ -696,10 +719,14 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       :package-name="packageName"
                       :version="group.versions[0]?.version"
                       compact
+                      :linked="false"
                     />
                   </div>
                 </div>
-                <div v-if="group.versions[0]?.tags?.length" class="flex items-center gap-1 ms-5">
+                <div
+                  v-if="group.versions[0]?.tags?.length"
+                  class="flex items-center gap-1 ms-5 relative z-10"
+                >
                   <span
                     v-for="tag in group.versions[0].tags"
                     :key="tag"
@@ -715,15 +742,19 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 v-if="expandedMajorGroups.has(group.groupKey) && group.versions.length > 1"
                 class="ms-6 space-y-0.5"
               >
-                <div v-for="v in group.versions.slice(1)" :key="v.version" class="py-1">
+                <div
+                  v-for="v in group.versions.slice(1)"
+                  :key="v.version"
+                  class="py-1 relative group/version-row hover:bg-bg-elevated/20 focus-within:bg-bg-elevated/20 transition-colors duration-200"
+                >
                   <div class="flex items-center justify-between gap-2">
                     <NuxtLink
                       :to="versionRoute(v.version)"
-                      class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1"
+                      class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
                       :class="
                         v.deprecated
-                          ? 'text-red-400 hover:text-red-300'
-                          : 'text-fg-subtle hover:text-fg-muted'
+                          ? 'text-red-400 group-hover/version-row:text-red-300'
+                          : 'text-fg-subtle group-hover/version-row:text-fg-muted'
                       "
                       :title="
                         v.deprecated
@@ -738,7 +769,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       />
                       {{ v.version }}
                     </NuxtLink>
-                    <div class="flex items-center gap-2 shrink-0 pe-2">
+                    <div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
                       <DateTime
                         v-if="v.time"
                         :datetime="v.time"
@@ -752,10 +783,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
                         :package-name="packageName"
                         :version="v.version"
                         compact
+                        :linked="false"
                       />
                     </div>
                   </div>
-                  <div v-if="v.tags?.length" class="flex items-center gap-1 mt-0.5">
+                  <div v-if="v.tags?.length" class="flex items-center gap-1 mt-0.5 relative z-10">
                     <span
                       v-for="tag in v.tags"
                       :key="tag"

From 77f41045b676df9b2f4f9ddf618a345ea142b873 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Fri, 6 Feb 2026 02:45:02 +0530
Subject: [PATCH 2/5] feat(style): highlight current version and add accent
 color to the latest tag

---
 app/components/Package/Versions.vue  | 182 ++++++++++++++++-----------
 app/pages/package/[[org]]/[name].vue |   1 +
 2 files changed, 107 insertions(+), 76 deletions(-)

diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index b85d5e29c..05d8b6204 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -17,6 +17,7 @@ const props = defineProps<{
   versions: Record<string, SlimVersion>
   distTags: Record<string, string>
   time: Record<string, string>
+  currentVersion?: string | null
 }>()
 
 /** Maximum number of dist-tag rows to show before collapsing into "Other versions" */
@@ -320,7 +321,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
       <div v-for="row in visibleTagRows" :key="row.id">
         <div
           class="flex items-center gap-2 pe-2 px-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
-          :class="row.tag === 'latest' ? 'bg-bg-subtle' : ''"
+          :class="row.primaryVersion.version === currentVersion ? 'bg-bg-subtle' : ''"
         >
           <!-- Expand button (only if there are more versions to show) -->
           <button
@@ -356,14 +357,16 @@ function getTagVersions(tag: string): VersionDisplay[] {
           <!-- Version info -->
           <div class="flex-1 py-1.5 min-w-0 flex gap-2 justify-between items-center">
             <div class="overflow-hidden">
-              <div>
+              <div class="flex items-center gap-2">
                 <NuxtLink
                   :to="versionRoute(row.primaryVersion.version)"
                   class="block font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1 focus-visible:outline-none focus-visible:text-accent after:absolute after:inset-0 after:content-['']"
                   :class="
                     row.primaryVersion.deprecated
                       ? 'text-red-400 group-hover/version-row:text-red-300'
-                      : 'text-fg-muted group-hover/version-row:text-fg'
+                      : row.primaryVersion.version === currentVersion
+                        ? 'text-fg'
+                        : 'text-fg-muted group-hover/version-row:text-fg'
                   "
                   :title="
                     row.primaryVersion.deprecated
@@ -388,7 +391,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
                 <span
                   v-for="tag in row.tags"
                   :key="tag"
-                  class="text-[9px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
+                  class="text-[9px] font-semibold uppercase tracking-wide truncate max-w-[150px]"
+                  :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
                   :title="tag"
                 >
                   {{ tag }}
@@ -424,29 +428,34 @@ function getTagVersions(tag: string): VersionDisplay[] {
             v-for="v in getTagVersions(row.tag).slice(1)"
             :key="v.version"
             class="py-1 relative group/version-row hover:bg-bg-elevated/20 focus-within:bg-bg-elevated/20 transition-colors duration-200"
+            :class="v.version === currentVersion ? 'bg-bg-elevated/20 rounded' : ''"
           >
             <div class="flex items-center justify-between gap-2">
-              <NuxtLink
-                :to="versionRoute(v.version)"
-                class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
-                :class="
-                  v.deprecated
-                    ? 'text-red-400 group-hover/version-row:text-red-300'
-                    : 'text-fg-subtle group-hover/version-row:text-fg-muted'
-                "
-                :title="
-                  v.deprecated
-                    ? $t('package.versions.deprecated_title', { version: v.version })
-                    : v.version
-                "
-              >
-                <span
-                  v-if="v.deprecated"
-                  class="i-carbon-warning-hex w-3 h-3 shrink-0"
-                  aria-hidden="true"
-                />
-                {{ v.version }}
-              </NuxtLink>
+              <div class="flex items-center gap-2 min-w-0">
+                <NuxtLink
+                  :to="versionRoute(v.version)"
+                  class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
+                  :class="
+                    v.deprecated
+                      ? 'text-red-400 group-hover/version-row:text-red-300'
+                      : v.version === currentVersion
+                        ? 'text-fg'
+                        : 'text-fg-subtle group-hover/version-row:text-fg-muted'
+                  "
+                  :title="
+                    v.deprecated
+                      ? $t('package.versions.deprecated_title', { version: v.version })
+                      : v.version
+                  "
+                >
+                  <span
+                    v-if="v.deprecated"
+                    class="i-carbon-warning-hex w-3 h-3 shrink-0"
+                    aria-hidden="true"
+                  />
+                  {{ v.version }}
+                </NuxtLink>
+              </div>
               <div class="flex items-center gap-2 shrink-0 relative z-10">
                 <DateTime
                   v-if="v.time"
@@ -472,7 +481,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <span
                 v-for="tag in filterExcludedTags(v.tags, row.tags)"
                 :key="tag"
-                class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
+                class="text-[8px] font-semibold uppercase tracking-wide truncate max-w-[120px]"
+                :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
                 :title="tag"
               >
                 {{ tag }}
@@ -532,31 +542,36 @@ function getTagVersions(tag: string): VersionDisplay[] {
             v-for="row in hiddenTagRows"
             :key="row.id"
             class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
+            :class="row.primaryVersion.version === currentVersion ? 'bg-bg-subtle' : ''"
           >
             <div class="flex items-center justify-between gap-2">
-              <NuxtLink
-                :to="versionRoute(row.primaryVersion.version)"
-                class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
-                :class="
-                  row.primaryVersion.deprecated
-                    ? 'text-red-400 group-hover/version-row:text-red-300'
-                    : 'text-fg-muted group-hover/version-row:text-fg'
-                "
-                :title="
-                  row.primaryVersion.deprecated
-                    ? $t('package.versions.deprecated_title', {
-                        version: row.primaryVersion.version,
-                      })
-                    : row.primaryVersion.version
-                "
-              >
-                <span
-                  v-if="row.primaryVersion.deprecated"
-                  class="i-carbon-warning-hex w-3 h-3 shrink-0"
-                  aria-hidden="true"
-                />
-                {{ row.primaryVersion.version }}
-              </NuxtLink>
+              <div class="flex items-center gap-2 min-w-0">
+                <NuxtLink
+                  :to="versionRoute(row.primaryVersion.version)"
+                  class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
+                  :class="
+                    row.primaryVersion.deprecated
+                      ? 'text-red-400 group-hover/version-row:text-red-300'
+                      : row.primaryVersion.version === currentVersion
+                        ? 'text-fg'
+                        : 'text-fg-muted group-hover/version-row:text-fg'
+                  "
+                  :title="
+                    row.primaryVersion.deprecated
+                      ? $t('package.versions.deprecated_title', {
+                          version: row.primaryVersion.version,
+                        })
+                      : row.primaryVersion.version
+                  "
+                >
+                  <span
+                    v-if="row.primaryVersion.deprecated"
+                    class="i-carbon-warning-hex w-3 h-3 shrink-0"
+                    aria-hidden="true"
+                  />
+                  {{ row.primaryVersion.version }}
+                </NuxtLink>
+              </div>
               <div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
                 <DateTime
                   v-if="row.primaryVersion.time"
@@ -575,7 +590,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <span
                 v-for="tag in row.tags"
                 :key="tag"
-                class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
+                class="text-[8px] font-semibold uppercase tracking-wide truncate max-w-[120px]"
+                :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
                 :title="tag"
               >
                 {{ tag }}
@@ -590,6 +606,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <div
                 v-if="group.versions.length > 1"
                 class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
+                :class="group.versions[0]?.version === currentVersion ? 'bg-bg-subtle' : ''"
               >
                 <div class="flex items-center justify-between gap-2">
                   <div class="flex items-center gap-2 min-w-0">
@@ -622,7 +639,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 group-hover/version-row:text-red-300'
-                          : 'text-fg-muted group-hover/version-row:text-fg'
+                          : group.versions[0]?.version === currentVersion
+                            ? 'text-fg'
+                            : 'text-fg-muted group-hover/version-row:text-fg'
                       "
                       :title="
                         group.versions[0]?.deprecated
@@ -665,7 +684,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   <span
                     v-for="tag in group.versions[0].tags"
                     :key="tag"
-                    class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
+                    class="text-[8px] font-semibold uppercase tracking-wide truncate max-w-[120px]"
+                    :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
                     :title="tag"
                   >
                     {{ tag }}
@@ -676,6 +696,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <div
                 v-else
                 class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
+                :class="group.versions[0]?.version === currentVersion ? 'bg-bg-subtle' : ''"
               >
                 <div class="flex items-center justify-between gap-2">
                   <div class="flex items-center gap-2 min-w-0">
@@ -687,7 +708,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 group-hover/version-row:text-red-300'
-                          : 'text-fg-muted group-hover/version-row:text-fg'
+                          : group.versions[0]?.version === currentVersion
+                            ? 'text-fg'
+                            : 'text-fg-muted group-hover/version-row:text-fg'
                       "
                       :title="
                         group.versions[0]?.deprecated
@@ -730,7 +753,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   <span
                     v-for="tag in group.versions[0].tags"
                     :key="tag"
-                    class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide"
+                    class="text-[8px] font-semibold uppercase tracking-wide"
+                    :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
                   >
                     {{ tag }}
                   </span>
@@ -746,29 +770,34 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   v-for="v in group.versions.slice(1)"
                   :key="v.version"
                   class="py-1 relative group/version-row hover:bg-bg-elevated/20 focus-within:bg-bg-elevated/20 transition-colors duration-200"
+                  :class="v.version === currentVersion ? 'bg-bg-elevated/20 rounded' : ''"
                 >
                   <div class="flex items-center justify-between gap-2">
-                    <NuxtLink
-                      :to="versionRoute(v.version)"
-                      class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
-                      :class="
-                        v.deprecated
-                          ? 'text-red-400 group-hover/version-row:text-red-300'
-                          : 'text-fg-subtle group-hover/version-row:text-fg-muted'
-                      "
-                      :title="
-                        v.deprecated
-                          ? $t('package.versions.deprecated_title', { version: v.version })
-                          : v.version
-                      "
-                    >
-                      <span
-                        v-if="v.deprecated"
-                        class="i-carbon-warning-hex w-3 h-3 shrink-0"
-                        aria-hidden="true"
-                      />
-                      {{ v.version }}
-                    </NuxtLink>
+                    <div class="flex items-center gap-2 min-w-0">
+                      <NuxtLink
+                        :to="versionRoute(v.version)"
+                        class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
+                        :class="
+                          v.deprecated
+                            ? 'text-red-400 group-hover/version-row:text-red-300'
+                            : v.version === currentVersion
+                              ? 'text-fg'
+                              : 'text-fg-subtle group-hover/version-row:text-fg-muted'
+                        "
+                        :title="
+                          v.deprecated
+                            ? $t('package.versions.deprecated_title', { version: v.version })
+                            : v.version
+                        "
+                      >
+                        <span
+                          v-if="v.deprecated"
+                          class="i-carbon-warning-hex w-3 h-3 shrink-0"
+                          aria-hidden="true"
+                        />
+                        {{ v.version }}
+                      </NuxtLink>
+                    </div>
                     <div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
                       <DateTime
                         v-if="v.time"
@@ -791,7 +820,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <span
                       v-for="tag in v.tags"
                       :key="tag"
-                      class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide"
+                      class="text-[8px] font-semibold uppercase tracking-wide"
+                      :class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
                     >
                       {{ tag }}
                     </span>
diff --git a/app/pages/package/[[org]]/[name].vue b/app/pages/package/[[org]]/[name].vue
index f8cf4ead5..fda0a1df4 100644
--- a/app/pages/package/[[org]]/[name].vue
+++ b/app/pages/package/[[org]]/[name].vue
@@ -1225,6 +1225,7 @@ onKeyStroke(
             :versions="pkg.versions"
             :dist-tags="pkg['dist-tags'] ?? {}"
             :time="pkg.time"
+            :current-version="resolvedVersion"
           />
 
           <!-- Install Scripts Warning -->

From 955b03243455239c3b368af60926e0d26936b259 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Fri, 6 Feb 2026 03:13:46 +0530
Subject: [PATCH 3/5] tests: current version should be highlighted and latest
 version should have accented tag

---
 test/nuxt/components/PackageVersions.spec.ts | 43 ++++++++++++++++++++
 1 file changed, 43 insertions(+)

diff --git a/test/nuxt/components/PackageVersions.spec.ts b/test/nuxt/components/PackageVersions.spec.ts
index 0853d1b3d..9def5a202 100644
--- a/test/nuxt/components/PackageVersions.spec.ts
+++ b/test/nuxt/components/PackageVersions.spec.ts
@@ -100,6 +100,49 @@ describe('PackageVersions', () => {
       expect(versionLinks.length).toBeGreaterThan(0)
       expect(versionLinks[0]?.text()).toBe('1.0.0')
     })
+
+    it('highlights the current version row when currentVersion prop matches', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '2.0.0': createVersion('2.0.0'),
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '2.0.0', stable: '1.0.0' },
+          time: {
+            '2.0.0': '2024-01-15T12:00:00.000Z',
+            '1.0.0': '2024-01-01T12:00:00.000Z',
+          },
+          currentVersion: '1.0.0',
+        },
+      })
+
+      const highlightedRows = component.findAll('.bg-bg-subtle')
+      expect(highlightedRows.length).toBe(1)
+      expect(highlightedRows[0]!.text()).toContain('1.0.0')
+    })
+
+    it('uses accent color for latest tag', async () => {
+      const component = await mountSuspended(PackageVersions, {
+        props: {
+          packageName: 'test-package',
+          versions: {
+            '2.0.0': createVersion('2.0.0'),
+            '1.0.0': createVersion('1.0.0'),
+          },
+          distTags: { latest: '2.0.0', stable: '1.0.0' },
+          time: {
+            '2.0.0': '2024-01-15T12:00:00.000Z',
+            '1.0.0': '2024-01-01T12:00:00.000Z',
+          },
+          currentVersion: '1.0.0',
+        },
+      })
+
+      const latestTag = component.findAll('span').find(span => span.text() === 'latest')
+      expect(latestTag?.classes()).toContain('text-accent')
+    })
   })
 
   describe('dist-tag display', () => {

From ec78bef89289855f5faaa52832fca986833607a3 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Fri, 6 Feb 2026 11:52:42 +0530
Subject: [PATCH 4/5] style: remove redundant focus class

---
 app/components/Package/Versions.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index 05d8b6204..d081f40e0 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -309,7 +309,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
         :href="`https://majors.nullvoxpopuli.com/q?packages=${packageName}`"
         target="_blank"
         rel="noopener noreferrer"
-        class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 focus-visible:outline-accent/70 rounded"
+        class="text-fg-subtle hover:text-fg transition-colors duration-200 inline-flex items-center justify-center min-w-6 min-h-6 -m-1 p-1 rounded"
         :title="$t('package.downloads.community_distribution')"
       >
         <span class="i-carbon:load-balancer-network w-3.5 h-3.5" aria-hidden="true" />
@@ -360,7 +360,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <div class="flex items-center gap-2">
                 <NuxtLink
                   :to="versionRoute(row.primaryVersion.version)"
-                  class="block font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1 focus-visible:outline-none focus-visible:text-accent after:absolute after:inset-0 after:content-['']"
+                  class="block font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1 focus-visible:text-accent after:absolute after:inset-0 after:content-['']"
                   :class="
                     row.primaryVersion.deprecated
                       ? 'text-red-400 group-hover/version-row:text-red-300'
@@ -612,7 +612,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   <div class="flex items-center gap-2 min-w-0">
                     <button
                       type="button"
-                      class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0 focus-visible:outline-accent/70 rounded-sm relative z-10"
+                      class="w-4 h-4 flex items-center justify-center text-fg-subtle hover:text-fg transition-colors shrink-0 rounded-sm relative z-10"
                       :aria-expanded="expandedMajorGroups.has(group.groupKey)"
                       :aria-label="
                         expandedMajorGroups.has(group.groupKey)

From 0196359bb7a6a363a2e58ff603233255a769fba3 Mon Sep 17 00:00:00 2001
From: Idris Gadi <idris.gadi01@gmail.com>
Date: Fri, 6 Feb 2026 19:25:46 +0530
Subject: [PATCH 5/5] style: redundant display values

---
 app/components/Package/Versions.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/components/Package/Versions.vue b/app/components/Package/Versions.vue
index d081f40e0..63cb39c95 100644
--- a/app/components/Package/Versions.vue
+++ b/app/components/Package/Versions.vue
@@ -360,7 +360,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <div class="flex items-center gap-2">
                 <NuxtLink
                   :to="versionRoute(row.primaryVersion.version)"
-                  class="block font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1 focus-visible:text-accent after:absolute after:inset-0 after:content-['']"
+                  class="font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1 focus-visible:text-accent after:absolute after:inset-0 after:content-['']"
                   :class="
                     row.primaryVersion.deprecated
                       ? 'text-red-400 group-hover/version-row:text-red-300'
@@ -434,7 +434,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <div class="flex items-center gap-2 min-w-0">
                 <NuxtLink
                   :to="versionRoute(v.version)"
-                  class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
+                  class="font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
                   :class="
                     v.deprecated
                       ? 'text-red-400 group-hover/version-row:text-red-300'
@@ -548,7 +548,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <div class="flex items-center gap-2 min-w-0">
                 <NuxtLink
                   :to="versionRoute(row.primaryVersion.version)"
-                  class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
+                  class="font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
                   :class="
                     row.primaryVersion.deprecated
                       ? 'text-red-400 group-hover/version-row:text-red-300'
@@ -635,7 +635,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <NuxtLink
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
+                      class="font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 group-hover/version-row:text-red-300'
@@ -704,7 +704,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <NuxtLink
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
+                      class="font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 group-hover/version-row:text-red-300'
@@ -776,7 +776,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <div class="flex items-center gap-2 min-w-0">
                       <NuxtLink
                         :to="versionRoute(v.version)"
-                        class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
+                        class="font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
                         :class="
                           v.deprecated
                             ? 'text-red-400 group-hover/version-row:text-red-300'