Skip to content

Commit 77f4104

Browse files
IdrisGitIdrisGit
committed
feat(style): highlight current version and add accent color to the latest tag
1 parent ec7a5b8 commit 77f4104

2 files changed

Lines changed: 107 additions & 76 deletions

File tree

‎app/components/Package/Versions.vue‎

Lines changed: 106 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const props = defineProps<{
1717
versions: Record<string, SlimVersion>
1818
distTags: Record<string, string>
1919
time: Record<string, string>
20+
currentVersion?: string | null
2021
}>()
2122
2223
/** Maximum number of dist-tag rows to show before collapsing into "Other versions" */
@@ -320,7 +321,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
320321
<div v-for="row in visibleTagRows" :key="row.id">
321322
<div
322323
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"
323-
:class="row.tag === 'latest' ? 'bg-bg-subtle' : ''"
324+
:class="row.primaryVersion.version === currentVersion ? 'bg-bg-subtle' : ''"
324325
>
325326
<!-- Expand button (only if there are more versions to show) -->
326327
<button
@@ -356,14 +357,16 @@ function getTagVersions(tag: string): VersionDisplay[] {
356357
<!-- Version info -->
357358
<div class="flex-1 py-1.5 min-w-0 flex gap-2 justify-between items-center">
358359
<div class="overflow-hidden">
359-
<div>
360+
<div class="flex items-center gap-2">
360361
<NuxtLink
361362
:to="versionRoute(row.primaryVersion.version)"
362363
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-['']"
363364
:class="
364365
row.primaryVersion.deprecated
365366
? 'text-red-400 group-hover/version-row:text-red-300'
366-
: 'text-fg-muted group-hover/version-row:text-fg'
367+
: row.primaryVersion.version === currentVersion
368+
? 'text-fg'
369+
: 'text-fg-muted group-hover/version-row:text-fg'
367370
"
368371
:title="
369372
row.primaryVersion.deprecated
@@ -388,7 +391,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
388391
<span
389392
v-for="tag in row.tags"
390393
:key="tag"
391-
class="text-[9px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
394+
class="text-[9px] font-semibold uppercase tracking-wide truncate max-w-[150px]"
395+
:class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
392396
:title="tag"
393397
>
394398
{{ tag }}
@@ -424,29 +428,34 @@ function getTagVersions(tag: string): VersionDisplay[] {
424428
v-for="v in getTagVersions(row.tag).slice(1)"
425429
:key="v.version"
426430
class="py-1 relative group/version-row hover:bg-bg-elevated/20 focus-within:bg-bg-elevated/20 transition-colors duration-200"
431+
:class="v.version === currentVersion ? 'bg-bg-elevated/20 rounded' : ''"
427432
>
428433
<div class="flex items-center justify-between gap-2">
429-
<NuxtLink
430-
:to="versionRoute(v.version)"
431-
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
432-
:class="
433-
v.deprecated
434-
? 'text-red-400 group-hover/version-row:text-red-300'
435-
: 'text-fg-subtle group-hover/version-row:text-fg-muted'
436-
"
437-
:title="
438-
v.deprecated
439-
? $t('package.versions.deprecated_title', { version: v.version })
440-
: v.version
441-
"
442-
>
443-
<span
444-
v-if="v.deprecated"
445-
class="i-carbon-warning-hex w-3 h-3 shrink-0"
446-
aria-hidden="true"
447-
/>
448-
{{ v.version }}
449-
</NuxtLink>
434+
<div class="flex items-center gap-2 min-w-0">
435+
<NuxtLink
436+
:to="versionRoute(v.version)"
437+
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
438+
:class="
439+
v.deprecated
440+
? 'text-red-400 group-hover/version-row:text-red-300'
441+
: v.version === currentVersion
442+
? 'text-fg'
443+
: 'text-fg-subtle group-hover/version-row:text-fg-muted'
444+
"
445+
:title="
446+
v.deprecated
447+
? $t('package.versions.deprecated_title', { version: v.version })
448+
: v.version
449+
"
450+
>
451+
<span
452+
v-if="v.deprecated"
453+
class="i-carbon-warning-hex w-3 h-3 shrink-0"
454+
aria-hidden="true"
455+
/>
456+
{{ v.version }}
457+
</NuxtLink>
458+
</div>
450459
<div class="flex items-center gap-2 shrink-0 relative z-10">
451460
<DateTime
452461
v-if="v.time"
@@ -472,7 +481,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
472481
<span
473482
v-for="tag in filterExcludedTags(v.tags, row.tags)"
474483
:key="tag"
475-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
484+
class="text-[8px] font-semibold uppercase tracking-wide truncate max-w-[120px]"
485+
:class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
476486
:title="tag"
477487
>
478488
{{ tag }}
@@ -532,31 +542,36 @@ function getTagVersions(tag: string): VersionDisplay[] {
532542
v-for="row in hiddenTagRows"
533543
:key="row.id"
534544
class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
545+
:class="row.primaryVersion.version === currentVersion ? 'bg-bg-subtle' : ''"
535546
>
536547
<div class="flex items-center justify-between gap-2">
537-
<NuxtLink
538-
:to="versionRoute(row.primaryVersion.version)"
539-
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
540-
:class="
541-
row.primaryVersion.deprecated
542-
? 'text-red-400 group-hover/version-row:text-red-300'
543-
: 'text-fg-muted group-hover/version-row:text-fg'
544-
"
545-
:title="
546-
row.primaryVersion.deprecated
547-
? $t('package.versions.deprecated_title', {
548-
version: row.primaryVersion.version,
549-
})
550-
: row.primaryVersion.version
551-
"
552-
>
553-
<span
554-
v-if="row.primaryVersion.deprecated"
555-
class="i-carbon-warning-hex w-3 h-3 shrink-0"
556-
aria-hidden="true"
557-
/>
558-
{{ row.primaryVersion.version }}
559-
</NuxtLink>
548+
<div class="flex items-center gap-2 min-w-0">
549+
<NuxtLink
550+
:to="versionRoute(row.primaryVersion.version)"
551+
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
552+
:class="
553+
row.primaryVersion.deprecated
554+
? 'text-red-400 group-hover/version-row:text-red-300'
555+
: row.primaryVersion.version === currentVersion
556+
? 'text-fg'
557+
: 'text-fg-muted group-hover/version-row:text-fg'
558+
"
559+
:title="
560+
row.primaryVersion.deprecated
561+
? $t('package.versions.deprecated_title', {
562+
version: row.primaryVersion.version,
563+
})
564+
: row.primaryVersion.version
565+
"
566+
>
567+
<span
568+
v-if="row.primaryVersion.deprecated"
569+
class="i-carbon-warning-hex w-3 h-3 shrink-0"
570+
aria-hidden="true"
571+
/>
572+
{{ row.primaryVersion.version }}
573+
</NuxtLink>
574+
</div>
560575
<div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
561576
<DateTime
562577
v-if="row.primaryVersion.time"
@@ -575,7 +590,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
575590
<span
576591
v-for="tag in row.tags"
577592
:key="tag"
578-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
593+
class="text-[8px] font-semibold uppercase tracking-wide truncate max-w-[120px]"
594+
:class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
579595
:title="tag"
580596
>
581597
{{ tag }}
@@ -590,6 +606,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
590606
<div
591607
v-if="group.versions.length > 1"
592608
class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
609+
:class="group.versions[0]?.version === currentVersion ? 'bg-bg-subtle' : ''"
593610
>
594611
<div class="flex items-center justify-between gap-2">
595612
<div class="flex items-center gap-2 min-w-0">
@@ -622,7 +639,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
622639
:class="
623640
group.versions[0]?.deprecated
624641
? 'text-red-400 group-hover/version-row:text-red-300'
625-
: 'text-fg-muted group-hover/version-row:text-fg'
642+
: group.versions[0]?.version === currentVersion
643+
? 'text-fg'
644+
: 'text-fg-muted group-hover/version-row:text-fg'
626645
"
627646
:title="
628647
group.versions[0]?.deprecated
@@ -665,7 +684,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
665684
<span
666685
v-for="tag in group.versions[0].tags"
667686
:key="tag"
668-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
687+
class="text-[8px] font-semibold uppercase tracking-wide truncate max-w-[120px]"
688+
:class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
669689
:title="tag"
670690
>
671691
{{ tag }}
@@ -676,6 +696,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
676696
<div
677697
v-else
678698
class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
699+
:class="group.versions[0]?.version === currentVersion ? 'bg-bg-subtle' : ''"
679700
>
680701
<div class="flex items-center justify-between gap-2">
681702
<div class="flex items-center gap-2 min-w-0">
@@ -687,7 +708,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
687708
:class="
688709
group.versions[0]?.deprecated
689710
? 'text-red-400 group-hover/version-row:text-red-300'
690-
: 'text-fg-muted group-hover/version-row:text-fg'
711+
: group.versions[0]?.version === currentVersion
712+
? 'text-fg'
713+
: 'text-fg-muted group-hover/version-row:text-fg'
691714
"
692715
:title="
693716
group.versions[0]?.deprecated
@@ -730,7 +753,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
730753
<span
731754
v-for="tag in group.versions[0].tags"
732755
:key="tag"
733-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide"
756+
class="text-[8px] font-semibold uppercase tracking-wide"
757+
:class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
734758
>
735759
{{ tag }}
736760
</span>
@@ -746,29 +770,34 @@ function getTagVersions(tag: string): VersionDisplay[] {
746770
v-for="v in group.versions.slice(1)"
747771
:key="v.version"
748772
class="py-1 relative group/version-row hover:bg-bg-elevated/20 focus-within:bg-bg-elevated/20 transition-colors duration-200"
773+
:class="v.version === currentVersion ? 'bg-bg-elevated/20 rounded' : ''"
749774
>
750775
<div class="flex items-center justify-between gap-2">
751-
<NuxtLink
752-
:to="versionRoute(v.version)"
753-
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
754-
:class="
755-
v.deprecated
756-
? 'text-red-400 group-hover/version-row:text-red-300'
757-
: 'text-fg-subtle group-hover/version-row:text-fg-muted'
758-
"
759-
:title="
760-
v.deprecated
761-
? $t('package.versions.deprecated_title', { version: v.version })
762-
: v.version
763-
"
764-
>
765-
<span
766-
v-if="v.deprecated"
767-
class="i-carbon-warning-hex w-3 h-3 shrink-0"
768-
aria-hidden="true"
769-
/>
770-
{{ v.version }}
771-
</NuxtLink>
776+
<div class="flex items-center gap-2 min-w-0">
777+
<NuxtLink
778+
:to="versionRoute(v.version)"
779+
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
780+
:class="
781+
v.deprecated
782+
? 'text-red-400 group-hover/version-row:text-red-300'
783+
: v.version === currentVersion
784+
? 'text-fg'
785+
: 'text-fg-subtle group-hover/version-row:text-fg-muted'
786+
"
787+
:title="
788+
v.deprecated
789+
? $t('package.versions.deprecated_title', { version: v.version })
790+
: v.version
791+
"
792+
>
793+
<span
794+
v-if="v.deprecated"
795+
class="i-carbon-warning-hex w-3 h-3 shrink-0"
796+
aria-hidden="true"
797+
/>
798+
{{ v.version }}
799+
</NuxtLink>
800+
</div>
772801
<div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
773802
<DateTime
774803
v-if="v.time"
@@ -791,7 +820,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
791820
<span
792821
v-for="tag in v.tags"
793822
:key="tag"
794-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide"
823+
class="text-[8px] font-semibold uppercase tracking-wide"
824+
:class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
795825
>
796826
{{ tag }}
797827
</span>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1225,6 +1225,7 @@ onKeyStroke(
12251225
:versions="pkg.versions"
12261226
:dist-tags="pkg['dist-tags'] ?? {}"
12271227
:time="pkg.time"
1228+
:current-version="resolvedVersion"
12281229
/>
12291230

12301231
<!-- Install Scripts Warning -->

0 commit comments

Comments
 (0)