refactor: remove zen mode from the app (#3337)

* refactor: remove zen mode from settings

* refactor: remove zen mode from footer and options

packages/hoppscotch-common/src/components/app/Footer.vue

@@ -10,18 +10,6 @@
           :class="{ '-rotate-180': !EXPAND_NAVIGATION }"
           @click="EXPAND_NAVIGATION = !EXPAND_NAVIGATION"
         />
-        <HoppButtonSecondary
-          v-tippy="{ theme: 'tooltip' }"
-          :title="`${ZEN_MODE ? t('action.turn_off') : t('action.turn_on')} ${t(
-            'layout.zen_mode'
-          )}`"
-          :icon="ZEN_MODE ? IconMinimize : IconMaximize"
-          :class="{
-            '!text-accent !focus-visible:text-accentDark !hover:text-accentDark':
-              ZEN_MODE,
-          }"
-          @click="ZEN_MODE = !ZEN_MODE"
-        />
         <tippy interactive trigger="click" theme="popover">
           <HoppButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
@@ -211,11 +199,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue"
+import { ref } from "vue"
 import { version } from "~/../package.json"
 import IconSidebar from "~icons/lucide/sidebar"
-import IconMinimize from "~icons/lucide/minimize"
-import IconMaximize from "~icons/lucide/maximize"
 import IconZap from "~icons/lucide/zap"
 import IconShare2 from "~icons/lucide/share-2"
 import IconColumns from "~icons/lucide/columns"
@@ -241,7 +227,6 @@ const showDeveloperOptions = ref(false)
 
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
 const SIDEBAR = useSetting("SIDEBAR")
-const ZEN_MODE = useSetting("ZEN_MODE")
 const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
 const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
 
@@ -252,13 +237,6 @@ const currentUser = useReadonlyStream(
   platform.auth.getCurrentUser()
 )
 
-watch(
-  () => ZEN_MODE.value,
-  () => {
-    EXPAND_NAVIGATION.value = !ZEN_MODE.value
-  }
-)
-
 const nativeShare = () => {
   if (navigator.share) {
     navigator

packages/hoppscotch-common/src/components/app/Options.vue

@@ -67,7 +67,6 @@
 </template>
 
 <script setup lang="ts">
-import { watch } from "vue"
 import IconSidebar from "~icons/lucide/sidebar"
 import IconSidebarOpen from "~icons/lucide/sidebar-open"
 import IconChevronRight from "~icons/lucide/chevron-right"
@@ -77,17 +76,9 @@ import { platform } from "~/platform"
 
 const t = useI18n()
 
-const ZEN_MODE = useSetting("ZEN_MODE")
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
 const SIDEBAR = useSetting("SIDEBAR")
 
-watch(
-  () => ZEN_MODE.value,
-  () => {
-    EXPAND_NAVIGATION.value = !ZEN_MODE.value
-  }
-)
-
 defineProps<{
   show: boolean
 }>()

packages/hoppscotch-common/src/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex w-screen h-screen">
     <Splitpanes class="no-splitter" :dbl-click-splitter="false" horizontal>
-      <Pane v-if="!zenMode" style="height: auto">
+      <Pane style="height: auto">
         <AppHeader />
       </Pane>
       <Pane :class="spacerClass" class="flex flex-1 !overflow-auto md:mb-0">
@@ -81,7 +81,6 @@ const showSupport = ref(false)
 
 const fontSize = useSetting("FONT_SIZE")
 const expandNavigation = useSetting("EXPAND_NAVIGATION")
-const zenMode = useSetting("ZEN_MODE")
 const rightSidebar = useSetting("SIDEBAR")
 const columnLayout = useSetting("COLUMN_LAYOUT")
 

packages/hoppscotch-common/src/newstore/settings.ts

@@ -49,7 +49,6 @@ export type SettingsDef = {
   EXPAND_NAVIGATION: boolean
   SIDEBAR: boolean
   SIDEBAR_ON_LEFT: boolean
-  ZEN_MODE: boolean
   FONT_SIZE: HoppFontSize
   COLUMN_LAYOUT: boolean
 }
@@ -76,7 +75,6 @@ export const getDefaultSettings = (): SettingsDef => ({
   EXPAND_NAVIGATION: true,
   SIDEBAR: true,
   SIDEBAR_ON_LEFT: true,
-  ZEN_MODE: false,
   FONT_SIZE: "small",
   COLUMN_LAYOUT: true,
 })

packages/hoppscotch-common/src/pages/settings.vue

@@ -90,14 +90,6 @@
                   {{ t("settings.sidebar_on_left") }}
                 </HoppSmartToggle>
               </div>
-              <div class="flex items-center">
-                <HoppSmartToggle
-                  :on="ZEN_MODE"
-                  @change="toggleSetting('ZEN_MODE')"
-                >
-                  {{ t("layout.zen_mode") }}
-                </HoppSmartToggle>
-              </div>
             </div>
           </section>
         </div>
@@ -178,7 +170,6 @@ const PROXY_URL = useSetting("PROXY_URL")
 const TELEMETRY_ENABLED = useSetting("TELEMETRY_ENABLED")
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
 const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
-const ZEN_MODE = useSetting("ZEN_MODE")
 
 const confirmRemove = ref(false)
 
@@ -186,10 +177,6 @@ const proxySettings = computed(() => ({
   url: PROXY_URL.value,
 }))
 
-watch(ZEN_MODE, (mode) => {
-  applySetting("EXPAND_NAVIGATION", !mode)
-})
-
 watch(
   proxySettings,
   ({ url }) => {