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

@@ -22,10 +22,28 @@ const DEFAULT_FONT_FAMILIES = [
 const fontFamilies = computed(
   () => store.userSettings?.fontFamilies ?? DEFAULT_FONT_FAMILIES
 )
-const sortedFontFamilies = computed(() =>
+const sortedFontFamilies = computed(() => {
-  [...fontFamilies.value].sort((a, b) => a.localeCompare(b))
+  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"
+        v-model="titleFont"
-        @change="store.setTitleFont(($event.target as HTMLSelectElement).value)"
       >
         <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"
+        v-model="bodyFont"
-        @change="store.setBodyFont(($event.target as HTMLSelectElement).value)"
       >
         <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"
+        v-model="fontSize"
-        @change="store.setFontSize(($event.target as HTMLSelectElement).value)"
       >
         <option v-for="size in fontSizes" :key="size" :value="size">
           {{ size }}

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,