refactor: unify user settings (#821)

Co-authored-by: 三咲智子 <sxzz@sxzz.moe>

composables/settings/featureFlags.ts

@@ -0,0 +1,36 @@
+import type { Ref } from 'vue'
+import { userSettings } from '.'
+
+export interface FeatureFlags {
+  experimentalVirtualScroll: boolean
+  experimentalGitHubCards: boolean
+  experimentalUserPicker: boolean
+}
+export type FeatureFlagsMap = Record<string, FeatureFlags>
+
+const DEFAULT_FEATURE_FLAGS: FeatureFlags = {
+  experimentalVirtualScroll: false,
+  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

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