From df250750e5ada2269d8e0e37e685c07e7cbdd9c7 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sun, 6 Jul 2025 15:49:58 +0200
Subject: [PATCH] feat: add chosen font size

---
 src/components/FontChange.vue                 | 47 +++++++++++++++----
 src/modules/repo/interfaces/UserSettings.ts   |  1 +
 src/modules/repo/store/userRepo.store.ts      | 16 +++++++
 .../user/hooks/useUserSettings.hook.ts        |  2 +-
 4 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/src/components/FontChange.vue b/src/components/FontChange.vue
index 7e529bc..f7eb769 100644
--- a/src/components/FontChange.vue
+++ b/src/components/FontChange.vue
@@ -8,17 +8,44 @@ const fontFamilies = computed(() => store.userSettings?.fontFamilies ?? [])
 const sortedFontFamilies = computed(() =>
   [...fontFamilies.value].sort((a, b) => a.localeCompare(b)),
 )
+const fontSizes = Array.from({ length: 7 }, (_, i) => `${9 + i * 2}pt`)
 </script>
 
 <template>
-  <select
-    v-if="sortedFontFamilies.length > 0"
-    class="select select-sm"
-    :value="store.userSettings?.chosenFontFamily"
-    @change="store.setFontFamily(($event.target as HTMLSelectElement).value)"
-  >
-    <option v-for="font in sortedFontFamilies" :key="font" :value="font">
-      {{ font }}
-    </option>
-  </select>
+  <div class="font-change">
+    <select
+      v-if="sortedFontFamilies.length > 0"
+      class="select"
+      :value="store.userSettings?.chosenFontFamily"
+      @change="store.setFontFamily(($event.target as HTMLSelectElement).value)"
+    >
+      <option v-for="font in sortedFontFamilies" :key="font" :value="font">
+        {{ font }}
+      </option>
+    </select>
+
+    <select
+      class="select"
+      :value="store.userSettings?.chosenFontSize"
+      @change="store.setFontSize(($event.target as HTMLSelectElement).value)"
+    >
+      <option v-for="size in fontSizes" :key="size" :value="size">
+        {{ size }}
+      </option>
+    </select>
+  </div>
 </template>
+
+<style lang="scss" scoped>
+.font-change {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+
+  select {
+    flex: 1;
+    display: flex;
+  }
+}
+</style>
diff --git a/src/modules/repo/interfaces/UserSettings.ts b/src/modules/repo/interfaces/UserSettings.ts
index 1bf0235..b3c4527 100644
--- a/src/modules/repo/interfaces/UserSettings.ts
+++ b/src/modules/repo/interfaces/UserSettings.ts
@@ -6,5 +6,6 @@ export interface UserSettings extends Model<DataType.UserSettings> {
   fontFamily?: string
   chosenFontFamily?: string
   fontSize?: string
+  chosenFontSize?: string
   backlink?: boolean
 }
diff --git a/src/modules/repo/store/userRepo.store.ts b/src/modules/repo/store/userRepo.store.ts
index 5496ddc..566700a 100644
--- a/src/modules/repo/store/userRepo.store.ts
+++ b/src/modules/repo/store/userRepo.store.ts
@@ -79,6 +79,8 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
           )
             ? this.userSettings?.chosenFontFamily
             : userSettings?.fontFamily
+          const chosenFontSize =
+            this.userSettings?.chosenFontSize ?? userSettings?.fontSize
           this.userSettings = userSettings
 
           if (!this.userSettings) {
@@ -87,6 +89,8 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
 
           this.userSettings.chosenFontFamily =
             chosenFontFamily ?? this.userSettings.fontFamily
+          this.userSettings.chosenFontSize =
+            chosenFontSize ?? this.userSettings.fontSize
 
           data.update<DataType.UserSettings, UserSettings>({
             ...this.userSettings,
@@ -142,6 +146,18 @@ export const useUserRepoStore = defineStore("USER_REPO_STATE", {
       }
       this.userSettings.chosenFontFamily = fontFamily
 
+      const userSettingsId = `UserSetting-${this.user}-${this.repo}`
+      data.update<DataType.UserSettings, UserSettings>({
+        ...this.userSettings,
+        _id: userSettingsId,
+      })
+    },
+    setFontSize(fontSize: string) {
+      if (!this.userSettings) {
+        return
+      }
+      this.userSettings.chosenFontSize = fontSize
+
       const userSettingsId = `UserSetting-${this.user}-${this.repo}`
       data.update<DataType.UserSettings, UserSettings>({
         ...this.userSettings,
diff --git a/src/modules/user/hooks/useUserSettings.hook.ts b/src/modules/user/hooks/useUserSettings.hook.ts
index 6a4dc18..de1473b 100644
--- a/src/modules/user/hooks/useUserSettings.hook.ts
+++ b/src/modules/user/hooks/useUserSettings.hook.ts
@@ -17,7 +17,7 @@ export const useUserSettings = () => {
     const root = document.documentElement
 
     const fontFamily = store.userSettings?.chosenFontFamily
-    const fontSize = store.userSettings?.fontSize
+    const fontSize = store.userSettings?.chosenFontSize
 
     downloadGoogleFont(fontFamily || DEFAULT_FONT_POLICY)
     root.style.setProperty("--font-size", fontSize || DEFAULT_FONT_SIZE)