fix: resolved #2740

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

@@ -142,7 +142,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from "vue"
+import { computed, reactive, ref } from "vue"
 import IconUser from "~icons/lucide/user"
 import IconSettings from "~icons/lucide/settings"
 import IconDownload from "~icons/lucide/download"
@@ -153,16 +153,12 @@ import IconUserPlus from "~icons/lucide/user-plus"
 import { breakpointsTailwind, useBreakpoints, useNetwork } from "@vueuse/core"
 import { pwaDefferedPrompt, installPWA } from "@modules/pwa"
 import { probableUser$ } from "@helpers/fb/auth"
-import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
 import { useI18n } from "@composables/i18n"
-import { useToast } from "@composables/toast"
 import { useReadonlyStream } from "@composables/stream"
 import { invokeAction } from "@helpers/actions"
 
 const t = useI18n()
 
-const toast = useToast()
-
 /**
  * Once the PWA code is initialized, this holds a method
  * that can be called to show the user the installation
@@ -181,32 +177,6 @@ const network = reactive(useNetwork())
 
 const currentUser = useReadonlyStream(probableUser$, null)
 
-onMounted(() => {
-  const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
-  if (!cookiesAllowed) {
-    toast.show(`${t("app.we_use_cookies")}`, {
-      duration: 0,
-      action: [
-        {
-          text: `${t("action.learn_more")}`,
-          onClick: (_, toastObject) => {
-            setLocalConfig("cookiesAllowed", "yes")
-            toastObject.goAway(0)
-            window.open("https://docs.hoppscotch.io/privacy", "_blank")?.focus()
-          },
-        },
-        {
-          text: `${t("action.dismiss")}`,
-          onClick: (_, toastObject) => {
-            setLocalConfig("cookiesAllowed", "yes")
-            toastObject.goAway(0)
-          },
-        },
-      ],
-    })
-  }
-})
-
 // Template refs
 const tippyActions = ref<any | null>(null)
 const profile = ref<any | null>(null)

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

@@ -57,7 +57,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeMount, ref, watch } from "vue"
+import { computed, onBeforeMount, onMounted, ref, watch } from "vue"
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
@@ -66,6 +66,9 @@ import { useSetting } from "@composables/settings"
 import { defineActionHandler } from "~/helpers/actions"
 import { hookKeybindingsListener } from "~/helpers/keybindings"
 import { applySetting } from "~/newstore/settings"
+import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
+import { useToast } from "~/composables/toast"
+import { useI18n } from "~/composables/i18n"
 
 const router = useRouter()
 
@@ -81,6 +84,9 @@ const columnLayout = useSetting("COLUMN_LAYOUT")
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const mdAndLarger = breakpoints.greater("md")
 
+const toast = useToast()
+const t = useI18n()
+
 onBeforeMount(() => {
   if (!mdAndLarger.value) {
     rightSidebar.value = false
@@ -88,6 +94,32 @@ onBeforeMount(() => {
   }
 })
 
+onMounted(() => {
+  const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
+  if (!cookiesAllowed) {
+    toast.show(`${t("app.we_use_cookies")}`, {
+      duration: 0,
+      action: [
+        {
+          text: `${t("action.learn_more")}`,
+          onClick: (_, toastObject) => {
+            setLocalConfig("cookiesAllowed", "yes")
+            toastObject.goAway(0)
+            window.open("https://docs.hoppscotch.io/privacy", "_blank")?.focus()
+          },
+        },
+        {
+          text: `${t("action.dismiss")}`,
+          onClick: (_, toastObject) => {
+            setLocalConfig("cookiesAllowed", "yes")
+            toastObject.goAway(0)
+          },
+        },
+      ],
+    })
+  }
+})
+
 watch(mdAndLarger, () => {
   if (mdAndLarger.value) rightSidebar.value = true
   else {
@@ -96,14 +128,6 @@ watch(mdAndLarger, () => {
   }
 })
 
-defineActionHandler("modals.search.toggle", () => {
-  showSearch.value = !showSearch.value
-})
-
-defineActionHandler("modals.support.toggle", () => {
-  showSupport.value = !showSupport.value
-})
-
 const spacerClass = computed(() => {
   if (fontSize.value === "small" && expandNavigation.value)
     return "spacer-small"
@@ -122,6 +146,14 @@ const spacerClass = computed(() => {
   return ""
 })
 
+defineActionHandler("modals.search.toggle", () => {
+  showSearch.value = !showSearch.value
+})
+
+defineActionHandler("modals.support.toggle", () => {
+  showSupport.value = !showSupport.value
+})
+
 defineActionHandler("navigation.jump.rest", () => {
   router.push({ path: "/" })
 })