From 73a60147507f57f16bd494ffd9122e9c4a02c897 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Mon, 6 Apr 2026 18:51:27 +0200
Subject: [PATCH] fix: persist font selections across navigation and page
 reloads

- Use v-model with writable computeds instead of :value+@change so selects
  re-sync when the options list changes asynchronously
- Always include currently chosen fonts in sortedFontFamilies so a selected
  font not present in .remanso.json fontFamilies still shows in the select
- Initialize userSettings instead of returning early in font setters so
  changes made before async GitHub fetch completes are not silently dropped
- Back font choices with localStorage so they survive hard reloads even when
  PouchDB/IndexedDB fails silently in the web worker
---
 src/components/FontChange.vue            | 33 +++++++++++++------
 src/modules/repo/store/userRepo.store.ts | 41 +++++++++++++++++++++---
 2 files changed, 60 insertions(+), 14 deletions(-)

diff --git a/src/components/FontChange.vue b/src/components/FontChange.vue
index 8d8fabe..36e09d3 100644
--- a/src/components/FontChange.vue
+++ b/src/components/FontChange.vue
@@ -22,10 +22,28 @@ const DEFAULT_FONT_FAMILIES = [
 const fontFamilies = computed(
   () => store.userSettings?.fontFamilies ?? DEFAULT_FONT_FAMILIES
 )
-const sortedFontFamilies = computed(() =>
-  [...fontFamilies.value].sort((a, b) => a.localeCompare(b))
-)
+const sortedFontFamilies = computed(() => {
+  const base = fontFamilies.value
+  const extras = [
+    store.userSettings?.chosenTitleFont,
+    store.userSettings?.chosenBodyFont
+  ].filter((f): f is string => !!f && !base.includes(f))
+  return [...base, ...extras].sort((a, b) => a.localeCompare(b))
+})
 const fontSizes = Array.from({ length: 7 }, (_, i) => `${9 + i * 2}pt`)
+
+const titleFont = computed({
+  get: () => store.userSettings?.chosenTitleFont,
+  set: (value) => store.setTitleFont(value!)
+})
+const bodyFont = computed({
+  get: () => store.userSettings?.chosenBodyFont,
+  set: (value) => store.setBodyFont(value!)
+})
+const fontSize = computed({
+  get: () => store.userSettings?.chosenFontSize,
+  set: (value) => store.setFontSize(value!)
+})
 </script>
 
 <template>
@@ -35,8 +53,7 @@ const fontSizes = Array.from({ length: 7 }, (_, i) => `${9 + i * 2}pt`)
       <select
         id="title-font"
         class="select"
-        :value="store.userSettings?.chosenTitleFont"
-        @change="store.setTitleFont(($event.target as HTMLSelectElement).value)"
+        v-model="titleFont"
       >
         <option v-for="font in sortedFontFamilies" :key="font" :value="font">
           {{ font }}
@@ -47,8 +64,7 @@ const fontSizes = Array.from({ length: 7 }, (_, i) => `${9 + i * 2}pt`)
       <select
         id="body-font"
         class="select"
-        :value="store.userSettings?.chosenBodyFont"
-        @change="store.setBodyFont(($event.target as HTMLSelectElement).value)"
+        v-model="bodyFont"
       >
         <option v-for="font in sortedFontFamilies" :key="font" :value="font">
           {{ font }}
@@ -62,8 +78,7 @@ const fontSizes = Array.from({ length: 7 }, (_, i) => `${9 + i * 2}pt`)
       <select
         id="font-size"
         class="select"
-        :value="store.userSettings?.chosenFontSize"
-        @change="store.setFontSize(($event.target as HTMLSelectElement).value)"
+        v-model="fontSize"
       >
         <option v-for="size in fontSizes" :key="size" :value="size">
           {{ size }}
diff --git a/src/modules/repo/store/userRepo.store.ts b/src/modules/repo/store/userRepo.store.ts
index 9c78fa9..190018a 100644
--- a/src/modules/repo/store/userRepo.store.ts
+++ b/src/modules/repo/store/userRepo.store.ts
@@ -34,11 +34,37 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
     _requestId: 0
   }),
   actions: {
+    _persistFonts() {
+      if (!this.userSettings) return
+      try {
+        const { chosenTitleFont, chosenBodyFont, chosenFontSize, chosenFontFamily } =
+          this.userSettings
+        localStorage.setItem(
+          `remanso:fonts:${this.user}:${this.repo}`,
+          JSON.stringify({ chosenTitleFont, chosenBodyFont, chosenFontSize, chosenFontFamily })
+        )
+      } catch {
+        // ignore
+      }
+    },
     async setUserRepo(user: string, repo: string) {
       const requestId = ++this._requestId
       this.user = user
       this.repo = repo
 
+      let lsFonts: Partial<UserSettings> = {}
+      try {
+        const lsRaw = localStorage.getItem(`remanso:fonts:${user}:${repo}`)
+        if (lsRaw) lsFonts = JSON.parse(lsRaw)
+      } catch {
+        // ignore
+      }
+
+      if (Object.keys(lsFonts).length) {
+        if (!this.userSettings) this.userSettings = { $type: DataType.UserSettings }
+        Object.assign(this.userSettings, lsFonts)
+      }
+
       const savedRepoId = generateId(DataType.SavedRepo, `${user}-${repo}`)
       const userSettingsId = `UserSetting-${user}-${repo}`
 
@@ -54,7 +80,8 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
       }
 
       if (cachedUserSettings) {
-        this.userSettings = cachedUserSettings
+        // localStorage font choices take priority over PouchDB cache
+        this.userSettings = { ...cachedUserSettings, ...lsFonts }
       }
 
       try {
@@ -157,10 +184,11 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
     },
     setFontFamily(fontFamily: string) {
       if (!this.userSettings) {
-        return
+        this.userSettings = { $type: DataType.UserSettings }
       }
       this.userSettings.chosenFontFamily = fontFamily
 
+      this._persistFonts()
       const userSettingsId = `UserSetting-${this.user}-${this.repo}`
       data.update<DataType.UserSettings, UserSettings>({
         ...this.userSettings,
@@ -169,10 +197,11 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
     },
     setFontSize(fontSize: string) {
       if (!this.userSettings) {
-        return
+        this.userSettings = { $type: DataType.UserSettings }
       }
       this.userSettings.chosenFontSize = fontSize
 
+      this._persistFonts()
       const userSettingsId = `UserSetting-${this.user}-${this.repo}`
       data.update<DataType.UserSettings, UserSettings>({
         ...this.userSettings,
@@ -181,10 +210,11 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
     },
     setTitleFont(font: string) {
       if (!this.userSettings) {
-        return
+        this.userSettings = { $type: DataType.UserSettings }
       }
       this.userSettings.chosenTitleFont = font
 
+      this._persistFonts()
       const userSettingsId = `UserSetting-${this.user}-${this.repo}`
       data.update<DataType.UserSettings, UserSettings>({
         ...this.userSettings,
@@ -193,10 +223,11 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
     },
     setBodyFont(font: string) {
       if (!this.userSettings) {
-        return
+        this.userSettings = { $type: DataType.UserSettings }
       }
       this.userSettings.chosenBodyFont = font
 
+      this._persistFonts()
       const userSettingsId = `UserSetting-${this.user}-${this.repo}`
       data.update<DataType.UserSettings, UserSettings>({
         ...this.userSettings,