fix: create shared cache for user preferences provier, enhance useAtproto mocking

Author: gusa4grr

app/app.vue

@@ -22,7 +22,7 @@ const localeMap = locales.value.reduce(
 )
 
 const darkMode = usePreferredDark()
-const colorMode = useColorMode()
+const { colorMode } = useColorModePreference()
 const colorScheme = computed(() => {
   return {
     system: darkMode ? 'dark light' : 'light dark',

app/components/Chart/SplitSparkline.vue

@@ -28,7 +28,7 @@ const props = defineProps<{
 }>()
 
 const { locale } = useI18n()
-const colorMode = useColorMode()
+const { colorMode } = useColorModePreference()
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
 const rootEl = shallowRef<HTMLElement | null>(null)
 const palette = getPalette('')

app/components/Compare/FacetBarChart.vue

@@ -24,7 +24,7 @@ const props = defineProps<{
   facetLoading?: boolean
 }>()
 
-const colorMode = useColorMode()
+const { colorMode } = useColorModePreference()
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
 const rootEl = shallowRef<HTMLElement | null>(null)
 const { width } = useElementSize(rootEl)

app/components/Package/Header.vue

@@ -120,7 +120,7 @@ const diffLink = computed((): RouteLocationRaw | null => {
   return diffRoute(props.pkg.name, props.resolvedVersion, props.latestVersion.version)
 })
 
-const keyboardShortcuts = useKeyboardShortcuts()
+const keyboardShortcuts = useKeyboardShortcutsPreference()
 
 onKeyStroke(
   e => keyboardShortcuts.value && isKeyWithoutModifiers(e, '.') && !isEditableElement(e.target),

app/components/Package/TrendsChart.vue

@@ -62,7 +62,7 @@ const { accentColors, selectedAccentColor } = useAccentColor();
 const { localSettings } = useUserLocalSettings();
 const { copy, copied } = useClipboard();
 
-const colorMode = useColorMode();
+const { colorMode } = useColorModePreference();
 const resolvedMode = shallowRef<"light" | "dark">("light");
 const rootEl = shallowRef<HTMLElement | null>(null);
 const isZoomed = shallowRef(false);

app/components/Package/VersionDistribution.vue

@@ -21,7 +21,7 @@ const props = defineProps<{
 const { accentColors, selectedAccentColor } = useAccentColor()
 const { copy, copied } = useClipboard()
 
-const colorMode = useColorMode()
+const { colorMode } = useColorModePreference()
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
 const rootEl = shallowRef<HTMLElement | null>(null)
 

app/components/Package/WeeklyDownloadStats.vue

@@ -20,6 +20,7 @@ const props = defineProps<{
 const router = useRouter()
 const route = useRoute()
 const { localSettings } = useUserLocalSettings()
+const { preferences } = useUserPreferencesState()
 
 const chartModal = useModal('chart-modal')
 const hasChartModalTransitioned = shallowRef(false)
@@ -63,7 +64,7 @@ const { fetchPackageDownloadEvolution } = useCharts()
 
 const { accentColors, selectedAccentColor } = useAccentColor()
 
-const colorMode = useColorMode()
+const { colorMode } = useColorModePreference()
 
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
 
@@ -306,7 +307,7 @@ function layEgg() {
   showPulse.value = false
   nextTick(() => {
     showPulse.value = true
-    settings.value.enableGraphPulseLooping = !settings.value.enableGraphPulseLooping
+    preferences.value.enableGraphPulseLooping = !preferences.value.enableGraphPulseLooping
     playEggPulse()
   })
 }
@@ -364,7 +365,7 @@ const config = computed<VueUiSparklineConfig>(() => {
         color: colors.value.borderHover,
         pulse: {
           show: showPulse.value, // the pulse will not show if prefers-reduced-motion (enforced by vue-data-ui)
-          loop: settings.value.enableGraphPulseLooping,
+          loop: preferences.value.enableGraphPulseLooping,
           radius: 1.5,
           color: pulseColor.value!,
           easing: 'ease-in-out',

app/composables/atproto/useAtproto.ts

@@ -1,4 +1,24 @@
-export const useAtproto = createSharedComposable(function useAtproto() {
+import type { PublicUserSessionSchema } from "#shared/schemas/publicUserSession";
+import type { InferOutput } from "valibot";
+
+type User = InferOutput<typeof PublicUserSessionSchema>;
+
+export interface UseAtprotoReturn {
+  user: Ref<User | null | undefined>;
+  pending: Ref<boolean>;
+  logout: () => Promise<void>;
+}
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __useAtprotoMock: UseAtprotoReturn | undefined
+}
+
+function _useAtprotoImpl(): UseAtprotoReturn {
+  if (import.meta.test && globalThis.__useAtprotoMock) {
+    return globalThis.__useAtprotoMock
+  }
+
   const {
     data: user,
     pending,
@@ -17,4 +37,10 @@ export const useAtproto = createSharedComposable(function useAtproto() {
   }
 
   return { user, pending, logout }
-})
+}
+
+// In tests, skip createSharedComposable so each call checks globalThis.__useAtprotoMock fresh.
+// In production, import.meta.test is false and the test branch is tree-shaken.
+export const useAtproto = import.meta.test
+  ? _useAtprotoImpl
+  : createSharedComposable(_useAtprotoImpl)