From df55807fa42c731be61560c9455328a94fa28aef Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Thu, 5 May 2022 20:07:13 +0530
Subject: [PATCH 01/50] fix: rest session not updating when the request is
 renamed from the sidebar (fixes #2297)

---
 .../components/collections/index.vue          | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/packages/hoppscotch-app/components/collections/index.vue b/packages/hoppscotch-app/components/collections/index.vue
index 8034da5fe..c842ce96e 100644
--- a/packages/hoppscotch-app/components/collections/index.vue
+++ b/packages/hoppscotch-app/components/collections/index.vue
@@ -232,7 +232,11 @@ import {
   editRESTRequest,
   saveRESTRequestAs,
 } from "~/newstore/collections"
-import { setRESTRequest, getRESTRequest } from "~/newstore/RESTSession"
+import {
+  setRESTRequest,
+  getRESTRequest,
+  getRESTSaveContext,
+} from "~/newstore/RESTSession"
 import {
   useReadonlyStream,
   useStreamSubscriber,
@@ -495,12 +499,27 @@ export default defineComponent({
     },
     // Intented to by called by CollectionsEditRequest modal submit event
     updateEditingRequest(requestUpdateData) {
+      const saveCtx = getRESTSaveContext()
+
       const requestUpdated = {
         ...this.editingRequest,
         name: requestUpdateData.name || this.editingRequest.name,
       }
 
       if (this.collectionsType.type === "my-collections") {
+        // Update REST Session with the updated state
+        if (
+          saveCtx &&
+          saveCtx.originLocation === "user-collection" &&
+          saveCtx.requestIndex === this.editingRequestIndex &&
+          saveCtx.folderPath === this.editingFolderPath
+        ) {
+          setRESTRequest({
+            ...getRESTRequest(),
+            name: requestUpdateData.name,
+          })
+        }
+
         editRESTRequest(
           this.editingFolderPath,
           this.editingRequestIndex,
@@ -515,6 +534,18 @@ export default defineComponent({
 
         const requestName = requestUpdateData.name || this.editingRequest.name
 
+        // Update REST Session with the updated state
+        if (
+          saveCtx &&
+          saveCtx.originLocation === "team-collection" &&
+          saveCtx.requestID === this.editingRequestIndex
+        ) {
+          setRESTRequest({
+            ...getRESTRequest(),
+            name: requestUpdateData.name,
+          })
+        }
+
         runMutation(UpdateRequestDocument, {
           data: {
             request: JSON.stringify(requestUpdated),

From c3b784c6805c89143fe5be6c8a94c2dea26cd9dc Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Thu, 5 May 2022 20:46:28 +0530
Subject: [PATCH 02/50] fix : save request popup bug (#2324)

---
 .../components/collections/SaveRequest.vue        |  6 ++++++
 .../hoppscotch-app/components/http/Request.vue    | 15 ++++++++++++++-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/hoppscotch-app/components/collections/SaveRequest.vue b/packages/hoppscotch-app/components/collections/SaveRequest.vue
index 06f775fc6..8f635dce5 100644
--- a/packages/hoppscotch-app/components/collections/SaveRequest.vue
+++ b/packages/hoppscotch-app/components/collections/SaveRequest.vue
@@ -233,6 +233,7 @@ const saveRequestAs = async () => {
       originLocation: "user-collection",
       folderPath: picked.value.folderPath,
       requestIndex: picked.value.requestIndex,
+      req: cloneDeep(requestUpdated),
     })
 
     requestSaved()
@@ -249,6 +250,7 @@ const saveRequestAs = async () => {
       originLocation: "user-collection",
       folderPath: picked.value.folderPath,
       requestIndex: insertionIndex,
+      req: cloneDeep(requestUpdated),
     })
 
     requestSaved()
@@ -265,6 +267,7 @@ const saveRequestAs = async () => {
       originLocation: "user-collection",
       folderPath: `${picked.value.collectionIndex}`,
       requestIndex: insertionIndex,
+      req: cloneDeep(requestUpdated),
     })
 
     requestSaved()
@@ -293,6 +296,7 @@ const saveRequestAs = async () => {
     setRESTSaveContext({
       originLocation: "team-collection",
       requestID: picked.value.requestID,
+      req: cloneDeep(requestUpdated),
     })
   } else if (picked.value.pickedType === "teams-folder") {
     if (!isHoppRESTRequest(requestUpdated))
@@ -319,6 +323,7 @@ const saveRequestAs = async () => {
         requestID: result.right.createRequestInCollection.id,
         teamID: collectionsType.value.selectedTeam.id,
         collectionID: picked.value.folderID,
+        req: cloneDeep(requestUpdated),
       })
 
       requestSaved()
@@ -348,6 +353,7 @@ const saveRequestAs = async () => {
         requestID: result.right.createRequestInCollection.id,
         teamID: collectionsType.value.selectedTeam.id,
         collectionID: picked.value.collectionID,
+        req: cloneDeep(requestUpdated),
       })
 
       requestSaved()
diff --git a/packages/hoppscotch-app/components/http/Request.vue b/packages/hoppscotch-app/components/http/Request.vue
index 7939be844..4aa0594fb 100644
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -208,6 +208,7 @@
 import { computed, ref, watch } from "@nuxtjs/composition-api"
 import { isLeft, isRight } from "fp-ts/lib/Either"
 import * as E from "fp-ts/Either"
+import cloneDeep from "lodash/cloneDeep"
 import {
   updateRESTResponse,
   restEndpoint$,
@@ -477,14 +478,21 @@ const saveRequest = () => {
     showSaveRequestModal.value = true
     return
   }
-
   if (saveCtx.originLocation === "user-collection") {
+    const req = getRESTRequest()
+
     try {
       editRESTRequest(
         saveCtx.folderPath,
         saveCtx.requestIndex,
         getRESTRequest()
       )
+      setRESTSaveContext({
+        originLocation: "user-collection",
+        folderPath: saveCtx.folderPath,
+        requestIndex: saveCtx.requestIndex,
+        req: cloneDeep(req),
+      })
       toast.success(`${t("request.saved")}`)
     } catch (e) {
       setRESTSaveContext(null)
@@ -505,6 +513,11 @@ const saveRequest = () => {
         if (E.isLeft(result)) {
           toast.error(`${t("profile.no_permission")}`)
         } else {
+          setRESTSaveContext({
+            originLocation: "team-collection",
+            requestID: saveCtx.requestID,
+            req: cloneDeep(req),
+          })
           toast.success(`${t("request.saved")}`)
         }
       })

From 127bd7318f9417301762b41757a95f0ba2edcfd9 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sat, 7 May 2022 23:33:48 +0530
Subject: [PATCH 03/50] fix: improve indentation on GQL editors

---
 .../codemirror-lang-graphql/src/syntax.grammar | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/codemirror-lang-graphql/src/syntax.grammar b/packages/codemirror-lang-graphql/src/syntax.grammar
index dd3f27346..6ba64976d 100644
--- a/packages/codemirror-lang-graphql/src/syntax.grammar
+++ b/packages/codemirror-lang-graphql/src/syntax.grammar
@@ -299,8 +299,8 @@ Description {
 }
 
 OperationType {
-  @specialize<Name, "query"> 
-  | @specialize<Name, "mutation"> 
+  @specialize<Name, "query">
+  | @specialize<Name, "mutation">
   | @specialize<Name, "subscription">
 }
 
@@ -317,7 +317,7 @@ ExecutableDirectiveLocation {
   @specialize<Name, "QUERY">
   | @specialize<Name, "MUTATION">
   | @specialize<Name, "SUBSCRIPTION">
-  | @specialize<Name, "FIELD"> 
+  | @specialize<Name, "FIELD">
   | @specialize<Name, "FRAGMENT_DEFINITION">
   | @specialize<Name, "FRAGMENT_SPREAD">
   | @specialize<Name, "INLINE_FRAGMENT">
@@ -338,22 +338,24 @@ TypeSystemDirectiveLocation {
   | @specialize<Name, "INPUT_FIELD_DEFINITION">
 }
 
-@skip { Whitespace | Comment }
+@skip { whitespace | Comment }
 
 @tokens {
-  Whitespace {
+  whitespace {
     std.whitespace+
   }
+
   StringValue {
     "\"\"\"" (!["] | "\\n" | "\"" "\""? !["])* "\"\"\"" | "\"" !["\\\n]* "\""
   }
+
   IntValue {
     "-"? "0"
     | "-"? std.digit+
   }
 
   FloatValue {
-    IntValue ("." std.digit+ | ("e" | "E") IntValue+) 
+    IntValue ("." std.digit+ | ("e" | "E") IntValue+)
   }
 
   @precedence { IntValue, FloatValue }
@@ -367,6 +369,8 @@ TypeSystemDirectiveLocation {
   Comma {
     ","
   }
+
+  "{" "}" "[" "]"
 }
 
-@detectDelim
\ No newline at end of file
+@detectDelim

From fb1da491d8b22f6a1e07f99dea56c6454beeab8c Mon Sep 17 00:00:00 2001
From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com>
Date: Tue, 10 May 2022 02:05:24 +0530
Subject: [PATCH 04/50] refactor: realtime log entry revamp (#2240)

Co-authored-by: liyasthomas <liyascthomas@gmail.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 .../assets/icons/arrow-down-left.svg          |   4 +
 .../assets/icons/arrow-down.svg               |   4 +
 .../assets/icons/arrow-up-right.svg           |   4 +
 .../hoppscotch-app/assets/icons/arrow-up.svg  |   4 +
 .../assets/icons/chevrons-down.svg            |   4 +
 .../assets/icons/chevrons-up.svg              |   4 +
 .../assets/icons/info-disconnect.svg          |   5 +
 .../assets/icons/info-realtime.svg            |   5 +
 .../components/realtime/Log.vue               | 145 ++++---
 .../components/realtime/LogEntry.vue          | 388 ++++++++++++++++++
 .../components/realtime/Mqtt.vue              |  51 ++-
 .../components/realtime/Socketio.vue          |  36 +-
 .../components/realtime/Sse.vue               |  42 +-
 .../components/realtime/Websocket.vue         |  41 +-
 .../hoppscotch-app/helpers/functional/json.ts |   8 +
 .../hoppscotch-app/helpers/utils/string.ts    |  12 -
 packages/hoppscotch-app/locales/en.json       |   3 +
 pnpm-lock.yaml                                |  39 +-
 18 files changed, 654 insertions(+), 145 deletions(-)
 create mode 100644 packages/hoppscotch-app/assets/icons/arrow-down-left.svg
 create mode 100644 packages/hoppscotch-app/assets/icons/arrow-down.svg
 create mode 100644 packages/hoppscotch-app/assets/icons/arrow-up-right.svg
 create mode 100644 packages/hoppscotch-app/assets/icons/arrow-up.svg
 create mode 100644 packages/hoppscotch-app/assets/icons/chevrons-down.svg
 create mode 100644 packages/hoppscotch-app/assets/icons/chevrons-up.svg
 create mode 100644 packages/hoppscotch-app/assets/icons/info-disconnect.svg
 create mode 100644 packages/hoppscotch-app/assets/icons/info-realtime.svg
 create mode 100644 packages/hoppscotch-app/components/realtime/LogEntry.vue
 delete mode 100644 packages/hoppscotch-app/helpers/utils/string.ts

diff --git a/packages/hoppscotch-app/assets/icons/arrow-down-left.svg b/packages/hoppscotch-app/assets/icons/arrow-down-left.svg
new file mode 100644
index 000000000..583988208
--- /dev/null
+++ b/packages/hoppscotch-app/assets/icons/arrow-down-left.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="17" y1="7" x2="7" y2="17"></line>
+  <polyline points="17 17 7 17 7 7"></polyline>
+</svg>
diff --git a/packages/hoppscotch-app/assets/icons/arrow-down.svg b/packages/hoppscotch-app/assets/icons/arrow-down.svg
new file mode 100644
index 000000000..ad365d5fc
--- /dev/null
+++ b/packages/hoppscotch-app/assets/icons/arrow-down.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="12" y1="5" x2="12" y2="19"></line>
+  <polyline points="19 12 12 19 5 12"></polyline>
+</svg>
\ No newline at end of file
diff --git a/packages/hoppscotch-app/assets/icons/arrow-up-right.svg b/packages/hoppscotch-app/assets/icons/arrow-up-right.svg
new file mode 100644
index 000000000..6ac911836
--- /dev/null
+++ b/packages/hoppscotch-app/assets/icons/arrow-up-right.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="7" y1="17" x2="17" y2="7"></line>
+  <polyline points="7 7 17 7 17 17"></polyline>
+</svg>
diff --git a/packages/hoppscotch-app/assets/icons/arrow-up.svg b/packages/hoppscotch-app/assets/icons/arrow-up.svg
new file mode 100644
index 000000000..9966fa544
--- /dev/null
+++ b/packages/hoppscotch-app/assets/icons/arrow-up.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="12" y1="19" x2="12" y2="5"></line>
+  <polyline points="5 12 12 5 19 12"></polyline>
+</svg>
\ No newline at end of file
diff --git a/packages/hoppscotch-app/assets/icons/chevrons-down.svg b/packages/hoppscotch-app/assets/icons/chevrons-down.svg
new file mode 100644
index 000000000..b46abe3a6
--- /dev/null
+++ b/packages/hoppscotch-app/assets/icons/chevrons-down.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="7 13 12 18 17 13"></polyline>
+  <polyline points="7 6 12 11 17 6"></polyline>
+</svg>
\ No newline at end of file
diff --git a/packages/hoppscotch-app/assets/icons/chevrons-up.svg b/packages/hoppscotch-app/assets/icons/chevrons-up.svg
new file mode 100644
index 000000000..d79fc4952
--- /dev/null
+++ b/packages/hoppscotch-app/assets/icons/chevrons-up.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <polyline points="17 11 12 6 7 11"></polyline>
+  <polyline points="17 18 12 13 7 18"></polyline>
+</svg>
\ No newline at end of file
diff --git a/packages/hoppscotch-app/assets/icons/info-disconnect.svg b/packages/hoppscotch-app/assets/icons/info-disconnect.svg
new file mode 100644
index 000000000..ab55c86fd
--- /dev/null
+++ b/packages/hoppscotch-app/assets/icons/info-disconnect.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"></circle>
+  <line x1="12" y1="16" x2="12" y2="12"></line>
+  <line x1="12" y1="8" x2="12.01" y2="8"></line>
+</svg>
diff --git a/packages/hoppscotch-app/assets/icons/info-realtime.svg b/packages/hoppscotch-app/assets/icons/info-realtime.svg
new file mode 100644
index 000000000..ab55c86fd
--- /dev/null
+++ b/packages/hoppscotch-app/assets/icons/info-realtime.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <circle cx="12" cy="12" r="10"></circle>
+  <line x1="12" y1="16" x2="12" y2="12"></line>
+  <line x1="12" y1="8" x2="12.01" y2="8"></line>
+</svg>
diff --git a/packages/hoppscotch-app/components/realtime/Log.vue b/packages/hoppscotch-app/components/realtime/Log.vue
index 348a2fab7..e46dc21d0 100644
--- a/packages/hoppscotch-app/components/realtime/Log.vue
+++ b/packages/hoppscotch-app/components/realtime/Log.vue
@@ -1,77 +1,128 @@
 <template>
-  <div class="flex flex-col flex-1">
+  <div ref="container" class="flex flex-col flex-1 overflow-y-auto">
     <div
-      class="sticky top-0 z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight"
+      class="sticky top-0 z-10 flex items-center justify-between flex-none pl-4 border-b bg-primary border-dividerLight"
     >
       <label for="log" class="py-2 font-semibold text-secondaryLight">
         {{ title }}
       </label>
+      <div>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.delete')"
+          svg="trash"
+          @click.native="emit('delete')"
+        />
+        <ButtonSecondary
+          id="bottompage"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.scroll_to_top')"
+          svg="arrow-up"
+          @click.native="scrollTo('top')"
+        />
+        <ButtonSecondary
+          id="bottompage"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.scroll_to_bottom')"
+          svg="arrow-down"
+          @click.native="scrollTo('bottom')"
+        />
+        <ButtonSecondary
+          id="bottompage"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.autoscroll')"
+          svg="chevrons-down"
+          :class="toggleAutoscrollColor"
+          @click.native="toggleAutoscroll()"
+        />
+      </div>
     </div>
-    <div ref="logsRef" name="log" class="realtime-log">
-      <span v-if="log" class="space-y-2">
-        <span
+    <div
+      v-if="log.length !== 0"
+      ref="logs"
+      class="overflow-y-auto border-b border-dividerLight"
+    >
+      <div
+        class="flex flex-col h-auto h-full border-r divide-y divide-dividerLight border-dividerLight"
+      >
+        <RealtimeLogEntry
           v-for="(entry, index) in log"
           :key="`entry-${index}`"
-          :style="{ color: entry.color }"
-          class="font-mono"
-          >{{ entry.ts }}{{ source(entry.source) }}{{ entry.payload }}</span
-        >
-      </span>
-      <span v-else>{{ t("response.waiting_for_connection") }}</span>
+          :entry="entry"
+        />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref, watch } from "@nuxtjs/composition-api"
-import { getSourcePrefix as source } from "~/helpers/utils/string"
+import { ref, PropType, computed, watch } from "@nuxtjs/composition-api"
+import { useThrottleFn, useScroll } from "@vueuse/core"
 import { useI18n } from "~/helpers/utils/composables"
 
-const t = useI18n()
+export type LogEntryData = {
+  ts: number
+  source: "info" | "client" | "server" | "disconnected"
+  payload: string
+  event: "connecting" | "connected" | "disconnected" | "error"
+}
 
 const props = defineProps({
-  log: { type: Array, default: () => [] },
+  log: { type: Array as PropType<LogEntryData[]>, default: () => [] },
   title: {
     type: String,
     default: "",
   },
 })
 
-const logsRef = ref<any | null>(null)
-const BOTTOM_SCROLL_DIST_INACCURACY = 5
+const emit = defineEmits<{
+  (e: "delete"): void
+}>()
+
+const t = useI18n()
+
+const container = ref<HTMLElement | null>(null)
+const logs = ref<HTMLElement | null>(null)
+
+const autoScrollEnabled = ref(true)
+
+const logListScroll = useScroll(logs)
+
+// Disable autoscroll when scrolling to top
+watch(logListScroll.isScrolling, (isScrolling) => {
+  if (isScrolling && logListScroll.directions.top)
+    autoScrollEnabled.value = false
+})
+
+const scrollTo = (position: "top" | "bottom") => {
+  if (position === "top") {
+    logs.value?.scroll({
+      behavior: "smooth",
+      top: 0,
+    })
+  } else if (position === "bottom") {
+    logs.value?.scroll({
+      behavior: "smooth",
+      top: logs.value?.scrollHeight,
+    })
+  }
+}
 
 watch(
   () => props.log,
-  () => {
-    if (!logsRef.value) return
-    const distToBottom =
-      logsRef.value.scrollHeight -
-      logsRef.value.scrollTop -
-      logsRef.value.clientHeight
-    if (distToBottom < BOTTOM_SCROLL_DIST_INACCURACY) {
-      nextTick(() => (logsRef.value.scrollTop = logsRef.value.scrollHeight))
-    }
-  }
+  useThrottleFn(() => {
+    if (autoScrollEnabled.value) scrollTo("bottom")
+  }, 200),
+  { flush: "post" }
+)
+
+const toggleAutoscroll = () => {
+  autoScrollEnabled.value = !autoScrollEnabled.value
+}
+
+const toggleAutoscrollColor = computed(() =>
+  autoScrollEnabled.value ? "text-green-500" : "text-red-500"
 )
 </script>
 
-<style scoped lang="scss">
-.realtime-log {
-  @apply p-4;
-  @apply bg-transparent;
-  @apply text-secondary;
-  @apply overflow-auto;
-
-  height: 256px;
-
-  &,
-  span {
-    @apply select-text;
-  }
-
-  span {
-    @apply block;
-    @apply break-words break-all;
-  }
-}
-</style>
+<style></style>
diff --git a/packages/hoppscotch-app/components/realtime/LogEntry.vue b/packages/hoppscotch-app/components/realtime/LogEntry.vue
new file mode 100644
index 000000000..941455294
--- /dev/null
+++ b/packages/hoppscotch-app/components/realtime/LogEntry.vue
@@ -0,0 +1,388 @@
+<template>
+  <div v-if="entry" class="divide-y divide-dividerLight">
+    <div :style="{ color: entryColor }" class="realtime-log">
+      <div class="flex group">
+        <div class="flex flex-1 divide-x divide-dividerLight">
+          <div class="inline-flex items-center p-2">
+            <SmartIcon
+              class="svg-icons"
+              :name="iconName"
+              :style="{ color: iconColor }"
+              @click.native="copyQuery(entry.payload)"
+            />
+          </div>
+          <div class="items-center hidden px-1 w-18 sm:inline-flex">
+            <span
+              v-tippy="{ theme: 'tooltip' }"
+              :title="relativeTime"
+              class="mx-auto truncate ts-font text-secondaryLight hover:text-secondary hover:text-center"
+            >
+              {{ new Date(entry.ts).toLocaleTimeString() }}
+            </span>
+          </div>
+          <div
+            class="flex items-center flex-1 min-w-0 p-2"
+            @click="toggleExpandPayload()"
+          >
+            <div class="truncate">
+              {{ entry.payload }}
+            </div>
+          </div>
+        </div>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.copy')"
+          :svg="`${copyQueryIcon}`"
+          class="hidden group-hover:inline-flex"
+          @click.native="copyQuery(entry.payload)"
+        />
+        <ButtonSecondary
+          svg="chevron-down"
+          class="transform"
+          :class="{ 'rotate-180': !minimized }"
+          @click.native="toggleExpandPayload()"
+        />
+      </div>
+    </div>
+    <div v-if="!minimized" class="overflow-hidden bg-primaryLight">
+      <SmartTabs v-model="selectedTab" styles="bg-primaryLight">
+        <SmartTab v-if="isJSON(entry.payload)" id="json" label="JSON" />
+        <SmartTab id="raw" label="Raw" />
+      </SmartTabs>
+      <div
+        class="z-10 flex items-center justify-between pl-4 border-b border-dividerLight top-lowerSecondaryStickyFold"
+      >
+        <label class="font-semibold text-secondaryLight">
+          {{ t("response.body") }}
+        </label>
+        <div class="flex">
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('state.linewrap')"
+            :class="{ '!text-accent': linewrapEnabled }"
+            svg="wrap-text"
+            @click.native.prevent="linewrapEnabled = !linewrapEnabled"
+          />
+          <ButtonSecondary
+            ref="downloadResponse"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('action.download_file')"
+            :svg="downloadIcon"
+            @click.native="downloadResponse"
+          />
+          <ButtonSecondary
+            ref="copyResponse"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('action.copy')"
+            :svg="copyIcon"
+            @click.native="copyResponse"
+          />
+        </div>
+      </div>
+      <div ref="editor"></div>
+      <div
+        v-if="outlinePath && selectedTab === 'json'"
+        class="sticky bottom-0 z-10 flex px-2 overflow-auto border-t bg-primaryLight border-dividerLight flex-nowrap hide-scrollbar"
+      >
+        <div
+          v-for="(item, index) in outlinePath"
+          :key="`item-${index}`"
+          class="flex items-center"
+        >
+          <tippy
+            ref="outlineOptions"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <div v-if="item.kind === 'RootObject'" class="outline-item">
+                {}
+              </div>
+              <div v-if="item.kind === 'RootArray'" class="outline-item">
+                []
+              </div>
+              <div v-if="item.kind === 'ArrayMember'" class="outline-item">
+                {{ item.index }}
+              </div>
+              <div v-if="item.kind === 'ObjectMember'" class="outline-item">
+                {{ item.name }}
+              </div>
+            </template>
+            <div
+              v-if="item.kind === 'ArrayMember' || item.kind === 'ObjectMember'"
+            >
+              <div
+                v-if="item.kind === 'ArrayMember'"
+                class="flex flex-col"
+                role="menu"
+              >
+                <SmartItem
+                  v-for="(arrayMember, astIndex) in item.astParent.values"
+                  :key="`ast-${astIndex}`"
+                  :label="`${astIndex}`"
+                  @click.native="
+                    () => {
+                      jumpCursor(arrayMember)
+                      outlineOptions[index].tippy().hide()
+                    }
+                  "
+                />
+              </div>
+              <div
+                v-if="item.kind === 'ObjectMember'"
+                class="flex flex-col"
+                role="menu"
+              >
+                <SmartItem
+                  v-for="(objectMember, astIndex) in item.astParent.members"
+                  :key="`ast-${astIndex}`"
+                  :label="objectMember.key.value"
+                  @click.native="
+                    () => {
+                      jumpCursor(objectMember)
+                      outlineOptions[index].tippy().hide()
+                    }
+                  "
+                />
+              </div>
+            </div>
+            <div
+              v-if="item.kind === 'RootObject'"
+              class="flex flex-col"
+              role="menu"
+            >
+              <SmartItem
+                label="{}"
+                @click.native="
+                  () => {
+                    jumpCursor(item.astValue)
+                    outlineOptions[index].tippy().hide()
+                  }
+                "
+              />
+            </div>
+            <div
+              v-if="item.kind === 'RootArray'"
+              class="flex flex-col"
+              role="menu"
+            >
+              <SmartItem
+                label="[]"
+                @click.native="
+                  () => {
+                    jumpCursor(item.astValue)
+                    outlineOptions[index].tippy().hide()
+                  }
+                "
+              />
+            </div>
+          </tippy>
+          <i
+            v-if="index + 1 !== outlinePath.length"
+            class="opacity-50 text-secondaryLight material-icons"
+          >
+            chevron_right
+          </i>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div v-else>{{ t("response.waiting_for_connection") }}</div>
+</template>
+
+<script setup lang="ts">
+import * as LJSON from "lossless-json"
+import * as O from "fp-ts/Option"
+import { pipe } from "fp-ts/function"
+import { ref, computed, reactive, watch } from "@nuxtjs/composition-api"
+import { useTimeAgo } from "@vueuse/core"
+import { LogEntryData } from "./Log.vue"
+import { useI18n } from "~/helpers/utils/composables"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { isJSON } from "~/helpers/functional/json"
+import useCopyResponse from "~/helpers/lenses/composables/useCopyResponse"
+import useDownloadResponse from "~/helpers/lenses/composables/useDownloadResponse"
+import { useCodemirror } from "~/helpers/editor/codemirror"
+import jsonParse, { JSONObjectMember, JSONValue } from "~/helpers/jsonParse"
+import { getJSONOutlineAtPos } from "~/helpers/newOutline"
+import {
+  convertIndexToLineCh,
+  convertLineChToIndex,
+} from "~/helpers/editor/utils"
+
+const t = useI18n()
+
+const props = defineProps<{ entry: LogEntryData }>()
+const outlineOptions = ref<any | null>(null)
+const editor = ref<any | null>(null)
+const linewrapEnabled = ref(true)
+const logPayload = computed(() => props.entry.payload)
+
+const selectedTab = ref<"json" | "raw">(
+  isJSON(props.entry.payload) ? "json" : "raw"
+)
+
+// CodeMirror Implementation
+const jsonBodyText = computed(() =>
+  pipe(
+    logPayload.value,
+    O.tryCatchK(LJSON.parse),
+    O.map((val) => LJSON.stringify(val, undefined, 2)),
+    O.getOrElse(() => logPayload.value)
+  )
+)
+
+const ast = computed(() =>
+  pipe(
+    jsonBodyText.value,
+    O.tryCatchK(jsonParse),
+    O.getOrElseW(() => null)
+  )
+)
+
+const editorText = computed(() => {
+  if (selectedTab.value === "json") return jsonBodyText.value
+  else return logPayload.value
+})
+
+const editorMode = computed(() => {
+  if (selectedTab.value === "json") return "application/ld+json"
+  else return "text/plain"
+})
+
+const { cursor } = useCodemirror(
+  editor,
+  editorText,
+  reactive({
+    extendedEditorConfig: {
+      mode: editorMode,
+      readOnly: true,
+      lineWrapping: linewrapEnabled,
+    },
+    linter: null,
+    completer: null,
+    environmentHighlights: false,
+  })
+)
+
+const jumpCursor = (ast: JSONValue | JSONObjectMember) => {
+  const pos = convertIndexToLineCh(jsonBodyText.value, ast.start)
+  pos.line--
+  cursor.value = pos
+}
+
+const outlinePath = computed(() =>
+  pipe(
+    ast.value,
+    O.fromNullable,
+    O.map((ast) =>
+      getJSONOutlineAtPos(
+        ast,
+        convertLineChToIndex(jsonBodyText.value, cursor.value)
+      )
+    ),
+    O.getOrElseW(() => null)
+  )
+)
+
+// Code for UI Changes
+const minimized = ref(true)
+watch(minimized, () => {
+  selectedTab.value = isJSON(props.entry.payload) ? "json" : "raw"
+})
+
+const toggleExpandPayload = () => {
+  minimized.value = !minimized.value
+}
+
+const { copyIcon, copyResponse } = useCopyResponse(logPayload)
+
+const { downloadIcon, downloadResponse } = useDownloadResponse(
+  "application/json",
+  logPayload
+)
+
+const copyQueryIcon = ref("copy")
+const copyQuery = (entry: string) => {
+  copyToClipboard(entry)
+  copyQueryIcon.value = "check"
+  setTimeout(() => (copyQueryIcon.value = "copy"), 1000)
+}
+
+// Relative Time
+const relativeTime = useTimeAgo(computed(() => props.entry.ts))
+
+// Assigns color based on entry event
+const entryColor = computed(() => {
+  switch (props.entry.event) {
+    case "connected":
+      return "#10b981"
+    case "connecting":
+      return "#10b981"
+    case "error":
+      return "#ff5555"
+    case "disconnected":
+      return "#ff5555"
+  }
+})
+
+const ICONS: Record<
+  LogEntryData["source"],
+  { iconName: string; iconColor: string }
+> = {
+  info: {
+    iconName: "info-realtime",
+    iconColor: "#10b981",
+  },
+  client: {
+    iconName: "arrow-up-right",
+    iconColor: "#eaaa45",
+  },
+  server: {
+    iconName: "arrow-down-left",
+    iconColor: "#38d4ea",
+  },
+  disconnected: {
+    iconName: "info-disconnect",
+    iconColor: "#ff5555",
+  },
+}
+
+const iconColor = computed(() => ICONS[props.entry.source].iconColor)
+const iconName = computed(() => ICONS[props.entry.source].iconName)
+</script>
+
+<style scoped lang="scss">
+.realtime-log {
+  @apply text-secondary;
+  @apply overflow-hidden;
+
+  &,
+  span {
+    @apply select-text;
+  }
+
+  span {
+    @apply block;
+    @apply break-words break-all;
+  }
+}
+
+.outline-item {
+  @apply cursor-pointer;
+  @apply flex-grow-0 flex-shrink-0;
+  @apply text-secondaryLight;
+  @apply inline-flex;
+  @apply items-center;
+  @apply px-2;
+  @apply py-1;
+  @apply transition;
+  @apply hover: text-secondary;
+}
+
+.ts-font {
+  font-size: 0.6rem;
+}
+</style>
diff --git a/packages/hoppscotch-app/components/realtime/Mqtt.vue b/packages/hoppscotch-app/components/realtime/Mqtt.vue
index 6cd482c20..b04000091 100644
--- a/packages/hoppscotch-app/components/realtime/Mqtt.vue
+++ b/packages/hoppscotch-app/components/realtime/Mqtt.vue
@@ -48,7 +48,11 @@
       </div>
     </template>
     <template #secondary>
-      <RealtimeLog :title="$t('mqtt.log')" :log="log" />
+      <RealtimeLog
+        :title="$t('mqtt.log')"
+        :log="log"
+        @delete="clearLogEntries()"
+      />
     </template>
     <template #sidebar>
       <div class="flex items-center justify-between p-4">
@@ -216,8 +220,8 @@ export default defineComponent({
         {
           payload: this.$t("state.connecting_to", { name: this.url }),
           source: "info",
-          color: "var(--accent-color)",
-          ts: new Date().toLocaleTimeString(),
+          event: "connecting",
+          ts: Date.now(),
         },
       ]
       const parseUrl = new URL(this.url)
@@ -253,8 +257,8 @@ export default defineComponent({
       addMQTTLogLine({
         payload: this.$t("error.something_went_wrong"),
         source: "info",
-        color: "#ff5555",
-        ts: new Date().toLocaleTimeString(),
+        event: "error",
+        ts: Date.now(),
       })
     },
     onConnectionSuccess() {
@@ -263,8 +267,8 @@ export default defineComponent({
       addMQTTLogLine({
         payload: this.$t("state.connected_to", { name: this.url }),
         source: "info",
-        color: "var(--accent-color)",
-        ts: new Date().toLocaleTimeString(),
+        event: "connected",
+        ts: Date.now(),
       })
       this.$toast.success(this.$t("state.connected"))
     },
@@ -272,8 +276,8 @@ export default defineComponent({
       addMQTTLogLine({
         payload: `Message: ${payloadString} arrived on topic: ${destinationName}`,
         source: "info",
-        color: "var(--accent-color)",
-        ts: new Date().toLocaleTimeString(),
+        event: "info",
+        ts: Date.now(),
       })
     },
     toggleConnection() {
@@ -288,9 +292,9 @@ export default defineComponent({
       this.client.disconnect()
       addMQTTLogLine({
         payload: this.$t("state.disconnected_from", { name: this.url }),
-        source: "info",
-        color: "#ff5555",
-        ts: new Date().toLocaleTimeString(),
+        source: "disconnected",
+        event: "disconnected",
+        ts: Date.now(),
       })
     },
     onConnectionLost() {
@@ -309,9 +313,9 @@ export default defineComponent({
         this.client.publish(this.pub_topic, this.msg, 0, false)
         addMQTTLogLine({
           payload: `Published message: ${this.msg} to topic: ${this.pub_topic}`,
-          ts: new Date().toLocaleTimeString(),
+          ts: Date.now(),
           source: "info",
-          color: "var(--accent-color)",
+          event: "info",
         })
       } catch (e) {
         addMQTTLogLine({
@@ -319,8 +323,8 @@ export default defineComponent({
             this.$t("error.something_went_wrong") +
             `while publishing msg: ${this.msg} to topic:  ${this.pub_topic}`,
           source: "info",
-          color: "#ff5555",
-          ts: new Date().toLocaleTimeString(),
+          event: "error",
+          ts: Date.now(),
         })
       }
     },
@@ -343,8 +347,8 @@ export default defineComponent({
             this.$t("error.something_went_wrong") +
             `while subscribing to topic:  ${this.sub_topic}`,
           source: "info",
-          color: "#ff5555",
-          ts: new Date().toLocaleTimeString(),
+          event: "error",
+          ts: Date.now(),
         })
       }
     },
@@ -356,8 +360,8 @@ export default defineComponent({
           (this.subscriptionState ? "subscribed" : "unsubscribed") +
           ` to topic: ${this.sub_topic}`,
         source: "info",
-        color: "var(--accent-color)",
-        ts: new Date().toLocaleTimeString(),
+        event: "info",
+        ts: Date.now(),
       })
     },
     usubFailure() {
@@ -367,8 +371,8 @@ export default defineComponent({
           (this.subscriptionState ? "unsubscribe" : "subscribe") +
           ` to topic: ${this.sub_topic}`,
         source: "info",
-        color: "#ff5555",
-        ts: new Date().toLocaleTimeString(),
+        color: "error",
+        ts: Date.now(),
       })
     },
     unsubscribe() {
@@ -377,6 +381,9 @@ export default defineComponent({
         onFailure: this.usubFailure,
       })
     },
+    clearLogEntries() {
+      this.log = []
+    },
   },
 })
 </script>
diff --git a/packages/hoppscotch-app/components/realtime/Socketio.vue b/packages/hoppscotch-app/components/realtime/Socketio.vue
index 358941160..79623d227 100644
--- a/packages/hoppscotch-app/components/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/components/realtime/Socketio.vue
@@ -200,7 +200,11 @@
       </div>
     </template>
     <template #secondary>
-      <RealtimeLog :title="$t('socketio.log')" :log="log" />
+      <RealtimeLog
+        :title="$t('socketio.log')"
+        :log="log"
+        @delete="clearLogEntries()"
+      />
     </template>
     <template #sidebar>
       <div class="flex items-center justify-between p-4">
@@ -389,7 +393,8 @@ export default defineComponent({
         {
           payload: this.$t("state.connecting_to", { name: this.url }),
           source: "info",
-          color: "var(--accent-color)",
+          event: "connecting",
+          ts: Date.now(),
         },
       ]
 
@@ -418,8 +423,8 @@ export default defineComponent({
             {
               payload: this.$t("state.connected_to", { name: this.url }),
               source: "info",
-              color: "var(--accent-color)",
-              ts: new Date().toLocaleTimeString(),
+              event: "connected",
+              ts: Date.now(),
             },
           ]
           this.$toast.success(this.$t("state.connected"))
@@ -429,7 +434,7 @@ export default defineComponent({
           addSIOLogLine({
             payload: `[${eventName}] ${message ? JSON.stringify(message) : ""}`,
             source: "server",
-            ts: new Date().toLocaleTimeString(),
+            ts: Date.now(),
           })
         })
         this.io.on("connect_error", (error) => {
@@ -446,9 +451,9 @@ export default defineComponent({
           this.connectionState = false
           addSIOLogLine({
             payload: this.$t("state.disconnected_from", { name: this.url }),
-            source: "info",
-            color: "#ff5555",
-            ts: new Date().toLocaleTimeString(),
+            source: "disconnected",
+            event: "disconnected",
+            ts: Date.now(),
           })
           this.$toast.error(this.$t("state.disconnected"))
         })
@@ -471,15 +476,15 @@ export default defineComponent({
       addSIOLogLine({
         payload: this.$t("error.something_went_wrong"),
         source: "info",
-        color: "#ff5555",
-        ts: new Date().toLocaleTimeString(),
+        event: "error",
+        ts: Date.now(),
       })
       if (error !== null)
         addSIOLogLine({
           payload: error,
           source: "info",
-          color: "#ff5555",
-          ts: new Date().toLocaleTimeString(),
+          event: "error",
+          ts: Date.now(),
         })
     },
     sendMessage() {
@@ -500,14 +505,14 @@ export default defineComponent({
           addSIOLogLine({
             payload: `[${eventName}] ${JSON.stringify(data)}`,
             source: "server",
-            ts: new Date().toLocaleTimeString(),
+            ts: Date.now(),
           })
         })
 
         addSIOLogLine({
           payload: `[${eventName}] ${JSON.stringify(messages)}`,
           source: "client",
-          ts: new Date().toLocaleTimeString(),
+          ts: Date.now(),
         })
         this.communication.inputs = [""]
       }
@@ -516,6 +521,9 @@ export default defineComponent({
       this.clientVersion = version
       this.$refs.versionOptions.tippy().hide()
     },
+    clearLogEntries() {
+      this.log = []
+    },
   },
 })
 </script>
diff --git a/packages/hoppscotch-app/components/realtime/Sse.vue b/packages/hoppscotch-app/components/realtime/Sse.vue
index b5c5faf66..ac5ca388c 100644
--- a/packages/hoppscotch-app/components/realtime/Sse.vue
+++ b/packages/hoppscotch-app/components/realtime/Sse.vue
@@ -47,7 +47,11 @@
       </div>
     </template>
     <template #secondary>
-      <RealtimeLog :title="$t('sse.log')" :log="log" />
+      <RealtimeLog
+        :title="$t('sse.log')"
+        :log="log"
+        @delete="clearLogEntries()"
+      />
     </template>
   </AppPaneLayout>
 </template>
@@ -136,7 +140,8 @@ export default defineComponent({
         {
           payload: this.$t("state.connecting_to", { name: this.server }),
           source: "info",
-          color: "var(--accent-color)",
+          event: "connecting",
+          ts: Date.now(),
         },
       ]
       if (typeof EventSource !== "undefined") {
@@ -149,8 +154,8 @@ export default defineComponent({
               {
                 payload: this.$t("state.connected_to", { name: this.server }),
                 source: "info",
-                color: "var(--accent-color)",
-                ts: new Date().toLocaleTimeString(),
+                event: "connected",
+                ts: Date.now(),
               },
             ]
             this.$toast.success(this.$t("state.connected"))
@@ -164,9 +169,9 @@ export default defineComponent({
               payload: this.$t("state.disconnected_from", {
                 name: this.server,
               }),
-              source: "info",
-              color: "#ff5555",
-              ts: new Date().toLocaleTimeString(),
+              source: "disconnected",
+              event: "disconnected",
+              ts: Date.now(),
             })
             this.$toast.error(this.$t("state.disconnected"))
           }
@@ -174,7 +179,7 @@ export default defineComponent({
             addSSELogLine({
               payload: data,
               source: "server",
-              ts: new Date().toLocaleTimeString(),
+              ts: Date.now(),
             })
           })
         } catch (e) {
@@ -185,9 +190,9 @@ export default defineComponent({
         this.log = [
           {
             payload: this.$t("error.browser_support_sse"),
-            source: "info",
-            color: "#ff5555",
-            ts: new Date().toLocaleTimeString(),
+            source: "disconnected",
+            event: "error",
+            ts: Date.now(),
           },
         ]
       }
@@ -201,22 +206,25 @@ export default defineComponent({
       this.connectionSSEState = false
       addSSELogLine({
         payload: this.$t("error.something_went_wrong"),
-        source: "info",
-        color: "#ff5555",
-        ts: new Date().toLocaleTimeString(),
+        source: "disconnected",
+        event: "error",
+        ts: Date.now(),
       })
       if (error !== null)
         addSSELogLine({
           payload: error,
-          source: "info",
-          color: "#ff5555",
-          ts: new Date().toLocaleTimeString(),
+          source: "disconnected",
+          event: "error",
+          ts: Date.now(),
         })
     },
     stop() {
       this.sse.close()
       this.sse.onclose()
     },
+    clearLogEntries() {
+      this.log = []
+    },
   },
 })
 </script>
diff --git a/packages/hoppscotch-app/components/realtime/Websocket.vue b/packages/hoppscotch-app/components/realtime/Websocket.vue
index cd1ce8ee5..9ac8705a8 100644
--- a/packages/hoppscotch-app/components/realtime/Websocket.vue
+++ b/packages/hoppscotch-app/components/realtime/Websocket.vue
@@ -137,22 +137,23 @@
           class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
           :alt="$t('empty.protocols')"
         />
-        <span class="mb-4 text-center">
-          {{ $t("empty.protocols") }}
-        </span>
+        <span class="mb-4 text-center">{{ $t("empty.protocols") }}</span>
       </div>
     </template>
     <template #secondary>
-      <RealtimeLog :title="$t('websocket.log')" :log="log" />
+      <RealtimeLog
+        :title="$t('websocket.log')"
+        :log="log"
+        @delete="clearLogEntries()"
+      />
     </template>
     <template #sidebar>
       <div class="flex items-center justify-between p-4">
         <label
           for="websocket-message"
           class="font-semibold text-secondaryLight"
+          >{{ $t("websocket.communication") }}</label
         >
-          {{ $t("websocket.communication") }}
-        </label>
       </div>
       <div class="flex px-4 space-x-2">
         <input
@@ -285,12 +286,16 @@ export default defineComponent({
       // Otherwise, it's disconnecting.
       else return this.disconnect()
     },
+    clearLogEntries() {
+      this.log = []
+    },
     connect() {
       this.log = [
         {
           payload: this.$t("state.connecting_to", { name: this.url }),
           source: "info",
-          color: "var(--accent-color)",
+          event: "connecting",
+          ts: Date.now(),
         },
       ]
       try {
@@ -303,8 +308,8 @@ export default defineComponent({
             {
               payload: this.$t("state.connected_to", { name: this.url }),
               source: "info",
-              color: "var(--accent-color)",
-              ts: new Date().toLocaleTimeString(),
+              event: "connected",
+              ts: Date.now(),
             },
           ]
           this.$toast.success(this.$t("state.connected"))
@@ -316,9 +321,9 @@ export default defineComponent({
           this.connectionState = false
           addWSLogLine({
             payload: this.$t("state.disconnected_from", { name: this.url }),
-            source: "info",
-            color: "#ff5555",
-            ts: new Date().toLocaleTimeString(),
+            source: "disconnected",
+            event: "disconnected",
+            ts: Date.now(),
           })
           this.$toast.error(this.$t("state.disconnected"))
         }
@@ -326,7 +331,7 @@ export default defineComponent({
           addWSLogLine({
             payload: data,
             source: "server",
-            ts: new Date().toLocaleTimeString(),
+            ts: Date.now(),
           })
         }
       } catch (e) {
@@ -351,15 +356,15 @@ export default defineComponent({
       addWSLogLine({
         payload: this.$t("error.something_went_wrong"),
         source: "info",
-        color: "#ff5555",
-        ts: new Date().toLocaleTimeString(),
+        event: "error",
+        ts: Date.now(),
       })
       if (error !== null)
         addWSLogLine({
           payload: error,
           source: "info",
-          color: "#ff5555",
-          ts: new Date().toLocaleTimeString(),
+          event: "error",
+          ts: Date.now(),
         })
     },
     sendMessage() {
@@ -368,7 +373,7 @@ export default defineComponent({
       addWSLogLine({
         payload: message,
         source: "client",
-        ts: new Date().toLocaleTimeString(),
+        ts: Date.now(),
       })
       this.communication.input = ""
     },
diff --git a/packages/hoppscotch-app/helpers/functional/json.ts b/packages/hoppscotch-app/helpers/functional/json.ts
index 2ba1317c2..79cf9cba4 100644
--- a/packages/hoppscotch-app/helpers/functional/json.ts
+++ b/packages/hoppscotch-app/helpers/functional/json.ts
@@ -1,4 +1,5 @@
 import * as O from "fp-ts/Option"
+import { flow } from "fp-ts/function"
 
 /**
  * Checks and Parses JSON string
@@ -7,3 +8,10 @@ import * as O from "fp-ts/Option"
  */
 export const safeParseJSON = (str: string): O.Option<object> =>
   O.tryCatch(() => JSON.parse(str))
+
+/**
+ * Checks if given string is a JSON string
+ * @param str Raw string to be checked
+ * @returns If string is a JSON string
+ */
+export const isJSON = flow(safeParseJSON, O.isSome)
diff --git a/packages/hoppscotch-app/helpers/utils/string.ts b/packages/hoppscotch-app/helpers/utils/string.ts
deleted file mode 100644
index f23107591..000000000
--- a/packages/hoppscotch-app/helpers/utils/string.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-const sourceEmojis = {
-  // Source used for info messages.
-  info: "\tℹ️ [INFO]:\t",
-  // Source used for client to server messages.
-  client: "\t⬅️ [SENT]:\t",
-  // Source used for server to client messages.
-  server: "\t➡️ [RECEIVED]:\t",
-}
-
-export function getSourcePrefix(source: keyof typeof sourceEmojis) {
-  return sourceEmojis[source]
-}
diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index b7d058558..77b0759c1 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -1,5 +1,6 @@
 {
   "action": {
+    "autoscroll": "Autoscroll",
     "cancel": "Cancel",
     "choose_file": "Choose a file",
     "clear": "Clear",
@@ -25,6 +26,8 @@
     "remove": "Remove",
     "restore": "Restore",
     "save": "Save",
+    "scroll_to_bottom": "Scroll to bottom",
+    "scroll_to_top": "Scroll to top",
     "search": "Search",
     "send": "Send",
     "start": "Start",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7592a3c6b..155afd12b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3604,7 +3604,7 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       callsites: 3.1.0
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       source-map: 0.6.1
     dev: true
 
@@ -3623,7 +3623,7 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@jest/test-result': 27.5.1
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       jest-haste-map: 27.5.1
       jest-runtime: 27.5.1
     transitivePeerDependencies:
@@ -3919,11 +3919,11 @@ packages:
       ufo: 0.7.11
     dev: false
 
-  /@nuxt/kit-edge/3.0.0-rc.2-27525415.a8d42d5:
-    resolution: {integrity: sha512-WfUj777D53SWprNmghE2JcgS/IAeU/NBLTsgJQf8EZG/GFjM62w/YCiY3zGcyVMsxHBSgnE9VUv5RZ5Gl8Os/A==}
+  /@nuxt/kit-edge/3.0.0-rc.2-27530889.9e5a3cd:
+    resolution: {integrity: sha512-D/Fm/7igO3/GE+5S8528frpJT25V+i4Y8ZcZ4MuO0i6karl4whwcSDkVOmrZBCtLa0IG+FD2f/6E4JJaB0BBHQ==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
     dependencies:
-      '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.2-27525415.a8d42d5
+      '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.2-27530889.9e5a3cd
       c12: 0.2.7
       consola: 2.15.3
       defu: 6.0.0
@@ -3934,7 +3934,7 @@ packages:
       knitwork: 0.1.1
       lodash.template: 4.5.0
       mlly: 0.5.2
-      pathe: 0.2.0
+      pathe: 0.3.0
       pkg-types: 0.3.2
       scule: 0.2.1
       semver: 7.3.7
@@ -3971,19 +3971,19 @@ packages:
       - encoding
     dev: false
 
-  /@nuxt/schema-edge/3.0.0-rc.2-27525415.a8d42d5:
-    resolution: {integrity: sha512-CrERM3lg+TXjBToAI/XmfLdJbGoQU600iUhZR9VIbUpNqq+nFPnIw1DxS6XioyBq/4rh/GmaHC+LxZFxNkigCA==}
+  /@nuxt/schema-edge/3.0.0-rc.2-27530889.9e5a3cd:
+    resolution: {integrity: sha512-Ac8bXC8nXYZKGJPLIMPKZwA5i7X/oaWGeSIJ5zruUt9XwLRP2BOgOTTrM+vy/KK44pWeweCgZkYMM6CD/XewBw==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
     dependencies:
       c12: 0.2.7
       create-require: 1.1.1
       defu: 6.0.0
       jiti: 1.13.0
-      pathe: 0.2.0
+      pathe: 0.3.0
       postcss-import-resolver: 2.0.0
       scule: 0.2.1
       std-env: 3.1.1
-      ufo: 0.8.3
+      ufo: 0.8.4
       unimport: 0.1.8
     transitivePeerDependencies:
       - esbuild
@@ -12606,7 +12606,7 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@types/node': 17.0.24
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
     dev: true
 
   /jest-snapshot/27.5.1:
@@ -12887,7 +12887,7 @@ packages:
     resolution: {integrity: sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==}
     hasBin: true
     dependencies:
-      minimist: 1.2.5
+      minimist: 1.2.6
 
   /json5/2.2.1:
     resolution: {integrity: sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==}
@@ -13931,7 +13931,8 @@ packages:
     resolution: {integrity: sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==}
     hasBin: true
     dependencies:
-      minimist: 1.2.5
+      minimist: 1.2.6
+    dev: false
 
   /mkdirp/0.5.6:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
@@ -14324,7 +14325,7 @@ packages:
   /nuxt-windicss/2.2.11:
     resolution: {integrity: sha512-xobq725D6vqpIgYOrLJ6CVlR4xLlFGwuq//gZikXKOdoVRpoK8C+NpHazPd4+f17urGQ4H0LqGBCIujTvV1V0g==}
     dependencies:
-      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.2-27525415.a8d42d5
+      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.2-27530889.9e5a3cd
       '@windicss/plugin-utils': 1.8.4
       consola: 2.15.3
       defu: 6.0.0
@@ -14848,6 +14849,10 @@ packages:
     resolution: {integrity: sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==}
     dev: true
 
+  /pathe/0.3.0:
+    resolution: {integrity: sha512-3vUjp552BJzCw9vqKsO5sttHkbYqqsZtH0x1PNtItgqx8BXEXzoY1SYRKcL6BTyVh4lGJGLj0tM42elUDMvcYA==}
+    dev: true
+
   /pause-stream/0.0.11:
     resolution: {integrity: sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=}
     dependencies:
@@ -17808,7 +17813,7 @@ packages:
       css-tree: 1.0.0-alpha.37
       csso: 4.2.0
       js-yaml: 3.14.1
-      mkdirp: 0.5.5
+      mkdirp: 0.5.6
       object.values: 1.1.5
       sax: 1.2.4
       stable: 0.1.8
@@ -18519,6 +18524,10 @@ packages:
   /ufo/0.8.3:
     resolution: {integrity: sha512-AIkk06G21y/P+NCatfU+1qldCmI0XCszZLn8AkuKotffF3eqCvlce0KuwM7ZemLE/my0GSYADOAeM5zDYWMB+A==}
 
+  /ufo/0.8.4:
+    resolution: {integrity: sha512-/+BmBDe8GvlB2nIflWasLLAInjYG0bC9HRnfEpNi4sw77J2AJNnEVnTDReVrehoh825+Q/evF3THXTAweyam2g==}
+    dev: true
+
   /uglify-js/3.14.3:
     resolution: {integrity: sha512-mic3aOdiq01DuSVx0TseaEzMIVqebMZ0Z3vaeDhFEh9bsc24hV1TFvN74reA2vs08D0ZWfNjAcJ3UbVLaBss+g==}
     engines: {node: '>=0.8.0'}

From c36e421d13b83a793d083ad7c96728cfe54ace44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bal=C3=A1zs=20=C3=9Ar?= <balazs@urbalazs.hu>
Date: Tue, 10 May 2022 08:12:54 +0200
Subject: [PATCH 05/50] chore(i18n): updated Hungarian translation (#2331)

---
 packages/hoppscotch-app/locales/hu.json | 83 ++++++++++++++-----------
 1 file changed, 45 insertions(+), 38 deletions(-)

diff --git a/packages/hoppscotch-app/locales/hu.json b/packages/hoppscotch-app/locales/hu.json
index 442cb5d2d..ca90a9736 100644
--- a/packages/hoppscotch-app/locales/hu.json
+++ b/packages/hoppscotch-app/locales/hu.json
@@ -1,5 +1,6 @@
 {
   "action": {
+    "autoscroll": "Automatikus görgetés",
     "cancel": "Mégse",
     "choose_file": "Válasszon egy fájlt",
     "clear": "Törlés",
@@ -9,7 +10,7 @@
     "delete": "Törlés",
     "disconnect": "Leválasztás",
     "dismiss": "Eltüntetés",
-    "dont_save": "Don't save",
+    "dont_save": "Ne mentse",
     "download_file": "Fájl letöltése",
     "duplicate": "Kettőzés",
     "edit": "Szerkesztés",
@@ -20,11 +21,13 @@
     "more": "Több",
     "new": "Új",
     "no": "Nem",
-    "paste": "Paste",
+    "paste": "Beillesztés",
     "prettify": "Csinosítás",
     "remove": "Eltávolítás",
     "restore": "Visszaállítás",
     "save": "Mentés",
+    "scroll_to_bottom": "Görgetés az aljára",
+    "scroll_to_top": "Görgetés a tetejére",
     "search": "Keresés",
     "send": "Küldés",
     "start": "Indítás",
@@ -45,9 +48,9 @@
     "chat_with_us": "Csevegjen velünk",
     "contact_us": "Lépjen kapcsolatba velünk",
     "copy": "Másolás",
-    "copy_user_id": "Copy User Auth Token",
-    "developer_option": "Developer options",
-    "developer_option_description": "Developer tools which helps in development and maintenance of Hoppscotch.",
+    "copy_user_id": "Felhasználó-hitelesítési token másolása",
+    "developer_option": "Fejlesztői beállítások",
+    "developer_option_description": "Fejlesztői eszközök, amelyek segítenek a Hoppscotch fejlesztésében és karbantartásában.",
     "discord": "Discord",
     "documentation": "Dokumentáció",
     "github": "GitHub",
@@ -60,7 +63,7 @@
     "keyboard_shortcuts": "Gyorsbillentyűk",
     "name": "Hoppscotch",
     "new_version_found": "Új verzió található. Töltse újra az oldalt a frissítéshez.",
-    "options": "Options",
+    "options": "Beállítások",
     "proxy_privacy_policy": "Proxy adatvédelmi irányelvei",
     "reload": "Újratöltés",
     "search": "Keresés",
@@ -68,7 +71,7 @@
     "shortcuts": "Gyorsbillentyűk",
     "spotlight": "Reflektorfény",
     "status": "Állapot",
-    "status_description": "Check the status of the website",
+    "status_description": "A weboldal állapotának ellenőrzése",
     "terms_and_privacy": "Feltételek és adatvédelem",
     "twitter": "Twitter",
     "type_a_command_search": "Írjon be parancsot vagy keresést…",
@@ -82,7 +85,7 @@
     "continue_with_email": "Folytatás e-mail-címmel",
     "continue_with_github": "Folytatás GitHub használatával",
     "continue_with_google": "Folytatás Google használatával",
-    "continue_with_microsoft": "Continue with Microsoft",
+    "continue_with_microsoft": "Folytatás Microsoft használatával",
     "email": "E-mail",
     "logged_out": "Kijelentkezett",
     "login": "Bejelentkezés",
@@ -111,7 +114,7 @@
     "invalid_name": "Adjon nevet a gyűjteménynek",
     "my_collections": "Saját gyűjtemények",
     "name": "Saját új gyűjtemény",
-    "name_length_insufficient": "Collection name should be at least 3 characters long",
+    "name_length_insufficient": "A gyűjtemény nevének legalább 3 karakter hosszúságúnak kell lennie",
     "new": "Új gyűjtemény",
     "renamed": "Gyűjtemény átnevezve",
     "request_in_use": "A kérés használatban",
@@ -131,7 +134,7 @@
     "remove_request": "Biztosan véglegesen törölni szeretné ezt a kérést?",
     "remove_team": "Biztosan törölni szeretné ezt a csapatot?",
     "remove_telemetry": "Biztosan ki szeretné kapcsolni a telemetriát?",
-    "request_change": "Are you sure you want to discard current request, unsaved changes will be lost.",
+    "request_change": "Biztosan el szeretné vetni a jelenlegi kérést? Minden mentetlen változtatás el fog veszni.",
     "sync": "Szeretné visszaállítani a munkaterületét a felhőből? Ez el fogja vetni a helyi folyamatát."
   },
   "count": {
@@ -169,20 +172,20 @@
     "tests": "Nincsenek tesztek ehhez a kéréshez"
   },
   "environment": {
-    "add_to_global": "Add to Global",
-    "added": "Environment addition",
+    "add_to_global": "Hozzáadás a globálishoz",
+    "added": "Környezet hozzáadása",
     "create_new": "Új környezet létrehozása",
-    "created": "Environment created",
-    "deleted": "Environment deletion",
+    "created": "Környezet létrehozva",
+    "deleted": "Környezet törlése",
     "edit": "Környezet szerkesztése",
     "invalid_name": "Adjon nevet a környezetnek",
-    "nested_overflow": "nested environment variables are limited to 10 levels",
+    "nested_overflow": "az egymásba ágyazott környezeti változók 10 szintre vannak korlátozva",
     "new": "Új környezet",
     "no_environment": "Nincs környezet",
-    "no_environment_description": "No environments were selected. Choose what to do with the following variables.",
+    "no_environment_description": "Nem lettek környezetek kiválasztva. Válassza ki, hogy mit kell tenni a következő változókkal.",
     "select": "Környezet kiválasztása",
     "title": "Környezetek",
-    "updated": "Environment updation",
+    "updated": "Környezet frissítve",
     "variable_list": "Változólista"
   },
   "error": {
@@ -192,7 +195,7 @@
     "empty_req_name": "Üres kérésnév",
     "f12_details": "(F12 a részletekért)",
     "gql_prettify_invalid_query": "Nem sikerült csinosítani egy érvénytelen lekérdezést, oldja meg a lekérdezés szintaktikai hibáit, és próbálja újra",
-    "incomplete_config_urls": "Incomplete configuration URLs",
+    "incomplete_config_urls": "Befejezetlen beállítási URL-ek",
     "incorrect_email": "Hibás e-mail",
     "invalid_link": "Érvénytelen hivatkozás",
     "invalid_link_description": "A kattintott hivatkozás érvénytelen vagy lejárt.",
@@ -202,20 +205,20 @@
     "no_duration": "Nincs időtartam",
     "script_fail": "Nem sikerült végrehajtani a kérés előtti parancsfájlt",
     "something_went_wrong": "Valami elromlott",
-    "test_script_fail": "Could not execute post-request script"
+    "test_script_fail": "Nem sikerült végrehajtani a kérés utáni parancsfájlt"
   },
   "export": {
     "as_json": "Exportálás JSON formátumban",
     "create_secret_gist": "Titkos Gist létrehozása",
     "gist_created": "Gist létrehozva",
     "require_github": "Jelentkezzen be GitHub használatával a titkos Gist létrehozásához",
-    "title": "Export"
+    "title": "Exportálás"
   },
   "folder": {
     "created": "Mappa létrehozva",
     "edit": "Mappa szerkesztése",
     "invalid_name": "Adjon nevet a mappának",
-    "name_length_insufficient": "Folder name should be at least 3 characters long",
+    "name_length_insufficient": "A mappa nevének legalább 3 karakter hosszúságúnak kell lennie",
     "new": "Új mappa",
     "renamed": "Mappa átnevezve"
   },
@@ -238,11 +241,11 @@
     "post_request_tests": "A tesztparancsfájlokat JavaScriptben írták, és a válasz megérkezése után lesznek futtatva.",
     "pre_request_script": "A kérés előtti parancsfájlokat JavaScriptben írták, és a kérés elküldése előtt lesznek futtatva.",
     "script_fail": "Úgy tűnik, hogy működési hiba van a kérés előtti parancsfájlban. Nézze meg az alábbi hibát, és annak megfelelően javítsa a parancsfájlt.",
-    "test_script_fail": "There seems to be an error with test script. Please fix the errors and run tests again",
+    "test_script_fail": "Úgy tűnik, hogy hiba van a tesztparancsfájlokkal. Javítsa ki a hibákat, és futtassa újra a teszteket.",
     "tests": "Írjon tesztparancsfájlt a hibakeresés automatizálására."
   },
   "hide": {
-    "collection": "Collapse Collection Panel",
+    "collection": "Gyűjteménypanel összecsukása",
     "more": "Több elrejtése",
     "preview": "Előnézet elrejtése",
     "sidebar": "Oldalsáv összecsukása"
@@ -266,13 +269,17 @@
     "from_url": "Importálás URL-ből",
     "gist_url": "Gist URL megadása",
     "json_description": "Gyűjtemények importálása Hoppscotch-gyűjtemények JSON-fájlból",
-    "title": "Importálás"
+    "title": "Importálás",
+    "import_from_url_success": "Gyűjtemények importálva",
+    "import_from_url_invalid_file_format": "Hiba a gyűjtemények importálása során",
+    "import_from_url_invalid_type": "Nem támogatott típus. Az elfogadott értékek: „hoppscotch”, „openapi”, „postman” vagy „insomnia”.",
+    "import_from_url_invalid_fetch": "Nem sikerült lekérni az adatokat az URL-ről"
   },
   "layout": {
-    "collapse_collection": "Collapse or Expand Collections",
-    "collapse_sidebar": "Collapse or Expand the sidebar",
+    "collapse_collection": "Gyűjtemények összecsukása vagy kinyitása",
+    "collapse_sidebar": "Az oldalsáv összecsukása vagy kinyitása",
     "column": "Függőleges elrendezés",
-    "name": "Layout",
+    "name": "Elrendezés",
     "row": "Vízszintes elrendezés",
     "zen_mode": "Zen mód"
   },
@@ -340,10 +347,10 @@
     "invalid_name": "Adjon nevet a kérésnek",
     "method": "Módszer",
     "name": "Kérés neve",
-    "new": "New Request",
-    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
-    "overriden": "Overridden",
+    "new": "Új kérés",
+    "override": "Felülbírálás",
+    "override_help": "A <xmp>Content-Type</xmp> beállítása a fejlécekben",
+    "overriden": "Felülbírálva",
     "parameter_list": "Lekérdezési paraméterek",
     "parameters": "Paraméterek",
     "path": "Útvonal",
@@ -356,7 +363,7 @@
     "save_as": "Mentés másként",
     "saved": "Kérés elmentve",
     "share": "Megosztás",
-    "share_description": "Share Hoppscotch with your friends",
+    "share_description": "A Hoppscotch megosztása az ismerőseivel",
     "title": "Kérés",
     "type": "Kérés típusa",
     "url": "URL",
@@ -396,7 +403,7 @@
     "extension_version": "Kiterjesztés verziója",
     "extensions": "Böngészőkiterjesztés",
     "extensions_use_toggle": "A böngészőkiterjesztés használata a kérések küldéséhez (ha jelen van)",
-    "follow": "Follow Us",
+    "follow": "Kövessen minket",
     "font_size": "Betűméret",
     "font_size_large": "Nagy",
     "font_size_medium": "Közepes",
@@ -461,7 +468,7 @@
       "method": "Módszer",
       "next_method": "Következő módszer kiválasztása",
       "post_method": "POST módszer kiválasztása",
-      "previous_method": "Elősző módszer kiválasztása",
+      "previous_method": "Előző módszer kiválasztása",
       "put_method": "PUT módszer kiválasztása",
       "reset_request": "Kérés visszaállítása",
       "save_to_collections": "Mentés a gyűjteményekbe",
@@ -478,7 +485,7 @@
   },
   "show": {
     "code": "Kód megjelenítése",
-    "collection": "Expand Collection Panel",
+    "collection": "Gyűjteménypanel kinyitása",
     "more": "Több megjelenítése",
     "sidebar": "Oldalsáv kinyitása"
   },
@@ -525,11 +532,11 @@
     "community": "Tegyen fel kérdéseket és segítsen másoknak",
     "documentation": "Tudjon meg többet a Hoppscotchról",
     "forum": "Tegyen fel kérdéseket és kapjon válaszokat",
-    "github": "Follow us on Github",
+    "github": "Kövessen minket GitHubon",
     "shortcuts": "Az alkalmazás gyorsabb böngészése",
     "team": "Vegye fel a kapcsolatot a csapattal",
     "title": "Támogatás",
-    "twitter": "Kövess minket Twitteren"
+    "twitter": "Kövessen minket Twitteren"
   },
   "tab": {
     "authorization": "Felhatalmazás",
@@ -590,7 +597,7 @@
     "new_name": "Saját új csapat",
     "no_access": "Nincs szerkesztési jogosultsága ezekhez a gyűjteményekhez",
     "no_invite_found": "A meghívás nem található. Vegye fel a kapcsolatot a csapat tulajdonosával.",
-    "not_found": "Team not found. Contact your team owner.",
+    "not_found": "A csapat nem található. Vegye fel a kapcsolatot a csapat tulajdonosával.",
     "not_valid_viewer": "Ön nem érvényes megtekintő. Vegye fel a kapcsolatot a csapat tulajdonosával.",
     "pending_invites": "Függőben lévő meghívások",
     "permissions": "Jogosultságok",

From 450af983e299ebcfb7afe3e5715b1e0890efadcc Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 10 May 2022 19:34:37 +0530
Subject: [PATCH 06/50] fix: overflow on log entry

---
 packages/hoppscotch-app/components/realtime/LogEntry.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/hoppscotch-app/components/realtime/LogEntry.vue b/packages/hoppscotch-app/components/realtime/LogEntry.vue
index 941455294..e9389e424 100644
--- a/packages/hoppscotch-app/components/realtime/LogEntry.vue
+++ b/packages/hoppscotch-app/components/realtime/LogEntry.vue
@@ -21,7 +21,7 @@
             </span>
           </div>
           <div
-            class="flex items-center flex-1 min-w-0 p-2"
+            class="items-center flex-1 min-w-0 p-2 inline-grid"
             @click="toggleExpandPayload()"
           >
             <div class="truncate">

From d04520698daf310dd8172e6cd91b72521965c73f Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Wed, 11 May 2022 14:53:06 +0530
Subject: [PATCH 07/50] refactor: isolate computed header calculation on
 effective requests (#2313)

Co-authored-by: liyasthomas <liyascthomas@gmail.com>
---
 .../components/http/Headers.vue               |  91 +++++++-
 .../components/http/RequestOptions.vue        |   2 +-
 .../components/smart/EnvInput.vue             |  20 ++
 .../helpers/utils/EffectiveURL.ts             | 220 ++++++++++++------
 4 files changed, 263 insertions(+), 70 deletions(-)

diff --git a/packages/hoppscotch-app/components/http/Headers.vue b/packages/hoppscotch-app/components/http/Headers.vue
index e25933640..651118c93 100644
--- a/packages/hoppscotch-app/components/http/Headers.vue
+++ b/packages/hoppscotch-app/components/http/Headers.vue
@@ -137,6 +137,47 @@
             />
           </span>
         </div>
+        <div
+          v-for="(header, index) in computedHeaders"
+          :key="`header-${index}`"
+          class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
+        >
+          <span>
+            <ButtonSecondary
+              svg="lock"
+              class="opacity-25 cursor-auto text-secondaryLight bg-divider"
+              tabindex="-1"
+            />
+          </span>
+          <SmartEnvInput
+            v-model="header.header.key"
+            :placeholder="`${t('count.value', { count: index + 1 })}`"
+            readonly
+          />
+          <SmartEnvInput
+            :value="mask(header)"
+            :placeholder="`${t('count.value', { count: index + 1 })}`"
+            readonly
+          />
+          <span>
+            <ButtonSecondary
+              v-if="header.source === 'auth'"
+              :svg="masking ? 'eye' : 'eye-off'"
+              @click.native="toggleMask()"
+            />
+            <ButtonSecondary
+              v-else
+              svg="arrow-up-right"
+              class="cursor-auto text-primary hover:text-primary"
+            />
+          </span>
+          <span>
+            <ButtonSecondary
+              svg="arrow-up-right"
+              @click.native="changeTab(header.source)"
+            />
+          </span>
+        </div>
       </draggable>
       <div
         v-if="workingHeaders.length === 0"
@@ -162,7 +203,7 @@
 </template>
 
 <script setup lang="ts">
-import { Ref, ref, watch } from "@nuxtjs/composition-api"
+import { computed, Ref, ref, watch } from "@nuxtjs/composition-api"
 import isEqual from "lodash/isEqual"
 import {
   HoppRESTHeader,
@@ -177,13 +218,29 @@ import * as O from "fp-ts/Option"
 import * as A from "fp-ts/Array"
 import cloneDeep from "lodash/cloneDeep"
 import draggable from "vuedraggable"
+import { RequestOptionTabs } from "./RequestOptions.vue"
 import { useCodemirror } from "~/helpers/editor/codemirror"
-import { restHeaders$, setRESTHeaders } from "~/newstore/RESTSession"
+import {
+  getRESTRequest,
+  restHeaders$,
+  restRequest$,
+  setRESTHeaders,
+} from "~/newstore/RESTSession"
 import { commonHeaders } from "~/helpers/headers"
-import { useI18n, useStream, useToast } from "~/helpers/utils/composables"
+import {
+  useI18n,
+  useReadonlyStream,
+  useStream,
+  useToast,
+} from "~/helpers/utils/composables"
 import linter from "~/helpers/editor/linting/rawKeyValue"
 import { throwError } from "~/helpers/functional/error"
 import { objRemoveKey } from "~/helpers/functional/object"
+import {
+  ComputedHeader,
+  getComputedHeaders,
+} from "~/helpers/utils/EffectiveURL"
+import { aggregateEnvs$, getAggregateEnvs } from "~/newstore/environments"
 
 const t = useI18n()
 const toast = useToast()
@@ -196,6 +253,10 @@ const bulkEditor = ref<any | null>(null)
 
 const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
 
+const emit = defineEmits<{
+  (e: "change-tab", value: RequestOptionTabs): void
+}>()
+
 useCodemirror(bulkEditor, bulkHeaders, {
   extendedEditorConfig: {
     mode: "text/x-yaml",
@@ -379,4 +440,28 @@ const clearContent = () => {
 
   bulkHeaders.value = ""
 }
+
+const restRequest = useReadonlyStream(restRequest$, getRESTRequest())
+const aggregateEnvs = useReadonlyStream(aggregateEnvs$, getAggregateEnvs())
+
+const computedHeaders = computed(() =>
+  getComputedHeaders(restRequest.value, aggregateEnvs.value)
+)
+
+const masking = ref(true)
+
+const toggleMask = () => {
+  masking.value = !masking.value
+}
+
+const mask = (header: ComputedHeader) => {
+  if (header.source === "auth" && masking.value)
+    return header.header.value.replace(/\S/gi, "*")
+  return header.header.value
+}
+
+const changeTab = (tab: ComputedHeader["source"]) => {
+  if (tab === "auth") emit("change-tab", "authorization")
+  else emit("change-tab", "bodyParams")
+}
 </script>
diff --git a/packages/hoppscotch-app/components/http/RequestOptions.vue b/packages/hoppscotch-app/components/http/RequestOptions.vue
index 486509733..3dec44d16 100644
--- a/packages/hoppscotch-app/components/http/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/http/RequestOptions.vue
@@ -18,7 +18,7 @@
       :label="`${$t('tab.headers')}`"
       :info="`${newActiveHeadersCount$}`"
     >
-      <HttpHeaders />
+      <HttpHeaders @change-tab="changeTab" />
     </SmartTab>
     <SmartTab :id="'authorization'" :label="`${$t('tab.authorization')}`">
       <HttpAuthorization />
diff --git a/packages/hoppscotch-app/components/smart/EnvInput.vue b/packages/hoppscotch-app/components/smart/EnvInput.vue
index 196f0fafa..761cc4564 100644
--- a/packages/hoppscotch-app/components/smart/EnvInput.vue
+++ b/packages/hoppscotch-app/components/smart/EnvInput.vue
@@ -47,6 +47,7 @@ const props = withDefaults(
     styles: string
     envs: { key: string; value: string; source: string }[] | null
     focus: boolean
+    readonly: boolean
   }>(),
   {
     value: "",
@@ -54,6 +55,7 @@ const props = withDefaults(
     styles: "",
     envs: null,
     focus: false,
+    readonly: false,
   }
 )
 
@@ -123,7 +125,23 @@ const envTooltipPlugin = new HoppReactiveEnvPlugin(envVars, view)
 const initView = (el: any) => {
   const extensions: Extension = [
     EditorView.contentAttributes.of({ "aria-label": props.placeholder }),
+    EditorView.updateListener.of((update) => {
+      if (props.readonly) {
+        update.view.contentDOM.inputMode = "none"
+      }
+    }),
+    EditorState.changeFilter.of(() => !props.readonly),
     inputTheme,
+    props.readonly
+      ? EditorView.theme({
+          ".cm-content": {
+            caretColor: "var(--secondary-dark-color) !important",
+            color: "var(--secondary-dark-color) !important",
+            backgroundColor: "var(--divider-color) !important",
+            opacity: 0.25,
+          },
+        })
+      : EditorView.theme({}),
     tooltips({
       position: "absolute",
     }),
@@ -141,6 +159,8 @@ const initView = (el: any) => {
     ViewPlugin.fromClass(
       class {
         update(update: ViewUpdate) {
+          if (props.readonly) return
+
           if (update.docChanged) {
             const prevValue = clone(cachedValue.value)
 
diff --git a/packages/hoppscotch-app/helpers/utils/EffectiveURL.ts b/packages/hoppscotch-app/helpers/utils/EffectiveURL.ts
index bcecc176c..fae74280e 100644
--- a/packages/hoppscotch-app/helpers/utils/EffectiveURL.ts
+++ b/packages/hoppscotch-app/helpers/utils/EffectiveURL.ts
@@ -11,6 +11,8 @@ import {
   parseBodyEnvVariables,
   parseRawKeyValueEntries,
   Environment,
+  HoppRESTHeader,
+  HoppRESTParam,
 } from "@hoppscotch/data"
 import { arrayFlatMap, arraySort } from "../functional/array"
 import { toFormData } from "../functional/formData"
@@ -29,6 +31,146 @@ export interface EffectiveHoppRESTRequest extends HoppRESTRequest {
   effectiveFinalBody: FormData | string | null
 }
 
+/**
+ * Get headers that can be generated by authorization config of the request
+ * @param req Request to check
+ * @param envVars Currently active environment variables
+ * @returns The list of headers
+ */
+const getComputedAuthHeaders = (
+  req: HoppRESTRequest,
+  envVars: Environment["variables"]
+) => {
+  // If Authorization header is also being user-defined, that takes priority
+  if (req.headers.find((h) => h.key.toLowerCase() === "authorization"))
+    return []
+
+  if (!req.auth.authActive) return []
+
+  const headers: HoppRESTHeader[] = []
+
+  // TODO: Support a better b64 implementation than btoa ?
+  if (req.auth.authType === "basic") {
+    const username = parseTemplateString(req.auth.username, envVars)
+    const password = parseTemplateString(req.auth.password, envVars)
+
+    headers.push({
+      active: true,
+      key: "Authorization",
+      value: `Basic ${btoa(`${username}:${password}`)}`,
+    })
+  } else if (
+    req.auth.authType === "bearer" ||
+    req.auth.authType === "oauth-2"
+  ) {
+    headers.push({
+      active: true,
+      key: "Authorization",
+      value: `Bearer ${parseTemplateString(req.auth.token, envVars)}`,
+    })
+  } else if (req.auth.authType === "api-key") {
+    const { key, value, addTo } = req.auth
+
+    if (addTo === "Headers") {
+      headers.push({
+        active: true,
+        key: parseTemplateString(key, envVars),
+        value: parseTemplateString(value, envVars),
+      })
+    }
+  }
+
+  return headers
+}
+
+/**
+ * Get headers that can be generated by body config of the request
+ * @param req Request to check
+ * @returns The list of headers
+ */
+export const getComputedBodyHeaders = (
+  req: HoppRESTRequest
+): HoppRESTHeader[] => {
+  // If a content-type is already defined, that will override this
+  if (
+    req.headers.find(
+      (req) => req.active && req.key.toLowerCase() === "content-type"
+    )
+  )
+    return []
+
+  // Body should have a non-null content-type
+  if (req.body.contentType === null) return []
+
+  return [
+    {
+      active: true,
+      key: "content-type",
+      value: req.body.contentType,
+    },
+  ]
+}
+
+export type ComputedHeader = {
+  source: "auth" | "body"
+  header: HoppRESTHeader
+}
+
+/**
+ * Returns a list of headers that will be added during execution of the request
+ * For e.g, Authorization headers maybe added if an Auth Mode is defined on REST
+ * @param req The request to check
+ * @param envVars The environment variables active
+ * @returns The headers that are generated along with the source of that header
+ */
+export const getComputedHeaders = (
+  req: HoppRESTRequest,
+  envVars: Environment["variables"]
+): ComputedHeader[] => [
+  ...getComputedAuthHeaders(req, envVars).map((header) => ({
+    source: "auth" as const,
+    header,
+  })),
+  ...getComputedBodyHeaders(req).map((header) => ({
+    source: "body" as const,
+    header,
+  })),
+]
+
+export type ComputedParam = {
+  source: "auth"
+  param: HoppRESTParam
+}
+
+/**
+ * Returns a list of params that will be added during execution of the request
+ * For e.g, Authorization params (like API-key) maybe added if an Auth Mode is defined on REST
+ * @param req The request to check
+ * @param envVars The environment variables active
+ * @returns The params that are generated along with the source of that header
+ */
+export const getComputedParams = (
+  req: HoppRESTRequest,
+  envVars: Environment["variables"]
+): ComputedParam[] => {
+  // When this gets complex, its best to split this function off (like with getComputedHeaders)
+  // API-key auth can be added to query params
+  if (!req.auth.authActive) return []
+  if (req.auth.authType !== "api-key") return []
+  if (req.auth.addTo !== "Query params") return []
+
+  return [
+    {
+      source: "auth",
+      param: {
+        active: true,
+        key: parseTemplateString(req.auth.key, envVars),
+        value: parseTemplateString(req.auth.value, envVars),
+      },
+    },
+  ]
+}
+
 // Resolves environment variables in the body
 export const resolvesEnvsInBody = (
   body: HoppRESTReqBody,
@@ -135,83 +277,29 @@ export function getEffectiveRESTRequest(
 ): EffectiveHoppRESTRequest {
   const envVariables = [...environment.variables, ...getGlobalVariables()]
 
-  const effectiveFinalHeaders = request.headers
-    .filter(
-      (x) =>
-        x.key !== "" && // Remove empty keys
-        x.active // Only active
-    )
-    .map((x) => ({
-      // Parse out environment template strings
+  const effectiveFinalHeaders = pipe(
+    getComputedHeaders(request, envVariables).map((h) => h.header),
+    A.concat(request.headers),
+    A.filter((x) => x.active && x.key !== ""),
+    A.map((x) => ({
       active: true,
       key: parseTemplateString(x.key, envVariables),
       value: parseTemplateString(x.value, envVariables),
     }))
+  )
 
-  const effectiveFinalParams = request.params
-    .filter(
-      (x) =>
-        x.key !== "" && // Remove empty keys
-        x.active // Only active
-    )
-    .map((x) => ({
+  const effectiveFinalParams = pipe(
+    getComputedParams(request, envVariables).map((p) => p.param),
+    A.concat(request.params),
+    A.filter((x) => x.active && x.key !== ""),
+    A.map((x) => ({
       active: true,
       key: parseTemplateString(x.key, envVariables),
       value: parseTemplateString(x.value, envVariables),
     }))
-
-  // Authentication
-  if (request.auth.authActive) {
-    // TODO: Support a better b64 implementation than btoa ?
-    if (request.auth.authType === "basic") {
-      const username = parseTemplateString(request.auth.username, envVariables)
-      const password = parseTemplateString(request.auth.password, envVariables)
-
-      effectiveFinalHeaders.push({
-        active: true,
-        key: "Authorization",
-        value: `Basic ${btoa(`${username}:${password}`)}`,
-      })
-    } else if (
-      request.auth.authType === "bearer" ||
-      request.auth.authType === "oauth-2"
-    ) {
-      effectiveFinalHeaders.push({
-        active: true,
-        key: "Authorization",
-        value: `Bearer ${parseTemplateString(
-          request.auth.token,
-          envVariables
-        )}`,
-      })
-    } else if (request.auth.authType === "api-key") {
-      const { key, value, addTo } = request.auth
-      if (addTo === "Headers") {
-        effectiveFinalHeaders.push({
-          active: true,
-          key: parseTemplateString(key, envVariables),
-          value: parseTemplateString(value, envVariables),
-        })
-      } else if (addTo === "Query params") {
-        effectiveFinalParams.push({
-          active: true,
-          key: parseTemplateString(key, envVariables),
-          value: parseTemplateString(value, envVariables),
-        })
-      }
-    }
-  }
+  )
 
   const effectiveFinalBody = getFinalBodyFromRequest(request, envVariables)
-  const contentTypeInHeader = effectiveFinalHeaders.find(
-    (x) => x.key.toLowerCase() === "content-type"
-  )
-  if (request.body.contentType && !contentTypeInHeader?.value)
-    effectiveFinalHeaders.push({
-      active: true,
-      key: "content-type",
-      value: request.body.contentType,
-    })
 
   return {
     ...request,

From 432337b8017d35af3f9ad59939e1597f49e881e6 Mon Sep 17 00:00:00 2001
From: Deepanshu Dhruw <dhruwxl@gmail.com>
Date: Wed, 11 May 2022 15:44:19 +0530
Subject: [PATCH 08/50] chore: tests for hoppscotch-cli (#2300)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 packages/hoppscotch-cli/jest.config.ts        | 193 +++++++
 packages/hoppscotch-cli/jest.setup.ts         |   1 +
 packages/hoppscotch-cli/package.json          |  18 +-
 .../src/__tests__/commands/test.spec.ts       |  64 +++
 .../functions/checks/checkFilePath.spec.ts    |  26 +
 .../functions/checks/isHoppCLIError.spec.ts   |  19 +
 .../checks/isHoppErrnoException.spec.ts       |  19 +
 .../functions/checks/isRESTCollection.spec.ts |  84 +++
 .../collection/collectionsRunner.spec.ts      | 116 ++++
 .../collectionsRunnerResult.spec.ts           |  35 ++
 .../getters/getDurationInSeconds.spec.ts      |  24 +
 .../getters/getEffectiveFinalMetaData.spec.ts |  42 ++
 .../mutators/parseCollectionData.spec.ts      |  36 ++
 .../getEffectiveRESTRequest.spec.ts           | 148 ++++++
 .../pre-request/getPreRequestMetrics.spec.ts  |  24 +
 .../preRequestScriptRunner.spec.ts            |  71 +++
 .../request/getRequestMetrics.spec.ts         |  24 +
 .../functions/request/processRequest.spec.ts  | 104 ++++
 .../functions/request/requestRunner.spec.ts   | 111 ++++
 .../functions/test/getTestMetrics.spec.ts     |  55 ++
 .../test/testDescriptorParser.spec.ts         |  63 +++
 .../functions/test/testRunner.spec.ts         |  73 +++
 .../src/__tests__/samples/fails.json          |  51 ++
 .../samples/malformed-collection.json         |  50 ++
 .../samples/malformed-collection2.json        |   7 +
 .../src/__tests__/samples/notjson.txt         |  29 +
 .../src/__tests__/samples/passes.json         |  51 ++
 .../hoppscotch-cli/src/__tests__/types.ts     |   7 +
 .../hoppscotch-cli/src/__tests__/utils.ts     |  26 +
 pnpm-lock.yaml                                | 503 ++++++++++++------
 30 files changed, 1919 insertions(+), 155 deletions(-)
 create mode 100644 packages/hoppscotch-cli/jest.config.ts
 create mode 100644 packages/hoppscotch-cli/jest.setup.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/commands/test.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/functions/checks/checkFilePath.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/functions/checks/isHoppCLIError.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/functions/checks/isHoppErrnoException.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/functions/checks/isRESTCollection.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/functions/collection/collectionsRunner.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/functions/collection/collectionsRunnerResult.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/functions/getters/getDurationInSeconds.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/functions/getters/getEffectiveFinalMetaData.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/functions/mutators/parseCollectionData.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/functions/pre-request/getEffectiveRESTRequest.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/functions/pre-request/getPreRequestMetrics.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/functions/pre-request/preRequestScriptRunner.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/functions/request/getRequestMetrics.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/functions/request/processRequest.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/functions/request/requestRunner.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/functions/test/getTestMetrics.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/functions/test/testDescriptorParser.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/functions/test/testRunner.spec.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/samples/fails.json
 create mode 100644 packages/hoppscotch-cli/src/__tests__/samples/malformed-collection.json
 create mode 100644 packages/hoppscotch-cli/src/__tests__/samples/malformed-collection2.json
 create mode 100644 packages/hoppscotch-cli/src/__tests__/samples/notjson.txt
 create mode 100644 packages/hoppscotch-cli/src/__tests__/samples/passes.json
 create mode 100644 packages/hoppscotch-cli/src/__tests__/types.ts
 create mode 100644 packages/hoppscotch-cli/src/__tests__/utils.ts

diff --git a/packages/hoppscotch-cli/jest.config.ts b/packages/hoppscotch-cli/jest.config.ts
new file mode 100644
index 000000000..548dc2bc2
--- /dev/null
+++ b/packages/hoppscotch-cli/jest.config.ts
@@ -0,0 +1,193 @@
+/*
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/configuration
+ */
+
+module.exports = {
+  // All imported modules in your tests should be mocked automatically
+  // automock: false,
+
+  // Stop running tests after `n` failures
+  // bail: 0,
+
+  // The directory where Jest should store its cached dependency information
+  // cacheDirectory: "/tmp/jest_rs",
+
+  // Automatically clear mock calls, instances and results before every test
+  clearMocks: true,
+
+  // Indicates whether the coverage information should be collected while executing the test
+  // collectCoverage: true,
+
+  // An array of glob patterns indicating a set of files for which coverage information should be collected
+  // collectCoverageFrom: undefined,
+
+  // The directory where Jest should output its coverage files
+  // coverageDirectory: undefined,
+
+  // An array of regexp pattern strings used to skip coverage collection
+  // coveragePathIgnorePatterns: [
+  //   "/node_modules/"
+  // ],
+
+  // Indicates which provider should be used to instrument code for coverage
+  // coverageProvider: "babel",
+
+  // A list of reporter names that Jest uses when writing coverage reports
+  // coverageReporters: [
+  //   "json",
+  //   "text",
+  //   "lcov",
+  //   "clover"
+  // ],
+
+  // An object that configures minimum threshold enforcement for coverage results
+  // coverageThreshold: undefined,
+
+  // A path to a custom dependency extractor
+  // dependencyExtractor: undefined,
+
+  // Make calling deprecated APIs throw helpful error messages
+  // errorOnDeprecated: false,
+
+  // Force coverage collection from ignored files using an array of glob patterns
+  // forceCoverageMatch: [],
+
+  // A path to a module which exports an async function that is triggered once before all test suites
+  // globalSetup: undefined,
+
+  // A path to a module which exports an async function that is triggered once after all test suites
+  // globalTeardown: undefined,
+
+  // A set of global variables that need to be available in all test environments
+  // globals: {
+  // 	'ts-jest': {
+  // 		useESM: true,
+  // 	},
+  // },
+
+  // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers.
+  // maxWorkers: "50%",
+
+  // An array of directory names to be searched recursively up from the requiring module's location
+  // moduleDirectories: [
+  //   "node_modules"
+  // ],
+
+  // An array of file extensions your modules use
+  moduleFileExtensions: ["js", "ts", "json"],
+
+  // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module
+  // moduleNameMapper: {
+  // 	'^(\\.{1,2}/.*)\\.js$': '$1',
+  // },
+
+  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
+  // modulePathIgnorePatterns: [],
+
+  // Activates notifications for test results
+  // notify: false,
+
+  // An enum that specifies notification mode. Requires { notify: true }
+  // notifyMode: "failure-change",
+
+  // A preset that is used as a base for Jest's configuration
+  preset: "ts-jest/presets/js-with-babel",
+
+  // Run tests from one or more projects
+  // projects: undefined,
+
+  // Use this configuration option to add custom reporters to Jest
+  // reporters: undefined,
+
+  // Automatically reset mock state before every test
+  // resetMocks: false,
+
+  // Reset the module registry before running each individual test
+  // resetModules: false,
+
+  // A path to a custom resolver
+  // resolver: undefined,
+
+  // Automatically restore mock state and implementation before every test
+  // restoreMocks: false,
+
+  // The root directory that Jest should scan for tests and modules within
+  // rootDir: undefined,
+
+  // A list of paths to directories that Jest should use to search for files in
+  // roots: [
+  //   "<rootDir>"
+  // ],
+
+  // Allows you to use a custom runner instead of Jest's default test runner
+  // runner: "jest-runner",
+
+  // The paths to modules that run some code to configure or set up the testing environment before each test
+  // setupFiles: [],
+
+  // A list of paths to modules that run some code to configure or set up the testing framework before each test
+  setupFilesAfterEnv: ["./jest.setup.ts"],
+
+  // The number of seconds after which a test is considered as slow and reported as such in the results.
+  // slowTestThreshold: 5,
+
+  // A list of paths to snapshot serializer modules Jest should use for snapshot testing
+  // snapshotSerializers: [],
+
+  // The test environment that will be used for testing
+  testEnvironment: "node",
+
+  // Options that will be passed to the testEnvironment
+  // testEnvironmentOptions: {},
+
+  // Adds a location field to test results
+  // testLocationInResults: false,
+
+  // The glob patterns Jest uses to detect test files
+  testMatch: [
+    // "**/__tests__/**/*.[jt]s?(x)",
+    "**/src/__tests__/**/*.*.ts",
+  ],
+
+  // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
+  testPathIgnorePatterns: ["/node_modules/", "/dist/"],
+
+  // The regexp pattern or array of patterns that Jest uses to detect test files
+  // testRegex: [],
+
+  // This option allows the use of a custom results processor
+  // testResultsProcessor: undefined,
+
+  // This option allows use of a custom test runner
+  // testRunner: "jest-circus/runner",
+
+  // This option sets the URL for the jsdom environment. It is reflected in properties such as location.href
+  // testURL: "http://localhost",
+
+  // Setting this value to "fake" allows the use of fake timers for functions such as "setTimeout"
+  // timers: "real",
+
+  // A map from regular expressions to paths to transformers
+  transform: {
+    "^.+\\.ts$": "ts-jest",
+  },
+
+  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
+  // transformIgnorePatterns: [
+  //   "/node_modules/",
+  //   "\\.pnp\\.[^\\/]+$"
+  // ],
+
+  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
+  // unmockedModulePathPatterns: undefined,
+
+  // Indicates whether each individual test should be reported during the run
+  verbose: true,
+
+  // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode
+  // watchPathIgnorePatterns: [],
+
+  // Whether to use watchman for file crawling
+  // watchman: true,
+};
diff --git a/packages/hoppscotch-cli/jest.setup.ts b/packages/hoppscotch-cli/jest.setup.ts
new file mode 100644
index 000000000..7a33702a4
--- /dev/null
+++ b/packages/hoppscotch-cli/jest.setup.ts
@@ -0,0 +1 @@
+import "@relmify/jest-fp-ts";
diff --git a/packages/hoppscotch-cli/package.json b/packages/hoppscotch-cli/package.json
index 6eb4efaf7..79adb3e83 100644
--- a/packages/hoppscotch-cli/package.json
+++ b/packages/hoppscotch-cli/package.json
@@ -16,7 +16,8 @@
     "debugger": "node debugger.js 9999",
     "prepublish": "pnpm exec tsup",
     "prettier-format": "prettier --config .prettierrc 'src/**/*.ts' --write",
-    "do-typecheck": "pnpm exec tsc --noEmit"
+    "do-typecheck": "pnpm exec tsc --noEmit",
+    "test": "pnpm run build && jest && rm -rf dist"
   },
   "keywords": [
     "cli",
@@ -37,19 +38,26 @@
   "devDependencies": {
     "@hoppscotch/data": "workspace:^0.4.2",
     "@hoppscotch/js-sandbox": "workspace:^2.0.0",
-    "@swc/core": "^1.2.163",
+    "@relmify/jest-fp-ts": "^2.0.2",
+    "@swc/core": "^1.2.181",
     "@types/axios": "^0.14.0",
     "@types/chalk": "^2.2.0",
     "@types/commander": "^2.12.2",
+    "@types/jest": "^27.4.1",
+    "@types/lodash": "^4.14.181",
+    "@types/qs": "^6.9.7",
     "axios": "^0.21.4",
     "chalk": "^4.1.1",
     "commander": "^8.0.0",
     "esm": "^3.2.25",
-    "fp-ts": "^2.11.3",
+    "fp-ts": "^2.12.1",
+    "io-ts": "^2.2.16",
+    "jest": "^27.5.1",
     "lodash": "^4.17.21",
     "prettier": "^2.6.2",
     "qs": "^6.10.3",
-    "tsup": "^5.12.4",
-    "typescript": "^4.6.3"
+    "ts-jest": "^27.1.4",
+    "tsup": "^5.12.7",
+    "typescript": "^4.6.4"
   }
 }
diff --git a/packages/hoppscotch-cli/src/__tests__/commands/test.spec.ts b/packages/hoppscotch-cli/src/__tests__/commands/test.spec.ts
new file mode 100644
index 000000000..6850f5ff3
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/commands/test.spec.ts
@@ -0,0 +1,64 @@
+import { ExecException } from "child_process";
+import { HoppErrorCode } from "../../types/errors";
+import { execAsync, getErrorCode, getTestJsonFilePath } from "../utils";
+
+describe("Test 'hopp test <file>' command:", () => {
+  test("No collection file path provided.", async () => {
+    const cmd = `node ./bin/hopp test`;
+    const { stdout } = await execAsync(cmd);
+    const out = getErrorCode(stdout);
+
+    expect(out).toBe<HoppErrorCode>("NO_FILE_PATH");
+  });
+
+  test("Collection file not found.", async () => {
+    const cmd = `node ./bin/hopp test notfound.json`;
+    const { stdout } = await execAsync(cmd);
+    const out = getErrorCode(stdout);
+
+    expect(out).toBe<HoppErrorCode>("FILE_NOT_FOUND");
+  });
+
+  test("Malformed collection file.", async () => {
+    const cmd = `node ./bin/hopp test ${getTestJsonFilePath(
+      "malformed-collection.json"
+    )}`;
+    const { stdout } = await execAsync(cmd);
+    const out = getErrorCode(stdout);
+
+    expect(out).toBe<HoppErrorCode>("MALFORMED_COLLECTION");
+  });
+
+  test("Invalid arguement.", async () => {
+    const cmd = `node ./bin/hopp invalid-arg`;
+    const { stdout } = await execAsync(cmd);
+    const out = getErrorCode(stdout);
+
+    expect(out).toBe<HoppErrorCode>("INVALID_ARGUMENT");
+  });
+
+  test("Collection file not JSON type.", async () => {
+    const cmd = `node ./bin/hopp test ${getTestJsonFilePath("notjson.txt")}`;
+    const { stdout } = await execAsync(cmd);
+    const out = getErrorCode(stdout);
+
+    expect(out).toBe<HoppErrorCode>("FILE_NOT_JSON");
+  });
+
+  test("Some errors occured (exit code 1).", async () => {
+    const cmd = `node ./bin/hopp test ${getTestJsonFilePath("fails.json")}`;
+    const { error } = await execAsync(cmd);
+
+    expect(error).not.toBeNull();
+    expect(error).toMatchObject(<ExecException>{
+      code: 1,
+    });
+  });
+
+  test("No errors occured (exit code 0).", async () => {
+    const cmd = `node ./bin/hopp test ${getTestJsonFilePath("passes.json")}`;
+    const { error } = await execAsync(cmd);
+
+    expect(error).toBeNull();
+  });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/checks/checkFilePath.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/checks/checkFilePath.spec.ts
new file mode 100644
index 000000000..7b7366d66
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/functions/checks/checkFilePath.spec.ts
@@ -0,0 +1,26 @@
+import { HoppCLIError } from "../../../types/errors";
+import { checkFilePath } from "../../../utils/checks";
+
+describe("checkFilePath", () => {
+  test("File doesn't exists.", () => {
+    return expect(
+      checkFilePath("./src/samples/this-file-not-exists.json")()
+    ).resolves.toSubsetEqualLeft(<HoppCLIError>{
+      code: "FILE_NOT_FOUND",
+    });
+  });
+
+  test("File not of JSON type.", () => {
+    return expect(
+      checkFilePath("./src/__tests__/samples/notjson.txt")()
+    ).resolves.toSubsetEqualLeft(<HoppCLIError>{
+      code: "FILE_NOT_JSON",
+    });
+  });
+
+  test("Existing JSON file.", () => {
+    return expect(
+      checkFilePath("./src/__tests__/samples/passes.json")()
+    ).resolves.toBeRight();
+  });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/checks/isHoppCLIError.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/checks/isHoppCLIError.spec.ts
new file mode 100644
index 000000000..a12d127cb
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/functions/checks/isHoppCLIError.spec.ts
@@ -0,0 +1,19 @@
+import { isHoppCLIError } from "../../../utils/checks";
+
+describe("isHoppCLIError", () => {
+  test("NULL error value.", () => {
+    expect(isHoppCLIError(null)).toBeFalsy();
+  });
+
+  test("Non-existing code property.", () => {
+    expect(isHoppCLIError({ name: "name" })).toBeFalsy();
+  });
+
+  test("Invalid code value.", () => {
+    expect(isHoppCLIError({ code: 2 })).toBeFalsy();
+  });
+
+  test("Valid code value.", () => {
+    expect(isHoppCLIError({ code: "TEST_SCRIPT_ERROR" })).toBeTruthy();
+  });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/checks/isHoppErrnoException.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/checks/isHoppErrnoException.spec.ts
new file mode 100644
index 000000000..1c1716bb8
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/functions/checks/isHoppErrnoException.spec.ts
@@ -0,0 +1,19 @@
+import { isHoppErrnoException } from "../../../utils/checks";
+
+describe("isHoppErrnoException", () => {
+  test("NULL exception value.", () => {
+    expect(isHoppErrnoException(null)).toBeFalsy();
+  });
+
+  test("Non-existing name property.", () => {
+    expect(isHoppErrnoException({ what: "what" })).toBeFalsy();
+  });
+
+  test("Invalid name value.", () => {
+    expect(isHoppErrnoException({ name: 3 })).toBeFalsy();
+  });
+
+  test("Valid name value.", () => {
+    expect(isHoppErrnoException({ name: "name" })).toBeTruthy();
+  });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/checks/isRESTCollection.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/checks/isRESTCollection.spec.ts
new file mode 100644
index 000000000..b9b30e9ac
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/functions/checks/isRESTCollection.spec.ts
@@ -0,0 +1,84 @@
+import { isRESTCollection } from "../../../utils/checks";
+
+describe("isRESTCollection", () => {
+  test("Undefined collection value.", () => {
+    expect(isRESTCollection(undefined)).toBeFalsy();
+  });
+
+  test("Invalid id value.", () => {
+    expect(
+      isRESTCollection({
+        v: 1,
+        name: "test",
+        id: 1,
+      })
+    ).toBeFalsy();
+  });
+
+  test("Invalid requests value.", () => {
+    expect(
+      isRESTCollection({
+        v: 1,
+        name: "test",
+        id: "1",
+        requests: null,
+      })
+    ).toBeFalsy();
+  });
+
+  test("Invalid folders value.", () => {
+    expect(
+      isRESTCollection({
+        v: 1,
+        name: "test",
+        id: "1",
+        requests: [],
+        folders: undefined,
+      })
+    ).toBeFalsy();
+  });
+
+  test("Invalid RESTCollection(s) in folders.", () => {
+    expect(
+      isRESTCollection({
+        v: 1,
+        name: "test",
+        id: "1",
+        requests: [],
+        folders: [
+          {
+            v: 1,
+            name: "test1",
+            id: "2",
+            requests: undefined,
+            folders: [],
+          },
+        ],
+      })
+    ).toBeFalsy();
+  });
+
+  test("Invalid HoppRESTRequest(s) in requests.", () => {
+    expect(
+      isRESTCollection({
+        v: 1,
+        name: "test",
+        id: "1",
+        requests: [{}],
+        folders: [],
+      })
+    ).toBeFalsy();
+  });
+
+  test("Valid RESTCollection.", () => {
+    expect(
+      isRESTCollection({
+        v: 1,
+        name: "test",
+        id: "1",
+        requests: [],
+        folders: [],
+      })
+    ).toBeTruthy();
+  });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/collection/collectionsRunner.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/collection/collectionsRunner.spec.ts
new file mode 100644
index 000000000..dcfe69dd6
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/functions/collection/collectionsRunner.spec.ts
@@ -0,0 +1,116 @@
+import { collectionsRunner } from "../../../utils/collections";
+import { HoppRESTRequest } from "@hoppscotch/data";
+import axios, { AxiosResponse } from "axios";
+
+import "@relmify/jest-fp-ts";
+
+jest.mock("axios");
+
+const SAMPLE_HOPP_REQUEST = <HoppRESTRequest>{
+  v: "1",
+  name: "request",
+  method: "GET",
+  endpoint: "https://example.com",
+  params: [],
+  headers: [],
+  preRequestScript: "",
+  testScript: "",
+  auth: {
+    authActive: false,
+    authType: "none",
+  },
+  body: {
+    contentType: null,
+    body: null,
+  },
+};
+
+const SAMPLE_RESOLVED_RESPONSE = <AxiosResponse>{
+  data: { body: 1 },
+  status: 200,
+  statusText: "OK",
+  config: {
+    url: "https://example.com",
+    supported: true,
+    method: "GET",
+  },
+  headers: [],
+};
+
+describe("collectionsRunner", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  test("Empty HoppCollection.", () => {
+    return expect(collectionsRunner([])()).resolves.toStrictEqual([]);
+  });
+
+  test("Empty requests and folders in collection.", () => {
+    return expect(
+      collectionsRunner([
+        {
+          v: 1,
+          name: "name",
+          folders: [],
+          requests: [],
+        },
+      ])()
+    ).resolves.toMatchObject([]);
+  });
+
+  test("Non-empty requests in collection.", () => {
+    (axios as unknown as jest.Mock).mockResolvedValue(SAMPLE_RESOLVED_RESPONSE);
+
+    return expect(
+      collectionsRunner([
+        {
+          v: 1,
+          name: "collection",
+          folders: [],
+          requests: [SAMPLE_HOPP_REQUEST],
+        },
+      ])()
+    ).resolves.toMatchObject([
+      {
+        path: "collection/request",
+        tests: [],
+        errors: [],
+        result: true,
+      },
+    ]);
+  });
+
+  test("Non-empty folders in collection.", () => {
+    (axios as unknown as jest.Mock).mockResolvedValue(SAMPLE_RESOLVED_RESPONSE);
+
+    return expect(
+      collectionsRunner([
+        {
+          v: 1,
+          name: "collection",
+          folders: [
+            {
+              v: 1,
+              name: "folder",
+              folders: [],
+              requests: [SAMPLE_HOPP_REQUEST],
+            },
+          ],
+          requests: [],
+        },
+      ])()
+    ).resolves.toMatchObject([
+      {
+        path: "collection/folder/request",
+        tests: [],
+        errors: [],
+        result: true,
+      },
+    ]);
+  });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/collection/collectionsRunnerResult.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/collection/collectionsRunnerResult.spec.ts
new file mode 100644
index 000000000..fdc9a5494
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/functions/collection/collectionsRunnerResult.spec.ts
@@ -0,0 +1,35 @@
+import { collectionsRunnerResult } from "../../../utils/collections";
+
+const FALSE_RESULT_REPORT = {
+  path: "some_path",
+  tests: [],
+  errors: [],
+  result: false,
+  duration: { test: 1, request: 1, preRequest: 1 },
+};
+
+const TRUE_RESULT_REPORT = {
+  path: "some_path",
+  tests: [],
+  errors: [],
+  result: true,
+  duration: { test: 1, request: 1, preRequest: 1 },
+};
+
+describe("collectionsRunnerResult", () => {
+  test("Empty request-report.", () => {
+    expect(collectionsRunnerResult([])).toBeTruthy();
+  });
+
+  test("Atleast 1 false result in request-report.", () => {
+    expect(
+      collectionsRunnerResult([FALSE_RESULT_REPORT, TRUE_RESULT_REPORT])
+    ).toBeFalsy();
+  });
+
+  test("All true result(s) in request-report.", () => {
+    expect(
+      collectionsRunnerResult([TRUE_RESULT_REPORT, TRUE_RESULT_REPORT])
+    ).toBeTruthy();
+  });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/getters/getDurationInSeconds.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/getters/getDurationInSeconds.spec.ts
new file mode 100644
index 000000000..edeb52c7b
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/functions/getters/getDurationInSeconds.spec.ts
@@ -0,0 +1,24 @@
+import { DEFAULT_DURATION_PRECISION } from "../../../utils/constants";
+import { getDurationInSeconds } from "../../../utils/getters";
+
+describe("getDurationInSeconds", () => {
+  const testDurations = [
+    { end: [1, 111111111], precision: 1, expected: 1.1 },
+    { end: [2, 333333333], precision: 2, expected: 2.33 },
+    {
+      end: [3, 555555555],
+      precision: DEFAULT_DURATION_PRECISION,
+      expected: 3.556,
+    },
+    { end: [4, 777777777], precision: 4, expected: 4.7778 },
+  ];
+
+  test.each(testDurations)(
+    "($end.0 s + $end.1 ns) rounded-off to $expected",
+    ({ end, precision, expected }) => {
+      expect(getDurationInSeconds(end as [number, number], precision)).toBe(
+        expected
+      );
+    }
+  );
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/getters/getEffectiveFinalMetaData.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/getters/getEffectiveFinalMetaData.spec.ts
new file mode 100644
index 000000000..637064bac
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/functions/getters/getEffectiveFinalMetaData.spec.ts
@@ -0,0 +1,42 @@
+import { Environment } from "@hoppscotch/data";
+import { getEffectiveFinalMetaData } from "../../../utils/getters";
+
+const DEFAULT_ENV = <Environment>{
+  name: "name",
+  variables: [{ key: "PARAM", value: "parsed_param" }],
+};
+
+describe("getEffectiveFinalMetaData", () => {
+  test("Empty list of meta-data.", () => {
+    expect(getEffectiveFinalMetaData([], DEFAULT_ENV)).toSubsetEqualRight([]);
+  });
+
+  test("Non-empty active list of meta-data with unavailable ENV.", () => {
+    expect(
+      getEffectiveFinalMetaData(
+        [{ active: true, key: "<<UNKNOWN_KEY>>", value: "<<UNKNOWN_VALUE>>" }],
+        DEFAULT_ENV
+      )
+    ).toSubsetEqualRight([{ active: true, key: "", value: "" }]);
+  });
+
+  test("Inactive list of meta-data.", () => {
+    expect(
+      getEffectiveFinalMetaData(
+        [{ active: false, key: "KEY", value: "<<PARAM>>" }],
+        DEFAULT_ENV
+      )
+    ).toSubsetEqualRight([]);
+  });
+
+  test("Active list of meta-data.", () => {
+    expect(
+      getEffectiveFinalMetaData(
+        [{ active: true, key: "PARAM", value: "<<PARAM>>" }],
+        DEFAULT_ENV
+      )
+    ).toSubsetEqualRight([
+      { active: true, key: "PARAM", value: "parsed_param" },
+    ]);
+  });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/mutators/parseCollectionData.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/mutators/parseCollectionData.spec.ts
new file mode 100644
index 000000000..f1fc79eab
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/functions/mutators/parseCollectionData.spec.ts
@@ -0,0 +1,36 @@
+import { HoppCLIError } from "../../../types/errors";
+import { parseCollectionData } from "../../../utils/mutators";
+
+describe("parseCollectionData", () => {
+  test("Reading non-existing file.", () => {
+    return expect(
+      parseCollectionData("./src/__tests__/samples/notexist.txt")()
+    ).resolves.toSubsetEqualLeft(<HoppCLIError>{
+      code: "UNKNOWN_ERROR",
+    });
+  });
+
+  test("Unparseable JSON contents.", () => {
+    return expect(
+      parseCollectionData("./src/__tests__/samples/malformed-collection.json")()
+    ).resolves.toSubsetEqualLeft(<HoppCLIError>{
+      code: "MALFORMED_COLLECTION",
+    });
+  });
+
+  test("Invalid HoppCollection.", () => {
+    return expect(
+      parseCollectionData(
+        "./src/__tests__/samples/malformed-collection2.json"
+      )()
+    ).resolves.toSubsetEqualLeft(<HoppCLIError>{
+      code: "MALFORMED_COLLECTION",
+    });
+  });
+
+  test("Valid HoppCollection.", () => {
+    return expect(
+      parseCollectionData("./src/__tests__/samples/passes.json")()
+    ).resolves.toBeRight();
+  });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/pre-request/getEffectiveRESTRequest.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/pre-request/getEffectiveRESTRequest.spec.ts
new file mode 100644
index 000000000..0aa46fcc9
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/functions/pre-request/getEffectiveRESTRequest.spec.ts
@@ -0,0 +1,148 @@
+import { Environment, HoppRESTRequest } from "@hoppscotch/data";
+import { EffectiveHoppRESTRequest } from "../../../interfaces/request";
+import { HoppCLIError } from "../../../types/errors";
+import { getEffectiveRESTRequest } from "../../../utils/pre-request";
+
+const DEFAULT_ENV = <Environment>{
+  name: "name",
+  variables: [
+    {
+      key: "HEADER",
+      value: "parsed_header",
+    },
+    { key: "PARAM", value: "parsed_param" },
+    { key: "TOKEN", value: "parsed_token" },
+    { key: "BODY_PROP", value: "parsed_body_prop" },
+    { key: "ENDPOINT", value: "https://parsed-endpoint.com" },
+  ],
+};
+
+const DEFAULT_REQUEST = <HoppRESTRequest>{
+  v: "1",
+  name: "name",
+  method: "GET",
+  endpoint: "https://example.com",
+  params: [],
+  headers: [],
+  preRequestScript: "",
+  testScript: "",
+  auth: {
+    authActive: false,
+    authType: "none",
+  },
+  body: {
+    contentType: null,
+    body: null,
+  },
+};
+
+describe("getEffectiveRESTRequest", () => {
+  let SAMPLE_REQUEST = Object.assign({}, DEFAULT_REQUEST);
+
+  beforeEach(() => {
+    SAMPLE_REQUEST = Object.assign({}, DEFAULT_REQUEST);
+  });
+
+  test("Endpoint, headers and params with unavailable ENV.", () => {
+    SAMPLE_REQUEST.headers = [
+      {
+        key: "HEADER",
+        value: "<<UNKNOWN>>",
+        active: true,
+      },
+    ];
+    SAMPLE_REQUEST.params = [
+      {
+        key: "PARAM",
+        value: "<<UNKNOWN>>",
+        active: true,
+      },
+    ];
+    SAMPLE_REQUEST.endpoint = "<<UNKNOWN>>";
+
+    expect(
+      getEffectiveRESTRequest(SAMPLE_REQUEST, DEFAULT_ENV)
+    ).toSubsetEqualRight(<EffectiveHoppRESTRequest>{
+      effectiveFinalHeaders: [{ active: true, key: "HEADER", value: "" }],
+      effectiveFinalParams: [{ active: true, key: "PARAM", value: "" }],
+      effectiveFinalURL: "",
+    });
+  });
+
+  test("Auth with unavailable ENV.", () => {
+    SAMPLE_REQUEST.auth = {
+      authActive: true,
+      authType: "bearer",
+      token: "<<UNKNOWN>>",
+    };
+
+    expect(
+      getEffectiveRESTRequest(SAMPLE_REQUEST, DEFAULT_ENV)
+    ).toSubsetEqualRight(<EffectiveHoppRESTRequest>{
+      effectiveFinalHeaders: [
+        { active: true, key: "Authorization", value: "Bearer " },
+      ],
+    });
+  });
+
+  test("Body with unavailable ENV.", () => {
+    SAMPLE_REQUEST.body = {
+      contentType: "text/plain",
+      body: "<<UNKNOWN>>",
+    };
+
+    expect(
+      getEffectiveRESTRequest(SAMPLE_REQUEST, DEFAULT_ENV)
+    ).toSubsetEqualLeft(<HoppCLIError>{
+      code: "PARSING_ERROR",
+    });
+  });
+
+  test("Request meta-data with available ENVs.", () => {
+    SAMPLE_REQUEST.headers = [
+      {
+        key: "HEADER",
+        value: "<<HEADER>>",
+        active: true,
+      },
+    ];
+    SAMPLE_REQUEST.params = [
+      {
+        key: "PARAM",
+        value: "<<PARAM>>",
+        active: true,
+      },
+    ];
+    SAMPLE_REQUEST.endpoint = "<<ENDPOINT>>";
+    SAMPLE_REQUEST.auth = {
+      authActive: true,
+      authType: "bearer",
+      token: "<<TOKEN>>",
+    };
+    SAMPLE_REQUEST.body = {
+      contentType: "text/plain",
+      body: "<<BODY_PROP>>",
+    };
+
+    const vars = DEFAULT_ENV.variables;
+
+    expect(
+      getEffectiveRESTRequest(SAMPLE_REQUEST, DEFAULT_ENV)
+    ).toSubsetEqualRight(<EffectiveHoppRESTRequest>{
+      effectiveFinalHeaders: [
+        { active: true, key: "HEADER", value: vars[0].value },
+        {
+          active: true,
+          key: "Authorization",
+          value: `Bearer ${vars[2].value}`,
+        },
+        { active: true, key: "content-type", value: "text/plain" },
+      ],
+      effectiveFinalParams: [
+        { active: true, key: "PARAM", value: vars[1].value },
+      ],
+      effectiveFinalURL: vars[4].value,
+      effectiveFinalBody: vars[3].value,
+    });
+  });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/pre-request/getPreRequestMetrics.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/pre-request/getPreRequestMetrics.spec.ts
new file mode 100644
index 000000000..2f28bd068
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/functions/pre-request/getPreRequestMetrics.spec.ts
@@ -0,0 +1,24 @@
+import { PreRequestMetrics, RequestMetrics } from "../../../types/response";
+import { getPreRequestMetrics } from "../../../utils/pre-request";
+
+describe("getPreRequestMetrics", () => {
+  test("With empty errors.", () => {
+    expect(getPreRequestMetrics([], 1)).toMatchObject(<PreRequestMetrics>{
+      scripts: { failed: 0, passed: 1 },
+    });
+  });
+
+  test("With non-empty errors.", () => {
+    expect(
+      getPreRequestMetrics(
+        [
+          { code: "REQUEST_ERROR", data: {} },
+          { code: "PRE_REQUEST_SCRIPT_ERROR", data: {} },
+        ],
+        1
+      )
+    ).toMatchObject(<PreRequestMetrics>{
+      scripts: { failed: 1, passed: 0 },
+    });
+  });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/pre-request/preRequestScriptRunner.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/pre-request/preRequestScriptRunner.spec.ts
new file mode 100644
index 000000000..f382f7f44
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/functions/pre-request/preRequestScriptRunner.spec.ts
@@ -0,0 +1,71 @@
+import { HoppRESTRequest } from "@hoppscotch/data";
+import { HoppEnvs } from "../../../types/request";
+import * as E from "fp-ts/Either";
+import { HoppCLIError } from "../../../types/errors";
+import { EffectiveHoppRESTRequest } from "../../../interfaces/request";
+import { preRequestScriptRunner } from "../../../utils/pre-request";
+
+import "@relmify/jest-fp-ts";
+
+const SAMPLE_ENVS: HoppEnvs = {
+  global: [],
+  selected: [],
+};
+const VALID_PRE_REQUEST_SCRIPT = `
+	pw.env.set("ENDPOINT","https://example.com");
+`;
+const INVALID_PRE_REQUEST_SCRIPT = "d";
+const SAMPLE_REQUEST: HoppRESTRequest = {
+  v: "1",
+  name: "request",
+  method: "GET",
+  endpoint: "<<ENDPOINT>>",
+  params: [],
+  headers: [],
+  preRequestScript: "",
+  testScript: "",
+  auth: { authActive: false, authType: "none" },
+  body: {
+    contentType: null,
+    body: null,
+  },
+};
+
+describe("preRequestScriptRunner", () => {
+  let SUCCESS_PRE_REQUEST_RUNNER: E.Either<
+      HoppCLIError,
+      EffectiveHoppRESTRequest
+    >,
+    FAILURE_PRE_REQUEST_RUNNER: E.Either<
+      HoppCLIError,
+      EffectiveHoppRESTRequest
+    >;
+
+  beforeAll(async () => {
+    SAMPLE_REQUEST.preRequestScript = VALID_PRE_REQUEST_SCRIPT;
+    SUCCESS_PRE_REQUEST_RUNNER = await preRequestScriptRunner(
+      SAMPLE_REQUEST,
+      SAMPLE_ENVS
+    )();
+
+    SAMPLE_REQUEST.preRequestScript = INVALID_PRE_REQUEST_SCRIPT;
+    FAILURE_PRE_REQUEST_RUNNER = await preRequestScriptRunner(
+      SAMPLE_REQUEST,
+      SAMPLE_ENVS
+    )();
+  });
+
+  test("Parsing of request endpoint with set ENV.", () => {
+    expect(SUCCESS_PRE_REQUEST_RUNNER).toSubsetEqualRight(<
+      EffectiveHoppRESTRequest
+    >{
+      effectiveFinalURL: "https://example.com",
+    });
+  });
+
+  test("Failed execution due to unknown variable error.", () => {
+    expect(FAILURE_PRE_REQUEST_RUNNER).toSubsetEqualLeft(<HoppCLIError>{
+      code: "PRE_REQUEST_SCRIPT_ERROR",
+    });
+  });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/request/getRequestMetrics.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/request/getRequestMetrics.spec.ts
new file mode 100644
index 000000000..98c534232
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/functions/request/getRequestMetrics.spec.ts
@@ -0,0 +1,24 @@
+import { RequestMetrics } from "../../../types/response";
+import { getRequestMetrics } from "../../../utils/request";
+
+describe("getRequestMetrics", () => {
+  test("With empty errors.", () => {
+    expect(getRequestMetrics([], 1)).toMatchObject(<RequestMetrics>{
+      requests: { failed: 0, passed: 1 },
+    });
+  });
+
+  test("With non-empty errors.", () => {
+    expect(
+      getRequestMetrics(
+        [
+          { code: "REQUEST_ERROR", data: {} },
+          { code: "PARSING_ERROR", data: {} },
+        ],
+        1
+      )
+    ).toMatchObject(<RequestMetrics>{
+      requests: { failed: 1, passed: 0 },
+    });
+  });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/request/processRequest.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/request/processRequest.spec.ts
new file mode 100644
index 000000000..2cc73c6cd
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/functions/request/processRequest.spec.ts
@@ -0,0 +1,104 @@
+import { HoppRESTRequest } from "@hoppscotch/data";
+import axios, { AxiosResponse } from "axios";
+import { processRequest } from "../../../utils/request";
+import { HoppEnvs } from "../../../types/request";
+
+import "@relmify/jest-fp-ts";
+
+jest.mock("axios");
+
+const DEFAULT_REQUEST = <HoppRESTRequest>{
+  v: "1",
+  name: "name",
+  method: "POST",
+  endpoint: "https://example.com",
+  params: [],
+  headers: [],
+  preRequestScript: "",
+  testScript: "",
+  auth: {
+    authType: "none",
+    authActive: false,
+  },
+  body: {
+    contentType: null,
+    body: null,
+  },
+};
+
+const DEFAULT_RESPONSE = <AxiosResponse>{
+  data: {},
+  status: 200,
+  config: {
+    url: "https://example.com",
+    supported: true,
+    method: "POST",
+  },
+  statusText: "OK",
+  headers: [],
+};
+
+const DEFAULT_ENVS = <HoppEnvs>{
+  global: [],
+  selected: [],
+};
+
+describe("processRequest", () => {
+  let SAMPLE_REQUEST = DEFAULT_REQUEST;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    SAMPLE_REQUEST = DEFAULT_REQUEST;
+  });
+
+  test("With empty envs for 'true' result.", () => {
+    (axios as unknown as jest.Mock).mockResolvedValue(DEFAULT_RESPONSE);
+
+    return expect(
+      processRequest(SAMPLE_REQUEST, DEFAULT_ENVS, "fake/collection/path")()
+    ).resolves.toMatchObject({
+      report: {
+        result: true,
+      },
+    });
+  });
+
+  test("With non-empty envs, pre-request-script and test-script.", () => {
+    SAMPLE_REQUEST.preRequestScript = `
+			pw.env.set("ENDPOINT", "https://example.com");
+		`;
+    SAMPLE_REQUEST.testScript = `
+			pw.test("check status.", () => {
+				pw.expect(pw.response.status).toBe(200);
+			});
+		`;
+
+    (axios as unknown as jest.Mock).mockResolvedValue(DEFAULT_RESPONSE);
+
+    return expect(
+      processRequest(SAMPLE_REQUEST, DEFAULT_ENVS, "fake/collection/path")()
+    ).resolves.toMatchObject({
+      envs: {
+        selected: [{ key: "ENDPOINT", value: "https://example.com" }],
+      },
+      report: {
+        result: true,
+      },
+    });
+  });
+
+  test("With invalid-pre-request-script.", () => {
+    SAMPLE_REQUEST.preRequestScript = `invalid`;
+
+    (axios as unknown as jest.Mock).mockResolvedValue(DEFAULT_RESPONSE);
+
+    return expect(
+      processRequest(SAMPLE_REQUEST, DEFAULT_ENVS, "fake/request/path")()
+    ).resolves.toMatchObject({
+      report: { result: false },
+    });
+  });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/request/requestRunner.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/request/requestRunner.spec.ts
new file mode 100644
index 000000000..e1df4a2df
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/functions/request/requestRunner.spec.ts
@@ -0,0 +1,111 @@
+import axios, { AxiosError, AxiosResponse } from "axios";
+import { RequestConfig } from "../../../interfaces/request";
+import { requestRunner } from "../../../utils/request";
+import { RequestRunnerResponse } from "../../../interfaces/response";
+
+import "@relmify/jest-fp-ts";
+
+jest.mock("axios");
+
+describe("requestRunner", () => {
+  let SAMPLE_REQUEST_CONFIG: RequestConfig = {
+    url: "https://example.com",
+    supported: false,
+    method: "GET",
+  };
+
+  beforeEach(() => {
+    SAMPLE_REQUEST_CONFIG.supported = false;
+    SAMPLE_REQUEST_CONFIG.url = "https://example.com";
+    SAMPLE_REQUEST_CONFIG.method = "GET";
+    jest.clearAllMocks();
+  });
+
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
+
+  it("Should handle axios-error with response info.", () => {
+    jest.spyOn(axios, "isAxiosError").mockReturnValue(true);
+    (axios as unknown as jest.Mock).mockRejectedValueOnce(<AxiosError>{
+      name: "name",
+      message: "message",
+      config: SAMPLE_REQUEST_CONFIG,
+      isAxiosError: true,
+      response: {
+        data: "data",
+        status: 404,
+        statusText: "NOT FOUND",
+        headers: [],
+        config: SAMPLE_REQUEST_CONFIG,
+      },
+      toJSON: () => Object({}),
+    });
+
+    return expect(
+      requestRunner(SAMPLE_REQUEST_CONFIG)()
+    ).resolves.toSubsetEqualRight(<RequestRunnerResponse>{
+      body: "data",
+      status: 404,
+    });
+  });
+
+  it("Should handle axios-error for unsupported request.", () => {
+    jest.spyOn(axios, "isAxiosError").mockReturnValue(true);
+    (axios as unknown as jest.Mock).mockRejectedValueOnce(<AxiosError>{
+      name: "name",
+      message: "message",
+      config: SAMPLE_REQUEST_CONFIG,
+      isAxiosError: true,
+      toJSON: () => Object({}),
+    });
+
+    return expect(
+      requestRunner(SAMPLE_REQUEST_CONFIG)()
+    ).resolves.toSubsetEqualRight(<RequestRunnerResponse>{
+      status: 501,
+      body: {},
+    });
+  });
+
+  it("Should handle axios-error with request info.", () => {
+    jest.spyOn(axios, "isAxiosError").mockReturnValue(true);
+    SAMPLE_REQUEST_CONFIG.supported = true;
+    (axios as unknown as jest.Mock).mockRejectedValueOnce(<AxiosError>{
+      name: "name",
+      message: "message",
+      config: SAMPLE_REQUEST_CONFIG,
+      isAxiosError: true,
+      request: {},
+      toJSON: () => Object({}),
+    });
+
+    return expect(requestRunner(SAMPLE_REQUEST_CONFIG)()).resolves.toBeLeft();
+  });
+
+  it("Should handle unknown error.", () => {
+    jest.spyOn(axios, "isAxiosError").mockReturnValue(false);
+    (axios as unknown as jest.Mock).mockRejectedValueOnce({});
+
+    return expect(requestRunner(SAMPLE_REQUEST_CONFIG)()).resolves.toBeLeft();
+  });
+
+  it("Should successfully execute.", () => {
+    SAMPLE_REQUEST_CONFIG.supported = true;
+    (axios as unknown as jest.Mock).mockResolvedValue(<AxiosResponse>{
+      data: "data",
+      status: 200,
+      config: SAMPLE_REQUEST_CONFIG,
+      statusText: "OK",
+      headers: [],
+    });
+
+    return expect(
+      requestRunner(SAMPLE_REQUEST_CONFIG)()
+    ).resolves.toSubsetEqualRight(<RequestRunnerResponse>{
+      status: 200,
+      body: "data",
+      method: "GET",
+    });
+  });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/test/getTestMetrics.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/test/getTestMetrics.spec.ts
new file mode 100644
index 000000000..e0115f980
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/functions/test/getTestMetrics.spec.ts
@@ -0,0 +1,55 @@
+import { TestMetrics } from "../../../types/response";
+import { getTestMetrics } from "../../../utils/test";
+
+describe("getTestMetrics", () => {
+  test("With empty test-reports and errors.", () => {
+    expect(getTestMetrics([], 1, [])).toMatchObject(<TestMetrics>{
+      tests: { passed: 0, failed: 0 },
+      testSuites: { failed: 0, passed: 0 },
+      duration: 1,
+      scripts: { failed: 0, passed: 1 },
+    });
+  });
+
+  test("With non-empty test-reports and no test-script-error.", () => {
+    expect(
+      getTestMetrics(
+        [
+          {
+            descriptor: "descriptor",
+            expectResults: [],
+            failed: 0,
+            passed: 2,
+          },
+          {
+            descriptor: "descriptor",
+            expectResults: [],
+            failed: 2,
+            passed: 1,
+          },
+        ],
+        5,
+        []
+      )
+    ).toMatchObject(<TestMetrics>{
+      tests: { failed: 2, passed: 3 },
+      testSuites: { failed: 1, passed: 1 },
+      scripts: { failed: 0, passed: 1 },
+      duration: 5,
+    });
+  });
+
+  test("With empty test-reports and some test-script-error.", () => {
+    expect(
+      getTestMetrics([], 5, [
+        { code: "TEST_SCRIPT_ERROR", data: {} },
+        { code: "PRE_REQUEST_SCRIPT_ERROR", data: {} },
+      ])
+    ).toMatchObject(<TestMetrics>{
+      tests: { failed: 0, passed: 0 },
+      testSuites: { failed: 0, passed: 0 },
+      scripts: { failed: 1, passed: 0 },
+      duration: 5,
+    });
+  });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/test/testDescriptorParser.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/test/testDescriptorParser.spec.ts
new file mode 100644
index 000000000..21baa4faf
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/functions/test/testDescriptorParser.spec.ts
@@ -0,0 +1,63 @@
+import { TestDescriptor } from "@hoppscotch/js-sandbox";
+import { testDescriptorParser, getTestMetrics } from "../../../utils/test";
+import { TestReport } from "../../../interfaces/response";
+import { TestMetrics } from "../../../types/response";
+
+import "@relmify/jest-fp-ts";
+
+const SAMPLE_TEST_DESCRIPTOR: TestDescriptor = {
+  descriptor: "Status code is 200",
+  expectResults: [
+    {
+      status: "error",
+      message: "some_message",
+    },
+  ],
+  children: [
+    {
+      descriptor: "Check JSON response property",
+      expectResults: [
+        {
+          status: "pass",
+          message: "some_message",
+        },
+      ],
+      children: [],
+    },
+    {
+      descriptor: "Check header property",
+      expectResults: [
+        {
+          status: "fail",
+          message: "some_message",
+        },
+      ],
+      children: [],
+    },
+  ],
+};
+
+describe("testDescriptorParser", () => {
+  let TEST_REPORT: TestReport[];
+  beforeAll(async () => {
+    TEST_REPORT = await testDescriptorParser(SAMPLE_TEST_DESCRIPTOR)();
+  });
+
+  it("Should have 3 tests-report.", () => {
+    expect(TEST_REPORT).toEqual(expect.any(Array));
+    expect(TEST_REPORT.length).toStrictEqual(3);
+  });
+
+  it("Should have 1 passed, 2 failed test-cases; 1 passed, 2 failed test-suite.", () => {
+    expect(getTestMetrics(TEST_REPORT, 1, [])).toMatchObject(<TestMetrics>{
+      tests: {
+        failed: 2,
+        passed: 1,
+      },
+      testSuites: {
+        failed: 2,
+        passed: 1,
+      },
+    });
+  });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/test/testRunner.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/test/testRunner.spec.ts
new file mode 100644
index 000000000..0eeafa913
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/functions/test/testRunner.spec.ts
@@ -0,0 +1,73 @@
+import { TestResponse } from "@hoppscotch/js-sandbox";
+import * as E from "fp-ts/Either";
+import { TestRunnerRes } from "../../../types/response";
+import { HoppCLIError } from "../../../types/errors";
+import { getTestMetrics, testRunner } from "../../../utils/test";
+import { HoppEnvs } from "../../../types/request";
+
+import "@relmify/jest-fp-ts";
+
+const SAMPLE_ENVS: HoppEnvs = {
+  global: [],
+  selected: [
+    {
+      key: "DEVBLIN",
+      value: "set-by-devblin",
+    },
+  ],
+};
+const SAMPLE_RESPONSE: TestResponse = {
+  status: 200,
+  headers: [],
+  body: {},
+};
+
+describe("testRunner", () => {
+  let SUCCESS_TEST_RUNNER_RES: E.Either<HoppCLIError, TestRunnerRes>,
+    FAILURE_TEST_RUNNER_RES: E.Either<HoppCLIError, TestRunnerRes>;
+
+  beforeAll(async () => {
+    SUCCESS_TEST_RUNNER_RES = await testRunner({
+      testScript: `
+			// Check status code is 200
+			pw.test("Status code is 200", ()=> {
+					pw.expect(pw.response.status).toBe(200);
+			});
+
+			// Check JSON response property
+			pw.test("Check JSON response property", ()=> {
+					pw.expect(pw.response.body).toBeType("string")
+					pw.expect(pw.response.body).toBe("body");
+			});
+			`,
+      envs: SAMPLE_ENVS,
+      response: SAMPLE_RESPONSE,
+    })();
+
+    FAILURE_TEST_RUNNER_RES = await testRunner({
+      testScript: "a",
+      envs: SAMPLE_ENVS,
+      response: SAMPLE_RESPONSE,
+    })();
+  });
+
+  it("Should have 2 failed, 1 passed test-cases; 1 failed, 1 passed test-suites.", () => {
+    expect(SUCCESS_TEST_RUNNER_RES).toBeRight();
+
+    if (E.isRight(SUCCESS_TEST_RUNNER_RES)) {
+      const { duration, testsReport } = SUCCESS_TEST_RUNNER_RES.right;
+      const { tests, testSuites } = getTestMetrics(testsReport, duration, []);
+
+      expect(tests.failed).toStrictEqual(2);
+      expect(tests.passed).toStrictEqual(1);
+      expect(testSuites.failed).toStrictEqual(1);
+      expect(testSuites.passed).toStrictEqual(1);
+    }
+  });
+
+  it("Should fail to execute with test-script-error.", () => {
+    expect(FAILURE_TEST_RUNNER_RES).toSubsetEqualLeft(<HoppCLIError>{
+      code: "TEST_SCRIPT_ERROR",
+    });
+  });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/fails.json b/packages/hoppscotch-cli/src/__tests__/samples/fails.json
new file mode 100644
index 000000000..bdc0657cf
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/samples/fails.json
@@ -0,0 +1,51 @@
+[
+  {
+    "v": 1,
+    "name": "tests",
+    "folders": [],
+    "requests": [
+      {
+        "v": "1",
+        "endpoint": "https://echo.hoppscotch.io/<<HEADERS_TYPE1>>",
+        "name": "",
+        "params": [],
+        "headers": [],
+        "method": "GET",
+        "auth": {
+          "authType": "none",
+          "authActive": true,
+          "addTo": "Headers",
+          "key": "",
+          "value": ""
+        },
+        "preRequestScript": "pw.env.set(\"HEADERS_TYPE1\", \"devblin_local1\");",
+        "testScript": "// Check status code is 200\npwd.test(\"Status code is 200\", ()=> {\n    pw.expect(pw.response.status).toBe(200);\n});\n\n// Check JSON response property\npw.test(\"Check JSON response property\", ()=> {\n    pw.expect(pw.response.body.method).toBe(\"GET\");\n    pw.expect(pw.response.body.headers).toBeType(\"string\");\n});",
+        "body": {
+          "contentType": "application/json",
+          "body": "{\n\"test\": \"<<HEADERS_TYPE1>>\"\n}"
+        }
+      },
+      {
+        "v": "1",
+        "endpoint": "https://echo.hoppscotch.dio/<<HEADERS_TYPE2>>",
+        "name": "success",
+        "params": [],
+        "headers": [],
+        "method": "GET",
+        "auth": {
+          "authType": "none",
+          "authActive": true,
+          "addTo": "Headers",
+          "key": "",
+          "value": ""
+        },
+        "preRequestScript": "pw.env.setd(\"HEADERS_TYPE2\", \"devblin_local2\");",
+        "testScript": "// Check status code is 200\npw.test(\"Status code is 200\", ()=> {\n    pw.expect(pw.response.status).toBe(300);\n});\n\n// Check JSON response property\npw.test(\"Check JSON response property\", ()=> {\n    pw.expect(pw.response.body.method).toBe(\"GET\");\n    pw.expect(pw.response.body.headers).toBeType(\"object\");\n});",
+        "body": {
+          "contentType": "application/json",
+          "body": "{\n\"test\": \"<<HEADERS_TYPE2>>\"\n}"
+        }
+      }
+    ]
+  }
+]
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/malformed-collection.json b/packages/hoppscotch-cli/src/__tests__/samples/malformed-collection.json
new file mode 100644
index 000000000..5e80935c2
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/samples/malformed-collection.json
@@ -0,0 +1,50 @@
+[
+	{
+		"v": 1,
+		"folders": [],
+		"requests": 
+			{
+				"v": "1",
+				"endpoint": "https://echo.hoppscotch.io/<<HEADERS_TYPE1>>",
+				"name": "fail",
+				"params": [],
+				"headers": [],
+				"method": "GET",
+				"auth": {
+					"authType": "none",
+					"authActive": true,
+					"addTo": "Headers",
+					"key": "",
+					"value": ""
+				},
+				"preRequestScript": "pw.env.set(\"HEADERS_TYPE1\", \"devblin_local1\");",
+				"testScript": "// Check status code is 200\npw.test(\"Status code is 200\", ()=> {\n    pw.expect(pw.response.status).toBe(200);\n});\n\n// Check JSON response property\npw.test(\"Check JSON response property\", ()=> {\n    pw.expect(pw.response.body.method).toBe(\"GET\");\n    pw.expect(pw.response.body.headers).toBeType(\"string\");\n});",
+				"body": {
+					"contentType": "application/json",
+					"body": "{\n\"test\": \"<<HEADERS_TYPE1>>\"\n}"
+				}
+			},
+			{
+				"v": "1",
+				"endpoint": "https://echo.hoppscotch.io/<<HEADERS_TYPE2>>",
+				"name": "success",
+				"params": [],
+				"headers": [],
+				"method": "GET",
+				"auth": {
+					"authType": "none",
+					"authActive": true,
+					"addTo": "Headers",
+					"key": "",
+					"value": ""
+				},
+				"preRequestScript": "pw.env.set(\"HEADERS_TYPE2\", \"devblin_local2\");",
+				"testScript": "// Check status code is 200\npw.test(\"Status code is 200\", ()=> {\n    pw.expect(pw.response.status).toBe(300);\n});\n\n// Check JSON response property\npw.test(\"Check JSON response property\", ()=> {\n    pw.expect(pw.response.body.method).toBe(\"GET\");\n    pw.expect(pw.response.body.headers).toBeType(\"object\");\n});",
+				"body": {
+					"contentType": "application/json",
+					"body": "{\n\"test\": \"<<HEADERS_TYPE2>>\"\n}"
+				}
+			}
+		]
+	}
+]
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/malformed-collection2.json b/packages/hoppscotch-cli/src/__tests__/samples/malformed-collection2.json
new file mode 100644
index 000000000..8df994d77
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/samples/malformed-collection2.json
@@ -0,0 +1,7 @@
+[
+  {
+    "v": 1,
+    "name": "tests",
+    "folders": []
+  }
+]
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/notjson.txt b/packages/hoppscotch-cli/src/__tests__/samples/notjson.txt
new file mode 100644
index 000000000..8081ea880
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/samples/notjson.txt
@@ -0,0 +1,29 @@
+[
+	{
+		"v": 1,
+		"folders": [],
+		"requests": 
+			{
+				"v": "1",
+				"endpoint": "https://echo.hoppscotch.io/<<HEADERS_TYPE1>>",
+				"name": "fail",
+				"params": [],
+				"headers": [],
+				"method": "GET",
+				"auth": {
+					"authType": "none",
+					"authActive": true,
+					"addTo": "Headers",
+					"key": "",
+					"value": ""
+				},
+				"preRequestScript": "pw.env.set(\"HEADERS_TYPE1\", \"devblin_local1\");",
+				"testScript": "// Check status code is 200\npw.test(\"Status code is 200\", ()=> {\n    pw.expect(pw.response.status).toBe(200);\n});\n\n// Check JSON response property\npw.test(\"Check JSON response property\", ()=> {\n    pw.expect(pw.response.body.method).toBe(\"GET\");\n    pw.expect(pw.response.body.headers).toBeType(\"string\");\n});",
+				"body": {
+					"contentType": "application/json",
+					"body": "{\n\"test\": \"<<HEADERS_TYPE1>>\"\n}"
+				}
+			}
+		]
+	}
+]
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/passes.json b/packages/hoppscotch-cli/src/__tests__/samples/passes.json
new file mode 100644
index 000000000..aea1fc356
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/samples/passes.json
@@ -0,0 +1,51 @@
+[
+  {
+    "v": 1,
+    "name": "tests",
+    "folders": [],
+    "requests": [
+      {
+        "v": "1",
+        "endpoint": "https://echo.hoppscotch.io/<<HEADERS_TYPE1>>",
+        "name": "",
+        "params": [],
+        "headers": [],
+        "method": "GET",
+        "auth": {
+          "authType": "none",
+          "authActive": true,
+          "addTo": "Headers",
+          "key": "",
+          "value": ""
+        },
+        "preRequestScript": "pw.env.set(\"HEADERS_TYPE1\", \"devblin_local1\");",
+        "testScript": "// Check status code is 200\npw.test(\"Status code is 200\", ()=> {\n    pw.expect(pw.response.status).toBe(200);\n});\n\n// Check JSON response property\npw.test(\"Check JSON response property\", ()=> {\n    pw.expect(pw.response.body.method).toBe(\"GET\");\n    pw.expect(pw.response.body.headers).toBeType(\"object\");\n});",
+        "body": {
+          "contentType": "application/json",
+          "body": "{\n\"test\": \"<<HEADERS_TYPE1>>\"\n}"
+        }
+      },
+      {
+        "v": "1",
+        "endpoint": "https://echo.hoppscotch.io/<<HEADERS_TYPE2>>",
+        "name": "success",
+        "params": [],
+        "headers": [],
+        "method": "GET",
+        "auth": {
+          "authType": "none",
+          "authActive": true,
+          "addTo": "Headers",
+          "key": "",
+          "value": ""
+        },
+        "preRequestScript": "pw.env.set(\"HEADERS_TYPE2\", \"devblin_local2\");",
+        "testScript": "// Check status code is 200\npw.test(\"Status code is 200\", ()=> {\n    pw.expect(pw.response.status).toBe(200);\n});\n\n// Check JSON response property\npw.test(\"Check JSON response property\", ()=> {\n    pw.expect(pw.response.body.method).toBe(\"GET\");\n    pw.expect(pw.response.body.headers).toBeType(\"object\");\n});",
+        "body": {
+          "contentType": "application/json",
+          "body": "{\n\"test\": \"<<HEADERS_TYPE2>>\"\n}"
+        }
+      }
+    ]
+  }
+]
diff --git a/packages/hoppscotch-cli/src/__tests__/types.ts b/packages/hoppscotch-cli/src/__tests__/types.ts
new file mode 100644
index 000000000..b84c6b7d4
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/types.ts
@@ -0,0 +1,7 @@
+import { ExecException } from "child_process";
+
+export type ExecResponse = {
+  error: ExecException | null;
+  stdout: string;
+  stderr: string;
+};
diff --git a/packages/hoppscotch-cli/src/__tests__/utils.ts b/packages/hoppscotch-cli/src/__tests__/utils.ts
new file mode 100644
index 000000000..75a2a79e2
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/utils.ts
@@ -0,0 +1,26 @@
+import { exec } from "child_process";
+import { ExecResponse } from "./types";
+
+export const execAsync = (command: string): Promise<ExecResponse> =>
+  new Promise((resolve) =>
+    exec(command, (error, stdout, stderr) => resolve({ error, stdout, stderr }))
+  );
+
+export const trimAnsi = (target: string) => {
+  const ansiRegex =
+    /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
+
+  return target.replace(ansiRegex, "");
+};
+
+export const getErrorCode = (out: string) => {
+  const ansiTrimmedStr = trimAnsi(out);
+
+  return ansiTrimmedStr.split(" ")[0];
+};
+
+export const getTestJsonFilePath = (file: string) => {
+  const filePath = `${process.cwd()}/src/__tests__/samples/${file}`;
+
+  return filePath;
+};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 155afd12b..9e3b88c4d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -355,37 +355,51 @@ importers:
     specifiers:
       '@hoppscotch/data': workspace:^0.4.2
       '@hoppscotch/js-sandbox': workspace:^2.0.0
-      '@swc/core': ^1.2.163
+      '@relmify/jest-fp-ts': ^2.0.2
+      '@swc/core': ^1.2.181
       '@types/axios': ^0.14.0
       '@types/chalk': ^2.2.0
       '@types/commander': ^2.12.2
+      '@types/jest': ^27.4.1
+      '@types/lodash': ^4.14.181
+      '@types/qs': ^6.9.7
       axios: ^0.21.4
       chalk: ^4.1.1
       commander: ^8.0.0
       esm: ^3.2.25
-      fp-ts: ^2.11.3
+      fp-ts: ^2.12.1
+      io-ts: ^2.2.16
+      jest: ^27.5.1
       lodash: ^4.17.21
       prettier: ^2.6.2
       qs: ^6.10.3
-      tsup: ^5.12.4
-      typescript: ^4.6.3
+      ts-jest: ^27.1.4
+      tsup: ^5.12.7
+      typescript: ^4.6.4
     devDependencies:
       '@hoppscotch/data': link:../hoppscotch-data
       '@hoppscotch/js-sandbox': link:../hoppscotch-js-sandbox
-      '@swc/core': 1.2.163
+      '@relmify/jest-fp-ts': 2.0.2_fp-ts@2.12.1+io-ts@2.2.16
+      '@swc/core': 1.2.181
       '@types/axios': 0.14.0
       '@types/chalk': 2.2.0
       '@types/commander': 2.12.2
+      '@types/jest': 27.4.1
+      '@types/lodash': 4.14.181
+      '@types/qs': 6.9.7
       axios: 0.21.4
       chalk: 4.1.2
       commander: 8.3.0
       esm: 3.2.25
-      fp-ts: 2.11.9
+      fp-ts: 2.12.1
+      io-ts: 2.2.16_fp-ts@2.12.1
+      jest: 27.5.1
       lodash: 4.17.21
       prettier: 2.6.2
       qs: 6.10.3
-      tsup: 5.12.4_typescript@4.6.3
-      typescript: 4.6.3
+      ts-jest: 27.1.4_53ggqi2i4rbcfjtktmjua6zili
+      tsup: 5.12.7_typescript@4.6.4
+      typescript: 4.6.4
 
   packages/hoppscotch-data:
     specifiers:
@@ -580,14 +594,14 @@ packages:
     resolution: {integrity: sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.16.8
+      '@babel/types': 7.17.0
 
   /@babel/helper-builder-binary-assignment-operator-visitor/7.16.7:
     resolution: {integrity: sha512-C6FdbRaxYjwVu/geKW4ZeQ0Q31AftgRcdSnZ5/jsH6BzCJbtvXvhpfkbkThYSuutZA7nCXpPR6AD9zd1dprMkA==}
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-explode-assignable-expression': 7.16.7
-      '@babel/types': 7.16.8
+      '@babel/types': 7.17.0
 
   /@babel/helper-compilation-targets/7.16.7_@babel+core@7.17.9:
     resolution: {integrity: sha512-mGojBwIWcwGD6rfqgRXVlVYmPAv7eOpIemUG3dGnDdCY4Pae70ROij3XmfrH6Fa1h1aiDylpglbZyktfzyo/hA==}
@@ -702,7 +716,7 @@ packages:
     resolution: {integrity: sha512-KyUenhWMC8VrxzkGP0Jizjo4/Zx+1nNZhgocs+gLzyZyB8SHidhoq9KK/8Ato4anhwsivfkBLftky7gvzbZMtQ==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.16.8
+      '@babel/types': 7.17.0
 
   /@babel/helper-function-name/7.16.0:
     resolution: {integrity: sha512-BZh4mEk1xi2h4HFjWUXRQX5AEx4rvaZxHgax9gcjdLWdkjsY7MKt5p0otjsg5noXw+pB+clMCjw+aEVYADMjog==}
@@ -755,7 +769,7 @@ packages:
     resolution: {integrity: sha512-VtJ/65tYiU/6AbMTDwyoXGPKHgTsfRarivm+YbB5uAzKUyuPjgZSgAFeG87FCigc7KNHu2Pegh1XIT3lXjvz3Q==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.16.8
+      '@babel/types': 7.17.0
 
   /@babel/helper-module-imports/7.16.0:
     resolution: {integrity: sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==}
@@ -804,7 +818,7 @@ packages:
     resolution: {integrity: sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.16.8
+      '@babel/types': 7.17.0
 
   /@babel/helper-plugin-utils/7.16.7:
     resolution: {integrity: sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==}
@@ -816,7 +830,7 @@ packages:
     dependencies:
       '@babel/helper-annotate-as-pure': 7.16.7
       '@babel/helper-wrap-function': 7.16.8
-      '@babel/types': 7.16.8
+      '@babel/types': 7.17.0
     transitivePeerDependencies:
       - supports-color
 
@@ -828,7 +842,7 @@ packages:
       '@babel/helper-member-expression-to-functions': 7.16.7
       '@babel/helper-optimise-call-expression': 7.16.7
       '@babel/traverse': 7.17.9
-      '@babel/types': 7.16.8
+      '@babel/types': 7.17.0
     transitivePeerDependencies:
       - supports-color
 
@@ -848,7 +862,7 @@ packages:
     resolution: {integrity: sha512-+il1gTy0oHwUsBQZyJvukbB4vPMdcYBrFHa0Uc4AizLxbq6BOYC51Rv4tWocX9BLBDLZ4kc6qUFpQ6HRgL+3zw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.16.8
+      '@babel/types': 7.17.0
 
   /@babel/helper-split-export-declaration/7.16.0:
     resolution: {integrity: sha512-0YMMRpuDFNGTHNRiiqJX19GjNXA4H0E8jZ2ibccfSxaCogbm3am5WN/2nQNj0YnQwGWM1J06GOcQ2qnh3+0paw==}
@@ -877,7 +891,7 @@ packages:
       '@babel/helper-function-name': 7.17.9
       '@babel/template': 7.16.7
       '@babel/traverse': 7.17.9
-      '@babel/types': 7.16.8
+      '@babel/types': 7.17.0
     transitivePeerDependencies:
       - supports-color
 
@@ -2204,10 +2218,10 @@ packages:
       '@types/node': 17.0.24
       chalk: 4.1.2
       cosmiconfig: 7.0.1
-      cosmiconfig-typescript-loader: 1.0.9_c6ucwwwirjo6ockovr3lj3o2cm
+      cosmiconfig-typescript-loader: 1.0.9_kpiehm6dkipypriomyghl2wcpq
       lodash: 4.17.21
       resolve-from: 5.0.0
-      typescript: 4.6.3
+      typescript: 4.6.4
     transitivePeerDependencies:
       - '@swc/core'
       - '@swc/wasm'
@@ -3504,7 +3518,7 @@ packages:
       chalk: 4.1.2
       emittery: 0.8.1
       exit: 0.1.2
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       jest-changed-files: 27.5.1
       jest-config: 27.5.1
       jest-haste-map: 27.5.1
@@ -3518,7 +3532,7 @@ packages:
       jest-util: 27.5.1
       jest-validate: 27.5.1
       jest-watcher: 27.5.1
-      micromatch: 4.0.4
+      micromatch: 4.0.5
       rimraf: 3.0.2
       slash: 3.0.0
       strip-ansi: 6.0.1
@@ -3540,6 +3554,13 @@ packages:
       jest-mock: 27.5.1
     dev: true
 
+  /@jest/expect-utils/28.1.0:
+    resolution: {integrity: sha512-5BrG48dpC0sB80wpeIX5FU6kolDJI4K0n5BM9a5V38MGx0pyRvUBSS0u2aNTdDzmOrCjhOg8pGs6a20ivYkdmw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      jest-get-type: 28.0.2
+    dev: true
+
   /@jest/fake-timers/27.5.1:
     resolution: {integrity: sha512-/aPowoolwa07k7/oM3aASneNeBGCmGQsc3ugN4u6s4C/+s5M64MFo/+djTdiwcbQlRfFElGuDXWzaWj6QgKObQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -3580,7 +3601,7 @@ packages:
       collect-v8-coverage: 1.0.1
       exit: 0.1.2
       glob: 7.2.0
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       istanbul-lib-coverage: 3.2.0
       istanbul-lib-instrument: 5.1.0
       istanbul-lib-report: 3.0.0
@@ -3599,6 +3620,13 @@ packages:
       - supports-color
     dev: true
 
+  /@jest/schemas/28.0.2:
+    resolution: {integrity: sha512-YVDJZjd4izeTDkij00vHHAymNXQ6WWsdChFRK86qck6Jpr3DCL5W3Is3vslviRlP+bLuMYRLbdp98amMvqudhA==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@sinclair/typebox': 0.23.5
+    dev: true
+
   /@jest/source-map/27.5.1:
     resolution: {integrity: sha512-y9NIHUYF3PJRlHk98NdC/N1gl88BL08aQQgu4k4ZopQkCw9t9cV8mtl3TV8b/YCB8XaVTFrmUTAJvjsntDireg==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -3640,11 +3668,11 @@ packages:
       chalk: 4.1.2
       convert-source-map: 1.8.0
       fast-json-stable-stringify: 2.1.0
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       jest-haste-map: 27.5.1
       jest-regex-util: 27.5.1
       jest-util: 27.5.1
-      micromatch: 4.0.4
+      micromatch: 4.0.5
       pirates: 4.0.5
       slash: 3.0.0
       source-map: 0.6.1
@@ -3664,6 +3692,18 @@ packages:
       chalk: 4.1.2
     dev: true
 
+  /@jest/types/28.1.0:
+    resolution: {integrity: sha512-xmEggMPr317MIOjjDoZ4ejCSr9Lpbt/u34+dvc99t7DS8YirW5rwZEhzKPC2BMUFkUhI48qs6qLUSGw5FuL0GA==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/schemas': 28.0.2
+      '@types/istanbul-lib-coverage': 2.0.4
+      '@types/istanbul-reports': 3.0.1
+      '@types/node': 17.0.31
+      '@types/yargs': 17.0.10
+      chalk: 4.1.2
+    dev: true
+
   /@jridgewell/resolve-uri/3.0.5:
     resolution: {integrity: sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==}
     engines: {node: '>=6.0.0'}
@@ -3919,11 +3959,11 @@ packages:
       ufo: 0.7.11
     dev: false
 
-  /@nuxt/kit-edge/3.0.0-rc.2-27530889.9e5a3cd:
-    resolution: {integrity: sha512-D/Fm/7igO3/GE+5S8528frpJT25V+i4Y8ZcZ4MuO0i6karl4whwcSDkVOmrZBCtLa0IG+FD2f/6E4JJaB0BBHQ==}
+  /@nuxt/kit-edge/3.0.0-rc.3-27536597.3359b3b:
+    resolution: {integrity: sha512-vQWAzbsHk8sP0tGXLfKX6EfnR6cb6sG4CJLcj2sptuyKwnXrHjQTfdWxKkJLqVBKq4O/8Vej9Xm9r5VLGOpNPA==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
     dependencies:
-      '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.2-27530889.9e5a3cd
+      '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.3-27536597.3359b3b
       c12: 0.2.7
       consola: 2.15.3
       defu: 6.0.0
@@ -3939,7 +3979,7 @@ packages:
       scule: 0.2.1
       semver: 7.3.7
       unctx: 1.1.4
-      unimport: 0.1.8
+      unimport: 0.2.1
       untyped: 0.4.4
     transitivePeerDependencies:
       - esbuild
@@ -3971,8 +4011,8 @@ packages:
       - encoding
     dev: false
 
-  /@nuxt/schema-edge/3.0.0-rc.2-27530889.9e5a3cd:
-    resolution: {integrity: sha512-Ac8bXC8nXYZKGJPLIMPKZwA5i7X/oaWGeSIJ5zruUt9XwLRP2BOgOTTrM+vy/KK44pWeweCgZkYMM6CD/XewBw==}
+  /@nuxt/schema-edge/3.0.0-rc.3-27536597.3359b3b:
+    resolution: {integrity: sha512-+a/6Irx+EL2oxD+TX0Saervw3SXbr3SqFnAUE5QfTQppzG5Zf3Y9KBf+wzafB7qEDoQiCl0DWBuFVaPt+Ibt3g==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
     dependencies:
       c12: 0.2.7
@@ -3984,7 +4024,7 @@ packages:
       scule: 0.2.1
       std-env: 3.1.1
       ufo: 0.8.4
-      unimport: 0.1.8
+      unimport: 0.2.1
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -4487,6 +4527,20 @@ packages:
       jest-matcher-utils: 27.5.1
     dev: true
 
+  /@relmify/jest-fp-ts/2.0.2_fp-ts@2.12.1+io-ts@2.2.16:
+    resolution: {integrity: sha512-qhQOfn9q5YsylD9qNCiizrA8w/i3A015hDk3P46fYPe48yLSB6BJaBImSvECUY9nCjeiEp4YP2sPopNyqDYwjw==}
+    peerDependencies:
+      fp-ts: 2.x
+      io-ts: 2.x
+    dependencies:
+      '@jest/expect-utils': 28.1.0
+      expect: 28.1.0
+      fp-ts: 2.12.1
+      io-ts: 2.2.16_fp-ts@2.12.1
+      jest-get-type: 28.0.2
+      jest-matcher-utils: 28.1.0
+    dev: true
+
   /@rollup/pluginutils/4.1.2:
     resolution: {integrity: sha512-ROn4qvkxP9SyPeHaf7uQC/GPFY6L/OWy9+bd9AwcjOAWQwxRscoEyAUD8qCY5o5iL4jqQwoLk2kaTKJPb/HwzQ==}
     engines: {node: '>= 8.0.0'}
@@ -4674,6 +4728,10 @@ packages:
       - supports-color
     dev: false
 
+  /@sinclair/typebox/0.23.5:
+    resolution: {integrity: sha512-AFBVi/iT4g20DHoujvMH1aEDn8fGJh4xsRGCP6d8RpLPMqsNPvW01Jcn0QysXTsg++/xj25NmJsGyH9xug/wKg==}
+    dev: true
+
   /@sindresorhus/is/0.14.0:
     resolution: {integrity: sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==}
     engines: {node: '>=6'}
@@ -4705,8 +4763,8 @@ packages:
     resolution: {integrity: sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q==}
     dev: false
 
-  /@swc/core-android-arm-eabi/1.2.163:
-    resolution: {integrity: sha512-8tv6EMcL5zkgXikwkEMu4I2iy79gmCDe44a3PtQjAc7O/QxxyjJnEVxB6/1U1TnpyLBjcjVfLLzX572LnK9p4Q==}
+  /@swc/core-android-arm-eabi/1.2.181:
+    resolution: {integrity: sha512-H3HNf8j6M13uIbSruef8iMsCElJJDZOhp5qxwm/+P1jAG4eQ4vPfajIlTVdFJes8Adrbr4WQaVvl+m4BQw51JQ==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [android]
@@ -4714,8 +4772,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-android-arm64/1.2.163:
-    resolution: {integrity: sha512-nDnogIlm1JMs+lSBNH5MIKf7h2h1JQ7kpZSIhnCrr8kajFP5YWQyz9pu2GMv2oc9iWp9TafRk2h2ov3rBJwzIg==}
+  /@swc/core-android-arm64/1.2.181:
+    resolution: {integrity: sha512-b1apYKeosBaXl28xE/By4QVHYrXaR2+nOdcP6rsDXg6nyLBArtoiS5YUFikFN/VQbSAQqNeJQ+rovT5zITrgSQ==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [android]
@@ -4723,8 +4781,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-darwin-arm64/1.2.163:
-    resolution: {integrity: sha512-5sxTJUfWK8hFZNdh3MNYJBB4X58WL8gRzr/U7rWMRpA9GKFcKNAsvPZICICXEVGVX7glC6LZX94ML2fGsW/NeA==}
+  /@swc/core-darwin-arm64/1.2.181:
+    resolution: {integrity: sha512-M3/PPeO6NTN7GYa1mOWPNMaAPxEQH8xd+X6FHMa7OBCi+Qxkarafu4DZRfzR88TcS3XikqFLgmmzSP7Z/tye2w==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [darwin]
@@ -4732,8 +4790,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-darwin-x64/1.2.163:
-    resolution: {integrity: sha512-pVYtFi0Rfeh0JLZKD0HR1j4chcqEaxyk4lhx2DEMg2VvZYjZd1b6bRKB5gKJy1lLzpiUngqeSpIt14jnCIqWZg==}
+  /@swc/core-darwin-x64/1.2.181:
+    resolution: {integrity: sha512-8Uc6gx7YN5+eSnk3h7aHqp1f3RFoBJPDPeH9cURm4mfE4BTgkVgkctUm0IE5sS5AotazVbrOwhEFrl7TONSfPA==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [darwin]
@@ -4741,8 +4799,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-freebsd-x64/1.2.163:
-    resolution: {integrity: sha512-a8adSrD2d7WCdD+BqUt7hlmwujcYTYGpSq6i8OxfmxPSf50lCUoBaQ+B/tSyvLlvnusiURHfwhfzSld1vtg04Q==}
+  /@swc/core-freebsd-x64/1.2.181:
+    resolution: {integrity: sha512-SbnsbJHGFNY7VSTA5OhBh2PmLgQumIGerAxTCTYO1IgtbADCTL+gCjU0TK0viG/zpH4jnjaL965BI4JTo/bpRg==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [freebsd]
@@ -4750,8 +4808,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-arm-gnueabihf/1.2.163:
-    resolution: {integrity: sha512-7pQZ7acveuX2p0Ysrg6AHVedTbWQBOjlBQ8AmJ3Wwri9h4o1GLzJkzJQ++Dyp+xGE+pI0ppK6dqaQZ1Zm8yPLQ==}
+  /@swc/core-linux-arm-gnueabihf/1.2.181:
+    resolution: {integrity: sha512-aWO6Lr9wea96Z7AEagzf4reKgDb3UWXZnClwJK7baScwF8KV+Mh99vVgkSe1nj2gKOZ31pBLp62RDJkc3gdlnA==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux]
@@ -4759,8 +4817,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-arm64-gnu/1.2.163:
-    resolution: {integrity: sha512-yPG6iAN7OlhiNWPy8Ma9WrrQpQZIZE5huR1HVRzM5m8/svs65m3vCTAEHWa+45y1PX3/Bo+hd6tyjaHMAco/ew==}
+  /@swc/core-linux-arm64-gnu/1.2.181:
+    resolution: {integrity: sha512-+7fzDwsvcbhPafKdminMQrU3Ej1NHltXy7k+zgjj8BDPZbfi8hRzQcONeBV7sfl4xvw3d3roNHu2UMmKzLNs0w==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
@@ -4768,8 +4826,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-arm64-musl/1.2.163:
-    resolution: {integrity: sha512-sEBgJbaTixEEv8vvf7Udjc9d4HvAYnKtMBu354FszSwKBLmf75CJNUU4vJQRn+E/+WwMXxorSXdx1+wW4fpStg==}
+  /@swc/core-linux-arm64-musl/1.2.181:
+    resolution: {integrity: sha512-U9k8pv2oCxYYfu9DdOO1ZZgqbmF97NgJzSaIu3PsTedF4RcGIiPcuGOFqrUECsGUW2i6uKejE8onbXPj9UmaZQ==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
@@ -4777,8 +4835,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-x64-gnu/1.2.163:
-    resolution: {integrity: sha512-69OjEhbxYaMVIhly2hrgDwiOG0MdPQJ3BU5lD/kStvNMnGS/bCNgVYnnsjJgJKfpvJBLtUd/t7QrdwZvrY+pSw==}
+  /@swc/core-linux-x64-gnu/1.2.181:
+    resolution: {integrity: sha512-9AQXrvZ9BFQJeqYMpKQZRf9h/DEwhfHIR39krehO+g594i+mkkp+UNTToez6Ifn+NBYl58xyEcQGwsYIqtdYVw==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
@@ -4786,8 +4844,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-x64-musl/1.2.163:
-    resolution: {integrity: sha512-I2pvui8SaNE74vO1YHIJj7/R6IuR8qXfW5YNJ9NV2yR5G6Po2vPR/kMpJgd4rrt6gg16+FGw+XDpMue8+TGLcw==}
+  /@swc/core-linux-x64-musl/1.2.181:
+    resolution: {integrity: sha512-Pq/aBMj3F4CR4tXq85t7IW3piu76a677nIoo6QtBkAjrQ5QuJqpaez/5aewipG+kIXpiu/DNFIN+cISa1QeC8A==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
@@ -4795,8 +4853,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-win32-arm64-msvc/1.2.163:
-    resolution: {integrity: sha512-CaFr1xVfXrXywDDyNUfRSWh9vqhMmaOh9dpBGHDWPDT+EOwK0Rm78LZPh9G3iQakEq9/6ztqCmskPy7Go6gG6A==}
+  /@swc/core-win32-arm64-msvc/1.2.181:
+    resolution: {integrity: sha512-m24036tVFDE8ZJ3fBVBfsHw4tHd0BG6g3TvT2MLAiW2MezYeTdrGpmvPBz4Woz686I/06cWeSg7cZF1/ZcZMMA==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [win32]
@@ -4804,8 +4862,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-win32-ia32-msvc/1.2.163:
-    resolution: {integrity: sha512-0HfuKu8eG1brQ13PVba5WJm187asQuHeVuuVD0WL1/d6TSp2dfsfXdOPt7gjPG0WVtVpYh8e4N0IEcE0gVpzxA==}
+  /@swc/core-win32-ia32-msvc/1.2.181:
+    resolution: {integrity: sha512-OPROzGapmr29qqwvB/aP9SA80r2eIukj+q7gghdQVptJrQU4GrTyzW1TpnGtpzj8rLZz4hEG6KtyPUh54bJZ/g==}
     engines: {node: '>=10'}
     cpu: [ia32]
     os: [win32]
@@ -4813,8 +4871,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-win32-x64-msvc/1.2.163:
-    resolution: {integrity: sha512-BB1tioCAu2Wdt2efKOcbNR9vByzNUhiJqmBv1wWGR6wqV2k46jRMex2NzQESMBl8slIJG+ZPFLE8gUChl0crIg==}
+  /@swc/core-win32-x64-msvc/1.2.181:
+    resolution: {integrity: sha512-YrIaS63XsGiQ9AgxUVZ7Irt4pwQc3c2TPN7PyQP7ok9zBZxY5pBTwRTdLctlF4LNsSavlHE5+rvdPzcYAG0ekQ==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
@@ -4822,24 +4880,24 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core/1.2.163:
-    resolution: {integrity: sha512-8/ytlOhXSomPjfgOFgto6xnYR+UAj0eHJEIu2NbdHgpFjrDFti6C9XeW0zB6zheCq0fShP0RbE9qXlgYKoSZ8w==}
+  /@swc/core/1.2.181:
+    resolution: {integrity: sha512-evQX+Br/gC+FYLbUIF1dOQa7hUzBpowrcbgPkIRCEvi4HrCn7pGBZ2ZHBXmwEtBdLfOlyQvN/8USClApQKK4Rw==}
     engines: {node: '>=10'}
     hasBin: true
     optionalDependencies:
-      '@swc/core-android-arm-eabi': 1.2.163
-      '@swc/core-android-arm64': 1.2.163
-      '@swc/core-darwin-arm64': 1.2.163
-      '@swc/core-darwin-x64': 1.2.163
-      '@swc/core-freebsd-x64': 1.2.163
-      '@swc/core-linux-arm-gnueabihf': 1.2.163
-      '@swc/core-linux-arm64-gnu': 1.2.163
-      '@swc/core-linux-arm64-musl': 1.2.163
-      '@swc/core-linux-x64-gnu': 1.2.163
-      '@swc/core-linux-x64-musl': 1.2.163
-      '@swc/core-win32-arm64-msvc': 1.2.163
-      '@swc/core-win32-ia32-msvc': 1.2.163
-      '@swc/core-win32-x64-msvc': 1.2.163
+      '@swc/core-android-arm-eabi': 1.2.181
+      '@swc/core-android-arm64': 1.2.181
+      '@swc/core-darwin-arm64': 1.2.181
+      '@swc/core-darwin-x64': 1.2.181
+      '@swc/core-freebsd-x64': 1.2.181
+      '@swc/core-linux-arm-gnueabihf': 1.2.181
+      '@swc/core-linux-arm64-gnu': 1.2.181
+      '@swc/core-linux-arm64-musl': 1.2.181
+      '@swc/core-linux-x64-gnu': 1.2.181
+      '@swc/core-linux-x64-musl': 1.2.181
+      '@swc/core-win32-arm64-msvc': 1.2.181
+      '@swc/core-win32-ia32-msvc': 1.2.181
+      '@swc/core-win32-x64-msvc': 1.2.181
     dev: true
 
   /@szmarczak/http-timer/1.1.2:
@@ -4955,14 +5013,14 @@ packages:
   /@types/babel__template/7.4.1:
     resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
     dependencies:
-      '@babel/parser': 7.16.2
-      '@babel/types': 7.16.0
+      '@babel/parser': 7.17.9
+      '@babel/types': 7.17.0
     dev: true
 
   /@types/babel__traverse/7.14.2:
     resolution: {integrity: sha512-K2waXdXBi2302XUdcHcR1jCeU0LL4TD9HRs/gk0N2Xvrht+G/BfJa4QObBQZfhMdxiCpV3COl5Nfq4uKTeTnJA==}
     dependencies:
-      '@babel/types': 7.16.0
+      '@babel/types': 7.17.0
     dev: true
 
   /@types/body-parser/1.19.1:
@@ -5224,6 +5282,10 @@ packages:
   /@types/node/17.0.24:
     resolution: {integrity: sha512-aveCYRQbgTH9Pssp1voEP7HiuWlD2jW2BO56w+bVrJn04i61yh6mRfoKO6hEYQD9vF+W8Chkwc6j1M36uPkx4g==}
 
+  /@types/node/17.0.31:
+    resolution: {integrity: sha512-AR0x5HbXGqkEx9CadRH3EBYx/VkiUgZIhP4wvPn/+5KIsgpNoyFaRlVe0Zlx9gRtg8fA06a9tskE2MSN7TcG4Q==}
+    dev: true
+
   /@types/node/17.0.6:
     resolution: {integrity: sha512-+XBAjfZmmivILUzO0HwBJoYkAyyySSLg5KCGBDFLomJo0sV6szvVLAf4ANZZ0pfWzgEds5KmGLG9D5hfEqOhaA==}
 
@@ -5456,6 +5518,12 @@ packages:
       '@types/yargs-parser': 21.0.0
     dev: true
 
+  /@types/yargs/17.0.10:
+    resolution: {integrity: sha512-gmEaFwpj/7f/ROdtIlci1R1VYU1J4j95m8T+Tj3iBgiBFKg1foE/PSl93bBd5T9LDXNPo8UlNN6W0qwD8O5OaA==}
+    dependencies:
+      '@types/yargs-parser': 21.0.0
+    dev: true
+
   /@typescript-eslint/eslint-plugin/5.14.0_c73qtwoqpvdfp6xojm7zfmehbu:
     resolution: {integrity: sha512-ir0wYI4FfFUDfLcuwKzIH7sMVA+db7WYen47iRSaCGl+HMAZI9fpBwfDo45ZALD3A45ZGyHWDNLhbg8tZrMX4w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -6604,7 +6672,7 @@ packages:
       babel-plugin-istanbul: 6.1.1
       babel-preset-jest: 27.5.1_@babel+core@7.17.9
       chalk: 4.1.2
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       slash: 3.0.0
     transitivePeerDependencies:
       - supports-color
@@ -7085,17 +7153,6 @@ packages:
       picocolors: 1.0.0
     dev: true
 
-  /browserslist/4.19.1:
-    resolution: {integrity: sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==}
-    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
-    hasBin: true
-    dependencies:
-      caniuse-lite: 1.0.30001311
-      electron-to-chromium: 1.4.68
-      escalade: 3.1.1
-      node-releases: 2.0.2
-      picocolors: 1.0.0
-
   /browserslist/4.20.0:
     resolution: {integrity: sha512-bnpOoa+DownbciXj0jVGENf8VYQnE2LNWomhYuCsMmmx9Jd9lwq0WXODuwpSsp8AVdKM2/HorrzxAfbKvWTByQ==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -7398,9 +7455,6 @@ packages:
   /caniuse-lite/1.0.30001274:
     resolution: {integrity: sha512-+Nkvv0fHyhISkiMIjnyjmf5YJcQ1IQHZN6U9TLUMroWR38FNwpsC51Gb68yueafX1V6ifOisInSgP9WJFS13ew==}
 
-  /caniuse-lite/1.0.30001311:
-    resolution: {integrity: sha512-mleTFtFKfykEeW34EyfhGIFjGCqzhh38Y0LhdQ9aWF+HorZTtdgKV/1hEE0NlFkG2ubvisPV6l400tlbPys98A==}
-
   /caniuse-lite/1.0.30001315:
     resolution: {integrity: sha512-5v7LFQU4Sb/qvkz7JcZkvtSH1Ko+1x2kgo3ocdBeMGZSOFpuE1kkm0kpTwLtWeFrw5qw08ulLxJjVIXIS8MkiQ==}
 
@@ -8004,7 +8058,7 @@ packages:
   /core-js-compat/3.20.3:
     resolution: {integrity: sha512-c8M5h0IkNZ+I92QhIpuSijOxGAcj3lgpsWdkCqmUTZNwidujF4r3pi6x1DCN+Vcs5qTS2XWWMfWSuCqyupX8gw==}
     dependencies:
-      browserslist: 4.19.1
+      browserslist: 4.20.2
       semver: 7.0.0
 
   /core-js/2.6.12:
@@ -8030,7 +8084,7 @@ packages:
     dependencies:
       '@iarna/toml': 2.2.5
 
-  /cosmiconfig-typescript-loader/1.0.9_c6ucwwwirjo6ockovr3lj3o2cm:
+  /cosmiconfig-typescript-loader/1.0.9_kpiehm6dkipypriomyghl2wcpq:
     resolution: {integrity: sha512-tRuMRhxN4m1Y8hP9SNYfz7jRwt8lZdWxdjg/ohg5esKmsndJIn4yT96oJVcf5x0eA11taXl+sIp+ielu529k6g==}
     engines: {node: '>=12', npm: '>=6'}
     peerDependencies:
@@ -8039,8 +8093,8 @@ packages:
     dependencies:
       '@types/node': 17.0.24
       cosmiconfig: 7.0.1
-      ts-node: 10.7.0_c6ucwwwirjo6ockovr3lj3o2cm
-      typescript: 4.6.3
+      ts-node: 10.7.0_kpiehm6dkipypriomyghl2wcpq
+      typescript: 4.6.4
     transitivePeerDependencies:
       - '@swc/core'
       - '@swc/wasm'
@@ -8744,6 +8798,11 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dev: true
 
+  /diff-sequences/28.0.2:
+    resolution: {integrity: sha512-YtEoNynLDFCRznv/XDalsKGSZDoj0U5kLnXvY0JSq3nBboRrZXjD81+eSiwi+nzcZDwedMmcowcxNwwgFW23mQ==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dev: true
+
   /diff/4.0.2:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
@@ -8962,9 +9021,6 @@ packages:
   /electron-to-chromium/1.4.111:
     resolution: {integrity: sha512-/s3+fwhKf1YK4k7btOImOzCQLpUjS6MaPf0ODTNuT4eTM1Bg4itBpLkydhOzJmpmH6Z9eXFyuuK5czsmzRzwtw==}
 
-  /electron-to-chromium/1.4.68:
-    resolution: {integrity: sha512-cId+QwWrV8R1UawO6b9BR1hnkJ4EJPCPAr4h315vliHUtVUJDk39Sg1PMNnaWKfj5x+93ssjeJ9LKL6r8LaMiA==}
-
   /electron-to-chromium/1.4.82:
     resolution: {integrity: sha512-Ks+ANzLoIrFDUOJdjxYMH6CMKB8UQo5modAwvSZTxgF+vEs/U7G5IbWFUp6dS4klPkTDVdxbORuk8xAXXhMsWw==}
 
@@ -10063,6 +10119,17 @@ packages:
       jest-message-util: 27.5.1
     dev: true
 
+  /expect/28.1.0:
+    resolution: {integrity: sha512-qFXKl8Pmxk8TBGfaFKRtcQjfXEnKAs+dmlxdwvukJZorwrAabT7M3h8oLOG01I2utEhkmUTi17CHaPBovZsKdw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/expect-utils': 28.1.0
+      jest-get-type: 28.0.2
+      jest-matcher-utils: 28.1.0
+      jest-message-util: 28.1.0
+      jest-util: 28.1.0
+    dev: true
+
   /extend-shallow/2.0.1:
     resolution: {integrity: sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=}
     engines: {node: '>=0.10.0'}
@@ -10500,8 +10567,8 @@ packages:
     resolution: {integrity: sha512-wtUo3eA0/+GZnT+dCjkSt5CuGCH5ZXjjrcZvYm/3BC5KGavuwgvME+eRRHYtCGYWD6I+fJ2uZ9en/JVqDEPrJw==}
     dev: false
 
-  /fp-ts/2.11.9:
-    resolution: {integrity: sha512-GhYlNKkCOfdjp71ocdtyaQGoqCswEoWDJLRr+2jClnBBq2dnSOtd6QxmJdALq8UhfqCyZZ0f0lxadU4OhwY9nw==}
+  /fp-ts/2.12.1:
+    resolution: {integrity: sha512-oxvgqUYR6O9VkKXrxkJ0NOyU0FrE705MeqgBUMEPWyTu6Pwn768cJbHChw2XOBlgFLKfIHxjr2OOBFpv2mUGZw==}
     dev: true
 
   /fragment-cache/0.2.1:
@@ -11744,6 +11811,14 @@ packages:
     dependencies:
       fp-ts: 2.11.10
 
+  /io-ts/2.2.16_fp-ts@2.12.1:
+    resolution: {integrity: sha512-y5TTSa6VP6le0hhmIyN0dqEXkrZeJLeC5KApJq6VLci3UEKF80lZ+KuoUs02RhBxNWlrqSNxzfI7otLX1Euv8Q==}
+    peerDependencies:
+      fp-ts: ^2.5.0
+    dependencies:
+      fp-ts: 2.12.1
+    dev: true
+
   /ip/1.1.5:
     resolution: {integrity: sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=}
     dev: false
@@ -12285,7 +12360,7 @@ packages:
       '@jest/types': 27.5.1
       chalk: 4.1.2
       exit: 0.1.2
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       import-local: 3.1.0
       jest-config: 27.5.1
       jest-util: 27.5.1
@@ -12317,7 +12392,7 @@ packages:
       ci-info: 3.3.0
       deepmerge: 4.2.2
       glob: 7.2.0
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       jest-circus: 27.5.1
       jest-environment-jsdom: 27.5.1
       jest-environment-node: 27.5.1
@@ -12328,7 +12403,7 @@ packages:
       jest-runner: 27.5.1
       jest-util: 27.5.1
       jest-validate: 27.5.1
-      micromatch: 4.0.4
+      micromatch: 4.0.5
       parse-json: 5.2.0
       pretty-format: 27.5.1
       slash: 3.0.0
@@ -12350,6 +12425,16 @@ packages:
       pretty-format: 27.5.1
     dev: true
 
+  /jest-diff/28.1.0:
+    resolution: {integrity: sha512-8eFd3U3OkIKRtlasXfiAQfbovgFgRDb0Ngcs2E+FMeBZ4rUezqIaGjuyggJBp+llosQXNEWofk/Sz4Hr5gMUhA==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      chalk: 4.1.2
+      diff-sequences: 28.0.2
+      jest-get-type: 28.0.2
+      pretty-format: 28.1.0
+    dev: true
+
   /jest-docblock/27.5.1:
     resolution: {integrity: sha512-rl7hlABeTsRYxKiUfpHrQrG4e2obOiTQWfMEH3PxPjOtdsfLQO4ReWSZaQ7DETm4xu07rl4q/h4zcKXyU0/OzQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -12403,6 +12488,11 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dev: true
 
+  /jest-get-type/28.0.2:
+    resolution: {integrity: sha512-ioj2w9/DxSYHfOm5lJKCdcAmPJzQXmbM/Url3rhlghrPvT3tt+7a/+oXc9azkKmLvoiXjtV83bEWqi+vs5nlPA==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dev: true
+
   /jest-haste-map/27.5.1:
     resolution: {integrity: sha512-7GgkZ4Fw4NFbMSDSpZwXeBiIbx+t/46nJ2QitkOjvwPYyZmqttu2TDSimMHP1EkPOi4xUZAN1doE5Vd25H4Jng==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -12412,12 +12502,12 @@ packages:
       '@types/node': 17.0.24
       anymatch: 3.1.2
       fb-watchman: 2.0.1
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       jest-regex-util: 27.5.1
       jest-serializer: 27.5.1
       jest-util: 27.5.1
       jest-worker: 27.5.1
-      micromatch: 4.0.4
+      micromatch: 4.0.5
       walker: 1.0.8
     optionalDependencies:
       fsevents: 2.3.2
@@ -12466,6 +12556,16 @@ packages:
       pretty-format: 27.5.1
     dev: true
 
+  /jest-matcher-utils/28.1.0:
+    resolution: {integrity: sha512-onnax0n2uTLRQFKAjC7TuaxibrPSvZgKTcSCnNUz/tOjJ9UhxNm7ZmPpoQavmTDUjXvUQ8KesWk2/VdrxIFzTQ==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      chalk: 4.1.2
+      jest-diff: 28.1.0
+      jest-get-type: 28.0.2
+      pretty-format: 28.1.0
+    dev: true
+
   /jest-message-util/27.5.1:
     resolution: {integrity: sha512-rMyFe1+jnyAAf+NHwTclDz0eAaLkVDdKVHHBFWsBWHnnh5YeJMNWWsv7AbFYXfK3oTqvL7VTWkhNLu1jX24D+g==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -12481,6 +12581,21 @@ packages:
       stack-utils: 2.0.5
     dev: true
 
+  /jest-message-util/28.1.0:
+    resolution: {integrity: sha512-RpA8mpaJ/B2HphDMiDlrAZdDytkmwFqgjDZovM21F35lHGeUeCvYmm6W+sbQ0ydaLpg5bFAUuWG1cjqOl8vqrw==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@babel/code-frame': 7.16.7
+      '@jest/types': 28.1.0
+      '@types/stack-utils': 2.0.1
+      chalk: 4.1.2
+      graceful-fs: 4.2.10
+      micromatch: 4.0.5
+      pretty-format: 28.1.0
+      slash: 3.0.0
+      stack-utils: 2.0.5
+    dev: true
+
   /jest-mock/27.5.1:
     resolution: {integrity: sha512-K4jKbY1d4ENhbrG2zuPWaQBvDly+iZ2yAW+T1fATN78hc0sInwn7wZB8XtlNnvHug5RMwV897Xm4LqmPM4e2Og==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -12523,7 +12638,7 @@ packages:
     dependencies:
       '@jest/types': 27.5.1
       chalk: 4.1.2
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       jest-haste-map: 27.5.1
       jest-pnp-resolver: 1.2.2_jest-resolve@27.5.1
       jest-util: 27.5.1
@@ -12545,7 +12660,7 @@ packages:
       '@types/node': 17.0.24
       chalk: 4.1.2
       emittery: 0.8.1
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       jest-docblock: 27.5.1
       jest-environment-jsdom: 27.5.1
       jest-environment-node: 27.5.1
@@ -12581,7 +12696,7 @@ packages:
       collect-v8-coverage: 1.0.1
       execa: 5.1.1
       glob: 7.2.0
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       jest-haste-map: 27.5.1
       jest-message-util: 27.5.1
       jest-mock: 27.5.1
@@ -12625,7 +12740,7 @@ packages:
       babel-preset-current-node-syntax: 1.0.1_@babel+core@7.17.9
       chalk: 4.1.2
       expect: 27.5.1
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
       jest-diff: 27.5.1
       jest-get-type: 27.5.1
       jest-haste-map: 27.5.1
@@ -12647,7 +12762,19 @@ packages:
       '@types/node': 17.0.24
       chalk: 4.1.2
       ci-info: 3.3.0
-      graceful-fs: 4.2.9
+      graceful-fs: 4.2.10
+      picomatch: 2.3.1
+    dev: true
+
+  /jest-util/28.1.0:
+    resolution: {integrity: sha512-qYdCKD77k4Hwkose2YBEqQk7PzUf/NSE+rutzceduFveQREeH6b+89Dc9+wjX9dAwHcgdx4yedGA3FQlU/qCTA==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/types': 28.1.0
+      '@types/node': 17.0.31
+      chalk: 4.1.2
+      ci-info: 3.3.0
+      graceful-fs: 4.2.10
       picomatch: 2.3.1
     dev: true
 
@@ -14325,7 +14452,7 @@ packages:
   /nuxt-windicss/2.2.11:
     resolution: {integrity: sha512-xobq725D6vqpIgYOrLJ6CVlR4xLlFGwuq//gZikXKOdoVRpoK8C+NpHazPd4+f17urGQ4H0LqGBCIujTvV1V0g==}
     dependencies:
-      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.2-27530889.9e5a3cd
+      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.3-27536597.3359b3b
       '@windicss/plugin-utils': 1.8.4
       consola: 2.15.3
       defu: 6.0.0
@@ -15795,6 +15922,16 @@ packages:
       react-is: 17.0.2
     dev: true
 
+  /pretty-format/28.1.0:
+    resolution: {integrity: sha512-79Z4wWOYCdvQkEoEuSlBhHJqWeZ8D8YRPiPctJFCtvuaClGpiwiQYSCUOE6IEKUbbFukKOTFIUAXE8N4EQTo1Q==}
+    engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
+    dependencies:
+      '@jest/schemas': 28.0.2
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 18.1.0
+    dev: true
+
   /pretty-time/1.1.0:
     resolution: {integrity: sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA==}
     engines: {node: '>=4'}
@@ -16072,6 +16209,10 @@ packages:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
     dev: true
 
+  /react-is/18.1.0:
+    resolution: {integrity: sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==}
+    dev: true
+
   /read-cache/1.0.0:
     resolution: {integrity: sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=}
     dependencies:
@@ -18229,11 +18370,45 @@ packages:
       json5: 2.2.1
       lodash.memoize: 4.1.2
       make-error: 1.3.6
-      semver: 7.3.5
+      semver: 7.3.6
       typescript: 4.6.3
       yargs-parser: 20.2.9
     dev: true
 
+  /ts-jest/27.1.4_53ggqi2i4rbcfjtktmjua6zili:
+    resolution: {integrity: sha512-qjkZlVPWVctAezwsOD1OPzbZ+k7zA5z3oxII4dGdZo5ggX/PL7kvwTM0pXTr10fAtbiVpJaL3bWd502zAhpgSQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    hasBin: true
+    peerDependencies:
+      '@babel/core': '>=7.0.0-beta.0 <8'
+      '@types/jest': ^27.0.0
+      babel-jest: '>=27.0.0 <28'
+      esbuild: '*'
+      jest: ^27.0.0
+      typescript: '>=3.8 <5.0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      '@types/jest':
+        optional: true
+      babel-jest:
+        optional: true
+      esbuild:
+        optional: true
+    dependencies:
+      '@types/jest': 27.4.1
+      bs-logger: 0.2.6
+      fast-json-stable-stringify: 2.1.0
+      jest: 27.5.1
+      jest-util: 27.5.1
+      json5: 2.2.1
+      lodash.memoize: 4.1.2
+      make-error: 1.3.6
+      semver: 7.3.6
+      typescript: 4.6.4
+      yargs-parser: 20.2.9
+    dev: true
+
   /ts-jest/27.1.4_tgc6da2oqazvrn56dzwolsqo5i:
     resolution: {integrity: sha512-qjkZlVPWVctAezwsOD1OPzbZ+k7zA5z3oxII4dGdZo5ggX/PL7kvwTM0pXTr10fAtbiVpJaL3bWd502zAhpgSQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
@@ -18263,7 +18438,7 @@ packages:
       json5: 2.2.1
       lodash.memoize: 4.1.2
       make-error: 1.3.6
-      semver: 7.3.5
+      semver: 7.3.6
       typescript: 4.6.3
       yargs-parser: 20.2.9
     dev: true
@@ -18287,7 +18462,7 @@ packages:
     resolution: {integrity: sha512-DEQrfv6l7IvN2jlzc/VTdZJYsWUnQNCsueYjMkC/iXoEoi5fNan6MjeDqkvhfzbmHgdz9UxDUluX3V5HdjTydQ==}
     dev: true
 
-  /ts-node/10.7.0_c6ucwwwirjo6ockovr3lj3o2cm:
+  /ts-node/10.7.0_kpiehm6dkipypriomyghl2wcpq:
     resolution: {integrity: sha512-TbIGS4xgJoX2i3do417KSaep1uRAW/Lu+WAL2doDHC0D6ummjirVOXU5/7aiZotbQ5p1Zp9tP7U6cYhA0O7M8A==}
     hasBin: true
     peerDependencies:
@@ -18313,7 +18488,7 @@ packages:
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 4.6.3
+      typescript: 4.6.4
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
     dev: true
@@ -18369,36 +18544,6 @@ packages:
   /tslib/2.3.1:
     resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
 
-  /tsup/5.12.4_typescript@4.6.3:
-    resolution: {integrity: sha512-uUraITfIj2h6rXAdeaVUYrZ2Is9joLFyEGZN5mGAke874JojCizb2MCUcE0wGdcERtyob5mbbFUKkMgal8SlFw==}
-    hasBin: true
-    peerDependencies:
-      typescript: ^4.1.0
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-    dependencies:
-      bundle-require: 3.0.4_esbuild@0.14.34
-      cac: 6.7.12
-      chokidar: 3.5.3
-      debug: 4.3.4
-      esbuild: 0.14.34
-      execa: 5.1.1
-      globby: 11.1.0
-      joycon: 3.1.1
-      postcss-load-config: 3.1.4
-      resolve-from: 5.0.0
-      rollup: 2.70.1
-      source-map: 0.7.3
-      sucrase: 3.21.0
-      tree-kill: 1.2.2
-      typescript: 4.6.3
-    transitivePeerDependencies:
-      - postcss
-      - supports-color
-      - ts-node
-    dev: true
-
   /tsup/5.12.5_typescript@4.6.3:
     resolution: {integrity: sha512-lKwzJsB49sDto51QjqOB4SdiBLKRvgTymEBuBCovcksdDwFEz3esrkbf3m497PXntUKVTzcgOfPdTgknMtvufw==}
     hasBin: true
@@ -18428,6 +18573,36 @@ packages:
       - supports-color
       - ts-node
 
+  /tsup/5.12.7_typescript@4.6.4:
+    resolution: {integrity: sha512-+OxYroGLByY0Fm8DLZaB4nVMlD59VsQoNXdhnO9wOG+cOsKXUwN3ER9gaKOjZJG26eKUXebmDme0Cy3emfRvOQ==}
+    hasBin: true
+    peerDependencies:
+      typescript: ^4.1.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+    dependencies:
+      bundle-require: 3.0.4_esbuild@0.14.34
+      cac: 6.7.12
+      chokidar: 3.5.3
+      debug: 4.3.4
+      esbuild: 0.14.34
+      execa: 5.1.1
+      globby: 11.1.0
+      joycon: 3.1.1
+      postcss-load-config: 3.1.4
+      resolve-from: 5.0.0
+      rollup: 2.70.1
+      source-map: 0.7.3
+      sucrase: 3.21.0
+      tree-kill: 1.2.2
+      typescript: 4.6.4
+    transitivePeerDependencies:
+      - postcss
+      - supports-color
+      - ts-node
+    dev: true
+
   /tsutils/3.21.0_typescript@4.6.3:
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}
     engines: {node: '>= 6'}
@@ -18506,6 +18681,12 @@ packages:
     hasBin: true
     dev: true
 
+  /typescript/4.6.4:
+    resolution: {integrity: sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==}
+    engines: {node: '>=4.2.0'}
+    hasBin: true
+    dev: true
+
   /ua-parser-js/0.7.31:
     resolution: {integrity: sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==}
 
@@ -18598,8 +18779,8 @@ packages:
     engines: {node: '>= 0.4.12'}
     dev: true
 
-  /unimport/0.1.8:
-    resolution: {integrity: sha512-Eynu+yyVVZ76te5DbE3744z1YjqoES+muNlNP03kVURHC/S2IR65mjzdmT6wpWvU78q488dK0fQ+tUK9UEndZA==}
+  /unimport/0.2.1:
+    resolution: {integrity: sha512-6u1uY6GFIi9WslI7fPun0I0ZrIGJ0yAn92n/9rQv4MAEEnxg8zMO+Tj7q/6Z/7XxTn8qFCJIqEM/3Io81Zwmmw==}
     dependencies:
       '@rollup/pluginutils': 4.2.1
       escape-string-regexp: 5.0.0
@@ -18607,9 +18788,9 @@ packages:
       local-pkg: 0.4.1
       magic-string: 0.26.1
       mlly: 0.5.2
-      pathe: 0.2.0
+      pathe: 0.3.0
       scule: 0.2.1
-      unplugin: 0.6.2
+      unplugin: 0.6.3
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -18742,6 +18923,28 @@ packages:
       webpack-virtual-modules: 0.4.3
     dev: true
 
+  /unplugin/0.6.3:
+    resolution: {integrity: sha512-CoW88FQfCW/yabVc4bLrjikN9HC8dEvMU4O7B6K2jsYMPK0l6iAnd9dpJwqGcmXJKRCU9vwSsy653qg+RK0G6A==}
+    peerDependencies:
+      esbuild: '>=0.13'
+      rollup: ^2.50.0
+      vite: ^2.3.0
+      webpack: 4 || 5
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      chokidar: 3.5.3
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.4.3
+    dev: true
+
   /unquote/1.1.1:
     resolution: {integrity: sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=}
 
@@ -19731,11 +19934,11 @@ packages:
   /yargs-parser/20.2.4:
     resolution: {integrity: sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==}
     engines: {node: '>=10'}
+    dev: true
 
   /yargs-parser/20.2.9:
     resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
     engines: {node: '>=10'}
-    dev: true
 
   /yargs-parser/21.0.1:
     resolution: {integrity: sha512-9BK1jFpLzJROCI5TzwZL/TU4gqjK5xiHV/RfWLOahrjAko/e4DJkRDZQXfvqAsiZzzYhgAzbgz6lg48jcm4GLg==}
@@ -19778,7 +19981,7 @@ packages:
       require-directory: 2.1.1
       string-width: 4.2.3
       y18n: 5.0.8
-      yargs-parser: 20.2.4
+      yargs-parser: 20.2.9
 
   /yargs/17.3.1:
     resolution: {integrity: sha512-WUANQeVgjLbNsEmGk20f+nlHgOqzRFpiGWVaBrYGYIGANIIu3lWjoyi0fNlFmJkvfhCZ6BXINe7/W2O2bV4iaA==}

From 184914ba4f62d4d2266d05ae9f4a8c607fe227d1 Mon Sep 17 00:00:00 2001
From: Akash K <57758277+amk-dev@users.noreply.github.com>
Date: Thu, 19 May 2022 13:41:05 +0530
Subject: [PATCH 09/50] feat: extension identification improvements (#2332)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 .../components/app/Interceptor.vue            | 87 +++++++------------
 .../hoppscotch-app/components/smart/Radio.vue | 42 +++++----
 .../components/smart/RadioGroup.vue           | 12 ++-
 .../helpers/strategies/ExtensionStrategy.ts   | 62 ++++++++++---
 .../ExtensionStrategy-NoProxy.spec.js         |  7 --
 packages/hoppscotch-app/layouts/default.vue   | 66 ++++++++++++++
 .../hoppscotch-app/newstore/HoppExtension.ts  | 40 +++++++++
 packages/hoppscotch-app/pages/settings.vue    | 40 +++------
 .../hoppscotch-app/types/pw-ext-hook.d.ts     |  9 ++
 packages/hoppscotch-app/types/window.d.ts     |  7 +-
 10 files changed, 243 insertions(+), 129 deletions(-)
 create mode 100644 packages/hoppscotch-app/newstore/HoppExtension.ts

diff --git a/packages/hoppscotch-app/components/app/Interceptor.vue b/packages/hoppscotch-app/components/app/Interceptor.vue
index 6a993a37b..f5b5e15ea 100644
--- a/packages/hoppscotch-app/components/app/Interceptor.vue
+++ b/packages/hoppscotch-app/components/app/Interceptor.vue
@@ -8,11 +8,7 @@
         {{ t("settings.interceptor_description") }}
       </p>
     </div>
-    <SmartRadioGroup
-      :radios="interceptors"
-      :selected="interceptorSelection"
-      @change="toggleSettingKey"
-    />
+    <SmartRadioGroup v-model="interceptorSelection" :radios="interceptors" />
     <div
       v-if="interceptorSelection == 'EXTENSIONS_ENABLED' && !extensionVersion"
       class="flex space-x-2"
@@ -38,58 +34,29 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watchEffect } from "@nuxtjs/composition-api"
-import { KeysMatching } from "~/types/ts-utils"
-import {
-  applySetting,
-  SettingsType,
-  toggleSetting,
-  useSetting,
-} from "~/newstore/settings"
-import { hasExtensionInstalled } from "~/helpers/strategies/ExtensionStrategy"
-import { useI18n, usePolled } from "~/helpers/utils/composables"
+import { computed } from "@nuxtjs/composition-api"
+import { applySetting, toggleSetting, useSetting } from "~/newstore/settings"
+import { useI18n, useReadonlyStream } from "~/helpers/utils/composables"
+import { extensionStatus$ } from "~/newstore/HoppExtension"
 
 const t = useI18n()
 
 const PROXY_ENABLED = useSetting("PROXY_ENABLED")
 const EXTENSIONS_ENABLED = useSetting("EXTENSIONS_ENABLED")
 
-const toggleSettingKey = <
-  K extends KeysMatching<SettingsType | "BROWSER_ENABLED", boolean>
->(
-  key: K
-) => {
-  interceptorSelection.value = key
-  if (key === "EXTENSIONS_ENABLED") {
-    applySetting("EXTENSIONS_ENABLED", true)
-    if (PROXY_ENABLED.value) toggleSetting("PROXY_ENABLED")
-  }
-  if (key === "PROXY_ENABLED") {
-    applySetting("PROXY_ENABLED", true)
-    if (EXTENSIONS_ENABLED.value) toggleSetting("EXTENSIONS_ENABLED")
-  }
-  if (key === "BROWSER_ENABLED") {
-    applySetting("PROXY_ENABLED", false)
-    applySetting("EXTENSIONS_ENABLED", false)
-  }
-}
+const currentExtensionStatus = useReadonlyStream(extensionStatus$, null)
 
-const extensionVersion = usePolled(5000, (stopPolling) => {
-  const result = hasExtensionInstalled()
-    ? window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
+const extensionVersion = computed(() => {
+  return currentExtensionStatus.value === "available"
+    ? window.__POSTWOMAN_EXTENSION_HOOK__?.getVersion() ?? null
     : null
-
-  // We don't need to poll anymore after we get value
-  if (result) stopPolling()
-
-  return result
 })
 
 const interceptors = computed(() => [
-  { value: "BROWSER_ENABLED", label: t("state.none") },
-  { value: "PROXY_ENABLED", label: t("settings.proxy") },
+  { value: "BROWSER_ENABLED" as const, label: t("state.none") },
+  { value: "PROXY_ENABLED" as const, label: t("settings.proxy") },
   {
-    value: "EXTENSIONS_ENABLED",
+    value: "EXTENSIONS_ENABLED" as const,
     label:
       `${t("settings.extensions")}: ` +
       (extensionVersion.value !== null
@@ -98,15 +65,27 @@ const interceptors = computed(() => [
   },
 ])
 
-const interceptorSelection = ref("")
+type InterceptorMode = typeof interceptors["value"][number]["value"]
 
-watchEffect(() => {
-  if (PROXY_ENABLED.value) {
-    interceptorSelection.value = "PROXY_ENABLED"
-  } else if (EXTENSIONS_ENABLED.value) {
-    interceptorSelection.value = "EXTENSIONS_ENABLED"
-  } else {
-    interceptorSelection.value = "BROWSER_ENABLED"
-  }
+const interceptorSelection = computed<InterceptorMode>({
+  get() {
+    if (PROXY_ENABLED.value) return "PROXY_ENABLED"
+    if (EXTENSIONS_ENABLED.value) return "EXTENSIONS_ENABLED"
+    return "BROWSER_ENABLED"
+  },
+  set(val) {
+    if (val === "EXTENSIONS_ENABLED") {
+      applySetting("EXTENSIONS_ENABLED", true)
+      if (PROXY_ENABLED.value) toggleSetting("PROXY_ENABLED")
+    }
+    if (val === "PROXY_ENABLED") {
+      applySetting("PROXY_ENABLED", true)
+      if (EXTENSIONS_ENABLED.value) toggleSetting("EXTENSIONS_ENABLED")
+    }
+    if (val === "BROWSER_ENABLED") {
+      applySetting("PROXY_ENABLED", false)
+      applySetting("EXTENSIONS_ENABLED", false)
+    }
+  },
 })
 </script>
diff --git a/packages/hoppscotch-app/components/smart/Radio.vue b/packages/hoppscotch-app/components/smart/Radio.vue
index 226904dc4..de1ced5f3 100644
--- a/packages/hoppscotch-app/components/smart/Radio.vue
+++ b/packages/hoppscotch-app/components/smart/Radio.vue
@@ -1,33 +1,31 @@
 <template>
   <SmartItem
     :label="label"
-    :icon="
-      value === selected ? 'radio_button_checked' : 'radio_button_unchecked'
-    "
-    :active="value === selected"
+    :icon="selected ? 'radio_button_checked' : 'radio_button_unchecked'"
+    :active="selected"
     role="radio"
-    :aria-checked="value === selected"
-    @click.native="$emit('change', value)"
+    :aria-checked="selected"
+    @click.native="emit('change', value)"
   />
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+const emit = defineEmits<{
+  (e: "change", value: string): void
+}>()
 
-export default defineComponent({
-  props: {
-    value: {
-      type: String,
-      default: "",
-    },
-    label: {
-      type: String,
-      default: "",
-    },
-    selected: {
-      type: String,
-      default: "",
-    },
+defineProps({
+  value: {
+    type: String,
+    default: "",
+  },
+  label: {
+    type: String,
+    default: "",
+  },
+  selected: {
+    type: Boolean,
+    default: false,
   },
 })
 </script>
diff --git a/packages/hoppscotch-app/components/smart/RadioGroup.vue b/packages/hoppscotch-app/components/smart/RadioGroup.vue
index f0363078b..1b1027819 100644
--- a/packages/hoppscotch-app/components/smart/RadioGroup.vue
+++ b/packages/hoppscotch-app/components/smart/RadioGroup.vue
@@ -5,18 +5,22 @@
       :key="`radio-${index}`"
       :value="radio.value"
       :label="radio.label"
-      :selected="selected"
-      @change="$emit('change', radio.value)"
+      :selected="value === radio.value"
+      @change="emit('input', radio.value)"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+const emit = defineEmits<{
+  (e: "input", value: string): void
+}>()
+
 defineProps<{
   radios: Array<{
-    value: string
+    value: string // The key of the radio option
     label: string
   }>
-  selected: string
+  value: string // Should be a radio key given in the radios array
 }>()
 </script>
diff --git a/packages/hoppscotch-app/helpers/strategies/ExtensionStrategy.ts b/packages/hoppscotch-app/helpers/strategies/ExtensionStrategy.ts
index 013155f04..254259f12 100644
--- a/packages/hoppscotch-app/helpers/strategies/ExtensionStrategy.ts
+++ b/packages/hoppscotch-app/helpers/strategies/ExtensionStrategy.ts
@@ -1,4 +1,5 @@
 import * as TE from "fp-ts/TaskEither"
+import * as O from "fp-ts/Option"
 import { pipe } from "fp-ts/function"
 import { AxiosRequestConfig } from "axios"
 import cloneDeep from "lodash/cloneDeep"
@@ -15,12 +16,42 @@ export const hasFirefoxExtensionInstalled = () =>
   hasExtensionInstalled() && browserIsFirefox()
 
 export const cancelRunningExtensionRequest = () => {
-  if (
-    hasExtensionInstalled() &&
-    window.__POSTWOMAN_EXTENSION_HOOK__.cancelRunningRequest
-  ) {
-    window.__POSTWOMAN_EXTENSION_HOOK__.cancelRunningRequest()
+  window.__POSTWOMAN_EXTENSION_HOOK__?.cancelRunningRequest()
+}
+
+export const defineSubscribableObject = <T extends object>(obj: T) => {
+  const proxyObject = {
+    ...obj,
+    _subscribers: {} as {
+      // eslint-disable-next-line no-unused-vars
+      [key in keyof T]?: ((...args: any[]) => any)[]
+    },
+    subscribe(prop: keyof T, func: (...args: any[]) => any): void {
+      if (Array.isArray(this._subscribers[prop])) {
+        this._subscribers[prop]?.push(func)
+      } else {
+        this._subscribers[prop] = [func]
+      }
+    },
   }
+
+  type SubscribableProxyObject = typeof proxyObject
+
+  return new Proxy(proxyObject, {
+    set(obj, prop, newVal) {
+      obj[prop as keyof SubscribableProxyObject] = newVal
+
+      const currentSubscribers = obj._subscribers[prop as keyof T]
+
+      if (Array.isArray(currentSubscribers)) {
+        for (const subscriber of currentSubscribers) {
+          subscriber(newVal)
+        }
+      }
+
+      return true
+    },
+  })
 }
 
 const preProcessRequest = (req: AxiosRequestConfig): AxiosRequestConfig => {
@@ -56,13 +87,20 @@ const extensionStrategy: NetworkStrategy = (req) =>
 
     // Run the request
     TE.bind("response", ({ processedReq }) =>
-      TE.tryCatch(
-        () =>
-          window.__POSTWOMAN_EXTENSION_HOOK__.sendRequest({
-            ...processedReq,
-            wantsBinary: true,
-          }) as Promise<NetworkResponse>,
-        (err) => err as any
+      pipe(
+        window.__POSTWOMAN_EXTENSION_HOOK__,
+        O.fromNullable,
+        TE.fromOption(() => "NO_PW_EXT_HOOK" as const),
+        TE.chain((extensionHook) =>
+          TE.tryCatch(
+            () =>
+              extensionHook.sendRequest({
+                ...processedReq,
+                wantsBinary: true,
+              }),
+            (err) => err as any
+          )
+        )
       )
     ),
 
diff --git a/packages/hoppscotch-app/helpers/strategies/__tests__/ExtensionStrategy-NoProxy.spec.js b/packages/hoppscotch-app/helpers/strategies/__tests__/ExtensionStrategy-NoProxy.spec.js
index b44a6f9af..53665d492 100644
--- a/packages/hoppscotch-app/helpers/strategies/__tests__/ExtensionStrategy-NoProxy.spec.js
+++ b/packages/hoppscotch-app/helpers/strategies/__tests__/ExtensionStrategy-NoProxy.spec.js
@@ -122,13 +122,6 @@ describe("cancelRunningExtensionRequest", () => {
     cancelRunningExtensionRequest()
     expect(cancelFunc).not.toHaveBeenCalled()
   })
-
-  test("does not cancel request if extension installed but function not present", () => {
-    global.__POSTWOMAN_EXTENSION_HOOK__ = {}
-
-    cancelRunningExtensionRequest()
-    expect(cancelFunc).not.toHaveBeenCalled()
-  })
 })
 
 describe("extensionStrategy", () => {
diff --git a/packages/hoppscotch-app/layouts/default.vue b/packages/hoppscotch-app/layouts/default.vue
index cf40259f3..971673e00 100644
--- a/packages/hoppscotch-app/layouts/default.vue
+++ b/packages/hoppscotch-app/layouts/default.vue
@@ -64,6 +64,8 @@ import {
   useRouter,
   watch,
   ref,
+  onMounted,
+  onBeforeUnmount,
 } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
@@ -77,6 +79,12 @@ import { hookKeybindingsListener } from "~/helpers/keybindings"
 import { defineActionHandler } from "~/helpers/actions"
 import { useSentry } from "~/helpers/sentry"
 import { useColorMode } from "~/helpers/utils/composables"
+import {
+  changeExtensionStatus,
+  ExtensionStatus,
+} from "~/newstore/HoppExtension"
+
+import { defineSubscribableObject } from "~/helpers/strategies/ExtensionStrategy"
 
 function appLayout() {
   const rightSidebar = useSetting("SIDEBAR")
@@ -202,6 +210,62 @@ function defineJumpActions() {
   })
 }
 
+function setupExtensionHooks() {
+  const extensionPollIntervalId = ref<ReturnType<typeof setInterval>>()
+
+  onMounted(() => {
+    if (window.__HOPP_EXTENSION_STATUS_PROXY__) {
+      changeExtensionStatus(window.__HOPP_EXTENSION_STATUS_PROXY__.status)
+
+      window.__HOPP_EXTENSION_STATUS_PROXY__.subscribe(
+        "status",
+        (status: ExtensionStatus) => changeExtensionStatus(status)
+      )
+    } else {
+      const statusProxy = defineSubscribableObject({
+        status: "waiting" as ExtensionStatus,
+      })
+
+      window.__HOPP_EXTENSION_STATUS_PROXY__ = statusProxy
+      statusProxy.subscribe("status", (status: ExtensionStatus) =>
+        changeExtensionStatus(status)
+      )
+
+      /**
+       * Keeping identifying extension backward compatible
+       * We are assuming the default version is 0.24 or later. So if the extension exists, its identified immediately,
+       * then we use a poll to find the version, this will get the version for 0.24 and any other version
+       * of the extension, but will have a slight lag.
+       * 0.24 users will get the benefits of 0.24, while the extension won't break for the old users
+       */
+      extensionPollIntervalId.value = setInterval(() => {
+        if (typeof window.__POSTWOMAN_EXTENSION_HOOK__ !== "undefined") {
+          if (extensionPollIntervalId.value)
+            clearInterval(extensionPollIntervalId.value)
+
+          const version = window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
+
+          // When the version is not 0.24 or higher, the extension wont do this. so we have to do it manually
+          if (
+            version.major === 0 &&
+            version.minor <= 23 &&
+            window.__HOPP_EXTENSION_STATUS_PROXY__
+          ) {
+            window.__HOPP_EXTENSION_STATUS_PROXY__.status = "available"
+          }
+        }
+      }, 2000)
+    }
+  })
+
+  // Cleanup timer
+  onBeforeUnmount(() => {
+    if (extensionPollIntervalId.value) {
+      clearInterval(extensionPollIntervalId.value)
+    }
+  })
+}
+
 export default defineComponent({
   components: { Splitpanes, Pane },
   setup() {
@@ -229,6 +293,8 @@ export default defineComponent({
       showSupport.value = !showSupport.value
     })
 
+    setupExtensionHooks()
+
     return {
       mdAndLarger,
       spacerClass,
diff --git a/packages/hoppscotch-app/newstore/HoppExtension.ts b/packages/hoppscotch-app/newstore/HoppExtension.ts
new file mode 100644
index 000000000..ae725333f
--- /dev/null
+++ b/packages/hoppscotch-app/newstore/HoppExtension.ts
@@ -0,0 +1,40 @@
+import { distinctUntilChanged, pluck } from "rxjs"
+import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
+
+export type ExtensionStatus = "available" | "unknown-origin" | "waiting"
+
+type InitialState = {
+  extensionStatus: ExtensionStatus
+}
+
+const initialState: InitialState = {
+  extensionStatus: "waiting",
+}
+
+const dispatchers = defineDispatchers({
+  changeExtensionStatus(
+    _,
+    { extensionStatus }: { extensionStatus: ExtensionStatus }
+  ) {
+    return {
+      extensionStatus,
+    }
+  },
+})
+
+export const hoppExtensionStore = new DispatchingStore(
+  initialState,
+  dispatchers
+)
+
+export const extensionStatus$ = hoppExtensionStore.subject$.pipe(
+  pluck("extensionStatus"),
+  distinctUntilChanged()
+)
+
+export function changeExtensionStatus(extensionStatus: ExtensionStatus) {
+  hoppExtensionStore.dispatch({
+    dispatcher: "changeExtensionStatus",
+    payload: { extensionStatus },
+  })
+}
diff --git a/packages/hoppscotch-app/pages/settings.vue b/packages/hoppscotch-app/pages/settings.vue
index da460ad2b..78f9df3c3 100644
--- a/packages/hoppscotch-app/pages/settings.vue
+++ b/packages/hoppscotch-app/pages/settings.vue
@@ -241,14 +241,11 @@ import {
   useToast,
   useI18n,
   useColorMode,
-  usePolled,
+  useReadonlyStream,
 } from "~/helpers/utils/composables"
-import {
-  hasExtensionInstalled,
-  hasChromeExtensionInstalled,
-  hasFirefoxExtensionInstalled,
-} from "~/helpers/strategies/ExtensionStrategy"
+
 import { browserIsChrome, browserIsFirefox } from "~/helpers/utils/userAgent"
+import { extensionStatus$ } from "~/newstore/HoppExtension"
 
 const t = useI18n()
 const toast = useToast()
@@ -263,30 +260,21 @@ const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
 const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
 const ZEN_MODE = useSetting("ZEN_MODE")
 
-const extensionVersion = usePolled(5000, (stopPolling) => {
-  const result = hasExtensionInstalled()
-    ? window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
+const currentExtensionStatus = useReadonlyStream(extensionStatus$, null)
+
+const extensionVersion = computed(() => {
+  return currentExtensionStatus.value === "available"
+    ? window.__POSTWOMAN_EXTENSION_HOOK__?.getVersion() ?? null
     : null
-
-  // We don't need to poll anymore after we get value
-  if (result) stopPolling()
-
-  return result
 })
 
-const hasChromeExtInstalled = usePolled(5000, (stopPolling) => {
-  // If not Chrome, we don't need to worry about this value changing
-  if (!browserIsChrome()) stopPolling()
+const hasChromeExtInstalled = computed(
+  () => browserIsChrome() && currentExtensionStatus.value === "available"
+)
 
-  return hasChromeExtensionInstalled()
-})
-
-const hasFirefoxExtInstalled = usePolled(5000, (stopPolling) => {
-  // If not Chrome, we don't need to worry about this value changing
-  if (!browserIsFirefox()) stopPolling()
-
-  return hasFirefoxExtensionInstalled()
-})
+const hasFirefoxExtInstalled = computed(
+  () => browserIsFirefox() && currentExtensionStatus.value === "available"
+)
 
 const clearIcon = ref("rotate-ccw")
 
diff --git a/packages/hoppscotch-app/types/pw-ext-hook.d.ts b/packages/hoppscotch-app/types/pw-ext-hook.d.ts
index bdc172c38..8e39ff1e2 100644
--- a/packages/hoppscotch-app/types/pw-ext-hook.d.ts
+++ b/packages/hoppscotch-app/types/pw-ext-hook.d.ts
@@ -1,5 +1,6 @@
 import { AxiosRequestConfig } from "axios"
 import { NetworkResponse } from "~/helpers/network"
+import { ExtensionStatus } from "~/newstore/HoppExtension"
 
 export interface PWExtensionHook {
   getVersion: () => { major: number; minor: number }
@@ -8,3 +9,11 @@ export interface PWExtensionHook {
   ) => Promise<NetworkResponse>
   cancelRunningRequest: () => void
 }
+
+export type HoppExtensionStatusHook = {
+  status: ExtensionStatus
+  _subscribers: {
+    status?: ((...args: any[]) => any)[] | undefined
+  }
+  subscribe(prop: "status", func: (...args: any[]) => any): void
+}
diff --git a/packages/hoppscotch-app/types/window.d.ts b/packages/hoppscotch-app/types/window.d.ts
index 81a6a9d02..e37081260 100644
--- a/packages/hoppscotch-app/types/window.d.ts
+++ b/packages/hoppscotch-app/types/window.d.ts
@@ -1,9 +1,8 @@
-import { PWExtensionHook } from "./pw-ext-hook"
-
-export {}
+import { HoppExtensionStatusHook, PWExtensionHook } from "./pw-ext-hook"
 
 declare global {
   interface Window {
-    __POSTWOMAN_EXTENSION_HOOK__: PWExtensionHook
+    __POSTWOMAN_EXTENSION_HOOK__: PWExtensionHook | undefined
+    __HOPP_EXTENSION_STATUS_PROXY__: HoppExtensionStatusHook | undefined
   }
 }

From cfa89a6dedd576089b3055d7c8133045c5e7a63c Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Tue, 24 May 2022 17:58:49 +0530
Subject: [PATCH 10/50] feat: UI of shortcode actions (#2347)

Co-authored-by: liyasthomas <liyascthomas@gmail.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 .../components/http/Request.vue               |  62 ++--
 .../components/profile/Shortcode.vue          | 135 +++++++
 .../gql/mutations/DeleteShortcode.graphql     |   3 +
 .../gql/queries/GetMyShortcodes.graphql       |   7 +
 .../subscriptions/ShortcodeCreated.graphql    |   7 +
 .../subscriptions/ShortcodeDeleted.graphql    |   5 +
 .../hoppscotch-app/helpers/backend/helpers.ts |   2 +-
 .../helpers/backend/mutations/Shortcode.ts    |  14 +
 .../helpers/shortcodes/Shortcode.ts           |   8 +
 .../shortcodes/ShortcodeListAdapter.ts        | 149 ++++++++
 packages/hoppscotch-app/locales/en.json       |  16 +-
 packages/hoppscotch-app/pages/profile.vue     | 343 +++++++++++++-----
 12 files changed, 632 insertions(+), 119 deletions(-)
 create mode 100644 packages/hoppscotch-app/components/profile/Shortcode.vue
 create mode 100644 packages/hoppscotch-app/helpers/backend/gql/mutations/DeleteShortcode.graphql
 create mode 100644 packages/hoppscotch-app/helpers/backend/gql/queries/GetMyShortcodes.graphql
 create mode 100644 packages/hoppscotch-app/helpers/backend/gql/subscriptions/ShortcodeCreated.graphql
 create mode 100644 packages/hoppscotch-app/helpers/backend/gql/subscriptions/ShortcodeDeleted.graphql
 create mode 100644 packages/hoppscotch-app/helpers/shortcodes/Shortcode.ts
 create mode 100644 packages/hoppscotch-app/helpers/shortcodes/ShortcodeListAdapter.ts

diff --git a/packages/hoppscotch-app/components/http/Request.vue b/packages/hoppscotch-app/components/http/Request.vue
index 4aa0594fb..fe280c994 100644
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -152,37 +152,49 @@
           />
           <div
             ref="saveTippyActions"
-            class="flex flex-col focus:outline-none"
+            class="flex flex-col divide-y-1 divide-primaryDark focus:outline-none"
             tabindex="0"
             role="menu"
             @keyup.c="copyRequestAction.$el.click()"
             @keyup.s="saveRequestAction.$el.click()"
             @keyup.escape="saveOptions.tippy().hide()"
           >
-            <SmartItem
-              ref="copyRequestAction"
-              :label="shareButtonText"
-              :svg="copyLinkIcon"
-              :loading="fetchingShareLink"
-              :shortcut="['C']"
-              @click.native="
-                () => {
-                  copyRequest()
-                }
-              "
-            />
-            <SmartItem
-              ref="saveRequestAction"
-              :label="`${t('request.save_as')}`"
-              svg="folder-plus"
-              :shortcut="['S']"
-              @click.native="
-                () => {
-                  showSaveRequestModal = true
-                  saveOptions.tippy().hide()
-                }
-              "
-            />
+            <div class="flex flex-col space-y-1">
+              <SmartItem
+                ref="copyRequestAction"
+                :label="shareButtonText"
+                :svg="copyLinkIcon"
+                :loading="fetchingShareLink"
+                :shortcut="['C']"
+                @click.native="
+                  () => {
+                    copyRequest()
+                  }
+                "
+              />
+              <SmartAnchor
+                :label="`${t('request.view_my_links')}`"
+                to="/profile"
+                svg="arrow-right"
+                reverse
+                blank
+                class="pb-3 -ml-4 text-tiny text-secondaryLight"
+              />
+            </div>
+            <div class="flex pt-3 pb-1">
+              <SmartItem
+                ref="saveRequestAction"
+                :label="`${t('request.save_as')}`"
+                svg="folder-plus"
+                :shortcut="['S']"
+                @click.native="
+                  () => {
+                    showSaveRequestModal = true
+                    saveOptions.tippy().hide()
+                  }
+                "
+              />
+            </div>
           </div>
         </tippy>
       </span>
diff --git a/packages/hoppscotch-app/components/profile/Shortcode.vue b/packages/hoppscotch-app/components/profile/Shortcode.vue
new file mode 100644
index 000000000..7a48937f5
--- /dev/null
+++ b/packages/hoppscotch-app/components/profile/Shortcode.vue
@@ -0,0 +1,135 @@
+<template>
+  <div
+    class="table-row-groups lg:flex block my-6 lg:my-0 w-full border lg:border-0 divide-y lg:divide-y-0 lg:divide-x divide-dividerLight border-dividerLight"
+  >
+    <div class="table-column lg:w-1/5" :data-label="t('shortcodes.short_code')">
+      {{ shortcode.id }}
+    </div>
+    <div
+      class="table-column lg:w-1/5"
+      :class="requestLabelColor"
+      :data-label="t('shortcodes.method')"
+    >
+      {{ parseShortcodeRequest.method }}
+    </div>
+    <div class="table-column lg:w-3/5" :data-label="t('shortcodes.url')">
+      <div class="max-w-50 lg:max-w-90 truncate">
+        {{ parseShortcodeRequest.endpoint }}
+      </div>
+    </div>
+    <div
+      ref="timeStampRef"
+      class="table-column lg:w-1/5"
+      :data-label="t('shortcodes.created_on')"
+    >
+      <span v-tippy="{ theme: 'tooltip' }" :title="timeStamp">
+        {{ dateStamp }}
+      </span>
+    </div>
+    <div
+      class="flex items-center justify-center lg:w-1/5 px-3"
+      :data-label="t('shortcodes.actions')"
+    >
+      <SmartAnchor
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('action.open_workspace')"
+        :to="`https://hopp.sh/r/${shortcode.id}`"
+        blank
+        svg="external-link"
+        color="blue"
+        class="px-3"
+      />
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('action.copy')"
+        color="green"
+        :svg="copyIconRefs"
+        class="px-3"
+        @click.native="copyShortcode(shortcode.id)"
+      />
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('action.delete')"
+        svg="trash"
+        color="red"
+        class="px-3"
+        @click.native="deleteShortcode(shortcode.id)"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "@nuxtjs/composition-api"
+import { pipe } from "fp-ts/function"
+import * as RR from "fp-ts/ReadonlyRecord"
+import * as O from "fp-ts/Option"
+import { translateToNewRequest } from "@hoppscotch/data"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { Shortcode } from "~/helpers/shortcodes/Shortcode"
+
+const t = useI18n()
+const toast = useToast()
+
+const props = defineProps<{
+  shortcode: Shortcode
+}>()
+
+const emit = defineEmits<{
+  (e: "delete-shortcode", codeID: string): void
+}>()
+
+const deleteShortcode = (codeID: string) => {
+  emit("delete-shortcode", codeID)
+}
+
+const requestMethodLabels = {
+  get: "text-green-500",
+  post: "text-yellow-500",
+  put: "text-blue-500",
+  delete: "text-red-500",
+  default: "text-gray-500",
+} as const
+
+const timeStampRef = ref()
+const copyIconRefs = ref<"copy" | "check">("copy")
+
+const parseShortcodeRequest = computed(() =>
+  pipe(props.shortcode.request, JSON.parse, translateToNewRequest)
+)
+
+const requestLabelColor = computed(() =>
+  pipe(
+    requestMethodLabels,
+    RR.lookup(parseShortcodeRequest.value.method.toLowerCase()),
+    O.getOrElseW(() => requestMethodLabels.default)
+  )
+)
+
+const dateStamp = computed(() =>
+  new Date(props.shortcode.createdOn).toLocaleDateString()
+)
+const timeStamp = computed(() =>
+  new Date(props.shortcode.createdOn).toLocaleTimeString()
+)
+
+const copyShortcode = (codeID: string) => {
+  copyToClipboard(`https://hopp.sh/r/${codeID}`)
+  toast.success(`${t("state.copied_to_clipboard")}`)
+  copyIconRefs.value = "check"
+  setTimeout(() => (copyIconRefs.value = "copy"), 1000)
+}
+</script>
+
+<style lang="scss">
+.table-column {
+  @apply flex items-center justify-between px-3 py-3;
+}
+
+.table-row-groups {
+  .table-column {
+    @apply before:text-secondary before:font-bold before:content-[attr(data-label)] lg:before:hidden;
+  }
+}
+</style>
diff --git a/packages/hoppscotch-app/helpers/backend/gql/mutations/DeleteShortcode.graphql b/packages/hoppscotch-app/helpers/backend/gql/mutations/DeleteShortcode.graphql
new file mode 100644
index 000000000..38935eb18
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/gql/mutations/DeleteShortcode.graphql
@@ -0,0 +1,3 @@
+mutation DeleteShortcode($code: ID!) {
+  revokeShortcode(code: $code)
+}
\ No newline at end of file
diff --git a/packages/hoppscotch-app/helpers/backend/gql/queries/GetMyShortcodes.graphql b/packages/hoppscotch-app/helpers/backend/gql/queries/GetMyShortcodes.graphql
new file mode 100644
index 000000000..da986ca69
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/gql/queries/GetMyShortcodes.graphql
@@ -0,0 +1,7 @@
+query GetUserShortcodes($cursor: ID) {
+  myShortcodes(cursor: $cursor) {
+    id
+    request
+    createdOn
+  }
+}
diff --git a/packages/hoppscotch-app/helpers/backend/gql/subscriptions/ShortcodeCreated.graphql b/packages/hoppscotch-app/helpers/backend/gql/subscriptions/ShortcodeCreated.graphql
new file mode 100644
index 000000000..557b90fa2
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/gql/subscriptions/ShortcodeCreated.graphql
@@ -0,0 +1,7 @@
+subscription ShortcodeCreated {
+  myShortcodesCreated {
+    id
+    request
+    createdOn
+  }
+}
diff --git a/packages/hoppscotch-app/helpers/backend/gql/subscriptions/ShortcodeDeleted.graphql b/packages/hoppscotch-app/helpers/backend/gql/subscriptions/ShortcodeDeleted.graphql
new file mode 100644
index 000000000..6c6506447
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/gql/subscriptions/ShortcodeDeleted.graphql
@@ -0,0 +1,5 @@
+subscription ShortcodeDeleted {
+  myShortcodesRevoked {
+    id
+  }
+}
diff --git a/packages/hoppscotch-app/helpers/backend/helpers.ts b/packages/hoppscotch-app/helpers/backend/helpers.ts
index 9982374f9..3b1eac7bc 100644
--- a/packages/hoppscotch-app/helpers/backend/helpers.ts
+++ b/packages/hoppscotch-app/helpers/backend/helpers.ts
@@ -17,7 +17,7 @@ import {
   GetCollectionTitleDocument,
 } from "./graphql"
 
-const BACKEND_PAGE_SIZE = 10
+export const BACKEND_PAGE_SIZE = 10
 
 const getCollectionChildrenIDs = async (collID: string) => {
   const collsList: string[] = []
diff --git a/packages/hoppscotch-app/helpers/backend/mutations/Shortcode.ts b/packages/hoppscotch-app/helpers/backend/mutations/Shortcode.ts
index 5ae84bc7c..e02759ab9 100644
--- a/packages/hoppscotch-app/helpers/backend/mutations/Shortcode.ts
+++ b/packages/hoppscotch-app/helpers/backend/mutations/Shortcode.ts
@@ -4,8 +4,13 @@ import {
   CreateShortcodeDocument,
   CreateShortcodeMutation,
   CreateShortcodeMutationVariables,
+  DeleteShortcodeDocument,
+  DeleteShortcodeMutation,
+  DeleteShortcodeMutationVariables,
 } from "../graphql"
 
+type DeleteShortcodeErrors = "shortcode/not_found"
+
 export const createShortcode = (request: HoppRESTRequest) =>
   runMutation<CreateShortcodeMutation, CreateShortcodeMutationVariables, "">(
     CreateShortcodeDocument,
@@ -13,3 +18,12 @@ export const createShortcode = (request: HoppRESTRequest) =>
       request: JSON.stringify(request),
     }
   )
+
+export const deleteShortcode = (code: string) =>
+  runMutation<
+    DeleteShortcodeMutation,
+    DeleteShortcodeMutationVariables,
+    DeleteShortcodeErrors
+  >(DeleteShortcodeDocument, {
+    code,
+  })
diff --git a/packages/hoppscotch-app/helpers/shortcodes/Shortcode.ts b/packages/hoppscotch-app/helpers/shortcodes/Shortcode.ts
new file mode 100644
index 000000000..34039a719
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/shortcodes/Shortcode.ts
@@ -0,0 +1,8 @@
+/**
+ * Defines how a Shortcode is represented in the ShortcodeListAdapter
+ */
+export interface Shortcode {
+  id: string
+  request: string
+  createdOn: Date
+}
diff --git a/packages/hoppscotch-app/helpers/shortcodes/ShortcodeListAdapter.ts b/packages/hoppscotch-app/helpers/shortcodes/ShortcodeListAdapter.ts
new file mode 100644
index 000000000..fbd15e30d
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/shortcodes/ShortcodeListAdapter.ts
@@ -0,0 +1,149 @@
+import * as E from "fp-ts/Either"
+import { BehaviorSubject, Subscription } from "rxjs"
+import { GQLError, runGQLQuery, runGQLSubscription } from "../backend/GQLClient"
+import {
+  GetUserShortcodesQuery,
+  GetUserShortcodesDocument,
+  ShortcodeCreatedDocument,
+  ShortcodeDeletedDocument,
+} from "../backend/graphql"
+import { BACKEND_PAGE_SIZE } from "../backend/helpers"
+import { Shortcode } from "./Shortcode"
+
+export default class ShortcodeListAdapter {
+  error$: BehaviorSubject<GQLError<string> | null>
+  loading$: BehaviorSubject<boolean>
+  shortcodes$: BehaviorSubject<GetUserShortcodesQuery["myShortcodes"]>
+  hasMoreShortcodes$: BehaviorSubject<boolean>
+
+  private timeoutHandle: ReturnType<typeof setTimeout> | null
+  private isDispose: boolean
+
+  private myShortcodesCreated: Subscription | null
+  private myShortcodesRevoked: Subscription | null
+
+  constructor(deferInit: boolean = false) {
+    this.error$ = new BehaviorSubject<GQLError<string> | null>(null)
+    this.loading$ = new BehaviorSubject<boolean>(false)
+    this.shortcodes$ = new BehaviorSubject<
+      GetUserShortcodesQuery["myShortcodes"]
+    >([])
+    this.hasMoreShortcodes$ = new BehaviorSubject<boolean>(true)
+    this.timeoutHandle = null
+    this.isDispose = false
+    this.myShortcodesCreated = null
+    this.myShortcodesRevoked = null
+
+    if (!deferInit) this.initialize()
+  }
+
+  unsubscribeSubscriptions() {
+    this.myShortcodesCreated?.unsubscribe()
+    this.myShortcodesRevoked?.unsubscribe()
+  }
+
+  initialize() {
+    if (this.timeoutHandle) throw new Error(`Adapter already initialized`)
+    if (this.isDispose) throw new Error(`Adapter has been disposed`)
+
+    this.fetchList()
+    this.registerSubscriptions()
+  }
+
+  public dispose() {
+    if (!this.timeoutHandle) throw new Error(`Adapter has not been initialized`)
+    if (!this.isDispose) throw new Error(`Adapter has been disposed`)
+
+    this.isDispose = true
+    clearTimeout(this.timeoutHandle)
+    this.timeoutHandle = null
+    this.unsubscribeSubscriptions()
+  }
+
+  fetchList() {
+    this.loadMore(true)
+  }
+
+  async loadMore(forcedAttempt = false) {
+    if (!this.hasMoreShortcodes$.value && !forcedAttempt) return
+
+    this.loading$.next(true)
+
+    const lastCodeID =
+      this.shortcodes$.value.length > 0
+        ? this.shortcodes$.value[this.shortcodes$.value.length - 1].id
+        : undefined
+
+    const result = await runGQLQuery({
+      query: GetUserShortcodesDocument,
+      variables: {
+        cursor: lastCodeID,
+      },
+    })
+    if (E.isLeft(result)) {
+      this.error$.next(result.left)
+      console.error(result.left)
+      this.loading$.next(false)
+
+      throw new Error(`Failed fetching short codes list: ${result.left}`)
+    }
+
+    const fetchedResult = result.right.myShortcodes
+
+    this.pushNewShortcodes(fetchedResult)
+
+    if (fetchedResult.length !== BACKEND_PAGE_SIZE) {
+      this.hasMoreShortcodes$.next(false)
+    }
+
+    this.loading$.next(false)
+  }
+
+  private pushNewShortcodes(results: Shortcode[]) {
+    const userShortcodes = this.shortcodes$.value
+
+    userShortcodes.push(...results)
+
+    this.shortcodes$.next(userShortcodes)
+  }
+
+  private createShortcode(shortcode: Shortcode) {
+    const userShortcodes = this.shortcodes$.value
+
+    userShortcodes.unshift(shortcode)
+
+    this.shortcodes$.next(userShortcodes)
+  }
+
+  private deleteShortcode(codeId: string) {
+    const newShortcodes = this.shortcodes$.value.filter(
+      ({ id }) => id !== codeId
+    )
+
+    this.shortcodes$.next(newShortcodes)
+  }
+
+  private registerSubscriptions() {
+    this.myShortcodesCreated = runGQLSubscription({
+      query: ShortcodeCreatedDocument,
+    }).subscribe((result) => {
+      if (E.isLeft(result)) {
+        console.error(result.left)
+        throw new Error(`Shortcode Create Error ${result.left}`)
+      }
+
+      this.createShortcode(result.right.myShortcodesCreated)
+    })
+
+    this.myShortcodesRevoked = runGQLSubscription({
+      query: ShortcodeDeletedDocument,
+    }).subscribe((result) => {
+      if (E.isLeft(result)) {
+        console.error(result.left)
+        throw new Error(`Shortcode Delete Error ${result.left}`)
+      }
+
+      this.deleteShortcode(result.right.myShortcodesRevoked.id)
+    })
+  }
+}
diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index 77b0759c1..458ac5f19 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -21,6 +21,7 @@
     "more": "More",
     "new": "New",
     "no": "No",
+    "open_workspace": "Open workspace",
     "paste": "Paste",
     "prettify": "Prettify",
     "remove": "Remove",
@@ -167,6 +168,7 @@
     "profile": "Login in to view your profile",
     "protocols": "Protocols are empty",
     "schema": "Connect to a GraphQL endpoint to view schema",
+    "shortcodes": "Shortcodes are empty",
     "team_name": "Team name empty",
     "teams": "You don't belong to any teams",
     "tests": "There are no tests for this request"
@@ -367,7 +369,8 @@
     "title": "Request",
     "type": "Request type",
     "url": "URL",
-    "variables": "Variables"
+    "variables": "Variables",
+    "view_my_links": "View my links"
   },
   "response": {
     "body": "Response Body",
@@ -422,6 +425,8 @@
     "proxy_use_toggle": "Use the proxy middleware to send requests",
     "read_the": "Read the",
     "reset_default": "Reset to default",
+    "short_codes": "Short codes",
+    "short_codes_description": "Short codes which were created by you.",
     "sidebar_on_left": "Sidebar on left",
     "sync": "Synchronise",
     "sync_collections": "Collections",
@@ -483,6 +488,15 @@
       "title": "Theme"
     }
   },
+  "shortcodes":{
+    "actions":"Actions",
+    "created_on": "Created on",
+    "deleted" : "Shortcode deleted",
+    "method": "Method",
+    "not_found":"Shortcode not found",
+    "short_code":"Short code",
+    "url": "URL"
+  },
   "show": {
     "code": "Show code",
     "collection": "Expand Collection Panel",
diff --git a/packages/hoppscotch-app/pages/profile.vue b/packages/hoppscotch-app/pages/profile.vue
index 9d5f64f85..c0a782c72 100644
--- a/packages/hoppscotch-app/pages/profile.vue
+++ b/packages/hoppscotch-app/pages/profile.vue
@@ -3,7 +3,13 @@
     <div class="container">
       <div class="p-4">
         <div
-          v-if="currentUser === null"
+          v-if="loadingCurrentUser"
+          class="flex flex-col items-center justify-center flex-1 p-4"
+        >
+          <SmartSpinner class="mb-4" />
+        </div>
+        <div
+          v-else-if="currentUser === null"
           class="flex flex-col items-center justify-center"
         >
           <img
@@ -79,102 +85,195 @@
           </div>
           <SmartTabs v-model="selectedProfileTab">
             <SmartTab :id="'sync'" :label="t('settings.account')">
-              <section class="p-4">
-                <h4 class="font-semibold text-secondaryDark">
-                  {{ t("settings.profile") }}
-                </h4>
-                <div class="my-1 text-secondaryLight">
-                  {{ t("settings.profile_description") }}
-                </div>
-                <div class="py-4">
-                  <label for="displayName">
-                    {{ t("settings.profile_name") }}
-                  </label>
-                  <form
-                    class="flex mt-2 md:max-w-sm"
-                    @submit.prevent="updateDisplayName"
-                  >
-                    <input
-                      id="displayName"
-                      v-model="displayName"
-                      class="input"
-                      :placeholder="`${t('settings.profile_name')}`"
-                      type="text"
-                      autocomplete="off"
-                      required
-                    />
-                    <ButtonSecondary
-                      filled
-                      outline
-                      :label="t('action.save')"
-                      class="ml-2 min-w-16"
-                      type="submit"
-                      :loading="updatingDisplayName"
-                    />
-                  </form>
-                </div>
-                <div class="py-4">
-                  <label for="emailAddress">
-                    {{ t("settings.profile_email") }}
-                  </label>
-                  <form
-                    class="flex mt-2 md:max-w-sm"
-                    @submit.prevent="updateEmailAddress"
-                  >
-                    <input
-                      id="emailAddress"
-                      v-model="emailAddress"
-                      class="input"
-                      :placeholder="`${t('settings.profile_name')}`"
-                      type="email"
-                      autocomplete="off"
-                      required
-                    />
-                    <ButtonSecondary
-                      filled
-                      outline
-                      :label="t('action.save')"
-                      class="ml-2 min-w-16"
-                      type="submit"
-                      :loading="updatingEmailAddress"
-                    />
-                  </form>
-                </div>
-              </section>
-              <section class="p-4">
-                <h4 class="font-semibold text-secondaryDark">
-                  {{ t("settings.sync") }}
-                </h4>
-                <div class="my-1 text-secondaryLight">
-                  {{ t("settings.sync_description") }}
-                </div>
-                <div class="py-4 space-y-4">
-                  <div class="flex items-center">
-                    <SmartToggle
-                      :on="SYNC_COLLECTIONS"
-                      @change="toggleSetting('syncCollections')"
-                    >
-                      {{ t("settings.sync_collections") }}
-                    </SmartToggle>
+              <div class="grid grid-cols-1">
+                <section class="p-4">
+                  <h4 class="font-semibold text-secondaryDark">
+                    {{ t("settings.profile") }}
+                  </h4>
+                  <div class="my-1 text-secondaryLight">
+                    {{ t("settings.profile_description") }}
                   </div>
-                  <div class="flex items-center">
-                    <SmartToggle
-                      :on="SYNC_ENVIRONMENTS"
-                      @change="toggleSetting('syncEnvironments')"
+                  <div class="py-4">
+                    <label for="displayName">
+                      {{ t("settings.profile_name") }}
+                    </label>
+                    <form
+                      class="flex mt-2 md:max-w-sm"
+                      @submit.prevent="updateDisplayName"
                     >
-                      {{ t("settings.sync_environments") }}
-                    </SmartToggle>
+                      <input
+                        id="displayName"
+                        v-model="displayName"
+                        class="input"
+                        :placeholder="`${t('settings.profile_name')}`"
+                        type="text"
+                        autocomplete="off"
+                        required
+                      />
+                      <ButtonSecondary
+                        filled
+                        outline
+                        :label="t('action.save')"
+                        class="ml-2 min-w-16"
+                        type="submit"
+                        :loading="updatingDisplayName"
+                      />
+                    </form>
                   </div>
-                  <div class="flex items-center">
-                    <SmartToggle
-                      :on="SYNC_HISTORY"
-                      @change="toggleSetting('syncHistory')"
+                  <div class="py-4">
+                    <label for="emailAddress">
+                      {{ t("settings.profile_email") }}
+                    </label>
+                    <form
+                      class="flex mt-2 md:max-w-sm"
+                      @submit.prevent="updateEmailAddress"
                     >
-                      {{ t("settings.sync_history") }}
-                    </SmartToggle>
+                      <input
+                        id="emailAddress"
+                        v-model="emailAddress"
+                        class="input"
+                        :placeholder="`${t('settings.profile_name')}`"
+                        type="email"
+                        autocomplete="off"
+                        required
+                      />
+                      <ButtonSecondary
+                        filled
+                        outline
+                        :label="t('action.save')"
+                        class="ml-2 min-w-16"
+                        type="submit"
+                        :loading="updatingEmailAddress"
+                      />
+                    </form>
                   </div>
-                </div>
-              </section>
+                </section>
+                <section class="p-4">
+                  <h4 class="font-semibold text-secondaryDark">
+                    {{ t("settings.sync") }}
+                  </h4>
+                  <div class="my-1 text-secondaryLight">
+                    {{ t("settings.sync_description") }}
+                  </div>
+                  <div class="py-4 space-y-4">
+                    <div class="flex items-center">
+                      <SmartToggle
+                        :on="SYNC_COLLECTIONS"
+                        @change="toggleSetting('syncCollections')"
+                      >
+                        {{ t("settings.sync_collections") }}
+                      </SmartToggle>
+                    </div>
+                    <div class="flex items-center">
+                      <SmartToggle
+                        :on="SYNC_ENVIRONMENTS"
+                        @change="toggleSetting('syncEnvironments')"
+                      >
+                        {{ t("settings.sync_environments") }}
+                      </SmartToggle>
+                    </div>
+                    <div class="flex items-center">
+                      <SmartToggle
+                        :on="SYNC_HISTORY"
+                        @change="toggleSetting('syncHistory')"
+                      >
+                        {{ t("settings.sync_history") }}
+                      </SmartToggle>
+                    </div>
+                  </div>
+                </section>
+                <section class="p-4">
+                  <h4 class="font-semibold text-secondaryDark">
+                    {{ t("settings.short_codes") }}
+                  </h4>
+                  <div class="my-1 text-secondaryLight">
+                    {{ t("settings.short_codes_description") }}
+                  </div>
+                  <div class="relative py-4 overflow-x-auto hide-scrollbar">
+                    <div
+                      v-if="loading"
+                      class="flex flex-col items-center justify-center"
+                    >
+                      <SmartSpinner class="mb-4" />
+                      <span class="text-secondaryLight">{{
+                        t("state.loading")
+                      }}</span>
+                    </div>
+                    <div
+                      v-if="!loading && myShortcodes.length === 0"
+                      class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+                    >
+                      <img
+                        :src="`/images/states/${$colorMode.value}/add_files.svg`"
+                        loading="lazy"
+                        class="inline-flex flex-col object-contain object-center w-16 h-16 mb-8"
+                        :alt="`${t('empty.shortcodes')}`"
+                      />
+                      <span class="mb-4 text-center">
+                        {{ t("empty.shortcodes") }}
+                      </span>
+                    </div>
+                    <div
+                      v-else-if="!loading"
+                      class="table w-full border-collapse table-auto"
+                    >
+                      <div
+                        class="bg-primaryLight hidden lg:flex rounded-t w-full"
+                      >
+                        <div class="flex w-full">
+                          <div class="w-1/5 p-3 font-semibold">
+                            {{ t("shortcodes.short_code") }}
+                          </div>
+                          <div class="w-1/5 p-3 font-semibold">
+                            {{ t("shortcodes.method") }}
+                          </div>
+                          <div class="w-3/5 p-3 font-semibold">
+                            {{ t("shortcodes.url") }}
+                          </div>
+                          <div class="w-1/5 p-3 font-semibold">
+                            {{ t("shortcodes.created_on") }}
+                          </div>
+                          <div class="w-1/5 p-3 font-semibold text-center">
+                            {{ t("shortcodes.actions") }}
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        class="w-full max-h-sm flex flex-col items-center justify-between overflow-y-scroll rounded lg:rounded-t-none border lg:divide-y border-dividerLight divide-dividerLight"
+                      >
+                        <div
+                          class="flex flex-col h-auto h-full border-r border-dividerLight w-full"
+                        >
+                          <ProfileShortcode
+                            v-for="(shortcode, shortcodeIndex) in myShortcodes"
+                            :key="`shortcode-${shortcodeIndex}`"
+                            :shortcode="shortcode"
+                            @delete-shortcode="deleteShortcode"
+                          />
+                          <SmartIntersection
+                            v-if="hasMoreShortcodes && myShortcodes.length > 0"
+                            @intersecting="loadMoreShortcodes()"
+                          >
+                            <div
+                              v-if="adapterLoading"
+                              class="flex flex-col items-center py-3"
+                            >
+                              <SmartSpinner />
+                            </div>
+                          </SmartIntersection>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      v-if="!loading && adapterError"
+                      class="flex flex-col items-center py-4"
+                    >
+                      <i class="mb-4 material-icons">help_outline</i>
+                      {{ getErrorMessage(adapterError) }}
+                    </div>
+                  </div>
+                </section>
+              </div>
             </SmartTab>
             <SmartTab :id="'teams'" :label="t('team.title')">
               <Teams :modal="false" />
@@ -193,12 +292,18 @@ import {
   useMeta,
   defineComponent,
   watchEffect,
+  computed,
 } from "@nuxtjs/composition-api"
+import { pipe } from "fp-ts/function"
+import * as TE from "fp-ts/TaskEither"
+import { GQLError } from "~/helpers/backend/GQLClient"
 import {
   currentUser$,
+  probableUser$,
   setDisplayName,
   setEmailAddress,
   verifyEmailAddress,
+  onLoggedIn,
 } from "~/helpers/fb/auth"
 import {
   useReadonlyStream,
@@ -206,6 +311,8 @@ import {
   useToast,
 } from "~/helpers/utils/composables"
 import { toggleSetting, useSetting } from "~/newstore/settings"
+import ShortcodeListAdapter from "~/helpers/shortcodes/ShortcodeListAdapter"
+import { deleteShortcode as backendDeleteShortcode } from "~/helpers/backend/mutations/Shortcode"
 
 type ProfileTabs = "sync" | "teams"
 
@@ -220,6 +327,13 @@ const SYNC_COLLECTIONS = useSetting("syncCollections")
 const SYNC_ENVIRONMENTS = useSetting("syncEnvironments")
 const SYNC_HISTORY = useSetting("syncHistory")
 const currentUser = useReadonlyStream(currentUser$, null)
+const probableUser = useReadonlyStream(probableUser$, null)
+
+const loadingCurrentUser = computed(() => {
+  if (!probableUser.value) return false
+  else if (!currentUser.value) return true
+  else return false
+})
 
 const displayName = ref(currentUser.value?.displayName)
 const updatingDisplayName = ref(false)
@@ -273,6 +387,51 @@ const sendEmailVerification = () => {
     })
 }
 
+const adapter = new ShortcodeListAdapter(true)
+const adapterLoading = useReadonlyStream(adapter.loading$, false)
+const adapterError = useReadonlyStream(adapter.error$, null)
+const myShortcodes = useReadonlyStream(adapter.shortcodes$, [])
+const hasMoreShortcodes = useReadonlyStream(adapter.hasMoreShortcodes$, true)
+
+const loading = computed(
+  () => adapterLoading.value && myShortcodes.value.length === 0
+)
+
+onLoggedIn(() => {
+  adapter.initialize()
+})
+
+const deleteShortcode = (codeID: string) => {
+  pipe(
+    backendDeleteShortcode(codeID),
+    TE.match(
+      (err: GQLError<string>) => {
+        toast.error(`${getErrorMessage(err)}`)
+      },
+      () => {
+        toast.success(`${t("shortcodes.deleted")}`)
+      }
+    )
+  )()
+}
+
+const loadMoreShortcodes = () => {
+  adapter.loadMore()
+}
+
+const getErrorMessage = (err: GQLError<string>) => {
+  if (err.type === "network_error") {
+    return t("error.network_error")
+  } else {
+    switch (err.error) {
+      case "shortcode/not_found":
+        return t("shortcodes.not_found")
+      default:
+        return t("error.something_went_wrong")
+    }
+  }
+}
+
 useMeta({
   title: `${t("navigation.profile")} • Hoppscotch`,
 })

From 346ac8bde91e29cf7be8968ef157525cfae59377 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 24 May 2022 18:48:45 +0530
Subject: [PATCH 11/50] chore: improve ui consistency on table layout

---
 .../components/profile/Shortcode.vue           | 18 ++++++++++--------
 packages/hoppscotch-app/pages/profile.vue      | 16 ++++++++++------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/hoppscotch-app/components/profile/Shortcode.vue b/packages/hoppscotch-app/components/profile/Shortcode.vue
index 7a48937f5..045789d43 100644
--- a/packages/hoppscotch-app/components/profile/Shortcode.vue
+++ b/packages/hoppscotch-app/components/profile/Shortcode.vue
@@ -2,24 +2,27 @@
   <div
     class="table-row-groups lg:flex block my-6 lg:my-0 w-full border lg:border-0 divide-y lg:divide-y-0 lg:divide-x divide-dividerLight border-dividerLight"
   >
-    <div class="table-column lg:w-1/5" :data-label="t('shortcodes.short_code')">
+    <div
+      class="table-column font-mono text-tiny"
+      :data-label="t('shortcodes.short_code')"
+    >
       {{ shortcode.id }}
     </div>
     <div
-      class="table-column lg:w-1/5"
+      class="table-column"
       :class="requestLabelColor"
       :data-label="t('shortcodes.method')"
     >
       {{ parseShortcodeRequest.method }}
     </div>
-    <div class="table-column lg:w-3/5" :data-label="t('shortcodes.url')">
+    <div class="table-column" :data-label="t('shortcodes.url')">
       <div class="max-w-50 lg:max-w-90 truncate">
         {{ parseShortcodeRequest.endpoint }}
       </div>
     </div>
     <div
       ref="timeStampRef"
-      class="table-column lg:w-1/5"
+      class="table-column"
       :data-label="t('shortcodes.created_on')"
     >
       <span v-tippy="{ theme: 'tooltip' }" :title="timeStamp">
@@ -27,7 +30,7 @@
       </span>
     </div>
     <div
-      class="flex items-center justify-center lg:w-1/5 px-3"
+      class="flex flex-1 items-center justify-center px-3"
       :data-label="t('shortcodes.actions')"
     >
       <SmartAnchor
@@ -36,8 +39,7 @@
         :to="`https://hopp.sh/r/${shortcode.id}`"
         blank
         svg="external-link"
-        color="blue"
-        class="px-3"
+        class="px-3 text-accent hover:text-accent"
       />
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
@@ -124,7 +126,7 @@ const copyShortcode = (codeID: string) => {
 
 <style lang="scss">
 .table-column {
-  @apply flex items-center justify-between px-3 py-3;
+  @apply flex flex-1 items-center justify-between px-3 py-3;
 }
 
 .table-row-groups {
diff --git a/packages/hoppscotch-app/pages/profile.vue b/packages/hoppscotch-app/pages/profile.vue
index c0a782c72..e89ce9fdc 100644
--- a/packages/hoppscotch-app/pages/profile.vue
+++ b/packages/hoppscotch-app/pages/profile.vue
@@ -220,20 +220,24 @@
                       <div
                         class="bg-primaryLight hidden lg:flex rounded-t w-full"
                       >
-                        <div class="flex w-full">
-                          <div class="w-1/5 p-3 font-semibold">
+                        <div
+                          class="flex w-full overflow-y-scroll lg:divide-x divide-primaryLight"
+                        >
+                          <div class="flex flex-1 p-3 font-semibold">
                             {{ t("shortcodes.short_code") }}
                           </div>
-                          <div class="w-1/5 p-3 font-semibold">
+                          <div class="flex flex-1 p-3 font-semibold">
                             {{ t("shortcodes.method") }}
                           </div>
-                          <div class="w-3/5 p-3 font-semibold">
+                          <div class="flex flex-1 p-3 font-semibold">
                             {{ t("shortcodes.url") }}
                           </div>
-                          <div class="w-1/5 p-3 font-semibold">
+                          <div class="flex flex-1 p-3 font-semibold">
                             {{ t("shortcodes.created_on") }}
                           </div>
-                          <div class="w-1/5 p-3 font-semibold text-center">
+                          <div
+                            class="flex flex-1 p-3 font-semibold justify-center"
+                          >
                             {{ t("shortcodes.actions") }}
                           </div>
                         </div>

From b1a2c9e9d58e9a5b60fe1860b8b8cf54fd02298d Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 25 May 2022 17:42:48 +0530
Subject: [PATCH 12/50] fix: text overflow in table layout

---
 packages/hoppscotch-app/components/profile/Shortcode.vue | 6 ++----
 packages/hoppscotch-app/pages/profile.vue                | 5 +----
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/hoppscotch-app/components/profile/Shortcode.vue b/packages/hoppscotch-app/components/profile/Shortcode.vue
index 045789d43..ec2a90804 100644
--- a/packages/hoppscotch-app/components/profile/Shortcode.vue
+++ b/packages/hoppscotch-app/components/profile/Shortcode.vue
@@ -16,9 +16,7 @@
       {{ parseShortcodeRequest.method }}
     </div>
     <div class="table-column" :data-label="t('shortcodes.url')">
-      <div class="max-w-50 lg:max-w-90 truncate">
-        {{ parseShortcodeRequest.endpoint }}
-      </div>
+      {{ parseShortcodeRequest.endpoint }}
     </div>
     <div
       ref="timeStampRef"
@@ -126,7 +124,7 @@ const copyShortcode = (codeID: string) => {
 
 <style lang="scss">
 .table-column {
-  @apply flex flex-1 items-center justify-between px-3 py-3;
+  @apply flex flex-1 items-center px-3 py-3 truncate;
 }
 
 .table-row-groups {
diff --git a/packages/hoppscotch-app/pages/profile.vue b/packages/hoppscotch-app/pages/profile.vue
index e89ce9fdc..77276936d 100644
--- a/packages/hoppscotch-app/pages/profile.vue
+++ b/packages/hoppscotch-app/pages/profile.vue
@@ -213,10 +213,7 @@
                         {{ t("empty.shortcodes") }}
                       </span>
                     </div>
-                    <div
-                      v-else-if="!loading"
-                      class="table w-full border-collapse table-auto"
-                    >
+                    <div v-else-if="!loading">
                       <div
                         class="bg-primaryLight hidden lg:flex rounded-t w-full"
                       >

From 83bdd03f43b6441e682f3724b174cf356a5c3119 Mon Sep 17 00:00:00 2001
From: kyteinsky <kyteinsky@gmail.com>
Date: Fri, 27 May 2022 14:48:33 +0530
Subject: [PATCH 13/50] fix: curl parser url sanitisation (#2366)

---
 .../helpers/curl/__tests__/curlparser.spec.js | 45 ++++++++++-
 .../hoppscotch-app/helpers/curl/curlparser.ts |  4 +-
 .../helpers/curl/sub_helpers/contentParser.ts | 14 ++--
 .../helpers/curl/sub_helpers/preproc.ts       |  5 +-
 .../helpers/curl/sub_helpers/url.ts           | 74 +++++++++++++------
 .../helpers/functional/debug.ts               |  2 +-
 6 files changed, 110 insertions(+), 34 deletions(-)

diff --git a/packages/hoppscotch-app/helpers/curl/__tests__/curlparser.spec.js b/packages/hoppscotch-app/helpers/curl/__tests__/curlparser.spec.js
index 2a9fd18dd..0d649a2cf 100644
--- a/packages/hoppscotch-app/helpers/curl/__tests__/curlparser.spec.js
+++ b/packages/hoppscotch-app/helpers/curl/__tests__/curlparser.spec.js
@@ -768,11 +768,52 @@ const samples = [
       testScript: "",
     }),
   },
+  {
+    command: `curl \`
+  google.com -H "content-type: application/json"`,
+    response: makeRESTRequest({
+      method: "GET",
+      name: "Untitled request",
+      endpoint: "https://google.com/",
+      auth: {
+        authType: "none",
+        authActive: true,
+      },
+      body: {
+        contentType: null,
+        body: null,
+      },
+      params: [],
+      headers: [],
+      preRequestScript: "",
+      testScript: "",
+    }),
+  },
+  {
+    command: `curl 192.168.0.24:8080/ping`,
+    response: makeRESTRequest({
+      method: "GET",
+      name: "Untitled request",
+      endpoint: "http://192.168.0.24:8080/ping",
+      auth: {
+        authType: "none",
+        authActive: true,
+      },
+      body: {
+        contentType: null,
+        body: null,
+      },
+      params: [],
+      headers: [],
+      preRequestScript: "",
+      testScript: "",
+    }),
+  },
 ]
 
-describe("parseCurlToHoppRESTReq", () => {
+describe("Parse curl command to Hopp REST Request", () => {
   for (const [i, { command, response }] of samples.entries()) {
-    test(`matches expectation for sample #${i + 1}`, () => {
+    test(`for sample #${i + 1}:\n\n${command}`, () => {
       expect(parseCurlToHoppRESTReq(command)).toEqual(response)
     })
   }
diff --git a/packages/hoppscotch-app/helpers/curl/curlparser.ts b/packages/hoppscotch-app/helpers/curl/curlparser.ts
index 5b54a46fe..21b0b48b1 100644
--- a/packages/hoppscotch-app/helpers/curl/curlparser.ts
+++ b/packages/hoppscotch-app/helpers/curl/curlparser.ts
@@ -12,7 +12,7 @@ import { getHeaders, recordToHoppHeaders } from "./sub_helpers/headers"
 // import { getCookies } from "./sub_helpers/cookies"
 import { getQueries } from "./sub_helpers/queries"
 import { getMethod } from "./sub_helpers/method"
-import { concatParams, parseURL } from "./sub_helpers/url"
+import { concatParams, getURLObject } from "./sub_helpers/url"
 import { preProcessCurlCommand } from "./sub_helpers/preproc"
 import { getBody, getFArgumentMultipartData } from "./sub_helpers/body"
 import { getDefaultRESTRequest } from "~/newstore/RESTSession"
@@ -42,7 +42,7 @@ export const parseCurlCommand = (curlCommand: string) => {
 
   const method = getMethod(parsedArguments)
   // const cookies = getCookies(parsedArguments)
-  const urlObject = parseURL(parsedArguments)
+  const urlObject = getURLObject(parsedArguments)
   const auth = getAuthObject(parsedArguments, headers, urlObject)
 
   let rawData: string | string[] = pipe(
diff --git a/packages/hoppscotch-app/helpers/curl/sub_helpers/contentParser.ts b/packages/hoppscotch-app/helpers/curl/sub_helpers/contentParser.ts
index b8e7a8947..74cbc0c45 100644
--- a/packages/hoppscotch-app/helpers/curl/sub_helpers/contentParser.ts
+++ b/packages/hoppscotch-app/helpers/curl/sub_helpers/contentParser.ts
@@ -158,12 +158,14 @@ const getXMLBody = (rawData: string) =>
     O.alt(() => O.some(rawData))
   )
 
-const getFormattedJSON = flow(
-  safeParseJSON,
-  O.map((parsedJSON) => JSON.stringify(parsedJSON, null, 2)),
-  O.getOrElse(() => "{}"),
-  O.of
-)
+const getFormattedJSON = (jsonString: string) =>
+  pipe(
+    jsonString.replaceAll('\\"', '"'),
+    safeParseJSON,
+    O.map((parsedJSON) => JSON.stringify(parsedJSON, null, 2)),
+    O.getOrElse(() => "{ }"),
+    O.of
+  )
 
 const getXWWWFormUrlEncodedBody = flow(
   decodeURIComponent,
diff --git a/packages/hoppscotch-app/helpers/curl/sub_helpers/preproc.ts b/packages/hoppscotch-app/helpers/curl/sub_helpers/preproc.ts
index 456270a1b..e79d8a164 100644
--- a/packages/hoppscotch-app/helpers/curl/sub_helpers/preproc.ts
+++ b/packages/hoppscotch-app/helpers/curl/sub_helpers/preproc.ts
@@ -19,10 +19,11 @@ const replaceables: { [key: string]: string } = {
 const paperCuts = flow(
   // remove '\' and newlines
   S.replace(/ ?\\ ?$/gm, " "),
-  S.replace(/\n/g, ""),
+  S.replace(/\n/g, " "),
   // remove all $ symbols from start of argument values
   S.replace(/\$'/g, "'"),
-  S.replace(/\$"/g, '"')
+  S.replace(/\$"/g, '"'),
+  S.trim
 )
 
 // replace --zargs option with -Z
diff --git a/packages/hoppscotch-app/helpers/curl/sub_helpers/url.ts b/packages/hoppscotch-app/helpers/curl/sub_helpers/url.ts
index 2fdb1d9ce..ef352280f 100644
--- a/packages/hoppscotch-app/helpers/curl/sub_helpers/url.ts
+++ b/packages/hoppscotch-app/helpers/curl/sub_helpers/url.ts
@@ -1,48 +1,80 @@
 import parser from "yargs-parser"
 import { pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
+import * as A from "fp-ts/Array"
 import { getDefaultRESTRequest } from "~/newstore/RESTSession"
 import { stringArrayJoin } from "~/helpers/functional/array"
 
 const defaultRESTReq = getDefaultRESTRequest()
 
-const getProtocolForBaseURL = (baseURL: string) =>
+const getProtocolFromURL = (url: string) =>
   pipe(
     // get the base URL
-    /^([^\s:@]+:[^\s:@]+@)?([^:/\s]+)([:]*)/.exec(baseURL),
+    /^([^\s:@]+:[^\s:@]+@)?([^:/\s]+)([:]*)/.exec(url),
     O.fromNullable,
     O.filter((burl) => burl.length > 1),
     O.map((burl) => burl[2]),
     // set protocol to http for local URLs
     O.map((burl) =>
-      burl === "localhost" || burl === "127.0.0.1"
-        ? "http://" + baseURL
-        : "https://" + baseURL
+      burl === "localhost" ||
+      burl === "2130706433" ||
+      /127(\.0){0,2}\.1/.test(burl) ||
+      /0177(\.0){0,2}\.1/.test(burl) ||
+      /0x7f(\.0){0,2}\.1/.test(burl) ||
+      /192\.168(\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){2}/.test(burl) ||
+      /10(\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}/.test(burl)
+        ? "http://" + url
+        : "https://" + url
     )
   )
 
+/**
+ * Checks if the URL is valid using the URL constructor
+ * @param urlString URL string (with protocol)
+ * @returns boolean whether the URL is valid using the inbuilt URL class
+ */
+const isURLValid = (urlString: string) =>
+  pipe(
+    O.tryCatch(() => new URL(urlString)),
+    O.isSome
+  )
+
+/**
+ * Checks and returns URL object for the valid URL
+ * @param urlText Raw URL string provided by argument parser
+ * @returns Option of URL object
+ */
+const parseURL = (urlText: string | number) =>
+  pipe(
+    urlText,
+    O.fromNullable,
+    // preprocess url string
+    O.map((u) => u.toString().replaceAll(/[^a-zA-Z0-9_\-./?&=:@%+#,;\s]/g, "")),
+    O.filter((u) => u.length > 0),
+    O.chain((u) =>
+      pipe(
+        u,
+        // check if protocol is available
+        O.fromPredicate(
+          (url: string) => /^[^:\s]+(?=:\/\/)/.exec(url) !== null
+        ),
+        O.alt(() => getProtocolFromURL(u))
+      )
+    ),
+    O.filter(isURLValid),
+    O.map((u) => new URL(u))
+  )
+
 /**
  * Processes URL string and returns the URL object
  * @param parsedArguments Parsed Arguments object
  * @returns URL object
  */
-export function parseURL(parsedArguments: parser.Arguments) {
+export function getURLObject(parsedArguments: parser.Arguments) {
   return pipe(
-    // contains raw url string
-    parsedArguments._[1],
-    O.fromNullable,
-    // preprocess url string
-    O.map((u) => u.toString().replace(/["']/g, "").trim()),
-    O.chain((u) =>
-      pipe(
-        // check if protocol is available
-        /^[^:\s]+(?=:\/\/)/.exec(u),
-        O.fromNullable,
-        O.map((_) => u),
-        O.alt(() => getProtocolForBaseURL(u))
-      )
-    ),
-    O.map((u) => new URL(u)),
+    // contains raw url strings
+    parsedArguments._.slice(1),
+    A.findFirstMap(parseURL),
     // no url found
     O.getOrElse(() => new URL(defaultRESTReq.endpoint))
   )
diff --git a/packages/hoppscotch-app/helpers/functional/debug.ts b/packages/hoppscotch-app/helpers/functional/debug.ts
index fc4024c62..9f886e1e1 100644
--- a/packages/hoppscotch-app/helpers/functional/debug.ts
+++ b/packages/hoppscotch-app/helpers/functional/debug.ts
@@ -17,6 +17,6 @@ export const trace = <T>(x: T) => {
 export const namedTrace =
   (name: string) =>
   <T>(x: T) => {
-    console.log(`${name}: `, x)
+    console.log(`${name}:`, x)
     return x
   }

From f6950bac0fbe139df990d8710eac3b73991160d2 Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Sat, 28 May 2022 15:35:41 +0600
Subject: [PATCH 14/50] refactor: real-time system (#2228)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
Co-authored-by: liyasthomas <liyascthomas@gmail.com>
---
 packages/hoppscotch-app/assets/icons/send.svg |   4 +
 .../components/app/PaneLayout.vue             |   7 +-
 .../components/realtime/Communication.vue     | 221 +++++
 .../components/realtime/Log.vue               |   3 +-
 .../components/realtime/LogEntry.vue          |  38 +-
 .../components/realtime/Mqtt.vue              | 487 +++++------
 .../components/realtime/Socketio.vue          | 776 ++++++++----------
 .../components/realtime/Sse.vue               | 283 +++----
 .../components/realtime/Websocket.vue         | 687 +++++++---------
 .../helpers/editor/codemirror.ts              |  21 +-
 .../helpers/realtime/MQTTConnection.ts        | 223 +++++
 .../helpers/realtime/SIOClients.ts            |  84 ++
 .../helpers/realtime/SIOConnection.ts         | 163 ++++
 .../helpers/realtime/SSEConnection.ts         |  86 ++
 .../helpers/realtime/WSConnection.ts          | 102 +++
 .../helpers/types/HoppRealtimeLog.ts          |   3 +-
 packages/hoppscotch-app/locales/en.json       |  17 +-
 .../hoppscotch-app/newstore/MQTTSession.ts    |  48 +-
 .../hoppscotch-app/newstore/SSESession.ts     |  45 +-
 .../newstore/SocketIOSession.ts               |  45 +-
 .../newstore/WebSocketSession.ts              |  42 +-
 packages/hoppscotch-app/package.json          |   1 +
 .../hoppscotch-app/types/socket-io-2.d.ts     |  19 +-
 pnpm-lock.yaml                                | 552 ++++---------
 24 files changed, 2138 insertions(+), 1819 deletions(-)
 create mode 100644 packages/hoppscotch-app/assets/icons/send.svg
 create mode 100644 packages/hoppscotch-app/components/realtime/Communication.vue
 create mode 100644 packages/hoppscotch-app/helpers/realtime/MQTTConnection.ts
 create mode 100644 packages/hoppscotch-app/helpers/realtime/SIOClients.ts
 create mode 100644 packages/hoppscotch-app/helpers/realtime/SIOConnection.ts
 create mode 100644 packages/hoppscotch-app/helpers/realtime/SSEConnection.ts
 create mode 100644 packages/hoppscotch-app/helpers/realtime/WSConnection.ts

diff --git a/packages/hoppscotch-app/assets/icons/send.svg b/packages/hoppscotch-app/assets/icons/send.svg
new file mode 100644
index 000000000..b1de9a99e
--- /dev/null
+++ b/packages/hoppscotch-app/assets/icons/send.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="22" y1="2" x2="11" y2="13"></line>
+  <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+</svg>
\ No newline at end of file
diff --git a/packages/hoppscotch-app/components/app/PaneLayout.vue b/packages/hoppscotch-app/components/app/PaneLayout.vue
index 0fbb92388..e5b0f7079 100644
--- a/packages/hoppscotch-app/components/app/PaneLayout.vue
+++ b/packages/hoppscotch-app/components/app/PaneLayout.vue
@@ -28,7 +28,7 @@
       </Splitpanes>
     </Pane>
     <Pane
-      v-if="SIDEBAR"
+      v-if="SIDEBAR && hasSidebar"
       size="25"
       min-size="20"
       class="hide-scrollbar !overflow-auto flex flex-col"
@@ -42,6 +42,7 @@
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
+import { computed, useSlots } from "@nuxtjs/composition-api"
 import { useSetting } from "~/newstore/settings"
 
 const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
@@ -52,4 +53,8 @@ const mdAndLarger = breakpoints.greater("md")
 const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
 
 const SIDEBAR = useSetting("SIDEBAR")
+
+const slots = useSlots()
+
+const hasSidebar = computed(() => !!slots.sidebar)
 </script>
diff --git a/packages/hoppscotch-app/components/realtime/Communication.vue b/packages/hoppscotch-app/components/realtime/Communication.vue
new file mode 100644
index 000000000..b96a634f2
--- /dev/null
+++ b/packages/hoppscotch-app/components/realtime/Communication.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="flex flex-col flex-1">
+    <div v-if="showEventField" class="flex items-center justify-between p-4">
+      <input
+        id="event_name"
+        v-model="eventName"
+        class="input"
+        name="event_name"
+        :placeholder="`${t('socketio.event_name')}`"
+        type="text"
+        autocomplete="off"
+      />
+    </div>
+    <div
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
+    >
+      <span class="flex items-center">
+        <label class="font-semibold text-secondaryLight">
+          {{ $t("websocket.message") }}
+        </label>
+        <tippy
+          ref="contentTypeOptions"
+          interactive
+          trigger="click"
+          theme="popover"
+          arrow
+        >
+          <template #trigger>
+            <span class="select-wrapper">
+              <ButtonSecondary
+                :label="contentType || $t('state.none').toLowerCase()"
+                class="pr-8 ml-2 rounded-none"
+              />
+            </span>
+          </template>
+          <div class="flex flex-col" role="menu">
+            <SmartItem
+              v-for="(contentTypeItem, index) in validContentTypes"
+              :key="`contentTypeItem-${index}`"
+              :label="contentTypeItem"
+              :info-icon="contentTypeItem === contentType ? 'done' : ''"
+              :active-info-icon="contentTypeItem === contentType"
+              @click.native="
+                () => {
+                  contentType = contentTypeItem
+                  $refs.contentTypeOptions.tippy().hide()
+                }
+              "
+            />
+          </div>
+        </tippy>
+      </span>
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
+          :title="`${t('action.send')}`"
+          :label="`${t('action.send')}`"
+          :disabled="!communicationBody || !isConnected"
+          svg="send"
+          class="rounded-none !text-accent !hover:text-accentDark"
+          @click.native="sendMessage()"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://docs.hoppscotch.io/features/body"
+          blank
+          :title="t('app.wiki')"
+          svg="help-circle"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('state.linewrap')"
+          :class="{ '!text-accent': linewrapEnabled }"
+          svg="wrap-text"
+          @click.native.prevent="linewrapEnabled = !linewrapEnabled"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.clear')"
+          svg="trash-2"
+          @click.native="clearContent"
+        />
+        <ButtonSecondary
+          v-if="contentType && contentType == 'JSON'"
+          ref="prettifyRequest"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.prettify')"
+          :svg="prettifyIcon"
+          @click.native="prettifyRequestBody"
+        />
+        <label for="payload">
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('import.title')"
+            svg="file-plus"
+            @click.native="$refs.payload.click()"
+          />
+        </label>
+        <input
+          ref="payload"
+          class="input"
+          name="payload"
+          type="file"
+          @change="uploadPayload"
+        />
+      </div>
+    </div>
+    <div ref="wsCommunicationBody" class="flex flex-col flex-1"></div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, reactive, ref } from "@nuxtjs/composition-api"
+import { pipe } from "fp-ts/function"
+import * as TO from "fp-ts/TaskOption"
+import * as O from "fp-ts/Option"
+import { useCodemirror } from "~/helpers/editor/codemirror"
+import jsonLinter from "~/helpers/editor/linting/json"
+import { readFileAsText } from "~/helpers/functional/files"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+import { isJSONContentType } from "~/helpers/utils/contenttypes"
+
+defineProps({
+  showEventField: {
+    type: Boolean,
+    default: false,
+  },
+  isConnected: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits<{
+  (
+    e: "send-message",
+    body: {
+      eventName: string
+      message: string
+    }
+  ): void
+}>()
+
+const t = useI18n()
+const toast = useToast()
+
+const linewrapEnabled = ref(true)
+const wsCommunicationBody = ref<HTMLElement>()
+const prettifyIcon = ref<"wand" | "check" | "info">("wand")
+
+const knownContentTypes = {
+  JSON: "application/ld+json",
+  Raw: "text/plain",
+} as const
+
+const validContentTypes = Object.keys(knownContentTypes)
+
+const contentType = ref<keyof typeof knownContentTypes>("JSON")
+const eventName = ref("")
+const communicationBody = ref("")
+
+const rawInputEditorLang = computed(() => knownContentTypes[contentType.value])
+const langLinter = computed(() =>
+  isJSONContentType(contentType.value) ? jsonLinter : null
+)
+
+useCodemirror(
+  wsCommunicationBody,
+  communicationBody,
+  reactive({
+    extendedEditorConfig: {
+      lineWrapping: linewrapEnabled,
+      mode: rawInputEditorLang,
+      placeholder: t("websocket.message").toString(),
+    },
+    linter: langLinter,
+    completer: null,
+    environmentHighlights: true,
+  })
+)
+
+const clearContent = () => {
+  communicationBody.value = ""
+}
+
+const sendMessage = () => {
+  if (!communicationBody.value) return
+
+  emit("send-message", {
+    eventName: eventName.value,
+    message: communicationBody.value,
+  })
+  communicationBody.value = ""
+}
+
+const uploadPayload = async (e: InputEvent) => {
+  const result = await pipe(
+    (e.target as HTMLInputElement).files?.[0],
+    TO.fromNullable,
+    TO.chain(readFileAsText)
+  )()
+
+  if (O.isSome(result)) {
+    communicationBody.value = result.value
+    toast.success(`${t("state.file_imported")}`)
+  } else {
+    toast.error(`${t("action.choose_file")}`)
+  }
+}
+const prettifyRequestBody = () => {
+  try {
+    const jsonObj = JSON.parse(communicationBody.value)
+    communicationBody.value = JSON.stringify(jsonObj, null, 2)
+    prettifyIcon.value = "check"
+  } catch (e) {
+    console.error(e)
+    prettifyIcon.value = "info"
+    toast.error(`${t("error.json_prettify_invalid_body")}`)
+  }
+  setTimeout(() => (prettifyIcon.value = "wand"), 1000)
+}
+</script>
diff --git a/packages/hoppscotch-app/components/realtime/Log.vue b/packages/hoppscotch-app/components/realtime/Log.vue
index e46dc21d0..eb7ec006a 100644
--- a/packages/hoppscotch-app/components/realtime/Log.vue
+++ b/packages/hoppscotch-app/components/realtime/Log.vue
@@ -61,7 +61,8 @@ import { useThrottleFn, useScroll } from "@vueuse/core"
 import { useI18n } from "~/helpers/utils/composables"
 
 export type LogEntryData = {
-  ts: number
+  prefix?: string
+  ts: number | undefined
   source: "info" | "client" | "server" | "disconnected"
   payload: string
   event: "connecting" | "connected" | "disconnected" | "error"
diff --git a/packages/hoppscotch-app/components/realtime/LogEntry.vue b/packages/hoppscotch-app/components/realtime/LogEntry.vue
index e9389e424..56a8537b7 100644
--- a/packages/hoppscotch-app/components/realtime/LogEntry.vue
+++ b/packages/hoppscotch-app/components/realtime/LogEntry.vue
@@ -11,7 +11,10 @@
               @click.native="copyQuery(entry.payload)"
             />
           </div>
-          <div class="items-center hidden px-1 w-18 sm:inline-flex">
+          <div
+            v-if="entry.ts !== undefined"
+            class="items-center hidden px-1 w-18 sm:inline-flex"
+          >
             <span
               v-tippy="{ theme: 'tooltip' }"
               :title="relativeTime"
@@ -25,6 +28,9 @@
             @click="toggleExpandPayload()"
           >
             <div class="truncate">
+              <span v-if="entry.prefix !== undefined" class="!inline">{{
+                entry.prefix
+              }}</span>
               {{ entry.payload }}
             </div>
           </div>
@@ -312,26 +318,20 @@ const copyQuery = (entry: string) => {
 }
 
 // Relative Time
-const relativeTime = useTimeAgo(computed(() => props.entry.ts))
+// TS could be undefined here. We're just assigning a default value to 0 because we're not showing it in the UI
+const relativeTime = useTimeAgo(computed(() => props.entry.ts ?? 0))
+
+const ENTRY_COLORS = {
+  connected: "#10b981",
+  connecting: "#10b981",
+  error: "#ff5555",
+  disconnected: "#ff5555",
+} as const
 
 // Assigns color based on entry event
-const entryColor = computed(() => {
-  switch (props.entry.event) {
-    case "connected":
-      return "#10b981"
-    case "connecting":
-      return "#10b981"
-    case "error":
-      return "#ff5555"
-    case "disconnected":
-      return "#ff5555"
-  }
-})
+const entryColor = computed(() => ENTRY_COLORS[props.entry.event])
 
-const ICONS: Record<
-  LogEntryData["source"],
-  { iconName: string; iconColor: string }
-> = {
+const ICONS = {
   info: {
     iconName: "info-realtime",
     iconColor: "#10b981",
@@ -348,7 +348,7 @@ const ICONS: Record<
     iconName: "info-disconnect",
     iconColor: "#ff5555",
   },
-}
+} as const
 
 const iconColor = computed(() => ICONS[props.entry.source].iconColor)
 const iconName = computed(() => ICONS[props.entry.source].iconName)
diff --git a/packages/hoppscotch-app/components/realtime/Mqtt.vue b/packages/hoppscotch-app/components/realtime/Mqtt.vue
index b04000091..dd4d63882 100644
--- a/packages/hoppscotch-app/components/realtime/Mqtt.vue
+++ b/packages/hoppscotch-app/components/realtime/Mqtt.vue
@@ -13,17 +13,22 @@
             spellcheck="false"
             class="w-full px-4 py-2 border rounded bg-primaryLight border-divider text-secondaryDark"
             :placeholder="$t('mqtt.url')"
-            :disabled="connectionState"
-            @keyup.enter="validUrl ? toggleConnection() : null"
+            :disabled="
+              connectionState === 'CONNECTED' ||
+              connectionState === 'CONNECTING'
+            "
+            @keyup.enter="isUrlValid ? toggleConnection() : null"
           />
           <ButtonPrimary
             id="connect"
-            :disabled="!validUrl"
+            :disabled="!isUrlValid"
             class="w-32"
             :label="
-              connectionState ? $t('action.disconnect') : $t('action.connect')
+              connectionState === 'DISCONNECTED'
+                ? t('action.connect')
+                : t('action.disconnect')
             "
-            :loading="connectingState"
+            :loading="connectionState === 'CONNECTING'"
             @click.native="toggleConnection"
           />
         </div>
@@ -56,14 +61,14 @@
     </template>
     <template #sidebar>
       <div class="flex items-center justify-between p-4">
-        <label for="pub_topic" class="font-semibold text-secondaryLight">
+        <label for="pubTopic" class="font-semibold text-secondaryLight">
           {{ $t("mqtt.topic") }}
         </label>
       </div>
       <div class="flex px-4">
         <input
-          id="pub_topic"
-          v-model="pub_topic"
+          id="pubTopic"
+          v-model="pubTopic"
           class="input"
           :placeholder="$t('mqtt.topic_name')"
           type="text"
@@ -79,7 +84,7 @@
       <div class="flex px-4 space-x-2">
         <input
           id="mqtt-message"
-          v-model="msg"
+          v-model="message"
           class="input"
           type="text"
           autocomplete="off"
@@ -89,7 +94,7 @@
         <ButtonPrimary
           id="publish"
           name="get"
-          :disabled="!canpublish"
+          :disabled="!canPublish"
           :label="$t('mqtt.publish')"
           @click.native="publish"
         />
@@ -97,14 +102,14 @@
       <div
         class="flex items-center justify-between p-4 mt-4 border-t border-dividerLight"
       >
-        <label for="sub_topic" class="font-semibold text-secondaryLight">
+        <label for="subTopic" class="font-semibold text-secondaryLight">
           {{ $t("mqtt.topic") }}
         </label>
       </div>
       <div class="flex px-4 space-x-2">
         <input
-          id="sub_topic"
-          v-model="sub_topic"
+          id="subTopic"
+          v-model="subTopic"
           type="text"
           autocomplete="off"
           :placeholder="$t('mqtt.topic_name')"
@@ -114,7 +119,7 @@
         <ButtonPrimary
           id="subscribe"
           name="get"
-          :disabled="!cansubscribe"
+          :disabled="!canSubscribe"
           :label="
             subscriptionState ? $t('mqtt.unsubscribe') : $t('mqtt.subscribe')
           "
@@ -126,264 +131,220 @@
   </AppPaneLayout>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
-import Paho from "paho-mqtt"
-import debounce from "lodash/debounce"
-import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
+<script setup lang="ts">
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+} from "@nuxtjs/composition-api"
+import debounce from "lodash/debounce"
+import { MQTTConnection, MQTTError } from "~/helpers/realtime/MQTTConnection"
+import {
+  useI18n,
+  useNuxt,
+  useReadonlyStream,
+  useStream,
+  useStreamSubscriber,
+  useToast,
+} from "~/helpers/utils/composables"
 import {
-  MQTTEndpoint$,
-  setMQTTEndpoint,
-  MQTTConnectingState$,
-  MQTTConnectionState$,
-  setMQTTConnectingState,
-  setMQTTConnectionState,
-  MQTTSubscriptionState$,
-  setMQTTSubscriptionState,
-  MQTTSocket$,
-  setMQTTSocket,
-  MQTTLog$,
-  setMQTTLog,
   addMQTTLogLine,
+  MQTTConn$,
+  MQTTEndpoint$,
+  MQTTLog$,
+  setMQTTConn,
+  setMQTTEndpoint,
+  setMQTTLog,
 } from "~/newstore/MQTTSession"
-import { useStream } from "~/helpers/utils/composables"
 
-export default defineComponent({
-  setup() {
-    return {
-      url: useStream(MQTTEndpoint$, "", setMQTTEndpoint),
-      connectionState: useStream(
-        MQTTConnectionState$,
-        false,
-        setMQTTConnectionState
-      ),
-      connectingState: useStream(
-        MQTTConnectingState$,
-        false,
-        setMQTTConnectingState
-      ),
-      subscriptionState: useStream(
-        MQTTSubscriptionState$,
-        false,
-        setMQTTSubscriptionState
-      ),
-      log: useStream(MQTTLog$, null, setMQTTLog),
-      client: useStream(MQTTSocket$, null, setMQTTSocket),
-    }
-  },
-  data() {
-    return {
-      isUrlValid: true,
-      pub_topic: "",
-      sub_topic: "",
-      msg: "",
-      manualDisconnect: false,
-      username: "",
-      password: "",
-    }
-  },
-  computed: {
-    validUrl() {
-      return this.isUrlValid
-    },
-    canpublish() {
-      return this.pub_topic !== "" && this.msg !== "" && this.connectionState
-    },
-    cansubscribe() {
-      return this.sub_topic !== "" && this.connectionState
-    },
-  },
-  watch: {
-    url() {
-      this.debouncer()
-    },
-  },
-  created() {
-    if (process.browser) {
-      this.worker = this.$worker.createRejexWorker()
-      this.worker.addEventListener("message", this.workerResponseHandler)
-    }
-  },
-  destroyed() {
-    this.worker.terminate()
-  },
-  methods: {
-    debouncer: debounce(function () {
-      this.worker.postMessage({ type: "ws", url: this.url })
-    }, 1000),
-    workerResponseHandler({ data }) {
-      if (data.url === this.url) this.isUrlValid = data.result
-    },
-    connect() {
-      this.connectingState = true
-      this.log = [
-        {
-          payload: this.$t("state.connecting_to", { name: this.url }),
-          source: "info",
-          event: "connecting",
-          ts: Date.now(),
-        },
-      ]
-      const parseUrl = new URL(this.url)
-      this.client = new Paho.Client(
-        `${parseUrl.hostname}${
-          parseUrl.pathname !== "/" ? parseUrl.pathname : ""
-        }`,
-        parseUrl.port !== "" ? Number(parseUrl.port) : 8081,
-        "hoppscotch"
-      )
-      const connectOptions = {
-        onSuccess: this.onConnectionSuccess,
-        onFailure: this.onConnectionFailure,
-        useSSL: parseUrl.protocol !== "ws:",
-      }
-      if (this.username !== "") {
-        connectOptions.userName = this.username
-      }
-      if (this.password !== "") {
-        connectOptions.password = this.password
-      }
-      this.client.connect(connectOptions)
-      this.client.onConnectionLost = this.onConnectionLost
-      this.client.onMessageArrived = this.onMessageArrived
+const t = useI18n()
+const nuxt = useNuxt()
+const toast = useToast()
+const { subscribeToStream } = useStreamSubscriber()
 
-      logHoppRequestRunToAnalytics({
-        platform: "mqtt",
-      })
-    },
-    onConnectionFailure() {
-      this.connectingState = false
-      this.connectionState = false
-      addMQTTLogLine({
-        payload: this.$t("error.something_went_wrong"),
-        source: "info",
-        event: "error",
-        ts: Date.now(),
-      })
-    },
-    onConnectionSuccess() {
-      this.connectingState = false
-      this.connectionState = true
-      addMQTTLogLine({
-        payload: this.$t("state.connected_to", { name: this.url }),
-        source: "info",
-        event: "connected",
-        ts: Date.now(),
-      })
-      this.$toast.success(this.$t("state.connected"))
-    },
-    onMessageArrived({ payloadString, destinationName }) {
-      addMQTTLogLine({
-        payload: `Message: ${payloadString} arrived on topic: ${destinationName}`,
-        source: "info",
-        event: "info",
-        ts: Date.now(),
-      })
-    },
-    toggleConnection() {
-      if (this.connectionState) {
-        this.disconnect()
-      } else {
-        this.connect()
-      }
-    },
-    disconnect() {
-      this.manualDisconnect = true
-      this.client.disconnect()
-      addMQTTLogLine({
-        payload: this.$t("state.disconnected_from", { name: this.url }),
-        source: "disconnected",
-        event: "disconnected",
-        ts: Date.now(),
-      })
-    },
-    onConnectionLost() {
-      this.connectingState = false
-      this.connectionState = false
-      if (this.manualDisconnect) {
-        this.$toast.error(this.$t("state.disconnected"))
-      } else {
-        this.$toast.error(this.$t("error.something_went_wrong"))
-      }
-      this.manualDisconnect = false
-      this.subscriptionState = false
-    },
-    publish() {
-      try {
-        this.client.publish(this.pub_topic, this.msg, 0, false)
+const url = useStream(MQTTEndpoint$, "", setMQTTEndpoint)
+const log = useStream(MQTTLog$, [], setMQTTLog)
+const socket = useStream(MQTTConn$, new MQTTConnection(), setMQTTConn)
+const connectionState = useReadonlyStream(
+  socket.value.connectionState$,
+  "DISCONNECTED"
+)
+const subscriptionState = useReadonlyStream(
+  socket.value.subscriptionState$,
+  false
+)
+
+const isUrlValid = ref(true)
+const pubTopic = ref("")
+const subTopic = ref("")
+const message = ref("")
+const username = ref("")
+const password = ref("")
+
+let worker: Worker
+
+const canPublish = computed(
+  () =>
+    pubTopic.value !== "" &&
+    message.value !== "" &&
+    connectionState.value === "CONNECTED"
+)
+const canSubscribe = computed(
+  () => subTopic.value !== "" && connectionState.value === "CONNECTED"
+)
+
+const workerResponseHandler = ({
+  data,
+}: {
+  data: { url: string; result: boolean }
+}) => {
+  if (data.url === url.value) isUrlValid.value = data.result
+}
+
+onMounted(() => {
+  worker = nuxt.value.$worker.createRejexWorker()
+  worker.addEventListener("message", workerResponseHandler)
+
+  subscribeToStream(socket.value.event$, (event) => {
+    switch (event?.type) {
+      case "CONNECTING":
+        log.value = [
+          {
+            payload: `${t("state.connecting_to", { name: url.value })}`,
+            source: "info",
+            color: "var(--accent-color)",
+            ts: undefined,
+          },
+        ]
+        break
+
+      case "CONNECTED":
+        log.value = [
+          {
+            payload: `${t("state.connected_to", { name: url.value })}`,
+            source: "info",
+            color: "var(--accent-color)",
+            ts: Date.now(),
+          },
+        ]
+        toast.success(`${t("state.connected")}`)
+        break
+
+      case "MESSAGE_SENT":
         addMQTTLogLine({
-          payload: `Published message: ${this.msg} to topic: ${this.pub_topic}`,
-          ts: Date.now(),
-          source: "info",
-          event: "info",
-        })
-      } catch (e) {
-        addMQTTLogLine({
-          payload:
-            this.$t("error.something_went_wrong") +
-            `while publishing msg: ${this.msg} to topic:  ${this.pub_topic}`,
-          source: "info",
-          event: "error",
+          prefix: `${event.message.topic}`,
+          payload: event.message.message,
+          source: "client",
           ts: Date.now(),
         })
-      }
-    },
-    toggleSubscription() {
-      if (this.subscriptionState) {
-        this.unsubscribe()
-      } else {
-        this.subscribe()
-      }
-    },
-    subscribe() {
-      try {
-        this.client.subscribe(this.sub_topic, {
-          onSuccess: this.usubSuccess,
-          onFailure: this.usubFailure,
-        })
-      } catch (e) {
+        break
+
+      case "MESSAGE_RECEIVED":
         addMQTTLogLine({
-          payload:
-            this.$t("error.something_went_wrong") +
-            `while subscribing to topic:  ${this.sub_topic}`,
-          source: "info",
-          event: "error",
-          ts: Date.now(),
+          prefix: `${event.message.topic}`,
+          payload: event.message.message,
+          source: "server",
+          ts: event.time,
         })
-      }
-    },
-    usubSuccess() {
-      this.subscriptionState = !this.subscriptionState
-      addMQTTLogLine({
-        payload:
-          `Successfully ` +
-          (this.subscriptionState ? "subscribed" : "unsubscribed") +
-          ` to topic: ${this.sub_topic}`,
-        source: "info",
-        event: "info",
-        ts: Date.now(),
-      })
-    },
-    usubFailure() {
-      addMQTTLogLine({
-        payload:
-          `Failed to ` +
-          (this.subscriptionState ? "unsubscribe" : "subscribe") +
-          ` to topic: ${this.sub_topic}`,
-        source: "info",
-        color: "error",
-        ts: Date.now(),
-      })
-    },
-    unsubscribe() {
-      this.client.unsubscribe(this.sub_topic, {
-        onSuccess: this.usubSuccess,
-        onFailure: this.usubFailure,
-      })
-    },
-    clearLogEntries() {
-      this.log = []
-    },
-  },
+        break
+
+      case "SUBSCRIBED":
+        addMQTTLogLine({
+          payload: subscriptionState.value
+            ? `${t("state.subscribed_success", { topic: subTopic.value })}`
+            : `${t("state.unsubscribed_success", { topic: subTopic.value })}`,
+          source: "server",
+          ts: event.time,
+        })
+        break
+
+      case "SUBSCRIPTION_FAILED":
+        addMQTTLogLine({
+          payload: subscriptionState.value
+            ? `${t("state.subscribed_failed", { topic: subTopic.value })}`
+            : `${t("state.unsubscribed_failed", { topic: subTopic.value })}`,
+          source: "server",
+          ts: event.time,
+        })
+        break
+
+      case "ERROR":
+        addMQTTLogLine({
+          payload: getI18nError(event.error),
+          source: "info",
+          color: "#ff5555",
+          ts: event.time,
+        })
+        break
+
+      case "DISCONNECTED":
+        addMQTTLogLine({
+          payload: t("state.disconnected_from", { name: url.value }).toString(),
+          source: "info",
+          color: "#ff5555",
+          ts: event.time,
+        })
+        toast.error(`${t("state.disconnected")}`)
+        break
+    }
+  })
 })
+
+const debouncer = debounce(function () {
+  worker.postMessage({ type: "ws", url: url.value })
+}, 1000)
+
+watch(url, (newUrl) => {
+  if (newUrl) debouncer()
+})
+
+onUnmounted(() => {
+  worker.terminate()
+})
+
+// METHODS
+const toggleConnection = () => {
+  // If it is connecting:
+  if (connectionState.value === "DISCONNECTED") {
+    return socket.value.connect(url.value, username.value, password.value)
+  }
+  // Otherwise, it's disconnecting.
+  socket.value.disconnect()
+}
+const publish = () => {
+  socket.value?.publish(pubTopic.value, message.value)
+}
+const toggleSubscription = () => {
+  if (subscriptionState.value) {
+    socket.value.unsubscribe(subTopic.value)
+  } else {
+    socket.value.subscribe(subTopic.value)
+  }
+}
+
+const getI18nError = (error: MQTTError): string => {
+  if (typeof error === "string") return error
+
+  switch (error.type) {
+    case "CONNECTION_NOT_ESTABLISHED":
+      return t("state.connection_lost").toString()
+    case "SUBSCRIPTION_FAILED":
+      return t("state.mqtt_subscription_failed", {
+        topic: error.topic,
+      }).toString()
+    case "PUBLISH_ERROR":
+      return t("state.publish_error", { topic: error.topic }).toString()
+    case "CONNECTION_LOST":
+      return t("state.connection_lost").toString()
+    case "CONNECTION_FAILED":
+      return t("state.connection_failed").toString()
+    default:
+      return t("state.disconnected_from", { name: url.value }).toString()
+  }
+}
+const clearLogEntries = () => {
+  log.value = []
+}
 </script>
diff --git a/packages/hoppscotch-app/components/realtime/Socketio.vue b/packages/hoppscotch-app/components/realtime/Socketio.vue
index 79623d227..fc02f857d 100644
--- a/packages/hoppscotch-app/components/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/components/realtime/Socketio.vue
@@ -23,13 +23,16 @@
                       class="flex px-4 py-2 font-semibold border rounded-l cursor-pointer bg-primaryLight border-divider text-secondaryDark w-26"
                       :value="`Client ${clientVersion}`"
                       readonly
-                      :disabled="connectionState"
+                      :disabled="
+                        connectionState === 'CONNECTED' ||
+                        connectionState === 'CONNECTING'
+                      "
                     />
                   </span>
                 </template>
                 <div class="flex flex-col" role="menu">
                   <SmartItem
-                    v-for="(_, version) in socketIoClients"
+                    v-for="version in SIOVersions"
                     :key="`client-${version}`"
                     :label="`Client ${version}`"
                     @click.native="onSelectVersion(version)"
@@ -43,487 +46,390 @@
               type="url"
               autocomplete="off"
               spellcheck="false"
-              :class="{ error: !urlValid }"
+              :class="{ error: !isUrlValid }"
               class="flex flex-1 w-full px-4 py-2 border bg-primaryLight border-divider text-secondaryDark"
-              :placeholder="$t('socketio.url')"
-              :disabled="connectionState"
-              @keyup.enter="urlValid ? toggleConnection() : null"
+              :placeholder="`${t('socketio.url')}`"
+              :disabled="
+                connectionState === 'CONNECTED' ||
+                connectionState === 'CONNECTING'
+              "
+              @keyup.enter="isUrlValid ? toggleConnection() : null"
             />
             <input
               id="socketio-path"
               v-model="path"
               class="flex flex-1 w-full px-4 py-2 border rounded-r bg-primaryLight border-divider text-secondaryDark"
               spellcheck="false"
-              :disabled="connectionState"
-              @keyup.enter="urlValid ? toggleConnection() : null"
+              :disabled="
+                connectionState === 'CONNECTED' ||
+                connectionState === 'CONNECTING'
+              "
+              @keyup.enter="isUrlValid ? toggleConnection() : null"
             />
           </div>
           <ButtonPrimary
             id="connect"
-            :disabled="!urlValid"
+            :disabled="!isUrlValid"
             name="connect"
             class="w-32"
             :label="
-              !connectionState ? $t('action.connect') : $t('action.disconnect')
+              connectionState === 'DISCONNECTED'
+                ? t('action.connect')
+                : t('action.disconnect')
             "
-            :loading="connectingState"
+            :loading="connectionState === 'CONNECTING'"
             @click.native="toggleConnection"
           />
         </div>
       </div>
-      <div
-        class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
+
+      <SmartTabs
+        v-model="selectedTab"
+        styles="sticky bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
       >
-        <span class="flex items-center">
-          <label class="font-semibold text-secondaryLight">
-            {{ $t("authorization.type") }}
-          </label>
-          <tippy
-            ref="authTypeOptions"
-            interactive
-            trigger="click"
-            theme="popover"
-            arrow
-          >
-            <template #trigger>
-              <span class="select-wrapper">
-                <ButtonSecondary
-                  class="pr-8 ml-2 rounded-none"
-                  :label="authType"
-                />
-              </span>
-            </template>
-            <div class="flex flex-col" role="menu">
-              <SmartItem
-                label="None"
-                :icon="
-                  authType === 'None'
-                    ? 'radio_button_checked'
-                    : 'radio_button_unchecked'
-                "
-                :active="authType === 'None'"
-                @click.native="
-                  () => {
-                    authType = 'None'
-                    authTypeOptions.tippy().hide()
-                  }
-                "
-              />
-              <SmartItem
-                label="Bearer Token"
-                :icon="
-                  authType === 'Bearer'
-                    ? 'radio_button_checked'
-                    : 'radio_button_unchecked'
-                "
-                :active="authType === 'Bearer'"
-                @click.native="
-                  () => {
-                    authType = 'Bearer'
-                    authTypeOptions.tippy().hide()
-                  }
-                "
-              />
-            </div>
-          </tippy>
-        </span>
-        <div class="flex">
-          <SmartCheckbox
-            :on="authActive"
-            class="px-2"
-            @change="authActive = !authActive"
-          >
-            {{ $t("state.enabled") }}
-          </SmartCheckbox>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            to="https://docs.hoppscotch.io/features/authorization"
-            blank
-            :title="$t('app.wiki')"
-            svg="help-circle"
-          />
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('action.clear')"
-            svg="trash-2"
-            @click.native="clearContent"
-          />
-        </div>
-      </div>
-      <div
-        v-if="authType === 'None'"
-        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-      >
-        <img
-          :src="`/images/states/${$colorMode.value}/login.svg`"
-          loading="lazy"
-          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-          :alt="$t('empty.authorization')"
-        />
-        <span class="pb-4 text-center">
-          This SocketIO connection does not use any authentication.
-        </span>
-        <ButtonSecondary
-          outline
-          :label="$t('app.documentation')"
-          to="https://docs.hoppscotch.io/features/authorization"
-          blank
-          svg="external-link"
-          reverse
-          class="mb-4"
-        />
-      </div>
-      <div
-        v-if="authType === 'Bearer'"
-        class="flex flex-1 border-b border-dividerLight"
-      >
-        <div class="w-2/3 border-r border-dividerLight">
-          <div class="flex flex-1 border-b border-dividerLight">
-            <SmartEnvInput v-model="bearerToken" placeholder="Token" />
-          </div>
-        </div>
-        <div
-          class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
+        <SmartTab
+          :id="'communication'"
+          :label="`${t('websocket.communication')}`"
         >
-          <div class="p-2">
-            <div class="pb-2 text-secondaryLight">
-              {{ $t("helpers.authorization") }}
+          <RealtimeCommunication
+            :show-event-field="true"
+            :is-connected="connectionState === 'CONNECTED'"
+            @send-message="sendMessage($event)"
+          ></RealtimeCommunication>
+        </SmartTab>
+        <SmartTab :id="'protocols'" :label="`${t('request.authorization')}`">
+          <div
+            class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
+          >
+            <span class="flex items-center">
+              <label class="font-semibold text-secondaryLight">
+                {{ t("authorization.type") }}
+              </label>
+              <tippy
+                ref="authTypeOptions"
+                interactive
+                trigger="click"
+                theme="popover"
+                arrow
+              >
+                <template #trigger>
+                  <span class="select-wrapper">
+                    <ButtonSecondary
+                      class="pr-8 ml-2 rounded-none"
+                      :label="authType"
+                    />
+                  </span>
+                </template>
+                <div class="flex flex-col" role="menu">
+                  <SmartItem
+                    label="None"
+                    :icon="
+                      authType === 'None'
+                        ? 'radio_button_checked'
+                        : 'radio_button_unchecked'
+                    "
+                    :active="authType === 'None'"
+                    @click.native="
+                      () => {
+                        authType = 'None'
+                        authTypeOptions.tippy().hide()
+                      }
+                    "
+                  />
+                  <SmartItem
+                    label="Bearer Token"
+                    :icon="
+                      authType === 'Bearer'
+                        ? 'radio_button_checked'
+                        : 'radio_button_unchecked'
+                    "
+                    :active="authType === 'Bearer'"
+                    @click.native="
+                      () => {
+                        authType = 'Bearer'
+                        authTypeOptions.tippy().hide()
+                      }
+                    "
+                  />
+                </div>
+              </tippy>
+            </span>
+            <div class="flex">
+              <SmartCheckbox
+                :on="authActive"
+                class="px-2"
+                @change="authActive = !authActive"
+              >
+                {{ t("state.enabled") }}
+              </SmartCheckbox>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                to="https://docs.hoppscotch.io/features/authorization"
+                blank
+                :title="t('app.wiki')"
+                svg="help-circle"
+              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('action.clear')"
+                svg="trash-2"
+                @click.native="clearContent"
+              />
             </div>
-            <SmartAnchor
-              class="link"
-              :label="`${$t('authorization.learn')} \xA0 →`"
+          </div>
+          <div
+            v-if="authType === 'None'"
+            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+          >
+            <img
+              :src="`/images/states/${$colorMode.value}/login.svg`"
+              loading="lazy"
+              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+              :alt="`${t('empty.authorization')}`"
+            />
+            <span class="pb-4 text-center">
+              {{ t("socketio.connection_not_authorized") }}
+            </span>
+            <ButtonSecondary
+              outline
+              :label="t('app.documentation')"
               to="https://docs.hoppscotch.io/features/authorization"
               blank
+              svg="external-link"
+              reverse
+              class="mb-4"
             />
           </div>
-        </div>
-      </div>
+          <div
+            v-if="authType === 'Bearer'"
+            class="flex flex-1 border-b border-dividerLight"
+          >
+            <div class="w-2/3 border-r border-dividerLight">
+              <div class="flex flex-1 border-b border-dividerLight">
+                <SmartEnvInput v-model="bearerToken" placeholder="Token" />
+              </div>
+            </div>
+            <div
+              class="sticky h-full p-4 overflow-auto bg-primary top-upperTertiaryStickyFold min-w-46 max-w-1/3 z-9"
+            >
+              <div class="p-2">
+                <div class="pb-2 text-secondaryLight">
+                  {{ t("helpers.authorization") }}
+                </div>
+                <SmartAnchor
+                  class="link"
+                  :label="`${t('authorization.learn')} \xA0 →`"
+                  to="https://docs.hoppscotch.io/features/authorization"
+                  blank
+                />
+              </div>
+            </div>
+          </div>
+        </SmartTab>
+      </SmartTabs>
     </template>
     <template #secondary>
       <RealtimeLog
-        :title="$t('socketio.log')"
+        :title="t('socketio.log')"
         :log="log"
         @delete="clearLogEntries()"
       />
     </template>
-    <template #sidebar>
-      <div class="flex items-center justify-between p-4">
-        <label for="events" class="font-semibold text-secondaryLight">
-          {{ $t("socketio.events") }}
-        </label>
-      </div>
-      <div class="flex px-4">
-        <input
-          id="event_name"
-          v-model="communication.eventName"
-          class="input"
-          name="event_name"
-          :placeholder="$t('socketio.event_name')"
-          type="text"
-          autocomplete="off"
-          :disabled="!connectionState"
-        />
-      </div>
-      <div class="flex items-center justify-between p-4">
-        <label class="font-semibold text-secondaryLight">
-          {{ $t("socketio.communication") }}
-        </label>
-        <div class="flex">
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('add.new')"
-            svg="plus"
-            @click.native="addCommunicationInput"
-          />
-        </div>
-      </div>
-      <div class="flex flex-col px-4 pb-4 space-y-2">
-        <div
-          v-for="(input, index) of communication.inputs"
-          :key="`input-${index}`"
-        >
-          <div class="flex space-x-2">
-            <input
-              v-model="communication.inputs[index]"
-              class="input"
-              name="message"
-              :placeholder="$t('count.message', { count: index + 1 })"
-              type="text"
-              autocomplete="off"
-              :disabled="!connectionState"
-              @keyup.enter="connectionState ? sendMessage() : null"
-            />
-            <ButtonSecondary
-              v-if="index + 1 !== communication.inputs.length"
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('action.remove')"
-              svg="trash"
-              color="red"
-              outline
-              @click.native="removeCommunicationInput({ index })"
-            />
-            <ButtonPrimary
-              v-if="index + 1 === communication.inputs.length"
-              id="send"
-              name="send"
-              :disabled="!connectionState"
-              :label="$t('action.send')"
-              @click.native="sendMessage"
-            />
-          </div>
-        </div>
-      </div>
-    </template>
   </AppPaneLayout>
 </template>
 
-<script>
-import { defineComponent, ref } from "@nuxtjs/composition-api"
-// All Socket.IO client version imports
-import ClientV2 from "socket.io-client-v2"
-import { io as ClientV3 } from "socket.io-client-v3"
-import { io as ClientV4 } from "socket.io-client-v4"
-import wildcard from "socketio-wildcard"
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from "@nuxtjs/composition-api"
 import debounce from "lodash/debounce"
-import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import {
-  SIOEndpoint$,
-  setSIOEndpoint,
-  SIOVersion$,
-  setSIOVersion,
-  SIOPath$,
-  setSIOPath,
-  SIOConnectionState$,
-  SIOConnectingState$,
-  setSIOConnectionState,
-  setSIOConnectingState,
-  SIOSocket$,
-  setSIOSocket,
-  SIOLog$,
-  setSIOLog,
+  SIOConnection,
+  SIOError,
+  SIOMessage,
+  SOCKET_CLIENTS,
+} from "~/helpers/realtime/SIOConnection"
+import {
+  useI18n,
+  useNuxt,
+  useReadonlyStream,
+  useStream,
+  useStreamSubscriber,
+  useToast,
+} from "~/helpers/utils/composables"
+import {
   addSIOLogLine,
+  setSIOEndpoint,
+  setSIOLog,
+  setSIOPath,
+  setSIOVersion,
+  SIOClientVersion,
+  SIOEndpoint$,
+  SIOLog$,
+  SIOPath$,
+  SIOVersion$,
 } from "~/newstore/SocketIOSession"
-import { useStream } from "~/helpers/utils/composables"
 
-const socketIoClients = {
-  v4: ClientV4,
-  v3: ClientV3,
-  v2: ClientV2,
+const t = useI18n()
+const toast = useToast()
+const nuxt = useNuxt()
+const { subscribeToStream } = useStreamSubscriber()
+
+type SIOTab = "communication" | "protocols"
+const selectedTab = ref<SIOTab>("communication")
+
+const SIOVersions = Object.keys(SOCKET_CLIENTS)
+const url = useStream(SIOEndpoint$, "", setSIOEndpoint)
+const clientVersion = useStream(SIOVersion$, "v4", setSIOVersion)
+const path = useStream(SIOPath$, "", setSIOPath)
+const socket = new SIOConnection()
+const connectionState = useReadonlyStream(
+  socket.connectionState$,
+  "DISCONNECTED"
+)
+const log = useStream(SIOLog$, [], setSIOLog)
+const authTypeOptions = ref<any>(null)
+const versionOptions = ref<any | null>(null)
+
+const isUrlValid = ref(true)
+const authType = ref<"None" | "Bearer">("None")
+const bearerToken = ref("")
+const authActive = ref(true)
+
+let worker: Worker
+
+const workerResponseHandler = ({
+  data,
+}: {
+  data: { url: string; result: boolean }
+}) => {
+  if (data.url === url.value) isUrlValid.value = data.result
 }
 
-export default defineComponent({
-  setup() {
-    return {
-      socketIoClients,
-      url: useStream(SIOEndpoint$, "", setSIOEndpoint),
-      clientVersion: useStream(SIOVersion$, "", setSIOVersion),
-      path: useStream(SIOPath$, "", setSIOPath),
-      connectingState: useStream(
-        SIOConnectingState$,
-        false,
-        setSIOConnectingState
-      ),
-      connectionState: useStream(
-        SIOConnectionState$,
-        false,
-        setSIOConnectionState
-      ),
-      io: useStream(SIOSocket$, null, setSIOSocket),
-      log: useStream(SIOLog$, [], setSIOLog),
-      authTypeOptions: ref(null),
-    }
-  },
-  data() {
-    return {
-      isUrlValid: true,
-      communication: {
-        eventName: "",
-        inputs: [""],
-      },
-      authType: "None",
-      bearerToken: "",
-      authActive: true,
-    }
-  },
-  computed: {
-    urlValid() {
-      return this.isUrlValid
-    },
-  },
-  watch: {
-    url() {
-      this.debouncer()
-    },
-    connectionState(connected) {
-      if (connected) this.$refs.versionOptions.tippy().disable()
-      else this.$refs.versionOptions.tippy().enable()
-    },
-  },
-  created() {
-    if (process.browser) {
-      this.worker = this.$worker.createRejexWorker()
-      this.worker.addEventListener("message", this.workerResponseHandler)
-    }
-  },
-  destroyed() {
-    this.worker.terminate()
-  },
-  methods: {
-    debouncer: debounce(function () {
-      this.worker.postMessage({ type: "socketio", url: this.url })
-    }, 1000),
-    workerResponseHandler({ data }) {
-      if (data.url === this.url) this.isUrlValid = data.result
-    },
-    removeCommunicationInput({ index }) {
-      this.$delete(this.communication.inputs, index)
-    },
-    addCommunicationInput() {
-      this.communication.inputs.push("")
-    },
-    toggleConnection() {
-      // If it is connecting:
-      if (!this.connectionState) return this.connect()
-      // Otherwise, it's disconnecting.
-      else return this.disconnect()
-    },
-    connect() {
-      this.connectingState = true
-      this.log = [
-        {
-          payload: this.$t("state.connecting_to", { name: this.url }),
-          source: "info",
-          event: "connecting",
-          ts: Date.now(),
-        },
-      ]
+const getMessagePayload = (data: SIOMessage): string =>
+  typeof data.value === "object" ? JSON.stringify(data.value) : `${data.value}`
 
-      try {
-        if (!this.path) {
-          this.path = "/socket.io"
-        }
-        const Client = socketIoClients[this.clientVersion]
-        if (this.authActive && this.authType === "Bearer") {
-          this.io = new Client(this.url, {
-            path: this.path,
-            auth: {
-              token: this.bearerToken,
-            },
-          })
-        } else {
-          this.io = new Client(this.url, { path: this.path })
-        }
+const getErrorPayload = (error: SIOError): string => {
+  switch (error.type) {
+    case "CONNECTION":
+      return t("state.connection_error").toString()
+    case "RECONNECT_ERROR":
+      return t("state.reconnection_error").toString()
+    default:
+      return t("state.disconnected_from", { name: url.value }).toString()
+  }
+}
 
-        // Add ability to listen to all events
-        wildcard(Client.Manager)(this.io)
-        this.io.on("connect", () => {
-          this.connectingState = false
-          this.connectionState = true
-          this.log = [
-            {
-              payload: this.$t("state.connected_to", { name: this.url }),
-              source: "info",
-              event: "connected",
-              ts: Date.now(),
-            },
-          ]
-          this.$toast.success(this.$t("state.connected"))
-        })
-        this.io.on("*", ({ data }) => {
-          const [eventName, message] = data
-          addSIOLogLine({
-            payload: `[${eventName}] ${message ? JSON.stringify(message) : ""}`,
-            source: "server",
-            ts: Date.now(),
-          })
-        })
-        this.io.on("connect_error", (error) => {
-          this.handleError(error)
-        })
-        this.io.on("reconnect_error", (error) => {
-          this.handleError(error)
-        })
-        this.io.on("error", () => {
-          this.handleError()
-        })
-        this.io.on("disconnect", () => {
-          this.connectingState = false
-          this.connectionState = false
-          addSIOLogLine({
-            payload: this.$t("state.disconnected_from", { name: this.url }),
-            source: "disconnected",
-            event: "disconnected",
-            ts: Date.now(),
-          })
-          this.$toast.error(this.$t("state.disconnected"))
-        })
-      } catch (e) {
-        this.handleError(e)
-        this.$toast.error(this.$t("error.something_went_wrong"))
-      }
+onMounted(() => {
+  worker = nuxt.value.$worker.createRejexWorker()
+  worker.addEventListener("message", workerResponseHandler)
 
-      logHoppRequestRunToAnalytics({
-        platform: "socketio",
-      })
-    },
-    disconnect() {
-      this.io.close()
-    },
-    handleError(error) {
-      this.disconnect()
-      this.connectingState = false
-      this.connectionState = false
-      addSIOLogLine({
-        payload: this.$t("error.something_went_wrong"),
-        source: "info",
-        event: "error",
-        ts: Date.now(),
-      })
-      if (error !== null)
+  subscribeToStream(socket.event$, (event) => {
+    switch (event?.type) {
+      case "CONNECTING":
+        log.value = [
+          {
+            payload: `${t("state.connecting_to", { name: url.value })}`,
+            source: "info",
+            color: "var(--accent-color)",
+            ts: undefined,
+          },
+        ]
+        break
+
+      case "CONNECTED":
+        log.value = [
+          {
+            payload: `${t("state.connected_to", { name: url.value })}`,
+            source: "info",
+            color: "var(--accent-color)",
+            ts: event.time,
+          },
+        ]
+        toast.success(`${t("state.connected")}`)
+        break
+
+      case "MESSAGE_SENT":
         addSIOLogLine({
-          payload: error,
-          source: "info",
-          event: "error",
-          ts: Date.now(),
-        })
-    },
-    sendMessage() {
-      const eventName = this.communication.eventName
-      const messages = (this.communication.inputs || [])
-        .map((input) => {
-          try {
-            return JSON.parse(input)
-          } catch (e) {
-            return input
-          }
-        })
-        .filter((message) => !!message)
-
-      if (this.io) {
-        this.io.emit(eventName, ...messages, (data) => {
-          // receive response from server
-          addSIOLogLine({
-            payload: `[${eventName}] ${JSON.stringify(data)}`,
-            source: "server",
-            ts: Date.now(),
-          })
-        })
-
-        addSIOLogLine({
-          payload: `[${eventName}] ${JSON.stringify(messages)}`,
+          prefix: `[${event.message.eventName}]`,
+          payload: getMessagePayload(event.message),
           source: "client",
-          ts: Date.now(),
+          ts: event.time,
         })
-        this.communication.inputs = [""]
-      }
-    },
-    onSelectVersion(version) {
-      this.clientVersion = version
-      this.$refs.versionOptions.tippy().hide()
-    },
-    clearLogEntries() {
-      this.log = []
-    },
-  },
+        break
+
+      case "MESSAGE_RECEIVED":
+        addSIOLogLine({
+          prefix: `[${event.message.eventName}]`,
+          payload: getMessagePayload(event.message),
+          source: "server",
+          ts: event.time,
+        })
+        break
+
+      case "ERROR":
+        addSIOLogLine({
+          payload: getErrorPayload(event.error),
+          source: "info",
+          color: "#ff5555",
+          ts: event.time,
+        })
+        break
+
+      case "DISCONNECTED":
+        addSIOLogLine({
+          payload: t("state.disconnected_from", { name: url.value }).toString(),
+          source: "info",
+          color: "#ff5555",
+          ts: event.time,
+        })
+        toast.error(`${t("state.disconnected")}`)
+        break
+    }
+  })
 })
+
+watch(url, (newUrl) => {
+  if (newUrl) debouncer()
+})
+
+watch(connectionState, (connected) => {
+  if (connected) versionOptions.value.tippy().disable()
+  else versionOptions.value.tippy().enable()
+})
+
+onUnmounted(() => {
+  worker.terminate()
+})
+
+const debouncer = debounce(function () {
+  worker.postMessage({ type: "socketio", url: url.value })
+}, 1000)
+
+const toggleConnection = () => {
+  // If it is connecting:
+  if (connectionState.value === "DISCONNECTED") {
+    return socket.connect({
+      url: url.value,
+      path: path.value || "/socket.io",
+      clientVersion: clientVersion.value,
+      auth: authActive.value
+        ? {
+            type: authType.value,
+            token: bearerToken.value,
+          }
+        : undefined,
+    })
+  }
+  // Otherwise, it's disconnecting.
+  socket.disconnect()
+}
+const sendMessage = (event: { message: string; eventName: string }) => {
+  socket.sendMessage(event)
+}
+const onSelectVersion = (version: SIOClientVersion) => {
+  clientVersion.value = version
+  versionOptions.value.tippy().hide()
+}
+const clearLogEntries = () => {
+  log.value = []
+}
 </script>
diff --git a/packages/hoppscotch-app/components/realtime/Sse.vue b/packages/hoppscotch-app/components/realtime/Sse.vue
index ac5ca388c..d9b4a7136 100644
--- a/packages/hoppscotch-app/components/realtime/Sse.vue
+++ b/packages/hoppscotch-app/components/realtime/Sse.vue
@@ -11,11 +11,13 @@
               v-model="server"
               type="url"
               autocomplete="off"
-              :class="{ error: !serverValid }"
+              :class="{ error: !isUrlValid }"
               class="flex flex-1 w-full px-4 py-2 border rounded-l bg-primaryLight border-divider text-secondaryDark"
               :placeholder="$t('sse.url')"
-              :disabled="connectionSSEState"
-              @keyup.enter="serverValid ? toggleSSEConnection() : null"
+              :disabled="
+                connectionState === 'STARTED' || connectionState === 'STARTING'
+              "
+              @keyup.enter="isUrlValid ? toggleSSEConnection() : null"
             />
             <label
               for="event-type"
@@ -28,19 +30,23 @@
               v-model="eventType"
               class="flex flex-1 w-full px-4 py-2 border rounded-r bg-primaryLight border-divider text-secondaryDark"
               spellcheck="false"
-              :disabled="connectionSSEState"
-              @keyup.enter="serverValid ? toggleSSEConnection() : null"
+              :disabled="
+                connectionState === 'STARTED' || connectionState === 'STARTING'
+              "
+              @keyup.enter="isUrlValid ? toggleSSEConnection() : null"
             />
           </div>
           <ButtonPrimary
             id="start"
-            :disabled="!serverValid"
+            :disabled="!isUrlValid"
             name="start"
             class="w-32"
             :label="
-              !connectionSSEState ? $t('action.start') : $t('action.stop')
+              connectionState === 'STOPPED'
+                ? t('action.start')
+                : t('action.stop')
             "
-            :loading="connectingState"
+            :loading="connectionState === 'STARTING'"
             @click.native="toggleSSEConnection"
           />
         </div>
@@ -56,11 +62,10 @@
   </AppPaneLayout>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { ref, watch, onUnmounted, onMounted } from "@nuxtjs/composition-api"
 import "splitpanes/dist/splitpanes.css"
 import debounce from "lodash/debounce"
-import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import {
   SSEEndpoint$,
   setSSEEndpoint,
@@ -68,163 +73,127 @@ import {
   setSSEEventType,
   SSESocket$,
   setSSESocket,
-  SSEConnectingState$,
-  SSEConnectionState$,
-  setSSEConnectionState,
-  setSSEConnectingState,
   SSELog$,
   setSSELog,
   addSSELogLine,
 } from "~/newstore/SSESession"
-import { useStream } from "~/helpers/utils/composables"
+import {
+  useNuxt,
+  useStream,
+  useToast,
+  useI18n,
+  useStreamSubscriber,
+  useReadonlyStream,
+} from "~/helpers/utils/composables"
+import { SSEConnection } from "~/helpers/realtime/SSEConnection"
 
-export default defineComponent({
-  setup() {
-    return {
-      connectionSSEState: useStream(
-        SSEConnectionState$,
-        false,
-        setSSEConnectionState
-      ),
-      connectingState: useStream(
-        SSEConnectingState$,
-        false,
-        setSSEConnectingState
-      ),
-      server: useStream(SSEEndpoint$, "", setSSEEndpoint),
-      eventType: useStream(SSEEventType$, "", setSSEEventType),
-      sse: useStream(SSESocket$, null, setSSESocket),
-      log: useStream(SSELog$, [], setSSELog),
-    }
-  },
-  data() {
-    return {
-      isUrlValid: true,
-    }
-  },
-  computed: {
-    serverValid() {
-      return this.isUrlValid
-    },
-  },
-  watch: {
-    server() {
-      this.debouncer()
-    },
-  },
-  created() {
-    if (process.browser) {
-      this.worker = this.$worker.createRejexWorker()
-      this.worker.addEventListener("message", this.workerResponseHandler)
-    }
-  },
-  destroyed() {
-    this.worker.terminate()
-  },
-  methods: {
-    debouncer: debounce(function () {
-      this.worker.postMessage({ type: "sse", url: this.server })
-    }, 1000),
-    workerResponseHandler({ data }) {
-      if (data.url === this.url) this.isUrlValid = data.result
-    },
-    toggleSSEConnection() {
-      // If it is connecting:
-      if (!this.connectionSSEState) return this.start()
-      // Otherwise, it's disconnecting.
-      else return this.stop()
-    },
-    start() {
-      this.connectingState = true
-      this.log = [
-        {
-          payload: this.$t("state.connecting_to", { name: this.server }),
-          source: "info",
-          event: "connecting",
-          ts: Date.now(),
-        },
-      ]
-      if (typeof EventSource !== "undefined") {
-        try {
-          this.sse = new EventSource(this.server)
-          this.sse.onopen = () => {
-            this.connectingState = false
-            this.connectionSSEState = true
-            this.log = [
-              {
-                payload: this.$t("state.connected_to", { name: this.server }),
-                source: "info",
-                event: "connected",
-                ts: Date.now(),
-              },
-            ]
-            this.$toast.success(this.$t("state.connected"))
-          }
-          this.sse.onerror = () => {
-            this.handleSSEError()
-          }
-          this.sse.onclose = () => {
-            this.connectionSSEState = false
-            addSSELogLine({
-              payload: this.$t("state.disconnected_from", {
-                name: this.server,
-              }),
-              source: "disconnected",
-              event: "disconnected",
-              ts: Date.now(),
-            })
-            this.$toast.error(this.$t("state.disconnected"))
-          }
-          this.sse.addEventListener(this.eventType, ({ data }) => {
-            addSSELogLine({
-              payload: data,
-              source: "server",
-              ts: Date.now(),
-            })
-          })
-        } catch (e) {
-          this.handleSSEError(e)
-          this.$toast.error(this.$t("error.something_went_wrong"))
-        }
-      } else {
-        this.log = [
+const t = useI18n()
+const nuxt = useNuxt()
+const toast = useToast()
+const { subscribeToStream } = useStreamSubscriber()
+
+const sse = useStream(SSESocket$, new SSEConnection(), setSSESocket)
+const connectionState = useReadonlyStream(sse.value.connectionState$, "STOPPED")
+const server = useStream(SSEEndpoint$, "", setSSEEndpoint)
+const eventType = useStream(SSEEventType$, "", setSSEEventType)
+const log = useStream(SSELog$, [], setSSELog)
+
+const isUrlValid = ref(true)
+
+let worker: Worker
+
+const debouncer = debounce(function () {
+  worker.postMessage({ type: "sse", url: server.value })
+}, 1000)
+
+watch(server, (url) => {
+  if (url) debouncer()
+})
+
+const workerResponseHandler = ({
+  data,
+}: {
+  data: { url: string; result: boolean }
+}) => {
+  if (data.url === server.value) isUrlValid.value = data.result
+}
+
+onMounted(() => {
+  worker = nuxt.value.$worker.createRejexWorker()
+  worker.addEventListener("message", workerResponseHandler)
+
+  subscribeToStream(sse.value.event$, (event) => {
+    switch (event?.type) {
+      case "STARTING":
+        log.value = [
           {
-            payload: this.$t("error.browser_support_sse"),
-            source: "disconnected",
-            event: "error",
+            payload: `${t("state.connecting_to", { name: server.value })}`,
+            source: "info",
+            color: "var(--accent-color)",
+            ts: undefined,
+          },
+        ]
+        break
+
+      case "STARTED":
+        log.value = [
+          {
+            payload: `${t("state.connected_to", { name: server.value })}`,
+            source: "info",
+            color: "var(--accent-color)",
             ts: Date.now(),
           },
         ]
-      }
+        toast.success(`${t("state.connected")}`)
+        break
 
-      logHoppRequestRunToAnalytics({
-        platform: "sse",
-      })
-    },
-    handleSSEError(error) {
-      this.stop()
-      this.connectionSSEState = false
-      addSSELogLine({
-        payload: this.$t("error.something_went_wrong"),
-        source: "disconnected",
-        event: "error",
-        ts: Date.now(),
-      })
-      if (error !== null)
+      case "MESSAGE_RECEIVED":
         addSSELogLine({
-          payload: error,
-          source: "disconnected",
-          event: "error",
-          ts: Date.now(),
+          payload: event.message,
+          source: "server",
+          ts: event.time,
         })
-    },
-    stop() {
-      this.sse.close()
-      this.sse.onclose()
-    },
-    clearLogEntries() {
-      this.log = []
-    },
-  },
+        break
+
+      case "ERROR":
+        addSSELogLine({
+          payload: t("error.browser_support_sse").toString(),
+          source: "info",
+          color: "#ff5555",
+          ts: event.time,
+        })
+        break
+
+      case "STOPPED":
+        addSSELogLine({
+          payload: t("state.disconnected_from", {
+            name: server.value,
+          }).toString(),
+          source: "info",
+          color: "#ff5555",
+          ts: event.time,
+        })
+        toast.error(`${t("state.disconnected")}`)
+        break
+    }
+  })
 })
+
+// METHODS
+
+const toggleSSEConnection = () => {
+  // If it is connecting:
+  if (connectionState.value === "STOPPED") {
+    return sse.value.start(server.value, eventType.value)
+  }
+  // Otherwise, it's disconnecting.
+  sse.value.stop()
+}
+
+onUnmounted(() => {
+  worker.terminate()
+})
+const clearLogEntries = () => {
+  log.value = []
+}
 </script>
diff --git a/packages/hoppscotch-app/components/realtime/Websocket.vue b/packages/hoppscotch-app/components/realtime/Websocket.vue
index 9ac8705a8..ecf21fe4f 100644
--- a/packages/hoppscotch-app/components/realtime/Websocket.vue
+++ b/packages/hoppscotch-app/components/realtime/Websocket.vue
@@ -12,133 +12,156 @@
             type="url"
             autocomplete="off"
             spellcheck="false"
-            :class="{ error: !urlValid }"
-            :placeholder="$t('websocket.url')"
-            :disabled="connectionState"
-            @keyup.enter="urlValid ? toggleConnection() : null"
+            :class="{ error: !isUrlValid }"
+            :placeholder="`${t('websocket.url')}`"
+            :disabled="
+              connectionState === 'CONNECTED' ||
+              connectionState === 'CONNECTING'
+            "
+            @keyup.enter="isUrlValid ? toggleConnection() : null"
           />
           <ButtonPrimary
             id="connect"
-            :disabled="!urlValid"
+            :disabled="!isUrlValid"
             class="w-32"
             name="connect"
             :label="
-              !connectionState ? $t('action.connect') : $t('action.disconnect')
+              connectionState === 'DISCONNECTED'
+                ? t('action.connect')
+                : t('action.disconnect')
             "
-            :loading="connectingState"
+            :loading="connectionState === 'CONNECTING'"
             @click.native="toggleConnection"
           />
         </div>
       </div>
-      <div
-        class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
+      <SmartTabs
+        v-model="selectedTab"
+        styles="sticky bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
       >
-        <label class="font-semibold text-secondaryLight">
-          {{ $t("websocket.protocols") }}
-        </label>
-        <div class="flex">
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('action.clear_all')"
-            svg="trash-2"
-            @click.native="clearContent"
-          />
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('add.new')"
-            svg="plus"
-            @click.native="addProtocol"
-          />
-        </div>
-      </div>
-      <draggable
-        v-model="protocols"
-        animation="250"
-        handle=".draggable-handle"
-        draggable=".draggable-content"
-        ghost-class="cursor-move"
-        chosen-class="bg-primaryLight"
-        drag-class="cursor-grabbing"
-      >
-        <div
-          v-for="(protocol, index) of protocols"
-          :key="`protocol-${index}`"
-          class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
+        <SmartTab
+          :id="'communication'"
+          :label="`${$t('websocket.communication')}`"
         >
-          <span>
-            <ButtonSecondary
-              svg="grip-vertical"
-              class="cursor-auto text-primary hover:text-primary"
-              :class="{
-                'draggable-handle group-hover:text-secondaryLight !cursor-grab':
-                  index !== protocols?.length - 1,
-              }"
-              tabindex="-1"
+          <RealtimeCommunication
+            :is-connected="connectionState === 'CONNECTED'"
+            @send-message="sendMessage($event)"
+          ></RealtimeCommunication>
+        </SmartTab>
+        <SmartTab :id="'protocols'" :label="`${$t('websocket.protocols')}`">
+          <div
+            class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
+          >
+            <label class="font-semibold text-secondaryLight">
+              {{ t("websocket.protocols") }}
+            </label>
+            <div class="flex">
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('action.clear_all')"
+                svg="trash-2"
+                @click.native="clearContent"
+              />
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="t('add.new')"
+                svg="plus"
+                @click.native="addProtocol"
+              />
+            </div>
+          </div>
+          <draggable
+            v-model="protocols"
+            animation="250"
+            handle=".draggable-handle"
+            draggable=".draggable-content"
+            ghost-class="cursor-move"
+            chosen-class="bg-primaryLight"
+            drag-class="cursor-grabbing"
+          >
+            <div
+              v-for="(protocol, index) of protocols"
+              :key="`protocol-${index}`"
+              class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
+            >
+              <span>
+                <ButtonSecondary
+                  svg="grip-vertical"
+                  class="cursor-auto text-primary hover:text-primary"
+                  :class="{
+                    'draggable-handle group-hover:text-secondaryLight !cursor-grab':
+                      index !== protocols?.length - 1,
+                  }"
+                  tabindex="-1"
+                />
+              </span>
+              <input
+                v-model="protocol.value"
+                class="flex flex-1 px-4 py-2 bg-transparent"
+                :placeholder="`${t('count.protocol', { count: index + 1 })}`"
+                name="message"
+                type="text"
+                autocomplete="off"
+                @change="
+                  updateProtocol(index, {
+                    value: $event.target.value,
+                    active: protocol.active,
+                  })
+                "
+              />
+              <span>
+                <ButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="
+                    protocol.hasOwnProperty('active')
+                      ? protocol.active
+                        ? t('action.turn_off')
+                        : t('action.turn_on')
+                      : t('action.turn_off')
+                  "
+                  :svg="
+                    protocol.hasOwnProperty('active')
+                      ? protocol.active
+                        ? 'check-circle'
+                        : 'circle'
+                      : 'check-circle'
+                  "
+                  color="green"
+                  @click.native="
+                    updateProtocol(index, {
+                      value: protocol.value,
+                      active: !protocol.active,
+                    })
+                  "
+                />
+              </span>
+              <span>
+                <ButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="t('action.remove')"
+                  svg="trash"
+                  color="red"
+                  @click.native="deleteProtocol(index)"
+                />
+              </span>
+            </div>
+          </draggable>
+          <div
+            v-if="protocols.length === 0"
+            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+          >
+            <img
+              :src="`/images/states/${$colorMode.value}/add_category.svg`"
+              loading="lazy"
+              class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+              :alt="`${t('empty.protocols')}`"
             />
-          </span>
-          <input
-            v-model="protocol.value"
-            class="flex flex-1 px-4 py-2 bg-transparent"
-            :placeholder="$t('count.protocol', { count: index + 1 })"
-            name="message"
-            type="text"
-            autocomplete="off"
-            @change="
-              updateProtocol(index, {
-                value: $event.target.value,
-                active: protocol.active,
-              })
-            "
-          />
-          <span>
-            <ButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="
-                protocol.hasOwnProperty('active')
-                  ? protocol.active
-                    ? $t('action.turn_off')
-                    : $t('action.turn_on')
-                  : $t('action.turn_off')
-              "
-              :svg="
-                protocol.hasOwnProperty('active')
-                  ? protocol.active
-                    ? 'check-circle'
-                    : 'circle'
-                  : 'check-circle'
-              "
-              color="green"
-              @click.native="
-                updateProtocol(index, {
-                  value: protocol.value,
-                  active: !protocol.active,
-                })
-              "
-            />
-          </span>
-          <span>
-            <ButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('action.remove')"
-              svg="trash"
-              color="red"
-              @click.native="deleteProtocol({ index })"
-            />
-          </span>
-        </div>
-      </draggable>
-      <div
-        v-if="protocols.length === 0"
-        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
-      >
-        <img
-          :src="`/images/states/${$colorMode.value}/add_category.svg`"
-          loading="lazy"
-          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
-          :alt="$t('empty.protocols')"
-        />
-        <span class="mb-4 text-center">{{ $t("empty.protocols") }}</span>
-      </div>
+            <span class="mb-4 text-center">
+              {{ t("empty.protocols") }}
+            </span>
+          </div>
+        </SmartTab>
+      </SmartTabs>
     </template>
     <template #secondary>
       <RealtimeLog
@@ -147,45 +170,12 @@
         @delete="clearLogEntries()"
       />
     </template>
-    <template #sidebar>
-      <div class="flex items-center justify-between p-4">
-        <label
-          for="websocket-message"
-          class="font-semibold text-secondaryLight"
-          >{{ $t("websocket.communication") }}</label
-        >
-      </div>
-      <div class="flex px-4 space-x-2">
-        <input
-          id="websocket-message"
-          v-model="communication.input"
-          name="message"
-          type="text"
-          autocomplete="off"
-          :disabled="!connectionState"
-          :placeholder="$t('websocket.message')"
-          class="input"
-          @keyup.enter="connectionState ? sendMessage() : null"
-          @keyup.up="connectionState ? walkHistory('up') : null"
-          @keyup.down="connectionState ? walkHistory('down') : null"
-        />
-        <ButtonPrimary
-          id="send"
-          name="send"
-          :disabled="!connectionState"
-          :label="$t('action.send')"
-          @click.native="sendMessage"
-        />
-      </div>
-    </template>
   </AppPaneLayout>
 </template>
-
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { ref, watch, onUnmounted, onMounted } from "@nuxtjs/composition-api"
 import debounce from "lodash/debounce"
 import draggable from "vuedraggable"
-import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import {
   setWSEndpoint,
   WSEndpoint$,
@@ -195,244 +185,185 @@ import {
   deleteWSProtocol,
   updateWSProtocol,
   deleteAllWSProtocols,
-  WSSocket$,
-  setWSSocket,
-  setWSConnectionState,
-  setWSConnectingState,
-  WSConnectionState$,
-  WSConnectingState$,
   addWSLogLine,
   WSLog$,
   setWSLog,
+  HoppWSProtocol,
+  setWSSocket,
+  WSSocket$,
 } from "~/newstore/WebSocketSession"
-import { useStream } from "~/helpers/utils/composables"
+import {
+  useI18n,
+  useStream,
+  useToast,
+  useNuxt,
+  useStreamSubscriber,
+  useReadonlyStream,
+} from "~/helpers/utils/composables"
+import { WSConnection, WSErrorMessage } from "~/helpers/realtime/WSConnection"
 
-export default defineComponent({
-  components: {
-    draggable,
-  },
-  setup() {
-    return {
-      url: useStream(WSEndpoint$, "", setWSEndpoint),
-      protocols: useStream(WSProtocols$, [], setWSProtocols),
-      connectionState: useStream(
-        WSConnectionState$,
-        false,
-        setWSConnectionState
-      ),
-      connectingState: useStream(
-        WSConnectingState$,
-        false,
-        setWSConnectingState
-      ),
-      socket: useStream(WSSocket$, null, setWSSocket),
-      log: useStream(WSLog$, [], setWSLog),
-    }
-  },
-  data() {
-    return {
-      isUrlValid: true,
-      communication: {
-        input: "",
-      },
-      currentIndex: -1, // index of the message log array to put in input box
-      activeProtocols: [],
-    }
-  },
-  computed: {
-    urlValid() {
-      return this.isUrlValid
-    },
-  },
-  watch: {
-    url() {
-      this.debouncer()
-    },
-    protocols: {
-      handler(newVal) {
-        this.activeProtocols = newVal
-          .filter((item) =>
-            Object.prototype.hasOwnProperty.call(item, "active")
-              ? item.active === true
-              : true
-          )
-          .map(({ value }) => value)
-      },
-      deep: true,
-    },
-  },
-  created() {
-    if (process.browser) {
-      this.worker = this.$worker.createRejexWorker()
-      this.worker.addEventListener("message", this.workerResponseHandler)
-    }
-  },
-  destroyed() {
-    this.worker.terminate()
-  },
-  methods: {
-    clearContent() {
-      deleteAllWSProtocols()
-    },
-    debouncer: debounce(function () {
-      this.worker.postMessage({ type: "ws", url: this.url })
-    }, 1000),
-    workerResponseHandler({ data }) {
-      if (data.url === this.url) this.isUrlValid = data.result
-    },
-    toggleConnection() {
-      // If it is connecting:
-      if (!this.connectionState) return this.connect()
-      // Otherwise, it's disconnecting.
-      else return this.disconnect()
-    },
-    clearLogEntries() {
-      this.log = []
-    },
-    connect() {
-      this.log = [
-        {
-          payload: this.$t("state.connecting_to", { name: this.url }),
-          source: "info",
-          event: "connecting",
-          ts: Date.now(),
-        },
-      ]
-      try {
-        this.connectingState = true
-        this.socket = new WebSocket(this.url, this.activeProtocols)
-        this.socket.onopen = () => {
-          this.connectingState = false
-          this.connectionState = true
-          this.log = [
-            {
-              payload: this.$t("state.connected_to", { name: this.url }),
-              source: "info",
-              event: "connected",
-              ts: Date.now(),
-            },
-          ]
-          this.$toast.success(this.$t("state.connected"))
-        }
-        this.socket.onerror = () => {
-          this.handleError()
-        }
-        this.socket.onclose = () => {
-          this.connectionState = false
-          addWSLogLine({
-            payload: this.$t("state.disconnected_from", { name: this.url }),
-            source: "disconnected",
-            event: "disconnected",
-            ts: Date.now(),
-          })
-          this.$toast.error(this.$t("state.disconnected"))
-        }
-        this.socket.onmessage = ({ data }) => {
-          addWSLogLine({
-            payload: data,
-            source: "server",
-            ts: Date.now(),
-          })
-        }
-      } catch (e) {
-        this.handleError(e)
-        this.$toast.error(this.$t("error.something_went_wrong"))
-      }
+const nuxt = useNuxt()
+const t = useI18n()
+const toast = useToast()
+const { subscribeToStream } = useStreamSubscriber()
 
-      logHoppRequestRunToAnalytics({
-        platform: "wss",
-      })
-    },
-    disconnect() {
-      if (this.socket) {
-        this.socket.close()
-        this.connectionState = false
-        this.connectingState = false
-      }
-    },
-    handleError(error) {
-      this.disconnect()
-      this.connectionState = false
-      addWSLogLine({
-        payload: this.$t("error.something_went_wrong"),
-        source: "info",
-        event: "error",
-        ts: Date.now(),
-      })
-      if (error !== null)
+const selectedTab = ref<"communication" | "protocols">("communication")
+const url = useStream(WSEndpoint$, "", setWSEndpoint)
+const protocols = useStream(WSProtocols$, [], setWSProtocols)
+
+const socket = useStream(WSSocket$, new WSConnection(), setWSSocket)
+
+const connectionState = useReadonlyStream(
+  socket.value.connectionState$,
+  "DISCONNECTED"
+)
+
+const log = useStream(WSLog$, [], setWSLog)
+// DATA
+const isUrlValid = ref(true)
+const activeProtocols = ref<string[]>([])
+let worker: Worker
+watch(url, (newUrl) => {
+  if (newUrl) debouncer()
+})
+watch(
+  protocols,
+  (newProtocols) => {
+    activeProtocols.value = newProtocols
+      .filter((item) =>
+        Object.prototype.hasOwnProperty.call(item, "active")
+          ? item.active === true
+          : true
+      )
+      .map(({ value }) => value)
+  },
+  { deep: true }
+)
+const workerResponseHandler = ({
+  data,
+}: {
+  data: { url: string; result: boolean }
+}) => {
+  if (data.url === url.value) isUrlValid.value = data.result
+}
+
+const getErrorPayload = (error: WSErrorMessage): string => {
+  if (error instanceof SyntaxError) {
+    return error.message
+  }
+  return t("error.something_went_wrong").toString()
+}
+
+onMounted(() => {
+  worker = nuxt.value.$worker.createRejexWorker()
+  worker.addEventListener("message", workerResponseHandler)
+
+  subscribeToStream(socket.value.event$, (event) => {
+    switch (event?.type) {
+      case "CONNECTING":
+        log.value = [
+          {
+            payload: `${t("state.connecting_to", { name: url.value })}`,
+            source: "info",
+            color: "var(--accent-color)",
+            ts: undefined,
+          },
+        ]
+        break
+
+      case "CONNECTED":
+        log.value = [
+          {
+            payload: `${t("state.connected_to", { name: url.value })}`,
+            source: "info",
+            color: "var(--accent-color)",
+            ts: Date.now(),
+          },
+        ]
+        toast.success(`${t("state.connected")}`)
+        break
+
+      case "MESSAGE_SENT":
         addWSLogLine({
-          payload: error,
-          source: "info",
-          event: "error",
+          payload: event.message,
+          source: "client",
           ts: Date.now(),
         })
-    },
-    sendMessage() {
-      const message = this.communication.input
-      this.socket.send(message)
-      addWSLogLine({
-        payload: message,
-        source: "client",
-        ts: Date.now(),
-      })
-      this.communication.input = ""
-    },
-    walkHistory(direction) {
-      const clientMessages = this.log.filter(
-        ({ source }) => source === "client"
-      )
-      const length = clientMessages.length
-      switch (direction) {
-        case "up":
-          if (length > 0 && this.currentIndex !== 0) {
-            // does nothing if message log is empty or the currentIndex is 0 when up arrow is pressed
-            if (this.currentIndex === -1) {
-              this.currentIndex = length - 1
-              this.communication.input =
-                clientMessages[this.currentIndex].payload
-            } else if (this.currentIndex === 0) {
-              this.communication.input = clientMessages[0].payload
-            } else if (this.currentIndex > 0) {
-              this.currentIndex = this.currentIndex - 1
-              this.communication.input =
-                clientMessages[this.currentIndex].payload
-            }
-          }
-          break
-        case "down":
-          if (length > 0 && this.currentIndex > -1) {
-            if (this.currentIndex === length - 1) {
-              this.currentIndex = -1
-              this.communication.input = ""
-            } else if (this.currentIndex < length - 1) {
-              this.currentIndex = this.currentIndex + 1
-              this.communication.input =
-                clientMessages[this.currentIndex].payload
-            }
-          }
-          break
-      }
-    },
-    addProtocol() {
-      addWSProtocol({ value: "", active: true })
-    },
-    deleteProtocol({ index }) {
-      const oldProtocols = this.protocols.slice()
-      deleteWSProtocol(index)
-      this.$toast.success(this.$t("state.deleted"), {
-        action: {
-          text: this.$t("action.undo"),
-          duration: 4000,
-          onClick: (_, toastObject) => {
-            this.protocols = oldProtocols
-            toastObject.remove()
-          },
-        },
-      })
-    },
-    updateProtocol(index, updated) {
-      updateWSProtocol(index, updated)
-    },
-  },
+        break
+
+      case "MESSAGE_RECEIVED":
+        addWSLogLine({
+          payload: event.message,
+          source: "server",
+          ts: event.time,
+        })
+        break
+
+      case "ERROR":
+        addWSLogLine({
+          payload: getErrorPayload(event.error),
+          source: "info",
+          color: "#ff5555",
+          ts: event.time,
+        })
+        break
+
+      case "DISCONNECTED":
+        addWSLogLine({
+          payload: t("state.disconnected_from", { name: url.value }).toString(),
+          source: "info",
+          color: "#ff5555",
+          ts: event.time,
+        })
+        toast.error(`${t("state.disconnected")}`)
+        break
+    }
+  })
 })
+
+onUnmounted(() => {
+  if (worker) worker.terminate()
+})
+const clearContent = () => {
+  deleteAllWSProtocols()
+}
+const debouncer = debounce(function () {
+  worker.postMessage({ type: "ws", url: url.value })
+}, 1000)
+
+const toggleConnection = () => {
+  // If it is connecting:
+  if (connectionState.value === "DISCONNECTED") {
+    return socket.value.connect(url.value, activeProtocols.value)
+  }
+  // Otherwise, it's disconnecting.
+  socket.value.disconnect()
+}
+
+const sendMessage = (event: { message: string; eventName: string }) => {
+  socket.value.sendMessage(event)
+}
+const addProtocol = () => {
+  addWSProtocol({ value: "", active: true })
+}
+const deleteProtocol = (index: number) => {
+  const oldProtocols = protocols.value.slice()
+  deleteWSProtocol(index)
+  toast.success(`${t("state.deleted")}`, {
+    duration: 4000,
+    action: {
+      text: `${t("action.undo")}`,
+      onClick: (_, toastObject) => {
+        protocols.value = oldProtocols
+        toastObject.goAway()
+      },
+    },
+  })
+}
+const updateProtocol = (index: number, updated: HoppWSProtocol) => {
+  updateWSProtocol(index, updated)
+}
+const clearLogEntries = () => {
+  log.value = []
+}
 </script>
diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index fd7b25c1d..7e6ed56f8 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -28,8 +28,6 @@ import { javascriptLanguage } from "@codemirror/lang-javascript"
 import { xmlLanguage } from "@codemirror/lang-xml"
 import { jsonLanguage } from "@codemirror/lang-json"
 import { GQLLanguage } from "@hoppscotch/codemirror-lang-graphql"
-import { pipe } from "fp-ts/function"
-import * as O from "fp-ts/Option"
 import { StreamLanguage } from "@codemirror/stream-parser"
 import { html } from "@codemirror/legacy-modes/mode/xml"
 import { shell } from "@codemirror/legacy-modes/mode/shell"
@@ -96,8 +94,10 @@ const hoppCompleterExt = (completer: Completer): Extension => {
   })
 }
 
-const hoppLinterExt = (hoppLinter: LinterDefinition): Extension => {
+const hoppLinterExt = (hoppLinter: LinterDefinition | undefined): Extension => {
   return linter(async (view) => {
+    if (!hoppLinter) return []
+
     // Requires full document scan, hence expensive on big files, force disable on big files ?
     const linterResult = await hoppLinter(
       view.state.doc.toJSON().join(view.state.lineBreak)
@@ -119,16 +119,16 @@ const hoppLinterExt = (hoppLinter: LinterDefinition): Extension => {
 }
 
 const hoppLang = (
-  language: Language,
+  language: Language | undefined,
   linter?: LinterDefinition | undefined,
   completer?: Completer | undefined
-) => {
+): Extension | LanguageSupport => {
   const exts: Extension[] = []
 
-  if (linter) exts.push(hoppLinterExt(linter))
+  exts.push(hoppLinterExt(linter))
   if (completer) exts.push(hoppCompleterExt(completer))
 
-  return new LanguageSupport(language, exts)
+  return language ? new LanguageSupport(language, exts) : exts
 }
 
 const getLanguage = (langMime: string): Language | null => {
@@ -156,12 +156,7 @@ const getEditorLanguage = (
   langMime: string,
   linter: LinterDefinition | undefined,
   completer: Completer | undefined
-): Extension =>
-  pipe(
-    O.fromNullable(getLanguage(langMime)),
-    O.map((lang) => hoppLang(lang, linter, completer)),
-    O.getOrElseW(() => [])
-  )
+): Extension => hoppLang(getLanguage(langMime) ?? undefined, linter, completer)
 
 export function useCodemirror(
   el: Ref<any | null>,
diff --git a/packages/hoppscotch-app/helpers/realtime/MQTTConnection.ts b/packages/hoppscotch-app/helpers/realtime/MQTTConnection.ts
new file mode 100644
index 000000000..978663d57
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/realtime/MQTTConnection.ts
@@ -0,0 +1,223 @@
+import Paho, { ConnectionOptions } from "paho-mqtt"
+import { BehaviorSubject, Subject } from "rxjs"
+import { logHoppRequestRunToAnalytics } from "../fb/analytics"
+
+export type MQTTMessage = { topic: string; message: string }
+export type MQTTError =
+  | { type: "CONNECTION_NOT_ESTABLISHED"; value: unknown }
+  | { type: "CONNECTION_LOST" }
+  | { type: "CONNECTION_FAILED" }
+  | { type: "SUBSCRIPTION_FAILED"; topic: string }
+  | { type: "PUBLISH_ERROR"; topic: string; message: string }
+
+export type MQTTEvent = { time: number } & (
+  | { type: "CONNECTING" }
+  | { type: "CONNECTED" }
+  | { type: "MESSAGE_SENT"; message: MQTTMessage }
+  | { type: "SUBSCRIBED"; topic: string }
+  | { type: "SUBSCRIPTION_FAILED"; topic: string }
+  | { type: "MESSAGE_RECEIVED"; message: MQTTMessage }
+  | { type: "DISCONNECTED"; manual: boolean }
+  | { type: "ERROR"; error: MQTTError }
+)
+
+export type ConnectionState = "CONNECTING" | "CONNECTED" | "DISCONNECTED"
+
+export class MQTTConnection {
+  subscriptionState$ = new BehaviorSubject<boolean>(false)
+  connectionState$ = new BehaviorSubject<ConnectionState>("DISCONNECTED")
+  event$: Subject<MQTTEvent> = new Subject()
+
+  private mqttClient: Paho.Client | undefined
+  private manualDisconnect = false
+
+  private addEvent(event: MQTTEvent) {
+    this.event$.next(event)
+  }
+
+  connect(url: string, username: string, password: string) {
+    try {
+      this.connectionState$.next("CONNECTING")
+
+      this.addEvent({
+        time: Date.now(),
+        type: "CONNECTING",
+      })
+
+      const parseUrl = new URL(url)
+      const { hostname, pathname, port } = parseUrl
+      this.mqttClient = new Paho.Client(
+        `${hostname + (pathname !== "/" ? pathname : "")}`,
+        port !== "" ? Number(port) : 8081,
+        "hoppscotch"
+      )
+      const connectOptions: ConnectionOptions = {
+        onSuccess: this.onConnectionSuccess.bind(this),
+        onFailure: this.onConnectionFailure.bind(this),
+        useSSL: parseUrl.protocol !== "ws:",
+      }
+      if (username !== "") {
+        connectOptions.userName = username
+      }
+      if (password !== "") {
+        connectOptions.password = password
+      }
+      this.mqttClient.connect(connectOptions)
+      this.mqttClient.onConnectionLost = this.onConnectionLost.bind(this)
+      this.mqttClient.onMessageArrived = this.onMessageArrived.bind(this)
+    } catch (e) {
+      this.handleError(e)
+    }
+
+    logHoppRequestRunToAnalytics({
+      platform: "mqtt",
+    })
+  }
+
+  onConnectionFailure() {
+    this.connectionState$.next("DISCONNECTED")
+    this.addEvent({
+      time: Date.now(),
+      type: "ERROR",
+      error: {
+        type: "CONNECTION_FAILED",
+      },
+    })
+  }
+
+  onConnectionSuccess() {
+    this.connectionState$.next("CONNECTED")
+    this.addEvent({
+      type: "CONNECTED",
+      time: Date.now(),
+    })
+  }
+
+  onConnectionLost() {
+    this.connectionState$.next("DISCONNECTED")
+    if (this.manualDisconnect) {
+      this.addEvent({
+        time: Date.now(),
+        type: "DISCONNECTED",
+        manual: this.manualDisconnect,
+      })
+    } else {
+      this.addEvent({
+        time: Date.now(),
+        type: "ERROR",
+        error: {
+          type: "CONNECTION_LOST",
+        },
+      })
+    }
+    this.manualDisconnect = false
+    this.subscriptionState$.next(false)
+  }
+
+  onMessageArrived({
+    payloadString: message,
+    destinationName: topic,
+  }: {
+    payloadString: string
+    destinationName: string
+  }) {
+    this.addEvent({
+      time: Date.now(),
+      type: "MESSAGE_RECEIVED",
+      message: {
+        topic,
+        message,
+      },
+    })
+  }
+
+  private handleError(error: unknown) {
+    this.disconnect()
+    this.addEvent({
+      time: Date.now(),
+      type: "ERROR",
+      error: {
+        type: "CONNECTION_NOT_ESTABLISHED",
+        value: error,
+      },
+    })
+  }
+
+  publish(topic: string, message: string) {
+    if (this.connectionState$.value === "DISCONNECTED") return
+
+    try {
+      // it was publish
+      this.mqttClient?.send(topic, message, 0, false)
+      this.addEvent({
+        time: Date.now(),
+        type: "MESSAGE_SENT",
+        message: {
+          topic,
+          message,
+        },
+      })
+    } catch (e) {
+      this.addEvent({
+        time: Date.now(),
+        type: "ERROR",
+        error: {
+          type: "PUBLISH_ERROR",
+          topic,
+          message,
+        },
+      })
+    }
+  }
+
+  subscribe(topic: string) {
+    try {
+      this.mqttClient?.subscribe(topic, {
+        onSuccess: this.usubSuccess.bind(this, topic),
+        onFailure: this.usubFailure.bind(this, topic),
+      })
+    } catch (e) {
+      this.addEvent({
+        time: Date.now(),
+        type: "ERROR",
+        error: {
+          type: "SUBSCRIPTION_FAILED",
+          topic,
+        },
+      })
+    }
+  }
+
+  usubSuccess(topic: string) {
+    this.subscriptionState$.next(!this.subscriptionState$.value)
+    this.addEvent({
+      time: Date.now(),
+      type: "SUBSCRIBED",
+      topic,
+    })
+  }
+
+  usubFailure(topic: string) {
+    this.addEvent({
+      time: Date.now(),
+      type: "ERROR",
+      error: {
+        type: "SUBSCRIPTION_FAILED",
+        topic,
+      },
+    })
+  }
+
+  unsubscribe(topic: string) {
+    this.mqttClient?.unsubscribe(topic, {
+      onSuccess: this.usubSuccess.bind(this, topic),
+      onFailure: this.usubFailure.bind(this, topic),
+    })
+  }
+
+  disconnect() {
+    this.manualDisconnect = true
+    this.mqttClient?.disconnect()
+    this.connectionState$.next("DISCONNECTED")
+  }
+}
diff --git a/packages/hoppscotch-app/helpers/realtime/SIOClients.ts b/packages/hoppscotch-app/helpers/realtime/SIOClients.ts
new file mode 100644
index 000000000..c0a9fc20e
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/realtime/SIOClients.ts
@@ -0,0 +1,84 @@
+import wildcard from "socketio-wildcard"
+import ClientV2 from "socket.io-client-v2"
+import { io as ClientV4, Socket as SocketV4 } from "socket.io-client-v4"
+import { io as ClientV3, Socket as SocketV3 } from "socket.io-client-v3"
+
+type Options = {
+  path: string
+  auth: {
+    token: string | undefined
+  }
+}
+
+type PossibleEvent =
+  | "connect"
+  | "connect_error"
+  | "reconnect_error"
+  | "error"
+  | "disconnect"
+  | "*"
+
+export interface SIOClient {
+  connect(url: string, opts?: Options): void
+  on(event: PossibleEvent, cb: (data: any) => void): void
+  emit(event: string, data: any, cb: (data: any) => void): void
+  close(): void
+}
+
+export class SIOClientV4 implements SIOClient {
+  private client: SocketV4 | undefined
+  connect(url: string, opts?: Options) {
+    this.client = ClientV4(url, opts)
+  }
+
+  on(event: PossibleEvent, cb: (data: any) => void) {
+    this.client?.on(event, cb)
+  }
+
+  emit(event: string, data: any, cb: (data: any) => void): void {
+    this.client?.emit(event, data, cb)
+  }
+
+  close(): void {
+    this.client?.close()
+  }
+}
+
+export class SIOClientV3 implements SIOClient {
+  private client: SocketV3 | undefined
+  connect(url: string, opts?: Options) {
+    this.client = ClientV3(url, opts)
+  }
+
+  on(event: PossibleEvent, cb: (data: any) => void): void {
+    this.client?.on(event, cb)
+  }
+
+  emit(event: string, data: any, cb: (data: any) => void): void {
+    this.client?.emit(event, data, cb)
+  }
+
+  close(): void {
+    this.client?.close()
+  }
+}
+
+export class SIOClientV2 implements SIOClient {
+  private client: any | undefined
+  connect(url: string, opts?: Options) {
+    this.client = new ClientV2(url, opts)
+    wildcard(ClientV2.Manager)(this.client)
+  }
+
+  on(event: PossibleEvent, cb: (data: any) => void): void {
+    this.client?.on(event, cb)
+  }
+
+  emit(event: string, data: any, cb: (data: any) => void): void {
+    this.client?.emit(event, data, cb)
+  }
+
+  close(): void {
+    this.client?.close()
+  }
+}
diff --git a/packages/hoppscotch-app/helpers/realtime/SIOConnection.ts b/packages/hoppscotch-app/helpers/realtime/SIOConnection.ts
new file mode 100644
index 000000000..5f215685b
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/realtime/SIOConnection.ts
@@ -0,0 +1,163 @@
+import { BehaviorSubject, Subject } from "rxjs"
+import { logHoppRequestRunToAnalytics } from "../fb/analytics"
+import { SIOClientV2, SIOClientV3, SIOClientV4, SIOClient } from "./SIOClients"
+import { SIOClientVersion } from "~/newstore/SocketIOSession"
+
+export const SOCKET_CLIENTS = {
+  v2: SIOClientV2,
+  v3: SIOClientV3,
+  v4: SIOClientV4,
+} as const
+
+type SIOAuth = { type: "None" } | { type: "Bearer"; token: string }
+
+export type ConnectionOption = {
+  url: string
+  path: string
+  clientVersion: SIOClientVersion
+  auth: SIOAuth | undefined
+}
+
+export type SIOMessage = {
+  eventName: string
+  value: unknown
+}
+
+type SIOErrorType = "CONNECTION" | "RECONNECT_ERROR" | "UNKNOWN"
+export type SIOError = {
+  type: SIOErrorType
+  value: unknown
+}
+
+export type SIOEvent = { time: number } & (
+  | { type: "CONNECTING" }
+  | { type: "CONNECTED" }
+  | { type: "MESSAGE_SENT"; message: SIOMessage }
+  | { type: "MESSAGE_RECEIVED"; message: SIOMessage }
+  | { type: "DISCONNECTED"; manual: boolean }
+  | { type: "ERROR"; error: SIOError }
+)
+
+export type ConnectionState = "CONNECTING" | "CONNECTED" | "DISCONNECTED"
+
+export class SIOConnection {
+  connectionState$: BehaviorSubject<ConnectionState>
+  event$: Subject<SIOEvent> = new Subject()
+  socket: SIOClient | undefined
+  constructor() {
+    this.connectionState$ = new BehaviorSubject<ConnectionState>("DISCONNECTED")
+  }
+
+  private addEvent(event: SIOEvent) {
+    this.event$.next(event)
+  }
+
+  connect({ url, path, clientVersion, auth }: ConnectionOption) {
+    this.connectionState$.next("CONNECTING")
+    this.addEvent({
+      time: Date.now(),
+      type: "CONNECTING",
+    })
+    try {
+      this.socket = new SOCKET_CLIENTS[clientVersion]()
+
+      if (auth?.type === "Bearer") {
+        this.socket.connect(url, {
+          path,
+          auth: {
+            token: auth.token,
+          },
+        })
+      } else {
+        this.socket.connect(url)
+      }
+
+      this.socket.on("connect", () => {
+        this.connectionState$.next("CONNECTED")
+        this.addEvent({
+          type: "CONNECTED",
+          time: Date.now(),
+        })
+      })
+
+      this.socket.on("*", ({ data }: { data: string[] }) => {
+        const [eventName, message] = data
+        this.addEvent({
+          message: { eventName, value: message },
+          type: "MESSAGE_RECEIVED",
+          time: Date.now(),
+        })
+      })
+
+      this.socket.on("connect_error", (error: unknown) => {
+        this.handleError(error, "CONNECTION")
+      })
+
+      this.socket.on("reconnect_error", (error: unknown) => {
+        this.handleError(error, "RECONNECT_ERROR")
+      })
+
+      this.socket.on("error", (error: unknown) => {
+        this.handleError(error, "UNKNOWN")
+      })
+
+      this.socket.on("disconnect", () => {
+        this.connectionState$.next("DISCONNECTED")
+        this.addEvent({
+          type: "DISCONNECTED",
+          time: Date.now(),
+          manual: true,
+        })
+      })
+    } catch (error) {
+      this.handleError(error, "CONNECTION")
+    }
+
+    logHoppRequestRunToAnalytics({
+      platform: "socketio",
+    })
+  }
+
+  private handleError(error: unknown, type: SIOErrorType) {
+    this.disconnect()
+    this.addEvent({
+      time: Date.now(),
+      type: "ERROR",
+      error: {
+        type,
+        value: error,
+      },
+    })
+  }
+
+  sendMessage(event: { message: string; eventName: string }) {
+    if (this.connectionState$.value === "DISCONNECTED") return
+    const { message, eventName } = event
+
+    this.socket?.emit(eventName, message, (data) => {
+      // receive response from server
+      this.addEvent({
+        time: Date.now(),
+        type: "MESSAGE_RECEIVED",
+        message: {
+          eventName,
+          value: data,
+        },
+      })
+    })
+
+    this.addEvent({
+      time: Date.now(),
+      type: "MESSAGE_SENT",
+      message: {
+        eventName,
+        value: message,
+      },
+    })
+  }
+
+  disconnect() {
+    this.socket?.close()
+    this.connectionState$.next("DISCONNECTED")
+  }
+}
diff --git a/packages/hoppscotch-app/helpers/realtime/SSEConnection.ts b/packages/hoppscotch-app/helpers/realtime/SSEConnection.ts
new file mode 100644
index 000000000..54acb2576
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/realtime/SSEConnection.ts
@@ -0,0 +1,86 @@
+import { BehaviorSubject, Subject } from "rxjs"
+import { logHoppRequestRunToAnalytics } from "../fb/analytics"
+
+export type SSEEvent = { time: number } & (
+  | { type: "STARTING" }
+  | { type: "STARTED" }
+  | { type: "MESSAGE_RECEIVED"; message: string }
+  | { type: "STOPPED"; manual: boolean }
+  | { type: "ERROR"; error: Event | null }
+)
+
+export type ConnectionState = "STARTING" | "STARTED" | "STOPPED"
+
+export class SSEConnection {
+  connectionState$: BehaviorSubject<ConnectionState>
+  event$: Subject<SSEEvent> = new Subject()
+  sse: EventSource | undefined
+  constructor() {
+    this.connectionState$ = new BehaviorSubject<ConnectionState>("STOPPED")
+  }
+
+  private addEvent(event: SSEEvent) {
+    this.event$.next(event)
+  }
+
+  start(url: string, eventType: string) {
+    this.connectionState$.next("STARTING")
+    this.addEvent({
+      time: Date.now(),
+      type: "STARTING",
+    })
+    if (typeof EventSource !== "undefined") {
+      try {
+        this.sse = new EventSource(url)
+        this.sse.onopen = () => {
+          this.connectionState$.next("STARTED")
+          this.addEvent({
+            type: "STARTED",
+            time: Date.now(),
+          })
+        }
+        this.sse.onerror = this.handleError
+        this.sse.addEventListener(eventType, ({ data }) => {
+          this.addEvent({
+            type: "MESSAGE_RECEIVED",
+            message: data,
+            time: Date.now(),
+          })
+        })
+      } catch (error) {
+        // A generic event type returned if anything goes wrong or browser doesn't support SSE
+        // https://developer.mozilla.org/en-US/docs/Web/API/EventSource/error_event#event_type
+        this.handleError(error as Event)
+      }
+    } else {
+      this.addEvent({
+        type: "ERROR",
+        time: Date.now(),
+        error: null,
+      })
+    }
+
+    logHoppRequestRunToAnalytics({
+      platform: "sse",
+    })
+  }
+
+  private handleError(error: Event) {
+    this.stop()
+    this.addEvent({
+      time: Date.now(),
+      type: "ERROR",
+      error,
+    })
+  }
+
+  stop() {
+    this.sse?.close()
+    this.connectionState$.next("STOPPED")
+    this.addEvent({
+      type: "STOPPED",
+      time: Date.now(),
+      manual: true,
+    })
+  }
+}
diff --git a/packages/hoppscotch-app/helpers/realtime/WSConnection.ts b/packages/hoppscotch-app/helpers/realtime/WSConnection.ts
new file mode 100644
index 000000000..f0c4a1616
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/realtime/WSConnection.ts
@@ -0,0 +1,102 @@
+import { BehaviorSubject, Subject } from "rxjs"
+import { logHoppRequestRunToAnalytics } from "../fb/analytics"
+
+export type WSErrorMessage = SyntaxError | Event
+
+export type WSEvent = { time: number } & (
+  | { type: "CONNECTING" }
+  | { type: "CONNECTED" }
+  | { type: "MESSAGE_SENT"; message: string }
+  | { type: "MESSAGE_RECEIVED"; message: string }
+  | { type: "DISCONNECTED"; manual: boolean }
+  | { type: "ERROR"; error: WSErrorMessage }
+)
+
+export type ConnectionState = "CONNECTING" | "CONNECTED" | "DISCONNECTED"
+
+export class WSConnection {
+  connectionState$: BehaviorSubject<ConnectionState>
+  event$: Subject<WSEvent> = new Subject()
+  socket: WebSocket | undefined
+
+  constructor() {
+    this.connectionState$ = new BehaviorSubject<ConnectionState>("DISCONNECTED")
+  }
+
+  private addEvent(event: WSEvent) {
+    this.event$.next(event)
+  }
+
+  connect(url: string, protocols: string[]) {
+    try {
+      this.connectionState$.next("CONNECTING")
+      this.socket = new WebSocket(url, protocols)
+
+      this.addEvent({
+        time: Date.now(),
+        type: "CONNECTING",
+      })
+
+      this.socket.onopen = () => {
+        this.connectionState$.next("CONNECTED")
+        this.addEvent({
+          type: "CONNECTED",
+          time: Date.now(),
+        })
+      }
+
+      this.socket.onerror = (error) => {
+        this.handleError(error)
+      }
+
+      this.socket.onclose = () => {
+        this.connectionState$.next("DISCONNECTED")
+        this.addEvent({
+          type: "DISCONNECTED",
+          time: Date.now(),
+          manual: true,
+        })
+      }
+
+      this.socket.onmessage = ({ data }) => {
+        this.addEvent({
+          time: Date.now(),
+          type: "MESSAGE_RECEIVED",
+          message: data,
+        })
+      }
+    } catch (error) {
+      // We will have SyntaxError if anything goes wrong with WebSocket constructor
+      // See https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/WebSocket#exceptions
+      this.handleError(error as SyntaxError)
+    }
+
+    logHoppRequestRunToAnalytics({
+      platform: "wss",
+    })
+  }
+
+  private handleError(error: WSErrorMessage) {
+    this.disconnect()
+    this.addEvent({
+      time: Date.now(),
+      type: "ERROR",
+      error,
+    })
+  }
+
+  sendMessage(event: { message: string; eventName: string }) {
+    if (this.connectionState$.value === "DISCONNECTED") return
+    const { message } = event
+    this.socket?.send(message)
+    this.addEvent({
+      time: Date.now(),
+      type: "MESSAGE_SENT",
+      message,
+    })
+  }
+
+  disconnect() {
+    this.socket?.close()
+  }
+}
diff --git a/packages/hoppscotch-app/helpers/types/HoppRealtimeLog.ts b/packages/hoppscotch-app/helpers/types/HoppRealtimeLog.ts
index 4132a487d..9756fce72 100644
--- a/packages/hoppscotch-app/helpers/types/HoppRealtimeLog.ts
+++ b/packages/hoppscotch-app/helpers/types/HoppRealtimeLog.ts
@@ -1,8 +1,9 @@
 export type HoppRealtimeLogLine = {
+  prefix?: string
   payload: string
   source: string
   color?: string
-  ts: string
+  ts: number | undefined
 }
 
 export type HoppRealtimeLog = HoppRealtimeLogLine[]
diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index 458ac5f19..8b5ab871f 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -508,7 +508,8 @@
     "event_name": "Event Name",
     "events": "Events",
     "log": "Log",
-    "url": "URL"
+    "url": "URL",
+    "connection_not_authorized": "This SocketIO connection does not use any authentication."
   },
   "sse": {
     "event_type": "Event type",
@@ -538,7 +539,19 @@
     "loading": "Loading...",
     "none": "None",
     "nothing_found": "Nothing found for",
-    "waiting_send_request": "Waiting to send request"
+    "waiting_send_request": "Waiting to send request",
+    "subscribed_success": "Successfully subscribed to topic: {topic}",
+    "unsubscribed_success": "Successfully unsubscribed from topic: {topic}",
+    "subscribed_failed": "Failed to subscribe to topic: {topic}",
+    "unsubscribed_failed": "Failed to unsubscribe from topic: {topic}",
+    "published_message": "Published message: {message} to topic: {topic}",
+    "published_error": "Something went wrong while publishing msg: {topic} to topic: {message}",
+    "message_received": "Message: {message} arrived on topic: {topic}",
+    "mqtt_subscription_failed": "Something went wrong while subscribing to topic: {topic}",
+    "connection_lost": "Connection lost",
+    "connection_failed": "Connection failed",
+    "connection_error": "Failed to connect",
+    "reconnection_error": "Failed to reconnect"
   },
   "support": {
     "changelog": "Read more about latest releases",
diff --git a/packages/hoppscotch-app/newstore/MQTTSession.ts b/packages/hoppscotch-app/newstore/MQTTSession.ts
index e67382709..cad1e8d68 100644
--- a/packages/hoppscotch-app/newstore/MQTTSession.ts
+++ b/packages/hoppscotch-app/newstore/MQTTSession.ts
@@ -1,6 +1,6 @@
-import { pluck, distinctUntilChanged } from "rxjs/operators"
-import { Client as MQTTClient } from "paho-mqtt"
+import { distinctUntilChanged, pluck } from "rxjs/operators"
 import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
+import { MQTTConnection } from "~/helpers/realtime/MQTTConnection"
 import {
   HoppRealtimeLog,
   HoppRealtimeLogLine,
@@ -12,11 +12,9 @@ type HoppMQTTRequest = {
 
 type HoppMQTTSession = {
   request: HoppMQTTRequest
-  connectingState: boolean
-  connectionState: boolean
   subscriptionState: boolean
   log: HoppRealtimeLog
-  socket: MQTTClient | null
+  socket: MQTTConnection
 }
 
 const defaultMQTTRequest: HoppMQTTRequest = {
@@ -25,10 +23,8 @@ const defaultMQTTRequest: HoppMQTTRequest = {
 
 const defaultMQTTSession: HoppMQTTSession = {
   request: defaultMQTTRequest,
-  connectionState: false,
-  connectingState: false,
   subscriptionState: false,
-  socket: null,
+  socket: new MQTTConnection(),
   log: [],
 }
 
@@ -48,21 +44,11 @@ const dispatchers = defineDispatchers({
       },
     }
   },
-  setSocket(_: HoppMQTTSession, { socket }: { socket: MQTTClient }) {
+  setConn(_: HoppMQTTSession, { socket }: { socket: MQTTConnection }) {
     return {
       socket,
     }
   },
-  setConnectionState(_: HoppMQTTSession, { state }: { state: boolean }) {
-    return {
-      connectionState: state,
-    }
-  },
-  setConnectingState(_: HoppMQTTSession, { state }: { state: boolean }) {
-    return {
-      connectingState: state,
-    }
-  },
   setSubscriptionState(_: HoppMQTTSession, { state }: { state: boolean }) {
     return {
       subscriptionState: state,
@@ -100,33 +86,15 @@ export function setMQTTEndpoint(newEndpoint: string) {
   })
 }
 
-export function setMQTTSocket(socket: MQTTClient) {
+export function setMQTTConn(socket: MQTTConnection) {
   MQTTSessionStore.dispatch({
-    dispatcher: "setSocket",
+    dispatcher: "setConn",
     payload: {
       socket,
     },
   })
 }
 
-export function setMQTTConnectionState(state: boolean) {
-  MQTTSessionStore.dispatch({
-    dispatcher: "setConnectionState",
-    payload: {
-      state,
-    },
-  })
-}
-
-export function setMQTTConnectingState(state: boolean) {
-  MQTTSessionStore.dispatch({
-    dispatcher: "setConnectingState",
-    payload: {
-      state,
-    },
-  })
-}
-
 export function setMQTTSubscriptionState(state: boolean) {
   MQTTSessionStore.dispatch({
     dispatcher: "setSubscriptionState",
@@ -179,7 +147,7 @@ export const MQTTSubscriptionState$ = MQTTSessionStore.subject$.pipe(
   distinctUntilChanged()
 )
 
-export const MQTTSocket$ = MQTTSessionStore.subject$.pipe(
+export const MQTTConn$ = MQTTSessionStore.subject$.pipe(
   pluck("socket"),
   distinctUntilChanged()
 )
diff --git a/packages/hoppscotch-app/newstore/SSESession.ts b/packages/hoppscotch-app/newstore/SSESession.ts
index fec8770d7..3577483ae 100644
--- a/packages/hoppscotch-app/newstore/SSESession.ts
+++ b/packages/hoppscotch-app/newstore/SSESession.ts
@@ -4,6 +4,7 @@ import {
   HoppRealtimeLog,
   HoppRealtimeLogLine,
 } from "~/helpers/types/HoppRealtimeLog"
+import { SSEConnection } from "~/helpers/realtime/SSEConnection"
 
 type HoppSSERequest = {
   endpoint: string
@@ -12,10 +13,8 @@ type HoppSSERequest = {
 
 type HoppSSESession = {
   request: HoppSSERequest
-  connectingState: boolean
-  connectionState: boolean
   log: HoppRealtimeLog
-  socket: EventSource | null
+  socket: SSEConnection
 }
 
 const defaultSSERequest: HoppSSERequest = {
@@ -25,9 +24,7 @@ const defaultSSERequest: HoppSSERequest = {
 
 const defaultSSESession: HoppSSESession = {
   request: defaultSSERequest,
-  connectionState: false,
-  connectingState: false,
-  socket: null,
+  socket: new SSEConnection(),
   log: [],
 }
 
@@ -56,21 +53,11 @@ const dispatchers = defineDispatchers({
       },
     }
   },
-  setSocket(_: HoppSSESession, { socket }: { socket: EventSource }) {
+  setSocket(_: HoppSSESession, { socket }: { socket: SSEConnection }) {
     return {
       socket,
     }
   },
-  setConnectionState(_: HoppSSESession, { state }: { state: boolean }) {
-    return {
-      connectionState: state,
-    }
-  },
-  setConnectingState(_: HoppSSESession, { state }: { state: boolean }) {
-    return {
-      connectingState: state,
-    }
-  },
   setLog(_: HoppSSESession, { log }: { log: HoppRealtimeLog }) {
     return {
       log,
@@ -112,7 +99,7 @@ export function setSSEEventType(newType: string) {
   })
 }
 
-export function setSSESocket(socket: EventSource) {
+export function setSSESocket(socket: SSEConnection) {
   SSESessionStore.dispatch({
     dispatcher: "setSocket",
     payload: {
@@ -121,23 +108,6 @@ export function setSSESocket(socket: EventSource) {
   })
 }
 
-export function setSSEConnectionState(state: boolean) {
-  SSESessionStore.dispatch({
-    dispatcher: "setConnectionState",
-    payload: {
-      state,
-    },
-  })
-}
-export function setSSEConnectingState(state: boolean) {
-  SSESessionStore.dispatch({
-    dispatcher: "setConnectingState",
-    payload: {
-      state,
-    },
-  })
-}
-
 export function setSSELog(log: HoppRealtimeLog) {
   SSESessionStore.dispatch({
     dispatcher: "setLog",
@@ -176,11 +146,6 @@ export const SSEConnectingState$ = SSESessionStore.subject$.pipe(
   distinctUntilChanged()
 )
 
-export const SSEConnectionState$ = SSESessionStore.subject$.pipe(
-  pluck("connectionState"),
-  distinctUntilChanged()
-)
-
 export const SSESocket$ = SSESessionStore.subject$.pipe(
   pluck("socket"),
   distinctUntilChanged()
diff --git a/packages/hoppscotch-app/newstore/SocketIOSession.ts b/packages/hoppscotch-app/newstore/SocketIOSession.ts
index 4b3aa57a4..f8561bdef 100644
--- a/packages/hoppscotch-app/newstore/SocketIOSession.ts
+++ b/packages/hoppscotch-app/newstore/SocketIOSession.ts
@@ -10,16 +10,16 @@ import {
 
 type SocketIO = SocketV2 | SocketV3 | SocketV4
 
+export type SIOClientVersion = "v4" | "v3" | "v2"
+
 type HoppSIORequest = {
   endpoint: string
   path: string
-  version: string
+  version: SIOClientVersion
 }
 
 type HoppSIOSession = {
   request: HoppSIORequest
-  connectingState: boolean
-  connectionState: boolean
   log: HoppRealtimeLog
   socket: SocketIO | null
 }
@@ -32,8 +32,6 @@ const defaultSIORequest: HoppSIORequest = {
 
 const defaultSIOSession: HoppSIOSession = {
   request: defaultSIORequest,
-  connectionState: false,
-  connectingState: false,
   socket: null,
   log: [],
 }
@@ -63,7 +61,10 @@ const dispatchers = defineDispatchers({
       },
     }
   },
-  setVersion(curr: HoppSIOSession, { newVersion }: { newVersion: string }) {
+  setVersion(
+    curr: HoppSIOSession,
+    { newVersion }: { newVersion: SIOClientVersion }
+  ) {
     return {
       request: {
         ...curr.request,
@@ -76,16 +77,6 @@ const dispatchers = defineDispatchers({
       socket,
     }
   },
-  setConnectionState(_: HoppSIOSession, { state }: { state: boolean }) {
-    return {
-      connectionState: state,
-    }
-  },
-  setConnectingState(_: HoppSIOSession, { state }: { state: boolean }) {
-    return {
-      connectingState: state,
-    }
-  },
   setLog(_: HoppSIOSession, { log }: { log: HoppRealtimeLog }) {
     return {
       log,
@@ -145,23 +136,6 @@ export function setSIOSocket(socket: SocketIO) {
   })
 }
 
-export function setSIOConnectionState(state: boolean) {
-  SIOSessionStore.dispatch({
-    dispatcher: "setConnectionState",
-    payload: {
-      state,
-    },
-  })
-}
-export function setSIOConnectingState(state: boolean) {
-  SIOSessionStore.dispatch({
-    dispatcher: "setConnectingState",
-    payload: {
-      state,
-    },
-  })
-}
-
 export function setSIOLog(log: HoppRealtimeLog) {
   SIOSessionStore.dispatch({
     dispatcher: "setLog",
@@ -200,11 +174,6 @@ export const SIOPath$ = SIOSessionStore.subject$.pipe(
   distinctUntilChanged()
 )
 
-export const SIOConnectingState$ = SIOSessionStore.subject$.pipe(
-  pluck("connectingState"),
-  distinctUntilChanged()
-)
-
 export const SIOConnectionState$ = SIOSessionStore.subject$.pipe(
   pluck("connectionState"),
   distinctUntilChanged()
diff --git a/packages/hoppscotch-app/newstore/WebSocketSession.ts b/packages/hoppscotch-app/newstore/WebSocketSession.ts
index 9d2d76873..6f5759e0a 100644
--- a/packages/hoppscotch-app/newstore/WebSocketSession.ts
+++ b/packages/hoppscotch-app/newstore/WebSocketSession.ts
@@ -4,8 +4,9 @@ import {
   HoppRealtimeLog,
   HoppRealtimeLogLine,
 } from "~/helpers/types/HoppRealtimeLog"
+import { WSConnection } from "~/helpers/realtime/WSConnection"
 
-type HoppWSProtocol = {
+export type HoppWSProtocol = {
   value: string
   active: boolean
 }
@@ -17,10 +18,8 @@ type HoppWSRequest = {
 
 export type HoppWSSession = {
   request: HoppWSRequest
-  connectingState: boolean
-  connectionState: boolean
   log: HoppRealtimeLog
-  socket: WebSocket | null
+  socket: WSConnection
 }
 
 const defaultWSRequest: HoppWSRequest = {
@@ -30,9 +29,7 @@ const defaultWSRequest: HoppWSRequest = {
 
 const defaultWSSession: HoppWSSession = {
   request: defaultWSRequest,
-  connectionState: false,
-  connectingState: false,
-  socket: null,
+  socket: new WSConnection(),
   log: [],
 }
 
@@ -101,21 +98,11 @@ const dispatchers = defineDispatchers({
       },
     }
   },
-  setSocket(_: HoppWSSession, { socket }: { socket: WebSocket }) {
+  setSocket(_: HoppWSSession, { socket }: { socket: WSConnection }) {
     return {
       socket,
     }
   },
-  setConnectionState(_: HoppWSSession, { state }: { state: boolean }) {
-    return {
-      connectionState: state,
-    }
-  },
-  setConnectingState(_: HoppWSSession, { state }: { state: boolean }) {
-    return {
-      connectingState: state,
-    }
-  },
   setLog(_: HoppWSSession, { log }: { log: HoppRealtimeLog }) {
     return {
       log,
@@ -195,7 +182,7 @@ export function updateWSProtocol(
   })
 }
 
-export function setWSSocket(socket: WebSocket) {
+export function setWSSocket(socket: WSConnection) {
   WSSessionStore.dispatch({
     dispatcher: "setSocket",
     payload: {
@@ -204,23 +191,6 @@ export function setWSSocket(socket: WebSocket) {
   })
 }
 
-export function setWSConnectionState(state: boolean) {
-  WSSessionStore.dispatch({
-    dispatcher: "setConnectionState",
-    payload: {
-      state,
-    },
-  })
-}
-export function setWSConnectingState(state: boolean) {
-  WSSessionStore.dispatch({
-    dispatcher: "setConnectingState",
-    payload: {
-      state,
-    },
-  })
-}
-
 export function setWSLog(log: HoppRealtimeLog) {
   WSSessionStore.dispatch({
     dispatcher: "setLog",
diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json
index 1a9547dba..e69ce859c 100644
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -153,6 +153,7 @@
     "@types/paho-mqtt": "^1.0.6",
     "@types/postman-collection": "^3.5.7",
     "@types/qs": "^6.9.7",
+    "@types/socketio-wildcard": "^2.0.4",
     "@types/splitpanes": "^2.2.1",
     "@types/uuid": "^8.3.4",
     "@types/yargs-parser": "^21.0.0",
diff --git a/packages/hoppscotch-app/types/socket-io-2.d.ts b/packages/hoppscotch-app/types/socket-io-2.d.ts
index 7302c5400..533cab964 100644
--- a/packages/hoppscotch-app/types/socket-io-2.d.ts
+++ b/packages/hoppscotch-app/types/socket-io-2.d.ts
@@ -2,6 +2,21 @@
 // tsc, this is really annoying (and maybe dangerous)
 // We don't have access to the 2.4.0 typings, hence we make do with this,
 // Check docs before you correct types again as you need
-declare module "socket.io-client-v2" {
-  export type Socket = any
+
+type Options = {
+  path: string
+  auth: {
+    token: string | undefined
+  }
+}
+
+declare module "socket.io-client-v2" {
+  export type Socket = unknown
+  export default class ClientV2 {
+    static Manager: { prototype: EventEmitter } | undefined
+    constructor(url: string, opts?: Options)
+    on(event: string, cb: (data: any) => void): void
+    emit(event: string, data: any, cb: (data: any) => void): void
+    close(): void
+  }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9e3b88c4d..05d209fb9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -112,6 +112,7 @@ importers:
       '@types/paho-mqtt': ^1.0.6
       '@types/postman-collection': ^3.5.7
       '@types/qs': ^6.9.7
+      '@types/socketio-wildcard': ^2.0.4
       '@types/splitpanes': ^2.2.1
       '@types/uuid': ^8.3.4
       '@types/yargs-parser': ^21.0.0
@@ -314,6 +315,7 @@ importers:
       '@types/paho-mqtt': 1.0.6
       '@types/postman-collection': 3.5.7
       '@types/qs': 6.9.7
+      '@types/socketio-wildcard': 2.0.4
       '@types/splitpanes': 2.2.1
       '@types/uuid': 8.3.4
       '@types/yargs-parser': 21.0.0
@@ -380,7 +382,7 @@ importers:
       '@hoppscotch/data': link:../hoppscotch-data
       '@hoppscotch/js-sandbox': link:../hoppscotch-js-sandbox
       '@relmify/jest-fp-ts': 2.0.2_fp-ts@2.12.1+io-ts@2.2.16
-      '@swc/core': 1.2.181
+      '@swc/core': 1.2.182
       '@types/axios': 0.14.0
       '@types/chalk': 2.2.0
       '@types/commander': 2.12.2
@@ -732,7 +734,7 @@ packages:
     dependencies:
       '@babel/helper-get-function-arity': 7.16.7
       '@babel/template': 7.16.7
-      '@babel/types': 7.16.8
+      '@babel/types': 7.17.0
 
   /@babel/helper-function-name/7.17.9:
     resolution: {integrity: sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==}
@@ -751,7 +753,7 @@ packages:
     resolution: {integrity: sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.16.8
+      '@babel/types': 7.17.0
 
   /@babel/helper-hoist-variables/7.16.0:
     resolution: {integrity: sha512-1AZlpazjUR0EQZQv3sgRNfM9mEVWPK3M6vlalczA+EECcPz3XPh6VplbErL5UoMpChhSck5wAJHthlj1bYpcmg==}
@@ -795,7 +797,7 @@ packages:
       '@babel/helper-validator-identifier': 7.16.7
       '@babel/template': 7.16.7
       '@babel/traverse': 7.17.9
-      '@babel/types': 7.16.8
+      '@babel/types': 7.17.0
     transitivePeerDependencies:
       - supports-color
 
@@ -850,7 +852,7 @@ packages:
     resolution: {integrity: sha512-ZIzHVyoeLMvXMN/vok/a4LWRy8G2v205mNP0XOuf9XRLyX5/u9CnVulUtDgUTama3lT+bf/UqucuZjqiGuTS1g==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.16.8
+      '@babel/types': 7.17.0
 
   /@babel/helper-simple-access/7.17.7:
     resolution: {integrity: sha512-txyMCGroZ96i+Pxr3Je3lzEJjqwaRC9buMUgtomcrLe5Nd0+fk1h0LLA+ixUF5OW7AhHuQ7Es1WcQJZmZsz2XA==}
@@ -2218,10 +2220,10 @@ packages:
       '@types/node': 17.0.24
       chalk: 4.1.2
       cosmiconfig: 7.0.1
-      cosmiconfig-typescript-loader: 1.0.9_kpiehm6dkipypriomyghl2wcpq
+      cosmiconfig-typescript-loader: 1.0.9_c6ucwwwirjo6ockovr3lj3o2cm
       lodash: 4.17.21
       resolve-from: 5.0.0
-      typescript: 4.6.4
+      typescript: 4.6.3
     transitivePeerDependencies:
       - '@swc/core'
       - '@swc/wasm'
@@ -3699,7 +3701,7 @@ packages:
       '@jest/schemas': 28.0.2
       '@types/istanbul-lib-coverage': 2.0.4
       '@types/istanbul-reports': 3.0.1
-      '@types/node': 17.0.31
+      '@types/node': 17.0.24
       '@types/yargs': 17.0.10
       chalk: 4.1.2
     dev: true
@@ -3867,17 +3869,17 @@ packages:
       consola: 2.15.3
       crc: 3.8.0
       defu: 4.0.1
-      destr: 1.1.0
+      destr: 1.1.1
       execa: 5.1.1
       exit: 0.1.2
       fs-extra: 9.1.0
       globby: 11.1.0
       hable: 3.0.0
       lodash: 4.17.21
-      minimist: 1.2.5
+      minimist: 1.2.6
       opener: 1.5.2
       pretty-bytes: 5.6.0
-      semver: 7.3.6
+      semver: 7.3.7
       serve-static: 1.14.1
       std-env: 2.3.1
       upath: 2.0.1
@@ -3894,7 +3896,7 @@ packages:
       glob: 7.2.0
       globby: 11.1.0
       scule: 0.2.1
-      semver: 7.3.6
+      semver: 7.3.7
       upath: 2.0.1
       vue-template-compiler: 2.6.14
     dev: false
@@ -3905,10 +3907,10 @@ packages:
       '@nuxt/utils': 2.15.8
       consola: 2.15.3
       defu: 4.0.1
-      destr: 1.1.0
+      destr: 1.1.1
       dotenv: 9.0.2
       lodash: 4.17.21
-      rc9: 1.2.0
+      rc9: 1.2.2
       std-env: 2.3.1
       ufo: 0.7.11
     dev: false
@@ -3959,11 +3961,11 @@ packages:
       ufo: 0.7.11
     dev: false
 
-  /@nuxt/kit-edge/3.0.0-rc.3-27536597.3359b3b:
-    resolution: {integrity: sha512-vQWAzbsHk8sP0tGXLfKX6EfnR6cb6sG4CJLcj2sptuyKwnXrHjQTfdWxKkJLqVBKq4O/8Vej9Xm9r5VLGOpNPA==}
+  /@nuxt/kit-edge/3.0.0-rc.3-27545866.cd37a21:
+    resolution: {integrity: sha512-iBU1wEwj2peSN/sS4QIuZfUQluplh7YCarvz+MCUcybdOw17kXALPQjUY6q5ISXmNsTiY/fLqHvYz3k6UjkS5w==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
     dependencies:
-      '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.3-27536597.3359b3b
+      '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.3-27545866.cd37a21
       c12: 0.2.7
       consola: 2.15.3
       defu: 6.0.0
@@ -4011,8 +4013,8 @@ packages:
       - encoding
     dev: false
 
-  /@nuxt/schema-edge/3.0.0-rc.3-27536597.3359b3b:
-    resolution: {integrity: sha512-+a/6Irx+EL2oxD+TX0Saervw3SXbr3SqFnAUE5QfTQppzG5Zf3Y9KBf+wzafB7qEDoQiCl0DWBuFVaPt+Ibt3g==}
+  /@nuxt/schema-edge/3.0.0-rc.3-27545866.cd37a21:
+    resolution: {integrity: sha512-7EOInYwj96i688RLlYKy1CIOM3Lo1GQkYNPfbNcD1k74QeQorUqn0/Tr5Cyce3/SqZ77c8PcQ4bc3p7PNPu9XA==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
     dependencies:
       c12: 0.2.7
@@ -4064,7 +4066,7 @@ packages:
       consola: 2.15.3
       create-require: 1.1.1
       defu: 5.0.1
-      destr: 1.1.0
+      destr: 1.1.1
       dotenv: 9.0.2
       fs-extra: 8.1.0
       git-url-parse: 11.6.0
@@ -4074,7 +4076,7 @@ packages:
       nanoid: 3.3.1
       node-fetch: 2.6.7
       parse-git-config: 3.0.0
-      rc9: 1.2.0
+      rc9: 1.2.2
       std-env: 2.3.1
     transitivePeerDependencies:
       - encoding
@@ -4135,7 +4137,7 @@ packages:
       jiti: 1.13.0
       lodash: 4.17.21
       proper-lockfile: 4.1.2
-      semver: 7.3.6
+      semver: 7.3.7
       serialize-javascript: 5.0.1
       signal-exit: 3.0.5
       ua-parser-js: 0.7.31
@@ -4206,7 +4208,7 @@ packages:
       postcss-loader: 3.0.0
       postcss-preset-env: 6.7.0
       postcss-url: 8.0.0
-      semver: 7.3.6
+      semver: 7.3.7
       std-env: 2.3.1
       style-resources-loader: 1.4.1_webpack@4.46.0
       terser-webpack-plugin: 4.2.3_webpack@4.46.0
@@ -4589,7 +4591,7 @@ packages:
     requiresBuild: true
     dependencies:
       https-proxy-agent: 5.0.0
-      mkdirp: 0.5.5
+      mkdirp: 0.5.6
       node-fetch: 2.6.7
       npmlog: 4.1.2
       progress: 2.0.3
@@ -4761,10 +4763,9 @@ packages:
 
   /@socket.io/component-emitter/3.0.0:
     resolution: {integrity: sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q==}
-    dev: false
 
-  /@swc/core-android-arm-eabi/1.2.181:
-    resolution: {integrity: sha512-H3HNf8j6M13uIbSruef8iMsCElJJDZOhp5qxwm/+P1jAG4eQ4vPfajIlTVdFJes8Adrbr4WQaVvl+m4BQw51JQ==}
+  /@swc/core-android-arm-eabi/1.2.182:
+    resolution: {integrity: sha512-NLjye+oyMoGsGFO+w5Opo9Q55GOZw1bnXhw7MHlGibUIhxkJk3kJ+EgFNdXUPgh2B3c9qsDqY2d6v3WD+N4XyA==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [android]
@@ -4772,8 +4773,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-android-arm64/1.2.181:
-    resolution: {integrity: sha512-b1apYKeosBaXl28xE/By4QVHYrXaR2+nOdcP6rsDXg6nyLBArtoiS5YUFikFN/VQbSAQqNeJQ+rovT5zITrgSQ==}
+  /@swc/core-android-arm64/1.2.182:
+    resolution: {integrity: sha512-80wldTfsY3JtSQQkIZKj8Vc9QpKObVapWXBfOrebfN1vJesUN/NSf2RGue8RGGkiqjZI0g4ErVHZXZl1CC3hBw==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [android]
@@ -4781,8 +4782,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-darwin-arm64/1.2.181:
-    resolution: {integrity: sha512-M3/PPeO6NTN7GYa1mOWPNMaAPxEQH8xd+X6FHMa7OBCi+Qxkarafu4DZRfzR88TcS3XikqFLgmmzSP7Z/tye2w==}
+  /@swc/core-darwin-arm64/1.2.182:
+    resolution: {integrity: sha512-CrJToIWnrh6mPHHxPW8bwAZzlQ85sbQmtWh5/DNWQe3MAtrcPDdxxoEIMu+d+HVFcO24EpqOvxI9ok7Cj0SaLQ==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [darwin]
@@ -4790,8 +4791,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-darwin-x64/1.2.181:
-    resolution: {integrity: sha512-8Uc6gx7YN5+eSnk3h7aHqp1f3RFoBJPDPeH9cURm4mfE4BTgkVgkctUm0IE5sS5AotazVbrOwhEFrl7TONSfPA==}
+  /@swc/core-darwin-x64/1.2.182:
+    resolution: {integrity: sha512-FFtLCYcSxJDw6OTQMz8TmfudxwcCuinC4O2qdph5ocOb5fAbw/QQS9M3oYuCPN8KXlLyfQ/2zebaAUbKD1mr7g==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [darwin]
@@ -4799,8 +4800,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-freebsd-x64/1.2.181:
-    resolution: {integrity: sha512-SbnsbJHGFNY7VSTA5OhBh2PmLgQumIGerAxTCTYO1IgtbADCTL+gCjU0TK0viG/zpH4jnjaL965BI4JTo/bpRg==}
+  /@swc/core-freebsd-x64/1.2.182:
+    resolution: {integrity: sha512-evWeqrw8HnhZroHhPsiWtCQKSFZ6knQfejeDx8Jqu99NGjYm6WtUKSG+yXPJRhlTTxDB0zj8QzjF1C0HDU1EFw==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [freebsd]
@@ -4808,8 +4809,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-arm-gnueabihf/1.2.181:
-    resolution: {integrity: sha512-aWO6Lr9wea96Z7AEagzf4reKgDb3UWXZnClwJK7baScwF8KV+Mh99vVgkSe1nj2gKOZ31pBLp62RDJkc3gdlnA==}
+  /@swc/core-linux-arm-gnueabihf/1.2.182:
+    resolution: {integrity: sha512-vix9LI1QUkaa33F42t0T4nmk9Yqeyh+P7zkc8STn26sc/mFaJ1T4PrF8rLZfACcX1B1vJxJ3+HoGLdTLqFBPRg==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux]
@@ -4817,8 +4818,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-arm64-gnu/1.2.181:
-    resolution: {integrity: sha512-+7fzDwsvcbhPafKdminMQrU3Ej1NHltXy7k+zgjj8BDPZbfi8hRzQcONeBV7sfl4xvw3d3roNHu2UMmKzLNs0w==}
+  /@swc/core-linux-arm64-gnu/1.2.182:
+    resolution: {integrity: sha512-co6NlUl2gxTUcN3/U5OJMIqUGK1j1OZSI9R2FMknaf0olymtSoRB0ww/+p/PKPD69sl+pZd7DvzeIjFrJKeOPw==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
@@ -4826,8 +4827,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-arm64-musl/1.2.181:
-    resolution: {integrity: sha512-U9k8pv2oCxYYfu9DdOO1ZZgqbmF97NgJzSaIu3PsTedF4RcGIiPcuGOFqrUECsGUW2i6uKejE8onbXPj9UmaZQ==}
+  /@swc/core-linux-arm64-musl/1.2.182:
+    resolution: {integrity: sha512-NoT9aZjjANCtS/yECBRiwmA2oJjFn6X/NhXcQdapcNk2vVid9Hr3NZD5CgBhs3XncXUF/Fjfn6lbRNgZ4MqDRg==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
@@ -4835,8 +4836,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-x64-gnu/1.2.181:
-    resolution: {integrity: sha512-9AQXrvZ9BFQJeqYMpKQZRf9h/DEwhfHIR39krehO+g594i+mkkp+UNTToez6Ifn+NBYl58xyEcQGwsYIqtdYVw==}
+  /@swc/core-linux-x64-gnu/1.2.182:
+    resolution: {integrity: sha512-Fq7sGcc3NyuEVCFIme5xAJLQ2d27ztAoI9Ct5a3/4mP6+E/uEIPSs9eridOOqedq5bi4ZEPU1GsisLUmkVML0g==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
@@ -4844,8 +4845,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-linux-x64-musl/1.2.181:
-    resolution: {integrity: sha512-Pq/aBMj3F4CR4tXq85t7IW3piu76a677nIoo6QtBkAjrQ5QuJqpaez/5aewipG+kIXpiu/DNFIN+cISa1QeC8A==}
+  /@swc/core-linux-x64-musl/1.2.182:
+    resolution: {integrity: sha512-O8nZOXPMTLL4m0AVJPygkxU8pp/Mv7WeNgFlEqYcQbK0ZdmW7jU0ZWwAD+IfgzUhdvy3nezorsBnNCRT/YVLiA==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
@@ -4853,8 +4854,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-win32-arm64-msvc/1.2.181:
-    resolution: {integrity: sha512-m24036tVFDE8ZJ3fBVBfsHw4tHd0BG6g3TvT2MLAiW2MezYeTdrGpmvPBz4Woz686I/06cWeSg7cZF1/ZcZMMA==}
+  /@swc/core-win32-arm64-msvc/1.2.182:
+    resolution: {integrity: sha512-KAr39wz+H7nqZ3wmzkR1h1FmFJhRNfDDvmBfIcqZCtM45YpeikRgxUrbq+Ph7lUob/6cUIKA8QGP5mHmxxzN1A==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [win32]
@@ -4862,8 +4863,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-win32-ia32-msvc/1.2.181:
-    resolution: {integrity: sha512-OPROzGapmr29qqwvB/aP9SA80r2eIukj+q7gghdQVptJrQU4GrTyzW1TpnGtpzj8rLZz4hEG6KtyPUh54bJZ/g==}
+  /@swc/core-win32-ia32-msvc/1.2.182:
+    resolution: {integrity: sha512-Ng2b/AE3CUulaattHo19+xPhCKQ9xjwKUgK8zBzx9h8yU7NdRJw5KCe58lMi5axVF0uIqbu0hFdHfQWQIX+bhQ==}
     engines: {node: '>=10'}
     cpu: [ia32]
     os: [win32]
@@ -4871,8 +4872,8 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core-win32-x64-msvc/1.2.181:
-    resolution: {integrity: sha512-YrIaS63XsGiQ9AgxUVZ7Irt4pwQc3c2TPN7PyQP7ok9zBZxY5pBTwRTdLctlF4LNsSavlHE5+rvdPzcYAG0ekQ==}
+  /@swc/core-win32-x64-msvc/1.2.182:
+    resolution: {integrity: sha512-GRN6AyTVZsvbfMMXKblf+27kQwFnVguaLYqK1H1xk6UKx0U26wcrCM/01hczcoD3NmIVtljANm3VOqqbwlNAJQ==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
@@ -4880,24 +4881,24 @@ packages:
     dev: true
     optional: true
 
-  /@swc/core/1.2.181:
-    resolution: {integrity: sha512-evQX+Br/gC+FYLbUIF1dOQa7hUzBpowrcbgPkIRCEvi4HrCn7pGBZ2ZHBXmwEtBdLfOlyQvN/8USClApQKK4Rw==}
+  /@swc/core/1.2.182:
+    resolution: {integrity: sha512-ao/6J7VPS8NElpSElGw5KtAB2aYJriSvRkDdjFnX7N06H3w4qo+CweeS8NXnS2/XCoFuCtPBGEpecuBhfKkHNA==}
     engines: {node: '>=10'}
     hasBin: true
     optionalDependencies:
-      '@swc/core-android-arm-eabi': 1.2.181
-      '@swc/core-android-arm64': 1.2.181
-      '@swc/core-darwin-arm64': 1.2.181
-      '@swc/core-darwin-x64': 1.2.181
-      '@swc/core-freebsd-x64': 1.2.181
-      '@swc/core-linux-arm-gnueabihf': 1.2.181
-      '@swc/core-linux-arm64-gnu': 1.2.181
-      '@swc/core-linux-arm64-musl': 1.2.181
-      '@swc/core-linux-x64-gnu': 1.2.181
-      '@swc/core-linux-x64-musl': 1.2.181
-      '@swc/core-win32-arm64-msvc': 1.2.181
-      '@swc/core-win32-ia32-msvc': 1.2.181
-      '@swc/core-win32-x64-msvc': 1.2.181
+      '@swc/core-android-arm-eabi': 1.2.182
+      '@swc/core-android-arm64': 1.2.182
+      '@swc/core-darwin-arm64': 1.2.182
+      '@swc/core-darwin-x64': 1.2.182
+      '@swc/core-freebsd-x64': 1.2.182
+      '@swc/core-linux-arm-gnueabihf': 1.2.182
+      '@swc/core-linux-arm64-gnu': 1.2.182
+      '@swc/core-linux-arm64-musl': 1.2.182
+      '@swc/core-linux-x64-gnu': 1.2.182
+      '@swc/core-linux-x64-musl': 1.2.182
+      '@swc/core-win32-arm64-msvc': 1.2.182
+      '@swc/core-win32-ia32-msvc': 1.2.182
+      '@swc/core-win32-x64-msvc': 1.2.182
     dev: true
 
   /@szmarczak/http-timer/1.1.2:
@@ -5001,7 +5002,7 @@ packages:
   /@types/babel__generator/7.6.3:
     resolution: {integrity: sha512-/GWCmzJWqV7diQW54smJZzWbSFf4QYtF71WCKhcx6Ru/tFyQIY2eiiITcCAeuPbNSvT9YCGkVMqqvSk2Z0mXiA==}
     dependencies:
-      '@babel/types': 7.16.0
+      '@babel/types': 7.17.0
     dev: true
 
   /@types/babel__generator/7.6.4:
@@ -5013,7 +5014,7 @@ packages:
   /@types/babel__template/7.4.1:
     resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
     dependencies:
-      '@babel/parser': 7.17.9
+      '@babel/parser': 7.16.2
       '@babel/types': 7.17.0
     dev: true
 
@@ -5027,7 +5028,7 @@ packages:
     resolution: {integrity: sha512-a6bTJ21vFOGIkwM0kzh9Yr89ziVxq4vYH2fQ6N8AeipEzai/cFK6aGMArIkUeIdRIgpwQa+2bXiLuUJCpSf2Cg==}
     dependencies:
       '@types/connect': 3.4.34
-      '@types/node': 17.0.18
+      '@types/node': 17.0.24
     dev: true
 
   /@types/browserslist/4.15.0:
@@ -5042,7 +5043,7 @@ packages:
     dependencies:
       '@types/http-cache-semantics': 4.0.1
       '@types/keyv': 3.1.3
-      '@types/node': 17.0.18
+      '@types/node': 17.0.24
       '@types/responselike': 1.0.0
     dev: true
 
@@ -5093,6 +5094,12 @@ packages:
     resolution: {integrity: sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==}
     dev: true
 
+  /@types/engine.io/3.1.7:
+    resolution: {integrity: sha512-qNjVXcrp+1sS8YpRUa714r0pgzOwESdW5UjHL7D/2ZFdBX0BXUXtg1LUrp+ylvqbvMcMWUy73YpRoxPN2VoKAQ==}
+    dependencies:
+      '@types/node': 17.0.24
+    dev: true
+
   /@types/eslint/7.29.0:
     resolution: {integrity: sha512-VNcvioYDH8/FxaeTKkM4/TiTwt6pBV9E3OfGmvaw8tPl0rrHCJ4Ll15HRT+pMiFAf/MLQvAzC+6RzUMEL9Ceng==}
     dependencies:
@@ -5123,7 +5130,7 @@ packages:
   /@types/express-serve-static-core/4.17.24:
     resolution: {integrity: sha512-3UJuW+Qxhzwjq3xhwXm2onQcFHn76frIYVbTu+kn24LFxI+dEhdfISDFovPB8VpEgW8oQCTpRuCe+0zJxB7NEA==}
     dependencies:
-      '@types/node': 17.0.18
+      '@types/node': 17.0.24
       '@types/qs': 6.9.7
       '@types/range-parser': 1.2.4
     dev: true
@@ -5172,7 +5179,7 @@ packages:
   /@types/http-proxy/1.17.7:
     resolution: {integrity: sha512-9hdj6iXH64tHSLTY+Vt2eYOGzSogC+JQ2H7bdPWkuh7KXP5qLllWx++t+K9Wk556c3dkDdPws/SpMRi0sdCT1w==}
     dependencies:
-      '@types/node': 17.0.18
+      '@types/node': 17.0.24
     dev: false
 
   /@types/httpsnippet/1.23.1:
@@ -5231,7 +5238,7 @@ packages:
   /@types/keyv/3.1.3:
     resolution: {integrity: sha512-FXCJgyyN3ivVgRoml4h94G/p3kY+u/B86La+QptcqJaWtBWtmc6TtkNfS40n9bIvyLteHh7zXOtgbobORKPbDg==}
     dependencies:
-      '@types/node': 17.0.18
+      '@types/node': 17.0.24
     dev: true
 
   /@types/less/3.0.2:
@@ -5282,10 +5289,6 @@ packages:
   /@types/node/17.0.24:
     resolution: {integrity: sha512-aveCYRQbgTH9Pssp1voEP7HiuWlD2jW2BO56w+bVrJn04i61yh6mRfoKO6hEYQD9vF+W8Chkwc6j1M36uPkx4g==}
 
-  /@types/node/17.0.31:
-    resolution: {integrity: sha512-AR0x5HbXGqkEx9CadRH3EBYx/VkiUgZIhP4wvPn/+5KIsgpNoyFaRlVe0Zlx9gRtg8fA06a9tskE2MSN7TcG4Q==}
-    dev: true
-
   /@types/node/17.0.6:
     resolution: {integrity: sha512-+XBAjfZmmivILUzO0HwBJoYkAyyySSLg5KCGBDFLomJo0sV6szvVLAf4ANZZ0pfWzgEds5KmGLG9D5hfEqOhaA==}
 
@@ -5342,7 +5345,7 @@ packages:
   /@types/responselike/1.0.0:
     resolution: {integrity: sha512-85Y2BjiufFzaMIlvJDvTTB8Fxl2xfLo4HgmHzVBz08w4wDePCTjYw66PdrolO0kzli3yam/YCgRufyo1DdQVTA==}
     dependencies:
-      '@types/node': 17.0.18
+      '@types/node': 17.0.24
     dev: true
 
   /@types/sass-loader/8.0.1:
@@ -5362,7 +5365,7 @@ packages:
   /@types/sax/1.2.3:
     resolution: {integrity: sha512-+QSw6Tqvs/KQpZX8DvIl3hZSjNFLW/OqE5nlyHXtTwODaJvioN2rOWpBNEWZp2HZUFhOh+VohmJku/WxEXU2XA==}
     dependencies:
-      '@types/node': 17.0.18
+      '@types/node': 17.0.24
     dev: false
 
   /@types/semver/7.3.9:
@@ -5376,6 +5379,38 @@ packages:
       '@types/node': 17.0.6
     dev: true
 
+  /@types/socket.io-client/1.4.36:
+    resolution: {integrity: sha512-ZJWjtFBeBy1kRSYpVbeGYTElf6BqPQUkXDlHHD4k/42byCN5Rh027f4yARHCink9sKAkbtGZXEAmR0ZCnc2/Ag==}
+    dev: true
+
+  /@types/socket.io-parser/3.0.0:
+    resolution: {integrity: sha512-Ry/rbTE6HQNL9eu3LpL1Ocup5VexXu1bSSGlSho/IR5LuRc8YvxwSNJ3JxqTltVJEATLbZkMQETSbxfKNgp4Ew==}
+    deprecated: This is a stub types definition. socket.io-parser provides its own type definitions, so you do not need this installed.
+    dependencies:
+      socket.io-parser: 4.1.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@types/socket.io/2.1.13:
+    resolution: {integrity: sha512-JRgH3nCgsWel4OPANkhH8TelpXvacAJ9VeryjuqCDiaVDMpLysd6sbt0dr6Z15pqH3p2YpOT3T1C5vQ+O/7uyg==}
+    dependencies:
+      '@types/engine.io': 3.1.7
+      '@types/node': 17.0.24
+      '@types/socket.io-parser': 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@types/socketio-wildcard/2.0.4:
+    resolution: {integrity: sha512-02BK7Bf3stIcvKXWjRFtPgCOMYi4KWhASPhVzkYpZOR9qQbtj7xBJEPi0fkksDJeqeRXCF23azFEOaRBXuUCNA==}
+    dependencies:
+      '@types/socket.io': 2.1.13
+      '@types/socket.io-client': 1.4.36
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@types/source-list-map/0.1.2:
     resolution: {integrity: sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==}
 
@@ -5484,7 +5519,7 @@ packages:
   /@types/webpack/4.41.31:
     resolution: {integrity: sha512-/i0J7sepXFIp1ZT7FjUGi1eXMCg8HCCzLJEQkKsOtbJFontsJLolBcDC+3qxn5pPwiCt1G0ZdRmYRzNBtvpuGQ==}
     dependencies:
-      '@types/node': 17.0.18
+      '@types/node': 17.0.24
       '@types/tapable': 1.0.8
       '@types/uglify-js': 3.13.1
       '@types/webpack-sources': 3.2.0
@@ -5495,7 +5530,7 @@ packages:
   /@types/websocket/1.0.4:
     resolution: {integrity: sha512-qn1LkcFEKK8RPp459jkjzsfpbsx36BBt3oC3pITYtkoBw/aVX+EZFa5j3ThCRTNpLFvIMr5dSTD4RaMdilIOpA==}
     dependencies:
-      '@types/node': 17.0.18
+      '@types/node': 17.0.24
 
   /@types/websocket/1.0.5:
     resolution: {integrity: sha512-NbsqiNX9CnEfC1Z0Vf4mE1SgAJ07JnRYcNex7AJ9zAVzmiGHmjKFEk7O4TJIsgv2B1sLEb6owKFZrACwdYngsQ==}
@@ -5696,7 +5731,7 @@ packages:
       debug: 4.3.4
       globby: 11.1.0
       is-glob: 4.0.3
-      semver: 7.3.6
+      semver: 7.3.7
       tsutils: 3.21.0_typescript@4.6.3
       typescript: 4.6.3
     transitivePeerDependencies:
@@ -6672,7 +6707,7 @@ packages:
       babel-plugin-istanbul: 6.1.1
       babel-preset-jest: 27.5.1_@babel+core@7.17.9
       chalk: 4.1.2
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.9
       slash: 3.0.0
     transitivePeerDependencies:
       - supports-color
@@ -6944,7 +6979,7 @@ packages:
     dev: true
 
   /backo2/1.0.2:
-    resolution: {integrity: sha1-MasayLEpNjRj41s+u2n038+6eUc=}
+    resolution: {integrity: sha512-zj6Z6M7Eq+PBZ7PQxl5NT665MvJdAkzp0f60nAJ+sLaSCBPMwVak5ZegFbgVCzFcCJTKFoMizvM5Ld7+JrRJHA==}
 
   /balanced-match/1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -7153,6 +7188,17 @@ packages:
       picocolors: 1.0.0
     dev: true
 
+  /browserslist/4.19.1:
+    resolution: {integrity: sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+    dependencies:
+      caniuse-lite: 1.0.30001311
+      electron-to-chromium: 1.4.68
+      escalade: 3.1.1
+      node-releases: 2.0.2
+      picocolors: 1.0.0
+
   /browserslist/4.20.0:
     resolution: {integrity: sha512-bnpOoa+DownbciXj0jVGENf8VYQnE2LNWomhYuCsMmmx9Jd9lwq0WXODuwpSsp8AVdKM2/HorrzxAfbKvWTByQ==}
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
@@ -7230,16 +7276,6 @@ packages:
     resolution: {integrity: sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=}
     dev: false
 
-  /bundle-require/3.0.4_esbuild@0.14.34:
-    resolution: {integrity: sha512-VXG6epB1yrLAvWVQpl92qF347/UXmncQj7J3U8kZEbdVZ1ZkQyr4hYeL/9RvcE8vVVdp53dY78Fd/3pqfRqI1A==}
-    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
-    peerDependencies:
-      esbuild: '>=0.13'
-    dependencies:
-      esbuild: 0.14.34
-      load-tsconfig: 0.2.3
-    dev: true
-
   /bundle-require/3.0.4_esbuild@0.14.36:
     resolution: {integrity: sha512-VXG6epB1yrLAvWVQpl92qF347/UXmncQj7J3U8kZEbdVZ1ZkQyr4hYeL/9RvcE8vVVdp53dY78Fd/3pqfRqI1A==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -7455,6 +7491,9 @@ packages:
   /caniuse-lite/1.0.30001274:
     resolution: {integrity: sha512-+Nkvv0fHyhISkiMIjnyjmf5YJcQ1IQHZN6U9TLUMroWR38FNwpsC51Gb68yueafX1V6ifOisInSgP9WJFS13ew==}
 
+  /caniuse-lite/1.0.30001311:
+    resolution: {integrity: sha512-mleTFtFKfykEeW34EyfhGIFjGCqzhh38Y0LhdQ9aWF+HorZTtdgKV/1hEE0NlFkG2ubvisPV6l400tlbPys98A==}
+
   /caniuse-lite/1.0.30001315:
     resolution: {integrity: sha512-5v7LFQU4Sb/qvkz7JcZkvtSH1Ko+1x2kgo3ocdBeMGZSOFpuE1kkm0kpTwLtWeFrw5qw08ulLxJjVIXIS8MkiQ==}
 
@@ -8058,7 +8097,7 @@ packages:
   /core-js-compat/3.20.3:
     resolution: {integrity: sha512-c8M5h0IkNZ+I92QhIpuSijOxGAcj3lgpsWdkCqmUTZNwidujF4r3pi6x1DCN+Vcs5qTS2XWWMfWSuCqyupX8gw==}
     dependencies:
-      browserslist: 4.20.2
+      browserslist: 4.19.1
       semver: 7.0.0
 
   /core-js/2.6.12:
@@ -8084,7 +8123,7 @@ packages:
     dependencies:
       '@iarna/toml': 2.2.5
 
-  /cosmiconfig-typescript-loader/1.0.9_kpiehm6dkipypriomyghl2wcpq:
+  /cosmiconfig-typescript-loader/1.0.9_c6ucwwwirjo6ockovr3lj3o2cm:
     resolution: {integrity: sha512-tRuMRhxN4m1Y8hP9SNYfz7jRwt8lZdWxdjg/ohg5esKmsndJIn4yT96oJVcf5x0eA11taXl+sIp+ielu529k6g==}
     engines: {node: '>=12', npm: '>=6'}
     peerDependencies:
@@ -8093,8 +8132,8 @@ packages:
     dependencies:
       '@types/node': 17.0.24
       cosmiconfig: 7.0.1
-      ts-node: 10.7.0_kpiehm6dkipypriomyghl2wcpq
-      typescript: 4.6.4
+      ts-node: 10.7.0_c6ucwwwirjo6ockovr3lj3o2cm
+      typescript: 4.6.3
     transitivePeerDependencies:
       - '@swc/core'
       - '@swc/wasm'
@@ -8716,10 +8755,6 @@ packages:
       is-descriptor: 1.0.2
       isobject: 3.0.1
 
-  /defu/2.0.4:
-    resolution: {integrity: sha512-G9pEH1UUMxShy6syWk01VQSRVs3CDWtlxtZu7A+NyqjxaCA4gSlWAKDBx6QiUEKezqS8+DUlXLI14Fp05Hmpwg==}
-    dev: false
-
   /defu/3.2.2:
     resolution: {integrity: sha512-8UWj5lNv7HD+kB0e9w77Z7TdQlbUYDVWqITLHNqFIn6khrNHv5WQo38Dcm1f6HeNyZf0U7UbPf6WeZDSdCzGDQ==}
     dev: true
@@ -8737,7 +8772,6 @@ packages:
 
   /defu/6.0.0:
     resolution: {integrity: sha512-t2MZGLf1V2rV4VBZbWIaXKdX/mUcYW0n2znQZoADBkGGxYL8EWqCuCZBmJPJ/Yy9fofJkyuuSuo5GSwo0XdEgw==}
-    dev: true
 
   /delayed-stream/1.0.0:
     resolution: {integrity: sha1-3zrhmayt+31ECqrgsp4icrJOxhk=}
@@ -8763,13 +8797,8 @@ packages:
       minimalistic-assert: 1.0.1
     dev: false
 
-  /destr/1.1.0:
-    resolution: {integrity: sha512-Ev/sqS5AzzDwlpor/5wFCDu0dYMQu/0x2D6XfAsQ0E7uQmamIgYJ6Dppo2T2EOFVkeVYWjc+PCLKaqZZ57qmLg==}
-    dev: false
-
   /destr/1.1.1:
     resolution: {integrity: sha512-QqkneF8LrYmwATMdnuD2MLI3GHQIcBnG6qFC2q9bSH430VTCDAVjcspPmUaKhPGtAtPAftIUFqY1obQYQuwmbg==}
-    dev: true
 
   /destroy/1.0.4:
     resolution: {integrity: sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=}
@@ -9021,6 +9050,9 @@ packages:
   /electron-to-chromium/1.4.111:
     resolution: {integrity: sha512-/s3+fwhKf1YK4k7btOImOzCQLpUjS6MaPf0ODTNuT4eTM1Bg4itBpLkydhOzJmpmH6Z9eXFyuuK5czsmzRzwtw==}
 
+  /electron-to-chromium/1.4.68:
+    resolution: {integrity: sha512-cId+QwWrV8R1UawO6b9BR1hnkJ4EJPCPAr4h315vliHUtVUJDk39Sg1PMNnaWKfj5x+93ssjeJ9LKL6r8LaMiA==}
+
   /electron-to-chromium/1.4.82:
     resolution: {integrity: sha512-Ks+ANzLoIrFDUOJdjxYMH6CMKB8UQo5modAwvSZTxgF+vEs/U7G5IbWFUp6dS4klPkTDVdxbORuk8xAXXhMsWw==}
 
@@ -9150,7 +9182,7 @@ packages:
     resolution: {integrity: sha1-oRXDJQS2MC6Fp2Jp16V8zdli41k=}
     engines: {node: '>=0.6'}
     dependencies:
-      graceful-fs: 4.2.8
+      graceful-fs: 4.2.10
       memory-fs: 0.3.0
       object-assign: 4.1.1
       tapable: 0.2.9
@@ -9226,15 +9258,6 @@ packages:
       is-date-object: 1.0.5
       is-symbol: 1.0.4
 
-  /esbuild-android-64/0.14.34:
-    resolution: {integrity: sha512-XfxcfJqmMYsT/LXqrptzFxmaR3GWzXHDLdFNIhm6S00zPaQF1TBBWm+9t0RZ6LRR7iwH57DPjaOeW20vMqI4Yw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-android-64/0.14.36:
     resolution: {integrity: sha512-jwpBhF1jmo0tVCYC/ORzVN+hyVcNZUWuozGcLHfod0RJCedTDTvR4nwlTXdx1gtncDqjk33itjO+27OZHbiavw==}
     engines: {node: '>=12'}
@@ -9243,15 +9266,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-android-arm64/0.14.34:
-    resolution: {integrity: sha512-T02+NXTmSRL1Mc6puz+R9CB54rSPICkXKq6+tw8B6vxZFnCPzbJxgwIX4kcluz9p8nYBjF3+lSilTGWb7+Xgew==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-android-arm64/0.14.36:
     resolution: {integrity: sha512-/hYkyFe7x7Yapmfv4X/tBmyKnggUmdQmlvZ8ZlBnV4+PjisrEhAvC3yWpURuD9XoB8Wa1d5dGkTsF53pIvpjsg==}
     engines: {node: '>=12'}
@@ -9260,15 +9274,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-darwin-64/0.14.34:
-    resolution: {integrity: sha512-pLRip2Bh4Ng7Bf6AMgCrSp3pPe/qZyf11h5Qo2mOfJqLWzSVjxrXW+CFRJfrOVP7TCnh/gmZSM2AFdCPB72vtw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-darwin-64/0.14.36:
     resolution: {integrity: sha512-kkl6qmV0dTpyIMKagluzYqlc1vO0ecgpviK/7jwPbRDEv5fejRTaBBEE2KxEQbTHcLhiiDbhG7d5UybZWo/1zQ==}
     engines: {node: '>=12'}
@@ -9277,15 +9282,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-darwin-arm64/0.14.34:
-    resolution: {integrity: sha512-vpidSJEBxx6lf1NWgXC+DCmGqesJuZ5Y8aQVVsaoO4i8tRXbXb0whChRvop/zd3nfNM4dIl5EXAky0knRX5I6w==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-darwin-arm64/0.14.36:
     resolution: {integrity: sha512-q8fY4r2Sx6P0Pr3VUm//eFYKVk07C5MHcEinU1BjyFnuYz4IxR/03uBbDwluR6ILIHnZTE7AkTUWIdidRi1Jjw==}
     engines: {node: '>=12'}
@@ -9294,15 +9290,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-freebsd-64/0.14.34:
-    resolution: {integrity: sha512-m0HBjePhe0hAQJgtMRMNV9kMgIyV4/qSnzPx42kRMQBcPhgjAq1JRu4Il26czC+9FgpMbFkUktb07f/Lwnc6CA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-freebsd-64/0.14.36:
     resolution: {integrity: sha512-Hn8AYuxXXRptybPqoMkga4HRFE7/XmhtlQjXFHoAIhKUPPMeJH35GYEUWGbjteai9FLFvBAjEAlwEtSGxnqWww==}
     engines: {node: '>=12'}
@@ -9311,15 +9298,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-freebsd-arm64/0.14.34:
-    resolution: {integrity: sha512-cpRc2B94L1KvMPPYB4D6G39jLqpKlD3noAMY4/e86iXXXkhUYJJEtTuyNFTa9JRpWM0xCAp4mxjHjoIiLuoCLA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-freebsd-arm64/0.14.36:
     resolution: {integrity: sha512-S3C0attylLLRiCcHiJd036eDEMOY32+h8P+jJ3kTcfhJANNjP0TNBNL30TZmEdOSx/820HJFgRrqpNAvTbjnDA==}
     engines: {node: '>=12'}
@@ -9328,15 +9306,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-linux-32/0.14.34:
-    resolution: {integrity: sha512-8nQaEaoW7MH/K/RlozJa+lE1ejHIr8fuPIHhc513UebRav7HtXgQvxHQ6VZRUkWtep23M6dd7UqhwO1tMOfzQQ==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-32/0.14.36:
     resolution: {integrity: sha512-Eh9OkyTrEZn9WGO4xkI3OPPpUX7p/3QYvdG0lL4rfr73Ap2HAr6D9lP59VMF64Ex01LhHSXwIsFG/8AQjh6eNw==}
     engines: {node: '>=12'}
@@ -9345,15 +9314,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-linux-64/0.14.34:
-    resolution: {integrity: sha512-Y3of4qQoLLlAgf042MlrY1P+7PnN9zWj8nVtw9XQG5hcLOZLz7IKpU35oeu7n4wvyaZHwvQqDJ93gRLqdJekcQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-64/0.14.36:
     resolution: {integrity: sha512-vFVFS5ve7PuwlfgoWNyRccGDi2QTNkQo/2k5U5ttVD0jRFaMlc8UQee708fOZA6zTCDy5RWsT5MJw3sl2X6KDg==}
     engines: {node: '>=12'}
@@ -9362,15 +9322,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-linux-arm/0.14.34:
-    resolution: {integrity: sha512-9lpq1NcJqssAF7alCO6zL3gvBVVt/lKw4oetUM7OgNnRX0OWpB+ZIO9FwCrSj/dMdmgDhPLf+119zB8QxSMmAg==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-arm/0.14.36:
     resolution: {integrity: sha512-NhgU4n+NCsYgt7Hy61PCquEz5aevI6VjQvxwBxtxrooXsxt5b2xtOUXYZe04JxqQo+XZk3d1gcr7pbV9MAQ/Lg==}
     engines: {node: '>=12'}
@@ -9379,15 +9330,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-linux-arm64/0.14.34:
-    resolution: {integrity: sha512-IlWaGtj9ir7+Nrume1DGcyzBDlK8GcnJq0ANKwcI9pVw8tqr+6GD0eqyF9SF1mR8UmAp+odrx1H5NdR2cHdFHA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-arm64/0.14.36:
     resolution: {integrity: sha512-24Vq1M7FdpSmaTYuu1w0Hdhiqkbto1I5Pjyi+4Cdw5fJKGlwQuw+hWynTcRI/cOZxBcBpP21gND7W27gHAiftw==}
     engines: {node: '>=12'}
@@ -9396,15 +9338,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-linux-mips64le/0.14.34:
-    resolution: {integrity: sha512-k3or+01Rska1AjUyNjA4buEwB51eyN/xPQAoOx1CjzAQC3l8rpjUDw55kXyL63O/1MUi4ISvtNtl8gLwdyEcxw==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-mips64le/0.14.36:
     resolution: {integrity: sha512-hZUeTXvppJN+5rEz2EjsOFM9F1bZt7/d2FUM1lmQo//rXh1RTFYzhC0txn7WV0/jCC7SvrGRaRz0NMsRPf8SIA==}
     engines: {node: '>=12'}
@@ -9413,15 +9346,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-linux-ppc64le/0.14.34:
-    resolution: {integrity: sha512-+qxb8M9FfM2CJaVU7GgYpJOHM1ngQOx+/VrtBjb4C8oVqaPcESCeg2anjl+HRZy8VpYc71q/iBYausPPbJ+Keg==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-ppc64le/0.14.36:
     resolution: {integrity: sha512-1Bg3QgzZjO+QtPhP9VeIBhAduHEc2kzU43MzBnMwpLSZ890azr4/A9Dganun8nsqD/1TBcqhId0z4mFDO8FAvg==}
     engines: {node: '>=12'}
@@ -9430,15 +9354,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-linux-riscv64/0.14.34:
-    resolution: {integrity: sha512-Y717ltBdQ5j5sZIHdy1DV9kieo0wMip0dCmVSTceowCPYSn1Cg33Kd6981+F/3b9FDMzNWldZFOBRILViENZSA==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-riscv64/0.14.36:
     resolution: {integrity: sha512-dOE5pt3cOdqEhaufDRzNCHf5BSwxgygVak9UR7PH7KPVHwSTDAZHDoEjblxLqjJYpc5XaU9+gKJ9F8mp9r5I4A==}
     engines: {node: '>=12'}
@@ -9447,15 +9362,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-linux-s390x/0.14.34:
-    resolution: {integrity: sha512-bDDgYO4LhL4+zPs+WcBkXph+AQoPcQRTv18FzZS0WhjfH8TZx2QqlVPGhmhZ6WidrY+jKthUqO6UhGyIb4MpmA==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-linux-s390x/0.14.36:
     resolution: {integrity: sha512-g4FMdh//BBGTfVHjF6MO7Cz8gqRoDPzXWxRvWkJoGroKA18G9m0wddvPbEqcQf5Tbt2vSc1CIgag7cXwTmoTXg==}
     engines: {node: '>=12'}
@@ -9464,15 +9370,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-netbsd-64/0.14.34:
-    resolution: {integrity: sha512-cfaFGXdRt0+vHsjNPyF0POM4BVSHPSbhLPe8mppDc7GDDxjIl08mV1Zou14oDWMp/XZMjYN1kWYRSfftiD0vvQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-netbsd-64/0.14.36:
     resolution: {integrity: sha512-UB2bVImxkWk4vjnP62ehFNZ73lQY1xcnL5ZNYF3x0AG+j8HgdkNF05v67YJdCIuUJpBuTyCK8LORCYo9onSW+A==}
     engines: {node: '>=12'}
@@ -9481,15 +9378,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-openbsd-64/0.14.34:
-    resolution: {integrity: sha512-vmy9DxXVnRiI14s8GKuYBtess+EVcDALkbpTqd5jw4XITutIzyB7n4x0Tj5utAkKsgZJB22lLWGekr0ABnSLow==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-openbsd-64/0.14.36:
     resolution: {integrity: sha512-NvGB2Chf8GxuleXRGk8e9zD3aSdRO5kLt9coTQbCg7WMGXeX471sBgh4kSg8pjx0yTXRt0MlrUDnjVYnetyivg==}
     engines: {node: '>=12'}
@@ -9498,15 +9386,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-sunos-64/0.14.34:
-    resolution: {integrity: sha512-eNPVatNET1F7tRMhii7goL/eptfxc0ALRjrj9SPFNqp0zmxrehBFD6BaP3R4LjMn6DbMO0jOAnTLFKr8NqcJAA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-sunos-64/0.14.36:
     resolution: {integrity: sha512-VkUZS5ftTSjhRjuRLp+v78auMO3PZBXu6xl4ajomGenEm2/rGuWlhFSjB7YbBNErOchj51Jb2OK8lKAo8qdmsQ==}
     engines: {node: '>=12'}
@@ -9515,15 +9394,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-windows-32/0.14.34:
-    resolution: {integrity: sha512-EFhpXyHEcnqWYe2rAHFd8dRw8wkrd9U+9oqcyoEL84GbanAYjiiIjBZsnR8kl0sCQ5w6bLpk7vCEIA2VS32Vcg==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-windows-32/0.14.36:
     resolution: {integrity: sha512-bIar+A6hdytJjZrDxfMBUSEHHLfx3ynoEZXx/39nxy86pX/w249WZm8Bm0dtOAByAf4Z6qV0LsnTIJHiIqbw0w==}
     engines: {node: '>=12'}
@@ -9532,15 +9402,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-windows-64/0.14.34:
-    resolution: {integrity: sha512-a8fbl8Ky7PxNEjf1aJmtxdDZj32/hC7S1OcA2ckEpCJRTjiKslI9vAdPpSjrKIWhws4Galpaawy0nB7fjHYf5Q==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-windows-64/0.14.36:
     resolution: {integrity: sha512-+p4MuRZekVChAeueT1Y9LGkxrT5x7YYJxYE8ZOTcEfeUUN43vktSn6hUNsvxzzATrSgq5QqRdllkVBxWZg7KqQ==}
     engines: {node: '>=12'}
@@ -9549,15 +9410,6 @@ packages:
     requiresBuild: true
     optional: true
 
-  /esbuild-windows-arm64/0.14.34:
-    resolution: {integrity: sha512-EYvmKbSa2B3sPnpC28UEu9jBK5atGV4BaVRE7CYGUci2Hlz4AvtV/LML+TcDMT6gBgibnN2gcltWclab3UutMg==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-windows-arm64/0.14.36:
     resolution: {integrity: sha512-fBB4WlDqV1m18EF/aheGYQkQZHfPHiHJSBYzXIo8yKehek+0BtBwo/4PNwKGJ5T0YK0oc8pBKjgwPbzSrPLb+Q==}
     engines: {node: '>=12'}
@@ -9572,34 +9424,6 @@ packages:
     requiresBuild: true
     dev: true
 
-  /esbuild/0.14.34:
-    resolution: {integrity: sha512-QIWdPT/gFF6hCaf4m7kP0cJ+JIuFkdHibI7vVFvu3eJS1HpVmYHWDulyN5WXwbRA0SX/7ZDaJ/1DH8SdY9xOJg==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    optionalDependencies:
-      esbuild-android-64: 0.14.34
-      esbuild-android-arm64: 0.14.34
-      esbuild-darwin-64: 0.14.34
-      esbuild-darwin-arm64: 0.14.34
-      esbuild-freebsd-64: 0.14.34
-      esbuild-freebsd-arm64: 0.14.34
-      esbuild-linux-32: 0.14.34
-      esbuild-linux-64: 0.14.34
-      esbuild-linux-arm: 0.14.34
-      esbuild-linux-arm64: 0.14.34
-      esbuild-linux-mips64le: 0.14.34
-      esbuild-linux-ppc64le: 0.14.34
-      esbuild-linux-riscv64: 0.14.34
-      esbuild-linux-s390x: 0.14.34
-      esbuild-netbsd-64: 0.14.34
-      esbuild-openbsd-64: 0.14.34
-      esbuild-sunos-64: 0.14.34
-      esbuild-windows-32: 0.14.34
-      esbuild-windows-64: 0.14.34
-      esbuild-windows-arm64: 0.14.34
-    dev: true
-
   /esbuild/0.14.36:
     resolution: {integrity: sha512-HhFHPiRXGYOCRlrhpiVDYKcFJRdO0sBElZ668M4lh2ER0YgnkLxECuFe7uWCf23FrcLc59Pqr7dHkTqmRPDHmw==}
     engines: {node: '>=12'}
@@ -9847,7 +9671,7 @@ packages:
       read-pkg-up: 7.0.1
       regexp-tree: 0.1.24
       safe-regex: 2.1.1
-      semver: 7.3.6
+      semver: 7.3.7
       strip-indent: 3.0.0
     dev: true
 
@@ -10210,16 +10034,6 @@ packages:
       merge2: 1.4.1
       micromatch: 4.0.5
 
-  /fast-glob/3.2.7:
-    resolution: {integrity: sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==}
-    engines: {node: '>=8'}
-    dependencies:
-      '@nodelib/fs.stat': 2.0.5
-      '@nodelib/fs.walk': 1.2.8
-      glob-parent: 5.1.2
-      merge2: 1.4.1
-      micromatch: 4.0.4
-
   /fast-json-stable-stringify/2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
@@ -10908,7 +10722,7 @@ packages:
     dependencies:
       array-union: 2.1.0
       dir-glob: 3.0.1
-      fast-glob: 3.2.7
+      fast-glob: 3.2.11
       ignore: 5.2.0
       merge2: 1.4.1
       slash: 3.0.0
@@ -12749,7 +12563,7 @@ packages:
       jest-util: 27.5.1
       natural-compare: 1.4.0
       pretty-format: 27.5.1
-      semver: 7.3.6
+      semver: 7.3.7
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -12771,7 +12585,7 @@ packages:
     engines: {node: ^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0}
     dependencies:
       '@jest/types': 28.1.0
-      '@types/node': 17.0.31
+      '@types/node': 17.0.24
       chalk: 4.1.2
       ci-info: 3.3.0
       graceful-fs: 4.2.10
@@ -12807,7 +12621,7 @@ packages:
     resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==}
     engines: {node: '>= 10.13.0'}
     dependencies:
-      '@types/node': 17.0.18
+      '@types/node': 17.0.24
       merge-stream: 2.0.0
       supports-color: 7.2.0
     dev: false
@@ -13597,6 +13411,7 @@ packages:
   /lru-cache/7.8.1:
     resolution: {integrity: sha512-E1v547OCgJvbvevfjgK9sNKIVXO96NnsTsFPBlg4ZxjhsJSODoH9lk8Bm0OxvHNm6Vm5Yqkl/1fErDxhYL8Skg==}
     engines: {node: '>=12'}
+    dev: true
 
   /lru_map/0.3.3:
     resolution: {integrity: sha1-tcg1G5Rky9dQM1p5ZQoOwOVhGN0=}
@@ -13964,9 +13779,6 @@ packages:
       kind-of: 6.0.3
     dev: true
 
-  /minimist/1.2.5:
-    resolution: {integrity: sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==}
-
   /minimist/1.2.6:
     resolution: {integrity: sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==}
 
@@ -14054,13 +13866,6 @@ packages:
       mkdirp: '>=0.5.0'
     dev: false
 
-  /mkdirp/0.5.5:
-    resolution: {integrity: sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==}
-    hasBin: true
-    dependencies:
-      minimist: 1.2.6
-    dev: false
-
   /mkdirp/0.5.6:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
     hasBin: true
@@ -14452,7 +14257,7 @@ packages:
   /nuxt-windicss/2.2.11:
     resolution: {integrity: sha512-xobq725D6vqpIgYOrLJ6CVlR4xLlFGwuq//gZikXKOdoVRpoK8C+NpHazPd4+f17urGQ4H0LqGBCIujTvV1V0g==}
     dependencies:
-      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.3-27536597.3359b3b
+      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.3-27545866.cd37a21
       '@windicss/plugin-utils': 1.8.4
       consola: 2.15.3
       defu: 6.0.0
@@ -16189,21 +15994,12 @@ packages:
       strip-json-comments: 2.0.1
     dev: true
 
-  /rc9/1.2.0:
-    resolution: {integrity: sha512-/jknmhG0USFAx5uoKkAKhtG40sONds9RWhFHrP1UzJ3OvVfqFWOypSUpmsQD0fFwAV7YtzHhsn3QNasfAoxgcQ==}
-    dependencies:
-      defu: 2.0.4
-      destr: 1.1.0
-      flat: 5.0.2
-    dev: false
-
   /rc9/1.2.2:
     resolution: {integrity: sha512-zbe8+HR2X28eZepAwohuKkebbEsA67h0DO9I7g12QrHa2CQopR9gztOLPIPXXGTvcxeUjAN4wZ+b29t3m/u05g==}
     dependencies:
       defu: 6.0.0
       destr: 1.1.1
       flat: 5.0.2
-    dev: true
 
   /react-is/17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
@@ -16641,14 +16437,6 @@ packages:
       typescript: 4.6.3
     dev: true
 
-  /rollup/2.70.1:
-    resolution: {integrity: sha512-CRYsI5EuzLbXdxC6RnYhOuRdtz4bhejPMSWjsFLfVM/7w/85n2szZv6yExqUXsBdz5KT8eoubeyDUDjhLHEslA==}
-    engines: {node: '>=10.0.0'}
-    hasBin: true
-    optionalDependencies:
-      fsevents: 2.3.2
-    dev: true
-
   /rollup/2.70.2:
     resolution: {integrity: sha512-EitogNZnfku65I1DD5Mxe8JYRUCy0hkK5X84IlDtUs+O6JRMpRciXTzyCUuX11b5L5pvjH+OmFXiQ3XjabcXgg==}
     engines: {node: '>=10.0.0'}
@@ -16868,6 +16656,7 @@ packages:
     hasBin: true
     dependencies:
       lru-cache: 7.8.1
+    dev: true
 
   /semver/7.3.7:
     resolution: {integrity: sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==}
@@ -17223,7 +17012,6 @@ packages:
       debug: 4.3.4
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
   /socketio-wildcard/2.0.0:
     resolution: {integrity: sha1-JGboMidrGRY1Y77ncjiHR/kSR1s=}
@@ -18370,7 +18158,7 @@ packages:
       json5: 2.2.1
       lodash.memoize: 4.1.2
       make-error: 1.3.6
-      semver: 7.3.6
+      semver: 7.3.7
       typescript: 4.6.3
       yargs-parser: 20.2.9
     dev: true
@@ -18404,7 +18192,7 @@ packages:
       json5: 2.2.1
       lodash.memoize: 4.1.2
       make-error: 1.3.6
-      semver: 7.3.6
+      semver: 7.3.7
       typescript: 4.6.4
       yargs-parser: 20.2.9
     dev: true
@@ -18438,7 +18226,7 @@ packages:
       json5: 2.2.1
       lodash.memoize: 4.1.2
       make-error: 1.3.6
-      semver: 7.3.6
+      semver: 7.3.7
       typescript: 4.6.3
       yargs-parser: 20.2.9
     dev: true
@@ -18462,7 +18250,7 @@ packages:
     resolution: {integrity: sha512-DEQrfv6l7IvN2jlzc/VTdZJYsWUnQNCsueYjMkC/iXoEoi5fNan6MjeDqkvhfzbmHgdz9UxDUluX3V5HdjTydQ==}
     dev: true
 
-  /ts-node/10.7.0_kpiehm6dkipypriomyghl2wcpq:
+  /ts-node/10.7.0_c6ucwwwirjo6ockovr3lj3o2cm:
     resolution: {integrity: sha512-TbIGS4xgJoX2i3do417KSaep1uRAW/Lu+WAL2doDHC0D6ummjirVOXU5/7aiZotbQ5p1Zp9tP7U6cYhA0O7M8A==}
     hasBin: true
     peerDependencies:
@@ -18488,7 +18276,7 @@ packages:
       create-require: 1.1.1
       diff: 4.0.2
       make-error: 1.3.6
-      typescript: 4.6.4
+      typescript: 4.6.3
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
     dev: true
@@ -18525,7 +18313,7 @@ packages:
     dependencies:
       '@types/json5': 0.0.29
       json5: 1.0.1
-      minimist: 1.2.5
+      minimist: 1.2.6
       strip-bom: 3.0.0
     dev: true
 
@@ -18582,17 +18370,17 @@ packages:
       typescript:
         optional: true
     dependencies:
-      bundle-require: 3.0.4_esbuild@0.14.34
+      bundle-require: 3.0.4_esbuild@0.14.36
       cac: 6.7.12
       chokidar: 3.5.3
       debug: 4.3.4
-      esbuild: 0.14.34
+      esbuild: 0.14.36
       execa: 5.1.1
       globby: 11.1.0
       joycon: 3.1.1
       postcss-load-config: 3.1.4
       resolve-from: 5.0.0
-      rollup: 2.70.1
+      rollup: 2.70.2
       source-map: 0.7.3
       sucrase: 3.21.0
       tree-kill: 1.2.2
@@ -18734,7 +18522,7 @@ packages:
       acorn: 8.7.0
       estree-walker: 2.0.2
       magic-string: 0.26.1
-      unplugin: 0.6.2
+      unplugin: 0.6.3
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -18901,28 +18689,6 @@ packages:
       webpack-virtual-modules: 0.4.3
     dev: false
 
-  /unplugin/0.6.2:
-    resolution: {integrity: sha512-+QONc2uBFQbeo4x5mlJHjTKjR6pmuchMpGVrWhwdGFFMb4ttFZ4E9KqhOOrNcm3Q8NNyB1vJ4s5e36IZC7UWYw==}
-    peerDependencies:
-      esbuild: '>=0.13'
-      rollup: ^2.50.0
-      vite: ^2.3.0
-      webpack: 4 || 5
-    peerDependenciesMeta:
-      esbuild:
-        optional: true
-      rollup:
-        optional: true
-      vite:
-        optional: true
-      webpack:
-        optional: true
-    dependencies:
-      chokidar: 3.5.3
-      webpack-sources: 3.2.3
-      webpack-virtual-modules: 0.4.3
-    dev: true
-
   /unplugin/0.6.3:
     resolution: {integrity: sha512-CoW88FQfCW/yabVc4bLrjikN9HC8dEvMU4O7B6K2jsYMPK0l6iAnd9dpJwqGcmXJKRCU9vwSsy653qg+RK0G6A==}
     peerDependencies:

From b132077cddb6d675856338d947c67e547b0872bd Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 28 May 2022 15:19:04 +0530
Subject: [PATCH 15/50] chore: improve ui consistency

---
 .../components/http/Request.vue               | 68 +++++++++----------
 1 file changed, 31 insertions(+), 37 deletions(-)

diff --git a/packages/hoppscotch-app/components/http/Request.vue b/packages/hoppscotch-app/components/http/Request.vue
index fe280c994..5efeb2231 100644
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -152,49 +152,43 @@
           />
           <div
             ref="saveTippyActions"
-            class="flex flex-col divide-y-1 divide-primaryDark focus:outline-none"
+            class="flex flex-col focus:outline-none"
             tabindex="0"
             role="menu"
             @keyup.c="copyRequestAction.$el.click()"
             @keyup.s="saveRequestAction.$el.click()"
             @keyup.escape="saveOptions.tippy().hide()"
           >
-            <div class="flex flex-col space-y-1">
-              <SmartItem
-                ref="copyRequestAction"
-                :label="shareButtonText"
-                :svg="copyLinkIcon"
-                :loading="fetchingShareLink"
-                :shortcut="['C']"
-                @click.native="
-                  () => {
-                    copyRequest()
-                  }
-                "
-              />
-              <SmartAnchor
-                :label="`${t('request.view_my_links')}`"
-                to="/profile"
-                svg="arrow-right"
-                reverse
-                blank
-                class="pb-3 -ml-4 text-tiny text-secondaryLight"
-              />
-            </div>
-            <div class="flex pt-3 pb-1">
-              <SmartItem
-                ref="saveRequestAction"
-                :label="`${t('request.save_as')}`"
-                svg="folder-plus"
-                :shortcut="['S']"
-                @click.native="
-                  () => {
-                    showSaveRequestModal = true
-                    saveOptions.tippy().hide()
-                  }
-                "
-              />
-            </div>
+            <SmartItem
+              ref="copyRequestAction"
+              :label="shareButtonText"
+              :svg="copyLinkIcon"
+              :loading="fetchingShareLink"
+              :shortcut="['C']"
+              @click.native="
+                () => {
+                  copyRequest()
+                }
+              "
+            />
+            <SmartItem
+              svg="link-2"
+              :label="`${t('request.view_my_links')}`"
+              to="/profile"
+            />
+            <hr />
+            <SmartItem
+              ref="saveRequestAction"
+              :label="`${t('request.save_as')}`"
+              svg="folder-plus"
+              :shortcut="['S']"
+              @click.native="
+                () => {
+                  showSaveRequestModal = true
+                  saveOptions.tippy().hide()
+                }
+              "
+            />
           </div>
         </tippy>
       </span>

From eb6c4f1a05d1b3a1141f40e0de69b0ae6d102740 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 28 May 2022 15:39:17 +0530
Subject: [PATCH 16/50] feat: add copy to clipboard button in response headers
 entry

---
 .../components/lenses/HeadersRenderer.vue     | 23 ++------
 .../lenses/HeadersRendererEntry.vue           | 52 +++++++++++++++++++
 2 files changed, 56 insertions(+), 19 deletions(-)
 create mode 100644 packages/hoppscotch-app/components/lenses/HeadersRendererEntry.vue

diff --git a/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue b/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
index 6da92d755..448fc8a86 100644
--- a/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
@@ -17,26 +17,11 @@
         />
       </div>
     </div>
-    <div
+    <LensesHeadersRendererEntry
       v-for="(header, index) in headers"
-      :key="`header-${index}`"
-      class="flex border-b divide-x divide-dividerLight border-dividerLight group"
-    >
-      <span
-        class="flex flex-1 min-w-0 px-4 py-2 transition group-hover:text-secondaryDark"
-      >
-        <span class="truncate rounded-sm select-all">
-          {{ header.key }}
-        </span>
-      </span>
-      <span
-        class="flex flex-1 min-w-0 px-4 py-2 transition group-hover:text-secondaryDark"
-      >
-        <span class="truncate rounded-sm select-all">
-          {{ header.value }}
-        </span>
-      </span>
-    </div>
+      :key="index"
+      :header="header"
+    />
   </div>
 </template>
 
diff --git a/packages/hoppscotch-app/components/lenses/HeadersRendererEntry.vue b/packages/hoppscotch-app/components/lenses/HeadersRendererEntry.vue
new file mode 100644
index 000000000..3c6c33292
--- /dev/null
+++ b/packages/hoppscotch-app/components/lenses/HeadersRendererEntry.vue
@@ -0,0 +1,52 @@
+<template>
+  <div
+    class="flex border-b divide-x divide-dividerLight border-dividerLight group"
+  >
+    <span
+      class="flex flex-1 min-w-0 px-4 py-2 transition group-hover:text-secondaryDark"
+    >
+      <span class="truncate rounded-sm select-all">
+        {{ header.key }}
+      </span>
+    </span>
+    <span
+      class="flex flex-1 min-w-0 pl-4 py-2 transition group-hover:text-secondaryDark justify-between"
+    >
+      <span class="truncate rounded-sm select-all">
+        {{ header.value }}
+      </span>
+      <ButtonSecondary
+        ref="copyHeader"
+        v-tippy="{ theme: 'tooltip' }"
+        :title="t('action.copy')"
+        :svg="copyIcon"
+        class="hidden group-hover:inline-flex !py-0"
+        @click.native="copyHeader(header.value)"
+      />
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "@nuxtjs/composition-api"
+import { HoppRESTHeader } from "~/../hoppscotch-data/dist"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+import { useI18n, useToast } from "~/helpers/utils/composables"
+
+const t = useI18n()
+
+const toast = useToast()
+
+defineProps<{
+  header: HoppRESTHeader
+}>()
+
+const copyIcon = ref("copy")
+
+const copyHeader = (headerValue: string) => {
+  copyToClipboard(headerValue)
+  copyIcon.value = "check"
+  toast.success(`${t("state.copied_to_clipboard")}`)
+  setTimeout(() => (copyIcon.value = "copy"), 1000)
+}
+</script>

From 39f72f845844b078ceacda47c8bbf6f3321c2f6d Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Tue, 31 May 2022 17:04:05 +0530
Subject: [PATCH 17/50] feat: segmented content-type dropdown UI (#2382)

Co-authored-by: liyasthomas <liyascthomas@gmail.com>
---
 .../hoppscotch-app/components/http/Body.vue   | 51 +++++++++++++------
 .../helpers/utils/contenttypes.ts             | 31 +++++++++++
 packages/hoppscotch-app/locales/en.json       |  5 ++
 3 files changed, 71 insertions(+), 16 deletions(-)

diff --git a/packages/hoppscotch-app/components/http/Body.vue b/packages/hoppscotch-app/components/http/Body.vue
index 5bebec593..08fae415c 100644
--- a/packages/hoppscotch-app/components/http/Body.vue
+++ b/packages/hoppscotch-app/components/http/Body.vue
@@ -22,7 +22,10 @@
               />
             </span>
           </template>
-          <div class="flex flex-col" role="menu">
+          <div
+            class="flex flex-col space-y-1 divide-y divide-dividerLight"
+            role="menu"
+          >
             <SmartItem
               :label="$t('state.none').toLowerCase()"
               :info-icon="contentType === null ? 'done' : ''"
@@ -34,19 +37,36 @@
                 }
               "
             />
-            <SmartItem
-              v-for="(contentTypeItem, index) in validContentTypes"
-              :key="`contentTypeItem-${index}`"
-              :label="contentTypeItem"
-              :info-icon="contentTypeItem === contentType ? 'done' : ''"
-              :active-info-icon="contentTypeItem === contentType"
-              @click.native="
-                () => {
-                  contentType = contentTypeItem
-                  $refs.contentTypeOptions.tippy().hide()
-                }
-              "
-            />
+            <div
+              v-for="(
+                contentTypeItems, contentTypeItemsIndex
+              ) in segmentedContentTypes"
+              :key="`contentTypeItems-${contentTypeItemsIndex}`"
+              class="flex flex-col py-2 text-left"
+            >
+              <div class="flex rounded py-2 px-4">
+                <span class="text-tiny text-secondaryLight font-bold">
+                  {{ $t(contentTypeItems.title) }}
+                </span>
+              </div>
+              <div class="flex flex-col">
+                <SmartItem
+                  v-for="(
+                    contentTypeItem, contentTypeIndex
+                  ) in contentTypeItems.contentTypes"
+                  :key="`contentTypeItem-${contentTypeIndex}`"
+                  :label="contentTypeItem"
+                  :info-icon="contentTypeItem === contentType ? 'done' : ''"
+                  :active-info-icon="contentTypeItem === contentType"
+                  @click.native="
+                    () => {
+                      contentType = contentTypeItem
+                      $refs.contentTypeOptions.tippy().hide()
+                    }
+                  "
+                />
+              </div>
+            </div>
           </div>
         </tippy>
         <ButtonSecondary
@@ -106,7 +126,7 @@ import * as A from "fp-ts/Array"
 import * as O from "fp-ts/Option"
 import { RequestOptionTabs } from "./RequestOptions.vue"
 import { useStream } from "~/helpers/utils/composables"
-import { knownContentTypes } from "~/helpers/utils/contenttypes"
+import { segmentedContentTypes } from "~/helpers/utils/contenttypes"
 import {
   restContentType$,
   restHeaders$,
@@ -119,7 +139,6 @@ const emit = defineEmits<{
   (e: "change-tab", value: string): void
 }>()
 
-const validContentTypes = Object.keys(knownContentTypes)
 const contentType = useStream(restContentType$, null, setRESTContentType)
 
 // The functional headers list (the headers actually in the system)
diff --git a/packages/hoppscotch-app/helpers/utils/contenttypes.ts b/packages/hoppscotch-app/helpers/utils/contenttypes.ts
index 77656888b..822b07a8a 100644
--- a/packages/hoppscotch-app/helpers/utils/contenttypes.ts
+++ b/packages/hoppscotch-app/helpers/utils/contenttypes.ts
@@ -14,6 +14,37 @@ export const knownContentTypes: Record<ValidContentTypes, Content> = {
   "text/plain": "plain",
 }
 
+type ContentTypeTitle =
+  | "request.content_type_titles.text"
+  | "request.content_type_titles.structured"
+  | "request.content_type_titles.others"
+
+type SegmentedContentType = {
+  title: ContentTypeTitle
+  contentTypes: ValidContentTypes[]
+}
+
+export const segmentedContentTypes: SegmentedContentType[] = [
+  {
+    title: "request.content_type_titles.text",
+    contentTypes: [
+      "application/json",
+      "application/ld+json",
+      "application/hal+json",
+      "application/vnd.api+json",
+      "application/xml",
+    ],
+  },
+  {
+    title: "request.content_type_titles.structured",
+    contentTypes: ["application/x-www-form-urlencoded", "multipart/form-data"],
+  },
+  {
+    title: "request.content_type_titles.others",
+    contentTypes: ["text/html", "text/plain"],
+  },
+]
+
 export function isJSONContentType(contentType: string) {
   return /\bjson\b/i.test(contentType)
 }
diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index 8b5ab871f..f61361502 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -340,6 +340,11 @@
     "body": "Request Body",
     "choose_language": "Choose language",
     "content_type": "Content Type",
+    "content_type_titles": {
+      "others": "Others",
+      "structured": "Structured",
+      "text": "Text"
+    },
     "copy_link": "Copy link",
     "duration": "Duration",
     "enter_curl": "Enter cURL",

From cf90d16f8aa9caf0115da742b39d53272f3c8992 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Wed, 1 Jun 2022 16:54:37 +0530
Subject: [PATCH 18/50] refactor: use refAutoReset instead of settimeout
 (#2385)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 .../components/app/DeveloperOptions.vue          |  5 ++---
 packages/hoppscotch-app/components/app/Share.vue |  6 +++---
 .../components/environments/Details.vue          |  5 +++--
 .../components/graphql/RequestOptions.vue        | 16 ++++++++--------
 .../components/graphql/Response.vue              | 10 ++++++----
 .../components/graphql/Sidebar.vue               |  7 +++----
 .../components/http/CodegenModal.vue             |  5 +++--
 .../components/http/ImportCurl.vue               |  4 ++--
 .../hoppscotch-app/components/http/RawBody.vue   |  5 +++--
 .../hoppscotch-app/components/http/Request.vue   |  8 ++++++--
 .../components/lenses/HeadersRenderer.vue        |  5 ++---
 .../components/lenses/HeadersRendererEntry.vue   |  5 ++---
 .../components/profile/Shortcode.vue             |  5 +++--
 .../components/realtime/Communication.vue        |  5 +++--
 .../components/realtime/LogEntry.vue             |  6 +++---
 .../lenses/composables/useCopyResponse.ts        |  7 ++++---
 .../lenses/composables/useDownloadResponse.ts    |  7 ++++---
 packages/hoppscotch-app/pages/settings.vue       |  4 ++--
 18 files changed, 62 insertions(+), 53 deletions(-)

diff --git a/packages/hoppscotch-app/components/app/DeveloperOptions.vue b/packages/hoppscotch-app/components/app/DeveloperOptions.vue
index a75d80ac0..4f5e06a7c 100644
--- a/packages/hoppscotch-app/components/app/DeveloperOptions.vue
+++ b/packages/hoppscotch-app/components/app/DeveloperOptions.vue
@@ -22,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "@nuxtjs/composition-api"
+import { refAutoReset } from "@vueuse/core"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import {
   useI18n,
@@ -45,7 +45,7 @@ const emit = defineEmits<{
   (e: "hide-modal"): void
 }>()
 
-const copyIcon = ref("copy")
+const copyIcon = refAutoReset<"copy" | "check">("copy", 1000)
 
 // Copy user auth token to clipboard
 const copyUserAuthToken = () => {
@@ -53,7 +53,6 @@ const copyUserAuthToken = () => {
     copyToClipboard(userAuthToken.value)
     copyIcon.value = "check"
     toast.success(`${t("state.copied_to_clipboard")}`)
-    setTimeout(() => (copyIcon.value = "copy"), 1000)
   } else {
     toast.error(`${t("error.something_went_wrong")}`)
   }
diff --git a/packages/hoppscotch-app/components/app/Share.vue b/packages/hoppscotch-app/components/app/Share.vue
index bcc72ce1c..b11c30370 100644
--- a/packages/hoppscotch-app/components/app/Share.vue
+++ b/packages/hoppscotch-app/components/app/Share.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "@nuxtjs/composition-api"
+import { refAutoReset } from "@vueuse/core"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { useI18n, useToast } from "~/helpers/utils/composables"
 
@@ -60,7 +60,8 @@ const subject = "Checkout Hoppscotch - an open source API development ecosystem"
 const summary = `Hi there!%0D%0A%0D%0AI thought you'll like this new platform that I joined called Hoppscotch - https://hoppscotch.io.%0D%0AIt is a simple and intuitive interface for creating and managing your APIs. You can build, test, document, and share your APIs.%0D%0A%0D%0AThe best part about Hoppscotch is that it is open source and free to get started.%0D%0A%0D%0A`
 const twitter = "hoppscotch_io"
 
-const copyIcon = ref("copy")
+const copyIcon = refAutoReset<"copy" | "check">("copy", 1000)
+
 const platforms = [
   {
     name: "Email",
@@ -93,7 +94,6 @@ const copyAppLink = () => {
   copyToClipboard(url)
   copyIcon.value = "check"
   toast.success(`${t("state.copied_to_clipboard")}`)
-  setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 
 const hideModal = () => {
diff --git a/packages/hoppscotch-app/components/environments/Details.vue b/packages/hoppscotch-app/components/environments/Details.vue
index 7a4c04506..81c64e142 100644
--- a/packages/hoppscotch-app/components/environments/Details.vue
+++ b/packages/hoppscotch-app/components/environments/Details.vue
@@ -120,6 +120,7 @@ import clone from "lodash/clone"
 import { computed, ref, watch } from "@nuxtjs/composition-api"
 import * as E from "fp-ts/Either"
 import { Environment, parseTemplateStringE } from "@hoppscotch/data"
+import { refAutoReset } from "@vueuse/core"
 import {
   createEnvironment,
   environments$,
@@ -160,7 +161,8 @@ const emit = defineEmits<{
 
 const name = ref<string | null>(null)
 const vars = ref([{ key: "", value: "" }])
-const clearIcon = ref("trash-2")
+
+const clearIcon = refAutoReset<"trash-2" | "check">("trash-2", 1000)
 
 const globalVars = useReadonlyStream(globalEnv$, [])
 
@@ -225,7 +227,6 @@ const clearContent = () => {
   vars.value = []
   clearIcon.value = "check"
   toast.success(`${t("state.cleared")}`)
-  setTimeout(() => (clearIcon.value = "trash-2"), 1000)
 }
 
 const addEnvironmentVariable = () => {
diff --git a/packages/hoppscotch-app/components/graphql/RequestOptions.vue b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
index 12ce15b2b..4d5763fcc 100644
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -312,6 +312,7 @@ import {
 import draggable from "vuedraggable"
 import isEqual from "lodash/isEqual"
 import cloneDeep from "lodash/cloneDeep"
+import { refAutoReset } from "@vueuse/core"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import {
   useNuxt,
@@ -612,10 +613,13 @@ useCodemirror(queryEditor, gqlQueryString, {
   environmentHighlights: false,
 })
 
-const copyQueryIcon = ref("copy")
-const copyVariablesIcon = ref("copy")
-const prettifyQueryIcon = ref("wand")
-const prettifyVariablesIcon = ref("wand")
+const copyQueryIcon = refAutoReset<"copy" | "check">("copy", 1000)
+const copyVariablesIcon = refAutoReset<"copy" | "check">("copy", 1000)
+const prettifyQueryIcon = refAutoReset<"wand" | "check" | "info">("wand", 1000)
+const prettifyVariablesIcon = refAutoReset<"wand" | "check" | "info">(
+  "wand",
+  1000
+)
 
 const showSaveRequestModal = ref(false)
 
@@ -623,7 +627,6 @@ const copyQuery = () => {
   copyToClipboard(gqlQueryString.value)
   copyQueryIcon.value = "check"
   toast.success(`${t("state.copied_to_clipboard")}`)
-  setTimeout(() => (copyQueryIcon.value = "copy"), 1000)
 }
 
 const response = useStream(gqlResponse$, "", setGQLResponse)
@@ -699,7 +702,6 @@ const prettifyQuery = () => {
     toast.error(`${t("error.gql_prettify_invalid_query")}`)
     prettifyQueryIcon.value = "info"
   }
-  setTimeout(() => (prettifyQueryIcon.value = "wand"), 1000)
 }
 
 const saveRequest = () => {
@@ -710,7 +712,6 @@ const copyVariables = () => {
   copyToClipboard(variableString.value)
   copyVariablesIcon.value = "check"
   toast.success(`${t("state.copied_to_clipboard")}`)
-  setTimeout(() => (copyVariablesIcon.value = "copy"), 1000)
 }
 
 const prettifyVariableString = () => {
@@ -723,7 +724,6 @@ const prettifyVariableString = () => {
     prettifyVariablesIcon.value = "info"
     toast.error(`${t("error.json_prettify_invalid_body")}`)
   }
-  setTimeout(() => (prettifyVariablesIcon.value = "wand"), 1000)
 }
 
 const clearGQLQuery = () => {
diff --git a/packages/hoppscotch-app/components/graphql/Response.vue b/packages/hoppscotch-app/components/graphql/Response.vue
index c2b7425fc..c64ec56e0 100644
--- a/packages/hoppscotch-app/components/graphql/Response.vue
+++ b/packages/hoppscotch-app/components/graphql/Response.vue
@@ -78,6 +78,7 @@
 
 <script setup lang="ts">
 import { reactive, ref } from "@nuxtjs/composition-api"
+import { refAutoReset } from "@vueuse/core"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import {
@@ -111,14 +112,16 @@ useCodemirror(
   })
 )
 
-const downloadResponseIcon = ref("download")
-const copyResponseIcon = ref("copy")
+const downloadResponseIcon = refAutoReset<"download" | "check">(
+  "download",
+  1000
+)
+const copyResponseIcon = refAutoReset<"copy" | "check">("copy", 1000)
 
 const copyResponse = () => {
   copyToClipboard(responseString.value!)
   copyResponseIcon.value = "check"
   toast.success(`${t("state.copied_to_clipboard")}`)
-  setTimeout(() => (copyResponseIcon.value = "copy"), 1000)
 }
 
 const downloadResponse = () => {
@@ -135,7 +138,6 @@ const downloadResponse = () => {
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)
-    downloadResponseIcon.value = "download"
   }, 1000)
 }
 </script>
diff --git a/packages/hoppscotch-app/components/graphql/Sidebar.vue b/packages/hoppscotch-app/components/graphql/Sidebar.vue
index aa8c8d86b..d7b2b293d 100644
--- a/packages/hoppscotch-app/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-app/components/graphql/Sidebar.vue
@@ -193,6 +193,7 @@ import { computed, nextTick, reactive, ref } from "@nuxtjs/composition-api"
 import { GraphQLField, GraphQLType } from "graphql"
 import { map } from "rxjs/operators"
 import { GQLHeader } from "@hoppscotch/data"
+import { refAutoReset } from "@vueuse/core"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { GQLConnection } from "~/helpers/GQLConnection"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -306,8 +307,8 @@ const graphqlTypes = useReadonlyStream(
   []
 )
 
-const downloadSchemaIcon = ref("download")
-const copySchemaIcon = ref("copy")
+const downloadSchemaIcon = refAutoReset<"download" | "check">("download", 1000)
+const copySchemaIcon = refAutoReset<"copy" | "check">("copy", 1000)
 
 const graphqlFieldsFilterText = ref("")
 
@@ -423,7 +424,6 @@ const downloadSchema = () => {
   setTimeout(() => {
     document.body.removeChild(a)
     URL.revokeObjectURL(url)
-    downloadSchemaIcon.value = "download"
   }, 1000)
 }
 
@@ -432,7 +432,6 @@ const copySchema = () => {
 
   copyToClipboard(schemaString.value)
   copySchemaIcon.value = "check"
-  setTimeout(() => (copySchemaIcon.value = "copy"), 1000)
 }
 
 const handleUseHistory = (entry: GQLHistoryEntry) => {
diff --git a/packages/hoppscotch-app/components/http/CodegenModal.vue b/packages/hoppscotch-app/components/http/CodegenModal.vue
index cc522f38b..b74a21ace 100644
--- a/packages/hoppscotch-app/components/http/CodegenModal.vue
+++ b/packages/hoppscotch-app/components/http/CodegenModal.vue
@@ -87,6 +87,7 @@
 import { computed, ref, watch } from "@nuxtjs/composition-api"
 import * as O from "fp-ts/Option"
 import { Environment, makeRESTRequest } from "@hoppscotch/data"
+import { refAutoReset } from "@vueuse/core"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import {
@@ -118,9 +119,10 @@ const options = ref<any | null>(null)
 
 const request = ref(getRESTRequest())
 const codegenType = ref<CodegenName>("shell-curl")
-const copyIcon = ref("copy")
 const errorState = ref(false)
 
+const copyIcon = refAutoReset<"copy" | "check">("copy", 1000)
+
 const requestCode = computed(() => {
   const aggregateEnvs = getAggregateEnvs()
   const env: Environment = {
@@ -184,7 +186,6 @@ const copyRequestCode = () => {
   copyToClipboard(requestCode.value)
   copyIcon.value = "check"
   toast.success(`${t("state.copied_to_clipboard")}`)
-  setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 
 const searchQuery = ref("")
diff --git a/packages/hoppscotch-app/components/http/ImportCurl.vue b/packages/hoppscotch-app/components/http/ImportCurl.vue
index 671643879..8d27877c7 100644
--- a/packages/hoppscotch-app/components/http/ImportCurl.vue
+++ b/packages/hoppscotch-app/components/http/ImportCurl.vue
@@ -39,6 +39,7 @@
 
 <script setup lang="ts">
 import { ref, watch } from "@nuxtjs/composition-api"
+import { refAutoReset } from "@vueuse/core"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { setRESTRequest } from "~/newstore/RESTSession"
 import { useI18n, useToast } from "~/helpers/utils/composables"
@@ -95,7 +96,7 @@ const handleImport = () => {
   hideModal()
 }
 
-const pasteIcon = ref("clipboard")
+const pasteIcon = refAutoReset<"clipboard" | "check">("clipboard", 1000)
 
 const handlePaste = async () => {
   try {
@@ -103,7 +104,6 @@ const handlePaste = async () => {
     if (text) {
       curl.value = text
       pasteIcon.value = "check"
-      setTimeout(() => (pasteIcon.value = "clipboard"), 1000)
     }
   } catch (e) {
     console.error("Failed to copy: ", e)
diff --git a/packages/hoppscotch-app/components/http/RawBody.vue b/packages/hoppscotch-app/components/http/RawBody.vue
index e2ad6173e..65d132e3c 100644
--- a/packages/hoppscotch-app/components/http/RawBody.vue
+++ b/packages/hoppscotch-app/components/http/RawBody.vue
@@ -61,6 +61,7 @@ import { computed, reactive, Ref, ref } from "@nuxtjs/composition-api"
 import * as TO from "fp-ts/TaskOption"
 import { pipe } from "fp-ts/function"
 import { HoppRESTReqBody, ValidContentTypes } from "@hoppscotch/data"
+import { refAutoReset } from "@vueuse/core"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { getEditorLangForMimeType } from "~/helpers/editorutils"
 import { pluckRef, useI18n, useToast } from "~/helpers/utils/composables"
@@ -91,7 +92,8 @@ const rawParamsBody = pluckRef(
   >,
   "body"
 )
-const prettifyIcon = ref("wand")
+
+const prettifyIcon = refAutoReset<"wand" | "check" | "info">("wand", 1000)
 
 const rawInputEditorLang = computed(() =>
   getEditorLangForMimeType(props.contentType)
@@ -148,6 +150,5 @@ const prettifyRequestBody = () => {
     prettifyIcon.value = "info"
     toast.error(`${t("error.json_prettify_invalid_body")}`)
   }
-  setTimeout(() => (prettifyIcon.value = "wand"), 1000)
 }
 </script>
diff --git a/packages/hoppscotch-app/components/http/Request.vue b/packages/hoppscotch-app/components/http/Request.vue
index 5efeb2231..d2d1b1385 100644
--- a/packages/hoppscotch-app/components/http/Request.vue
+++ b/packages/hoppscotch-app/components/http/Request.vue
@@ -215,6 +215,7 @@ import { computed, ref, watch } from "@nuxtjs/composition-api"
 import { isLeft, isRight } from "fp-ts/lib/Either"
 import * as E from "fp-ts/Either"
 import cloneDeep from "lodash/cloneDeep"
+import { refAutoReset } from "@vueuse/core"
 import {
   updateRESTResponse,
   restEndpoint$,
@@ -393,7 +394,11 @@ const clearContent = () => {
   resetRESTRequest()
 }
 
-const copyLinkIcon = hasNavigatorShare ? ref("share-2") : ref("copy")
+const copyLinkIcon = refAutoReset<"share-2" | "copy" | "check">(
+  hasNavigatorShare ? "share-2" : "copy",
+  1000
+)
+
 const shareLink = ref<string | null>("")
 const fetchingShareLink = ref(false)
 
@@ -448,7 +453,6 @@ const copyShareLink = (shareLink: string) => {
     copyLinkIcon.value = "check"
     copyToClipboard(`https://hopp.sh/r${shareLink}`)
     toast.success(`${t("state.copied_to_clipboard")}`)
-    setTimeout(() => (copyLinkIcon.value = "copy"), 2000)
   }
 }
 
diff --git a/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue b/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
index 448fc8a86..b238145e6 100644
--- a/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/HeadersRenderer.vue
@@ -26,8 +26,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "@nuxtjs/composition-api"
 import { HoppRESTHeader } from "@hoppscotch/data"
+import { refAutoReset } from "@vueuse/core"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { useI18n, useToast } from "~/helpers/utils/composables"
 
@@ -39,12 +39,11 @@ const props = defineProps<{
   headers: Array<HoppRESTHeader>
 }>()
 
-const copyIcon = ref("copy")
+const copyIcon = refAutoReset<"copy" | "check">("copy", 1000)
 
 const copyHeaders = () => {
   copyToClipboard(JSON.stringify(props.headers))
   copyIcon.value = "check"
   toast.success(`${t("state.copied_to_clipboard")}`)
-  setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>
diff --git a/packages/hoppscotch-app/components/lenses/HeadersRendererEntry.vue b/packages/hoppscotch-app/components/lenses/HeadersRendererEntry.vue
index 3c6c33292..70c075cab 100644
--- a/packages/hoppscotch-app/components/lenses/HeadersRendererEntry.vue
+++ b/packages/hoppscotch-app/components/lenses/HeadersRendererEntry.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "@nuxtjs/composition-api"
+import { refAutoReset } from "@vueuse/core"
 import { HoppRESTHeader } from "~/../hoppscotch-data/dist"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { useI18n, useToast } from "~/helpers/utils/composables"
@@ -41,12 +41,11 @@ defineProps<{
   header: HoppRESTHeader
 }>()
 
-const copyIcon = ref("copy")
+const copyIcon = refAutoReset<"copy" | "check">("copy", 1000)
 
 const copyHeader = (headerValue: string) => {
   copyToClipboard(headerValue)
   copyIcon.value = "check"
   toast.success(`${t("state.copied_to_clipboard")}`)
-  setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
 </script>
diff --git a/packages/hoppscotch-app/components/profile/Shortcode.vue b/packages/hoppscotch-app/components/profile/Shortcode.vue
index ec2a90804..3fd1f8c00 100644
--- a/packages/hoppscotch-app/components/profile/Shortcode.vue
+++ b/packages/hoppscotch-app/components/profile/Shortcode.vue
@@ -65,6 +65,7 @@ import { pipe } from "fp-ts/function"
 import * as RR from "fp-ts/ReadonlyRecord"
 import * as O from "fp-ts/Option"
 import { translateToNewRequest } from "@hoppscotch/data"
+import { refAutoReset } from "@vueuse/core"
 import { useI18n, useToast } from "~/helpers/utils/composables"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { Shortcode } from "~/helpers/shortcodes/Shortcode"
@@ -93,7 +94,8 @@ const requestMethodLabels = {
 } as const
 
 const timeStampRef = ref()
-const copyIconRefs = ref<"copy" | "check">("copy")
+
+const copyIconRefs = refAutoReset<"copy" | "check">("copy", 1000)
 
 const parseShortcodeRequest = computed(() =>
   pipe(props.shortcode.request, JSON.parse, translateToNewRequest)
@@ -118,7 +120,6 @@ const copyShortcode = (codeID: string) => {
   copyToClipboard(`https://hopp.sh/r/${codeID}`)
   toast.success(`${t("state.copied_to_clipboard")}`)
   copyIconRefs.value = "check"
-  setTimeout(() => (copyIconRefs.value = "copy"), 1000)
 }
 </script>
 
diff --git a/packages/hoppscotch-app/components/realtime/Communication.vue b/packages/hoppscotch-app/components/realtime/Communication.vue
index b96a634f2..1eebd452f 100644
--- a/packages/hoppscotch-app/components/realtime/Communication.vue
+++ b/packages/hoppscotch-app/components/realtime/Communication.vue
@@ -113,6 +113,7 @@ import { computed, reactive, ref } from "@nuxtjs/composition-api"
 import { pipe } from "fp-ts/function"
 import * as TO from "fp-ts/TaskOption"
 import * as O from "fp-ts/Option"
+import { refAutoReset } from "@vueuse/core"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import jsonLinter from "~/helpers/editor/linting/json"
 import { readFileAsText } from "~/helpers/functional/files"
@@ -145,7 +146,8 @@ const toast = useToast()
 
 const linewrapEnabled = ref(true)
 const wsCommunicationBody = ref<HTMLElement>()
-const prettifyIcon = ref<"wand" | "check" | "info">("wand")
+
+const prettifyIcon = refAutoReset<"wand" | "check" | "info">("wand", 1000)
 
 const knownContentTypes = {
   JSON: "application/ld+json",
@@ -216,6 +218,5 @@ const prettifyRequestBody = () => {
     prettifyIcon.value = "info"
     toast.error(`${t("error.json_prettify_invalid_body")}`)
   }
-  setTimeout(() => (prettifyIcon.value = "wand"), 1000)
 }
 </script>
diff --git a/packages/hoppscotch-app/components/realtime/LogEntry.vue b/packages/hoppscotch-app/components/realtime/LogEntry.vue
index 56a8537b7..f11854395 100644
--- a/packages/hoppscotch-app/components/realtime/LogEntry.vue
+++ b/packages/hoppscotch-app/components/realtime/LogEntry.vue
@@ -203,7 +203,7 @@ import * as LJSON from "lossless-json"
 import * as O from "fp-ts/Option"
 import { pipe } from "fp-ts/function"
 import { ref, computed, reactive, watch } from "@nuxtjs/composition-api"
-import { useTimeAgo } from "@vueuse/core"
+import { refAutoReset, useTimeAgo } from "@vueuse/core"
 import { LogEntryData } from "./Log.vue"
 import { useI18n } from "~/helpers/utils/composables"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
@@ -310,11 +310,11 @@ const { downloadIcon, downloadResponse } = useDownloadResponse(
   logPayload
 )
 
-const copyQueryIcon = ref("copy")
+const copyQueryIcon = refAutoReset<"copy" | "check">("copy", 1000)
+
 const copyQuery = (entry: string) => {
   copyToClipboard(entry)
   copyQueryIcon.value = "check"
-  setTimeout(() => (copyQueryIcon.value = "copy"), 1000)
 }
 
 // Relative Time
diff --git a/packages/hoppscotch-app/helpers/lenses/composables/useCopyResponse.ts b/packages/hoppscotch-app/helpers/lenses/composables/useCopyResponse.ts
index bad75c68f..a7ca65917 100644
--- a/packages/hoppscotch-app/helpers/lenses/composables/useCopyResponse.ts
+++ b/packages/hoppscotch-app/helpers/lenses/composables/useCopyResponse.ts
@@ -1,4 +1,5 @@
-import { Ref, ref } from "@nuxtjs/composition-api"
+import { Ref } from "@nuxtjs/composition-api"
+import { refAutoReset } from "@vueuse/core"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { useI18n, useToast } from "~/helpers/utils/composables"
 
@@ -8,13 +9,13 @@ export default function useCopyResponse(responseBodyText: Ref<any>): {
 } {
   const toast = useToast()
   const t = useI18n()
-  const copyIcon = ref("copy")
+
+  const copyIcon = refAutoReset<"copy" | "check">("copy", 1000)
 
   const copyResponse = () => {
     copyToClipboard(responseBodyText.value)
     copyIcon.value = "check"
     toast.success(`${t("state.copied_to_clipboard")}`)
-    setTimeout(() => (copyIcon.value = "copy"), 1000)
   }
 
   return {
diff --git a/packages/hoppscotch-app/helpers/lenses/composables/useDownloadResponse.ts b/packages/hoppscotch-app/helpers/lenses/composables/useDownloadResponse.ts
index 95a070169..8e9582b27 100644
--- a/packages/hoppscotch-app/helpers/lenses/composables/useDownloadResponse.ts
+++ b/packages/hoppscotch-app/helpers/lenses/composables/useDownloadResponse.ts
@@ -1,7 +1,8 @@
 import * as S from "fp-ts/string"
 import * as RNEA from "fp-ts/ReadonlyNonEmptyArray"
 import { pipe } from "fp-ts/function"
-import { Ref, ref } from "@nuxtjs/composition-api"
+import { Ref } from "@nuxtjs/composition-api"
+import { refAutoReset } from "@vueuse/core"
 import { useI18n, useToast } from "~/helpers/utils/composables"
 
 export type downloadResponseReturnType = (() => void) | Ref<any>
@@ -13,7 +14,8 @@ export default function useDownloadResponse(
   downloadIcon: Ref<string>
   downloadResponse: () => void
 } {
-  const downloadIcon = ref("download")
+  const downloadIcon = refAutoReset<"download" | "check">("download", 1000)
+
   const toast = useToast()
   const t = useI18n()
 
@@ -42,7 +44,6 @@ export default function useDownloadResponse(
     setTimeout(() => {
       document.body.removeChild(a)
       URL.revokeObjectURL(url)
-      downloadIcon.value = "download"
     }, 1000)
   }
   return {
diff --git a/packages/hoppscotch-app/pages/settings.vue b/packages/hoppscotch-app/pages/settings.vue
index 78f9df3c3..7e482e4c6 100644
--- a/packages/hoppscotch-app/pages/settings.vue
+++ b/packages/hoppscotch-app/pages/settings.vue
@@ -236,6 +236,7 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, defineComponent } from "@nuxtjs/composition-api"
+import { refAutoReset } from "@vueuse/core"
 import { applySetting, toggleSetting, useSetting } from "~/newstore/settings"
 import {
   useToast,
@@ -276,7 +277,7 @@ const hasFirefoxExtInstalled = computed(
   () => browserIsFirefox() && currentExtensionStatus.value === "available"
 )
 
-const clearIcon = ref("rotate-ccw")
+const clearIcon = refAutoReset<"rotate-ccw" | "check">("rotate-ccw", 1000)
 
 const confirmRemove = ref(false)
 
@@ -322,7 +323,6 @@ 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) => {

From 93faa8d5ffc07e810151ed0ce26c4d1ed79a1455 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Fri, 3 Jun 2022 15:32:58 +0530
Subject: [PATCH 19/50] ci: activate staging deployment

---
 .github/workflows/deploy-netlify.yml | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/deploy-netlify.yml b/.github/workflows/deploy-netlify.yml
index 2f024b73b..0539ac80a 100644
--- a/.github/workflows/deploy-netlify.yml
+++ b/.github/workflows/deploy-netlify.yml
@@ -24,11 +24,20 @@ jobs:
       - name: Build Site
         run: pnpm run generate
 
-      # Deploy the site with netlify-cli
-      - name: Deploy to Netlify
+      # Deploy the staging site with netlify-cli
+      - name: Deploy to Netlify (staging)
         uses: netlify/actions/cli@master
         env:
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_STAGING_SITE_ID }}
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+        with:
+          args: deploy --dir=packages/hoppscotch-app/dist --prod
+
+      # Deploy the production site with netlify-cli
+      - name: Deploy to Netlify (production)
+        uses: netlify/actions/cli@master
+        env:
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_PRODUCTION_SITE_ID }}
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
         with:
           args: deploy --dir=packages/hoppscotch-app/dist --prod

From ba468bb8357e09c0b2caf1fae290bf11fd427c04 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 7 Jun 2022 00:59:10 +0530
Subject: [PATCH 20/50] chore: allow system env vars to be available during
 build time

---
 packages/hoppscotch-app/nuxt.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/hoppscotch-app/nuxt.config.js b/packages/hoppscotch-app/nuxt.config.js
index d6afbfb29..3d60938fe 100644
--- a/packages/hoppscotch-app/nuxt.config.js
+++ b/packages/hoppscotch-app/nuxt.config.js
@@ -132,7 +132,7 @@ export default {
     // https://github.com/nuxt/typescript
     ["@nuxt/typescript-build", { typeCheck: false }],
     // https://github.com/nuxt-community/dotenv-module
-    "@nuxtjs/dotenv",
+    ["@nuxtjs/dotenv", { systemvars: true }],
     // https://github.com/nuxt-community/composition-api
     "@nuxtjs/composition-api/module",
     "~/modules/emit-volar-types.ts",

From 4f539c97814a7b79252d03adc9ef1ee95fbdfa15 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 7 Jun 2022 01:00:45 +0530
Subject: [PATCH 21/50] fix: remove staging push from deploy-netlify workflow

---
 .github/workflows/deploy-netlify.yml | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/.github/workflows/deploy-netlify.yml b/.github/workflows/deploy-netlify.yml
index 0539ac80a..53aaa7207 100644
--- a/.github/workflows/deploy-netlify.yml
+++ b/.github/workflows/deploy-netlify.yml
@@ -24,15 +24,6 @@ jobs:
       - name: Build Site
         run: pnpm run generate
 
-      # Deploy the staging site with netlify-cli
-      - name: Deploy to Netlify (staging)
-        uses: netlify/actions/cli@master
-        env:
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_STAGING_SITE_ID }}
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-        with:
-          args: deploy --dir=packages/hoppscotch-app/dist --prod
-
       # Deploy the production site with netlify-cli
       - name: Deploy to Netlify (production)
         uses: netlify/actions/cli@master

From 52c25e497fce84605061b6fbf797282e7a78c5c4 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 7 Jun 2022 01:03:29 +0530
Subject: [PATCH 22/50] chore: introduce staging deploy workflow

---
 .github/workflows/deploy-staging-netlify.yml | 43 ++++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 .github/workflows/deploy-staging-netlify.yml

diff --git a/.github/workflows/deploy-staging-netlify.yml b/.github/workflows/deploy-staging-netlify.yml
new file mode 100644
index 000000000..629d7153e
--- /dev/null
+++ b/.github/workflows/deploy-staging-netlify.yml
@@ -0,0 +1,43 @@
+name: Deploy to Staging Netlify
+
+on:
+  push:
+    # TODO: Migrate to staging branch only
+    branches: [main]
+
+jobs:
+  build:
+    name: Push build files to Netlify
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+
+      - name: Install pnpm
+        run: curl -f https://get.pnpm.io/v6.14.js | node - add --global pnpm@6
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Build Site
+        env:
+          GA_ID: ${{ secrets.STAGING_GA_ID }}
+          GTM_ID: ${{ secrets.STAGING_GTM_ID }}
+          API_KEY: ${{ secrets.STAGING_FB_API_KEY }}
+          AUTH_DOMAIN: ${{ secrets.STAGING_FB_AUTH_DOMAIN }}
+          DATABASE_URL: ${{ secrets.STAGING_FB_DATABASE_URL }}
+          PROJECT_ID: ${{ secrets.STAGING_FB_PROJECT_ID }}
+          STORAGE_BUCKET: ${{ secrets.STAGING_FB_STORAGE_BUCKET }}
+          MESSAGING_SENDER_ID: ${{ secrets.STAGING_FB_MESSAGING_SENDER_ID }}
+          APP_ID: ${{ secrets.STAGING_FB_APP_ID }}
+          BASE_URL: ${{ secrets.STAGING_BASE_URL }}
+        run: pnpm run generate
+
+      # Deploy the staging site with netlify-cli
+      - name: Deploy to Netlify (staging)
+        uses: netlify/actions/cli@master
+        env:
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_STAGING_SITE_ID }}
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+        with:
+          args: deploy --dir=packages/hoppscotch-app/dist --prod

From a78462fbe3a8f514a57df8961319b77823289235 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 7 Jun 2022 01:57:48 +0530
Subject: [PATCH 23/50] chore: move backend urls to env variables

---
 packages/hoppscotch-app/.env.example          |  4 +++
 .../helpers/backend/GQLClient.ts              | 27 ++++++++-----------
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/packages/hoppscotch-app/.env.example b/packages/hoppscotch-app/.env.example
index 7c67ad4b6..2f2d14276 100644
--- a/packages/hoppscotch-app/.env.example
+++ b/packages/hoppscotch-app/.env.example
@@ -16,3 +16,7 @@ MEASUREMENT_ID=G-BBJ3R80PJT
 
 # Base URL
 BASE_URL=https://hoppscotch.io
+
+# Backend URLs
+BACKEND_GQL_URL=https://api.hoppscotch.io/graphql
+BACKEND_WS_URL=wss://api.hoppscotch.io/graphql
diff --git a/packages/hoppscotch-app/helpers/backend/GQLClient.ts b/packages/hoppscotch-app/helpers/backend/GQLClient.ts
index 69d323180..ae8aa012f 100644
--- a/packages/hoppscotch-app/helpers/backend/GQLClient.ts
+++ b/packages/hoppscotch-app/helpers/backend/GQLClient.ts
@@ -45,28 +45,23 @@ import {
 } from "~/helpers/fb/auth"
 
 const BACKEND_GQL_URL =
-  process.env.context === "production"
-    ? "https://api.hoppscotch.io/graphql"
-    : "https://api.hoppscotch.io/graphql"
+  process.env.BACKEND_GQL_URL ?? "https://api.hoppscotch.io/graphql"
+const BACKEND_WS_URL =
+  process.env.BACKEND_WS_URL ?? "wss://api.hoppscotch.io/graphql"
 
 // const storage = makeDefaultStorage({
 //   idbName: "hoppcache-v1",
 //   maxAge: 7,
 // })
 
-const subscriptionClient = new SubscriptionClient(
-  process.env.context === "production"
-    ? "wss://api.hoppscotch.io/graphql"
-    : "wss://api.hoppscotch.io/graphql",
-  {
-    reconnect: true,
-    connectionParams: () => {
-      return {
-        authorization: `Bearer ${authIdToken$.value}`,
-      }
-    },
-  }
-)
+const subscriptionClient = new SubscriptionClient(BACKEND_WS_URL, {
+  reconnect: true,
+  connectionParams: () => {
+    return {
+      authorization: `Bearer ${authIdToken$.value}`,
+    }
+  },
+})
 
 authIdToken$.subscribe(() => {
   subscriptionClient.client?.close()

From 043c49541fd8ffddc9272e06a903f3c9a601519b Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 7 Jun 2022 02:11:40 +0530
Subject: [PATCH 24/50] chore: add backend urls to staging env

---
 .github/workflows/deploy-staging-netlify.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.github/workflows/deploy-staging-netlify.yml b/.github/workflows/deploy-staging-netlify.yml
index 629d7153e..cdb59720f 100644
--- a/.github/workflows/deploy-staging-netlify.yml
+++ b/.github/workflows/deploy-staging-netlify.yml
@@ -31,6 +31,8 @@ jobs:
           MESSAGING_SENDER_ID: ${{ secrets.STAGING_FB_MESSAGING_SENDER_ID }}
           APP_ID: ${{ secrets.STAGING_FB_APP_ID }}
           BASE_URL: ${{ secrets.STAGING_BASE_URL }}
+          BACKEND_GQL_URL: ${{ secrets.STAGING_BACKEND_GQL_URL }}
+          BACKEND_WS_URL: ${{ secrets.STAGING_BACKEND_WS_URL }}
         run: pnpm run generate
 
       # Deploy the staging site with netlify-cli

From 25253c4bdf59dc59d8994956fd36bc8f9e992c7d Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 7 Jun 2022 14:34:00 +0530
Subject: [PATCH 25/50] chore: improve ui consistency in realtime pages

---
 packages/hoppscotch-app/components/app/Header.vue             | 2 +-
 packages/hoppscotch-app/components/realtime/Communication.vue | 2 +-
 packages/hoppscotch-app/components/realtime/Socketio.vue      | 4 ++--
 packages/hoppscotch-app/components/realtime/Websocket.vue     | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/hoppscotch-app/components/app/Header.vue b/packages/hoppscotch-app/components/app/Header.vue
index 897fe59ae..401940af6 100644
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <header
-      class="flex items-center justify-between flex-1 px-2 py-2 space-x-2"
+      class="flex items-center justify-between flex-1 px-2 py-2 space-x-2 overflow-x-auto"
     >
       <div class="inline-flex items-center space-x-2">
         <ButtonSecondary
diff --git a/packages/hoppscotch-app/components/realtime/Communication.vue b/packages/hoppscotch-app/components/realtime/Communication.vue
index 1eebd452f..6750965c7 100644
--- a/packages/hoppscotch-app/components/realtime/Communication.vue
+++ b/packages/hoppscotch-app/components/realtime/Communication.vue
@@ -12,7 +12,7 @@
       />
     </div>
     <div
-      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperMobileSecondaryStickyFold sm:top-upperSecondaryStickyFold"
+      class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
     >
       <span class="flex items-center">
         <label class="font-semibold text-secondaryLight">
diff --git a/packages/hoppscotch-app/components/realtime/Socketio.vue b/packages/hoppscotch-app/components/realtime/Socketio.vue
index fc02f857d..6650892c5 100644
--- a/packages/hoppscotch-app/components/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/components/realtime/Socketio.vue
@@ -85,7 +85,7 @@
 
       <SmartTabs
         v-model="selectedTab"
-        styles="sticky bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
+        styles="sticky bg-primary top-upperPrimaryStickyFold z-10"
       >
         <SmartTab
           :id="'communication'"
@@ -99,7 +99,7 @@
         </SmartTab>
         <SmartTab :id="'protocols'" :label="`${t('request.authorization')}`">
           <div
-            class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
+            class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
           >
             <span class="flex items-center">
               <label class="font-semibold text-secondaryLight">
diff --git a/packages/hoppscotch-app/components/realtime/Websocket.vue b/packages/hoppscotch-app/components/realtime/Websocket.vue
index ecf21fe4f..753bcf283 100644
--- a/packages/hoppscotch-app/components/realtime/Websocket.vue
+++ b/packages/hoppscotch-app/components/realtime/Websocket.vue
@@ -37,7 +37,7 @@
       </div>
       <SmartTabs
         v-model="selectedTab"
-        styles="sticky bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
+        styles="sticky bg-primary top-upperPrimaryStickyFold z-10"
       >
         <SmartTab
           :id="'communication'"
@@ -50,7 +50,7 @@
         </SmartTab>
         <SmartTab :id="'protocols'" :label="`${$t('websocket.protocols')}`">
           <div
-            class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperPrimaryStickyFold"
+            class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
           >
             <label class="font-semibold text-secondaryLight">
               {{ t("websocket.protocols") }}

From 1f536eeeddadbe638e5c22e1107108c8368515f2 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 7 Jun 2022 15:57:26 +0530
Subject: [PATCH 26/50] fix: volar complaining about jsx

---
 packages/hoppscotch-app/tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/hoppscotch-app/tsconfig.json b/packages/hoppscotch-app/tsconfig.json
index 4c3280f46..46e0650ff 100644
--- a/packages/hoppscotch-app/tsconfig.json
+++ b/packages/hoppscotch-app/tsconfig.json
@@ -10,6 +10,7 @@
     "sourceMap": true,
     "skipLibCheck": true,
     "strict": true,
+    "jsx": "preserve",
     "noEmit": true,
     "baseUrl": ".",
     "paths": {

From a91a8ba5752e83160ab506b7affd06d02c01947b Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Wed, 8 Jun 2022 12:19:47 +0530
Subject: [PATCH 27/50] chore: use pnpm/action-setup instead of manual pnpm
 install

---
 .github/workflows/deploy-staging-netlify.yml | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/.github/workflows/deploy-staging-netlify.yml b/.github/workflows/deploy-staging-netlify.yml
index cdb59720f..d9e311ce2 100644
--- a/.github/workflows/deploy-staging-netlify.yml
+++ b/.github/workflows/deploy-staging-netlify.yml
@@ -13,11 +13,11 @@ jobs:
       - name: Checkout Repository
         uses: actions/checkout@v2
 
-      - name: Install pnpm
-        run: curl -f https://get.pnpm.io/v6.14.js | node - add --global pnpm@6
-
-      - name: Install Dependencies
-        run: pnpm install
+      - name: Setup and run pnpm install
+        uses: pnpm/action-setup@v2.2.2
+        with:
+          version: 7
+          run_install: true
 
       - name: Build Site
         env:

From c46bc40bcbc60e0f910fbc939b9011fff3a7bd2d Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Wed, 8 Jun 2022 12:21:17 +0530
Subject: [PATCH 28/50] chore: add staging backend env vars to nuxt config

---
 packages/hoppscotch-app/nuxt.config.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/hoppscotch-app/nuxt.config.js b/packages/hoppscotch-app/nuxt.config.js
index 3d60938fe..4a32366ff 100644
--- a/packages/hoppscotch-app/nuxt.config.js
+++ b/packages/hoppscotch-app/nuxt.config.js
@@ -339,6 +339,8 @@ export default {
     APP_ID: process.env.APP_ID,
     MEASUREMENT_ID: process.env.MEASUREMENT_ID,
     BASE_URL: process.env.BASE_URL,
+    BACKEND_GQL_URL: process.env.BACKEND_GQL_URL,
+    BACKEND_WS_URL: process.env.BACKEND_WS_URL,
   },
 
   publicRuntimeConfig: {

From e5e44b889fc08fb2fa5548bda7afcec625b0f3e4 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 8 Jun 2022 12:34:03 +0530
Subject: [PATCH 29/50] ci: use pnpm/action-setup in actions

---
 .github/workflows/deploy-netlify.yml | 10 +++++-----
 .github/workflows/tests.yml          |  9 ++++++---
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/deploy-netlify.yml b/.github/workflows/deploy-netlify.yml
index 53aaa7207..e141db6e0 100644
--- a/.github/workflows/deploy-netlify.yml
+++ b/.github/workflows/deploy-netlify.yml
@@ -12,11 +12,11 @@ jobs:
       - name: Checkout Repository
         uses: actions/checkout@v2
 
-      - name: Install pnpm
-        run: curl -f https://get.pnpm.io/v6.14.js | node - add --global pnpm@6
-
-      - name: Install Dependencies
-        run: pnpm install
+      - name: Setup and run pnpm install
+        uses: pnpm/action-setup@v2.2.2
+        with:
+          version: 7
+          run_install: true
 
       - name: Setup Environment
         run: mv packages/hoppscotch-app/.env.example packages/hoppscotch-app/.env
diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
index f76db860f..55aa9a834 100644
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -17,12 +17,15 @@ jobs:
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
-      - name: Install pnpm
-        run: curl -f https://get.pnpm.io/v6.14.js | node - add --global pnpm@6
+      - name: Setup and run pnpm install
+        uses: pnpm/action-setup@v2.2.2
+        with:
+          version: 7
+          run_install: true
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v2
         with:
           node-version: ${{ matrix.node-version }}
           cache: pnpm
       - name: Run tests
-        run: pnpm i && pnpm -r test
+        run: pnpm test

From 04a9c4dc5245a0395447605a4a1b287d36c358ee Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Fri, 10 Jun 2022 01:24:41 +0530
Subject: [PATCH 30/50] fix: improve graphql syntax highlighting

---
 packages/codemirror-lang-graphql/package.json |   2 +-
 packages/codemirror-lang-graphql/src/index.js |  24 ++--
 .../src/syntax.grammar                        | 120 +++++++++++++-----
 packages/hoppscotch-app/package.json          |   2 +-
 pnpm-lock.yaml                                |  50 +++++---
 5 files changed, 141 insertions(+), 57 deletions(-)

diff --git a/packages/codemirror-lang-graphql/package.json b/packages/codemirror-lang-graphql/package.json
index 8f8280dc3..71f2734b5 100644
--- a/packages/codemirror-lang-graphql/package.json
+++ b/packages/codemirror-lang-graphql/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hoppscotch/codemirror-lang-graphql",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "GraphQL language support for CodeMirror",
   "author": "Hoppscotch (support@hoppscotch.io)",
   "license": "MIT",
diff --git a/packages/codemirror-lang-graphql/src/index.js b/packages/codemirror-lang-graphql/src/index.js
index bb35c455c..e1c901837 100644
--- a/packages/codemirror-lang-graphql/src/index.js
+++ b/packages/codemirror-lang-graphql/src/index.js
@@ -27,16 +27,22 @@ export const GQLLanguage = LRLanguage.define({
           },
       }),
       styleTags({
-        Name: t.definition(t.variableName),
-        "OperationDefinition/Name": t.definition(t.function(t.variableName)),
-        OperationType: t.keyword,
-        BooleanValue: t.bool,
-        StringValue: t.string,
-        IntValue: t.number,
-        FloatValue: t.number,
-        NullValue: t.null,
-        ObjectValue: t.brace,
         Comment: t.lineComment,
+        Name: t.propertyName,
+        StringValue: t.string,
+        IntValue: t.integer,
+        FloatValue: t.float,
+        NullValue: t.null,
+        BooleanValue: t.bool,
+        Comma: t.separator,
+        "OperationDefinition/Name": t.definition(t.function(t.variableName)),
+        "OperationType TypeKeyword SchemaKeyword FragmentKeyword OnKeyword DirectiveKeyword RepeatableKeyword SchemaKeyword ExtendKeyword ScalarKeyword InterfaceKeyword UnionKeyword EnumKeyword InputKeyword ImplementsKeyword": t.keyword,
+        "ExecutableDirectiveLocation TypeSystemDirectiveLocation": t.atom,
+        "DirectiveName!": t.annotation,
+        "\"{\" \"}\"": t.brace,
+        "\"(\" \")\"": t.paren,
+        "\"[\" \"]\"": t.squareBracket,
+        "Type! NamedType": t.typeName,
       }),
     ],
   }),
diff --git a/packages/codemirror-lang-graphql/src/syntax.grammar b/packages/codemirror-lang-graphql/src/syntax.grammar
index 6ba64976d..1f9ad128b 100644
--- a/packages/codemirror-lang-graphql/src/syntax.grammar
+++ b/packages/codemirror-lang-graphql/src/syntax.grammar
@@ -33,16 +33,24 @@ TypeSystemExtension {
   TypeExtension
 }
 
+SchemaKeyword {
+  @specialize<Name, "schema">
+}
+
 SchemaDefinition {
-  Description? @specialize<Name, "schema"> Directives? RootTypeDef
+  Description? SchemaKeyword Directives? RootTypeDef
 }
 
 RootTypeDef {
   "{" RootOperationTypeDefinition+ "}"
 }
 
+ExtendKeyword {
+  @specialize<Name, "extend">
+}
+
 SchemaExtension {
-  @specialize<Name, "extend"> @specialize<Name, "schema"> Directives? RootTypeDef
+  ExtendKeyword SchemaKeyword Directives? RootTypeDef
 }
 
 TypeExtension {
@@ -54,33 +62,53 @@ TypeExtension {
   InputObjectTypeExtension
 }
 
+ScalarKeyword {
+  @specialize<Name, "scalar">
+}
+
 ScalarTypeExtension {
-  @specialize<Name, "extend"> @specialize<Name, "scalar"> Name Directives
+  ExtendKeyword ScalarKeyword Name Directives
 }
 
 ObjectTypeExtension /* precedence: right 0 */ {
-  @specialize<Name, "extend"> @specialize<Name, "type"> Name ImplementsInterfaces? Directives? !typeDef FieldsDefinition |
-  @specialize<Name, "extend"> @specialize<Name, "type"> Name ImplementsInterfaces? Directives?
+  ExtendKeyword TypeKeyword Name ImplementsInterfaces? Directives? !typeDef FieldsDefinition |
+  ExtendKeyword TypeKeyword Name ImplementsInterfaces? Directives?
+}
+
+InterfaceKeyword {
+  @specialize<Name, "interface">
 }
 
 InterfaceTypeExtension /* precedence: right 0 */ {
-  @specialize<Name, "extend"> @specialize<Name, "interface"> Name ImplementsInterfaces? Directives? FieldsDefinition |
-  @specialize<Name, "extend"> @specialize<Name, "interface"> Name ImplementsInterfaces? Directives?
+  ExtendKeyword InterfaceKeyword Name ImplementsInterfaces? Directives? FieldsDefinition |
+  ExtendKeyword InterfaceKeyword Name ImplementsInterfaces? Directives?
+}
+
+UnionKeyword {
+  @specialize<Name, "union">
 }
 
 UnionTypeExtension /* precedence: right 0 */ {
-  @specialize<Name, "extend"> @specialize<Name, "union"> Name Directives? UnionMemberTypes |
-  @specialize<Name, "extend"> @specialize<Name, "union"> Name Directives?
+  ExtendKeyword UnionKeyword Name Directives? UnionMemberTypes |
+  ExtendKeyword UnionKeyword Name Directives?
+}
+
+EnumKeyword {
+  @specialize<Name, "enum">
 }
 
 EnumTypeExtension /* precedence: right 0 */ {
-  @specialize<Name, "extend"> @specialize<Name, "enum"> Name Directives? !typeDef EnumValuesDefinition |
-  @specialize<Name, "extend"> @specialize<Name, "enum"> Name Directives?
+  ExtendKeyword EnumKeyword Name Directives? !typeDef EnumValuesDefinition |
+  ExtendKeyword EnumKeyword Name Directives?
+}
+
+InputKeyword {
+  @specialize<Name, "input">
 }
 
 InputObjectTypeExtension /* precedence: right 0 */ {
-  @specialize<Name, "extend"> @specialize<Name, "input"> Name Directives? InputFieldsDefinition+ |
-  @specialize<Name, "extend"> @specialize<Name, "input"> Name Directives?
+  ExtendKeyword InputKeyword Name Directives? InputFieldsDefinition+ |
+  ExtendKeyword InputKeyword Name Directives?
 }
 
 InputFieldsDefinition {
@@ -95,9 +123,13 @@ EnumValueDefinition {
   Description? EnumValue Directives?
 }
 
+ImplementsKeyword {
+  @specialize<Name, "implements">
+}
+
 ImplementsInterfaces {
   ImplementsInterfaces "&" NamedType |
-  @specialize<Name, "implements"> "&"? NamedType
+  ImplementsKeyword "&"? NamedType
 }
 
 FieldsDefinition {
@@ -144,27 +176,31 @@ TypeDefinition {
 }
 
 ScalarTypeDefinition /* precedence: right 0 */ {
-  Description? @specialize<Name, "scalar"> Name Directives?
+  Description? ScalarKeyword Name Directives?
+}
+
+TypeKeyword {
+  @specialize<Name, "type">
 }
 
 ObjectTypeDefinition /* precedence: right 0 */ {
-  Description? @specialize<Name, "type"> Name ImplementsInterfaces? Directives? FieldsDefinition?
+  Description? TypeKeyword Name ImplementsInterfaces? Directives? FieldsDefinition?
 }
 
 InterfaceTypeDefinition /* precedence: right 0 */ {
-  Description? @specialize<Name, "interface"> Name ImplementsInterfaces? Directives? FieldsDefinition?
+  Description? InterfaceKeyword Name ImplementsInterfaces? Directives? FieldsDefinition?
 }
 
 UnionTypeDefinition /* precedence: right 0 */ {
-  Description? @specialize<Name, "union"> Name Directives? UnionMemberTypes?
+  Description? UnionKeyword Name Directives? UnionMemberTypes?
 }
 
 EnumTypeDefinition /* precedence: right 0 */ {
-  Description? @specialize<Name, "enum"> Name Directives? !typeDef EnumValuesDefinition?
+  Description? EnumKeyword Name Directives? !typeDef EnumValuesDefinition?
 }
 
 InputObjectTypeDefinition /* precedence: right 0 */ {
-  Description? @specialize<Name, "input"> Name Directives? !typeDef InputFieldsDefinition?
+  Description? InputKeyword Name Directives? !typeDef InputFieldsDefinition?
 }
 
 VariableDefinitions {
@@ -237,8 +273,12 @@ FragmentSpread {
   "..." FragmentName Directives?
 }
 
+FragmentKeyword {
+  @specialize<Name, "fragment">
+}
+
 FragmentDefinition {
-  @specialize<Name, "fragment"> FragmentName TypeCondition Directives? SelectionSet
+  FragmentKeyword FragmentName TypeCondition Directives? SelectionSet
 }
 
 FragmentName {
@@ -249,20 +289,36 @@ InlineFragment {
   "..." TypeCondition? Directives? SelectionSet
 }
 
+OnKeyword {
+  @specialize<Name, "on">
+}
+
 TypeCondition {
-  @specialize<Name, "on"> NamedType
+  OnKeyword NamedType
 }
 
 Directives {
   Directive+
 }
 
+DirectiveName {
+  "@" Name
+}
+
 Directive {
-  "@" Name Arguments?
+  DirectiveName Arguments?
+}
+
+DirectiveKeyword {
+  @specialize<Name, "directive">
+}
+
+RepeatableKeyword {
+  @specialize<Name, "repeatable">
 }
 
 DirectiveDefinition /* precedence: right 1 */ {
-  Description? @specialize<Name, "directive"> "@" Name ArgumentsDefinition? @specialize<Name, "repeatable"> ? @specialize<Name, "on"> DirectiveLocations
+  Description? DirectiveKeyword "@" Name ArgumentsDefinition? RepeatableKeyword ? OnKeyword DirectiveLocations
 }
 
 DirectiveLocations {
@@ -338,17 +394,14 @@ TypeSystemDirectiveLocation {
   | @specialize<Name, "INPUT_FIELD_DEFINITION">
 }
 
-@skip { whitespace | Comment }
 
 @tokens {
   whitespace {
     std.whitespace+
   }
-
   StringValue {
     "\"\"\"" (!["] | "\\n" | "\"" "\""? !["])* "\"\"\"" | "\"" !["\\\n]* "\""
   }
-
   IntValue {
     "-"? "0"
     | "-"? std.digit+
@@ -363,14 +416,19 @@ TypeSystemDirectiveLocation {
   Name {
     $[_A-Za-z] $[_0-9A-Za-z]*
   }
-  Comment {
-    "#" ![\n]*
-  }
+
   Comma {
     ","
   }
 
-  "{" "}" "[" "]"
+  Comment {
+    "#" ![\n]*
+  }
+
+
+  "{" "}"
 }
 
+@skip { whitespace | Comment }
+
 @detectDelim
diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json
index e69ce859c..170bf78e6 100644
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -57,7 +57,7 @@
     "@codemirror/text": "^0.19.6",
     "@codemirror/tooltip": "^0.19.16",
     "@codemirror/view": "^0.19.48",
-    "@hoppscotch/codemirror-lang-graphql": "workspace:^0.1.0",
+    "@hoppscotch/codemirror-lang-graphql": "workspace:^0.2.0",
     "@hoppscotch/data": "workspace:^0.4.2",
     "@hoppscotch/js-sandbox": "workspace:^2.0.0",
     "@nuxtjs/axios": "^5.13.6",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 05d209fb9..c699a435c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -75,7 +75,7 @@ importers:
       '@graphql-codegen/typescript-urql-graphcache': ^2.2.10
       '@graphql-codegen/urql-introspection': ^2.1.1
       '@graphql-typed-document-node/core': ^3.1.1
-      '@hoppscotch/codemirror-lang-graphql': workspace:^0.1.0
+      '@hoppscotch/codemirror-lang-graphql': workspace:^0.2.0
       '@hoppscotch/data': workspace:^0.4.2
       '@hoppscotch/js-sandbox': workspace:^2.0.0
       '@nuxt/types': ^2.15.8
@@ -3961,11 +3961,11 @@ packages:
       ufo: 0.7.11
     dev: false
 
-  /@nuxt/kit-edge/3.0.0-rc.3-27545866.cd37a21:
-    resolution: {integrity: sha512-iBU1wEwj2peSN/sS4QIuZfUQluplh7YCarvz+MCUcybdOw17kXALPQjUY6q5ISXmNsTiY/fLqHvYz3k6UjkS5w==}
+  /@nuxt/kit-edge/3.0.0-rc.3-27579668.27a0084:
+    resolution: {integrity: sha512-ea+MufACOFq3tB8h5LSMMAAoNhbyxrzV6gPx3MulMtgm0Y6vQs6XLpAYQrxSLbvO5gMX1Mv5teBUykhftAclNQ==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
     dependencies:
-      '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.3-27545866.cd37a21
+      '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.3-27579668.27a0084
       c12: 0.2.7
       consola: 2.15.3
       defu: 6.0.0
@@ -3981,7 +3981,7 @@ packages:
       scule: 0.2.1
       semver: 7.3.7
       unctx: 1.1.4
-      unimport: 0.2.1
+      unimport: 0.2.6
       untyped: 0.4.4
     transitivePeerDependencies:
       - esbuild
@@ -4013,8 +4013,8 @@ packages:
       - encoding
     dev: false
 
-  /@nuxt/schema-edge/3.0.0-rc.3-27545866.cd37a21:
-    resolution: {integrity: sha512-7EOInYwj96i688RLlYKy1CIOM3Lo1GQkYNPfbNcD1k74QeQorUqn0/Tr5Cyce3/SqZ77c8PcQ4bc3p7PNPu9XA==}
+  /@nuxt/schema-edge/3.0.0-rc.3-27579668.27a0084:
+    resolution: {integrity: sha512-7tLoqbRT62EyK+UYx9cz94yLZ275WX6Dwc0BISy4MhqfV/56hfvYy4sNwnxoqztwwbW6mfKzRg4kTDoqrRUAaQ==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
     dependencies:
       c12: 0.2.7
@@ -4026,7 +4026,7 @@ packages:
       scule: 0.2.1
       std-env: 3.1.1
       ufo: 0.8.4
-      unimport: 0.2.1
+      unimport: 0.2.6
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -6328,6 +6328,12 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
+  /acorn/8.7.1:
+    resolution: {integrity: sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+    dev: true
+
   /after/0.8.2:
     resolution: {integrity: sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=}
     dev: false
@@ -10629,7 +10635,7 @@ packages:
     dev: false
 
   /gittar/0.1.1:
-    resolution: {integrity: sha1-1pk+phYKhsi3895yKmH3O8meFLQ=}
+    resolution: {integrity: sha512-p+XuqWJpW9ahUuNTptqeFjudFq31o6Jd+maMBarkMAR5U3K9c7zJB4sQ4BV8mIqrTOV29TtqikDhnZfCD4XNfQ==}
     engines: {node: '>=4'}
     dependencies:
       mkdirp: 0.5.6
@@ -12037,7 +12043,7 @@ packages:
     resolution: {integrity: sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=}
 
   /isarray/2.0.1:
-    resolution: {integrity: sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=}
+    resolution: {integrity: sha512-c2cu3UxbI+b6kR3fy0nRnAhodsvR9dx7U5+znCOzdj6IfP3upFURTr0Xl5BlQZNKZjEtxrmVyfSdeE3O57smoQ==}
     dev: false
 
   /isbot/3.4.5:
@@ -13436,6 +13442,13 @@ packages:
       sourcemap-codec: 1.4.8
     dev: true
 
+  /magic-string/0.26.2:
+    resolution: {integrity: sha512-NzzlXpclt5zAbmo6h6jNc8zl2gNRGHvmsZW4IvZhTC4W7k4OlLP+S5YLussa/r3ixNT66KOQfNORlXHSOy/X4A==}
+    engines: {node: '>=12'}
+    dependencies:
+      sourcemap-codec: 1.4.8
+    dev: true
+
   /make-dir/1.3.0:
     resolution: {integrity: sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==}
     engines: {node: '>=4'}
@@ -14257,7 +14270,7 @@ packages:
   /nuxt-windicss/2.2.11:
     resolution: {integrity: sha512-xobq725D6vqpIgYOrLJ6CVlR4xLlFGwuq//gZikXKOdoVRpoK8C+NpHazPd4+f17urGQ4H0LqGBCIujTvV1V0g==}
     dependencies:
-      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.3-27545866.cd37a21
+      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.3-27579668.27a0084
       '@windicss/plugin-utils': 1.8.4
       consola: 2.15.3
       defu: 6.0.0
@@ -17400,6 +17413,12 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /strip-literal/0.3.0:
+    resolution: {integrity: sha512-J+lfm3Pw5nzURj2B8acyvUSBqs3JbjM8WAfrmeH3qcn32+ew6kFwbZFV9+X8k9UOIAkQw9WPSzFZy3083c7l5Q==}
+    dependencies:
+      acorn: 8.7.1
+    dev: true
+
   /style-mod/4.0.0:
     resolution: {integrity: sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==}
     dev: false
@@ -18567,17 +18586,18 @@ packages:
     engines: {node: '>= 0.4.12'}
     dev: true
 
-  /unimport/0.2.1:
-    resolution: {integrity: sha512-6u1uY6GFIi9WslI7fPun0I0ZrIGJ0yAn92n/9rQv4MAEEnxg8zMO+Tj7q/6Z/7XxTn8qFCJIqEM/3Io81Zwmmw==}
+  /unimport/0.2.6:
+    resolution: {integrity: sha512-4cOokUIEvaXAfVCHH87vR+wdKI1KDzxQREW9oi0r6J68TPFEeGLHHc2pdyL0uNDUMd2aLxUikhWARNfoQKqC4Q==}
     dependencies:
       '@rollup/pluginutils': 4.2.1
       escape-string-regexp: 5.0.0
-      globby: 13.1.1
+      fast-glob: 3.2.11
       local-pkg: 0.4.1
-      magic-string: 0.26.1
+      magic-string: 0.26.2
       mlly: 0.5.2
       pathe: 0.3.0
       scule: 0.2.1
+      strip-literal: 0.3.0
       unplugin: 0.6.3
     transitivePeerDependencies:
       - esbuild

From 6b1ca1dce111b426aa39b045b3d0869b567d6598 Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Fri, 10 Jun 2022 18:12:40 +0530
Subject: [PATCH 31/50] feat: filter json body response (#2404)

---
 .../hoppscotch-app/assets/icons/filter.svg    |  13 ++
 .../hoppscotch-app/assets/scss/themes.scss    |   3 +
 .../lenses/renderers/JSONLensRenderer.vue     | 134 +++++++++++++++++-
 packages/hoppscotch-app/locales/en.json       |   4 +
 packages/hoppscotch-app/package.json          |   1 +
 .../hoppscotch-app/types/jsonpath-plus.d.ts   |   6 +
 packages/hoppscotch-app/windi.config.js       |   1 +
 pnpm-lock.yaml                                |  25 ++--
 8 files changed, 174 insertions(+), 13 deletions(-)
 create mode 100644 packages/hoppscotch-app/assets/icons/filter.svg
 create mode 100644 packages/hoppscotch-app/types/jsonpath-plus.d.ts

diff --git a/packages/hoppscotch-app/assets/icons/filter.svg b/packages/hoppscotch-app/assets/icons/filter.svg
new file mode 100644
index 000000000..7a4f7d09c
--- /dev/null
+++ b/packages/hoppscotch-app/assets/icons/filter.svg
@@ -0,0 +1,13 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"></polygon>
+</svg>
diff --git a/packages/hoppscotch-app/assets/scss/themes.scss b/packages/hoppscotch-app/assets/scss/themes.scss
index a1b025231..f641e8fcb 100644
--- a/packages/hoppscotch-app/assets/scss/themes.scss
+++ b/packages/hoppscotch-app/assets/scss/themes.scss
@@ -255,6 +255,7 @@
   --upper-mobile-raw-tertiary-sticky-fold: 8.188rem;
   --lower-primary-sticky-fold: 3rem;
   --lower-secondary-sticky-fold: 5rem;
+  --lower-tertiary-sticky-fold: 7.05rem;
   --sidebar-primary-sticky-fold: 2rem;
 }
 
@@ -270,6 +271,7 @@
   --upper-mobile-raw-tertiary-sticky-fold: 8.938rem;
   --lower-primary-sticky-fold: 3.25rem;
   --lower-secondary-sticky-fold: 5.5rem;
+  --lower-tertiary-sticky-fold: 7.8rem;
   --sidebar-primary-sticky-fold: 2.25rem;
 }
 
@@ -285,6 +287,7 @@
   --upper-mobile-raw-tertiary-sticky-fold: 9.688rem;
   --lower-primary-sticky-fold: 3.5rem;
   --lower-secondary-sticky-fold: 6rem;
+  --lower-tertiary-sticky-fold: 8.55rem;
   --sidebar-primary-sticky-fold: 2.5rem;
 }
 
diff --git a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
index 1bf8e9c0c..ffbca8951 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
@@ -1,12 +1,15 @@
 <template>
-  <div class="flex flex-col flex-1">
+  <div
+    v-if="response.type === 'success' || response.type === 'fail'"
+    class="flex flex-col flex-1"
+  >
     <div
       class="sticky z-10 flex items-center justify-between pl-4 border-b bg-primary border-dividerLight top-lowerSecondaryStickyFold"
     >
       <label class="font-semibold text-secondaryLight">
         {{ t("response.body") }}
       </label>
-      <div class="flex">
+      <div class="flex items-center">
         <ButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
@@ -15,6 +18,14 @@
           svg="wrap-text"
           @click.native.prevent="linewrapEnabled = !linewrapEnabled"
         />
+        <ButtonSecondary
+          v-if="response.body"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.filter_response')"
+          svg="filter"
+          :class="{ '!text-accent': toggleFilter }"
+          @click.native.prevent="toggleFilterState"
+        />
         <ButtonSecondary
           v-if="response.body"
           ref="downloadResponse"
@@ -33,7 +44,47 @@
         />
       </div>
     </div>
-    <div ref="jsonResponse" class="flex flex-col flex-1"></div>
+    <div
+      v-if="toggleFilter"
+      class="bg-primary flex sticky top-lowerTertiaryStickyFold z-10 border-b border-dividerLight"
+    >
+      <div
+        class="bg-primaryLight border-divider text-secondaryDark inline-flex flex-1 items-center"
+      >
+        <span class="inline-flex flex-1 items-center px-4">
+          <SmartIcon name="search" class="h-4 w-4 text-secondaryLight" />
+          <input
+            v-model="filterQueryText"
+            v-focus
+            class="input !border-0 !px-2"
+            :placeholder="`${t('response.filter_response_body')}`"
+            type="text"
+          />
+        </span>
+        <div
+          v-if="filterResponseError"
+          class="px-2 py-1 text-tiny flex items-center justify-center text-accentContrast rounded"
+          :class="{
+            'bg-red-500':
+              filterResponseError.type === 'JSON_PARSE_FAILED' ||
+              filterResponseError.type === 'JSON_PATH_QUERY_ERROR',
+            'bg-amber-500': filterResponseError.type === 'RESPONSE_EMPTY',
+          }"
+        >
+          <SmartIcon name="info" class="svg-icons mr-1.5" />
+          <span>{{ filterResponseError.error }}</span>
+        </div>
+        <ButtonSecondary
+          v-if="response.body"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('app.wiki')"
+          svg="help-circle"
+          to="https://github.com/JSONPath-Plus/JSONPath"
+          blank
+        />
+      </div>
+    </div>
+    <div ref="jsonResponse" class="flex flex-col flex-1 h-auto h-full"></div>
     <div
       v-if="outlinePath"
       class="sticky bottom-0 z-10 flex px-2 overflow-auto border-t bg-primaryLight border-dividerLight flex-nowrap hide-scrollbar"
@@ -142,8 +193,10 @@
 <script setup lang="ts">
 import * as LJSON from "lossless-json"
 import * as O from "fp-ts/Option"
+import * as E from "fp-ts/Either"
 import { pipe } from "fp-ts/function"
 import { computed, ref, reactive } from "@nuxtjs/composition-api"
+import { JSONPath } from "jsonpath-plus"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 import jsonParse, { JSONObjectMember, JSONValue } from "~/helpers/jsonParse"
@@ -172,9 +225,51 @@ const { downloadIcon, downloadResponse } = useDownloadResponse(
   responseBodyText
 )
 
-const jsonBodyText = computed(() =>
+const toggleFilter = ref(false)
+const filterQueryText = ref("")
+
+type BodyParseError =
+  | { type: "JSON_PARSE_FAILED" }
+  | { type: "JSON_PATH_QUERY_FAILED"; error: Error }
+
+const responseJsonObject = computed(() =>
   pipe(
     responseBodyText.value,
+    E.tryCatchK(
+      LJSON.parse,
+      (): BodyParseError => ({ type: "JSON_PARSE_FAILED" })
+    )
+  )
+)
+
+const jsonResponseBodyText = computed(() => {
+  if (filterQueryText.value.length > 0) {
+    return pipe(
+      responseJsonObject.value,
+      E.chain((parsedJSON) =>
+        E.tryCatch(
+          () =>
+            JSONPath({
+              path: filterQueryText.value,
+              json: parsedJSON,
+            }) as undefined,
+          (err): BodyParseError => ({
+            type: "JSON_PATH_QUERY_FAILED",
+            error: err as Error,
+          })
+        )
+      ),
+      E.map(JSON.stringify)
+    )
+  } else {
+    return E.right(responseBodyText.value)
+  }
+})
+
+const jsonBodyText = computed(() =>
+  pipe(
+    jsonResponseBodyText.value,
+    E.getOrElse(() => responseBodyText.value),
     O.tryCatchK(LJSON.parse),
     O.map((val) => LJSON.stringify(val, undefined, 2)),
     O.getOrElse(() => responseBodyText.value)
@@ -189,6 +284,32 @@ const ast = computed(() =>
   )
 )
 
+const filterResponseError = computed(() =>
+  pipe(
+    jsonResponseBodyText.value,
+    E.match(
+      (e) => {
+        switch (e.type) {
+          case "JSON_PATH_QUERY_FAILED":
+            return { type: "JSON_PATH_QUERY_ERROR", error: e.error.message }
+          case "JSON_PARSE_FAILED":
+            return {
+              type: "JSON_PARSE_FAILED",
+              error: t("error.json_parsing_failed").toString(),
+            }
+        }
+      },
+      (result) =>
+        result === "[]"
+          ? {
+              type: "RESPONSE_EMPTY",
+              error: t("error.no_results_found").toString(),
+            }
+          : undefined
+    )
+  )
+)
+
 const outlineOptions = ref<any | null>(null)
 const jsonResponse = ref<any | null>(null)
 const linewrapEnabled = ref(true)
@@ -227,6 +348,11 @@ const outlinePath = computed(() =>
     O.getOrElseW(() => null)
   )
 )
+
+const toggleFilterState = () => {
+  filterQueryText.value = ""
+  toggleFilter.value = !toggleFilter.value
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index f61361502..df0e137b3 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -14,6 +14,7 @@
     "download_file": "Download file",
     "duplicate": "Duplicate",
     "edit": "Edit",
+    "filter_response": "Filter response",
     "go_back": "Go back",
     "label": "Label",
     "learn_more": "Learn more",
@@ -202,9 +203,11 @@
     "invalid_link": "Invalid link",
     "invalid_link_description": "The link you clicked is invalid or expired.",
     "json_prettify_invalid_body": "Couldn't prettify an invalid body, solve json syntax errors and try again",
+    "json_parsing_failed": "Invalid JSON",
     "network_error": "There seems to be a network error. Please try again.",
     "network_fail": "Could not send request",
     "no_duration": "No duration",
+    "no_results_found": "No matches found",
     "script_fail": "Could not execute pre-request script",
     "something_went_wrong": "Something went wrong",
     "test_script_fail": "Could not execute post-request script"
@@ -379,6 +382,7 @@
   },
   "response": {
     "body": "Response Body",
+    "filter_response_body": "Filter JSON response body (uses JSONPath syntax)",
     "headers": "Headers",
     "html": "HTML",
     "image": "Image",
diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json
index 170bf78e6..f0ad8b55a 100644
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -88,6 +88,7 @@
     "io-ts": "^2.2.16",
     "js-yaml": "^4.1.0",
     "json-loader": "^0.5.7",
+    "jsonpath-plus": "^6.0.1",
     "lodash": "^4.17.21",
     "lossless-json": "^1.0.5",
     "mustache": "^4.2.0",
diff --git a/packages/hoppscotch-app/types/jsonpath-plus.d.ts b/packages/hoppscotch-app/types/jsonpath-plus.d.ts
new file mode 100644
index 000000000..255891785
--- /dev/null
+++ b/packages/hoppscotch-app/types/jsonpath-plus.d.ts
@@ -0,0 +1,6 @@
+import { JSONPathOptions } from "jsonpath-plus"
+
+declare module "jsonpath-plus" {
+  export type JSONPathType = (options: JSONPathOptions) => unknown
+  export const JSONPath: JSONPathType
+}
diff --git a/packages/hoppscotch-app/windi.config.js b/packages/hoppscotch-app/windi.config.js
index df6ba7e9f..4cbce6930 100644
--- a/packages/hoppscotch-app/windi.config.js
+++ b/packages/hoppscotch-app/windi.config.js
@@ -18,6 +18,7 @@ export default defineConfig({
           "var(--upper-mobile-raw-tertiary-sticky-fold)",
         lowerPrimaryStickyFold: "var(--lower-primary-sticky-fold)",
         lowerSecondaryStickyFold: "var(--lower-secondary-sticky-fold)",
+        lowerTertiaryStickyFold: "var(--lower-tertiary-sticky-fold)",
         sidebarPrimaryStickyFold: "var(--sidebar-primary-sticky-fold)",
       },
       colors: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c699a435c..46978ea13 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -152,6 +152,7 @@ importers:
       jest-serializer-vue: ^2.0.2
       js-yaml: ^4.1.0
       json-loader: ^0.5.7
+      jsonpath-plus: ^6.0.1
       lodash: ^4.17.21
       lossless-json: ^1.0.5
       mustache: ^4.2.0
@@ -251,6 +252,7 @@ importers:
       io-ts: 2.2.16_fp-ts@2.11.10
       js-yaml: 4.1.0
       json-loader: 0.5.7
+      jsonpath-plus: 6.0.1
       lodash: 4.17.21
       lossless-json: 1.0.5
       mustache: 4.2.0
@@ -9465,7 +9467,7 @@ packages:
     resolution: {integrity: sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=}
 
   /escape-string-regexp/1.0.5:
-    resolution: {integrity: sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=}
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
 
   /escape-string-regexp/2.0.0:
@@ -11111,7 +11113,7 @@ packages:
     dev: false
 
   /hash-sum/1.0.2:
-    resolution: {integrity: sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=}
+    resolution: {integrity: sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==}
     dev: false
 
   /hash-sum/2.0.0:
@@ -11542,11 +11544,11 @@ packages:
       wrappy: 1.0.2
 
   /inherits/2.0.1:
-    resolution: {integrity: sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE=}
+    resolution: {integrity: sha512-8nWq2nLTAwd02jTqJExUYFSD/fKq6VH9Y/oG2accc/kdI0V98Bag8d5a4gi3XHz73rDWa2PvTtvcWYquKqSENA==}
     dev: false
 
   /inherits/2.0.3:
-    resolution: {integrity: sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=}
+    resolution: {integrity: sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==}
     dev: false
 
   /inherits/2.0.4:
@@ -12040,7 +12042,7 @@ packages:
     dev: true
 
   /isarray/1.0.0:
-    resolution: {integrity: sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=}
+    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
   /isarray/2.0.1:
     resolution: {integrity: sha512-c2cu3UxbI+b6kR3fy0nRnAhodsvR9dx7U5+znCOzdj6IfP3upFURTr0Xl5BlQZNKZjEtxrmVyfSdeE3O57smoQ==}
@@ -12867,6 +12869,11 @@ packages:
     engines: {'0': node >= 0.2.0}
     dev: true
 
+  /jsonpath-plus/6.0.1:
+    resolution: {integrity: sha512-EvGovdvau6FyLexFH2OeXfIITlgIbgZoAZe3usiySeaIDm5QS+A10DKNpaPBBqqRSZr2HN6HVNXxtwUAr2apEw==}
+    engines: {node: '>=10.0.0'}
+    dev: false
+
   /jsonwebtoken/8.5.1:
     resolution: {integrity: sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==}
     engines: {node: '>=4', npm: '>=1.4.28'}
@@ -13543,14 +13550,14 @@ packages:
       fs-monkey: 1.0.3
 
   /memory-fs/0.3.0:
-    resolution: {integrity: sha1-e8xrYp46Q+hx1+Kaymrop/FcuyA=}
+    resolution: {integrity: sha512-QTNXnl79X97kZ9jJk/meJrtDuvgvRakX5LU7HZW1L7MsXHuSTwoMIzN9tOLLH3Xfsj/gbsSqX/ovnsqz246zKQ==}
     dependencies:
       errno: 0.1.8
       readable-stream: 2.3.7
     dev: false
 
   /memory-fs/0.4.1:
-    resolution: {integrity: sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=}
+    resolution: {integrity: sha512-cda4JKCxReDXFXRqOHPQscuIYg1PvxbE2S2GP45rnwfEK+vZaXC8C1OFvdHIbgw0DLzowXGVoxLaAmlgRy14GQ==}
     dependencies:
       errno: 0.1.8
       readable-stream: 2.3.7
@@ -13948,7 +13955,7 @@ packages:
     engines: {node: '>=10'}
 
   /ms/2.0.0:
-    resolution: {integrity: sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=}
+    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
 
   /ms/2.1.1:
     resolution: {integrity: sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==}
@@ -15840,7 +15847,7 @@ packages:
     dev: false
 
   /prr/1.0.1:
-    resolution: {integrity: sha1-0/wRS6BplaRexok/SEzrHXj19HY=}
+    resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==}
 
   /pseudomap/1.0.2:
     resolution: {integrity: sha1-8FKijacOYYkX7wqKw0wa5aaChrM=}

From a6b5295df50733a9b9883ff6e9a6de3d2154a971 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 13 Jun 2022 23:05:23 +0530
Subject: [PATCH 32/50] chore: revert indented line wrap due to issues with
 mobile (fixes hoppscotch/internal-issues#9)

---
 .../helpers/editor/codemirror.ts              |  5 ++--
 .../editor/extensions/IndentedLineWrap.ts     | 27 -------------------
 2 files changed, 2 insertions(+), 30 deletions(-)
 delete mode 100644 packages/hoppscotch-app/helpers/editor/extensions/IndentedLineWrap.ts

diff --git a/packages/hoppscotch-app/helpers/editor/codemirror.ts b/packages/hoppscotch-app/helpers/editor/codemirror.ts
index 7e6ed56f8..e591dbde5 100644
--- a/packages/hoppscotch-app/helpers/editor/codemirror.ts
+++ b/packages/hoppscotch-app/helpers/editor/codemirror.ts
@@ -38,7 +38,6 @@ import { Completer } from "./completion"
 import { LinterDefinition } from "./linting/linter"
 import { basicSetup, baseTheme, baseHighlightStyle } from "./themes/baseTheme"
 import { HoppEnvironmentPlugin } from "./extensions/HoppEnvironment"
-import { IndentedLineWrapPlugin } from "./extensions/IndentedLineWrap"
 // TODO: Migrate from legacy mode
 
 type ExtendedEditorConfig = {
@@ -238,7 +237,7 @@ export function useCodemirror(
       ),
       lineWrapping.of(
         options.extendedEditorConfig.lineWrapping
-          ? [IndentedLineWrapPlugin]
+          ? [EditorView.lineWrapping]
           : []
       ),
       keymap.of([
@@ -325,7 +324,7 @@ export function useCodemirror(
     (newMode) => {
       view.value?.dispatch({
         effects: lineWrapping.reconfigure(
-          newMode ? [EditorView.lineWrapping, IndentedLineWrapPlugin] : []
+          newMode ? [EditorView.lineWrapping] : []
         ),
       })
     }
diff --git a/packages/hoppscotch-app/helpers/editor/extensions/IndentedLineWrap.ts b/packages/hoppscotch-app/helpers/editor/extensions/IndentedLineWrap.ts
deleted file mode 100644
index 5ad2519cb..000000000
--- a/packages/hoppscotch-app/helpers/editor/extensions/IndentedLineWrap.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { EditorView } from "@codemirror/view"
-
-const WrappedLineIndenter = EditorView.updateListener.of((update) => {
-  const view = update.view
-  const charWidth = view.defaultCharacterWidth
-  const lineHeight = view.defaultLineHeight
-  const basePadding = 10
-
-  view.viewportLines((line) => {
-    const domAtPos = view.domAtPos(line.from)
-
-    const lineCount = (line.bottom - line.top) / lineHeight
-
-    if (lineCount <= 1) return
-
-    const belowPadding = basePadding * charWidth
-
-    const node = domAtPos.node as HTMLElement
-    node.style.textIndent = `-${belowPadding - charWidth + 1}px`
-    node.style.paddingLeft = `${belowPadding}px`
-  })
-})
-
-export const IndentedLineWrapPlugin = [
-  EditorView.lineWrapping,
-  WrappedLineIndenter,
-]

From 97ff08911020c5985371b4679e0e9bb4b531719e Mon Sep 17 00:00:00 2001
From: nicognaW <nicognaw@outlook.com>
Date: Tue, 14 Jun 2022 18:10:33 +0800
Subject: [PATCH 33/50] feat: display response size with a bigger unit in
 tooltip (#2425)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 .../components/http/ResponseMeta.vue          | 39 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/packages/hoppscotch-app/components/http/ResponseMeta.vue b/packages/hoppscotch-app/components/http/ResponseMeta.vue
index 48f8c8f59..e0ce87733 100644
--- a/packages/hoppscotch-app/components/http/ResponseMeta.vue
+++ b/packages/hoppscotch-app/components/http/ResponseMeta.vue
@@ -117,9 +117,21 @@
             <span class="text-secondary"> {{ t("response.time") }}: </span>
             {{ `${response.meta.responseDuration} ms` }}
           </span>
-          <span v-if="response.meta && response.meta.responseSize">
+          <span
+            v-if="response.meta && response.meta.responseSize"
+            v-tippy="
+              readableResponseSize
+                ? { theme: 'tooltip' }
+                : { onShow: () => false }
+            "
+            :title="`${response.meta.responseSize} B`"
+          >
             <span class="text-secondary"> {{ t("response.size") }}: </span>
-            {{ `${response.meta.responseSize} B` }}
+            {{
+              readableResponseSize
+                ? readableResponseSize
+                : `${response.meta.responseSize} B`
+            }}
           </span>
         </div>
       </div>
@@ -141,6 +153,29 @@ const props = defineProps<{
   response: HoppRESTResponse
 }>()
 
+/**
+ * Gives the response size in a human readable format
+ * (changes unit from B to MB/KB depending on the size)
+ * If no changes (error res state) or value can be made (size < 1KB ?),
+ * it returns undefined
+ */
+const readableResponseSize = computed(() => {
+  if (
+    props.response.type === "loading" ||
+    props.response.type === "network_fail" ||
+    props.response.type === "script_fail" ||
+    props.response.type === "fail"
+  )
+    return undefined
+
+  const size = props.response.meta.responseSize
+
+  if (size >= 100000) return (size / 1000000).toFixed(2) + " MB"
+  if (size >= 1000) return (size / 1000).toFixed(2) + " KB"
+
+  return undefined
+})
+
 const statusCategory = computed(() => {
   if (
     props.response.type === "loading" ||

From 15e433b114c0a1d4f5bcf4cd2a7bc7145cb2ef0f Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 14 Jun 2022 17:24:28 +0530
Subject: [PATCH 34/50] fix: broken volar inference on templates

---
 packages/hoppscotch-app/tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/hoppscotch-app/tsconfig.json b/packages/hoppscotch-app/tsconfig.json
index 46e0650ff..fa38d5939 100644
--- a/packages/hoppscotch-app/tsconfig.json
+++ b/packages/hoppscotch-app/tsconfig.json
@@ -30,6 +30,6 @@
   },
   "exclude": ["node_modules", ".nuxt", "dist"],
   "vueCompilerOptions": {
-    "experimentalCompatMode": 2
+    "target": 2,
   }
 }

From 2d0bd48e0007009f7a2e945e606f25b8f8f59bb2 Mon Sep 17 00:00:00 2001
From: Moritz Mock <mock.moritz@rolmail.net>
Date: Tue, 14 Jun 2022 18:51:03 +0200
Subject: [PATCH 35/50] feat: checks only if not default param (#2410)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 packages/hoppscotch-app/components/collections/my/Request.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/hoppscotch-app/components/collections/my/Request.vue b/packages/hoppscotch-app/components/collections/my/Request.vue
index 40b69e167..339df7422 100644
--- a/packages/hoppscotch-app/components/collections/my/Request.vue
+++ b/packages/hoppscotch-app/components/collections/my/Request.vue
@@ -322,6 +322,7 @@ const setRestReq = (request: any) => {
   )
 }
 
+/** Loads request from the save once, checks for unsaved changes, but ignores default values */
 const selectRequest = () => {
   if (!active.value) {
     confirmChange.value = true
@@ -362,6 +363,9 @@ const selectRequest = () => {
       setRESTSaveContext(null)
     }
   }
+  if (isEqualHoppRESTRequest(getRESTRequest(), getDefaultRESTRequest())) {
+    confirmChange.value = false
+  }
 }
 
 /** Save current request to the collection */

From 0244b941b35925de8d240a9abbeb658c8282ed17 Mon Sep 17 00:00:00 2001
From: Deepanshu Dhruw <dhruwxl@gmail.com>
Date: Wed, 15 Jun 2022 23:53:24 +0530
Subject: [PATCH 36/50] feat: added support for passing env.json file to test
 cmd (#2373)

---
 packages/hoppscotch-cli/README.md             | 15 +++-
 .../src/__tests__/commands/test.spec.ts       | 43 ++++++++++-
 ...heckFilePath.spec.ts => checkFile.spec.ts} | 14 ++--
 .../collection/collectionsRunner.spec.ts      | 77 +++++++++++--------
 .../getters/getEffectiveFinalMetaData.spec.ts |  2 +
 .../mutators/parseCollectionData.spec.ts      |  6 +-
 .../getEffectiveRESTRequest.spec.ts           |  2 +
 .../src/__tests__/samples/env-flag-envs.json  |  7 ++
 .../src/__tests__/samples/env-flag-tests.json | 22 ++++++
 packages/hoppscotch-cli/src/commands/test.ts  | 11 +--
 packages/hoppscotch-cli/src/handlers/error.ts |  7 +-
 packages/hoppscotch-cli/src/index.ts          | 16 ++--
 .../hoppscotch-cli/src/options/test/env.ts    | 64 +++++++++++++++
 .../hoppscotch-cli/src/types/collections.ts   |  9 +++
 packages/hoppscotch-cli/src/types/commands.ts |  5 ++
 packages/hoppscotch-cli/src/types/errors.ts   |  3 +-
 packages/hoppscotch-cli/src/types/request.ts  | 12 +--
 packages/hoppscotch-cli/src/utils/checks.ts   | 64 +++++++++------
 .../hoppscotch-cli/src/utils/collections.ts   | 11 ++-
 packages/hoppscotch-cli/src/utils/mutators.ts | 15 +++-
 20 files changed, 309 insertions(+), 96 deletions(-)
 rename packages/hoppscotch-cli/src/__tests__/functions/checks/{checkFilePath.spec.ts => checkFile.spec.ts} (57%)
 create mode 100644 packages/hoppscotch-cli/src/__tests__/samples/env-flag-envs.json
 create mode 100644 packages/hoppscotch-cli/src/__tests__/samples/env-flag-tests.json
 create mode 100644 packages/hoppscotch-cli/src/options/test/env.ts
 create mode 100644 packages/hoppscotch-cli/src/types/collections.ts
 create mode 100644 packages/hoppscotch-cli/src/types/commands.ts

diff --git a/packages/hoppscotch-cli/README.md b/packages/hoppscotch-cli/README.md
index f1a70d75c..9e806c009 100644
--- a/packages/hoppscotch-cli/README.md
+++ b/packages/hoppscotch-cli/README.md
@@ -24,13 +24,26 @@ hopp [options or commands] arguments
 
    - Displays the help text
 
-3. #### **`hopp test <file_path>`**
+3. #### **`hopp test [options] <file_path>`**
    - Interactive CLI to accept Hoppscotch collection JSON path
    - Parses the collection JSON and executes each requests
    - Executes pre-request script.
    - Outputs the response of each request.
    - Executes and outputs test-script response.
 
+    #### Options:
+    ##### `-e <file_path>` / `--env <file_path>`
+    - Accepts path to env.json with contents in below format:   
+        ```json
+        {
+            "ENV1":"value1",
+            "ENV2":"value2"
+        }
+        ```
+    - You can now access those variables using `pw.env.get('<var_name>')`
+			
+			Taking the above example, `pw.env.get("ENV1")` will return `"value1"`
+
 ## Install
 
 Install [@hoppscotch/cli](https://www.npmjs.com/package/@hoppscotch/cli) from npm by running:
diff --git a/packages/hoppscotch-cli/src/__tests__/commands/test.spec.ts b/packages/hoppscotch-cli/src/__tests__/commands/test.spec.ts
index 6850f5ff3..0b69f443b 100644
--- a/packages/hoppscotch-cli/src/__tests__/commands/test.spec.ts
+++ b/packages/hoppscotch-cli/src/__tests__/commands/test.spec.ts
@@ -8,7 +8,7 @@ describe("Test 'hopp test <file>' command:", () => {
     const { stdout } = await execAsync(cmd);
     const out = getErrorCode(stdout);
 
-    expect(out).toBe<HoppErrorCode>("NO_FILE_PATH");
+    expect(out).toBe<HoppErrorCode>("INVALID_ARGUMENT");
   });
 
   test("Collection file not found.", async () => {
@@ -42,7 +42,7 @@ describe("Test 'hopp test <file>' command:", () => {
     const { stdout } = await execAsync(cmd);
     const out = getErrorCode(stdout);
 
-    expect(out).toBe<HoppErrorCode>("FILE_NOT_JSON");
+    expect(out).toBe<HoppErrorCode>("INVALID_FILE_TYPE");
   });
 
   test("Some errors occured (exit code 1).", async () => {
@@ -62,3 +62,42 @@ describe("Test 'hopp test <file>' command:", () => {
     expect(error).toBeNull();
   });
 });
+
+describe("Test 'hopp test <file> --env <file>' command:", () => {
+  const VALID_TEST_CMD = `node ./bin/hopp test ${getTestJsonFilePath(
+    "passes.json"
+  )}`;
+
+  test("No env file path provided.", async () => {
+    const cmd = `${VALID_TEST_CMD} --env`;
+    const { stdout } = await execAsync(cmd);
+    const out = getErrorCode(stdout);
+
+    expect(out).toBe<HoppErrorCode>("INVALID_ARGUMENT");
+  });
+
+  test("ENV file not JSON type.", async () => {
+    const cmd = `${VALID_TEST_CMD} --env ${getTestJsonFilePath("notjson.txt")}`;
+    const { stdout } = await execAsync(cmd);
+    const out = getErrorCode(stdout);
+
+    expect(out).toBe<HoppErrorCode>("INVALID_FILE_TYPE");
+  });
+
+  test("ENV file not found.", async () => {
+    const cmd = `${VALID_TEST_CMD} --env notfound.json`;
+    const { stdout } = await execAsync(cmd);
+    const out = getErrorCode(stdout);
+
+    expect(out).toBe<HoppErrorCode>("FILE_NOT_FOUND");
+  });
+
+  // test("No errors occured (exit code 0).", async () => {
+  //   const TESTS_PATH = getTestJsonFilePath("env-flag-tests.json");
+  //   const ENV_PATH = getTestJsonFilePath("env-flag-envs.json");
+  //   const cmd = `node ./bin/hopp test ${TESTS_PATH} --env ${ENV_PATH}`;
+  //   const { error } = await execAsync(cmd);
+
+  //   expect(error).toBeNull();
+  // });
+});
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/checks/checkFilePath.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/checks/checkFile.spec.ts
similarity index 57%
rename from packages/hoppscotch-cli/src/__tests__/functions/checks/checkFilePath.spec.ts
rename to packages/hoppscotch-cli/src/__tests__/functions/checks/checkFile.spec.ts
index 7b7366d66..2ae9ba885 100644
--- a/packages/hoppscotch-cli/src/__tests__/functions/checks/checkFilePath.spec.ts
+++ b/packages/hoppscotch-cli/src/__tests__/functions/checks/checkFile.spec.ts
@@ -1,10 +1,12 @@
 import { HoppCLIError } from "../../../types/errors";
-import { checkFilePath } from "../../../utils/checks";
+import { checkFile } from "../../../utils/checks";
 
-describe("checkFilePath", () => {
+import "@relmify/jest-fp-ts";
+
+describe("checkFile", () => {
   test("File doesn't exists.", () => {
     return expect(
-      checkFilePath("./src/samples/this-file-not-exists.json")()
+      checkFile("./src/samples/this-file-not-exists.json")()
     ).resolves.toSubsetEqualLeft(<HoppCLIError>{
       code: "FILE_NOT_FOUND",
     });
@@ -12,15 +14,15 @@ describe("checkFilePath", () => {
 
   test("File not of JSON type.", () => {
     return expect(
-      checkFilePath("./src/__tests__/samples/notjson.txt")()
+      checkFile("./src/__tests__/samples/notjson.txt")()
     ).resolves.toSubsetEqualLeft(<HoppCLIError>{
-      code: "FILE_NOT_JSON",
+      code: "INVALID_FILE_TYPE",
     });
   });
 
   test("Existing JSON file.", () => {
     return expect(
-      checkFilePath("./src/__tests__/samples/passes.json")()
+      checkFile("./src/__tests__/samples/passes.json")()
     ).resolves.toBeRight();
   });
 });
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/collection/collectionsRunner.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/collection/collectionsRunner.spec.ts
index dcfe69dd6..04f869989 100644
--- a/packages/hoppscotch-cli/src/__tests__/functions/collection/collectionsRunner.spec.ts
+++ b/packages/hoppscotch-cli/src/__tests__/functions/collection/collectionsRunner.spec.ts
@@ -37,6 +37,8 @@ const SAMPLE_RESOLVED_RESPONSE = <AxiosResponse>{
   headers: [],
 };
 
+const SAMPLE_ENVS = { global: [], selected: [] };
+
 describe("collectionsRunner", () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -47,19 +49,24 @@ describe("collectionsRunner", () => {
   });
 
   test("Empty HoppCollection.", () => {
-    return expect(collectionsRunner([])()).resolves.toStrictEqual([]);
+    return expect(
+      collectionsRunner({ collections: [], envs: SAMPLE_ENVS })()
+    ).resolves.toStrictEqual([]);
   });
 
   test("Empty requests and folders in collection.", () => {
     return expect(
-      collectionsRunner([
-        {
-          v: 1,
-          name: "name",
-          folders: [],
-          requests: [],
-        },
-      ])()
+      collectionsRunner({
+        collections: [
+          {
+            v: 1,
+            name: "name",
+            folders: [],
+            requests: [],
+          },
+        ],
+        envs: SAMPLE_ENVS,
+      })()
     ).resolves.toMatchObject([]);
   });
 
@@ -67,14 +74,17 @@ describe("collectionsRunner", () => {
     (axios as unknown as jest.Mock).mockResolvedValue(SAMPLE_RESOLVED_RESPONSE);
 
     return expect(
-      collectionsRunner([
-        {
-          v: 1,
-          name: "collection",
-          folders: [],
-          requests: [SAMPLE_HOPP_REQUEST],
-        },
-      ])()
+      collectionsRunner({
+        collections: [
+          {
+            v: 1,
+            name: "collection",
+            folders: [],
+            requests: [SAMPLE_HOPP_REQUEST],
+          },
+        ],
+        envs: SAMPLE_ENVS,
+      })()
     ).resolves.toMatchObject([
       {
         path: "collection/request",
@@ -89,21 +99,24 @@ describe("collectionsRunner", () => {
     (axios as unknown as jest.Mock).mockResolvedValue(SAMPLE_RESOLVED_RESPONSE);
 
     return expect(
-      collectionsRunner([
-        {
-          v: 1,
-          name: "collection",
-          folders: [
-            {
-              v: 1,
-              name: "folder",
-              folders: [],
-              requests: [SAMPLE_HOPP_REQUEST],
-            },
-          ],
-          requests: [],
-        },
-      ])()
+      collectionsRunner({
+        collections: [
+          {
+            v: 1,
+            name: "collection",
+            folders: [
+              {
+                v: 1,
+                name: "folder",
+                folders: [],
+                requests: [SAMPLE_HOPP_REQUEST],
+              },
+            ],
+            requests: [],
+          },
+        ],
+        envs: SAMPLE_ENVS,
+      })()
     ).resolves.toMatchObject([
       {
         path: "collection/folder/request",
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/getters/getEffectiveFinalMetaData.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/getters/getEffectiveFinalMetaData.spec.ts
index 637064bac..2a55b79ac 100644
--- a/packages/hoppscotch-cli/src/__tests__/functions/getters/getEffectiveFinalMetaData.spec.ts
+++ b/packages/hoppscotch-cli/src/__tests__/functions/getters/getEffectiveFinalMetaData.spec.ts
@@ -1,6 +1,8 @@
 import { Environment } from "@hoppscotch/data";
 import { getEffectiveFinalMetaData } from "../../../utils/getters";
 
+import "@relmify/jest-fp-ts";
+
 const DEFAULT_ENV = <Environment>{
   name: "name",
   variables: [{ key: "PARAM", value: "parsed_param" }],
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/mutators/parseCollectionData.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/mutators/parseCollectionData.spec.ts
index f1fc79eab..236858376 100644
--- a/packages/hoppscotch-cli/src/__tests__/functions/mutators/parseCollectionData.spec.ts
+++ b/packages/hoppscotch-cli/src/__tests__/functions/mutators/parseCollectionData.spec.ts
@@ -1,12 +1,14 @@
 import { HoppCLIError } from "../../../types/errors";
 import { parseCollectionData } from "../../../utils/mutators";
 
+import "@relmify/jest-fp-ts";
+
 describe("parseCollectionData", () => {
   test("Reading non-existing file.", () => {
     return expect(
-      parseCollectionData("./src/__tests__/samples/notexist.txt")()
+      parseCollectionData("./src/__tests__/samples/notexist.json")()
     ).resolves.toSubsetEqualLeft(<HoppCLIError>{
-      code: "UNKNOWN_ERROR",
+      code: "FILE_NOT_FOUND",
     });
   });
 
diff --git a/packages/hoppscotch-cli/src/__tests__/functions/pre-request/getEffectiveRESTRequest.spec.ts b/packages/hoppscotch-cli/src/__tests__/functions/pre-request/getEffectiveRESTRequest.spec.ts
index 0aa46fcc9..1ab4e9783 100644
--- a/packages/hoppscotch-cli/src/__tests__/functions/pre-request/getEffectiveRESTRequest.spec.ts
+++ b/packages/hoppscotch-cli/src/__tests__/functions/pre-request/getEffectiveRESTRequest.spec.ts
@@ -3,6 +3,8 @@ import { EffectiveHoppRESTRequest } from "../../../interfaces/request";
 import { HoppCLIError } from "../../../types/errors";
 import { getEffectiveRESTRequest } from "../../../utils/pre-request";
 
+import "@relmify/jest-fp-ts";
+
 const DEFAULT_ENV = <Environment>{
   name: "name",
   variables: [
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/env-flag-envs.json b/packages/hoppscotch-cli/src/__tests__/samples/env-flag-envs.json
new file mode 100644
index 000000000..36d3babeb
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/samples/env-flag-envs.json
@@ -0,0 +1,7 @@
+{
+  "URL": "https://echo.hoppscotch.io",
+  "HOST": "echo.hoppscotch.io",
+  "X-COUNTRY": "IN",
+  "BODY_VALUE": "body_value",
+  "BODY_KEY": "body_key"
+}
diff --git a/packages/hoppscotch-cli/src/__tests__/samples/env-flag-tests.json b/packages/hoppscotch-cli/src/__tests__/samples/env-flag-tests.json
new file mode 100644
index 000000000..8533bf2dc
--- /dev/null
+++ b/packages/hoppscotch-cli/src/__tests__/samples/env-flag-tests.json
@@ -0,0 +1,22 @@
+{
+  "v": 1,
+  "name": "env-flag-tests",
+  "folders": [],
+  "requests": [
+    {
+      "v": "1",
+      "endpoint": "<<URL>>",
+      "name": "test1",
+      "params": [],
+      "headers": [],
+      "method": "POST",
+      "auth": { "authType": "none", "authActive": true },
+      "preRequestScript": "",
+      "testScript": "const HOST = pw.env.get(\"HOST\");\nconst UNSET_ENV = pw.env.get(\"UNSET_ENV\");\nconst EXPECTED_URL = \"https://echo.hoppscotch.io\";\nconst URL = pw.env.get(\"URL\");\nconst X_COUNTRY = pw.env.get(\"X-COUNTRY\");\nconst BODY_VALUE = pw.env.get(\"BODY_VALUE\");\n\n// Check JSON response property\npw.test(\"Check headers properties.\", ()=> {\n    pw.expect(pw.response.body.headers.host).toBe(HOST);\n\t   pw.expect(pw.response.body.headers[\"x-country\"]).toBe(X_COUNTRY);  \n});\n\npw.test(\"Check data properties.\", () => {\n\tconst DATA = pw.response.body.data;\n  \n    pw.expect(DATA).toBeType(\"string\");\n    pw.expect(JSON.parse(DATA).body_key).toBe(BODY_VALUE);\n});\n\npw.test(\"Check request URL.\", () => {\n  pw.expect(URL).toBe(EXPECTED_URL);\n})\n\npw.test(\"Check unset ENV.\", () => {\n  pw.expect(UNSET_ENV).toBeType(\"undefined\");\n})",
+      "body": {
+        "contentType": "application/json",
+        "body": "{\n  \"<<BODY_KEY>>\":\"<<BODY_VALUE>>\"\n}"
+      }
+    }
+  ]
+}
diff --git a/packages/hoppscotch-cli/src/commands/test.ts b/packages/hoppscotch-cli/src/commands/test.ts
index 349b4da96..7159f4632 100644
--- a/packages/hoppscotch-cli/src/commands/test.ts
+++ b/packages/hoppscotch-cli/src/commands/test.ts
@@ -6,14 +6,15 @@ import {
   collectionsRunnerResult,
 } from "../utils/collections";
 import { handleError } from "../handlers/error";
-import { checkFilePath } from "../utils/checks";
 import { parseCollectionData } from "../utils/mutators";
+import { parseEnvsData } from "../options/test/env";
+import { TestCmdOptions } from "../types/commands";
 
-export const test = (path: string) => async () => {
+export const test = (path: string, options: TestCmdOptions) => async () => {
   await pipe(
-    path,
-    checkFilePath,
-    TE.chain(parseCollectionData),
+    TE.Do,
+    TE.bind("envs", () => parseEnvsData(options.env)),
+    TE.bind("collections", () => parseCollectionData(path)),
     TE.chainTaskK(collectionsRunner),
     TE.chainW(flow(collectionsRunnerResult, collectionsRunnerExit, TE.of)),
     TE.mapLeft((e) => {
diff --git a/packages/hoppscotch-cli/src/handlers/error.ts b/packages/hoppscotch-cli/src/handlers/error.ts
index e0b340701..7e640e2fa 100644
--- a/packages/hoppscotch-cli/src/handlers/error.ts
+++ b/packages/hoppscotch-cli/src/handlers/error.ts
@@ -48,9 +48,7 @@ export const handleError = <T extends HoppErrorCode>(error: HoppError<T>) => {
     case "UNKNOWN_COMMAND":
       ERROR_MSG = `Unavailable command: ${error.command}`;
       break;
-    case "FILE_NOT_JSON":
-      ERROR_MSG = `Please check file type: ${error.path}`;
-      break;
+    case "MALFORMED_ENV_FILE":
     case "MALFORMED_COLLECTION":
       ERROR_MSG = `${error.path}\n${parseErrorData(error.data)}`;
       break;
@@ -60,6 +58,9 @@ export const handleError = <T extends HoppErrorCode>(error: HoppError<T>) => {
     case "PARSING_ERROR":
       ERROR_MSG = `Unable to parse -\n${error.data}`;
       break;
+    case "INVALID_FILE_TYPE":
+      ERROR_MSG = `Please provide file of extension type: ${error.data}`;
+      break;
     case "REQUEST_ERROR":
     case "TEST_SCRIPT_ERROR":
     case "PRE_REQUEST_SCRIPT_ERROR":
diff --git a/packages/hoppscotch-cli/src/index.ts b/packages/hoppscotch-cli/src/index.ts
index 2c0a34a1c..d93248f68 100644
--- a/packages/hoppscotch-cli/src/index.ts
+++ b/packages/hoppscotch-cli/src/index.ts
@@ -5,14 +5,16 @@ import { version } from "../package.json";
 import { test } from "./commands/test";
 import { handleError } from "./handlers/error";
 
-const accent = chalk.greenBright
+const accent = chalk.greenBright;
 
 /**
  * * Program Default Configuration
  */
 const CLI_BEFORE_ALL_TXT = `hopp: The ${accent(
   "Hoppscotch"
-)} CLI - Version ${version} (${accent("https://hoppscotch.io")}) ${chalk.black.bold.bgYellowBright(" ALPHA ")} \n`;
+)} CLI - Version ${version} (${accent(
+  "https://hoppscotch.io"
+)}) ${chalk.black.bold.bgYellowBright(" ALPHA ")} \n`;
 
 const CLI_AFTER_ALL_TXT = `\nFor more help, head on to ${accent(
   "https://docs.hoppscotch.io/cli"
@@ -44,14 +46,18 @@ program.exitOverride().configureOutput({
 program
   .command("test")
   .argument(
-    "[file]",
+    "<file_path>",
     "path to a hoppscotch collection.json file for CI testing"
   )
+  .option("-e, --env <file_path>", "path to an environment variables json file")
   .allowExcessArguments(false)
   .allowUnknownOption(false)
   .description("running hoppscotch collection.json file")
-  .addHelpText("after", `\nFor help, head on to ${accent("https://docs.hoppscotch.io/cli#test")}`)
-  .action(async (path) => await test(path)());
+  .addHelpText(
+    "after",
+    `\nFor help, head on to ${accent("https://docs.hoppscotch.io/cli#test")}`
+  )
+  .action(async (path, options) => await test(path, options)());
 
 export const cli = async (args: string[]) => {
   try {
diff --git a/packages/hoppscotch-cli/src/options/test/env.ts b/packages/hoppscotch-cli/src/options/test/env.ts
new file mode 100644
index 000000000..057bb8f0c
--- /dev/null
+++ b/packages/hoppscotch-cli/src/options/test/env.ts
@@ -0,0 +1,64 @@
+import fs from "fs/promises";
+import { pipe } from "fp-ts/function";
+import * as TE from "fp-ts/TaskEither";
+import * as E from "fp-ts/Either";
+import * as J from "fp-ts/Json";
+import * as A from "fp-ts/Array";
+import * as S from "fp-ts/string";
+import isArray from "lodash/isArray";
+import { HoppCLIError, error } from "../../types/errors";
+import { HoppEnvs, HoppEnvPair } from "../../types/request";
+import { checkFile } from "../../utils/checks";
+
+/**
+ * Parses env json file for given path and validates the parsed env json object.
+ * @param path Path of env.json file to be parsed.
+ * @returns For successful parsing we get HoppEnvs object.
+ */
+export const parseEnvsData = (
+  path: unknown
+): TE.TaskEither<HoppCLIError, HoppEnvs> =>
+  !S.isString(path)
+    ? TE.right({ global: [], selected: [] })
+    : pipe(
+        // Checking if the env.json file exists or not.
+        checkFile(path),
+
+        // Trying to read given env json file path.
+        TE.chainW((checkedPath) =>
+          TE.tryCatch(
+            () => fs.readFile(checkedPath),
+            (reason) =>
+              error({ code: "UNKNOWN_ERROR", data: E.toError(reason) })
+          )
+        ),
+
+        // Trying to JSON parse the read file data and mapping the entries to HoppEnvPairs.
+        TE.chainEitherKW((data) =>
+          pipe(
+            data.toString(),
+            J.parse,
+            E.map((jsonData) =>
+              jsonData && typeof jsonData === "object" && !isArray(jsonData)
+                ? pipe(
+                    jsonData,
+                    Object.entries,
+                    A.map(
+                      ([key, value]) =>
+                        <HoppEnvPair>{
+                          key,
+                          value: S.isString(value)
+                            ? value
+                            : JSON.stringify(value),
+                        }
+                    )
+                  )
+                : []
+            ),
+            E.map((envPairs) => <HoppEnvs>{ global: [], selected: envPairs }),
+            E.mapLeft((e) =>
+              error({ code: "MALFORMED_ENV_FILE", path, data: E.toError(e) })
+            )
+          )
+        )
+      );
diff --git a/packages/hoppscotch-cli/src/types/collections.ts b/packages/hoppscotch-cli/src/types/collections.ts
new file mode 100644
index 000000000..57794954f
--- /dev/null
+++ b/packages/hoppscotch-cli/src/types/collections.ts
@@ -0,0 +1,9 @@
+import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data";
+import { HoppEnvs } from "./request";
+
+export type CollectionRunnerParam = {
+  collections: HoppCollection<HoppRESTRequest>[];
+  envs: HoppEnvs;
+};
+
+export type HoppCollectionFileExt = "json";
diff --git a/packages/hoppscotch-cli/src/types/commands.ts b/packages/hoppscotch-cli/src/types/commands.ts
new file mode 100644
index 000000000..59de3536c
--- /dev/null
+++ b/packages/hoppscotch-cli/src/types/commands.ts
@@ -0,0 +1,5 @@
+export type TestCmdOptions = {
+  env: string;
+};
+
+export type HoppEnvFileExt = "json";
diff --git a/packages/hoppscotch-cli/src/types/errors.ts b/packages/hoppscotch-cli/src/types/errors.ts
index 9b896fa6b..d6baf8730 100644
--- a/packages/hoppscotch-cli/src/types/errors.ts
+++ b/packages/hoppscotch-cli/src/types/errors.ts
@@ -15,7 +15,6 @@ type HoppErrors = {
   FILE_NOT_FOUND: HoppErrorPath;
   UNKNOWN_COMMAND: HoppErrorCmd;
   MALFORMED_COLLECTION: HoppErrorPath & HoppErrorData;
-  FILE_NOT_JSON: HoppErrorPath;
   NO_FILE_PATH: {};
   PRE_REQUEST_SCRIPT_ERROR: HoppErrorData;
   PARSING_ERROR: HoppErrorData;
@@ -24,6 +23,8 @@ type HoppErrors = {
   SYNTAX_ERROR: HoppErrorData;
   REQUEST_ERROR: HoppErrorData;
   INVALID_ARGUMENT: HoppErrorData;
+  MALFORMED_ENV_FILE: HoppErrorPath & HoppErrorData;
+  INVALID_FILE_TYPE: HoppErrorData;
 };
 
 export type HoppErrorCode = keyof HoppErrors;
diff --git a/packages/hoppscotch-cli/src/types/request.ts b/packages/hoppscotch-cli/src/types/request.ts
index 4a5e990e0..10b53a146 100644
--- a/packages/hoppscotch-cli/src/types/request.ts
+++ b/packages/hoppscotch-cli/src/types/request.ts
@@ -7,15 +7,11 @@ export type FormDataEntry = {
   value: string | Blob;
 };
 
+export type HoppEnvPair = { key: string; value: string };
+
 export type HoppEnvs = {
-  global: {
-    key: string;
-    value: string;
-  }[];
-  selected: {
-    key: string;
-    value: string;
-  }[];
+  global: HoppEnvPair[];
+  selected: HoppEnvPair[];
 };
 
 export type CollectionStack = {
diff --git a/packages/hoppscotch-cli/src/utils/checks.ts b/packages/hoppscotch-cli/src/utils/checks.ts
index 658195f47..53764ce15 100644
--- a/packages/hoppscotch-cli/src/utils/checks.ts
+++ b/packages/hoppscotch-cli/src/utils/checks.ts
@@ -9,8 +9,12 @@ import {
 import * as A from "fp-ts/Array";
 import * as S from "fp-ts/string";
 import * as TE from "fp-ts/TaskEither";
-import { error, HoppCLIError, HoppErrnoException } from "../types/errors";
+import * as E from "fp-ts/Either";
+import curryRight from "lodash/curryRight";
 import { CommanderError } from "commander";
+import { error, HoppCLIError, HoppErrnoException } from "../types/errors";
+import { HoppCollectionFileExt } from "../types/collections";
+import { HoppEnvFileExt } from "../types/commands";
 
 /**
  * Determines whether an object has a property with given name.
@@ -68,42 +72,56 @@ export const isRESTCollection = (
 };
 
 /**
- * Checks if the given file path exists and is of JSON type.
+ * Checks if the file path matches the requried file type with of required extension.
+ * @param path The input file path to check.
+ * @param extension The required extension for input file path.
+ * @returns Absolute path for valid file extension OR HoppCLIError in case of error.
+ */
+export const checkFileExt = curryRight(
+  (
+    path: unknown,
+    extension: HoppCollectionFileExt | HoppEnvFileExt
+  ): E.Either<HoppCLIError, string> =>
+    pipe(
+      path,
+      E.fromPredicate(S.isString, (_) => error({ code: "NO_FILE_PATH" })),
+      E.chainW(
+        E.fromPredicate(S.endsWith(`.${extension}`), (_) =>
+          error({ code: "INVALID_FILE_TYPE", data: extension })
+        )
+      )
+    )
+);
+
+/**
+ * Checks if the given file path exists and is of given type.
  * @param path The input file path to check.
  * @returns Absolute path for valid file path OR HoppCLIError in case of error.
  */
-export const checkFilePath = (
-  path: string
-): TE.TaskEither<HoppCLIError, string> =>
+export const checkFile = (path: unknown): TE.TaskEither<HoppCLIError, string> =>
   pipe(
     path,
 
-    /**
-     * Check the path type and returns string if passes else HoppCLIError.
-     */
+    // Checking if path is string.
     TE.fromPredicate(S.isString, () => error({ code: "NO_FILE_PATH" })),
 
+    /**
+     * After checking file path, we map file path to absolute path and check
+     * if file is of given extension type.
+     */
+    TE.map(join),
+    TE.chainEitherK(checkFileExt("json")),
+
     /**
      * Trying to access given file path.
      * If successfully accessed, we return the path from predicate step.
      * Else return HoppCLIError with code FILE_NOT_FOUND.
      */
-    TE.chainFirstW(
+    TE.chainFirstW((checkedPath) =>
       TE.tryCatchK(
-        () => pipe(path, join, fs.access),
-        () => error({ code: "FILE_NOT_FOUND", path: path })
-      )
-    ),
-
-    /**
-     * On successfully accessing given file path, we map file path to
-     * absolute path and return abs file path if file is JSON type.
-     */
-    TE.map(join),
-    TE.chainW(
-      TE.fromPredicate(S.endsWith(".json"), (absPath) =>
-        error({ code: "FILE_NOT_JSON", path: absPath })
-      )
+        () => fs.access(checkedPath),
+        () => error({ code: "FILE_NOT_FOUND", path: checkedPath })
+      )()
     )
   );
 
diff --git a/packages/hoppscotch-cli/src/utils/collections.ts b/packages/hoppscotch-cli/src/utils/collections.ts
index d87b6395e..3bd8cd1f8 100644
--- a/packages/hoppscotch-cli/src/utils/collections.ts
+++ b/packages/hoppscotch-cli/src/utils/collections.ts
@@ -27,21 +27,24 @@ import {
 import { getTestMetrics } from "./test";
 import { DEFAULT_DURATION_PRECISION } from "./constants";
 import { getPreRequestMetrics } from "./pre-request";
+import { CollectionRunnerParam } from "../types/collections";
 
 const { WARN, FAIL } = exceptionColors;
 
 /**
  * Processes each requests within collections to prints details of subsequent requests,
  * tests and to display complete errors-report, failed-tests-report and test-metrics.
- * @param collections Array of hopp-collection with hopp-requests to be processed.
+ * @param param Data of hopp-collection with hopp-requests, envs to be processed.
  * @returns List of report for each processed request.
  */
 export const collectionsRunner =
-  (collections: HoppCollection<HoppRESTRequest>[]): T.Task<RequestReport[]> =>
+  (param: CollectionRunnerParam): T.Task<RequestReport[]> =>
   async () => {
-    const envs: HoppEnvs = { global: [], selected: [] };
+    const envs: HoppEnvs = param.envs;
     const requestsReport: RequestReport[] = [];
-    const collectionStack: CollectionStack[] = getCollectionStack(collections);
+    const collectionStack: CollectionStack[] = getCollectionStack(
+      param.collections
+    );
 
     while (collectionStack.length) {
       // Pop out top-most collection from stack to be processed.
diff --git a/packages/hoppscotch-cli/src/utils/mutators.ts b/packages/hoppscotch-cli/src/utils/mutators.ts
index eb145d881..990ce4595 100644
--- a/packages/hoppscotch-cli/src/utils/mutators.ts
+++ b/packages/hoppscotch-cli/src/utils/mutators.ts
@@ -6,7 +6,7 @@ import * as J from "fp-ts/Json";
 import { pipe } from "fp-ts/function";
 import { FormDataEntry } from "../types/request";
 import { error, HoppCLIError } from "../types/errors";
-import { isRESTCollection, isHoppErrnoException } from "./checks";
+import { isRESTCollection, isHoppErrnoException, checkFile } from "./checks";
 import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data";
 
 /**
@@ -49,10 +49,17 @@ export const parseCollectionData = (
   path: string
 ): TE.TaskEither<HoppCLIError, HoppCollection<HoppRESTRequest>[]> =>
   pipe(
+    TE.of(path),
+
+    // Checking if given file path exists or not.
+    TE.chain(checkFile),
+
     // Trying to read give collection json path.
-    TE.tryCatch(
-      () => pipe(path, fs.readFile),
-      (reason) => error({ code: "UNKNOWN_ERROR", data: E.toError(reason) })
+    TE.chainW((checkedPath) =>
+      TE.tryCatch(
+        () => fs.readFile(checkedPath),
+        (reason) => error({ code: "UNKNOWN_ERROR", data: E.toError(reason) })
+      )
     ),
 
     // Checking if parsed file data is array.

From 7f08a4bd819f29480653f21b1d68ab2f8c8d78ac Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Wed, 15 Jun 2022 23:58:34 +0530
Subject: [PATCH 37/50] chore: hoppscotch-cli version 0.2.1

---
 packages/hoppscotch-cli/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/hoppscotch-cli/package.json b/packages/hoppscotch-cli/package.json
index 79adb3e83..b7eb100ce 100644
--- a/packages/hoppscotch-cli/package.json
+++ b/packages/hoppscotch-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hoppscotch/cli",
-  "version": "0.1.14",
+  "version": "0.2.1",
   "description": "A CLI to run Hoppscotch test scripts in CI environments.",
   "homepage": "https://hoppscotch.io",
   "main": "dist/index.js",

From 51138fa42d070938c5bd22854f4b49925ce9d17e Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Thu, 16 Jun 2022 06:02:57 +0530
Subject: [PATCH 38/50] chore: updated i18n translations

---
 packages/hoppscotch-app/locales/cn.json    | 178 ++++++++++-----------
 packages/hoppscotch-app/locales/pt-br.json | 106 ++++++------
 2 files changed, 142 insertions(+), 142 deletions(-)

diff --git a/packages/hoppscotch-app/locales/cn.json b/packages/hoppscotch-app/locales/cn.json
index c372b01ab..6be18aa0f 100644
--- a/packages/hoppscotch-app/locales/cn.json
+++ b/packages/hoppscotch-app/locales/cn.json
@@ -1,7 +1,7 @@
 {
   "action": {
     "cancel": "取消",
-    "choose_file": "选择一个文件",
+    "choose_file": "选择文件",
     "clear": "清除",
     "clear_all": "全部清除",
     "connect": "连接",
@@ -9,18 +9,18 @@
     "delete": "删除",
     "disconnect": "断开连接",
     "dismiss": "忽略",
-    "dont_save": "Don't save",
+    "dont_save": "不保存",
     "download_file": "下载文件",
     "duplicate": "复制",
     "edit": "编辑",
     "go_back": "返回",
     "label": "标签",
     "learn_more": "了解更多",
-    "less": "Less",
+    "less": "更少",
     "more": "更多",
     "new": "新增",
     "no": "否",
-    "paste": "Paste",
+    "paste": "粘贴",
     "prettify": "美化",
     "remove": "移除",
     "restore": "恢复",
@@ -45,9 +45,9 @@
     "chat_with_us": "与我们交谈",
     "contact_us": "联系我们",
     "copy": "复制",
-    "copy_user_id": "Copy User Auth Token",
-    "developer_option": "Developer options",
-    "developer_option_description": "Developer tools which helps in development and maintenance of Hoppscotch.",
+    "copy_user_id": "复制认证 Token",
+    "developer_option": "开发者选项",
+    "developer_option_description": "开发者工具，有助于开发和维护 Hoppscotch。",
     "discord": "Discord",
     "documentation": "帮助文档",
     "github": "GitHub",
@@ -60,7 +60,7 @@
     "keyboard_shortcuts": "键盘快捷键",
     "name": "Hoppscotch",
     "new_version_found": "已发现新版本。刷新页面以更新。",
-    "options": "Options",
+    "options": "选项",
     "proxy_privacy_policy": "代理隐私政策",
     "reload": "重新加载",
     "search": "搜索",
@@ -68,7 +68,7 @@
     "shortcuts": "快捷方式",
     "spotlight": "聚光灯",
     "status": "状态",
-    "status_description": "Check the status of the website",
+    "status_description": "检查网站状态",
     "terms_and_privacy": "隐私条款",
     "twitter": "Twitter",
     "type_a_command_search": "输入命令或搜索内容……",
@@ -82,7 +82,7 @@
     "continue_with_email": "使用电子邮箱登录",
     "continue_with_github": "使用 GitHub 登录",
     "continue_with_google": "使用 Google 登录",
-    "continue_with_microsoft": "Continue with Microsoft",
+    "continue_with_microsoft": "使用 Microsoft 登录",
     "email": "电子邮箱地址",
     "logged_out": "登出",
     "login": "登录",
@@ -106,32 +106,32 @@
     "username": "用户名"
   },
   "collection": {
-    "created": "组合已创建",
-    "edit": "编辑组合",
-    "invalid_name": "请提供有效的组合名称",
-    "my_collections": "我的组合",
-    "name": "我的新组合",
-    "name_length_insufficient": "Collection name should be at least 3 characters long",
-    "new": "新建组合",
-    "renamed": "组合已更名",
-    "request_in_use": "Request in use",
+    "created": "集合已创建",
+    "edit": "编辑集合",
+    "invalid_name": "请提供有效的集合名称",
+    "my_collections": "我的集合",
+    "name": "我的新集合",
+    "name_length_insufficient": "集合名字至少需要 3 个字符",
+    "new": "新建集合",
+    "renamed": "集合已更名",
+    "request_in_use": "请求正在使用中",
     "save_as": "另存为",
-    "select": "选择一个组合",
+    "select": "选择一个集合",
     "select_location": "选择位置",
     "select_team": "选择一个团队",
-    "team_collections": "团队组合"
+    "team_collections": "团队集合"
   },
   "confirm": {
     "exit_team": "你确定要离开此团队吗？",
     "logout": "你确定要登出吗？",
-    "remove_collection": "你确定要永久删除该组合吗？",
+    "remove_collection": "你确定要永久删除该集合吗？",
     "remove_environment": "你确定要永久删除该环境吗？",
     "remove_folder": "你确定要永久删除该文件夹吗？",
     "remove_history": "你确定要永久删除全部历史记录吗？",
     "remove_request": "你确定要永久删除该请求吗？",
     "remove_team": "你确定要删除该团队吗？",
     "remove_telemetry": "你确定要退出遥测服务吗？",
-    "request_change": "Are you sure you want to discard current request, unsaved changes will be lost.",
+    "request_change": "你确定你要放弃当前的请求，未保存的修改将被丢失。",
     "sync": "您确定要同步该工作区吗？"
   },
   "count": {
@@ -144,13 +144,13 @@
   },
   "documentation": {
     "generate": "生成文档",
-    "generate_message": "导入 Hoppscotch 组合以随时随地生成 API 文档。"
+    "generate_message": "导入 Hoppscotch 集合以随时随地生成 API 文档。"
   },
   "empty": {
     "authorization": "该请求没有使用任何授权",
     "body": "该请求没有任何请求体",
-    "collection": "组合为空",
-    "collections": "组合为空",
+    "collection": "集合为空",
+    "collections": "集合为空",
     "documentation": "连接至 GraphQL 端点以查看文档",
     "endpoint": "端点不能为空",
     "environments": "环境为空",
@@ -169,20 +169,20 @@
     "tests": "没有针对该请求的测试"
   },
   "environment": {
-    "add_to_global": "Add to Global",
-    "added": "Environment addition",
-    "create_new": "已创建新环境",
-    "created": "Environment created",
-    "deleted": "Environment deletion",
+    "add_to_global": "添加到全局环境",
+    "added": "环境已添加",
+    "create_new": "创建新环境",
+    "created": "环境已创建",
+    "deleted": "环境已删除",
     "edit": "编辑环境",
     "invalid_name": "请提供有效的环境名称",
-    "nested_overflow": "nested environment variables are limited to 10 levels",
+    "nested_overflow": "环境嵌套深度超过限制（10层）",
     "new": "新建环境",
     "no_environment": "无环境",
-    "no_environment_description": "No environments were selected. Choose what to do with the following variables.",
+    "no_environment_description": "没有选择环境。选择如何处理以下变量。",
     "select": "选择环境",
     "title": "环境",
-    "updated": "Environment updation",
+    "updated": "环境已更新",
     "variable_list": "变量列表"
   },
   "error": {
@@ -190,9 +190,9 @@
     "check_console_details": "检查控制台日志以获悉详情",
     "curl_invalid_format": "cURL 格式不正确",
     "empty_req_name": "空请求名称",
-    "f12_details": "(F12 详情)",
+    "f12_details": "（F12 详情）",
     "gql_prettify_invalid_query": "无法美化无效的查询，处理查询语法错误并重试",
-    "incomplete_config_urls": "Incomplete configuration URLs",
+    "incomplete_config_urls": "配置文件中的 URL 无效",
     "incorrect_email": "电子邮箱错误",
     "invalid_link": "无效链接",
     "invalid_link_description": "你点击的链接无效或已过期。",
@@ -202,7 +202,7 @@
     "no_duration": "无持续时间",
     "script_fail": "无法执行预请求脚本",
     "something_went_wrong": "发生了一些错误",
-    "test_script_fail": "Could not execute post-request script"
+    "test_script_fail": "无法执行请求脚本"
   },
   "export": {
     "as_json": "导出为 JSON",
@@ -215,7 +215,7 @@
     "created": "已创建文件夹",
     "edit": "编辑文件夹",
     "invalid_name": "请提供文件夹的名称",
-    "name_length_insufficient": "Folder name should be at least 3 characters long",
+    "name_length_insufficient": "文件夹名称应至少为 3 个字符",
     "new": "新文件夹",
     "renamed": "文件夹已更名"
   },
@@ -238,46 +238,46 @@
     "post_request_tests": "测试脚本使用 JavaScript 编写，并在收到响应后执行。",
     "pre_request_script": "预请求脚本使用 JavaScript 编写，并在请求发送前执行。",
     "script_fail": "预请求脚本中似乎存在故障。 检查下面的错误并相应地修复脚本。",
-    "test_script_fail": "There seems to be an error with test script. Please fix the errors and run tests again",
+    "test_script_fail": "测试脚本似乎有一个错误。请修复错误并再次运行测试",
     "tests": "编写测试脚本以自动调试。"
   },
   "hide": {
-    "collection": "Collapse Collection Panel",
+    "collection": "隐藏集合",
     "more": "隐藏更多",
     "preview": "隐藏预览",
     "sidebar": "隐藏侧边栏"
   },
   "import": {
-    "collections": "导入组合",
+    "collections": "导入集合",
     "curl": "导入 cURL",
     "failed": "导入失败",
     "from_gist": "从 Gist 导入",
-    "from_gist_description": "Import from Gist URL",
-    "from_insomnia": "Import from Insomnia",
-    "from_insomnia_description": "Import from Insomnia collection",
-    "from_json": "Import from Hoppscotch",
-    "from_json_description": "Import from Hoppscotch collection file",
-    "from_my_collections": "从我的组合导入",
-    "from_my_collections_description": "Import from My Collections file",
-    "from_openapi": "Import from OpenAPI",
-    "from_openapi_description": "Import from OpenAPI specification file (YML/JSON)",
-    "from_postman": "Import from Postman",
-    "from_postman_description": "Import from Postman collection",
-    "from_url": "Import from URL",
+    "from_gist_description": "从 Gist URL 导入",
+    "from_insomnia": "从 Insomnia 导入",
+    "from_insomnia_description": "从 Insomnia 集合中导入",
+    "from_json": "从 Hoppscotch 导入",
+    "from_json_description": "从 Hoppscotch 集合中导入",
+    "from_my_collections": "从我的集合导入",
+    "from_my_collections_description": "从我的集合文件导入",
+    "from_openapi": "从 OpenAPI 导入",
+    "from_openapi_description": "从 OpenAPI 文件导入（YML/JSON）",
+    "from_postman": "从 Postman 导入",
+    "from_postman_description": "从 Postman 集合中导入",
+    "from_url": "从 URL 导入",
     "gist_url": "输入 Gist URL",
-    "json_description": "Import collections from a Hoppscotch Collections JSON file",
+    "json_description": "从 Hoppscotch 的集合文件导入（JSON）",
     "title": "导入"
   },
   "layout": {
-    "collapse_collection": "Collapse or Expand Collections",
-    "collapse_sidebar": "Collapse or Expand the sidebar",
+    "collapse_collection": "折叠/展开集合",
+    "collapse_sidebar": "折叠/展开边栏",
     "column": "垂直布局",
-    "name": "Layout",
+    "name": "布局",
     "row": "水平布局",
-    "zen_mode": "禅意模式"
+    "zen_mode": "ZEN 模式"
   },
   "modal": {
-    "collections": "组合",
+    "collections": "集合",
     "confirm": "确认",
     "edit_request": "编辑请求",
     "import_export": "导入/导出"
@@ -315,12 +315,12 @@
     "email_verification_mail": "确认邮件已发送至你的邮箱，请点击链接以验证你的电子邮箱。",
     "no_permission": "你无权执行此操作。",
     "owner": "所有者",
-    "owner_description": "所有者可以添加、编辑和删除请求、组合及团队成员。",
+    "owner_description": "所有者可以添加、编辑和删除请求、集合及团队成员。",
     "roles": "角色",
-    "roles_description": "角色用以控制共享组合的访问权限。",
+    "roles_description": "角色用以控制共享集合的访问权限。",
     "updated": "档案已更新",
-    "viewer": "阅览者",
-    "viewer_description": "阅览者只可查看与使用请求。"
+    "viewer": "查看者",
+    "viewer_description": "查看者只可查看与使用请求。"
   },
   "remove": {
     "star": "移除星标"
@@ -340,10 +340,10 @@
     "invalid_name": "请提供请求名称",
     "method": "方法",
     "name": "请求名称",
-    "new": "New Request",
-    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
-    "overriden": "Overridden",
+    "new": "新请求",
+    "override": "覆盖",
+    "override_help": "设置 <xmp>Content-Type</xmp> 头",
+    "overriden": "覆盖",
     "parameter_list": "查询参数",
     "parameters": "参数",
     "path": "路径",
@@ -356,7 +356,7 @@
     "save_as": "另存为",
     "saved": "请求已保存",
     "share": "分享",
-    "share_description": "Share Hoppscotch with your friends",
+    "share_description": "分享 Hoppscotch 给你的朋友",
     "title": "请求",
     "type": "请求类型",
     "url": "URL",
@@ -396,7 +396,7 @@
     "extension_version": "扩展版本",
     "extensions": "扩展",
     "extensions_use_toggle": "使用浏览器扩展发送请求（如果存在）",
-    "follow": "Follow Us",
+    "follow": "关注我们",
     "font_size": "字体大小",
     "font_size_large": "大",
     "font_size_medium": "中",
@@ -417,7 +417,7 @@
     "reset_default": "重置为默认",
     "sidebar_on_left": "侧边栏移至左侧",
     "sync": "同步",
-    "sync_collections": "组合",
+    "sync_collections": "集合",
     "sync_description": "这些设置会同步到云。",
     "sync_environments": "环境",
     "sync_history": "历史",
@@ -464,21 +464,21 @@
       "previous_method": "选择上一个方法",
       "put_method": "选择 PUT 方法",
       "reset_request": "重置请求",
-      "save_to_collections": "保存到组合",
+      "save_to_collections": "保存到集合",
       "send_request": "发送请求",
       "title": "请求"
     },
     "theme": {
-      "black": "Switch  theme to black mode",
-      "dark": "Switch  theme to  dark mode",
-      "light": "Switch  theme to light mode",
-      "system": "Switch  theme to system mode",
-      "title": "Theme"
+      "black": "切换为黑色主题",
+      "dark": "切换为深色主题",
+      "light": "切换为浅色主题",
+      "system": "切换为系统主题",
+      "title": "主题"
     }
   },
   "show": {
     "code": "显示代码",
-    "collection": "Expand Collection Panel",
+    "collection": "展开集合",
     "more": "显示更多",
     "sidebar": "显示侧边栏"
   },
@@ -525,7 +525,7 @@
     "community": "提问与互助",
     "documentation": "阅读更多有关 Hoppscotch 的内容",
     "forum": "答疑解惑",
-    "github": "Follow us on Github",
+    "github": "在 Github 关注我们",
     "shortcuts": "更快浏览应用",
     "team": "与团队保持联系",
     "title": "支持",
@@ -534,7 +534,7 @@
   "tab": {
     "authorization": "授权",
     "body": "请求体",
-    "collections": "组合",
+    "collections": "集合",
     "documentation": "帮助文档",
     "headers": "请求头",
     "history": "历史记录",
@@ -552,18 +552,18 @@
     "websocket": "WebSocket"
   },
   "team": {
-    "already_member": "你已经是此团队的成员。请联系你的团队所有人。",
+    "already_member": "你已经是此团队的成员。请联系你的团队者。",
     "create_new": "创建新团队",
     "deleted": "团队已删除",
     "edit": "编辑团队",
     "email": "电子邮箱",
-    "email_do_not_match": "邮箱无法与你的帐户信息匹配。请联系你的团队所有人。",
+    "email_do_not_match": "邮箱无法与你的帐户信息匹配。请联系你的团队者。",
     "exit": "退出团队",
     "exit_disabled": "团队所有者无法退出团队",
     "invalid_email_format": "电子邮箱格式无效",
-    "invalid_id": "无效的团队 ID，请联系你的团队所有人。",
+    "invalid_id": "无效的团队 ID，请联系你的团队者。",
     "invalid_invite_link": "无效的邀请链接",
-    "invalid_invite_link_description": "你点击的链接无效。请联系你的团队所有人。",
+    "invalid_invite_link_description": "你点击的链接无效。请联系你的团队者。",
     "invalid_member_permission": "请为团队成员提供有效的权限",
     "invite": "邀请",
     "invite_more": "邀请更多成员",
@@ -578,8 +578,8 @@
     "login_to_continue": "登录以继续",
     "login_to_continue_description": "你需要登录以加入团队",
     "logout_and_try_again": "登出并以其他帐户登录",
-    "member_has_invite": "此邮箱 ID 已有邀请。请联系你的团队所有人。",
-    "member_not_found": "未找到成员。请联系你的团队所有人。",
+    "member_has_invite": "此邮箱 ID 已有邀请。请联系你的团队者。",
+    "member_not_found": "未找到成员。请联系你的团队者。",
     "member_removed": "用户已移除",
     "member_role_updated": "用户角色已更新",
     "members": "成员",
@@ -588,10 +588,10 @@
     "new": "新团队",
     "new_created": "已创建新团队",
     "new_name": "我的新团队",
-    "no_access": "你没有编辑组合的权限",
-    "no_invite_found": "未找到邀请。请联系你的团队所有人。",
-    "not_found": "Team not found. Contact your team owner.",
-    "not_valid_viewer": "你不是有效的阅览者。请联系你的团队所有人。",
+    "no_access": "你没有编辑集合的权限",
+    "no_invite_found": "未找到邀请。请联系你的团队者。",
+    "not_found": "没有找到团队，请联系您的团队所有者。",
+    "not_valid_viewer": "你不是有效的查看者。请联系你的团队者。",
     "pending_invites": "待办邀请",
     "permissions": "权限",
     "saved": "团队已保存",
diff --git a/packages/hoppscotch-app/locales/pt-br.json b/packages/hoppscotch-app/locales/pt-br.json
index a775b3ae0..fada4f71d 100644
--- a/packages/hoppscotch-app/locales/pt-br.json
+++ b/packages/hoppscotch-app/locales/pt-br.json
@@ -2,16 +2,16 @@
   "action": {
     "cancel": "Cancelar",
     "choose_file": "Escolha um arquivo",
-    "clear": "Claro",
+    "clear": "Limpar",
     "clear_all": "Limpar tudo",
     "connect": "Conectar",
     "copy": "Copiar",
     "delete": "Excluir",
-    "disconnect": "desconectar",
+    "disconnect": "Desconectar",
     "dismiss": "Dispensar",
-    "dont_save": "Don't save",
+    "dont_save": "Não Salvar",
     "download_file": "⇬ Fazer download do arquivo",
-    "duplicate": "Duplicate",
+    "duplicate": "Duplicar",
     "edit": "Editar",
     "go_back": "Voltar",
     "label": "Etiqueta",
@@ -35,7 +35,7 @@
     "turn_off": "Desligar",
     "turn_on": "Ligar",
     "undo": "Desfazer",
-    "yes": "sim"
+    "yes": "Sim"
   },
   "add": {
     "new": "Adicionar novo",
@@ -45,9 +45,9 @@
     "chat_with_us": "Converse conosco",
     "contact_us": "Contate-Nos",
     "copy": "Copiar",
-    "copy_user_id": "Copy User Auth Token",
-    "developer_option": "Developer options",
-    "developer_option_description": "Developer tools which helps in development and maintenance of Hoppscotch.",
+    "copy_user_id": "Copiar token de autenticação do usuário",
+    "developer_option": "Opções de desenvolvedor",
+    "developer_option_description": "Opções de desenvolvedor que ajudam no desenvolvimento e manutenção do Hoppscotch.",
     "discord": "Discord",
     "documentation": "Documentação",
     "github": "GitHub",
@@ -60,18 +60,18 @@
     "keyboard_shortcuts": "Atalhos do teclado",
     "name": "Hoppscotch",
     "new_version_found": "Nova versão encontrada. Atualize para atualizar.",
-    "options": "Options",
+    "options": "Opções",
     "proxy_privacy_policy": "Política de privacidade do proxy",
-    "reload": "recarregar",
+    "reload": "Recarregar",
     "search": "Procurar",
     "share": "Compartilhado",
     "shortcuts": "Atalhos",
     "spotlight": "Holofote",
-    "status": "Status",
-    "status_description": "Check the status of the website",
+    "status": "Estado",
+    "status_description": "Cheque o estado do website.",
     "terms_and_privacy": "Termos e privacidade",
     "twitter": "Twitter",
-    "type_a_command_search": "Digite um comando ou pesquise ...",
+    "type_a_command_search": "Digite um comando ou pesquise...",
     "we_use_cookies": "Usamos cookies",
     "whats_new": "O que há de novo?",
     "wiki": "Wiki"
@@ -114,7 +114,7 @@
     "name_length_insufficient": "O nome da coleção deve ter pelo menos 3 caracteres",
     "new": "Nova coleção",
     "renamed": "Coleção renomeada",
-    "request_in_use": "Request in use",
+    "request_in_use": "Requisição em uso",
     "save_as": "Salvar como",
     "select": "Selecione uma coleção",
     "select_location": "Selecione a localização",
@@ -131,7 +131,7 @@
     "remove_request": "Tem certeza de que deseja excluir permanentemente esta solicitação?",
     "remove_team": "Tem certeza que deseja excluir esta equipe?",
     "remove_telemetry": "Tem certeza de que deseja cancelar a telemetria?",
-    "request_change": "Are you sure you want to discard current request, unsaved changes will be lost.",
+    "request_change": "Tem certeza que deseja descartar a requisição atual? Alterações não salvas serão perdidas.",
     "sync": "Tem certeza de que deseja sincronizar este espaço de trabalho?"
   },
   "count": {
@@ -151,8 +151,8 @@
     "body": "Este pedido não tem corpo",
     "collection": "Coleção está vazia",
     "collections": "Coleções estão vazias",
-    "documentation": "Connect to a GraphQL endpoint to view documentation",
-    "endpoint": "Endpoint cannot be empty",
+    "documentation": "Se conecte à um endpoint GraphQL para ver a documentação",
+    "endpoint": "O endpoint não pode ser vazio",
     "environments": "Ambientes estão vazios",
     "folder": "Pasta está vazia",
     "headers": "Esta solicitação não possui cabeçalhos",
@@ -172,11 +172,11 @@
     "add_to_global": "Adicionar ao Global",
     "added": "Adição de ambiente",
     "create_new": "Crie um novo ambiente",
-    "created": "Environment created",
+    "created": "Ambiente criado",
     "deleted": "Deleção de ambiente",
     "edit": "Editar Ambiente",
     "invalid_name": "Forneça um nome válido para o ambiente",
-    "nested_overflow": "variáveis de ambiente aninhadas são limitadas a 10 níveis",
+    "nested_overflow": "Variáveis de ambiente aninhadas são limitadas a 10 níveis",
     "new": "Novo ambiente",
     "no_environment": "Sem ambiente",
     "no_environment_description": "Nenhum ambiente foi selecionado. Escolha o que fazer com as seguintes variáveis.",
@@ -195,9 +195,9 @@
     "incomplete_config_urls": "URLs de configuração incompletas",
     "incorrect_email": "Email incorreto",
     "invalid_link": "Link inválido",
-    "invalid_link_description": "The link you clicked is invalid or expired.",
+    "invalid_link_description": "O link que você clicou é inválido ou já expirou.",
     "json_prettify_invalid_body": "Não foi possível embelezar um corpo inválido, resolver erros de sintaxe json e tentar novamente",
-    "network_error": "There seems to be a network error. Please try again.",
+    "network_error": "Parece que houve um problema de rede. Por favor, tente novamente.",
     "network_fail": "Não foi possível enviar requisição",
     "no_duration": "Sem duração",
     "script_fail": "Não foi possível executar o script pré-requisição",
@@ -252,25 +252,25 @@
     "curl": "Importar cURL",
     "failed": "A importação falhou",
     "from_gist": "Importar do Gist",
-    "from_gist_description": "Import from Gist URL",
-    "from_insomnia": "Import from Insomnia",
-    "from_insomnia_description": "Import from Insomnia collection",
-    "from_json": "Import from Hoppscotch",
-    "from_json_description": "Import from Hoppscotch collection file",
+    "from_gist_description": "Importar de URL Gist",
+    "from_insomnia": "Importar de Insomnia",
+    "from_insomnia_description": "Importa de coleção Insomnia",
+    "from_json": "Importar de Hoppscotch",
+    "from_json_description": "Importa de arquivo de coleção Hoppscotch",
     "from_my_collections": "Importar de minhas coleções",
-    "from_my_collections_description": "Import from My Collections file",
-    "from_openapi": "Import from OpenAPI",
-    "from_openapi_description": "Import from OpenAPI specification file (YML/JSON)",
-    "from_postman": "Import from Postman",
-    "from_postman_description": "Import from Postman collection",
-    "from_url": "Import from URL",
-    "gist_url": "Insira o URL da essência",
-    "json_description": "Import collections from a Hoppscotch Collections JSON file",
+    "from_my_collections_description": "Importa de arquivo Minhas Coleções",
+    "from_openapi": "Importar de OpenAPI",
+    "from_openapi_description": "Importa de arquivo de especificação OpenAPI (YML/JSON)",
+    "from_postman": "Importar de Postman",
+    "from_postman_description": "Importa de coleção Postman",
+    "from_url": "Importar de URL",
+    "gist_url": "Insira o URL do Gist",
+    "json_description": "Importa coleções de um arquivo JSON de Coleções Hoppscotch",
     "title": "Importar"
   },
   "layout": {
-    "collapse_collection": "Collapse or Expand Collections",
-    "collapse_sidebar": "Collapse or Expand the sidebar",
+    "collapse_collection": "Encolher ou expandir coleções",
+    "collapse_sidebar": "Encolher ou Expandir a barra lateral",
     "column": "Layout vertical",
     "name": "Layout",
     "row": "Layout horizontal",
@@ -311,16 +311,16 @@
   "profile": {
     "app_settings": "App Settings",
     "editor": "Editor",
-    "editor_description": "Editors can add, edit, and delete requests.",
-    "email_verification_mail": "A verification email has been sent to your email address. Please click on the link to verify your email address.",
-    "no_permission": "You do not have permission to perform this action.",
-    "owner": "Owner",
-    "owner_description": "Owners can add, edit, and delete requests, collections and team members.",
-    "roles": "Roles",
-    "roles_description": "Roles are used to control access to the shared collections.",
-    "updated": "Profile updated",
-    "viewer": "Viewer",
-    "viewer_description": "Viewers can only view and use requests."
+    "editor_description": "Editores podem adicionar, editar e deletar requisições.",
+    "email_verification_mail": "Um e-mail de verificação foi enviado ao seu endereço de e-mail. Por favor, clique no link para verificar seu endereço e-mail.",
+    "no_permission": "Você não tem permissão para realizar esta ação.",
+    "owner": "Dono",
+    "owner_description": "Donos podem adicionar, editar e deletar requisições, coleções e membros de equipe.",
+    "roles": "Funções",
+    "roles_description": "Funções são utilizadas para gerenciar acesso às coleções compartilhadas.",
+    "updated": "Perfil atualizado",
+    "viewer": "Espectador",
+    "viewer_description": "Espectadores só podem ver e usar requisições."
   },
   "remove": {
     "star": "Remover estrela"
@@ -340,10 +340,10 @@
     "invalid_name": "Forneça um nome para a requisição",
     "method": "Método",
     "name": "Nome da requisição",
-    "new": "New Request",
-    "override": "Override",
-    "override_help": "Set <xmp>Content-Type</xmp> in Headers",
-    "overriden": "Overridden",
+    "new": "Nova requisição",
+    "override": "Substituir",
+    "override_help": "Substituir <xmp>Content-Type</xmp> em Headers",
+    "overriden": "Substituído",
     "parameter_list": "Parâmetros da requisição",
     "parameters": "Parâmetros",
     "path": "Caminho",
@@ -356,7 +356,7 @@
     "save_as": "Salvar como",
     "saved": "Requisição salva",
     "share": "Compartilhadar",
-    "share_description": "Share Hoppscotch with your friends",
+    "share_description": "Compartilhe o Hoppscotch com seus amigos",
     "title": "Solicitar",
     "type": "Tipo de requisição",
     "url": "URL",
@@ -396,7 +396,7 @@
     "extension_version": "Versão da extensão",
     "extensions": "Extensões",
     "extensions_use_toggle": "Use a extensão do navegador para enviar solicitações (se houver)",
-    "follow": "Follow Us",
+    "follow": "Nos siga",
     "font_size": "Tamanho da fonte",
     "font_size_large": "Grande",
     "font_size_medium": "Médio",
@@ -407,7 +407,7 @@
     "light_mode": "Luz",
     "official_proxy_hosting": "Official Proxy é hospedado por Hoppscotch.",
     "profile": "Perfil",
-    "profile_description": "Update your profile details",
+    "profile_description": "Atualize os detalhes de seu perfil",
     "profile_email": "Endereço de email",
     "profile_name": "Nome do perfil",
     "proxy": "Proxy",

From 185dc3f2c940877652a68fb2fad163e4ff4931e6 Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Thu, 16 Jun 2022 06:09:43 +0530
Subject: [PATCH 39/50] fix: Copy and download filtered response body (#2426)

---
 .../lenses/renderers/JSONLensRenderer.vue           | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue b/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
index ffbca8951..6a8c14df4 100644
--- a/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue
@@ -218,13 +218,6 @@ const props = defineProps<{
 
 const { responseBodyText } = useResponseBody(props.response)
 
-const { copyIcon, copyResponse } = useCopyResponse(responseBodyText)
-
-const { downloadIcon, downloadResponse } = useDownloadResponse(
-  "application/json",
-  responseBodyText
-)
-
 const toggleFilter = ref(false)
 const filterQueryText = ref("")
 
@@ -310,6 +303,12 @@ const filterResponseError = computed(() =>
   )
 )
 
+const { copyIcon, copyResponse } = useCopyResponse(jsonBodyText)
+const { downloadIcon, downloadResponse } = useDownloadResponse(
+  "application/json",
+  jsonBodyText
+)
+
 const outlineOptions = ref<any | null>(null)
 const jsonResponse = ref<any | null>(null)
 const linewrapEnabled = ref(true)

From 82b6ad935adc1980da9086e54f28fbf460009059 Mon Sep 17 00:00:00 2001
From: Vaugen Wake <55480610+vaugenwake@users.noreply.github.com>
Date: Thu, 16 Jun 2022 15:17:46 +0100
Subject: [PATCH 40/50] fix: resolve removing body parameters in requests
 (#2390) (#2428)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 .../components/http/BodyParameters.vue        | 130 ++++++++++++------
 1 file changed, 85 insertions(+), 45 deletions(-)

diff --git a/packages/hoppscotch-app/components/http/BodyParameters.vue b/packages/hoppscotch-app/components/http/BodyParameters.vue
index 57f9fe939..5a2a7dc24 100644
--- a/packages/hoppscotch-app/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-app/components/http/BodyParameters.vue
@@ -38,8 +38,8 @@
       drag-class="cursor-grabbing"
     >
       <div
-        v-for="(param, index) in workingParams"
-        :key="`param-${index}`"
+        v-for="({ id, entry }, index) in workingParams"
+        :key="`param=${id}-${index}`"
         class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
       >
         <span>
@@ -54,21 +54,21 @@
           />
         </span>
         <SmartEnvInput
-          v-model="param.key"
+          v-model="entry.key"
           :placeholder="`${$t('count.parameter', { count: index + 1 })}`"
           @change="
             updateBodyParam(index, {
               key: $event,
-              value: param.value,
-              active: param.active,
-              isFile: param.isFile,
+              value: entry.value,
+              active: entry.active,
+              isFile: entry.isFile,
             })
           "
         />
-        <div v-if="param.isFile" class="file-chips-container hide-scrollbar">
+        <div v-if="entry.isFile" class="file-chips-container hide-scrollbar">
           <div class="space-x-2 file-chips-wrapper">
             <SmartFileChip
-              v-for="(file, fileIndex) in param.value"
+              v-for="(file, fileIndex) in entry.value"
               :key="`param-${index}-file-${fileIndex}`"
               >{{ file.name }}</SmartFileChip
             >
@@ -76,14 +76,14 @@
         </div>
         <span v-else class="flex flex-1">
           <SmartEnvInput
-            v-model="param.value"
+            v-model="entry.value"
             :placeholder="`${$t('count.value', { count: index + 1 })}`"
             @change="
               updateBodyParam(index, {
-                key: param.key,
+                key: entry.key,
                 value: $event,
-                active: param.active,
-                isFile: param.isFile,
+                active: entry.active,
+                isFile: entry.isFile,
               })
             "
           />
@@ -97,7 +97,7 @@
               type="file"
               multiple
               class="p-1 cursor-pointer transition file:transition file:cursor-pointer text-secondaryLight hover:text-secondaryDark file:mr-2 file:py-1 file:px-4 file:rounded file:border-0 file:text-tiny text-tiny file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
-              @change="setRequestAttachment(index, param, $event)"
+              @change="setRequestAttachment(index, entry, $event)"
             />
           </label>
         </span>
@@ -105,15 +105,15 @@
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="
-              param.hasOwnProperty('active')
-                ? param.active
+              entry.hasOwnProperty('active')
+                ? entry.active
                   ? $t('action.turn_off')
                   : $t('action.turn_on')
                 : $t('action.turn_off')
             "
             :svg="
-              param.hasOwnProperty('active')
-                ? param.active
+              entry.hasOwnProperty('active')
+                ? entry.active
                   ? 'check-circle'
                   : 'circle'
                 : 'check-circle'
@@ -121,10 +121,10 @@
             color="green"
             @click.native="
               updateBodyParam(index, {
-                key: param.key,
-                value: param.value,
-                active: param.hasOwnProperty('active') ? !param.active : false,
-                isFile: param.isFile,
+                key: entry.key,
+                value: entry.value,
+                active: entry.hasOwnProperty('active') ? !entry.active : false,
+                isFile: entry.isFile,
               })
             "
           />
@@ -164,6 +164,9 @@
 
 <script setup lang="ts">
 import { ref, Ref, watch } from "@nuxtjs/composition-api"
+import { flow, pipe } from "fp-ts/function"
+import * as O from "fp-ts/Option"
+import * as A from "fp-ts/Array"
 import { FormDataKeyValue } from "@hoppscotch/data"
 import isEqual from "lodash/isEqual"
 import { clone } from "lodash"
@@ -171,10 +174,14 @@ import draggable from "vuedraggable"
 import { pluckRef, useI18n, useToast } from "~/helpers/utils/composables"
 import { useRESTRequestBody } from "~/newstore/RESTSession"
 
+type WorkingFormDataKeyValue = { id: number; entry: FormDataKeyValue }
+
 const t = useI18n()
 
 const toast = useToast()
 
+const idTicker = ref(0)
+
 const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
 
 const bodyParams = pluckRef<any, any>(useRESTRequestBody(), "body") as Ref<
@@ -182,23 +189,32 @@ const bodyParams = pluckRef<any, any>(useRESTRequestBody(), "body") as Ref<
 >
 
 // The UI representation of the parameters list (has the empty end param)
-const workingParams = ref<FormDataKeyValue[]>([
+const workingParams = ref<WorkingFormDataKeyValue[]>([
   {
-    key: "",
-    value: "",
-    active: true,
-    isFile: false,
+    id: idTicker.value++,
+    entry: {
+      key: "",
+      value: "",
+      active: true,
+      isFile: false,
+    },
   },
 ])
 
 // Rule: Working Params always have last element is always an empty param
 watch(workingParams, (paramsList) => {
-  if (paramsList.length > 0 && paramsList[paramsList.length - 1].key !== "") {
+  if (
+    paramsList.length > 0 &&
+    paramsList[paramsList.length - 1].entry.key !== ""
+  ) {
     workingParams.value.push({
-      key: "",
-      value: "",
-      active: true,
-      isFile: false,
+      id: idTicker.value++,
+      entry: {
+        key: "",
+        value: "",
+        active: true,
+        isFile: false,
+      },
     })
   }
 })
@@ -208,19 +224,37 @@ watch(
   bodyParams,
   (newParamsList) => {
     // Sync should overwrite working params
-    const filteredWorkingParams = workingParams.value.filter(
-      (e) => e.key !== ""
+    const filteredWorkingParams = pipe(
+      workingParams.value,
+      A.filterMap(
+        flow(
+          O.fromPredicate((e) => e.entry.key !== ""),
+          O.map((e) => e.entry)
+        )
+      )
     )
 
     if (!isEqual(newParamsList, filteredWorkingParams)) {
-      workingParams.value = newParamsList
+      workingParams.value = pipe(
+        newParamsList,
+        A.map((x) => ({ id: idTicker.value++, entry: x }))
+      )
     }
   },
   { immediate: true }
 )
 
 watch(workingParams, (newWorkingParams) => {
-  const fixedParams = newWorkingParams.filter((e) => e.key !== "")
+  const fixedParams = pipe(
+    newWorkingParams,
+    A.filterMap(
+      flow(
+        O.fromPredicate((e) => e.entry.key !== ""),
+        O.map((e) => e.entry)
+      )
+    )
+  )
+
   if (!isEqual(bodyParams.value, fixedParams)) {
     bodyParams.value = fixedParams
   }
@@ -228,16 +262,19 @@ watch(workingParams, (newWorkingParams) => {
 
 const addBodyParam = () => {
   workingParams.value.push({
-    key: "",
-    value: "",
-    active: true,
-    isFile: false,
+    id: idTicker.value++,
+    entry: {
+      key: "",
+      value: "",
+      active: true,
+      isFile: false,
+    },
   })
 }
 
-const updateBodyParam = (index: number, param: FormDataKeyValue) => {
+const updateBodyParam = (index: number, entry: FormDataKeyValue) => {
   workingParams.value = workingParams.value.map((h, i) =>
-    i === index ? param : h
+    i === index ? { id: h.id, entry } : h
   )
 }
 
@@ -280,10 +317,13 @@ const clearContent = () => {
   // set params list to the initial state
   workingParams.value = [
     {
-      key: "",
-      value: "",
-      active: true,
-      isFile: false,
+      id: idTicker.value++,
+      entry: {
+        key: "",
+        value: "",
+        active: true,
+        isFile: false,
+      },
     },
   ]
 }

From 16be7c38f31d24f21caedaae967e8099e65275e6 Mon Sep 17 00:00:00 2001
From: Chun-Hao Lien <vbnm123c+github@gmail.com>
Date: Sat, 18 Jun 2022 10:07:32 +0800
Subject: [PATCH 41/50] fix: typo in getEnvironment (#2434)

---
 packages/hoppscotch-app/components/environments/Details.vue | 4 ++--
 packages/hoppscotch-app/helpers/RequestRunner.ts            | 4 ++--
 packages/hoppscotch-app/newstore/environments.ts            | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/hoppscotch-app/components/environments/Details.vue b/packages/hoppscotch-app/components/environments/Details.vue
index 81c64e142..e28e5ab13 100644
--- a/packages/hoppscotch-app/components/environments/Details.vue
+++ b/packages/hoppscotch-app/components/environments/Details.vue
@@ -124,7 +124,7 @@ import { refAutoReset } from "@vueuse/core"
 import {
   createEnvironment,
   environments$,
-  getEnviroment,
+  getEnvironment,
   getGlobalVariables,
   globalEnv$,
   setCurrentEnvironment,
@@ -178,7 +178,7 @@ const workingEnv = computed(() => {
       variables: props.envVars(),
     }
   } else if (props.editingEnvironmentIndex !== null) {
-    return getEnviroment(props.editingEnvironmentIndex)
+    return getEnvironment(props.editingEnvironmentIndex)
   } else {
     return null
   }
diff --git a/packages/hoppscotch-app/helpers/RequestRunner.ts b/packages/hoppscotch-app/helpers/RequestRunner.ts
index 5265e4142..a6e38ce81 100644
--- a/packages/hoppscotch-app/helpers/RequestRunner.ts
+++ b/packages/hoppscotch-app/helpers/RequestRunner.ts
@@ -25,7 +25,7 @@ import { getRESTRequest, setRESTTestResults } from "~/newstore/RESTSession"
 import {
   environmentsStore,
   getCurrentEnvironment,
-  getEnviroment,
+  getEnvironment,
   getGlobalVariables,
   setGlobalEnvVariables,
   updateEnvironment,
@@ -97,7 +97,7 @@ export const runRESTRequest$ = (): TaskEither<
               setGlobalEnvVariables(runResult.right.envs.global)
 
               if (environmentsStore.value.currentEnvironmentIndex !== -1) {
-                const env = getEnviroment(
+                const env = getEnvironment(
                   environmentsStore.value.currentEnvironmentIndex
                 )
                 updateEnvironment(
diff --git a/packages/hoppscotch-app/newstore/environments.ts b/packages/hoppscotch-app/newstore/environments.ts
index 75fa93c44..c7d282481 100644
--- a/packages/hoppscotch-app/newstore/environments.ts
+++ b/packages/hoppscotch-app/newstore/environments.ts
@@ -540,6 +540,6 @@ export function updateEnvironmentVariable(
   })
 }
 
-export function getEnviroment(index: number) {
+export function getEnvironment(index: number) {
   return environmentsStore.value.environments[index]
 }

From c1cc1ce2955d6b82a82a53cdae54830220431084 Mon Sep 17 00:00:00 2001
From: kyteinsky <kyteinsky@gmail.com>
Date: Sat, 18 Jun 2022 14:09:16 +0530
Subject: [PATCH 42/50] fix: curl parser json detection issues (#2370)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 .../helpers/curl/sub_helpers/contentParser.ts     | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/hoppscotch-app/helpers/curl/sub_helpers/contentParser.ts b/packages/hoppscotch-app/helpers/curl/sub_helpers/contentParser.ts
index 74cbc0c45..6ca7206fd 100644
--- a/packages/hoppscotch-app/helpers/curl/sub_helpers/contentParser.ts
+++ b/packages/hoppscotch-app/helpers/curl/sub_helpers/contentParser.ts
@@ -158,14 +158,11 @@ const getXMLBody = (rawData: string) =>
     O.alt(() => O.some(rawData))
   )
 
-const getFormattedJSON = (jsonString: string) =>
-  pipe(
-    jsonString.replaceAll('\\"', '"'),
-    safeParseJSON,
-    O.map((parsedJSON) => JSON.stringify(parsedJSON, null, 2)),
-    O.getOrElse(() => "{ }"),
-    O.of
-  )
+const getFormattedJSON = flow(
+  safeParseJSON,
+  O.map((parsedJSON) => JSON.stringify(parsedJSON, null, 2)),
+  O.getOrElse(() => "{ }")
+)
 
 const getXWWWFormUrlEncodedBody = flow(
   decodeURIComponent,
@@ -191,7 +188,7 @@ export function parseBody(
     case "application/ld+json":
     case "application/vnd.api+json":
     case "application/json":
-      return getFormattedJSON(rawData)
+      return O.some(getFormattedJSON(rawData))
 
     case "application/x-www-form-urlencoded":
       return getXWWWFormUrlEncodedBody(rawData)

From 8fefd378629642f103ea5e5f79ca90312a0ebb87 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 18 Jun 2022 18:14:02 +0530
Subject: [PATCH 43/50] fix: make scrollbars visible, fixed #2437, #2411

---
 packages/hoppscotch-app/assets/scss/styles.scss | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss
index 6bf32b093..79f665443 100644
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -15,6 +15,7 @@
 
 ::-webkit-scrollbar-track {
   @apply bg-transparent;
+  @apply border-solid border-l border-t-0 border-b-0 border-r-0 border-dividerLight;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -27,17 +28,17 @@
 
 ::-webkit-scrollbar {
   @apply w-4;
-  @apply h-4;
+  @apply h-0;
 }
 
-.hide-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
+// .hide-scrollbar {
+//   -ms-overflow-style: none;
+//   scrollbar-width: none;
+// }
 
-.hide-scrollbar::-webkit-scrollbar {
-  @apply hidden;
-}
+// .hide-scrollbar::-webkit-scrollbar {
+//   @apply hidden;
+// }
 
 input::placeholder,
 textarea::placeholder,

From c8dec56b9603a77589a58d1aa3710cdb4414e6c7 Mon Sep 17 00:00:00 2001
From: Nivedin <53208152+nivedin@users.noreply.github.com>
Date: Wed, 22 Jun 2022 15:21:35 +0530
Subject: [PATCH 44/50] fix: remove confirm change popup and add ability to
 overwrite request in saveas popup (#2433)

---
 .../components/collections/my/Request.vue     | 50 ++++++-------------
 .../components/collections/teams/Request.vue  | 38 +++++---------
 2 files changed, 28 insertions(+), 60 deletions(-)

diff --git a/packages/hoppscotch-app/components/collections/my/Request.vue b/packages/hoppscotch-app/components/collections/my/Request.vue
index 339df7422..0c633f4c6 100644
--- a/packages/hoppscotch-app/components/collections/my/Request.vue
+++ b/packages/hoppscotch-app/components/collections/my/Request.vue
@@ -324,19 +324,22 @@ const setRestReq = (request: any) => {
 
 /** Loads request from the save once, checks for unsaved changes, but ignores default values */
 const selectRequest = () => {
-  if (!active.value) {
+  // Check if this is a save as request popup, if so we don't need to prompt the confirm change popup.
+  if (props.saveRequest) {
+    emit("select", {
+      picked: {
+        pickedType: "my-request",
+        collectionIndex: props.collectionIndex,
+        folderPath: props.folderPath,
+        folderName: props.folderName,
+        requestIndex: props.requestIndex,
+      },
+    })
+  } else if (isEqualHoppRESTRequest(props.request, getDefaultRESTRequest())) {
+    confirmChange.value = false
+    setRestReq(props.request)
+  } else if (!active.value) {
     confirmChange.value = true
-
-    if (props.saveRequest)
-      emit("select", {
-        picked: {
-          pickedType: "my-request",
-          collectionIndex: props.collectionIndex,
-          folderPath: props.folderPath,
-          folderName: props.folderName,
-          requestIndex: props.requestIndex,
-        },
-      })
   } else {
     const currentReqWithNoChange = active.value.req
     const currentFullReq = getRESTRequest()
@@ -346,16 +349,6 @@ const selectRequest = () => {
       // Check if there is any changes done on the current request
       if (isEqualHoppRESTRequest(currentReqWithNoChange, currentFullReq)) {
         setRestReq(props.request)
-        if (props.saveRequest)
-          emit("select", {
-            picked: {
-              pickedType: "my-request",
-              collectionIndex: props.collectionIndex,
-              folderPath: props.folderPath,
-              folderName: props.folderName,
-              requestIndex: props.requestIndex,
-            },
-          })
       } else {
         confirmChange.value = true
       }
@@ -363,9 +356,6 @@ const selectRequest = () => {
       setRESTSaveContext(null)
     }
   }
-  if (isEqualHoppRESTRequest(getRESTRequest(), getDefaultRESTRequest())) {
-    confirmChange.value = false
-  }
 }
 
 /** Save current request to the collection */
@@ -378,16 +368,6 @@ const saveRequestChange = () => {
 /** Discard changes and change the current request and context */
 const discardRequestChange = () => {
   setRestReq(props.request)
-  if (props.saveRequest)
-    emit("select", {
-      picked: {
-        pickedType: "my-request",
-        collectionIndex: props.collectionIndex,
-        folderPath: props.folderPath,
-        folderName: props.folderName,
-        requestIndex: props.requestIndex,
-      },
-    })
   if (!isActive.value) {
     setRESTSaveContext({
       originLocation: "user-collection",
diff --git a/packages/hoppscotch-app/components/collections/teams/Request.vue b/packages/hoppscotch-app/components/collections/teams/Request.vue
index 40c0ed124..8ef25dc74 100644
--- a/packages/hoppscotch-app/components/collections/teams/Request.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Request.vue
@@ -261,7 +261,7 @@ const active = useReadonlyStream(restSaveContext$, null)
 const isSelected = computed(
   () =>
     props.picked &&
-    props.picked.pickedType === "team-collection" &&
+    props.picked.pickedType === "teams-collection" &&
     props.picked.requestID === props.requestIndex
 )
 
@@ -308,16 +308,19 @@ const setRestReq = (request: HoppRESTRequest) => {
 }
 
 const selectRequest = () => {
-  if (!active.value) {
+  // Check if this is a save as request popup, if so we don't need to prompt the confirm change popup.
+  if (props.saveRequest) {
+    emit("select", {
+      picked: {
+        pickedType: "teams-collection",
+        requestID: props.requestIndex,
+      },
+    })
+  } else if (isEqualHoppRESTRequest(props.request, getDefaultRESTRequest())) {
+    confirmChange.value = false
+    setRestReq(props.request)
+  } else if (!active.value) {
     confirmChange.value = true
-
-    if (props.saveRequest)
-      emit("select", {
-        picked: {
-          pickedType: "team-collection",
-          requestID: props.requestIndex,
-        },
-      })
   } else {
     const currentReqWithNoChange = active.value.req
     const currentFullReq = getRESTRequest()
@@ -327,13 +330,6 @@ const selectRequest = () => {
       // Check if there is any changes done on the current request
       if (isEqualHoppRESTRequest(currentReqWithNoChange, currentFullReq)) {
         setRestReq(props.request)
-        if (props.saveRequest)
-          emit("select", {
-            picked: {
-              pickedType: "team-collection",
-              requestID: props.requestIndex,
-            },
-          })
       } else {
         confirmChange.value = true
       }
@@ -353,13 +349,6 @@ const saveRequestChange = () => {
 /** Discard changes and change the current request and context */
 const discardRequestChange = () => {
   setRestReq(props.request)
-  if (props.saveRequest)
-    emit("select", {
-      picked: {
-        pickedType: "team-collection",
-        requestID: props.requestIndex,
-      },
-    })
   if (!isActive.value) {
     setRESTSaveContext({
       originLocation: "team-collection",
@@ -367,7 +356,6 @@ const discardRequestChange = () => {
       req: props.request,
     })
   }
-
   confirmChange.value = false
 }
 

From 015393d98f1f65528800a5079f44d65f7b2e71fa Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Thu, 23 Jun 2022 14:54:48 +0530
Subject: [PATCH 45/50] fix: allow volar to function properly on gitpod

---
 packages/hoppscotch-app/tsconfig.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/hoppscotch-app/tsconfig.json b/packages/hoppscotch-app/tsconfig.json
index fa38d5939..b767c2847 100644
--- a/packages/hoppscotch-app/tsconfig.json
+++ b/packages/hoppscotch-app/tsconfig.json
@@ -31,5 +31,6 @@
   "exclude": ["node_modules", ".nuxt", "dist"],
   "vueCompilerOptions": {
     "target": 2,
+    "experimentalCompatMode": 2
   }
 }

From 69aaeaf42a751eb388aaa430cf443920add81311 Mon Sep 17 00:00:00 2001
From: Jitendra Nirnejak <jeetnirnejak@gmail.com>
Date: Mon, 27 Jun 2022 15:52:32 +0530
Subject: [PATCH 46/50] fix: environment variables overflowing issue on test
 results - fix (#2473)

---
 packages/hoppscotch-app/components/http/TestResultEnv.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/hoppscotch-app/components/http/TestResultEnv.vue b/packages/hoppscotch-app/components/http/TestResultEnv.vue
index fba1a8226..4b1ef2895 100644
--- a/packages/hoppscotch-app/components/http/TestResultEnv.vue
+++ b/packages/hoppscotch-app/components/http/TestResultEnv.vue
@@ -12,10 +12,10 @@
       <span class="text-secondaryDark">
         {{ env.key }}
       </span>
-      <span class="text-secondaryDark">
+      <span class="text-secondaryDark pl-2 break-all">
         {{ ` \xA0 — \xA0 ${env.value}` }}
       </span>
-      <span v-if="status === 'updations'" class="text-secondaryLight">
+      <span v-if="status === 'updations'" class="text-secondaryLight px-2 break-all">
         {{ ` \xA0 ← \xA0 ${env.previousValue}` }}
       </span>
     </div>

From ca553b9d3cb82aa6f1eacc373d9fb4b883bce397 Mon Sep 17 00:00:00 2001
From: Akash K <57758277+amk-dev@users.noreply.github.com>
Date: Mon, 27 Jun 2022 22:24:38 +0530
Subject: [PATCH 47/50] fix: empty string exported when exporting team
 collections (#2460)

---
 .../hoppscotch-app/components/collections/ImportExport.vue  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/hoppscotch-app/components/collections/ImportExport.vue b/packages/hoppscotch-app/components/collections/ImportExport.vue
index ff7b53007..3198b9818 100644
--- a/packages/hoppscotch-app/components/collections/ImportExport.vue
+++ b/packages/hoppscotch-app/components/collections/ImportExport.vue
@@ -244,7 +244,7 @@ const createCollectionGist = async () => {
     return
   }
 
-  getJSONCollection()
+  await getJSONCollection()
 
   try {
     const res = await axios.$post(
@@ -316,8 +316,8 @@ const importToTeams = async (content: HoppCollection<HoppRESTRequest>) => {
   importingMyCollections.value = false
 }
 
-const exportJSON = () => {
-  getJSONCollection()
+const exportJSON = async () => {
+  await getJSONCollection()
 
   const dataToWrite = collectionJson.value
   const file = new Blob([dataToWrite], { type: "application/json" })

From 07a8a377397dddd3d0763d3d4177d71dc4272c5b Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Tue, 28 Jun 2022 15:42:47 +0600
Subject: [PATCH 48/50] feat: realtime tabs as subpages (#2450)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
---
 .../hoppscotch-app/components/app/Sidenav.vue |  20 +
 .../components/http/TestResultEnv.vue         |   5 +-
 packages/hoppscotch-app/pages/realtime.vue    |  96 ++--
 .../{components => pages}/realtime/Mqtt.vue   |   0
 .../realtime/Socketio.vue                     |   0
 .../{components => pages}/realtime/Sse.vue    |   0
 .../realtime/Websocket.vue                    |   0
 pnpm-lock.yaml                                | 415 ++++++++++--------
 8 files changed, 299 insertions(+), 237 deletions(-)
 rename packages/hoppscotch-app/{components => pages}/realtime/Mqtt.vue (100%)
 rename packages/hoppscotch-app/{components => pages}/realtime/Socketio.vue (100%)
 rename packages/hoppscotch-app/{components => pages}/realtime/Sse.vue (100%)
 rename packages/hoppscotch-app/{components => pages}/realtime/Websocket.vue (100%)

diff --git a/packages/hoppscotch-app/components/app/Sidenav.vue b/packages/hoppscotch-app/components/app/Sidenav.vue
index 71e4d331f..58ace3830 100644
--- a/packages/hoppscotch-app/components/app/Sidenav.vue
+++ b/packages/hoppscotch-app/components/app/Sidenav.vue
@@ -7,6 +7,7 @@
         :to="localePath(navigation.target)"
         class="nav-link"
         tabindex="0"
+        :exact="navigation.exact"
       >
         <div v-if="navigation.svg">
           <SmartIcon :name="navigation.svg" class="svg-icons" />
@@ -40,26 +41,31 @@ const primaryNavigation = [
     target: "index",
     svg: "link-2",
     title: t("navigation.rest"),
+    exact: true,
   },
   {
     target: "graphql",
     svg: "graphql",
     title: t("navigation.graphql"),
+    exact: false,
   },
   {
     target: "realtime",
     svg: "globe",
     title: t("navigation.realtime"),
+    exact: false,
   },
   {
     target: "documentation",
     svg: "book-open",
     title: t("navigation.doc"),
+    exact: false,
   },
   {
     target: "settings",
     svg: "settings",
     title: t("navigation.settings"),
+    exact: false,
   },
 ]
 </script>
@@ -105,6 +111,20 @@ const primaryNavigation = [
     @apply text-tiny;
   }
 
+  &.active-link {
+    @apply text-secondaryDark;
+    @apply bg-primaryLight;
+    @apply hover:text-secondaryDark;
+
+    .material-icons,
+    .svg-icons {
+      @apply opacity-100;
+    }
+
+    &::after {
+      @apply bg-accent;
+    }
+  }
   &.exact-active-link {
     @apply text-secondaryDark;
     @apply bg-primaryLight;
diff --git a/packages/hoppscotch-app/components/http/TestResultEnv.vue b/packages/hoppscotch-app/components/http/TestResultEnv.vue
index 4b1ef2895..f1578aafa 100644
--- a/packages/hoppscotch-app/components/http/TestResultEnv.vue
+++ b/packages/hoppscotch-app/components/http/TestResultEnv.vue
@@ -15,7 +15,10 @@
       <span class="text-secondaryDark pl-2 break-all">
         {{ ` \xA0 — \xA0 ${env.value}` }}
       </span>
-      <span v-if="status === 'updations'" class="text-secondaryLight px-2 break-all">
+      <span
+        v-if="status === 'updations'"
+        class="text-secondaryLight px-2 break-all"
+      >
         {{ ` \xA0 ← \xA0 ${env.previousValue}` }}
       </span>
     </div>
diff --git a/packages/hoppscotch-app/pages/realtime.vue b/packages/hoppscotch-app/pages/realtime.vue
index c4852a0ca..5288ba75d 100644
--- a/packages/hoppscotch-app/pages/realtime.vue
+++ b/packages/hoppscotch-app/pages/realtime.vue
@@ -1,53 +1,67 @@
 <template>
-  <SmartTabs
-    v-model="selectedNavigationTab"
-    class="h-full !overflow-hidden"
-    styles="sticky bg-primary top-0 z-10 border-b border-dividerLight !overflow-visible"
-  >
+  <SmartTabs v-model="currentTab">
     <SmartTab
-      id="websocket"
-      :label="$t('tab.websocket')"
-      style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
+      v-for="{ target, title } in REALTIME_NAVIGATION"
+      :id="target"
+      :key="target"
+      :label="title"
     >
-      <RealtimeWebsocket />
-    </SmartTab>
-    <SmartTab
-      id="sse"
-      :label="$t('tab.sse')"
-      style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
-    >
-      <RealtimeSse />
-    </SmartTab>
-    <SmartTab
-      id="socketio"
-      :label="$t('tab.socketio')"
-      style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
-    >
-      <RealtimeSocketio />
-    </SmartTab>
-    <SmartTab
-      id="mqtt"
-      :label="$t('tab.mqtt')"
-      style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
-    >
-      <RealtimeMqtt />
+      <NuxtChild />
     </SmartTab>
   </SmartTabs>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { watch, ref, useRouter, useRoute } from "@nuxtjs/composition-api"
+import { useI18n } from "~/helpers/utils/composables"
 
-export default defineComponent({
-  data() {
-    return {
-      selectedNavigationTab: "websocket",
-    }
+const t = useI18n()
+const router = useRouter()
+const route = useRoute()
+
+const REALTIME_NAVIGATION = [
+  {
+    target: "websocket",
+    title: t("tab.websocket"),
   },
-  head() {
-    return {
-      title: `${this.$t("navigation.realtime")} • Hoppscotch`,
-    }
+  {
+    target: "sse",
+    title: t("tab.sse"),
   },
+  {
+    target: "socketio",
+    title: t("tab.socketio"),
+  },
+  {
+    target: "mqtt",
+    title: t("tab.mqtt"),
+  },
+] as const
+
+type RealtimeNavTab = typeof REALTIME_NAVIGATION[number]["target"]
+
+const currentTab = ref<RealtimeNavTab>("websocket")
+
+// Update the router when the tab is updated
+watch(currentTab, (newTab) => {
+  router.push(`/realtime/${newTab}`)
 })
+
+// Update the tab when router is upgrad
+watch(
+  route,
+  (updateRoute) => {
+    if (updateRoute.path === "/realtime") router.replace("/realtime/websocket")
+
+    const destination: string | undefined =
+      updateRoute.path.split("/realtime/")[1]
+
+    const target = REALTIME_NAVIGATION.find(
+      ({ target }) => target === destination
+    )?.target
+
+    if (target) currentTab.value = target
+  },
+  { immediate: true }
+)
 </script>
diff --git a/packages/hoppscotch-app/components/realtime/Mqtt.vue b/packages/hoppscotch-app/pages/realtime/Mqtt.vue
similarity index 100%
rename from packages/hoppscotch-app/components/realtime/Mqtt.vue
rename to packages/hoppscotch-app/pages/realtime/Mqtt.vue
diff --git a/packages/hoppscotch-app/components/realtime/Socketio.vue b/packages/hoppscotch-app/pages/realtime/Socketio.vue
similarity index 100%
rename from packages/hoppscotch-app/components/realtime/Socketio.vue
rename to packages/hoppscotch-app/pages/realtime/Socketio.vue
diff --git a/packages/hoppscotch-app/components/realtime/Sse.vue b/packages/hoppscotch-app/pages/realtime/Sse.vue
similarity index 100%
rename from packages/hoppscotch-app/components/realtime/Sse.vue
rename to packages/hoppscotch-app/pages/realtime/Sse.vue
diff --git a/packages/hoppscotch-app/components/realtime/Websocket.vue b/packages/hoppscotch-app/pages/realtime/Websocket.vue
similarity index 100%
rename from packages/hoppscotch-app/components/realtime/Websocket.vue
rename to packages/hoppscotch-app/pages/realtime/Websocket.vue
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 46978ea13..ee2c54be9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: 5.4
+lockfileVersion: 5.3
 
 importers:
 
@@ -36,8 +36,8 @@ importers:
       '@lezer/generator': 0.15.4
       mocha: 9.2.2
       rollup: 2.70.2
-      rollup-plugin-dts: 4.2.1_nmerszcjz2rfjina4mudxa4qka
-      rollup-plugin-ts: 2.0.7_nmerszcjz2rfjina4mudxa4qka
+      rollup-plugin-dts: 4.2.1_rollup@2.70.2+typescript@4.6.3
+      rollup-plugin-ts: 2.0.7_rollup@2.70.2+typescript@4.6.3
       typescript: 4.6.3
 
   packages/hoppscotch-app:
@@ -225,7 +225,7 @@ importers:
       '@hoppscotch/data': link:../hoppscotch-data
       '@hoppscotch/js-sandbox': link:../hoppscotch-js-sandbox
       '@nuxtjs/axios': 5.13.6
-      '@nuxtjs/composition-api': 0.32.0_7zyd2bhtzdtcuohgelsuzs4zp4
+      '@nuxtjs/composition-api': 0.32.0_fe703d04f3c8e62a38e622e54ccb997f
       '@nuxtjs/gtm': 2.4.0
       '@nuxtjs/i18n': 7.2.1
       '@nuxtjs/robots': 2.5.0
@@ -244,8 +244,8 @@ importers:
       fp-ts: 2.11.10
       fuse.js: 6.5.3
       graphql: 15.7.2
-      graphql-language-service-interface: 2.9.1_lkrcf5pybqujbtm7lu54f4mx6u
-      graphql-language-service-parser: 1.10.4_lkrcf5pybqujbtm7lu54f4mx6u
+      graphql-language-service-interface: 2.9.1_ac4ec5720f2d0ad4b770153d197a0e78
+      graphql-language-service-parser: 1.10.4_ac4ec5720f2d0ad4b770153d197a0e78
       graphql-tag: 2.12.6_graphql@15.7.2
       httpsnippet: 2.0.0
       insomnia-importers: 2.8.0_openapi-types@10.0.0
@@ -284,18 +284,18 @@ importers:
       '@babel/core': 7.17.9
       '@babel/preset-env': 7.16.11_@babel+core@7.17.9
       '@graphql-codegen/add': 3.1.1_graphql@15.7.2
-      '@graphql-codegen/cli': 2.6.2_lkrcf5pybqujbtm7lu54f4mx6u
+      '@graphql-codegen/cli': 2.6.2_ac4ec5720f2d0ad4b770153d197a0e78
       '@graphql-codegen/typed-document-node': 2.2.8_graphql@15.7.2
       '@graphql-codegen/typescript': 2.4.8_graphql@15.7.2
       '@graphql-codegen/typescript-operations': 2.3.5_graphql@15.7.2
-      '@graphql-codegen/typescript-urql-graphcache': 2.2.10_ab4pvorj7pzp2qhslnfpdhhgwq
+      '@graphql-codegen/typescript-urql-graphcache': 2.2.10_0078faba29fbf2fd40f25b4af19ce6b4
       '@graphql-codegen/urql-introspection': 2.1.1_graphql@15.7.2
       '@graphql-typed-document-node/core': 3.1.1_graphql@15.7.2
       '@nuxt/types': 2.15.8_sass@1.50.0
-      '@nuxt/typescript-build': 2.1.0_q3t6h55dq2sw47xlf74gyoa2ki
+      '@nuxt/typescript-build': 2.1.0_@nuxt+types@2.15.8+eslint@8.13.0
       '@nuxtjs/color-mode': 2.1.1
       '@nuxtjs/dotenv': 1.4.1
-      '@nuxtjs/eslint-config-typescript': 9.0.0_pzpgen6zmm2jolojank4cxwjaa
+      '@nuxtjs/eslint-config-typescript': 9.0.0_7e5e6237d96334972dc90355c15ec900
       '@nuxtjs/eslint-module': 3.1.0_eslint@8.13.0
       '@nuxtjs/google-analytics': 2.4.0
       '@nuxtjs/google-fonts': 1.3.0
@@ -321,7 +321,7 @@ importers:
       '@types/splitpanes': 2.2.1
       '@types/uuid': 8.3.4
       '@types/yargs-parser': 21.0.0
-      '@urql/devtools': 2.0.3_6mj4hf5jpwkkuqkncahvybm4zm
+      '@urql/devtools': 2.0.3_@urql+core@2.4.4+graphql@15.7.2
       '@vue/composition-api': 1.4.9
       '@vue/runtime-dom': 3.2.33
       '@vue/test-utils': 1.3.0
@@ -333,7 +333,7 @@ importers:
       eslint: 8.13.0
       eslint-config-prettier: 8.5.0_eslint@8.13.0
       eslint-plugin-nuxt: 3.2.0_eslint@8.13.0
-      eslint-plugin-prettier: 4.0.0_dak2zfnx7mtmcpd5jcuo55rnb4
+      eslint-plugin-prettier: 4.0.0_1815ac95b7fb26c13c7d48a8eef62d0f
       eslint-plugin-vue: 8.6.0_eslint@8.13.0
       jest: 27.5.1
       jest-serializer-vue: 2.0.2
@@ -346,10 +346,10 @@ importers:
       sass-loader: 10.2.0_sass@1.50.0
       stylelint: 14.7.1
       stylelint-config-prettier: 9.0.3_stylelint@14.7.1
-      stylelint-config-recommended-vue: 1.4.0_dkblcabdfo7hanxmbj6kpjf26q
+      stylelint-config-recommended-vue: 1.4.0_1a82b100232bbe7036ec0a7ca7a4baf4
       stylelint-config-standard: 25.0.0_stylelint@14.7.1
       stylelint-config-standard-scss: 3.0.0_stylelint@14.7.1
-      ts-jest: 27.1.4_4x5qquxzignoqqsapgnc6txbpa
+      ts-jest: 27.1.4_e5fb0852f9419ae84240799a2f4ee178
       typescript: 4.6.3
       vue-jest: 3.0.7_babel-core@7.0.0-bridge.0
       vue-template-babel-compiler: 1.1.3
@@ -401,7 +401,7 @@ importers:
       lodash: 4.17.21
       prettier: 2.6.2
       qs: 6.10.3
-      ts-jest: 27.1.4_53ggqi2i4rbcfjtktmjua6zili
+      ts-jest: 27.1.4_eecc682348e44222a66a9b13407b285a
       tsup: 5.12.7_typescript@4.6.4
       typescript: 4.6.4
 
@@ -458,15 +458,15 @@ importers:
       '@types/jest': 27.4.1
       '@types/lodash': 4.14.181
       '@types/node': 17.0.24
-      '@typescript-eslint/eslint-plugin': 5.19.0_6nfnzbei2lspafh6mfbs24gl6i
-      '@typescript-eslint/parser': 5.19.0_jzhokl4shvj5szf5bgr66kln2a
+      '@typescript-eslint/eslint-plugin': 5.19.0_f34adc8488d2e4f014fe61432d70cbf2
+      '@typescript-eslint/parser': 5.19.0_eslint@8.13.0+typescript@4.6.3
       eslint: 8.13.0
       eslint-config-prettier: 8.5.0_eslint@8.13.0
-      eslint-plugin-prettier: 4.0.0_dak2zfnx7mtmcpd5jcuo55rnb4
+      eslint-plugin-prettier: 4.0.0_1815ac95b7fb26c13c7d48a8eef62d0f
       io-ts: 2.2.16_fp-ts@2.11.10
       jest: 27.5.1
       prettier: 2.6.2
-      ts-jest: 27.1.4_tgc6da2oqazvrn56dzwolsqo5i
+      ts-jest: 27.1.4_9985e1834e803358b7be1e6ce5ca0eea
       typescript: 4.6.3
 
 packages:
@@ -2222,7 +2222,7 @@ packages:
       '@types/node': 17.0.24
       chalk: 4.1.2
       cosmiconfig: 7.0.1
-      cosmiconfig-typescript-loader: 1.0.9_c6ucwwwirjo6ockovr3lj3o2cm
+      cosmiconfig-typescript-loader: 1.0.9_17a82b5ac88a5de7094eac76b4edda13
       lodash: 4.17.21
       resolve-from: 5.0.0
       typescript: 4.6.3
@@ -2324,7 +2324,7 @@ packages:
       esbuild: 0.12.29
     dev: true
 
-  /@endemolshinegroup/cosmiconfig-typescript-loader/3.0.2_5roa5pjqgcqkkeethcdwmsg7dm:
+  /@endemolshinegroup/cosmiconfig-typescript-loader/3.0.2_ec5c0ebd3030a0a5109338876648df1b:
     resolution: {integrity: sha512-QRVtqJuS1mcT56oHpVegkKBlgtWjXw/gHNWO3eL9oyB5Sc7HBoc2OLG/nYpVfT/Jejvo3NUrD0Udk7XgoyDKkA==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
@@ -2360,7 +2360,7 @@ packages:
     engines: {node: '>=14.0.0', npm: '>=7.0.0'}
     dev: false
 
-  /@firebase/analytics-compat/0.1.9_jado6ohlsifk5gy2xjtglm27p4:
+  /@firebase/analytics-compat/0.1.9_4806ef38eb920aae9b1aba6665b35f7f:
     resolution: {integrity: sha512-HYKMAZvfU589WVvK5XKY9Pl+axXFISabouAFw2VHpJm/TO1mAXAy0+eIjqQ3j8z3L1OEfCeOV/oY9eh8rpJZ5w==}
     peerDependencies:
       '@firebase/app-compat': 0.x
@@ -2392,7 +2392,7 @@ packages:
       tslib: 2.3.1
     dev: false
 
-  /@firebase/app-check-compat/0.2.6_jado6ohlsifk5gy2xjtglm27p4:
+  /@firebase/app-check-compat/0.2.6_4806ef38eb920aae9b1aba6665b35f7f:
     resolution: {integrity: sha512-DBzLHg/uuoNhDdwPEj8zQcqPaZSBFn8I0hATKyoX6SiAQKCi+4ugqeyQ6qGCyDpfNOyxL4PPxPMisXRhPzV2jw==}
     peerDependencies:
       '@firebase/app-compat': 0.x
@@ -2451,14 +2451,14 @@ packages:
       tslib: 2.3.1
     dev: false
 
-  /@firebase/auth-compat/0.2.12_4occfzcelhzy62o3xub2i2tkcu:
+  /@firebase/auth-compat/0.2.12_e38422e44459f38f69dbbd03a46a6a15:
     resolution: {integrity: sha512-LKeKylktRj03xgW5ilSOW1c4AsMig15ogf5hDKa820t6Bp6MNabj8yq2TV0/Q4SP4Ox/yrTISJGVvk+TJuBecQ==}
     peerDependencies:
       '@firebase/app-compat': 0.x
     dependencies:
       '@firebase/app-compat': 0.1.22
       '@firebase/auth': 0.19.12_@firebase+app@0.7.21
-      '@firebase/auth-types': 0.11.0_uzaylzqz7y23sj27ypdw6yti3m
+      '@firebase/auth-types': 0.11.0_a64185e619fe35b9275fc3c76f6268db
       '@firebase/component': 0.5.13
       '@firebase/util': 1.5.2
       node-fetch: 2.6.7
@@ -2472,7 +2472,7 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@firebase/auth-interop-types/0.1.6_uzaylzqz7y23sj27ypdw6yti3m:
+  /@firebase/auth-interop-types/0.1.6_a64185e619fe35b9275fc3c76f6268db:
     resolution: {integrity: sha512-etIi92fW3CctsmR9e3sYM3Uqnoq861M0Id9mdOPF6PWIg38BXL5k4upCNBggGUpLIS0H1grMOvy/wn1xymwe2g==}
     peerDependencies:
       '@firebase/app-types': 0.x
@@ -2482,7 +2482,7 @@ packages:
       '@firebase/util': 1.5.2
     dev: false
 
-  /@firebase/auth-types/0.11.0_uzaylzqz7y23sj27ypdw6yti3m:
+  /@firebase/auth-types/0.11.0_a64185e619fe35b9275fc3c76f6268db:
     resolution: {integrity: sha512-q7Bt6cx+ySj9elQHTsKulwk3+qDezhzRBFC9zlQ1BjgMueUOnGMcvqmU0zuKlQ4RhLSH7MNAdBV2znVaoN3Vxw==}
     peerDependencies:
       '@firebase/app-types': 0.x
@@ -2517,7 +2517,7 @@ packages:
       tslib: 2.3.1
     dev: false
 
-  /@firebase/database-compat/0.1.8_kok7svfarodn764ootzynv4sgq:
+  /@firebase/database-compat/0.1.8_5395f954a08b86dffb8e74f386d79234:
     resolution: {integrity: sha512-dhXr5CSieBuKNdU96HgeewMQCT9EgOIkfF1GNy+iRrdl7BWLxmlKuvLfK319rmIytSs/vnCzcD9uqyxTeU/A3A==}
     peerDependencies:
       '@firebase/app-compat': 0.x
@@ -2543,7 +2543,7 @@ packages:
   /@firebase/database/0.12.8_@firebase+app-types@0.7.0:
     resolution: {integrity: sha512-JBQVfFLzfhxlQbl4OU6ov9fdsddkytBQdtSSR49cz48homj38ccltAhK6seum+BI7f28cV2LFHF9672lcN+qxA==}
     dependencies:
-      '@firebase/auth-interop-types': 0.1.6_uzaylzqz7y23sj27ypdw6yti3m
+      '@firebase/auth-interop-types': 0.1.6_a64185e619fe35b9275fc3c76f6268db
       '@firebase/component': 0.5.13
       '@firebase/logger': 0.3.2
       '@firebase/util': 1.5.2
@@ -2553,7 +2553,7 @@ packages:
       - '@firebase/app-types'
     dev: false
 
-  /@firebase/firestore-compat/0.1.17_4occfzcelhzy62o3xub2i2tkcu:
+  /@firebase/firestore-compat/0.1.17_e38422e44459f38f69dbbd03a46a6a15:
     resolution: {integrity: sha512-hTLgq2WXUE6bb3/IqYlwY0Q6FdbZB2JwDoZHexIQmK69XuuK3j+JbE/NixV3mBo232tNSU+QeamfbAd6A1Agfw==}
     peerDependencies:
       '@firebase/app-compat': 0.x
@@ -2561,7 +2561,7 @@ packages:
       '@firebase/app-compat': 0.1.22
       '@firebase/component': 0.5.13
       '@firebase/firestore': 3.4.8_@firebase+app@0.7.21
-      '@firebase/firestore-types': 2.5.0_uzaylzqz7y23sj27ypdw6yti3m
+      '@firebase/firestore-types': 2.5.0_a64185e619fe35b9275fc3c76f6268db
       '@firebase/util': 1.5.2
       tslib: 2.3.1
     transitivePeerDependencies:
@@ -2570,7 +2570,7 @@ packages:
       - encoding
     dev: false
 
-  /@firebase/firestore-types/2.5.0_uzaylzqz7y23sj27ypdw6yti3m:
+  /@firebase/firestore-types/2.5.0_a64185e619fe35b9275fc3c76f6268db:
     resolution: {integrity: sha512-I6c2m1zUhZ5SH0cWPmINabDyH5w0PPFHk2UHsjBpKdZllzJZ2TwTkXbDtpHUZNmnc/zAa0WNMNMvcvbb/xJLKA==}
     peerDependencies:
       '@firebase/app-types': 0.x
@@ -2599,14 +2599,14 @@ packages:
       - encoding
     dev: false
 
-  /@firebase/functions-compat/0.1.12_4occfzcelhzy62o3xub2i2tkcu:
+  /@firebase/functions-compat/0.1.12_e38422e44459f38f69dbbd03a46a6a15:
     resolution: {integrity: sha512-pKianAWF9vv3u9DazbRExYQFjEu/b9gxTWVCPjq+FiLK39xULT01dZz4Zrr2KzFnb54wHHbRmU1BAWNAkQTmmQ==}
     peerDependencies:
       '@firebase/app-compat': 0.x
     dependencies:
       '@firebase/app-compat': 0.1.22
       '@firebase/component': 0.5.13
-      '@firebase/functions': 0.7.11_bxid5kpxc244fm2zotnyenw22i
+      '@firebase/functions': 0.7.11_0dd03ea9f716b9c2b35974db8236dad2
       '@firebase/functions-types': 0.5.0
       '@firebase/util': 1.5.2
       tslib: 2.3.1
@@ -2620,14 +2620,14 @@ packages:
     resolution: {integrity: sha512-qza0M5EwX+Ocrl1cYI14zoipUX4gI/Shwqv0C1nB864INAD42Dgv4v94BCyxGHBg2kzlWy8PNafdP7zPO8aJQA==}
     dev: false
 
-  /@firebase/functions/0.7.11_bxid5kpxc244fm2zotnyenw22i:
+  /@firebase/functions/0.7.11_0dd03ea9f716b9c2b35974db8236dad2:
     resolution: {integrity: sha512-o9pmN1TWHDEpmB6IYbqeIIG6Wllcfw6jSNm8UZYnOYM8oDay1FW6OeN/fA0GlGmwF4cPdxA3oKXbLn3ObYFxXQ==}
     peerDependencies:
       '@firebase/app': 0.x
     dependencies:
       '@firebase/app': 0.7.21
       '@firebase/app-check-interop-types': 0.1.0
-      '@firebase/auth-interop-types': 0.1.6_uzaylzqz7y23sj27ypdw6yti3m
+      '@firebase/auth-interop-types': 0.1.6_a64185e619fe35b9275fc3c76f6268db
       '@firebase/component': 0.5.13
       '@firebase/messaging-interop-types': 0.1.0
       '@firebase/util': 1.5.2
@@ -2655,7 +2655,7 @@ packages:
       tslib: 2.3.1
     dev: false
 
-  /@firebase/messaging-compat/0.1.12_jado6ohlsifk5gy2xjtglm27p4:
+  /@firebase/messaging-compat/0.1.12_4806ef38eb920aae9b1aba6665b35f7f:
     resolution: {integrity: sha512-Cfv4ZQaxiMx4DcpDkFX1yKHFGQtnyMA6pcLplcC3uHkSVCyNRW6pFYSoO0/Uae03ixxIYNwle1ZVaVUZ2L5ddA==}
     peerDependencies:
       '@firebase/app-compat': 0.x
@@ -2686,7 +2686,7 @@ packages:
       tslib: 2.3.1
     dev: false
 
-  /@firebase/performance-compat/0.1.8_jado6ohlsifk5gy2xjtglm27p4:
+  /@firebase/performance-compat/0.1.8_4806ef38eb920aae9b1aba6665b35f7f:
     resolution: {integrity: sha512-lMLKFcOB99+tb6dVHJlJ8s19JFjxqpAqPGXCG8evTODPUW3BluBbfG4YS7JRESVA7wc/6kkuQIOx9q7l+bBZtQ==}
     peerDependencies:
       '@firebase/app-compat': 0.x
@@ -2727,7 +2727,7 @@ packages:
       whatwg-fetch: 2.0.4
     dev: false
 
-  /@firebase/remote-config-compat/0.1.8_jado6ohlsifk5gy2xjtglm27p4:
+  /@firebase/remote-config-compat/0.1.8_4806ef38eb920aae9b1aba6665b35f7f:
     resolution: {integrity: sha512-lU9t7PMVpgE6q1vG8AuFenFhfUnx0H+eeiIQTi4dtuLDMx9BsI14c9VuiVjRIi7xC2DCDRNQCRL1kRD8bzgJNg==}
     peerDependencies:
       '@firebase/app-compat': 0.x
@@ -2760,7 +2760,7 @@ packages:
       tslib: 2.3.1
     dev: false
 
-  /@firebase/storage-compat/0.1.13_4occfzcelhzy62o3xub2i2tkcu:
+  /@firebase/storage-compat/0.1.13_e38422e44459f38f69dbbd03a46a6a15:
     resolution: {integrity: sha512-MdubKh+xe3Xpi34WaXBKtim8H2aauO5sqqmATTc2WgSmSAqTmNSjQfNqIdf139Mp9ZCnpZAxiwiwzQtfckLYWg==}
     peerDependencies:
       '@firebase/app-compat': 0.x
@@ -2768,7 +2768,7 @@ packages:
       '@firebase/app-compat': 0.1.22
       '@firebase/component': 0.5.13
       '@firebase/storage': 0.9.5_@firebase+app@0.7.21
-      '@firebase/storage-types': 0.6.0_uzaylzqz7y23sj27ypdw6yti3m
+      '@firebase/storage-types': 0.6.0_a64185e619fe35b9275fc3c76f6268db
       '@firebase/util': 1.5.2
       tslib: 2.3.1
     transitivePeerDependencies:
@@ -2777,7 +2777,7 @@ packages:
       - encoding
     dev: false
 
-  /@firebase/storage-types/0.6.0_uzaylzqz7y23sj27ypdw6yti3m:
+  /@firebase/storage-types/0.6.0_a64185e619fe35b9275fc3c76f6268db:
     resolution: {integrity: sha512-1LpWhcCb1ftpkP/akhzjzeFxgVefs6eMD2QeKiJJUGH1qOiows2w5o0sKCUSQrvrRQS1lz3SFGvNR1Ck/gqxeA==}
     peerDependencies:
       '@firebase/app-types': 0.x
@@ -2825,7 +2825,7 @@ packages:
       tslib: 2.3.1
     dev: true
 
-  /@graphql-codegen/cli/2.6.2_lkrcf5pybqujbtm7lu54f4mx6u:
+  /@graphql-codegen/cli/2.6.2_ac4ec5720f2d0ad4b770153d197a0e78:
     resolution: {integrity: sha512-UO75msoVgvLEvfjCezM09cQQqp32+mR8Ma1ACsBpr7nroFvHbgcu2ulx1cMovg4sxDBCsvd9Eq/xOOMpARUxtw==}
     hasBin: true
     peerDependencies:
@@ -2840,8 +2840,8 @@ packages:
       '@graphql-tools/graphql-file-loader': 7.3.3_graphql@15.7.2
       '@graphql-tools/json-file-loader': 7.3.3_graphql@15.7.2
       '@graphql-tools/load': 7.5.1_graphql@15.7.2
-      '@graphql-tools/prisma-loader': 7.1.1_graphql@15.7.2
-      '@graphql-tools/url-loader': 7.7.1_graphql@15.7.2
+      '@graphql-tools/prisma-loader': 7.1.1_e66b2893df708e5e2662df4974b38286
+      '@graphql-tools/url-loader': 7.7.1_e66b2893df708e5e2662df4974b38286
       '@graphql-tools/utils': 8.6.1_graphql@15.7.2
       ansi-escapes: 4.3.2
       chalk: 4.1.2
@@ -2855,7 +2855,7 @@ packages:
       glob: 7.2.0
       globby: 11.1.0
       graphql: 15.7.2
-      graphql-config: 4.1.0_lkrcf5pybqujbtm7lu54f4mx6u
+      graphql-config: 4.1.0_ac4ec5720f2d0ad4b770153d197a0e78
       inquirer: 8.2.0
       is-glob: 4.0.3
       json-to-pretty-yaml: 1.2.2
@@ -2979,7 +2979,7 @@ packages:
       - supports-color
     dev: true
 
-  /@graphql-codegen/typescript-urql-graphcache/2.2.10_ab4pvorj7pzp2qhslnfpdhhgwq:
+  /@graphql-codegen/typescript-urql-graphcache/2.2.10_0078faba29fbf2fd40f25b4af19ce6b4:
     resolution: {integrity: sha512-GRWisSY9zdf2tdT0jBYqapesw68B88ExpG9DkInyeQf62MfBDjxzncmiPbuHxRjd2QJBCo2WfycHTwgkMGT1JA==}
     peerDependencies:
       '@urql/exchange-graphcache': ^4.1.1
@@ -3236,12 +3236,12 @@ packages:
       tslib: 2.3.1
     dev: true
 
-  /@graphql-tools/prisma-loader/7.1.1_graphql@15.7.2:
+  /@graphql-tools/prisma-loader/7.1.1_e66b2893df708e5e2662df4974b38286:
     resolution: {integrity: sha512-9hVpG3BNsXAYMLPlZhSHubk6qBmiHLo/UlU0ldL100sMpqI46iBaHNhTNXZCSdd81hT+4HNqaDXNFqyKJ22OGQ==}
     peerDependencies:
       graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
     dependencies:
-      '@graphql-tools/url-loader': 7.7.1_graphql@15.7.2
+      '@graphql-tools/url-loader': 7.7.1_e66b2893df708e5e2662df4974b38286
       '@graphql-tools/utils': 8.6.1_graphql@15.7.2
       '@types/js-yaml': 4.0.5
       '@types/json-stable-stringify': 1.0.33
@@ -3295,7 +3295,7 @@ packages:
       tslib: 2.3.1
       value-or-promise: 1.0.11
 
-  /@graphql-tools/url-loader/7.7.0_graphql@15.7.2:
+  /@graphql-tools/url-loader/7.7.0_e66b2893df708e5e2662df4974b38286:
     resolution: {integrity: sha512-mBBb+aJqI4E0MVEzyfi76Pi/G6lGxGTVt/tP1YtKJly7UnonNoWOtDusdL3zIVAGhGgLsNrLbGhLDbwSd6TV6A==}
     peerDependencies:
       graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
@@ -3313,7 +3313,7 @@ packages:
       graphql-sse: 1.0.6_graphql@15.7.2
       graphql-ws: 5.5.5_graphql@15.7.2
       isomorphic-ws: 4.0.1_ws@8.5.0
-      meros: 1.1.4
+      meros: 1.1.4_@types+node@17.0.24
       subscriptions-transport-ws: 0.11.0_graphql@15.7.2
       sync-fetch: 0.3.1
       tslib: 2.3.1
@@ -3326,7 +3326,7 @@ packages:
       - encoding
       - utf-8-validate
 
-  /@graphql-tools/url-loader/7.7.1_graphql@15.7.2:
+  /@graphql-tools/url-loader/7.7.1_e66b2893df708e5e2662df4974b38286:
     resolution: {integrity: sha512-K/5amdeHtKYI976HVd/AXdSNvLL7vx5QVjMlwN0OHeYyxSgC+UOH+KkS7cshYgL13SekGu0Mxbg9ABfgQ34ECA==}
     peerDependencies:
       graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
@@ -3344,7 +3344,7 @@ packages:
       graphql-sse: 1.0.6_graphql@15.7.2
       graphql-ws: 5.5.5_graphql@15.7.2
       isomorphic-ws: 4.0.1_ws@8.5.0
-      meros: 1.1.4
+      meros: 1.1.4_@types+node@17.0.24
       subscriptions-transport-ws: 0.11.0_graphql@15.7.2
       sync-fetch: 0.3.1
       tslib: 2.3.1
@@ -3963,19 +3963,19 @@ packages:
       ufo: 0.7.11
     dev: false
 
-  /@nuxt/kit-edge/3.0.0-rc.3-27579668.27a0084:
-    resolution: {integrity: sha512-ea+MufACOFq3tB8h5LSMMAAoNhbyxrzV6gPx3MulMtgm0Y6vQs6XLpAYQrxSLbvO5gMX1Mv5teBUykhftAclNQ==}
+  /@nuxt/kit-edge/3.0.0-rc.4-27588443.cf25525:
+    resolution: {integrity: sha512-2J1ASNaG9oHOQFLgvgWPupow4eMkw2MmkRkhAPzql4N+akJ+i9Z2NAsrSbP3MWyq0hZYs+gnxf0tnlpJQKUc/A==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
     dependencies:
-      '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.3-27579668.27a0084
+      '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.4-27588443.cf25525
       c12: 0.2.7
       consola: 2.15.3
       defu: 6.0.0
-      globby: 13.1.1
+      globby: 13.1.2
       hash-sum: 2.0.0
       ignore: 5.2.0
       jiti: 1.13.0
-      knitwork: 0.1.1
+      knitwork: 0.1.2
       lodash.template: 4.5.0
       mlly: 0.5.2
       pathe: 0.3.0
@@ -3983,7 +3983,7 @@ packages:
       scule: 0.2.1
       semver: 7.3.7
       unctx: 1.1.4
-      unimport: 0.2.6
+      unimport: 0.2.9
       untyped: 0.4.4
     transitivePeerDependencies:
       - esbuild
@@ -4015,8 +4015,8 @@ packages:
       - encoding
     dev: false
 
-  /@nuxt/schema-edge/3.0.0-rc.3-27579668.27a0084:
-    resolution: {integrity: sha512-7tLoqbRT62EyK+UYx9cz94yLZ275WX6Dwc0BISy4MhqfV/56hfvYy4sNwnxoqztwwbW6mfKzRg4kTDoqrRUAaQ==}
+  /@nuxt/schema-edge/3.0.0-rc.4-27588443.cf25525:
+    resolution: {integrity: sha512-Gx+C8NHP1t14qEvVgU7DJzcc2IaExwvq2N5a/vx0AV1lzUDxQ859A+cvvcDoqNuXCwMPnT0j/hTeYqDG2Ug/zw==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
     dependencies:
       c12: 0.2.7
@@ -4028,7 +4028,7 @@ packages:
       scule: 0.2.1
       std-env: 3.1.1
       ufo: 0.8.4
-      unimport: 0.2.6
+      unimport: 0.2.9
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -4113,14 +4113,14 @@ packages:
       - webpack
     dev: true
 
-  /@nuxt/typescript-build/2.1.0_q3t6h55dq2sw47xlf74gyoa2ki:
+  /@nuxt/typescript-build/2.1.0_@nuxt+types@2.15.8+eslint@8.13.0:
     resolution: {integrity: sha512-7TLMpfzgOckf3cBkzoPFns6Xl8FzY6MoFfm/5HUE47QeTWAdOG9ZFxMrVhHWieZHYUuV+k6byRtaRv4S/3R8zA==}
     peerDependencies:
       '@nuxt/types': '>=2.13.1'
     dependencies:
       '@nuxt/types': 2.15.8_sass@1.50.0
       consola: 2.15.3
-      fork-ts-checker-webpack-plugin: 6.4.0_a7as76x6rrddngsh5pmyc4eygu
+      fork-ts-checker-webpack-plugin: 6.4.0_eslint@8.13.0+typescript@4.2.4
       ts-loader: 8.3.0_typescript@4.2.4
       typescript: 4.2.4
     transitivePeerDependencies:
@@ -4186,7 +4186,7 @@ packages:
       '@nuxt/babel-preset-app': 2.15.8
       '@nuxt/friendly-errors-webpack-plugin': 2.5.2_webpack@4.46.0
       '@nuxt/utils': 2.15.8
-      babel-loader: 8.2.4_lgfes7hlvohbl3uptzldef4omm
+      babel-loader: 8.2.4_598a497cebab8e15ee8f9e5632178e63
       cache-loader: 4.1.0_webpack@4.46.0
       caniuse-lite: 1.0.30001274
       consola: 2.15.3
@@ -4217,8 +4217,8 @@ packages:
       thread-loader: 3.0.4_webpack@4.46.0
       time-fix-plugin: 2.0.7_webpack@4.46.0
       ufo: 0.7.11
-      url-loader: 4.1.1_lit45vopotvaqup7lrvlnvtxwy
-      vue-loader: 15.9.8_kwp7zf75ihpalujgmpl7xferky
+      url-loader: 4.1.1_file-loader@6.2.0+webpack@4.46.0
+      vue-loader: 15.9.8_559ffc97fd41de05d12663d7fb949156
       vue-style-loader: 4.1.3
       vue-template-compiler: 2.6.14
       webpack: 4.46.0
@@ -4255,7 +4255,7 @@ packages:
       lodash.template: 4.5.0
     dev: true
 
-  /@nuxtjs/composition-api/0.32.0_7zyd2bhtzdtcuohgelsuzs4zp4:
+  /@nuxtjs/composition-api/0.32.0_fe703d04f3c8e62a38e622e54ccb997f:
     resolution: {integrity: sha512-/LYf0N5x5j8i2/Uldfw+n4o3SVXyCIYQyOwSL+2JTllyyEkO3zHJc8YAbJhp22kHh6gPEhmgBA/whDUbERY7mg==}
     engines: {node: ^12.20.0 || >=14.13.0}
     peerDependencies:
@@ -4270,7 +4270,7 @@ packages:
       magic-string: 0.25.7
       nuxt: 2.15.8_typescript@4.6.3
       ufo: 0.7.10
-      unplugin-vue2-script-setup: 0.9.3_aptgit37ldnhfbzik6th2mucpa
+      unplugin-vue2-script-setup: 0.9.3_03e6644f7f58da72872857a67d328278
       upath: 2.0.1
     transitivePeerDependencies:
       - '@vue/runtime-dom'
@@ -4289,14 +4289,14 @@ packages:
       dotenv: 8.6.0
     dev: true
 
-  /@nuxtjs/eslint-config-typescript/9.0.0_pzpgen6zmm2jolojank4cxwjaa:
+  /@nuxtjs/eslint-config-typescript/9.0.0_7e5e6237d96334972dc90355c15ec900:
     resolution: {integrity: sha512-IgilIOcwJZ3Af4P7r35vHBl2GS9SIG0TuOINyUiIfzZBmEpX5vYhAbxHeeJhNosIywexDvZZ5m8EQwuJJYUJBg==}
     peerDependencies:
       eslint: ^8.11.0
     dependencies:
-      '@nuxtjs/eslint-config': 9.0.0_3oxs2345aw7rukisfax7o5nhuy
-      '@typescript-eslint/eslint-plugin': 5.14.0_c73qtwoqpvdfp6xojm7zfmehbu
-      '@typescript-eslint/parser': 5.14.0_jzhokl4shvj5szf5bgr66kln2a
+      '@nuxtjs/eslint-config': 9.0.0_dbaf2d6f9d05bf1a2912282ff775a7a6
+      '@typescript-eslint/eslint-plugin': 5.14.0_17f709d9d07d4657faee4b3f92b0870d
+      '@typescript-eslint/parser': 5.14.0_eslint@8.13.0+typescript@4.6.3
       eslint: 8.13.0
       eslint-import-resolver-typescript: 2.5.0_eslint@8.13.0
     transitivePeerDependencies:
@@ -4306,15 +4306,15 @@ packages:
       - typescript
     dev: true
 
-  /@nuxtjs/eslint-config/9.0.0_3oxs2345aw7rukisfax7o5nhuy:
+  /@nuxtjs/eslint-config/9.0.0_dbaf2d6f9d05bf1a2912282ff775a7a6:
     resolution: {integrity: sha512-S44hgSrAKEBJMmzg3Wes0uIZBASOgVAOnMYeNZNeeawRX1WpSS9w3WbqcIwjVL1Orx/XwrzMMH32A1ncEd/DQg==}
     peerDependencies:
       eslint: ^8.11.0
     dependencies:
       eslint: 8.13.0
-      eslint-config-standard: 16.0.3_4fgmoecy45ly6o2xiiknqiveni
+      eslint-config-standard: 16.0.3_e14cc71058e7578f3b574214d822a46a
       eslint-plugin-import: 2.25.4_eslint@8.13.0
-      eslint-plugin-jest: 26.1.1_3oxs2345aw7rukisfax7o5nhuy
+      eslint-plugin-jest: 26.1.1_dbaf2d6f9d05bf1a2912282ff775a7a6
       eslint-plugin-node: 11.1.0_eslint@8.13.0
       eslint-plugin-promise: 6.0.0_eslint@8.13.0
       eslint-plugin-unicorn: 41.0.0_eslint@8.13.0
@@ -5561,7 +5561,7 @@ packages:
       '@types/yargs-parser': 21.0.0
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.14.0_c73qtwoqpvdfp6xojm7zfmehbu:
+  /@typescript-eslint/eslint-plugin/5.14.0_17f709d9d07d4657faee4b3f92b0870d:
     resolution: {integrity: sha512-ir0wYI4FfFUDfLcuwKzIH7sMVA+db7WYen47iRSaCGl+HMAZI9fpBwfDo45ZALD3A45ZGyHWDNLhbg8tZrMX4w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5572,10 +5572,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.14.0_jzhokl4shvj5szf5bgr66kln2a
+      '@typescript-eslint/parser': 5.14.0_eslint@8.13.0+typescript@4.6.3
       '@typescript-eslint/scope-manager': 5.14.0
-      '@typescript-eslint/type-utils': 5.14.0_jzhokl4shvj5szf5bgr66kln2a
-      '@typescript-eslint/utils': 5.14.0_jzhokl4shvj5szf5bgr66kln2a
+      '@typescript-eslint/type-utils': 5.14.0_eslint@8.13.0+typescript@4.6.3
+      '@typescript-eslint/utils': 5.14.0_eslint@8.13.0+typescript@4.6.3
       debug: 4.3.4
       eslint: 8.13.0
       functional-red-black-tree: 1.0.1
@@ -5588,7 +5588,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.19.0_6nfnzbei2lspafh6mfbs24gl6i:
+  /@typescript-eslint/eslint-plugin/5.19.0_f34adc8488d2e4f014fe61432d70cbf2:
     resolution: {integrity: sha512-w59GpFqDYGnWFim9p6TGJz7a3qWeENJuAKCqjGSx+Hq/bwq3RZwXYqy98KIfN85yDqz9mq6QXiY5h0FjGQLyEg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5599,10 +5599,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.19.0_jzhokl4shvj5szf5bgr66kln2a
+      '@typescript-eslint/parser': 5.19.0_eslint@8.13.0+typescript@4.6.3
       '@typescript-eslint/scope-manager': 5.19.0
-      '@typescript-eslint/type-utils': 5.19.0_jzhokl4shvj5szf5bgr66kln2a
-      '@typescript-eslint/utils': 5.19.0_jzhokl4shvj5szf5bgr66kln2a
+      '@typescript-eslint/type-utils': 5.19.0_eslint@8.13.0+typescript@4.6.3
+      '@typescript-eslint/utils': 5.19.0_eslint@8.13.0+typescript@4.6.3
       debug: 4.3.4
       eslint: 8.13.0
       functional-red-black-tree: 1.0.1
@@ -5615,7 +5615,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.14.0_jzhokl4shvj5szf5bgr66kln2a:
+  /@typescript-eslint/parser/5.14.0_eslint@8.13.0+typescript@4.6.3:
     resolution: {integrity: sha512-aHJN8/FuIy1Zvqk4U/gcO/fxeMKyoSv/rS46UXMXOJKVsLQ+iYPuXNbpbH7cBLcpSbmyyFbwrniLx5+kutu1pw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5635,7 +5635,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.19.0_jzhokl4shvj5szf5bgr66kln2a:
+  /@typescript-eslint/parser/5.19.0_eslint@8.13.0+typescript@4.6.3:
     resolution: {integrity: sha512-yhktJjMCJX8BSBczh1F/uY8wGRYrBeyn84kH6oyqdIJwTGKmzX5Qiq49LRQ0Jh0LXnWijEziSo6BRqny8nqLVQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5671,7 +5671,7 @@ packages:
       '@typescript-eslint/visitor-keys': 5.19.0
     dev: true
 
-  /@typescript-eslint/type-utils/5.14.0_jzhokl4shvj5szf5bgr66kln2a:
+  /@typescript-eslint/type-utils/5.14.0_eslint@8.13.0+typescript@4.6.3:
     resolution: {integrity: sha512-d4PTJxsqaUpv8iERTDSQBKUCV7Q5yyXjqXUl3XF7Sd9ogNLuKLkxz82qxokqQ4jXdTPZudWpmNtr/JjbbvUixw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5681,7 +5681,7 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/utils': 5.14.0_jzhokl4shvj5szf5bgr66kln2a
+      '@typescript-eslint/utils': 5.14.0_eslint@8.13.0+typescript@4.6.3
       debug: 4.3.4
       eslint: 8.13.0
       tsutils: 3.21.0_typescript@4.6.3
@@ -5690,7 +5690,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/type-utils/5.19.0_jzhokl4shvj5szf5bgr66kln2a:
+  /@typescript-eslint/type-utils/5.19.0_eslint@8.13.0+typescript@4.6.3:
     resolution: {integrity: sha512-O6XQ4RI4rQcBGshTQAYBUIGsKqrKeuIOz9v8bckXZnSeXjn/1+BDZndHLe10UplQeJLXDNbaZYrAytKNQO2T4Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5700,7 +5700,7 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/utils': 5.19.0_jzhokl4shvj5szf5bgr66kln2a
+      '@typescript-eslint/utils': 5.19.0_eslint@8.13.0+typescript@4.6.3
       debug: 4.3.4
       eslint: 8.13.0
       tsutils: 3.21.0_typescript@4.6.3
@@ -5761,7 +5761,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.14.0_jzhokl4shvj5szf5bgr66kln2a:
+  /@typescript-eslint/utils/5.14.0_eslint@8.13.0+typescript@4.6.3:
     resolution: {integrity: sha512-EHwlII5mvUA0UsKYnVzySb/5EE/t03duUTweVy8Zqt3UQXBrpEVY144OTceFKaOe4xQXZJrkptCf7PjEBeGK4w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5779,7 +5779,7 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/utils/5.19.0_jzhokl4shvj5szf5bgr66kln2a:
+  /@typescript-eslint/utils/5.19.0_eslint@8.13.0+typescript@4.6.3:
     resolution: {integrity: sha512-ZuEckdupXpXamKvFz/Ql8YnePh2ZWcwz7APICzJL985Rp5C2AYcHO62oJzIqNhAMtMK6XvrlBTZeNG8n7gS3lQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5827,7 +5827,7 @@ packages:
       wonka: 4.0.15
     dev: false
 
-  /@urql/devtools/2.0.3_6mj4hf5jpwkkuqkncahvybm4zm:
+  /@urql/devtools/2.0.3_@urql+core@2.4.4+graphql@15.7.2:
     resolution: {integrity: sha512-TktPLiBS9LcBPHD6qcnb8wqOVcg3Bx0iCtvQ80uPpfofwwBGJmqnQTjUdEFU6kwaLOFZULQ9+Uo4831G823mQw==}
     peerDependencies:
       '@urql/core': '>= 1.14.0'
@@ -6721,21 +6721,7 @@ packages:
       - supports-color
     dev: true
 
-  /babel-loader/8.2.4_@babel+core@7.17.9:
-    resolution: {integrity: sha512-8dytA3gcvPPPv4Grjhnt8b5IIiTcq/zeXOPk4iTYI0SVXcsmuGg7JtBRDp8S9X+gJfhQ8ektjXZlDu1Bb33U8A==}
-    engines: {node: '>= 8.9'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-      webpack: '>=2'
-    dependencies:
-      '@babel/core': 7.17.9
-      find-cache-dir: 3.3.2
-      loader-utils: 2.0.2
-      make-dir: 3.1.0
-      schema-utils: 2.7.1
-    dev: true
-
-  /babel-loader/8.2.4_lgfes7hlvohbl3uptzldef4omm:
+  /babel-loader/8.2.4_598a497cebab8e15ee8f9e5632178e63:
     resolution: {integrity: sha512-8dytA3gcvPPPv4Grjhnt8b5IIiTcq/zeXOPk4iTYI0SVXcsmuGg7JtBRDp8S9X+gJfhQ8ektjXZlDu1Bb33U8A==}
     engines: {node: '>= 8.9'}
     peerDependencies:
@@ -6750,6 +6736,20 @@ packages:
       webpack: 4.46.0
     dev: false
 
+  /babel-loader/8.2.4_@babel+core@7.17.9:
+    resolution: {integrity: sha512-8dytA3gcvPPPv4Grjhnt8b5IIiTcq/zeXOPk4iTYI0SVXcsmuGg7JtBRDp8S9X+gJfhQ8ektjXZlDu1Bb33U8A==}
+    engines: {node: '>= 8.9'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+      webpack: '>=2'
+    dependencies:
+      '@babel/core': 7.17.9
+      find-cache-dir: 3.3.2
+      loader-utils: 2.0.2
+      make-dir: 3.1.0
+      schema-utils: 2.7.1
+    dev: true
+
   /babel-messages/6.23.0:
     resolution: {integrity: sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=}
     dependencies:
@@ -8131,7 +8131,7 @@ packages:
     dependencies:
       '@iarna/toml': 2.2.5
 
-  /cosmiconfig-typescript-loader/1.0.9_c6ucwwwirjo6ockovr3lj3o2cm:
+  /cosmiconfig-typescript-loader/1.0.9_17a82b5ac88a5de7094eac76b4edda13:
     resolution: {integrity: sha512-tRuMRhxN4m1Y8hP9SNYfz7jRwt8lZdWxdjg/ohg5esKmsndJIn4yT96oJVcf5x0eA11taXl+sIp+ielu529k6g==}
     engines: {node: '>=12', npm: '>=6'}
     peerDependencies:
@@ -8140,7 +8140,7 @@ packages:
     dependencies:
       '@types/node': 17.0.24
       cosmiconfig: 7.0.1
-      ts-node: 10.7.0_c6ucwwwirjo6ockovr3lj3o2cm
+      ts-node: 10.7.0_17a82b5ac88a5de7094eac76b4edda13
       typescript: 4.6.3
     transitivePeerDependencies:
       - '@swc/core'
@@ -9507,7 +9507,7 @@ packages:
       eslint: 8.13.0
     dev: true
 
-  /eslint-config-standard/16.0.3_4fgmoecy45ly6o2xiiknqiveni:
+  /eslint-config-standard/16.0.3_e14cc71058e7578f3b574214d822a46a:
     resolution: {integrity: sha512-x4fmJL5hGqNJKGHSjnLdgA6U6h1YW/G2dW9fA+cyVur4SK6lyue8+UgNKWlZtUDTXvgKDD/Oa3GQjmB5kjtVvg==}
     peerDependencies:
       eslint: ^7.12.1
@@ -9586,7 +9586,7 @@ packages:
       tsconfig-paths: 3.14.0
     dev: true
 
-  /eslint-plugin-jest/26.1.1_3oxs2345aw7rukisfax7o5nhuy:
+  /eslint-plugin-jest/26.1.1_dbaf2d6f9d05bf1a2912282ff775a7a6:
     resolution: {integrity: sha512-HRKOuPi5ADhza4ZBK5ufyNXy28bXXkib87w+pQqdvBhSTsamndh6sIAKPAUl8y0/n9jSWBdTPslrwtKWqkp8dA==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
     peerDependencies:
@@ -9599,8 +9599,8 @@ packages:
       jest:
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.14.0_c73qtwoqpvdfp6xojm7zfmehbu
-      '@typescript-eslint/utils': 5.14.0_jzhokl4shvj5szf5bgr66kln2a
+      '@typescript-eslint/eslint-plugin': 5.14.0_17f709d9d07d4657faee4b3f92b0870d
+      '@typescript-eslint/utils': 5.14.0_eslint@8.13.0+typescript@4.6.3
       eslint: 8.13.0
       jest: 27.5.1
     transitivePeerDependencies:
@@ -9634,7 +9634,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-prettier/4.0.0_dak2zfnx7mtmcpd5jcuo55rnb4:
+  /eslint-plugin-prettier/4.0.0_1815ac95b7fb26c13c7d48a8eef62d0f:
     resolution: {integrity: sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==}
     engines: {node: '>=6.0.0'}
     peerDependencies:
@@ -10246,30 +10246,30 @@ packages:
     resolution: {integrity: sha512-Zdmag/wGNkA4IAek+2yQoWrF2vyqIowu+2eOcSaE6jE2hDZYA3nHNutsQ+jquSxE3SeJk3Dh1OEsffqgunBy/w==}
     dependencies:
       '@firebase/analytics': 0.7.8_@firebase+app@0.7.21
-      '@firebase/analytics-compat': 0.1.9_jado6ohlsifk5gy2xjtglm27p4
+      '@firebase/analytics-compat': 0.1.9_4806ef38eb920aae9b1aba6665b35f7f
       '@firebase/app': 0.7.21
       '@firebase/app-check': 0.5.6_@firebase+app@0.7.21
-      '@firebase/app-check-compat': 0.2.6_jado6ohlsifk5gy2xjtglm27p4
+      '@firebase/app-check-compat': 0.2.6_4806ef38eb920aae9b1aba6665b35f7f
       '@firebase/app-compat': 0.1.22
       '@firebase/app-types': 0.7.0
       '@firebase/auth': 0.19.12_@firebase+app@0.7.21
-      '@firebase/auth-compat': 0.2.12_4occfzcelhzy62o3xub2i2tkcu
+      '@firebase/auth-compat': 0.2.12_e38422e44459f38f69dbbd03a46a6a15
       '@firebase/database': 0.12.8_@firebase+app-types@0.7.0
-      '@firebase/database-compat': 0.1.8_kok7svfarodn764ootzynv4sgq
+      '@firebase/database-compat': 0.1.8_5395f954a08b86dffb8e74f386d79234
       '@firebase/firestore': 3.4.8_@firebase+app@0.7.21
-      '@firebase/firestore-compat': 0.1.17_4occfzcelhzy62o3xub2i2tkcu
-      '@firebase/functions': 0.7.11_bxid5kpxc244fm2zotnyenw22i
-      '@firebase/functions-compat': 0.1.12_4occfzcelhzy62o3xub2i2tkcu
+      '@firebase/firestore-compat': 0.1.17_e38422e44459f38f69dbbd03a46a6a15
+      '@firebase/functions': 0.7.11_0dd03ea9f716b9c2b35974db8236dad2
+      '@firebase/functions-compat': 0.1.12_e38422e44459f38f69dbbd03a46a6a15
       '@firebase/installations': 0.5.8_@firebase+app@0.7.21
       '@firebase/messaging': 0.9.12_@firebase+app@0.7.21
-      '@firebase/messaging-compat': 0.1.12_jado6ohlsifk5gy2xjtglm27p4
+      '@firebase/messaging-compat': 0.1.12_4806ef38eb920aae9b1aba6665b35f7f
       '@firebase/performance': 0.5.8_@firebase+app@0.7.21
-      '@firebase/performance-compat': 0.1.8_jado6ohlsifk5gy2xjtglm27p4
+      '@firebase/performance-compat': 0.1.8_4806ef38eb920aae9b1aba6665b35f7f
       '@firebase/polyfill': 0.3.36
       '@firebase/remote-config': 0.3.7_@firebase+app@0.7.21
-      '@firebase/remote-config-compat': 0.1.8_jado6ohlsifk5gy2xjtglm27p4
+      '@firebase/remote-config-compat': 0.1.8_4806ef38eb920aae9b1aba6665b35f7f
       '@firebase/storage': 0.9.5_@firebase+app@0.7.21
-      '@firebase/storage-compat': 0.1.13_4occfzcelhzy62o3xub2i2tkcu
+      '@firebase/storage-compat': 0.1.13_e38422e44459f38f69dbbd03a46a6a15
       '@firebase/util': 1.5.2
     transitivePeerDependencies:
       - bufferutil
@@ -10318,7 +10318,7 @@ packages:
     resolution: {integrity: sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=}
     engines: {node: '>=0.10.0'}
 
-  /fork-ts-checker-webpack-plugin/6.4.0_a7as76x6rrddngsh5pmyc4eygu:
+  /fork-ts-checker-webpack-plugin/6.4.0_eslint@8.13.0+typescript@4.2.4:
     resolution: {integrity: sha512-3I3wFkc4DbzaUDPWEi96wdYGu4EKtxBafhZYm0o4mX51d9bphAY4P3mBl8K5mFXFJqVzHfmdbm9kLGnm7vwwBg==}
     engines: {node: '>=10', yarn: '>=1.0.0'}
     peerDependencies:
@@ -10746,8 +10746,8 @@ packages:
       merge2: 1.4.1
       slash: 3.0.0
 
-  /globby/13.1.1:
-    resolution: {integrity: sha512-XMzoDZbGZ37tufiv7g0N4F/zp3zkwdFtVbV3EHsVl1KQr4RPLfNoT068/97RPshz2J5xYNEjLKKBKaGHifBd3Q==}
+  /globby/13.1.2:
+    resolution: {integrity: sha512-LKSDZXToac40u8Q1PQtZihbNdTYSNMuWe+K5l+oa6KgDzSvVrHXlJy40hUP522RjAIoNLJYBJi7ow+rbFpIhHQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dependencies:
       dir-glob: 3.0.1
@@ -10814,18 +10814,18 @@ packages:
     resolution: {integrity: sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==}
     dev: true
 
-  /graphql-config/4.1.0_lkrcf5pybqujbtm7lu54f4mx6u:
+  /graphql-config/4.1.0_ac4ec5720f2d0ad4b770153d197a0e78:
     resolution: {integrity: sha512-Myqay6pmdcmX3KqoH+bMbeKZ1cTODpHS2CxF1ZzNnfTE+YUpGTcp01bOw6LpzamRb0T/WTYtGFbZeXGo9Hab2Q==}
     engines: {node: '>= 10.0.0'}
     peerDependencies:
       graphql: ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
     dependencies:
-      '@endemolshinegroup/cosmiconfig-typescript-loader': 3.0.2_5roa5pjqgcqkkeethcdwmsg7dm
+      '@endemolshinegroup/cosmiconfig-typescript-loader': 3.0.2_ec5c0ebd3030a0a5109338876648df1b
       '@graphql-tools/graphql-file-loader': 7.3.3_graphql@15.7.2
       '@graphql-tools/json-file-loader': 7.3.3_graphql@15.7.2
       '@graphql-tools/load': 7.5.0_graphql@15.7.2
       '@graphql-tools/merge': 8.2.1_graphql@15.7.2
-      '@graphql-tools/url-loader': 7.7.0_graphql@15.7.2
+      '@graphql-tools/url-loader': 7.7.0_e66b2893df708e5e2662df4974b38286
       '@graphql-tools/utils': 8.5.5_graphql@15.7.2
       cosmiconfig: 7.0.1
       cosmiconfig-toml-loader: 1.0.0
@@ -10848,13 +10848,13 @@ packages:
       graphql: 15.7.2
     dev: true
 
-  /graphql-language-service-interface/2.9.1_lkrcf5pybqujbtm7lu54f4mx6u:
+  /graphql-language-service-interface/2.9.1_ac4ec5720f2d0ad4b770153d197a0e78:
     resolution: {integrity: sha512-yGsE67fxJBXxY82+rLDMvUpmzpOUM8XFB+k+xOTUyABWs27osKaoGiuDDXAVGg1adhm+cpunWbipe763ZJkAVA==}
     peerDependencies:
       graphql: '>= 15.5.0 <= 16.0.0-experimental-stream-defer.5'
     dependencies:
       graphql: 15.7.2
-      graphql-language-service-parser: 1.10.4_lkrcf5pybqujbtm7lu54f4mx6u
+      graphql-language-service-parser: 1.10.4_ac4ec5720f2d0ad4b770153d197a0e78
       graphql-language-service-types: 1.8.3_graphql@15.7.2
       graphql-language-service-utils: 2.6.0_graphql@15.7.2
       vscode-languageserver-types: 3.16.0
@@ -10866,13 +10866,13 @@ packages:
       - utf-8-validate
     dev: false
 
-  /graphql-language-service-parser/1.10.4_lkrcf5pybqujbtm7lu54f4mx6u:
+  /graphql-language-service-parser/1.10.4_ac4ec5720f2d0ad4b770153d197a0e78:
     resolution: {integrity: sha512-duDE+0aeKLFVrb9Kf28U84ZEHhHcvTjWIT6dJbIAQJWBaDoht0D4BK9EIhd94I3DtKRc1JCJb2+70y1lvP/hiA==}
     peerDependencies:
       graphql: ^15.5.0 || ^16.0.0
     dependencies:
       graphql: 15.7.2
-      graphql-language-service-types: 1.8.7_lkrcf5pybqujbtm7lu54f4mx6u
+      graphql-language-service-types: 1.8.7_ac4ec5720f2d0ad4b770153d197a0e78
     transitivePeerDependencies:
       - '@types/node'
       - bufferutil
@@ -10889,13 +10889,13 @@ packages:
       graphql: 15.7.2
     dev: false
 
-  /graphql-language-service-types/1.8.7_lkrcf5pybqujbtm7lu54f4mx6u:
+  /graphql-language-service-types/1.8.7_ac4ec5720f2d0ad4b770153d197a0e78:
     resolution: {integrity: sha512-LP/Mx0nFBshYEyD0Ny6EVGfacJAGVx+qXtlJP4hLzUdBNOGimfDNtMVIdZANBXHXcM41MDgMHTnyEx2g6/Ttbw==}
     peerDependencies:
       graphql: ^15.5.0 || ^16.0.0
     dependencies:
       graphql: 15.7.2
-      graphql-config: 4.1.0_lkrcf5pybqujbtm7lu54f4mx6u
+      graphql-config: 4.1.0_ac4ec5720f2d0ad4b770153d197a0e78
       vscode-languageserver-types: 3.16.0
     transitivePeerDependencies:
       - '@types/node'
@@ -12964,8 +12964,8 @@ packages:
     resolution: {integrity: sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==}
     engines: {node: '>= 8'}
 
-  /knitwork/0.1.1:
-    resolution: {integrity: sha512-DxjuhTzCDeXjAcsQuqoZhTFF/wqvaVH2YA7QRhBRpsSeaL44S93hDxyvoluApwk3wjMdia7dc9J0Sj9MHD8rxg==}
+  /knitwork/0.1.2:
+    resolution: {integrity: sha512-2ekmY2S/VB3YGVhrIFadyJQpkjMFSf48tsXCnA+kjs4FEQIT+5FLyOF0No/X58z/2E/VaMyeJfukRoVT4gMsfQ==}
     dev: true
 
   /known-css-properties/0.24.0:
@@ -13630,7 +13630,7 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
-  /meros/1.1.4:
+  /meros/1.1.4_@types+node@17.0.24:
     resolution: {integrity: sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==}
     engines: {node: '>=12'}
     peerDependencies:
@@ -13638,6 +13638,8 @@ packages:
     peerDependenciesMeta:
       '@types/node':
         optional: true
+    dependencies:
+      '@types/node': 17.0.24
 
   /micromatch/3.1.0:
     resolution: {integrity: sha512-3StSelAE+hnRvMs8IdVW7Uhk8CVed5tp+kLLGlBP6WiRAXS21GPGu/Nat4WNPXj2Eoc24B02SaeoyozPMfj0/g==}
@@ -14277,7 +14279,7 @@ packages:
   /nuxt-windicss/2.2.11:
     resolution: {integrity: sha512-xobq725D6vqpIgYOrLJ6CVlR4xLlFGwuq//gZikXKOdoVRpoK8C+NpHazPd4+f17urGQ4H0LqGBCIujTvV1V0g==}
     dependencies:
-      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.3-27579668.27a0084
+      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.4-27588443.cf25525
       '@windicss/plugin-utils': 1.8.4
       consola: 2.15.3
       defu: 6.0.0
@@ -16403,7 +16405,7 @@ packages:
       inherits: 2.0.4
     dev: false
 
-  /rollup-plugin-dts/4.2.1_nmerszcjz2rfjina4mudxa4qka:
+  /rollup-plugin-dts/4.2.1_rollup@2.70.2+typescript@4.6.3:
     resolution: {integrity: sha512-eaxQZNUJ5iQcxNGlpJ1CUgG4OSVqWjDZ3nNSWBIoGrpcote2aNphSe1RJOaSYkb8dwn3o+rYm1vvld/5z3EGSQ==}
     engines: {node: '>=v12.22.11'}
     peerDependencies:
@@ -16417,7 +16419,7 @@ packages:
       '@babel/code-frame': 7.16.7
     dev: true
 
-  /rollup-plugin-ts/2.0.7_nmerszcjz2rfjina4mudxa4qka:
+  /rollup-plugin-ts/2.0.7_rollup@2.70.2+typescript@4.6.3:
     resolution: {integrity: sha512-M9sppRKX6y/b2KXbGdUdHid0tshAEK/sEeYLBHBJiBa4swukSsoFVXKGGZasLcjaXhgUnnizFuvFFj6znxwvSA==}
     engines: {node: '>=10.0.0', npm: '>=7.0.0', pnpm: '>=3.2.0', yarn: '>=1.13'}
     peerDependencies:
@@ -17420,8 +17422,8 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /strip-literal/0.3.0:
-    resolution: {integrity: sha512-J+lfm3Pw5nzURj2B8acyvUSBqs3JbjM8WAfrmeH3qcn32+ew6kFwbZFV9+X8k9UOIAkQw9WPSzFZy3083c7l5Q==}
+  /strip-literal/0.4.0:
+    resolution: {integrity: sha512-ql/sBDoJOybTKSIOWrrh8kgUEMjXMwRAkZTD0EwiwxQH/6tTPkZvMIEjp0CRlpi6V5FMiJyvxeRkEi1KrGISoA==}
     dependencies:
       acorn: 8.7.1
     dev: true
@@ -17455,7 +17457,7 @@ packages:
       postcss-selector-parser: 3.1.2
     dev: false
 
-  /stylelint-config-html/1.0.0_dkblcabdfo7hanxmbj6kpjf26q:
+  /stylelint-config-html/1.0.0_1a82b100232bbe7036ec0a7ca7a4baf4:
     resolution: {integrity: sha512-rKQUUWDpaYC7ybsS6tLxddjn6DxhjSIXybElSmcTyVQj3ExhmU3q+l41ktrlwHRyY0M5SkTkZiwngvYPYmsgSQ==}
     engines: {node: ^12 || >=14}
     peerDependencies:
@@ -17489,7 +17491,7 @@ packages:
       - postcss
     dev: true
 
-  /stylelint-config-recommended-vue/1.4.0_dkblcabdfo7hanxmbj6kpjf26q:
+  /stylelint-config-recommended-vue/1.4.0_1a82b100232bbe7036ec0a7ca7a4baf4:
     resolution: {integrity: sha512-DVJqyX2KvMCn9U0+keL12r7xlsH26K4Vg8NrIZuq5MoF7g82DpMp326Om4E0Q+Il1o+bTHuUyejf2XAI0iD04Q==}
     engines: {node: ^12 || >=14}
     peerDependencies:
@@ -17499,7 +17501,7 @@ packages:
       postcss-html: 1.4.1
       semver: 7.3.5
       stylelint: 14.7.1
-      stylelint-config-html: 1.0.0_dkblcabdfo7hanxmbj6kpjf26q
+      stylelint-config-html: 1.0.0_1a82b100232bbe7036ec0a7ca7a4baf4
       stylelint-config-recommended: 7.0.0_stylelint@14.7.1
     dev: true
 
@@ -18153,7 +18155,41 @@ packages:
   /ts-interface-checker/0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
-  /ts-jest/27.1.4_4x5qquxzignoqqsapgnc6txbpa:
+  /ts-jest/27.1.4_9985e1834e803358b7be1e6ce5ca0eea:
+    resolution: {integrity: sha512-qjkZlVPWVctAezwsOD1OPzbZ+k7zA5z3oxII4dGdZo5ggX/PL7kvwTM0pXTr10fAtbiVpJaL3bWd502zAhpgSQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    hasBin: true
+    peerDependencies:
+      '@babel/core': '>=7.0.0-beta.0 <8'
+      '@types/jest': ^27.0.0
+      babel-jest: '>=27.0.0 <28'
+      esbuild: '*'
+      jest: ^27.0.0
+      typescript: '>=3.8 <5.0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      '@types/jest':
+        optional: true
+      babel-jest:
+        optional: true
+      esbuild:
+        optional: true
+    dependencies:
+      '@types/jest': 27.4.1
+      bs-logger: 0.2.6
+      fast-json-stable-stringify: 2.1.0
+      jest: 27.5.1
+      jest-util: 27.5.1
+      json5: 2.2.1
+      lodash.memoize: 4.1.2
+      make-error: 1.3.6
+      semver: 7.3.7
+      typescript: 4.6.3
+      yargs-parser: 20.2.9
+    dev: true
+
+  /ts-jest/27.1.4_e5fb0852f9419ae84240799a2f4ee178:
     resolution: {integrity: sha512-qjkZlVPWVctAezwsOD1OPzbZ+k7zA5z3oxII4dGdZo5ggX/PL7kvwTM0pXTr10fAtbiVpJaL3bWd502zAhpgSQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     hasBin: true
@@ -18189,7 +18225,7 @@ packages:
       yargs-parser: 20.2.9
     dev: true
 
-  /ts-jest/27.1.4_53ggqi2i4rbcfjtktmjua6zili:
+  /ts-jest/27.1.4_eecc682348e44222a66a9b13407b285a:
     resolution: {integrity: sha512-qjkZlVPWVctAezwsOD1OPzbZ+k7zA5z3oxII4dGdZo5ggX/PL7kvwTM0pXTr10fAtbiVpJaL3bWd502zAhpgSQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     hasBin: true
@@ -18223,40 +18259,6 @@ packages:
       yargs-parser: 20.2.9
     dev: true
 
-  /ts-jest/27.1.4_tgc6da2oqazvrn56dzwolsqo5i:
-    resolution: {integrity: sha512-qjkZlVPWVctAezwsOD1OPzbZ+k7zA5z3oxII4dGdZo5ggX/PL7kvwTM0pXTr10fAtbiVpJaL3bWd502zAhpgSQ==}
-    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
-    hasBin: true
-    peerDependencies:
-      '@babel/core': '>=7.0.0-beta.0 <8'
-      '@types/jest': ^27.0.0
-      babel-jest: '>=27.0.0 <28'
-      esbuild: '*'
-      jest: ^27.0.0
-      typescript: '>=3.8 <5.0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      '@types/jest':
-        optional: true
-      babel-jest:
-        optional: true
-      esbuild:
-        optional: true
-    dependencies:
-      '@types/jest': 27.4.1
-      bs-logger: 0.2.6
-      fast-json-stable-stringify: 2.1.0
-      jest: 27.5.1
-      jest-util: 27.5.1
-      json5: 2.2.1
-      lodash.memoize: 4.1.2
-      make-error: 1.3.6
-      semver: 7.3.7
-      typescript: 4.6.3
-      yargs-parser: 20.2.9
-    dev: true
-
   /ts-loader/8.3.0_typescript@4.2.4:
     resolution: {integrity: sha512-MgGly4I6cStsJy27ViE32UoqxPTN9Xly4anxxVyaIWR+9BGxboV4EyJBGfR3RePV7Ksjj3rHmPZJeIt+7o4Vag==}
     engines: {node: '>=10.0.0'}
@@ -18276,7 +18278,7 @@ packages:
     resolution: {integrity: sha512-DEQrfv6l7IvN2jlzc/VTdZJYsWUnQNCsueYjMkC/iXoEoi5fNan6MjeDqkvhfzbmHgdz9UxDUluX3V5HdjTydQ==}
     dev: true
 
-  /ts-node/10.7.0_c6ucwwwirjo6ockovr3lj3o2cm:
+  /ts-node/10.7.0_17a82b5ac88a5de7094eac76b4edda13:
     resolution: {integrity: sha512-TbIGS4xgJoX2i3do417KSaep1uRAW/Lu+WAL2doDHC0D6ummjirVOXU5/7aiZotbQ5p1Zp9tP7U6cYhA0O7M8A==}
     hasBin: true
     peerDependencies:
@@ -18545,9 +18547,9 @@ packages:
   /unctx/1.1.4:
     resolution: {integrity: sha512-fQMML+GjUpIjQa0HBrrJezo2dFpTAbQbU0/KFKw4T5wpc9deGjLHSYthdfNAo2xSWM34csI6arzedezQkqtfGw==}
     dependencies:
-      acorn: 8.7.0
+      acorn: 8.7.1
       estree-walker: 2.0.2
-      magic-string: 0.26.1
+      magic-string: 0.26.2
       unplugin: 0.6.3
     transitivePeerDependencies:
       - esbuild
@@ -18593,8 +18595,8 @@ packages:
     engines: {node: '>= 0.4.12'}
     dev: true
 
-  /unimport/0.2.6:
-    resolution: {integrity: sha512-4cOokUIEvaXAfVCHH87vR+wdKI1KDzxQREW9oi0r6J68TPFEeGLHHc2pdyL0uNDUMd2aLxUikhWARNfoQKqC4Q==}
+  /unimport/0.2.9:
+    resolution: {integrity: sha512-5SLmZZL2rwaNOQa/yTGaG0QI0meRhb6MDdIlS9s1uHPSYO6Gfzr7ugl5Rf35/CJioW6wYiNJsN9dru5JMzaD8w==}
     dependencies:
       '@rollup/pluginutils': 4.2.1
       escape-string-regexp: 5.0.0
@@ -18604,8 +18606,8 @@ packages:
       mlly: 0.5.2
       pathe: 0.3.0
       scule: 0.2.1
-      strip-literal: 0.3.0
-      unplugin: 0.6.3
+      strip-literal: 0.4.0
+      unplugin: 0.7.0
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -18660,7 +18662,7 @@ packages:
     resolution: {integrity: sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=}
     engines: {node: '>= 0.8'}
 
-  /unplugin-vue2-script-setup/0.9.3_aptgit37ldnhfbzik6th2mucpa:
+  /unplugin-vue2-script-setup/0.9.3_03e6644f7f58da72872857a67d328278:
     resolution: {integrity: sha512-m2QESHiFNmx0fIo/P0AiCrH6E5WtijRB/Ldrj8zjwRIYYbiOgmTfRmWQquW0H8ei5OwhYT30WAgepFjWrJ5oJg==}
     peerDependencies:
       '@vue/composition-api': ^1.4.3
@@ -18738,6 +18740,29 @@ packages:
       webpack-virtual-modules: 0.4.3
     dev: true
 
+  /unplugin/0.7.0:
+    resolution: {integrity: sha512-OsiFrgybmqm5bGuaodvbLYhqUrvGuRHRMZDhddKEXTDbuQ1x+hR7M1WpQguXj03whVYjEYChhFo738cZH5RNig==}
+    peerDependencies:
+      esbuild: '>=0.13'
+      rollup: ^2.50.0
+      vite: ^2.3.0
+      webpack: 4 || 5
+    peerDependenciesMeta:
+      esbuild:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      webpack:
+        optional: true
+    dependencies:
+      acorn: 8.7.1
+      chokidar: 3.5.3
+      webpack-sources: 3.2.3
+      webpack-virtual-modules: 0.4.3
+    dev: true
+
   /unquote/1.1.1:
     resolution: {integrity: sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=}
 
@@ -18809,7 +18834,7 @@ packages:
       schema-utils: 3.1.1
     dev: true
 
-  /url-loader/4.1.1_lit45vopotvaqup7lrvlnvtxwy:
+  /url-loader/4.1.1_file-loader@6.2.0+webpack@4.46.0:
     resolution: {integrity: sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
@@ -19040,7 +19065,7 @@ packages:
       vue-template-es2015-compiler: 1.9.1
     dev: true
 
-  /vue-loader/15.9.8_kwp7zf75ihpalujgmpl7xferky:
+  /vue-loader/15.9.8_559ffc97fd41de05d12663d7fb949156:
     resolution: {integrity: sha512-GwSkxPrihfLR69/dSV3+5CdMQ0D+jXg8Ma1S4nQXKJAznYFX14vHdc/NetQc34Dw+rBbIJyP7JOuVb9Fhprvog==}
     peerDependencies:
       cache-loader: '*'

From ed6e1c0f940216c3bb81402fc32e82eb06443a9f Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 28 Jun 2022 15:19:45 +0530
Subject: [PATCH 49/50] chore: update package lock file

---
 pnpm-lock.yaml | 1057 +++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 821 insertions(+), 236 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ee2c54be9..3d7269935 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: 5.3
+lockfileVersion: 5.4
 
 importers:
 
@@ -36,8 +36,8 @@ importers:
       '@lezer/generator': 0.15.4
       mocha: 9.2.2
       rollup: 2.70.2
-      rollup-plugin-dts: 4.2.1_rollup@2.70.2+typescript@4.6.3
-      rollup-plugin-ts: 2.0.7_rollup@2.70.2+typescript@4.6.3
+      rollup-plugin-dts: 4.2.1_nmerszcjz2rfjina4mudxa4qka
+      rollup-plugin-ts: 2.0.7_nmerszcjz2rfjina4mudxa4qka
       typescript: 4.6.3
 
   packages/hoppscotch-app:
@@ -225,7 +225,7 @@ importers:
       '@hoppscotch/data': link:../hoppscotch-data
       '@hoppscotch/js-sandbox': link:../hoppscotch-js-sandbox
       '@nuxtjs/axios': 5.13.6
-      '@nuxtjs/composition-api': 0.32.0_fe703d04f3c8e62a38e622e54ccb997f
+      '@nuxtjs/composition-api': 0.32.0_7zyd2bhtzdtcuohgelsuzs4zp4
       '@nuxtjs/gtm': 2.4.0
       '@nuxtjs/i18n': 7.2.1
       '@nuxtjs/robots': 2.5.0
@@ -244,8 +244,8 @@ importers:
       fp-ts: 2.11.10
       fuse.js: 6.5.3
       graphql: 15.7.2
-      graphql-language-service-interface: 2.9.1_ac4ec5720f2d0ad4b770153d197a0e78
-      graphql-language-service-parser: 1.10.4_ac4ec5720f2d0ad4b770153d197a0e78
+      graphql-language-service-interface: 2.9.1_lkrcf5pybqujbtm7lu54f4mx6u
+      graphql-language-service-parser: 1.10.4_lkrcf5pybqujbtm7lu54f4mx6u
       graphql-tag: 2.12.6_graphql@15.7.2
       httpsnippet: 2.0.0
       insomnia-importers: 2.8.0_openapi-types@10.0.0
@@ -257,7 +257,7 @@ importers:
       lossless-json: 1.0.5
       mustache: 4.2.0
       node-interval-tree: 1.3.3
-      nuxt: 2.15.8_typescript@4.6.3
+      nuxt: 2.15.8_qdyzgkv5c47weutnc3t6yd5t2u
       openapi-types: 10.0.0
       paho-mqtt: 1.1.0
       postman-collection: 4.1.2
@@ -284,18 +284,18 @@ importers:
       '@babel/core': 7.17.9
       '@babel/preset-env': 7.16.11_@babel+core@7.17.9
       '@graphql-codegen/add': 3.1.1_graphql@15.7.2
-      '@graphql-codegen/cli': 2.6.2_ac4ec5720f2d0ad4b770153d197a0e78
+      '@graphql-codegen/cli': 2.6.2_lkrcf5pybqujbtm7lu54f4mx6u
       '@graphql-codegen/typed-document-node': 2.2.8_graphql@15.7.2
       '@graphql-codegen/typescript': 2.4.8_graphql@15.7.2
       '@graphql-codegen/typescript-operations': 2.3.5_graphql@15.7.2
-      '@graphql-codegen/typescript-urql-graphcache': 2.2.10_0078faba29fbf2fd40f25b4af19ce6b4
+      '@graphql-codegen/typescript-urql-graphcache': 2.2.10_ab4pvorj7pzp2qhslnfpdhhgwq
       '@graphql-codegen/urql-introspection': 2.1.1_graphql@15.7.2
       '@graphql-typed-document-node/core': 3.1.1_graphql@15.7.2
       '@nuxt/types': 2.15.8_sass@1.50.0
-      '@nuxt/typescript-build': 2.1.0_@nuxt+types@2.15.8+eslint@8.13.0
+      '@nuxt/typescript-build': 2.1.0_q3t6h55dq2sw47xlf74gyoa2ki
       '@nuxtjs/color-mode': 2.1.1
       '@nuxtjs/dotenv': 1.4.1
-      '@nuxtjs/eslint-config-typescript': 9.0.0_7e5e6237d96334972dc90355c15ec900
+      '@nuxtjs/eslint-config-typescript': 9.0.0_pzpgen6zmm2jolojank4cxwjaa
       '@nuxtjs/eslint-module': 3.1.0_eslint@8.13.0
       '@nuxtjs/google-analytics': 2.4.0
       '@nuxtjs/google-fonts': 1.3.0
@@ -321,7 +321,7 @@ importers:
       '@types/splitpanes': 2.2.1
       '@types/uuid': 8.3.4
       '@types/yargs-parser': 21.0.0
-      '@urql/devtools': 2.0.3_@urql+core@2.4.4+graphql@15.7.2
+      '@urql/devtools': 2.0.3_6mj4hf5jpwkkuqkncahvybm4zm
       '@vue/composition-api': 1.4.9
       '@vue/runtime-dom': 3.2.33
       '@vue/test-utils': 1.3.0
@@ -333,7 +333,7 @@ importers:
       eslint: 8.13.0
       eslint-config-prettier: 8.5.0_eslint@8.13.0
       eslint-plugin-nuxt: 3.2.0_eslint@8.13.0
-      eslint-plugin-prettier: 4.0.0_1815ac95b7fb26c13c7d48a8eef62d0f
+      eslint-plugin-prettier: 4.0.0_dak2zfnx7mtmcpd5jcuo55rnb4
       eslint-plugin-vue: 8.6.0_eslint@8.13.0
       jest: 27.5.1
       jest-serializer-vue: 2.0.2
@@ -346,10 +346,10 @@ importers:
       sass-loader: 10.2.0_sass@1.50.0
       stylelint: 14.7.1
       stylelint-config-prettier: 9.0.3_stylelint@14.7.1
-      stylelint-config-recommended-vue: 1.4.0_1a82b100232bbe7036ec0a7ca7a4baf4
+      stylelint-config-recommended-vue: 1.4.0_dkblcabdfo7hanxmbj6kpjf26q
       stylelint-config-standard: 25.0.0_stylelint@14.7.1
       stylelint-config-standard-scss: 3.0.0_stylelint@14.7.1
-      ts-jest: 27.1.4_e5fb0852f9419ae84240799a2f4ee178
+      ts-jest: 27.1.4_4x5qquxzignoqqsapgnc6txbpa
       typescript: 4.6.3
       vue-jest: 3.0.7_babel-core@7.0.0-bridge.0
       vue-template-babel-compiler: 1.1.3
@@ -401,7 +401,7 @@ importers:
       lodash: 4.17.21
       prettier: 2.6.2
       qs: 6.10.3
-      ts-jest: 27.1.4_eecc682348e44222a66a9b13407b285a
+      ts-jest: 27.1.4_53ggqi2i4rbcfjtktmjua6zili
       tsup: 5.12.7_typescript@4.6.4
       typescript: 4.6.4
 
@@ -458,15 +458,15 @@ importers:
       '@types/jest': 27.4.1
       '@types/lodash': 4.14.181
       '@types/node': 17.0.24
-      '@typescript-eslint/eslint-plugin': 5.19.0_f34adc8488d2e4f014fe61432d70cbf2
-      '@typescript-eslint/parser': 5.19.0_eslint@8.13.0+typescript@4.6.3
+      '@typescript-eslint/eslint-plugin': 5.19.0_6nfnzbei2lspafh6mfbs24gl6i
+      '@typescript-eslint/parser': 5.19.0_jzhokl4shvj5szf5bgr66kln2a
       eslint: 8.13.0
       eslint-config-prettier: 8.5.0_eslint@8.13.0
-      eslint-plugin-prettier: 4.0.0_1815ac95b7fb26c13c7d48a8eef62d0f
+      eslint-plugin-prettier: 4.0.0_dak2zfnx7mtmcpd5jcuo55rnb4
       io-ts: 2.2.16_fp-ts@2.11.10
       jest: 27.5.1
       prettier: 2.6.2
-      ts-jest: 27.1.4_9985e1834e803358b7be1e6ce5ca0eea
+      ts-jest: 27.1.4_tgc6da2oqazvrn56dzwolsqo5i
       typescript: 4.6.3
 
 packages:
@@ -921,18 +921,24 @@ packages:
     resolution: {integrity: sha512-RUVpT0G2h6rOZwqLDTrKk7ksNv7YpAilTnYe1/Q+eDjxEceRMKVWbCsX7t8h6C1qCFi/1Y8WZjcEPBAFG27GPw==}
     engines: {node: '>=6.0.0'}
     hasBin: true
+    dependencies:
+      '@babel/types': 7.17.0
     dev: true
 
   /@babel/parser/7.17.8:
     resolution: {integrity: sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==}
     engines: {node: '>=6.0.0'}
     hasBin: true
+    dependencies:
+      '@babel/types': 7.17.0
     dev: false
 
   /@babel/parser/7.17.9:
     resolution: {integrity: sha512-vqUSBLP8dQHFPdPi9bc5GK9vRkYHJ49fsZdtoJ8EQ8ibpwk5rPKfvNIwChB0KVXcIjcepEBBd2VHC5r9Gy8ueg==}
     engines: {node: '>=6.0.0'}
     hasBin: true
+    dependencies:
+      '@babel/types': 7.17.0
 
   /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/7.16.7_@babel+core@7.17.9:
     resolution: {integrity: sha512-anv/DObl7waiGEnC24O9zqL0pSuI9hljihqiDuFHC8d7/bjr/4RLGPWuc8rYOff/QPzbEPSkzG8wGG9aDuhHRg==}
@@ -2222,7 +2228,7 @@ packages:
       '@types/node': 17.0.24
       chalk: 4.1.2
       cosmiconfig: 7.0.1
-      cosmiconfig-typescript-loader: 1.0.9_17a82b5ac88a5de7094eac76b4edda13
+      cosmiconfig-typescript-loader: 1.0.9_c6ucwwwirjo6ockovr3lj3o2cm
       lodash: 4.17.21
       resolve-from: 5.0.0
       typescript: 4.6.3
@@ -2324,7 +2330,7 @@ packages:
       esbuild: 0.12.29
     dev: true
 
-  /@endemolshinegroup/cosmiconfig-typescript-loader/3.0.2_ec5c0ebd3030a0a5109338876648df1b:
+  /@endemolshinegroup/cosmiconfig-typescript-loader/3.0.2_5roa5pjqgcqkkeethcdwmsg7dm:
     resolution: {integrity: sha512-QRVtqJuS1mcT56oHpVegkKBlgtWjXw/gHNWO3eL9oyB5Sc7HBoc2OLG/nYpVfT/Jejvo3NUrD0Udk7XgoyDKkA==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
@@ -2360,7 +2366,7 @@ packages:
     engines: {node: '>=14.0.0', npm: '>=7.0.0'}
     dev: false
 
-  /@firebase/analytics-compat/0.1.9_4806ef38eb920aae9b1aba6665b35f7f:
+  /@firebase/analytics-compat/0.1.9_jado6ohlsifk5gy2xjtglm27p4:
     resolution: {integrity: sha512-HYKMAZvfU589WVvK5XKY9Pl+axXFISabouAFw2VHpJm/TO1mAXAy0+eIjqQ3j8z3L1OEfCeOV/oY9eh8rpJZ5w==}
     peerDependencies:
       '@firebase/app-compat': 0.x
@@ -2392,7 +2398,7 @@ packages:
       tslib: 2.3.1
     dev: false
 
-  /@firebase/app-check-compat/0.2.6_4806ef38eb920aae9b1aba6665b35f7f:
+  /@firebase/app-check-compat/0.2.6_jado6ohlsifk5gy2xjtglm27p4:
     resolution: {integrity: sha512-DBzLHg/uuoNhDdwPEj8zQcqPaZSBFn8I0hATKyoX6SiAQKCi+4ugqeyQ6qGCyDpfNOyxL4PPxPMisXRhPzV2jw==}
     peerDependencies:
       '@firebase/app-compat': 0.x
@@ -2451,14 +2457,14 @@ packages:
       tslib: 2.3.1
     dev: false
 
-  /@firebase/auth-compat/0.2.12_e38422e44459f38f69dbbd03a46a6a15:
+  /@firebase/auth-compat/0.2.12_4occfzcelhzy62o3xub2i2tkcu:
     resolution: {integrity: sha512-LKeKylktRj03xgW5ilSOW1c4AsMig15ogf5hDKa820t6Bp6MNabj8yq2TV0/Q4SP4Ox/yrTISJGVvk+TJuBecQ==}
     peerDependencies:
       '@firebase/app-compat': 0.x
     dependencies:
       '@firebase/app-compat': 0.1.22
       '@firebase/auth': 0.19.12_@firebase+app@0.7.21
-      '@firebase/auth-types': 0.11.0_a64185e619fe35b9275fc3c76f6268db
+      '@firebase/auth-types': 0.11.0_uzaylzqz7y23sj27ypdw6yti3m
       '@firebase/component': 0.5.13
       '@firebase/util': 1.5.2
       node-fetch: 2.6.7
@@ -2472,7 +2478,7 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@firebase/auth-interop-types/0.1.6_a64185e619fe35b9275fc3c76f6268db:
+  /@firebase/auth-interop-types/0.1.6_uzaylzqz7y23sj27ypdw6yti3m:
     resolution: {integrity: sha512-etIi92fW3CctsmR9e3sYM3Uqnoq861M0Id9mdOPF6PWIg38BXL5k4upCNBggGUpLIS0H1grMOvy/wn1xymwe2g==}
     peerDependencies:
       '@firebase/app-types': 0.x
@@ -2482,7 +2488,7 @@ packages:
       '@firebase/util': 1.5.2
     dev: false
 
-  /@firebase/auth-types/0.11.0_a64185e619fe35b9275fc3c76f6268db:
+  /@firebase/auth-types/0.11.0_uzaylzqz7y23sj27ypdw6yti3m:
     resolution: {integrity: sha512-q7Bt6cx+ySj9elQHTsKulwk3+qDezhzRBFC9zlQ1BjgMueUOnGMcvqmU0zuKlQ4RhLSH7MNAdBV2znVaoN3Vxw==}
     peerDependencies:
       '@firebase/app-types': 0.x
@@ -2517,7 +2523,7 @@ packages:
       tslib: 2.3.1
     dev: false
 
-  /@firebase/database-compat/0.1.8_5395f954a08b86dffb8e74f386d79234:
+  /@firebase/database-compat/0.1.8_kok7svfarodn764ootzynv4sgq:
     resolution: {integrity: sha512-dhXr5CSieBuKNdU96HgeewMQCT9EgOIkfF1GNy+iRrdl7BWLxmlKuvLfK319rmIytSs/vnCzcD9uqyxTeU/A3A==}
     peerDependencies:
       '@firebase/app-compat': 0.x
@@ -2543,7 +2549,7 @@ packages:
   /@firebase/database/0.12.8_@firebase+app-types@0.7.0:
     resolution: {integrity: sha512-JBQVfFLzfhxlQbl4OU6ov9fdsddkytBQdtSSR49cz48homj38ccltAhK6seum+BI7f28cV2LFHF9672lcN+qxA==}
     dependencies:
-      '@firebase/auth-interop-types': 0.1.6_a64185e619fe35b9275fc3c76f6268db
+      '@firebase/auth-interop-types': 0.1.6_uzaylzqz7y23sj27ypdw6yti3m
       '@firebase/component': 0.5.13
       '@firebase/logger': 0.3.2
       '@firebase/util': 1.5.2
@@ -2553,7 +2559,7 @@ packages:
       - '@firebase/app-types'
     dev: false
 
-  /@firebase/firestore-compat/0.1.17_e38422e44459f38f69dbbd03a46a6a15:
+  /@firebase/firestore-compat/0.1.17_4occfzcelhzy62o3xub2i2tkcu:
     resolution: {integrity: sha512-hTLgq2WXUE6bb3/IqYlwY0Q6FdbZB2JwDoZHexIQmK69XuuK3j+JbE/NixV3mBo232tNSU+QeamfbAd6A1Agfw==}
     peerDependencies:
       '@firebase/app-compat': 0.x
@@ -2561,7 +2567,7 @@ packages:
       '@firebase/app-compat': 0.1.22
       '@firebase/component': 0.5.13
       '@firebase/firestore': 3.4.8_@firebase+app@0.7.21
-      '@firebase/firestore-types': 2.5.0_a64185e619fe35b9275fc3c76f6268db
+      '@firebase/firestore-types': 2.5.0_uzaylzqz7y23sj27ypdw6yti3m
       '@firebase/util': 1.5.2
       tslib: 2.3.1
     transitivePeerDependencies:
@@ -2570,7 +2576,7 @@ packages:
       - encoding
     dev: false
 
-  /@firebase/firestore-types/2.5.0_a64185e619fe35b9275fc3c76f6268db:
+  /@firebase/firestore-types/2.5.0_uzaylzqz7y23sj27ypdw6yti3m:
     resolution: {integrity: sha512-I6c2m1zUhZ5SH0cWPmINabDyH5w0PPFHk2UHsjBpKdZllzJZ2TwTkXbDtpHUZNmnc/zAa0WNMNMvcvbb/xJLKA==}
     peerDependencies:
       '@firebase/app-types': 0.x
@@ -2599,14 +2605,14 @@ packages:
       - encoding
     dev: false
 
-  /@firebase/functions-compat/0.1.12_e38422e44459f38f69dbbd03a46a6a15:
+  /@firebase/functions-compat/0.1.12_4occfzcelhzy62o3xub2i2tkcu:
     resolution: {integrity: sha512-pKianAWF9vv3u9DazbRExYQFjEu/b9gxTWVCPjq+FiLK39xULT01dZz4Zrr2KzFnb54wHHbRmU1BAWNAkQTmmQ==}
     peerDependencies:
       '@firebase/app-compat': 0.x
     dependencies:
       '@firebase/app-compat': 0.1.22
       '@firebase/component': 0.5.13
-      '@firebase/functions': 0.7.11_0dd03ea9f716b9c2b35974db8236dad2
+      '@firebase/functions': 0.7.11_bxid5kpxc244fm2zotnyenw22i
       '@firebase/functions-types': 0.5.0
       '@firebase/util': 1.5.2
       tslib: 2.3.1
@@ -2620,14 +2626,14 @@ packages:
     resolution: {integrity: sha512-qza0M5EwX+Ocrl1cYI14zoipUX4gI/Shwqv0C1nB864INAD42Dgv4v94BCyxGHBg2kzlWy8PNafdP7zPO8aJQA==}
     dev: false
 
-  /@firebase/functions/0.7.11_0dd03ea9f716b9c2b35974db8236dad2:
+  /@firebase/functions/0.7.11_bxid5kpxc244fm2zotnyenw22i:
     resolution: {integrity: sha512-o9pmN1TWHDEpmB6IYbqeIIG6Wllcfw6jSNm8UZYnOYM8oDay1FW6OeN/fA0GlGmwF4cPdxA3oKXbLn3ObYFxXQ==}
     peerDependencies:
       '@firebase/app': 0.x
     dependencies:
       '@firebase/app': 0.7.21
       '@firebase/app-check-interop-types': 0.1.0
-      '@firebase/auth-interop-types': 0.1.6_a64185e619fe35b9275fc3c76f6268db
+      '@firebase/auth-interop-types': 0.1.6_uzaylzqz7y23sj27ypdw6yti3m
       '@firebase/component': 0.5.13
       '@firebase/messaging-interop-types': 0.1.0
       '@firebase/util': 1.5.2
@@ -2655,7 +2661,7 @@ packages:
       tslib: 2.3.1
     dev: false
 
-  /@firebase/messaging-compat/0.1.12_4806ef38eb920aae9b1aba6665b35f7f:
+  /@firebase/messaging-compat/0.1.12_jado6ohlsifk5gy2xjtglm27p4:
     resolution: {integrity: sha512-Cfv4ZQaxiMx4DcpDkFX1yKHFGQtnyMA6pcLplcC3uHkSVCyNRW6pFYSoO0/Uae03ixxIYNwle1ZVaVUZ2L5ddA==}
     peerDependencies:
       '@firebase/app-compat': 0.x
@@ -2686,7 +2692,7 @@ packages:
       tslib: 2.3.1
     dev: false
 
-  /@firebase/performance-compat/0.1.8_4806ef38eb920aae9b1aba6665b35f7f:
+  /@firebase/performance-compat/0.1.8_jado6ohlsifk5gy2xjtglm27p4:
     resolution: {integrity: sha512-lMLKFcOB99+tb6dVHJlJ8s19JFjxqpAqPGXCG8evTODPUW3BluBbfG4YS7JRESVA7wc/6kkuQIOx9q7l+bBZtQ==}
     peerDependencies:
       '@firebase/app-compat': 0.x
@@ -2727,7 +2733,7 @@ packages:
       whatwg-fetch: 2.0.4
     dev: false
 
-  /@firebase/remote-config-compat/0.1.8_4806ef38eb920aae9b1aba6665b35f7f:
+  /@firebase/remote-config-compat/0.1.8_jado6ohlsifk5gy2xjtglm27p4:
     resolution: {integrity: sha512-lU9t7PMVpgE6q1vG8AuFenFhfUnx0H+eeiIQTi4dtuLDMx9BsI14c9VuiVjRIi7xC2DCDRNQCRL1kRD8bzgJNg==}
     peerDependencies:
       '@firebase/app-compat': 0.x
@@ -2760,7 +2766,7 @@ packages:
       tslib: 2.3.1
     dev: false
 
-  /@firebase/storage-compat/0.1.13_e38422e44459f38f69dbbd03a46a6a15:
+  /@firebase/storage-compat/0.1.13_4occfzcelhzy62o3xub2i2tkcu:
     resolution: {integrity: sha512-MdubKh+xe3Xpi34WaXBKtim8H2aauO5sqqmATTc2WgSmSAqTmNSjQfNqIdf139Mp9ZCnpZAxiwiwzQtfckLYWg==}
     peerDependencies:
       '@firebase/app-compat': 0.x
@@ -2768,7 +2774,7 @@ packages:
       '@firebase/app-compat': 0.1.22
       '@firebase/component': 0.5.13
       '@firebase/storage': 0.9.5_@firebase+app@0.7.21
-      '@firebase/storage-types': 0.6.0_a64185e619fe35b9275fc3c76f6268db
+      '@firebase/storage-types': 0.6.0_uzaylzqz7y23sj27ypdw6yti3m
       '@firebase/util': 1.5.2
       tslib: 2.3.1
     transitivePeerDependencies:
@@ -2777,7 +2783,7 @@ packages:
       - encoding
     dev: false
 
-  /@firebase/storage-types/0.6.0_a64185e619fe35b9275fc3c76f6268db:
+  /@firebase/storage-types/0.6.0_uzaylzqz7y23sj27ypdw6yti3m:
     resolution: {integrity: sha512-1LpWhcCb1ftpkP/akhzjzeFxgVefs6eMD2QeKiJJUGH1qOiows2w5o0sKCUSQrvrRQS1lz3SFGvNR1Ck/gqxeA==}
     peerDependencies:
       '@firebase/app-types': 0.x
@@ -2825,7 +2831,7 @@ packages:
       tslib: 2.3.1
     dev: true
 
-  /@graphql-codegen/cli/2.6.2_ac4ec5720f2d0ad4b770153d197a0e78:
+  /@graphql-codegen/cli/2.6.2_lkrcf5pybqujbtm7lu54f4mx6u:
     resolution: {integrity: sha512-UO75msoVgvLEvfjCezM09cQQqp32+mR8Ma1ACsBpr7nroFvHbgcu2ulx1cMovg4sxDBCsvd9Eq/xOOMpARUxtw==}
     hasBin: true
     peerDependencies:
@@ -2840,8 +2846,8 @@ packages:
       '@graphql-tools/graphql-file-loader': 7.3.3_graphql@15.7.2
       '@graphql-tools/json-file-loader': 7.3.3_graphql@15.7.2
       '@graphql-tools/load': 7.5.1_graphql@15.7.2
-      '@graphql-tools/prisma-loader': 7.1.1_e66b2893df708e5e2662df4974b38286
-      '@graphql-tools/url-loader': 7.7.1_e66b2893df708e5e2662df4974b38286
+      '@graphql-tools/prisma-loader': 7.1.1_graphql@15.7.2
+      '@graphql-tools/url-loader': 7.7.1_graphql@15.7.2
       '@graphql-tools/utils': 8.6.1_graphql@15.7.2
       ansi-escapes: 4.3.2
       chalk: 4.1.2
@@ -2855,7 +2861,7 @@ packages:
       glob: 7.2.0
       globby: 11.1.0
       graphql: 15.7.2
-      graphql-config: 4.1.0_ac4ec5720f2d0ad4b770153d197a0e78
+      graphql-config: 4.1.0_lkrcf5pybqujbtm7lu54f4mx6u
       inquirer: 8.2.0
       is-glob: 4.0.3
       json-to-pretty-yaml: 1.2.2
@@ -2880,6 +2886,7 @@ packages:
       - typescript
       - utf-8-validate
       - zen-observable
+      - zenObservable
     dev: true
 
   /@graphql-codegen/core/2.5.1_graphql@15.7.2:
@@ -2979,7 +2986,7 @@ packages:
       - supports-color
     dev: true
 
-  /@graphql-codegen/typescript-urql-graphcache/2.2.10_0078faba29fbf2fd40f25b4af19ce6b4:
+  /@graphql-codegen/typescript-urql-graphcache/2.2.10_ab4pvorj7pzp2qhslnfpdhhgwq:
     resolution: {integrity: sha512-GRWisSY9zdf2tdT0jBYqapesw68B88ExpG9DkInyeQf62MfBDjxzncmiPbuHxRjd2QJBCo2WfycHTwgkMGT1JA==}
     peerDependencies:
       '@urql/exchange-graphcache': ^4.1.1
@@ -3236,12 +3243,12 @@ packages:
       tslib: 2.3.1
     dev: true
 
-  /@graphql-tools/prisma-loader/7.1.1_e66b2893df708e5e2662df4974b38286:
+  /@graphql-tools/prisma-loader/7.1.1_graphql@15.7.2:
     resolution: {integrity: sha512-9hVpG3BNsXAYMLPlZhSHubk6qBmiHLo/UlU0ldL100sMpqI46iBaHNhTNXZCSdd81hT+4HNqaDXNFqyKJ22OGQ==}
     peerDependencies:
       graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
     dependencies:
-      '@graphql-tools/url-loader': 7.7.1_e66b2893df708e5e2662df4974b38286
+      '@graphql-tools/url-loader': 7.7.1_graphql@15.7.2
       '@graphql-tools/utils': 8.6.1_graphql@15.7.2
       '@types/js-yaml': 4.0.5
       '@types/json-stable-stringify': 1.0.33
@@ -3295,7 +3302,7 @@ packages:
       tslib: 2.3.1
       value-or-promise: 1.0.11
 
-  /@graphql-tools/url-loader/7.7.0_e66b2893df708e5e2662df4974b38286:
+  /@graphql-tools/url-loader/7.7.0_graphql@15.7.2:
     resolution: {integrity: sha512-mBBb+aJqI4E0MVEzyfi76Pi/G6lGxGTVt/tP1YtKJly7UnonNoWOtDusdL3zIVAGhGgLsNrLbGhLDbwSd6TV6A==}
     peerDependencies:
       graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
@@ -3313,7 +3320,7 @@ packages:
       graphql-sse: 1.0.6_graphql@15.7.2
       graphql-ws: 5.5.5_graphql@15.7.2
       isomorphic-ws: 4.0.1_ws@8.5.0
-      meros: 1.1.4_@types+node@17.0.24
+      meros: 1.1.4
       subscriptions-transport-ws: 0.11.0_graphql@15.7.2
       sync-fetch: 0.3.1
       tslib: 2.3.1
@@ -3326,7 +3333,7 @@ packages:
       - encoding
       - utf-8-validate
 
-  /@graphql-tools/url-loader/7.7.1_e66b2893df708e5e2662df4974b38286:
+  /@graphql-tools/url-loader/7.7.1_graphql@15.7.2:
     resolution: {integrity: sha512-K/5amdeHtKYI976HVd/AXdSNvLL7vx5QVjMlwN0OHeYyxSgC+UOH+KkS7cshYgL13SekGu0Mxbg9ABfgQ34ECA==}
     peerDependencies:
       graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
@@ -3344,7 +3351,7 @@ packages:
       graphql-sse: 1.0.6_graphql@15.7.2
       graphql-ws: 5.5.5_graphql@15.7.2
       isomorphic-ws: 4.0.1_ws@8.5.0
-      meros: 1.1.4_@types+node@17.0.24
+      meros: 1.1.4
       subscriptions-transport-ws: 0.11.0_graphql@15.7.2
       sync-fetch: 0.3.1
       tslib: 2.3.1
@@ -3830,13 +3837,13 @@ packages:
       - supports-color
     dev: false
 
-  /@nuxt/builder/2.15.8_typescript@4.6.3:
+  /@nuxt/builder/2.15.8_qdyzgkv5c47weutnc3t6yd5t2u:
     resolution: {integrity: sha512-WVhN874LFMdgRiJqpxmeKI+vh5lhCUBVOyR9PhL1m1V/GV3fb+Dqc1BKS6XgayrWAWavPLveCJmQ/FID0puOfQ==}
     dependencies:
       '@nuxt/devalue': 1.2.5
       '@nuxt/utils': 2.15.8
       '@nuxt/vue-app': 2.15.8
-      '@nuxt/webpack': 2.15.8_typescript@4.6.3
+      '@nuxt/webpack': 2.15.8_qdyzgkv5c47weutnc3t6yd5t2u
       chalk: 4.1.2
       chokidar: 3.5.3
       consola: 2.15.3
@@ -3849,13 +3856,67 @@ packages:
       serialize-javascript: 5.0.1
       upath: 2.0.1
     transitivePeerDependencies:
+      - '@vue/compiler-sfc'
+      - arc-templates
+      - atpl
+      - babel-core
+      - bluebird
+      - bracket-template
       - bufferutil
+      - coffee-script
+      - dot
+      - dust
+      - dustjs-helpers
+      - dustjs-linkedin
+      - eco
+      - ect
+      - ejs
       - encoding
+      - haml-coffee
+      - hamlet
+      - hamljs
+      - handlebars
+      - hogan.js
+      - htmling
+      - jade
+      - jazz
+      - jqtpl
+      - just
+      - liquid-node
+      - liquor
+      - marko
+      - mote
+      - mustache
+      - nunjucks
+      - plates
+      - pug
+      - qejs
+      - ractive
+      - razor-tmpl
+      - react
+      - react-dom
+      - slm
+      - squirrelly
       - supports-color
+      - swig
+      - swig-templates
+      - teacup
+      - templayed
+      - then-jade
+      - then-pug
+      - tinyliquid
+      - toffee
+      - twig
+      - twing
       - typescript
+      - underscore
       - utf-8-validate
+      - vash
+      - velocityjs
+      - walrus
       - webpack-cli
       - webpack-command
+      - whiskers
     dev: false
 
   /@nuxt/cli/2.15.8:
@@ -3886,6 +3947,8 @@ packages:
       std-env: 2.3.1
       upath: 2.0.1
       wrap-ansi: 7.0.0
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   /@nuxt/components/2.2.1:
@@ -3928,6 +3991,8 @@ packages:
       hable: 3.0.0
       hash-sum: 2.0.0
       lodash: 4.17.21
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   /@nuxt/devalue/1.2.5:
@@ -3963,27 +4028,27 @@ packages:
       ufo: 0.7.11
     dev: false
 
-  /@nuxt/kit-edge/3.0.0-rc.4-27588443.cf25525:
-    resolution: {integrity: sha512-2J1ASNaG9oHOQFLgvgWPupow4eMkw2MmkRkhAPzql4N+akJ+i9Z2NAsrSbP3MWyq0hZYs+gnxf0tnlpJQKUc/A==}
+  /@nuxt/kit-edge/3.0.0-rc.4-27605536.8c2c80e:
+    resolution: {integrity: sha512-Fu9ygT3Gi5zbthzZC5PVzaDhVUxLunF1mgfF9b7RoHaO+UoQSWI7AptRwx2jxkUHpftLZjELtDV6MW96xZiWqg==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
     dependencies:
-      '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.4-27588443.cf25525
+      '@nuxt/schema': /@nuxt/schema-edge/3.0.0-rc.4-27605536.8c2c80e
       c12: 0.2.7
       consola: 2.15.3
       defu: 6.0.0
       globby: 13.1.2
       hash-sum: 2.0.0
       ignore: 5.2.0
-      jiti: 1.13.0
+      jiti: 1.14.0
       knitwork: 0.1.2
       lodash.template: 4.5.0
-      mlly: 0.5.2
+      mlly: 0.5.3
       pathe: 0.3.0
-      pkg-types: 0.3.2
+      pkg-types: 0.3.3
       scule: 0.2.1
       semver: 7.3.7
       unctx: 1.1.4
-      unimport: 0.2.9
+      unimport: 0.3.0
       untyped: 0.4.4
     transitivePeerDependencies:
       - esbuild
@@ -4001,6 +4066,8 @@ packages:
       get-port-please: 2.2.0
       node-res: 5.0.1
       serve-static: 1.14.1
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   /@nuxt/opencollective/0.3.2:
@@ -4015,20 +4082,20 @@ packages:
       - encoding
     dev: false
 
-  /@nuxt/schema-edge/3.0.0-rc.4-27588443.cf25525:
-    resolution: {integrity: sha512-Gx+C8NHP1t14qEvVgU7DJzcc2IaExwvq2N5a/vx0AV1lzUDxQ859A+cvvcDoqNuXCwMPnT0j/hTeYqDG2Ug/zw==}
+  /@nuxt/schema-edge/3.0.0-rc.4-27605536.8c2c80e:
+    resolution: {integrity: sha512-KOFpjN2efx9lXj84kSHhJV/XWJ8n0zztnJjjmEY3RhgBTd7mYtdI7BsYPtZ30Tz5vJGMlHrIGkLZW6c+IYAKzw==}
     engines: {node: ^14.16.0 || ^16.11.0 || ^17.0.0 || ^18.0.0}
     dependencies:
       c12: 0.2.7
       create-require: 1.1.1
       defu: 6.0.0
-      jiti: 1.13.0
+      jiti: 1.14.0
       pathe: 0.3.0
       postcss-import-resolver: 2.0.0
       scule: 0.2.1
       std-env: 3.1.1
       ufo: 0.8.4
-      unimport: 0.2.9
+      unimport: 0.3.0
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -4056,6 +4123,8 @@ packages:
       serve-static: 1.14.1
       server-destroy: 1.0.1
       ufo: 0.7.11
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   /@nuxt/telemetry/1.3.6:
@@ -4113,14 +4182,14 @@ packages:
       - webpack
     dev: true
 
-  /@nuxt/typescript-build/2.1.0_@nuxt+types@2.15.8+eslint@8.13.0:
+  /@nuxt/typescript-build/2.1.0_q3t6h55dq2sw47xlf74gyoa2ki:
     resolution: {integrity: sha512-7TLMpfzgOckf3cBkzoPFns6Xl8FzY6MoFfm/5HUE47QeTWAdOG9ZFxMrVhHWieZHYUuV+k6byRtaRv4S/3R8zA==}
     peerDependencies:
       '@nuxt/types': '>=2.13.1'
     dependencies:
       '@nuxt/types': 2.15.8_sass@1.50.0
       consola: 2.15.3
-      fork-ts-checker-webpack-plugin: 6.4.0_eslint@8.13.0+typescript@4.2.4
+      fork-ts-checker-webpack-plugin: 6.4.0_a7as76x6rrddngsh5pmyc4eygu
       ts-loader: 8.3.0_typescript@4.2.4
       typescript: 4.2.4
     transitivePeerDependencies:
@@ -4179,14 +4248,14 @@ packages:
       vue-server-renderer: 2.6.14
     dev: false
 
-  /@nuxt/webpack/2.15.8_typescript@4.6.3:
+  /@nuxt/webpack/2.15.8_qdyzgkv5c47weutnc3t6yd5t2u:
     resolution: {integrity: sha512-CzJYFed23Ow/UK0+cI1FVthDre1p2qc8Q97oizG39d3/SIh3aUHjgj8c60wcR+RSxVO0FzZMXkmq02NmA7vWJg==}
     dependencies:
       '@babel/core': 7.17.9
       '@nuxt/babel-preset-app': 2.15.8
       '@nuxt/friendly-errors-webpack-plugin': 2.5.2_webpack@4.46.0
       '@nuxt/utils': 2.15.8
-      babel-loader: 8.2.4_598a497cebab8e15ee8f9e5632178e63
+      babel-loader: 8.2.4_lgfes7hlvohbl3uptzldef4omm
       cache-loader: 4.1.0_webpack@4.46.0
       caniuse-lite: 1.0.30001274
       consola: 2.15.3
@@ -4217,8 +4286,8 @@ packages:
       thread-loader: 3.0.4_webpack@4.46.0
       time-fix-plugin: 2.0.7_webpack@4.46.0
       ufo: 0.7.11
-      url-loader: 4.1.1_file-loader@6.2.0+webpack@4.46.0
-      vue-loader: 15.9.8_559ffc97fd41de05d12663d7fb949156
+      url-loader: 4.1.1_lit45vopotvaqup7lrvlnvtxwy
+      vue-loader: 15.9.8_chbytaxv34oega4iwgz3symghu
       vue-style-loader: 4.1.3
       vue-template-compiler: 2.6.14
       webpack: 4.46.0
@@ -4228,12 +4297,66 @@ packages:
       webpack-node-externals: 3.0.0
       webpackbar: 4.0.0_webpack@4.46.0
     transitivePeerDependencies:
+      - '@vue/compiler-sfc'
+      - arc-templates
+      - atpl
+      - babel-core
+      - bluebird
+      - bracket-template
       - bufferutil
+      - coffee-script
+      - dot
+      - dust
+      - dustjs-helpers
+      - dustjs-linkedin
+      - eco
+      - ect
+      - ejs
+      - haml-coffee
+      - hamlet
+      - hamljs
+      - handlebars
+      - hogan.js
+      - htmling
+      - jade
+      - jazz
+      - jqtpl
+      - just
+      - liquid-node
+      - liquor
+      - marko
+      - mote
+      - mustache
+      - nunjucks
+      - plates
+      - pug
+      - qejs
+      - ractive
+      - razor-tmpl
+      - react
+      - react-dom
+      - slm
+      - squirrelly
       - supports-color
+      - swig
+      - swig-templates
+      - teacup
+      - templayed
+      - then-jade
+      - then-pug
+      - tinyliquid
+      - toffee
+      - twig
+      - twing
       - typescript
+      - underscore
       - utf-8-validate
+      - vash
+      - velocityjs
+      - walrus
       - webpack-cli
       - webpack-command
+      - whiskers
     dev: false
 
   /@nuxtjs/axios/5.13.6:
@@ -4255,7 +4378,7 @@ packages:
       lodash.template: 4.5.0
     dev: true
 
-  /@nuxtjs/composition-api/0.32.0_fe703d04f3c8e62a38e622e54ccb997f:
+  /@nuxtjs/composition-api/0.32.0_7zyd2bhtzdtcuohgelsuzs4zp4:
     resolution: {integrity: sha512-/LYf0N5x5j8i2/Uldfw+n4o3SVXyCIYQyOwSL+2JTllyyEkO3zHJc8YAbJhp22kHh6gPEhmgBA/whDUbERY7mg==}
     engines: {node: ^12.20.0 || >=14.13.0}
     peerDependencies:
@@ -4268,9 +4391,9 @@ packages:
       estree-walker: 2.0.2
       fs-extra: 9.1.0
       magic-string: 0.25.7
-      nuxt: 2.15.8_typescript@4.6.3
+      nuxt: 2.15.8_qdyzgkv5c47weutnc3t6yd5t2u
       ufo: 0.7.10
-      unplugin-vue2-script-setup: 0.9.3_03e6644f7f58da72872857a67d328278
+      unplugin-vue2-script-setup: 0.9.3_aptgit37ldnhfbzik6th2mucpa
       upath: 2.0.1
     transitivePeerDependencies:
       - '@vue/runtime-dom'
@@ -4289,38 +4412,42 @@ packages:
       dotenv: 8.6.0
     dev: true
 
-  /@nuxtjs/eslint-config-typescript/9.0.0_7e5e6237d96334972dc90355c15ec900:
+  /@nuxtjs/eslint-config-typescript/9.0.0_pzpgen6zmm2jolojank4cxwjaa:
     resolution: {integrity: sha512-IgilIOcwJZ3Af4P7r35vHBl2GS9SIG0TuOINyUiIfzZBmEpX5vYhAbxHeeJhNosIywexDvZZ5m8EQwuJJYUJBg==}
     peerDependencies:
       eslint: ^8.11.0
     dependencies:
-      '@nuxtjs/eslint-config': 9.0.0_dbaf2d6f9d05bf1a2912282ff775a7a6
-      '@typescript-eslint/eslint-plugin': 5.14.0_17f709d9d07d4657faee4b3f92b0870d
-      '@typescript-eslint/parser': 5.14.0_eslint@8.13.0+typescript@4.6.3
+      '@nuxtjs/eslint-config': 9.0.0_f6ea7pvgufuzcyunrbronkjsca
+      '@typescript-eslint/eslint-plugin': 5.14.0_c73qtwoqpvdfp6xojm7zfmehbu
+      '@typescript-eslint/parser': 5.14.0_jzhokl4shvj5szf5bgr66kln2a
       eslint: 8.13.0
       eslint-import-resolver-typescript: 2.5.0_eslint@8.13.0
     transitivePeerDependencies:
+      - eslint-import-resolver-webpack
       - eslint-plugin-import
       - jest
       - supports-color
       - typescript
     dev: true
 
-  /@nuxtjs/eslint-config/9.0.0_dbaf2d6f9d05bf1a2912282ff775a7a6:
+  /@nuxtjs/eslint-config/9.0.0_f6ea7pvgufuzcyunrbronkjsca:
     resolution: {integrity: sha512-S44hgSrAKEBJMmzg3Wes0uIZBASOgVAOnMYeNZNeeawRX1WpSS9w3WbqcIwjVL1Orx/XwrzMMH32A1ncEd/DQg==}
     peerDependencies:
       eslint: ^8.11.0
     dependencies:
       eslint: 8.13.0
-      eslint-config-standard: 16.0.3_e14cc71058e7578f3b574214d822a46a
-      eslint-plugin-import: 2.25.4_eslint@8.13.0
-      eslint-plugin-jest: 26.1.1_dbaf2d6f9d05bf1a2912282ff775a7a6
+      eslint-config-standard: 16.0.3_4fgmoecy45ly6o2xiiknqiveni
+      eslint-plugin-import: 2.25.4_rsv3h2cavg6ybgnhc22qfl7fnu
+      eslint-plugin-jest: 26.1.1_3oxs2345aw7rukisfax7o5nhuy
       eslint-plugin-node: 11.1.0_eslint@8.13.0
       eslint-plugin-promise: 6.0.0_eslint@8.13.0
       eslint-plugin-unicorn: 41.0.0_eslint@8.13.0
       eslint-plugin-vue: 8.6.0_eslint@8.13.0
     transitivePeerDependencies:
       - '@typescript-eslint/eslint-plugin'
+      - '@typescript-eslint/parser'
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
       - jest
       - supports-color
       - typescript
@@ -4398,6 +4525,8 @@ packages:
       lodash.template: 4.5.0
       serve-static: 1.14.1
       workbox-cdn: 5.1.4
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /@nuxtjs/robots/2.5.0:
@@ -4454,6 +4583,7 @@ packages:
       url-loader: 4.1.1_file-loader@6.2.0
       vue-svg-loader: 0.16.0
     transitivePeerDependencies:
+      - supports-color
       - vue-template-compiler
       - webpack
     dev: true
@@ -4573,8 +4703,10 @@ packages:
       zen-observable:
         optional: true
     dependencies:
-      any-observable: 0.3.0
+      any-observable: 0.3.0_rxjs@6.6.7
       rxjs: 6.6.7
+    transitivePeerDependencies:
+      - zenObservable
     dev: true
 
   /@sentry/browser/6.19.6:
@@ -5561,7 +5693,7 @@ packages:
       '@types/yargs-parser': 21.0.0
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.14.0_17f709d9d07d4657faee4b3f92b0870d:
+  /@typescript-eslint/eslint-plugin/5.14.0_c73qtwoqpvdfp6xojm7zfmehbu:
     resolution: {integrity: sha512-ir0wYI4FfFUDfLcuwKzIH7sMVA+db7WYen47iRSaCGl+HMAZI9fpBwfDo45ZALD3A45ZGyHWDNLhbg8tZrMX4w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5572,10 +5704,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.14.0_eslint@8.13.0+typescript@4.6.3
+      '@typescript-eslint/parser': 5.14.0_jzhokl4shvj5szf5bgr66kln2a
       '@typescript-eslint/scope-manager': 5.14.0
-      '@typescript-eslint/type-utils': 5.14.0_eslint@8.13.0+typescript@4.6.3
-      '@typescript-eslint/utils': 5.14.0_eslint@8.13.0+typescript@4.6.3
+      '@typescript-eslint/type-utils': 5.14.0_jzhokl4shvj5szf5bgr66kln2a
+      '@typescript-eslint/utils': 5.14.0_jzhokl4shvj5szf5bgr66kln2a
       debug: 4.3.4
       eslint: 8.13.0
       functional-red-black-tree: 1.0.1
@@ -5588,7 +5720,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/eslint-plugin/5.19.0_f34adc8488d2e4f014fe61432d70cbf2:
+  /@typescript-eslint/eslint-plugin/5.19.0_6nfnzbei2lspafh6mfbs24gl6i:
     resolution: {integrity: sha512-w59GpFqDYGnWFim9p6TGJz7a3qWeENJuAKCqjGSx+Hq/bwq3RZwXYqy98KIfN85yDqz9mq6QXiY5h0FjGQLyEg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5599,10 +5731,10 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/parser': 5.19.0_eslint@8.13.0+typescript@4.6.3
+      '@typescript-eslint/parser': 5.19.0_jzhokl4shvj5szf5bgr66kln2a
       '@typescript-eslint/scope-manager': 5.19.0
-      '@typescript-eslint/type-utils': 5.19.0_eslint@8.13.0+typescript@4.6.3
-      '@typescript-eslint/utils': 5.19.0_eslint@8.13.0+typescript@4.6.3
+      '@typescript-eslint/type-utils': 5.19.0_jzhokl4shvj5szf5bgr66kln2a
+      '@typescript-eslint/utils': 5.19.0_jzhokl4shvj5szf5bgr66kln2a
       debug: 4.3.4
       eslint: 8.13.0
       functional-red-black-tree: 1.0.1
@@ -5615,7 +5747,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.14.0_eslint@8.13.0+typescript@4.6.3:
+  /@typescript-eslint/parser/5.14.0_jzhokl4shvj5szf5bgr66kln2a:
     resolution: {integrity: sha512-aHJN8/FuIy1Zvqk4U/gcO/fxeMKyoSv/rS46UXMXOJKVsLQ+iYPuXNbpbH7cBLcpSbmyyFbwrniLx5+kutu1pw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5635,7 +5767,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser/5.19.0_eslint@8.13.0+typescript@4.6.3:
+  /@typescript-eslint/parser/5.19.0_jzhokl4shvj5szf5bgr66kln2a:
     resolution: {integrity: sha512-yhktJjMCJX8BSBczh1F/uY8wGRYrBeyn84kH6oyqdIJwTGKmzX5Qiq49LRQ0Jh0LXnWijEziSo6BRqny8nqLVQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5671,7 +5803,7 @@ packages:
       '@typescript-eslint/visitor-keys': 5.19.0
     dev: true
 
-  /@typescript-eslint/type-utils/5.14.0_eslint@8.13.0+typescript@4.6.3:
+  /@typescript-eslint/type-utils/5.14.0_jzhokl4shvj5szf5bgr66kln2a:
     resolution: {integrity: sha512-d4PTJxsqaUpv8iERTDSQBKUCV7Q5yyXjqXUl3XF7Sd9ogNLuKLkxz82qxokqQ4jXdTPZudWpmNtr/JjbbvUixw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5681,7 +5813,7 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/utils': 5.14.0_eslint@8.13.0+typescript@4.6.3
+      '@typescript-eslint/utils': 5.14.0_jzhokl4shvj5szf5bgr66kln2a
       debug: 4.3.4
       eslint: 8.13.0
       tsutils: 3.21.0_typescript@4.6.3
@@ -5690,7 +5822,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/type-utils/5.19.0_eslint@8.13.0+typescript@4.6.3:
+  /@typescript-eslint/type-utils/5.19.0_jzhokl4shvj5szf5bgr66kln2a:
     resolution: {integrity: sha512-O6XQ4RI4rQcBGshTQAYBUIGsKqrKeuIOz9v8bckXZnSeXjn/1+BDZndHLe10UplQeJLXDNbaZYrAytKNQO2T4Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5700,7 +5832,7 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@typescript-eslint/utils': 5.19.0_eslint@8.13.0+typescript@4.6.3
+      '@typescript-eslint/utils': 5.19.0_jzhokl4shvj5szf5bgr66kln2a
       debug: 4.3.4
       eslint: 8.13.0
       tsutils: 3.21.0_typescript@4.6.3
@@ -5761,7 +5893,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils/5.14.0_eslint@8.13.0+typescript@4.6.3:
+  /@typescript-eslint/utils/5.14.0_jzhokl4shvj5szf5bgr66kln2a:
     resolution: {integrity: sha512-EHwlII5mvUA0UsKYnVzySb/5EE/t03duUTweVy8Zqt3UQXBrpEVY144OTceFKaOe4xQXZJrkptCf7PjEBeGK4w==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5779,7 +5911,7 @@ packages:
       - typescript
     dev: true
 
-  /@typescript-eslint/utils/5.19.0_eslint@8.13.0+typescript@4.6.3:
+  /@typescript-eslint/utils/5.19.0_jzhokl4shvj5szf5bgr66kln2a:
     resolution: {integrity: sha512-ZuEckdupXpXamKvFz/Ql8YnePh2ZWcwz7APICzJL985Rp5C2AYcHO62oJzIqNhAMtMK6XvrlBTZeNG8n7gS3lQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -5825,9 +5957,8 @@ packages:
       '@graphql-typed-document-node/core': 3.1.1_graphql@15.7.2
       graphql: 15.7.2
       wonka: 4.0.15
-    dev: false
 
-  /@urql/devtools/2.0.3_@urql+core@2.4.4+graphql@15.7.2:
+  /@urql/devtools/2.0.3_6mj4hf5jpwkkuqkncahvybm4zm:
     resolution: {integrity: sha512-TktPLiBS9LcBPHD6qcnb8wqOVcg3Bx0iCtvQ80uPpfofwwBGJmqnQTjUdEFU6kwaLOFZULQ9+Uo4831G823mQw==}
     peerDependencies:
       '@urql/core': '>= 1.14.0'
@@ -5856,7 +5987,6 @@ packages:
       '@urql/core': 2.4.4_graphql@15.7.2
       graphql: 15.7.2
       wonka: 4.0.15
-    dev: false
 
   /@urql/introspection/0.3.1_graphql@15.7.2:
     resolution: {integrity: sha512-4Srr45lA00cVlfRGtGJqYlc2vcPN6BZwFW9EVY20yROaoADCGNxm6xmScZhxuCRQPhOB9DXtuYs2KNrOo84ZeA==}
@@ -5977,10 +6107,10 @@ packages:
       '@vue/shared': 3.2.31
     dev: false
 
-  /@vue/component-compiler-utils/3.3.0:
+  /@vue/component-compiler-utils/3.3.0_b67hmr5jvoy2lxcibwtcqokjgi:
     resolution: {integrity: sha512-97sfH2mYNU+2PzGrmK2haqffDpVASuib9/w2/noxiFi31Z54hW+q3izKQXXQZSNhtiUpAI36uSuYepeBe4wpHQ==}
     dependencies:
-      consolidate: 0.15.1
+      consolidate: 0.15.1_b67hmr5jvoy2lxcibwtcqokjgi
       hash-sum: 1.0.2
       lru-cache: 4.1.5
       merge-source-map: 1.1.0
@@ -5990,6 +6120,60 @@ packages:
       vue-template-es2015-compiler: 1.9.1
     optionalDependencies:
       prettier: 2.6.2
+    transitivePeerDependencies:
+      - arc-templates
+      - atpl
+      - babel-core
+      - bracket-template
+      - coffee-script
+      - dot
+      - dust
+      - dustjs-helpers
+      - dustjs-linkedin
+      - eco
+      - ect
+      - ejs
+      - haml-coffee
+      - hamlet
+      - hamljs
+      - handlebars
+      - hogan.js
+      - htmling
+      - jade
+      - jazz
+      - jqtpl
+      - just
+      - liquid-node
+      - liquor
+      - lodash
+      - marko
+      - mote
+      - mustache
+      - nunjucks
+      - plates
+      - pug
+      - qejs
+      - ractive
+      - razor-tmpl
+      - react
+      - react-dom
+      - slm
+      - squirrelly
+      - swig
+      - swig-templates
+      - teacup
+      - templayed
+      - then-jade
+      - then-pug
+      - tinyliquid
+      - toffee
+      - twig
+      - twing
+      - underscore
+      - vash
+      - velocityjs
+      - walrus
+      - whiskers
     dev: false
 
   /@vue/composition-api/1.4.9:
@@ -6011,14 +6195,12 @@ packages:
     resolution: {integrity: sha512-62Sq0mp9/0bLmDuxuLD5CIaMG2susFAGARLuZ/5jkU1FCf9EDbwUuF+BO8Ub3Rbodx0ziIecM/NsmyjardBxfQ==}
     dependencies:
       '@vue/shared': 3.2.33
-    dev: true
 
   /@vue/runtime-core/3.2.33:
     resolution: {integrity: sha512-N2D2vfaXsBPhzCV3JsXQa2NECjxP3eXgZlFqKh4tgakp3iX6LCGv76DLlc+IfFZq+TW10Y8QUfeihXOupJ1dGw==}
     dependencies:
       '@vue/reactivity': 3.2.33
       '@vue/shared': 3.2.33
-    dev: true
 
   /@vue/runtime-dom/3.2.33:
     resolution: {integrity: sha512-LSrJ6W7CZTSUygX5s8aFkraDWlO6K4geOwA3quFF2O+hC3QuAMZt/0Xb7JKE3C4JD4pFwCSO7oCrZmZ0BIJUnw==}
@@ -6026,7 +6208,6 @@ packages:
       '@vue/runtime-core': 3.2.33
       '@vue/shared': 3.2.33
       csstype: 2.6.20
-    dev: true
 
   /@vue/shared/3.2.31:
     resolution: {integrity: sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==}
@@ -6034,7 +6215,6 @@ packages:
 
   /@vue/shared/3.2.33:
     resolution: {integrity: sha512-UBc1Pg1T3yZ97vsA2ueER0F6GbJebLHYlEi4ou1H5YL4KWvMOOWwpYo9/QpWq93wxKG6Wo13IY74Hcn/f7c7Bg==}
-    dev: true
 
   /@vue/test-utils/1.3.0:
     resolution: {integrity: sha512-Xk2Xiyj2k5dFb8eYUKkcN9PzqZSppTlx7LaQWBbdA8tqh3jHr/KHX2/YLhNFc/xwDrgeLybqd+4ZCPJSGPIqeA==}
@@ -6334,7 +6514,6 @@ packages:
     resolution: {integrity: sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /after/0.8.2:
     resolution: {integrity: sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=}
@@ -6464,9 +6643,19 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
-  /any-observable/0.3.0:
+  /any-observable/0.3.0_rxjs@6.6.7:
     resolution: {integrity: sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==}
     engines: {node: '>=6'}
+    peerDependencies:
+      rxjs: '*'
+      zenObservable: '*'
+    peerDependenciesMeta:
+      rxjs:
+        optional: true
+      zenObservable:
+        optional: true
+    dependencies:
+      rxjs: 6.6.7
     dev: true
 
   /any-promise/1.3.0:
@@ -6477,6 +6666,8 @@ packages:
     dependencies:
       micromatch: 3.1.10
       normalize-path: 2.1.1
+    transitivePeerDependencies:
+      - supports-color
     dev: false
     optional: true
 
@@ -6700,7 +6891,6 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.17.9
-    dev: true
 
   /babel-jest/27.5.1_@babel+core@7.17.9:
     resolution: {integrity: sha512-cdQ5dXjGRd0IBRATiQ4mZGlGlRE8kJpjPOixdNRdT+m3UcNqmYWN6rK6nvtXYfY3D76cb8s/O1Ss8ea24PIwcg==}
@@ -6721,21 +6911,6 @@ packages:
       - supports-color
     dev: true
 
-  /babel-loader/8.2.4_598a497cebab8e15ee8f9e5632178e63:
-    resolution: {integrity: sha512-8dytA3gcvPPPv4Grjhnt8b5IIiTcq/zeXOPk4iTYI0SVXcsmuGg7JtBRDp8S9X+gJfhQ8ektjXZlDu1Bb33U8A==}
-    engines: {node: '>= 8.9'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-      webpack: '>=2'
-    dependencies:
-      '@babel/core': 7.17.9
-      find-cache-dir: 3.3.2
-      loader-utils: 2.0.2
-      make-dir: 3.1.0
-      schema-utils: 2.7.1
-      webpack: 4.46.0
-    dev: false
-
   /babel-loader/8.2.4_@babel+core@7.17.9:
     resolution: {integrity: sha512-8dytA3gcvPPPv4Grjhnt8b5IIiTcq/zeXOPk4iTYI0SVXcsmuGg7JtBRDp8S9X+gJfhQ8ektjXZlDu1Bb33U8A==}
     engines: {node: '>= 8.9'}
@@ -6750,6 +6925,21 @@ packages:
       schema-utils: 2.7.1
     dev: true
 
+  /babel-loader/8.2.4_lgfes7hlvohbl3uptzldef4omm:
+    resolution: {integrity: sha512-8dytA3gcvPPPv4Grjhnt8b5IIiTcq/zeXOPk4iTYI0SVXcsmuGg7JtBRDp8S9X+gJfhQ8ektjXZlDu1Bb33U8A==}
+    engines: {node: '>= 8.9'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+      webpack: '>=2'
+    dependencies:
+      '@babel/core': 7.17.9
+      find-cache-dir: 3.3.2
+      loader-utils: 2.0.2
+      make-dir: 3.1.0
+      schema-utils: 2.7.1
+      webpack: 4.46.0
+    dev: false
+
   /babel-messages/6.23.0:
     resolution: {integrity: sha1-8830cDhYA1sqKVHG7F7fbGLyYw4=}
     dependencies:
@@ -6864,6 +7054,8 @@ packages:
       babel-runtime: 6.26.0
       babel-template: 6.26.0
       babel-types: 6.26.0
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /babel-plugin-transform-strict-mode/6.24.1:
@@ -6956,6 +7148,8 @@ packages:
       babel-types: 6.26.0
       babylon: 6.18.0
       lodash: 4.17.21
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /babel-traverse/6.26.0:
@@ -6970,6 +7164,8 @@ packages:
       globals: 9.18.0
       invariant: 2.2.4
       lodash: 4.17.21
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /babel-types/6.26.0:
@@ -7094,6 +7290,8 @@ packages:
       snapdragon-node: 2.1.1
       split-string: 3.1.0
       to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
 
   /braces/3.0.2:
     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
@@ -7304,8 +7502,8 @@ packages:
       defu: 6.0.0
       dotenv: 16.0.0
       gittar: 0.1.1
-      jiti: 1.13.0
-      mlly: 0.5.2
+      jiti: 1.14.0
+      mlly: 0.5.3
       pathe: 0.2.0
       rc9: 1.2.2
     dev: true
@@ -7327,7 +7525,7 @@ packages:
       mississippi: 3.0.0
       mkdirp: 0.5.6
       move-concurrently: 1.0.1
-      promise-inflight: 1.0.1
+      promise-inflight: 1.0.1_bluebird@3.7.2
       rimraf: 2.7.1
       ssri: 6.0.2
       unique-filename: 1.1.1
@@ -7356,6 +7554,8 @@ packages:
       ssri: 8.0.1
       tar: 6.1.11
       unique-filename: 1.1.1
+    transitivePeerDependencies:
+      - bluebird
     dev: false
 
   /cache-base/1.0.1:
@@ -7632,6 +7832,8 @@ packages:
       upath: 1.2.0
     optionalDependencies:
       fsevents: 1.2.13
+    transitivePeerDependencies:
+      - supports-color
     dev: false
     optional: true
 
@@ -7962,6 +8164,8 @@ packages:
       on-headers: 1.0.2
       safe-buffer: 5.1.2
       vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   /concat-map/0.0.1:
@@ -8001,6 +8205,8 @@ packages:
       finalhandler: 1.1.2
       parseurl: 1.3.3
       utils-merge: 1.0.1
+    transitivePeerDependencies:
+      - supports-color
 
   /consola/2.15.3:
     resolution: {integrity: sha512-9vAdYbHj6x2fLKC4+oPH0kFzY/orMZyG2Aj+kNylHxKGJ/Ed4dpNyAQYwJOdqO4zdM7XpVHmyejQDcQHrnuXbw==}
@@ -8013,11 +8219,175 @@ packages:
     resolution: {integrity: sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=}
     dev: false
 
-  /consolidate/0.15.1:
+  /consolidate/0.15.1_b67hmr5jvoy2lxcibwtcqokjgi:
     resolution: {integrity: sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==}
     engines: {node: '>= 0.10.0'}
+    peerDependencies:
+      arc-templates: ^0.5.3
+      atpl: '>=0.7.6'
+      babel-core: ^6.26.3
+      bracket-template: ^1.1.5
+      coffee-script: ^1.12.7
+      dot: ^1.1.3
+      dust: ^0.3.0
+      dustjs-helpers: ^1.7.4
+      dustjs-linkedin: ^2.7.5
+      eco: ^1.1.0-rc-3
+      ect: ^0.5.9
+      ejs: ^3.1.5
+      haml-coffee: ^1.14.1
+      hamlet: ^0.3.3
+      hamljs: ^0.6.2
+      handlebars: ^4.7.6
+      hogan.js: ^3.0.2
+      htmling: ^0.0.8
+      jade: ^1.11.0
+      jazz: ^0.0.18
+      jqtpl: ~1.1.0
+      just: ^0.1.8
+      liquid-node: ^3.0.1
+      liquor: ^0.0.5
+      lodash: ^4.17.20
+      marko: ^3.14.4
+      mote: ^0.2.0
+      mustache: ^4.0.1
+      nunjucks: ^3.2.2
+      plates: ~0.4.11
+      pug: ^3.0.0
+      qejs: ^3.0.5
+      ractive: ^1.3.12
+      razor-tmpl: ^1.3.1
+      react: ^16.13.1
+      react-dom: ^16.13.1
+      slm: ^2.0.0
+      squirrelly: ^5.1.0
+      swig: ^1.4.2
+      swig-templates: ^2.0.3
+      teacup: ^2.0.0
+      templayed: '>=0.2.3'
+      then-jade: '*'
+      then-pug: '*'
+      tinyliquid: ^0.2.34
+      toffee: ^0.3.6
+      twig: ^1.15.2
+      twing: ^5.0.2
+      underscore: ^1.11.0
+      vash: ^0.13.0
+      velocityjs: ^2.0.1
+      walrus: ^0.10.1
+      whiskers: ^0.4.0
+    peerDependenciesMeta:
+      arc-templates:
+        optional: true
+      atpl:
+        optional: true
+      babel-core:
+        optional: true
+      bracket-template:
+        optional: true
+      coffee-script:
+        optional: true
+      dot:
+        optional: true
+      dust:
+        optional: true
+      dustjs-helpers:
+        optional: true
+      dustjs-linkedin:
+        optional: true
+      eco:
+        optional: true
+      ect:
+        optional: true
+      ejs:
+        optional: true
+      haml-coffee:
+        optional: true
+      hamlet:
+        optional: true
+      hamljs:
+        optional: true
+      handlebars:
+        optional: true
+      hogan.js:
+        optional: true
+      htmling:
+        optional: true
+      jade:
+        optional: true
+      jazz:
+        optional: true
+      jqtpl:
+        optional: true
+      just:
+        optional: true
+      liquid-node:
+        optional: true
+      liquor:
+        optional: true
+      lodash:
+        optional: true
+      marko:
+        optional: true
+      mote:
+        optional: true
+      mustache:
+        optional: true
+      nunjucks:
+        optional: true
+      plates:
+        optional: true
+      pug:
+        optional: true
+      qejs:
+        optional: true
+      ractive:
+        optional: true
+      razor-tmpl:
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+      slm:
+        optional: true
+      squirrelly:
+        optional: true
+      swig:
+        optional: true
+      swig-templates:
+        optional: true
+      teacup:
+        optional: true
+      templayed:
+        optional: true
+      then-jade:
+        optional: true
+      then-pug:
+        optional: true
+      tinyliquid:
+        optional: true
+      toffee:
+        optional: true
+      twig:
+        optional: true
+      twing:
+        optional: true
+      underscore:
+        optional: true
+      vash:
+        optional: true
+      velocityjs:
+        optional: true
+      walrus:
+        optional: true
+      whiskers:
+        optional: true
     dependencies:
+      babel-core: 7.0.0-bridge.0_@babel+core@7.17.9
       bluebird: 3.7.2
+      lodash: 4.17.21
+      mustache: 4.2.0
     dev: false
 
   /constant-case/3.0.4:
@@ -8131,7 +8501,7 @@ packages:
     dependencies:
       '@iarna/toml': 2.2.5
 
-  /cosmiconfig-typescript-loader/1.0.9_17a82b5ac88a5de7094eac76b4edda13:
+  /cosmiconfig-typescript-loader/1.0.9_c6ucwwwirjo6ockovr3lj3o2cm:
     resolution: {integrity: sha512-tRuMRhxN4m1Y8hP9SNYfz7jRwt8lZdWxdjg/ohg5esKmsndJIn4yT96oJVcf5x0eA11taXl+sIp+ielu529k6g==}
     engines: {node: '>=12', npm: '>=6'}
     peerDependencies:
@@ -8140,7 +8510,7 @@ packages:
     dependencies:
       '@types/node': 17.0.24
       cosmiconfig: 7.0.1
-      ts-node: 10.7.0_17a82b5ac88a5de7094eac76b4edda13
+      ts-node: 10.7.0_c6ucwwwirjo6ockovr3lj3o2cm
       typescript: 4.6.3
     transitivePeerDependencies:
       - '@swc/core'
@@ -8542,7 +8912,6 @@ packages:
 
   /csstype/2.6.20:
     resolution: {integrity: sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==}
-    dev: true
 
   /cuint/0.2.2:
     resolution: {integrity: sha1-QICG1AlVDCYxFVYZ6fp7ytw7mRs=}
@@ -8592,17 +8961,32 @@ packages:
 
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
     dependencies:
       ms: 2.0.0
 
   /debug/3.1.0:
     resolution: {integrity: sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
     dependencies:
       ms: 2.0.0
     dev: false
 
   /debug/3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
     dependencies:
       ms: 2.1.3
     dev: true
@@ -9122,6 +9506,7 @@ packages:
       yeast: 0.1.2
     transitivePeerDependencies:
       - bufferutil
+      - supports-color
       - utf-8-validate
     dev: false
 
@@ -9507,7 +9892,7 @@ packages:
       eslint: 8.13.0
     dev: true
 
-  /eslint-config-standard/16.0.3_e14cc71058e7578f3b574214d822a46a:
+  /eslint-config-standard/16.0.3_4fgmoecy45ly6o2xiiknqiveni:
     resolution: {integrity: sha512-x4fmJL5hGqNJKGHSjnLdgA6U6h1YW/G2dW9fA+cyVur4SK6lyue8+UgNKWlZtUDTXvgKDD/Oa3GQjmB5kjtVvg==}
     peerDependencies:
       eslint: ^7.12.1
@@ -9516,7 +9901,7 @@ packages:
       eslint-plugin-promise: ^4.2.1 || ^5.0.0
     dependencies:
       eslint: 8.13.0
-      eslint-plugin-import: 2.25.4_eslint@8.13.0
+      eslint-plugin-import: 2.25.4_rsv3h2cavg6ybgnhc22qfl7fnu
       eslint-plugin-node: 11.1.0_eslint@8.13.0
       eslint-plugin-promise: 6.0.0_eslint@8.13.0
     dev: true
@@ -9526,6 +9911,8 @@ packages:
     dependencies:
       debug: 3.2.7
       resolve: 1.22.0
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /eslint-import-resolver-typescript/2.5.0_eslint@8.13.0:
@@ -9545,12 +9932,31 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-module-utils/2.7.3:
+  /eslint-module-utils/2.7.3_l62aq42yiamaj3cnpuf6avthf4:
     resolution: {integrity: sha512-088JEC7O3lDZM9xGe0RerkOMd0EjFl+Yvd1jPWIkMT5u3H9+HC34mWWPnqPrN13gieT9pBOO+Qt07Nb/6TresQ==}
     engines: {node: '>=4'}
+    peerDependencies:
+      '@typescript-eslint/parser': '*'
+      eslint-import-resolver-node: '*'
+      eslint-import-resolver-typescript: '*'
+      eslint-import-resolver-webpack: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+      eslint-import-resolver-typescript:
+        optional: true
+      eslint-import-resolver-webpack:
+        optional: true
     dependencies:
+      '@typescript-eslint/parser': 5.14.0_jzhokl4shvj5szf5bgr66kln2a
       debug: 3.2.7
+      eslint-import-resolver-node: 0.3.6
+      eslint-import-resolver-typescript: 2.5.0_eslint@8.13.0
       find-up: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /eslint-plugin-es/3.0.1_eslint@8.13.0:
@@ -9564,19 +9970,24 @@ packages:
       regexpp: 3.2.0
     dev: true
 
-  /eslint-plugin-import/2.25.4_eslint@8.13.0:
+  /eslint-plugin-import/2.25.4_rsv3h2cavg6ybgnhc22qfl7fnu:
     resolution: {integrity: sha512-/KJBASVFxpu0xg1kIBn9AUa8hQVnszpwgE7Ld0lKAlx7Ie87yzEzCgSkekt+le/YVhiaosO4Y14GDAOc41nfxA==}
     engines: {node: '>=4'}
     peerDependencies:
+      '@typescript-eslint/parser': '*'
       eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
+    peerDependenciesMeta:
+      '@typescript-eslint/parser':
+        optional: true
     dependencies:
+      '@typescript-eslint/parser': 5.14.0_jzhokl4shvj5szf5bgr66kln2a
       array-includes: 3.1.4
       array.prototype.flat: 1.2.5
       debug: 2.6.9
       doctrine: 2.1.0
       eslint: 8.13.0
       eslint-import-resolver-node: 0.3.6
-      eslint-module-utils: 2.7.3
+      eslint-module-utils: 2.7.3_l62aq42yiamaj3cnpuf6avthf4
       has: 1.0.3
       is-core-module: 2.8.1
       is-glob: 4.0.3
@@ -9584,9 +9995,13 @@ packages:
       object.values: 1.1.5
       resolve: 1.22.0
       tsconfig-paths: 3.14.0
+    transitivePeerDependencies:
+      - eslint-import-resolver-typescript
+      - eslint-import-resolver-webpack
+      - supports-color
     dev: true
 
-  /eslint-plugin-jest/26.1.1_dbaf2d6f9d05bf1a2912282ff775a7a6:
+  /eslint-plugin-jest/26.1.1_3oxs2345aw7rukisfax7o5nhuy:
     resolution: {integrity: sha512-HRKOuPi5ADhza4ZBK5ufyNXy28bXXkib87w+pQqdvBhSTsamndh6sIAKPAUl8y0/n9jSWBdTPslrwtKWqkp8dA==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
     peerDependencies:
@@ -9599,8 +10014,8 @@ packages:
       jest:
         optional: true
     dependencies:
-      '@typescript-eslint/eslint-plugin': 5.14.0_17f709d9d07d4657faee4b3f92b0870d
-      '@typescript-eslint/utils': 5.14.0_eslint@8.13.0+typescript@4.6.3
+      '@typescript-eslint/eslint-plugin': 5.14.0_c73qtwoqpvdfp6xojm7zfmehbu
+      '@typescript-eslint/utils': 5.14.0_jzhokl4shvj5szf5bgr66kln2a
       eslint: 8.13.0
       jest: 27.5.1
     transitivePeerDependencies:
@@ -9634,7 +10049,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-prettier/4.0.0_1815ac95b7fb26c13c7d48a8eef62d0f:
+  /eslint-plugin-prettier/4.0.0_dak2zfnx7mtmcpd5jcuo55rnb4:
     resolution: {integrity: sha512-98MqmCJ7vJodoQK359bqQWaxOE0CS8paAz/GgjaZLyex4TTk3g9HugoO89EqWCrFiOqn9EVvcoo7gZzONCWVwQ==}
     engines: {node: '>=6.0.0'}
     peerDependencies:
@@ -9940,6 +10355,8 @@ packages:
       regex-not: 1.0.2
       snapdragon: 0.8.2
       to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
 
   /expect/27.5.1:
     resolution: {integrity: sha512-E1q5hSUG2AmYQwQJ041nvgpkODHQvB+RKlB4IYdru6uJsyFTRyZAP463M+1lINorwbqAmUggi6+WwkD8lCS/Dw==}
@@ -9995,6 +10412,8 @@ packages:
       regex-not: 1.0.2
       snapdragon: 0.8.2
       to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
 
   /extract-css-chunks-webpack-plugin/4.9.0_webpack@4.46.0:
     resolution: {integrity: sha512-HNuNPCXRMqJDQ1OHAUehoY+0JVCnw9Y/H22FQzYVwo8Ulgew98AGDu0grnY5c7xwiXHjQa6yJ/1dxLCI/xqTyQ==}
@@ -10187,6 +10606,8 @@ packages:
       parseurl: 1.3.3
       statuses: 1.5.0
       unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
 
   /find-babel-config/1.2.0:
     resolution: {integrity: sha512-jB2CHJeqy6a820ssiqwrKMeyC6nNdmrcgkKWJWmpoxpE8RKciYJXCcXRq1h2AzCo5I5BJeN2tkGEO3hLTuePRA==}
@@ -10246,30 +10667,30 @@ packages:
     resolution: {integrity: sha512-Zdmag/wGNkA4IAek+2yQoWrF2vyqIowu+2eOcSaE6jE2hDZYA3nHNutsQ+jquSxE3SeJk3Dh1OEsffqgunBy/w==}
     dependencies:
       '@firebase/analytics': 0.7.8_@firebase+app@0.7.21
-      '@firebase/analytics-compat': 0.1.9_4806ef38eb920aae9b1aba6665b35f7f
+      '@firebase/analytics-compat': 0.1.9_jado6ohlsifk5gy2xjtglm27p4
       '@firebase/app': 0.7.21
       '@firebase/app-check': 0.5.6_@firebase+app@0.7.21
-      '@firebase/app-check-compat': 0.2.6_4806ef38eb920aae9b1aba6665b35f7f
+      '@firebase/app-check-compat': 0.2.6_jado6ohlsifk5gy2xjtglm27p4
       '@firebase/app-compat': 0.1.22
       '@firebase/app-types': 0.7.0
       '@firebase/auth': 0.19.12_@firebase+app@0.7.21
-      '@firebase/auth-compat': 0.2.12_e38422e44459f38f69dbbd03a46a6a15
+      '@firebase/auth-compat': 0.2.12_4occfzcelhzy62o3xub2i2tkcu
       '@firebase/database': 0.12.8_@firebase+app-types@0.7.0
-      '@firebase/database-compat': 0.1.8_5395f954a08b86dffb8e74f386d79234
+      '@firebase/database-compat': 0.1.8_kok7svfarodn764ootzynv4sgq
       '@firebase/firestore': 3.4.8_@firebase+app@0.7.21
-      '@firebase/firestore-compat': 0.1.17_e38422e44459f38f69dbbd03a46a6a15
-      '@firebase/functions': 0.7.11_0dd03ea9f716b9c2b35974db8236dad2
-      '@firebase/functions-compat': 0.1.12_e38422e44459f38f69dbbd03a46a6a15
+      '@firebase/firestore-compat': 0.1.17_4occfzcelhzy62o3xub2i2tkcu
+      '@firebase/functions': 0.7.11_bxid5kpxc244fm2zotnyenw22i
+      '@firebase/functions-compat': 0.1.12_4occfzcelhzy62o3xub2i2tkcu
       '@firebase/installations': 0.5.8_@firebase+app@0.7.21
       '@firebase/messaging': 0.9.12_@firebase+app@0.7.21
-      '@firebase/messaging-compat': 0.1.12_4806ef38eb920aae9b1aba6665b35f7f
+      '@firebase/messaging-compat': 0.1.12_jado6ohlsifk5gy2xjtglm27p4
       '@firebase/performance': 0.5.8_@firebase+app@0.7.21
-      '@firebase/performance-compat': 0.1.8_4806ef38eb920aae9b1aba6665b35f7f
+      '@firebase/performance-compat': 0.1.8_jado6ohlsifk5gy2xjtglm27p4
       '@firebase/polyfill': 0.3.36
       '@firebase/remote-config': 0.3.7_@firebase+app@0.7.21
-      '@firebase/remote-config-compat': 0.1.8_4806ef38eb920aae9b1aba6665b35f7f
+      '@firebase/remote-config-compat': 0.1.8_jado6ohlsifk5gy2xjtglm27p4
       '@firebase/storage': 0.9.5_@firebase+app@0.7.21
-      '@firebase/storage-compat': 0.1.13_e38422e44459f38f69dbbd03a46a6a15
+      '@firebase/storage-compat': 0.1.13_4occfzcelhzy62o3xub2i2tkcu
       '@firebase/util': 1.5.2
     transitivePeerDependencies:
       - bufferutil
@@ -10318,7 +10739,7 @@ packages:
     resolution: {integrity: sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=}
     engines: {node: '>=0.10.0'}
 
-  /fork-ts-checker-webpack-plugin/6.4.0_eslint@8.13.0+typescript@4.2.4:
+  /fork-ts-checker-webpack-plugin/6.4.0_a7as76x6rrddngsh5pmyc4eygu:
     resolution: {integrity: sha512-3I3wFkc4DbzaUDPWEi96wdYGu4EKtxBafhZYm0o4mX51d9bphAY4P3mBl8K5mFXFJqVzHfmdbm9kLGnm7vwwBg==}
     engines: {node: '>=10', yarn: '>=1.0.0'}
     peerDependencies:
@@ -10387,7 +10808,6 @@ packages:
 
   /fp-ts/2.11.10:
     resolution: {integrity: sha512-wtUo3eA0/+GZnT+dCjkSt5CuGCH5ZXjjrcZvYm/3BC5KGavuwgvME+eRRHYtCGYWD6I+fJ2uZ9en/JVqDEPrJw==}
-    dev: false
 
   /fp-ts/2.12.1:
     resolution: {integrity: sha512-oxvgqUYR6O9VkKXrxkJ0NOyU0FrE705MeqgBUMEPWyTu6Pwn768cJbHChw2XOBlgFLKfIHxjr2OOBFpv2mUGZw==}
@@ -10792,6 +11212,8 @@ packages:
     dependencies:
       '@sindresorhus/is': 0.14.0
       '@szmarczak/http-timer': 1.1.2
+      '@types/keyv': 3.1.3
+      '@types/responselike': 1.0.0
       cacheable-request: 6.1.0
       decompress-response: 3.3.0
       duplexer3: 0.1.4
@@ -10814,18 +11236,18 @@ packages:
     resolution: {integrity: sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==}
     dev: true
 
-  /graphql-config/4.1.0_ac4ec5720f2d0ad4b770153d197a0e78:
+  /graphql-config/4.1.0_lkrcf5pybqujbtm7lu54f4mx6u:
     resolution: {integrity: sha512-Myqay6pmdcmX3KqoH+bMbeKZ1cTODpHS2CxF1ZzNnfTE+YUpGTcp01bOw6LpzamRb0T/WTYtGFbZeXGo9Hab2Q==}
     engines: {node: '>= 10.0.0'}
     peerDependencies:
       graphql: ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
     dependencies:
-      '@endemolshinegroup/cosmiconfig-typescript-loader': 3.0.2_ec5c0ebd3030a0a5109338876648df1b
+      '@endemolshinegroup/cosmiconfig-typescript-loader': 3.0.2_5roa5pjqgcqkkeethcdwmsg7dm
       '@graphql-tools/graphql-file-loader': 7.3.3_graphql@15.7.2
       '@graphql-tools/json-file-loader': 7.3.3_graphql@15.7.2
       '@graphql-tools/load': 7.5.0_graphql@15.7.2
       '@graphql-tools/merge': 8.2.1_graphql@15.7.2
-      '@graphql-tools/url-loader': 7.7.0_e66b2893df708e5e2662df4974b38286
+      '@graphql-tools/url-loader': 7.7.0_graphql@15.7.2
       '@graphql-tools/utils': 8.5.5_graphql@15.7.2
       cosmiconfig: 7.0.1
       cosmiconfig-toml-loader: 1.0.0
@@ -10848,13 +11270,13 @@ packages:
       graphql: 15.7.2
     dev: true
 
-  /graphql-language-service-interface/2.9.1_ac4ec5720f2d0ad4b770153d197a0e78:
+  /graphql-language-service-interface/2.9.1_lkrcf5pybqujbtm7lu54f4mx6u:
     resolution: {integrity: sha512-yGsE67fxJBXxY82+rLDMvUpmzpOUM8XFB+k+xOTUyABWs27osKaoGiuDDXAVGg1adhm+cpunWbipe763ZJkAVA==}
     peerDependencies:
       graphql: '>= 15.5.0 <= 16.0.0-experimental-stream-defer.5'
     dependencies:
       graphql: 15.7.2
-      graphql-language-service-parser: 1.10.4_ac4ec5720f2d0ad4b770153d197a0e78
+      graphql-language-service-parser: 1.10.4_lkrcf5pybqujbtm7lu54f4mx6u
       graphql-language-service-types: 1.8.3_graphql@15.7.2
       graphql-language-service-utils: 2.6.0_graphql@15.7.2
       vscode-languageserver-types: 3.16.0
@@ -10866,13 +11288,13 @@ packages:
       - utf-8-validate
     dev: false
 
-  /graphql-language-service-parser/1.10.4_ac4ec5720f2d0ad4b770153d197a0e78:
+  /graphql-language-service-parser/1.10.4_lkrcf5pybqujbtm7lu54f4mx6u:
     resolution: {integrity: sha512-duDE+0aeKLFVrb9Kf28U84ZEHhHcvTjWIT6dJbIAQJWBaDoht0D4BK9EIhd94I3DtKRc1JCJb2+70y1lvP/hiA==}
     peerDependencies:
       graphql: ^15.5.0 || ^16.0.0
     dependencies:
       graphql: 15.7.2
-      graphql-language-service-types: 1.8.7_ac4ec5720f2d0ad4b770153d197a0e78
+      graphql-language-service-types: 1.8.7_lkrcf5pybqujbtm7lu54f4mx6u
     transitivePeerDependencies:
       - '@types/node'
       - bufferutil
@@ -10889,13 +11311,13 @@ packages:
       graphql: 15.7.2
     dev: false
 
-  /graphql-language-service-types/1.8.7_ac4ec5720f2d0ad4b770153d197a0e78:
+  /graphql-language-service-types/1.8.7_lkrcf5pybqujbtm7lu54f4mx6u:
     resolution: {integrity: sha512-LP/Mx0nFBshYEyD0Ny6EVGfacJAGVx+qXtlJP4hLzUdBNOGimfDNtMVIdZANBXHXcM41MDgMHTnyEx2g6/Ttbw==}
     peerDependencies:
       graphql: ^15.5.0 || ^16.0.0
     dependencies:
       graphql: 15.7.2
-      graphql-config: 4.1.0_ac4ec5720f2d0ad4b770153d197a0e78
+      graphql-config: 4.1.0_lkrcf5pybqujbtm7lu54f4mx6u
       vscode-languageserver-types: 3.16.0
     transitivePeerDependencies:
       - '@types/node'
@@ -10956,7 +11378,6 @@ packages:
   /graphql/15.7.2:
     resolution: {integrity: sha512-AnnKk7hFQFmU/2I9YSQf3xw44ctnSFCfp3zE0N6W174gqe9fWG/2rKaKxROK7CcI3XtERpjEKFqts8o319Kf7A==}
     engines: {node: '>= 10.x'}
-    dev: false
 
   /growl/1.10.5:
     resolution: {integrity: sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==}
@@ -11398,6 +11819,7 @@ packages:
       stringify-object: 3.3.0
     transitivePeerDependencies:
       - mkdirp
+      - supports-color
     dev: false
 
   /human-signals/2.1.0:
@@ -12681,6 +13103,11 @@ packages:
     resolution: {integrity: sha512-/n9mNxZj/HDSrincJ6RP+L+yXbpnB8FybySBa+IjIaoH9FIxBbrbRT5XUbe8R7zuVM2AQqNMNDDqz0bzx3znOQ==}
     hasBin: true
 
+  /jiti/1.14.0:
+    resolution: {integrity: sha512-4IwstlaKQc9vCTC+qUXLM1hajy2ImiL9KnLvVYiaHOtS/v3wRjhLlGl121AmgDgx/O43uKmxownJghS5XMya2A==}
+    hasBin: true
+    dev: true
+
   /joycon/3.1.1:
     resolution: {integrity: sha512-34wB/Y7MW7bzjKRjUKTa46I2Z7eV62Rkhva+KkopW7Qvv/OSWBqvkSY7vusOPrNuZcUG3tApvdVgNB8POj3SPw==}
     engines: {node: '>=10'}
@@ -12735,7 +13162,7 @@ packages:
         optional: true
     dependencies:
       abab: 2.0.5
-      acorn: 8.7.0
+      acorn: 8.7.1
       acorn-globals: 6.0.0
       cssom: 0.4.4
       cssstyle: 2.3.0
@@ -13134,6 +13561,7 @@ packages:
       rxjs: 6.6.7
     transitivePeerDependencies:
       - zen-observable
+      - zenObservable
     dev: true
 
   /listr2/4.0.5:
@@ -13630,7 +14058,7 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
-  /meros/1.1.4_@types+node@17.0.24:
+  /meros/1.1.4:
     resolution: {integrity: sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==}
     engines: {node: '>=12'}
     peerDependencies:
@@ -13638,8 +14066,6 @@ packages:
     peerDependenciesMeta:
       '@types/node':
         optional: true
-    dependencies:
-      '@types/node': 17.0.24
 
   /micromatch/3.1.0:
     resolution: {integrity: sha512-3StSelAE+hnRvMs8IdVW7Uhk8CVed5tp+kLLGlBP6WiRAXS21GPGu/Nat4WNPXj2Eoc24B02SaeoyozPMfj0/g==}
@@ -13658,6 +14084,8 @@ packages:
       regex-not: 1.0.2
       snapdragon: 0.8.2
       to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /micromatch/3.1.10:
@@ -13677,6 +14105,8 @@ packages:
       regex-not: 1.0.2
       snapdragon: 0.8.2
       to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   /micromatch/4.0.4:
@@ -13899,15 +14329,11 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  /mlly/0.3.19:
-    resolution: {integrity: sha512-zMq5n3cOf4fOzA4WoeulxagbAgMChdev3MgP6K51k7M0u2whTXxupfIY4VVzws4vxkiWhwH1rVQcsw7zDGfRhA==}
-    dev: true
-
-  /mlly/0.5.2:
-    resolution: {integrity: sha512-4GTELSSErv6ZZJYU98fZNuIBJcXSz+ktHdRrCYEqU1m6ZlebOCG0jwZ+IEd9vOrbpYsVBBMC5OTrEyLnKRcauQ==}
+  /mlly/0.5.3:
+    resolution: {integrity: sha512-im69tuLD9EJh9fc9TZRpJEFvsBcGMez7glUCWDcHWWCKzhvPmNvyaYjp/+h0qJJN/Xovrs//GzGjOOKmFw4Gog==}
     dependencies:
       pathe: 0.2.0
-      pkg-types: 0.3.2
+      pkg-types: 0.3.3
     dev: true
 
   /mocha/9.2.2:
@@ -14022,6 +14448,8 @@ packages:
       regex-not: 1.0.2
       snapdragon: 0.8.2
       to-regex: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
 
   /natural-compare/1.4.0:
     resolution: {integrity: sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=}
@@ -14279,7 +14707,7 @@ packages:
   /nuxt-windicss/2.2.11:
     resolution: {integrity: sha512-xobq725D6vqpIgYOrLJ6CVlR4xLlFGwuq//gZikXKOdoVRpoK8C+NpHazPd4+f17urGQ4H0LqGBCIujTvV1V0g==}
     dependencies:
-      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.4-27588443.cf25525
+      '@nuxt/kit': /@nuxt/kit-edge/3.0.0-rc.4-27605536.8c2c80e
       '@windicss/plugin-utils': 1.8.4
       consola: 2.15.3
       defu: 6.0.0
@@ -14301,13 +14729,13 @@ packages:
       - webpack
     dev: true
 
-  /nuxt/2.15.8_typescript@4.6.3:
+  /nuxt/2.15.8_qdyzgkv5c47weutnc3t6yd5t2u:
     resolution: {integrity: sha512-ceK3qLg/Baj7J8mK9bIxqw9AavrF+LXqwYEreBdY/a4Sj8YV4mIvhqea/6E7VTCNNGvKT2sJ/TTJjtfQ597lTA==}
     hasBin: true
     requiresBuild: true
     dependencies:
       '@nuxt/babel-preset-app': 2.15.8
-      '@nuxt/builder': 2.15.8_typescript@4.6.3
+      '@nuxt/builder': 2.15.8_qdyzgkv5c47weutnc3t6yd5t2u
       '@nuxt/cli': 2.15.8
       '@nuxt/components': 2.2.1
       '@nuxt/config': 2.15.8
@@ -14320,16 +14748,70 @@ packages:
       '@nuxt/utils': 2.15.8
       '@nuxt/vue-app': 2.15.8
       '@nuxt/vue-renderer': 2.15.8
-      '@nuxt/webpack': 2.15.8_typescript@4.6.3
+      '@nuxt/webpack': 2.15.8_qdyzgkv5c47weutnc3t6yd5t2u
     transitivePeerDependencies:
+      - '@vue/compiler-sfc'
+      - arc-templates
+      - atpl
+      - babel-core
+      - bluebird
+      - bracket-template
       - bufferutil
+      - coffee-script
       - consola
+      - dot
+      - dust
+      - dustjs-helpers
+      - dustjs-linkedin
+      - eco
+      - ect
+      - ejs
       - encoding
+      - haml-coffee
+      - hamlet
+      - hamljs
+      - handlebars
+      - hogan.js
+      - htmling
+      - jade
+      - jazz
+      - jqtpl
+      - just
+      - liquid-node
+      - liquor
+      - marko
+      - mote
+      - mustache
+      - nunjucks
+      - plates
+      - pug
+      - qejs
+      - ractive
+      - razor-tmpl
+      - react
+      - react-dom
+      - slm
+      - squirrelly
       - supports-color
+      - swig
+      - swig-templates
+      - teacup
+      - templayed
+      - then-jade
+      - then-pug
+      - tinyliquid
+      - toffee
+      - twig
+      - twing
       - typescript
+      - underscore
       - utf-8-validate
+      - vash
+      - velocityjs
+      - walrus
       - webpack-cli
       - webpack-command
+      - whiskers
     dev: false
 
   /nwsapi/2.2.0:
@@ -14897,12 +15379,12 @@ packages:
     dependencies:
       find-up: 4.1.0
 
-  /pkg-types/0.3.2:
-    resolution: {integrity: sha512-eBYzX/7NYsQEOR2alWY4rnQB49G62oHzFpoi9Som56aUr8vB8UGcmcIia9v8fpBeuhH3Ltentuk2OGpp4IQV3Q==}
+  /pkg-types/0.3.3:
+    resolution: {integrity: sha512-6AJcCMnjUQPQv/Wk960w0TOmjhdjbeaQJoSKWRQv9N3rgkessCu6J0Ydsog/nw1MbpnxHuPzYbfOn2KmlZO1FA==}
     dependencies:
       jsonc-parser: 3.0.0
-      mlly: 0.3.19
-      pathe: 0.2.0
+      mlly: 0.5.3
+      pathe: 0.3.0
     dev: true
 
   /pluralize/8.0.0:
@@ -15788,6 +16270,22 @@ packages:
 
   /promise-inflight/1.0.1:
     resolution: {integrity: sha1-mEcocL8igTL8vdhoEputEsPAKeM=}
+    peerDependencies:
+      bluebird: '*'
+    peerDependenciesMeta:
+      bluebird:
+        optional: true
+    dev: false
+
+  /promise-inflight/1.0.1_bluebird@3.7.2:
+    resolution: {integrity: sha1-mEcocL8igTL8vdhoEputEsPAKeM=}
+    peerDependencies:
+      bluebird: '*'
+    peerDependenciesMeta:
+      bluebird:
+        optional: true
+    dependencies:
+      bluebird: 3.7.2
     dev: false
 
   /promise-polyfill/8.1.3:
@@ -16090,6 +16588,8 @@ packages:
       graceful-fs: 4.2.10
       micromatch: 3.1.10
       readable-stream: 2.3.7
+    transitivePeerDependencies:
+      - supports-color
     dev: false
     optional: true
 
@@ -16405,7 +16905,7 @@ packages:
       inherits: 2.0.4
     dev: false
 
-  /rollup-plugin-dts/4.2.1_rollup@2.70.2+typescript@4.6.3:
+  /rollup-plugin-dts/4.2.1_nmerszcjz2rfjina4mudxa4qka:
     resolution: {integrity: sha512-eaxQZNUJ5iQcxNGlpJ1CUgG4OSVqWjDZ3nNSWBIoGrpcote2aNphSe1RJOaSYkb8dwn3o+rYm1vvld/5z3EGSQ==}
     engines: {node: '>=v12.22.11'}
     peerDependencies:
@@ -16419,7 +16919,7 @@ packages:
       '@babel/code-frame': 7.16.7
     dev: true
 
-  /rollup-plugin-ts/2.0.7_rollup@2.70.2+typescript@4.6.3:
+  /rollup-plugin-ts/2.0.7_nmerszcjz2rfjina4mudxa4qka:
     resolution: {integrity: sha512-M9sppRKX6y/b2KXbGdUdHid0tshAEK/sEeYLBHBJiBa4swukSsoFVXKGGZasLcjaXhgUnnizFuvFFj6znxwvSA==}
     engines: {node: '>=10.0.0', npm: '>=7.0.0', pnpm: '>=3.2.0', yarn: '>=1.13'}
     peerDependencies:
@@ -16704,6 +17204,8 @@ packages:
       on-finished: 2.3.0
       range-parser: 1.2.1
       statuses: 1.5.0
+    transitivePeerDependencies:
+      - supports-color
 
   /sentence-case/3.0.4:
     resolution: {integrity: sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==}
@@ -16750,6 +17252,8 @@ packages:
       escape-html: 1.0.3
       parseurl: 1.3.3
       send: 0.17.1
+    transitivePeerDependencies:
+      - supports-color
 
   /server-destroy/1.0.1:
     resolution: {integrity: sha1-8Tv5KOQrnD55OD5hzDmYtdFObN0=}
@@ -16954,6 +17458,8 @@ packages:
       source-map: 0.5.7
       source-map-resolve: 0.5.3
       use: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
 
   /socket.io-client/2.4.0:
     resolution: {integrity: sha512-M6xhnKQHuuZd4Ba9vltCLT9oa+YvTsP8j9NcEiLElfIg8KeYPyhWOes6x4t+LTAC8enQbE/995AdTem2uNyKKQ==}
@@ -16971,6 +17477,7 @@ packages:
       to-array: 0.1.4
     transitivePeerDependencies:
       - bufferutil
+      - supports-color
       - utf-8-validate
     dev: false
 
@@ -17013,6 +17520,8 @@ packages:
       component-emitter: 1.3.0
       debug: 3.1.0
       isarray: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   /socket.io-parser/4.0.4:
@@ -17457,7 +17966,7 @@ packages:
       postcss-selector-parser: 3.1.2
     dev: false
 
-  /stylelint-config-html/1.0.0_1a82b100232bbe7036ec0a7ca7a4baf4:
+  /stylelint-config-html/1.0.0_dkblcabdfo7hanxmbj6kpjf26q:
     resolution: {integrity: sha512-rKQUUWDpaYC7ybsS6tLxddjn6DxhjSIXybElSmcTyVQj3ExhmU3q+l41ktrlwHRyY0M5SkTkZiwngvYPYmsgSQ==}
     engines: {node: ^12 || >=14}
     peerDependencies:
@@ -17491,7 +18000,7 @@ packages:
       - postcss
     dev: true
 
-  /stylelint-config-recommended-vue/1.4.0_1a82b100232bbe7036ec0a7ca7a4baf4:
+  /stylelint-config-recommended-vue/1.4.0_dkblcabdfo7hanxmbj6kpjf26q:
     resolution: {integrity: sha512-DVJqyX2KvMCn9U0+keL12r7xlsH26K4Vg8NrIZuq5MoF7g82DpMp326Om4E0Q+Il1o+bTHuUyejf2XAI0iD04Q==}
     engines: {node: ^12 || >=14}
     peerDependencies:
@@ -17501,7 +18010,7 @@ packages:
       postcss-html: 1.4.1
       semver: 7.3.5
       stylelint: 14.7.1
-      stylelint-config-html: 1.0.0_1a82b100232bbe7036ec0a7ca7a4baf4
+      stylelint-config-html: 1.0.0_dkblcabdfo7hanxmbj6kpjf26q
       stylelint-config-recommended: 7.0.0_stylelint@14.7.1
     dev: true
 
@@ -17712,6 +18221,8 @@ packages:
       deepmerge: 1.3.2
       mitt: 1.1.2
       svg-baker: 1.7.0
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /svg-baker/1.7.0:
@@ -17730,6 +18241,8 @@ packages:
       posthtml-svg-mode: 1.0.3
       query-string: 4.3.4
       traverse: 0.6.6
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /svg-sprite-loader/5.2.1:
@@ -17744,6 +18257,8 @@ packages:
       svg-baker: 1.7.0
       svg-baker-runtime: 1.4.7
       url-slug: 2.0.0
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
   /svg-tags/1.0.0:
@@ -17916,6 +18431,8 @@ packages:
       terser: 5.9.0
       webpack: 4.46.0
       webpack-sources: 1.4.3
+    transitivePeerDependencies:
+      - bluebird
     dev: false
 
   /terser/4.8.0:
@@ -17923,6 +18440,7 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
     dependencies:
+      acorn: 8.7.1
       commander: 2.20.3
       source-map: 0.6.1
       source-map-support: 0.5.20
@@ -17932,6 +18450,7 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
     dependencies:
+      acorn: 8.7.1
       commander: 2.20.3
       source-map: 0.7.3
       source-map-support: 0.5.20
@@ -18155,41 +18674,7 @@ packages:
   /ts-interface-checker/0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
-  /ts-jest/27.1.4_9985e1834e803358b7be1e6ce5ca0eea:
-    resolution: {integrity: sha512-qjkZlVPWVctAezwsOD1OPzbZ+k7zA5z3oxII4dGdZo5ggX/PL7kvwTM0pXTr10fAtbiVpJaL3bWd502zAhpgSQ==}
-    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
-    hasBin: true
-    peerDependencies:
-      '@babel/core': '>=7.0.0-beta.0 <8'
-      '@types/jest': ^27.0.0
-      babel-jest: '>=27.0.0 <28'
-      esbuild: '*'
-      jest: ^27.0.0
-      typescript: '>=3.8 <5.0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      '@types/jest':
-        optional: true
-      babel-jest:
-        optional: true
-      esbuild:
-        optional: true
-    dependencies:
-      '@types/jest': 27.4.1
-      bs-logger: 0.2.6
-      fast-json-stable-stringify: 2.1.0
-      jest: 27.5.1
-      jest-util: 27.5.1
-      json5: 2.2.1
-      lodash.memoize: 4.1.2
-      make-error: 1.3.6
-      semver: 7.3.7
-      typescript: 4.6.3
-      yargs-parser: 20.2.9
-    dev: true
-
-  /ts-jest/27.1.4_e5fb0852f9419ae84240799a2f4ee178:
+  /ts-jest/27.1.4_4x5qquxzignoqqsapgnc6txbpa:
     resolution: {integrity: sha512-qjkZlVPWVctAezwsOD1OPzbZ+k7zA5z3oxII4dGdZo5ggX/PL7kvwTM0pXTr10fAtbiVpJaL3bWd502zAhpgSQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     hasBin: true
@@ -18225,7 +18710,7 @@ packages:
       yargs-parser: 20.2.9
     dev: true
 
-  /ts-jest/27.1.4_eecc682348e44222a66a9b13407b285a:
+  /ts-jest/27.1.4_53ggqi2i4rbcfjtktmjua6zili:
     resolution: {integrity: sha512-qjkZlVPWVctAezwsOD1OPzbZ+k7zA5z3oxII4dGdZo5ggX/PL7kvwTM0pXTr10fAtbiVpJaL3bWd502zAhpgSQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     hasBin: true
@@ -18259,6 +18744,40 @@ packages:
       yargs-parser: 20.2.9
     dev: true
 
+  /ts-jest/27.1.4_tgc6da2oqazvrn56dzwolsqo5i:
+    resolution: {integrity: sha512-qjkZlVPWVctAezwsOD1OPzbZ+k7zA5z3oxII4dGdZo5ggX/PL7kvwTM0pXTr10fAtbiVpJaL3bWd502zAhpgSQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    hasBin: true
+    peerDependencies:
+      '@babel/core': '>=7.0.0-beta.0 <8'
+      '@types/jest': ^27.0.0
+      babel-jest: '>=27.0.0 <28'
+      esbuild: '*'
+      jest: ^27.0.0
+      typescript: '>=3.8 <5.0'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      '@types/jest':
+        optional: true
+      babel-jest:
+        optional: true
+      esbuild:
+        optional: true
+    dependencies:
+      '@types/jest': 27.4.1
+      bs-logger: 0.2.6
+      fast-json-stable-stringify: 2.1.0
+      jest: 27.5.1
+      jest-util: 27.5.1
+      json5: 2.2.1
+      lodash.memoize: 4.1.2
+      make-error: 1.3.6
+      semver: 7.3.7
+      typescript: 4.6.3
+      yargs-parser: 20.2.9
+    dev: true
+
   /ts-loader/8.3.0_typescript@4.2.4:
     resolution: {integrity: sha512-MgGly4I6cStsJy27ViE32UoqxPTN9Xly4anxxVyaIWR+9BGxboV4EyJBGfR3RePV7Ksjj3rHmPZJeIt+7o4Vag==}
     engines: {node: '>=10.0.0'}
@@ -18278,7 +18797,7 @@ packages:
     resolution: {integrity: sha512-DEQrfv6l7IvN2jlzc/VTdZJYsWUnQNCsueYjMkC/iXoEoi5fNan6MjeDqkvhfzbmHgdz9UxDUluX3V5HdjTydQ==}
     dev: true
 
-  /ts-node/10.7.0_17a82b5ac88a5de7094eac76b4edda13:
+  /ts-node/10.7.0_c6ucwwwirjo6ockovr3lj3o2cm:
     resolution: {integrity: sha512-TbIGS4xgJoX2i3do417KSaep1uRAW/Lu+WAL2doDHC0D6ummjirVOXU5/7aiZotbQ5p1Zp9tP7U6cYhA0O7M8A==}
     hasBin: true
     peerDependencies:
@@ -18495,7 +19014,6 @@ packages:
     resolution: {integrity: sha512-yNIatDa5iaofVozS/uQJEl3JRWLKKGJKh6Yaiv0GLGSuhpFJe7P3SbHZ8/yjAHRQwKRoA6YZqlfjXWmVzoVSMw==}
     engines: {node: '>=4.2.0'}
     hasBin: true
-    dev: true
 
   /typescript/4.6.4:
     resolution: {integrity: sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==}
@@ -18595,15 +19113,15 @@ packages:
     engines: {node: '>= 0.4.12'}
     dev: true
 
-  /unimport/0.2.9:
-    resolution: {integrity: sha512-5SLmZZL2rwaNOQa/yTGaG0QI0meRhb6MDdIlS9s1uHPSYO6Gfzr7ugl5Rf35/CJioW6wYiNJsN9dru5JMzaD8w==}
+  /unimport/0.3.0:
+    resolution: {integrity: sha512-RxvfvKBY+CyBmIuYSuBeosSiudgcVakdhVofy5mO5sJ3purQRc5yjLw0Lir7MKHnqe6XT1++8flgAvpxu1UkqQ==}
     dependencies:
       '@rollup/pluginutils': 4.2.1
       escape-string-regexp: 5.0.0
       fast-glob: 3.2.11
       local-pkg: 0.4.1
       magic-string: 0.26.2
-      mlly: 0.5.2
+      mlly: 0.5.3
       pathe: 0.3.0
       scule: 0.2.1
       strip-literal: 0.4.0
@@ -18662,7 +19180,7 @@ packages:
     resolution: {integrity: sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=}
     engines: {node: '>= 0.8'}
 
-  /unplugin-vue2-script-setup/0.9.3_03e6644f7f58da72872857a67d328278:
+  /unplugin-vue2-script-setup/0.9.3_aptgit37ldnhfbzik6th2mucpa:
     resolution: {integrity: sha512-m2QESHiFNmx0fIo/P0AiCrH6E5WtijRB/Ldrj8zjwRIYYbiOgmTfRmWQquW0H8ei5OwhYT30WAgepFjWrJ5oJg==}
     peerDependencies:
       '@vue/composition-api': ^1.4.3
@@ -18834,7 +19352,7 @@ packages:
       schema-utils: 3.1.1
     dev: true
 
-  /url-loader/4.1.1_file-loader@6.2.0+webpack@4.46.0:
+  /url-loader/4.1.1_lit45vopotvaqup7lrvlnvtxwy:
     resolution: {integrity: sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
@@ -19063,22 +19581,27 @@ packages:
       source-map: 0.5.7
       tsconfig: 7.0.0
       vue-template-es2015-compiler: 1.9.1
+    transitivePeerDependencies:
+      - supports-color
     dev: true
 
-  /vue-loader/15.9.8_559ffc97fd41de05d12663d7fb949156:
+  /vue-loader/15.9.8_chbytaxv34oega4iwgz3symghu:
     resolution: {integrity: sha512-GwSkxPrihfLR69/dSV3+5CdMQ0D+jXg8Ma1S4nQXKJAznYFX14vHdc/NetQc34Dw+rBbIJyP7JOuVb9Fhprvog==}
     peerDependencies:
+      '@vue/compiler-sfc': ^3.0.8
       cache-loader: '*'
       css-loader: '*'
       vue-template-compiler: '*'
       webpack: ^3.0.0 || ^4.1.0 || ^5.0.0-0
     peerDependenciesMeta:
+      '@vue/compiler-sfc':
+        optional: true
       cache-loader:
         optional: true
       vue-template-compiler:
         optional: true
     dependencies:
-      '@vue/component-compiler-utils': 3.3.0
+      '@vue/component-compiler-utils': 3.3.0_b67hmr5jvoy2lxcibwtcqokjgi
       cache-loader: 4.1.0_webpack@4.46.0
       css-loader: 4.3.0_webpack@4.46.0
       hash-sum: 1.0.2
@@ -19087,6 +19610,60 @@ packages:
       vue-style-loader: 4.1.3
       vue-template-compiler: 2.6.14
       webpack: 4.46.0
+    transitivePeerDependencies:
+      - arc-templates
+      - atpl
+      - babel-core
+      - bracket-template
+      - coffee-script
+      - dot
+      - dust
+      - dustjs-helpers
+      - dustjs-linkedin
+      - eco
+      - ect
+      - ejs
+      - haml-coffee
+      - hamlet
+      - hamljs
+      - handlebars
+      - hogan.js
+      - htmling
+      - jade
+      - jazz
+      - jqtpl
+      - just
+      - liquid-node
+      - liquor
+      - lodash
+      - marko
+      - mote
+      - mustache
+      - nunjucks
+      - plates
+      - pug
+      - qejs
+      - ractive
+      - razor-tmpl
+      - react
+      - react-dom
+      - slm
+      - squirrelly
+      - swig
+      - swig-templates
+      - teacup
+      - templayed
+      - then-jade
+      - then-pug
+      - tinyliquid
+      - toffee
+      - twig
+      - twing
+      - underscore
+      - vash
+      - velocityjs
+      - walrus
+      - whiskers
     dev: false
 
   /vue-meta/2.4.0:
@@ -19141,6 +19718,8 @@ packages:
   /vue-template-babel-compiler/1.1.3:
     resolution: {integrity: sha512-VPQDdWL74/IyIaXzlRPzf1M0GdnrKHjhRoOiAQsEO6iV+8Tyz/02nPQfxaGrQOP5+V/zu7YeFyu0zvPOv6bfxQ==}
     engines: {node: '>=12.0.0'}
+    peerDependencies:
+      vue-template-compiler: ^2.6.0
     dependencies:
       '@babel/core': 7.17.9
       '@babel/plugin-proposal-nullish-coalescing-operator': 7.16.7_@babel+core@7.17.9
@@ -19237,6 +19816,8 @@ packages:
     requiresBuild: true
     dependencies:
       chokidar: 2.1.8
+    transitivePeerDependencies:
+      - supports-color
     dev: false
     optional: true
 
@@ -19248,6 +19829,8 @@ packages:
     optionalDependencies:
       chokidar: 3.5.3
       watchpack-chokidar2: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   /wcwidth/1.0.1:
@@ -19377,6 +19960,8 @@ packages:
       terser-webpack-plugin: 1.4.5_webpack@4.46.0
       watchpack: 1.7.5
       webpack-sources: 1.4.3
+    transitivePeerDependencies:
+      - supports-color
     dev: false
 
   /webpackbar/4.0.0_webpack@4.46.0:

From cfdab014c739c994f4a9399b62ab229a07b9eaa9 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 28 Jun 2022 16:33:39 +0530
Subject: [PATCH 50/50] refactor: allow smart tabs to render inactive tabs as
 an option

---
 .../components/collections/ChooseType.vue     |  6 +++++-
 .../components/graphql/RequestOptions.vue     |  1 +
 .../components/graphql/Sidebar.vue            |  2 ++
 .../components/http/RequestOptions.vue        |  1 +
 .../components/http/Sidebar.vue               |  1 +
 .../lenses/ResponseBodyRenderer.vue           |  1 +
 .../components/realtime/LogEntry.vue          |  6 +++++-
 .../hoppscotch-app/components/smart/Tab.vue   | 19 ++++++++++++++++---
 .../hoppscotch-app/components/smart/Tabs.vue  |  7 +++++++
 packages/hoppscotch-app/pages/profile.vue     |  2 +-
 .../pages/realtime/Socketio.vue               |  2 ++
 .../pages/realtime/Websocket.vue              |  1 +
 12 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/packages/hoppscotch-app/components/collections/ChooseType.vue b/packages/hoppscotch-app/components/collections/ChooseType.vue
index 4ecdb7fc4..bd9cce100 100644
--- a/packages/hoppscotch-app/components/collections/ChooseType.vue
+++ b/packages/hoppscotch-app/components/collections/ChooseType.vue
@@ -1,6 +1,10 @@
 <template>
   <div v-if="show">
-    <SmartTabs :id="'collections_tab'" v-model="selectedCollectionTab">
+    <SmartTabs
+      :id="'collections_tab'"
+      v-model="selectedCollectionTab"
+      render-inactive-tabs
+    >
       <SmartTab
         :id="'my-collections'"
         :label="`${$t('collection.my_collections')}`"
diff --git a/packages/hoppscotch-app/components/graphql/RequestOptions.vue b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
index 4d5763fcc..094840692 100644
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -3,6 +3,7 @@
     <SmartTabs
       v-model="selectedOptionTab"
       styles="sticky bg-primary top-upperPrimaryStickyFold z-10"
+      render-inactive-tabs
     >
       <SmartTab
         :id="'query'"
diff --git a/packages/hoppscotch-app/components/graphql/Sidebar.vue b/packages/hoppscotch-app/components/graphql/Sidebar.vue
index d7b2b293d..d66063cc6 100644
--- a/packages/hoppscotch-app/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-app/components/graphql/Sidebar.vue
@@ -3,6 +3,7 @@
     v-model="selectedNavigationTab"
     styles="sticky bg-primary z-10 top-0"
     vertical
+    render-inactive-tabs
   >
     <SmartTab :id="'history'" icon="clock" :label="`${t('tab.history')}`">
       <History
@@ -64,6 +65,7 @@
         <SmartTabs
           v-model="selectedGqlTab"
           styles="border-t border-b border-dividerLight bg-primary sticky z-10 top-sidebarPrimaryStickyFold"
+          render-inactive-tabs
         >
           <SmartTab
             v-if="queryFields.length > 0"
diff --git a/packages/hoppscotch-app/components/http/RequestOptions.vue b/packages/hoppscotch-app/components/http/RequestOptions.vue
index 3dec44d16..c9dc954ba 100644
--- a/packages/hoppscotch-app/components/http/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/http/RequestOptions.vue
@@ -2,6 +2,7 @@
   <SmartTabs
     v-model="selectedRealtimeTab"
     styles="sticky bg-primary top-upperMobilePrimaryStickyFold sm:top-upperPrimaryStickyFold z-10"
+    render-inactive-tabs
   >
     <SmartTab
       :id="'params'"
diff --git a/packages/hoppscotch-app/components/http/Sidebar.vue b/packages/hoppscotch-app/components/http/Sidebar.vue
index a9fec6e15..871c93883 100644
--- a/packages/hoppscotch-app/components/http/Sidebar.vue
+++ b/packages/hoppscotch-app/components/http/Sidebar.vue
@@ -3,6 +3,7 @@
     v-model="selectedNavigationTab"
     styles="sticky bg-primary z-10 top-0"
     vertical
+    render-inactive-tabs
   >
     <SmartTab :id="'history'" icon="clock" :label="`${$t('tab.history')}`">
       <History ref="historyComponent" :page="'rest'" />
diff --git a/packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue b/packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue
index 84f940a7b..0e9bdf782 100644
--- a/packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue
+++ b/packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue
@@ -3,6 +3,7 @@
     v-if="response"
     v-model="selectedLensTab"
     styles="sticky z-10 bg-primary top-lowerPrimaryStickyFold"
+    render-inactive-tabs
   >
     <SmartTab
       v-for="(lens, index) in validLenses"
diff --git a/packages/hoppscotch-app/components/realtime/LogEntry.vue b/packages/hoppscotch-app/components/realtime/LogEntry.vue
index f11854395..bfbbed2cc 100644
--- a/packages/hoppscotch-app/components/realtime/LogEntry.vue
+++ b/packages/hoppscotch-app/components/realtime/LogEntry.vue
@@ -51,7 +51,11 @@
       </div>
     </div>
     <div v-if="!minimized" class="overflow-hidden bg-primaryLight">
-      <SmartTabs v-model="selectedTab" styles="bg-primaryLight">
+      <SmartTabs
+        v-model="selectedTab"
+        styles="bg-primaryLight"
+        render-inactive-tabs
+      >
         <SmartTab v-if="isJSON(entry.payload)" id="json" label="JSON" />
         <SmartTab id="raw" label="Raw" />
       </SmartTabs>
diff --git a/packages/hoppscotch-app/components/smart/Tab.vue b/packages/hoppscotch-app/components/smart/Tab.vue
index 18d79fcdc..8990ffbfa 100644
--- a/packages/hoppscotch-app/components/smart/Tab.vue
+++ b/packages/hoppscotch-app/components/smart/Tab.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-show="active" class="flex flex-col flex-1">
+  <div v-if="shouldRender" v-show="active" class="flex flex-col flex-1">
     <slot></slot>
   </div>
 </template>
@@ -33,11 +33,24 @@ const tabMeta = computed<TabMeta>(() => ({
   label: props.label,
 }))
 
-const { activeTabID, addTabEntry, updateTabEntry, removeTabEntry } =
-  inject<TabProvider>("tabs-system")!
+const {
+  activeTabID,
+  renderInactive,
+  addTabEntry,
+  updateTabEntry,
+  removeTabEntry,
+} = inject<TabProvider>("tabs-system")!
 
 const active = computed(() => activeTabID.value === props.id)
 
+const shouldRender = computed(() => {
+  // If render inactive is true, then it should be rendered nonetheless
+  if (renderInactive.value) return true
+
+  // Else, return whatever is the active state
+  return active.value
+})
+
 onMounted(() => {
   addTabEntry(props.id, tabMeta.value)
 })
diff --git a/packages/hoppscotch-app/components/smart/Tabs.vue b/packages/hoppscotch-app/components/smart/Tabs.vue
index 54f5a4e4e..214c1dfc1 100644
--- a/packages/hoppscotch-app/components/smart/Tabs.vue
+++ b/packages/hoppscotch-app/components/smart/Tabs.vue
@@ -80,6 +80,8 @@ export type TabMeta = {
 }
 
 export type TabProvider = {
+  // Whether inactive tabs should remain rendered
+  renderInactive: ComputedRef<boolean>
   activeTabID: ComputedRef<string>
   addTabEntry: (tabID: string, meta: TabMeta) => void
   updateTabEntry: (tabID: string, newMeta: TabMeta) => void
@@ -91,6 +93,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  renderInactiveTabs: {
+    type: Boolean,
+    default: false,
+  },
   vertical: {
     type: Boolean,
     default: false,
@@ -144,6 +150,7 @@ const removeTabEntry = (tabID: string) => {
 }
 
 provide<TabProvider>("tabs-system", {
+  renderInactive: computed(() => props.renderInactiveTabs),
   activeTabID: computed(() => props.value),
   addTabEntry,
   updateTabEntry,
diff --git a/packages/hoppscotch-app/pages/profile.vue b/packages/hoppscotch-app/pages/profile.vue
index 77276936d..21ec30056 100644
--- a/packages/hoppscotch-app/pages/profile.vue
+++ b/packages/hoppscotch-app/pages/profile.vue
@@ -83,7 +83,7 @@
               <FirebaseLogout outline />
             </div>
           </div>
-          <SmartTabs v-model="selectedProfileTab">
+          <SmartTabs v-model="selectedProfileTab" render-inactive-tabs>
             <SmartTab :id="'sync'" :label="t('settings.account')">
               <div class="grid grid-cols-1">
                 <section class="p-4">
diff --git a/packages/hoppscotch-app/pages/realtime/Socketio.vue b/packages/hoppscotch-app/pages/realtime/Socketio.vue
index 6650892c5..cb4a05e1f 100644
--- a/packages/hoppscotch-app/pages/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/pages/realtime/Socketio.vue
@@ -86,10 +86,12 @@
       <SmartTabs
         v-model="selectedTab"
         styles="sticky bg-primary top-upperPrimaryStickyFold z-10"
+        render-inactive-tabs
       >
         <SmartTab
           :id="'communication'"
           :label="`${t('websocket.communication')}`"
+          render-inactive-tabs
         >
           <RealtimeCommunication
             :show-event-field="true"
diff --git a/packages/hoppscotch-app/pages/realtime/Websocket.vue b/packages/hoppscotch-app/pages/realtime/Websocket.vue
index 753bcf283..750c2b7cc 100644
--- a/packages/hoppscotch-app/pages/realtime/Websocket.vue
+++ b/packages/hoppscotch-app/pages/realtime/Websocket.vue
@@ -38,6 +38,7 @@
       <SmartTabs
         v-model="selectedTab"
         styles="sticky bg-primary top-upperPrimaryStickyFold z-10"
+        render-inactive-tabs
       >
         <SmartTab
           :id="'communication'"