Skip to content

feat: package page to compare page carry the name#3030

Open
btea wants to merge 6 commits into
npmx-dev:mainfrom
btea:feat/package-page-to-compare-page-carrry-package-name
Open

feat: package page to compare page carry the name#3030
btea wants to merge 6 commits into
npmx-dev:mainfrom
btea:feat/package-page-to-compare-page-carrry-package-name

Conversation

@btea

@btea btea commented Jul 11, 2026

Copy link
Copy Markdown
Contributor

🔗 Linked issue

/

🧭 Context

Based on the current structure, if a user is on the package page and then clicks to jump to the compare page, I think it would be reasonable to compare the current package. Therefore, it would be more convenient to directly carry over the package name.

📚 Description

@vercel

vercel Bot commented Jul 11, 2026

Copy link
Copy Markdown
Contributor

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

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview, Comment Jul 26, 2026 2:44am
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Jul 26, 2026 2:44am
npmx-lunaria Ignored Ignored Jul 26, 2026 2:44am

Request Review

@coderabbitai

coderabbitai Bot commented Jul 11, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

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

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 964b350f-ea4f-4698-824b-44fbff898589

📥 Commits

Reviewing files that changed from the base of the PR and between aca550a and 6320559.

📒 Files selected for processing (2)
  • app/components/AppHeader.vue
  • app/components/Package/Header.vue
💤 Files with no reviewable changes (1)
  • app/components/Package/Header.vue
🚧 Files skipped from review as they are similar to previous changes (1)
  • app/components/AppHeader.vue

📝 Walkthrough

Summary by CodeRabbit

  • New Features

    • The header’s Compare link and keyboard shortcut now open comparisons for the currently viewed package when applicable.
    • Package pages now use simpler navigation without a dedicated “Compare this package” button or shortcut.
  • Improvements

    • Updated package navigation labels across supported languages, including clearer Compare, Timeline, Statistics and Changelog wording.
    • Refined localized package navigation text for a more consistent experience.

Walkthrough

Desktop Compare links now include the current package when available. The package header’s inline compare button and shortcut are removed, and the compare_this_package translation key is removed or adjusted across locales and the i18n schema.

Changes

Package compare navigation cleanup

Layer / File(s) Summary
Desktop compare routing
app/components/AppHeader.vue
The desktop Compare link and c shortcut conditionally include the current package name in the route query.
Package header action removal
app/components/Package/Header.vue
The package metrics section no longer renders the inline compare button or maps the package-level c shortcut.
Localisation contract updates
i18n/locales/*, i18n/schema.json
Package-specific comparison translations are removed or replaced with updated navigation labels, and the schema no longer defines compare_this_package. The Nepali locale also adds an empty foreground_themes object.

Possibly related PRs

Suggested reviewers: gameroman, ghostdevv

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title is related to carrying the current package name into the compare page, which matches the main change.
Description check ✅ Passed The description matches the change by explaining that the package name should carry over when navigating from package to compare.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

Comment @coderabbitai help to get the list of available commands.

@codecov

codecov Bot commented Jul 11, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 75.00000% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
app/components/AppHeader.vue 75.00% 1 Missing ⚠️

📢 Thoughts on this report? Let us know!

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/components/Link/Base.vue`:
- Around line 39-40: Add a JSDoc comment describing the `name` prop in the
component props definition, and update the `NuxtLink` template using
`v-bind="props"` so `name` is explicitly overridden or omitted after the spread,
preventing it from being rendered as an `<a>` attribute.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: aeeb1ecc-2d7f-4d85-b0a1-97fa8adf26c1

📥 Commits

Reviewing files that changed from the base of the PR and between 6a5befd and 7e5b19d.

📒 Files selected for processing (2)
  • app/components/AppHeader.vue
  • app/components/Link/Base.vue

Comment thread app/components/Link/Base.vue Outdated
@gameroman

Copy link
Copy Markdown
Member

I think I agree with this 👍

We currently have 2 Compare buttons when we are on a package page

image

I would just remove the Compare this package one and when we are on a package page just make the top one work like the Compare this package one, which is what you are doing here

@graphieros

Copy link
Copy Markdown
Member

I think it would be great to have @serhalp 's take on this one.
cf #2180

@graphieros graphieros added the needs discussion An idea that needs more discussion to understand the scope and impact. label Jul 15, 2026
@ghostdevv
ghostdevv requested a review from serhalp July 22, 2026 11:48
@graphieros

Copy link
Copy Markdown
Member

I think we should go along with this PR, because it fits in the steps that are planned to improve the package page.
IMO, the "compare this package" button can also be removed entirely, since it would now do the exact same thing as the "compare" button in the header.
@patak-cat @serhalp fyi

@patak-cat

Copy link
Copy Markdown
Contributor

Yes, this looks like a good step to me!

Comment thread app/components/Link/Base.vue Outdated
const keyboardShortcutsEnabled = useKeyboardShortcuts()
</script>

const { packageName } = usePackageRoute()

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤔 It seems smelly to me that the LinkBase component is aware of the package route and compare route and owns this logic. Could we try to move this up, similar to the existing "compare this package" button?

@serhalp

serhalp commented Jul 25, 2026

Copy link
Copy Markdown
Member

Personally, I don't feel strongly (please feel free to make a call without me here), but I have these thoughts:

  1. The usual expectations of a global header are that the semantics of a given nav item are consistent across the site.
  2. We already have this feature as "compare this package", and the c hotkey even gets overridden to this while on the package page. If the challenge is that this feature is not discoverable enough, I wonder if we could spend some time thinking about how to address that instead.

Maybe the nav item could turn into a button group...? lazy mockup (imagine a better icon, etc.):

Screenshot 2026-07-25 at 07 48 21

💭 Maybe there's an opportunity to make this feature even better? Could we keep track of your most recently viewed packages and add those to that button group dropdown in order...?

@btea

btea commented Jul 25, 2026

Copy link
Copy Markdown
Contributor Author
  1. We already have this feature as "compare this package", and the c hotkey even gets overridden to this while on the package page. If the challenge is that this feature is not discoverable enough, I wonder if we could spend some time thinking about how to address that instead.

Might it be a page caching issue? I didn't see this feature before, but I saw it after refreshing the page, and it's quite obvious.

@github-actions

github-actions Bot commented Jul 26, 2026

Copy link
Copy Markdown

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File Note
i18n/locales/ar-EG.json Localization changed, will be marked as complete. 🔄️
i18n/locales/bn-IN.json Localization changed, will be marked as complete. 🔄️
i18n/locales/cs-CZ.json Localization changed, will be marked as complete. 🔄️
i18n/locales/de.json Localization changed, will be marked as complete. 🔄️
i18n/locales/en.json Source changed, localizations will be marked as outdated.
i18n/locales/es.json Localization changed, will be marked as complete. 🔄️
i18n/locales/fr-FR.json Localization changed, will be marked as complete. 🔄️
i18n/locales/hi-IN.json Localization changed, will be marked as complete. 🔄️
i18n/locales/id-ID.json Localization changed, will be marked as complete. 🔄️
i18n/locales/it-IT.json Localization changed, will be marked as complete. 🔄️
i18n/locales/ja-JP.json Localization changed, will be marked as complete. 🔄️
i18n/locales/mr-IN.json Localization changed, will be marked as complete. 🔄️
i18n/locales/nb-NO.json Localization changed, will be marked as complete. 🔄️
i18n/locales/ne-NP.json Localization changed, will be marked as complete. 🔄️
i18n/locales/nl.json Localization changed, will be marked as complete. 🔄️
i18n/locales/pt-BR.json Localization changed, will be marked as complete. 🔄️
i18n/locales/pt-PT.json Localization changed, will be marked as complete. 🔄️
i18n/locales/ro-RO.json Localization changed, will be marked as complete. 🔄️
i18n/locales/ru-RU.json Localization changed, will be marked as complete. 🔄️
i18n/locales/sr-Latn-RS.json Localization changed, will be marked as complete. 🔄️
i18n/locales/tr-TR.json Localization changed, will be marked as complete. 🔄️
i18n/locales/uk-UA.json Localization changed, will be marked as complete. 🔄️
i18n/locales/vi-VN.json Localization changed, will be marked as complete. 🔄️
i18n/locales/zh-CN.json Localization changed, will be marked as complete. 🔄️
i18n/locales/zh-TW.json Localization changed, will be marked as complete. 🔄️
Warnings reference
Icon Description
🔄️ The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

@btea

btea commented Jul 26, 2026

Copy link
Copy Markdown
Contributor Author

I agree with @graphieros's suggestion and have made the changes accordingly, keeping only one top button. 👍

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/components/AppHeader.vue`:
- Around line 21-29: Define a single computed Compare route target using
packageName, then reuse it in both desktopLinks and the c keyboard shortcut so
clicking Compare and pressing c preserve the same package context. Remove the
duplicated inline route definitions while keeping the existing non-package
fallback.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: a2482ebd-8452-475c-bda4-1a882230a119

📥 Commits

Reviewing files that changed from the base of the PR and between 51a72f0 and 216ab10.

📒 Files selected for processing (27)
  • app/components/AppHeader.vue
  • app/components/Package/Header.vue
  • i18n/locales/ar-EG.json
  • i18n/locales/bn-IN.json
  • i18n/locales/cs-CZ.json
  • i18n/locales/de.json
  • i18n/locales/en.json
  • i18n/locales/es.json
  • i18n/locales/fr-FR.json
  • i18n/locales/hi-IN.json
  • i18n/locales/id-ID.json
  • i18n/locales/it-IT.json
  • i18n/locales/ja-JP.json
  • i18n/locales/mr-IN.json
  • i18n/locales/nb-NO.json
  • i18n/locales/nl.json
  • i18n/locales/pt-BR.json
  • i18n/locales/pt-PT.json
  • i18n/locales/ro-RO.json
  • i18n/locales/ru-RU.json
  • i18n/locales/sr-Latn-RS.json
  • i18n/locales/tr-TR.json
  • i18n/locales/uk-UA.json
  • i18n/locales/vi-VN.json
  • i18n/locales/zh-CN.json
  • i18n/locales/zh-TW.json
  • i18n/schema.json
💤 Files with no reviewable changes (14)
  • i18n/locales/bn-IN.json
  • i18n/locales/cs-CZ.json
  • i18n/locales/en.json
  • i18n/locales/de.json
  • i18n/locales/it-IT.json
  • i18n/locales/tr-TR.json
  • i18n/locales/es.json
  • app/components/Package/Header.vue
  • i18n/locales/fr-FR.json
  • i18n/locales/nb-NO.json
  • i18n/locales/ru-RU.json
  • i18n/locales/nl.json
  • i18n/schema.json
  • i18n/locales/ja-JP.json

Comment thread app/components/AppHeader.vue Outdated
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

needs discussion An idea that needs more discussion to understand the scope and impact.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants