feat: finish new i18n translation format

2021-08-19 00:10:57 +05:30
parent ceb8bdf0fd
commit c1ce90dad0
66 changed files with 755 additions and 802 deletions
--- a/components/app/Share.vue
+++ b/components/app/Share.vue
@@ -86,7 +86,7 @@ export default {
    copyAppLink() {
      copyToClipboard(this.url)
      this.copyIcon = "done"
-      this.$toast.success(this.$t("copied_to_clipboard").toString(), {
+      this.$toast.success(this.$t("state.copied_to_clipboard").toString(), {
        icon: "done",
      })
      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -38,7 +38,7 @@
              pl-8
              focus-visible:border-divider
            "
-            :placeholder="$t('search')"
+            :placeholder="$t('action.search')"
          />
        </div>
      </div>
--- a/components/collections/Add.vue
+++ b/components/collections/Add.vue
@@ -18,8 +18,14 @@
    </template>
    <template #footer>
      <span>
-        <ButtonPrimary :label="$t('save')" @click.native="addNewCollection" />
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="addNewCollection"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
      </span>
    </template>
  </SmartModal>
--- a/components/collections/AddFolder.vue
+++ b/components/collections/AddFolder.vue
@@ -22,8 +22,11 @@
    </template>
    <template #footer>
      <span>
-        <ButtonPrimary :label="$t('save')" @click.native="addFolder" />
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary :label="$t('action.save')" @click.native="addFolder" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
      </span>
    </template>
  </SmartModal>
--- a/components/collections/Edit.vue
+++ b/components/collections/Edit.vue
@@ -18,8 +18,14 @@
    </template>
    <template #footer>
      <span>
-        <ButtonPrimary :label="$t('save')" @click.native="saveCollection" />
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="saveCollection"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
      </span>
    </template>
  </SmartModal>
--- a/components/collections/EditFolder.vue
+++ b/components/collections/EditFolder.vue
@@ -22,8 +22,11 @@
    </template>
    <template #footer>
      <span>
-        <ButtonPrimary :label="$t('save')" @click.native="editFolder" />
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary :label="$t('action.save')" @click.native="editFolder" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
      </span>
    </template>
  </SmartModal>
--- a/components/collections/EditRequest.vue
+++ b/components/collections/EditRequest.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" :title="$t('edit_request')" @close="hideModal">
+  <SmartModal v-if="show" :title="$t('modal.edit_request')" @close="hideModal">
    <template #body>
      <div class="flex flex-col px-2">
        <input
@@ -18,8 +18,11 @@
    </template>
    <template #footer>
      <span>
-        <ButtonPrimary :label="$t('save')" @click.native="saveRequest" />
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary :label="$t('action.save')" @click.native="saveRequest" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
      </span>
    </template>
  </SmartModal>
--- a/components/collections/ImportExport.vue
+++ b/components/collections/ImportExport.vue
@@ -30,7 +30,7 @@
          <template #trigger>
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('more')"
+              :title="$t('action.more')"
              class="rounded"
              icon="more_vert"
            />
@@ -73,9 +73,9 @@
      <div v-if="mode == 'import_export'" class="flex flex-col space-y-2">
        <SmartItem
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('replace_current')"
+          :title="$t('action.replace_current')"
          icon="folder_special"
-          :label="$t('replace_json')"
+          :label="$t('action.replace_json')"
          @click.native="openDialogChooseFileToReplaceWith"
        />
        <input
@@ -88,7 +88,7 @@
        />
        <SmartItem
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('preserve_current')"
+          :title="$t('action.preserve_current')"
          icon="create_new_folder"
          :label="$t('import.json')"
          @click.native="openDialogChooseFileToImportFrom"
@@ -104,14 +104,14 @@
        <SmartItem
          v-if="collectionsType.type == 'team-collections'"
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('preserve_current')"
+          :title="$t('action.preserve_current')"
          icon="folder_shared"
          :label="$t('import.from_my_collections')"
          @click.native="mode = 'import_from_my_collections'"
        />
        <SmartItem
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('download_file')"
+          :title="$t('action.download_file')"
          icon="drive_file_move"
          :label="$t('export.as_json')"
          @click.native="exportJSON"
@@ -404,7 +404,7 @@ export default defineComponent({
      a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
      document.body.appendChild(a)
      a.click()
-      this.$toast.success(this.$t("download_started"), {
+      this.$toast.success(this.$t("state.download_started"), {
        icon: "done",
      })
      setTimeout(() => {
@@ -413,7 +413,7 @@ export default defineComponent({
      }, 1000)
    },
    fileImported() {
-      this.$toast.success(this.$t("file_imported"), {
+      this.$toast.success(this.$t("state.file_imported"), {
        icon: "folder_shared",
      })
    },
--- a/components/collections/SaveRequest.vue
+++ b/components/collections/SaveRequest.vue
@@ -39,8 +39,14 @@
    </template>
    <template #footer>
      <span>
-        <ButtonPrimary :label="$t('save')" @click.native="saveRequestAs" />
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="saveRequestAs"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
      </span>
    </template>
  </SmartModal>
@@ -108,7 +114,7 @@ export default defineComponent({
    },
    saveRequestAs() {
      if (!this.requestName) {
-        this.$toast.error(this.$t("empty_req_name"), {
+        this.$toast.error(this.$t("error.empty_req_name"), {
          icon: "error",
        })
        return
--- a/components/collections/graphql/Add.vue
+++ b/components/collections/graphql/Add.vue
@@ -18,8 +18,14 @@
    </template>
    <template #footer>
      <span>
-        <ButtonPrimary :label="$t('save')" @click.native="addNewCollection" />
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="addNewCollection"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
      </span>
    </template>
  </SmartModal>
--- a/components/collections/graphql/AddFolder.vue
+++ b/components/collections/graphql/AddFolder.vue
@@ -22,8 +22,11 @@
    </template>
    <template #footer>
      <span>
-        <ButtonPrimary :label="$t('save')" @click.native="addFolder" />
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary :label="$t('action.save')" @click.native="addFolder" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
      </span>
    </template>
  </SmartModal>
--- a/components/collections/graphql/Collection.vue
+++ b/components/collections/graphql/Collection.vue
@@ -54,7 +54,7 @@
            <template #trigger>
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('more')"
+                :title="$t('action.more')"
                icon="more_vert"
              />
            </template>
@@ -70,7 +70,7 @@
            />
            <SmartItem
              icon="create"
-              :label="$t('edit')"
+              :label="$t('action.edit')"
              @click.native="
                $emit('edit-collection')
                $refs.options.tippy().hide()
@@ -219,7 +219,7 @@ export default Vue.extend({
      }
      removeGraphqlCollection(this.collectionIndex)

-      this.$toast.error(this.$t("deleted").toString(), {
+      this.$toast.error(this.$t("state.deleted").toString(), {
        icon: "delete",
      })
    },
--- a/components/collections/graphql/Edit.vue
+++ b/components/collections/graphql/Edit.vue
@@ -18,8 +18,14 @@
    </template>
    <template #footer>
      <span>
-        <ButtonPrimary :label="$t('save')" @click.native="saveCollection" />
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="saveCollection"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
      </span>
    </template>
  </SmartModal>
--- a/components/collections/graphql/EditFolder.vue
+++ b/components/collections/graphql/EditFolder.vue
@@ -22,8 +22,11 @@
    </template>
    <template #footer>
      <span>
-        <ButtonPrimary :label="$t('save')" @click.native="editFolder" />
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary :label="$t('action.save')" @click.native="editFolder" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
      </span>
    </template>
  </SmartModal>
--- a/components/collections/graphql/EditRequest.vue
+++ b/components/collections/graphql/EditRequest.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" :title="$t('edit_request')" @close="hideModal">
+  <SmartModal v-if="show" :title="$t('modal.edit_request')" @close="hideModal">
    <template #body>
      <div class="flex flex-col px-2">
        <input
@@ -18,8 +18,11 @@
    </template>
    <template #footer>
      <span>
-        <ButtonPrimary :label="$t('save')" @click.native="saveRequest" />
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary :label="$t('action.save')" @click.native="saveRequest" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
      </span>
    </template>
  </SmartModal>
--- a/components/collections/graphql/Folder.vue
+++ b/components/collections/graphql/Folder.vue
@@ -52,7 +52,7 @@
            <template #trigger>
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('more')"
+                :title="$t('action.more')"
                icon="more_vert"
              />
            </template>
@@ -66,7 +66,7 @@
            />
            <SmartItem
              icon="edit"
-              :label="$t('edit')"
+              :label="$t('action.edit')"
              @click.native="
                $emit('edit-folder', { folder, folderPath })
                $refs.options.tippy().hide()
@@ -217,7 +217,7 @@ export default Vue.extend({
      }

      removeGraphqlFolder(this.folderPath)
-      this.$toast.error(this.$t("deleted").toString(), {
+      this.$toast.error(this.$t("state.deleted").toString(), {
        icon: "delete",
      })
    },
--- a/components/collections/graphql/ImportExport.vue
+++ b/components/collections/graphql/ImportExport.vue
@@ -10,7 +10,7 @@
          <template #trigger>
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('more')"
+              :title="$t('action.more')"
              class="rounded"
              icon="more_vert"
            />
@@ -53,9 +53,9 @@
      <div class="flex flex-col space-y-2">
        <SmartItem
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('replace_current')"
+          :title="$t('action.replace_current')"
          icon="folder_special"
-          :label="$t('replace_json')"
+          :label="$t('action.replace_json')"
          @click.native="openDialogChooseFileToReplaceWith"
        />
        <input
@@ -67,7 +67,7 @@
        />
        <SmartItem
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('preserve_current')"
+          :title="$t('action.preserve_current')"
          icon="create_new_folder"
          :label="$t('import.json')"
          @click.native="openDialogChooseFileToImportFrom"
@@ -81,7 +81,7 @@
        />
        <SmartItem
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('download_file')"
+          :title="$t('action.download_file')"
          icon="drive_file_move"
          :label="$t('export.as_json')"
          @click.native="exportJSON"
@@ -248,7 +248,7 @@ export default defineComponent({
      a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
      document.body.appendChild(a)
      a.click()
-      this.$toast.success(this.$t("download_started"), {
+      this.$toast.success(this.$t("state.download_started"), {
        icon: "done",
      })
      setTimeout(() => {
@@ -257,7 +257,7 @@ export default defineComponent({
      }, 1000)
    },
    fileImported() {
-      this.$toast.info(this.$t("file_imported"), {
+      this.$toast.info(this.$t("state.file_imported"), {
        icon: "folder_shared",
      })
    },
--- a/components/collections/graphql/Request.vue
+++ b/components/collections/graphql/Request.vue
@@ -43,7 +43,7 @@
          v-if="!savingMode"
          v-tippy="{ theme: 'tooltip' }"
          icon="replay"
-          :title="$t('restore')"
+          :title="$t('action.restore')"
          class="hidden group-hover:inline-flex"
          @click.native="!doc ? selectRequest() : {}"
        />
@@ -58,13 +58,13 @@
            <template #trigger>
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('more')"
+                :title="$t('action.more')"
                icon="more_vert"
              />
            </template>
            <SmartItem
              icon="edit"
-              :label="$t('edit')"
+              :label="$t('action.edit')"
              @click.native="
                $emit('edit-request', {
                  request,
@@ -171,7 +171,7 @@ export default Vue.extend({
      }

      removeGraphqlRequest(this.folderPath, this.requestIndex)
-      this.$toast.error(this.$t("deleted").toString(), {
+      this.$toast.error(this.$t("state.deleted").toString(), {
        icon: "delete",
      })
    },
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -11,7 +11,7 @@
        <input
          v-model="filterText"
          type="search"
-          :placeholder="$t('search')"
+          :placeholder="$t('action.search')"
          class="
            bg-primaryLight
            border-b border-dividerLight
@@ -26,7 +26,7 @@
      <div class="border-b border-dividerLight flex flex-1 justify-between">
        <ButtonSecondary
          icon="add"
-          :label="$t('new')"
+          :label="$t('action.new')"
          class="rounded-none"
          @click.native="displayModalAdd(true)"
        />
@@ -86,7 +86,7 @@
    >
      <i class="opacity-75 pb-2 material-icons">manage_search</i>
      <span class="text-center">
-        {{ $t("nothing_found") }} "{{ filterText }}"
+        {{ $t("state.nothing_found") }} "{{ filterText }}"
      </span>
    </div>
    <CollectionsGraphqlAdd
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -11,7 +11,7 @@
        <input
          v-model="filterText"
          type="search"
-          :placeholder="$t('search')"
+          :placeholder="$t('action.search')"
          class="
            bg-primaryLight
            border-b border-dividerLight
@@ -42,12 +42,12 @@
          class="rounded-none"
          icon="add"
          :title="$t('team.no_access')"
-          :label="$t('new')"
+          :label="$t('action.new')"
        />
        <ButtonSecondary
          v-else
          icon="add"
-          :label="$t('new')"
+          :label="$t('action.new')"
          class="rounded-none"
          @click.native="displayModalAdd(true)"
        />
@@ -135,7 +135,7 @@
    >
      <i class="opacity-75 pb-2 material-icons">manage_search</i>
      <span class="text-center">
-        {{ $t("nothing_found") }} "{{ filterText }}"
+        {{ $t("state.nothing_found") }} "{{ filterText }}"
      </span>
    </div>
    <CollectionsAdd
@@ -591,7 +591,7 @@ export default defineComponent({

        removeRESTCollection(collectionIndex)

-        this.$toast.error(this.$t("deleted"), {
+        this.$toast.error(this.$t("state.deleted"), {
          icon: "delete",
        })
      } else if (collectionsType.type === "team-collections") {
@@ -619,7 +619,7 @@ export default defineComponent({
              },
            })
            .then(() => {
-              this.$toast.error(this.$t("deleted"), {
+              this.$toast.error(this.$t("state.deleted"), {
                icon: "delete",
              })
            })
@@ -645,7 +645,7 @@ export default defineComponent({
        }
        removeRESTRequest(folderPath, requestIndex)

-        this.$toast.error(this.$t("deleted"), {
+        this.$toast.error(this.$t("state.deleted"), {
          icon: "delete",
        })
      } else if (this.collectionsType.type === "team-collections") {
@@ -661,7 +661,7 @@ export default defineComponent({
        teamUtils
          .deleteRequest(this.$apollo, requestIndex)
          .then(() => {
-            this.$toast.error(this.$t("deleted"), {
+            this.$toast.error(this.$t("state.deleted"), {
              icon: "delete",
            })
          })
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -72,7 +72,7 @@
            <template #trigger>
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('more')"
+                :title="$t('action.more')"
                icon="more_vert"
              />
            </template>
@@ -89,7 +89,7 @@
            />
            <SmartItem
              icon="create"
-              :label="$t('edit')"
+              :label="$t('action.edit')"
              @click.native="
                $emit('edit-collection')
                $refs.options.tippy().hide()
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -52,7 +52,7 @@
            <template #trigger>
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('more')"
+                :title="$t('action.more')"
                icon="more_vert"
              />
            </template>
@@ -66,7 +66,7 @@
            />
            <SmartItem
              icon="edit"
-              :label="$t('edit')"
+              :label="$t('action.edit')"
              @click.native="
                $emit('edit-folder', {
                  folder,
@@ -229,7 +229,7 @@ export default {
      }
      removeRESTFolder(this.folderPath)

-      this.$toast.error(this.$t("deleted"), {
+      this.$toast.error(this.$t("state.deleted"), {
        icon: "delete",
      })
    },
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -51,7 +51,7 @@
          v-if="!saveRequest && !doc"
          v-tippy="{ theme: 'tooltip' }"
          icon="replay"
-          :title="$t('restore')"
+          :title="$t('action.restore')"
          class="hidden group-hover:inline-flex"
          @click.native="!doc ? selectRequest() : {}"
        />
@@ -66,13 +66,13 @@
            <template #trigger>
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('more')"
+                :title="$t('action.more')"
                icon="more_vert"
              />
            </template>
            <SmartItem
              icon="edit"
-              :label="$t('edit')"
+              :label="$t('action.edit')"
              @click.native="
                $emit('edit-request', {
                  collectionIndex,
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -65,7 +65,7 @@
            <template #trigger>
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('more')"
+                :title="$t('action.more')"
                icon="more_vert"
              />
            </template>
@@ -84,7 +84,7 @@
            <SmartItem
              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
              icon="create"
-              :label="$t('edit')"
+              :label="$t('action.edit')"
              @click.native="
                $emit('edit-collection')
                $refs.options.tippy().hide()
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -46,7 +46,7 @@
            <template #trigger>
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('more')"
+                :title="$t('action.more')"
                icon="more_vert"
              />
            </template>
@@ -62,7 +62,7 @@
            <SmartItem
              v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
              icon="edit"
-              :label="$t('edit')"
+              :label="$t('action.edit')"
              @click.native="
                $emit('edit-folder', {
                  folder,
@@ -221,7 +221,7 @@ export default {
        teamUtils
          .deleteCollection(this.$apollo, this.folder.id)
          .then(() => {
-            this.$toast.error(this.$t("deleted"), {
+            this.$toast.error(this.$t("state.deleted"), {
              icon: "delete",
            })
            this.$emit("update-team-collections")
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -44,7 +44,7 @@
          v-if="!saveRequest && !doc"
          v-tippy="{ theme: 'tooltip' }"
          icon="replay"
-          :title="$t('restore')"
+          :title="$t('action.restore')"
          class="hidden group-hover:inline-flex"
          @click.native="!doc ? selectRequest() : {}"
        />
@@ -60,13 +60,13 @@
            <template #trigger>
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('more')"
+                :title="$t('action.more')"
                icon="more_vert"
              />
            </template>
            <SmartItem
              icon="edit"
-              :label="$t('edit')"
+              :label="$t('action.edit')"
              @click.native="
                $emit('edit-request', {
                  collectionIndex,
--- a/components/docs/Collection.vue
+++ b/components/docs/Collection.vue
@@ -2,7 +2,7 @@
  <div class="collection">
    <h2 class="heading">
      <i class="material-icons">folder</i>
-      {{ collection.name || $t("none") }}
+      {{ collection.name || $t("state.none") }}
    </h2>
    <span
      v-for="(folder, index) in collection.folders"
--- a/components/docs/Folder.vue
+++ b/components/docs/Folder.vue
@@ -2,7 +2,7 @@
  <div class="folder">
    <h3 class="heading">
      <i class="material-icons">folder_open</i>
-      {{ folder.name || $t("none") }}
+      {{ folder.name || $t("state.none") }}
    </h3>
    <div
      v-for="(subFolder, index) in folder.folders"
--- a/components/docs/Request.vue
+++ b/components/docs/Request.vue
@@ -2,47 +2,48 @@
  <div class="request">
    <h4 class="heading">
      <i class="material-icons">insert_drive_file</i>
-      {{ request.name || $t("none") }}
+      {{ request.name || $t("state.none") }}
    </h4>
    <p v-if="request.url" class="doc-desc">
      <span>
-        {{ $t("request.url") }}: <code>{{ request.url || $t("none") }}</code>
+        {{ $t("request.url") }}:
+        <code>{{ request.url || $t("state.none") }}</code>
      </span>
    </p>
    <p v-if="request.path" class="doc-desc">
      <span>
        {{ $t("request.path") }}:
-        <code>{{ request.path || $t("none") }}</code>
+        <code>{{ request.path || $t("state.none") }}</code>
      </span>
    </p>
    <p v-if="request.method" class="doc-desc">
      <span>
        {{ $t("request.method") }}:
-        <code>{{ request.method || $t("none") }}</code>
+        <code>{{ request.method || $t("state.none") }}</code>
      </span>
    </p>
    <p v-if="request.auth" class="doc-desc">
      <span>
-        {{ $t("authentication") }}:
-        <code>{{ request.auth || $t("none") }}</code>
+        {{ $t("request.authorization") }}:
+        <code>{{ request.auth.authType || $t("state.none") }}</code>
      </span>
    </p>
    <p v-if="request.httpUser" class="doc-desc">
      <span>
-        {{ $t("username") }}:
-        <code>{{ request.httpUser || $t("none") }}</code>
+        {{ $t("authorization.username") }}:
+        <code>{{ request.httpUser || $t("state.none") }}</code>
      </span>
    </p>
    <p v-if="request.httpPassword" class="doc-desc">
      <span>
-        {{ $t("password") }}:
-        <code>{{ request.httpPassword || $t("none") }}</code>
+        {{ $t("authorization.password") }}:
+        <code>{{ request.httpPassword || $t("state.none") }}</code>
      </span>
    </p>
    <p v-if="request.bearerToken" class="doc-desc">
      <span>
-        {{ $t("token") }}:
-        <code>{{ request.bearerToken || $t("none") }}</code>
+        {{ $t("authorization.token") }}:
+        <code>{{ request.bearerToken || $t("state.none") }}</code>
      </span>
    </p>
    <h4 v-if="request.headers" class="heading">{{ $t("tab.headers") }}</h4>
@@ -53,8 +54,8 @@
        class="doc-desc"
      >
        <span>
-          {{ header.key || $t("none") }}:
-          <code>{{ header.value || $t("none") }}</code>
+          {{ header.key || $t("state.none") }}:
+          <code>{{ header.value || $t("state.none") }}</code>
        </span>
      </p>
    </span>
@@ -68,12 +69,14 @@
        class="doc-desc"
      >
        <span>
-          {{ parameter.key || $t("none") }}:
-          <code>{{ parameter.value || $t("none") }}</code>
+          {{ parameter.key || $t("state.none") }}:
+          <code>{{ parameter.value || $t("state.none") }}</code>
        </span>
      </p>
    </span>
-    <h4 v-if="request.bodyParams" class="heading">{{ $t("payload") }}</h4>
+    <h4 v-if="request.bodyParams" class="heading">
+      {{ $t("request.payload") }}
+    </h4>
    <span v-if="request.bodyParams">
      <p
        v-for="(payload, index) in request.bodyParams"
@@ -81,27 +84,27 @@
        class="doc-desc"
      >
        <span>
-          {{ payload.key || $t("none") }}:
-          <code>{{ payload.value || $t("none") }}</code>
+          {{ payload.key || $t("state.none") }}:
+          <code>{{ payload.value || $t("state.none") }}</code>
        </span>
      </p>
    </span>
    <p v-if="request.rawParams" class="doc-desc">
      <span>
        {{ $t("request.parameters") }}:
-        <code>{{ request.rawParams || $t("none") }}</code>
+        <code>{{ request.rawParams || $t("state.none") }}</code>
      </span>
    </p>
    <p v-if="request.contentType" class="doc-desc">
      <span>
        {{ $t("request.content_type") }}:
-        <code>{{ request.contentType || $t("none") }}</code>
+        <code>{{ request.contentType || $t("state.none") }}</code>
      </span>
    </p>
    <p v-if="request.requestType" class="doc-desc">
      <span>
        {{ $t("request.type") }}:
-        <code>{{ request.requestType || $t("none") }}</code>
+        <code>{{ request.requestType || $t("state.none") }}</code>
      </span>
    </p>
  </div>
--- a/components/environments/Add.vue
+++ b/components/environments/Add.vue
@@ -18,8 +18,14 @@
    </template>
    <template #footer>
      <span>
-        <ButtonPrimary :label="$t('save')" @click.native="addNewEnvironment" />
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="addNewEnvironment"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
      </span>
    </template>
  </SmartModal>
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -92,8 +92,14 @@
    </template>
    <template #footer>
      <span>
-        <ButtonPrimary :label="$t('save')" @click.native="saveEnvironment" />
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="saveEnvironment"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
      </span>
    </template>
  </SmartModal>
@@ -153,7 +159,7 @@ export default defineComponent({
    clearContent() {
      this.vars = []
      this.clearIcon = "done"
-      this.$toast.info(this.$t("cleared").toString(), {
+      this.$toast.info(this.$t("state.cleared").toString(), {
        icon: "clear_all",
      })
      setTimeout(() => (this.clearIcon = "clear_all"), 1000)
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -27,13 +27,13 @@
        <template #trigger>
          <ButtonSecondary
            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('more')"
+            :title="$t('action.more')"
            icon="more_vert"
          />
        </template>
        <SmartItem
          icon="create"
-          :label="$t('edit')"
+          :label="$t('action.edit')"
          @click.native="
            $emit('edit-environment')
            $refs.options.tippy().hide()
@@ -82,7 +82,7 @@ export default Vue.extend({
    removeEnvironment() {
      if (this.environmentIndex !== "Global")
        deleteEnvironment(this.environmentIndex)
-      this.$toast.error(this.$t("deleted").toString(), {
+      this.$toast.error(this.$t("state.deleted").toString(), {
        icon: "delete",
      })
    },
--- a/components/environments/ImportExport.vue
+++ b/components/environments/ImportExport.vue
@@ -10,7 +10,7 @@
          <template #trigger>
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('more')"
+              :title="$t('action.more')"
              class="rounded"
              icon="more_vert"
            />
@@ -53,9 +53,9 @@
      <div class="flex flex-col space-y-2">
        <SmartItem
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('replace_current')"
+          :title="$t('action.replace_current')"
          icon="folder_special"
-          :label="$t('replace_json')"
+          :label="$t('action.replace_json')"
          @click.native="openDialogChooseFileToReplaceWith"
        />
        <input
@@ -67,7 +67,7 @@
        />
        <SmartItem
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('preserve_current')"
+          :title="$t('action.preserve_current')"
          icon="create_new_folder"
          :label="$t('import.json')"
          @click.native="openDialogChooseFileToImportFrom"
@@ -81,7 +81,7 @@
        />
        <SmartItem
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('download_file')"
+          :title="$t('action.download_file')"
          icon="drive_file_move"
          :label="$t('export.as_json')"
          @click.native="exportJSON"
@@ -226,7 +226,7 @@ export default defineComponent({
      a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
      document.body.appendChild(a)
      a.click()
-      this.$toast.success(this.$t("download_started"), {
+      this.$toast.success(this.$t("state.download_started"), {
        icon: "done",
      })
      setTimeout(() => {
@@ -235,7 +235,7 @@ export default defineComponent({
      }, 1000)
    },
    fileImported() {
-      this.$toast.info(this.$t("file_imported"), {
+      this.$toast.info(this.$t("state.file_imported"), {
        icon: "folder_shared",
      })
    },
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -58,7 +58,7 @@
      <div class="border-b border-dividerLight flex flex-1 justify-between">
        <ButtonSecondary
          icon="add"
-          :label="$t('new')"
+          :label="$t('action.new')"
          class="rounded-none"
          @click.native="displayModalAdd(true)"
        />
--- a/components/firebase/Login.vue
+++ b/components/firebase/Login.vue
@@ -181,7 +181,7 @@ export default {
              duration: null,
              closeOnSwipe: false,
              action: {
-                text: this.$t("yes"),
+                text: this.$t("action.yes"),
                onClick: (_, toastObject) => {
                  applySetting("syncHistory", true)
                  applySetting("syncCollections", true)
@@ -228,7 +228,7 @@ export default {
            duration: null,
            closeOnSwipe: false,
            action: {
-              text: this.$t("yes"),
+              text: this.$t("action.yes"),
              onClick: async (_, toastObject) => {
                const { user } = await signInWithGithub()
                await user.linkWithCredential(pendingCred)
@@ -264,7 +264,7 @@ export default {
              duration: null,
              closeOnSwipe: false,
              action: {
-                text: this.$t("yes"),
+                text: this.$t("action.yes"),
                onClick: (_, toastObject) => {
                  applySetting("syncHistory", true)
                  applySetting("syncCollections", true)
@@ -311,7 +311,7 @@ export default {
            duration: null,
            closeOnSwipe: false,
            action: {
-              text: this.$t("yes"),
+              text: this.$t("action.yes"),
              onClick: async (_, toastObject) => {
                const { user } = await signInUserWithGoogle()
                await user.linkWithCredential(pendingCred)
--- a/components/graphql/Field.vue
+++ b/components/graphql/Field.vue
@@ -38,7 +38,7 @@
        field-deprecated
      "
    >
-      {{ $t("deprecated") }}
+      {{ $t("state.deprecated") }}
    </div>
    <div v-if="fieldArgs.length > 0">
      <h5 class="my-2">Arguments:</h5>
--- a/components/graphql/QueryEditor.vue
+++ b/components/graphql/QueryEditor.vue
@@ -181,7 +181,7 @@ export default {
      try {
        this.$emit("update-query", gql.print(gql.parse(this.editor.getValue())))
      } catch (e) {
-        this.$toast.error(this.$t("gql_prettify_invalid_query"), {
+        this.$toast.error(this.$t("error.gql_prettify_invalid_query"), {
          icon: "error",
        })
      }
--- a/components/graphql/RequestOptions.vue
+++ b/components/graphql/RequestOptions.vue
@@ -22,7 +22,7 @@
            </label>
            <div class="flex">
              <ButtonSecondary
-                :label="$t('run')"
+                :label="$t('request.run')"
                :shortcut="[getSpecialKey(), 'Enter']"
                icon="play_arrow"
                class="rounded-none !text-accent"
@@ -37,7 +37,7 @@
              <ButtonSecondary
                v-tippy="{ theme: 'tooltip' }"
                :title="`${$t(
-                  'prettify_query'
+                  'action.prettify'
                )} <kbd>${getSpecialKey()}</kbd><kbd>P</kbd>`"
                :icon="prettifyQueryIcon"
                @click.native="prettifyQuery"
@@ -358,7 +358,7 @@ export default defineComponent({
      const startTime = Date.now()

      nuxt.value.$loading.start()
-      response.value = t("loading").toString()
+      response.value = t("state.loading").toString()

      try {
        const runURL = clone(url.value)
@@ -393,14 +393,14 @@ export default defineComponent({

        addGraphqlHistoryEntry(historyEntry)

-        $toast.success(t("finished_in", { duration }).toString(), {
+        $toast.success(t("state.finished_in", { duration }).toString(), {
          icon: "done",
        })
      } catch (e: any) {
        response.value = `${e}. ${t("error.check_console_details")}`
        nuxt.value.$loading.finish()

-        $toast.error(`${e} ${t("f12_details").toString()}`, {
+        $toast.error(`${e} ${t("error.f12_details").toString()}`, {
          icon: "error",
        })
        console.error(e)
--- a/components/graphql/Response.vue
+++ b/components/graphql/Response.vue
@@ -21,7 +21,7 @@
        <ButtonSecondary
          ref="downloadResponse"
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('download_file')"
+          :title="$t('action.download_file')"
          :icon="downloadResponseIcon"
          @click.native="downloadResponse"
        />
@@ -92,7 +92,7 @@
        </div>
      </div>
      <ButtonSecondary
-        :label="$t('documentation')"
+        :label="$t('app.documentation')"
        to="https://docs.hoppscotch.io"
        icon="open_in_new"
        blank
@@ -151,7 +151,7 @@ export default defineComponent({
      document.body.appendChild(a)
      a.click()
      downloadResponseIcon.value = "done"
-      $toast.success(t("download_started").toString(), {
+      $toast.success(t("state.download_started").toString(), {
        icon: "done",
      })
      setTimeout(() => {
--- a/components/graphql/Sidebar.vue
+++ b/components/graphql/Sidebar.vue
@@ -16,7 +16,7 @@
              <input
                v-model="graphqlFieldsFilterText"
                type="search"
-                :placeholder="$t('search')"
+                :placeholder="$t('action.search')"
                class="bg-primaryLight flex w-full py-2 pr-2 pl-9"
              />
            </div>
@@ -162,7 +162,7 @@
              <ButtonSecondary
                ref="downloadSchema"
                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('download_file')"
+                :title="$t('action.download_file')"
                :icon="downloadSchemaIcon"
                @click.native="downloadSchema"
              />
@@ -415,7 +415,7 @@ export default defineComponent({
      document.body.appendChild(a)
      a.click()
      downloadSchemaIcon.value = "done"
-      $toast.success(t("download_started").toString(), {
+      $toast.success(t("state.download_started").toString(), {
        icon: "done",
      })
      setTimeout(() => {
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -15,7 +15,7 @@
          v-model="filterText"
          type="search"
          class="bg-primaryLight flex w-full py-2 pr-2 pl-9"
-          :placeholder="$t('search')"
+          :placeholder="$t('action.search')"
        />
      </div>
      <div class="flex">
@@ -63,7 +63,7 @@
    >
      <i class="opacity-75 pb-2 material-icons">manage_search</i>
      <span class="text-center">
-        {{ $t("nothing_found") }} "{{ filterText }}"
+        {{ $t("state.nothing_found") }} "{{ filterText }}"
      </span>
    </div>
    <div
@@ -137,7 +137,7 @@ export default defineComponent({
      if (this.page === "rest") clearRESTHistory()
      else clearGraphqlHistory()

-      this.$toast.error(this.$t("history_deleted").toString(), {
+      this.$toast.error(this.$t("state.history_deleted").toString(), {
        icon: "delete",
      })
    },
@@ -148,7 +148,7 @@ export default defineComponent({
      if (this.page === "rest") deleteRESTHistoryEntry(entry)
      else deleteGraphqlHistoryEntry(entry)

-      this.$toast.error(this.$t("deleted").toString(), {
+      this.$toast.error(this.$t("state.deleted").toString(), {
        icon: "delete",
      })
    },
--- a/components/history/rest/Card.vue
+++ b/components/history/rest/Card.vue
@@ -61,9 +61,9 @@ export default {
      if (this.entry.meta.responseDuration) {
        const responseDuration = this.entry.meta.responseDuration
        return responseDuration > 0
-          ? `${this.$t("duration")}: ${responseDuration}ms`
-          : this.$t("no_duration")
-      } else return this.$t("no_duration")
+          ? `${this.$t("request.duration")}: ${responseDuration}ms`
+          : this.$t("error.no_duration")
+      } else return this.$t("error.no_duration")
    },
    entryStatus() {
      const foundStatusGroup = findStatusGroup(this.entry.statusCode)
--- a/components/http/Authorization.vue
+++ b/components/http/Authorization.vue
@@ -107,7 +107,7 @@
          name="http_basic_user"
        />
        <label for="http_basic_user">
-          {{ $t("username") }}
+          {{ $t("authorization.username") }}
        </label>
      </div>
      <div class="flex relative">
@@ -120,7 +120,7 @@
          :type="passwordFieldType"
        />
        <label for="http_basic_passwd">
-          {{ $t("password") }}
+          {{ $t("authorization.password") }}
        </label>
        <ButtonSecondary
          :icon="passwordFieldType === 'text' ? 'visibility' : 'visibility_off'"
@@ -164,22 +164,6 @@
        />
      </div>
    </div>
-    <!-- <button
-            v-if="authType === 'OAuth 2.0'"
-            v-tooltip.bottom="$t('use_token')"
-            class="icon button"
-            @click="showTokenListModal = !showTokenListModal"
-          >
-            <i class="material-icons">open_in_new</i>
-          </button> -->
-    <!-- <button
-            v-if="authType === 'OAuth 2.0'"
-            v-tooltip.bottom="$t('get_token')"
-            class="icon button"
-            @click="showTokenRequest = !showTokenRequest"
-          >
-            <i class="material-icons">vpn_key</i>
-          </button> -->
    <!-- <SmartToggle
        :on="!URL_EXCLUDES.auth"
        @change="setExclude('auth', !$event)"
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -139,7 +139,7 @@ export default defineComponent({
    copyRequestCode() {
      copyToClipboard(this.requestCode)
      this.copyIcon = "done"
-      this.$toast.success(this.$t("copied_to_clipboard").toString(), {
+      this.$toast.success(this.$t("state.copied_to_clipboard").toString(), {
        icon: "done",
      })
      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
--- a/components/http/ImportCurl.vue
+++ b/components/http/ImportCurl.vue
@@ -21,7 +21,10 @@
          :label="$t('import.title')"
          @click.native="handleImport"
        />
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
      </span>
    </template>
  </SmartModal>
@@ -124,7 +127,7 @@ export default defineComponent({
        )
      } catch (e) {
        console.error(e)
-        this.$toast.error(this.$t("curl_invalid_format").toString(), {
+        this.$toast.error(this.$t("error.curl_invalid_format").toString(), {
          icon: "error",
        })
      }
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -34,7 +34,7 @@
          v-if="contentType.endsWith('json')"
          ref="prettifyRequest"
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('prettify_body')"
+          :title="$t('action.prettify')"
          :icon="prettifyIcon"
          @click.native="prettifyRequestBody"
        />
@@ -108,11 +108,11 @@ export default defineComponent({
          this.rawParamsBody = target.result
        }
        reader.readAsText(file)
-        this.$toast.info(this.$t("file_imported"), {
+        this.$toast.info(this.$t("state.file_imported"), {
          icon: "attach_file",
        })
      } else {
-        this.$toast.error(this.$t("choose_file"), {
+        this.$toast.error(this.$t("action.choose_file"), {
          icon: "attach_file",
        })
      }
@@ -126,7 +126,7 @@ export default defineComponent({
        setTimeout(() => (this.prettifyIcon = "photo_filter"), 1000)
      } catch (e) {
        console.error(e)
-        this.$toast.error(`${this.$t("json_prettify_invalid_body")}`, {
+        this.$toast.error(`${this.$t("error.json_prettify_invalid_body")}`, {
          icon: "error",
        })
      }
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -345,7 +345,7 @@ export default defineComponent({
          .catch(() => {})
      } else {
        copyToClipboard(window.location.href)
-        $toast.info(t("copied_to_clipboard").toString(), {
+        $toast.info(t("state.copied_to_clipboard").toString(), {
          icon: "done",
        })
      }
--- a/components/http/ResponseMeta.vue
+++ b/components/http/ResponseMeta.vue
@@ -42,7 +42,7 @@
        </div>
      </div>
      <ButtonSecondary
-        :label="$t('documentation')"
+        :label="$t('app.documentation')"
        to="https://docs.hoppscotch.io"
        icon="open_in_new"
        blank
@@ -87,7 +87,7 @@
      >
        <span v-if="response.statusCode">
          <span class="text-secondary"> {{ $t("response.status") }}: </span>
-          {{ response.statusCode || $t("waiting_send_req") }}
+          {{ response.statusCode || $t("state.waiting_send_request") }}
        </span>
        <span v-if="response.meta && response.meta.responseDuration">
          <span class="text-secondary"> {{ $t("response.time") }}: </span>
--- a/components/http/TokenList.vue
+++ b/components/http/TokenList.vue
@@ -1,80 +0,0 @@
-<template>
-  <SmartModal v-if="show" :title="$t('manage_token')" @close="hideModal">
-    <template #body>
-      <div class="flex flex-1">
-        <label>{{ $t("token_list") }}</label>
-        <div v-if="tokens.length != 0">
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('action.clear_all')"
-            icon="clear_all"
-            @click.native="clearContent('tokens', $event)"
-          />
-        </div>
-      </div>
-      <ul v-for="(token, index) in tokens" :key="`token-${index}`">
-        <li>
-          <input
-            class="input"
-            :placeholder="`name ${index + 1}`"
-            :value="token.name"
-            @change="
-              $store.commit('setOAuthTokenName', {
-                index,
-                value: $event.target.value,
-              })
-            "
-          />
-        </li>
-        <li>
-          <input class="input" :value="token.value" readonly />
-        </li>
-        <div class="flex flex-1">
-          <li>
-            <ButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('use_token')"
-              icon="input"
-              @click.native="useOAuthToken(token.value)"
-            />
-          </li>
-          <li>
-            <ButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('action.remove')"
-              icon="remove_circle_outline"
-              color="red"
-              @click.native="removeOAuthToken(index)"
-            />
-          </li>
-        </div>
-      </ul>
-      <p v-if="tokens.length === 0">
-        {{ $t("empty.protocols") }}
-      </p>
-    </template>
-  </SmartModal>
-</template>
-
-<script>
-export default {
-  props: {
-    show: Boolean,
-    tokens: { type: Array, default: () => [] },
-  },
-  methods: {
-    clearContent(tokens, $event) {
-      this.$emit("clear-content", tokens, $event)
-    },
-    useOAuthToken(token) {
-      this.$emit("use-oauth-token", token)
-    },
-    removeOAuthToken(index) {
-      this.$emit("remove-oauth-token", index)
-    },
-    hideModal() {
-      this.$emit("hide-modal")
-    },
-  },
-}
-</script>
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -30,7 +30,7 @@
          v-if="response.body"
          ref="downloadResponse"
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('download_file')"
+          :title="$t('action.download_file')"
          :icon="downloadIcon"
          @click.native="downloadResponse"
        />
@@ -96,7 +96,7 @@ export default {
      document.body.appendChild(a)
      a.click()
      this.downloadIcon = "done"
-      this.$toast.success(this.$t("download_started"), {
+      this.$toast.success(this.$t("state.download_started"), {
        icon: "done",
      })
      setTimeout(() => {
@@ -108,7 +108,7 @@ export default {
    copyResponse() {
      copyToClipboard(this.responseBodyText)
      this.copyIcon = "done"
-      this.$toast.success(this.$t("copied_to_clipboard"), {
+      this.$toast.success(this.$t("state.copied_to_clipboard"), {
        icon: "done",
      })
      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -21,7 +21,7 @@
          v-if="response.body"
          ref="downloadResponse"
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('download_file')"
+          :title="$t('action.download_file')"
          :icon="downloadIcon"
          @click.native="downloadResponse"
        />
@@ -101,7 +101,7 @@ export default {
      document.body.appendChild(a)
      a.click()
      this.downloadIcon = "done"
-      this.$toast.success(this.$t("download_started"), {
+      this.$toast.success(this.$t("state.download_started"), {
        icon: "done",
      })
      setTimeout(() => {
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -21,7 +21,7 @@
          v-if="response.body"
          ref="downloadResponse"
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('download_file')"
+          :title="$t('action.download_file')"
          :icon="downloadIcon"
          @click.native="downloadResponse"
        />
@@ -100,7 +100,7 @@ export default {
      document.body.appendChild(a)
      a.click()
      this.downloadIcon = "done"
-      this.$toast.success(this.$t("download_started"), {
+      this.$toast.success(this.$t("state.download_started"), {
        icon: "done",
      })
      setTimeout(() => {
@@ -112,7 +112,7 @@ export default {
    copyResponse() {
      copyToClipboard(this.responseBodyText)
      this.copyIcon = "done"
-      this.$toast.success(this.$t("copied_to_clipboard"), {
+      this.$toast.success(this.$t("state.copied_to_clipboard"), {
        icon: "done",
      })
      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -21,7 +21,7 @@
          v-if="response.body"
          ref="downloadResponse"
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('download_file')"
+          :title="$t('action.download_file')"
          :icon="downloadIcon"
          @click.native="downloadResponse"
        />
@@ -92,7 +92,7 @@ export default {
      document.body.appendChild(a)
      a.click()
      this.downloadIcon = "done"
-      this.$toast.success(this.$t("download_started"), {
+      this.$toast.success(this.$t("state.download_started"), {
        icon: "done",
      })
      setTimeout(() => {
@@ -104,7 +104,7 @@ export default {
    copyResponse() {
      copyToClipboard(this.responseBodyText)
      this.copyIcon = "done"
-      this.$toast.success(this.$t("copied_to_clipboard"), {
+      this.$toast.success(this.$t("state.copied_to_clipboard"), {
        icon: "done",
      })
      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -21,7 +21,7 @@
          v-if="response.body"
          ref="downloadResponse"
          v-tippy="{ theme: 'tooltip' }"
-          :title="$t('download_file')"
+          :title="$t('action.download_file')"
          :icon="downloadIcon"
          @click.native="downloadResponse"
        />
@@ -91,7 +91,7 @@ export default {
      document.body.appendChild(a)
      a.click()
      this.downloadIcon = "done"
-      this.$toast.success(this.$t("download_started"), {
+      this.$toast.success(this.$t("state.download_started"), {
        icon: "done",
      })
      setTimeout(() => {
@@ -103,7 +103,7 @@ export default {
    copyResponse() {
      copyToClipboard(this.responseBodyText)
      this.copyIcon = "done"
-      this.$toast.success(this.$t("copied_to_clipboard"), {
+      this.$toast.success(this.$t("state.copied_to_clipboard"), {
        icon: "done",
      })
      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -42,7 +42,7 @@
        </Pane>
        <Pane class="hide-scrollbar !overflow-auto">
          <AppSection label="response">
-            <RealtimeLog :title="$t('log')" :log="log" />
+            <RealtimeLog :title="$t('mqtt.log')" :log="log" />
          </AppSection>
        </Pane>
      </Splitpanes>
@@ -199,7 +199,7 @@ export default defineComponent({
      this.connectingState = true
      this.log = [
        {
-          payload: this.$t("connecting_to", { name: this.url }),
+          payload: this.$t("state.connecting_to", { name: this.url }),
          source: "info",
          color: "var(--accent-color)",
          ts: new Date().toLocaleTimeString(),
@@ -237,12 +237,12 @@ export default defineComponent({
      this.connectingState = false
      this.connectionState = true
      this.log.push({
-        payload: this.$t("connected_to", { name: this.url }),
+        payload: this.$t("state.connected_to", { name: this.url }),
        source: "info",
        color: "var(--accent-color)",
        ts: new Date().toLocaleTimeString(),
      })
-      this.$toast.success(this.$t("connected"), {
+      this.$toast.success(this.$t("state.connected"), {
        icon: "sync",
      })
    },
@@ -265,7 +265,7 @@ export default defineComponent({
      this.manualDisconnect = true
      this.client.disconnect()
      this.log.push({
-        payload: this.$t("disconnected_from", { name: this.url }),
+        payload: this.$t("state.disconnected_from", { name: this.url }),
        source: "info",
        color: "#ff5555",
        ts: new Date().toLocaleTimeString(),
@@ -275,7 +275,7 @@ export default defineComponent({
      this.connectingState = false
      this.connectionState = false
      if (this.manualDisconnect) {
-        this.$toast.error(this.$t("disconnected"), {
+        this.$toast.error(this.$t("state.disconnected"), {
          icon: "sync_disabled",
        })
      } else {
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -61,7 +61,7 @@
        </Pane>
        <Pane class="hide-scrollbar !overflow-auto">
          <AppSection label="response">
-            <RealtimeLog :title="$t('log')" :log="communication.log" />
+            <RealtimeLog :title="$t('socketio.log')" :log="communication.log" />
          </AppSection>
        </Pane>
      </Splitpanes>
@@ -219,7 +219,7 @@ export default defineComponent({
      this.connectingState = true
      this.communication.log = [
        {
-          payload: this.$t("connecting_to", { name: this.url }),
+          payload: this.$t("state.connecting_to", { name: this.url }),
          source: "info",
          color: "var(--accent-color)",
        },
@@ -239,13 +239,13 @@ export default defineComponent({
          this.connectionState = true
          this.communication.log = [
            {
-              payload: this.$t("connected_to", { name: this.url }),
+              payload: this.$t("state.connected_to", { name: this.url }),
              source: "info",
              color: "var(--accent-color)",
              ts: new Date().toLocaleTimeString(),
            },
          ]
-          this.$toast.success(this.$t("connected"), {
+          this.$toast.success(this.$t("state.connected"), {
            icon: "sync",
          })
        })
@@ -270,12 +270,12 @@ export default defineComponent({
          this.connectingState = false
          this.connectionState = false
          this.communication.log.push({
-            payload: this.$t("disconnected_from", { name: this.url }),
+            payload: this.$t("state.disconnected_from", { name: this.url }),
            source: "info",
            color: "#ff5555",
            ts: new Date().toLocaleTimeString(),
          })
-          this.$toast.error(this.$t("disconnected"), {
+          this.$toast.error(this.$t("state.disconnected"), {
            icon: "sync_disabled",
          })
        })
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -70,7 +70,7 @@
      <AppSection label="response">
        <ul>
          <li>
-            <RealtimeLog :title="$t('log')" :log="events.log" />
+            <RealtimeLog :title="$t('sse.log')" :log="events.log" />
            <div id="result"></div>
          </li>
        </ul>
@@ -137,7 +137,7 @@ export default {
      this.connectingState = true
      this.events.log = [
        {
-          payload: this.$t("connecting_to", { name: this.server }),
+          payload: this.$t("state.connecting_to", { name: this.server }),
          source: "info",
          color: "var(--accent-color)",
        },
@@ -150,13 +150,13 @@ export default {
            this.connectionSSEState = true
            this.events.log = [
              {
-                payload: this.$t("connected_to", { name: this.server }),
+                payload: this.$t("state.connected_to", { name: this.server }),
                source: "info",
                color: "var(--accent-color)",
                ts: new Date().toLocaleTimeString(),
              },
            ]
-            this.$toast.success(this.$t("connected"), {
+            this.$toast.success(this.$t("state.connected"), {
              icon: "sync",
            })
          }
@@ -166,12 +166,14 @@ export default {
          this.sse.onclose = () => {
            this.connectionSSEState = false
            this.events.log.push({
-              payload: this.$t("disconnected_from", { name: this.server }),
+              payload: this.$t("state.disconnected_from", {
+                name: this.server,
+              }),
              source: "info",
              color: "#ff5555",
              ts: new Date().toLocaleTimeString(),
            })
-            this.$toast.error(this.$t("disconnected"), {
+            this.$toast.error(this.$t("state.disconnected"), {
              icon: "sync_disabled",
            })
          }
@@ -191,7 +193,7 @@ export default {
      } else {
        this.events.log = [
          {
-            payload: this.$t("browser_support_sse"),
+            payload: this.$t("error.browser_support_sse"),
            source: "info",
            color: "#ff5555",
            ts: new Date().toLocaleTimeString(),
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -142,7 +142,10 @@
        </Pane>
        <Pane class="hide-scrollbar !overflow-auto">
          <AppSection label="response">
-            <RealtimeLog :title="$t('log')" :log="communication.log" />
+            <RealtimeLog
+              :title="$t('websocket.log')"
+              :log="communication.log"
+            />
          </AppSection>
        </Pane>
      </Splitpanes>
@@ -271,7 +274,7 @@ export default defineComponent({
    connect() {
      this.communication.log = [
        {
-          payload: this.$t("connecting_to", { name: this.url }),
+          payload: this.$t("state.connecting_to", { name: this.url }),
          source: "info",
          color: "var(--accent-color)",
        },
@@ -284,13 +287,13 @@ export default defineComponent({
          this.connectionState = true
          this.communication.log = [
            {
-              payload: this.$t("connected_to", { name: this.url }),
+              payload: this.$t("state.connected_to", { name: this.url }),
              source: "info",
              color: "var(--accent-color)",
              ts: new Date().toLocaleTimeString(),
            },
          ]
-          this.$toast.success(this.$t("connected"), {
+          this.$toast.success(this.$t("state.connected"), {
            icon: "sync",
          })
        }
@@ -300,12 +303,12 @@ export default defineComponent({
        this.socket.onclose = () => {
          this.connectionState = false
          this.communication.log.push({
-            payload: this.$t("disconnected_from", { name: this.url }),
+            payload: this.$t("state.disconnected_from", { name: this.url }),
            source: "info",
            color: "#ff5555",
            ts: new Date().toLocaleTimeString(),
          })
-          this.$toast.error(this.$t("disconnected"), {
+          this.$toast.error(this.$t("state.disconnected"), {
            icon: "sync_disabled",
          })
        }
@@ -403,10 +406,10 @@ export default defineComponent({
    deleteProtocol({ index }) {
      const oldProtocols = this.protocols.slice()
      this.$delete(this.protocols, index)
-      this.$toast.error(this.$t("deleted"), {
+      this.$toast.error(this.$t("state.deleted"), {
        icon: "delete",
        action: {
-          text: this.$t("undo"),
+          text: this.$t("action.undo"),
          duration: 4000,
          onClick: (_, toastObject) => {
            this.protocols = oldProtocols
--- a/components/smart/ConfirmModal.vue
+++ b/components/smart/ConfirmModal.vue
@@ -24,13 +24,13 @@ export default {
    yes: {
      type: String,
      default() {
-        return this.$t("yes")
+        return this.$t("action.yes")
      },
    },
    no: {
      type: String,
      default() {
-        return this.$t("no")
+        return this.$t("action.no")
      },
    },
  },
--- a/components/teams/Add.vue
+++ b/components/teams/Add.vue
@@ -18,8 +18,11 @@
    </template>
    <template #footer>
      <span>
-        <ButtonPrimary :label="$t('save')" @click.native="addNewTeam" />
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary :label="$t('action.save')" @click.native="addNewTeam" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
      </span>
    </template>
  </SmartModal>
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -174,8 +174,11 @@
    </template>
    <template #footer>
      <span>
-        <ButtonPrimary :label="$t('save')" @click.native="saveTeam" />
-        <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
+        <ButtonPrimary :label="$t('action.save')" @click.native="saveTeam" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
      </span>
    </template>
  </SmartModal>
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -6,7 +6,7 @@
          class="cursor-pointer transition hover:text-secondaryDark"
          @click="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
        >
-          {{ team.name || $t("nothing_found") }}
+          {{ team.name || $t("state.nothing_found") }}
        </label>
        <div class="flex -space-x-1 mt-2 overflow-hidden">
          <img
@@ -24,14 +24,14 @@
        <template #trigger>
          <ButtonSecondary
            v-tippy="{ theme: 'tooltip' }"
-            :title="$t('more')"
+            :title="$t('action.more')"
            icon="more_vert"
          />
        </template>
        <SmartItem
          v-if="team.myRole === 'OWNER'"
          icon="create"
-          :label="$t('edit')"
+          :label="$t('action.edit')"
          @click.native="
            $emit('edit-team')
            $refs.options.tippy().hide()
--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -18,7 +18,7 @@
        @click.native="displayModalAdd(true)"
      />
      <p v-if="$apollo.queries.myTeams.loading">
-        {{ $t("loading") }}
+        {{ $t("state.loading") }}
      </p>
      <div v-if="myTeams.length === 0" class="flex items-center">
        <i class="mr-4 material-icons">help_outline</i>