From ee8bbd4a37204f4eb04495407e554b2b9c1bc06a Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Wed, 22 Apr 2026 23:34:26 +0200
Subject: [PATCH] feat(config): add pageWidth setting to .remanso.json

Allows repo owners to configure note column width via `"pageWidth": "700px"` in .remanso.json. Applies the value to the --note-width CSS variable and invalidates the cached width so resize/overlay hooks pick it up.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/constants/note-width.ts                    | 4 ++++
 src/modules/repo/interfaces/UserSettings.ts    | 1 +
 src/modules/user/hooks/useUserSettings.hook.ts | 7 +++++++
 3 files changed, 12 insertions(+)

diff --git a/src/constants/note-width.ts b/src/constants/note-width.ts
index fa0d4ea..eaeeba6 100644
--- a/src/constants/note-width.ts
+++ b/src/constants/note-width.ts
@@ -10,3 +10,7 @@ export const getNoteWidth = () => {
   }
   return cached
 }
+
+export const resetNoteWidthCache = () => {
+  cached = undefined
+}
diff --git a/src/modules/repo/interfaces/UserSettings.ts b/src/modules/repo/interfaces/UserSettings.ts
index edfefe4..60fe42d 100644
--- a/src/modules/repo/interfaces/UserSettings.ts
+++ b/src/modules/repo/interfaces/UserSettings.ts
@@ -10,4 +10,5 @@ export interface UserSettings extends Model<DataType.UserSettings> {
   backlink?: boolean
   chosenTitleFont?: string
   chosenBodyFont?: string
+  pageWidth?: string
 }
diff --git a/src/modules/user/hooks/useUserSettings.hook.ts b/src/modules/user/hooks/useUserSettings.hook.ts
index 64ffadb..f469bbb 100644
--- a/src/modules/user/hooks/useUserSettings.hook.ts
+++ b/src/modules/user/hooks/useUserSettings.hook.ts
@@ -1,5 +1,6 @@
 import { watchEffect } from "vue"
 
+import { resetNoteWidthCache } from "@/constants/note-width"
 import { useUserRepoStore } from "@/modules/repo/store/userRepo.store"
 import { downloadFont } from "@/utils/downloadFont"
 
@@ -22,5 +23,11 @@ export const useUserSettings = () => {
       "--title-font-family"
     )
     root.style.setProperty("--font-size", fontSize || DEFAULT_FONT_SIZE)
+
+    const pageWidth = store.userSettings?.pageWidth
+    if (pageWidth) {
+      root.style.setProperty("--note-width", pageWidth)
+      resetNoteWidthCache()
+    }
   })
 }