From 3319dfcdc17641a5e76f51a53f681b13a09ac130 Mon Sep 17 00:00:00 2001 From: Felix Schneider <99918022+trueberryless@users.noreply.github.com> Date: Tue, 17 Mar 2026 15:35:11 +0100 Subject: [PATCH 1/6] feat: opt-in repeated pulse animation on download graph --- app/components/Package/WeeklyDownloadStats.vue | 2 +- app/composables/useSettings.ts | 3 +++ app/pages/settings.vue | 10 ++++++++++ i18n/locales/en.json | 2 ++ i18n/schema.json | 6 ++++++ 5 files changed, 22 insertions(+), 1 deletion(-) diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue index c0a0957e34..cda8f3b6b3 100644 --- a/app/components/Package/WeeklyDownloadStats.vue +++ b/app/components/Package/WeeklyDownloadStats.vue @@ -208,7 +208,7 @@ const dataset = computed(() => const lastDatapoint = computed(() => dataset.value.at(-1)?.period ?? '') -const isLoop = shallowRef(false) +const isLoop = shallowRef(settings.value.enableGraphPulseLooping) const showPulse = shallowRef(true) const keyboardShortcuts = useKeyboardShortcuts() diff --git a/app/composables/useSettings.ts b/app/composables/useSettings.ts index 46ebe96711..112bbe4a31 100644 --- a/app/composables/useSettings.ts +++ b/app/composables/useSettings.ts @@ -23,6 +23,8 @@ export interface AppSettings { preferredBackgroundTheme: BackgroundThemeId | null /** Hide platform-specific packages (e.g., @scope/pkg-linux-x64) from search results */ hidePlatformPackages: boolean + /** Enable weekly download graph pulse looping animation */ + enableGraphPulseLooping: boolean /** User-selected locale */ selectedLocale: LocaleObject['code'] | null /** Search provider for package search */ @@ -52,6 +54,7 @@ const DEFAULT_SETTINGS: AppSettings = { includeTypesInInstall: true, accentColorId: null, hidePlatformPackages: true, + enableGraphPulseLooping: false, selectedLocale: null, preferredBackgroundTheme: null, searchProvider: import.meta.test ? 'npm' : 'algolia', diff --git a/app/pages/settings.vue b/app/pages/settings.vue index f2fe9db5e0..de181262fb 100644 --- a/app/pages/settings.vue +++ b/app/pages/settings.vue @@ -142,6 +142,16 @@ const setLocale: typeof setNuxti18nLocale = newLocale => { :description="$t('settings.hide_platform_packages_description')" v-model="settings.hidePlatformPackages" /> + + +
+ + +
diff --git a/i18n/locales/en.json b/i18n/locales/en.json index bf6c3e39c8..2f1bc3601d 100644 --- a/i18n/locales/en.json +++ b/i18n/locales/en.json @@ -138,6 +138,8 @@ "include_types_description": "Add {'@'}types package to install commands for untyped packages", "hide_platform_packages": "Hide platform-specific packages in search", "hide_platform_packages_description": "Hide native binary packages like {'@'}esbuild/linux-x64 from results", + "enable_graph_pulse_loop": "Enable looping of pulse effect on mini graph", + "enable_graph_pulse_loop_description": "Activate the reapeated animation of the pulse effect on the weekly download graph", "theme": "Theme", "theme_light": "Light", "theme_dark": "Dark", diff --git a/i18n/schema.json b/i18n/schema.json index 04ca60bce3..e2a14dad7a 100644 --- a/i18n/schema.json +++ b/i18n/schema.json @@ -418,6 +418,12 @@ "hide_platform_packages_description": { "type": "string" }, + "enable_graph_pulse_loop": { + "type": "string" + }, + "enable_graph_pulse_loop_description": { + "type": "string" + }, "theme": { "type": "string" }, From d1a8470e9dbc7aa9dcc53e9a96fa47f309fe04b9 Mon Sep 17 00:00:00 2001 From: Felix Schneider <99918022+trueberryless@users.noreply.github.com> Date: Tue, 17 Mar 2026 15:48:33 +0100 Subject: [PATCH 2/6] Update i18n/locales/en.json Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --- i18n/locales/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/locales/en.json b/i18n/locales/en.json index 2f1bc3601d..31e86fe67e 100644 --- a/i18n/locales/en.json +++ b/i18n/locales/en.json @@ -139,7 +139,7 @@ "hide_platform_packages": "Hide platform-specific packages in search", "hide_platform_packages_description": "Hide native binary packages like {'@'}esbuild/linux-x64 from results", "enable_graph_pulse_loop": "Enable looping of pulse effect on mini graph", - "enable_graph_pulse_loop_description": "Activate the reapeated animation of the pulse effect on the weekly download graph", + "enable_graph_pulse_loop_description": "Activate the repeated animation of the pulse effect on the weekly download graph", "theme": "Theme", "theme_light": "Light", "theme_dark": "Dark", From bac70320e6500f94a36b8587f99856cac8f5a85e Mon Sep 17 00:00:00 2001 From: Felix Schneider <99918022+trueberryless@users.noreply.github.com> Date: Tue, 17 Mar 2026 16:50:43 +0100 Subject: [PATCH 3/6] feat: save easter egg state in global setting for sync --- app/components/Package/WeeklyDownloadStats.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue index cda8f3b6b3..552219efe3 100644 --- a/app/components/Package/WeeklyDownloadStats.vue +++ b/app/components/Package/WeeklyDownloadStats.vue @@ -308,6 +308,7 @@ function layEgg() { nextTick(() => { showPulse.value = true isLoop.value = !isLoop.value + settings.value.enableGraphPulseLooping = isLoop.value playEggPulse() }) } From 1767ff3f4a5d0fd727dd56d621adfeaee0112e79 Mon Sep 17 00:00:00 2001 From: Felix Schneider <99918022+trueberryless@users.noreply.github.com> Date: Tue, 17 Mar 2026 17:51:52 +0100 Subject: [PATCH 4/6] refactor: remove unnecessary var isLoop --- app/components/Package/WeeklyDownloadStats.vue | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue index 552219efe3..416c94560a 100644 --- a/app/components/Package/WeeklyDownloadStats.vue +++ b/app/components/Package/WeeklyDownloadStats.vue @@ -208,7 +208,6 @@ const dataset = computed(() => const lastDatapoint = computed(() => dataset.value.at(-1)?.period ?? '') -const isLoop = shallowRef(settings.value.enableGraphPulseLooping) const showPulse = shallowRef(true) const keyboardShortcuts = useKeyboardShortcuts() @@ -307,8 +306,7 @@ function layEgg() { showPulse.value = false nextTick(() => { showPulse.value = true - isLoop.value = !isLoop.value - settings.value.enableGraphPulseLooping = isLoop.value + settings.value.enableGraphPulseLooping = !settings.value.enableGraphPulseLooping playEggPulse() }) } @@ -357,7 +355,7 @@ const config = computed(() => { color: colors.value.borderHover, pulse: { show: showPulse.value, // the pulse will not show if prefers-reduced-motion (enforced by vue-data-ui) - loop: isLoop.value, + loop: settings.value.enableGraphPulseLooping, radius: 1.5, color: pulseColor.value!, easing: 'ease-in-out', From bd5d9b00fa6a46ef57f38bd01582e1a9a1c59af0 Mon Sep 17 00:00:00 2001 From: Felix Schneider <99918022+trueberryless@users.noreply.github.com> Date: Tue, 17 Mar 2026 18:56:56 +0100 Subject: [PATCH 5/6] feat: add distraction notice in description --- i18n/locales/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/locales/en.json b/i18n/locales/en.json index 31e86fe67e..3ba767d141 100644 --- a/i18n/locales/en.json +++ b/i18n/locales/en.json @@ -139,7 +139,7 @@ "hide_platform_packages": "Hide platform-specific packages in search", "hide_platform_packages_description": "Hide native binary packages like {'@'}esbuild/linux-x64 from results", "enable_graph_pulse_loop": "Enable looping of pulse effect on mini graph", - "enable_graph_pulse_loop_description": "Activate the repeated animation of the pulse effect on the weekly download graph", + "enable_graph_pulse_loop_description": "Activate the repeated animation of the pulse effect on the weekly download graph. This can be distracting for some users.", "theme": "Theme", "theme_light": "Light", "theme_dark": "Dark", From a44daceabe1c7633f96bffa9986bbacfc6609277 Mon Sep 17 00:00:00 2001 From: Felix Schneider <99918022+trueberryless@users.noreply.github.com> Date: Tue, 17 Mar 2026 19:05:04 +0100 Subject: [PATCH 6/6] fix: suggestion Co-authored-by: Alec Lloyd Probert <55991794+graphieros@users.noreply.github.com> --- i18n/locales/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/i18n/locales/en.json b/i18n/locales/en.json index 3ba767d141..44d081eb6b 100644 --- a/i18n/locales/en.json +++ b/i18n/locales/en.json @@ -139,7 +139,7 @@ "hide_platform_packages": "Hide platform-specific packages in search", "hide_platform_packages_description": "Hide native binary packages like {'@'}esbuild/linux-x64 from results", "enable_graph_pulse_loop": "Enable looping of pulse effect on mini graph", - "enable_graph_pulse_loop_description": "Activate the repeated animation of the pulse effect on the weekly download graph. This can be distracting for some users.", + "enable_graph_pulse_loop_description": "Activate a continuous pulse animation on the weekly download graph. This animation may be distracting for some users.", "theme": "Theme", "theme_light": "Light", "theme_dark": "Dark",