fix: make search and support available in zen mode

packages/hoppscotch-app/components/app/Header.vue

@@ -25,7 +25,7 @@
           :title="`${t('app.search')} <xmp>/</xmp>`"
           svg="search"
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
-          @click.native="showSearch = true"
+          @click.native="invokeAction('modals.search.toggle')"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
@@ -34,7 +34,7 @@
           } <xmp>?</xmp>`"
           svg="life-buoy"
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
-          @click.native="showSupport = true"
+          @click.native="invokeAction('modals.support.toggle')"
         />
         <ButtonSecondary
           v-if="currentUser === null"
@@ -139,14 +139,7 @@
     </header>
     <AppAnnouncement v-if="!network.isOnline" />
     <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
-    <AppSupport
-      v-if="mdAndLarger"
-      :show="showSupport"
-      @hide-modal="showSupport = false"
-    />
-    <AppOptions v-else :show="showSupport" @hide-modal="showSupport = false" />
     <TeamsModal :show="showTeamsModal" @hide-modal="showTeamsModal = false" />
-    <AppPowerSearch :show="showSearch" @hide-modal="showSearch = false" />
   </div>
 </template>
 
@@ -161,7 +154,7 @@ import {
   useI18n,
   useToast,
 } from "~/helpers/utils/composables"
-import { defineActionHandler } from "~/helpers/actions"
+import { invokeAction } from "~/helpers/actions"
 
 const t = useI18n()
 
@@ -174,10 +167,8 @@ const toast = useToast()
  */
 const showInstallPrompt = ref(() => Promise.resolve()) // Async no-op till it is initialized
 
-const showSupport = ref(false)
 const showLogin = ref(false)
 const showTeamsModal = ref(false)
-const showSearch = ref(false)
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const mdAndLarger = breakpoints.greater("md")
@@ -186,14 +177,6 @@ const network = reactive(useNetwork())
 
 const currentUser = useReadonlyStream(probableUser$, null)
 
-defineActionHandler("modals.support.toggle", () => {
-  showSupport.value = !showSupport.value
-})
-
-defineActionHandler("modals.search.toggle", () => {
-  showSearch.value = !showSearch.value
-})
-
 onMounted(() => {
   // Initializes the PWA code - checks if the app is installed,
   // etc.

packages/hoppscotch-app/layouts/default.vue

@@ -45,6 +45,13 @@
         <AppSidenav />
       </Pane>
     </Splitpanes>
+    <AppPowerSearch :show="showSearch" @hide-modal="showSearch = false" />
+    <AppSupport
+      v-if="mdAndLarger"
+      :show="showSupport"
+      @hide-modal="showSupport = false"
+    />
+    <AppOptions v-else :show="showSupport" @hide-modal="showSupport = false" />
   </div>
 </template>
 
@@ -56,6 +63,7 @@ import {
   useContext,
   useRouter,
   watch,
+  ref,
 } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
@@ -209,10 +217,23 @@ export default defineComponent({
     const breakpoints = useBreakpoints(breakpointsTailwind)
     const mdAndLarger = breakpoints.greater("md")
 
+    const showSearch = ref(false)
+    const showSupport = ref(false)
+
+    defineActionHandler("modals.search.toggle", () => {
+      showSearch.value = !showSearch.value
+    })
+
+    defineActionHandler("modals.support.toggle", () => {
+      showSupport.value = !showSupport.value
+    })
+
     return {
       mdAndLarger,
       spacerClass,
       ZEN_MODE: useSetting("ZEN_MODE"),
+      showSearch,
+      showSupport,
     }
   },
   head() {