From 9f75e7971d4225b4a7c1306e00f28396a15529e6 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Sun, 26 Apr 2026 13:44:10 +0200
Subject: [PATCH] fix(layout): cache pageWidth in localStorage to avoid render
 glitch

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.
---
 src/modules/repo/store/userRepo.store.ts      | 34 +++++++++++--------
 .../user/hooks/useUserSettings.hook.ts        |  9 +++--
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/src/modules/repo/store/userRepo.store.ts b/src/modules/repo/store/userRepo.store.ts
index 6a82149..23b8789 100644
--- a/src/modules/repo/store/userRepo.store.ts
+++ b/src/modules/repo/store/userRepo.store.ts
@@ -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()
     }
   }
 })
diff --git a/src/modules/user/hooks/useUserSettings.hook.ts b/src/modules/user/hooks/useUserSettings.hook.ts
index f469bbb..b4b781a 100644
--- a/src/modules/user/hooks/useUserSettings.hook.ts
+++ b/src/modules/user/hooks/useUserSettings.hook.ts
@@ -6,6 +6,7 @@ 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()
@@ -24,10 +25,8 @@ export const useUserSettings = () => {
     )
     root.style.setProperty("--font-size", fontSize || DEFAULT_FONT_SIZE)
 
-    const pageWidth = store.userSettings?.pageWidth
-    if (pageWidth) {
-      root.style.setProperty("--note-width", pageWidth)
-      resetNoteWidthCache()
-    }
+    const pageWidth = store.userSettings?.pageWidth ?? DEFAULT_NOTE_WIDTH
+    root.style.setProperty("--note-width", pageWidth)
+    resetNoteWidthCache()
   })
 }