feat: init new i18n format

components/app/Announcement.vue

@@ -49,10 +49,6 @@
         </span>
       </SmartLink>
     </span>
-    <ButtonSecondary
+    <ButtonSecondary icon="close" />
-      v-tippy="{ theme: 'tooltip' }"
-      icon="close"
-      :title="$t('close')"
-    />
   </div>
 </template>

components/app/Footer.vue

@@ -4,16 +4,16 @@
       <div>
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="LEFT_SIDEBAR ? $t('hide_sidebar') : $t('show_sidebar')"
+          :title="LEFT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
           icon="menu_open"
           :class="{ 'transform rotate-180': !LEFT_SIDEBAR }"
           @click.native="toggleSetting('LEFT_SIDEBAR')"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="`${ZEN_MODE ? $t('turn_off') : $t('turn_on')} ${$t(
+          :title="`${
-            'zen_mode'
+            ZEN_MODE ? $t('action.turn_off') : $t('action.turn_on')
-          )}`"
+          } ${$t('layout.zen_mode')}`"
           :icon="ZEN_MODE ? 'fullscreen_exit' : 'fullscreen'"
           :class="{
             '!text-accent focus:text-accent hover:text-accent': ZEN_MODE,
@@ -33,12 +33,12 @@
           v-if="navigatorShare"
           v-tippy="{ theme: 'tooltip' }"
           icon="share"
-          :title="$t('share')"
+          :title="$t('request.share')"
           @click.native="nativeShare()"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="RIGHT_SIDEBAR ? $t('hide_sidebar') : $t('show_sidebar')"
+          :title="RIGHT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
           icon="menu_open"
           :class="['transform rotate-180', { 'rotate-0': !RIGHT_SIDEBAR }]"
           @click.native="toggleSetting('RIGHT_SIDEBAR')"

components/app/Header.vue

@@ -17,7 +17,7 @@
       <TabPrimary
         id="installPWA"
         v-tippy="{ theme: 'tooltip' }"
-        :title="$t('install_pwa')"
+        :title="$t('header.install_pwa')"
         icon="offline_bolt"
         @click.native="showInstallPrompt()"
       />
@@ -110,7 +110,7 @@ export default {
         theme: "toasted-primary",
         action: [
           {
-            text: this.$t("dismiss"),
+            text: this.$t("action.dismiss"),
             onClick: (_, toastObject) => {
               setLocalConfig("cookiesAllowed", "yes")
               toastObject.goAway(0)

components/app/Shortcuts.vue

@@ -85,19 +85,19 @@ export default {
           shortcuts: [
             {
               keys: [getPlatformSpecialKey(), "G"],
-              label: this.$t("send_request"),
+              label: this.$t("shortcut.send_request"),
             },
             {
               keys: [getPlatformSpecialKey(), "S"],
-              label: this.$t("save_to_collections"),
+              label: this.$t("shortcut.save_to_collections"),
             },
             {
               keys: [getPlatformSpecialKey(), "K"],
-              label: this.$t("copy_request_link"),
+              label: this.$t("shortcut.copy_request_link"),
             },
             {
               keys: [getPlatformSpecialKey(), "I"],
-              label: this.$t("reset_request"),
+              label: this.$t("shortcut.reset_request"),
             },
           ],
         },
@@ -106,31 +106,31 @@ export default {
           shortcuts: [
             {
               keys: [getPlatformAlternateKey(), "↑"],
-              label: this.$t("select_next_method"),
+              label: this.$t("shortcut.next_method"),
             },
             {
               keys: [getPlatformAlternateKey(), "↓"],
-              label: this.$t("select_previous_method"),
+              label: this.$t("shortcut.previous_method"),
             },
             {
               keys: [getPlatformAlternateKey(), "G"],
-              label: this.$t("select_get_method"),
+              label: this.$t("shortcut.get_method"),
             },
             {
               keys: [getPlatformAlternateKey(), "H"],
-              label: this.$t("select_head_method"),
+              label: this.$t("shortcut.head_method"),
             },
             {
               keys: [getPlatformAlternateKey(), "P"],
-              label: this.$t("select_post_method"),
+              label: this.$t("shortcut.post_method"),
             },
             {
               keys: [getPlatformAlternateKey(), "U"],
-              label: this.$t("select_put_method"),
+              label: this.$t("shortcut.put_method"),
             },
             {
               keys: [getPlatformAlternateKey(), "X"],
-              label: this.$t("select_delete_method"),
+              label: this.$t("shortcut.delete_method"),
             },
           ],
         },

components/app/Sidenav.vue

@@ -24,11 +24,31 @@ export default {
   data() {
     return {
       primaryNavigation: [
-        { target: "index", icon: "settings_ethernet", title: "REST" },
+        {
-        { target: "graphql", svg: "graphql", title: "GraphQL" },
+          target: "index",
-        { target: "realtime", icon: "language", title: "Realtime" },
+          icon: "settings_ethernet",
-        { target: "documentation", icon: "book", title: "Doc" },
+          title: this.$t("navigation.rest"),
-        { target: "settings", icon: "settings", title: "Settings" },
+        },
+        {
+          target: "graphql",
+          svg: "graphql",
+          title: this.$t("navigation.graphql"),
+        },
+        {
+          target: "realtime",
+          icon: "language",
+          title: this.$t("navigation.realtime"),
+        },
+        {
+          target: "documentation",
+          icon: "book",
+          title: this.$t("navigation.doc"),
+        },
+        {
+          target: "settings",
+          icon: "settings",
+          title: this.$t("navigation.settings"),
+        },
       ],
     }
   },

components/collections/Add.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
-      <h3 class="heading">{{ $t("new_collection") }}</h3>
+      <h3 class="heading">{{ $t("collection.new") }}</h3>
       <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
@@ -14,7 +14,7 @@
           v-model="name"
           class="input"
           type="text"
-          :placeholder="$t('my_new_collection')"
+          :placeholder="$t('collection.name')"
           @keyup.enter="addNewCollection"
         />
       </div>

components/collections/AddFolder.vue

@@ -16,7 +16,7 @@
           v-model="name"
           class="input"
           type="text"
-          :placeholder="$t('my_new_folder')"
+          :placeholder="$t('folder.new')"
           @keyup.enter="addFolder"
         />
       </div>

components/collections/Edit.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
-      <h3 class="heading">{{ $t("edit_collection") }}</h3>
+      <h3 class="heading">{{ $t("collection.edit") }}</h3>
       <div>
         <ButtonSecondary icon="close" @click.native="hideModal" />
       </div>

components/collections/EditFolder.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal v-if="show" @close="$emit('hide-modal')">
     <template #header>
-      <h3 class="heading">{{ $t("edit_folder") }}</h3>
+      <h3 class="heading">{{ $t("folder.edit") }}</h3>
       <div>
         <ButtonSecondary icon="close" @click.native="hideModal" />
       </div>

components/collections/ImportExport.vue

@@ -33,7 +33,7 @@
           </template>
           <SmartItem
             icon="assignment_returned"
-            :label="$t('import_from_gist')"
+            :label="$t('import.from_gist')"
             @click.native="
               readCollectionGist
               $refs.options.tippy().hide()
@@ -43,9 +43,9 @@
             v-tippy="{ theme: 'tooltip' }"
             :title="
               !currentUser
-                ? $t('login_with_github_to') + $t('create_secret_gist')
+                ? $t('export.require_github')
                 : currentUser.provider !== 'github.com'
-                ? $t('login_with_github_to') + $t('create_secret_gist')
+                ? $t('export.require_github')
                 : null
             "
             :disabled="
@@ -56,7 +56,7 @@
                 : false
             "
             icon="assignment_turned_in"
-            :label="$t('create_secret_gist')"
+            :label="$t('export.create_secret_gist')"
             @click.native="
               createCollectionGist
               $refs.options.tippy().hide()
@@ -87,7 +87,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('preserve_current')"
           icon="create_new_folder"
-          :label="$t('import_json')"
+          :label="$t('import.json')"
           @click.native="openDialogChooseFileToImportFrom"
         />
         <input
@@ -103,14 +103,14 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('preserve_current')"
           icon="folder_shared"
-          :label="$t('import_from_my_collections')"
+          :label="$t('import.from_my_collections')"
           @click.native="mode = 'import_from_my_collections'"
         />
         <SmartItem
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('download_file')"
           icon="drive_file_move"
-          :label="$t('export_as_json')"
+          :label="$t('export.as_json')"
           @click.native="exportJSON"
         />
       </div>
@@ -155,7 +155,7 @@
           <ButtonPrimary
             :disabled="mySelectedCollectionID == undefined"
             icon="create_new_folder"
-            :label="$t('import')"
+            :label="$t('import.title')"
             @click.native="importFromMyCollections"
           />
         </span>
@@ -213,7 +213,7 @@ export default {
           }
         )
         .then((res) => {
-          this.$toast.success(this.$t("gist_created"), {
+          this.$toast.success(this.$t("export.gist_created"), {
             icon: "done",
           })
           window.open(res.html_url)
@@ -226,7 +226,7 @@ export default {
         })
     },
     async readCollectionGist() {
-      const gist = prompt(this.$t("enter_gist_url"))
+      const gist = prompt(this.$t("import.gist_url"))
       if (!gist) return
       await this.$axios
         .$get(`https://api.github.com/gists/${gist.split("/").pop()}`, {
@@ -413,7 +413,7 @@ export default {
       })
     },
     failedImport() {
-      this.$toast.error(this.$t("import_failed"), {
+      this.$toast.error(this.$t("import.failed"), {
         icon: "error",
       })
     },

components/collections/SaveRequest.vue

@@ -103,7 +103,7 @@ export default defineComponent({
     },
     saveRequestAs() {
       if (this.picked == null) {
-        this.$toast.error(this.$t("select_collection"), {
+        this.$toast.error(this.$t("collection.select"), {
           icon: "error",
         })
         return

components/collections/graphql/Add.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
-      <h3 class="heading">{{ $t("new_collection") }}</h3>
+      <h3 class="heading">{{ $t("collection.new") }}</h3>
       <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
@@ -14,7 +14,7 @@
           v-model="name"
           class="input"
           type="text"
-          :placeholder="$t('my_new_collection')"
+          :placeholder="$t('collection.name')"
           @keyup.enter="addNewCollection"
         />
       </div>
@@ -44,7 +44,7 @@ export default Vue.extend({
   methods: {
     addNewCollection() {
       if (!this.name) {
-        this.$toast.info(this.$t("invalid_collection_name").toString())
+        this.$toast.info(this.$t("collection.invalid_name").toString())
         return
       }
 

components/collections/graphql/AddFolder.vue

@@ -16,7 +16,7 @@
           v-model="name"
           class="input"
           type="text"
-          :placeholder="$t('my_new_folder')"
+          :placeholder="$t('folder.new')"
           @keyup.enter="addFolder"
         />
       </div>

components/collections/graphql/Collection.vue

@@ -36,7 +36,7 @@
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         icon="create_new_folder"
-        :title="$t('new_folder')"
+        :title="$t('folder.new')"
         class="group-hover:inline-flex hidden"
         @click.native="
           $emit('add-folder', {
@@ -61,7 +61,7 @@
         </template>
         <SmartItem
           icon="create_new_folder"
-          :label="$t('new_folder')"
+          :label="$t('folder.new')"
           @click.native="
             $emit('add-folder', {
               path: `${collectionIndex}`,
@@ -138,13 +138,13 @@
       >
         <i class="opacity-75 pb-2 material-icons">folder_open</i>
         <span class="text-center">
-          {{ $t("collection_empty") }}
+          {{ $t("empty.collection") }}
         </span>
       </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('are_you_sure_remove_collection')"
+      :title="$t('confirm.remove_collection')"
       @hide-modal="confirmRemove = false"
       @resolve="removeCollection"
     />

components/collections/graphql/Edit.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
-      <h3 class="heading">{{ $t("edit_collection") }}</h3>
+      <h3 class="heading">{{ $t("collection.edit") }}</h3>
       <div>
         <ButtonSecondary icon="close" @click.native="hideModal" />
       </div>
@@ -48,7 +48,7 @@ export default Vue.extend({
   methods: {
     saveCollection() {
       if (!this.name) {
-        this.$toast.info(this.$t("invalid_collection_name").toString())
+        this.$toast.info(this.$t("collection.invalid_name").toString())
         return
       }
       const collectionUpdated = {

components/collections/graphql/EditFolder.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal v-if="show" @close="$emit('hide-modal')">
     <template #header>
-      <h3 class="heading">{{ $t("edit_folder") }}</h3>
+      <h3 class="heading">{{ $t("folder.edit") }}</h3>
       <div>
         <ButtonSecondary icon="close" @click.native="hideModal" />
       </div>

components/collections/graphql/Folder.vue

@@ -38,7 +38,7 @@
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         icon="create_new_folder"
-        :title="$t('new_folder')"
+        :title="$t('folder.new')"
         class="group-hover:inline-flex hidden"
         @click.native="$emit('add-folder', { folder, path: folderPath })"
       />
@@ -59,7 +59,7 @@
         </template>
         <SmartItem
           icon="create_new_folder"
-          :label="$t('new_folder')"
+          :label="$t('folder.new')"
           @click.native="
             $emit('add-folder', { folder, path: folderPath })
             $refs.options.tippy().hide()
@@ -137,13 +137,13 @@
       >
         <i class="opacity-75 pb-2 material-icons">folder_open</i>
         <span class="text-center">
-          {{ $t("folder_empty") }}
+          {{ $t("empty.folder") }}
         </span>
       </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('are_you_sure_remove_folder')"
+      :title="$t('confirm.remove_folder')"
       @hide-modal="confirmRemove = false"
       @resolve="removeFolder"
     />

components/collections/graphql/ImportExport.vue

@@ -20,7 +20,7 @@
           </template>
           <SmartItem
             icon="assignment_returned"
-            :label="$t('import_from_gist')"
+            :label="$t('import.from_gist')"
             @click.native="
               readCollectionGist
               $refs.options.tippy().hide()
@@ -30,9 +30,9 @@
             v-tippy="{ theme: 'tooltip' }"
             :title="
               !currentUser
-                ? $t('login_with_github_to') + $t('create_secret_gist')
+                ? $t('export.require_github')
                 : currentUser.provider !== 'github.com'
-                ? $t('login_with_github_to') + $t('create_secret_gist')
+                ? $t('export.require_github')
                 : null
             "
             :disabled="
@@ -43,7 +43,7 @@
                 : false
             "
             icon="assignment_turned_in"
-            :label="$t('create_secret_gist')"
+            :label="$t('export.create_secret_gist')"
             @click.native="
               createCollectionGist
               $refs.options.tippy().hide()
@@ -74,7 +74,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('preserve_current')"
           icon="create_new_folder"
-          :label="$t('import_json')"
+          :label="$t('import.json')"
           @click.native="openDialogChooseFileToImportFrom"
         />
         <input
@@ -89,7 +89,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('download_file')"
           icon="drive_file_move"
-          :label="$t('export_as_json')"
+          :label="$t('export.as_json')"
           @click.native="exportJSON"
         />
       </div>
@@ -140,7 +140,7 @@ export default {
           }
         )
         .then((res) => {
-          this.$toast.success(this.$t("gist_created"), {
+          this.$toast.success(this.$t("export.gist_created"), {
             icon: "done",
           })
           window.open(res.html_url)
@@ -153,7 +153,7 @@ export default {
         })
     },
     async readCollectionGist() {
-      const gist = prompt(this.$t("enter_gist_url"))
+      const gist = prompt(this.$t("import.gist_url"))
       if (!gist) return
       await this.$axios
         .$get(`https://api.github.com/gists/${gist.split("/").pop()}`, {
@@ -266,7 +266,7 @@ export default {
       })
     },
     failedImport() {
-      this.$toast.error(this.$t("import_failed"), {
+      this.$toast.error(this.$t("import.failed"), {
         icon: "error",
       })
     },

components/collections/graphql/Request.vue

@@ -89,7 +89,7 @@
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('are_you_sure_remove_request')"
+      :title="$t('confirm.remove_request')"
       @hide-modal="confirmRemove = false"
       @resolve="removeRequest"
     />

components/collections/graphql/index.vue

@@ -35,7 +35,7 @@
         <ButtonSecondary
           v-if="showCollActions"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('import_export')"
+          :title="$t('modal.import_export')"
           icon="import_export"
           @click.native="displayModalImportExport(true)"
         />
@@ -66,10 +66,10 @@
     >
       <i class="opacity-75 pb-2 material-icons">create_new_folder</i>
       <span class="text-center pb-4">
-        {{ $t("collections_empty") }}
+        {{ $t("empty.collections") }}
       </span>
       <ButtonSecondary
-        :label="$t('add_new')"
+        :label="$t('add.new')"
         outline
         @click.native="displayModalAdd(true)"
       />

components/collections/index.vue

@@ -43,7 +43,7 @@
           v-tippy="{ theme: 'tooltip' }"
           disabled
           icon="add"
-          :title="$t('disable_new_collection')"
+          :title="$t('team.no_access')"
           :label="$t('new')"
         />
         <ButtonSecondary
@@ -60,7 +60,7 @@
             collectionsType.selectedTeam == undefined
           "
           icon="import_export"
-          :title="$t('import_export')"
+          :title="$t('modal.import_export')"
           @click.native="displayModalImportExport(true)"
         />
       </div>
@@ -101,7 +101,7 @@
     >
       <i class="opacity-75 pb-2 material-icons">create_new_folder</i>
       <span class="text-center pb-4">
-        {{ $t("collections_empty") }}
+        {{ $t("empty.collections") }}
       </span>
       <ButtonSecondary
         v-if="
@@ -111,14 +111,14 @@
         "
         v-tippy="{ theme: 'tooltip' }"
         disabled
-        :title="$t('disable_new_collection')"
+        :title="$t('team.no_access')"
-        :label="$t('add_new')"
+        :label="$t('add.new')"
         outline
       />
       <ButtonSecondary
         v-else
         outline
-        :label="$t('add_new')"
+        :label="$t('add.new')"
         @click.native="displayModalAdd(true)"
       />
     </div>
@@ -313,7 +313,7 @@ export default {
     // Intented to be called by the CollectionAdd modal submit event
     addNewRootCollection(name) {
       if (!name) {
-        this.$toast.info(this.$t("invalid_collection_name"))
+        this.$toast.info(this.$t("collection.invalid_name"))
         return
       }
       if (this.collectionsType.type === "my-collections") {
@@ -333,7 +333,7 @@ export default {
             this.collectionsType.selectedTeam.id
           )
           .then(() => {
-            this.$toast.success(this.$t("collection_added"), {
+            this.$toast.success(this.$t("collection.created"), {
               icon: "done",
             })
           })
@@ -349,7 +349,7 @@ export default {
     // Intented to be called by CollectionEdit modal submit event
     updateEditingCollection(newName) {
       if (!newName) {
-        this.$toast.info(this.$t("invalid_collection_name"))
+        this.$toast.info(this.$t("collection.invalid_name"))
         return
       }
       if (this.collectionsType.type === "my-collections") {
@@ -392,7 +392,7 @@ export default {
           .renameCollection(this.$apollo, name, this.editingFolder.id)
           .then(() => {
             // Result
-            this.$toast.success(this.$t("folder_renamed"), {
+            this.$toast.success(this.$t("folder.renamed"), {
               icon: "done",
             })
           })
@@ -507,7 +507,7 @@ export default {
             })
             .then(() => {
               // Result
-              this.$toast.success(this.$t("folder_added"), {
+              this.$toast.success(this.$t("folder.created"), {
                 icon: "done",
               })
               this.$emit("update-team-collections")

components/collections/my/Collection.vue

@@ -36,7 +36,7 @@
       <ButtonSecondary
         v-if="doc && !selected"
         v-tippy="{ theme: 'tooltip' }"
-        :title="$t('import')"
+        :title="$t('import.title')"
         icon="check_box_outline_blank"
         color="green"
         @click.native="$emit('select-collection')"
@@ -53,7 +53,7 @@
         v-if="!doc"
         v-tippy="{ theme: 'tooltip' }"
         icon="create_new_folder"
-        :title="$t('new_folder')"
+        :title="$t('folder.new')"
         class="group-hover:inline-flex hidden"
         @click.native="
           $emit('add-folder', {
@@ -79,7 +79,7 @@
         </template>
         <SmartItem
           icon="create_new_folder"
-          :label="$t('new_folder')"
+          :label="$t('folder.new')"
           @click.native="
             $emit('add-folder', {
               folder: collection,
@@ -163,13 +163,13 @@
       >
         <i class="opacity-75 pb-2 material-icons">folder_open</i>
         <span class="text-center">
-          {{ $t("collection_empty") }}
+          {{ $t("empty.collection") }}
         </span>
       </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('are_you_sure_remove_collection')"
+      :title="$t('confirm.remove_collection')"
       @hide-modal="confirmRemove = false"
       @resolve="removeCollection"
     />

components/collections/my/Folder.vue

@@ -38,7 +38,7 @@
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         icon="create_new_folder"
-        :title="$t('new_folder')"
+        :title="$t('folder.new')"
         class="group-hover:inline-flex hidden"
         @click.native="$emit('add-folder', { folder, path: folderPath })"
       />
@@ -59,7 +59,7 @@
         </template>
         <SmartItem
           icon="create_new_folder"
-          :label="$t('new_folder')"
+          :label="$t('folder.new')"
           @click.native="
             $emit('add-folder', { folder, path: folderPath })
             $refs.options.tippy().hide()
@@ -146,13 +146,13 @@
       >
         <i class="opacity-75 pb-2 material-icons">folder_open</i>
         <span class="text-center">
-          {{ $t("folder_empty") }}
+          {{ $t("empty.folder") }}
         </span>
       </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('are_you_sure_remove_folder')"
+      :title="$t('confirm.remove_folder')"
       @hide-modal="confirmRemove = false"
       @resolve="removeFolder"
     />

components/collections/my/Request.vue

@@ -100,7 +100,7 @@
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('are_you_sure_remove_request')"
+      :title="$t('confirm.remove_request')"
       @hide-modal="confirmRemove = false"
       @resolve="removeRequest"
     />

components/collections/teams/Collection.vue

@@ -28,7 +28,7 @@
       <ButtonSecondary
         v-if="doc && !selected"
         v-tippy="{ theme: 'tooltip' }"
-        :title="$t('import')"
+        :title="$t('import.title')"
         icon="check_box_outline_blank"
         color="green"
         @click.native="$emit('select-collection')"
@@ -45,7 +45,7 @@
         v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
         v-tippy="{ theme: 'tooltip' }"
         icon="create_new_folder"
-        :title="$t('new_folder')"
+        :title="$t('folder.new')"
         class="group-hover:inline-flex hidden"
         @click.native="
           $emit('add-folder', {
@@ -73,7 +73,7 @@
         <SmartItem
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
           icon="create_new_folder"
-          :label="$t('new_folder')"
+          :label="$t('folder.new')"
           @click.native="
             $emit('add-folder', {
               folder: collection,
@@ -159,13 +159,13 @@
       >
         <i class="opacity-75 pb-2 material-icons">folder_open</i>
         <span class="text-center">
-          {{ $t("collection_empty") }}
+          {{ $t("empty.collection") }}
         </span>
       </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('are_you_sure_remove_collection')"
+      :title="$t('confirm.remove_collection')"
       @hide-modal="confirmRemove = false"
       @resolve="removeCollection"
     />

components/collections/teams/Folder.vue

@@ -31,7 +31,7 @@
         v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
         v-tippy="{ theme: 'tooltip' }"
         icon="create_new_folder"
-        :title="$t('new_folder')"
+        :title="$t('folder.new')"
         class="group-hover:inline-flex hidden"
         @click.native="$emit('add-folder', { folder, path: folderPath })"
       />
@@ -54,7 +54,7 @@
         <SmartItem
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
           icon="create_new_folder"
-          :label="$t('new_folder')"
+          :label="$t('folder.new')"
           @click.native="
             $emit('add-folder', { folder, path: folderPath })
             $refs.options.tippy().hide()
@@ -141,13 +141,13 @@
       >
         <i class="opacity-75 pb-2 material-icons">folder_open</i>
         <span class="text-center">
-          {{ $t("folder_empty") }}
+          {{ $t("empty.folder") }}
         </span>
       </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('are_you_sure_remove_folder')"
+      :title="$t('confirm.remove_folder')"
       @hide-modal="confirmRemove = false"
       @resolve="removeFolder"
     />

components/collections/teams/Request.vue

@@ -93,7 +93,7 @@
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('are_you_sure_remove_request')"
+      :title="$t('confirm.remove_request')"
       @hide-modal="confirmRemove = false"
       @resolve="removeRequest"
     />

components/environments/Edit.vue

@@ -33,7 +33,7 @@
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
               icon="add"
-              :title="$t('add_new')"
+              :title="$t('add.new')"
               @click.native="addEnvironmentVariable"
             />
           </div>
@@ -60,7 +60,7 @@
                 px-4
                 focus:outline-none
               "
-              :placeholder="$t('variable_count', { count: index + 1 })"
+              :placeholder="$t('count.variable', { count: index + 1 })"
               :name="'param' + index"
             />
             <input
@@ -74,7 +74,7 @@
                 px-4
                 focus:outline-none
               "
-              :placeholder="$t('value_count', { count: index + 1 })"
+              :placeholder="$t('count.value', { count: index + 1 })"
               :name="'value' + index"
             />
             <div>
@@ -100,10 +100,10 @@
           >
             <i class="opacity-75 pb-2 material-icons">layers</i>
             <span class="text-center pb-4">
-              {{ $t("environments_empty") }}
+              {{ $t("empty.environments") }}
             </span>
             <ButtonSecondary
-              :label="$t('add_new')"
+              :label="$t('add.new')"
               outline
               @click.native="addEnvironmentVariable"
             />

components/environments/Environment.vue

@@ -61,7 +61,7 @@
     </span>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('are_you_sure_remove_environment')"
+      :title="$t('confirm.remove_environment')"
       @hide-modal="confirmRemove = false"
       @resolve="removeEnvironment"
     />

components/environments/ImportExport.vue

@@ -22,7 +22,7 @@
           </template>
           <SmartItem
             icon="assignment_returned"
-            :label="$t('import_from_gist')"
+            :label="$t('import.from_gist')"
             @click.native="
               readEnvironmentGist
               $refs.options.tippy().hide()
@@ -32,9 +32,9 @@
             v-tippy="{ theme: 'tooltip' }"
             :title="
               !currentUser
-                ? $t('login_with_github_to') + $t('create_secret_gist')
+                ? $t('export.require_github')
                 : currentUser.provider !== 'github.com'
-                ? $t('login_with_github_to') + $t('create_secret_gist')
+                ? $t('export.require_github')
                 : null
             "
             :disabled="
@@ -45,7 +45,7 @@
                 : false
             "
             icon="assignment_turned_in"
-            :label="$t('create_secret_gist')"
+            :label="$t('export.create_secret_gist')"
             @click.native="
               createEnvironmentGist
               $refs.options.tippy().hide()
@@ -76,7 +76,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('preserve_current')"
           icon="create_new_folder"
-          :label="$t('import_json')"
+          :label="$t('import.json')"
           @click.native="openDialogChooseFileToImportFrom"
         />
         <input
@@ -91,7 +91,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('download_file')"
           icon="drive_file_move"
-          :label="$t('export_as_json')"
+          :label="$t('export.as_json')"
           @click.native="exportJSON"
         />
       </div>
@@ -142,7 +142,7 @@ export default {
           }
         )
         .then((res) => {
-          this.$toast.success(this.$t("gist_created"), {
+          this.$toast.success(this.$t("export.gist_created"), {
             icon: "done",
           })
           window.open(res.html_url)
@@ -155,7 +155,7 @@ export default {
         })
     },
     async readEnvironmentGist() {
-      const gist = prompt(this.$t("enter_gist_url"))
+      const gist = prompt(this.$t("import.gist_url"))
       if (!gist) return
       await this.$axios
         .$get(`https://api.github.com/gists/${gist.split("/").pop()}`, {

components/environments/index.vue

@@ -39,7 +39,7 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           icon="import_export"
-          :title="$t('import_export')"
+          :title="$t('modal.import_export')"
           @click.native="displayModalImportExport(true)"
         />
       </div>
@@ -64,10 +64,10 @@
     >
       <i class="opacity-75 pb-2 material-icons">library_add</i>
       <span class="text-center pb-4">
-        {{ $t("environments_empty") }}
+        {{ $t("empty.environments") }}
       </span>
       <ButtonSecondary
-        :label="$t('add_new')"
+        :label="$t('add.new')"
         outline
         @click.native="displayModalAdd(true)"
       />

components/firebase/Login.vue

@@ -56,7 +56,7 @@
           "
           type="button"
           tabindex="-1"
-          :label="$t('send_magic_link')"
+          :label="$t('auth.send_magic_link')"
           @click.native="signInWithEmail"
         />
       </div>
@@ -66,10 +66,12 @@
             mark_email_unread
           </i>
           <h3 class="font-bold my-2 text-center text-lg">
-            {{ $t("we_sent_magic_link") }}
+            {{ $t("auth.we_sent_magic_link") }}
           </h3>
           <p class="text-center">
-            {{ $t("we_sent_magic_link_description", { email: form.email }) }}
+            {{
+              $t("auth.we_sent_magic_link_description", { email: form.email })
+            }}
           </p>
         </div>
       </div>
@@ -97,7 +99,11 @@
           label="← Re-enter email"
           @click.native="mode = 'email'"
         />
-        <SmartAnchor class="link" label="Dismiss" @click.native="hideModal" />
+        <SmartAnchor
+          class="link"
+          :label="$t('action.dismiss')"
+          @click.native="hideModal"
+        />
       </p>
     </template>
   </SmartModal>
@@ -151,7 +157,7 @@ export default {
         const { additionalUserInfo } = await signInUserWithGoogle()
 
         if (additionalUserInfo.isNewUser) {
-          this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
+          this.$toast.info(`${this.$t("action.turn_on")} ${this.$t("sync")}`, {
             icon: "sync",
             duration: null,
             closeOnSwipe: false,
@@ -197,7 +203,7 @@ export default {
             return
           }
 
-          this.$toast.info(`${this.$t("account_exists")}`, {
+          this.$toast.info(`${this.$t("auth.account_exists")}`, {
             icon: "vpn_key",
             duration: null,
             closeOnSwipe: false,
@@ -227,7 +233,7 @@ export default {
         setProviderInfo(credential.providerId, credential.accessToken)
 
         if (additionalUserInfo.isNewUser) {
-          this.$toast.info(`${this.$t("turn_on")} ${this.$t("sync")}`, {
+          this.$toast.info(`${this.$t("action.turn_on")} ${this.$t("sync")}`, {
             icon: "sync",
             duration: null,
             closeOnSwipe: false,
@@ -273,7 +279,7 @@ export default {
             return
           }
 
-          this.$toast.info(`${this.$t("account_exists")}`, {
+          this.$toast.info(`${this.$t("auth.account_exists")}`, {
             icon: "vpn_key",
             duration: null,
             closeOnSwipe: false,

components/firebase/Logout.vue

@@ -10,7 +10,7 @@
     />
     <SmartConfirmModal
       :show="confirmLogout"
-      :title="$t('are_you_sure_logout')"
+      :title="$t('confirm.logout')"
       @hide-modal="confirmLogout = false"
       @resolve="logout"
     />

components/history/graphql/Card.vue

@@ -32,14 +32,14 @@
       />
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
-        :title="expand ? $t('hide_more') : $t('show_more')"
+        :title="expand ? $t('hide.more') : $t('show.more')"
         :icon="expand ? 'unfold_less' : 'unfold_more'"
         class="group-hover:inline-flex hidden"
         @click.native="expand = !expand"
       />
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
-        :title="!entry.star ? $t('add_star') : $t('remove_star')"
+        :title="!entry.star ? $t('add.star') : $t('remove.star')"
         :icon="entry.star ? 'star' : 'star_border'"
         color="yellow"
         :class="{ 'group-hover:inline-flex hidden': !entry.star }"

components/history/index.vue

@@ -73,12 +73,12 @@
     >
       <i class="opacity-75 pb-2 material-icons">schedule</i>
       <span class="text-center">
-        {{ $t("history_empty") }}
+        {{ $t("empty.history") }}
       </span>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('are_you_sure_remove_history')"
+      :title="$t('confirm.remove_history')"
       @hide-modal="confirmRemove = false"
       @resolve="clearHistory"
     />

components/history/rest/Card.vue

@@ -49,7 +49,7 @@
     />
     <ButtonSecondary
       v-tippy="{ theme: 'tooltip' }"
-      :title="!entry.star ? $t('add_star') : $t('remove_star')"
+      :title="!entry.star ? $t('add.star') : $t('remove.star')"
       :class="{ 'group-hover:inline-flex hidden': !entry.star }"
       :icon="entry.star ? 'star' : 'star_border'"
       color="yellow"

components/http/BodyParameters.vue

@@ -41,7 +41,7 @@
           px-4
           focus:outline-none
         "
-        :placeholder="$t('parameter_count', { count: index + 1 })"
+        :placeholder="$t('count.parameter', { count: index + 1 })"
         :name="'param' + index"
         :value="param.key"
         autofocus
@@ -59,7 +59,7 @@
           px-4
           focus:outline-none
         "
-        :placeholder="$t('value_count', { count: index + 1 })"
+        :placeholder="$t('count.value', { count: index + 1 })"
         :name="'value' + index"
         :value="param.value"
         @change="
@@ -86,9 +86,9 @@
           :title="
             param.hasOwnProperty('active')
               ? param.active
-                ? $t('turn_off')
+                ? $t('action.turn_off')
-                : $t('turn_on')
+                : $t('action.turn_on')
-              : $t('turn_off')
+              : $t('action.turn_off')
           "
           :icon="
             param.hasOwnProperty('active')

components/http/CodegenModal.vue

@@ -75,11 +75,14 @@
     <template #footer>
       <ButtonPrimary
         ref="copyRequestCode"
-        :label="$t('copy')"
+        :label="$t('action.copy')"
         :icon="copyIcon"
         @click.native="copyRequestCode"
       />
-      <ButtonSecondary :label="$t('dismiss')" @click.native="hideModal" />
+      <ButtonSecondary
+        :label="$t('action.dismiss')"
+        @click.native="hideModal"
+      />
     </template>
   </SmartModal>
 </template>

components/http/Headers.vue

@@ -25,7 +25,7 @@
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('add_new')"
+          :title="$t('add.new')"
           icon="add"
           @click.native="addHeader"
         />
@@ -38,7 +38,7 @@
       :class="{ 'border-t': index == 0 }"
     >
       <SmartAutoComplete
-        :placeholder="$t('header_count', { count: index + 1 })"
+        :placeholder="$t('count.header', { count: index + 1 })"
         :source="commonHeaders"
         :spellcheck="false"
         :value="header.key"
@@ -63,7 +63,7 @@
       <SmartEnvInput
         v-if="EXPERIMENTAL_URL_BAR_ENABLED"
         v-model="header.value"
-        :placeholder="$t('value_count', { count: index + 1 })"
+        :placeholder="$t('count.value', { count: index + 1 })"
         styles="
           bg-primaryLight
           flex
@@ -92,7 +92,7 @@
           px-4
           focus:outline-none
         "
-        :placeholder="$t('value_count', { count: index + 1 })"
+        :placeholder="$t('count.value', { count: index + 1 })"
         :name="'value' + index"
         :value="header.value"
         @change="
@@ -109,9 +109,9 @@
           :title="
             header.hasOwnProperty('active')
               ? header.active
-                ? $t('turn_off')
+                ? $t('action.turn_off')
-                : $t('turn_on')
+                : $t('action.turn_on')
-              : $t('turn_off')
+              : $t('action.turn_off')
           "
           :icon="
             header.hasOwnProperty('active')
@@ -146,11 +146,11 @@
     >
       <i class="opacity-75 pb-2 material-icons">post_add</i>
       <span class="text-center pb-4">
-        {{ $t("headers_empty") }}
+        {{ $t("empty.headers") }}
       </span>
       <ButtonSecondary
         outline
-        :label="$t('add_new')"
+        :label="$t('add.new')"
         @click.native="addHeader"
       />
     </div>

components/http/ImportCurl.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
-      <h3 class="heading">{{ $t("import_curl") }}</h3>
+      <h3 class="heading">{{ $t("import.curl") }}</h3>
       <div>
         <ButtonSecondary icon="close" @click.native="hideModal" />
       </div>
@@ -20,7 +20,10 @@
     </template>
     <template #footer>
       <span>
-        <ButtonPrimary :label="$t('import')" @click.native="handleImport" />
+        <ButtonPrimary
+          :label="$t('import.title')"
+          @click.native="handleImport"
+        />
         <ButtonSecondary :label="$t('cancel')" @click.native="hideModal" />
       </span>
     </template>

components/http/Parameters.vue

@@ -25,7 +25,7 @@
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('add_new')"
+          :title="$t('add.new')"
           icon="add"
           @click.native="addParam"
         />
@@ -40,7 +40,7 @@
       <SmartEnvInput
         v-if="EXPERIMENTAL_URL_BAR_ENABLED"
         v-model="param.key"
-        :placeholder="$t('parameter_count', { count: index + 1 })"
+        :placeholder="$t('count.parameter', { count: index + 1 })"
         styles="
           bg-primaryLight
           flex
@@ -69,7 +69,7 @@
           px-4
           focus:outline-none
         "
-        :placeholder="$t('parameter_count', { count: index + 1 })"
+        :placeholder="$t('count.parameter', { count: index + 1 })"
         :name="'param' + index"
         :value="param.key"
         autofocus
@@ -84,7 +84,7 @@
       <SmartEnvInput
         v-if="EXPERIMENTAL_URL_BAR_ENABLED"
         v-model="param.value"
-        :placeholder="$t('value_count', { count: index + 1 })"
+        :placeholder="$t('count.value', { count: index + 1 })"
         styles="
           bg-primaryLight
           flex
@@ -113,7 +113,7 @@
           px-4
           focus:outline-none
         "
-        :placeholder="$t('value_count', { count: index + 1 })"
+        :placeholder="$t('count.value', { count: index + 1 })"
         :name="'value' + index"
         :value="param.value"
         @change="
@@ -130,9 +130,9 @@
           :title="
             param.hasOwnProperty('active')
               ? param.active
-                ? $t('turn_off')
+                ? $t('action.turn_off')
-                : $t('turn_on')
+                : $t('action.turn_on')
-              : $t('turn_off')
+              : $t('action.turn_off')
           "
           :icon="
             param.hasOwnProperty('active')
@@ -167,10 +167,10 @@
     >
       <i class="opacity-75 pb-2 material-icons">post_add</i>
       <span class="text-center pb-4">
-        {{ $t("parameters_empty") }}
+        {{ $t("empty.parameters") }}
       </span>
       <ButtonSecondary
-        :label="$t('add_new')"
+        :label="$t('add.new')"
         outline
         @click.native="addParam"
       />

components/http/RawBody.vue

@@ -28,7 +28,7 @@
         <label for="payload">
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
-            :title="$t('import_json')"
+            :title="$t('import.json')"
             icon="post_add"
             @click.native="$refs.payload.click()"
           />

components/http/Request.vue

@@ -108,7 +108,7 @@
             <ButtonPrimary class="rounded-l-none" icon="keyboard_arrow_down" />
           </template>
           <SmartItem
-            :label="$t('import_curl')"
+            :label="$t('import.curl')"
             icon="import_export"
             @click.native="
               showCurlImportModal = !showCurlImportModal
@@ -116,7 +116,7 @@
             "
           />
           <SmartItem
-            :label="$t('show_code')"
+            :label="$t('show.code')"
             icon="code"
             @click.native="
               showCodegenModal = !showCodegenModal
@@ -167,7 +167,7 @@
           />
           <SmartItem
             ref="copyRequest"
-            :label="$t('copy_request_link')"
+            :label="$t('request.copy_link')"
             :icon="hasNavigatorShare ? 'share' : 'content_copy'"
             @click.native="
               copyRequest()
@@ -176,7 +176,7 @@
           />
           <SmartItem
             ref="saveRequest"
-            :label="$t('save_to_collections')"
+            :label="$t('request.save_as')"
             icon="create_new_folder"
             @click.native="
               showSaveRequestModal = true

components/http/ResponseMeta.vue

@@ -11,11 +11,15 @@
     >
       <div class="flex space-x-2 pb-8">
         <div class="flex flex-col space-y-4 items-end">
-          <span class="flex flex-1 items-center">{{ $t("send_request") }}</span>
+          <span class="flex flex-1 items-center">
-          <span class="flex flex-1 items-center">{{
+            {{ $t("shortcut.send_request") }}
-            $t("reset_request")
+          </span>
-          }}</span>
+          <span class="flex flex-1 items-center">
-          <span class="flex flex-1 items-center"> Show all Shortcuts </span>
+            {{ $t("shortcut.reset_request") }}
+          </span>
+          <span class="flex flex-1 items-center">
+            {{ $t("shortcut.show_all") }}
+          </span>
         </div>
         <div class="flex flex-col space-y-4">
           <div class="flex">
@@ -27,7 +31,6 @@
             <span class="shortcut-key">I</span>
           </div>
           <div class="flex">
-            <span class="shortcut-key">{{ getSpecialKey() }}</span>
             <span class="shortcut-key">?</span>
           </div>
         </div>

components/http/Tests.vue

@@ -1,6 +1,6 @@
 <template>
   <SmartTabs styles="sticky top-24 z-20">
-    <SmartTab id="script" :label="$t('script')" :selected="true">
+    <SmartTab id="script" :label="$t('test.script')" :selected="true">
       <div
         class="
           bg-primary
@@ -40,7 +40,7 @@
     </SmartTab>
     <SmartTab
       id="results"
-      :label="$t('results')"
+      :label="$t('test.results')"
       :info="totalTests ? totalTests.toString() : ''"
     >
       <div
@@ -101,7 +101,7 @@
       >
         <i class="opacity-75 pb-2 material-icons">bug_report</i>
         <span class="text-center">
-          {{ $t("add_test_scripts") }}
+          {{ $t("empty.tests") }}
         </span>
       </div>
     </SmartTab>

components/http/TokenList.vue

@@ -56,7 +56,7 @@
         </div>
       </ul>
       <p v-if="tokens.length === 0">
-        {{ $t("empty") }}
+        {{ $t("empty.protocols") }}
       </p>
     </template>
   </SmartModal>

components/lenses/renderers/HTMLLensRenderer.vue

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

components/lenses/renderers/JSONLensRenderer.vue

@@ -28,7 +28,7 @@
           v-if="response.body"
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('copy')"
+          :title="$t('action.copy')"
           :icon="copyIcon"
           @click.native="copyResponse"
         />

components/lenses/renderers/RawLensRenderer.vue

@@ -28,7 +28,7 @@
           v-if="response.body"
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('copy')"
+          :title="$t('action.copy')"
           :icon="copyIcon"
           @click.native="copyResponse"
         />

components/lenses/renderers/XMLLensRenderer.vue

@@ -28,7 +28,7 @@
           v-if="response.body"
           ref="copyResponse"
           v-tippy="{ theme: 'tooltip' }"
-          :title="$t('copy')"
+          :title="$t('action.copy')"
           :icon="copyIcon"
           @click.native="copyResponse"
         />

components/realtime/Mqtt.vue

@@ -55,7 +55,7 @@
       <AppSection label="messages">
         <div class="flex flex-col flex-1 p-4 inline-flex">
           <label for="pub_topic" class="font-semibold">
-            {{ $t("mqtt_topic") }}
+            {{ $t("mqtt.topic") }}
           </label>
         </div>
         <div class="flex px-4">
@@ -63,7 +63,7 @@
             id="pub_topic"
             v-model="pub_topic"
             class="input"
-            :placeholder="$t('topic_name')"
+            :placeholder="$t('mqtt.topic_name')"
             type="text"
             spellcheck="false"
           />
@@ -87,7 +87,7 @@
             name="get"
             class="rounded-l-none"
             :disabled="!canpublish"
-            :label="$t('mqtt_publish')"
+            :label="$t('mqtt.publish')"
             @click.native="publish"
           />
         </div>
@@ -101,7 +101,7 @@
           "
         >
           <label for="sub_topic" class="font-semibold">{{
-            $t("mqtt_topic")
+            $t("mqtt.topic")
           }}</label>
         </div>
         <div class="flex px-4">
@@ -109,7 +109,7 @@
             id="sub_topic"
             v-model="sub_topic"
             type="text"
-            :placeholder="$t('topic_name')"
+            :placeholder="$t('mqtt.topic_name')"
             spellcheck="false"
             class="input !rounded-r-none"
           />
@@ -119,7 +119,7 @@
             :disabled="!cansubscribe"
             class="rounded-l-none"
             :label="
-              subscriptionState ? $t('mqtt_unsubscribe') : $t('mqtt_subscribe')
+              subscriptionState ? $t('mqtt.unsubscribe') : $t('mqtt.subscribe')
             "
             reverse
             @click.native="toggleSubscription"

components/realtime/Socketio.vue

@@ -98,7 +98,7 @@
           <div class="flex">
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
-              :title="$t('add_new')"
+              :title="$t('add.new')"
               icon="add"
               @click.native="addCommunicationInput"
             />
@@ -114,7 +114,7 @@
                 v-model="communication.inputs[index]"
                 class="input !rounded-r-none"
                 name="message"
-                :placeholder="$t('message_count', { count: index + 1 })"
+                :placeholder="$t('count.message', { count: index + 1 })"
                 type="text"
                 :disabled="!connectionState"
                 @keyup.enter="connectionState ? sendMessage() : null"

components/realtime/Websocket.vue

@@ -54,7 +54,7 @@
             "
           >
             <label class="font-semibold">
-              {{ $t("protocols") }}
+              {{ $t("websocket.protocols") }}
             </label>
             <div class="flex">
               <ButtonSecondary
@@ -65,7 +65,7 @@
               />
               <ButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
-                :title="$t('add_new')"
+                :title="$t('add.new')"
                 icon="add"
                 @click.native="addProtocol"
               />
@@ -92,7 +92,7 @@
                 px-4
                 focus:outline-none
               "
-              :placeholder="$t('protocol_count', { count: index + 1 })"
+              :placeholder="$t('count.protocol', { count: index + 1 })"
               name="message"
               type="text"
             />
@@ -102,9 +102,9 @@
                 :title="
                   protocol.hasOwnProperty('active')
                     ? protocol.active
-                      ? $t('turn_off')
+                      ? $t('action.turn_off')
-                      : $t('turn_on')
+                      : $t('action.turn_on')
-                    : $t('turn_off')
+                    : $t('action.turn_off')
                 "
                 :icon="
                   protocol.hasOwnProperty('active')
@@ -143,7 +143,7 @@
           >
             <i class="opacity-75 pb-2 material-icons">topic</i>
             <span class="text-center">
-              {{ $t("protocols_empty") }}
+              {{ $t("empty.protocols") }}
             </span>
           </div>
         </Pane>

components/smart/ChangeLanguage.vue

@@ -1,5 +1,5 @@
 <template>
-  <span>
+  <span class="inline-flex">
     <tippy
       ref="language"
       interactive
@@ -10,13 +10,15 @@
       :animate-fill="false"
     >
       <template #trigger>
-        <SmartLink
+        <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('choose_language')"
           class="font-medium focus:outline-none"
-        >
+          outline
-          {{ `${$i18n.locales.find(({ code }) => code == $i18n.locale).name}` }}
+          :label="`${
-        </SmartLink>
+            $i18n.locales.find(({ code }) => code == $i18n.locale).name
+          }`"
+        />
       </template>
       <nuxt-link
         v-for="(locale, index) in $i18n.locales.filter(
@@ -26,22 +28,8 @@
         :to="switchLocalePath(locale.code)"
         @click="$refs.language.tippy().hide()"
       >
-        <SmartItem
+        <SmartItem :label="locale.name" />
-          :label="`${getFlagEmoji(locale.country)} \xA0 ${locale.name}`"
-        />
       </nuxt-link>
     </tippy>
   </span>
 </template>
-
-<script>
-export default {
-  methods: {
-    getFlagEmoji(c) {
-      return String.fromCodePoint(
-        ...[...c.toUpperCase()].map((x) => 0x1f1a5 + x.charCodeAt())
-      )
-    },
-  },
-}
-</script>

components/smart/EnvInput.vue

@@ -71,7 +71,8 @@ export default defineComponent({
       highlight: [
         {
           text: /(<<\w+>>)/g,
-          style: "text-white cursor-help rounded px-1 mx-0.5",
+          style:
+            "text-white cursor-help rounded px-1 focus:outline-none mx-0.5",
         },
       ],
       highlightEnabled: true,

components/teams/Add.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
-      <h3 class="heading">{{ $t("new_team") }}</h3>
+      <h3 class="heading">{{ $t("team.new") }}</h3>
       <ButtonSecondary icon="close" @click.native="hideModal" />
     </template>
     <template #body>
@@ -14,7 +14,7 @@
           v-model="name"
           class="input"
           type="text"
-          :placeholder="$t('my_new_team')"
+          :placeholder="$t('team.new_name')"
           @keyup.enter="addNewTeam"
         />
       </div>
@@ -47,7 +47,7 @@ export default {
       // We clear it early to give the UI a snappy feel
       this.name = ""
       if (name != null && name.replace(/\s/g, "").length < 6) {
-        this.$toast.error(this.$t("string_length_insufficient"), {
+        this.$toast.error(this.$t("team.name_length_insufficient"), {
           icon: "error",
         })
         return

components/teams/Edit.vue

@@ -1,7 +1,7 @@
 <template>
   <SmartModal v-if="show" @close="hideModal">
     <template #header>
-      <h3 class="heading">{{ $t("edit_team") }}</h3>
+      <h3 class="heading">{{ $t("team.edit") }}</h3>
       <div>
         <ButtonSecondary icon="close" @click.native="hideModal" />
       </div>
@@ -21,12 +21,12 @@
         />
         <div class="flex flex-1 justify-between items-center">
           <label for="memberList" class="font-semibold px-4 pt-4 pb-4">
-            {{ $t("team_member_list") }}
+            {{ $t("team.members") }}
           </label>
           <div>
             <ButtonSecondary
               icon="add"
-              :label="$t('add_new')"
+              :label="$t('add.new')"
               @click.native="addTeamMember"
             />
           </div>
@@ -51,7 +51,7 @@
                 px-4
                 focus:outline-none
               "
-              :placeholder="$t('email')"
+              :placeholder="$t('team.email')"
               :name="'param' + index"
               :value="member.user.email"
               readonly
@@ -76,7 +76,7 @@
                       px-4
                       focus:outline-none
                     "
-                    :placeholder="$t('permissions')"
+                    :placeholder="$t('team.permissions')"
                     :name="'value' + index"
                     :value="
                       typeof member.role === 'string'
@@ -140,7 +140,7 @@
                 px-4
                 focus:outline-none
               "
-              :placeholder="$t('email')"
+              :placeholder="$t('team.email')"
               :name="'member' + index"
               autofocus
             />
@@ -164,7 +164,7 @@
                       px-4
                       focus:outline-none
                     "
-                    :placeholder="$t('permissions')"
+                    :placeholder="$t('team.permissions')"
                     :name="'value' + index"
                     :value="
                       typeof member.value === 'string'
@@ -275,7 +275,7 @@ export default {
         .removeTeamMember(this.$apollo, userID, this.editingteamID)
         .then(() => {
           // Result
-          this.$toast.success(this.$t("user_removed"), {
+          this.$toast.success(this.$t("team.member_removed"), {
             icon: "done",
           })
           this.hideModal()
@@ -306,7 +306,7 @@ export default {
         this.$data.rename !== null &&
         this.$data.rename.replace(/\s/g, "").length < 6
       ) {
-        this.$toast.error(this.$t("string_length_insufficient"), {
+        this.$toast.error(this.$t("team.name_length_insufficient"), {
           icon: "error",
         })
         return
@@ -314,7 +314,7 @@ export default {
       let invalidEmail = false
       this.$data.newMembers.forEach((element) => {
         if (!this.validateEmail(element.key)) {
-          this.$toast.error(this.$t("invalid_emailID_format"), {
+          this.$toast.error(this.$t("team.invalid_email_format"), {
             icon: "error",
           })
           invalidEmail = true
@@ -342,7 +342,7 @@ export default {
           )
           .then(() => {
             // Result
-            this.$toast.success(this.$t("team_saved"), {
+            this.$toast.success(this.$t("team.saved"), {
               icon: "done",
             })
           })
@@ -364,7 +364,7 @@ export default {
           )
           .then(() => {
             // Result
-            this.$toast.success(this.$t("role_updated"), {
+            this.$toast.success(this.$t("team.member_role_updated"), {
               icon: "done",
             })
           })
@@ -380,7 +380,7 @@ export default {
         const newName =
           this.name === this.$data.rename ? this.name : this.$data.rename
         if (!/\S/.test(newName))
-          return this.$toast.error(this.$t("team_name_empty"), {
+          return this.$toast.error(this.$t("empty.team_name"), {
             icon: "error",
           })
         // Call to the graphql mutation
@@ -389,7 +389,7 @@ export default {
             .renameTeam(this.$apollo, newName, this.editingteamID)
             .then(() => {
               // Result
-              this.$toast.success(this.$t("team_saved"), {
+              this.$toast.success(this.$t("team.saved"), {
                 icon: "done",
               })
             })

components/teams/Team.vue

@@ -47,12 +47,12 @@
         v-tippy="{ theme: 'tooltip' }"
         :title="
           team.myRole === 'OWNER' && team.ownersCount == 1
-            ? $t('disable_exit')
+            ? $t('team.exit_disabled')
             : ''
         "
         :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
         icon="remove"
-        :label="$t('exit')"
+        :label="$t('team.exit')"
         @click.native="
           exitTeam
           $refs.options.tippy().hide()
@@ -78,7 +78,7 @@ export default {
         .deleteTeam(this.$apollo, this.teamID)
         .then(() => {
           // Result
-          this.$toast.success(this.$t("new_team_created"), {
+          this.$toast.success(this.$t("team.new_created"), {
             icon: "done",
           })
         })
@@ -96,7 +96,7 @@ export default {
         .exitTeam(this.$apollo, this.teamID)
         .then(() => {
           // Result
-          this.$toast.success(this.$t("team_exited"), {
+          this.$toast.success(this.$t("team.left"), {
             icon: "done",
           })
         })

components/teams/index.vue

@@ -1,7 +1,9 @@
 <template>
   <AppSection label="teams">
     <div class="flex flex-col">
-      <legend class="font-bold text-secondaryDark">{{ $t("teams") }}</legend>
+      <legend class="font-bold text-secondaryDark">
+        {{ $t("team.title") }}
+      </legend>
       <div v-if="currentUser"></div>
       <div v-else>
         <label>{{ $t("login_with") }}</label>
@@ -36,7 +38,7 @@
       {{ $t("loading") }}
     </p>
     <p v-if="myTeams.length === 0">
-      <i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
+      <i class="material-icons">help_outline</i> {{ $t("team.create_new") }}
     </p>
     <div v-else class="hide-scrollbar !overflow-auto">
       <ul class="flex-col">

lang/en-US.json

@@ -1,11 +1,163 @@
 {
-  "home": "Home",
+  "navigation": {
-  "realtime": "Realtime",
+    "rest": "REST",
-  "graphql": "GraphQL",
+    "graphql": "GraphQL",
-  "settings": "Settings",
+    "realtime": "Realtime",
-  "request": "Request",
+    "doc": "Docs",
-  "install_pwa": "Install PWA",
+    "settings": "Settings"
-  "support_us": "Support us",
+  },
+  "header": {
+    "install_pwa": "Install app"
+  },
+  "action": {
+    "turn_on": "Turn on",
+    "turn_off": "Turn off",
+    "dismiss": "Dismiss",
+    "copy": "Copy"
+  },
+  "confirm": {
+    "logout": "Are you sure you want to logout?",
+    "remove_history": "Are you sure you want to permanently delete all history?",
+    "remove_collection": "Are you sure you want to permanently delete this collection?",
+    "remove_folder": "Are you sure you want to permanently delete this folder?",
+    "remove_request": "Are you sure you want to permanently delete this request?",
+    "remove_environment": "Are you sure you want to permanently delete this environment?",
+    "remove_telemetry": "Are you sure you want to opt-out of Telemetry?"
+  },
+  "empty": {
+    "protocols": "Protocols are empty",
+    "environments": "Environments are empty",
+    "collections": "Collections are empty",
+    "team_name": "Team name empty",
+    "collection": "Collection is empty",
+    "folder": "Folder is empty",
+    "parameters": "Parameters are empty",
+    "history": "History is empty",
+    "headers": "Headers are empty",
+    "tests": "Tests are empty",
+    "schema": "Connect to a GraphQL endpoint"
+  },
+  "count": {
+    "message": "Message {count}",
+    "protocol": "Protocol {count}",
+    "header": "Header {count}",
+    "parameter": "Parameter {count}",
+    "variable": "Variable {count}",
+    "value": "Value {count}"
+  },
+  "add": {
+    "new": "Add new",
+    "star": "Add star"
+  },
+  "remove": {
+    "star": "Remove star"
+  },
+  "show": {
+    "code": "Show Code",
+    "more": "Show more",
+    "sidebar": "Show sidebar"
+  },
+  "hide": {
+    "sidebar": "Hide sidebar",
+    "more": "Hide more",
+    "preview": "Hide Preview"
+  },
+  "app": {
+    "new_version_found": "New version found. Refresh to update."
+  },
+  "collection": {
+    "select": "Select a Collection",
+    "invalid_name": "Please provide a valid name for the collection",
+    "new": "New Collection",
+    "name": "My New Collection",
+    "edit": "Edit Collection",
+    "created": "Collection created"
+  },
+  "folder": {
+    "new": "New Folder",
+    "edit": "Edit Folder",
+    "created": "Folder created",
+    "renamed": "Folder renamed"
+  },
+  "team": {
+    "title": "Teams",
+    "exit": "Exit Team",
+    "name_length_insufficient": "Team name should be atleast 6 characters long",
+    "invalid_email_format": "Email format is invalid",
+    "new": "New Team",
+    "new_name": "My New Team",
+    "edit": "Edit Team",
+    "members": "Members",
+    "permissions": "Permissions",
+    "invalid_member_permission": "Please provide a valid permission to the team member",
+    "email": "E-mail",
+    "create_new": "Create new team",
+    "new_created": "New team created",
+    "saved": "Team saved",
+    "no_access": "You do not have edit access to these collections",
+    "left": "You left the team",
+    "exit_disabled": "Only owner cannot exit the team",
+    "member_role_updated": "User role(s) updated",
+    "member_removed": "User removed"
+  },
+  "modal": {
+    "import_export": "Import / Export"
+  },
+  "import": {
+    "title": "Import",
+    "from_gist": "Import from Gist",
+    "gist_url": "Enter Gist URL",
+    "failed": "Import failed",
+    "json": "Import from JSON",
+    "collections": "Import collections",
+    "curl": "Import cURL",
+    "from_my_collections": "Import from My Collections"
+  },
+  "export": {
+    "as_json": "Export as JSON",
+    "create_secret_gist": "Create secret Gist",
+    "require_github": "Login with GitHub to create secret gist",
+    "gist_created": "Gist created"
+  },
+  "auth": {
+    "account_exists": "Account exists with different credential - Login to link both accounts",
+    "send_magic_link": "Send a magic link",
+    "we_sent_magic_link": "We sent you a magic link!",
+    "we_sent_magic_link_description": "Check your inbox - we sent an email to {email}. It contains a magic link that will log you in."
+  },
+  "tab": {
+    "websocket": "WebSocket",
+    "mqtt": "MQTT"
+  },
+  "websocket": {
+    "protocols": "Protocols"
+  },
+  "mqtt": {
+    "topic": "Topic",
+    "topic_name": "Topic Name",
+    "topic_title": "Publish / Subscribe topic",
+    "publish": "Publish",
+    "subscribe": "Subscribe",
+    "unsubscribe": "Unsubscribe"
+  },
+  "request": {
+    "copy_link": "Copy link",
+    "save_as": "Save as",
+    "share": "Share"
+  },
+  "settings": {
+    "shortcuts_indicator": "Shortcuts indicator",
+    "telemetry": "Telemetry",
+    "interceptor": "Interceptor",
+    "navigation_sidebar": "Navigation sidebar"
+  },
+  "layout": {
+    "zen_mode": "Zen mode"
+  },
+  "test": {
+    "script": "Script",
+    "results": "Results"
+  },
   "options": "Options",
   "communication": "Communication",
   "endpoint": "Endpoint",
@@ -13,13 +165,6 @@
   "theme": "Theme",
   "choose_language": "Choose Language",
   "shortcuts": "Shortcuts",
-  "send_request": "Send/Cancel Request",
-  "save_to_collections": "Save to Collections",
-  "copy_request_link": "Copy Request Link",
-  "reset_request": "Reset Request",
-  "open_collective": "Open Collective",
-  "paypal": "PayPal",
-  "patreon": "Patreon",
   "javascript_code": "JavaScript Code",
   "method": "Method",
   "path": "Path",
@@ -31,16 +176,12 @@
   "request_body": "Request Body",
   "raw_request_body": "Raw Request Body",
   "response_body": "Response Body",
-  "show_code": "Show Code",
-  "show_prerequest_script": "Show Pre-Request Script",
-  "hide_prerequest_script": "Hide Pre-Request Script",
   "authentication": "Authentication",
   "authentication_type": "Authentication type",
   "include_in_url": "Include in URL",
   "parameters": "Parameters",
   "expand_response": "Expand response",
   "collapse_response": "Collapse response",
-  "hide_preview": "Hide Preview",
   "preview_html": "Preview HTML",
   "history": "History",
   "collections": "Collections",
@@ -50,18 +191,13 @@
   "edit_environment": "Edit Environment",
   "env_variable_list": "Variable List",
   "invalid_environment_name": "Please provide a valid name for the environment",
-  "add_one_variable": "(add at least one variable)",
-  "import_curl": "Import cURL",
-  "import": "Import",
   "generate_code": "Generate code",
   "request_type": "Request type",
   "generated_code": "Generated code",
   "status": "Status",
   "headers": "Headers",
-  "websocket": "WebSocket",
   "waiting_for_connection": "waiting for connection",
   "message": "Message",
-  "message_count": "Message {count}",
   "sse": "SSE",
   "server": "Server",
   "events": "Events",
@@ -69,7 +205,6 @@
   "variables": "Variables",
   "get_schema": "Get schema",
   "header_list": "Header list",
-  "add_new": "Add new",
   "response": "Response",
   "query": "Query",
   "queries": "Queries",
@@ -118,42 +253,21 @@
   "prerequest_script": "Pre-Request Script",
   "no_prerequest_script": "No pre-request script",
   "search": "Search",
-  "history_empty": "History is empty",
   "history_deleted": "History deleted",
   "clear": "Clear",
   "clear_all": "Clear All",
   "cleared": "Cleared",
-  "close": "Close",
-  "sort": "Sort",
   "time": "Time",
   "duration": "Duration",
   "no_duration": "No duration",
-  "show_more": "Show more",
-  "hide_more": "Hide more",
-  "collection": "Collection",
-  "current_collection": "Current Collection",
-  "select_collection": "Select a Collection",
-  "create_collection": "Create a Collection",
   "new": "New",
-  "import_export": "Import / Export",
   "more": "More",
-  "folder": "Folder",
-  "new_folder": "New Folder",
-  "my_new_folder": "My New Folder",
-  "folder_empty": "Folder is empty",
-  "edit_folder": "Edit Folder",
   "edit": "Edit",
   "delete": "Delete",
   "deleted": "Deleted",
   "undo": "Undo",
-  "collection_empty": "Collection is empty",
-  "invalid_collection_name": "Please provide a valid name for the collection",
-  "new_collection": "New Collection",
-  "my_new_collection": "My New Collection",
-  "edit_collection": "Edit Collection",
   "edit_request": "Edit Request",
   "save_request_as": "Save Request As",
-  "export": "Export",
   "connecting_to": "Connecting to {name}...",
   "connected": "Connected",
   "connected_to": "Connected to {name}",
@@ -177,17 +291,13 @@
   "cancel": "Cancel",
   "cancelled": "Cancelled",
   "save": "Save",
-  "dismiss": "Dismiss",
   "yes": "Yes",
   "no": "No",
   "restore": "Restore",
-  "add_star": "Add star",
-  "remove_star": "Remove star",
   "nothing_found": "Nothing found for",
   "replace_current": "Replace current",
   "replace_json": "Replace with JSON",
   "preserve_current": "Preserve current",
-  "import_json": "Import from JSON",
   "download_file": "Download file",
   "upload_file": "Upload file",
   "use_request": "Use request",
@@ -196,18 +306,11 @@
   "reset_default": "Reset to default",
   "fields": "Fields",
   "deprecated": "DEPRECATED",
-  "add_one_header": "(add at least one header)",
-  "add_one_parameter": "(add at least one parameter)",
-  "header_count": "Header {count}",
-  "parameter_count": "Parameter {count}",
-  "variable_count": "Variable {count}",
-  "value_count": "Value {count}",
   "send_request_first": "Send a request first",
   "generate_docs": "Generate documentation",
   "generate_docs_message": "Import any Hoppscotch collection to generate API documentation on-the-go.",
   "generate_docs_first": "Generate documentation first",
   "docs_generated": "Documentation generated",
-  "import_collections": "Import collections",
   "optional": "(optional)",
   "none": "None",
   "username": "Username",
@@ -216,7 +319,6 @@
   "payload": "Payload",
   "choose_file": "Choose a file",
   "file_imported": "File imported",
-  "import_failed": "Import failed",
   "f12_details": "(F12 for details)",
   "we_use_cookies": "We use cookies",
   "copied_to_clipboard": "Copied to clipboard",
@@ -240,7 +342,6 @@
   "go_home": "Go Home",
   "reload": "Reload",
   "enter_curl": "Enter cURL",
-  "empty": "Empty",
   "extensions": "Extensions",
   "extensions_use_toggle": "Use the browser extension to send requests (if present)",
   "extension_version": "Extension Version",
@@ -260,103 +361,27 @@
   "syncHistory": "History",
   "syncCollections": "Collections",
   "syncEnvironments": "Environments",
-  "turn_on": "Turn on",
-  "turn_off": "Turn off",
-  "import_from_sync": "Import from Sync",
   "socketio": "Socket.IO",
   "event_name": "Event Name",
-  "mqtt": "MQTT",
-  "mqtt_topic": "Topic",
-  "topic_name": "Topic Name",
-  "mqtt_topic_title": "Publish / Subscribe topic",
-  "mqtt_publish": "Publish",
-  "mqtt_subscribe": "Subscribe",
-  "mqtt_unsubscribe": "Unsubscribe",
   "pre_request_script": "Pre-request Script",
   "tests": "Tests",
-  "create_new_collection": "Create new collection",
   "create_new_environment": "Create new environment",
-  "are_you_sure": "Are you sure?",
-  "are_you_sure_logout": "Are you sure you want to logout?",
-  "are_you_sure_remove_history": "Are you sure you want to permanently delete all history?",
-  "are_you_sure_remove_collection": "Are you sure you want to permanently delete this collection?",
-  "are_you_sure_remove_folder": "Are you sure you want to permanently delete this folder?",
-  "are_you_sure_remove_request": "Are you sure you want to permanently delete this request?",
-  "are_you_sure_remove_environment": "Are you sure you want to permanently delete this environment?",
-  "are_you_sure_remove_telemetry": "Are you sure you want to opt-out of Telemetry?",
   "telemetry_helps_us": "Telemetry helps us to personalize our operations and deliver the best experience to you.",
-  "select_next_method": "Select Next method",
+  "shortcut": {
-  "select_previous_method": "Select Previous method",
+    "show_all": "Show all Shortcuts",
-  "select_get_method": "Select GET method",
+    "send_request": "Send Request",
-  "select_head_method": "Select HEAD method",
+    "save_to_collections": "Save to Collections",
-  "select_post_method": "Select POST method",
+    "copy_request_link": "Copy Request Link",
-  "select_put_method": "Select PUT method",
+    "reset_request": "Reset Request",
-  "select_delete_method": "Select DELETE method",
+    "next_method": "Select Next method",
+    "previous_method": "Select Previous method",
+    "get_method": "Select GET method",
+    "head_method": "Select HEAD method",
+    "post_method": "Select POST method",
+    "put_method": "Select PUT method",
+    "delete_method": "Select DELETE method"
+  },
   "experiments": "Experiments",
   "experiments_notice": "This is a collection of experiments we're working on that might turn out to be useful, fun, both, or neither. They're not final and may not be stable, so if something overly weird happens, don't panic. Just turn the dang thing off. Jokes aside, ",
-  "use_experimental_url_bar": "Use experimental URL bar with environment highlighting",
+  "use_experimental_url_bar": "Use experimental URL bar with environment highlighting"
-  "select_environment": "Select environment",
-  "login_with_github_to": "Login with GitHub to ",
-  "create_secret_gist": "Create secret Gist",
-  "gist_created": "Gist created",
-  "import_from_gist": "Import from Gist",
-  "enter_gist_url": "Enter Gist URL",
-  "account_exists": "Account exists with different credential - Login to link both accounts",
-  "confirm": "Confirm",
-  "new_version_found": "New version found. Refresh to update.",
-  "size": "Size",
-  "exit": "Exit Team",
-  "string_length_insufficient": "Team name should be atleast 6 characters long",
-  "invalid_emailID_format": "Email ID format is invalid",
-  "teams": "Teams",
-  "new_team": "New Team",
-  "my_new_team": "My New Team",
-  "edit_team": "Edit Team",
-  "team_member_list": "Member List",
-  "invalid_team_name": "Please provide a valid name for the team",
-  "use_team": "Use Team",
-  "add_one_member": "(add at least one member)",
-  "permissions": "Permissions",
-  "invalid_member_permission": "Please provide a valid permission to the team member",
-  "email": "E-mail",
-  "create_new_team": "Create new team",
-  "new_team_created": "New team created",
-  "team_saved": "Team saved",
-  "team_name_empty": "Team name empty",
-  "disable_new_collection": "You do not have edit access to these collections",
-  "collection_added": "Collection added successfully",
-  "folder_added": "Folder added successfully",
-  "team_exited": "Team exited",
-  "disable_exit": "Only owner cannot exit the team",
-  "folder_renamed": "Folder renamed successfully",
-  "role_updated": "User role(s) updated successfully",
-  "user_removed": "User removed successfully",
-  "import_from_my_collections": "Import from My Collections",
-  "export_as_json": "Export as JSON",
-  "send_magic_link": "Send a magic link",
-  "you_can_dismiss_this_modal": "You can dismiss this ",
-  "we_sent_magic_link": "We sent you a magic link!",
-  "we_sent_magic_link_description": "Check your inbox - we sent an email to {email}. It contains a magic link that will log you in.",
-  "hide_sidebar": "Hide sidebar",
-  "show_sidebar": "Show sidebar",
-  "navigation_sidebar": "Navigation sidebar",
-  "protocols": "Protocols",
-  "protocol_count": "Protocol {count}",
-  "share": "Share",
-  "interceptor": "Interceptor",
-  "profile": "Profile",
-  "telemetry": "Telemetry",
-  "shortcuts_indicator": "Shortcuts indicator",
-  "zen_mode": "Zen mode",
-  "notifications": "Notifications",
-  "connect_graphql_endpoint": "Connect to a GraphQL endpoint",
-  "copy": "Copy",
-  "parameters_empty": "Parameters are empty",
-  "headers_empty": "Headers are empty",
-  "script": "Script",
-  "results": "Results",
-  "add_test_scripts": "Add test script",
-  "protocols_empty": "Protocols are empty",
-  "environments_empty": "Environments are empty",
-  "collections_empty": "Collections are empty"
 }

layouts/default.vue

@@ -93,7 +93,7 @@ export default defineComponent({
     if (workbox) {
       workbox.addEventListener("installed", (event: any) => {
         if (event.isUpdate) {
-          this.$toast.show(this.$t("new_version_found").toString(), {
+          this.$toast.show(this.$t("app.new_version_found").toString(), {
             icon: "info",
             duration: 0,
             theme: "toasted-primary",

pages/documentation.vue

@@ -39,7 +39,7 @@
                   v-tippy="{ theme: 'tooltip' }"
                   title="JSON"
                   icon="folder"
-                  :label="$t('import_collections')"
+                  :label="$t('import.collections')"
                   @click.native="$refs.collectionUpload.click()"
                 />
               </label>
@@ -123,13 +123,9 @@
                   v-tippy="{ theme: 'tooltip' }"
                   :title="
                     !currentUser
-                      ? `${$t('login_with_github_to')} ${$t(
+                      ? $t('export.require_github')
-                          'create_secret_gist'
-                        ).toLowerCase()}`
                       : currentUser.provider !== 'github.com'
-                      ? `${$t('login_with_github_to')} ${$t(
+                      ? $t('export.require_github')
-                          'create_secret_gist'
-                        ).toLowerCase()}`
                       : 'Beta'
                   "
                 >
@@ -141,7 +137,7 @@
                         ? true
                         : false
                     "
-                    :label="$t('create_secret_gist')"
+                    :label="$t('export.create_secret_gist')"
                     @click.native="createDocsGist"
                   />
                 </div>
@@ -231,7 +227,7 @@ export default defineComponent({
           }
         )
         .then((res) => {
-          this.$toast.success(this.$t("gist_created"), {
+          this.$toast.success(this.$t("export.gist_created"), {
             icon: "done",
           })
           window.open(res.html_url)

pages/graphql.vue

@@ -66,7 +66,7 @@
                       />
                       <ButtonSecondary
                         v-tippy="{ theme: 'tooltip' }"
-                        :title="$t('copy')"
+                        :title="$t('action.copy')"
                         :icon="copyQueryIcon"
                         @click.native="copyQuery"
                       />
@@ -125,7 +125,7 @@
                     <div class="flex">
                       <ButtonSecondary
                         v-tippy="{ theme: 'tooltip' }"
-                        :title="$t('copy')"
+                        :title="$t('action.copy')"
                         :icon="copyVariablesIcon"
                         @click.native="copyVariables"
                       />
@@ -182,7 +182,7 @@
                       />
                       <ButtonSecondary
                         v-tippy="{ theme: 'tooltip' }"
-                        :title="$t('add_new')"
+                        :title="$t('add.new')"
                         icon="add"
                         @click.native="addRequestHeader"
                       />
@@ -199,7 +199,7 @@
                     :class="{ 'border-t': index == 0 }"
                   >
                     <SmartAutoComplete
-                      :placeholder="$t('header_count', { count: index + 1 })"
+                      :placeholder="$t('count.header', { count: index + 1 })"
                       :source="commonHeaders"
                       :spellcheck="false"
                       :value="header.key"
@@ -230,7 +230,7 @@
                         px-4
                         focus:outline-none
                       "
-                      :placeholder="$t('value_count', { count: index + 1 })"
+                      :placeholder="$t('count.value', { count: index + 1 })"
                       :name="`value ${index}`"
                       :value="header.value"
                       autofocus
@@ -247,9 +247,9 @@
                         :title="
                           header.hasOwnProperty('active')
                             ? header.active
-                              ? $t('turn_off')
+                              ? $t('action.turn_off')
-                              : $t('turn_on')
+                              : $t('action.turn_on')
-                            : $t('turn_off')
+                            : $t('action.turn_off')
                         "
                         :icon="
                           header.hasOwnProperty('active')
@@ -291,10 +291,10 @@
                   >
                     <i class="opacity-75 pb-2 material-icons">post_add</i>
                     <span class="text-center pb-4">
-                      {{ $t("headers_empty") }}
+                      {{ $t("empty.headers") }}
                     </span>
                     <ButtonSecondary
-                      :label="$t('add_new')"
+                      :label="$t('add.new')"
                       outline
                       @click.native="addRequestHeader"
                     />
@@ -333,7 +333,7 @@
                   <ButtonSecondary
                     ref="copyResponseButton"
                     v-tippy="{ theme: 'tooltip' }"
-                    :title="$t('copy')"
+                    :title="$t('action.copy')"
                     :icon="copyResponseIcon"
                     @click.native="copyResponse"
                   />
@@ -494,7 +494,7 @@
                 >
                   <i class="opacity-75 pb-2 material-icons">link</i>
                   <span class="text-center">
-                    {{ $t("connect_graphql_endpoint") }}
+                    {{ $t("empty.schema") }}
                   </span>
                 </div>
               </AppSection>
@@ -542,7 +542,7 @@
                     <ButtonSecondary
                       ref="copySchemaCode"
                       v-tippy="{ theme: 'tooltip' }"
-                      :title="$t('copy')"
+                      :title="$t('action.copy')"
                       :icon="copySchemaIcon"
                       @click.native="copySchema"
                     />
@@ -574,7 +574,7 @@
                 >
                   <i class="opacity-75 pb-2 material-icons">link</i>
                   <span class="text-center">
-                    {{ $t("connect_graphql_endpoint") }}
+                    {{ $t("empty.schema") }}
                   </span>
                 </div>
               </AppSection>

pages/index.vue

@@ -143,8 +143,6 @@
                           />
                           <ButtonSecondary
                             @click.native="showTokenRequest = false"
-                            v-tippy="{ theme: 'tooltip' }"
-                            :title="$t('close')"
                             icon="close"
                           />
                         </div>

pages/realtime.vue

@@ -1,6 +1,6 @@
 <template>
   <SmartTabs>
-    <SmartTab id="websocket" :label="$t('websocket')" :selected="true">
+    <SmartTab id="websocket" :label="$t('tab.websocket')" :selected="true">
       <RealtimeWebsocket />
     </SmartTab>
     <SmartTab id="sse" :label="$t('sse')">
@@ -9,7 +9,7 @@
     <SmartTab id="socketio" :label="$t('socketio')">
       <RealtimeSocketio />
     </SmartTab>
-    <SmartTab id="mqtt" :label="$t('mqtt')">
+    <SmartTab id="mqtt" :label="$t('tab.mqtt')">
       <RealtimeMqtt />
     </SmartTab>
   </SmartTabs>

pages/settings.vue

@@ -135,6 +135,14 @@
               <SmartAccentModePicker />
             </div>
           </fieldset>
+          <fieldset>
+            <legend class="font-bold text-secondaryDark">
+              {{ $t("choose_language") }}
+            </legend>
+            <div class="mt-4">
+              <SmartChangeLanguage />
+            </div>
+          </fieldset>
           <fieldset>
             <legend class="font-bold text-secondaryDark">
               {{ $t("experiments") }}
@@ -168,7 +176,7 @@
               </div>
               <div class="flex items-center">
                 <SmartToggle :on="TELEMETRY_ENABLED" @change="showConfirmModal">
-                  {{ $t("telemetry") }}
+                  {{ $t("settings.telemetry") }}
                   {{ TELEMETRY_ENABLED ? $t("enabled") : $t("disabled") }}
                 </SmartToggle>
               </div>
@@ -177,7 +185,7 @@
                   :on="SHORTCUT_INDICATOR"
                   @change="toggleSetting('SHORTCUT_INDICATOR')"
                 >
-                  {{ $t("shortcuts_indicator") }}
+                  {{ $t("settings.shortcuts_indicator") }}
                   {{ SHORTCUT_INDICATOR ? $t("enabled") : $t("disabled") }}
                 </SmartToggle>
               </div>
@@ -186,13 +194,13 @@
                   :on="LEFT_SIDEBAR"
                   @change="toggleSetting('LEFT_SIDEBAR')"
                 >
-                  {{ $t("navigation_sidebar") }}
+                  {{ $t("settings.navigation_sidebar") }}
                   {{ LEFT_SIDEBAR ? $t("enabled") : $t("disabled") }}
                 </SmartToggle>
               </div>
               <div class="flex items-center">
                 <SmartToggle :on="ZEN_MODE" @change="toggleSetting('ZEN_MODE')">
-                  {{ $t("zen_mode") }}
+                  {{ $t("layout.zen_mode") }}
                   {{ ZEN_MODE ? $t("enabled") : $t("disabled") }}
                 </SmartToggle>
               </div>
@@ -204,7 +212,7 @@
       <div class="md:grid md:grid-cols-3 md:gap-4">
         <div class="p-8 md:col-span-1">
           <h3 class="heading">
-            {{ $t("interceptor") }}
+            {{ $t("settings.interceptor") }}
           </h3>
           <p class="mt-1 text-secondaryLight">
             Middleware between application and APIs.
@@ -288,6 +296,7 @@
                     ml-2
                     py-2
                     px-4
+                    truncate
                   "
                 >
                   {{ `${$t("proxy")} ${$t("url")}` }}
@@ -328,9 +337,7 @@
     <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="`${$t('are_you_sure_remove_telemetry')} ${$t(
+      :title="`${$t('confirm.remove_telemetry')} ${$t('telemetry_helps_us')}`"
-        'telemetry_helps_us'
-      )}`"
       @hide-modal="confirmRemove = false"
       @resolve="
         toggleSetting('TELEMETRY_ENABLED')