fix: interceptor toggle issues

packages/hoppscotch-app/pages/settings.vue

@@ -155,7 +155,7 @@
               <div class="flex items-center">
                 <SmartToggle
                   :on="EXTENSIONS_ENABLED"
-                  @change="toggleSetting('EXTENSIONS_ENABLED')"
+                  @change="toggleInterceptor('extension')"
                 >
                   {{ t("settings.extensions_use_toggle") }}
                 </SmartToggle>
@@ -184,7 +184,7 @@
               <div class="flex items-center">
                 <SmartToggle
                   :on="PROXY_ENABLED"
-                  @change="toggleSetting('PROXY_ENABLED')"
+                  @change="toggleInterceptor('proxy')"
                 >
                   {{ t("settings.proxy_use_toggle") }}
                 </SmartToggle>
@@ -311,17 +311,21 @@ watch(
 )
 
 // Extensions and proxy should not be enabled at the same time
-watch(
-  [EXTENSIONS_ENABLED, PROXY_ENABLED],
-  ([extEnabled, proxEnabled], [oldExtEnabled]) => {
-    // Detect which changed over the watch
-    const changedKey = extEnabled === oldExtEnabled ? "extension" : "proxy"
+const toggleInterceptor = (interceptor: "extension" | "proxy") => {
+  if (interceptor === "extension") {
+    EXTENSIONS_ENABLED.value = !EXTENSIONS_ENABLED.value
 
-    if (changedKey === "extension") {
-      if (proxEnabled) PROXY_ENABLED.value = false
-    } else if (extEnabled) EXTENSIONS_ENABLED.value = false
+    if (EXTENSIONS_ENABLED.value) {
+      PROXY_ENABLED.value = false
+    }
+  } else {
+    PROXY_ENABLED.value = !PROXY_ENABLED.value
+
+    if (PROXY_ENABLED.value) {
+      EXTENSIONS_ENABLED.value = false
+    }
   }
-)
+}
 
 const showConfirmModal = () => {
   if (TELEMETRY_ENABLED.value) confirmRemove.value = true