fix: adapt keyboad shortcuts and chartFilter

Author: gusa4grr

app/components/Package/TrendsChart.vue

@@ -59,7 +59,7 @@ const props = withDefaults(
 
 const { locale } = useI18n()
 const { accentColors, selectedAccentColor } = useAccentColor()
-const { settings } = useSettings()
+const { localSettings } = useUserLocalSettings()
 const { copy, copied } = useClipboard()
 
 const colorMode = useColorMode()
@@ -977,7 +977,7 @@ const effectiveDataSingle = computed<EvolutionData>(() => {
 
   if (isDownloadsMetric.value && data.length) {
     const pkg = effectivePackageNames.value[0] ?? props.packageName ?? ''
-    if (settings.value.chartFilter.anomaliesFixed) {
+    if (localSettings.value.chartFilter.anomaliesFixed) {
       data = applyBlocklistCorrection({
         data,
         packageName: pkg,
@@ -1025,7 +1025,7 @@ const chartData = computed<{
   for (const pkg of names) {
     let data = state.evolutionsByPackage[pkg] ?? []
     if (isDownloadsMetric.value && data.length) {
-      if (settings.value.chartFilter.anomaliesFixed) {
+      if (localSettings.value.chartFilter.anomaliesFixed) {
         data = applyBlocklistCorrection({ data, packageName: pkg, granularity })
       }
     }
@@ -1079,9 +1079,10 @@ const normalisedDataset = computed(() => {
     const series = applyDataPipeline(
       d.series.map(v => v ?? 0),
       {
-        averageWindow: settings.value.chartFilter.averageWindow,
-        smoothingTau: settings.value.chartFilter.smoothingTau,
-        predictionPoints: settings.value.chartFilter.predictionPoints ?? DEFAULT_PREDICTION_POINTS,
+        averageWindow: localSettings.value.chartFilter.averageWindow,
+        smoothingTau: localSettings.value.chartFilter.smoothingTau,
+        predictionPoints:
+          localSettings.value.chartFilter.predictionPoints ?? DEFAULT_PREDICTION_POINTS,
       },
       { granularity, lastDateMs, referenceMs, isAbsoluteMetric },
     )
@@ -1678,10 +1679,10 @@ watch(selectedMetric, value => {
           <label class="flex flex-col gap-1 flex-1">
             <span class="text-2xs font-mono text-fg-subtle tracking-wide uppercase">
               {{ $t('package.trends.average_window') }}
-              <span class="text-fg-muted">({{ settings.chartFilter.averageWindow }})</span>
+              <span class="text-fg-muted">({{ localSettings.chartFilter.averageWindow }})</span>
             </span>
             <input
-              v-model.number="settings.chartFilter.averageWindow"
+              v-model.number="localSettings.chartFilter.averageWindow"
               type="range"
               min="0"
               max="20"
@@ -1692,10 +1693,10 @@ watch(selectedMetric, value => {
           <label class="flex flex-col gap-1 flex-1">
             <span class="text-2xs font-mono text-fg-subtle tracking-wide uppercase">
               {{ $t('package.trends.smoothing') }}
-              <span class="text-fg-muted">({{ settings.chartFilter.smoothingTau }})</span>
+              <span class="text-fg-muted">({{ localSettings.chartFilter.smoothingTau }})</span>
             </span>
             <input
-              v-model.number="settings.chartFilter.smoothingTau"
+              v-model.number="localSettings.chartFilter.smoothingTau"
               type="range"
               min="0"
               max="20"
@@ -1706,10 +1707,10 @@ watch(selectedMetric, value => {
           <label class="flex flex-col gap-1 flex-1">
             <span class="text-2xs font-mono text-fg-subtle tracking-wide uppercase">
               {{ $t('package.trends.prediction') }}
-              <span class="text-fg-muted">({{ settings.chartFilter.predictionPoints }})</span>
+              <span class="text-fg-muted">({{ localSettings.chartFilter.predictionPoints }})</span>
             </span>
             <input
-              v-model.number="settings.chartFilter.predictionPoints"
+              v-model.number="localSettings.chartFilter.predictionPoints"
               type="range"
               min="0"
               max="30"
@@ -1774,9 +1775,11 @@ watch(selectedMetric, value => {
               :class="{ 'opacity-50 pointer-events-none': !hasAnomalies }"
             >
               <input
-                :checked="settings.chartFilter.anomaliesFixed && hasAnomalies"
+                :checked="localSettings.chartFilter.anomaliesFixed && hasAnomalies"
                 @change="
-                  settings.chartFilter.anomaliesFixed = ($event.target as HTMLInputElement).checked
+                  localSettings.chartFilter.anomaliesFixed = (
+                    $event.target as HTMLInputElement
+                  ).checked
                 "
                 type="checkbox"
                 :disabled="!hasAnomalies"

app/components/Package/WeeklyDownloadStats.vue

@@ -185,14 +185,14 @@ watch(
 const correctedDownloads = computed<WeeklyDataPoint[]>(() => {
   let data = weeklyDownloads.value as WeeklyDataPoint[]
   if (!data.length) return data
-  if (settings.value.chartFilter.anomaliesFixed) {
+  if (localSettings.value.chartFilter.anomaliesFixed) {
     data = applyBlocklistCorrection({
       data,
       packageName: props.packageName,
       granularity: 'weekly',
     }) as WeeklyDataPoint[]
   }
-  data = applyDataCorrection(data, settings.value.chartFilter) as WeeklyDataPoint[]
+  data = applyDataCorrection(data, localSettings.value.chartFilter) as WeeklyDataPoint[]
   return data
 })
 

app/composables/useUserLocalSettings.ts

@@ -6,6 +6,12 @@ export interface UserLocalSettings {
   connector: {
     autoOpenURL: boolean
   }
+  chartFilter: {
+    averageWindow: number
+    smoothingTau: number
+    anomaliesFixed: boolean
+    predictionPoints: number
+  }
 }
 
 const STORAGE_KEY = 'npmx-settings'
@@ -17,6 +23,12 @@ const DEFAULT_USER_LOCAL_SETTINGS: UserLocalSettings = {
   connector: {
     autoOpenURL: false,
   },
+  chartFilter: {
+    averageWindow: 0,
+    smoothingTau: 1,
+    anomaliesFixed: true,
+    predictionPoints: 4,
+  },
 }
 
 let localSettingsRef: Ref<UserLocalSettings> | null = null

app/composables/userPreferences/useKeyboardShortcuts.ts

@@ -0,0 +1,20 @@
+export const useKeyboardShortcuts = createSharedComposable(function useKeyboardShortcuts() {
+  const { preferences } = useUserPreferencesState()
+  const enabled = computed(() => preferences.value.keyboardShortcuts ?? true)
+
+  if (import.meta.client) {
+    watch(
+      enabled,
+      value => {
+        if (value) {
+          delete document.documentElement.dataset.kbdShortcuts
+        } else {
+          document.documentElement.dataset.kbdShortcuts = 'false'
+        }
+      },
+      { immediate: true },
+    )
+  }
+
+  return enabled
+})

app/pages/settings.vue

@@ -333,7 +333,7 @@ const setLocale: typeof setNuxti18nLocale = locale => {
             <SettingsToggle
               :label="$t('settings.keyboard_shortcuts_enabled')"
               :description="$t('settings.keyboard_shortcuts_enabled_description')"
-              v-model="settings.keyboardShortcuts"
+              v-model="keyboardShortcutsEnabled"
             />
           </div>
         </section>

shared/schemas/userPreferences.ts

@@ -26,6 +26,8 @@ export const UserPreferencesSchema = object({
   colorModePreference: optional(nullable(ColorModePreferenceSchema)),
   /** Search provider for package search: 'npm' or 'algolia' */
   searchProvider: optional(SearchProviderSchema),
+  /** Whether keyboard shortcuts are enabled globally */
+  keyboardShortcuts: optional(boolean()),
   /** Timestamp of last update (ISO 8601) - managed by server */
   updatedAt: optional(string()),
 })
@@ -49,7 +51,8 @@ export const DEFAULT_USER_PREFERENCES: Required<Omit<UserPreferences, 'updatedAt
   hidePlatformPackages: true,
   selectedLocale: null,
   colorModePreference: null,
-  searchProvider: 'algolia',
+  searchProvider: import.meta.test ? 'npm' : 'algolia',
+  keyboardShortcuts: true,
 }
 
 export const USER_PREFERENCES_STORAGE_BASE = 'npmx-kv-user-preferences'

test/e2e/interactions.spec.ts

@@ -271,7 +271,7 @@ test.describe('Keyboard Shortcuts', () => {
 test.describe('Keyboard Shortcuts disabled', () => {
   test.beforeEach(async ({ page }) => {
     await page.addInitScript(() => {
-      localStorage.setItem('npmx-settings', JSON.stringify({ keyboardShortcuts: false }))
+      localStorage.setItem('npmx-user-preferences', JSON.stringify({ keyboardShortcuts: false }))
     })
   })
 

test/nuxt/composables/use-keyboard-shortcuts.spec.ts

@@ -0,0 +1,56 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { nextTick } from 'vue'
+import { DEFAULT_USER_PREFERENCES } from '#shared/schemas/userPreferences'
+
+describe('useKeyboardShortcuts', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    // Reset preferences to defaults
+    const { preferences } = useUserPreferencesState()
+    preferences.value = { ...DEFAULT_USER_PREFERENCES }
+  })
+
+  afterEach(() => {
+    delete document.documentElement.dataset.kbdShortcuts
+  })
+
+  it('should return true by default', () => {
+    const enabled = useKeyboardShortcuts()
+    expect(enabled.value).toBe(true)
+  })
+
+  it('should return false when preference is disabled', () => {
+    const { preferences } = useUserPreferencesState()
+    preferences.value = { ...preferences.value, keyboardShortcuts: false }
+
+    const enabled = useKeyboardShortcuts()
+    expect(enabled.value).toBe(false)
+  })
+
+  it('should reactively update when preferences change', () => {
+    const enabled = useKeyboardShortcuts()
+    const { preferences } = useUserPreferencesState()
+
+    expect(enabled.value).toBe(true)
+
+    preferences.value = { ...preferences.value, keyboardShortcuts: false }
+    expect(enabled.value).toBe(false)
+
+    preferences.value = { ...preferences.value, keyboardShortcuts: true }
+    expect(enabled.value).toBe(true)
+  })
+
+  it('should set data-kbd-shortcuts attribute when disabled', async () => {
+    const { preferences } = useUserPreferencesState()
+
+    useKeyboardShortcuts()
+
+    preferences.value = { ...preferences.value, keyboardShortcuts: false }
+    await nextTick()
+    expect(document.documentElement.dataset.kbdShortcuts).toBe('false')
+
+    preferences.value = { ...preferences.value, keyboardShortcuts: true }
+    await nextTick()
+    expect(document.documentElement.dataset.kbdShortcuts).toBeUndefined()
+  })
+})