fix: tag sorting on package versions page

[ShroXd]

🔗 Linked issue

Resolves#2102

🧭 Context

A implementation bug caused the confusing UI.

📚 Description

Fix unstable ordering of the tagged versions array. Tags are now sorted by semantic priority, with the exception of latest which remains pinned at the top.

Scenario	Screenshot
After
Before

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 19, 2026 8:48am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 19, 2026 8:48am
npmx-lunaria	Ignored		Mar 19, 2026 8:48am

[codecov]

Codecov Report

❌ Patch coverage is 83.33333% with 4 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/pages/package/[[org]]/[name]/versions.vue	66.66%	2 Missing ⚠️
app/utils/versions.ts	88.88%	1 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

Adds a dist-tag priority system and applies it to the package versions page. Introduces TAG_PRIORITY and getTagPriority(tag) (with fuzzy matching) in app/utils/versions.ts. The versions page (app/pages/package/[[org]]/[name]/versions.vue) now computes latestTagRow (first row containing the latest tag) and otherTagRows (remaining rows sorted by tag priority then by publish time) and updates rendering to use these computed values instead of direct array indexing.

Suggested labels

help wanted

Suggested reviewers

• danielroe
• alexdln

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly references the linked issue and explains the fix for unstable ordering of tagged versions with semantic priority sorting.
Linked Issues check	✅ Passed	The code changes implement all primary requirements: ensuring 'latest' tag is pinned at top, sorting other tags by semantic priority, and preventing RC/pre-release tags from appearing as the prominent featured version.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing tag ordering and priority. No unrelated functionality modifications or out-of-scope changes detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can use OpenGrep to find security vulnerabilities and bugs across 17+ programming languages.

OpenGrep is compatible with Semgrep configurations. Add an opengrep.yml or semgrep.ymlconfiguration file to your project to enable OpenGrep analysis.

[coderabbitai]

🧹 Nitpick comments (1)

app/utils/versions.ts (1)

77-83: Fuzzy matching may cause unexpected priority assignment for unconventional tag names.

The String.includes() check matches substrings anywhere in the tag, so tags like "arc" would match "rc" (priority 1) and "betamax" would match "beta" (priority 2). Additionally, since iteration stops on first match, the order of entries in TAG_PRIORITY determines which keyword wins for tags containing multiple keywords (e.g., "beta-rc" matches "rc" first).

This is likely acceptable for real-world npm dist-tags, but consider word-boundary matching if edge cases arise.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0522bfda-26e4-4b24-bcd8-83f8d51327a6

📥 Commits

Reviewing files that changed from the base of the PR and between 07a9ea9 and 5b9f12f.

📒 Files selected for processing (2)

• app/pages/package/[[org]]/[name]/versions.vue
• app/utils/versions.ts

[coderabbitai]

🧹 Nitpick comments (1)

app/pages/package/[[org]]/[name]/versions.vue (1)

70-73: Normalise the latest-tag predicate once.

getTagPriority() already lowercases tags, but the featured-row split still relies on exact 'latest' checks. A tiny helper would keep the card selection, exclusion filter, and label rendering aligned if mixed-case tags ever leak through.

♻️ Proposed tidy-up

 const tagRows = computed(() => buildTaggedVersionRows(distTags.value))
-const latestTagRow = computed(() => tagRows.value.find(r => r.tags.includes('latest')) ?? null)+const isLatestTag = (tag: string) => tag.toLowerCase() === 'latest'++const latestTagRow = computed(() => tagRows.value.find(r => r.tags.some(isLatestTag)) ?? null)
const otherTagRows = computed(() =>
tagRows.value
- .filter(r => !r.tags.includes('latest'))+ .filter(r => !r.tags.some(isLatestTag))
.sort((a, b) => {
const pa = getTagPriority(a.primaryTag)
const pb = getTagPriority(b.primaryTag)
if (pa !== pb) return pa - pb
const ta = versionTimes.value[a.version] ?? ''
const tb = versionTimes.value[b.version] ?? ''
return tb.localeCompare(ta)
}),
)

- v-for="tag in latestTagRow!.tags.filter(t => t !== 'latest')"+ v-for="tag in latestTagRow!.tags.filter(t => !isLatestTag(t))"

Also applies to: 241-241

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 940f3047-49fc-4769-acec-3d22c747c9c2

📥 Commits

Reviewing files that changed from the base of the PR and between 5b9f12f and c9f5ea4.

📒 Files selected for processing (2)

• app/pages/package/[[org]]/[name]/versions.vue
• app/utils/versions.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• app/utils/versions.ts

[graphieros]

nit: I would recommend to use readable vars

[ShroXd]

nit: I would recommend to use readable vars

Nice point! I will refactor this.

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 023d94fd-4ca9-498b-aa2a-3299cf80450b

📥 Commits

Reviewing files that changed from the base of the PR and between c9f5ea4 and caa77f1.

📒 Files selected for processing (1)

• app/pages/package/[[org]]/[name]/versions.vue

[mbtools]

The version page is great! And thanks for this fix, too

Maybe move the sort logic to sortTagsLatestFirst in versions.ts and add some tests to test/unit/app/utils/versions.spec.ts 🙏

Just a bit feedback for your next PRs 😉

1. It's not obvious that you can enter semver ranges to filter

It's nicely done on the package page. I suggest using the same for the version page:

2, The dates for the dist-tags are missing the timestamp on hover

Nice work,
Marc

[ShroXd]

@mbtools Thanks for pointing it out!
I refactored my code and added unit tests. And I will finish the remaining UX part in a new PR to make this PR focus on the fix.

[mbtools]

Nice! LGTM 👍