refactor: move actions from app header to app footer

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