9f75e7971d
The page width from .remanso.json was only applied after an async PouchDB + network fetch, so notes briefly rendered at the default 500px before snapping to the configured value. Persist pageWidth alongside the existing font cache (key renamed to remanso:layout:*), so it is read synchronously during setUserRepo and applied before the first render. Also always reset --note-width with a default fallback to prevent stale values leaking across repo navigation.
33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
import { watchEffect } from "vue"
|
|
|
|
import { resetNoteWidthCache } from "@/constants/note-width"
|
|
import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
|
|
import { downloadFont } from "@/utils/downloadFont"
|
|
|
|
const DEFAULT_FONT_POLICY = '"Libertinus Serif", serif'
|
|
const DEFAULT_FONT_SIZE = "16px"
|
|
const DEFAULT_NOTE_WIDTH = "500px"
|
|
|
|
export const useUserSettings = () => {
|
|
const store = useUserRepoStore()
|
|
|
|
watchEffect(() => {
|
|
const root = document.documentElement
|
|
|
|
const fontSize = store.userSettings?.chosenFontSize
|
|
const bodyFont = store.userSettings?.chosenBodyFont
|
|
const titleFont = store.userSettings?.chosenTitleFont
|
|
|
|
downloadFont(bodyFont || DEFAULT_FONT_POLICY, "--font-family")
|
|
downloadFont(
|
|
titleFont || bodyFont || DEFAULT_FONT_POLICY,
|
|
"--title-font-family"
|
|
)
|
|
root.style.setProperty("--font-size", fontSize || DEFAULT_FONT_SIZE)
|
|
|
|
const pageWidth = store.userSettings?.pageWidth ?? DEFAULT_NOTE_WIDTH
|
|
root.style.setProperty("--note-width", pageWidth)
|
|
resetNoteWidthCache()
|
|
})
|
|
}
|