diff --git a/app/components/Package/WeeklyDownloadStats.vue b/app/components/Package/WeeklyDownloadStats.vue index c0a0957e34..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(false) const showPulse = shallowRef(true) const keyboardShortcuts = useKeyboardShortcuts() @@ -307,7 +306,7 @@ function layEgg() { showPulse.value = false nextTick(() => { showPulse.value = true - isLoop.value = !isLoop.value + settings.value.enableGraphPulseLooping = !settings.value.enableGraphPulseLooping playEggPulse() }) } @@ -356,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', 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..44d081eb6b 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 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", 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" },