feat(ui): move fund to the package header by MatteoGabriele · Pull Request #2170 · npmx-dev/npmx.dev

MatteoGabriele · 2026-03-20T13:43:57Z

🔗 Linked issue

resolves#1835

🧭 Context

The fund button is too small in a busy section and might not attract enough attention.

📚 Description

The fund link has been relocated to the header, which now has plenty of space to make this important button stand out. To differentiate it from the like button, represented by a heart, I chose a handshake icon. However, this can be changed if needed. I also like the heart-handshake icon, but using two heart-based icons side by side isn't ideal.
I've also added the accent color to the icon to make it stand out more without being too loud.

before

after

vercel · 2026-03-20T13:44:03Z

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 21, 2026 3:20pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 21, 2026 3:20pm
npmx-lunaria	Ignored		Mar 21, 2026 3:20pm

codecov · 2026-03-20T13:46:41Z

Codecov Report

❌ Patch coverage is 50.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/Package/Header.vue	50.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

coderabbitai · 2026-03-20T13:47:37Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 7ddc296e-e498-4967-9384-1a723806026a

📥 Commits

Reviewing files that changed from the base of the PR and between b4129e4 and bf65139.

📒 Files selected for processing (1)

app/components/Package/Skeleton.vue

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

app/components/Package/Skeleton.vue

📝 Walkthrough

Walkthrough

Funding link handling was moved out of app/components/Package/ExternalLinks.vue and into app/components/Package/Header.vue. ExternalLinks.vue no longer computes or renders a fund link. Header.vue now defines a fundingUrl computed (normalising array/structured funding entries) and conditionally renders a secondary LinkBase fund button when present. The package header skeleton (app/components/Package/Skeleton.vue) was updated to add a placeholder block for the fund link.

Possibly related PRs

refactor(ui): move package external links to component #2077: Adds fundingUrl computation and fund link rendering in ExternalLinks.vue — directly conflicts/overlaps with this PR’s removal and relocation of funding logic.
refactor: move package-header to new component #2030: Modifies Header.vue — may overlap with the new fundingUrl computed and button insertion.
fix: improve package page skeleton loading state #1115: Adjusts Package/Skeleton.vue header placeholders — related to the added fund placeholder in the skeleton.

Suggested labels

idea

Suggested reviewers

alexdln
danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly describes moving the fund link to the package header with visual context showing before/after screenshots.
Linked Issues check	✅ Passed	The changes successfully address issue `#1835` by relocating the fund link to the package header with improved visibility and accent colour styling.
Out of Scope Changes check	✅ Passed	All changes are directly related to relocating and enhancing the fund button visibility as specified in issue `#1835`; skeleton updates align with the feature scope.

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

✨ 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 and usage tips.}

coderabbitai

Actionable comments posted: 1

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c5faf4a8-d247-4d52-8558-19c4bb2493aa

📥 Commits

Reviewing files that changed from the base of the PR and between 4ad0679 and 0785e85.

📒 Files selected for processing (2)

app/components/Package/ExternalLinks.vue
app/components/Package/Header.vue

💤 Files with no reviewable changes (1)

app/components/Package/ExternalLinks.vue

nicolo-ribaudo · 2026-03-20T14:07:16Z

🤑💰💸 fund

ShroXd · 2026-03-21T09:50:42Z

Nice work! I noticed the skeleton has placeholders for those buttons — maybe we could also update the skeleton for the fund button?

MatteoGabriele · 2026-03-21T10:01:54Z

Nice work! I noticed the skeleton has placeholders for those buttons — maybe we could also update the skeleton for the fund button?

Oh good catch! I'll make sure to update those too!

MatteoGabriele · 2026-03-21T10:40:31Z

@ShroXd
I've updated the skeleton to match the new button. Also, since I was there, while toggling the skeleton, I noticed that the sidebar had an older design with position sticky and a scrollbar, which doesn't match the current design, causing the UI to jump when switching between states.

ShroXd · 2026-03-21T10:59:02Z

@ShroXd I've updated the skeleton to match the new button. Also, since I was there, while toggling the skeleton, I noticed that the sidebar had an older design with position sticky and a scrollbar, which doesn't match the current design, causing the UI to jump when switching between states.

Maybe we could create another PR to fix the sidebar skeleton issue 🤔

MatteoGabriele · 2026-03-21T11:01:27Z

@ShroXd You know what? Yes, I agree. Scope creep is scope creep.

ShroXd · 2026-03-21T11:25:09Z

@ShroXd You know what? Yes, I agree. Scope creep is scope creep.

New phrase unlocked. 😆

serhalp

I like it!

feat(ui): move fund to the package header
0785e85

vercelBotdeployed to Preview – npmx.dev March 20, 2026 13:46 View deployment

coderabbitaiBot reviewed Mar 20, 2026
View reviewed changes

Comment threadapp/components/Package/Header.vue

ghostdevv added the needs review This PR is waiting for a review from a maintainer label Mar 20, 2026

feat: adds fund button skeleton
e08716f

vercelBotdeployed to Preview – npmx.dev March 21, 2026 10:39 View deployment

refactor: only focus on header button skeleton
b4129e4

vercelBotdeployed to Preview – npmx.dev March 21, 2026 11:04 View deployment

MatteoGabriele mentioned this pull request Mar 21, 2026
fix(ui): skeleton design not aligned between states #2177
Merged

serhalp approved these changes Mar 21, 2026
View reviewed changes

Merge branch 'main' into feat/make-fund-more-visible
6de6988

vercelBotdeployed to Preview – docs.npmx.dev March 21, 2026 15:12 View deployment

vercelBotdeployed to Preview – npmx.dev March 21, 2026 15:13 View deployment

fix: merge conflict
bf65139

vercelBotdeployed to Preview – npmx.dev March 21, 2026 15:20 View deployment

MatteoGabriele added this pull request to the merge queue Mar 21, 2026

github-merge-queueBot removed this pull request from the merge queue due to failed status checks Mar 21, 2026

MatteoGabriele added this pull request to the merge queue Mar 21, 2026

Merged via the queue into npmx-dev:main with commit 7c1cea8Mar 21, 2026
19 checks passed

MatteoGabriele deleted the feat/make-fund-more-visible branch March 21, 2026 15:30

github-actionsBot mentioned this pull request Mar 21, 2026
chore: release v0.5.0 #2096
Merged

serhalp removed the needs review This PR is waiting for a review from a maintainer label Apr 12, 2026

Uh oh!

Uh oh!

Conversation

MatteoGabriele commented Mar 20, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔗 Linked issue

🧭 Context

📚 Description

Uh oh!

vercelBot commented Mar 20, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecovBot commented Mar 20, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitaiBot commented Mar 20, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Possibly related PRs

Suggested labels

Suggested reviewers

Uh oh!

coderabbitaiBot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nicolo-ribaudo commented Mar 20, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ShroXd commented Mar 21, 2026

Uh oh!

MatteoGabriele commented Mar 21, 2026

Uh oh!

MatteoGabriele commented Mar 21, 2026

Uh oh!

ShroXd commented Mar 21, 2026

Uh oh!

MatteoGabriele commented Mar 21, 2026

Uh oh!

ShroXd commented Mar 21, 2026

Uh oh!

serhalp left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

MatteoGabriele commented Mar 20, 2026•
edited
Loading

vercelBot commented Mar 20, 2026•
edited
Loading

codecovBot commented Mar 20, 2026•
edited
Loading

coderabbitaiBot commented Mar 20, 2026•
edited
Loading

nicolo-ribaudo commented Mar 20, 2026•
edited
Loading