+
@@ -182,7 +182,7 @@ const forceShow = ref(false)
:in-notification="inNotification"
mb2 :class="{ 'mt-2 mb1': isDM }"
/>
-
+
diff --git a/composables/command.ts b/composables/command.ts
index 5adc0ff0..4287d8c3 100644
--- a/composables/command.ts
+++ b/composables/command.ts
@@ -274,10 +274,10 @@ export function provideGlobalCommands() {
scope: 'Preferences',
name: () => t('command.toggle_zen_mode'),
- icon: () => userSettings.value.zenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line',
+ icon: () => userSettings.value.preferences.zenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line',
onActivate() {
- userSettings.value.zenMode = !userSettings.value.zenMode
+ togglePreferences('zenMode')
},
})
diff --git a/composables/settings/definition.ts b/composables/settings/definition.ts
index 269df245..b3db9328 100644
--- a/composables/settings/definition.ts
+++ b/composables/settings/definition.ts
@@ -20,6 +20,7 @@ export interface PreferencesSettings {
enableAutoplay: boolean
enableDataSaving: boolean
enablePinchToZoom: boolean
+ zenMode: boolean
experimentalVirtualScroller: boolean
experimentalGitHubCards: boolean
experimentalUserPicker: boolean
@@ -31,7 +32,6 @@ export interface UserSettings {
fontSize: FontSize
language: string
disabledTranslationLanguages: string[]
- zenMode: boolean
themeColors?: ThemeColors
}
@@ -57,16 +57,6 @@ export function getDefaultLanguage(languages: string[]) {
return matchLanguages(languages, navigator.languages) || 'en-US'
}
-export function getDefaultUserSettings(locales: string[]): UserSettings {
- return {
- language: getDefaultLanguage(locales),
- fontSize: DEFAULT_FONT_SIZE,
- disabledTranslationLanguages: [],
- zenMode: false,
- preferences: {},
- }
-}
-
export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
hideAltIndicatorOnPosts: false,
hideBoostCount: false,
@@ -80,7 +70,17 @@ export const DEFAULT__PREFERENCES_SETTINGS: PreferencesSettings = {
enableAutoplay: true,
enableDataSaving: false,
enablePinchToZoom: false,
+ zenMode: false,
experimentalVirtualScroller: true,
experimentalGitHubCards: true,
experimentalUserPicker: true,
}
+
+export function getDefaultUserSettings(locales: string[]): UserSettings {
+ return {
+ language: getDefaultLanguage(locales),
+ fontSize: DEFAULT_FONT_SIZE,
+ disabledTranslationLanguages: [],
+ preferences: DEFAULT__PREFERENCES_SETTINGS,
+ }
+}
diff --git a/locales/en.json b/locales/en.json
index 0a2ae179..168ad54c 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -208,8 +208,7 @@
"command_mode": "Command mode",
"compose": "Compose",
"favourite": "Favourite",
- "title": "Actions",
- "zen_mode": "Zen mode"
+ "title": "Actions"
},
"media": {
"title": "Media"
@@ -453,7 +452,9 @@
"title": "Experimental Features",
"user_picker": "User Picker",
"virtual_scroll": "Virtual Scrolling",
- "wellbeing": "Wellbeing"
+ "wellbeing": "Wellbeing",
+ "zen_mode": "Zen mode",
+ "zen_mode_description": "Hide asides unless the mouse cursor is over them. Also hide some elements from the timeline."
},
"profile": {
"appearance": {
diff --git a/pages/settings/preferences/index.vue b/pages/settings/preferences/index.vue
index 3fef0a2c..90213abb 100644
--- a/pages/settings/preferences/index.vue
+++ b/pages/settings/preferences/index.vue
@@ -92,6 +92,15 @@ const userSettings = useUserSettings()
{{ $t('settings.preferences.hide_username_emojis_description') }}
+
+ {{ $t("settings.preferences.zen_mode") }}
+
+ {{ $t('settings.preferences.zen_mode_description') }}
+
+
{{ $t('settings.preferences.title') }}
diff --git a/plugins/magic-keys.client.ts b/plugins/magic-keys.client.ts
index 79fd2392..a2e3b39d 100644
--- a/plugins/magic-keys.client.ts
+++ b/plugins/magic-keys.client.ts
@@ -2,7 +2,6 @@ import type { RouteLocationRaw } from 'vue-router'
import { useMagicSequence } from '~/composables/magickeys'
export default defineNuxtPlugin(({ $scrollToTop }) => {
- const userSettings = useUserSettings()
const keys = useMagicKeys()
const router = useRouter()
@@ -23,7 +22,6 @@ export default defineNuxtPlugin(({ $scrollToTop }) => {
}
whenever(logicAnd(notUsingInput, keys['?']), toggleKeyboardShortcuts)
- whenever(logicAnd(notUsingInput, keys.z), () => userSettings.value.zenMode = !userSettings.value.zenMode)
const defaultPublishDialog = () => {
const current = keys.current
diff --git a/plugins/setup-global-effects.client.ts b/plugins/setup-global-effects.client.ts
index a44bbb1d..ada7198a 100644
--- a/plugins/setup-global-effects.client.ts
+++ b/plugins/setup-global-effects.client.ts
@@ -10,7 +10,7 @@ export default defineNuxtPlugin(() => {
html.style.setProperty('--font-size', fontSize ? (oldFontSizeMap[fontSize as OldFontSize] ?? fontSize) : DEFAULT_FONT_SIZE)
})
watchEffect(() => {
- html.classList.toggle('zen', userSettings.value.zenMode)
+ html.classList.toggle('zen', userSettings.value.preferences.zenMode)
})
watchEffect(() => {
Object.entries(userSettings.value.themeColors || {}).forEach(([k, v]) => html.style.setProperty(k, v))
diff --git a/plugins/setup-head-script.server.ts b/plugins/setup-head-script.server.ts
index fde9d5a5..47244e04 100644
--- a/plugins/setup-head-script.server.ts
+++ b/plugins/setup-head-script.server.ts
@@ -25,7 +25,7 @@ export default defineNuxtPlugin(() => {
if (settings.language) {
html.setAttribute('lang', settings.language)
}
- if (settings.zenMode) {
+ if (settings.preferences.zenMode) {
html.classList.add('zen')
}
if (settings.themeColors) {