Merge pull request #9949 from nocodb/nc-feat/persist-extension-sidebar-state

feat(ui): persist extension sidebar state per base

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;

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,
+    () => {
+      extensionPanelSize.value = +panelState.value[base.value.id!]?.width || 40
+      isPanelExpanded.value = panelState.value[base.value.id!]?.isOpen || false
+    },
+    { immediate: true },
+  )
+
+  // Debounce since width is updated continuously when user drags.
+  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