Skip to content

Commit 437e584

Browse files
IdrisGitIdrisGit
committed
feat(style): highlight current version and add accent color to the latest tag
1 parent 96b53f7 commit 437e584

File tree

2 files changed

+107
-76
lines changed

2 files changed

+107
-76
lines changed

‎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" */
@@ -323,7 +324,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
323324
<div v-for="row in visibleTagRows" :key="row.id">
324325
<div
325326
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"
326-
:class="row.tag === 'latest' ? 'bg-bg-subtle' : ''"
327+
:class="row.primaryVersion.version === currentVersion ? 'bg-bg-subtle' : ''"
327328
>
328329
<!-- Expand button (only if there are more versions to show) -->
329330
<button
@@ -359,14 +360,16 @@ function getTagVersions(tag: string): VersionDisplay[] {
359360
<!-- Version info -->
360361
<div class="flex-1 py-1.5 min-w-0 flex gap-2 justify-between items-center">
361362
<div class="overflow-hidden">
362-
<div>
363+
<div class="flex items-center gap-2">
363364
<NuxtLink
364365
:to="versionRoute(row.primaryVersion.version)"
365366
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-['']"
366367
:class="
367368
row.primaryVersion.deprecated
368369
? 'text-red-400 group-hover/version-row:text-red-300'
369-
: 'text-fg-muted group-hover/version-row:text-fg'
370+
: row.primaryVersion.version === currentVersion
371+
? 'text-fg'
372+
: 'text-fg-muted group-hover/version-row:text-fg'
370373
"
371374
:title="
372375
row.primaryVersion.deprecated
@@ -391,7 +394,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
391394
<span
392395
v-for="tag in row.tags"
393396
:key="tag"
394-
class="text-[9px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
397+
class="text-[9px] font-semibold uppercase tracking-wide truncate max-w-[150px]"
398+
:class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
395399
:title="tag"
396400
>
397401
{{ tag }}
@@ -427,29 +431,34 @@ function getTagVersions(tag: string): VersionDisplay[] {
427431
v-for="v in getTagVersions(row.tag).slice(1)"
428432
:key="v.version"
429433
class="py-1 relative group/version-row hover:bg-bg-elevated/20 focus-within:bg-bg-elevated/20 transition-colors duration-200"
434+
:class="v.version === currentVersion ? 'bg-bg-elevated/20 rounded' : ''"
430435
>
431436
<div class="flex items-center justify-between gap-2">
432-
<NuxtLink
433-
:to="versionRoute(v.version)"
434-
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
435-
:class="
436-
v.deprecated
437-
? 'text-red-400 group-hover/version-row:text-red-300'
438-
: 'text-fg-subtle group-hover/version-row:text-fg-muted'
439-
"
440-
:title="
441-
v.deprecated
442-
? $t('package.versions.deprecated_title', { version: v.version })
443-
: v.version
444-
"
445-
>
446-
<span
447-
v-if="v.deprecated"
448-
class="i-carbon-warning-hex w-3 h-3 shrink-0"
449-
aria-hidden="true"
450-
/>
451-
{{ v.version }}
452-
</NuxtLink>
437+
<div class="flex items-center gap-2 min-w-0">
438+
<NuxtLink
439+
:to="versionRoute(v.version)"
440+
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
441+
:class="
442+
v.deprecated
443+
? 'text-red-400 group-hover/version-row:text-red-300'
444+
: v.version === currentVersion
445+
? 'text-fg'
446+
: 'text-fg-subtle group-hover/version-row:text-fg-muted'
447+
"
448+
:title="
449+
v.deprecated
450+
? $t('package.versions.deprecated_title', { version: v.version })
451+
: v.version
452+
"
453+
>
454+
<span
455+
v-if="v.deprecated"
456+
class="i-carbon-warning-hex w-3 h-3 shrink-0"
457+
aria-hidden="true"
458+
/>
459+
{{ v.version }}
460+
</NuxtLink>
461+
</div>
453462
<div class="flex items-center gap-2 shrink-0 relative z-10">
454463
<DateTime
455464
v-if="v.time"
@@ -475,7 +484,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
475484
<span
476485
v-for="tag in filterExcludedTags(v.tags, row.tags)"
477486
:key="tag"
478-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
487+
class="text-[8px] font-semibold uppercase tracking-wide truncate max-w-[120px]"
488+
:class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
479489
:title="tag"
480490
>
481491
{{ tag }}
@@ -535,31 +545,36 @@ function getTagVersions(tag: string): VersionDisplay[] {
535545
v-for="row in hiddenTagRows"
536546
:key="row.id"
537547
class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
548+
:class="row.primaryVersion.version === currentVersion ? 'bg-bg-subtle' : ''"
538549
>
539550
<div class="flex items-center justify-between gap-2">
540-
<NuxtLink
541-
:to="versionRoute(row.primaryVersion.version)"
542-
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
543-
:class="
544-
row.primaryVersion.deprecated
545-
? 'text-red-400 group-hover/version-row:text-red-300'
546-
: 'text-fg-muted group-hover/version-row:text-fg'
547-
"
548-
:title="
549-
row.primaryVersion.deprecated
550-
? $t('package.versions.deprecated_title', {
551-
version: row.primaryVersion.version,
552-
})
553-
: row.primaryVersion.version
554-
"
555-
>
556-
<span
557-
v-if="row.primaryVersion.deprecated"
558-
class="i-carbon-warning-hex w-3 h-3 shrink-0"
559-
aria-hidden="true"
560-
/>
561-
{{ row.primaryVersion.version }}
562-
</NuxtLink>
551+
<div class="flex items-center gap-2 min-w-0">
552+
<NuxtLink
553+
:to="versionRoute(row.primaryVersion.version)"
554+
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
555+
:class="
556+
row.primaryVersion.deprecated
557+
? 'text-red-400 group-hover/version-row:text-red-300'
558+
: row.primaryVersion.version === currentVersion
559+
? 'text-fg'
560+
: 'text-fg-muted group-hover/version-row:text-fg'
561+
"
562+
:title="
563+
row.primaryVersion.deprecated
564+
? $t('package.versions.deprecated_title', {
565+
version: row.primaryVersion.version,
566+
})
567+
: row.primaryVersion.version
568+
"
569+
>
570+
<span
571+
v-if="row.primaryVersion.deprecated"
572+
class="i-carbon-warning-hex w-3 h-3 shrink-0"
573+
aria-hidden="true"
574+
/>
575+
{{ row.primaryVersion.version }}
576+
</NuxtLink>
577+
</div>
563578
<div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
564579
<DateTime
565580
v-if="row.primaryVersion.time"
@@ -578,7 +593,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
578593
<span
579594
v-for="tag in row.tags"
580595
:key="tag"
581-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
596+
class="text-[8px] font-semibold uppercase tracking-wide truncate max-w-[120px]"
597+
:class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
582598
:title="tag"
583599
>
584600
{{ tag }}
@@ -593,6 +609,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
593609
<div
594610
v-if="group.versions.length > 1"
595611
class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
612+
:class="group.versions[0]?.version === currentVersion ? 'bg-bg-subtle' : ''"
596613
>
597614
<div class="flex items-center justify-between gap-2">
598615
<div class="flex items-center gap-2 min-w-0">
@@ -625,7 +642,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
625642
:class="
626643
group.versions[0]?.deprecated
627644
? 'text-red-400 group-hover/version-row:text-red-300'
628-
: 'text-fg-muted group-hover/version-row:text-fg'
645+
: group.versions[0]?.version === currentVersion
646+
? 'text-fg'
647+
: 'text-fg-muted group-hover/version-row:text-fg'
629648
"
630649
:title="
631650
group.versions[0]?.deprecated
@@ -668,7 +687,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
668687
<span
669688
v-for="tag in group.versions[0].tags"
670689
:key="tag"
671-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[120px]"
690+
class="text-[8px] font-semibold uppercase tracking-wide truncate max-w-[120px]"
691+
:class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
672692
:title="tag"
673693
>
674694
{{ tag }}
@@ -679,6 +699,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
679699
<div
680700
v-else
681701
class="py-1 relative group/version-row hover:bg-bg-subtle focus-within:bg-bg-subtle transition-colors duration-200 rounded-lg"
702+
:class="group.versions[0]?.version === currentVersion ? 'bg-bg-subtle' : ''"
682703
>
683704
<div class="flex items-center justify-between gap-2">
684705
<div class="flex items-center gap-2 min-w-0">
@@ -690,7 +711,9 @@ function getTagVersions(tag: string): VersionDisplay[] {
690711
:class="
691712
group.versions[0]?.deprecated
692713
? 'text-red-400 group-hover/version-row:text-red-300'
693-
: 'text-fg-muted group-hover/version-row:text-fg'
714+
: group.versions[0]?.version === currentVersion
715+
? 'text-fg'
716+
: 'text-fg-muted group-hover/version-row:text-fg'
694717
"
695718
:title="
696719
group.versions[0]?.deprecated
@@ -733,7 +756,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
733756
<span
734757
v-for="tag in group.versions[0].tags"
735758
:key="tag"
736-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide"
759+
class="text-[8px] font-semibold uppercase tracking-wide"
760+
:class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
737761
>
738762
{{ tag }}
739763
</span>
@@ -749,29 +773,34 @@ function getTagVersions(tag: string): VersionDisplay[] {
749773
v-for="v in group.versions.slice(1)"
750774
:key="v.version"
751775
class="py-1 relative group/version-row hover:bg-bg-elevated/20 focus-within:bg-bg-elevated/20 transition-colors duration-200"
776+
:class="v.version === currentVersion ? 'bg-bg-elevated/20 rounded' : ''"
752777
>
753778
<div class="flex items-center justify-between gap-2">
754-
<NuxtLink
755-
:to="versionRoute(v.version)"
756-
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
757-
:class="
758-
v.deprecated
759-
? 'text-red-400 group-hover/version-row:text-red-300'
760-
: 'text-fg-subtle group-hover/version-row:text-fg-muted'
761-
"
762-
:title="
763-
v.deprecated
764-
? $t('package.versions.deprecated_title', { version: v.version })
765-
: v.version
766-
"
767-
>
768-
<span
769-
v-if="v.deprecated"
770-
class="i-carbon-warning-hex w-3 h-3 shrink-0"
771-
aria-hidden="true"
772-
/>
773-
{{ v.version }}
774-
</NuxtLink>
779+
<div class="flex items-center gap-2 min-w-0">
780+
<NuxtLink
781+
:to="versionRoute(v.version)"
782+
class="block font-mono text-xs transition-colors duration-200 truncate inline-flex items-center gap-1 after:absolute after:inset-0 after:content-['']"
783+
:class="
784+
v.deprecated
785+
? 'text-red-400 group-hover/version-row:text-red-300'
786+
: v.version === currentVersion
787+
? 'text-fg'
788+
: 'text-fg-subtle group-hover/version-row:text-fg-muted'
789+
"
790+
:title="
791+
v.deprecated
792+
? $t('package.versions.deprecated_title', { version: v.version })
793+
: v.version
794+
"
795+
>
796+
<span
797+
v-if="v.deprecated"
798+
class="i-carbon-warning-hex w-3 h-3 shrink-0"
799+
aria-hidden="true"
800+
/>
801+
{{ v.version }}
802+
</NuxtLink>
803+
</div>
775804
<div class="flex items-center gap-2 shrink-0 pe-2 relative z-10">
776805
<DateTime
777806
v-if="v.time"
@@ -794,7 +823,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
794823
<span
795824
v-for="tag in v.tags"
796825
:key="tag"
797-
class="text-[8px] font-semibold text-fg-subtle uppercase tracking-wide"
826+
class="text-[8px] font-semibold uppercase tracking-wide"
827+
:class="tag === 'latest' ? 'text-accent' : 'text-fg-subtle'"
798828
>
799829
{{ tag }}
800830
</span>

‎app/pages/package/[...package].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)