refactor(nc-gui): simplify useSidebar and update comments

packages/nc-gui/components/tabs/Smartsheet.vue

@@ -11,9 +11,9 @@ import {
   ReloadViewDataHookInj,
   ReloadViewMetaHookInj,
   computed,
+  createEventHook,
   inject,
   provide,
-  provideSidebar,
   useMetas,
   useProvideSmartsheetStore,
   watch,
@@ -35,14 +35,14 @@ const fields = ref<ColumnType[]>([])
 provide(TabMetaInj, ref(activeTab))
 const meta = computed<TableType>(() => metas.value?.[activeTab?.id as string])
 
-const reloadEventHook = createEventHook<void>()
+const reloadEventHook = createEventHook()
 const reloadViewMetaEventHook = createEventHook<void>()
 const openNewRecordFormHook = createEventHook<void>()
 
 const { isGallery, isGrid, isForm, isLocked } = useProvideSmartsheetStore(activeView, meta)
 
 // provide the sidebar injection state
-provideSidebar('nc-right-sidebar', { useStorage: true, isOpen: true })
+useSidebar('nc-right-sidebar', { useStorage: true, isOpen: true })
 
 // todo: move to store
 provide(MetaInj, meta)

packages/nc-gui/composables/useSidebar/index.ts

@@ -1,5 +1,5 @@
 import { useStorage } from '@vueuse/core'
-import { MemStorage, onScopeDispose, watch } from '#imports'
+import { MemStorage, onScopeDispose, ref, syncRef, toRefs, watch } from '#imports'
 
 interface UseSidebarProps {
   hasSidebar?: boolean
@@ -10,12 +10,8 @@ interface UseSidebarProps {
 /**
  * States for sidebars
  *
- * Use `provideSidebar` to provide the state and save to memory or local storage
- * Use `useSidebar` to use the state
- *
- * If `provideSidebar` is not called explicitly, `useSidebar` will trigger the provider if no state can be found
- *
  * Requires an id to work, id should correspond to the sidebar state you want to create or fetch
+ * If `useSidebar` was not called before it will create a new state if no state can be found for the specified id
  */
 const sidebarStorage = new MemStorage()
 
@@ -61,40 +57,25 @@ const createSidebar = (id: string, props: UseSidebarProps = {}) => {
   }
 }
 
-export const provideSidebar = (id: string, props: UseSidebarProps = {}) => {
-  if (!id) throw new Error('provideSidebar requires an id')
-
-  onScopeDispose(() => {
-    sidebarStorage.remove(id)
-  })
+export function useSidebar(id: string, props: UseSidebarProps = {}) {
+  if (!id) throw new Error('useSidebar requires an id')
 
   if (!sidebarStorage.has(id)) {
     const sidebar = createSidebar(id, props)
 
     sidebarStorage.set(id, sidebar)
 
-    return sidebar
-  } else {
-    const sidebar = sidebarStorage.get(id)
-
-    if (props.isOpen !== undefined) sidebar.isOpen.value = props.isOpen
-    if (props.hasSidebar !== undefined) sidebar.hasSidebar.value = props.hasSidebar
+    onScopeDispose(() => {
+      sidebarStorage.remove(id)
+    })
 
     return sidebar
-  }
-}
-
-export function useSidebar(id: string, props: UseSidebarProps = {}) {
-  if (!id) throw new Error('useSidebar requires an id')
-
-  if (sidebarStorage.has(id)) {
+  } else {
     const sidebar = sidebarStorage.get(id)
 
     if (props.isOpen !== undefined) sidebar.isOpen.value = props.isOpen
     if (props.hasSidebar !== undefined) sidebar.hasSidebar.value = props.hasSidebar
 
     return sidebar
-  } else {
-    return provideSidebar(id, props)
   }
 }

packages/nc-gui/layouts/default.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
 import { useTitle } from '@vueuse/core'
-import { provideSidebar, useI18n, useRoute } from '#imports'
+import { useI18n, useRoute, useSidebar } from '#imports'
 
 const route = useRoute()
 
 const { te, t } = useI18n()
 
-const { hasSidebar } = provideSidebar('nc-left-sidebar')
+const { hasSidebar } = useSidebar('nc-left-sidebar')
 
 useTitle(route.meta?.title && te(route.meta.title) ? `${t(route.meta.title)} | NocoDB` : 'NocoDB')
 </script>