feat: init i18n with gitlocalize

components/app/Header.vue

@@ -1,17 +1,7 @@
 <template>
   <div>
     <header
-      class="
-        flex
-        space-x-2
-        flex-1
-        py-2
-        px-2
-        hide-scrollbar
-        items-center
-        justify-between
-      "
-      :class="{ 'overflow-x-auto': !currentUser }"
+      class="flex space-x-2 flex-1 py-2 px-2 items-center justify-between"
     >
       <div class="space-x-2 group inline-flex items-center">
         <ButtonSecondary
@@ -28,7 +18,7 @@
           id="installPWA"
           v-tippy="{ theme: 'tooltip' }"
           :title="$t('header.install_pwa')"
-          icon="offline_bolt"
+          icon="download_for_offline"
           class="rounded"
           @click.native="showInstallPrompt()"
         />

components/environments/Edit.vue

@@ -113,12 +113,12 @@
 </template>
 
 <script lang="ts">
-import Vue, { PropType } from "vue"
 import clone from "lodash/clone"
+import { defineComponent, PropType } from "@nuxtjs/composition-api"
 import type { Environment } from "~/newstore/environments"
 import { updateEnvironment } from "~/newstore/environments"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     show: Boolean,
     editingEnvironment: {

components/http/PreRequestScript.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection label="preRequest">
+  <AppSection id="script" :label="$t('preRequest.script')">
     <div
       class="
         bg-primary
@@ -59,6 +59,17 @@
           to="https://github.com/hoppscotch/hoppscotch/wiki/Pre-Request-Scripts"
           blank
         />
+        <h4 class="font-bold text-secondaryLight pt-6">
+          {{ $t("preRequest.snippets") }}
+        </h4>
+        <div class="flex flex-col pt-4">
+          <SmartItem
+            v-for="(snippet, index) in snippets"
+            :key="`snippet-${index}`"
+            :label="snippet.name"
+            @click.native="useSnippet(snippet.script)"
+          />
+        </div>
       </div>
     </div>
   </AppSection>
@@ -67,6 +78,7 @@
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
 import { usePreRequestScript } from "~/newstore/RESTSession"
+import preRequestScriptSnippets from "~/helpers/preRequestScriptSnippets"
 
 export default defineComponent({
   setup() {
@@ -74,5 +86,15 @@ export default defineComponent({
       preRequestScript: usePreRequestScript(),
     }
   },
+  data() {
+    return {
+      snippets: preRequestScriptSnippets,
+    }
+  },
+  methods: {
+    useSnippet(script: string) {
+      this.preRequestScript += script
+    },
+  },
 })
 </script>

components/http/Response.vue

@@ -1,7 +1,10 @@
 <template>
   <AppSection label="response">
     <HttpResponseMeta :response="response" />
-    <LensesResponseBodyRenderer v-if="!loading" :response="response" />
+    <LensesResponseBodyRenderer
+      v-if="!loading && hasResponse"
+      :response="response"
+    />
   </AppSection>
 </template>
 
@@ -14,11 +17,17 @@ export default defineComponent({
   setup() {
     const response = useReadonlyStream(restResponse$, null)
 
+    const hasResponse = computed(
+      () =>
+        response.value?.type === "success" || response.value?.type === "fail"
+    )
+
     const loading = computed(
       () => response.value === null || response.value.type === "loading"
     )
 
     return {
+      hasResponse,
       response,
       loading,
     }

components/http/Tests.vue

@@ -59,6 +59,17 @@
           to="https://github.com/hoppscotch/hoppscotch/wiki/Post-Request-Tests"
           blank
         />
+        <h4 class="font-bold text-secondaryLight pt-6">
+          {{ $t("test.snippets") }}
+        </h4>
+        <div class="flex flex-col pt-4">
+          <SmartItem
+            v-for="(snippet, index) in snippets"
+            :key="`snippet-${index}`"
+            :label="snippet.name"
+            @click.native="useSnippet(snippet.script)"
+          />
+        </div>
       </div>
     </div>
   </AppSection>
@@ -67,6 +78,7 @@
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
 import { useTestScript } from "~/newstore/RESTSession"
+import testSnippets from "~/helpers/testSnippets"
 
 export default defineComponent({
   setup() {
@@ -74,5 +86,15 @@ export default defineComponent({
       testScript: useTestScript(),
     }
   },
+  data() {
+    return {
+      snippets: testSnippets,
+    }
+  },
+  methods: {
+    useSnippet(script: string) {
+      this.testScript += script
+    },
+  },
 })
 </script>