refactor: composables for breakpoints

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

@@ -5,7 +5,7 @@
     >
       <div class="inline-flex items-center space-x-2">
         <ButtonSecondary
-          class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark"
+          class="tracking-wide !font-bold !text-secondaryDark hover:bg-primaryDark focus-visible:bg-primaryDark uppercase"
           :label="t('app.name')"
           to="/"
         />

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

@@ -14,7 +14,7 @@
         <span v-if="EXPAND_NAVIGATION">{{ navigation.title }}</span>
         <tippy
           v-if="!EXPAND_NAVIGATION"
-          :placement="windowInnerWidth.x.value >= 768 ? 'right' : 'bottom'"
+          :placement="mdAndLarger ? 'right' : 'bottom'"
           theme="tooltip"
           :content="navigation.title"
         />
@@ -24,13 +24,15 @@
 </template>
 
 <script setup lang="ts">
-import useWindowSize from "~/helpers/utils/useWindowSize"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { useSetting } from "~/newstore/settings"
 import { useI18n } from "~/helpers/utils/composables"
 
 const t = useI18n()
 
-const windowInnerWidth = useWindowSize()
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const mdAndLarger = breakpoints.greater("md")
+
 const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
 
 const primaryNavigation = [

packages/hoppscotch-app/components/http/Request.vue

@@ -125,11 +125,7 @@
       </span>
       <ButtonSecondary
         class="ml-2 rounded rounded-r-none"
-        :label="
-          windowInnerWidth.x.value >= 768 && COLUMN_LAYOUT
-            ? `${t('request.save')}`
-            : ''
-        "
+        :label="mdAndLarger && COLUMN_LAYOUT ? `${t('request.save')}` : ''"
         filled
         svg="save"
         @click.native="saveRequest()"
@@ -217,6 +213,7 @@
 import { computed, ref, watch } from "@nuxtjs/composition-api"
 import { isLeft, isRight } from "fp-ts/lib/Either"
 import * as E from "fp-ts/Either"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import {
   updateRESTResponse,
   restEndpoint$,
@@ -245,7 +242,6 @@ import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { useSetting } from "~/newstore/settings"
 import { overwriteRequestTeams } from "~/helpers/teams/utils"
 import { apolloClient } from "~/helpers/apollo"
-import useWindowSize from "~/helpers/utils/useWindowSize"
 import { createShortcode } from "~/helpers/backend/mutations/Shortcode"
 
 const t = useI18n()
@@ -555,6 +551,8 @@ const isCustomMethod = computed(() => {
 
 const requestName = useRESTRequestName()
 
-const windowInnerWidth = useWindowSize()
 const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
+
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const mdAndLarger = breakpoints.greater("md")
 </script>

packages/hoppscotch-app/components/realtime/Mqtt.vue

@@ -1,11 +1,11 @@
 <template>
   <Splitpanes
     class="smart-splitter"
-    :rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
+    :rtl="SIDEBAR_ON_LEFT && mdAndLarger"
     :class="{
-      '!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
+      '!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
     }"
-    :horizontal="!(windowInnerWidth.x.value >= 768)"
+    :horizontal="!mdAndLarger"
   >
     <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
@@ -148,9 +148,9 @@ import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
 import Paho from "paho-mqtt"
 import debounce from "lodash/debounce"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { useSetting } from "~/newstore/settings"
-import useWindowSize from "~/helpers/utils/useWindowSize"
 import {
   MQTTEndpoint$,
   setMQTTEndpoint,
@@ -171,8 +171,11 @@ import { useStream } from "~/helpers/utils/composables"
 export default defineComponent({
   components: { Splitpanes, Pane },
   setup() {
+    const breakpoints = useBreakpoints(breakpointsTailwind)
+    const mdAndLarger = breakpoints.greater("md")
+
     return {
-      windowInnerWidth: useWindowSize(),
+      mdAndLarger,
       SIDEBAR: useSetting("SIDEBAR"),
       COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),

packages/hoppscotch-app/components/realtime/Socketio.vue

@@ -1,11 +1,11 @@
 <template>
   <Splitpanes
     class="smart-splitter"
-    :rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
+    :rtl="SIDEBAR_ON_LEFT && mdAndLarger"
     :class="{
-      '!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
+      '!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
     }"
-    :horizontal="!(windowInnerWidth.x.value >= 768)"
+    :horizontal="!mdAndLarger"
   >
     <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
@@ -306,9 +306,9 @@ import { io as ClientV4 } from "socket.io-client-v4"
 
 import wildcard from "socketio-wildcard"
 import debounce from "lodash/debounce"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { useSetting } from "~/newstore/settings"
-import useWindowSize from "~/helpers/utils/useWindowSize"
 import {
   SIOEndpoint$,
   setSIOEndpoint,
@@ -337,8 +337,11 @@ const socketIoClients = {
 export default defineComponent({
   components: { Splitpanes, Pane },
   setup() {
+    const breakpoints = useBreakpoints(breakpointsTailwind)
+    const mdAndLarger = breakpoints.greater("md")
+
     return {
-      windowInnerWidth: useWindowSize(),
+      mdAndLarger,
       SIDEBAR: useSetting("SIDEBAR"),
       COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),

packages/hoppscotch-app/components/realtime/Websocket.vue

@@ -1,11 +1,11 @@
 <template>
   <Splitpanes
     class="smart-splitter"
-    :rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
+    :rtl="SIDEBAR_ON_LEFT && mdAndLarger"
     :class="{
-      '!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
+      '!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
     }"
-    :horizontal="!(windowInnerWidth.x.value >= 768)"
+    :horizontal="!mdAndLarger"
   >
     <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
@@ -186,8 +186,8 @@ import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
 import debounce from "lodash/debounce"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
-import useWindowSize from "~/helpers/utils/useWindowSize"
 import { useSetting } from "~/newstore/settings"
 import {
   setWSEndpoint,
@@ -213,8 +213,11 @@ import { useStream } from "~/helpers/utils/composables"
 export default defineComponent({
   components: { Splitpanes, Pane },
   setup() {
+    const breakpoints = useBreakpoints(breakpointsTailwind)
+    const mdAndLarger = breakpoints.greater("md")
+
     return {
-      windowInnerWidth: useWindowSize(),
+      mdAndLarger,
       SIDEBAR: useSetting("SIDEBAR"),
       COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),

packages/hoppscotch-app/helpers/utils/useWindowSize.ts

@@ -1,25 +0,0 @@
-import {
-  Ref,
-  onMounted,
-  onUnmounted,
-  reactive,
-  toRefs,
-} from "@nuxtjs/composition-api"
-
-interface WindowSize {
-  x: Ref<number>
-  y: Ref<number>
-}
-
-export function useWindowSize(): WindowSize {
-  const windowSize = reactive({ x: 0, y: 0 })
-  const resizeListener = () => {
-    ;({ innerWidth: windowSize.x, innerHeight: windowSize.y } = window)
-  }
-  onMounted(() => window.addEventListener("resize", resizeListener))
-  onUnmounted(() => window.removeEventListener("resize", resizeListener))
-  resizeListener()
-  return toRefs(windowSize)
-}
-
-export default useWindowSize

packages/hoppscotch-app/layouts/default.vue

@@ -8,7 +8,7 @@
         <Splitpanes
           class="no-splitter"
           :dbl-click-splitter="false"
-          :horizontal="!(windowInnerWidth.x.value >= 768)"
+          :horizontal="!mdAndLarger"
         >
           <Pane
             style="width: auto; height: auto"
@@ -48,6 +48,7 @@ import {
 } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { setupLocalPersistence } from "~/newstore/localpersistence"
 import { performMigrations } from "~/helpers/migrations"
 import { initUserInfo } from "~/helpers/teams/BackendUserInfo"
@@ -56,26 +57,27 @@ import { applySetting, useSetting } from "~/newstore/settings"
 import { logPageView } from "~/helpers/fb/analytics"
 import { hookKeybindingsListener } from "~/helpers/keybindings"
 import { defineActionHandler } from "~/helpers/actions"
-import useWindowSize from "~/helpers/utils/useWindowSize"
 import { useSentry } from "~/helpers/sentry"
 import { useColorMode } from "~/helpers/utils/composables"
 
 function appLayout() {
   const rightSidebar = useSetting("SIDEBAR")
   const columnLayout = useSetting("COLUMN_LAYOUT")
-  const windowInnerWidth = useWindowSize()
+
+  const breakpoints = useBreakpoints(breakpointsTailwind)
+  const mdAndLarger = breakpoints.greater("md")
 
   // Initially apply
   onBeforeMount(() => {
-    if (windowInnerWidth.x.value < 768) {
+    if (mdAndLarger.value) {
       rightSidebar.value = false
       columnLayout.value = true
     }
   })
 
   // Listen for updates
-  watch(windowInnerWidth.x, () => {
-    if (windowInnerWidth.x.value < 768) {
+  watch(mdAndLarger, () => {
+    if (!mdAndLarger.value) {
       rightSidebar.value = false
       columnLayout.value = true
     }
@@ -172,8 +174,12 @@ export default defineComponent({
     updateThemes()
 
     setupSentry()
+
+    const breakpoints = useBreakpoints(breakpointsTailwind)
+    const mdAndLarger = breakpoints.greater("md")
+
     return {
-      windowInnerWidth: useWindowSize(),
+      mdAndLarger,
       ZEN_MODE: useSetting("ZEN_MODE"),
     }
   },

packages/hoppscotch-app/pages/documentation.vue

@@ -1,11 +1,11 @@
 <template>
   <Splitpanes
     class="smart-splitter"
-    :rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
+    :rtl="SIDEBAR_ON_LEFT && mdAndLarger"
     :class="{
-      '!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
+      '!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
     }"
-    :horizontal="!(windowInnerWidth.x.value >= 768)"
+    :horizontal="!mdAndLarger"
   >
     <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
@@ -140,19 +140,22 @@ import { defineComponent } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
 import Mustache from "mustache"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { currentUser$ } from "~/helpers/fb/auth"
 import DocsTemplate from "~/assets/md/docs.md"
 import folderContents from "~/assets/md/folderContents.md"
 import folderBody from "~/assets/md/folderBody.md"
 import { useSetting } from "~/newstore/settings"
 import { useReadonlyStream } from "~/helpers/utils/composables"
-import useWindowSize from "~/helpers/utils/useWindowSize"
 
 export default defineComponent({
   components: { Splitpanes, Pane },
   setup() {
+    const breakpoints = useBreakpoints(breakpointsTailwind)
+    const mdAndLarger = breakpoints.greater("md")
+
     return {
-      windowInnerWidth: useWindowSize(),
+      mdAndLarger,
       SIDEBAR: useSetting("SIDEBAR"),
       COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       currentUser: useReadonlyStream(currentUser$, null),

packages/hoppscotch-app/pages/graphql.vue

@@ -1,11 +1,11 @@
 <template>
   <Splitpanes
     class="smart-splitter"
-    :rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
+    :rtl="SIDEBAR_ON_LEFT && mdAndLarger"
     :class="{
-      '!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
+      '!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
     }"
-    :horizontal="!(windowInnerWidth.x.value >= 768)"
+    :horizontal="!mdAndLarger"
   >
     <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
@@ -39,10 +39,10 @@
 import { defineComponent, watch } from "@nuxtjs/composition-api"
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { useSetting } from "~/newstore/settings"
 import { GQLConnection } from "~/helpers/GQLConnection"
 import { useNuxt, useReadonlyStream } from "~/helpers/utils/composables"
-import useWindowSize from "~/helpers/utils/useWindowSize"
 
 export default defineComponent({
   components: { Splitpanes, Pane },
@@ -64,8 +64,11 @@ export default defineComponent({
       else nuxt.value.$loading.finish()
     })
 
+    const breakpoints = useBreakpoints(breakpointsTailwind)
+    const mdAndLarger = breakpoints.greater("md")
+
     return {
-      windowInnerWidth: useWindowSize(),
+      mdAndLarger,
       SIDEBAR: useSetting("SIDEBAR"),
       COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
       SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),

packages/hoppscotch-app/pages/index.vue

@@ -1,11 +1,11 @@
 <template>
   <Splitpanes
     class="smart-splitter"
-    :rtl="SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768"
+    :rtl="SIDEBAR_ON_LEFT && mdAndLarger"
     :class="{
-      '!flex-row-reverse': SIDEBAR_ON_LEFT && windowInnerWidth.x.value >= 768,
+      '!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
     }"
-    :horizontal="!(windowInnerWidth.x.value >= 768)"
+    :horizontal="!mdAndLarger"
   >
     <Pane size="75" min-size="65" class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
@@ -127,6 +127,7 @@ import {
   HoppRESTAuthOAuth2,
   safelyExtractRESTRequest,
 } from "@hoppscotch/data"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 import { useSetting } from "~/newstore/settings"
 import {
   restActiveParamsCount$,
@@ -150,7 +151,6 @@ import {
 import { loadRequestFromSync, startRequestSync } from "~/helpers/fb/request"
 import { onLoggedIn } from "~/helpers/fb/auth"
 import { oauthRedirect } from "~/helpers/oauth"
-import useWindowSize from "~/helpers/utils/useWindowSize"
 
 function bindRequestToURLParams() {
   const { route } = useContext()
@@ -267,8 +267,11 @@ export default defineComponent({
     setupRequestSync(confirmSync, requestForSync)
     bindRequestToURLParams()
 
+    const breakpoints = useBreakpoints(breakpointsTailwind)
+    const mdAndLarger = breakpoints.greater("md")
+
     return {
-      windowInnerWidth: useWindowSize(),
+      mdAndLarger,
       newActiveParamsCount$: useReadonlyStream(
         restActiveParamsCount$.pipe(
           map((e) => {