feat: remember pane sizes (#2556)

Co-authored-by: Sagar <sagar@Sagars-MacBook-Pro.local>

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>

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>

packages/hoppscotch-app/pages/graphql.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppPaneLayout>
+  <AppPaneLayout layout-id="graphql">
     <template #primary>
       <GraphqlRequest :conn="gqlConn" />
       <GraphqlRequestOptions :conn="gqlConn" />

packages/hoppscotch-app/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppPaneLayout>
+  <AppPaneLayout layout-id="http">
     <template #primary>
       <HttpRequest />
       <HttpRequestOptions />

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"

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"

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"

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"