From 2e1ca0cbb0ee77d459d22e2abd0b6a3fce669ece Mon Sep 17 00:00:00 2001
From: Sagar <sagar.dash290@gmail.com>
Date: Wed, 10 Aug 2022 05:41:03 +0600
Subject: [PATCH] feat: remember pane sizes (#2556)

Co-authored-by: Sagar <sagar@Sagars-MacBook-Pro.local>
---
 .../components/app/PaneLayout.vue             | 74 +++++++++++++++++--
 .../hoppscotch-app/pages/documentation.vue    |  2 +-
 packages/hoppscotch-app/pages/graphql.vue     |  2 +-
 packages/hoppscotch-app/pages/index.vue       |  2 +-
 .../hoppscotch-app/pages/realtime/mqtt.vue    |  2 +-
 .../pages/realtime/socketio.vue               |  2 +-
 .../hoppscotch-app/pages/realtime/sse.vue     |  2 +-
 .../pages/realtime/websocket.vue              |  2 +-
 8 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/packages/hoppscotch-app/components/app/PaneLayout.vue b/packages/hoppscotch-app/components/app/PaneLayout.vue
index e5b0f7079..7064db7f3 100644
--- a/packages/hoppscotch-app/components/app/PaneLayout.vue
+++ b/packages/hoppscotch-app/components/app/PaneLayout.vue
@@ -6,21 +6,26 @@
       '!flex-row-reverse': SIDEBAR_ON_LEFT && mdAndLarger,
     }"
     :horizontal="!mdAndLarger"
+    @resize="setPaneEvent($event, 'vertical')"
   >
     <Pane
-      size="75"
+      :size="PANE_MAIN_SIZE"
       min-size="65"
       class="hide-scrollbar !overflow-auto flex flex-col"
     >
-      <Splitpanes class="smart-splitter" :horizontal="COLUMN_LAYOUT">
+      <Splitpanes
+        class="smart-splitter"
+        :horizontal="COLUMN_LAYOUT"
+        @resize="setPaneEvent($event, 'horizontal')"
+      >
         <Pane
-          :size="COLUMN_LAYOUT ? 45 : 50"
+          :size="PANE_MAIN_TOP_SIZE"
           class="hide-scrollbar !overflow-auto flex flex-col"
         >
           <slot name="primary" />
         </Pane>
         <Pane
-          :size="COLUMN_LAYOUT ? 65 : 50"
+          :size="PANE_MAIN_BOTTOM_SIZE"
           class="flex flex-col hide-scrollbar !overflow-auto"
         >
           <slot name="secondary" />
@@ -29,7 +34,7 @@
     </Pane>
     <Pane
       v-if="SIDEBAR && hasSidebar"
-      size="25"
+      :size="PANE_SIDEBAR_SIZE"
       min-size="20"
       class="hide-scrollbar !overflow-auto flex flex-col"
     >
@@ -42,8 +47,9 @@
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
-import { computed, useSlots } from "@nuxtjs/composition-api"
+import { computed, useSlots, ref } from "@nuxtjs/composition-api"
 import { useSetting } from "~/newstore/settings"
+import { setLocalConfig, getLocalConfig } from "~/newstore/localpersistence"
 
 const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
 
@@ -57,4 +63,60 @@ const SIDEBAR = useSetting("SIDEBAR")
 const slots = useSlots()
 
 const hasSidebar = computed(() => !!slots.sidebar)
+
+const props = defineProps({
+  layoutId: {
+    type: String,
+    default: null,
+  },
+})
+
+type PaneEvent = {
+  max: number
+  min: number
+  size: number
+}
+
+const PANE_SIDEBAR_SIZE = ref(25)
+const PANE_MAIN_SIZE = ref(75)
+const PANE_MAIN_TOP_SIZE = ref(45)
+const PANE_MAIN_BOTTOM_SIZE = ref(65)
+
+if (!COLUMN_LAYOUT.value) {
+  PANE_MAIN_TOP_SIZE.value = 50
+  PANE_MAIN_BOTTOM_SIZE.value = 50
+}
+
+function setPaneEvent(event: PaneEvent[], type: "vertical" | "horizontal") {
+  if (!props.layoutId) return
+  const storageKey = `${props.layoutId}-pane-config-${type}`
+  setLocalConfig(storageKey, JSON.stringify(event))
+}
+
+function populatePaneEvent() {
+  if (!props.layoutId) return
+
+  const verticalPaneData = getPaneData("vertical")
+  if (verticalPaneData) {
+    const [mainPane, sidebarPane] = verticalPaneData
+    PANE_MAIN_SIZE.value = mainPane?.size
+    PANE_SIDEBAR_SIZE.value = sidebarPane?.size
+  }
+
+  const horizontalPaneData = getPaneData("horizontal")
+  if (horizontalPaneData) {
+    const [mainTopPane, mainBottomPane] = horizontalPaneData
+    PANE_MAIN_TOP_SIZE.value = mainTopPane?.size
+    PANE_MAIN_BOTTOM_SIZE.value = mainBottomPane?.size
+  }
+}
+
+function getPaneData(type: "vertical" | "horizontal"): PaneEvent[] | null {
+  const storageKey = `${props.layoutId}-pane-config-${type}`
+  const paneEvent = getLocalConfig(storageKey)
+  if (!paneEvent) return null
+  return JSON.parse(paneEvent)
+}
+
+populatePaneEvent()
 </script>
diff --git a/packages/hoppscotch-app/pages/documentation.vue b/packages/hoppscotch-app/pages/documentation.vue
index 8143c3bb5..a5b807a13 100644
--- a/packages/hoppscotch-app/pages/documentation.vue
+++ b/packages/hoppscotch-app/pages/documentation.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppPaneLayout>
+  <AppPaneLayout layout-id="docs">
     <template #primary>
       <div class="flex items-start justify-between p-4">
         <label>
diff --git a/packages/hoppscotch-app/pages/graphql.vue b/packages/hoppscotch-app/pages/graphql.vue
index 779fd583d..0f6de738b 100644
--- a/packages/hoppscotch-app/pages/graphql.vue
+++ b/packages/hoppscotch-app/pages/graphql.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppPaneLayout>
+  <AppPaneLayout layout-id="graphql">
     <template #primary>
       <GraphqlRequest :conn="gqlConn" />
       <GraphqlRequestOptions :conn="gqlConn" />
diff --git a/packages/hoppscotch-app/pages/index.vue b/packages/hoppscotch-app/pages/index.vue
index 27e46cd15..a5a9bdd97 100644
--- a/packages/hoppscotch-app/pages/index.vue
+++ b/packages/hoppscotch-app/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppPaneLayout>
+  <AppPaneLayout layout-id="http">
     <template #primary>
       <HttpRequest />
       <HttpRequestOptions />
diff --git a/packages/hoppscotch-app/pages/realtime/mqtt.vue b/packages/hoppscotch-app/pages/realtime/mqtt.vue
index dd4d63882..ea9900b63 100644
--- a/packages/hoppscotch-app/pages/realtime/mqtt.vue
+++ b/packages/hoppscotch-app/pages/realtime/mqtt.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppPaneLayout>
+  <AppPaneLayout layout-id="mqtt">
     <template #primary>
       <div
         class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
diff --git a/packages/hoppscotch-app/pages/realtime/socketio.vue b/packages/hoppscotch-app/pages/realtime/socketio.vue
index cb4a05e1f..c1917c770 100644
--- a/packages/hoppscotch-app/pages/realtime/socketio.vue
+++ b/packages/hoppscotch-app/pages/realtime/socketio.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppPaneLayout>
+  <AppPaneLayout layout-id="socketio">
     <template #primary>
       <div
         class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
diff --git a/packages/hoppscotch-app/pages/realtime/sse.vue b/packages/hoppscotch-app/pages/realtime/sse.vue
index d9b4a7136..6170caa31 100644
--- a/packages/hoppscotch-app/pages/realtime/sse.vue
+++ b/packages/hoppscotch-app/pages/realtime/sse.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppPaneLayout>
+  <AppPaneLayout layout-id="sse">
     <template #primary>
       <div
         class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"
diff --git a/packages/hoppscotch-app/pages/realtime/websocket.vue b/packages/hoppscotch-app/pages/realtime/websocket.vue
index 750c2b7cc..a88a69df2 100644
--- a/packages/hoppscotch-app/pages/realtime/websocket.vue
+++ b/packages/hoppscotch-app/pages/realtime/websocket.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppPaneLayout>
+  <AppPaneLayout layout-id="websocket">
     <template #primary>
       <div
         class="sticky top-0 z-10 flex flex-shrink-0 p-4 overflow-x-auto space-x-2 bg-primary hide-scrollbar"