feat(settings): show default font size

components/settings/SettingsFontSize.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { DEFAULT_FONT_SIZE } from '~/constants'
 import type { FontSize } from '~/types'
 
 const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as FontSize[]
@@ -8,7 +9,7 @@ const fontSize = useFontSizeRef()
 <template>
   <select v-model="fontSize">
     <option v-for="size in sizes" :key="size" :value="size" :selected="fontSize === size">
-      {{ size }}
+      {{ `${size}${size === DEFAULT_FONT_SIZE ? $t('settings.interface.default') : ''}` }}
     </option>
   </select>
 </template>

constants/index.ts

@@ -2,6 +2,7 @@ export const APP_NAME = 'Elk'
 
 export const DEFAULT_POST_CHARS_LIMIT = 500
 export const DEFAULT_SERVER = 'mas.to'
+export const DEFAULT_FONT_SIZE = 'md'
 
 export const STORAGE_KEY_DRAFTS = 'elk-drafts'
 export const STORAGE_KEY_USERS = 'elk-users'

locales/en-GB.json

@@ -226,6 +226,7 @@
     "interface": {
       "color_mode": "Color Mode",
       "dark_mode": "Dark Mode",
+      "default": " (default)",
       "font_size": "Font Size",
       "label": "Interface",
       "light_mode": "Light Mode"

locales/en-US.json

@@ -226,6 +226,7 @@
     "interface": {
       "color_mode": "Color Mode",
       "dark_mode": "Dark Mode",
+      "default": " (default)",
       "font_size": "Font Size",
       "label": "Interface",
       "light_mode": "Light Mode"

locales/zh-CN.json

@@ -226,6 +226,7 @@
     "interface": {
       "color_mode": "颜色",
       "dark_mode": "暗色模式",
+      "default": "（默认）",
       "font_size": "字号",
       "label": "外观",
       "light_mode": "亮色模式"

plugins/setup-font-size.ts

@@ -1,23 +1,22 @@
 import type { FontSize } from '~/types'
 import { InjectionKeyFontSize } from '~/constants/symbols'
-import { COOKIE_KEY_FONT_SIZE, COOKIE_MAX_AGE } from '~/constants'
+import { COOKIE_KEY_FONT_SIZE, COOKIE_MAX_AGE, DEFAULT_FONT_SIZE } from '~/constants'
 import { fontSizeMap } from '~/constants/options'
 
 export default defineNuxtPlugin((nuxt) => {
-  const DEFAULT = 'md'
+  const cookieFontSize = useCookie<FontSize>(COOKIE_KEY_FONT_SIZE, { default: () => DEFAULT_FONT_SIZE, maxAge: COOKIE_MAX_AGE })
-  const cookieFontSize = useCookie<FontSize>(COOKIE_KEY_FONT_SIZE, { default: () => DEFAULT, maxAge: COOKIE_MAX_AGE })
   nuxt.vueApp.provide(InjectionKeyFontSize, cookieFontSize)
 
   if (!process.server) {
     watchEffect(() => {
-      document.documentElement.style.setProperty('--font-size', fontSizeMap[cookieFontSize.value || DEFAULT])
+      document.documentElement.style.setProperty('--font-size', fontSizeMap[cookieFontSize.value || DEFAULT_FONT_SIZE])
     })
   }
   else {
     useHead({
       style: [
         {
-          innerHTML: `:root { --font-size: ${fontSizeMap[cookieFontSize.value || DEFAULT]}; }`,
+          innerHTML: `:root { --font-size: ${fontSizeMap[cookieFontSize.value || DEFAULT_FONT_SIZE]}; }`,
         },
       ],
     })