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 = {} + let lsLayout: Partial = {} 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() }) }