From 73f22abf561e8de4d3a835f37e5124ab5665a8a5 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 8 Sep 2021 12:27:46 +0530
Subject: [PATCH] feat: mobile responsive right sidbars + composable window
 size

---
 components/realtime/Mqtt.vue      |  8 +++++++-
 components/realtime/Socketio.vue  |  8 +++++++-
 components/realtime/Websocket.vue |  8 +++++++-
 helpers/utils/useWindowSize.ts    | 25 +++++++++++++++++++++++++
 layouts/default.vue               | 19 +++----------------
 pages/documentation.vue           |  8 +++++++-
 pages/graphql.vue                 |  8 +++++++-
 pages/index.vue                   | 11 +++++++----
 8 files changed, 70 insertions(+), 25 deletions(-)
 create mode 100644 helpers/utils/useWindowSize.ts

diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index 5ea113fd3..9f1bb3b7b 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -1,5 +1,9 @@
 <template>
-  <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
+  <Splitpanes
+    class="smart-splitter"
+    :dbl-click-splitter="false"
+    :horizontal="!(windowInnerWidth.x.value >= 768)"
+  >
     <Pane class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
         <Pane class="hide-scrollbar !overflow-auto">
@@ -144,11 +148,13 @@ import Paho from "paho-mqtt"
 import debounce from "~/helpers/utils/debounce"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { useSetting } from "~/newstore/settings"
+import useWindowSize from "~/helpers/utils/useWindowSize"
 
 export default defineComponent({
   components: { Splitpanes, Pane },
   setup() {
     return {
+      windowInnerWidth: useWindowSize(),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
     }
   },
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index 87adacc2c..e9e461aee 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -1,5 +1,9 @@
 <template>
-  <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
+  <Splitpanes
+    class="smart-splitter"
+    :dbl-click-splitter="false"
+    :horizontal="!(windowInnerWidth.x.value >= 768)"
+  >
     <Pane class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
         <Pane class="hide-scrollbar !overflow-auto">
@@ -164,11 +168,13 @@ import wildcard from "socketio-wildcard"
 import debounce from "~/helpers/utils/debounce"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { useSetting } from "~/newstore/settings"
+import useWindowSize from "~/helpers/utils/useWindowSize"
 
 export default defineComponent({
   components: { Splitpanes, Pane },
   setup() {
     return {
+      windowInnerWidth: useWindowSize(),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
     }
   },
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index 121165902..75220c973 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -1,5 +1,9 @@
 <template>
-  <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
+  <Splitpanes
+    class="smart-splitter"
+    :dbl-click-splitter="false"
+    :horizontal="!(windowInnerWidth.x.value >= 768)"
+  >
     <Pane class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
         <Pane class="hide-scrollbar !overflow-auto">
@@ -203,12 +207,14 @@ import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import debounce from "~/helpers/utils/debounce"
+import useWindowSize from "~/helpers/utils/useWindowSize"
 import { useSetting } from "~/newstore/settings"
 
 export default defineComponent({
   components: { Splitpanes, Pane },
   setup() {
     return {
+      windowInnerWidth: useWindowSize(),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
     }
   },
diff --git a/helpers/utils/useWindowSize.ts b/helpers/utils/useWindowSize.ts
new file mode 100644
index 000000000..b85554c87
--- /dev/null
+++ b/helpers/utils/useWindowSize.ts
@@ -0,0 +1,25 @@
+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
diff --git a/layouts/default.vue b/layouts/default.vue
index d9a2d16cc..ab6e89221 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -8,7 +8,7 @@
         <Splitpanes
           class="no-splitter"
           :dbl-click-splitter="false"
-          :horizontal="!(windowInnerWidth >= 768)"
+          :horizontal="!(windowInnerWidth.x.value >= 768)"
         >
           <Pane
             style="width: auto; height: auto"
@@ -57,6 +57,7 @@ import { 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"
 
 function updateThemes() {
   const { $colorMode } = useContext() as any
@@ -119,14 +120,10 @@ export default defineComponent({
     updateThemes()
 
     return {
+      windowInnerWidth: useWindowSize(),
       ZEN_MODE: useSetting("ZEN_MODE"),
     }
   },
-  data() {
-    return {
-      windowInnerWidth: 0,
-    }
-  },
   head() {
     return this.$nuxtI18nHead({ addSeoAttributes: true })
   },
@@ -141,8 +138,6 @@ export default defineComponent({
     registerApolloAuthUpdate()
   },
   async mounted() {
-    window.addEventListener("resize", this.handleResize)
-    this.handleResize()
     performMigrations()
     console.log(
       "%cWe ❤︎ open source!",
@@ -179,13 +174,5 @@ export default defineComponent({
 
     logPageView(this.$router.currentRoute.fullPath)
   },
-  destroyed() {
-    window.removeEventListener("resize", this.handleResize)
-  },
-  methods: {
-    handleResize() {
-      this.windowInnerWidth = window.innerWidth
-    },
-  },
 })
 </script>
diff --git a/pages/documentation.vue b/pages/documentation.vue
index 7bc44e0bf..266a6efa3 100644
--- a/pages/documentation.vue
+++ b/pages/documentation.vue
@@ -1,5 +1,9 @@
 <template>
-  <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
+  <Splitpanes
+    class="smart-splitter"
+    :dbl-click-splitter="false"
+    :horizontal="!(windowInnerWidth.x.value >= 768)"
+  >
     <Pane class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
         <Pane class="hide-scrollbar !overflow-auto">
@@ -183,11 +187,13 @@ 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() {
     return {
+      windowInnerWidth: useWindowSize(),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
       currentUser: useReadonlyStream(currentUser$, null),
     }
diff --git a/pages/graphql.vue b/pages/graphql.vue
index a7a09e69c..449bc91a2 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -1,6 +1,10 @@
 <template>
   <div>
-    <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
+    <Splitpanes
+      class="smart-splitter"
+      :dbl-click-splitter="false"
+      :horizontal="!(windowInnerWidth.x.value >= 768)"
+    >
       <Pane class="hide-scrollbar !overflow-auto">
         <Splitpanes
           class="smart-splitter"
@@ -36,6 +40,7 @@ import "splitpanes/dist/splitpanes.css"
 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 },
@@ -58,6 +63,7 @@ export default defineComponent({
     })
 
     return {
+      windowInnerWidth: useWindowSize(),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
       gqlConn,
     }
diff --git a/pages/index.vue b/pages/index.vue
index 42ceaf1fa..147b286a2 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,9 @@
 <template>
-  <Splitpanes class="smart-splitter" :dbl-click-splitter="false" vertical>
+  <Splitpanes
+    class="smart-splitter"
+    :dbl-click-splitter="false"
+    :horizontal="!(windowInnerWidth.x.value >= 768)"
+  >
     <Pane class="hide-scrollbar !overflow-auto">
       <Splitpanes class="smart-splitter" :dbl-click-splitter="false" horizontal>
         <Pane class="hide-scrollbar !overflow-auto">
@@ -117,6 +121,7 @@ import { onLoggedIn } from "~/helpers/fb/auth"
 import { HoppRESTRequest } from "~/helpers/types/HoppRESTRequest"
 import { oauthRedirect } from "~/helpers/oauth"
 import { HoppRESTAuthOAuth2 } from "~/helpers/types/HoppRESTAuth"
+import useWindowSize from "~/helpers/utils/useWindowSize"
 
 function bindRequestToURLParams() {
   const {
@@ -240,6 +245,7 @@ export default defineComponent({
     bindRequestToURLParams()
 
     return {
+      windowInnerWidth: useWindowSize(),
       newActiveParamsCount$: useReadonlyStream(
         restActiveParamsCount$.pipe(
           map((e) => {
@@ -259,9 +265,6 @@ export default defineComponent({
         null
       ),
       RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
-      PROXY_ENABLED: useSetting("PROXY_ENABLED"),
-      URL_EXCLUDES: useSetting("URL_EXCLUDES"),
-      EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
       confirmSync,
       syncRequest,
       oAuthURL,