fix: Add zen mode to preferences, remove shortcut (#2003)

components/magickeys/MagickeysKeyboardShortcuts.vue

@@ -66,10 +66,6 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
         description: t('magic_keys.groups.actions.boost'),
         shortcut: { keys: ['b'], isSequence: false },
       },
-      {
-        description: t('magic_keys.groups.actions.zen_mode'),
-        shortcut: { keys: ['z'], isSequence: false },
-      },
     ],
   },
   {

components/nav/NavBottomMoreMenu.vue

@@ -93,9 +93,9 @@ onBeforeUnmount(() => {
               transition-colors duration-200 transform
               hover="bg-gray-100 dark:(bg-gray-700 text-white)"
               :aria-label="$t('nav.zen_mode')"
-              @click="userSettings.zenMode = !userSettings.zenMode"
+              @click="togglePreferences('zenMode')"
             >
-              <span :class="userSettings.zenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'" class="flex-shrink-0 text-xl me-4 !align-middle" />
+              <span :class="getPreferences(userSettings, 'zenMode') ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'" class="flex-shrink-0 text-xl me-4 !align-middle" />
               {{ $t('nav.zen_mode') }}
             </button>
           </div>

components/nav/NavFooter.vue

@@ -23,9 +23,9 @@ function toggleDark() {
         <button
           flex
           text-lg
-          :class="userSettings.zenMode ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'"
+          :class="getPreferences(userSettings, 'zenMode') ? 'i-ri:layout-right-2-line' : 'i-ri:layout-right-line'"
           :aria-label="$t('nav.zen_mode')"
-          @click="userSettings.zenMode = !userSettings.zenMode"
+          @click="togglePreferences('zenMode')"
         />
       </CommonTooltip>
       <CommonTooltip :content="$t('settings.about.sponsor_action')">

components/status/StatusActionsMore.vue

@@ -125,7 +125,7 @@ function showFavoritedAndBoostedBy() {
 
     <template #popper>
       <div flex="~ col">
-        <template v-if="userSettings.zenMode">
+        <template v-if="getPreferences(userSettings, 'zenMode')">
           <CommonDropdownItem
             :text="$t('action.reply')"
             icon="i-ri:chat-1-line"

components/status/StatusCard.vue

@@ -154,7 +154,7 @@ const forceShow = ref(false)
               <StatusAccountDetails :account="status.account" />
             </AccountHoverWrapper>
             <div flex-auto />
-            <div v-show="!userSettings.zenMode" text-sm text-secondary flex="~ row nowrap" hover:underline whitespace-nowrap>
+            <div v-show="!getPreferences(userSettings, 'zenMode')" text-sm text-secondary flex="~ row nowrap" hover:underline whitespace-nowrap>
               <AccountBotIndicator v-if="status.account.bot" me-2 />
               <div flex="~ gap1" items-center>
                 <StatusVisibilityIndicator v-if="status.visibility !== 'public'" :status="status" />
@@ -182,7 +182,7 @@ const forceShow = ref(false)
             :in-notification="inNotification"
             mb2 :class="{ 'mt-2 mb1': isDM }"
           />
-          <StatusActions v-if="actions !== false" v-show="!userSettings.zenMode" :status="status" />
+          <StatusActions v-if="actions !== false" v-show="!getPreferences(userSettings, 'zenMode')" :status="status" />
         </div>
       </template>
     </div>

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')
     },
   })
 

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,
+  }
+}

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": {

pages/settings/preferences/index.vue

@@ -92,6 +92,15 @@ const userSettings = useUserSettings()
         {{ $t('settings.preferences.hide_username_emojis_description') }}
       </template>
     </SettingsToggleItem>
+    <SettingsToggleItem
+      :checked="getPreferences(userSettings, 'zenMode')"
+      @click="togglePreferences('zenMode')"
+    >
+      {{ $t("settings.preferences.zen_mode") }}
+      <template #description>
+        {{ $t('settings.preferences.zen_mode_description') }}
+      </template>
+    </SettingsToggleItem>
     <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
       <div i-ri-flask-line />
       {{ $t('settings.preferences.title') }}

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

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

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) {