chore: updated remaining codemirror instances

Co-authored-by: collinewait <21334508+collinewait@users.noreply.github.com>

packages/hoppscotch-backend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hoppscotch-backend",
-  "version": "2023.4.3",
+  "version": "2023.4.0",
   "description": "",
   "author": "",
   "private": true,

packages/hoppscotch-backend/src/auth/auth.service.ts

@@ -232,7 +232,7 @@ export class AuthService {
       template: 'code-your-own',
       variables: {
         inviteeEmail: email,
-        magicLink: `${url}/enter?token=${generatedTokens.token}`,
+        magicLink: `${url}/magic-link?token=${generatedTokens.token}`,
       },
     });
 

packages/hoppscotch-backend/src/auth/helper.ts

@@ -63,7 +63,7 @@ export const authCookieHandler = (
   });
 
   if (!redirect) {
-    return res.status(HttpStatus.OK).send();
+    res.status(HttpStatus.OK).send();
   }
 
   // check to see if redirectUrl is a whitelisted url
@@ -72,7 +72,7 @@ export const authCookieHandler = (
     // if it is not redirect by default to REDIRECT_URL
     redirectUrl = process.env.REDIRECT_URL;
 
-  return res.status(HttpStatus.OK).redirect(redirectUrl);
+  res.status(HttpStatus.OK).redirect(redirectUrl);
 };
 
 /**

packages/hoppscotch-common/assets/scss/styles.scss

@@ -459,14 +459,6 @@ pre.ace_editor {
   @apply bg-dividerLight;
 }
 
-.splitpanes--horizontal .splitpanes__pane {
-  @apply transition-none;
-}
-
-.splitpanes--vertical .splitpanes__pane {
-  @apply transition-none;
-}
-
 .cm-focused {
   @apply select-auto;
   @apply outline-none #{!important};

packages/hoppscotch-common/assets/scss/themes.scss

@@ -269,6 +269,7 @@
   --lower-secondary-sticky-fold: 5.063rem;
   --lower-tertiary-sticky-fold: 7.125rem;
   --sidebar-primary-sticky-fold: 2rem;
+  --request-body-sticky-fold: 10rem;
 }
 
 @mixin font-medium {
@@ -285,6 +286,7 @@
   --lower-secondary-sticky-fold: 5.563rem;
   --lower-tertiary-sticky-fold: 7.875rem;
   --sidebar-primary-sticky-fold: 2.25rem;
+  --request-body-sticky-fold: 11rem;
 }
 
 @mixin font-large {
@@ -301,6 +303,7 @@
   --lower-secondary-sticky-fold: 6.063rem;
   --lower-tertiary-sticky-fold: 8.625rem;
   --sidebar-primary-sticky-fold: 2.5rem;
+  --request-body-sticky-fold: 12rem;
 }
 
 :root[data-font-size="small"] {

packages/hoppscotch-common/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/common",
   "private": true,
-  "version": "2023.4.3",
+  "version": "2023.4.0",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",
     "dev:vite": "vite",
@@ -62,7 +62,7 @@
     "js-yaml": "^4.1.0",
     "jsonpath-plus": "^7.0.0",
     "lodash-es": "^4.17.21",
-    "lossless-json": "^2.0.8",
+    "lossless-json": "^1.0.5",
     "nprogress": "^0.2.0",
     "paho-mqtt": "^1.1.0",
     "path": "^0.12.7",
@@ -106,7 +106,7 @@
     "@graphql-codegen/urql-introspection": "^2.2.0",
     "@graphql-typed-document-node/core": "^3.1.1",
     "@iconify-json/lucide": "^1.1.40",
-    "@intlify/vite-plugin-vue-i18n": "^7.0.0",
+    "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@rushstack/eslint-patch": "^1.1.4",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash-es": "^4.17.6",

packages/hoppscotch-common/src/components.d.ts

@@ -57,7 +57,6 @@ declare module '@vue/runtime-core' {
     EnvironmentsMy: typeof import('./components/environments/my/index.vue')['default']
     EnvironmentsMyDetails: typeof import('./components/environments/my/Details.vue')['default']
     EnvironmentsMyEnvironment: typeof import('./components/environments/my/Environment.vue')['default']
-    EnvironmentsSelector: typeof import('./components/environments/Selector.vue')['default']
     EnvironmentsTeams: typeof import('./components/environments/teams/index.vue')['default']
     EnvironmentsTeamsDetails: typeof import('./components/environments/teams/Details.vue')['default']
     EnvironmentsTeamsEnvironment: typeof import('./components/environments/teams/Environment.vue')['default']
@@ -74,26 +73,6 @@ declare module '@vue/runtime-core' {
     History: typeof import('./components/history/index.vue')['default']
     HistoryGraphqlCard: typeof import('./components/history/graphql/Card.vue')['default']
     HistoryRestCard: typeof import('./components/history/rest/Card.vue')['default']
-    HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary']
-    HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary']
-    HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor']
-    HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete']
-    HoppSmartCheckbox: typeof import('@hoppscotch/ui')['HoppSmartCheckbox']
-    HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal']
-    HoppSmartExpand: typeof import('@hoppscotch/ui')['HoppSmartExpand']
-    HoppSmartFileChip: typeof import('@hoppscotch/ui')['HoppSmartFileChip']
-    HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem']
-    HoppSmartLink: typeof import('@hoppscotch/ui')['HoppSmartLink']
-    HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal']
-    HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture']
-    HoppSmartProgressRing: typeof import('@hoppscotch/ui')['HoppSmartProgressRing']
-    HoppSmartRadioGroup: typeof import('@hoppscotch/ui')['HoppSmartRadioGroup']
-    HoppSmartSlideOver: typeof import('@hoppscotch/ui')['HoppSmartSlideOver']
-    HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
-    HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
-    HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
-    HoppSmartWindow: typeof import('@hoppscotch/ui')['HoppSmartWindow']
-    HoppSmartWindows: typeof import('@hoppscotch/ui')['HoppSmartWindows']
     HttpAuthorization: typeof import('./components/http/Authorization.vue')['default']
     HttpAuthorizationApiKey: typeof import('./components/http/authorization/ApiKey.vue')['default']
     HttpAuthorizationBasic: typeof import('./components/http/authorization/Basic.vue')['default']
@@ -119,19 +98,6 @@ declare module '@vue/runtime-core' {
     HttpTestResultReport: typeof import('./components/http/TestResultReport.vue')['default']
     HttpTests: typeof import('./components/http/Tests.vue')['default']
     HttpURLEncodedParams: typeof import('./components/http/URLEncodedParams.vue')['default']
-    IconLucideAlertTriangle: typeof import('~icons/lucide/alert-triangle')['default']
-    IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default']
-    IconLucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
-    IconLucideChevronRight: typeof import('~icons/lucide/chevron-right')['default']
-    IconLucideGlobe: typeof import('~icons/lucide/globe')['default']
-    IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default']
-    IconLucideInbox: typeof import('~icons/lucide/inbox')['default']
-    IconLucideInfo: typeof import('~icons/lucide/info')['default']
-    IconLucideLayers: typeof import('~icons/lucide/layers')['default']
-    IconLucideListEnd: typeof import('~icons/lucide/list-end')['default']
-    IconLucideMinus: typeof import('~icons/lucide/minus')['default']
-    IconLucideSearch: typeof import('~icons/lucide/search')['default']
-    IconLucideUsers: typeof import('~icons/lucide/users')['default']
     LensesHeadersRenderer: typeof import('./components/lenses/HeadersRenderer.vue')['default']
     LensesHeadersRendererEntry: typeof import('./components/lenses/HeadersRendererEntry.vue')['default']
     LensesRenderersHTMLLensRenderer: typeof import('./components/lenses/renderers/HTMLLensRenderer.vue')['default']
@@ -141,6 +107,7 @@ declare module '@vue/runtime-core' {
     LensesRenderersRawLensRenderer: typeof import('./components/lenses/renderers/RawLensRenderer.vue')['default']
     LensesRenderersXMLLensRenderer: typeof import('./components/lenses/renderers/XMLLensRenderer.vue')['default']
     LensesResponseBodyRenderer: typeof import('./components/lenses/ResponseBodyRenderer.vue')['default']
+    ProfilePicture: typeof import('./components/profile/Picture.vue')['default']
     ProfileShortcode: typeof import('./components/profile/Shortcode.vue')['default']
     ProfileShortcodes: typeof import('./components/profile/Shortcodes.vue')['default']
     ProfileUserDelete: typeof import('./components/profile/UserDelete.vue')['default']
@@ -164,7 +131,6 @@ declare module '@vue/runtime-core' {
     SmartItem: typeof import('./../../hoppscotch-ui/src/components/smart/Item.vue')['default']
     SmartLink: typeof import('./../../hoppscotch-ui/src/components/smart/Link.vue')['default']
     SmartModal: typeof import('./../../hoppscotch-ui/src/components/smart/Modal.vue')['default']
-    SmartPicture: typeof import('./../../hoppscotch-ui/src/components/smart/Picture.vue')['default']
     SmartProgressRing: typeof import('./../../hoppscotch-ui/src/components/smart/ProgressRing.vue')['default']
     SmartRadio: typeof import('./../../hoppscotch-ui/src/components/smart/Radio.vue')['default']
     SmartRadioGroup: typeof import('./../../hoppscotch-ui/src/components/smart/RadioGroup.vue')['default']

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

@@ -124,7 +124,7 @@
               theme="popover"
               :on-shown="() => tippyActions.focus()"
             >
-              <HoppSmartPicture
+              <ProfilePicture
                 v-if="currentUser.photoURL"
                 v-tippy="{
                   theme: 'tooltip',
@@ -144,7 +144,7 @@
                   network.isOnline ? 'bg-green-500' : 'bg-red-500'
                 "
               />
-              <HoppSmartPicture
+              <ProfilePicture
                 v-else
                 v-tippy="{ theme: 'tooltip' }"
                 :title="

packages/hoppscotch-common/src/components/collections/SaveRequest.vue

@@ -62,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, reactive, ref, watch } from "vue"
+import { reactive, ref, watch } from "vue"
 import { cloneDeep } from "lodash-es"
 import {
   HoppGQLRequest,
@@ -126,22 +126,12 @@ const emit = defineEmits<{
 }>()
 
 const gqlRequestName = useGQLRequestName()
-const restRequestName = computedWithControl(
+const requestName = computedWithControl(
-  () => currentActiveTab.value,
-  () => currentActiveTab.value.document.request.name
-)
-
-const requestName = ref(
-  props.mode === "rest" ? restRequestName.value : gqlRequestName.value
-)
-
-watch(
   () => [currentActiveTab.value, gqlRequestName.value],
-  () => {
+  () =>
-    if (props.mode === "rest") {
+    props.mode === "rest"
-      requestName.value = currentActiveTab.value?.document.request.name ?? ""
+      ? currentActiveTab.value.document.request.name
-    } else requestName.value = gqlRequestName.value
+      : gqlRequestName.value
-  }
 )
 
 const requestData = reactive({
@@ -202,8 +192,6 @@ const saveRequestAs = async () => {
       ? cloneDeep(currentActiveTab.value.document.request)
       : cloneDeep(getGQLSession().request)
 
-  requestUpdated.name = requestName.value
-
   if (picked.value.pickedType === "my-collection") {
     if (!isHoppRESTRequest(requestUpdated))
       throw new Error("requestUpdated is not a REST Request")
@@ -385,9 +373,6 @@ const updateTeamCollectionOrFolder = (
 
 const requestSaved = () => {
   toast.success(`${t("request.added")}`)
-  nextTick(() => {
-    currentActiveTab.value.document.isDirty = false
-  })
   hideModal()
 }
 

packages/hoppscotch-common/src/components/collections/index.vue

@@ -90,7 +90,7 @@
         '!flex': draggingToRoot && currentReorderingStatus.type !== 'request',
       }"
     >
-      <icon-lucide-list-end class="svg-icons !w-8 !h-8" />
+      <component :is="IconListEnd" class="svg-icons !w-8 !h-8" />
     </div>
     <CollectionsAdd
       :show="showModalAdd"
@@ -221,6 +221,7 @@ import * as E from "fp-ts/Either"
 import { platform } from "~/platform"
 import { createCollectionGists } from "~/helpers/gist"
 import { workspaceStatus$ } from "~/newstore/workspace"
+import IconListEnd from "~icons/lucide/list-end"
 import {
   createNewTab,
   currentActiveTab,

packages/hoppscotch-common/src/components/environments/Selector.vue

@@ -1,173 +0,0 @@
-<template>
-  <tippy
-    interactive
-    trigger="click"
-    theme="popover"
-    :on-shown="() => tippyActions!.focus()"
-  >
-    <span
-      v-tippy="{ theme: 'tooltip' }"
-      :title="`${t('environment.select')}`"
-      class="bg-transparent border-b border-dividerLight select-wrapper"
-    >
-      <HoppButtonSecondary
-        v-if="selectedEnv.type !== 'NO_ENV_SELECTED'"
-        :label="selectedEnv.name"
-        class="flex-1 !justify-start pr-8 rounded-none"
-      />
-      <HoppButtonSecondary
-        v-else
-        :label="`${t('environment.select')}`"
-        class="flex-1 !justify-start pr-8 rounded-none"
-      />
-    </span>
-    <template #content="{ hide }">
-      <div
-        ref="tippyActions"
-        role="menu"
-        class="flex flex-col focus:outline-none"
-        tabindex="0"
-        @keyup.escape="hide()"
-      >
-        <HoppSmartItem
-          :label="`${t('environment.no_environment')}`"
-          :info-icon="
-            selectedEnvironmentIndex.type === 'NO_ENV_SELECTED'
-              ? IconCheck
-              : undefined
-          "
-          :active-info-icon="
-            selectedEnvironmentIndex.type === 'NO_ENV_SELECTED'
-          "
-          @click="
-            () => {
-              selectedEnvironmentIndex = { type: 'NO_ENV_SELECTED' }
-              hide()
-            }
-          "
-        />
-        <div v-if="environmentType === 'my-environments'" class="flex flex-col">
-          <hr v-if="myEnvironments.length > 0" />
-          <HoppSmartItem
-            v-for="(gen, index) in myEnvironments"
-            :key="`gen-${index}`"
-            :label="gen.name"
-            :info-icon="index === selectedEnv.index ? IconCheck : undefined"
-            :active-info-icon="index === selectedEnv.index"
-            @click="
-              () => {
-                selectedEnvironmentIndex = { type: 'MY_ENV', index: index }
-                hide()
-              }
-            "
-          />
-        </div>
-        <div v-else class="flex flex-col">
-          <div
-            v-if="teamEnvLoading"
-            class="flex flex-col items-center justify-center p-4"
-          >
-            <HoppSmartSpinner class="my-4" />
-            <span class="text-secondaryLight">{{ t("state.loading") }}</span>
-          </div>
-          <hr v-if="teamEnvironmentList.length > 0" />
-          <div v-if="isTeamSelected" class="flex flex-col">
-            <HoppSmartItem
-              v-for="(gen, index) in teamEnvironmentList"
-              :key="`gen-team-${index}`"
-              :label="gen.environment.name"
-              :info-icon="
-                gen.id === selectedEnv.teamEnvID ? IconCheck : undefined
-              "
-              :active-info-icon="gen.id === selectedEnv.teamEnvID"
-              @click="
-                () => {
-                  selectedEnvironmentIndex = {
-                    type: 'TEAM_ENV',
-                    teamEnvID: gen.id,
-                    teamID: gen.teamID,
-                    environment: gen.environment,
-                  }
-                  hide()
-                }
-              "
-            />
-          </div>
-          <div
-            v-if="!teamEnvLoading && isAdapterError"
-            class="flex flex-col items-center py-4"
-          >
-            <icon-lucide-help-circle class="mb-4 svg-icons" />
-            {{ errorMessage }}
-          </div>
-        </div>
-      </div>
-    </template>
-  </tippy>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from "vue"
-import IconCheck from "~icons/lucide/check"
-import { TippyComponent } from "vue-tippy"
-import { useI18n } from "~/composables/i18n"
-import { GQLError } from "~/helpers/backend/GQLClient"
-import { Environment } from "@hoppscotch/data"
-import { TeamEnvironment } from "~/helpers/teams/TeamEnvironment"
-import { useStream } from "~/composables/stream"
-import {
-  selectedEnvironmentIndex$,
-  setSelectedEnvironmentIndex,
-} from "~/newstore/environments"
-
-const t = useI18n()
-
-type EnvironmentType = "my-environments" | "team-environments"
-
-const props = defineProps<{
-  environmentType: EnvironmentType
-  myEnvironments: Environment[]
-  teamEnvironmentList: TeamEnvironment[]
-  teamEnvLoading: boolean
-  isAdapterError: boolean
-  errorMessage: GQLError<string>
-  isTeamSelected: boolean
-}>()
-
-const selectedEnvironmentIndex = useStream(
-  selectedEnvironmentIndex$,
-  { type: "NO_ENV_SELECTED" },
-  setSelectedEnvironmentIndex
-)
-
-const selectedEnv = computed(() => {
-  if (selectedEnvironmentIndex.value.type === "MY_ENV") {
-    return {
-      type: "MY_ENV",
-      index: selectedEnvironmentIndex.value.index,
-      name: props.myEnvironments[selectedEnvironmentIndex.value.index].name,
-    }
-  } else if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
-    const teamEnv = props.teamEnvironmentList.find(
-      (env) =>
-        env.id ===
-        (selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
-          selectedEnvironmentIndex.value.teamEnvID)
-    )
-    if (teamEnv) {
-      return {
-        type: "TEAM_ENV",
-        name: teamEnv.environment.name,
-        teamEnvID: selectedEnvironmentIndex.value.teamEnvID,
-      }
-    } else {
-      return { type: "NO_ENV_SELECTED" }
-    }
-  } else {
-    return { type: "NO_ENV_SELECTED" }
-  }
-})
-
-// Template refs
-const tippyActions = ref<TippyComponent | null>(null)
-</script>

packages/hoppscotch-common/src/components/environments/index.vue

@@ -4,15 +4,153 @@
       class="sticky top-0 z-10 flex flex-col flex-shrink-0 overflow-x-auto bg-primary"
     >
       <WorkspaceCurrent :section="t('tab.environments')" />
-      <EnvironmentsSelector
+      <tippy
-        :environment-type="environmentType.type"
+        v-if="environmentType.type === 'my-environments'"
-        :my-environments="myEnvironments"
+        interactive
-        :team-env-loading="loading"
+        trigger="click"
-        :team-environment-list="teamEnvironmentList"
+        theme="popover"
-        :is-adapter-error="adapterError !== null"
+        :on-shown="() => tippyActions!.focus()"
-        :error-message="adapterError ? getErrorMessage(adapterError) : ''"
+      >
-        :is-team-selected="environmentType.selectedTeam !== undefined"
+        <span
+          v-tippy="{ theme: 'tooltip' }"
+          :title="`${t('environment.select')}`"
+          class="bg-transparent border-b border-dividerLight select-wrapper"
+        >
+          <HoppButtonSecondary
+            v-if="
+              selectedEnv.type === 'MY_ENV' && selectedEnv.index !== undefined
+            "
+            :label="myEnvironments[selectedEnv.index].name"
+            class="flex-1 !justify-start pr-8 rounded-none"
           />
+          <HoppButtonSecondary
+            v-else
+            :label="`${t('environment.select')}`"
+            class="flex-1 !justify-start pr-8 rounded-none"
+          />
+        </span>
+        <template #content="{ hide }">
+          <div
+            ref="tippyActions"
+            role="menu"
+            class="flex flex-col focus:outline-none"
+            tabindex="0"
+            @keyup.escape="hide()"
+          >
+            <HoppSmartItem
+              :label="`${t('environment.no_environment')}`"
+              :info-icon="
+                selectedEnvironmentIndex.type !== 'MY_ENV'
+                  ? IconCheck
+                  : undefined
+              "
+              :active-info-icon="selectedEnvironmentIndex.type !== 'MY_ENV'"
+              @click="
+                () => {
+                  selectedEnvironmentIndex = { type: 'NO_ENV_SELECTED' }
+                  hide()
+                }
+              "
+            />
+            <hr v-if="myEnvironments.length > 0" />
+            <HoppSmartItem
+              v-for="(gen, index) in myEnvironments"
+              :key="`gen-${index}`"
+              :label="gen.name"
+              :info-icon="index === selectedEnv.index ? IconCheck : undefined"
+              :active-info-icon="index === selectedEnv.index"
+              @click="
+                () => {
+                  selectedEnvironmentIndex = { type: 'MY_ENV', index: index }
+                  hide()
+                }
+              "
+            />
+          </div>
+        </template>
+      </tippy>
+      <tippy v-else interactive trigger="click" theme="popover">
+        <span
+          v-tippy="{ theme: 'tooltip' }"
+          :title="`${t('environment.select')}`"
+          class="bg-transparent border-b border-dividerLight select-wrapper"
+        >
+          <HoppButtonSecondary
+            v-if="selectedEnv.name"
+            :label="selectedEnv.name"
+            class="flex-1 !justify-start pr-8 rounded-none"
+          />
+          <HoppButtonSecondary
+            v-else
+            :label="`${t('environment.select')}`"
+            class="flex-1 !justify-start pr-8 rounded-none"
+          />
+        </span>
+        <template #content="{ hide }">
+          <div
+            class="flex flex-col"
+            role="menu"
+            tabindex="0"
+            @keyup.escape="hide()"
+          >
+            <HoppSmartItem
+              :label="`${t('environment.no_environment')}`"
+              :info-icon="
+                selectedEnvironmentIndex.type !== 'TEAM_ENV'
+                  ? IconCheck
+                  : undefined
+              "
+              :active-info-icon="selectedEnvironmentIndex.type !== 'TEAM_ENV'"
+              @click="
+                () => {
+                  selectedEnvironmentIndex = { type: 'NO_ENV_SELECTED' }
+                  hide()
+                }
+              "
+            />
+            <div
+              v-if="loading"
+              class="flex flex-col items-center justify-center p-4"
+            >
+              <HoppSmartSpinner class="my-4" />
+              <span class="text-secondaryLight">{{ t("state.loading") }}</span>
+            </div>
+            <hr v-if="teamEnvironmentList.length > 0" />
+            <div
+              v-if="environmentType.selectedTeam !== undefined"
+              class="flex flex-col"
+            >
+              <HoppSmartItem
+                v-for="(gen, index) in teamEnvironmentList"
+                :key="`gen-team-${index}`"
+                :label="gen.environment.name"
+                :info-icon="
+                  gen.id === selectedEnv.teamEnvID ? IconCheck : undefined
+                "
+                :active-info-icon="gen.id === selectedEnv.teamEnvID"
+                @click="
+                  () => {
+                    selectedEnvironmentIndex = {
+                      type: 'TEAM_ENV',
+                      teamEnvID: gen.id,
+                      teamID: gen.teamID,
+                      environment: gen.environment,
+                    }
+                    hide()
+                  }
+                "
+              />
+            </div>
+            <div
+              v-if="!loading && adapterError"
+              class="flex flex-col items-center py-4"
+            >
+              <icon-lucide-help-circle class="mb-4 svg-icons" />
+              {{ getErrorMessage(adapterError) }}
+            </div>
+          </div>
+        </template>
+      </tippy>
       <EnvironmentsMyEnvironment
         environment-index="Global"
         :environment="globalEnvironment"
@@ -53,6 +191,8 @@ import {
 } from "~/newstore/environments"
 import TeamEnvironmentAdapter from "~/helpers/teams/TeamEnvironmentAdapter"
 import { GQLError } from "~/helpers/backend/GQLClient"
+import IconCheck from "~icons/lucide/check"
+import { TippyComponent } from "vue-tippy"
 import { defineActionHandler } from "~/helpers/actions"
 import { workspaceStatus$ } from "~/newstore/workspace"
 import TeamListAdapter from "~/helpers/teams/TeamListAdapter"
@@ -121,7 +261,7 @@ const switchToMyEnvironments = () => {
   adapter.changeTeamID(undefined)
 }
 
-const updateSelectedTeam = (newSelectedTeam: SelectedTeam | undefined) => {
+const updateSelectedTeam = (newSelectedTeam: SelectedTeam) => {
   if (newSelectedTeam) {
     environmentType.value.selectedTeam = newSelectedTeam
     REMEMBERED_TEAM_ID.value = newSelectedTeam.id
@@ -150,23 +290,19 @@ const workspace = useReadonlyStream(workspaceStatus$, { type: "personal" })
 // Used to switch environment type and team when user switch workspace in the global workspace switcher
 // Check if there is a teamID in the workspace, if yes, switch to team environment and select the team
 // If there is no teamID, switch to my environment
-watch(workspace, (newWorkspace) => {
+watch(
-  if (newWorkspace.type === "personal") {
+  () => workspace.value.teamID,
+  (teamID) => {
+    if (!teamID) {
       switchToMyEnvironments()
-    setSelectedEnvironmentIndex({
+    } else if (teamID) {
-      type: "NO_ENV_SELECTED",
+      const team = myTeams.value?.find((t) => t.id === teamID)
-    })
+      if (team) {
-  } else if (newWorkspace.type === "team") {
-    const team = myTeams.value?.find((t) => t.id === newWorkspace.teamID)
         updateSelectedTeam(team)
-
-    if (selectedEnvironmentIndex.value.type !== "MY_ENV") {
-      setSelectedEnvironmentIndex({
-        type: "NO_ENV_SELECTED",
-      })
       }
     }
-})
+  }
+)
 
 watch(
   () => currentUser.value,
@@ -252,6 +388,35 @@ watch(
   { deep: true }
 )
 
+const selectedEnv = computed(() => {
+  if (selectedEnvironmentIndex.value.type === "MY_ENV") {
+    return {
+      type: "MY_ENV",
+      index: selectedEnvironmentIndex.value.index,
+    }
+  } else if (selectedEnvironmentIndex.value.type === "TEAM_ENV") {
+    const teamEnv = teamEnvironmentList.value.find(
+      (env) =>
+        env.id ===
+        (selectedEnvironmentIndex.value.type === "TEAM_ENV" &&
+          selectedEnvironmentIndex.value.teamEnvID)
+    )
+    if (teamEnv) {
+      return {
+        type: "TEAM_ENV",
+        name: teamEnv.environment.name,
+        teamEnvID: selectedEnvironmentIndex.value.teamEnvID,
+      }
+    } else {
+      selectedEnvironmentIndex.value = { type: "NO_ENV_SELECTED" }
+      return { type: "NO_ENV_SELECTED" }
+    }
+  } else {
+    selectedEnvironmentIndex.value = { type: "NO_ENV_SELECTED" }
+    return { type: "NO_ENV_SELECTED" }
+  }
+})
+
 const getErrorMessage = (err: GQLError<string>) => {
   if (err.type === "network_error") {
     return t("error.network_error")
@@ -264,4 +429,7 @@ const getErrorMessage = (err: GQLError<string>) => {
     }
   }
 }
+
+// Template refs
+const tippyActions = ref<TippyComponent | null>(null)
 </script>

packages/hoppscotch-common/src/components/graphql/RequestOptions.vue

@@ -802,3 +802,9 @@ defineActionHandler("request.send-cancel", runQuery)
 defineActionHandler("request.save", saveRequest)
 defineActionHandler("request.reset", clearGQLQuery)
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--upper-tertiary-sticky-fold) !important;
+}
+</style>

packages/hoppscotch-common/src/components/graphql/Response.vue

@@ -120,3 +120,9 @@ const downloadResponse = () => {
 defineActionHandler("response.file.download", () => downloadResponse())
 defineActionHandler("response.copy", () => copyResponse())
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--sidebar-primary-sticky-fold) !important;
+}
+</style>

packages/hoppscotch-common/src/components/graphql/Sidebar.vue

@@ -470,3 +470,9 @@ const handleUseHistory = (entry: GQLHistoryEntry) => {
   props.conn.reset()
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--lower-primary-sticky-fold) !important;
+}
+</style>

packages/hoppscotch-common/src/components/http/Body.vue

@@ -191,3 +191,9 @@ const isContentTypeAlreadyExist = () => {
 // Template refs
 const tippyActions = ref<any | null>(null)
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--request-body-sticky-fold) !important;
+}
+</style>

packages/hoppscotch-common/src/components/http/CodegenModal.vue

@@ -273,3 +273,9 @@ const filteredCodegenDefinitions = computed(() => {
 const { copyIcon, copyResponse } = useCopyResponse(requestCode)
 const { downloadIcon, downloadResponse } = useDownloadResponse("", requestCode)
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: -1rem !important;
+}
+</style>

packages/hoppscotch-common/src/components/http/Headers.vue

@@ -508,3 +508,9 @@ const changeTab = (tab: ComputedHeader["source"]) => {
   else emit("change-tab", "bodyParams")
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--upper-tertiary-sticky-fold) !important;
+}
+</style>

packages/hoppscotch-common/src/components/http/Parameters.vue

@@ -405,3 +405,9 @@ const clearContent = () => {
   bulkParams.value = ""
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--upper-tertiary-sticky-fold) !important;
+}
+</style>

packages/hoppscotch-common/src/components/http/PreRequestScript.vue

@@ -110,3 +110,9 @@ const clearContent = () => {
   preRequestScript.value = ""
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--upper-tertiary-sticky-fold) !important;
+}
+</style>

packages/hoppscotch-common/src/components/http/RawBody.vue

@@ -220,3 +220,9 @@ const prettifyXML = (xml: string) => {
     .join("\r\n")
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--request-body-sticky-fold) !important;
+}
+</style>

packages/hoppscotch-common/src/components/http/Request.vue

@@ -229,10 +229,11 @@ import { useI18n } from "@composables/i18n"
 import { useSetting } from "@composables/settings"
 import { useStreamSubscriber } from "@composables/stream"
 import { useToast } from "@composables/toast"
+import { completePageProgress, startPageProgress } from "@modules/loadingbar"
 import { refAutoReset, useVModel } from "@vueuse/core"
 import * as E from "fp-ts/Either"
 import { isLeft, isRight } from "fp-ts/lib/Either"
-import { computed, onBeforeUnmount, ref } from "vue"
+import { computed, ref, watch } from "vue"
 import { defineActionHandler } from "~/helpers/actions"
 import { runMutation } from "~/helpers/backend/GQLClient"
 import { UpdateRequestDocument } from "~/helpers/backend/graphql"
@@ -310,6 +311,39 @@ const clearAll = ref<any | null>(null)
 const copyRequestAction = ref<any | null>(null)
 const saveRequestAction = ref<any | null>(null)
 
+// Update Nuxt Loading bar
+watch(loading, () => {
+  if (loading.value) {
+    startPageProgress()
+  } else {
+    completePageProgress()
+  }
+})
+
+// TODO: make this oAuthURL() work
+
+// function oAuthURL() {
+//   const auth = useReadonlyStream(props.request.auth$, {
+//     authType: "none",
+//     authActive: true,
+//   })
+
+//   const oauth2Token = pluckRef(auth as Ref<HoppRESTAuthOAuth2>, "token")
+
+//   onBeforeMount(async () => {
+//     try {
+//       const tokenInfo = await oauthRedirect()
+//       if (Object.prototype.hasOwnProperty.call(tokenInfo, "access_token")) {
+//         if (typeof tokenInfo === "object") {
+//           oauth2Token.value = tokenInfo.access_token
+//         }
+//       }
+
+//       // eslint-disable-next-line no-empty
+//     } catch (_) {}
+//   })
+// }
+
 const newSendRequest = async () => {
   if (newEndpoint.value === "" || /^\s+$/.test(newEndpoint.value)) {
     toast.error(`${t("empty.endpoint")}`)
@@ -540,10 +574,6 @@ const saveRequest = () => {
   }
 }
 
-onBeforeUnmount(() => {
-  if (loading.value) cancelRequest()
-})
-
 defineActionHandler("request.send-cancel", () => {
   if (!loading.value) newSendRequest()
   else cancelRequest()

packages/hoppscotch-common/src/components/http/Response.vue

@@ -10,7 +10,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue"
+import { computed, ref, watch } from "vue"
+import { startPageProgress, completePageProgress } from "@modules/loadingbar"
 import { HoppRESTTab } from "~/helpers/rest/tab"
 import { useVModel } from "@vueuse/core"
 
@@ -33,4 +34,9 @@ const hasResponse = computed(
 )
 
 const loading = computed(() => tab.value.response?.type === "loading")
+
+watch(loading, (isLoading) => {
+  if (isLoading) startPageProgress()
+  else completePageProgress()
+})
 </script>

packages/hoppscotch-common/src/components/http/TestResult.vue

@@ -42,7 +42,7 @@
                 class="flex p-4 bg-error text-secondaryDark"
                 role="alert"
               >
-                <icon-lucide-alert-triangle class="mr-4 svg-icons" />
+                <component :is="IconAlertTriangle" class="mr-4 svg-icons" />
                 <div class="flex flex-col">
                   <p>
                     {{ t("environment.no_environment_description") }}
@@ -220,6 +220,7 @@ import { HoppTestResult } from "~/helpers/types/HoppTestResult"
 
 import IconTrash2 from "~icons/lucide/trash-2"
 import IconExternalLink from "~icons/lucide/external-link"
+import IconAlertTriangle from "~icons/lucide/alert-triangle"
 import IconCheck from "~icons/lucide/check"
 import IconClose from "~icons/lucide/x"
 

packages/hoppscotch-common/src/components/http/Tests.vue

@@ -106,3 +106,9 @@ const clearContent = () => {
   testScript.value = ""
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--upper-tertiary-sticky-fold) !important;
+}
+</style>

packages/hoppscotch-common/src/components/http/URLEncodedParams.vue

@@ -432,3 +432,9 @@ const clearContent = () => {
   bulkUrlEncodedParams.value = ""
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--request-body-sticky-fold) !important;
+}
+</style>

packages/hoppscotch-common/src/components/lenses/ResponseBodyRenderer.vue

@@ -123,3 +123,9 @@ watch(selectedLensTab, (newLensID) => {
   selectedTabPreference.value = newLensID
 })
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--lower-tertiary-sticky-fold) !important;
+}
+</style>

packages/hoppscotch-common/src/components/profile/Picture.vue

@@ -0,0 +1,87 @@
+<template>
+  <button
+    tabindex="0"
+    class="relative flex items-center justify-center overflow-visible cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primaryDark"
+    :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
+  >
+    <img
+      v-if="url"
+      class="absolute object-cover object-center transition bg-primaryDark"
+      :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
+      :src="url"
+      :alt="alt"
+      loading="lazy"
+    />
+    <div
+      v-else
+      class="absolute flex items-center justify-center object-cover object-center transition bg-primaryDark text-accentContrast"
+      :class="[`rounded-${rounded}`, `w-${size} h-${size}`]"
+      :style="`background-color: ${initial ? toHex(initial) : '#480000'}`"
+    >
+      <template v-if="initial && initial.charAt(0).toUpperCase()">
+        {{ initial.charAt(0).toUpperCase() }}
+      </template>
+
+      <icon-lucide-user v-else></icon-lucide-user>
+    </div>
+    <span
+      v-if="indicator"
+      class="border-primary border-2 h-2.5 -top-0.5 -right-0.5 w-2.5 absolute"
+      :class="[`rounded-${rounded}`, indicatorStyles]"
+    ></span>
+    <!-- w-5 h-5 rounded-lg -->
+  </button>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue"
+
+export default defineComponent({
+  props: {
+    url: {
+      type: String,
+      default: "",
+    },
+    alt: {
+      type: String,
+      default: "Profile picture",
+    },
+    indicator: {
+      type: Boolean,
+      default: false,
+    },
+    indicatorStyles: {
+      type: String,
+      default: "bg-green-500",
+    },
+    rounded: {
+      type: String,
+      default: "full",
+    },
+    size: {
+      type: String,
+      default: "5",
+    },
+    initial: {
+      type: String as PropType<string | undefined | null>,
+      default: "",
+    },
+  },
+  methods: {
+    toHex(initial: string) {
+      let hash = 0
+      if (initial.length === 0) return hash
+      for (let i = 0; i < initial.length; i++) {
+        hash = initial.charCodeAt(i) + ((hash << 5) - hash)
+        hash = hash & hash
+      }
+      let color = "#"
+      for (let i = 0; i < 3; i++) {
+        const value = (hash >> (i * 8)) & 255
+        color += `00${value.toString(16)}`.slice(-2)
+      }
+      return color
+    },
+  },
+})
+</script>

packages/hoppscotch-common/src/components/realtime/Communication.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="flex flex-col flex-1">
+  <div
+    class="flex flex-col flex-1"
+    :class="{ 'showing-event-field': showEventField }"
+  >
     <div
       v-if="showEventField"
       class="sticky z-10 flex items-center justify-center flex-shrink-0 overflow-x-auto border-b bg-primary border-dividerLight"
@@ -271,3 +274,13 @@ const prettifyRequestBody = () => {
 
 defineActionHandler("request.send-cancel", sendMessage)
 </script>
+
+<style lang="scss" scoped>
+:deep(.cm-panels) {
+  top: var(--upper-tertiary-sticky-fold) !important;
+}
+
+.showing-event-field :deep(.cm-panels) {
+  top: var(--request-body-sticky-fold) !important;
+}
+</style>

packages/hoppscotch-common/src/components/smart/EnvInput.vue

@@ -34,7 +34,6 @@ import { inputTheme } from "~/helpers/editor/themes/baseTheme"
 import { HoppReactiveEnvPlugin } from "~/helpers/editor/extensions/HoppEnvironment"
 import { useReadonlyStream } from "@composables/stream"
 import { AggregateEnvironment, aggregateEnvs$ } from "~/newstore/environments"
-import { platform } from "~/platform"
 
 const props = withDefaults(
   defineProps<{
@@ -220,7 +219,6 @@ onMounted(() => {
   if (editor.value) {
     if (!view.value) initView(editor.value)
     if (props.selectTextOnMount) triggerTextSelection()
-    platform.ui?.onCodemirrorInstanceMount?.(editor.value)
   }
 })
 

packages/hoppscotch-common/src/components/teams/Edit.vue

@@ -167,7 +167,7 @@
           v-if="!teamDetails.loading && E.isLeft(teamDetails.data)"
           class="flex flex-col items-center"
         >
-          <icon-lucide-help-circle class="mb-4 svg-icons" />
+          <component :is="IconHelpCircle" class="mb-4 svg-icons" />
           {{ t("error.something_went_wrong") }}
         </div>
       </div>
@@ -220,6 +220,7 @@ import IconCircleDot from "~icons/lucide/circle-dot"
 import IconCircle from "~icons/lucide/circle"
 import IconUserPlus from "~icons/lucide/user-plus"
 import IconUserMinus from "~icons/lucide/user-minus"
+import IconHelpCircle from "~icons/lucide/help-circle"
 
 const t = useI18n()
 const colorMode = useColorMode()

packages/hoppscotch-common/src/components/teams/Invite.vue

@@ -113,7 +113,7 @@
               v-if="!pendingInvites.loading && E.isLeft(pendingInvites.data)"
               class="flex flex-col items-center p-4"
             >
-              <icon-lucide-help-circle class="mb-4 svg-icons" />
+              <component :is="IconHelpCircle" class="mb-4 svg-icons" />
               {{ t("error.something_went_wrong") }}
             </div>
           </div>
@@ -248,7 +248,8 @@
           <span
             class="flex items-center justify-center px-2 py-1 mb-4 font-semibold border rounded-full bg-primaryDark border-divider"
           >
-            <icon-lucide-help-circle
+            <component
+              :is="IconHelpCircle"
               class="mr-2 text-secondaryLight svg-icons"
             />
             {{ t("profile.roles") }}
@@ -367,6 +368,7 @@ import { useColorMode } from "~/composables/theming"
 
 import IconTrash from "~icons/lucide/trash"
 import IconPlus from "~icons/lucide/plus"
+import IconHelpCircle from "~icons/lucide/help-circle"
 import IconAlertTriangle from "~icons/lucide/alert-triangle"
 import IconMailCheck from "~icons/lucide/mail-check"
 import IconCircleDot from "~icons/lucide/circle-dot"

packages/hoppscotch-common/src/components/teams/MemberStack.vue

@@ -5,7 +5,7 @@
       :key="`member-${index}`"
       class="inline-flex"
     >
-      <HoppSmartPicture
+      <ProfilePicture
         v-if="member.user.photoURL"
         v-tippy="{ theme: 'tooltip' }"
         :url="member.user.photoURL"
@@ -14,7 +14,7 @@
         class="ring-primary ring-2"
         @click="handleClick()"
       />
-      <HoppSmartPicture
+      <ProfilePicture
         v-else
         v-tippy="{ theme: 'tooltip' }"
         :title="getUserName(member)"

packages/hoppscotch-common/src/components/teams/index.vue

@@ -47,7 +47,7 @@
         />
       </div>
       <div v-if="!loading && adapterError" class="flex flex-col items-center">
-        <icon-lucide-help-circle class="mb-4 svg-icons" />
+        <component :is="IconHelpCircle" class="mb-4 svg-icons" />
         {{ t("error.something_went_wrong") }}
       </div>
     </div>
@@ -82,6 +82,8 @@ import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { useColorMode } from "@composables/theming"
 
+import IconHelpCircle from "~icons/lucide/help-circle"
+
 const t = useI18n()
 
 const colorMode = useColorMode()

packages/hoppscotch-common/src/components/workspace/Selector.vue

@@ -67,7 +67,7 @@
         v-if="!loading && teamListAdapterError"
         class="flex flex-col items-center py-4"
       >
-        <icon-lucide-help-circle class="mb-4 svg-icons" />
+        <i class="mb-4 material-icons">help_outline</i>
         {{ t("error.something_went_wrong") }}
       </div>
     </div>

packages/hoppscotch-common/src/composables/codemirror.ts

@@ -38,7 +38,6 @@ import {
   baseHighlightStyle,
 } from "@helpers/editor/themes/baseTheme"
 import { HoppEnvironmentPlugin } from "@helpers/editor/extensions/HoppEnvironment"
-import { platform } from "~/platform"
 // TODO: Migrate from legacy mode
 
 type ExtendedEditorConfig = {
@@ -268,7 +267,6 @@ export function useCodemirror(
   onMounted(() => {
     if (el.value) {
       if (!view.value) initView(el.value)
-      platform.ui?.onCodemirrorInstanceMount?.(el.value)
     }
   })
 

packages/hoppscotch-common/src/helpers/editor/themes/baseTheme.ts

@@ -63,6 +63,7 @@ export const baseTheme = EditorView.theme({
   ".cm-panels": {
     backgroundColor: "var(--primary-light-color)",
     color: "var(--secondary-light-color)",
+    zIndex: "1",
   },
   ".cm-panels.cm-panels-top": {
     borderBottom: "1px solid var(--divider-light-color)",
@@ -198,6 +199,7 @@ export const inputTheme = EditorView.theme({
   ".cm-panels": {
     backgroundColor: "var(--primary-light-color)",
     color: "var(--secondary-light-color)",
+    zIndex: "1",
   },
   ".cm-panels.cm-panels-top": {
     borderBottom: "1px solid var(--divider-light-color)",

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

@@ -24,10 +24,7 @@
             >
               <Pane class="flex flex-1 !overflow-auto">
                 <main class="flex flex-1 w-full" role="main">
-                  <RouterView
+                  <RouterView v-slot="{ Component }" class="flex flex-1">
-                    v-slot="{ Component }"
-                    class="flex flex-1 min-w-0"
-                  >
                     <Transition name="fade" mode="out-in" appear>
                       <component :is="Component" />
                     </Transition>

packages/hoppscotch-common/src/modules/i18n.ts

@@ -7,6 +7,7 @@ import { HoppModule } from "."
 
 import languages from "../../languages.json"
 
+import en from "../../locales/en.json"
 import { throwError } from "~/helpers/functional/error"
 import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
 
@@ -122,6 +123,11 @@ export default <HoppModule>{
       fallbackLocale: "en",
       legacy: false,
       allowComposition: true,
+
+      // TODO: Fix this to allow for dynamic imports
+      messages: {
+        en,
+      },
     })
 
     app.use(i18n)

packages/hoppscotch-common/src/newstore/environments.ts

@@ -37,28 +37,14 @@ type EnvironmentStore = typeof defaultEnvironmentsState
 
 const dispatchers = defineDispatchers({
   setSelectedEnvironmentIndex(
-    store: EnvironmentStore,
+    _: EnvironmentStore,
     {
       selectedEnvironmentIndex,
     }: { selectedEnvironmentIndex: SelectedEnvironmentIndex }
   ) {
-    if (selectedEnvironmentIndex.type === "MY_ENV") {
-      if (store.environments[selectedEnvironmentIndex.index]) {
     return {
       selectedEnvironmentIndex,
     }
-      } else {
-        return {
-          selectedEnvironmentIndex: {
-            type: "NO_ENV_SELECTED",
-          },
-        }
-      }
-    } else {
-      return {
-        selectedEnvironmentIndex,
-      }
-    }
   },
   appendEnvironments(
     { environments }: EnvironmentStore,
@@ -339,8 +325,7 @@ export const selectedEnvironmentIndex$ = environmentsStore.subject$.pipe(
   distinctUntilChanged()
 )
 
-export const currentEnvironment$: Observable<Environment | undefined> =
+export const currentEnvironment$ = environmentsStore.subject$.pipe(
-  environmentsStore.subject$.pipe(
   map(({ environments, selectedEnvironmentIndex }) => {
     if (selectedEnvironmentIndex.type === "NO_ENV_SELECTED") {
       const env: Environment = {
@@ -373,7 +358,7 @@ export const aggregateEnvs$: Observable<AggregateEnvironment[]> = combineLatest(
   map(([selectedEnv, globalVars]) => {
     const results: AggregateEnvironment[] = []
 
-    selectedEnv?.variables.forEach(({ key, value }) =>
+    selectedEnv.variables.forEach(({ key, value }) =>
       results.push({ key, value, sourceEnv: selectedEnv.name })
     )
     globalVars.forEach(({ key, value }) =>

packages/hoppscotch-common/src/newstore/localpersistence.ts

@@ -1,6 +1,8 @@
 /* eslint-disable no-restricted-globals, no-restricted-syntax */
 
 import { clone, assign, isEmpty } from "lodash-es"
+import * as O from "fp-ts/Option"
+import { pipe } from "fp-ts/function"
 import {
   translateToNewRESTCollection,
   translateToNewGQLCollection,
@@ -49,30 +51,7 @@ import {
 } from "~/helpers/rest/tab"
 
 function checkAndMigrateOldSettings() {
-  if (window.localStorage.getItem("selectedEnvIndex")) {
-    const index = window.localStorage.getItem("selectedEnvIndex")
-    if (index) {
-      if (index === "-1") {
-        window.localStorage.setItem(
-          "selectedEnvIndex",
-          JSON.stringify({
-            type: "NO_ENV_SELECTED",
-          })
-        )
-      } else if (Number(index) >= 0) {
-        window.localStorage.setItem(
-          "selectedEnvIndex",
-          JSON.stringify({
-            type: "MY_ENV",
-            index: parseInt(index),
-          })
-        )
-      }
-    }
-  }
-
   const vuexData = JSON.parse(window.localStorage.getItem("vuex") || "{}")
-
   if (isEmpty(vuexData)) return
 
   const { postwoman } = vuexData
@@ -231,21 +210,35 @@ function setupEnvironmentsPersistence() {
 }
 
 function setupSelectedEnvPersistence() {
-  const selectedEnvIndex = JSON.parse(
+  const selectedEnvIndex = pipe(
-    window.localStorage.getItem("selectedEnvIndex") ?? "null"
+    // Value from local storage can be nullable
+    O.fromNullable(window.localStorage.getItem("selectedEnvIndex")),
+    O.map(parseInt), // If not null, parse to integer
+    O.chain(
+      O.fromPredicate(
+        Number.isInteger // Check if the number is proper int (not NaN)
       )
-
+    ),
-  // If there is a selected env index, set it to the store else set it to null
+    O.getOrElse(() => -1) // If all the above conditions pass, we are good, else set default value (-1)
-  if (selectedEnvIndex) {
+  )
-    setSelectedEnvironmentIndex(selectedEnvIndex)
+  // Check if current environment index is -1 ie. no environment is selected
-  } else {
+  if (selectedEnvIndex === -1) {
     setSelectedEnvironmentIndex({
       type: "NO_ENV_SELECTED",
     })
+  } else {
+    setSelectedEnvironmentIndex({
+      type: "MY_ENV",
+      index: selectedEnvIndex,
+    })
   }
 
   selectedEnvironmentIndex$.subscribe((envIndex) => {
-    window.localStorage.setItem("selectedEnvIndex", JSON.stringify(envIndex))
+    if (envIndex.type === "MY_ENV") {
+      window.localStorage.setItem("selectedEnvIndex", envIndex.index.toString())
+    } else {
+      window.localStorage.setItem("selectedEnvIndex", "-1")
+    }
   })
 }
 

packages/hoppscotch-common/src/pages/index.vue

@@ -38,15 +38,10 @@
             <template #suffix>
               <span
                 v-if="tab.document.isDirty"
-                class="flex items-center justify-center text-secondary group-hover:hidden w-4"
+                class="text-green-600 text-[8px] group-hover:hidden w-4"
               >
-                <svg
+                <svg viewBox="0 0 24 24" width="1.2em" height="1.2em">
-                  viewBox="0 0 24 24"
+                  <circle cx="12" cy="12" r="10" fill="currentColor"></circle>
-                  width="1.2em"
-                  height="1.2em"
-                  class="h-1.5 w-1.5"
-                >
-                  <circle cx="12" cy="12" r="12" fill="currentColor"></circle>
                 </svg>
               </span>
             </template>

packages/hoppscotch-common/src/pages/profile.vue

@@ -34,7 +34,7 @@
           ></div>
           <div class="flex flex-col justify-between px-4 space-y-8 md:flex-row">
             <div class="flex items-end">
-              <HoppSmartPicture
+              <ProfilePicture
                 v-if="currentUser.photoURL"
                 :url="currentUser.photoURL"
                 :alt="
@@ -44,7 +44,7 @@
                 size="16"
                 rounded="lg"
               />
-              <HoppSmartPicture
+              <ProfilePicture
                 v-else
                 :initial="currentUser.displayName || currentUser.email"
                 rounded="lg"

packages/hoppscotch-common/src/platform/ui.ts

@@ -5,5 +5,4 @@ export type UIPlatformDef = {
     paddingTop?: Ref<string>
     paddingLeft?: Ref<string>
   }
-  onCodemirrorInstanceMount?: (element: HTMLElement) => void
 }

packages/hoppscotch-selfhost-web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hoppscotch/selfhost-web",
   "private": true,
-  "version": "2023.4.3",
+  "version": "2023.4.0",
   "type": "module",
   "scripts": {
     "dev:vite": "vite",
@@ -46,7 +46,7 @@
     "@graphql-codegen/typescript-urql-graphcache": "^2.3.1",
     "@graphql-codegen/urql-introspection": "^2.2.0",
     "@graphql-typed-document-node/core": "^3.1.1",
-    "@intlify/vite-plugin-vue-i18n": "^7.0.0",
+    "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@rushstack/eslint-patch": "^1.1.4",
     "@typescript-eslint/eslint-plugin": "^5.19.0",
     "@typescript-eslint/parser": "^5.19.0",

packages/hoppscotch-sh-admin/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hoppscotch-sh-admin",
   "private": true,
-  "version": "2023.4.3",
+  "version": "2023.4.0",
   "type": "module",
   "scripts": {
     "dev": "pnpm exec npm-run-all -p -l dev:*",

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

@@ -28,7 +28,7 @@
           arrow
           :on-shown="() => tippyActions!.focus()"
         >
-          <HoppSmartPicture
+          <ProfilePicture
             v-if="currentUser.photoURL"
             v-tippy="{
               theme: 'tooltip',
@@ -37,7 +37,7 @@
             :alt="currentUser.displayName ?? 'No Name'"
             :title="currentUser.displayName ?? currentUser.email ?? 'No Name'"
           />
-          <HoppSmartPicture
+          <ProfilePicture
             v-else
             v-tippy="{ theme: 'tooltip' }"
             :title="currentUser.displayName ?? currentUser.email ?? 'No Name'"

packages/hoppscotch-sh-admin/src/components/profile/Picture.vue

@@ -33,40 +33,55 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts">
-withDefaults(
+import { defineComponent, PropType } from 'vue';
-  defineProps<{
-    url: string
-    alt: string
-    indicator: boolean
-    indicatorStyles: string
-    rounded: string
-    size: string
-    initial: string | undefined | null
-  }>(),
-  {
-    url: "",
-    alt: "Profile picture",
-    indicator: false,
-    indicatorStyles: "bg-green-500",
-    rounded: "full",
-    size: "5",
-    initial: "",
-  }
-)
 
-const toHex = (initial: string) => {
+export default defineComponent({
-  let hash = 0
+  props: {
-  if (initial.length === 0) return hash
+    url: {
+      type: String,
+      default: '',
+    },
+    alt: {
+      type: String,
+      default: 'Profile picture',
+    },
+    indicator: {
+      type: Boolean,
+      default: false,
+    },
+    indicatorStyles: {
+      type: String,
+      default: 'bg-green-500',
+    },
+    rounded: {
+      type: String,
+      default: 'full',
+    },
+    size: {
+      type: String,
+      default: '5',
+    },
+    initial: {
+      type: String as PropType<string | undefined | null>,
+      default: '',
+    },
+  },
+  methods: {
+    toHex(initial: string) {
+      let hash = 0;
+      if (initial.length === 0) return hash;
       for (let i = 0; i < initial.length; i++) {
-    hash = initial.charCodeAt(i) + ((hash << 5) - hash)
+        hash = initial.charCodeAt(i) + ((hash << 5) - hash);
-    hash = hash & hash
+        hash = hash & hash;
       }
-  let color = "#"
+      let color = '#';
       for (let i = 0; i < 3; i++) {
-    const value = (hash >> (i * 8)) & 255
+        const value = (hash >> (i * 8)) & 255;
-    color += `00${value.toString(16)}`.slice(-2)
+        color += `00${value.toString(16)}`.slice(-2);
-  }
-  return color
       }
+      return color;
+    },
+  },
+});
 </script>

packages/hoppscotch-sh-admin/src/components/teams/Invite.vue

@@ -131,7 +131,10 @@
           <span
             class="flex items-center justify-center px-2 py-1 mb-4 font-semibold border rounded-full bg-primaryDark border-divider"
           >
-            <icon-lucide-help-circle class="mr-2 text-secondaryLight svg-icons" />
+            <component
+              :is="IconHelpCircle"
+              class="mr-2 text-secondaryLight svg-icons"
+            />
             Roles
           </span>
           <p>
@@ -205,6 +208,7 @@ import { useMutation, useQuery } from '@urql/vue';
 import { Email, EmailCodec } from '~/helpers/backend/Email';
 import IconTrash from '~icons/lucide/trash';
 import IconPlus from '~icons/lucide/plus';
+import IconHelpCircle from '~icons/lucide/help-circle';
 import IconCircleDot from '~icons/lucide/circle-dot';
 import IconCircle from '~icons/lucide/circle';
 import { computed } from 'vue';

packages/hoppscotch-sh-admin/src/components/teams/Members.vue

@@ -133,7 +133,7 @@
         </div>
       </div>
       <div v-if="!fetching && !team" class="flex flex-col items-center">
-        <icon-lucide-help-circle class="mb-4 svg-icons" />
+        <component :is="IconHelpCircle" class="mb-4 svg-icons" />
         Something went wrong. Please try again later.
       </div>
     </div>
@@ -159,6 +159,7 @@ import IconCircleDot from '~icons/lucide/circle-dot';
 import IconCircle from '~icons/lucide/circle';
 import IconUserPlus from '~icons/lucide/user-plus';
 import IconUserMinus from '~icons/lucide/user-minus';
+import IconHelpCircle from '~icons/lucide/help-circle';
 import IconChevronDown from '~icons/lucide/chevron-down';
 import { useClientHandle, useMutation } from '@urql/vue';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';

packages/hoppscotch-sh-admin/src/components/teams/PendingInvites.vue

@@ -44,7 +44,7 @@
         <span class="text-center"> No pending invites </span>
       </div>
       <div v-if="!fetching && error" class="flex flex-col items-center p-4">
-        <icon-lucide-help-circle class="mb-4 svg-icons" />
+        <component :is="IconHelpCircle" class="mb-4 svg-icons" />
         Something went wrong. Please try again later.
       </div>
     </div>
@@ -53,6 +53,7 @@
 
 <script setup lang="ts">
 import IconTrash from '~icons/lucide/trash';
+import IconHelpCircle from '~icons/lucide/help-circle';
 import { useMutation, useClientHandle } from '@urql/vue';
 import { ref, onMounted } from 'vue';
 import {

packages/hoppscotch-sh-admin/src/modules/admin.ts

@@ -6,7 +6,7 @@ const isAdmin = () => {
   return user ? user.isAdmin : false;
 };
 
-const GUEST_ROUTES = ['index', 'enter'];
+const GUEST_ROUTES = ['index', 'magic-link'];
 
 const isGuestRoute = (to: unknown) => GUEST_ROUTES.includes(to as string);
 

packages/hoppscotch-ui/src/components/smart/FileChip.vue

@@ -1,6 +1,22 @@
 <template>
-  <span class="inline-flex items-center justify-center rounded pl-2 pr-0.5 bg-primaryDark">
+  <span class="chip">
-    <icon-lucide-file class="opacity-75 svg-icons" />
+    <component :is="IconFile" class="opacity-75 svg-icons" />
     <span class="px-2 truncate max-w-54"><slot></slot></span>
   </span>
 </template>
+
+<script setup lang="ts">
+import IconFile from "~icons/lucide/file"
+</script>
+
+<style lang="scss" scoped>
+.chip {
+  @apply inline-flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply rounded;
+  @apply pl-2;
+  @apply pr-0.5;
+  @apply bg-primaryDark;
+}
+</style>

packages/hoppscotch-ui/src/components/smart/Windows.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col flex-1 h-auto overflow-y-hidden flex-nowrap">
     <div
-      class="relative sticky top-0 z-10 flex-shrink-0 overflow-x-auto divide-x divide-dividerLight bg-primaryLight tabs group-tabs"
+      class="relative sticky top-0 z-10 flex-shrink-0 overflow-x-auto tabs bg-primaryLight group-tabs"
     >
       <div
         class="flex flex-1 flex-shrink-0 w-0 overflow-x-auto"
@@ -23,8 +23,7 @@
               <template #item="{ element: [tabID, tabMeta] }">
                 <button
                   :key="`removable-tab-${tabID}`"
-                  :id="`removable-tab-${tabID}`"
+                  class="tab group px-2"
-                  class="px-2 tab group"
                   :class="[{ active: modelValue === tabID }]"
                   :aria-label="tabMeta.label || ''"
                   role="button"
@@ -40,23 +39,18 @@
 
                   <div
                     v-if="!tabMeta.tabhead"
-                    class="w-full px-2 text-left truncate"
+                    class="truncate w-full text-left px-2"
                   >
                     <span class="truncate">
                       {{ tabMeta.label }}
                     </span>
                   </div>
 
-                  <div v-else class="w-full text-left truncate">
+                  <div v-else class="truncate w-full text-left">
                     <component :is="tabMeta.tabhead" />
                   </div>
 
-                  <div
+                  <component v-if="tabMeta.suffix" :is="tabMeta.suffix" />
-                    v-if="tabMeta.suffix"
-                    class="flex items-center justify-center"
-                  >
-                    <component :is="tabMeta.suffix" />
-                  </div>
 
                   <HoppButtonSecondary
                     v-if="tabMeta.isRemovable"
@@ -73,7 +67,7 @@
                       },
                       'close',
                     ]"
-                    class="rounded !p-0.25"
+                    class="!p-0.5"
                     @click.stop="emit('removeTab', tabID)"
                   />
                 </button>
@@ -81,33 +75,33 @@
             </draggable>
           </div>
           <div
-            class="sticky right-0 flex items-center justify-center flex-shrink-0 overflow-x-auto z-14"
+            class="sticky right-0 flex items-center justify-center flex-shrink-0 overflow-x-auto z-8"
           >
+            <slot name="actions">
               <span
                 v-if="canAddNewTab"
-              class="flex items-center justify-center h-full px-3 bg-primaryLight z-8"
+                class="flex items-center justify-center px-2 py-1.5 bg-primaryLight z-8 h-full"
               >
                 <HoppButtonSecondary
                   v-tippy="{ theme: 'tooltip' }"
                   :title="newText ?? t?.('action.new') ?? 'New'"
                   :icon="IconPlus"
-                class="rounded create-new-tab !text-secondaryDark !p-1"
+                  class="rounded !p-1"
                   filled
                   @click="addTab"
                 />
               </span>
+            </slot>
           </div>
         </div>
       </div>
 
-      <slot name="actions" />
-
       <input
         type="range"
         min="1"
         :max="MAX_SCROLL_VALUE"
         v-model="thumbPosition"
-        class="absolute bottom-0 left-0 hidden slider"
+        class="slider absolute bottom-0 hidden left-0"
         :class="{
           '!block': scrollThumb.show,
         }"
@@ -132,15 +126,7 @@ import { pipe } from "fp-ts/function"
 import { not } from "fp-ts/Predicate"
 import * as A from "fp-ts/Array"
 import * as O from "fp-ts/Option"
-import {
+import { ref, ComputedRef, computed, provide, inject, watch } from "vue"
-  ref,
-  ComputedRef,
-  computed,
-  provide,
-  inject,
-  watch,
-  nextTick,
-} from "vue"
 import { useElementSize } from "@vueuse/core"
 import type { Slot } from "vue"
 import draggable from "vuedraggable-es"
@@ -195,10 +181,9 @@ const throwError = (message: string): never => {
   throw new Error(message)
 }
 
-const TAB_WIDTH = 184
 const tabEntries = ref<Array<[string, TabMeta]>>([])
 const tabStyles = computed(() => ({
-  maxWidth: `${tabEntries.value.length * TAB_WIDTH}px`,
+  maxWidth: `${tabEntries.value.length * 184}px`,
   width: "100%",
   minWidth: "0px",
   // transition: "max-width 0.2s",
@@ -238,6 +223,9 @@ const removeTabEntry = (tabID: string) => {
     O.chain((index) => pipe(tabEntries.value, A.deleteAt(index))),
     O.getOrElseW(() => throwError(`Failed to remove tab entry: ${tabID}`))
   )
+  // If we tried to remove the active tabEntries, switch to first tab entry
+  if (props.modelValue === tabID)
+    if (tabEntries.value.length > 0) selectTab(tabEntries.value[0][0])
 }
 const sortTabs = (e: {
   oldDraggableIndex: number
@@ -302,49 +290,6 @@ watch(thumbPosition, (newVal) => {
   const maxScroll = scrollWidth - clientWidth
   scrollContainer.value!.scrollLeft = maxScroll * (newVal / MAX_SCROLL_VALUE)
 })
-
-/*
- * Watch TabID changes
- * and scroll to the tab if it's not visible
- */
-watch(
-  () => props.modelValue,
-  (tabID) => {
-    nextTick(() => {
-      const element = document.getElementById(`removable-tab-${tabID}`)
-
-      const changeThumbPosition: IntersectionObserverCallback = (
-        entries,
-        observer
-      ) => {
-        entries.forEach((entry) => {
-          if (entry.target === element && entry.intersectionRatio >= 1.0) {
-            // Element is visible now. Stop listening for intersection changes
-            observer.disconnect()
-
-            // We still need setTimeout here because the element might not be fully in position yet
-            setTimeout(() => {
-              const { scrollWidth, clientWidth, scrollLeft } =
-                scrollContainer.value!
-              const maxScroll = scrollWidth - clientWidth
-              thumbPosition.value = (scrollLeft / maxScroll) * MAX_SCROLL_VALUE
-            }, 300)
-          }
-        })
-      }
-
-      let observer = new IntersectionObserver(changeThumbPosition, {
-        root: null,
-        rootMargin: "0px",
-        threshold: 1.0,
-      })
-      observer.observe(element!)
-
-      element?.scrollIntoView({ behavior: "smooth", inline: "center" })
-    })
-  },
-  { immediate: true }
-)
 </script>
 
 <style scoped lang="scss">
@@ -389,71 +334,49 @@ watch(
       @apply text-secondaryDark;
       @apply bg-primary;
       @apply before: bg-accent;
-      @apply after: absolute;
-      @apply after: inset-x-0;
-      @apply after: bottom-0;
-      @apply after: bg-primary;
-      @apply after: z-12;
-      @apply after: h-0.25;
-      @apply after: content-DEFAULT;
     }
 
     .close {
       @apply opacity-50;
 
       &.active {
-        @apply opacity-100;
+        @apply opacity-80;
       }
     }
   }
 }
 
-.create-new-tab {
-  @apply after: absolute;
-  @apply after: inset-x-0;
-  @apply after: bottom-0;
-  @apply after: bg-dividerLight;
-  @apply after: z-14;
-  @apply after: h-0.25;
-  @apply after: content-DEFAULT;
-}
-
 $slider-height: 4px;
-
 .slider {
-  --thumb-width: 0;
+  --thumb-width: 300px;
-
+  -webkit-appearance: none;
+  width: 100%;
   height: $slider-height;
-
+  background: transparent;
-  @apply appearance-none;
+  outline: none;
-  @apply w-full;
+  opacity: 0;
-  @apply bg-transparent;
+  -webkit-transition: 0.2s;
-  @apply outline-none;
+  transition: opacity 0.2s;
-  @apply opacity-0;
-  @apply transition;
 
   &::-webkit-slider-thumb {
-    @apply appearance-none;
+    -webkit-appearance: none;
-    @apply min-w-0;
+    appearance: none;
-    @apply bg-dividerDark;
+    min-width: 300px;
-    @apply hover:bg-secondaryLight;
-
     width: var(--thumb-width);
     height: $slider-height;
+    background: gray;
+    cursor: pointer;
   }
-
   &::-moz-range-thumb {
-    @apply appearance-none;
+    min-width: 300px;
-    @apply min-w-0;
-    @apply bg-dividerDark;
-    @apply hover:bg-secondaryLight;
-
     width: var(--thumb-width);
     height: $slider-height;
+    background: gray;
+    cursor: pointer;
   }
 }
 
 .group-tabs:hover .slider {
-  @apply opacity-100;
+  opacity: 0.8;
 }
 </style>

packages/hoppscotch-ui/src/components/smart/index.ts

@@ -18,4 +18,3 @@ export { default as HoppSmartTabs } from "./Tabs.vue"
 export { default as HoppSmartToggle } from "./Toggle.vue"
 export { default as HoppSmartWindow } from "./Window.vue"
 export { default as HoppSmartWindows } from "./Windows.vue"
-export { default as HoppSmartPicture } from "./Picture.vue"

pnpm-lock.yaml

@@ -485,8 +485,8 @@ importers:
         specifier: ^4.17.21
         version: 4.17.21
       lossless-json:
-        specifier: ^2.0.8
+        specifier: ^1.0.5
-        version: 2.0.8
+        version: 1.0.5
       nprogress:
         specifier: ^0.2.0
         version: 0.2.0
@@ -612,8 +612,8 @@ importers:
         specifier: ^1.1.40
         version: 1.1.40
       '@intlify/vite-plugin-vue-i18n':
-        specifier: ^7.0.0
+        specifier: ^6.0.1
-        version: 7.0.0(vite@3.1.4)(vue-i18n@9.2.2)
+        version: 6.0.1(vite@3.1.4)(vue-i18n@9.2.2)
       '@rushstack/eslint-patch':
         specifier: ^1.1.4
         version: 1.1.4
@@ -891,8 +891,8 @@ importers:
         specifier: ^3.1.1
         version: 3.1.1(graphql@15.8.0)
       '@intlify/vite-plugin-vue-i18n':
-        specifier: ^7.0.0
+        specifier: ^6.0.1
-        version: 7.0.0(vite@3.1.4)(vue-i18n@9.2.2)
+        version: 6.0.1(vite@3.1.4)(vue-i18n@9.2.2)
       '@rushstack/eslint-patch':
         specifier: ^1.1.4
         version: 1.1.4
@@ -1203,7 +1203,7 @@ importers:
         version: 1.1.40
       '@intlify/vite-plugin-vue-i18n':
         specifier: ^6.0.1
-        version: 6.0.1(vite@3.2.4)
+        version: 6.0.1(vite@3.1.4)(vue-i18n@9.2.2)
       '@rushstack/eslint-patch':
         specifier: ^1.1.4
         version: 1.1.4
@@ -1700,7 +1700,7 @@ packages:
       convert-source-map: 1.8.0
       debug: 4.3.4(supports-color@9.2.2)
       gensync: 1.0.0-beta.2
-      json5: 2.2.3
+      json5: 2.2.1
       semver: 6.3.0
     transitivePeerDependencies:
       - supports-color
@@ -1729,7 +1729,7 @@ packages:
     resolution: {integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.21.2
+      '@babel/types': 7.18.7
     dev: true
 
   /@babel/helper-builder-binary-assignment-operator-visitor@7.18.6:
@@ -1831,14 +1831,14 @@ packages:
     resolution: {integrity: sha512-CeHxqwwipekotzPDUuJOfIMtcIHBuc7WAzLmTYWctVigqS5RktNMQ5bEwQSuGewzYnCtTWa3BARXeiLxDTv+Ng==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.21.2
+      '@babel/types': 7.18.7
     dev: true
 
   /@babel/helper-module-imports@7.18.6:
     resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.21.2
+      '@babel/types': 7.18.7
     dev: true
 
   /@babel/helper-module-transforms@7.18.6:
@@ -1861,7 +1861,7 @@ packages:
     resolution: {integrity: sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.21.2
+      '@babel/types': 7.18.7
     dev: true
 
   /@babel/helper-plugin-utils@7.18.6:
@@ -1897,7 +1897,7 @@ packages:
       '@babel/helper-member-expression-to-functions': 7.18.6
       '@babel/helper-optimise-call-expression': 7.18.6
       '@babel/traverse': 7.18.6
-      '@babel/types': 7.21.2
+      '@babel/types': 7.18.7
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1906,14 +1906,14 @@ packages:
     resolution: {integrity: sha512-iNpIgTgyAvDQpDj76POqg+YEt8fPxx3yaNBg3S30dxNKm2SWfYhD0TGrK/Eu9wHpUW63VQU894TsTg+GLbUa1g==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.21.2
+      '@babel/types': 7.18.7
     dev: true
 
   /@babel/helper-skip-transparent-expression-wrappers@7.18.6:
     resolution: {integrity: sha512-4KoLhwGS9vGethZpAhYnMejWkX64wsnHPDwvOsKWU6Fg4+AlK2Jz3TyjQLMEPvz+1zemi/WBdkYxCD0bAfIkiw==}
     engines: {node: '>=6.9.0'}
     dependencies:
-      '@babel/types': 7.21.2
+      '@babel/types': 7.18.7
     dev: true
 
   /@babel/helper-split-export-declaration@7.18.6:
@@ -2897,7 +2897,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.18.6
-      '@babel/parser': 7.21.2
+      '@babel/parser': 7.18.6
       '@babel/types': 7.18.7
     dev: true
 
@@ -5414,27 +5414,7 @@ packages:
       - supports-color
     dev: true
 
-  /@intlify/bundle-utils@3.4.0(vue-i18n@9.2.2):
+  /@intlify/bundle-utils@6.0.0(vue-i18n@9.2.2):
-    resolution: {integrity: sha512-2UQkqiSAOSPEHMGWlybqWm4G2K0X+FyYho5AwXz6QklSX1EY5EDmOSxZmwscn2qmKBnp6OYsme5kUrnN9xrWzQ==}
-    engines: {node: '>= 12'}
-    peerDependencies:
-      petite-vue-i18n: '*'
-      vue-i18n: '*'
-    peerDependenciesMeta:
-      petite-vue-i18n:
-        optional: true
-      vue-i18n:
-        optional: true
-    dependencies:
-      '@intlify/message-compiler': 9.3.0-beta.17
-      '@intlify/shared': 9.3.0-beta.17
-      jsonc-eslint-parser: 1.4.1
-      source-map: 0.6.1
-      vue-i18n: 9.2.2(vue@3.2.37)
-      yaml-eslint-parser: 0.3.2
-    dev: true
-
-  /@intlify/bundle-utils@6.0.0:
     resolution: {integrity: sha512-c8nTDgsTrBqVk3LPoF/YEarqeqcW0XAY5Y0UmFl5VKWKRNQh47jzvHRDmeRWhos5bUw1zIdiTixrs99FMJ9j5g==}
     engines: {node: '>= 14.16'}
     peerDependencies:
@@ -5455,6 +5435,7 @@ packages:
       magic-string: 0.30.0
       mlly: 1.2.0
       source-map: 0.6.1
+      vue-i18n: 9.2.2(vue@3.2.37)
       yaml-eslint-parser: 0.3.2
     dev: true
 
@@ -5497,7 +5478,7 @@ packages:
     engines: {node: '>= 14'}
     dev: true
 
-  /@intlify/vite-plugin-vue-i18n@6.0.1(vite@3.2.4):
+  /@intlify/vite-plugin-vue-i18n@6.0.1(vite@3.1.4)(vue-i18n@9.2.2):
     resolution: {integrity: sha512-FFVcxVU4bR9vdDLNbltM5mrhndnXMErO01i0RrpdyMegEt3Nu/YLoH0sFdjRun7/RY4vaEnhTnFvVf9uO0dQvg==}
     engines: {node: '>= 14.6'}
     peerDependencies:
@@ -5512,39 +5493,12 @@ packages:
       vue-i18n:
         optional: true
     dependencies:
-      '@intlify/bundle-utils': 6.0.0
+      '@intlify/bundle-utils': 6.0.0(vue-i18n@9.2.2)
       '@intlify/shared': 9.3.0-beta.17
       '@rollup/pluginutils': 4.2.1
       debug: 4.3.4(supports-color@9.2.2)
       fast-glob: 3.2.11
       source-map: 0.6.1
-      vite: 3.2.4(@types/node@17.0.45)(sass@1.53.0)(terser@5.14.1)
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
-  /@intlify/vite-plugin-vue-i18n@7.0.0(vite@3.1.4)(vue-i18n@9.2.2):
-    resolution: {integrity: sha512-2TbDOQ8XD+vkc0s5OFmr+IY/k4mYMC7pzvx0xGQn+cU/ev314+yi7Z7N7rWcBgiYk1WOUalbGSo3d4nJDxOOyw==}
-    engines: {node: '>= 14.6'}
-    deprecated: This plugin support until Vite 3. If you would like to use on Vite 4, please use @intlify/unplugin-vue-i18n
-    peerDependencies:
-      petite-vue-i18n: '*'
-      vite: ^2.9.0 || ^3.0.0
-      vue-i18n: '*'
-    peerDependenciesMeta:
-      petite-vue-i18n:
-        optional: true
-      vite:
-        optional: true
-      vue-i18n:
-        optional: true
-    dependencies:
-      '@intlify/bundle-utils': 3.4.0(vue-i18n@9.2.2)
-      '@intlify/shared': 9.3.0-beta.17
-      '@rollup/pluginutils': 4.2.1
-      debug: 4.3.4(supports-color@9.2.2)
-      fast-glob: 3.2.12
-      source-map: 0.6.1
       vite: 3.1.4(sass@1.53.0)(terser@5.14.1)
       vue-i18n: 9.2.2(vue@3.2.37)
     transitivePeerDependencies:
@@ -7085,7 +7039,7 @@ packages:
   /@types/babel__core@7.1.19:
     resolution: {integrity: sha512-WEOTgRsbYkvA/KCsDwVEGkd7WAr1e3g31VHQ8zy5gul/V1qKullU/BU5I68X5v7V3GnB9eotmom4v5a5gjxorw==}
     dependencies:
-      '@babel/parser': 7.21.2
+      '@babel/parser': 7.18.6
       '@babel/types': 7.18.7
       '@types/babel__generator': 7.6.4
       '@types/babel__template': 7.4.1
@@ -7095,14 +7049,14 @@ packages:
   /@types/babel__generator@7.6.4:
     resolution: {integrity: sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg==}
     dependencies:
-      '@babel/types': 7.21.2
+      '@babel/types': 7.18.7
     dev: true
 
   /@types/babel__template@7.4.1:
     resolution: {integrity: sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g==}
     dependencies:
-      '@babel/parser': 7.21.2
+      '@babel/parser': 7.18.6
-      '@babel/types': 7.21.2
+      '@babel/types': 7.18.7
     dev: true
 
   /@types/babel__traverse@7.17.1:
@@ -9419,7 +9373,7 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@babel/template': 7.18.6
-      '@babel/types': 7.21.2
+      '@babel/types': 7.18.7
       '@types/babel__core': 7.1.19
       '@types/babel__traverse': 7.17.1
     dev: true
@@ -9429,7 +9383,7 @@ packages:
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
     dependencies:
       '@babel/template': 7.18.6
-      '@babel/types': 7.21.2
+      '@babel/types': 7.18.7
       '@types/babel__core': 7.1.19
       '@types/babel__traverse': 7.17.1
     dev: true
@@ -15937,8 +15891,8 @@ packages:
       js-tokens: 4.0.0
     dev: true
 
-  /lossless-json@2.0.8:
+  /lossless-json@1.0.5:
-    resolution: {integrity: sha512-7/GaZldUc7H5oNZlSk6bF06cRbtA7oF8zWXwbfMZm8yrYC2debx0KvWTBbQIbj6fh08LsXTWg+YtHJshXgYKow==}
+    resolution: {integrity: sha512-RicKUuLwZVNZ6ZdJHgIZnSeA05p8qWc5NW0uR96mpPIjN9WDLUg9+kj1esQU1GkPn9iLZVKatSQK5gyiaFHgJA==}
     dev: false
 
   /loupe@2.3.6: