zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

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

Browse source
This commit is contained in:
三咲智子 Kevin Deng 2023-01-13 01:52:52 +08:00 • committed by GitHub
parent 32aa47e701
commit 9a41b9b7d7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 230 additions and 167 deletions
Download patch file Download diff file Expand all files Collapse all files

46
composables/settings/definition.ts Normal file
View file

@ -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,
}

36
composables/settings/featureFlags.ts
View file

@ -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
}

26
composables/settings/index.ts
View file

@ -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'

53
composables/settings/storage.ts Normal file
View file

@ -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
}

36
composables/settings/wellness.ts
View file

@ -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
}