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

components/account/AccountPostsFollowers.vue

@@ -4,6 +4,8 @@ import type { mastodon } from 'masto'
 defineProps<{
   account: mastodon.v1.Account
 }>()
+
+const userSettings = useUserSettings()
 </script>
 
 <template>
@@ -38,7 +40,7 @@ defineProps<{
       </template>
     </NuxtLink>
     <NuxtLink
-      v-if="!getWellnessSetting('hideFollowerCount')"
+      v-if="!getWellnessSetting(userSettings, 'hideFollowerCount')"
       :to="getAccountFollowersRoute(account)"
       replace text-secondary
       exact-active-class="text-primary"

components/nav/NavBottomMoreMenu.vue

@@ -4,6 +4,8 @@ let { modelValue } = $defineModel<{
 }>()
 const colorMode = useColorMode()
 
+const userSettings = useUserSettings()
+
 function toggleVisible() {
   modelValue = !modelValue
 }

components/nav/NavFooter.vue

@@ -2,6 +2,8 @@
 const buildInfo = useRuntimeConfig().public.buildInfo
 const timeAgoOptions = useTimeAgoOptions()
 
+const userSettings = useUserSettings()
+
 const buildTimeDate = new Date(buildInfo.time)
 const buildTimeAgo = useTimeAgo(buildTimeDate, timeAgoOptions)
 

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>

components/status/StatusActions.vue

@@ -11,6 +11,8 @@ const focusEditor = inject<typeof noop>('focus-editor', noop)
 
 const { details, command } = $(props)
 
+const userSettings = useUserSettings()
+
 const {
   status,
   isLoading,
@@ -53,7 +55,7 @@ const reply = () => {
     <div flex-1>
       <StatusActionButton
         :content="$t('action.boost')"
-        :text="!getWellnessSetting('hideBoostCount') && status.reblogsCount ? status.reblogsCount : ''"
+        :text="!getWellnessSetting(userSettings, 'hideBoostCount') && status.reblogsCount ? status.reblogsCount : ''"
         color="text-green" hover="text-green" group-hover="bg-green/10"
         icon="i-ri:repeat-line"
         active-icon="i-ri:repeat-fill"
@@ -62,7 +64,7 @@ const reply = () => {
         :command="command"
         @click="toggleReblog()"
       >
-        <template v-if="status.reblogsCount && !getWellnessSetting('hideBoostCount')" #text>
+        <template v-if="status.reblogsCount && !getWellnessSetting(userSettings, 'hideBoostCount')" #text>
           <CommonLocalizedNumber
             keypath="action.boost_count"
             :count="status.reblogsCount"
@@ -74,7 +76,7 @@ const reply = () => {
     <div flex-1>
       <StatusActionButton
         :content="$t('action.favourite')"
-        :text="!getWellnessSetting('hideFavoriteCount') && status.favouritesCount ? status.favouritesCount : ''"
+        :text="!getWellnessSetting(userSettings, 'hideFavoriteCount') && status.favouritesCount ? status.favouritesCount : ''"
         color="text-rose" hover="text-rose" group-hover="bg-rose/10"
         icon="i-ri:heart-3-line"
         active-icon="i-ri:heart-3-fill"
@@ -83,7 +85,7 @@ const reply = () => {
         :command="command"
         @click="toggleFavourite()"
       >
-        <template v-if="status.favouritesCount && !getWellnessSetting('hideFavoriteCount')" #text>
+        <template v-if="status.favouritesCount && !getWellnessSetting(userSettings, 'hideFavoriteCount')" #text>
           <CommonLocalizedNumber
             keypath="action.favourite_count"
             :count="status.favouritesCount"

components/status/StatusActionsMore.vue

@@ -23,6 +23,7 @@ const clipboard = useClipboard()
 const router = useRouter()
 const route = useRoute()
 const { t } = useI18n()
+const userSettings = useUserSettings()
 
 const isAuthor = $computed(() => status.account.id === currentUser.value?.account.id)
 

components/status/StatusCard.vue

@@ -22,6 +22,7 @@ const props = withDefaults(
   }>(),
   { actions: true },
 )
+const userSettings = useUserSettings()
 
 const status = $computed(() => {
   if (props.status.reblog && !props.status.content)