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,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()
--- 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,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
--- 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">