feat: add effect to like button

[ShroXd]

🔗 Linked issue

n/a

🧭 Context

Add a cute animation to like button to make it interesting.

📚 Description

Screen.Recording.2026-03-15.at.13.23.10.mov

We also support prefers-reduced-motion for users who prefer less animation.

Screen.Recording.2026-03-15.at.16.31.10.mov

[vercel]

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

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

2 Skipped Deployments

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds client-side animation and optimistic UI to the package header like interaction. Introduces reduced-motion detection, animation keys (likeAnimKey, likeFloatKey), transient +1 float state (showLikeFloat) and timers, and heart animation styles that switch between "spring" and "unlike" sequences. The likeAction now triggers key-based icon re-rendering, optimistic count/float display with a timed hide, and the template/CSS are updated to include a likeWrapper, floating +1 indicator, and associated keyframe animations.

Possibly related PRs

• refactor: move package-header to new component #2030: Introduced the initial optimistic like functionality and likeAction placement in the same Package/Header.vue component that this change extends with animations and key-based rendering.

Suggested reviewers

• danielroe
• trueberryless
• ghostdevv

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining the addition of a cute animation to the like button with reduced-motion support.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

📝 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.}

[coderabbitai]

Actionable comments posted: 2

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 8ff1b775-7b84-4f15-84f0-69de56ea8405

📥 Commits

Reviewing files that changed from the base of the PR and between a170292 and 7965e70.

📒 Files selected for processing (1)

• app/components/Package/Header.vue

[codecov]

Codecov Report

❌ Patch coverage is 50.00000% with 11 lines 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%	6 Missing and 5 partials ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

♻️ Duplicate comments (1)

app/components/Package/Header.vue (1)

192-193: ⚠️ Potential issue | 🟡 Minor

Clear likeFloatTimer during unmount to avoid stale callback updates.

likeFloatTimer is created/reset correctly, but it is never cancelled on component teardown. A delayed callback can still run after navigation and mutate stale refs.

Proposed fix

 onBeforeUnmount(() => {
+  if (likeFloatTimer !== null) {
+    clearTimeout(likeFloatTimer)
+    likeFloatTimer = null
+  }
   packageHeaderHeight.value = 0
 })

Also applies to: 232-243

🧹 Nitpick comments (1)

app/components/Package/Header.vue (1)

219-276: Split likeAction into smaller helpers.

This handler now combines input guards, animation orchestration, optimistic state, and network reconciliation. Breaking it into focused helpers would improve readability and make edge-case testing easier.

As per coding guidelines, "Keep functions focused and manageable (generally under 50 lines)".

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f354cea2-52c0-4e29-8b7a-d9daca44b82a

📥 Commits

Reviewing files that changed from the base of the PR and between 7965e70 and 7b79149.

📒 Files selected for processing (1)

• app/components/Package/Header.vue