refactor: remove footer on narrow screens (#2202)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

packages/hoppscotch-app/components/app/Footer.vue

@@ -192,7 +192,6 @@
     </div>
     <AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
     <AppShare :show="showShare" @hide-modal="showShare = false" />
-    <AppPowerSearch :show="showSearch" @hide-modal="showSearch = false" />
     <AppDeveloperOptions
       :show="showDeveloperOptions"
       @hide-modal="showDeveloperOptions = false"
@@ -212,7 +211,6 @@ const t = useI18n()
 const showShortcuts = ref(false)
 const showShare = ref(false)
 const showDeveloperOptions = ref(false)
-const showSearch = ref(false)
 
 defineActionHandler("flyouts.keybinds.toggle", () => {
   showShortcuts.value = !showShortcuts.value
@@ -222,10 +220,6 @@ defineActionHandler("modals.share.toggle", () => {
   showShare.value = !showShare.value
 })
 
-defineActionHandler("modals.search.toggle", () => {
-  showSearch.value = !showSearch.value
-})
-
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
 const SIDEBAR = useSetting("SIDEBAR")
 const ZEN_MODE = useSetting("ZEN_MODE")

packages/hoppscotch-app/components/app/Header.vue

@@ -25,11 +25,13 @@
           :title="`${t('app.search')} <xmp>/</xmp>`"
           svg="search"
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
-          @click.native="invokeAction('modals.search.toggle')"
+          @click.native="showSearch = true"
         />
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip', allowHTML: true }"
-          :title="`${t('support.title')} <xmp>?</xmp>`"
+          :title="`${
+            mdAndLarger ? t('support.title') : t('app.options')
+          } <xmp>?</xmp>`"
           svg="life-buoy"
           class="rounded hover:bg-primaryDark focus-visible:bg-primaryDark"
           @click.native="showSupport = true"
@@ -137,14 +139,20 @@
     </header>
     <AppAnnouncement v-if="!network.isOnline" />
     <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
-    <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
+    <AppSupport
+      v-if="mdAndLarger"
+      :show="showSupport"
+      @hide-modal="showSupport = false"
+    />
+    <AppOptions v-else :show="showSupport" @hide-modal="showSupport = false" />
     <TeamsModal :show="showTeamsModal" @hide-modal="showTeamsModal = false" />
+    <AppPowerSearch :show="showSearch" @hide-modal="showSearch = false" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, reactive, ref } from "@nuxtjs/composition-api"
-import { useNetwork } from "@vueuse/core"
+import { breakpointsTailwind, useBreakpoints, useNetwork } from "@vueuse/core"
 import initializePwa from "~/helpers/pwa"
 import { probableUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
@@ -153,7 +161,7 @@ import {
   useI18n,
   useToast,
 } from "~/helpers/utils/composables"
-import { defineActionHandler, invokeAction } from "~/helpers/actions"
+import { defineActionHandler } from "~/helpers/actions"
 
 const t = useI18n()
 
@@ -169,6 +177,10 @@ const showInstallPrompt = ref(() => Promise.resolve()) // Async no-op till it is
 const showSupport = ref(false)
 const showLogin = ref(false)
 const showTeamsModal = ref(false)
+const showSearch = ref(false)
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const mdAndLarger = breakpoints.greater("md")
 
 const network = reactive(useNetwork())
 
@@ -178,6 +190,10 @@ defineActionHandler("modals.support.toggle", () => {
   showSupport.value = !showSupport.value
 })
 
+defineActionHandler("modals.search.toggle", () => {
+  showSearch.value = !showSearch.value
+})
+
 onMounted(() => {
   // Initializes the PWA code - checks if the app is installed,
   // etc.

packages/hoppscotch-app/components/app/Options.vue

@@ -0,0 +1,210 @@
+<template>
+  <SmartModal
+    v-if="show"
+    dialog
+    :title="t('app.options')"
+    max-width="sm:max-w-md"
+    class="text-sm"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col space-y-2">
+        <h2 class="p-2 font-semibold font-bold text-secondaryDark">
+          {{ t("layout.name") }}
+        </h2>
+        <SmartItem
+          svg="sidebar"
+          :label="EXPAND_NAVIGATION ? t('hide.sidebar') : t('show.sidebar')"
+          :description="t('layout.collapse_sidebar')"
+          info-icon="chevron_right"
+          active
+          @click.native="expandNavigation"
+        />
+        <SmartItem
+          svg="sidebar-open"
+          :label="SIDEBAR ? t('hide.collection') : t('show.collection')"
+          :description="t('layout.collapse_collection')"
+          info-icon="chevron_right"
+          active
+          @click.native="expandCollection"
+        />
+        <h2 class="p-2 font-semibold font-bold text-secondaryDark">
+          {{ t("support.title") }}
+        </h2>
+        <SmartItem
+          svg="book"
+          :label="t('app.documentation')"
+          to="https://docs.hoppscotch.io"
+          :description="t('support.documentation')"
+          info-icon="chevron_right"
+          active
+          blank
+          @click.native="hideModal()"
+        />
+        <SmartItem
+          svg="gift"
+          :label="t('app.whats_new')"
+          to="https://docs.hoppscotch.io/changelog"
+          :description="t('support.changelog')"
+          info-icon="chevron_right"
+          active
+          blank
+          @click.native="hideModal()"
+        />
+        <SmartItem
+          svg="activity"
+          :label="t('app.status')"
+          to="https://status.hoppscotch.io"
+          blank
+          :description="t('app.status_description')"
+          info-icon="chevron_right"
+          active
+          @click.native="hideModal()"
+        />
+        <SmartItem
+          svg="lock"
+          :label="`${t('app.terms_and_privacy')}`"
+          to="https://docs.hoppscotch.io/privacy"
+          blank
+          :description="t('app.terms_and_privacy')"
+          info-icon="chevron_right"
+          active
+          @click.native="hideModal()"
+        />
+        <h2 class="p-2 font-semibold font-bold text-secondaryDark">
+          {{ t("settings.follow") }}
+        </h2>
+        <SmartItem
+          svg="brands/discord"
+          :label="t('app.discord')"
+          to="https://hoppscotch.io/discord"
+          blank
+          :description="t('app.join_discord_community')"
+          info-icon="chevron_right"
+          active
+          @click.native="hideModal()"
+        />
+        <SmartItem
+          svg="brands/twitter"
+          :label="t('app.twitter')"
+          to="https://hoppscotch.io/twitter"
+          blank
+          :description="t('support.twitter')"
+          info-icon="chevron_right"
+          active
+          @click.native="hideModal()"
+        />
+        <SmartItem
+          svg="github"
+          :label="`${t('app.github')}`"
+          to="https://github.com/hoppscotch/hoppscotch"
+          blank
+          :description="t('support.github')"
+          info-icon="chevron_right"
+          active
+          @click.native="hideModal()"
+        />
+        <SmartItem
+          svg="message-circle"
+          :label="t('app.chat_with_us')"
+          :description="t('support.chat')"
+          info-icon="chevron_right"
+          active
+          @click.native="chatWithUs()"
+        />
+        <SmartItem
+          svg="user-plus"
+          :label="`${t('app.invite')}`"
+          :description="t('shortcut.miscellaneous.invite')"
+          info-icon="chevron_right"
+          active
+          @click.native="expandInvite()"
+        />
+        <SmartItem
+          v-if="navigatorShare"
+          v-tippy="{ theme: 'tooltip' }"
+          svg="share-2"
+          :label="`${t('request.share')}`"
+          :description="t('request.share_description')"
+          info-icon="chevron_right"
+          active
+          @click.native="nativeShare()"
+        />
+      </div>
+      <AppShare :show="showShare" @hide-modal="showShare = false" />
+    </template>
+  </SmartModal>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "@nuxtjs/composition-api"
+import { useSetting } from "~/newstore/settings"
+import { defineActionHandler } from "~/helpers/actions"
+import { showChat } from "~/helpers/support"
+import { useI18n } from "~/helpers/utils/composables"
+
+const t = useI18n()
+const navigatorShare = !!navigator.share
+const showShare = ref(false)
+
+const ZEN_MODE = useSetting("ZEN_MODE")
+const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
+const SIDEBAR = useSetting("SIDEBAR")
+
+watch(
+  () => ZEN_MODE.value,
+  () => {
+    EXPAND_NAVIGATION.value = !ZEN_MODE.value
+  }
+)
+
+defineProps<{
+  show: Boolean
+}>()
+
+defineActionHandler("modals.share.toggle", () => {
+  showShare.value = !showShare.value
+})
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const chatWithUs = () => {
+  showChat()
+  hideModal()
+}
+
+const expandNavigation = () => {
+  EXPAND_NAVIGATION.value = !EXPAND_NAVIGATION.value
+  hideModal()
+}
+
+const expandCollection = () => {
+  SIDEBAR.value = !SIDEBAR.value
+  hideModal()
+}
+
+const expandInvite = () => {
+  showShare.value = true
+}
+
+const 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
+  }
+}
+
+const hideModal = () => {
+  emit("hide-modal")
+}
+</script>

packages/hoppscotch-app/layouts/default.vue

@@ -43,7 +43,6 @@
         class="hide-scrollbar !overflow-auto flex flex-col fixed inset-x-0 bottom-0 z-10"
       >
         <AppSidenav />
-        <AppFooter />
       </Pane>
     </Splitpanes>
   </div>
@@ -119,11 +118,22 @@ function updateThemes() {
   const themeColor = useSetting("THEME_COLOR")
   const bgColor = useSetting("BG_COLOR")
   const fontSize = useSetting("FONT_SIZE")
+  const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
 
   const spacerClass = computed(() => {
-    if (fontSize.value === "small") return "spacer-small"
+    if (fontSize.value === "small" && EXPAND_NAVIGATION.value)
-    if (fontSize.value === "large") return "spacer-large"
+      return "spacer-small"
-    return "spacer-medium"
+    if (fontSize.value === "medium" && EXPAND_NAVIGATION.value)
+      return "spacer-medium"
+    if (fontSize.value === "large" && EXPAND_NAVIGATION.value)
+      return "spacer-large"
+    if (
+      (fontSize.value === "small" ||
+        fontSize.value === "medium" ||
+        fontSize.value === "large") &&
+      !EXPAND_NAVIGATION.value
+    )
+      return "spacer-expand"
   })
 
   // Initially apply
@@ -262,28 +272,36 @@ export default defineComponent({
 
 <style scoped>
 .spacer-small {
-  margin-bottom: 6.1rem;
+  margin-bottom: 4.2rem;
 }
 
 .spacer-medium {
-  margin-bottom: 6.9rem;
+  margin-bottom: 4.8rem;
 }
 
 .spacer-large {
-  margin-bottom: 7.8rem;
+  margin-bottom: 5.5rem;
+}
+
+.spacer-expand {
+  margin-bottom: 2.9rem;
 }
 
 @media screen and (min-width: 768px) {
   .spacer-small {
-    margin-bottom: 0rem;
+    margin-bottom: 0;
   }
 
   .spacer-medium {
-    margin-bottom: 0rem;
+    margin-bottom: 0;
   }
 
   .spacer-large {
-    margin-bottom: 0rem;
+    margin-bottom: 0;
+  }
+
+  .spacer-expand {
+    margin-bottom: 0;
   }
 }
 </style>

packages/hoppscotch-app/locales/en.json

@@ -45,6 +45,7 @@
     "contact_us": "Contact us",
     "copy": "Copy",
     "copy_user_id": "Copy User Auth Token",
+    "discord": "Discord",
     "documentation": "Documentation",
     "developer_option": "Developer options",
     "developer_option_description": "Developer tools which helps in development and maintenance of Hoppscotch.",
@@ -58,6 +59,7 @@
     "keyboard_shortcuts": "Keyboard shortcuts",
     "name": "Hoppscotch",
     "new_version_found": "New version found. Refresh to update.",
+    "options": "Options",
     "proxy_privacy_policy": "Proxy privacy policy",
     "reload": "Reload",
     "search": "Search",
@@ -65,6 +67,7 @@
     "shortcuts": "Shortcuts",
     "spotlight": "Spotlight",
     "status": "Status",
+    "status_description": "Check the status of the website",
     "terms_and_privacy": "Terms and privacy",
     "twitter": "Twitter",
     "type_a_command_search": "Type a command or search…",
@@ -238,7 +241,8 @@
   "hide": {
     "more": "Hide more",
     "preview": "Hide Preview",
-    "sidebar": "Collapse sidebar"
+    "sidebar": "Collapse sidebar",
+    "collection": "Collapse Collection Panel"
   },
   "import": {
     "collections": "Import collections",
@@ -264,7 +268,10 @@
   "layout": {
     "column": "Vertical layout",
     "row": "Horizontal layout",
-    "zen_mode": "Zen mode"
+    "zen_mode": "Zen mode",
+    "collapse_sidebar": "Collapse or Expand the sidebar",
+    "collapse_collection": "Collapse or Expand Collections",
+    "name": "Layout"
   },
   "modal": {
     "collections": "Collections",
@@ -342,6 +349,7 @@
     "save_as": "Save as",
     "saved": "Request saved",
     "share": "Share",
+    "share_description": "Share Hoppscotch with your friends",
     "title": "Request",
     "type": "Request type",
     "url": "URL",
@@ -388,6 +396,7 @@
     "font_size_large": "Large",
     "font_size_medium": "Medium",
     "font_size_small": "Small",
+    "follow": "Follow Us",
     "interceptor": "Interceptor",
     "interceptor_description": "Middleware between application and APIs.",
     "language": "Language",
@@ -466,7 +475,8 @@
   "show": {
     "code": "Show code",
     "more": "Show more",
-    "sidebar": "Expand sidebar"
+    "sidebar": "Expand sidebar",
+    "collection": "Expand Collection Panel"
   },
   "socketio": {
     "communication": "Communication",
@@ -514,7 +524,8 @@
     "shortcuts": "Browse app faster",
     "team": "Get in touch with the team",
     "title": "Support",
-    "twitter": "Follow us on Twitter"
+    "twitter": "Follow us on Twitter",
+    "github": "Follow us on Github"
   },
   "tab": {
     "authorization": "Authorization",