From 95a2696f18954875381c532c359ecb192757fb72 Mon Sep 17 00:00:00 2001
From: amandesai01 <amandesai01@gmail.com>
Date: Wed, 4 Dec 2024 06:45:57 +0000
Subject: [PATCH 1/3] feat(ui): persist extension sidebar state per base

---
 packages/nc-gui/composables/useExtensions.ts | 50 +++++++++++++++-----
 1 file changed, 39 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui/composables/useExtensions.ts b/packages/nc-gui/composables/useExtensions.ts
index f5fef6a360..626a30c95e 100644
--- a/packages/nc-gui/composables/useExtensions.ts
+++ b/packages/nc-gui/composables/useExtensions.ts
@@ -1,4 +1,5 @@
 import { ExtensionsEvents } from '#imports'
+import { useStorage } from '@vueuse/core'
 
 const extensionsState = createGlobalState(() => {
   const baseExtensions = ref<Record<string, any>>({})
@@ -6,6 +7,14 @@ const extensionsState = createGlobalState(() => {
   return { baseExtensions }
 })
 
+interface ExtensionPanelState {
+  width: number
+  isOpen: boolean
+}
+const extensionsPanelState = createGlobalState(() =>
+  useStorage<Record<string, ExtensionPanelState>>('nc-extensions-global-state', {}),
+)
+
 export interface ExtensionManifest {
   id: string
   title: string
@@ -76,8 +85,6 @@ export const useExtensions = createSharedComposable(() => {
   // Object to store description content for each extension
   const descriptionContent = ref<Record<string, string>>({})
 
-  const extensionPanelSize = ref(40)
-
   const activeBaseExtensions = computed(() => {
     if (!base.value || !base.value.id) {
       return null
@@ -85,9 +92,36 @@ export const useExtensions = createSharedComposable(() => {
     return baseExtensions.value[base.value.id]
   })
 
-  const isPanelExpanded = computed(() => {
-    return activeBaseExtensions.value ? activeBaseExtensions.value.expanded : false
-  })
+  const panelState = extensionsPanelState()
+
+  const extensionPanelSize = ref(40)
+  const isPanelExpanded = ref(false)
+
+  const savePanelState = () => {
+    panelState.value = {
+      ...panelState.value,
+      [base.value.id!]: {
+        width: extensionPanelSize.value,
+        isOpen: isPanelExpanded.value,
+      },
+    }
+  }
+
+  watch(
+    [base, activeBaseExtensions],
+    () => {
+      extensionPanelSize.value = +panelState.value[base.value.id!]?.width || 40
+      isPanelExpanded.value = panelState.value[base.value.id!]?.isOpen || false
+      savePanelState()
+    },
+    { immediate: true },
+  )
+
+  watchDebounced([extensionPanelSize, isPanelExpanded], savePanelState, { debounce: 500, maxWait: 1000 })
+
+  const toggleExtensionPanel = () => {
+    isPanelExpanded.value = !isPanelExpanded.value
+  }
 
   const extensionList = computed<ExtensionType[]>(() => {
     return (activeBaseExtensions.value ? activeBaseExtensions.value.extensions : [])
@@ -97,12 +131,6 @@ export const useExtensions = createSharedComposable(() => {
       })
   })
 
-  const toggleExtensionPanel = () => {
-    if (activeBaseExtensions.value) {
-      activeBaseExtensions.value.expanded = !activeBaseExtensions.value.expanded
-    }
-  }
-
   const addExtension = async (extension: any) => {
     if (!base.value || !base.value.id || !baseExtensions.value[base.value.id]) {
       return

From 09528e71a9949c10a89cd983881662773a8fb7b8 Mon Sep 17 00:00:00 2001
From: amandesai01 <amandesai01@gmail.com>
Date: Wed, 4 Dec 2024 06:46:02 +0000
Subject: [PATCH 2/3] fix(splitpanes): patch to fix navigation error

---
 packages/nc-gui/.patches/splitpanes@3.1.5.patch | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 packages/nc-gui/.patches/splitpanes@3.1.5.patch

diff --git a/packages/nc-gui/.patches/splitpanes@3.1.5.patch b/packages/nc-gui/.patches/splitpanes@3.1.5.patch
new file mode 100644
index 0000000000..318c0a11ac
--- /dev/null
+++ b/packages/nc-gui/.patches/splitpanes@3.1.5.patch
@@ -0,0 +1,15 @@
+diff --git a/dist/splitpanes.es.js b/dist/splitpanes.es.js
+index 6a8e64363e592840123438b1a5959a580440b325..0b2ddee308cfbc48bef9351286b218d8cc1ace7b 100644
+--- a/dist/splitpanes.es.js
++++ b/dist/splitpanes.es.js
+@@ -160,7 +160,9 @@ const M = {
+     },
+     requestUpdate({ target: e, ...i }) {
+       const s = this.indexedPanes[e._.uid];
+-      Object.entries(i).forEach(([n, t]) => s[n] = t);
++      if (s) {
++        Object.entries(i).forEach(([n, t]) => s[n] = t);
++      }
+     },
+     onPaneAdd(e) {
+       let i = -1;

From ab8f15c2025a9b782ae2dba3b185b8c84c4f9b4e Mon Sep 17 00:00:00 2001
From: amandesai01 <amandesai01@gmail.com>
Date: Wed, 4 Dec 2024 06:46:02 +0000
Subject: [PATCH 3/3] chore: don't save on base change

---
 packages/nc-gui/composables/useExtensions.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/composables/useExtensions.ts b/packages/nc-gui/composables/useExtensions.ts
index 626a30c95e..5bff28067e 100644
--- a/packages/nc-gui/composables/useExtensions.ts
+++ b/packages/nc-gui/composables/useExtensions.ts
@@ -108,15 +108,15 @@ export const useExtensions = createSharedComposable(() => {
   }
 
   watch(
-    [base, activeBaseExtensions],
+    base,
     () => {
       extensionPanelSize.value = +panelState.value[base.value.id!]?.width || 40
       isPanelExpanded.value = panelState.value[base.value.id!]?.isOpen || false
-      savePanelState()
     },
     { immediate: true },
   )
 
+  // Debounce since width is updated continuously when user drags.
   watchDebounced([extensionPanelSize, isPanelExpanded], savePanelState, { debounce: 500, maxWait: 1000 })
 
   const toggleExtensionPanel = () => {