feat(settings): respect settings from server (#1013)

components/settings/SettingsColorMode.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ColorMode } from '~/types'
+import type { ColorMode } from '~/composables/settings'
 
 const colorMode = useColorMode()
 

components/settings/SettingsFontSize.vue

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

components/settings/SettingsLanguage.vue

@@ -2,13 +2,14 @@
 import type { ComputedRef } from 'vue'
 import type { LocaleObject } from '#i18n'
 
-const { locale, setLocale } = useI18n()
+const userSettings = useUserSettings()
+
 const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
 </script>
 
 <template>
-  <select :value="locale" @input="e => setLocale((e.target as any).value)">
-    <option v-for="item in locales" :key="item.code" :value="item.code" :selected="locale === item.code">
+  <select v-model="userSettings.language">
+    <option v-for="item in locales" :key="item.code" :value="item.code" :selected="userSettings.language === item.code">
       {{ item.name }}
     </option>
   </select>