feat: wellness settings (#927)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
zio/stable
wheat 2023-01-10 09:45:17 -05:00 committed by GitHub
parent 81c8a74748
commit ba9a91a34e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 95 additions and 6 deletions

View File

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

View File

@ -53,7 +53,7 @@ const reply = () => {
<div flex-1> <div flex-1>
<StatusActionButton <StatusActionButton
:content="$t('action.boost')" :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" color="text-green" hover="text-green" group-hover="bg-green/10"
icon="i-ri:repeat-line" icon="i-ri:repeat-line"
active-icon="i-ri:repeat-fill" active-icon="i-ri:repeat-fill"
@ -62,7 +62,7 @@ const reply = () => {
:command="command" :command="command"
@click="toggleReblog()" @click="toggleReblog()"
> >
<template v-if="status.reblogsCount" #text> <template v-if="status.reblogsCount && !getWellnessSetting('hideBoostCount')" #text>
<CommonLocalizedNumber <CommonLocalizedNumber
keypath="action.boost_count" keypath="action.boost_count"
:count="status.reblogsCount" :count="status.reblogsCount"
@ -74,7 +74,7 @@ const reply = () => {
<div flex-1> <div flex-1>
<StatusActionButton <StatusActionButton
:content="$t('action.favourite')" :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" color="text-rose" hover="text-rose" group-hover="bg-rose/10"
icon="i-ri:heart-3-line" icon="i-ri:heart-3-line"
active-icon="i-ri:heart-3-fill" active-icon="i-ri:heart-3-fill"
@ -83,7 +83,7 @@ const reply = () => {
:command="command" :command="command"
@click="toggleFavourite()" @click="toggleFavourite()"
> >
<template v-if="status.favouritesCount" #text> <template v-if="status.favouritesCount && !getWellnessSetting('hideFavoriteCount')" #text>
<CommonLocalizedNumber <CommonLocalizedNumber
keypath="action.favourite_count" keypath="action.favourite_count"
:count="status.favouritesCount" :count="status.favouritesCount"

View File

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

View File

@ -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
}

View File

@ -339,6 +339,14 @@
"export": "Export User Tokens", "export": "Export User Tokens",
"import": "Import User Tokens", "import": "Import User Tokens",
"label": "Logged in users" "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": { "state": {

View File

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

View File

@ -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>