feat: add migration from old settings to new user-preferences in LS

- Clean migrated keys from legacy storage after migration
- Guard migration with `npmx-prefs-migrated` flag to run only once
- Update hydration tests to use `npmx-user-preferences` storage key
- Add E2E tests for legacy settings migration

Author: gusa4grr

app/app.vue

@@ -47,8 +47,8 @@ if (import.meta.server) {
   setJsonLd(createWebSiteSchema())
 }
 
-const keyboardShortcuts = useKeyboardShortcuts()
-const instantSearch = useInstantSearch()
+const keyboardShortcuts = useKeyboardShortcutsPreference()
+const instantSearch = useInstantSearchPreference()
 
 onKeyDown(
   '/',

app/components/AppHeader.vue

@@ -4,7 +4,7 @@ import type { NavigationConfig, NavigationConfigWithGroups } from '~/types'
 import { isEditableElement } from '~/utils/input'
 import { NPMX_DOCS_SITE } from '#shared/utils/constants'
 
-const keyboardShortcuts = useKeyboardShortcuts()
+const keyboardShortcuts = useKeyboardShortcutsPreference()
 const discord = useDiscordLink()
 
 withDefaults(

app/components/Button/Base.vue

@@ -33,7 +33,7 @@ const props = withDefaults(
 
 const el = useTemplateRef('el')
 
-const keyboardShortcutsEnabled = useKeyboardShortcuts()
+const keyboardShortcutsEnabled = useKeyboardShortcutsPreference()
 
 defineExpose({
   focus: () => el.value?.focus(),

app/components/Compare/PackageSelector.vue

@@ -75,7 +75,7 @@ const resultIndexOffset = computed(() => (showNoDependencyOption.value ? 1 : 0))
 
 const numberFormatter = useNumberFormatter()
 
-const keyboardShortcuts = useKeyboardShortcuts()
+const keyboardShortcuts = useKeyboardShortcutsPreference()
 
 function addPackage(name: string) {
   if (packages.value.length >= maxPackages.value) return

app/components/DateTime.vue

@@ -31,7 +31,7 @@ const props = withDefaults(
 
 const { locale } = useI18n()
 
-const relativeDates = useRelativeDates()
+const relativeDates = useRelativeDatesPreference()
 
 const dateFormatter = new Intl.DateTimeFormat(locale.value, {
   month: 'short',

app/components/Input/Base.vue

@@ -30,7 +30,7 @@ const emit = defineEmits<{
 
 const el = useTemplateRef('el')
 
-const keyboardShortcutsEnabled = useKeyboardShortcuts()
+const keyboardShortcutsEnabled = useKeyboardShortcutsPreference()
 
 defineExpose({
   focus: () => el.value?.focus(),

app/components/InstantSearch.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const instantSearch = useInstantSearch()
+const instantSearch = useInstantSearchPreference()
 
 onPrehydrate(el => {
   let userPreferences: Record<string, unknown> = {}

app/components/Link/Base.vue

@@ -1,79 +1,79 @@
 <script setup lang="ts">
-import type { NuxtLinkProps } from '#app'
-import type { IconClass } from '~/types'
+import type { NuxtLinkProps } from "#app";
+import type { IconClass } from "~/types";
 
 const props = withDefaults(
   defineProps<{
     /** Disabled links will be displayed as plain text */
-    disabled?: boolean
+    disabled?: boolean;
     /**
      * `type` should never be used, because this will always be a link.
      * */
-    type?: never
+    type?: never;
     /** Visual style of the link */
-    variant?: 'button-primary' | 'button-secondary' | 'link'
+    variant?: "button-primary" | "button-secondary" | "link";
     /** Size (only applicable for button variants) */
-    size?: 'sm' | 'md'
+    size?: "sm" | "md";
     /** Makes the link take full width */
-    block?: boolean
+    block?: boolean;
 
     /** Keyboard shortcut hint */
-    ariaKeyshortcuts?: string
+    ariaKeyshortcuts?: string;
 
     /**
      * Don't use this directly. This will automatically be set to `_blank` for external links passed via `to`.
      */
-    target?: never
+    target?: never;
 
     /**
      * Don't use this directly. This will automatically be set for external links passed via `to`.
      */
-    rel?: never
+    rel?: never;
 
     /** Icon class to display */
-    classicon?: IconClass
+    classicon?: IconClass;
 
     /** Link destination (internal or external URL) */
-    to?: NuxtLinkProps['to']
+    to?: NuxtLinkProps["to"];
 
     /** always use `to` instead of `href` */
-    href?: never
+    href?: never;
 
     /** should only be used for links where the context makes it very clear they are clickable. Don't just use this, because you don't like underlines. */
-    noUnderline?: boolean
+    noUnderline?: boolean;
 
     /**
      * Hide external link icon (deprecated)
      * @deprecated @todo remove this property and add separate clean component without this logic
      */
-    noNewTabIcon?: boolean
+    noNewTabIcon?: boolean;
   }>(),
-  { variant: 'link', size: 'md' },
-)
+  { variant: "link", size: "md" },
+);
 
 const isLinkExternal = computed(
   () =>
     !!props.to &&
-    typeof props.to === 'string' &&
-    (props.to.startsWith('http:') || props.to.startsWith('https:') || props.to.startsWith('//')),
-)
+    typeof props.to === "string" &&
+    (props.to.startsWith("http:") || props.to.startsWith("https:") || props.to.startsWith("//")),
+);
 const isLinkAnchor = computed(
-  () => !!props.to && typeof props.to === 'string' && props.to.startsWith('#'),
-)
+  () => !!props.to && typeof props.to === "string" && props.to.startsWith("#"),
+);
 
 /** size is only applicable for button like links */
-const isLink = computed(() => props.variant === 'link')
-const isButton = computed(() => !isLink.value)
-const isButtonSmall = computed(() => props.size === 'sm' && !isLink.value)
-const isButtonMedium = computed(() => props.size === 'md' && !isLink.value)
-const keyboardShortcutsEnabled = useKeyboardShortcuts()
+const isLink = computed(() => props.variant === "link");
+const isButton = computed(() => !isLink.value);
+const isButtonSmall = computed(() => props.size === "sm" && !isLink.value);
+const isButtonMedium = computed(() => props.size === "md" && !isLink.value);
+const keyboardShortcutsEnabled = useKeyboardShortcutsPreference();
 </script>
 
 <template>
   <span
     v-if="disabled"
     :class="{
-      'flex': block,
+      flex: block,
       'inline-flex': !block,
       'opacity-50 gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
         isButton,
@@ -89,7 +89,7 @@ const keyboardShortcutsEnabled = useKeyboardShortcuts()
     v-else
     class="group/link gap-x-1 items-center"
     :class="{
-      'flex': block,
+      flex: block,
       'inline-flex': !block,
       'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
         !isLinkAnchor && isLink && !noUnderline,

app/components/Package/WeeklyDownloadStats.vue

@@ -209,7 +209,7 @@ const dataset = computed<VueUiSparklineDatasetItem[]>(() =>
 const lastDatapoint = computed(() => dataset.value.at(-1)?.period ?? '')
 
 const showPulse = shallowRef(true)
-const keyboardShortcuts = useKeyboardShortcuts()
+const keyboardShortcuts = useKeyboardShortcutsPreference()
 
 const cheatCode = [
   'arrowup',

app/composables/useGlobalSearch.ts

@@ -7,7 +7,7 @@ const pagesWithLocalFilter = new Set(["~username", "org"]);
 const SEARCH_DEBOUNCE_MS = 100;
 
 export function useGlobalSearch(place: "header" | "content" = "content") {
-  const instantSearch = useInstantSearch();
+  const instantSearch = useInstantSearchPreference();
   const { searchProvider } = useSearchProvider();
   const searchProviderValue = computed(() => {
     const p = normalizeSearchParam(route.query.p);