Skip to content

Commit 7cf66b2

Browse files
tom-shermantom-sherman
authored
feat: call out latest version in version list (#448)
1 parent 75e50e8 commit 7cf66b2

File tree

1 file changed

+65
-53
lines changed

1 file changed

+65
-53
lines changed

‎app/components/PackageVersions.vue‎

Lines changed: 65 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,14 @@ const visibleTagRows = computed(() => {
109109
const rows = isPackageDeprecated.value
110110
? allTagRows.value
111111
: allTagRows.value.filter(row => !row.primaryVersion.deprecated)
112-
return rows.slice(0, MAX_VISIBLE_TAGS)
112+
const first = rows.slice(0, MAX_VISIBLE_TAGS)
113+
const latestTagRow = rows.find(row => row.tag === 'latest')
114+
// Ensure 'latest' tag is always included (at the end) if not already present
115+
if (latestTagRow && !first.includes(latestTagRow)) {
116+
first.pop()
117+
first.push(latestTagRow)
118+
}
119+
return first
113120
})
114121
115122
// Hidden tag rows (all other tags) - shown in "Other versions"
@@ -322,7 +329,10 @@ function getTagVersions(tag: string): VersionDisplay[] {
322329
<div class="space-y-0.5 min-w-0">
323330
<!-- Dist-tag rows (limited to MAX_VISIBLE_TAGS) -->
324331
<div v-for="row in visibleTagRows" :key="row.id">
325-
<div class="flex items-center gap-2">
332+
<div
333+
class="flex items-center gap-2 pe-2"
334+
:class="row.tag === 'latest' ? 'bg-bg-subtle rounded-lg' : ''"
335+
>
326336
<!-- Expand button (only if there are more versions to show) -->
327337
<button
328338
v-if="getTagVersions(row.tag).length > 1 || !hasLoadedAll"
@@ -354,65 +364,67 @@ function getTagVersions(tag: string): VersionDisplay[] {
354364
<span v-else class="w-4" />
355365

356366
<!-- Version info -->
357-
<div class="flex-1 py-1.5 min-w-0">
358-
<div class="flex items-center justify-between gap-2">
359-
<NuxtLink
360-
:to="versionRoute(row.primaryVersion.version)"
361-
class="font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1"
362-
:class="
363-
row.primaryVersion.deprecated
364-
? 'text-red-400 hover:text-red-300'
365-
: 'text-fg-muted hover:text-fg'
366-
"
367-
:title="
368-
row.primaryVersion.deprecated
369-
? $t('package.versions.deprecated_title', {
370-
version: row.primaryVersion.version,
371-
})
372-
: row.primaryVersion.version
373-
"
374-
>
367+
<div class="flex-1 py-1.5 min-w-0 flex gap-2 justify-between items-center">
368+
<div>
369+
<div>
370+
<NuxtLink
371+
:to="versionRoute(row.primaryVersion.version)"
372+
class="font-mono text-sm transition-colors duration-200 truncate inline-flex items-center gap-1"
373+
:class="
374+
row.primaryVersion.deprecated
375+
? 'text-red-400 hover:text-red-300'
376+
: 'text-fg-muted hover:text-fg'
377+
"
378+
:title="
379+
row.primaryVersion.deprecated
380+
? $t('package.versions.deprecated_title', {
381+
version: row.primaryVersion.version,
382+
})
383+
: row.primaryVersion.version
384+
"
385+
>
386+
<span
387+
v-if="row.primaryVersion.deprecated"
388+
class="i-carbon-warning-hex w-3.5 h-3.5 shrink-0"
389+
aria-hidden="true"
390+
/>
391+
{{ row.primaryVersion.version }}
392+
</NuxtLink>
393+
</div>
394+
<div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
375395
<span
376-
v-if="row.primaryVersion.deprecated"
377-
class="i-carbon-warning-hex w-3.5 h-3.5 shrink-0"
378-
aria-hidden="true"
379-
/>
380-
{{ row.primaryVersion.version }}
381-
</NuxtLink>
382-
<div class="flex items-center gap-2 shrink-0">
383-
<DateTime
384-
v-if="row.primaryVersion.time"
385-
:datetime="row.primaryVersion.time"
386-
year="numeric"
387-
month="short"
388-
day="numeric"
389-
class="text-xs text-fg-subtle"
390-
/>
391-
<ProvenanceBadge
392-
v-if="row.primaryVersion.hasProvenance"
393-
:package-name="packageName"
394-
:version="row.primaryVersion.version"
395-
compact
396-
/>
396+
v-for="tag in row.tags"
397+
:key="tag"
398+
class="text-[9px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
399+
:title="tag"
400+
>
401+
{{ tag }}
402+
</span>
397403
</div>
398404
</div>
399-
<div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
400-
<span
401-
v-for="tag in row.tags"
402-
:key="tag"
403-
class="text-[9px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
404-
:title="tag"
405-
>
406-
{{ tag }}
407-
</span>
405+
<div class="flex items-center gap-2 shrink-0">
406+
<DateTime
407+
v-if="row.primaryVersion.time"
408+
:datetime="row.primaryVersion.time"
409+
year="numeric"
410+
month="short"
411+
day="numeric"
412+
class="text-xs text-fg-subtle"
413+
/>
414+
<ProvenanceBadge
415+
v-if="row.primaryVersion.hasProvenance"
416+
:package-name="packageName"
417+
:version="row.primaryVersion.version"
418+
compact
419+
/>
408420
</div>
409421
</div>
410422
</div>
411423

412424
<!-- Expanded versions -->
413425
<div
414426
v-if="expandedTags.has(row.tag) && getTagVersions(row.tag).length > 1"
415-
class="ms-4 ps-2 border-is border-border space-y-0.5"
427+
class="ms-4 ps-2 border-is border-border space-y-0.5 pe-2"
416428
>
417429
<div v-for="v in getTagVersions(row.tag).slice(1)" :key="v.version" class="py-1">
418430
<div class="flex items-center justify-between gap-2">
@@ -542,7 +554,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
542554
/>
543555
{{ row.primaryVersion.version }}
544556
</NuxtLink>
545-
<div class="flex items-center gap-2 shrink-0">
557+
<div class="flex items-center gap-2 shrink-0 pe-2">
546558
<DateTime
547559
v-if="row.primaryVersion.time"
548560
:datetime="row.primaryVersion.time"
@@ -618,7 +630,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
618630
{{ group.versions[0]?.version }}
619631
</NuxtLink>
620632
</div>
621-
<div class="flex items-center gap-2 shrink-0">
633+
<div class="flex items-center gap-2 shrink-0 pe-2">
622634
<DateTime
623635
v-if="group.versions[0]?.time"
624636
:datetime="group.versions[0]?.time"

0 commit comments

Comments
 (0)