refactor: rewrite settings page using setup scripts

packages/hoppscotch-app/pages/settings.vue

@@ -4,22 +4,22 @@
       <div class="md:grid md:gap-4 md:grid-cols-3">
         <div class="p-8 md:col-span-1">
           <h3 class="heading">
-            {{ $t("settings.theme") }}
+            {{ t("settings.theme") }}
           </h3>
           <p class="my-1 text-secondaryLight">
-            {{ $t("settings.theme_description") }}
+            {{ t("settings.theme_description") }}
           </p>
         </div>
         <div class="space-y-8 p-8 md:col-span-2">
           <section>
             <h4 class="font-semibold text-secondaryDark">
-              {{ $t("settings.background") }}
+              {{ t("settings.background") }}
             </h4>
             <div class="my-1 text-secondaryLight">
               <ColorScheme placeholder="..." tag="span">
-                {{ $t(getColorModeName($colorMode.preference)) }}
+                {{ t(getColorModeName(colorMode.preference)) }}
-                <span v-if="$colorMode.preference === 'system'">
+                <span v-if="colorMode.preference === 'system'">
-                  ({{ $t(getColorModeName($colorMode.value)) }})
+                  ({{ t(getColorModeName(colorMode.value)) }})
                 </span>
               </ColorScheme>
             </div>
@@ -29,7 +29,7 @@
           </section>
           <section>
             <h4 class="font-semibold text-secondaryDark">
-              {{ $t("settings.accent_color") }}
+              {{ t("settings.accent_color") }}
             </h4>
             <div class="my-1 text-secondaryLight">
               {{ active.charAt(0).toUpperCase() + active.slice(1) }}
@@ -40,7 +40,7 @@
           </section>
           <section>
             <h4 class="font-semibold text-secondaryDark">
-              {{ $t("settings.font_size") }}
+              {{ t("settings.font_size") }}
             </h4>
             <div class="mt-4">
               <SmartFontSizePicker />
@@ -48,7 +48,7 @@
           </section>
           <section>
             <h4 class="font-semibold text-secondaryDark">
-              {{ $t("settings.language") }}
+              {{ t("settings.language") }}
             </h4>
             <div class="mt-4">
               <SmartChangeLanguage />
@@ -56,22 +56,22 @@
           </section>
           <section>
             <h4 class="font-semibold text-secondaryDark">
-              {{ $t("settings.experiments") }}
+              {{ t("settings.experiments") }}
             </h4>
             <div class="my-1 text-secondaryLight">
-              {{ $t("settings.experiments_notice") }}
+              {{ t("settings.experiments_notice") }}
               <SmartLink
                 class="link"
                 to="https://github.com/hoppscotch/hoppscotch/issues/new/choose"
                 blank
               >
-                {{ $t("app.contact_us") }} </SmartLink
+                {{ t("app.contact_us") }} </SmartLink
               >.
             </div>
             <div class="space-y-4 py-4">
               <div class="flex items-center">
                 <SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal">
-                  {{ $t("settings.telemetry") }}
+                  {{ t("settings.telemetry") }}
                 </SmartToggle>
               </div>
               <div class="flex items-center">
@@ -79,7 +79,7 @@
                   :on="EXPAND_NAVIGATION"
                   @change="toggleSetting('EXPAND_NAVIGATION')"
                 >
-                  {{ $t("settings.expand_navigation") }}
+                  {{ t("settings.expand_navigation") }}
                 </SmartToggle>
               </div>
               <div class="flex items-center">
@@ -87,12 +87,12 @@
                   :on="SIDEBAR_ON_LEFT"
                   @change="toggleSetting('SIDEBAR_ON_LEFT')"
                 >
-                  {{ $t("settings.sidebar_on_left") }}
+                  {{ t("settings.sidebar_on_left") }}
                 </SmartToggle>
               </div>
               <div class="flex items-center">
                 <SmartToggle :on="ZEN_MODE" @change="toggleSetting('ZEN_MODE')">
-                  {{ $t("layout.zen_mode") }}
+                  {{ t("layout.zen_mode") }}
                 </SmartToggle>
               </div>
             </div>
@@ -103,28 +103,28 @@
       <div class="md:grid md:gap-4 md:grid-cols-3">
         <div class="p-8 md:col-span-1">
           <h3 class="heading">
-            {{ $t("settings.interceptor") }}
+            {{ t("settings.interceptor") }}
           </h3>
           <p class="my-1 text-secondaryLight">
-            {{ $t("settings.interceptor_description") }}
+            {{ t("settings.interceptor_description") }}
           </p>
         </div>
         <div class="space-y-8 p-8 md:col-span-2">
           <section>
             <h4 class="font-semibold text-secondaryDark">
-              {{ $t("settings.extensions") }}
+              {{ t("settings.extensions") }}
             </h4>
             <div class="my-1 text-secondaryLight">
               <span v-if="extensionVersion != null">
                 {{
-                  `${$t("settings.extension_version")}: v${
+                  `${t("settings.extension_version")}: v${
                     extensionVersion.major
                   }.${extensionVersion.minor}`
                 }}
               </span>
               <span v-else>
-                {{ $t("settings.extension_version") }}:
+                {{ t("settings.extension_version") }}:
-                {{ $t("settings.extension_ver_not_reported") }}
+                {{ t("settings.extension_ver_not_reported") }}
               </span>
             </div>
             <div class="flex flex-col space-y-2 py-4">
@@ -157,18 +157,18 @@
                   :on="EXTENSIONS_ENABLED"
                   @change="toggleSetting('EXTENSIONS_ENABLED')"
                 >
-                  {{ $t("settings.extensions_use_toggle") }}
+                  {{ t("settings.extensions_use_toggle") }}
                 </SmartToggle>
               </div>
             </div>
           </section>
           <section>
             <h4 class="font-semibold text-secondaryDark">
-              {{ $t("settings.proxy") }}
+              {{ t("settings.proxy") }}
             </h4>
             <div class="my-1 text-secondaryLight">
               {{
-                `${$t("settings.official_proxy_hosting")} ${$t(
+                `${t("settings.official_proxy_hosting")} ${t(
                   "settings.read_the"
                 )}`
               }}
@@ -177,7 +177,7 @@
                 to="https://docs.hoppscotch.io/privacy"
                 blank
               >
-                {{ $t("app.proxy_privacy_policy") }} </SmartLink
+                {{ t("app.proxy_privacy_policy") }} </SmartLink
               >.
             </div>
             <div class="space-y-4 py-4">
@@ -186,7 +186,7 @@
                   :on="PROXY_ENABLED"
                   @change="toggleSetting('PROXY_ENABLED')"
                 >
-                  {{ $t("settings.proxy_use_toggle") }}
+                  {{ t("settings.proxy_use_toggle") }}
                 </SmartToggle>
               </div>
             </div>
@@ -202,12 +202,12 @@
                   :disabled="!PROXY_ENABLED"
                 />
                 <label for="url">
-                  {{ $t("settings.proxy_url") }}
+                  {{ t("settings.proxy_url") }}
                 </label>
               </div>
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('settings.reset_default')"
+                :title="t('settings.reset_default')"
                 :svg="clearIcon"
                 outline
                 class="rounded"
@@ -220,7 +220,7 @@
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="`${$t('confirm.remove_telemetry')} ${$t(
+      :title="`${t('confirm.remove_telemetry')} ${t(
         'settings.telemetry_helps_us'
       )}`"
       @hide-modal="confirmRemove = false"
@@ -234,117 +234,106 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { ref, computed, watch, defineComponent } from "@nuxtjs/composition-api"
+import { applySetting, toggleSetting, useSetting } from "~/newstore/settings"
+import { useToast, useI18n, useColorMode } from "~/helpers/utils/composables"
 import {
   hasExtensionInstalled,
   hasChromeExtensionInstalled,
   hasFirefoxExtensionInstalled,
 } from "~/helpers/strategies/ExtensionStrategy"
-import {
-  applySetting,
-  toggleSetting,
-  defaultSettings,
-  useSetting,
-} from "~/newstore/settings"
-import type { KeysMatching } from "~/types/ts-utils"
 import { getLocalConfig } from "~/newstore/localpersistence"
 
-type SettingsType = typeof defaultSettings
+const t = useI18n()
+const toast = useToast()
+const colorMode = useColorMode()
 
+const PROXY_ENABLED = useSetting("PROXY_ENABLED")
+const PROXY_URL = useSetting("PROXY_URL")
+const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")
+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 extensionVersion = hasExtensionInstalled()
+  ? window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
+  : null
+
+const hasChromeExtInstalled = hasChromeExtensionInstalled()
+
+const hasFirefoxExtInstalled = hasFirefoxExtensionInstalled()
+
+const clearIcon = ref("rotate-ccw")
+
+const active = ref(getLocalConfig("THEME_COLOR") || "blue")
+
+const confirmRemove = ref(false)
+
+const proxySettings = computed(() => ({
+  url: PROXY_URL.value,
+}))
+
+watch(ZEN_MODE, (mode) => {
+  applySetting("EXPAND_NAVIGATION", !mode)
+})
+
+watch(
+  proxySettings,
+  ({ url }) => {
+    applySetting("PROXY_URL", url)
+  },
+  { deep: true }
+)
+
+// 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"
+
+    if (changedKey === "extension") {
+      if (proxEnabled) PROXY_ENABLED.value = false
+    } else if (extEnabled) EXTENSIONS_ENABLED.value = false
+  }
+)
+
+const showConfirmModal = () => {
+  if (TELEMETRY_ENABLED.value) confirmRemove.value = true
+  else toggleSetting("TELEMETRY_ENABLED")
+}
+
+const resetProxy = () => {
+  applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
+  clearIcon.value = "check"
+  toast.success(`${t("state.cleared")}`)
+  setTimeout(() => (clearIcon.value = "rotate-ccw"), 1000)
+}
+
+const getColorModeName = (colorMode: string) => {
+  switch (colorMode) {
+    case "system":
+      return "settings.system_mode"
+    case "light":
+      return "settings.light_mode"
+    case "dark":
+      return "settings.dark_mode"
+    case "black":
+      return "settings.black_mode"
+    default:
+      return "settings.system_mode"
+  }
+}
+</script>
+
+<script lang="ts">
 export default defineComponent({
-  setup() {
-    return {
-      PROXY_ENABLED: useSetting("PROXY_ENABLED"),
-      PROXY_URL: useSetting("PROXY_URL"),
-      EXTENSIONS_ENABLED: useSetting("EXTENSIONS_ENABLED"),
-      TELEMETRY_ENABLED: useSetting("TELEMETRY_ENABLED"),
-      EXPAND_NAVIGATION: useSetting("EXPAND_NAVIGATION"),
-      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
-      ZEN_MODE: useSetting("ZEN_MODE"),
-    }
-  },
-  data() {
-    return {
-      extensionVersion: hasExtensionInstalled()
-        ? window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
-        : null,
-
-      hasChromeExtInstalled: hasChromeExtensionInstalled(),
-      hasFirefoxExtInstalled: hasFirefoxExtensionInstalled(),
-
-      clearIcon: "rotate-ccw",
-
-      active: getLocalConfig("THEME_COLOR") || "blue",
-      confirmRemove: false,
-    }
-  },
   head() {
     return {
       title: `${this.$t("navigation.settings")} • Hoppscotch`,
     }
   },
-  computed: {
-    proxySettings(): { url: string } {
-      return {
-        url: this.PROXY_URL,
-      }
-    },
-  },
-  watch: {
-    ZEN_MODE(ZEN_MODE) {
-      this.applySetting("EXPAND_NAVIGATION", !ZEN_MODE)
-    },
-    proxySettings: {
-      deep: true,
-      handler({ url }) {
-        this.applySetting("PROXY_URL", url)
-      },
-    },
-  },
-  methods: {
-    showConfirmModal() {
-      if (this.TELEMETRY_ENABLED) this.confirmRemove = true
-      else toggleSetting("TELEMETRY_ENABLED")
-    },
-    applySetting<K extends keyof SettingsType>(key: K, value: SettingsType[K]) {
-      applySetting(key, value)
-    },
-    toggleSetting<K extends KeysMatching<SettingsType, boolean>>(key: K) {
-      if (key === "EXTENSIONS_ENABLED" && this.PROXY_ENABLED) {
-        toggleSetting("PROXY_ENABLED")
-      }
-      if (key === "PROXY_ENABLED" && this.EXTENSIONS_ENABLED) {
-        toggleSetting("EXTENSIONS_ENABLED")
-      }
-      toggleSetting(key)
-    },
-    toggleSettings<K extends KeysMatching<SettingsType, boolean>>(
-      name: K,
-      value: SettingsType[K]
-    ) {
-      this.applySetting(name, value)
-    },
-    resetProxy() {
-      applySetting("PROXY_URL", `https://proxy.hoppscotch.io/`)
-      this.clearIcon = "check"
-      this.$toast.success(`${this.$t("state.cleared")}`)
-      setTimeout(() => (this.clearIcon = "rotate-ccw"), 1000)
-    },
-    getColorModeName(colorMode: string) {
-      switch (colorMode) {
-        case "system":
-          return "settings.system_mode"
-        case "light":
-          return "settings.light_mode"
-        case "dark":
-          return "settings.dark_mode"
-        case "black":
-          return "settings.black_mode"
-        default:
-          return "settings.system_mode"
-      }
-    },
-  },
 })
 </script>