refactor(gui-v2): make view list scrollable

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/smartsheet-toolbar/LockType.vue

@@ -31,7 +31,7 @@ const selectedView = inject(ActiveViewInj)
 </script>
 
 <template>
-  <div class="nc-locked-menu-item"  @click="emit('select', type)">
+  <div class="nc-locked-menu-item" @click="emit('select', type)">
     <div :class="{ 'show-tick': !hideTick }">
       <template v-if="!hideTick">
         <MdiCheck v-if="selectedView?.lock_type === type" />
@@ -60,5 +60,4 @@ const selectedView = inject(ActiveViewInj)
     @apply text-xs text-gray-500 font-weight-light;
   }
 }
-
 </style>

packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue

@@ -153,6 +153,7 @@ async function changeLockType(type: LockType) {
             >
               <template #title>
                 <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0">
+
                   <SmartsheetToolbarLockType hide-tick :type="selectedView?.lock_type || LockType.Collaborative" />
 
                   <MaterialSymbolsChevronRightRounded
@@ -279,6 +280,7 @@ async function changeLockType(type: LockType) {
     <a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="max(900px,60vw)" :footer="null">
       <SmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
     </a-modal>
+
   </div>
 </template>
 

packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue

@@ -197,7 +197,7 @@ function onDeleted() {
 
 <style lang="scss">
 .nc-views-menu {
-  @apply flex-1 overflow-y-scroll scrollbar-thin-dull;
+  @apply flex-1 min-h-[100px] overflow-y-scroll scrollbar-thin-dull;
 
   .ghost,
   .ghost > * {

packages/nc-gui-v2/components/smartsheet/sidebar/index.vue

@@ -104,36 +104,10 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
       class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)]"
       :class="{ 'flex items-center py-3 px-3 justify-between border-b-1': !isForm }"
     />
-
-    <!--
-    <Toolbar v-else class="py-3 px-2 max-w-[50px] flex !flex-col-reverse gap-4 items-center mt-[-1px]">
-      <template #start>
-        <a-tooltip v-if="isUIAllowed('virtualViewsCreateOrEdit')" placement="left">
-          <template #title> {{ $t('objects.webhooks') }}</template>
-
-          <div class="nc-sidebar-right-item hover:after:bg-gray-300 nc-webhook-icon">
-            <MdiHook @click.stop />
-          </div>
-        </a-tooltip>
-
-        <div v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="dot" />
-
-        <a-tooltip placement="left">
-          <template #title> Get API Snippet</template>
-
-          <div class="nc-sidebar-right-item group hover:after:bg-yellow-500">
-            <MdiXml class="group-hover:(!text-white)" @click.stop />
-          </div>
-        </a-tooltip>
-
-        <div v-if="!isForm" class="dot" />
-      </template>
-    </Toolbar>
--->
-    <div v-if="isOpen" class="flex-1 flex flex-col">
+    <div v-if="isOpen" class="flex-1 flex flex-col min-h-0">
       <MenuTop class="flex-1" @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />
 
-      <a-divider v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="my-2" />
+      <a-divider v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="!my-3" />
 
       <MenuBottom @open-modal="openModal" />
     </div>