Even (#424)

Even Co-authored-by: null <27856297+dependabot-preview[bot]@users.noreply.github.com> Co-authored-by: Liyas Thomas <liyasthomas@gmail.com> Co-authored-by: Alexandre Reis <alex.cst.reis@gmail.com> Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>
2019-12-13 04:56:15 +05:30
parent 01d4443a4f 5efb921a6b
commit 17a6b03d00
19 changed files with 861 additions and 395 deletions
--- a/README.md
+++ b/README.md
@@ -38,11 +38,9 @@

 ### Features ✨

-❤️ **Lightweight**: Crafted with minimalistic UI design. Simple design is the best design.
+❤️ **Lightweight**: Crafted with minimalistic UI design - simple design is the best design.

- - Faster, lighter, cleaner, minimal & responsive
-
-⚡️ **Fast**: Send requests and get/copy responses in real-time! Fast software is the best software.
+⚡️ **Fast**: Send requests and get/copy responses in real-time - fast software is the best software.

 **Methods:**
 - `GET` - Retrieve information about the REST API resource
@@ -50,21 +48,22 @@
 - `POST` - Create a REST API resource
 - `PUT` - Update a REST API resource
 - `DELETE` - Delete a REST API resource or related component
+ - `CONNECT` - Establishes a tunnel to the server identified by the target resource
 - `OPTIONS` - Describe the communication options for the target resource
+ - `TRACE` - Performs a message loop-back test along the path to the target resource
 - `PATCH` - Apply partial modifications to a REST API resource
+ - `<custom>` - Some APIs use custom request methods such as `LIST`. Type in your custom methods.

-_History entries are synced with local session storage_
-
-🌈 **Make it yours**: Customizable combinations for background, foreground and accent colors: because customization === freedom. [Customize now ✨](https://postwoman.io/settings).
+🌈 **Make it yours**: Customizable combinations for background, foreground and accent colors: because customization is freedom. [Customize now ✨](https://postwoman.io/settings).

 **Customizations:**
 - Choose theme: Kinda Dark (default), Clearly White, Just Black and System theme
 - Choose accent color: Green (default), Yellow, Pink, Red, Purple, Orange, Cyan and Blue
- - Toggle multi-colored frames
+ - Toggle multi-colored headings

-_Customized themes are also synced with local session storage_
+_Customized themes are synced with local session storage_

-🔥 **PWA**: Install as a [PWA](https://developers.google.com/web/progressive-web-apps) (100/100 Lighthouse score) on your device.
+🔥 **PWA**: Install as a [PWA](https://developers.google.com/web/progressive-web-apps) on your device.

 **Features:**
 - Instant loading with [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers)
@@ -74,31 +73,34 @@ _Customized themes are also synced with local session storage_
 - [Desktop PWA](https://developers.google.com/web/progressive-web-apps/desktop) support (button in footer)
 - ([full features](https://developers.google.com/web/progressive-web-apps))

-🚀 **Request**: Retrieve data from a URL without having to do a full page refresh.
+🚀 **Request**: Retrieve response from endpoint instantly.

 - Choose `method`
- - Enter `URL`
- - Enter `Path`
+ - Enter `URL` and `Path`
+ - Send

 **Features:**
 - Copy/share public "Share URL"
- - Generate request code for JavaScript XHR, Fetch and cURL
+ - Generate request code for `JavaScript XHR`, `Fetch` and `cURL`
 - Copy generated request code to clipboard
- - Import cURL
+ - Import `cURL`
 - Label requests

 🔌 **WebSocket**: Establish full-duplex communication channels over a single TCP connection.

 - Send and receive data
+ - Basic authentication using username and password
+ - Token based authentication

 📡 **Server Sent Events**: Receive a stream of updates from a server over a HTTP connection without resorting to polling.

-  - Receive data
-
 🌍 **GraphQL**: GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.

 - Set endpoint and get schemas
 - Multi-column docs
+ - Set custom request headers
+ - Query schema
+ - Get query response

 🔐 **Authentication**: Allows to identify the end user.

@@ -116,27 +118,28 @@ _Customized themes are also synced with local session storage_
 📃 **Request Body**: Used to send and receive data via the REST API.

 **Options:**
- - Set Content Type
+ - Set `Content Type`
 - Add or remove Parameter list
 - Toggle between key-value and RAW input Parameter list

 👋 **Responses**: Contains the status line, headers and the message/response body.

 - Copy response to clipboard
- - Download response to a local file
- - View preview for HTML responses
-
-_HTML responses have "Preview HTML" feature_
+ - Download response to as a file
+ - View preview of HTML responses

 ⏰ **History**: Request entries are synced with local session storage to reuse with a single click.

 **Fields:**
+ - Star
 - Label
- - Timestamp
 - Method
 - Status code
 - URL
 - Path
+ - Timestamp
+ - Duration
+ - Pre-request script

 _History entries can be sorted by any fields_

@@ -148,8 +151,6 @@ _Histories can be deleted one-by-one or all together_
 - Create infinite collections, folders and requests
 - Edit, delete, move, export, import and replace

-_Export, import and replace collections with JSON files_
-
 _Collections are synced with local session storage_

 🌐 **Proxy**: Enable Proxy Mode from Settings to access blocked APIs.
@@ -165,8 +166,8 @@ _Official Postwoman Proxy is hosted by ApolloTV - [Privacy policy](https://apoll
 📜 **Pre-Request Scripts**: Snippets of code associated with a request that are executed before the request is sent.

 **Use-cases:**
- - Including the timestamp in the request headers
- - Sending a random alphanumeric string in the URL parameters
+ - Include timestamp in the request headers
+ - Send a random alphanumeric string in the URL parameters

 _Requests with Pre-Request Scripts are indicated in History entries_

@@ -181,9 +182,11 @@ _Requests with Pre-Request Scripts are indicated in History entries_
 🌎 **i18n**: Internationalization β.

 - Add a new locale in `lang/`
- Ex: `lang/es-ES.js`
+
+   Example: `lang/es-ES.js`
 - Mention `code`, `name`, `iso` and `file` in `nuxt.config.js`
- Ex:
+
+   Example:
    ```
    i18n: {
      locales: [{
@@ -195,7 +198,7 @@ _Requests with Pre-Request Scripts are indicated in History entries_
    }
    ```

-_**All contributions are welcome to `i18n` [branch](https://github.com/liyasthomas/postwoman/tree/i18n) only!**_
+_**All `i18n` contributions are welcome to `i18n` [branch](https://github.com/liyasthomas/postwoman/tree/i18n) only!**_

 **To find out more, please check out [Postwoman Wiki](https://github.com/liyasthomas/postwoman/wiki).**

@@ -205,11 +208,10 @@ _**All contributions are welcome to `i18n` [branch](https://github.com/liyasthom

 ## Usage 💡

-1. Specify your request method
-2. Type in your API URL
-3. Add API path
-4. Send request
-5. Get response!
+1. Specify your request `method`
+2. Type in your API `URL` and `path`
+3. Send request
+4. Get response

 You're done!

--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -2,7 +2,7 @@
 .page-leave-active,
 .layout-enter-active,
 .layout-leave-active {
-  transition: all 0.2s;
+  transition: opacity 0.2s;
 }

 .page-enter,
@@ -14,10 +14,6 @@

 $responsiveWidth: 768px;

-html {
-  scroll-behavior: smooth;
-}
-
 ::selection {
  background-color: var(--ac-color);
  color: var(--act-color);
@@ -27,12 +23,7 @@ html {
  width: 4px;
  height: 4px;
  border-radius: 4px;
-  background-color: var(--bg-dark-color);
-  visibility: hidden;
-
-  &:hover {
-    visibility: visible;
-  }
+  background-color: var(--bg-light-color);
 }

 ::-webkit-scrollbar-thumb {
@@ -55,6 +46,7 @@ html {
  border: 0;
 }

+html,
 body {
  background-color: var(--bg-color);
  color: var(--fg-color);
@@ -67,14 +59,12 @@ body {
  user-select: none;
  padding: 0;
  margin: 0;
+  scroll-behavior: smooth;
 }

 // Make theme transition smoother.
 body.afterLoad {
-  &,
-  & * {
-    transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out;
-  }
+  transition: background-color 0.2s ease-in-out;
 }

 body.sticky-footer footer {
@@ -85,13 +75,14 @@ a {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
+  transition: all 0.2s ease-in-out;
 }

 header,
 footer {
  & > div {
    display: flex;
-    padding: 16px;
+    padding: 16px 8px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
@@ -104,8 +95,8 @@ footer {
  flex-direction: column;
 }

-.wrapper .content {
-  min-height: 100vh;
+.wrapper .page {
+  min-height: calc(100vh - 153px);
 }

 .header,
@@ -135,7 +126,10 @@ footer {

 .logo {
  font-size: 22px;
-  color: var(--ac-color);
+
+  &:hover {
+    color: var(--ac-color);
+  }
 }

 .nav-first,
@@ -153,10 +147,14 @@ footer {
 }

 .main {
+  display: flex;
+  flex-flow: column;
  flex: 1;
  order: 2;
  position: relative;
  padding: 0 16px;
+  background-color: var(--bg-light-color);
+  height: 100%;
 }

 .nav-second {
@@ -170,7 +168,6 @@ footer {
 nav.primary-nav {
  display: flex;
  flex-flow: column nowrap;
-  border-bottom: 1px solid var(--brd-color);

  svg {
    fill: var(--fg-light-color);
@@ -183,7 +180,7 @@ nav.primary-nav {
    flex-shrink: 0;
    padding: 14px;
    border-radius: 50%;
-    background-color: var(--brd-color);
+    background-color: var(--bg-light-color);
    color: var(--fg-light-color);
    fill: var(--fg-light-color);
    margin: 8px;
@@ -213,6 +210,7 @@ nav.primary-nav {

 nav.secondary-nav {
  display: flex;
+  border-top: 1px dashed var(--brd-color);

  ul {
    display: flex;
@@ -426,11 +424,28 @@ button {
  }
 }

+@keyframes beat {
+  30% {
+    transform: scale(1.1);
+  }
+  50% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.material-icons:active {
+  animation: beat 0.5s forwards 1;
+}
+
 fieldset {
  margin: 16px 0;
-  border: 1px solid var(--brd-color);
-  border-radius: 8px;
-  background-color: var(--bg-color);
+  // border: 1px solid var(--brd-color);
+  border-radius: 16px;
+  transition: all 0.2s ease-in-out;
+  background-color: var(--bg-dark-color);
 }

 legend {
@@ -493,7 +508,6 @@ fieldset.yellow legend {
 kbd,
 select,
 input,
-option,
 textarea,
 pre {
  margin: 4px;
@@ -534,13 +548,17 @@ code {
  border-radius: 8px;
 }

-select,
-option {
+select {
  height: 37px;
  line-height: 37px;
+  background-color: var(--bg-dark-color);
  cursor: pointer;
 }

+option {
+  background-color: var(--bg-color);
+}
+
 input[type="checkbox"] {
  display: none;

@@ -793,10 +811,6 @@ input[type="radio"]:checked + label + .tab {
  margin-left: 16px;
 }

-.bg-color {
-  background-color: var(--bg-color);
-}
-
@media (max-width: $responsiveWidth) {
  .content {
    flex-flow: column;
@@ -807,12 +821,32 @@ input[type="radio"]:checked + label + .tab {
  }

  .nav-first {
+    position: fixed;
+    top: auto;
+    bottom: 0;
    width: 100%;
    background-color: var(--bg-color);
+    transition: all 0.2s ease-in-out;
  }

  nav.primary-nav {
-    flex-flow: row;
+    flex-flow: row nowrap;
+    overflow: auto;
+    justify-content: space-around;
+
+    a {
+      background-color: transparent;
+
+      &.nuxt-link-exact-active {
+        background-color: transparent;
+        color: var(--ac-color);
+        fill: var(--ac-color);
+
+        svg {
+          fill: var(--ac-color);
+        }
+      }
+    }
  }

  nav.secondary-nav {
@@ -820,7 +854,7 @@ input[type="radio"]:checked + label + .tab {
  }

  .main {
-    padding: 0 8px;
+    padding: 0 8px 68px;
  }

  ul,
@@ -854,4 +888,8 @@ input[type="radio"]:checked + label + .tab {
  .inner-right {
    margin-left: 0;
  }
+
+  .toasted:last-child {
+    margin-bottom: 68px;
+  }
 }
--- a/assets/css/themes.scss
+++ b/assets/css/themes.scss
@@ -8,10 +8,12 @@

 // Dark is the default theme variant.
@mixin darkTheme {
-  // Dark Background color
-  --bg-dark-color: rgb(41, 42, 45);
  // Background color
  --bg-color: rgb(37, 38, 40);
+  // Light Background color
+  --bg-light-color: rgba(255, 255, 255, 0.05);
+  //Dark Background color
+  --bg-dark-color: rgba(0, 0, 0, 0.1);
  // Auto-complete color
  --atc-color: rgb(49, 49, 55);
  // Text color
@@ -21,26 +23,20 @@
  // Border color
  --brd-color: rgb(48, 47, 55);
  // Error color
-  --err-color: rgb(41, 42, 45);
+  --err-color: rgba(255, 255, 255, 0.05);
  // Acent color
  --ac-color: #50fa7b;
  // Active text color
  --act-color: rgb(37, 38, 40);
 }

-:root {
-  @include darkTheme;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root.auto {
-    @include darkTheme;
-  }
-}
-
@mixin lightTheme {
  // Dark Background color
  --bg-dark-color: #eeeeee;
+  // Light Background color
+  --bg-light-color: rgba(0, 0, 0, 0.02);
+  //Dark Background color
+  --bg-dark-color: rgba(0, 0, 0, 0.05);
  // Background color
  --bg-color: #ffffff;
  // Auto-complete color
@@ -52,26 +48,20 @@
  // Border color
  --brd-color: #eeeeed;
  // Error color
-  --err-color: #eeeeee;
+  --err-color: rgba(0, 0, 0, 0.02);
  // Acent color
  --ac-color: #57b5f9;
  // Active text color
  --act-color: #ffffff;
 }

-:root.light {
-  @include lightTheme;
-}
-
-@media (prefers-color-scheme: light) {
-  :root.auto {
-    @include lightTheme;
-  }
-}
-
@mixin blackTheme {
  // Dark Background color
  --bg-dark-color: rgb(8, 8, 8);
+  // Light Background color
+  --bg-light-color: rgba(255, 255, 255, 0.02);
+  //Dark Background color
+  --bg-dark-color: rgba(255, 255, 255, 0.02);
  // Background color
  --bg-color: #000000;
  // Auto-complete color
@@ -83,13 +73,33 @@
  // Border color
  --brd-color: rgb(16, 16, 16);
  // Error color
-  --err-color: rgb(8, 8, 8);
+  --err-color: rgba(255, 255, 255, 0.02);
  // Acent color
  --ac-color: #50fa7b;
  // Active text color
  --act-color: #000000;
 }

+:root {
+  @include darkTheme;
+}
+
+:root.light {
+  @include lightTheme;
+}
+
 :root.black {
  @include blackTheme;
 }
+
+@media (prefers-color-scheme: dark) {
+  :root.auto {
+    @include darkTheme;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root.auto {
+    @include lightTheme;
+  }
+}
--- a/components/ace-editor.vue
+++ b/components/ace-editor.vue
@@ -64,8 +64,8 @@ export default {

    this.editor = editor;
    this.cacheValue = this.value;
-    
-    editor.on('change', () => {
+
+    editor.on("change", () => {
      const content = editor.getValue();
      this.$emit("input", content);
      this.cacheValue = content;
--- a/components/autocomplete.vue
+++ b/components/autocomplete.vue
@@ -3,7 +3,7 @@
    <input
      type="text"
      :placeholder="placeholder"
-      v-model="value"
+      v-model="text"
      @input="updateSuggestions"
      @keyup="updateSuggestions"
      @click="updateSuggestions"
@@ -90,25 +90,31 @@ export default {

    placeholder: {
      type: String,
-      default: "Start typing...",
+      default: "",
      required: false
    },

    source: {
      type: Array,
      required: true
+    },
+
+    value: {
+      type: String,
+      default: "",
+      required: false
    }
  },

  watch: {
-    value() {
-      this.$emit("input", this.value);
+    text() {
+      this.$emit("input", this.text);
    }
  },

  data() {
    return {
-      value: "application/json",
+      text: this.value,
      selectionStart: 0,
      suggestionsOffsetLeft: 0,
      currentSuggestionIndex: -1,
@@ -134,10 +140,10 @@ export default {
    },

    forceSuggestion(text) {
-      let input = this.value.substring(0, this.selectionStart);
-      this.value = input + text;
+      let input = this.text.substring(0, this.selectionStart);
+      this.text = input + text;

-      this.selectionStart = this.value.length;
+      this.selectionStart = this.text.length;
      this.suggestionsVisible = true;
      this.currentSuggestionIndex = -1;
    },
@@ -166,8 +172,8 @@ export default {
            this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
          ];
          if (activeSuggestion) {
-            let input = this.value.substring(0, this.selectionStart);
-            this.value = input + activeSuggestion;
+            let input = this.text.substring(0, this.selectionStart);
+            this.text = input + activeSuggestion;
          }
          break;

@@ -184,7 +190,7 @@ export default {
     * @returns {default.props.source|{type, required}}
     */
    suggestions() {
-      let input = this.value.substring(0, this.selectionStart);
+      let input = this.text.substring(0, this.selectionStart);

      return (
        this.source
--- a/components/collections/saveRequestAs.vue
+++ b/components/collections/saveRequestAs.vue
@@ -24,14 +24,7 @@
            v-model="requestData.name"
            v-bind:placeholder="defaultRequestName"
            @keyup.enter="saveRequestAs"
-            list="preCollectionLabels"
          />
-          <datalist id="preCollectionLabels">
-            <option value="Login"></option>
-            <option value="Logout"></option>
-            <option value="Bug"></option>
-            <option value="Users"></option>
-          </datalist>
          <label for="selectCollection">Collection</label>
          <select
            type="text"
@@ -128,7 +121,11 @@ export default {
      const userSelectedAnyCollection =
        this.$data.requestData.collectionIndex !== undefined;
      if (!userSelectedAnyCollection) return [];
-
+      
+      const noCollectionAvailable = 
+        this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex] !== undefined;
+      if (!noCollectionAvailable) return [];
+      
      return this.$store.state.postwoman.collections[
        this.$data.requestData.collectionIndex
      ].folders;
@@ -151,6 +148,10 @@ export default {
        const collection = this.$store.state.postwoman.collections[
          this.$data.requestData.collectionIndex
        ];
+        const noCollectionAvailable = 
+          this.$store.state.postwoman.collections[this.$data.requestData.collectionIndex] !== undefined;
+        if (!noCollectionAvailable) return [];
+
        const requests = collection.requests;
        return requests;
      }
--- a/components/history.vue
+++ b/components/history.vue
@@ -300,7 +300,7 @@ ol li {
    top: 10px;
    right: 10px;
    font-family: "Roboto Mono", monospace;
-    background-color: var(--bg-color);
+    background-color: transparent;
    padding: 2px 6px;
    border-radius: 8px;
  }
@@ -311,6 +311,10 @@ ol li {
  padding: 16px 0;
 }

+.bg-color {
+  background-color: transparent;
+}
+
@media (max-width: 720px) {
  .virtual-list.filled {
    min-height: 320px;
--- a/components/modal.vue
+++ b/components/modal.vue
@@ -45,11 +45,11 @@
  flex-grow: 1;
  flex-direction: column;
  margin: 8px;
-  padding: 12px;
+  padding: 16px;
  transition: all 0.2s ease;
  background-color: var(--bg-color);
-  border-radius: 8px;
-  box-shadow: rgba(0, 0, 0, 0.5) 0px 16px 70px;
+  border-radius: 16px;
+  box-shadow: 0px 16px 70px rgba(0, 0, 0, 0.5);
 }

 /*
--- a/components/settings/swatch.vue
+++ b/components/settings/swatch.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="color" :data-color="color" :class="{ active: active }" v-tooltip="{ content: name || color }">
+  <div
+    class="color"
+    :data-color="color"
+    :class="{ active: active }"
+    v-tooltip="{ content: name || color }"
+  >
    <span :style="{ backgroundColor: color }" class="preview">
      <i v-if="active" class="material-icons activeTick">done</i>
    </span>
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,17 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Postwoman</title>
+    <meta http-equiv="refresh" content="0; url=https://postwoman.io" />
+    <link rel="canonical" href="https://postwoman.io" />
+  </head>

-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="X-UA-Compatible" content="ie=edge">
-  <title>Postwoman</title>
-  <meta http-equiv="refresh" content="0; url=https://postwoman.io">
-  <link rel="canonical" href="https://postwoman.io">
-</head>
-
-<body>
-  Redirecting to postwoman.io
-</body>
-
+  <body>
+    Redirecting to postwoman.io
+  </body>
 </html>
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,89 +1,5 @@
 <template>
  <div class="wrapper">
-    <header class="header">
-      <div class="flex-wrap">
-        <span class="slide-in">
-          <nuxt-link :to="localePath('index')">
-            <h1 class="logo">Postwoman</h1>
-          </nuxt-link>
-        </span>
-        <span>
-          <a
-            href="https://github.com/liyasthomas/postwoman"
-            target="_blank"
-            aria-label="GitHub"
-            rel="noopener"
-          >
-            <button class="icon" aria-label="GitHub" v-tooltip="'GitHub'">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
-                />
-              </svg>
-            </button>
-          </a>
-          <button
-            class="icon"
-            id="installPWA"
-            @click.prevent="showInstallPrompt()"
-            v-tooltip="$t('install_pwa')"
-          >
-            <i class="material-icons">offline_bolt</i>
-          </button>
-          <v-popover>
-            <button class="icon" v-tooltip="'More'">
-              <i class="material-icons">more_vert</i>
-            </button>
-            <template slot="popover">
-              <div>
-                <button
-                  class="icon"
-                  @click="showShortcuts = true"
-                  v-close-popover
-                >
-                  <i class="material-icons">keyboard</i>
-                  <span>{{ $t("shortcuts") }}</span>
-                </button>
-              </div>
-              <div>
-                <button
-                  class="icon"
-                  @click="showSupport = true"
-                  v-close-popover
-                >
-                  <i class="material-icons">favorite</i>
-                  <span>{{ $t("support_us") }}</span>
-                </button>
-              </div>
-              <div>
-                <button
-                  class="icon"
-                  onClick="window.open('https://twitter.com/share?text=👽 Postwoman • API request builder - Helps you create your requests faster, saving you precious time on your development&url=https://postwoman.io&hashtags=postwoman&via=liyasthomas');"
-                  v-close-popover
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
-                    />
-                  </svg>
-                  <span>{{ $t("tweet") }}</span>
-                </button>
-              </div>
-            </template>
-          </v-popover>
-        </span>
-      </div>
-    </header>
    <div class="content">
      <div class="columns">
        <aside class="nav-first">
@@ -98,7 +14,7 @@
              v-tooltip.right="$t('home')"
              aria-label="Home"
            >
-              <logo alt style="height: 24px;"></logo>
+              <logo alt class="material-icons" style="height: 24px;"></logo>
            </nuxt-link>
            <nuxt-link
              :to="localePath('realtime')"
@@ -311,69 +227,157 @@
            </nav>
          </div>
        </aside>
-        <nuxt id="main" class="main" />
+        <div class="main" id="main">
+          <header class="header">
+            <div class="flex-wrap">
+              <span class="slide-in">
+                <nuxt-link :to="localePath('index')">
+                  <h1 class="logo">Postwoman</h1>
+                </nuxt-link>
+              </span>
+              <span>
+                <a
+                  href="https://github.com/liyasthomas/postwoman"
+                  target="_blank"
+                  aria-label="GitHub"
+                  rel="noopener"
+                >
+                  <button class="icon" aria-label="GitHub" v-tooltip="'GitHub'">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 24 24"
+                      class="material-icons"
+                    >
+                      <path
+                        d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+                      />
+                    </svg>
+                  </button>
+                </a>
+                <button
+                  class="icon"
+                  id="installPWA"
+                  @click.prevent="showInstallPrompt()"
+                  v-tooltip="$t('install_pwa')"
+                >
+                  <i class="material-icons">offline_bolt</i>
+                </button>
+                <v-popover>
+                  <button class="icon" v-tooltip="'More'">
+                    <i class="material-icons">more_vert</i>
+                  </button>
+                  <template slot="popover">
+                    <div>
+                      <button
+                        class="icon"
+                        @click="showShortcuts = true"
+                        v-close-popover
+                      >
+                        <i class="material-icons">keyboard</i>
+                        <span>{{ $t("shortcuts") }}</span>
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="icon"
+                        @click="showSupport = true"
+                        v-close-popover
+                      >
+                        <i class="material-icons">favorite</i>
+                        <span>{{ $t("support_us") }}</span>
+                      </button>
+                    </div>
+                    <div>
+                      <button
+                        class="icon"
+                        onClick="window.open('https://twitter.com/share?text=👽 Postwoman • API request builder - Helps you create your requests faster, saving you precious time on your development&url=https://postwoman.io&hashtags=postwoman&via=liyasthomas');"
+                        v-close-popover
+                      >
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          width="24"
+                          height="24"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
+                          />
+                        </svg>
+                        <span>{{ $t("tweet") }}</span>
+                      </button>
+                    </div>
+                  </template>
+                </v-popover>
+              </span>
+            </div>
+          </header>
+          <nuxt />
+          <footer class="footer">
+            <div class="flex-wrap">
+              <span v-if="version.name" class="mono">
+                <a
+                  href="https://liyasthomas.web.app"
+                  target="_blank"
+                  rel="noopener"
+                >
+                  <button class="icon" v-tooltip="'Liyas Thomas'">
+                    🦄
+                  </button>
+                </a>
+                <a
+                  v-bind:href="
+                    'https://github.com/liyasthomas/postwoman/releases/tag/' +
+                      version.name
+                  "
+                  target="_blank"
+                  rel="noopener"
+                  v-tooltip="'GitHub'"
+                >
+                  {{ version.name }}
+                </a>
+                <!-- <span v-if="version.hash">
+                  -
+                  <a
+                    v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash"
+                    target="_blank"
+                    rel="noopener"
+                  >{{version.hash}}</a>
+                </span> -->
+                <!-- <span v-if="version.variant">({{version.variant}})</span> -->
+              </span>
+              <span>
+                <a
+                  href="https://postwoman.launchaco.com"
+                  target="_blank"
+                  rel="noopener"
+                >
+                  <button class="icon" v-tooltip="$t('subscribe')">
+                    <i class="material-icons">email</i>
+                  </button>
+                </a>
+                <v-popover>
+                  <button class="icon" v-tooltip="$t('choose_language')">
+                    <i class="material-icons">translate</i>
+                  </button>
+                  <template slot="popover">
+                    <div v-for="locale in availableLocales" :key="locale.code">
+                      <nuxt-link :to="switchLocalePath(locale.code)">
+                        <button class="icon" v-close-popover>
+                          {{ locale.name }}
+                        </button>
+                      </nuxt-link>
+                    </div>
+                  </template>
+                </v-popover>
+              </span>
+            </div>
+          </footer>
+        </div>
        <aside class="nav-second"></aside>
      </div>
    </div>
-    <footer class="footer">
-      <div class="flex-wrap">
-        <span v-if="version.name" class="mono">
-          <a
-            v-bind:href="
-              'https://github.com/liyasthomas/postwoman/releases/tag/' +
-                version.name
-            "
-            target="_blank"
-            rel="noopener"
-          >
-            {{ version.name }}
-          </a>
-          <!-- <span v-if="version.hash">
-            -
-            <a
-              v-bind:href="'https://github.com/liyasthomas/postwoman/commit/' + version.hash"
-              target="_blank"
-              rel="noopener"
-            >{{version.hash}}</a>
-          </span> -->
-          <!-- <span v-if="version.variant">({{version.variant}})</span> -->
-        </span>
-        <span>
-          <a
-            href="https://liyasthomas.web.app"
-            target="_blank"
-            rel="noopener"
-          >
-            <button class="icon" v-tooltip="'Liyas Thomas'">
-              🦄
-            </button>
-          </a>
-          <a
-            href="https://postwoman.launchaco.com"
-            target="_blank"
-            rel="noopener"
-          >
-            <button class="icon" v-tooltip="$t('subscribe')">
-              <i class="material-icons">email</i>
-            </button>
-          </a>
-          <v-popover>
-            <button class="icon" v-tooltip="$t('choose_language')">
-              <i class="material-icons">translate</i>
-            </button>
-            <template slot="popover">
-              <div v-for="locale in availableLocales" :key="locale.code">
-                <nuxt-link :to="switchLocalePath(locale.code)">
-                  <button class="icon" v-close-popover>
-                    {{ locale.name }}
-                  </button>
-                </nuxt-link>
-              </div>
-            </template>
-          </v-popover>
-        </span>
-      </div>
-    </footer>
    <modal v-if="showShortcuts" @close="showShortcuts = false">
      <div slot="header">
        <ul>
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -34,7 +34,7 @@ export default {
  render: {
    bundleRenderer: {
      shouldPreload: (file, type) => {
-        return ['script', 'style', 'font'].includes(type)
+        return ["script", "style", "font"].includes(type);
      }
    }
  },
--- a/package-lock.json
+++ b/package-lock.json
@@ -1353,11 +1353,11 @@
            }
        },
        "@nuxtjs/google-analytics": {
-            "version": "2.2.1",
-            "resolved": "https://registry.npmjs.org/@nuxtjs/google-analytics/-/google-analytics-2.2.1.tgz",
-            "integrity": "sha512-li2Xd9G1v6+wdAiAM+G7USTrQ+/ND/fmf02cKs5IRLbKxba+RHDePKu4s5kvWyrgeczgZRaL+Tm4s24mGDYS6g==",
+            "version": "2.2.2",
+            "resolved": "https://registry.npmjs.org/@nuxtjs/google-analytics/-/google-analytics-2.2.2.tgz",
+            "integrity": "sha512-uzjdj9GEvPa1jB2soPAeTH75u8qbEAMV36i9PLfkv23emfUIPF1PcgsRFJOBT1x19Zeg9ywC4U8q76li912vEQ==",
            "requires": {
-                "vue-analytics": "^5.17.2"
+                "vue-analytics": "^5.18.0"
            }
        },
        "@nuxtjs/google-tag-manager": {
@@ -5860,11 +5860,6 @@
            "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
            "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
        },
-        "is-wsl": {
-            "version": "1.1.0",
-            "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-            "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0="
-        },
        "isarray": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -6832,23 +6827,6 @@
                "minipass": "^3.0.0"
            }
        },
-        "mississippi": {
-            "version": "3.0.0",
-            "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
-            "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
-            "requires": {
-                "concat-stream": "^1.5.0",
-                "duplexify": "^3.4.2",
-                "end-of-stream": "^1.1.0",
-                "flush-write-stream": "^1.0.0",
-                "from2": "^2.1.0",
-                "parallel-transform": "^1.1.0",
-                "pump": "^3.0.0",
-                "pumpify": "^1.3.3",
-                "stream-each": "^1.1.0",
-                "through2": "^2.0.0"
-            }
-        },
        "mixin-deep": {
            "version": "1.3.2",
            "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
@@ -7260,16 +7238,16 @@
            }
        },
        "nuxt-i18n": {
-            "version": "6.4.0",
-            "resolved": "https://registry.npmjs.org/nuxt-i18n/-/nuxt-i18n-6.4.0.tgz",
-            "integrity": "sha512-1JQBL0Jn8G7ZialCa8S3HxgokM2Rqa68RtyPB4oT6Og58oN1d2OreZsQhNITLYdPn3hTOqTO+i55cdOs7AW5sw==",
+            "version": "6.4.1",
+            "resolved": "https://registry.npmjs.org/nuxt-i18n/-/nuxt-i18n-6.4.1.tgz",
+            "integrity": "sha512-SHAK5eA9oci8AtqOCDvPgWKp+W7SIBbbxW5xraPO0YTdyJWuA1gmUuo24w7MSms4d/cUcWoJaNiEYZHqxidUTA==",
            "requires": {
                "@babel/parser": "^7.5.5",
                "@babel/traverse": "^7.5.5",
                "@kazupon/vue-i18n-loader": "^0.4.0",
                "cookie": "^0.4.0",
                "is-https": "^1.0.0",
-                "js-cookie": "^2.2.0",
+                "js-cookie": "^2.2.1",
                "vue-i18n": "^8.12.0",
                "vue-i18n-extensions": "^0.2.1"
            },
@@ -9492,9 +9470,9 @@
            }
        },
        "serialize-javascript": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.0.tgz",
-            "integrity": "sha512-a/mxFfU00QT88umAJQsNWOnUKckhNCqOl028N48e7wFmo2/EHpTo9Wso+iJJCMrQnmFvcjto5RJdAHEvVhcyUQ=="
+            "version": "2.1.2",
+            "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz",
+            "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ=="
        },
        "serve-placeholder": {
            "version": "1.2.1",
@@ -10975,9 +10953,9 @@
            "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
        },
        "vue-analytics": {
-            "version": "5.17.2",
-            "resolved": "https://registry.npmjs.org/vue-analytics/-/vue-analytics-5.17.2.tgz",
-            "integrity": "sha512-Vfbn5laOG8OVetrBNRfV64y/N5VVyw1PPC4LiowZFh58UOsfsGH8w+ZZn0pyMelSZmz9uxkgG5dNnce4bwJ6jg=="
+            "version": "5.18.0",
+            "resolved": "https://registry.npmjs.org/vue-analytics/-/vue-analytics-5.18.0.tgz",
+            "integrity": "sha512-rnDwx+4mksrwohIxqwJqRVuXotpyKjEPeqMoYveAK3vIp8MiO2BuUfVxELaPFN9/OXFt2ayuQDMParsjWDrNmA=="
        },
        "vue-client-only": {
            "version": "2.0.0",
@@ -10990,9 +10968,9 @@
            "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog=="
        },
        "vue-i18n": {
-            "version": "8.15.0",
-            "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.15.0.tgz",
-            "integrity": "sha512-juJ/avAP39bOMycC+qQDLJ8U9z9LtLF/9PsRoJLBSfsYZo9bqYntyyX5QPicwlb1emJKjgxhZ3YofHiQcXBu0Q=="
+            "version": "8.15.1",
+            "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.15.1.tgz",
+            "integrity": "sha512-GBbz8qYCu0U2LNu4IcuFLZiuyninG4k26knvhL7GZG5Ncp4RR2VKDEH6g8gQ6I+UUBCvH2MBQVPSdxWe4DBkPw=="
        },
        "vue-i18n-extensions": {
            "version": "0.2.1",
@@ -11139,9 +11117,9 @@
            "integrity": "sha512-GVbwInwnqkVxQ4GU/XYeQt1e0dAXL8sF5Hr1H/coCBbYUan5xP0G2mEz/HRDf1lt73rFQAN/bJcLTOKkqiM6tg=="
        },
        "vue-virtual-scroll-list": {
-            "version": "1.4.3",
-            "resolved": "https://registry.npmjs.org/vue-virtual-scroll-list/-/vue-virtual-scroll-list-1.4.3.tgz",
-            "integrity": "sha512-gWex5GYI5V5h4eYQGbW7dhuQRIg2wKpnHxJrJyk0NmWk0+CVLmTsS0m1jj9NKvpytOgQBOJ0l1S2sQPZkDALdA=="
+            "version": "1.4.4",
+            "resolved": "https://registry.npmjs.org/vue-virtual-scroll-list/-/vue-virtual-scroll-list-1.4.4.tgz",
+            "integrity": "sha512-wU7FDpd9Xy4f62pf8SBg/ak21jMI/pdx4s4JPah+z/zuhmeAafQgp8BjtZvvt+b0BZOsOS1FJuCfUH7azTkivQ=="
        },
        "vuejs-auto-complete": {
            "version": "0.9.0",
@@ -11955,6 +11933,30 @@
                        "ssri": "^6.0.1",
                        "unique-filename": "^1.1.1",
                        "y18n": "^4.0.0"
+                    },
+                    "dependencies": {
+                        "mississippi": {
+                            "version": "3.0.0",
+                            "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
+                            "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
+                            "requires": {
+                                "concat-stream": "^1.5.0",
+                                "duplexify": "^3.4.2",
+                                "end-of-stream": "^1.1.0",
+                                "flush-write-stream": "^1.0.0",
+                                "from2": "^2.1.0",
+                                "parallel-transform": "^1.1.0",
+                                "pump": "^3.0.0",
+                                "pumpify": "^1.3.3",
+                                "stream-each": "^1.1.0",
+                                "through2": "^2.0.0"
+                            }
+                        },
+                        "y18n": {
+                            "version": "4.0.0",
+                            "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
+                            "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
+                        }
                    }
                },
                "schema-utils": {
@@ -11967,11 +11969,6 @@
                        "ajv-keywords": "^3.1.0"
                    }
                },
-                "serialize-javascript": {
-                    "version": "1.9.1",
-                    "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-1.9.1.tgz",
-                    "integrity": "sha512-0Vb/54WJ6k5v8sSWN09S0ora+Hnr+cX40r9F170nT+mSkaxltoE/7R3OrIdBSUv1OoiobH1QoWQbCnAO+e8J1A=="
-                },
                "source-map": {
                    "version": "0.6.1",
                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -11986,19 +11983,34 @@
                    }
                },
                "terser-webpack-plugin": {
-                    "version": "1.4.1",
-                    "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz",
-                    "integrity": "sha512-ZXmmfiwtCLfz8WKZyYUuuHf3dMYEjg8NrjHMb0JqHVHVOSkzp3cW2/XG1fP3tRhqEqSzMwzzRQGtAPbs4Cncxg==",
+                    "version": "1.4.2",
+                    "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.2.tgz",
+                    "integrity": "sha512-fdEb91kR2l+BVgES77N/NTXWZlpX6vX+pYPjnX5grcDYBF2CMnzJiXX4NNlna4l04lvCW39lZ+O/jSvUhHH/ew==",
                    "requires": {
                        "cacache": "^12.0.2",
                        "find-cache-dir": "^2.1.0",
                        "is-wsl": "^1.1.0",
                        "schema-utils": "^1.0.0",
-                        "serialize-javascript": "^1.7.0",
+                        "serialize-javascript": "^2.1.1",
                        "source-map": "^0.6.1",
                        "terser": "^4.1.2",
                        "webpack-sources": "^1.4.0",
                        "worker-farm": "^1.7.0"
+                    },
+                    "dependencies": {
+                        "is-wsl": {
+                            "version": "1.1.0",
+                            "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
+                            "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0="
+                        },
+                        "worker-farm": {
+                            "version": "1.7.0",
+                            "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
+                            "integrity": "sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==",
+                            "requires": {
+                                "errno": "~0.1.7"
+                            }
+                        }
                    }
                }
            }
@@ -12189,14 +12201,6 @@
            "resolved": "https://registry.npmjs.org/workbox-cdn/-/workbox-cdn-4.3.1.tgz",
            "integrity": "sha512-Adkgo+/7S+bBsDTzdeH0xxQCrfBM1EiyZlvu1tMh0cJ/ipC6TtA8KDr12PBREdbL0zO9hG+7OSzvi2NLchPAEg=="
        },
-        "worker-farm": {
-            "version": "1.7.0",
-            "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
-            "integrity": "sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==",
-            "requires": {
-                "errno": "~0.1.7"
-            }
-        },
        "wrap-ansi": {
            "version": "6.1.0",
            "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.1.0.tgz",
@@ -12307,11 +12311,6 @@
                "cuint": "^0.2.2"
            }
        },
-        "y18n": {
-            "version": "4.0.0",
-            "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-            "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
-        },
        "yallist": {
            "version": "3.1.1",
            "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
    },
    "dependencies": {
        "@nuxtjs/axios": "^5.8.0",
-        "@nuxtjs/google-analytics": "^2.2.1",
+        "@nuxtjs/google-analytics": "^2.2.2",
        "@nuxtjs/google-tag-manager": "^2.3.1",
        "@nuxtjs/pwa": "^3.0.0-beta.19",
        "@nuxtjs/robots": "^2.4.2",
@@ -28,9 +28,9 @@
        "ace-builds": "^1.4.7",
        "graphql": "^14.5.8",
        "nuxt": "^2.10.2",
-        "nuxt-i18n": "^6.4.0",
+        "nuxt-i18n": "^6.4.1",
        "v-tooltip": "^2.0.2",
-        "vue-virtual-scroll-list": "^1.4.3",
+        "vue-virtual-scroll-list": "^1.4.4",
        "vuejs-auto-complete": "^0.9.0",
        "vuex-persist": "^2.2.0",
        "yargs-parser": "^16.1.0"
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -52,14 +52,15 @@
          </ul>
          <ul v-for="(header, index) in headers" :key="index">
            <li>
-              <input
-                :placeholder="'header ' + (index + 1)"
-                :name="'header' + index"
+              <autocomplete
+                :placeholder="'index ' + (index + 1)"
+                :source="commonHeaders"
+                :spellcheck="false"
                :value="header.key"
-                @change="
+                @input="
                  $store.commit('setGQLHeaderKey', {
                    index,
-                    value: $event.target.value
+                    value: $event
                  })
                "
                autofocus
@@ -307,11 +308,136 @@ export default {
    "pw-section": () => import("../components/section"),
    "gql-field": () => import("../components/graphql/field"),
    "gql-type": () => import("../components/graphql/type"),
+    autocomplete: () => import("../components/autocomplete"),
    Editor: AceEditor
  },
  data() {
    return {
      schemaString: "",
+      commonHeaders: [
+        "WWW-Authenticate",
+        "Authorization",
+        "Proxy-Authenticate",
+        "Proxy-Authorization",
+        "Age",
+        "Cache-Control",
+        "Clear-Site-Data",
+        "Expires",
+        "Pragma",
+        "Warning",
+        "Accept-CH",
+        "Accept-CH-Lifetime",
+        "Early-Data",
+        "Content-DPR",
+        "DPR",
+        "Device-Memory",
+        "Save-Data",
+        "Viewport-Width",
+        "Width",
+        "Last-Modified",
+        "ETag",
+        "If-Match",
+        "If-None-Match",
+        "If-Modified-Since",
+        "If-Unmodified-Since",
+        "Vary",
+        "Connection",
+        "Keep-Alive",
+        "Accept",
+        "Accept-Charset",
+        "Accept-Encoding",
+        "Accept-Language",
+        "Expect",
+        "Max-Forwards",
+        "Cookie",
+        "Set-Cookie",
+        "Cookie2",
+        "Set-Cookie2",
+        "Access-Control-Allow-Origin",
+        "Access-Control-Allow-Credentials",
+        "Access-Control-Allow-Headers",
+        "Access-Control-Allow-Methods",
+        "Access-Control-Expose-Headers",
+        "Access-Control-Max-Age",
+        "Access-Control-Request-Headers",
+        "Access-Control-Request-Method",
+        "Origin",
+        "Service-Worker-Allowed",
+        "Timing-Allow-Origin",
+        "X-Permitted-Cross-Domain-Policies",
+        "DNT",
+        "Tk",
+        "Content-Disposition",
+        "Content-Length",
+        "Content-Type",
+        "Content-Encoding",
+        "Content-Language",
+        "Content-Location",
+        "Forwarded",
+        "X-Forwarded-For",
+        "X-Forwarded-Host",
+        "X-Forwarded-Proto",
+        "Via",
+        "Location",
+        "From",
+        "Host",
+        "Referer",
+        "Referrer-Policy",
+        "User-Agent",
+        "Allow",
+        "Server",
+        "Accept-Ranges",
+        "Range",
+        "If-Range",
+        "Content-Range",
+        "Cross-Origin-Opener-Policy",
+        "Cross-Origin-Resource-Policy",
+        "Content-Security-Policy",
+        "Content-Security-Policy-Report-Only",
+        "Expect-CT",
+        "Feature-Policy",
+        "Public-Key-Pins",
+        "Public-Key-Pins-Report-Only",
+        "Strict-Transport-Security",
+        "Upgrade-Insecure-Requests",
+        "X-Content-Type-Options",
+        "X-Download-Options",
+        "X-Frame-Options",
+        "X-Powered-By",
+        "X-XSS-Protection",
+        "Last-Event-ID",
+        "NEL",
+        "Ping-From",
+        "Ping-To",
+        "Report-To",
+        "Transfer-Encoding",
+        "TE",
+        "Trailer",
+        "Sec-WebSocket-Key",
+        "Sec-WebSocket-Extensions",
+        "Sec-WebSocket-Accept",
+        "Sec-WebSocket-Protocol",
+        "Sec-WebSocket-Version",
+        "Accept-Push-Policy",
+        "Accept-Signature",
+        "Alt-Svc",
+        "Date",
+        "Large-Allocation",
+        "Link",
+        "Push-Policy",
+        "Retry-After",
+        "Signature",
+        "Signed-Headers",
+        "Server-Timing",
+        "SourceMap",
+        "Upgrade",
+        "X-DNS-Prefetch-Control",
+        "X-Firefox-Spdy",
+        "X-Pingback",
+        "X-Requested-With",
+        "X-Robots-Tag",
+        "X-UA-Compatible"
+      ],
      queryFields: [],
      mutationFields: [],
      subscriptionFields: [],
@@ -410,6 +536,7 @@ export default {
      const startTime = Date.now();

      this.$nuxt.$loading.start();
+      this.scrollInto("response");

      try {
        let headers = {};
@@ -462,6 +589,7 @@ export default {
    async getSchema() {
      const startTime = Date.now();
      this.schemaString = "Loading...";
+      this.scrollInto("schema");

      // Start showing the loading bar as soon as possible.
      // The nuxt axios module will hide it when the request is made.
@@ -628,6 +756,11 @@ export default {
        }
      });
      console.log(oldHeaders);
+    },
+    scrollInto(view) {
+      this.$refs[view].$el.scrollIntoView({
+        behavior: "smooth"
+      });
    }
  }
 };
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -44,17 +44,7 @@
          <ul>
            <li>
              <label for="method">{{ $t("method") }}</label>
-              <input
-                id="method"
-                name="method"
-                type="text"
-                v-model="method"
-                @change="methodChange"
-                value="GET"
-                placeholder="GET"
-                list="preMethods"
-              />
-              <datalist id="preMethods">
+              <select id="method" v-model="method" @change="methodChange">
                <option value="GET">GET</option>
                <option value="HEAD">HEAD</option>
                <option value="POST">POST</option>
@@ -64,17 +54,7 @@
                <option value="OPTIONS">OPTIONS</option>
                <option value="TRACE">TRACE</option>
                <option value="PATCH">PATCH</option>
-              </datalist>
-              <!-- <select id="method" v-model="method" @change="methodChange">
-                <option>GET</option>
-                <option>HEAD</option>
-                <option>POST</option>
-                <option>PUT</option>
-                <option>DELETE</option>
-                <option>OPTIONS</option>
-                <option>PATCH</option>
-                <option>LIST</option>
-              </select> -->
+              </select>
            </li>
            <li>
              <label for="url">{{ $t("url") }}</label>
@@ -105,14 +85,7 @@
                type="text"
                v-model="label"
                placeholder="(optional)"
-                list="preLabels"
              />
-              <datalist id="preLabels">
-                <option value="Login"></option>
-                <option value="Logout"></option>
-                <option value="Bug"></option>
-                <option value="Users"></option>
-              </datalist>
            </li>
            <li>
              <label class="hide-on-small-screen" for="send">&nbsp;</label>
@@ -312,7 +285,6 @@
              >
                <i class="material-icons">file_copy</i>
              </button>
-
              <button
                class="icon"
                @click="saveRequest"
@@ -452,14 +424,15 @@
              </ul>
              <ul v-for="(header, index) in headers" :key="index">
                <li>
-                  <input
+                  <autocomplete
                    :placeholder="'header ' + (index + 1)"
-                    :name="'header' + index"
+                    :source="commonHeaders"
+                    :spellcheck="false"
                    :value="header.key"
-                    @change="
+                    @input="
                      $store.commit('setKeyHeader', {
                        index,
-                        value: $event.target.value
+                        value: $event
                      })
                    "
                    @keyup.prevent="setRouteQueryState"
@@ -580,7 +553,7 @@
              </ul>
            </pw-section>
          </div>
-          <div class="flex-wrap">
+          <!-- <div class="flex-wrap">
            <span></span>
            <button
              class="icon hide-on-small-screen"
@@ -593,7 +566,7 @@
                {{ activeSidebar ? "last_page" : "first_page" }}
              </i>
            </button>
-          </div>
+          </div> -->
        </section>

        <pw-section
@@ -822,6 +795,7 @@
    </div>
  </div>
 </template>
+
 <script>
 import section from "../components/section";
 import url from "url";
@@ -935,6 +909,131 @@ export default {
        "text/html",
        "text/plain"
      ],
+
+      commonHeaders: [
+        "WWW-Authenticate",
+        "Authorization",
+        "Proxy-Authenticate",
+        "Proxy-Authorization",
+        "Age",
+        "Cache-Control",
+        "Clear-Site-Data",
+        "Expires",
+        "Pragma",
+        "Warning",
+        "Accept-CH",
+        "Accept-CH-Lifetime",
+        "Early-Data",
+        "Content-DPR",
+        "DPR",
+        "Device-Memory",
+        "Save-Data",
+        "Viewport-Width",
+        "Width",
+        "Last-Modified",
+        "ETag",
+        "If-Match",
+        "If-None-Match",
+        "If-Modified-Since",
+        "If-Unmodified-Since",
+        "Vary",
+        "Connection",
+        "Keep-Alive",
+        "Accept",
+        "Accept-Charset",
+        "Accept-Encoding",
+        "Accept-Language",
+        "Expect",
+        "Max-Forwards",
+        "Cookie",
+        "Set-Cookie",
+        "Cookie2",
+        "Set-Cookie2",
+        "Access-Control-Allow-Origin",
+        "Access-Control-Allow-Credentials",
+        "Access-Control-Allow-Headers",
+        "Access-Control-Allow-Methods",
+        "Access-Control-Expose-Headers",
+        "Access-Control-Max-Age",
+        "Access-Control-Request-Headers",
+        "Access-Control-Request-Method",
+        "Origin",
+        "Service-Worker-Allowed",
+        "Timing-Allow-Origin",
+        "X-Permitted-Cross-Domain-Policies",
+        "DNT",
+        "Tk",
+        "Content-Disposition",
+        "Content-Length",
+        "Content-Type",
+        "Content-Encoding",
+        "Content-Language",
+        "Content-Location",
+        "Forwarded",
+        "X-Forwarded-For",
+        "X-Forwarded-Host",
+        "X-Forwarded-Proto",
+        "Via",
+        "Location",
+        "From",
+        "Host",
+        "Referer",
+        "Referrer-Policy",
+        "User-Agent",
+        "Allow",
+        "Server",
+        "Accept-Ranges",
+        "Range",
+        "If-Range",
+        "Content-Range",
+        "Cross-Origin-Opener-Policy",
+        "Cross-Origin-Resource-Policy",
+        "Content-Security-Policy",
+        "Content-Security-Policy-Report-Only",
+        "Expect-CT",
+        "Feature-Policy",
+        "Public-Key-Pins",
+        "Public-Key-Pins-Report-Only",
+        "Strict-Transport-Security",
+        "Upgrade-Insecure-Requests",
+        "X-Content-Type-Options",
+        "X-Download-Options",
+        "X-Frame-Options",
+        "X-Powered-By",
+        "X-XSS-Protection",
+        "Last-Event-ID",
+        "NEL",
+        "Ping-From",
+        "Ping-To",
+        "Report-To",
+        "Transfer-Encoding",
+        "TE",
+        "Trailer",
+        "Sec-WebSocket-Key",
+        "Sec-WebSocket-Extensions",
+        "Sec-WebSocket-Accept",
+        "Sec-WebSocket-Protocol",
+        "Sec-WebSocket-Version",
+        "Accept-Push-Policy",
+        "Accept-Signature",
+        "Alt-Svc",
+        "Date",
+        "Large-Allocation",
+        "Link",
+        "Push-Policy",
+        "Retry-After",
+        "Signature",
+        "Signed-Headers",
+        "Server-Timing",
+        "SourceMap",
+        "Upgrade",
+        "X-DNS-Prefetch-Control",
+        "X-Firefox-Spdy",
+        "X-Pingback",
+        "X-Requested-With",
+        "X-Robots-Tag",
+        "X-UA-Compatible"
+      ],
      showRequestModal: false,
      editRequest: {},

@@ -1388,6 +1487,11 @@ export default {
    }
  },
  methods: {
+    checkCollections() {
+      const checkCollectionAvailability = 
+        this.$store.state.postwoman.collections && this.$store.state.postwoman.collections.length > 0 ;
+      return checkCollectionAvailability;
+    },
    scrollInto(view) {
      this.$refs[view].$el.scrollIntoView({
        behavior: "smooth"
@@ -1874,12 +1978,16 @@ export default {
        ? [flat("rawParams")]
        : [deep("bodyParams")];

-      this.$router.replace(
+      history.replaceState(
+        window.location.href,
+        "",
        "/?" +
-          flats
-            .concat(deeps, bodyParams)
-            .join("")
-            .slice(0, -1)
+          encodeURIComponent(
+            flats
+              .concat(deeps, bodyParams)
+              .join("")
+              .slice(0, -1)
+          )
      );
    },
    setRouteQueries(queries) {
@@ -1986,6 +2094,13 @@ export default {
      );
    },
    saveRequest() {
+      if (!this.checkCollections()) {
+        this.$toast.error("Create a Collection", {
+          icon: "error"
+        });
+        return;
+      }
+      
      this.editRequest = {
        url: this.url,
        path: this.path,
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -154,6 +154,7 @@
    </section>
  </div>
 </template>
+
 <style scoped lang="scss">
 div.log {
  margin: 4px;
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -294,9 +294,6 @@ export default {
    toggleSetting(key) {
      this.settings[key] = !this.settings[key];
      this.$store.commit("postwoman/applySetting", [key, this.settings[key]]);
-      this.$router.replace("/settings", {
-        force: true
-      });
    }
  },
  beforeMount() {
--- a/static/icons/error.svg
+++ b/static/icons/error.svg