refactor: move actions from app header to app footer

pages/enter.vue

@@ -1,8 +1,12 @@
 <template>
-  <div class="flex flex-col min-h-screen">
-    <span v-if="signingInWithEmail">{{ $t("loading") }}</span>
-    <span v-else>{{ $t("waiting_for_connection") }}</span>
-    <pre v-if="error">{{ error }}</pre>
+  <div class="flex flex-col min-h-screen items-center justify-center">
+    <span v-if="signingInWithEmail">
+      <SmartSpinner />
+    </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"
-                  @change="toggleSetting('SHORTCUTS_INDICATOR_ENABLED')"
+                  :on="SHORTCUT_INDICATOR"
+                  @change="toggleSetting('SHORTCUT_INDICATOR')"
                 >
                   {{ $t("shortcuts_indicator") }}
-                  {{
-                    SHORTCUTS_INDICATOR_ENABLED ? $t("enabled") : $t("disabled")
-                  }}
+                  {{ SHORTCUT_INDICATOR ? $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,