From ceb8bdf0fd35b6101315bb96dea7cb8988b9c2ca Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 18 Aug 2021 22:17:31 +0530
Subject: [PATCH] refactor: more i18n translation strings

---
 components/app/Footer.vue                     |   2 +-
 components/app/Header.vue                     |   4 +-
 components/app/Shortcuts.vue                  |   2 +-
 components/button/Secondary.vue               |   1 +
 components/collections/Add.vue                |   2 +-
 components/collections/AddFolder.vue          |   2 +-
 components/collections/Edit.vue               |   2 +-
 components/collections/EditFolder.vue         |   2 +-
 components/collections/EditRequest.vue        |   2 +-
 components/collections/ImportExport.vue       |   2 +-
 components/collections/graphql/Add.vue        |   2 +-
 components/collections/graphql/AddFolder.vue  |   2 +-
 components/collections/graphql/Edit.vue       |   2 +-
 components/collections/graphql/EditFolder.vue |   2 +-
 .../collections/graphql/EditRequest.vue       |   2 +-
 .../collections/graphql/ImportExport.vue      |   2 +-
 components/collections/graphql/index.vue      |   2 +-
 components/collections/index.vue              |   2 +-
 components/docs/Request.vue                   |  16 +-
 components/environments/Add.vue               |   2 +-
 components/environments/Edit.vue              |   2 +-
 components/environments/index.vue             |   9 +-
 components/firebase/Login.vue                 |  62 +++---
 components/firebase/Logout.vue                |   4 +-
 components/graphql/Request.vue                |   4 +-
 components/graphql/RequestOptions.vue         |   8 +-
 components/graphql/Sidebar.vue                |  18 +-
 components/history/index.vue                  |   2 +-
 components/http/Authorization.vue             |   8 +-
 components/http/Body.vue                      |   2 +-
 components/http/BodyParameters.vue            |   4 +-
 components/http/Headers.vue                   |   4 +-
 components/http/ImportCurl.vue                |   2 +-
 components/http/Parameters.vue                |   4 +-
 components/http/PreRequestScript.vue          |   4 +-
 components/http/RawBody.vue                   |   4 +-
 components/http/Request.vue                   | 166 ++++++++-------
 components/http/Tests.vue                     |   4 +-
 .../lenses/renderers/HTMLLensRenderer.vue     |   4 +-
 components/realtime/Log.vue                   |   2 +-
 components/realtime/Mqtt.vue                  |  12 +-
 components/realtime/Socketio.vue              |  16 +-
 components/realtime/Sse.vue                   |   8 +-
 components/realtime/Websocket.vue             |  14 +-
 components/teams/Add.vue                      |   2 +-
 components/teams/Edit.vue                     |   2 +-
 layouts/default.vue                           |   2 +-
 layouts/error.vue                             |   2 +-
 locales/en.json                               | 195 +++++++++---------
 newstore/RESTSession.ts                       |   2 +-
 nuxt.config.js                                |   1 +
 pages/index.vue                               |  42 +++-
 pages/realtime.vue                            |   4 +-
 pages/settings.vue                            |  52 +++--
 54 files changed, 408 insertions(+), 318 deletions(-)

diff --git a/components/app/Footer.vue b/components/app/Footer.vue
index 859847d80..f5770113e 100644
--- a/components/app/Footer.vue
+++ b/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
diff --git a/components/app/Header.vue b/components/app/Header.vue
index 63cab3c3e..5f4fed02b 100644
--- a/components/app/Header.vue
+++ b/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: [
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index f544630d3..00d342a43 100644
--- a/components/app/Shortcuts.vue
+++ b/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"
diff --git a/components/button/Secondary.vue b/components/button/Secondary.vue
index f6e4259ee..64419cca7 100644
--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -29,6 +29,7 @@
       },
     ]"
     :disabled="disabled"
+    tabindex="0"
   >
     <i
       v-if="icon"
diff --git a/components/collections/Add.vue b/components/collections/Add.vue
index d6f0a775c..dc0d9c7eb 100644
--- a/components/collections/Add.vue
+++ b/components/collections/Add.vue
@@ -12,7 +12,7 @@
           @keyup.enter="addNewCollection"
         />
         <label for="selectLabelAdd">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>
diff --git a/components/collections/AddFolder.vue b/components/collections/AddFolder.vue
index 284fbf64d..e5e83f64f 100644
--- a/components/collections/AddFolder.vue
+++ b/components/collections/AddFolder.vue
@@ -16,7 +16,7 @@
           @keyup.enter="addFolder"
         />
         <label for="selectLabelAddFolder">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>
diff --git a/components/collections/Edit.vue b/components/collections/Edit.vue
index 3950ea159..a76b87f4b 100644
--- a/components/collections/Edit.vue
+++ b/components/collections/Edit.vue
@@ -12,7 +12,7 @@
           @keyup.enter="saveCollection"
         />
         <label for="selectLabelEdit">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>
diff --git a/components/collections/EditFolder.vue b/components/collections/EditFolder.vue
index 42ad127d3..64d212aa0 100644
--- a/components/collections/EditFolder.vue
+++ b/components/collections/EditFolder.vue
@@ -16,7 +16,7 @@
           @keyup.enter="editFolder"
         />
         <label for="selectLabelEditFolder">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>
diff --git a/components/collections/EditRequest.vue b/components/collections/EditRequest.vue
index 8e3b376be..b6d6260c6 100644
--- a/components/collections/EditRequest.vue
+++ b/components/collections/EditRequest.vue
@@ -12,7 +12,7 @@
           @keyup.enter="saveRequest"
         />
         <label for="selectLabelEditReq">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>
diff --git a/components/collections/ImportExport.vue b/components/collections/ImportExport.vue
index 7c2a457f4..340c0932d 100644
--- a/components/collections/ImportExport.vue
+++ b/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>
diff --git a/components/collections/graphql/Add.vue b/components/collections/graphql/Add.vue
index 569a442e9..7473dfddd 100644
--- a/components/collections/graphql/Add.vue
+++ b/components/collections/graphql/Add.vue
@@ -12,7 +12,7 @@
           @keyup.enter="addNewCollection"
         />
         <label for="selectLabelGqlAdd">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>
diff --git a/components/collections/graphql/AddFolder.vue b/components/collections/graphql/AddFolder.vue
index 059cedd22..0dfba9eff 100644
--- a/components/collections/graphql/AddFolder.vue
+++ b/components/collections/graphql/AddFolder.vue
@@ -16,7 +16,7 @@
           @keyup.enter="addFolder"
         />
         <label for="selectLabelGqlAddFolder">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>
diff --git a/components/collections/graphql/Edit.vue b/components/collections/graphql/Edit.vue
index 08631e611..88fea2b9c 100644
--- a/components/collections/graphql/Edit.vue
+++ b/components/collections/graphql/Edit.vue
@@ -12,7 +12,7 @@
           @keyup.enter="saveCollection"
         />
         <label for="selectLabelGqlEdit">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>
diff --git a/components/collections/graphql/EditFolder.vue b/components/collections/graphql/EditFolder.vue
index f6494882b..de6213e46 100644
--- a/components/collections/graphql/EditFolder.vue
+++ b/components/collections/graphql/EditFolder.vue
@@ -16,7 +16,7 @@
           @keyup.enter="editFolder"
         />
         <label for="selectLabelGqlEditFolder">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>
diff --git a/components/collections/graphql/EditRequest.vue b/components/collections/graphql/EditRequest.vue
index f90c59bcd..897aae174 100644
--- a/components/collections/graphql/EditRequest.vue
+++ b/components/collections/graphql/EditRequest.vue
@@ -12,7 +12,7 @@
           @keyup.enter="saveRequest"
         />
         <label for="selectLabelGqlEditReq">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>
diff --git a/components/collections/graphql/ImportExport.vue b/components/collections/graphql/ImportExport.vue
index 6026c5149..174b7fd9e 100644
--- a/components/collections/graphql/ImportExport.vue
+++ b/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>
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 341292b06..c8ca71f7c 100644
--- a/components/collections/graphql/index.vue
+++ b/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
diff --git a/components/collections/index.vue b/components/collections/index.vue
index a0e7419e2..ba7464609 100644
--- a/components/collections/index.vue
+++ b/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
diff --git a/components/docs/Request.vue b/components/docs/Request.vue
index 048c4889b..ada8572cf 100644
--- a/components/docs/Request.vue
+++ b/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>
diff --git a/components/environments/Add.vue b/components/environments/Add.vue
index 22b9d3bbd..019decd9c 100644
--- a/components/environments/Add.vue
+++ b/components/environments/Add.vue
@@ -12,7 +12,7 @@
           @keyup.enter="addNewEnvironment"
         />
         <label for="selectLabelEnvAdd">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 0306a47cc..1d821c5b2 100644
--- a/components/environments/Edit.vue
+++ b/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">
diff --git a/components/environments/index.vue b/components/environments/index.vue
index 2fdecfa22..b7c880bec 100644
--- a/components/environments/index.vue
+++ b/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
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index e10ea2a8d..6fd579677 100644
--- a/components/firebase/Login.vue
+++ b/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")}`, {
-            icon: "sync",
-            duration: null,
-            closeOnSwipe: false,
-            action: {
-              text: this.$t("yes"),
-              onClick: (_, toastObject) => {
-                applySetting("syncHistory", true)
-                applySetting("syncCollections", true)
-                applySetting("syncEnvironments", true)
-                toastObject.remove()
+          this.$toast.info(
+            `${this.$t("action.turn_on")} ${this.$t("auth.sync")}`,
+            {
+              icon: "sync",
+              duration: null,
+              closeOnSwipe: false,
+              action: {
+                text: this.$t("yes"),
+                onClick: (_, toastObject) => {
+                  applySetting("syncHistory", true)
+                  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")}`, {
-            icon: "sync",
-            duration: null,
-            closeOnSwipe: false,
-            action: {
-              text: this.$t("yes"),
-              onClick: (_, toastObject) => {
-                applySetting("syncHistory", true)
-                applySetting("syncCollections", true)
-                applySetting("syncEnvironments", true)
-                toastObject.remove()
+          this.$toast.info(
+            `${this.$t("action.turn_on")} ${this.$t("auth.sync")}`,
+            {
+              icon: "sync",
+              duration: null,
+              closeOnSwipe: false,
+              action: {
+                text: this.$t("yes"),
+                onClick: (_, toastObject) => {
+                  applySetting("syncHistory", true)
+                  applySetting("syncCollections", true)
+                  applySetting("syncEnvironments", true)
+                  toastObject.remove()
+                },
               },
-            },
-          })
+            }
+          )
         }
 
         this.showLoginSuccess()
diff --git a/components/firebase/Logout.vue b/components/firebase/Logout.vue
index b72c45db4..1b79c059c 100644
--- a/components/firebase/Logout.vue
+++ b/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) {
diff --git a/components/graphql/Request.vue b/components/graphql/Request.vue
index f74ba268d..f861fde42 100644
--- a/components/graphql/Request.vue
+++ b/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"
       />
diff --git a/components/graphql/RequestOptions.vue b/components/graphql/RequestOptions.vue
index f7e73ecc8..0bab877f4 100644
--- a/components/graphql/RequestOptions.vue
+++ b/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
diff --git a/components/graphql/Sidebar.vue b/components/graphql/Sidebar.vue
index b2f1bad02..afd9989ee 100644
--- a/components/graphql/Sidebar.vue
+++ b/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
diff --git a/components/history/index.vue b/components/history/index.vue
index 3e0f1580d..562446a4f 100644
--- a/components/history/index.vue
+++ b/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
diff --git a/components/http/Authorization.vue b/components/http/Authorization.vue
index 66ad40ea6..a1cad8832 100644
--- a/components/http/Authorization.vue
+++ b/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>
diff --git a/components/http/Body.vue b/components/http/Body.vue
index d380cccc3..b1195fe3f 100644
--- a/components/http/Body.vue
+++ b/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"
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index 471486e20..5a900b454 100644
--- a/components/http/BodyParameters.vue
+++ b/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
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index 2a10cf472..eb34bc7a8 100644
--- a/components/http/Headers.vue
+++ b/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
diff --git a/components/http/ImportCurl.vue b/components/http/ImportCurl.vue
index 8613170c8..37b2bb465 100644
--- a/components/http/ImportCurl.vue
+++ b/components/http/ImportCurl.vue
@@ -11,7 +11,7 @@
           placeholder=" "
         ></textarea>
         <label for="import-curl">
-          {{ $t("enter_curl") }}
+          {{ $t("request.enter_curl") }}
         </label>
       </div>
     </template>
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index f2d8ff760..c859dbb71 100644
--- a/components/http/Parameters.vue
+++ b/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
diff --git a/components/http/PreRequestScript.vue b/components/http/PreRequestScript.vue
index d0701bad3..29dd2a157 100644
--- a/components/http/PreRequestScript.vue
+++ b/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
diff --git a/components/http/RawBody.vue b/components/http/RawBody.vue
index 589604c26..bc83a9185 100644
--- a/components/http/RawBody.vue
+++ b/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
diff --git a/components/http/Request.vue b/components/http/Request.vue
index da08a0549..7a0915c8a 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -1,51 +1,63 @@
 <template>
-  <div class="bg-primary flex p-4 top-0 z-10 sticky">
-    <div class="relative inline-flex">
-      <tippy
-        ref="methodOptions"
-        interactive
-        trigger="click"
-        theme="popover"
-        arrow
-      >
-        <template #trigger>
-          <span class="select-wrapper">
-            <input
-              id="method"
-              class="
-                bg-primaryLight
-                border border-divider
-                rounded-l
-                cursor-pointer
-                flex
-                font-semibold
-                text-secondaryDark
-                py-2
-                px-4
-                w-28
-                hover:border-dividerDark
-                focus-visible:border-accent
-              "
-              :value="newMethod"
-              :readonly="!isCustomMethod"
-              @input="onSelectMethod($event.target.value)"
-            />
-          </span>
-        </template>
-        <SmartItem
-          v-for="(method, index) in methods"
-          :key="`method-${index}`"
-          :label="method"
-          @click.native="onSelectMethod(method)"
-        />
-      </tippy>
-    </div>
-    <div class="flex-1 inline-flex">
-      <SmartEnvInput
-        v-if="EXPERIMENTAL_URL_BAR_ENABLED"
-        v-model="newEndpoint"
-        :placeholder="$t('url')"
-        styles="
+  <div
+    class="
+      bg-primary
+      flex flex-col
+      space-y-2
+      p-4
+      top-0
+      z-10
+      sticky
+      md:flex-row md:space-y-0
+    "
+  >
+    <div class="flex flex-1">
+      <div class="flex relative">
+        <tippy
+          ref="methodOptions"
+          interactive
+          trigger="click"
+          theme="popover"
+          arrow
+        >
+          <template #trigger>
+            <span class="select-wrapper">
+              <input
+                id="method"
+                class="
+                  bg-primaryLight
+                  border border-divider
+                  rounded-l
+                  cursor-pointer
+                  flex
+                  font-semibold
+                  text-secondaryDark
+                  py-2
+                  px-4
+                  w-28
+                  hover:border-dividerDark
+                  focus-visible:border-accent
+                "
+                :value="newMethod"
+                :readonly="!isCustomMethod"
+                @input="onSelectMethod($event.target.value)"
+              />
+            </span>
+          </template>
+          <SmartItem
+            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()"
-      />
-      <input
-        v-else
-        id="url"
-        v-model="newEndpoint"
-        v-focus
-        class="
-          bg-primaryLight
-          border border-divider
-          flex flex-1
-          text-secondaryDark
-          py-2
-          px-4
-          focus-visible:border-accent
-        "
-        name="url"
-        type="text"
-        spellcheck="false"
-        :placeholder="$t('url')"
-        autofocus
-        @keyup.enter="newSendRequest()"
-      />
+          @enter="newSendRequest()"
+        />
+        <input
+          v-else
+          id="url"
+          v-model="newEndpoint"
+          v-focus
+          class="
+            bg-primaryLight
+            border border-divider
+            rounded-r
+            flex
+            text-secondaryDark
+            w-full
+            py-2
+            px-4
+            md:rounded-r-none
+            focus-visible:border-accent
+          "
+          name="url"
+          type="text"
+          spellcheck="false"
+          :placeholder="$t('request.url')"
+          autofocus
+          @keyup.enter="newSendRequest()"
+        />
+      </div>
     </div>
     <div class="flex">
       <ButtonPrimary
         id="send"
-        class="rounded-none min-w-20"
-        :label="!loading ? $t('send') : $t('cancel')"
+        class="rounded-r-none flex-1 min-w-20 md:rounded-l-none"
+        :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
diff --git a/components/http/Tests.vue b/components/http/Tests.vue
index ee8ae3241..ebfb4e352 100644
--- a/components/http/Tests.vue
+++ b/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
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index 966ac74c6..8868bfb99 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/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"
         />
diff --git a/components/realtime/Log.vue b/components/realtime/Log.vue
index 39e7674c5..892be4cc2 100644
--- a/components/realtime/Log.vue
+++ b/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>
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index 76a496f90..acf37982a 100644
--- a/components/realtime/Mqtt.vue
+++ b/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
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index 634c03e02..b7f66ad38 100644
--- a/components/realtime/Socketio.vue
+++ b/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>
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index 9eaa8f0c3..81e8e480e 100644
--- a/components/realtime/Sse.vue
+++ b/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"
           />
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index 93293f9dc..4a77bf99c 100644
--- a/components/realtime/Websocket.vue
+++ b/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>
diff --git a/components/teams/Add.vue b/components/teams/Add.vue
index f911ea864..622d44d7f 100644
--- a/components/teams/Add.vue
+++ b/components/teams/Add.vue
@@ -12,7 +12,7 @@
           @keyup.enter="addNewTeam"
         />
         <label for="selectLabelTeamAdd">
-          {{ $t("label") }}
+          {{ $t("action.label") }}
         </label>
       </div>
     </template>
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index e3e39cf29..fe3f37830 100644
--- a/components/teams/Edit.vue
+++ b/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">
diff --git a/layouts/default.vue b/layouts/default.vue
index 2a47514f8..8611377b4 100644
--- a/layouts/default.vue
+++ b/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()
diff --git a/layouts/error.vue b/layouts/error.vue
index c22b9a103..8861efbd2 100644
--- a/layouts/error.vue
+++ b/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')"
diff --git a/locales/en.json b/locales/en.json
index 436fe1050..5d5ca6999 100644
--- a/locales/en.json
+++ b/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",
-  "communication": "Communication",
-  "endpoint": "Endpoint",
-  "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.",
+  "state": {
+    "enabled": "Enabled",
+    "disabled": "Disabled"
+  },
   "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",
-  "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"
+  "token_request_saved": "Token request saved"
 }
diff --git a/newstore/RESTSession.ts b/newstore/RESTSession.ts
index 7884d36cf..ed4639849 100644
--- a/newstore/RESTSession.ts
+++ b/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: [],
diff --git a/nuxt.config.js b/nuxt.config.js
index 9867b1804..ceb6da47f 100644
--- a/nuxt.config.js
+++ b/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)
diff --git a/pages/index.vue b/pages/index.vue
index 1653f9eb6..96d019386 100644
--- a/pages/index.vue
+++ b/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,
     }
   },
 })
diff --git a/pages/realtime.vue b/pages/realtime.vue
index 315bd59ee..e8621e986 100644
--- a/pages/realtime.vue
+++ b/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 />
diff --git a/pages/settings.vue b/pages/settings.vue
index 19d9e90f0..41893e4fb 100644
--- a/pages/settings.vue
+++ b/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}.${
-                    extensionVersion.minor
-                  }`
+                  `${$t("settings.extension_version")}: v${
+                    extensionVersion.major
+                  }.${extensionVersion.minor}`
                 }}
               </span>
               <span v-else>
-                {{ $t("extension_version") }}:
-                {{ $t("extension_ver_not_reported") }}
+                {{ $t("settings.extension_version") }}:
+                {{ $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