fix: zen mode on refresh
parent
680b3493b3
commit
bef1371516
|
@ -2,10 +2,8 @@ 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)
|
||||
export function useUserSettings() {
|
||||
return useUserLocalStorage<UserSettings>(STORAGE_KEY_SETTINGS, getDefaultUserSettings)
|
||||
}
|
||||
|
||||
// TODO: refactor & simplify this
|
||||
|
|
|
@ -277,7 +277,10 @@ interface UseUserLocalStorageCache {
|
|||
/**
|
||||
* Create reactive storage for the current user
|
||||
*/
|
||||
export function useUserLocalStorage<T extends object>(key: string, initial: () => T) {
|
||||
export function useUserLocalStorage<T extends object>(key: string, initial: () => T): Ref<T> {
|
||||
if (process.server)
|
||||
return shallowRef(initial())
|
||||
|
||||
// @ts-expect-error bind value to the function
|
||||
const map: Map<string, UseUserLocalStorageCache> = useUserLocalStorage._ = useUserLocalStorage._ || new Map()
|
||||
|
||||
|
@ -296,7 +299,7 @@ export function useUserLocalStorage<T extends object>(key: string, initial: () =
|
|||
map.set(key, { scope, value: value! })
|
||||
}
|
||||
|
||||
return map.get(key)!.value
|
||||
return map.get(key)!.value as Ref<T>
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -13,7 +13,7 @@ const showUserPicker = logicAnd(
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div h-full :class="{ zen: userSettings.zenMode }">
|
||||
<div h-full>
|
||||
<main flex w-full mxa lg:max-w-80rem>
|
||||
<aside class="hidden sm:flex w-1/8 md:w-1/6 lg:w-1/5 xl:w-1/4 justify-end xl:me-4 zen-hide" relative>
|
||||
<div sticky top-0 w-20 xl:w-100 h-screen flex="~ col" lt-xl-items-center>
|
||||
|
|
|
@ -7,4 +7,7 @@ export default defineNuxtPlugin(() => {
|
|||
watchEffect(() => {
|
||||
html.style.setProperty('--font-size', fontSizeMap[userSettings.value.fontSize || DEFAULT_FONT_SIZE])
|
||||
})
|
||||
watchEffect(() => {
|
||||
html.classList.toggle('zen', userSettings.value.zenMode)
|
||||
})
|
||||
})
|
|
@ -19,15 +19,15 @@ export default defineNuxtPlugin(() => {
|
|||
const html = document.querySelector('html')
|
||||
${process.dev ? 'console.log({ settings })' : ''}
|
||||
|
||||
const { fontSize, language } = settings || {}
|
||||
|
||||
if (fontSize) {
|
||||
if (settings.fontSize) {
|
||||
const fontSizeMap = ${JSON.stringify(fontSizeMap)}
|
||||
html.style.setProperty('--font-size', fontSizeMap[fontSize])
|
||||
html.style.setProperty('--font-size', fontSizeMap[settings.fontSize])
|
||||
}
|
||||
|
||||
if (language) {
|
||||
html.setAttribute('lang', language)
|
||||
if (settings.language) {
|
||||
html.setAttribute('lang', settings.language)
|
||||
}
|
||||
if (settings.zenMode) {
|
||||
html.classList.add('zen')
|
||||
}
|
||||
})()`.trim().replace(/\s*\n+\s*/g, ';'),
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue