feat: add chosen font size

src/components/FontChange.vue

@@ -8,12 +8,14 @@ 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>
+  <div class="font-change">
     <select
       v-if="sortedFontFamilies.length > 0"
-    class="select select-sm"
+      class="select"
       :value="store.userSettings?.chosenFontFamily"
       @change="store.setFontFamily(($event.target as HTMLSelectElement).value)"
     >
@@ -21,4 +23,29 @@ const sortedFontFamilies = computed(() =>
         {{ 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>

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
 }

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,

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)