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] 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