refactor(gui-v2): move toolbar to tab content level

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

packages/nc-gui-v2/components.d.ts

@@ -201,6 +201,7 @@ declare module '@vue/runtime-core' {
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
     MdiTwitter: typeof import('~icons/mdi/twitter')['default']
+    MdiUpload: typeof import('~icons/mdi/upload')['default']
     MdiUploadOutline: typeof import('~icons/mdi/upload-outline')['default']
     MdiViewListOutline: typeof import('~icons/mdi/view-list-outline')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']

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

@@ -132,7 +132,7 @@ async function changeLockType(type: LockType) {
   <div>
     <a-dropdown>
       <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
-        <div class="flex gap-2 align-center">
+        <div class="flex gap-2 items-center">
           <component
             :is="viewIcons[selectedView?.type].icon"
             class="nc-view-icon group-hover:hidden"
@@ -311,6 +311,6 @@ async function changeLockType(type: LockType) {
 
 <style scoped>
 .nc-locked-menu-item > div {
-  @apply grid grid-cols-[30px,auto] gap-2  p-2 align-center;
+  @apply grid grid-cols-[30px,auto] gap-2  p-2 items-center;
 }
 </style>

packages/nc-gui-v2/components/smartsheet/Toolbar.vue

@@ -36,7 +36,7 @@ const {isOpen} =useSidebar()
 
     <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2 ml-2" />
 
-    <ToggleDrawer v-if="!isOpen"/>
+    <ToggleDrawer class="mr-2"/>
 
 
   </div>

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

@@ -99,6 +99,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
     class="relative shadow-md h-full"
     theme="light"
   >
+    <!--
     <Toolbar
       v-if="isOpen"
       class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)]"
@@ -128,7 +129,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
         <div v-if="!isForm" class="dot" />
       </template>
     </Toolbar>
-
+-->
     <div v-if="isOpen" class="flex-1 flex flex-col">
       <MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />
 

packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue

@@ -4,7 +4,7 @@ const { isOpen, toggle } = useSidebar({ storageKey: 'nc-right-sidebar' })
 </script>
 
 <template>
-  <a-tooltip :placement="isOpen ? 'bottomRight' : 'left'" :mouse-enter-delay="0.8">
+<!--  <a-tooltip :placement="isOpen ? 'bottomRight' : 'left'" :mouse-enter-delay="0.8">
     <template #title> Toggle sidebar</template>
 
     <div class="nc-sidebar-right-item hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row">
@@ -14,5 +14,11 @@ const { isOpen, toggle } = useSidebar({ storageKey: 'nc-right-sidebar' })
         @click="toggle(!isOpen)"
       />
     </div>
-  </a-tooltip>
+  </a-tooltip>-->
+
+  <a-button @click="toggle(!isOpen)" size="small">
+  <div class="flex items-center gap-2">  <MdiMenu/> Views
+  </div>
+  </a-button>
+
 </template>

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

@@ -83,11 +83,11 @@ watch(isLocked, (nextValue) => (treeViewIsLockedInj.value = nextValue), { immedi
 
             <SmartsheetForm v-else-if="isForm" />
           </div>
+          <SmartsheetSidebar class="nc-right-sidebar" v-if="meta" />
         </div>
       </template>
     </div>
 
-    <SmartsheetSidebar class="nc-right-sidebar" v-if="meta" />
   </div>
 </template>