From 56405f52bb55fa8e4fd3ef0026fd91228c86c240 Mon Sep 17 00:00:00 2001
From: manuq <manuel.por.aca@gmail.com>
Date: Sun, 23 Apr 2023 07:21:33 -0300
Subject: [PATCH] fix: Add zen mode to preferences, remove shortcut (#2003)

---
 .../magickeys/MagickeysKeyboardShortcuts.vue  |  4 ----
 components/nav/NavBottomMoreMenu.vue          |  4 ++--
 components/nav/NavFooter.vue                  |  4 ++--
 components/status/StatusActionsMore.vue       |  2 +-
 components/status/StatusCard.vue              |  4 ++--
 composables/command.ts                        |  4 ++--
 composables/settings/definition.ts            | 22 +++++++++----------
 locales/en.json                               |  7 +++---
 pages/settings/preferences/index.vue          |  9 ++++++++
 plugins/magic-keys.client.ts                  |  2 --
 plugins/setup-global-effects.client.ts        |  2 +-
 plugins/setup-head-script.server.ts           |  2 +-
 12 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/components/magickeys/MagickeysKeyboardShortcuts.vue b/components/magickeys/MagickeysKeyboardShortcuts.vue
index 1f28580a..4a5b58be 100644
--- a/components/magickeys/MagickeysKeyboardShortcuts.vue
+++ b/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 },
-      },
     ],
   },
   {
diff --git a/components/nav/NavBottomMoreMenu.vue b/components/nav/NavBottomMoreMenu.vue
index b085b14a..e75e3736 100644
--- a/components/nav/NavBottomMoreMenu.vue
+++ b/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>
diff --git a/components/nav/NavFooter.vue b/components/nav/NavFooter.vue
index 865e4bf2..9331e333 100644
--- a/components/nav/NavFooter.vue
+++ b/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')">
diff --git a/components/status/StatusActionsMore.vue b/components/status/StatusActionsMore.vue
index 2f861b54..e900c20a 100644
--- a/components/status/StatusActionsMore.vue
+++ b/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"
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index a7303333..0ab4ac8b 100644
--- a/components/status/StatusCard.vue
+++ b/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>
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') }}
       </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') }}
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) {