refactor: unify user settings (#821)

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

composables/command.ts

@@ -271,10 +271,10 @@ export const provideGlobalCommands = () => {
     scope: 'Preferences',
 
     name: () => t('command.toggle_zen_mode'),
-    icon: () => isZenMode.value ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line',
+    icon: () => userSettings.value.zenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line',
 
     onActivate() {
-      toggleZenMode()
+      userSettings.value.zenMode = !userSettings.value.zenMode
     },
   })
 

composables/dialog.ts

@@ -1,6 +1,6 @@
 import type { Attachment, Status, StatusEdit } from 'masto'
 import type { Draft } from '~/types'
-import { STORAGE_KEY_FIRST_VISIT, STORAGE_KEY_ZEN_MODE } from '~/constants'
+import { STORAGE_KEY_FIRST_VISIT } from '~/constants'
 
 export const mediaPreviewList = ref<Attachment[]>([])
 export const mediaPreviewIndex = ref(0)
@@ -11,7 +11,6 @@ export const dialogDraftKey = ref<string>()
 export const commandPanelInput = ref('')
 
 export const isFirstVisit = useLocalStorage(STORAGE_KEY_FIRST_VISIT, !process.mock)
-export const isZenMode = useLocalStorage(STORAGE_KEY_ZEN_MODE, false)
 
 export const isSigninDialogOpen = ref(false)
 export const isPublishDialogOpen = ref(false)
@@ -22,8 +21,6 @@ export const isCommandPanelOpen = ref(false)
 
 export const lastPublishDialogStatus = ref<Status | null>(null)
 
-export const toggleZenMode = useToggle(isZenMode)
-
 export function openSigninDialog() {
   isSigninDialogOpen.value = true
 }

composables/featureFlags.ts

@@ -1,38 +0,0 @@
-import { STORAGE_KEY_FEATURE_FLAGS } from '~/constants'
-
-export interface FeatureFlags {
-  experimentalVirtualScroll: boolean
-  experimentalGitHubCards: boolean
-  experimentalUserPicker: boolean
-}
-export type FeatureFlagsMap = Record<string, FeatureFlags>
-
-export function getDefaultFeatureFlags(): FeatureFlags {
-  return {
-    experimentalVirtualScroll: false,
-    experimentalGitHubCards: true,
-    experimentalUserPicker: true,
-  }
-}
-
-export const currentUserFeatureFlags = process.server
-  ? computed(getDefaultFeatureFlags)
-  : useUserLocalStorage(STORAGE_KEY_FEATURE_FLAGS, getDefaultFeatureFlags)
-
-export function useFeatureFlags() {
-  const featureFlags = currentUserFeatureFlags.value
-
-  return featureFlags
-}
-
-export function toggleFeatureFlag(key: keyof FeatureFlags) {
-  const featureFlags = currentUserFeatureFlags.value
-
-  if (featureFlags[key])
-    featureFlags[key] = !featureFlags[key]
-  else
-    featureFlags[key] = true
-}
-
-const userPicker = eagerComputed(() => useFeatureFlags().experimentalUserPicker)
-export const showUserPicker = computed(() => useUsers().value.length > 1 && userPicker.value)

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)