fix: persist interceptor state for logged out user (#4060)

* fix: persist interceptor state for loged out user

* refactor: update interceptor section in settings page

* chore: update settings page interceptor section UI

* chore: minoir ui and code refactor

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

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col space-y-2">
-    <div class="flex flex-col px-4 pt-2">
+    <div v-if="isTooltipComponent" class="flex flex-col px-4 pt-2">
       <h2 class="inline-flex pb-1 font-semibold text-secondaryDark">
         {{ t("settings.interceptor") }}
       </h2>
@@ -19,6 +19,9 @@
           :value="interceptor.interceptorID"
           :label="unref(interceptor.name(t))"
           :selected="interceptorSelection === interceptor.interceptorID"
+          :class="{
+            '!px-0 hover:bg-transparent': !isTooltipComponent,
+          }"
           @change="interceptorSelection = interceptor.interceptorID"
         />
 
@@ -39,6 +42,15 @@ import { InterceptorService } from "~/services/interceptor.service"
 
 const t = useI18n()
 
+withDefaults(
+  defineProps<{
+    isTooltipComponent?: boolean
+  }>(),
+  {
+    isTooltipComponent: true,
+  }
+)
+
 const interceptorService = useService(InterceptorService)
 
 const interceptorSelection =

packages/hoppscotch-common/src/components/settings/Extension.vue

@@ -36,16 +36,6 @@
       />
     </span>
   </div>
-  <div class="space-y-4 py-4">
-    <div class="flex items-center">
-      <HoppSmartToggle
-        :on="extensionEnabled"
-        @change="extensionEnabled = !extensionEnabled"
-      >
-        {{ t("settings.extensions_use_toggle") }}
-      </HoppSmartToggle>
-    </div>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -55,34 +45,12 @@ import IconCheckCircle from "~icons/lucide/check-circle"
 import { useI18n } from "@composables/i18n"
 import { ExtensionInterceptorService } from "~/platform/std/interceptors/extension"
 import { useService } from "dioc/vue"
-import { computed } from "vue"
-import { InterceptorService } from "~/services/interceptor.service"
-import { platform } from "~/platform"
 
 const t = useI18n()
 
-const interceptorService = useService(InterceptorService)
 const extensionService = useService(ExtensionInterceptorService)
 
 const extensionVersion = extensionService.extensionVersion
 const hasChromeExtInstalled = extensionService.chromeExtensionInstalled
 const hasFirefoxExtInstalled = extensionService.firefoxExtensionInstalled
-
-const extensionEnabled = computed({
-  get() {
-    return (
-      interceptorService.currentInterceptorID.value ===
-      extensionService.interceptorID
-    )
-  },
-  set(active) {
-    if (active) {
-      interceptorService.currentInterceptorID.value =
-        extensionService.interceptorID
-    } else {
-      interceptorService.currentInterceptorID.value =
-        platform.interceptors.default
-    }
-  },
-})
 </script>

packages/hoppscotch-common/src/components/settings/Proxy.vue

@@ -8,16 +8,6 @@
       :label="t('app.proxy_privacy_policy')"
     />.
   </div>
-  <div class="space-y-4 py-4">
-    <div class="flex items-center">
-      <HoppSmartToggle
-        :on="proxyEnabled"
-        @change="proxyEnabled = !proxyEnabled"
-      >
-        {{ t("settings.proxy_use_toggle") }}
-      </HoppSmartToggle>
-    </div>
-  </div>
   <div class="flex items-center space-x-2 py-4">
     <HoppSmartInput
       v-model="PROXY_URL"
@@ -50,7 +40,6 @@ import { computed } from "vue"
 import { useService } from "dioc/vue"
 import { InterceptorService } from "~/services/interceptor.service"
 import { proxyInterceptor } from "~/platform/std/interceptors/proxy"
-import { platform } from "~/platform"
 
 const t = useI18n()
 const toast = useToast()
@@ -59,23 +48,11 @@ const interceptorService = useService(InterceptorService)
 
 const PROXY_URL = useSetting("PROXY_URL")
 
-const proxyEnabled = computed({
-  get() {
-    return (
-      interceptorService.currentInterceptorID.value ===
-      proxyInterceptor.interceptorID
-    )
-  },
-  set(active) {
-    if (active) {
-      interceptorService.currentInterceptorID.value =
-        proxyInterceptor.interceptorID
-    } else {
-      interceptorService.currentInterceptorID.value =
-        platform.interceptors.default
-    }
-  },
-})
+const proxyEnabled = computed(
+  () =>
+    interceptorService.currentInterceptorID.value ===
+    proxyInterceptor.interceptorID
+)
 
 const clearIcon = refAutoReset<typeof IconRotateCCW | typeof IconCheck>(
   IconRotateCCW,