refactor: i18n

components/docs/Request.vue

@@ -45,7 +45,7 @@
         <code>{{ request.bearerToken || $t("none") }}</code>
       </span>
     </p>
-    <h4 v-if="request.headers" class="heading">{{ $t("headers") }}</h4>
+    <h4 v-if="request.headers" class="heading">{{ $t("tab.headers") }}</h4>
     <span v-if="request.headers">
       <p
         v-for="(header, index) in request.headers"

components/graphql/RequestOptions.vue

@@ -111,7 +111,7 @@
         </AppSection>
       </SmartTab>
 
-      <SmartTab :id="'headers'" :label="$t('headers')">
+      <SmartTab :id="'headers'" :label="$t('tab.headers')">
         <AppSection label="headers">
           <div
             class="
@@ -127,7 +127,7 @@
             "
           >
             <label class="font-semibold text-secondaryLight">
-              {{ $t("headers") }}
+              {{ $t("tab.headers") }}
             </label>
             <div class="flex">
               <ButtonSecondary

components/graphql/Response.vue

@@ -15,7 +15,7 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("response") }}
+        {{ $t("response.title") }}
       </label>
       <div class="flex">
         <ButtonSecondary
@@ -62,7 +62,7 @@
       <div class="flex space-x-2 pb-4">
         <div class="flex flex-col space-y-4 items-end">
           <span class="flex flex-1 items-center">
-            {{ $t("shortcut.send_request") }}
+            {{ $t("shortcut.request.send_request") }}
           </span>
           <span class="flex flex-1 items-center">
             {{ $t("shortcut.general.show_all") }}

components/http/ResponseMeta.vue

@@ -12,7 +12,7 @@
       <div class="flex space-x-2 pb-4">
         <div class="flex flex-col space-y-4 items-end">
           <span class="flex flex-1 items-center">
-            {{ $t("shortcut.send_request") }}
+            {{ $t("shortcut.request.send_request") }}
           </span>
           <span class="flex flex-1 items-center">
             {{ $t("shortcut.general.show_all") }}
@@ -86,15 +86,15 @@
         class="font-semibold space-x-4"
       >
         <span v-if="response.statusCode">
-          <span class="text-secondary"> Status: </span>
+          <span class="text-secondary"> {{ $t("response.status") }}: </span>
           {{ response.statusCode || $t("waiting_send_req") }}
         </span>
         <span v-if="response.meta && response.meta.responseDuration">
-          <span class="text-secondary"> Time: </span>
+          <span class="text-secondary"> {{ $t("response.time") }}: </span>
           {{ `${response.meta.responseDuration} ms` }}
         </span>
         <span v-if="response.meta && response.meta.responseSize">
-          <span class="text-secondary"> Size: </span>
+          <span class="text-secondary"> {{ $t("response.size") }}: </span>
           {{ `${response.meta.responseSize} B` }}
         </span>
       </div>

components/http/TestResult.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection :label="$t('test.result')">
+  <AppSection :label="$t('test.results')">
     <div
       v-if="
         testResults &&

components/lenses/ResponseBodyRenderer.vue

@@ -2,9 +2,9 @@
   <SmartTabs styles="sticky z-10 top-lowerPrimaryStickyFold">
     <SmartTab
       v-for="(lens, index) in validLenses"
-      :id="lens.lensName"
+      :id="lens.renderer"
       :key="`lens-${index}`"
-      :label="lens.lensName"
+      :label="$t(lens.lensName)"
       :selected="index === 0"
     >
       <component :is="lens.renderer" :response="response" />
@@ -12,7 +12,7 @@
     <SmartTab
       v-if="headerLength"
       id="headers"
-      :label="$t('Headers')"
+      :label="$t('response.headers')"
       :info="headerLength.toString()"
     >
       <LensesHeadersRenderer :headers="response.headers" />

components/lenses/renderers/HTMLLensRenderer.vue

@@ -14,7 +14,7 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("response_body") }}
+        {{ $t("response.body") }}
       </label>
       <div class="flex">
         <ButtonSecondary

components/lenses/renderers/ImageLensRenderer.vue

@@ -14,7 +14,7 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("response_body") }}
+        {{ $t("response.body") }}
       </label>
       <div class="flex">
         <ButtonSecondary

components/lenses/renderers/JSONLensRenderer.vue

@@ -14,7 +14,7 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("response_body") }}
+        {{ $t("response.body") }}
       </label>
       <div class="flex">
         <ButtonSecondary

components/lenses/renderers/RawLensRenderer.vue

@@ -14,7 +14,7 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("response_body") }}
+        {{ $t("response.body") }}
       </label>
       <div class="flex">
         <ButtonSecondary

components/lenses/renderers/XMLLensRenderer.vue

@@ -14,7 +14,7 @@
       "
     >
       <label class="font-semibold text-secondaryLight">
-        {{ $t("response_body") }}
+        {{ $t("response.body") }}
       </label>
       <div class="flex">
         <ButtonSecondary

helpers/lenses/htmlLens.js

@@ -1,5 +1,5 @@
 const htmlLens = {
-  lensName: "HTML",
+  lensName: "response.html",
   isSupportedContentType: (contentType) =>
     /\btext\/html|application\/xhtml\+xml\b/i.test(contentType),
   renderer: "htmlres",

helpers/lenses/imageLens.js

@@ -1,5 +1,5 @@
 const imageLens = {
-  lensName: "Image",
+  lensName: "response.image",
   isSupportedContentType: (contentType) =>
     /\bimage\/(?:gif|jpeg|png|bmp|svg\+xml|x-icon|vnd\.microsoft\.icon)\b/i.test(
       contentType

helpers/lenses/jsonLens.js

@@ -1,7 +1,7 @@
 import { isJSONContentType } from "../utils/contenttypes"
 
 const jsonLens = {
-  lensName: "JSON",
+  lensName: "response.json",
   isSupportedContentType: isJSONContentType,
   renderer: "json",
   rendererImport: () =>

helpers/lenses/rawLens.js

@@ -1,5 +1,5 @@
 const rawLens = {
-  lensName: "Raw",
+  lensName: "response.raw",
   isSupportedContentType: () => true,
   renderer: "raw",
   rendererImport: () => import("~/components/lenses/renderers/RawLensRenderer"),

helpers/lenses/xmlLens.js

@@ -1,5 +1,5 @@
 const xmlLens = {
-  lensName: "XML",
+  lensName: "response.xml",
   isSupportedContentType: (contentType) => /\bxml\b/i.test(contentType),
   renderer: "xmlres",
   rendererImport: () => import("~/components/lenses/renderers/XMLLensRenderer"),

locales/en.json

@@ -181,7 +181,8 @@
   },
   "tab": {
     "websocket": "WebSocket",
-    "mqtt": "MQTT"
+    "mqtt": "MQTT",
+    "headers": "Headers"
   },
   "websocket": {
     "protocols": "Protocols"
@@ -308,6 +309,19 @@
     "variable_list": "Variable List",
     "invalid_name": "Please provide a valid name for the environment"
   },
+  "response": {
+    "title": "Response",
+    "body": "Response Body",
+    "headers": "Headers",
+    "status": "Status",
+    "time": "Time",
+    "size": "Size",
+    "html": "HTML",
+    "xml": "XML",
+    "json": "JSON",
+    "raw": "Raw",
+    "image": "Image"
+  },
   "options": "Options",
   "communication": "Communication",
   "endpoint": "Endpoint",
@@ -324,19 +338,15 @@
   "body": "Body",
   "request_body": "Request Body",
   "raw_request_body": "Raw Request Body",
-  "response_body": "Response Body",
   "authorization": "Authorization",
   "authorization_type": "Authorization Type",
   "include_in_url": "Include in URL",
   "parameters": "Parameters",
-  "expand_response": "Expand response",
-  "collapse_response": "Collapse response",
   "preview_html": "Preview HTML",
   "history": "History",
   "collections": "Collections",
   "request_type": "Request type",
   "status": "Status",
-  "headers": "Headers",
   "waiting_for_connection": "waiting for connection",
   "message": "Message",
   "sse": "SSE",
@@ -347,7 +357,6 @@
   "variables": "Variables",
   "get_schema": "Get schema",
   "header_list": "Header List",
-  "response": "Response",
   "query": "Query",
   "queries": "Queries",
   "query_variables": "Variables",

nuxt.config.js

@@ -210,7 +210,7 @@ export default {
     families: {
       Inter: [400, 500, 600, 700, 800],
       "Material+Icons": true,
-      "Roboto+Mono": [400, 500, 600, 700, 800],
+      "Roboto+Mono": true,
     },
   },
 

package.json

@@ -37,7 +37,7 @@
     "core-js": "^3.16.1",
     "esprima": "^4.0.1",
     "firebase": "^8.9.1",
-    "graphql": "^15.5.1",
+    "graphql": "^15.5.0",
     "graphql-language-service-interface": "^2.8.4",
     "json-loader": "^0.5.7",
     "lodash": "^4.17.21",

pages/index.vue

@@ -20,7 +20,7 @@
 
             <SmartTab
               :id="'headers'"
-              :label="$t('headers')"
+              :label="$t('tab.headers')"
               :info="newActiveHeadersCount$"
             >
               <HttpHeaders />