feat: wellness settings (#927)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>

components/account/AccountPostsFollowers.vue

@@ -38,9 +38,10 @@ defineProps<{
       </template>
     </NuxtLink>
     <NuxtLink
+      v-if="!getWellnessSetting('hideFollowerCount')"
       :to="getAccountFollowersRoute(account)"
-      replace
-      text-secondary exact-active-class="text-primary"
+      replace text-secondary
+      exact-active-class="text-primary"
     >
       <template #default="{ isExactActive }">
         <CommonLocalizedNumber

components/status/StatusActions.vue

@@ -53,7 +53,7 @@ const reply = () => {
     <div flex-1>
       <StatusActionButton
         :content="$t('action.boost')"
-        :text="status.reblogsCount || ''"
+        :text="!getWellnessSetting('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 +62,7 @@ const reply = () => {
         :command="command"
         @click="toggleReblog()"
       >
-        <template v-if="status.reblogsCount" #text>
+        <template v-if="status.reblogsCount && !getWellnessSetting('hideBoostCount')" #text>
           <CommonLocalizedNumber
             keypath="action.boost_count"
             :count="status.reblogsCount"
@@ -74,7 +74,7 @@ const reply = () => {
     <div flex-1>
       <StatusActionButton
         :content="$t('action.favourite')"
-        :text="status.favouritesCount || ''"
+        :text="!getWellnessSetting('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 +83,7 @@ const reply = () => {
         :command="command"
         @click="toggleFavourite()"
       >
-        <template v-if="status.favouritesCount" #text>
+        <template v-if="status.favouritesCount && !getWellnessSetting('hideFavoriteCount')" #text>
           <CommonLocalizedNumber
             keypath="action.favourite_count"
             :count="status.favouritesCount"

composables/settings/index.ts

@@ -1,9 +1,11 @@
 import type { FeatureFlags } from './featureFlags'
+import type { WellnessSettings } from './wellness'
 import type { ColorMode, FontSize } from '~/types'
 import { STORAGE_KEY_SETTINGS } from '~/constants'
 
 export interface UserSettings {
   featureFlags: Partial<FeatureFlags>
+  wellnessSettings: Partial<WellnessSettings>
   colorMode?: ColorMode
   fontSize?: FontSize
   lang?: string
@@ -13,6 +15,7 @@ export interface UserSettings {
 export function getDefaultUserSettings(): UserSettings {
   return {
     featureFlags: {},
+    wellnessSettings: {},
   }
 }
 

composables/settings/wellness.ts

@@ -0,0 +1,36 @@
+import type { Ref } from 'vue'
+import { userSettings } from '.'
+
+export interface WellnessSettings {
+  hideBoostCount: boolean
+  hideFavoriteCount: boolean
+  hideFollowerCount: boolean
+}
+export type WellnessSettingsMap = Record<string, WellnessSettings>
+
+const DEFAULT_WELLNESS_SETTINGS: WellnessSettings = {
+  hideBoostCount: false,
+  hideFavoriteCount: false,
+  hideFollowerCount: false,
+}
+
+export function useWellnessSetting<T extends keyof WellnessSettings>(name: T): Ref<WellnessSettings[T]> {
+  return computed({
+    get() {
+      return getWellnessSetting(name)
+    },
+    set(value) {
+      if (userSettings.value)
+        userSettings.value.wellnessSettings[name] = value
+    },
+  })
+}
+
+export function getWellnessSetting<T extends keyof WellnessSettings>(name: T): WellnessSettings[T] {
+  return userSettings.value?.wellnessSettings?.[name] ?? DEFAULT_WELLNESS_SETTINGS[name]
+}
+
+export function toggleWellnessSetting(key: keyof WellnessSettings) {
+  const flag = useWellnessSetting(key)
+  flag.value = !flag.value
+}

locales/en-US.json

@@ -339,6 +339,14 @@
       "export": "Export User Tokens",
       "import": "Import User Tokens",
       "label": "Logged in users"
+    },
+    "wellness": {
+      "feature": {
+        "hide_boost_count": "Hide boost count",
+        "hide_favorite_count": "Hide favorite count",
+        "hide_follower_count": "Hide follower count"
+      },
+      "label": "Wellness"
     }
   },
   "state": {

pages/settings.vue

@@ -39,6 +39,12 @@ const isRootPath = computedEager(() => route.name === 'settings')
               :text="$t('settings.interface.label')"
               to="/settings/interface"
             />
+            <SettingsItem
+              command
+              icon="i-ri-leaf-line"
+              :text="$t('settings.wellness.label')"
+              to="/settings/wellness"
+            />
             <SettingsItem
               v-if="isHydrated && currentUser"
               command

pages/settings/wellness/index.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+useHeadFixed({
+  title: () => `${t('settings.wellness.label')} | ${t('nav.settings')}`,
+})
+</script>
+
+<template>
+  <MainContent back-on-small-screen>
+    <template #title>
+      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+        <span>{{ $t('settings.wellness.label') }}</span>
+      </div>
+    </template>
+    <SettingsToggleItem
+      :checked="getWellnessSetting('hideBoostCount')"
+      @click="toggleWellnessSetting('hideBoostCount')"
+    >
+      {{ $t('settings.wellness.feature.hide_boost_count') }}
+    </SettingsToggleItem>
+    <SettingsToggleItem
+      :checked="getWellnessSetting('hideFavoriteCount')"
+      @click="toggleWellnessSetting('hideFavoriteCount')"
+    >
+      {{ $t('settings.wellness.feature.hide_favorite_count') }}
+    </SettingsToggleItem>
+    <SettingsToggleItem
+      :checked="getWellnessSetting('hideFollowerCount')"
+      @click="toggleWellnessSetting('hideFollowerCount')"
+    >
+      {{ $t('settings.wellness.feature.hide_follower_count') }}
+    </SettingsToggleItem>
+  </MainContent>
+</template>