fix: adapt keyboad shortcuts and chartFilter

Author: gusa4grr

app/components/Package/TrendsChart.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/components/Package/WeeklyDownloadStats.vue

@@ -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/useUserLocalSettings.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/composables/userPreferences/useKeyboardShortcuts.ts

@@ -3,7 +3,7 @@ const router = useRouter();
 const { preferences } = useUserPreferencesState();
 const { isAuthenticated, isSyncing, isSynced, hasError } = useUserPreferencesSyncStatus();
 const { colorModePreference, setColorMode } = useColorModePreference();
-const { locales, setLocale: setNuxti18nLocale } = useI18n();
+const { locale: currentLocale, locales, setLocale: setNuxti18nLocale } = useI18n();
 const { currentLocaleStatus, isSourceLocale } = useI18nStatus();
 const keyboardShortcutsEnabled = useKeyboardShortcuts();
 
@@ -343,7 +343,7 @@ const setLocale: typeof setNuxti18nLocale = (newLocale) => {
             <SettingsToggle
               :label="$t('settings.keyboard_shortcuts_enabled')"
               :description="$t('settings.keyboard_shortcuts_enabled_description')"
-              v-model="preferences.keyboardShortcuts"
+              v-model="keyboardShortcutsEnabled"
             />
           </div>
         </section>

app/pages/settings.vue

@@ -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'

shared/schemas/userPreferences.ts

@@ -313,7 +313,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/e2e/interactions.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()
+  })
+})