feat: better pane resize

packages/nc-gui/components/extensions/Pane.vue

@@ -2,7 +2,8 @@
 import { Pane } from 'splitpanes'
 import 'splitpanes/dist/splitpanes.css'
 
-const { extensionList, isPanelExpanded, isDetailsVisible, detailsExtensionId, detailsFrom, isMarketVisible } = useExtensions()
+const { extensionList, isPanelExpanded, isDetailsVisible, detailsExtensionId, detailsFrom, isMarketVisible, extensionPanelSize } =
+  useExtensions()
 
 const toggleMarket = () => {
   isMarketVisible.value = !isMarketVisible.value
@@ -10,7 +11,7 @@ const toggleMarket = () => {
 </script>
 
 <template>
-  <Pane :size="isPanelExpanded ? '40' : '0'" class="flex flex-col bg-orange-50">
+  <Pane v-if="isPanelExpanded" :size="extensionPanelSize" class="flex flex-col bg-orange-50">
     <div class="flex items-center pl-3 pt-3 font-weight-800 text-orange-500">Extensions</div>
     <template v-if="extensionList.length === 0">
       <div class="flex items-center flex-col gap-2 w-full nc-scrollbar-md">

packages/nc-gui/components/smartsheet/Topbar.vue

@@ -14,7 +14,7 @@ const { isMobileMode } = storeToRefs(useConfigStore())
 
 const { appInfo } = useGlobal()
 
-const { toggleExtensionPanel, isPanelExpanded } = useExtensions()
+const { toggleExtensionPanel, isPanelExpanded, extensionsEgg, onEggClick } = useExtensions()
 
 const isSharedBase = computed(() => route.value.params.typeOrId === 'base')
 </script>
@@ -39,6 +39,7 @@ const isSharedBase = computed(() => route.value.params.typeOrId === 'base')
       <GeneralApiLoader v-if="!isMobileMode" />
 
       <div
+        v-if="extensionsEgg"
         class="flex items-center px-2 py-1 gap-2 border-1 rounded-lg h-8 xs:(h-10 ml-0) ml-1 border-gray-200 cursor-pointer font-weight-600"
         :class="{ 'bg-orange-50': isPanelExpanded, 'text-orange-500': isPanelExpanded }"
         @click="toggleExtensionPanel"
@@ -46,6 +47,7 @@ const isSharedBase = computed(() => route.value.params.typeOrId === 'base')
         <GeneralIcon icon="puzzle" :class="{ 'border-l-1 border-white': isPanelExpanded }" />
         Extensions
       </div>
+      <div v-else class="w-[15px] h-[15px] cursor-pointer" @dblclick="onEggClick" />
 
       <LazyGeneralShareProject
         v-if="(isForm || isGrid || isKanban || isGallery || isMap || isCalendar) && !isPublic && !isMobileMode"

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

@@ -167,13 +167,22 @@ const onDrop = async (event: DragEvent) => {
 watch([activeViewTitleOrId, activeTableId], () => {
   handleSidebarOpenOnMobileForNonViews()
 })
+
+const { extensionPanelSize } = useExtensions()
+
+const onResize = (sizes: { min: number; max: number; size: number }[]) => {
+  if (sizes.length === 2) {
+    if (!sizes[1].size) return
+    extensionPanelSize.value = sizes[1].size
+  }
+}
 </script>
 
 <template>
   <div class="nc-container flex flex-col h-full" @drop="onDrop" @dragover.prevent>
     <LazySmartsheetTopbar />
     <div style="height: calc(100% - var(--topbar-height))">
-      <Splitpanes v-if="openedViewsTab === 'view'" class="nc-extensions-content-resizable-wrapper">
+      <Splitpanes v-if="openedViewsTab === 'view'" class="nc-extensions-content-resizable-wrapper" @resized="onResize">
         <Pane class="flex flex-col h-full flex-1 min-w-0" size="60">
           <LazySmartsheetToolbar v-if="!isForm" />
           <div class="flex flex-row w-full" :style="{ height: isForm ? '100%' : 'calc(100% - var(--topbar-height))' }">

packages/nc-gui/composables/useExtensions.ts

@@ -45,6 +45,8 @@ export const useExtensions = createSharedComposable(() => {
 
   const availableExtensions = ref<ExtensionManifest[]>([])
 
+  const extensionPanelSize = ref(40)
+
   const activeBaseExtensions = computed(() => {
     if (!base.value || !base.value.id) {
       return null
@@ -185,7 +187,7 @@ export const useExtensions = createSharedComposable(() => {
     } else {
       baseExtensions.value[baseId] = {
         extensions: extensions || [],
-        expanded: true,
+        expanded: false,
       }
     }
   }
@@ -355,6 +357,18 @@ export const useExtensions = createSharedComposable(() => {
   // Extension market modal
   const isMarketVisible = ref(false)
 
+  // Egg
+  const extensionsEgg = ref(false)
+
+  const extensionsEggCounter = ref(0)
+
+  const onEggClick = () => {
+    extensionsEggCounter.value++
+    if (extensionsEggCounter.value >= 2) {
+      extensionsEgg.value = true
+    }
+  }
+
   return {
     extensionsLoaded,
     availableExtensions,
@@ -373,5 +387,8 @@ export const useExtensions = createSharedComposable(() => {
     detailsFrom,
     showExtensionDetails,
     isMarketVisible,
+    onEggClick,
+    extensionsEgg,
+    extensionPanelSize,
   }
 })