feat(ui): move fund to the package header

[MatteoGabriele]

🔗 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]

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]

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]

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

• X
• Mastodon
• Reddit
• LinkedIn

_{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]

🤑💰💸 fund

[ShroXd]

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

[MatteoGabriele]

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]

@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]

@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]

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

[ShroXd]

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

New phrase unlocked. 😆

[serhalp]

I like it!