[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: call out latest version in version list (#448)

authored by

Tom Sherman and committed by
GitHub
7cf66b24 75e50e8f

+65 -53
+65 -53
app/components/PackageVersions.vue
··· 109 109 const rows = isPackageDeprecated.value 110 110 ? allTagRows.value 111 111 : 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 113 120 }) 114 121 115 122 // Hidden tag rows (all other tags) - shown in "Other versions" ··· 322 329 <div class="space-y-0.5 min-w-0"> 323 330 <!-- Dist-tag rows (limited to MAX_VISIBLE_TAGS) --> 324 331 <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 + > 326 336 <!-- Expand button (only if there are more versions to show) --> 327 337 <button 328 338 v-if="getTagVersions(row.tag).length > 1 || !hasLoadedAll" ··· 354 364 <span v-else class="w-4" /> 355 365 356 366 <!-- 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"> 375 395 <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> 397 403 </div> 398 404 </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 + /> 408 420 </div> 409 421 </div> 410 422 </div> ··· 412 424 <!-- Expanded versions --> 413 425 <div 414 426 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" 416 428 > 417 429 <div v-for="v in getTagVersions(row.tag).slice(1)" :key="v.version" class="py-1"> 418 430 <div class="flex items-center justify-between gap-2"> ··· 542 554 /> 543 555 {{ row.primaryVersion.version }} 544 556 </NuxtLink> 545 - <div class="flex items-center gap-2 shrink-0"> 557 + <div class="flex items-center gap-2 shrink-0 pe-2"> 546 558 <DateTime 547 559 v-if="row.primaryVersion.time" 548 560 :datetime="row.primaryVersion.time" ··· 618 630 {{ group.versions[0]?.version }} 619 631 </NuxtLink> 620 632 </div> 621 - <div class="flex items-center gap-2 shrink-0"> 633 + <div class="flex items-center gap-2 shrink-0 pe-2"> 622 634 <DateTime 623 635 v-if="group.versions[0]?.time" 624 636 :datetime="group.versions[0]?.time"