feat(settings): respect settings from server (#1013)

composables/command.ts

@@ -244,6 +244,7 @@ export const provideGlobalCommands = () => {
   const users = useUsers()
   const masto = useMasto()
   const colorMode = useColorMode()
+  const userSettings = useUserSettings()
 
   useCommand({
     scope: 'Navigation',

composables/injections.ts

@@ -1,8 +1,4 @@
-import { InjectionKeyDropdownContext, InjectionKeyFontSize } from '~/constants/symbols'
-
-export function useFontSizeRef() {
-  return inject(InjectionKeyFontSize)!
-}
+import { InjectionKeyDropdownContext } from '~/constants/symbols'
 
 export function useDropdownContext() {
   return inject(InjectionKeyDropdownContext, undefined)

composables/settings/definition.ts

@@ -0,0 +1,46 @@
+import { DEFAULT_FONT_SIZE, DEFAULT_LANGUAGE } from '~/constants'
+
+export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+export type ColorMode = 'light' | 'dark'
+
+export interface FeatureFlags {
+  experimentalVirtualScroller: boolean
+  experimentalGitHubCards: boolean
+  experimentalUserPicker: boolean
+}
+
+export interface WellnessSettings {
+  hideBoostCount: boolean
+  hideFavoriteCount: boolean
+  hideFollowerCount: boolean
+}
+
+export interface UserSettings {
+  featureFlags: Partial<FeatureFlags>
+  wellnessSettings: Partial<WellnessSettings>
+  colorMode?: ColorMode
+  fontSize: FontSize
+  language: string
+  zenMode?: boolean
+}
+
+export function getDefaultUserSettings(): UserSettings {
+  return {
+    language: DEFAULT_LANGUAGE,
+    fontSize: DEFAULT_FONT_SIZE,
+    featureFlags: {},
+    wellnessSettings: {},
+  }
+}
+
+export const DEFAULT_WELLNESS_SETTINGS: WellnessSettings = {
+  hideBoostCount: false,
+  hideFavoriteCount: false,
+  hideFollowerCount: false,
+}
+
+export const DEFAULT_FEATURE_FLAGS: FeatureFlags = {
+  experimentalVirtualScroller: true,
+  experimentalGitHubCards: true,
+  experimentalUserPicker: true,
+}

composables/settings/featureFlags.ts

@@ -1,36 +0,0 @@
-import type { Ref } from 'vue'
-import { userSettings } from '.'
-
-export interface FeatureFlags {
-  experimentalVirtualScroller: boolean
-  experimentalGitHubCards: boolean
-  experimentalUserPicker: boolean
-}
-export type FeatureFlagsMap = Record<string, FeatureFlags>
-
-const DEFAULT_FEATURE_FLAGS: FeatureFlags = {
-  experimentalVirtualScroller: true,
-  experimentalGitHubCards: true,
-  experimentalUserPicker: true,
-}
-
-export function useFeatureFlag<T extends keyof FeatureFlags>(name: T): Ref<FeatureFlags[T]> {
-  return computed({
-    get() {
-      return getFeatureFlag(name)
-    },
-    set(value) {
-      if (userSettings.value)
-        userSettings.value.featureFlags[name] = value
-    },
-  })
-}
-
-export function getFeatureFlag<T extends keyof FeatureFlags>(name: T): FeatureFlags[T] {
-  return userSettings.value?.featureFlags?.[name] ?? DEFAULT_FEATURE_FLAGS[name]
-}
-
-export function toggleFeatureFlag(key: keyof FeatureFlags) {
-  const flag = useFeatureFlag(key)
-  flag.value = !flag.value
-}

composables/settings/index.ts

@@ -1,24 +1,2 @@
-import type { FeatureFlags } from './featureFlags'
-import type { WellnessSettings } from './wellness'
-import type { ColorMode, FontSize } from '~/types'
-import { STORAGE_KEY_SETTINGS } from '~/constants'
-
-export interface UserSettings {
-  featureFlags: Partial<FeatureFlags>
-  wellnessSettings: Partial<WellnessSettings>
-  colorMode?: ColorMode
-  fontSize?: FontSize
-  lang?: string
-  zenMode?: boolean
-}
-
-export function getDefaultUserSettings(): UserSettings {
-  return {
-    featureFlags: {},
-    wellnessSettings: {},
-  }
-}
-
-export const userSettings = process.server
-  ? computed(getDefaultUserSettings)
-  : useUserLocalStorage(STORAGE_KEY_SETTINGS, getDefaultUserSettings)
+export * from './definition'
+export * from './storage'

composables/settings/storage.ts

@@ -0,0 +1,53 @@
+import type { Ref } from 'vue'
+import type { FeatureFlags, UserSettings, WellnessSettings } from './definition'
+import { STORAGE_KEY_SETTINGS } from '~/constants'
+
+export const useUserSettings = () => {
+  if (process.server)
+    return useState('user-settings', getDefaultUserSettings)
+  return useUserLocalStorage(STORAGE_KEY_SETTINGS, getDefaultUserSettings)
+}
+
+// TODO: refactor & simplify this
+
+export function useWellnessSetting<T extends keyof WellnessSettings>(name: T): Ref<WellnessSettings[T]> {
+  const userSettings = useUserSettings()
+  return computed({
+    get() {
+      return getWellnessSetting(userSettings.value, name)
+    },
+    set(value) {
+      userSettings.value.wellnessSettings[name] = value
+    },
+  })
+}
+
+export function getWellnessSetting<T extends keyof WellnessSettings>(userSettings: UserSettings, name: T): WellnessSettings[T] {
+  return userSettings?.wellnessSettings?.[name] ?? DEFAULT_WELLNESS_SETTINGS[name]
+}
+
+export function toggleWellnessSetting(key: keyof WellnessSettings) {
+  const flag = useWellnessSetting(key)
+  flag.value = !flag.value
+}
+
+export function useFeatureFlag<T extends keyof FeatureFlags>(name: T): Ref<FeatureFlags[T]> {
+  const userSettings = useUserSettings()
+  return computed({
+    get() {
+      return getFeatureFlag(userSettings.value, name)
+    },
+    set(value) {
+      userSettings.value.featureFlags[name] = value
+    },
+  })
+}
+
+export function getFeatureFlag<T extends keyof FeatureFlags>(userSettings: UserSettings, name: T): FeatureFlags[T] {
+  return userSettings?.featureFlags?.[name] ?? DEFAULT_FEATURE_FLAGS[name]
+}
+
+export function toggleFeatureFlag(key: keyof FeatureFlags) {
+  const flag = useFeatureFlag(key)
+  flag.value = !flag.value
+}

composables/settings/wellness.ts

@@ -1,36 +0,0 @@
-import type { Ref } from 'vue'
-import { userSettings } from '.'
-
-export interface WellnessSettings {
-  hideBoostCount: boolean
-  hideFavoriteCount: boolean
-  hideFollowerCount: boolean
-}
-export type WellnessSettingsMap = Record<string, WellnessSettings>
-
-const DEFAULT_WELLNESS_SETTINGS: WellnessSettings = {
-  hideBoostCount: false,
-  hideFavoriteCount: false,
-  hideFollowerCount: false,
-}
-
-export function useWellnessSetting<T extends keyof WellnessSettings>(name: T): Ref<WellnessSettings[T]> {
-  return computed({
-    get() {
-      return getWellnessSetting(name)
-    },
-    set(value) {
-      if (userSettings.value)
-        userSettings.value.wellnessSettings[name] = value
-    },
-  })
-}
-
-export function getWellnessSetting<T extends keyof WellnessSettings>(name: T): WellnessSettings[T] {
-  return userSettings.value?.wellnessSettings?.[name] ?? DEFAULT_WELLNESS_SETTINGS[name]
-}
-
-export function toggleWellnessSetting(key: keyof WellnessSettings) {
-  const flag = useWellnessSetting(key)
-  flag.value = !flag.value
-}

composables/users.ts

@@ -271,13 +271,7 @@ export function checkLogin() {
  * Create reactive storage for the current user
  */
 export function useUserLocalStorage<T extends object>(key: string, initial: () => T) {
-  // @ts-expect-error bind value to the function
-  const storages = useUserLocalStorage._ = useUserLocalStorage._ || new Map<string, Ref<Record<string, any>>>()
-
-  if (!storages.has(key))
-    storages.set(key, useLocalStorage(key, {}, { deep: true }))
-  const all = storages.get(key) as Ref<Record<string, T>>
-
+  const all = useLocalStorage<Record<string, T>>(key, {}, { deep: true })
   return computed(() => {
     const id = currentUser.value?.account.id
       ? currentUser.value.account.acct