refactor: move actions from app header to app footer

assets/scss/styles.scss

@@ -89,7 +89,6 @@ a {
   @apply text-current;
   @apply no-underline;
   @apply outline-none;
-  @apply rounded-lg;
   @apply focus-visible:(ring ring-inset ring-accent);
   @apply transition;
 
@@ -149,7 +148,7 @@ a {
 
 .tippy-content > div {
   @apply flex flex-col;
-  @apply max-h-64;
+  @apply max-h-48;
   @apply items-stretch;
   @apply overflow-y-auto;
 }
@@ -170,7 +169,7 @@ hr {
   @apply px-4 py-2;
   @apply bg-primary;
   @apply truncate;
-  @apply rounded-lg;
+  @apply rounded;
   @apply font-semibold font-mono;
   @apply text-xs;
   @apply border border-divider;
@@ -226,7 +225,7 @@ input[type="checkbox"] {
 
     &::before {
       @apply border border-secondary;
-      @apply rounded-lg;
+      @apply rounded;
       @apply inline-flex;
       @apply items-center;
       @apply justify-center;

components/app/Extensions.vue

@@ -1,63 +0,0 @@
-<template>
-  <SmartModal v-if="show" @close="hideModal">
-    <template #header>
-      <h3 class="heading">{{ $t("extensions") }}</h3>
-      <div>
-        <ButtonSecondary icon="close" @click.native="hideModal" />
-      </div>
-    </template>
-    <template #body>
-      <div class="flex flex-col space-y-2 px-2">
-        <SmartItem
-          to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
-          blank
-          svg="firefox"
-          label="Firefox"
-          :info-icon="hasFirefoxExtInstalled ? 'check_circle' : ''"
-        />
-        <SmartItem
-          to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
-          blank
-          svg="chrome"
-          label="Chrome"
-          :info-icon="hasChromeExtInstalled ? 'check_circle' : ''"
-        />
-      </div>
-    </template>
-    <template #footer>
-      <div class="text-secondaryLight text-xs px-2">
-        {{ $t("extensions_info1") }}
-      </div>
-    </template>
-  </SmartModal>
-</template>
-
-<script>
-import {
-  hasChromeExtensionInstalled,
-  hasFirefoxExtensionInstalled,
-} from "~/helpers/strategies/ExtensionStrategy"
-
-export default {
-  props: {
-    show: Boolean,
-  },
-  data() {
-    return {
-      hasChromeExtInstalled: hasChromeExtensionInstalled(),
-      hasFirefoxExtInstalled: hasFirefoxExtensionInstalled(),
-    }
-  },
-  watch: {
-    show() {
-      this.hasChromeExtInstalled = hasChromeExtensionInstalled()
-      this.hasFirefoxExtInstalled = hasFirefoxExtensionInstalled()
-    },
-  },
-  methods: {
-    hideModal() {
-      this.$emit("hide-modal")
-    },
-  },
-}
-</script>

components/app/Footer.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="flex justify-between">
+    <div>
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :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(
+          'zen_mode'
+        )}`"
+        :icon="ZEN_MODE ? 'fullscreen_exit' : 'fullscreen'"
+        :class="{
+          'text-accent focus:text-accent hover:text-accent': ZEN_MODE,
+        }"
+        @click.native="toggleSetting('ZEN_MODE')"
+      />
+    </div>
+    <div>
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        icon="keyboard"
+        :title="$t('shortcuts')"
+        :shortcut="[getSpecialKey(), '/']"
+        @click.native="showShortcuts = true"
+      />
+      <ButtonSecondary
+        v-if="navigatorShare"
+        v-tippy="{ theme: 'tooltip' }"
+        icon="share"
+        :title="$t('share')"
+        @click.native="nativeShare()"
+      />
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip' }"
+        :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')"
+      />
+    </div>
+    <AppShortcuts :show="showShortcuts" @hide-modal="showShortcuts = false" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import {
+  defaultSettings,
+  getSettingSubject,
+  applySetting,
+  toggleSetting,
+} from "~/newstore/settings"
+import type { KeysMatching } from "~/types/ts-utils"
+import { getPlatformSpecialKey } from "~/helpers/platformutils"
+
+type SettingsType = typeof defaultSettings
+
+export default defineComponent({
+  data() {
+    return {
+      LEFT_SIDEBAR: null,
+      RIGHT_SIDEBAR: null,
+      ZEN_MODE: null,
+      showShortcuts: false,
+      navigatorShare: navigator.share,
+    }
+  },
+  subscriptions() {
+    return {
+      LEFT_SIDEBAR: getSettingSubject("LEFT_SIDEBAR"),
+      RIGHT_SIDEBAR: getSettingSubject("RIGHT_SIDEBAR"),
+      ZEN_MODE: getSettingSubject("ZEN_MODE"),
+    }
+  },
+  watch: {
+    ZEN_MODE(ZEN_MODE) {
+      this.applySetting("LEFT_SIDEBAR", !ZEN_MODE)
+      this.applySetting("RIGHT_SIDEBAR", !ZEN_MODE)
+    },
+  },
+  methods: {
+    toggleSetting<K extends KeysMatching<SettingsType, boolean>>(key: K) {
+      toggleSetting(key)
+    },
+    applySetting<K extends keyof SettingsType>(key: K, value: SettingsType[K]) {
+      applySetting(key, value)
+    },
+    nativeShare() {
+      if (navigator.share) {
+        navigator
+          .share({
+            title: "Hoppscotch",
+            text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
+            url: "https://hoppscotch.io",
+          })
+          .then(() => {})
+          .catch(console.error)
+      } else {
+        // fallback
+      }
+    },
+    getSpecialKey: getPlatformSpecialKey,
+  },
+})
+</script>

components/app/Header.vue

@@ -1,7 +1,7 @@
 <template>
-  <header class="flex flex-1 p-2 items-center justify-between">
+  <header class="flex flex-1 py-2 px-4 items-center justify-between">
     <div class="font-bold space-x-2 flex-shrink-0 inline-flex items-center">
-      <AppLogo class="h-6 mx-4" /> Hoppscotch
+      <AppLogo class="h-6 mr-4" /> Hoppscotch
     </div>
     <div class="space-x-2 flex-shrink-0 inline-flex items-center">
       <AppGitHubStarButton class="mt-1 mr-2" />
@@ -62,56 +62,8 @@
           <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
         </tippy>
       </span>
-      <span tabindex="-1">
-        <tippy
-          ref="options"
-          interactive
-          tabindex="-1"
-          trigger="click"
-          theme="popover"
-          arrow
-        >
-          <template #trigger>
-            <TabPrimary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('more')"
-              icon="drag_indicator"
-            />
-          </template>
-          <SmartItem
-            icon="extension"
-            :label="$t('extensions')"
-            @click.native="
-              showExtensions = true
-              $refs.options.tippy().hide()
-            "
-          />
-          <SmartItem
-            icon="keyboard"
-            :label="$t('shortcuts')"
-            @click.native="
-              showShortcuts = true
-              $refs.options.tippy().hide()
-            "
-          />
-          <SmartItem
-            v-if="navigatorShare"
-            icon="share"
-            :label="$t('share')"
-            @click.native="
-              nativeShare()
-              $refs.options.tippy().hide()
-            "
-          />
-        </tippy>
-      </span>
     </div>
     <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
-    <AppExtensions
-      :show="showExtensions"
-      @hide-modal="showExtensions = false"
-    />
-    <AppShortcuts :show="showShortcuts" @hide-modal="showShortcuts = false" />
   </header>
 </template>
 
@@ -119,7 +71,6 @@
 import intializePwa from "~/helpers/pwa"
 import { currentUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
-import { getPlatformSpecialKey } from "~/helpers/platformutils"
 
 export default {
   data() {
@@ -129,9 +80,6 @@ export default {
       // prompt.
       showInstallPrompt: null,
       showLogin: false,
-      showExtensions: false,
-      showShortcuts: false,
-      navigatorShare: navigator.share,
     }
   },
   subscriptions() {
@@ -161,22 +109,5 @@ export default {
       })
     }
   },
-  methods: {
-    nativeShare() {
-      if (navigator.share) {
-        navigator
-          .share({
-            title: "Hoppscotch",
-            text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
-            url: "https://hoppscotch.io",
-          })
-          .then(() => {})
-          .catch(console.error)
-      } else {
-        // fallback
-      }
-    },
-    getSpecialKey: getPlatformSpecialKey,
-  },
 }
 </script>

components/app/Shortcuts.vue

@@ -18,7 +18,7 @@
             :key="`shortcut-${index}-key-${keyIndex}`"
             class="
               border border-divider
-              rounded-lg
+              rounded
               font-bold
               m-1
               text-xs

components/button/Primary.vue

@@ -17,7 +17,7 @@
         ? `text-${color}-800 bg-${color}-200 hover:text-${color}-900 hover:bg-${color}-300 focus:text-${color}-900 focus:bg-${color}-300`
         : `text-white bg-accent hover:bg-accentDark focus:bg-accentDark`,
       label ? 'px-4' : 'px-2',
-      rounded ? 'rounded-full' : 'rounded-lg',
+      rounded ? 'rounded-full' : 'rounded',
       { 'opacity-50 cursor-not-allowed': disabled },
       { 'pointer-events-none': loading },
       { 'px-6 py-4 text-lg': large },
@@ -53,9 +53,9 @@
         class="svg-icons"
       />
       {{ label }}
-      <div v-if="shortcuts.length && SHORTCUTS_INDICATOR_ENABLED" class="ml-2">
+      <div v-if="shortcut.length && SHORTCUT_INDICATOR" class="ml-2">
         <kbd
-          v-for="(key, index) in shortcuts"
+          v-for="(key, index) in shortcut"
           :key="`key-${index}`"
           class="bg-accentLight rounded ml-1 px-1 inline-flex"
         >
@@ -132,21 +132,19 @@ export default {
       type: Boolean,
       default: false,
     },
-    shortcuts: {
+    shortcut: {
       type: Array,
       default: () => [],
     },
   },
   data() {
     return {
-      SHORTCUTS_INDICATOR_ENABLED: null,
+      SHORTCUT_INDICATOR: null,
     }
   },
   subscriptions() {
     return {
-      SHORTCUTS_INDICATOR_ENABLED: getSettingSubject(
+      SHORTCUT_INDICATOR: getSettingSubject("SHORTCUT_INDICATOR"),
-        "SHORTCUTS_INDICATOR_ENABLED"
-      ),
     }
   },
 }

components/button/Secondary.vue

@@ -15,9 +15,9 @@
     :class="[
       color
         ? `text-${color}-400 hover:text-${color}-600 focus:text-${color}-600`
-        : 'text-secondary hover:text-secondaryDark focus:text-secondaryDark',
+        : 'text-secondary hover:text-secondaryDark hover:bg-primaryDark focus:text-secondaryDark',
       label ? 'px-3' : 'px-2',
-      rounded ? 'rounded-full' : 'rounded-lg',
+      rounded ? 'rounded-full' : 'rounded',
       { 'opacity-50 cursor-not-allowed': disabled },
       { 'flex-row-reverse': reverse },
       {
@@ -41,9 +41,9 @@
       class="svg-icons"
     />
     {{ label }}
-    <div v-if="shortcuts.length && SHORTCUTS_INDICATOR_ENABLED" class="ml-2">
+    <div v-if="shortcut.length && SHORTCUT_INDICATOR" class="ml-2">
       <kbd
-        v-for="(key, index) in shortcuts"
+        v-for="(key, index) in shortcut"
         :key="`key-${index}`"
         class="
           bg-dividerLight
@@ -109,21 +109,19 @@ export default {
       type: Boolean,
       default: false,
     },
-    shortcuts: {
+    shortcut: {
       type: Array,
       default: () => [],
     },
   },
   data() {
     return {
-      SHORTCUTS_INDICATOR_ENABLED: null,
+      SHORTCUT_INDICATOR: null,
     }
   },
   subscriptions() {
     return {
-      SHORTCUTS_INDICATOR_ENABLED: getSettingSubject(
+      SHORTCUT_INDICATOR: getSettingSubject("SHORTCUT_INDICATOR"),
-        "SHORTCUTS_INDICATOR_ENABLED"
-      ),
     }
   },
 }

components/collections/graphql/index.vue

@@ -1,7 +1,7 @@
 <template>
   <AppSection
     label="collections"
-    :class="{ 'rounded-lg border-2 border-divider': savingMode }"
+    :class="{ 'rounded border-2 border-divider': savingMode }"
   >
     <div
       class="flex flex-col top-10 z-10 sticky"

components/collections/index.vue

@@ -1,7 +1,7 @@
 <template>
   <AppSection
     label="collections"
-    :class="{ 'rounded-lg border-2 border-divider': saveRequest }"
+    :class="{ 'rounded border-2 border-divider': saveRequest }"
   >
     <div
       class="bg-primary flex flex-col top-0 z-10 sticky"

components/docs/Request.vue

@@ -120,7 +120,7 @@ export default {
   @apply p-4;
   @apply mt-4;
   @apply border border-divider;
-  @apply rounded-lg;
+  @apply rounded;
 
   h4 {
     @apply mt-4;

components/http/Body.vue

@@ -17,7 +17,7 @@
                 v-model="contentType"
                 class="
                   bg-primary
-                  rounded-lg
+                  rounded
                   flex
                   font-semibold font-mono
                   text-xs

components/http/CodegenModal.vue

@@ -24,7 +24,7 @@
                   class="
                     bg-primaryLight
                     border-b border-dividerLight
-                    rounded-lg
+                    rounded
                     cursor-pointer
                     flex
                     font-semibold
@@ -79,7 +79,7 @@
             showPrintMargin: false,
             useWorker: false,
           }"
-          styles="rounded-lg"
+          styles="rounded"
         />
       </div>
     </template>

components/http/Request.vue

@@ -16,7 +16,7 @@
               class="
                 bg-primaryLight
                 border border-divider
-                rounded-l-lg
+                rounded-l
                 cursor-pointer
                 flex
                 font-mono
@@ -75,7 +75,7 @@
         id="send"
         class="rounded-none"
         :label="!loading ? $t('send') : $t('cancel')"
-        :shortcuts="[getSpecialKey(), 'G']"
+        :shortcut="[getSpecialKey(), 'G']"
         outline
         @click.native="!loading ? newSendRequest() : cancelRequest()"
       />
@@ -125,7 +125,7 @@
       <ButtonSecondary
         class="rounded-r-none ml-2"
         :label="$t('save')"
-        :shortcuts="[getSpecialKey(), 'S']"
+        :shortcut="[getSpecialKey(), 'S']"
         outline
         @click.native="newSendRequest"
       />

components/http/TestResult.vue

@@ -1,8 +1,22 @@
 <template>
   <div>
-    <div v-if="results">
+    <div v-if="results.tests">
+      <span
+        v-if="results.tests.description"
+        class="font-semibold text-secondaryDark text-xs"
+      >
+        {{ results.tests.description }}
+      </span>
+      <HttpTestResult
+        v-for="(result, index) in results.tests"
+        :key="`result-${index}`"
+        class="divide-y divide-dividerLight"
+        :results="result"
+      />
+    </div>
+    <div v-if="results.expectResults">
       <div
-        v-for="(result, index) in results"
+        v-for="(result, index) in results.expectResults"
         :key="`result-${index}`"
         class="flex py-2 px-4 items-center"
       >
@@ -27,14 +41,6 @@
         </span>
       </div>
     </div>
-    <div v-if="results.tests">
-      <HttpTestResult
-        v-for="(result, index) in results.expectResults"
-        :key="`result-${index}`"
-        class="divide-y divide-dividerLight"
-        :results="results.expectResults"
-      />
-    </div>
   </div>
 </template>
 
@@ -45,7 +51,7 @@ import { HoppTestResult } from "~/helpers/types/HoppTestResult"
 export default defineComponent({
   props: {
     results: {
-      type: Array as PropType<HoppTestResult>,
+      type: Object as PropType<HoppTestResult>,
       default: null,
     },
   },

components/http/Tests.vue

@@ -36,9 +36,6 @@
       }"
       complete-mode="test"
     />
-    <pre>
-    {{ testResults }}
-    </pre>
     <div v-if="testResults">
       <div class="flex flex-1 pl-4 items-center justify-between">
         <div>
@@ -60,22 +57,7 @@
           @click.native="clearContent()"
         />
       </div>
-      <div v-if="testResults.expectResults">
+      <HttpTestResult v-if="testResults" :results="testResults" />
-        <HttpTestResult
-          v-for="(result, index) in testResults.expectResults"
-          :key="`result-${index}`"
-          class="divide-y divide-dividerLight"
-          :results="testResults.expectResults"
-        />
-      </div>
-      <div v-if="testResults.tests">
-        <HttpTestResult
-          v-for="(result, index) in testResults.tests"
-          :key="`result-${index}`"
-          class="divide-y divide-dividerLight"
-          :results="testResults.tests"
-        />
-      </div>
     </div>
   </AppSection>
 </template>

components/landing/Hero.vue

@@ -38,7 +38,7 @@
           svg="github"
           large
           rounded
-          :shortcuts="['30k Stars']"
+          :shortcut="['30k Stars']"
         />
       </div>
       <LandingStats />

components/profile/Picture.vue

@@ -14,7 +14,7 @@
       :alt="alt"
       loading="lazy"
     />
-    <div class="rounded-lg shadow-inner inset-0 absolute"></div>
+    <div class="rounded shadow-inner inset-0 absolute"></div>
   </div>
 </template>
 

components/realtime/Mqtt.vue

@@ -14,7 +14,7 @@
                   class="
                     bg-primaryLight
                     border border-divider
-                    rounded-l-lg
+                    rounded-l
                     font-mono
                     text-secondaryDark
                     w-full

components/realtime/Socketio.vue

@@ -15,7 +15,7 @@
                   class="
                     bg-primaryLight
                     border border-divider
-                    rounded-l-lg
+                    rounded-l
                     font-mono
                     text-secondaryDark
                     w-full

components/realtime/Sse.vue

@@ -12,7 +12,7 @@
               class="
                 bg-primaryLight
                 border border-divider
-                rounded-l-lg
+                rounded-l
                 font-mono
                 text-secondaryDark
                 w-full

components/realtime/Websocket.vue

@@ -11,7 +11,7 @@
                 class="
                   bg-primaryLight
                   border border-divider
-                  rounded-l-lg
+                  rounded-l
                   font-mono
                   text-secondaryDark
                   w-full

components/smart/DeletableChip.vue

@@ -14,7 +14,7 @@
   @apply inline-flex;
   @apply items-center;
   @apply justify-center;
-  @apply rounded-lg;
+  @apply rounded;
   @apply m-1;
   @apply pl-4;
   @apply bg-primaryDark;

components/smart/Item.vue

@@ -4,7 +4,7 @@
     :exact="exact"
     :blank="blank"
     class="
-      rounded-lg
+      rounded
       font-semibold
       text-xs
       py-2

components/smart/Modal.vue

@@ -22,7 +22,7 @@
       <div
         class="
           bg-primary
-          rounded-lg
+          rounded
           flex flex-col
           max-w-md max-h-lg
           flex-1

components/tab/Primary.vue

@@ -4,7 +4,7 @@
     :exact="exact"
     :blank="blank"
     class="
-      rounded-lg
+      rounded
       font-semibold
       py-2
       px-4

helpers/preRequest.ts

@@ -36,7 +36,7 @@ export default function getEnvironmentVariablesFromScript(script: string) {
     // run pre-request script within this function so that it has access to the pw object.
     // eslint-disable-next-line no-new-func
     new Function("pw", script)(pw)
-  } catch (_e) { }
+  } catch (_e) {}
 
   return _variables
 }

helpers/utils/contenttypes.ts

@@ -11,3 +11,7 @@ export const knownContentTypes = {
 }
 
 export type ValidContentTypes = keyof typeof knownContentTypes
+
+export function isJSONContentType(contentType: string) {
+  return /\bjson\b/i.test(contentType)
+}

lang/en-US.json

@@ -59,7 +59,7 @@
   "status": "Status",
   "headers": "Headers",
   "websocket": "WebSocket",
-  "waiting_for_connection": "(waiting for connection)",
+  "waiting_for_connection": "waiting for connection",
   "message": "Message",
   "sse": "SSE",
   "server": "Server",

layouts/default.vue

@@ -17,44 +17,14 @@
                 <AppHeader />
               </Pane>
               <Pane class="flex flex-1 overflow-auto">
-                <nuxt class="flex flex-1" :hide-right-pane="RIGHT_SIDEBAR" />
+                <nuxt class="flex flex-1" />
               </Pane>
             </Splitpanes>
           </Pane>
         </Splitpanes>
       </Pane>
       <Pane style="height: auto">
-        <div class="flex justify-between">
+        <AppFooter />
-          <div>
-            <ButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :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(
-                'zen_mode'
-              )}`"
-              :icon="ZEN_MODE ? 'fullscreen_exit' : 'fullscreen'"
-              :class="{
-                'text-accent focus:text-accent hover:text-accent': ZEN_MODE,
-              }"
-              @click.native="toggleSetting('ZEN_MODE')"
-            />
-          </div>
-          <div>
-            <ButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :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')"
-            />
-          </div>
-        </div>
       </Pane>
     </Splitpanes>
   </div>
@@ -69,38 +39,24 @@ import { performMigrations } from "~/helpers/migrations"
 import { initUserInfo } from "~/helpers/teams/BackendUserInfo"
 import { registerApolloAuthUpdate } from "~/helpers/apollo"
 import { initializeFirebase } from "~/helpers/fb"
-import {
+import { getSettingSubject } from "~/newstore/settings"
-  defaultSettings,
-  getSettingSubject,
-  applySetting,
-  toggleSetting,
-} from "~/newstore/settings"
 import { logPageView } from "~/helpers/fb/analytics"
-import type { KeysMatching } from "~/types/ts-utils"
-
-type SettingsType = typeof defaultSettings
 
 export default defineComponent({
   components: { Splitpanes, Pane },
   data() {
     return {
       LEFT_SIDEBAR: null,
-      RIGHT_SIDEBAR: null,
       ZEN_MODE: null,
     }
   },
   subscriptions() {
     return {
       LEFT_SIDEBAR: getSettingSubject("LEFT_SIDEBAR"),
-      RIGHT_SIDEBAR: getSettingSubject("RIGHT_SIDEBAR"),
       ZEN_MODE: getSettingSubject("ZEN_MODE"),
     }
   },
   watch: {
-    ZEN_MODE(ZEN_MODE) {
-      this.applySetting("LEFT_SIDEBAR", !ZEN_MODE)
-      this.applySetting("RIGHT_SIDEBAR", !ZEN_MODE)
-    },
     $route(to) {
       logPageView(to.fullPath)
     },
@@ -159,13 +115,5 @@ export default defineComponent({
   beforeDestroy() {
     document.removeEventListener("keydown", this._keyListener)
   },
-  methods: {
-    toggleSetting<K extends KeysMatching<SettingsType, boolean>>(key: K) {
-      toggleSetting(key)
-    },
-    applySetting<K extends keyof SettingsType>(key: K, value: SettingsType[K]) {
-      applySetting(key, value)
-    },
-  },
 })
 </script>

layouts/empty.vue

@@ -0,0 +1,3 @@
+<template>
+  <Nuxt />
+</template>

middleware/README.md

@@ -1,7 +1,5 @@
 # MIDDLEWARE
 
-**This directory is not required, you can delete it if you don't want to use it.**
-
 This directory contains your application middleware.
 Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
 

newstore/settings.ts

@@ -44,7 +44,7 @@ export type SettingsType = {
   THEME_COLOR: HoppAccentColor
   BG_COLOR: HoppBgColor
   TELEMETRY_ENABLED: boolean
-  SHORTCUTS_INDICATOR_ENABLED: boolean
+  SHORTCUT_INDICATOR: boolean
   LEFT_SIDEBAR: boolean
   RIGHT_SIDEBAR: boolean
   ZEN_MODE: boolean
@@ -70,7 +70,7 @@ export const defaultSettings: SettingsType = {
   THEME_COLOR: "green",
   BG_COLOR: "system",
   TELEMETRY_ENABLED: true,
-  SHORTCUTS_INDICATOR_ENABLED: false,
+  SHORTCUT_INDICATOR: false,
   LEFT_SIDEBAR: true,
   RIGHT_SIDEBAR: true,
   ZEN_MODE: false,

pages/enter.vue

@@ -1,8 +1,12 @@
 <template>
-  <div class="flex flex-col min-h-screen">
+  <div class="flex flex-col min-h-screen items-center justify-center">
-    <span v-if="signingInWithEmail">{{ $t("loading") }}</span>
+    <span v-if="signingInWithEmail">
-    <span v-else>{{ $t("waiting_for_connection") }}</span>
+      <SmartSpinner />
-    <pre v-if="error">{{ error }}</pre>
+    </span>
+    <span v-else class="text-secondaryLight text-xs">
+      {{ $t("waiting_for_connection") }}
+    </span>
+    <pre v-if="error" class="font-mono text-xs">{{ error }}</pre>
   </div>
 </template>
 
@@ -13,6 +17,7 @@ import { isSignInWithEmailLink, signInWithEmailLink } from "~/helpers/fb/auth"
 import { getLocalConfig, removeLocalConfig } from "~/newstore/localpersistence"
 
 export default Vue.extend({
+  layout: "empty",
   data() {
     return {
       signingInWithEmail: false,

pages/graphql.vue

@@ -15,7 +15,7 @@
                     class="
                       bg-primaryLight
                       border border-divider
-                      rounded-l-lg
+                      rounded-l
                       font-mono
                       text-secondaryDark
                       w-full

pages/settings.vue

@@ -173,13 +173,11 @@
               </div>
               <div class="flex items-center">
                 <SmartToggle
-                  :on="SHORTCUTS_INDICATOR_ENABLED"
+                  :on="SHORTCUT_INDICATOR"
-                  @change="toggleSetting('SHORTCUTS_INDICATOR_ENABLED')"
+                  @change="toggleSetting('SHORTCUT_INDICATOR')"
                 >
                   {{ $t("shortcuts_indicator") }}
-                  {{
+                  {{ SHORTCUT_INDICATOR ? $t("enabled") : $t("disabled") }}
-                    SHORTCUTS_INDICATOR_ENABLED ? $t("enabled") : $t("disabled")
-                  }}
                 </SmartToggle>
               </div>
               <div class="flex items-center">
@@ -229,6 +227,26 @@
                 {{ $t("extension_ver_not_reported") }}
               </span>
             </div>
+            <div class="flex flex-col space-y-2 py-4">
+              <span>
+                <SmartItem
+                  to="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
+                  blank
+                  svg="firefox"
+                  label="Firefox"
+                  :info-icon="hasFirefoxExtInstalled ? 'check_circle' : ''"
+                />
+              </span>
+              <span>
+                <SmartItem
+                  to="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
+                  blank
+                  svg="chrome"
+                  label="Chrome"
+                  :info-icon="hasChromeExtInstalled ? 'check_circle' : ''"
+                />
+              </span>
+            </div>
             <div class="space-y-4 mt-4">
               <div class="flex items-center">
                 <SmartToggle
@@ -318,7 +336,11 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
-import { hasExtensionInstalled } from "../helpers/strategies/ExtensionStrategy"
+import {
+  hasExtensionInstalled,
+  hasChromeExtensionInstalled,
+  hasFirefoxExtensionInstalled,
+} from "~/helpers/strategies/ExtensionStrategy"
 import {
   applySetting,
   toggleSetting,
@@ -345,7 +367,7 @@ export default defineComponent({
       SYNC_ENVIRONMENTS: useSetting("syncEnvironments"),
       SYNC_HISTORY: useSetting("syncHistory"),
       TELEMETRY_ENABLED: useSetting("TELEMETRY_ENABLED"),
-      SHORTCUTS_INDICATOR_ENABLED: useSetting("SHORTCUTS_INDICATOR_ENABLED"),
+      SHORTCUT_INDICATOR: useSetting("SHORTCUT_INDICATOR"),
       LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
       ZEN_MODE: useSetting("ZEN_MODE"),
       currentUser: useReadonlyStream(currentUser$, currentUser$.value),
@@ -357,6 +379,9 @@ export default defineComponent({
         ? window.__POSTWOMAN_EXTENSION_HOOK__.getVersion()
         : null,
 
+      hasChromeExtInstalled: hasChromeExtensionInstalled(),
+      hasFirefoxExtInstalled: hasFirefoxExtensionInstalled(),
+
       clearIcon: "clear_all",
 
       showLogin: false,