feat: add animation toggle for sparkline chart

[graphieros]

Resolves #1539

This adds a toggle button under the sparkline chart to play/pause the pulse animation.
The button is not displayed when prefers-reduced-motion is enabled, since the chart does not animate in this case.
The state of the animation state is saved in the application settings.

Animation enabled	Animation disabled

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 22, 2026 4:44pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 22, 2026 4:44pm
npmx-lunaria	Ignored		Feb 22, 2026 4:44pm

[github-actions]

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
lunaria/files/en-GB.json	Localization changed, will be marked as complete.
lunaria/files/en-US.json	Source changed, localizations will be marked as outdated.
lunaria/files/fr-FR.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.

[codecov]

Codecov Report

❌ Patch coverage is 71.42857% with 2 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Package/WeeklyDownloadStats.vue	71.42%	2 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

---

📝 Walkthrough

Walkthrough

Adds a user-controllable pause/play for the weekly downloads sparkline: introduces animateSparkline on AppSettings.sidebar (default true), exposes hasSparklineAnimation (computed) and toggleSparklineAnimation() in WeeklyDownloadStats.vue, drives config.line.pulse.show from that setting, and renders a ButtonBase control wired to the toggle. Adds translation keys (play_animation, pause_animation) in English (en-GB/en-US), French (fr-FR) and updates i18n schema to include the new keys.

Possibly related PRs

• feat: add trail effect on sparkline pulse #991 — Modifies sparkline pulse configuration in WeeklyDownloadStats.vue; changes target the same sparkline/pulse properties.

Suggested reviewers

• shuuji3
• danielroe
• garthdw

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description accurately describes the changes: adding a toggle button for sparkline animation control, respecting prefers-reduced-motion, and saving state in application settings.
Linked Issues check	✅ Passed	The pull request successfully implements the required WCAG 2.2.2 pause mechanism for the weekly downloads animation. A toggle button is added to pause/play the animation, controlled via application settings, with proper i18n support.
Out of Scope Changes check	✅ Passed	All changes are directly related to the linked issue requirements. The modifications include the animation toggle component, settings configuration, internationalization strings, and schema updates—all necessary for implementing the pause/stop control feature.

_{✏️ 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

---

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

🧹 Nitpick comments (1)

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

316-320: Redundant aria-label — visible text already provides the accessible name.

When a button contains visible text, the accessible name is computed from that text. Setting an identical aria-label overrides it unnecessarily and creates a maintenance burden (the two strings must be kept in sync). Remove aria-label and rely on the visible label alone, which already satisfies WCAG 2.4.6.

♻️ Proposed refactor

         <ButtonBase
           size="small"
-          :aria-label="
-            hasSparklineAnimation
-              ? $t('package.trends.pause_animation')
-              : $t('package.trends.play_animation')
-          "
           `@click`="toggleSparklineAnimation"
         >

[knowler]

Awesome—LGTM!

[RYGRIT]

@graphieros I found a small problem: when activated with the Tab key, some content is not fully displayed.

[graphieros]

@RYGRIT thanks for spotting this :)
Fixed in #1589