fix: zen mode on refresh

This commit is contained in:
Anthony Fu 2023-01-14 11:09:17 +01:00
parent 680b3493b3
commit bef1371516
5 changed files with 18 additions and 14 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -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, ';'),
},