refactor: more i18n translation strings

components/app/Footer.vue

@@ -88,7 +88,7 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           icon="keyboard"
-          :title="$t('shortcuts')"
+          :title="$t('app.shortcuts')"
           @click.native="showShortcuts = true"
         />
         <ButtonSecondary

components/app/Header.vue

@@ -53,7 +53,7 @@
               <ButtonSecondary
                 v-else
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('account')"
+                :title="$t('header.account')"
                 class="rounded"
                 icon="account_circle"
               />
@@ -111,7 +111,7 @@ export default defineComponent({
 
     const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
     if (!cookiesAllowed) {
-      this.$toast.show(this.$t("we_use_cookies").toString(), {
+      this.$toast.show(this.$t("app.we_use_cookies").toString(), {
         icon: "cookie",
         duration: 0,
         action: [

components/app/Shortcuts.vue

@@ -13,7 +13,7 @@
           justify-between
         "
       >
-        <h3 class="ml-4 heading">{{ $t("shortcuts") }}</h3>
+        <h3 class="ml-4 heading">{{ $t("app.shortcuts") }}</h3>
         <div class="flex">
           <ButtonSecondary
             icon="close"

components/button/Secondary.vue

@@ -29,6 +29,7 @@
       },
     ]"
     :disabled="disabled"
+    tabindex="0"
   >
     <i
       v-if="icon"

components/collections/Add.vue

@@ -12,7 +12,7 @@
           @keyup.enter="addNewCollection"
         />
         <label for="selectLabelAdd">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>

components/collections/AddFolder.vue

@@ -16,7 +16,7 @@
           @keyup.enter="addFolder"
         />
         <label for="selectLabelAddFolder">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>

components/collections/Edit.vue

@@ -12,7 +12,7 @@
           @keyup.enter="saveCollection"
         />
         <label for="selectLabelEdit">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>

components/collections/EditFolder.vue

@@ -16,7 +16,7 @@
           @keyup.enter="editFolder"
         />
         <label for="selectLabelEditFolder">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>

components/collections/EditRequest.vue

@@ -12,7 +12,7 @@
           @keyup.enter="saveRequest"
         />
         <label for="selectLabelEditReq">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>

components/collections/ImportExport.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="`${$t('modal.import_export')} ${$t('collections')}`"
+    :title="`${$t('modal.import_export')} ${$t('modal.collections')}`"
     @close="hideModal"
   >
     <template #actions>

components/collections/graphql/Add.vue

@@ -12,7 +12,7 @@
           @keyup.enter="addNewCollection"
         />
         <label for="selectLabelGqlAdd">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>

components/collections/graphql/AddFolder.vue

@@ -16,7 +16,7 @@
           @keyup.enter="addFolder"
         />
         <label for="selectLabelGqlAddFolder">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>

components/collections/graphql/Edit.vue

@@ -12,7 +12,7 @@
           @keyup.enter="saveCollection"
         />
         <label for="selectLabelGqlEdit">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>

components/collections/graphql/EditFolder.vue

@@ -16,7 +16,7 @@
           @keyup.enter="editFolder"
         />
         <label for="selectLabelGqlEditFolder">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>

components/collections/graphql/EditRequest.vue

@@ -12,7 +12,7 @@
           @keyup.enter="saveRequest"
         />
         <label for="selectLabelGqlEditReq">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>

components/collections/graphql/ImportExport.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="`${$t('modal.import_export')} ${$t('collections')}`"
+    :title="`${$t('modal.import_export')} ${$t('modal.collections')}`"
     @close="hideModal"
   >
     <template #actions>

components/collections/graphql/index.vue

@@ -35,7 +35,7 @@
             v-tippy="{ theme: 'tooltip' }"
             to="https://docs.hoppscotch.io/"
             blank
-            :title="$t('wiki')"
+            :title="$t('app.wiki')"
             icon="help_outline"
           />
           <ButtonSecondary

components/collections/index.vue

@@ -56,7 +56,7 @@
             v-tippy="{ theme: 'tooltip' }"
             to="https://docs.hoppscotch.io/"
             blank
-            :title="$t('wiki')"
+            :title="$t('app.wiki')"
             icon="help_outline"
           />
           <ButtonSecondary

components/docs/Request.vue

@@ -6,18 +6,18 @@
     </h4>
     <p v-if="request.url" class="doc-desc">
       <span>
-        {{ $t("url") }}: <code>{{ request.url || $t("none") }}</code>
+        {{ $t("request.url") }}: <code>{{ request.url || $t("none") }}</code>
       </span>
     </p>
     <p v-if="request.path" class="doc-desc">
       <span>
-        {{ $t("path") }}:
+        {{ $t("request.path") }}:
         <code>{{ request.path || $t("none") }}</code>
       </span>
     </p>
     <p v-if="request.method" class="doc-desc">
       <span>
-        {{ $t("method") }}:
+        {{ $t("request.method") }}:
         <code>{{ request.method || $t("none") }}</code>
       </span>
     </p>
@@ -58,7 +58,9 @@
         </span>
       </p>
     </span>
-    <h4 v-if="request.params" class="heading">{{ $t("parameters") }}</h4>
+    <h4 v-if="request.params" class="heading">
+      {{ $t("request.parameters") }}
+    </h4>
     <span v-if="request.params">
       <p
         v-for="(parameter, index) in request.params"
@@ -86,19 +88,19 @@
     </span>
     <p v-if="request.rawParams" class="doc-desc">
       <span>
-        {{ $t("parameters") }}:
+        {{ $t("request.parameters") }}:
         <code>{{ request.rawParams || $t("none") }}</code>
       </span>
     </p>
     <p v-if="request.contentType" class="doc-desc">
       <span>
-        {{ $t("content_type") }}:
+        {{ $t("request.content_type") }}:
         <code>{{ request.contentType || $t("none") }}</code>
       </span>
     </p>
     <p v-if="request.requestType" class="doc-desc">
       <span>
-        {{ $t("request_type") }}:
+        {{ $t("request.type") }}:
         <code>{{ request.requestType || $t("none") }}</code>
       </span>
     </p>

components/environments/Add.vue

@@ -12,7 +12,7 @@
           @keyup.enter="addNewEnvironment"
         />
         <label for="selectLabelEnvAdd">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>

components/environments/Edit.vue

@@ -14,7 +14,7 @@
             @keyup.enter="saveEnvironment"
           />
           <label for="selectLabelEnvEdit">
-            {{ $t("label") }}
+            {{ $t("action.label") }}
           </label>
         </div>
         <div class="flex flex-1 justify-between items-center">

components/environments/index.vue

@@ -15,7 +15,12 @@
           <span
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('environment.select')"
-            class="border-b border-dividerLight flex-1 select-wrapper"
+            class="
+              bg-primaryLight
+              border-b border-dividerLight
+              flex-1
+              select-wrapper
+            "
           >
             <ButtonSecondary
               v-if="selectedEnvironmentIndex !== -1"
@@ -62,7 +67,7 @@
             v-tippy="{ theme: 'tooltip' }"
             to="https://docs.hoppscotch.io/"
             blank
-            :title="$t('wiki')"
+            :title="$t('app.wiki')"
             icon="help_outline"
           />
           <ButtonSecondary

components/firebase/Login.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="$t('login_to_hoppscotch')"
+    :title="$t('auth.login_to_hoppscotch')"
     dialog
     @close="hideModal"
   >
@@ -163,7 +163,7 @@ export default {
   },
   methods: {
     showLoginSuccess() {
-      this.$toast.info(this.$t("login_success"), {
+      this.$toast.info(this.$t("auth.login_success"), {
         icon: "vpn_key",
       })
     },
@@ -174,20 +174,23 @@ export default {
         const { additionalUserInfo } = await signInUserWithGoogle()
 
         if (additionalUserInfo.isNewUser) {
-          this.$toast.info(`${this.$t("action.turn_on")} ${this.$t("sync")}`, {
+          this.$toast.info(
-            icon: "sync",
+            `${this.$t("action.turn_on")} ${this.$t("auth.sync")}`,
-            duration: null,
+            {
-            closeOnSwipe: false,
+              icon: "sync",
-            action: {
+              duration: null,
-              text: this.$t("yes"),
+              closeOnSwipe: false,
-              onClick: (_, toastObject) => {
+              action: {
-                applySetting("syncHistory", true)
+                text: this.$t("yes"),
-                applySetting("syncCollections", true)
+                onClick: (_, toastObject) => {
-                applySetting("syncEnvironments", true)
+                  applySetting("syncHistory", true)
-                toastObject.remove()
+                  applySetting("syncCollections", true)
+                  applySetting("syncEnvironments", true)
+                  toastObject.remove()
+                },
               },
-            },
+            }
-          })
+          )
         }
 
         this.showLoginSuccess()
@@ -254,20 +257,23 @@ export default {
         setProviderInfo(credential.providerId, credential.accessToken)
 
         if (additionalUserInfo.isNewUser) {
-          this.$toast.info(`${this.$t("action.turn_on")} ${this.$t("sync")}`, {
+          this.$toast.info(
-            icon: "sync",
+            `${this.$t("action.turn_on")} ${this.$t("auth.sync")}`,
-            duration: null,
+            {
-            closeOnSwipe: false,
+              icon: "sync",
-            action: {
+              duration: null,
-              text: this.$t("yes"),
+              closeOnSwipe: false,
-              onClick: (_, toastObject) => {
+              action: {
-                applySetting("syncHistory", true)
+                text: this.$t("yes"),
-                applySetting("syncCollections", true)
+                onClick: (_, toastObject) => {
-                applySetting("syncEnvironments", true)
+                  applySetting("syncHistory", true)
-                toastObject.remove()
+                  applySetting("syncCollections", true)
+                  applySetting("syncEnvironments", true)
+                  toastObject.remove()
+                },
               },
-            },
+            }
-          })
+          )
         }
 
         this.showLoginSuccess()

components/firebase/Logout.vue

@@ -2,7 +2,7 @@
   <div class="flex">
     <SmartItem
       icon="exit_to_app"
-      :label="$t('logout')"
+      :label="$t('auth.logout')"
       @click.native="
         $emit('confirm-logout')
         confirmLogout = true
@@ -32,7 +32,7 @@ export default Vue.extend({
       try {
         await signOutUser()
 
-        this.$toast.info(this.$t("logged_out").toString(), {
+        this.$toast.info(this.$t("auth.logged_out").toString(), {
           icon: "vpn_key",
         })
       } catch (e) {

components/graphql/Request.vue

@@ -17,13 +17,13 @@
           px-4
           focus-visible:border-accent
         "
-        :placeholder="$t('url')"
+        :placeholder="$t('request.url')"
         @keyup.enter="onConnectClick"
       />
       <ButtonPrimary
         id="get"
         name="get"
-        :label="!connected ? $t('connect') : $t('disconnect')"
+        :label="!connected ? $t('action.connect') : $t('action.disconnect')"
         class="rounded-l-none w-28"
         @click.native="onConnectClick"
       />

components/graphql/RequestOptions.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <SmartTabs styles="sticky top-upperPrimaryStickyFold z-10">
-      <SmartTab :id="'query'" :label="$t('query')" :selected="true">
+      <SmartTab :id="'query'" :label="$t('tab.query')" :selected="true">
         <AppSection label="query">
           <div
             class="
@@ -18,7 +18,7 @@
             "
           >
             <label class="font-semibold text-secondaryLight">
-              {{ $t("query") }}
+              {{ $t("request.query") }}
             </label>
             <div class="flex">
               <ButtonSecondary
@@ -68,7 +68,7 @@
         </AppSection>
       </SmartTab>
 
-      <SmartTab :id="'variables'" :label="$t('variables')">
+      <SmartTab :id="'variables'" :label="$t('tab.variables')">
         <AppSection label="variables">
           <div
             class="
@@ -84,7 +84,7 @@
             "
           >
             <label class="font-semibold text-secondaryLight">
-              {{ $t("variables") }}
+              {{ $t("request.variables") }}
             </label>
             <div class="flex">
               <ButtonSecondary

components/graphql/Sidebar.vue

@@ -25,7 +25,7 @@
                 v-tippy="{ theme: 'tooltip' }"
                 to="https://docs.hoppscotch.io/"
                 blank
-                :title="$t('wiki')"
+                :title="$t('app.wiki')"
                 icon="help_outline"
               />
             </div>
@@ -38,7 +38,7 @@
               <SmartTab
                 v-if="queryFields.length > 0"
                 :id="'queries'"
-                :label="$t('queries')"
+                :label="$t('tab.queries')"
                 :selected="true"
                 class="divide-y divide-dividerLight"
               >
@@ -53,7 +53,7 @@
               <SmartTab
                 v-if="mutationFields.length > 0"
                 :id="'mutations'"
-                :label="$t('mutations')"
+                :label="$t('graphql.mutations')"
                 class="divide-y divide-dividerLight"
               >
                 <GraphqlField
@@ -67,7 +67,7 @@
               <SmartTab
                 v-if="subscriptionFields.length > 0"
                 :id="'subscriptions'"
-                :label="$t('subscriptions')"
+                :label="$t('graphql.subscriptions')"
                 class="divide-y divide-dividerLight"
               >
                 <GraphqlField
@@ -82,7 +82,7 @@
                 v-if="graphqlTypes.length > 0"
                 :id="'types'"
                 ref="typesTab"
-                :label="$t('types')"
+                :label="$t('tab.types')"
                 class="divide-y divide-dividerLight"
               >
                 <GraphqlType
@@ -120,7 +120,7 @@
         </AppSection>
       </SmartTab>
 
-      <SmartTab :id="'history'" :label="$t('history')">
+      <SmartTab :id="'history'" :label="$t('tab.history')">
         <History
           ref="graphqlHistoryComponent"
           :page="'graphql'"
@@ -128,7 +128,7 @@
         />
       </SmartTab>
 
-      <SmartTab :id="'collections'" :label="$t('collections')">
+      <SmartTab :id="'collections'" :label="$t('tab.collections')">
         <CollectionsGraphql />
       </SmartTab>
 
@@ -149,14 +149,14 @@
             "
           >
             <label class="font-semibold text-secondaryLight">
-              {{ $t("schema") }}
+              {{ $t("graphql.schema") }}
             </label>
             <div class="flex">
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
                 to="https://docs.hoppscotch.io/"
                 blank
-                :title="$t('wiki')"
+                :title="$t('app.wiki')"
                 icon="help_outline"
               />
               <ButtonSecondary

components/history/index.vue

@@ -23,7 +23,7 @@
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/"
           blank
-          :title="$t('wiki')"
+          :title="$t('app.wiki')"
           icon="help_outline"
         />
         <ButtonSecondary

components/http/Authorization.vue

@@ -15,7 +15,7 @@
     >
       <span class="flex items-center">
         <label class="font-semibold text-secondaryLight">
-          {{ $t("authorization_type") }}
+          {{ $t("authorization.type") }}
         </label>
         <tippy
           ref="authTypeOptions"
@@ -64,13 +64,13 @@
           class="px-2"
           @change="authActive = !authActive"
         >
-          {{ $t("enabled") }}
+          {{ $t("state.enabled") }}
         </SmartToggle>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/"
           blank
-          :title="$t('wiki')"
+          :title="$t('app.wiki')"
           icon="help_outline"
         />
         <ButtonSecondary
@@ -184,7 +184,7 @@
         :on="!URL_EXCLUDES.auth"
         @change="setExclude('auth', !$event)"
       >
-        {{ $t("include_in_url") }}
+        {{ $t("authorization.include_in_url") }}
       </SmartToggle> -->
   </div>
 </template>

components/http/Body.vue

@@ -12,7 +12,7 @@
     >
       <span class="flex items-center">
         <label class="font-semibold text-secondaryLight">
-          {{ $t("content_type") }}
+          {{ $t("request.content_type") }}
         </label>
         <tippy
           ref="contentTypeOptions"

components/http/BodyParameters.vue

@@ -14,14 +14,14 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("request_body") }}
+        {{ $t("request.body") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/"
           blank
-          :title="$t('wiki')"
+          :title="$t('app.wiki')"
           icon="help_outline"
         />
         <ButtonSecondary

components/http/Headers.vue

@@ -14,14 +14,14 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("header_list") }}
+        {{ $t("request.header_list") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/"
           blank
-          :title="$t('wiki')"
+          :title="$t('app.wiki')"
           icon="help_outline"
         />
         <ButtonSecondary

components/http/ImportCurl.vue

@@ -11,7 +11,7 @@
           placeholder=" "
         ></textarea>
         <label for="import-curl">
-          {{ $t("enter_curl") }}
+          {{ $t("request.enter_curl") }}
         </label>
       </div>
     </template>

components/http/Parameters.vue

@@ -14,14 +14,14 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("parameter_list") }}
+        {{ $t("request.parameter_list") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/"
           blank
-          :title="$t('wiki')"
+          :title="$t('app.wiki')"
           icon="help_outline"
         />
         <ButtonSecondary

components/http/PreRequestScript.vue

@@ -14,14 +14,14 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("javascript_code") }}
+        {{ $t("preRequest.javascript_code") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
           blank
-          :title="$t('wiki')"
+          :title="$t('app.wiki')"
           icon="help_outline"
         />
         <ButtonSecondary

components/http/RawBody.vue

@@ -14,14 +14,14 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("raw_request_body") }}
+        {{ $t("request.raw_body") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://docs.hoppscotch.io/"
           blank
-          :title="$t('wiki')"
+          :title="$t('app.wiki')"
           icon="help_outline"
         />
         <ButtonSecondary

components/http/Request.vue

@@ -1,51 +1,63 @@
 <template>
-  <div class="bg-primary flex p-4 top-0 z-10 sticky">
+  <div
-    <div class="relative inline-flex">
+    class="
-      <tippy
+      bg-primary
-        ref="methodOptions"
+      flex flex-col
-        interactive
+      space-y-2
-        trigger="click"
+      p-4
-        theme="popover"
+      top-0
-        arrow
+      z-10
-      >
+      sticky
-        <template #trigger>
+      md:flex-row md:space-y-0
-          <span class="select-wrapper">
+    "
-            <input
+  >
-              id="method"
+    <div class="flex flex-1">
-              class="
+      <div class="flex relative">
-                bg-primaryLight
+        <tippy
-                border border-divider
+          ref="methodOptions"
-                rounded-l
+          interactive
-                cursor-pointer
+          trigger="click"
-                flex
+          theme="popover"
-                font-semibold
+          arrow
-                text-secondaryDark
+        >
-                py-2
+          <template #trigger>
-                px-4
+            <span class="select-wrapper">
-                w-28
+              <input
-                hover:border-dividerDark
+                id="method"
-                focus-visible:border-accent
+                class="
-              "
+                  bg-primaryLight
-              :value="newMethod"
+                  border border-divider
-              :readonly="!isCustomMethod"
+                  rounded-l
-              @input="onSelectMethod($event.target.value)"
+                  cursor-pointer
-            />
+                  flex
-          </span>
+                  font-semibold
-        </template>
+                  text-secondaryDark
-        <SmartItem
+                  py-2
-          v-for="(method, index) in methods"
+                  px-4
-          :key="`method-${index}`"
+                  w-28
-          :label="method"
+                  hover:border-dividerDark
-          @click.native="onSelectMethod(method)"
+                  focus-visible:border-accent
-        />
+                "
-      </tippy>
+                :value="newMethod"
-    </div>
+                :readonly="!isCustomMethod"
-    <div class="flex-1 inline-flex">
+                @input="onSelectMethod($event.target.value)"
-      <SmartEnvInput
+              />
-        v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+            </span>
-        v-model="newEndpoint"
+          </template>
-        :placeholder="$t('url')"
+          <SmartItem
-        styles="
+            v-for="(method, index) in methods"
+            :key="`method-${index}`"
+            :label="method"
+            @click.native="onSelectMethod(method)"
+          />
+        </tippy>
+      </div>
+      <div class="flex flex-1">
+        <SmartEnvInput
+          v-if="EXPERIMENTAL_URL_BAR_ENABLED"
+          v-model="newEndpoint"
+          :placeholder="$t('request.url')"
+          styles="
           bg-primaryLight
           border border-divider
           flex
@@ -56,39 +68,43 @@
           hover:border-dividerDark
           focus-visible:border-accent
         "
-        @enter="newSendRequest()"
+          @enter="newSendRequest()"
-      />
+        />
-      <input
+        <input
-        v-else
+          v-else
-        id="url"
+          id="url"
-        v-model="newEndpoint"
+          v-model="newEndpoint"
-        v-focus
+          v-focus
-        class="
+          class="
-          bg-primaryLight
+            bg-primaryLight
-          border border-divider
+            border border-divider
-          flex flex-1
+            rounded-r
-          text-secondaryDark
+            flex
-          py-2
+            text-secondaryDark
-          px-4
+            w-full
-          focus-visible:border-accent
+            py-2
-        "
+            px-4
-        name="url"
+            md:rounded-r-none
-        type="text"
+            focus-visible:border-accent
-        spellcheck="false"
+          "
-        :placeholder="$t('url')"
+          name="url"
-        autofocus
+          type="text"
-        @keyup.enter="newSendRequest()"
+          spellcheck="false"
-      />
+          :placeholder="$t('request.url')"
+          autofocus
+          @keyup.enter="newSendRequest()"
+        />
+      </div>
     </div>
     <div class="flex">
       <ButtonPrimary
         id="send"
-        class="rounded-none min-w-20"
+        class="rounded-r-none flex-1 min-w-20 md:rounded-l-none"
-        :label="!loading ? $t('send') : $t('cancel')"
+        :label="!loading ? $t('action.send') : $t('action.cancel')"
         :shortcut="[getSpecialKey(), 'G']"
         @click.native="!loading ? newSendRequest() : cancelRequest()"
       />
-      <span class="inline-flex">
+      <span class="flex">
         <tippy
           ref="sendOptions"
           interactive
@@ -131,13 +147,13 @@
         </tippy>
       </span>
       <ButtonSecondary
-        class="rounded-r-none ml-2"
+        class="rounded-r-none flex-1 ml-2"
         :label="$t('request.save')"
         :shortcut="[getSpecialKey(), 'S']"
         outline
         @click.native="showSaveRequestModal = true"
       />
-      <span class="inline-flex">
+      <span class="flex">
         <tippy
           ref="saveOptions"
           interactive

components/http/Tests.vue

@@ -14,14 +14,14 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("javascript_code") }}
+        {{ $t("test.javascript_code") }}
       </label>
       <div class="flex">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
           blank
-          :title="$t('wiki')"
+          :title="$t('app.wiki')"
           icon="help_outline"
         />
         <ButtonSecondary

components/lenses/renderers/HTMLLensRenderer.vue

@@ -20,7 +20,9 @@
         <ButtonSecondary
           v-if="response.body"
           v-tippy="{ theme: 'tooltip' }"
-          :title="previewEnabled ? $t('hide.preview') : $t('preview_html')"
+          :title="
+            previewEnabled ? $t('hide.preview') : $t('response.preview_html')
+          "
           :icon="!previewEnabled ? 'visibility' : 'visibility_off'"
           @click.native.prevent="togglePreview"
         />

components/realtime/Log.vue

@@ -27,7 +27,7 @@
           }}{{ entry.payload }}</span
         >
       </span>
-      <span v-else>{{ $t("waiting_for_connection") }}</span>
+      <span v-else>{{ $t("response.waiting_for_connection") }}</span>
     </div>
   </div>
 </template>

components/realtime/Mqtt.vue

@@ -22,13 +22,17 @@
                     px-4
                     focus-visible:border-accent
                   "
-                  :placeholder="$t('url')"
+                  :placeholder="$t('mqtt.url')"
                 />
                 <ButtonPrimary
                   id="connect"
                   :disabled="!validUrl"
                   class="rounded-l-none w-28"
-                  :label="connectionState ? $t('disconnect') : $t('connect')"
+                  :label="
+                    connectionState
+                      ? $t('action.disconnect')
+                      : $t('action.connect')
+                  "
                   :loading="connectingState"
                   @click.native="toggleConnection"
                 />
@@ -68,7 +72,7 @@
         </div>
         <div class="flex flex-1 p-4 items-center justify-between">
           <label for="mqtt-message" class="font-semibold text-secondaryLight">{{
-            $t("communication")
+            $t("mqtt.communication")
           }}</label>
         </div>
         <div class="flex px-4">
@@ -77,7 +81,7 @@
             v-model="msg"
             class="input !rounded-r-none"
             type="text"
-            :placeholder="$t('message')"
+            :placeholder="$t('mqtt.message')"
             spellcheck="false"
           />
           <ButtonPrimary

components/realtime/Socketio.vue

@@ -24,7 +24,7 @@
                     px-4
                     focus-visible:border-accent
                   "
-                  :placeholder="$t('url')"
+                  :placeholder="$t('socketio.url')"
                   @keyup.enter="urlValid ? toggleConnection() : null"
                 />
                 <input
@@ -47,7 +47,11 @@
                   :disabled="!urlValid"
                   name="connect"
                   class="rounded-l-none w-28"
-                  :label="!connectionState ? $t('connect') : $t('disconnect')"
+                  :label="
+                    !connectionState
+                      ? $t('action.connect')
+                      : $t('action.disconnect')
+                  "
                   :loading="connectingState"
                   @click.native="toggleConnection"
                 />
@@ -72,7 +76,7 @@
       <AppSection label="messages">
         <div class="flex flex-col flex-1 p-4 inline-flex">
           <label for="events" class="font-semibold text-secondaryLight">
-            {{ $t("events") }}
+            {{ $t("socketio.events") }}
           </label>
         </div>
         <div class="flex px-4">
@@ -81,14 +85,14 @@
             v-model="communication.eventName"
             class="input"
             name="event_name"
-            :placeholder="$t('event_name')"
+            :placeholder="$t('socketio.event_name')"
             type="text"
             :disabled="!connectionState"
           />
         </div>
         <div class="flex flex-1 p-4 items-center justify-between">
           <label class="font-semibold text-secondaryLight">{{
-            $t("communication")
+            $t("socketio.communication")
           }}</label>
           <div class="flex">
             <ButtonSecondary
@@ -130,7 +134,7 @@
                 name="send"
                 :disabled="!connectionState"
                 class="rounded-l-none"
-                :label="$t('send')"
+                :label="$t('action.send')"
                 @click.native="sendMessage"
               />
             </div>

components/realtime/Sse.vue

@@ -20,7 +20,7 @@
               px-4
               focus-visible:border-accent
             "
-            :placeholder="$t('url')"
+            :placeholder="$t('sse.url')"
             @keyup.enter="serverValid ? toggleSSEConnection() : null"
           />
           <label
@@ -35,7 +35,7 @@
               truncate
             "
           >
-            {{ $t("event_type") }}
+            {{ $t("sse.event_type") }}
           </label>
           <input
             id="event-type"
@@ -57,7 +57,9 @@
             :disabled="!serverValid"
             name="start"
             class="rounded-l-none w-22"
-            :label="!connectionSSEState ? $t('start') : $t('stop')"
+            :label="
+              !connectionSSEState ? $t('action.start') : $t('action.stop')
+            "
             :loading="connectingState"
             @click.native="toggleSSEConnection"
           />

components/realtime/Websocket.vue

@@ -23,7 +23,7 @@
                   type="url"
                   spellcheck="false"
                   :class="{ error: !urlValid }"
-                  :placeholder="$t('url')"
+                  :placeholder="$t('websocket.url')"
                   @keyup.enter="urlValid ? toggleConnection() : null"
                 />
                 <ButtonPrimary
@@ -31,7 +31,11 @@
                   :disabled="!urlValid"
                   class="rounded-l-none w-28"
                   name="connect"
-                  :label="!connectionState ? $t('connect') : $t('disconnect')"
+                  :label="
+                    !connectionState
+                      ? $t('action.connect')
+                      : $t('action.disconnect')
+                  "
                   :loading="connectingState"
                   @click.native="toggleConnection"
                 />
@@ -156,7 +160,7 @@
             for="websocket-message"
             class="font-semibold text-secondaryLight"
           >
-            {{ $t("communication") }}
+            {{ $t("websocket.communication") }}
           </label>
         </div>
         <div class="flex px-4">
@@ -166,7 +170,7 @@
             name="message"
             type="text"
             :disabled="!connectionState"
-            :placeholder="$t('message')"
+            :placeholder="$t('websocket.message')"
             class="input !rounded-r-none"
             @keyup.enter="connectionState ? sendMessage() : null"
             @keyup.up="connectionState ? walkHistory('up') : null"
@@ -177,7 +181,7 @@
             name="send"
             :disabled="!connectionState"
             class="rounded-l-none"
-            :label="$t('send')"
+            :label="$t('action.send')"
             @click.native="sendMessage"
           />
         </div>

components/teams/Add.vue

@@ -12,7 +12,7 @@
           @keyup.enter="addNewTeam"
         />
         <label for="selectLabelTeamAdd">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>

components/teams/Edit.vue

@@ -13,7 +13,7 @@
             @keyup.enter="saveTeam"
           />
           <label for="selectLabelTeamEdit">
-            {{ $t("label") }}
+            {{ $t("action.label") }}
           </label>
         </div>
         <div class="flex flex-1 justify-between items-center">

layouts/default.vue

@@ -159,7 +159,7 @@ export default defineComponent({
             duration: 0,
             action: [
               {
-                text: this.$t("reload").toString(),
+                text: this.$t("app.reload").toString(),
                 onClick: (_, toastObject) => {
                   toastObject.goAway(0)
                   window.location.reload()

layouts/error.vue

@@ -3,7 +3,7 @@
     <h1 class="mb-4 text-4xl heading">{{ statusCode }}</h1>
     <h3 class="select-text">{{ message }}</h3>
     <p class="mt-4">
-      <ButtonSecondary to="/" icon="home" outline :label="$t('home')" />
+      <ButtonSecondary to="/" icon="home" outline :label="$t('app.home')" />
       <ButtonSecondary
         icon="refresh"
         :label="$t('reload')"

locales/en.json

@@ -9,19 +9,27 @@
   "header": {
     "install_pwa": "Install app",
     "save_workspace": "Save My Workspace",
+    "account": "Account",
     "login": "Login"
   },
   "action": {
+    "label": "Label",
     "turn_on": "Turn on",
     "turn_off": "Turn off",
     "dismiss": "Dismiss",
     "copy": "Copy",
+    "send": "Send",
+    "cancel": "Cancel",
     "learn_more": "Learn more",
     "go_back": "Go back",
     "delete": "Delete",
     "remove": "Remove",
     "clear": "Clear",
-    "clear_all": "Clear all"
+    "clear_all": "Clear all",
+    "connect": "Connect",
+    "disconnect": "Disconnect",
+    "start": "Start",
+    "stop": "Stop"
   },
   "confirm": {
     "logout": "Are you sure you want to logout?",
@@ -90,9 +98,13 @@
   "app": {
     "name": "Hoppscotch",
     "version": "v2.0",
+    "home": "Home",
+    "wiki": "Wiki",
+    "we_use_cookies": "We use cookies",
     "documentation": "Documentation",
     "whats_new": "What's new?",
     "chat_with_us": "Chat with us",
+    "shortcuts": "Shortcuts",
     "keyboard_shortcuts": "Keyboard shortcuts",
     "join_discord_community": "Join our Discord community",
     "twitter": "Twitter",
@@ -153,7 +165,8 @@
   },
   "modal": {
     "confirm": "Confirm",
-    "import_export": "Import / Export"
+    "import_export": "Import / Export",
+    "collections": "Collections"
   },
   "import": {
     "title": "Import",
@@ -182,15 +195,44 @@
     "account_exists": "Account exists with different credential - Login to link both accounts",
     "send_magic_link": "Send a magic link",
     "we_sent_magic_link": "We sent you a magic link!",
-    "we_sent_magic_link_description": "Check your inbox - we sent an email to {email}. It contains a magic link that will log you in."
+    "we_sent_magic_link_description": "Check your inbox - we sent an email to {email}. It contains a magic link that will log you in.",
+    "sync": "Sync",
+    "login_success": "Successfully logged in",
+    "logout": "Logout",
+    "logged_out": "Logged out",
+    "login_to_hoppscotch": "Login to Hoppscotch"
   },
   "tab": {
     "websocket": "WebSocket",
+    "queries": "Queries",
+    "sse": "SSE",
     "mqtt": "MQTT",
-    "headers": "Headers"
+    "types": "Types",
+    "query": "Query",
+    "variables": "Variables",
+    "headers": "Headers",
+    "pre_request_script": "Pre-request Script",
+    "collections": "Collections",
+    "body": "Body",
+    "authorization": "Authorization",
+    "tests": "Tests",
+    "socketio": "Socket.IO",
+    "parameters": "Parameters",
+    "history": "History"
+  },
+  "authorization": {
+    "type": "Authorization Type",
+    "include_in_url": "Include in URL"
   },
   "websocket": {
-    "protocols": "Protocols"
+    "protocols": "Protocols",
+    "message": "Message",
+    "url": "URL",
+    "communication": "Communication"
+  },
+  "sse": {
+    "url": "URL",
+    "event_type": "Event type"
   },
   "mqtt": {
     "topic": "Topic",
@@ -198,28 +240,56 @@
     "topic_title": "Publish / Subscribe topic",
     "publish": "Publish",
     "subscribe": "Subscribe",
-    "unsubscribe": "Unsubscribe"
+    "unsubscribe": "Unsubscribe",
+    "message": "Message",
+    "url": "URL",
+    "communication": "Communication"
+  },
+  "socketio": {
+    "event_name": "Event Name",
+    "events": "Events",
+    "url": "URL",
+    "communication": "Communication"
   },
   "request": {
     "title": "Request",
+    "query": "Query",
     "copy_link": "Copy link",
+    "variables": "Variables",
+    "url": "URL",
+    "header_list": "Header List",
     "save": "Save",
+    "parameters": "Parameters",
+    "type": "Request type",
     "save_as": "Save as",
+    "parameter_list": "Query Parameters",
+    "body": "Request Body",
+    "raw_body": "Raw Request Body",
     "name": "Request name",
     "choose_language": "Choose language",
     "generate_code": "Generate code",
     "generated_code": "Generated code",
+    "enter_curl": "Enter cURL",
+    "content_type": "Content Type",
     "share": "Share"
   },
   "settings": {
     "account_description": "Customize your account settings.",
     "theme_description": "Customize your application theme.",
+    "account": "Account",
+    "background": "Background",
+    "proxy_url": "Proxy URL",
+    "official_proxy_hosting": "Official Proxy is hosted by Hoppscotch.",
     "user": "User",
     "account_name_description": "This is your display name.",
     "account_email_description": "Your primary email address.",
     "interceptor_description": "Middleware between application and APIs.",
     "sync_description": "These settings are synced to cloud.",
+    "proxy": "Proxy",
     "sync": "Synchronise",
+    "sync_history": "History",
+    "sync_collections": "Collections",
+    "sync_environments": "Environments",
     "shortcuts_indicator": "Shortcuts indicator",
     "telemetry": "Telemetry",
     "interceptor": "Interceptor",
@@ -239,20 +309,28 @@
     "accent_color": "Accent color",
     "telemetry_helps_us": "Telemetry helps us to personalize our operations and deliver the best experience to you.",
     "experiments": "Experiments",
-    "experiments_notice": "This is a collection of experiments we're working on that might turn out to be useful, fun, both, or neither. They're not final and may not be stable, so if something overly weird happens, don't panic. Just turn the dang thing off. Jokes aside, "
+    "experiments_notice": "This is a collection of experiments we're working on that might turn out to be useful, fun, both, or neither. They're not final and may not be stable, so if something overly weird happens, don't panic. Just turn the dang thing off. Jokes aside, ",
+    "extension_ver_not_reported": "Not Reported",
+    "extension_version": "Extension Version",
+    "extensions_use_toggle": "Use the browser extension to send requests (if present)",
+    "proxy_use_toggle": "Use the proxy middleware to send requests",
+    "extensions": "Extensions",
+    "theme": "Theme"
   },
   "layout": {
     "zen_mode": "Zen mode"
   },
   "preRequest": {
     "script": "Pre-Request Script",
-    "snippets": "Snippets"
+    "snippets": "Snippets",
+    "javascript_code": "JavaScript Code"
   },
   "test": {
     "script": "Script",
     "results": "Test Results",
     "report": "Test Report",
-    "snippets": "Snippets"
+    "snippets": "Snippets",
+    "javascript_code": "JavaScript Code"
   },
   "shortcut": {
     "general": {
@@ -278,6 +356,8 @@
     },
     "request": {
       "title": "Request",
+      "method": "Method",
+      "path": "Path",
       "send_request": "Send Request",
       "save_to_collections": "Save to Collections",
       "copy_request_link": "Copy Request Link",
@@ -291,6 +371,11 @@
       "delete_method": "Select DELETE method"
     }
   },
+  "graphql": {
+    "mutations": "Mutations",
+    "subscriptions": "Subscriptions",
+    "schema": "Schema"
+  },
   "error": {
     "something_went_wrong": "Something went wrong",
     "check_console_details": "Check console log for details.",
@@ -322,67 +407,21 @@
     "status": "Status",
     "time": "Time",
     "size": "Size",
+    "waiting_for_connection": "waiting for connection",
+    "preview_html": "Preview HTML",
     "html": "HTML",
     "xml": "XML",
     "json": "JSON",
     "raw": "Raw",
     "image": "Image"
   },
-  "options": "Options",
+  "state": {
-  "communication": "Communication",
+    "enabled": "Enabled",
-  "endpoint": "Endpoint",
+    "disabled": "Disabled"
-  "schema": "Schema",
+  },
-  "theme": "Theme",
-  "shortcuts": "Shortcuts",
-  "javascript_code": "JavaScript Code",
-  "method": "Method",
-  "path": "Path",
-  "label": "Label",
-  "content_type": "Content Type",
-  "raw": "Raw",
-  "parameter_list": "Query Parameters",
-  "body": "Body",
-  "request_body": "Request Body",
-  "raw_request_body": "Raw Request Body",
-  "authorization": "Authorization",
-  "authorization_type": "Authorization Type",
-  "include_in_url": "Include in URL",
-  "parameters": "Parameters",
-  "preview_html": "Preview HTML",
-  "history": "History",
-  "collections": "Collections",
-  "request_type": "Request type",
-  "status": "Status",
-  "waiting_for_connection": "waiting for connection",
-  "message": "Message",
-  "sse": "SSE",
-  "server": "Server",
-  "events": "Events",
-  "url": "URL",
-  "event_type": "Event type",
-  "variables": "Variables",
-  "get_schema": "Get schema",
-  "header_list": "Header List",
-  "query": "Query",
-  "queries": "Queries",
-  "query_variables": "Variables",
-  "mutations": "Mutations",
-  "subscriptions": "Subscriptions",
-  "types": "Types",
-  "send": "Send",
-  "background": "Background",
-  "labels": "Labels",
-  "enabled": "Enabled",
-  "disabled": "Disabled",
-  "proxy": "Proxy",
-  "official_proxy_hosting": "Official Proxy is hosted by Hoppscotch.",
   "read_the": "Read the",
   "proxy_privacy_policy": "Proxy privacy policy",
   "contact_us": "Contact us",
-  "connect": "Connect",
-  "disconnect": "Disconnect",
-  "start": "Start",
-  "stop": "Stop",
   "access_token": "Access Token",
   "token_list": "Token List",
   "get_token": "Get New Token",
@@ -401,7 +440,6 @@
   "access_token_url": "Access Token URL",
   "client_id": "Client ID",
   "scope": "Scope",
-  "state": "State",
   "token_req_list": "Token Request List",
   "no_path": "No path",
   "no_label": "No label",
@@ -435,7 +473,6 @@
   "prettify_query": "Prettify Query",
   "json_prettify_invalid_body": "Couldn't prettify an invalid body, solve json syntax errors and try again",
   "prettify_body": "Prettify body",
-  "cancel": "Cancel",
   "cancelled": "Cancelled",
   "save": "Save",
   "yes": "Yes",
@@ -467,7 +504,6 @@
   "choose_file": "Choose a file",
   "file_imported": "File imported",
   "f12_details": "(F12 for details)",
-  "we_use_cookies": "We use cookies",
   "copied_to_clipboard": "Copied to clipboard",
   "finished_in": "Finished in {duration}ms",
   "check_graphql_valid": "Check the URL to see if it is a valid GraphQL endpoint",
@@ -477,34 +513,5 @@
   "curl_invalid_format": "cURL is not formatted properly",
   "enable_proxy": "Try enabling Proxy",
   "complete_config_urls": "Please complete configuration urls.",
-  "token_request_saved": "Token request saved",
+  "token_request_saved": "Token request saved"
-  "donate_info1": "If you have enjoyed the productivity of using Hoppscotch, consider donating as a sign of appreciation.",
-  "donate_info2": "You can support Hoppscotch development via the following methods:",
-  "one_time_recurring": "One-time or recurring",
-  "one_time": "One-time",
-  "recurring": "Recurring",
-  "wiki": "Wiki",
-  "home": "Home",
-  "reload": "Reload",
-  "enter_curl": "Enter cURL",
-  "extensions": "Extensions",
-  "extensions_use_toggle": "Use the browser extension to send requests (if present)",
-  "proxy_use_toggle": "Use the proxy middleware to send requests",
-  "extension_version": "Extension Version",
-  "extension_ver_not_reported": "Not Reported",
-  "extensions_info1": "Browser extension simplifies access to Hoppscotch, fix CORS issues, etc.",
-  "extensions_info2": "Get Hoppscotch browser extension!",
-  "login_to_hoppscotch": "Login to Hoppscotch",
-  "logged_out": "Logged out",
-  "login_success": "Successfully logged in",
-  "logout": "Logout",
-  "account": "Account",
-  "sync": "Sync",
-  "syncHistory": "History",
-  "syncCollections": "Collections",
-  "syncEnvironments": "Environments",
-  "socketio": "Socket.IO",
-  "event_name": "Event Name",
-  "pre_request_script": "Pre-request Script",
-  "tests": "Tests"
 }

newstore/RESTSession.ts

@@ -23,7 +23,7 @@ type RESTSession = {
 
 const defaultRESTRequest: HoppRESTRequest = {
   v: RESTReqSchemaVersion,
-  endpoint: "https://httpbin.org/get",
+  endpoint: "https://echo.hoppscotch.io",
   name: "Untitled request",
   params: [],
   headers: [],

nuxt.config.js

@@ -179,6 +179,7 @@ export default {
     position: "bottom-center",
     duration: 3000,
     keepOnHover: true,
+    singleton: true,
   },
 
   // Google Analytics module configuration (https://github.com/nuxt-community/analytics-module)

pages/index.vue

@@ -7,14 +7,14 @@
           <SmartTabs styles="sticky top-upperPrimaryStickyFold z-10">
             <SmartTab
               :id="'params'"
-              :label="$t('parameters')"
+              :label="$t('tab.parameters')"
               :selected="true"
               :info="newActiveParamsCount$"
             >
               <HttpParameters />
             </SmartTab>
 
-            <SmartTab :id="'bodyParams'" :label="$t('body')">
+            <SmartTab :id="'bodyParams'" :label="$t('tab.body')">
               <HttpBody />
             </SmartTab>
 
@@ -26,18 +26,18 @@
               <HttpHeaders />
             </SmartTab>
 
-            <SmartTab :id="'authorization'" :label="$t('authorization')">
+            <SmartTab :id="'authorization'" :label="$t('tab.authorization')">
               <HttpAuthorization />
             </SmartTab>
 
             <SmartTab
               :id="'preRequestScript'"
-              :label="$t('pre_request_script')"
+              :label="$t('tab.pre_request_script')"
             >
               <HttpPreRequestScript />
             </SmartTab>
 
-            <SmartTab :id="'tests'" :label="$t('tests')">
+            <SmartTab :id="'tests'" :label="$t('tab.tests')">
               <HttpTests />
             </SmartTab>
           </SmartTabs>
@@ -56,11 +56,11 @@
     >
       <aside>
         <SmartTabs styles="sticky z-10 top-0">
-          <SmartTab :id="'history'" :label="$t('history')" :selected="true">
+          <SmartTab :id="'history'" :label="$t('tab.history')" :selected="true">
             <History ref="historyComponent" :page="'rest'" />
           </SmartTab>
 
-          <SmartTab :id="'collections'" :label="$t('collections')">
+          <SmartTab :id="'collections'" :label="$t('tab.collections')">
             <Collections />
           </SmartTab>
 
@@ -70,6 +70,12 @@
         </SmartTabs>
       </aside>
     </Pane>
+    <SmartConfirmModal
+      :show="confirmSync"
+      :title="$t('confirm.sync')"
+      @hide-modal="confirmSync = false"
+      @resolve="syncRequest"
+    />
   </Splitpanes>
 </template>
 
@@ -77,8 +83,10 @@
 import {
   computed,
   defineComponent,
+  getCurrentInstance,
   onBeforeUnmount,
   onMounted,
+  ref,
   useContext,
   watch,
 } from "@nuxtjs/composition-api"
@@ -105,6 +113,7 @@ import {
 } from "~/helpers/utils/composables"
 import { loadRequestFromSync, startRequestSync } from "~/helpers/fb/request"
 import { onLoggedIn } from "~/helpers/fb/auth"
+import { HoppRESTRequest } from "~/helpers/types/HoppRESTRequest"
 
 function bindRequestToURLParams() {
   const {
@@ -173,7 +182,12 @@ function setupRequestSync() {
   onLoggedIn(async () => {
     if (Object.keys(route.value.query).length === 0) {
       const request = await loadRequestFromSync()
-      if (request) setRESTRequest(request)
+      if (request) {
+        console.log("sync le request nnd")
+
+        setRESTRequest(request)
+        // confirmSync.value = true
+      }
     }
 
     sub = startRequestSync()
@@ -188,6 +202,16 @@ function setupRequestSync() {
 export default defineComponent({
   components: { Splitpanes, Pane },
   setup() {
+    const confirmSync = ref(false)
+
+    const internalInstance = getCurrentInstance()
+    console.log("yoo", internalInstance)
+
+    const syncRequest = (request: HoppRESTRequest) => {
+      console.log("syncinggg")
+      setRESTRequest(request)
+    }
+
     const { subscribeToStream } = useStreamSubscriber()
 
     setupRequestSync()
@@ -220,6 +244,8 @@ export default defineComponent({
       PROXY_ENABLED: useSetting("PROXY_ENABLED"),
       URL_EXCLUDES: useSetting("URL_EXCLUDES"),
       EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
+      confirmSync,
+      syncRequest,
     }
   },
 })

pages/realtime.vue

@@ -13,14 +13,14 @@
     </SmartTab>
     <SmartTab
       id="sse"
-      :label="$t('sse')"
+      :label="$t('tab.sse')"
       style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
     >
       <RealtimeSse />
     </SmartTab>
     <SmartTab
       id="socketio"
-      :label="$t('socketio')"
+      :label="$t('tab.socketio')"
       style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
     >
       <RealtimeSocketio />

pages/settings.vue

@@ -4,7 +4,7 @@
       <div class="md:grid md:gap-4 md:grid-cols-3">
         <div class="p-8 md:col-span-1">
           <h3 class="heading">
-            {{ $t("account") }}
+            {{ $t("settings.account") }}
           </h3>
           <p class="mt-1 text-secondaryLight">
             {{ $t("settings.account_description") }}
@@ -72,7 +72,7 @@
                       toggleSettings('syncCollections', !SYNC_COLLECTIONS)
                     "
                   >
-                    {{ $t("syncCollections") }}
+                    {{ $t("settings.sync_collections") }}
                   </SmartToggle>
                 </div>
                 <div class="flex items-center">
@@ -82,7 +82,7 @@
                       toggleSettings('syncEnvironments', !SYNC_ENVIRONMENTS)
                     "
                   >
-                    {{ $t("syncEnvironments") }}
+                    {{ $t("settings.sync_environments") }}
                   </SmartToggle>
                 </div>
                 <div class="flex items-center">
@@ -90,7 +90,7 @@
                     :on="SYNC_HISTORY"
                     @change="toggleSettings('syncHistory', !SYNC_HISTORY)"
                   >
-                    {{ $t("syncHistory") }}
+                    {{ $t("settings.sync_history") }}
                   </SmartToggle>
                 </div>
               </div>
@@ -102,7 +102,7 @@
       <div class="md:grid md:gap-4 md:grid-cols-3">
         <div class="p-8 md:col-span-1">
           <h3 class="heading">
-            {{ $t("theme") }}
+            {{ $t("settings.theme") }}
           </h3>
           <p class="mt-1 text-secondaryLight">
             {{ $t("settings.theme_description") }}
@@ -111,7 +111,7 @@
         <div class="space-y-8 p-8 md:col-span-2">
           <section>
             <h4 class="font-semibold text-secondaryDark">
-              {{ $t("background") }}
+              {{ $t("settings.background") }}
             </h4>
             <div class="mt-1 text-secondaryLight">
               <ColorScheme placeholder="..." tag="span">
@@ -178,7 +178,11 @@
               <div class="flex items-center">
                 <SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal">
                   {{ $t("settings.telemetry") }}
-                  {{ TELEMETRY_ENABLED ? $t("enabled") : $t("disabled") }}
+                  {{
+                    TELEMETRY_ENABLED
+                      ? $t("state.enabled")
+                      : $t("state.disabled")
+                  }}
                 </SmartToggle>
               </div>
               <div class="flex items-center">
@@ -187,7 +191,11 @@
                   @change="toggleSetting('SHORTCUT_INDICATOR')"
                 >
                   {{ $t("settings.shortcuts_indicator") }}
-                  {{ SHORTCUT_INDICATOR ? $t("enabled") : $t("disabled") }}
+                  {{
+                    SHORTCUT_INDICATOR
+                      ? $t("state.enabled")
+                      : $t("state.disabled")
+                  }}
                 </SmartToggle>
               </div>
               <div class="flex items-center">
@@ -196,13 +204,15 @@
                   @change="toggleSetting('LEFT_SIDEBAR')"
                 >
                   {{ $t("settings.navigation_sidebar") }}
-                  {{ LEFT_SIDEBAR ? $t("enabled") : $t("disabled") }}
+                  {{
+                    LEFT_SIDEBAR ? $t("state.enabled") : $t("state.disabled")
+                  }}
                 </SmartToggle>
               </div>
               <div class="flex items-center">
                 <SmartToggle :on="ZEN_MODE" @change="toggleSetting('ZEN_MODE')">
                   {{ $t("layout.zen_mode") }}
-                  {{ ZEN_MODE ? $t("enabled") : $t("disabled") }}
+                  {{ ZEN_MODE ? $t("state.enabled") : $t("state.disabled") }}
                 </SmartToggle>
               </div>
             </div>
@@ -222,19 +232,19 @@
         <div class="space-y-8 p-8 md:col-span-2">
           <section>
             <h4 class="font-semibold text-secondaryDark">
-              {{ $t("extensions") }}
+              {{ $t("settings.extensions") }}
             </h4>
             <div class="mt-1 text-secondaryLight">
               <span v-if="extensionVersion != null">
                 {{
-                  `${$t("extension_version")}: v${extensionVersion.major}.${
+                  `${$t("settings.extension_version")}: v${
-                    extensionVersion.minor
+                    extensionVersion.major
-                  }`
+                  }.${extensionVersion.minor}`
                 }}
               </span>
               <span v-else>
-                {{ $t("extension_version") }}:
+                {{ $t("settings.extension_version") }}:
-                {{ $t("extension_ver_not_reported") }}
+                {{ $t("settings.extension_ver_not_reported") }}
               </span>
             </div>
             <div class="flex flex-col space-y-2 py-4">
@@ -267,17 +277,17 @@
                   :on="EXTENSIONS_ENABLED"
                   @change="toggleSetting('EXTENSIONS_ENABLED')"
                 >
-                  {{ $t("extensions_use_toggle") }}
+                  {{ $t("settings.extensions_use_toggle") }}
                 </SmartToggle>
               </div>
             </div>
           </section>
           <section>
             <h4 class="font-semibold text-secondaryDark">
-              {{ $t("proxy") }}
+              {{ $t("settings.proxy") }}
             </h4>
             <div class="mt-1 text-secondaryLight">
-              {{ `${$t("official_proxy_hosting")} ${$t("read_the")}` }}
+              {{ `${$t("settings.official_proxy_hosting")} ${$t("read_the")}` }}
               <SmartLink
                 class="link"
                 to="https://github.com/hoppscotch/proxyscotch/wiki/Privacy-policy"
@@ -292,7 +302,7 @@
                   :on="PROXY_ENABLED"
                   @change="toggleSetting('PROXY_ENABLED')"
                 >
-                  {{ $t("proxy_use_toggle") }}
+                  {{ $t("settings.proxy_use_toggle") }}
                 </SmartToggle>
               </div>
             </div>
@@ -307,7 +317,7 @@
                   :disabled="!PROXY_ENABLED"
                 />
                 <label for="url">
-                  {{ `${$t("proxy")} ${$t("url")}` }}
+                  {{ $t("settings.proxy_url") }}
                 </label>
               </div>
               <ButtonSecondary