feat: add animation 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 21, 2026 10:41pm

2 Skipped Deployments

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

[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: 64c75296-bc2d-4ab9-94a8-31f044affbc5

📥 Commits

Reviewing files that changed from the base of the PR and between 46bf412 and 7151a96.

📒 Files selected for processing (2)

• app/components/Package/Likes.vue
• test/nuxt/a11y.spec.ts

✅ Files skipped from review due to trivial changes (2)

• test/nuxt/a11y.spec.ts
• app/components/Package/Likes.vue

---

📝 Walkthrough

Walkthrough

Removes the local like implementation from app/components/Package/Header.vue and replaces it with a PackageLikes component invocation. Adds app/components/Package/Likes.vue: a Vue 3 script-setup component that fetches like state from /api/social/likes/{packageName}, gates actions behind auth, performs optimistic updates with revert-on-error, shows loading/pending state, and implements animated heart and “+1” float with reduced-motion support. Adds an accessibility test that mounts Likes.vue and asserts no axe violations.

Possibly related PRs

• refactor: move package-header to new component #2030: Touches the package header’s like handling and previously implemented optimistic-like UI in Header.vue, closely related to the extraction performed here.
• feat: load package like data add loading effect #982: Adjusts the package likes UI/logic and loading behaviour, affecting the same likes surface and fetch patterns used by the new Likes component.

Suggested reviewers

• danielroe
• graphieros
• trueberryless

🚥 Pre-merge checks | ✅ 1

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description accurately describes the changes: adding animation to the like button with accessibility support for reduced motion preferences.

_{✏️ 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: 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 51.92308% with 25 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Package/Likes.vue	51.92%	17 Missing and 8 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

[ghostdevv]

Love it! I moved the likes stuff to it's own component but didn't change any of the logic you added in 7965e70

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

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

47-52: Consider extracting the handle for type safety.

After the guard on line 48, user.value?.handle is known to be defined. However, passing it with optional chaining on line 82 may confuse TypeScript narrowing. Extracting to a local constant would improve clarity and ensure the correct type is passed.

✨ Proposed refactor

 const likeAction = async () => {
-  if (user.value?.handle == null) {
+  const handle = user.value?.handle
+  if (handle == null) {
     authModal.open()
     return
   }
   // ... later in the function ...
-  const result = await togglePackageLike(props.packageName, currentlyLiked, user.value?.handle)
+  const result = await togglePackageLike(props.packageName, currentlyLiked, handle)

Also applies to: 82-82

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 238df784-e850-4b09-b147-5cb8ef4475b0

📥 Commits

Reviewing files that changed from the base of the PR and between 7b79149 and 46bf412.

📒 Files selected for processing (3)

• app/components/Package/Header.vue
• app/components/Package/Likes.vue
• test/nuxt/a11y.spec.ts

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

• app/components/Package/Header.vue

[ShroXd]

Love it! I moved the likes stuff to it's own component but didn't change any of the logic you added in 7965e70

Thanks!!