mirror of https://github.com/elk-zone/elk.git
feat: wellness settings (#927)
Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
This commit is contained in:
parent
81c8a74748
commit
ba9a91a34e
|
@ -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
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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: {},
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
}
|
|
@ -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": {
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue