refactor: more i18n translation strings

2021-08-18 22:17:31 +05:30
parent b9c233cdf9
commit ceb8bdf0fd
54 changed files with 408 additions and 318 deletions
--- 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
--- 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: [
--- 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"
--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -29,6 +29,7 @@
      },
    ]"
    :disabled="disabled"
+    tabindex="0"
  >
    <i
      v-if="icon"
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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
--- 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
--- 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>
--- 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>
--- 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">
--- 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
--- 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,7 +174,9 @@ export default {
        const { additionalUserInfo } = await signInUserWithGoogle()

        if (additionalUserInfo.isNewUser) {
-          this.$toast.info(`${this.$t("action.turn_on")} ${this.$t("sync")}`, {
+          this.$toast.info(
+            `${this.$t("action.turn_on")} ${this.$t("auth.sync")}`,
+            {
              icon: "sync",
              duration: null,
              closeOnSwipe: false,
@@ -187,7 +189,8 @@ export default {
                  toastObject.remove()
                },
              },
-          })
+            }
+          )
        }

        this.showLoginSuccess()
@@ -254,7 +257,9 @@ export default {
        setProviderInfo(credential.providerId, credential.accessToken)

        if (additionalUserInfo.isNewUser) {
-          this.$toast.info(`${this.$t("action.turn_on")} ${this.$t("sync")}`, {
+          this.$toast.info(
+            `${this.$t("action.turn_on")} ${this.$t("auth.sync")}`,
+            {
              icon: "sync",
              duration: null,
              closeOnSwipe: false,
@@ -267,7 +272,8 @@ export default {
                  toastObject.remove()
                },
              },
-          })
+            }
+          )
        }

        this.showLoginSuccess()
--- 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) {
--- 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"
      />
--- 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
--- 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
--- 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
--- 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>
--- 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"
--- 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
--- 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
--- 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>
--- 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
--- 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
--- 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
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -1,6 +1,18 @@
 <template>
-  <div class="bg-primary flex p-4 top-0 z-10 sticky">
-    <div class="relative inline-flex">
+  <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
@@ -40,11 +52,11 @@
          />
        </tippy>
      </div>
-    <div class="flex-1 inline-flex">
+      <div class="flex flex-1">
        <SmartEnvInput
          v-if="EXPERIMENTAL_URL_BAR_ENABLED"
          v-model="newEndpoint"
-        :placeholder="$t('url')"
+          :placeholder="$t('request.url')"
          styles="
          bg-primaryLight
          border border-divider
@@ -66,29 +78,33 @@
          class="
            bg-primaryLight
            border border-divider
-          flex flex-1
+            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('url')"
+          :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
--- 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
--- 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"
        />
--- 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>
--- 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
--- 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>
--- 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"
          />
--- 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>
--- 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>
--- 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">
--- 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()
--- 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')"
--- 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",
+  "state": {
    "enabled": "Enabled",
-  "disabled": "Disabled",
-  "proxy": "Proxy",
-  "official_proxy_hosting": "Official Proxy is hosted by Hoppscotch.",
+    "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"
 }
--- 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: [],
--- 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)
--- 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,
    }
  },
 })
--- 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 />
--- 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