feat: mobile responsive right sidbars + composable window size

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"),
     }
   },

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"),
     }
   },

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"),
     }
   },

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

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>

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),
     }

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,
     }

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,