remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(layout): cache pageWidth in localStorage to avoid render glitch

Browse Source 
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.
This commit is contained in:
Julien Calixte
2026-04-26 13:44:10 +02:00
parent 181ffd1e5c
commit 9f75e7971d
2 changed files with 23 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/modules/repo/store/userRepo.store.ts
View File

@@ -34,22 +34,24 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
_requestId: 0
}),
actions: {
_persistFonts() {
_persistLayout() {
if (!this.userSettings) return
try {
const {
chosenTitleFont,
chosenBodyFont,
chosenFontSize,
chosenFontFamily
chosenFontFamily,
pageWidth
} = this.userSettings
localStorage.setItem(
`remanso:fonts:${this.user}:${this.repo}`,
`remanso:layout:${this.user}:${this.repo}`,
JSON.stringify({
chosenTitleFont,
chosenBodyFont,
chosenFontSize,
chosenFontFamily
chosenFontFamily,
pageWidth
})
)
} catch {
@@ -61,18 +63,18 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
this.user = user
this.repo = repo
let lsFonts: Partial<UserSettings> = {}
let lsLayout: Partial<UserSettings> = {}
try {
const lsRaw = localStorage.getItem(`remanso:fonts:${user}:${repo}`)
if (lsRaw) lsFonts = JSON.parse(lsRaw)
const lsRaw = localStorage.getItem(`remanso:layout:${user}:${repo}`)
if (lsRaw) lsLayout = JSON.parse(lsRaw)
} catch {
// ignore
}
if (Object.keys(lsFonts).length) {
if (Object.keys(lsLayout).length) {
if (!this.userSettings)
this.userSettings = { $type: DataType.UserSettings }
Object.assign(this.userSettings, lsFonts)
Object.assign(this.userSettings, lsLayout)
}
const savedRepoId = generateId(DataType.SavedRepo, `${user}-${repo}`)
@@ -90,8 +92,8 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
}
if (cachedUserSettings) {
// localStorage font choices take priority over PouchDB cache
this.userSettings = { ...cachedUserSettings, ...lsFonts }
// localStorage layout choices take priority over PouchDB cache
this.userSettings = { ...cachedUserSettings, ...lsLayout }
}
try {
@@ -145,6 +147,8 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
this.userSettings.chosenTitleFont = chosenTitleFont
this.userSettings.chosenBodyFont = chosenBodyFont
this._persistLayout()
// Persist only repo config fields — chosen* are localStorage-only
const {
chosenTitleFont: _t,
@@ -205,28 +209,28 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
this.userSettings = { $type: DataType.UserSettings }
}
this.userSettings.chosenFontFamily = fontFamily
this._persistFonts()
this._persistLayout()
},
setFontSize(fontSize: string) {
if (!this.userSettings) {
this.userSettings = { $type: DataType.UserSettings }
}
this.userSettings.chosenFontSize = fontSize
this._persistFonts()
this._persistLayout()
},
setTitleFont(font: string) {
if (!this.userSettings) {
this.userSettings = { $type: DataType.UserSettings }
}
this.userSettings.chosenTitleFont = font
this._persistFonts()
this._persistLayout()
},
setBodyFont(font: string) {
if (!this.userSettings) {
this.userSettings = { $type: DataType.UserSettings }
}
this.userSettings.chosenBodyFont = font
this._persistFonts()
this._persistLayout()
}
}
})