From ba9a91a34e838478aecba0e3c2789d85e39278cf Mon Sep 17 00:00:00 2001
From: wheat <jacobrclevenger@gmail.com>
Date: Tue, 10 Jan 2023 09:45:17 -0500
Subject: [PATCH] feat: wellness settings (#927)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
---
 components/account/AccountPostsFollowers.vue |  5 +--
 components/status/StatusActions.vue          |  8 ++---
 composables/settings/index.ts                |  3 ++
 composables/settings/wellness.ts             | 36 ++++++++++++++++++++
 locales/en-US.json                           |  8 +++++
 pages/settings.vue                           |  6 ++++
 pages/settings/wellness/index.vue            | 35 +++++++++++++++++++
 7 files changed, 95 insertions(+), 6 deletions(-)
 create mode 100644 composables/settings/wellness.ts
 create mode 100644 pages/settings/wellness/index.vue

diff --git a/components/account/AccountPostsFollowers.vue b/components/account/AccountPostsFollowers.vue
index 9aaba0d0..f2e1cbcc 100644
--- a/components/account/AccountPostsFollowers.vue
+++ b/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
diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue
index 406750ab..61710810 100644
--- a/components/status/StatusActions.vue
+++ b/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"
diff --git a/composables/settings/index.ts b/composables/settings/index.ts
index c59283d3..e53fb847 100644
--- a/composables/settings/index.ts
+++ b/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: {},
   }
 }
 
diff --git a/composables/settings/wellness.ts b/composables/settings/wellness.ts
new file mode 100644
index 00000000..164365e6
--- /dev/null
+++ b/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
+}
diff --git a/locales/en-US.json b/locales/en-US.json
index 4f02bd75..39f614bc 100644
--- a/locales/en-US.json
+++ b/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": {
diff --git a/pages/settings.vue b/pages/settings.vue
index 3bbd4620..d104e544 100644
--- a/pages/settings.vue
+++ b/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
diff --git a/pages/settings/wellness/index.vue b/pages/settings/wellness/index.vue
new file mode 100644
index 00000000..14b6e0fa
--- /dev/null
+++ b/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>