From 7f849189d471b0b0635a8c2202ed2a59aa63db55 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 18 Aug 2022 19:29:29 +0530
Subject: [PATCH 01/11] refactor(gui-v2): new layout

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/assets/style-v2.scss       |   7 +-
 packages/nc-gui-v2/components.d.ts            |   3 +
 .../components/dashboard/TreeView.vue         | 128 ++++++++++--
 .../components/general/ShareBaseButton.vue    |   4 +-
 .../components/smartsheet/Toolbar.vue         |   2 +-
 .../components/smartsheet/sidebar/index.vue   |   6 +-
 .../sidebar/toolbar/ToggleDrawer.vue          |  18 ++
 .../smartsheet/sidebar/toolbar/index.vue      |   7 +
 .../nc-gui-v2/components/tabs/Smartsheet.vue  |   6 +-
 packages/nc-gui-v2/layouts/base.vue           |   2 +-
 .../pages/[projectType]/[projectId]/index.vue |  41 +++-
 .../[projectType]/[projectId]/index/index.vue | 183 ++++--------------
 12 files changed, 233 insertions(+), 174 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue

diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index 3bf9cc04bb..5484cc31da 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -3,6 +3,7 @@
 
 :root {
   --header-height: 50px;
+  --toolbar-height: 48px;
 }
 
 .ant-layout-header {
@@ -51,7 +52,7 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
 .nc-menu-item {
   @apply cursor-pointer text-xs flex items-center gap-2 px-4 py-3 relative after:(content-[''] absolute top-0 left-0 bottom-0 w-full h-full right-0 bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
 
-  &.disabled { 
+  &.disabled {
     @apply text-black text-opacity-25 bg-[#f5f5f5] cursor-not-allowed text-shadow-none box-shadow-none border-[#d9d9d9];
   }
 }
@@ -85,7 +86,7 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
   svg {
     @apply z-1 text-xl p-1 text-gray-500;
   }
-  
+
   .disabled {
     @apply cursor-not-allowed border-none;
   }
@@ -209,4 +210,4 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
   &:active::after {
     @apply ring ring-pink-500;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index c738bd809c..964f674e2e 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -97,6 +97,7 @@ declare module '@vue/runtime-core' {
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
+    MdiBackburger: typeof import('~icons/mdi/backburger')['default']
     MdiBugOutline: typeof import('~icons/mdi/bug-outline')['default']
     MdiCalculator: typeof import('~icons/mdi/calculator')['default']
     MdiCalendarMonth: typeof import('~icons/mdi/calendar-month')['default']
@@ -104,6 +105,7 @@ declare module '@vue/runtime-core' {
     MdiCellphoneMessage: typeof import('~icons/mdi/cellphone-message')['default']
     MdiChat: typeof import('~icons/mdi/chat')['default']
     MdiCheck: typeof import('~icons/mdi/check')['default']
+    MdiChevronDoubleLeft: typeof import('~icons/mdi/chevron-double-left')['default']
     MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     MdiClose: typeof import('~icons/mdi/close')['default']
     MdiCloseBox: typeof import('~icons/mdi/close-box')['default']
@@ -158,6 +160,7 @@ declare module '@vue/runtime-core' {
     MdiLogin: typeof import('~icons/mdi/login')['default']
     MdiLogout: typeof import('~icons/mdi/logout')['default']
     MdiMagnify: typeof import('~icons/mdi/magnify')['default']
+    MdiMenu: typeof import('~icons/mdi/menu')['default']
     MdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
     MdiMicrosoftTeams: typeof import('~icons/mdi/microsoft-teams')['default']
     MdiMinusCircleOutline: typeof import('~icons/mdi/minus-circle-outline')['default']
diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index c23e290851..c3ef99e034 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -4,12 +4,14 @@ import Sortable from 'sortablejs'
 import { Empty } from 'ant-design-vue'
 import { useNuxtApp } from '#app'
 import { computed, useProject, useTable, useTabs, useUIPermission, watchEffect } from '#imports'
+import DlgAirtableImport from '~/components/dlg/AirtableImport.vue'
+import DlgQuickImport from '~/components/dlg/QuickImport.vue'
+import DlgTableCreate from '~/components/dlg/TableCreate.vue'
 import { TabType } from '~/composables'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
 import MdiMenuIcon from '~icons/mdi/dots-vertical'
 import MdiDrag from '~icons/mdi/drag-vertical'
-import GithubStarButton from '~/components/dashboard/GithubStarButton.vue'
 
 const { addTab } = useTabs()
 
@@ -135,21 +137,45 @@ const addTableTab = (table: TableType) => {
 const activeTable = computed(() => {
   return [TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.title : null
 })
+
+function openQuickImportDialog(type: string) {
+  $e(`a:actions:import-${type}`)
+
+  const isOpen = ref(true)
+
+  const { close } = useDialog(DlgQuickImport, {
+    'modelValue': isOpen,
+    'importType': type,
+    'onUpdate:modelValue': closeDialog,
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+
+    close(1000)
+  }
+}
+
+function openAirtableImportDialog() {
+  $e('a:actions:import-airtable')
+
+  const isOpen = ref(true)
+
+  const { close } = useDialog(DlgAirtableImport, {
+    'modelValue': isOpen,
+    'onUpdate:modelValue': closeDialog,
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+
+    close(1000)
+  }
+}
 </script>
 
 <template>
   <div class="nc-treeview-container flex flex-col">
-    <div class="px-6 py-[8.5px] border-b-1 nc-filter-input">
-      <div class="flex items-center bg-gray-50 rounded relative">
-        <a-input
-          v-model:value="filterQuery"
-          class="nc-filter-input !bg-transparent"
-          :placeholder="$t('placeholder.searchProjectTree')"
-        />
-        <MdiSearch class="nc-filter-input-icon text-gray-400 mx-3 absolute right-[-4px] top-[7px]" />
-      </div>
-    </div>
-
     <a-dropdown :trigger="['contextmenu']">
       <div
         class="pt-2 pl-2 pb-2 flex-1 overflow-y-auto flex flex-column scrollbar-thin-dull"
@@ -168,6 +194,77 @@ const activeTable = computed(() => {
           </span>
         </div>
         <div style="direction: ltr" class="flex-1">
+          <div
+            class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
+            @click="tableCreateDlg = true"
+          >
+            <MdiPlus />
+            <span class="text-gray-500 group-hover:(text-primary/100) flex-1">{{ $t('tooltip.addTable') }}</span>
+            <a-dropdown :trigger="['click']" @click.stop>
+              <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100" />
+              <template #overlay>
+                <a-menu class="nc-add-project-menu !py-0 ml-6 rounded text-sm">
+                  <a-menu-item-group title="QUICK IMPORT FROM" class="!px-0 !mx-0">
+                    <a-menu-item
+                      v-if="isUIAllowed('airtableImport')"
+                      key="quick-import-airtable"
+                      @click="openAirtableImportDialog"
+                    >
+                      <div class="color-transition nc-project-menu-item group">
+                        <MdiTableLarge class="group-hover:text-pink-500" />
+                        <!-- TODO: i18n -->
+                        Airtable
+                      </div>
+                    </a-menu-item>
+
+                    <a-menu-item v-if="isUIAllowed('csvImport')" key="quick-import-csv" @click="openQuickImportDialog('csv')">
+                      <div class="color-transition nc-project-menu-item group">
+                        <MdiFileDocumentOutline class="group-hover:text-pink-500" />
+                        <!-- TODO: i18n -->
+                        CSV file
+                      </div>
+                    </a-menu-item>
+
+                    <a-menu-item v-if="isUIAllowed('jsonImport')" key="quick-import-json" @click="openQuickImportDialog('json')">
+                      <div class="color-transition nc-project-menu-item group">
+                        <MdiCodeJson class="group-hover:text-pink-500" />
+                        <!-- TODO: i18n -->
+                        JSON file
+                      </div>
+                    </a-menu-item>
+
+                    <a-menu-item
+                      v-if="isUIAllowed('excelImport')"
+                      key="quick-import-excel"
+                      @click="openQuickImportDialog('excel')"
+                    >
+                      <div class="color-transition nc-project-menu-item group">
+                        <MdiFileExcel class="group-hover:text-pink-500" />
+                        <!-- TODO: i18n -->
+                        Microsoft Excel
+                      </div>
+                    </a-menu-item>
+                  </a-menu-item-group>
+
+                  <a-menu-divider class="my-0" />
+
+                  <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
+                    <a
+                      v-t="['e:datasource:import-request']"
+                      href="https://github.com/nocodb/nocodb/issues/2052"
+                      target="_blank"
+                      class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
+                    >
+                      <MdiOpenInNew class="group-hover:text-pink-500" />
+                      <!-- TODO: i18n -->
+                      Request a data source you need?
+                    </a>
+                  </a-menu-item>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </div>
+
           <div v-if="tables.length" class="transition-height duration-200 overflow-hidden">
             <div :key="key" ref="menuRef" class="border-none sortable-list">
               <div
@@ -276,7 +373,12 @@ const activeTable = computed(() => {
     <a-divider class="mt-0 mb-2" />
 
     <div class="items-center flex justify-center mb-1">
-      <GithubStarButton />
+      <!--
+     Todo : move the component
+     <GithubStarButton />
+     -->
+
+      <GeneralShareBaseButton class="!mr-0" />
     </div>
 
     <DlgTableCreate v-if="tableCreateDlg" v-model="tableCreateDlg" />
diff --git a/packages/nc-gui-v2/components/general/ShareBaseButton.vue b/packages/nc-gui-v2/components/general/ShareBaseButton.vue
index b33d45f67c..1cb5531f04 100644
--- a/packages/nc-gui-v2/components/general/ShareBaseButton.vue
+++ b/packages/nc-gui-v2/components/general/ShareBaseButton.vue
@@ -9,7 +9,7 @@ const { isUIAllowed } = useUIPermission()
 </script>
 
 <template>
-  <div class="flex items-center mr-4">
+  <div class="flex items-center">
     <a-button
       v-if="
         isUIAllowed('newUser') &&
@@ -20,7 +20,7 @@ const { isUIAllowed } = useUIPermission()
       "
       size="middle"
       type="primary"
-      class="!bg-white !text-primary rounded"
+      class="rounded"
       @click="showUserModal = true"
     >
       <div class="flex items-center space-x-1">
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 96d0d002c5..7f7a7718e7 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -7,7 +7,7 @@ const isPublic = inject(IsPublicInj, ref(false))
 </script>
 
 <template>
-  <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[48px] px-2 border-b" style="z-index: 7">
+  <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[var(--toolbar-height)] px-2 border-b" style="z-index: 7">
     <SmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" class="ml-1" />
 
     <SmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" />
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index c26f60440e..9c2bcd1656 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -125,7 +125,11 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
       </Transition>
     </a-tooltip>
 
-    <Toolbar v-if="isOpen" :class="{ 'flex items-center py-3 px-3 justify-between border-b-1': !isForm }" />
+    <Toolbar
+      v-if="isOpen"
+      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>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
new file mode 100644
index 0000000000..6a8a66ac00
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+/** Sidebar visible */
+const { isOpen, toggle } = useSidebar({ storageKey: 'nc-right-sidebar' })
+</script>
+
+<template>
+  <a-tooltip :placement="isOpen ? 'bottomRight' : 'left'">
+    <template #title> Toggle sidebar </template>
+
+    <div class="nc-sidebar-right-item hover:after:bg-primary/75 group nc-sidebar-add-row">
+      <MdiChevronDoubleLeft
+        class="cursor-pointer group-hover:(!text-white) transform transition-transform"
+        :class="{ 'rotate-180': isOpen }"
+        @click="toggle(!isOpen)"
+      />
+    </div>
+  </a-tooltip>
+</template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
index 5418c57772..bcf68ba916 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
@@ -5,6 +5,7 @@ import Reload from './Reload.vue'
 import ExportCache from './ExportCache.vue'
 import DeleteCache from './DeleteCache.vue'
 import DebugMeta from './DebugMeta.vue'
+import ToggleDrawer from './ToggleDrawer.vue'
 import { IsFormInj } from '#imports'
 
 const { isUIAllowed } = useUIPermission()
@@ -14,6 +15,8 @@ const isForm = inject(IsFormInj)
 const debug = $ref(false)
 
 const clickCount = $ref(0)
+
+const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' })
 </script>
 
 <template>
@@ -53,6 +56,10 @@ const clickCount = $ref(0)
 
     <AddRow v-if="isUIAllowed('xcDatatableEditable')" @click.stop />
 
+    <div :class="{ 'w-[calc(100%_+_16px)] h-[1px] bg-gray-200 mt-1 -ml-1': !isOpen, 'dot': isOpen }" />
+
+    <ToggleDrawer />
+
     <slot name="end" />
   </div>
   <div v-else>
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index eb7da18558..555e70cdc8 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -84,11 +84,9 @@ watch(isLocked, (nextValue) => (treeViewIsLockedInj.value = nextValue), { immedi
             <SmartsheetForm v-else-if="isForm" />
           </div>
         </div>
-
-        <teleport to="#content">
-          <SmartsheetSidebar />
-        </teleport>
       </template>
     </div>
+
+    <SmartsheetSidebar />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index 8818aaba48..d86bde1fdf 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -23,7 +23,7 @@ const logout = () => {
     <a-layout class="!flex-col">
       <Transition name="layout">
         <a-layout-header
-          v-if="!route.meta.public && signedIn"
+          v-if="!route.meta.public && signedIn && !route.meta.hideHeader"
           class="flex !bg-primary items-center text-white pl-4 pr-5 shadow-lg"
         >
           <div
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 03f682306c..81a39abe61 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -97,6 +97,10 @@ const copyAuthToken = async () => {
     message.error(e.message)
   }
 }
+
+definePageMeta({
+  hideHeader: true,
+})
 </script>
 
 <template>
@@ -107,7 +111,7 @@ const copyAuthToken = async () => {
         :collapsed="!isOpen"
         width="250"
         collapsed-width="50"
-        class="relative shadow-md h-full z-1"
+        class="relative shadow-md h-full z-1 nc-left-sidebar"
         :trigger="null"
         collapsible
         theme="light"
@@ -144,14 +148,20 @@ const copyAuthToken = async () => {
             </template>
           </div>
 
-          <a-dropdown v-else class="h-full" :trigger="['click']" placement="bottom">
+          <a-dropdown v-else class="h-full min-w-0 flex-1" :trigger="['click']" placement="bottom">
             <div
               :style="{ width: isOpen ? 'calc(100% - 40px) pr-2' : '100%' }"
               :class="[isOpen ? '' : 'justify-center']"
-              class="group cursor-pointer flex gap-4 items-center nc-project-menu overflow-hidden"
+              class="group cursor-pointer flex gap-1 items-center nc-project-menu overflow-hidden"
             >
               <template v-if="isOpen">
-                <div class="text-xl font-semibold truncate">{{ project.title }}</div>
+                <a-tooltip v-if="project.title?.length > 12" placement="bottom">
+                  <div class="text-lg font-semibold truncate">{{ project.title }}</div>
+                  <template #title>
+                    <div class="text-sm">{{ project.title }}</div>
+                  </template>
+                </a-tooltip>
+                <div v-else class="text-lg font-semibold truncate">{{ project.title }}</div>
 
                 <MdiChevronDown class="min-w-[28.5px] group-hover:text-pink-500 text-2xl" />
               </template>
@@ -246,6 +256,13 @@ const copyAuthToken = async () => {
               </a-menu>
             </template>
           </a-dropdown>
+          <div class="nc-sidebar-left-toggle-icon hover:after:bg-primary/75 group nc-sidebar-add-row flex align-center px-2">
+            <MdiBackburger
+              class="cursor-pointer transform transition-transform duration-500"
+              :class="{ 'rotate-180': !isOpen }"
+              @click="toggle(!isOpen)"
+            />
+          </div>
         </div>
 
         <a-tooltip :mouse-enter-delay="1" placement="right">
@@ -295,4 +312,20 @@ const copyAuthToken = async () => {
 :deep(.ant-dropdown-menu-item) {
   @apply !py-0 active:(ring ring-pink-500);
 }
+
+:global(#nc-sidebar-left .ant-layout-sider-collapsed) {
+  @apply !w-0 !max-w-0 !min-w-0 overflow-x-hidden;
+}
+
+.nc-left-sidebar {
+  .nc-sidebar-left-toggle-icon {
+    @apply opacity-0 transition-opactity duration-200 transition-color text-white/80 hover:text-white/100;
+    .nc-left-sidebar {
+      @apply !border-r-0;
+    }
+  }
+  &:hover .nc-sidebar-left-toggle-icon {
+    @apply opacity-100;
+  }
+}
 </style>
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index 3dad89b7f5..6c55159880 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -1,19 +1,14 @@
 <script setup lang="ts">
 import type { TabItem } from '~/composables'
-import { TabMetaInj, provide, ref, useDialog, useNuxtApp, useTabs, useUIPermission } from '#imports'
-import DlgTableCreate from '~/components/dlg/TableCreate.vue'
-import DlgAirtableImport from '~/components/dlg/AirtableImport.vue'
-import DlgQuickImport from '~/components/dlg/QuickImport.vue'
-import { TabType } from '~/composables'
+import { TabMetaInj, provide, useSidebar, useTabs } from '#imports'
+import { TabType, useGlobal } from '~/composables'
 import MdiAirTableIcon from '~icons/mdi/table-large'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiAccountGroup from '~icons/mdi/account-group'
 
-const { $e } = useNuxtApp()
-
 const { tabs, activeTabIndex, activeTab, closeTab } = useTabs()
 
-const { isUIAllowed } = useUIPermission()
+const { isLoading } = useGlobal()
 
 provide(TabMetaInj, activeTab)
 
@@ -28,63 +23,21 @@ const icon = (tab: TabItem) => {
   }
 }
 
-function openQuickImportDialog(type: string) {
-  $e(`a:actions:import-${type}`)
-
-  const isOpen = ref(true)
-
-  const { close } = useDialog(DlgQuickImport, {
-    'modelValue': isOpen,
-    'importType': type,
-    'onUpdate:modelValue': closeDialog,
-  })
-
-  function closeDialog() {
-    isOpen.value = false
-
-    close(1000)
-  }
-}
-
-function openTableCreateDialog() {
-  $e('a:actions:create-table')
-
-  const isOpen = ref(true)
-
-  const { close } = useDialog(DlgTableCreate, {
-    'modelValue': isOpen,
-    'onUpdate:modelValue': closeDialog,
-  })
-
-  function closeDialog() {
-    isOpen.value = false
-
-    close(1000)
-  }
-}
-
-function openAirtableImportDialog() {
-  $e('a:actions:import-airtable')
-
-  const isOpen = ref(true)
-
-  const { close } = useDialog(DlgAirtableImport, {
-    'modelValue': isOpen,
-    'onUpdate:modelValue': closeDialog,
-  })
-
-  function closeDialog() {
-    isOpen.value = false
-
-    close(1000)
-  }
-}
+const { isOpen, toggle } = useSidebar()
 </script>
 
 <template>
-  <div class="h-full w-full nc-container pt-[9px]">
+  <div class="h-full w-full nc-container">
     <div class="h-full w-full flex flex-col">
-      <div>
+      <div class="flex items-end !min-h-[50px] bg-primary/100">
+        <div v-if="!isOpen" class="nc-sidebar-left-toggle-icon hover:after:bg-primary/75 group nc-sidebar-add-row py-2 px-3">
+          <MdiMenu
+            class="cursor-pointer transform transition-transform duration-500 text-white"
+            :class="{ 'rotate-180': !isOpen }"
+            @click="toggle(!isOpen)"
+          />
+        </div>
+
         <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="closeTab(activeTabIndex)">
           <a-tab-pane v-for="(tab, i) in tabs" :key="i">
             <template #tab>
@@ -95,87 +48,15 @@ function openAirtableImportDialog() {
               </div>
             </template>
           </a-tab-pane>
-
-          <template #leftExtra>
-            <a-dropdown v-if="isUIAllowed('addOrImport')" :trigger="['click']">
-              <div
-                class="cursor-pointer color-transition group hover:text-primary text-sm flex items-center gap-2 py-[9.5px] px-[20px]"
-              >
-                <MdiPlusBoxOutline class="group-hover:text-pink-500" />
-                Add / Import
-              </div>
-
-              <template #overlay>
-                <a-menu class="nc-add-project-menu !py-0 ml-6 rounded text-sm">
-                  <a-menu-item v-if="isUIAllowed('addTable')" key="add-new-table" @click="openTableCreateDialog">
-                    <div class="color-transition nc-project-menu-item after:(!rounded-t) group">
-                      <MdiTable class="group-hover:text-pink-500" />
-                      <!-- Add new table -->
-                      {{ $t('tooltip.addTable') }}
-                    </div>
-                  </a-menu-item>
-
-                  <a-menu-item-group title="QUICK IMPORT FROM" class="!px-0 !mx-0">
-                    <a-menu-item
-                      v-if="isUIAllowed('airtableImport')"
-                      key="quick-import-airtable"
-                      @click="openAirtableImportDialog"
-                    >
-                      <div class="color-transition nc-project-menu-item group">
-                        <MdiTableLarge class="group-hover:text-pink-500" />
-                        <!-- TODO: i18n -->
-                        Airtable
-                      </div>
-                    </a-menu-item>
-
-                    <a-menu-item v-if="isUIAllowed('csvImport')" key="quick-import-csv" @click="openQuickImportDialog('csv')">
-                      <div class="color-transition nc-project-menu-item group">
-                        <MdiFileDocumentOutline class="group-hover:text-pink-500" />
-                        <!-- TODO: i18n -->
-                        CSV file
-                      </div>
-                    </a-menu-item>
-
-                    <a-menu-item v-if="isUIAllowed('jsonImport')" key="quick-import-json" @click="openQuickImportDialog('json')">
-                      <div class="color-transition nc-project-menu-item group">
-                        <MdiCodeJson class="group-hover:text-pink-500" />
-                        <!-- TODO: i18n -->
-                        JSON file
-                      </div>
-                    </a-menu-item>
-
-                    <a-menu-item
-                      v-if="isUIAllowed('excelImport')"
-                      key="quick-import-excel"
-                      @click="openQuickImportDialog('excel')"
-                    >
-                      <div class="color-transition nc-project-menu-item group">
-                        <MdiFileExcel class="group-hover:text-pink-500" />
-                        <!-- TODO: i18n -->
-                        Microsoft Excel
-                      </div>
-                    </a-menu-item>
-                  </a-menu-item-group>
-
-                  <a-menu-divider class="my-0" />
-
-                  <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
-                    <a
-                      v-t="['e:datasource:import-request']"
-                      href="https://github.com/nocodb/nocodb/issues/2052"
-                      target="_blank"
-                      class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
-                    >
-                      <MdiOpenInNew class="group-hover:text-pink-500" />
-                      <!-- TODO: i18n -->
-                      Request a data source you need?
-                    </a>
-                  </a-menu-item>
-                </a-menu>
-              </template>
-            </a-dropdown>
-          </template>
         </a-tabs>
+        <span class="flex-1" />
+        <div class="flex justify-center align-self-center mr-2">
+          <div v-show="isLoading" class="flex items-center gap-2 ml-3 text-white">
+            {{ $t('general.loading') }}
+
+            <MdiReload :class="{ 'animate-infinite animate-spin': isLoading }" />
+          </div>
+        </div>
       </div>
 
       <div class="w-full min-h-[300px] flex-auto">
@@ -187,24 +68,36 @@ function openAirtableImportDialog() {
 
 <style scoped lang="scss">
 .nc-container {
-  height: calc(100vh - var(--header-height));
+  height: 100vh;
   flex: 1 1 100%;
 }
 
 :deep(.nc-root-tabs) {
   & > .ant-tabs-nav {
-    @apply !mb-0;
+    @apply !mb-0 before:(!border-b-0);
+    .ant-tabs-extra-content {
+      @apply !bg-white/0;
+    }
 
     & > .ant-tabs-nav-wrap > .ant-tabs-nav-list {
-      & > .ant-tabs-nav-add {
+      .ant-tabs-nav-add {
         @apply !hidden;
       }
 
       & > .ant-tabs-tab-active {
         @apply font-weight-medium;
       }
+
+      & > .ant-tabs-tab {
+        @apply border-0;
+      }
+
       & > .ant-tabs-tab:not(.ant-tabs-tab-active) {
-        @apply bg-gray-100 text-gray-500;
+        //@apply bg-gray-100 text-gray-500;
+        @apply bg-white/10 text-white/90;
+        .ant-tabs-tab-remove {
+          @apply !text-white;
+        }
       }
     }
   }

From 5a37d0294120b748d921e99810ebfcc405ca7800 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 18 Aug 2022 19:39:28 +0530
Subject: [PATCH 02/11] fix(gui-v2): load right nav drawer only after loading
 meta

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/tabs/Smartsheet.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index 555e70cdc8..245a568b7b 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -87,6 +87,6 @@ watch(isLocked, (nextValue) => (treeViewIsLockedInj.value = nextValue), { immedi
       </template>
     </div>
 
-    <SmartsheetSidebar />
+    <SmartsheetSidebar v-if="meta" />
   </div>
 </template>

From 8c8ebc52adef9f6323b2f6d52fb05cd41cce974f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 18 Aug 2022 19:46:52 +0530
Subject: [PATCH 03/11] fix(gui-v2): provide proper width for loading

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../pages/[projectType]/[projectId]/index/index.vue | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index 6c55159880..7025e3b581 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -50,7 +50,7 @@ const { isOpen, toggle } = useSidebar()
           </a-tab-pane>
         </a-tabs>
         <span class="flex-1" />
-        <div class="flex justify-center align-self-center mr-2">
+        <div class="flex justify-center align-self-center mr-2 min-w-[115px]">
           <div v-show="isLoading" class="flex items-center gap-2 ml-3 text-white">
             {{ $t('general.loading') }}
 
@@ -79,11 +79,14 @@ const { isOpen, toggle } = useSidebar()
       @apply !bg-white/0;
     }
 
-    & > .ant-tabs-nav-wrap > .ant-tabs-nav-list {
-      .ant-tabs-nav-add {
-        @apply !hidden;
-      }
+    .ant-tabs-nav-add {
+      @apply !hidden;
+    }
+    .ant-tabs-nav-more {
+      @apply text-white;
+    }
 
+    & > .ant-tabs-nav-wrap > .ant-tabs-nav-list {
       & > .ant-tabs-tab-active {
         @apply font-weight-medium;
       }

From be425311ebbf2838f4dec6d4fe5e726cfa1df665 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 18 Aug 2022 19:47:16 +0530
Subject: [PATCH 04/11] fix(gui-v2): align more tabs menu icon and text

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/assets/style-v2.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index 5484cc31da..eaf063e36a 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -211,3 +211,7 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
     @apply ring ring-pink-500;
   }
 }
+
+.ant-tabs-dropdown-menu-title-content{
+  @apply flex items-center;
+}

From dbc1665c968d2fd60ca565cbe790ad03d9dfc724 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 19 Aug 2022 00:29:34 +0530
Subject: [PATCH 05/11] refactor: include language and user in project menu

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |  1 +
 .../components/dashboard/TreeView.vue         |  4 +-
 .../nc-gui-v2/components/general/Language.vue | 33 ++++++-
 .../components/smartsheet/sidebar/index.vue   | 23 -----
 .../pages/[projectType]/[projectId]/index.vue | 88 ++++++++++++++-----
 5 files changed, 99 insertions(+), 50 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 964f674e2e..81c6f68b43 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -87,6 +87,7 @@ declare module '@vue/runtime-core' {
     MaterialSymbolsSendOutline: typeof import('~icons/material-symbols/send-outline')['default']
     MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']
     MaterialSymbolsWarning: typeof import('~icons/material-symbols/warning')['default']
+    MdiAccount: typeof import('~icons/mdi/account')['default']
     MdiAccountCircle: typeof import('~icons/mdi/account-circle')['default']
     MdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
     MdiAccountOutline: typeof import('~icons/mdi/account-outline')['default']
diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index c3ef99e034..1c5c5cc769 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -370,9 +370,9 @@ function openAirtableImportDialog() {
       </template>
     </a-dropdown>
 
-    <a-divider class="mt-0 mb-2" />
+    <a-divider class="mt-0 mb-0" />
 
-    <div class="items-center flex justify-center mb-1">
+    <div class="items-center flex justify-center p-2">
       <!--
      Todo : move the component
      <GithubStarButton />
diff --git a/packages/nc-gui-v2/components/general/Language.vue b/packages/nc-gui-v2/components/general/Language.vue
index de34d8b8a2..ccc8c99584 100644
--- a/packages/nc-gui-v2/components/general/Language.vue
+++ b/packages/nc-gui-v2/components/general/Language.vue
@@ -2,6 +2,8 @@
 import { Language } from '~/lib'
 import { onMounted, useGlobal, useI18n, useNuxtApp } from '#imports'
 
+const { subMenu } = defineProps<{ subMenu?: boolean }>()
+
 const { $e } = useNuxtApp()
 
 const { lang: currentLang } = useGlobal()
@@ -37,7 +39,36 @@ onMounted(() => {
 </script>
 
 <template>
-  <a-dropdown class="select-none color-transition" :trigger="['click']">
+  <template v-if="subMenu">
+    <a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded">
+      <a-menu-item
+        v-for="lang of languages"
+        :key="lang"
+        :class="lang === locale ? '!bg-primary/10 text-primary' : ''"
+        class="group"
+        :value="lang"
+        @click="changeLanguage(lang)"
+      >
+        <div
+          :class="lang === locale ? '!font-semibold !text-primary' : ''"
+          class="nc-project-menu-item capitalize group-hover:text-pink-500"
+        >
+          {{ Language[lang] || lang }}
+        </div>
+      </a-menu-item>
+
+      <a-menu-item>
+        <a
+          href="https://docs.nocodb.com/engineering/translation/#how-to-contribute--for-community-members"
+          target="_blank"
+          class="caption py-2 text-primary underline hover:opacity-75"
+        >
+          {{ $t('activity.translate') }}
+        </a>
+      </a-menu-item>
+    </a-menu>
+  </template>
+  <a-dropdown v-else class="select-none color-transition" :trigger="['click']">
     <MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" />
 
     <template #overlay>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index 9c2bcd1656..0d0c2b9f52 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -102,29 +102,6 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
     class="relative shadow-md h-full"
     theme="light"
   >
-    <a-tooltip :mouse-enter-delay="1" placement="left">
-      <template #title> Toggle sidebar </template>
-
-      <Transition name="glow">
-        <div
-          v-show="sidebarCollapsed || isHovered"
-          class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-1/2 left-[-1rem] shadow bg-gray-100 rounded-full"
-        >
-          <MaterialSymbolsChevronRightRounded
-            v-if="isOpen"
-            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400 nc-right-sidebar-toggle"
-            @click="isOpen = false"
-          />
-
-          <MaterialSymbolsChevronLeftRounded
-            v-else
-            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400 nc-right-sidebar-toggle"
-            @click="isOpen = true"
-          />
-        </div>
-      </Transition>
-    </a-tooltip>
-
     <Toolbar
       v-if="isOpen"
       class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)]"
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 81a39abe61..2ce3d2817b 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -19,7 +19,7 @@ import { TabType } from '~/composables'
 
 const route = useRoute()
 
-const { appInfo, token } = useGlobal()
+const { appInfo, token, signOut, signedIn, user } = useGlobal()
 
 const { project, loadProject, loadTables, isSharedBase, loadProjectMetaInfo, projectMetaInfo } = useProject()
 
@@ -42,6 +42,13 @@ const openDialogKey = ref<string>()
 
 const dropdownOpen = ref(false)
 
+const email = computed(() => user.value?.email ?? '---')
+
+const logout = () => {
+  signOut()
+  navigateTo('/signin')
+}
+
 /** Sidebar ref */
 const sidebar = ref()
 
@@ -234,6 +241,44 @@ definePageMeta({
 
                   <a-menu-divider />
 
+                  <template v-if="signedIn && !isSharedBase">
+                    <a-sub-menu v-if="isUIAllowed('previewAs')" key="account">
+                      <template #title>
+                        <div class="nc-project-menu-item group">
+                          <MdiAccount class="group-hover:text-pink-500 nc-project-preview" />
+                          Account
+                          <div class="flex-1" />
+
+                          <MaterialSymbolsChevronRightRounded
+                            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+                          />
+                        </div>
+                      </template>
+
+                      <template #expandIcon></template>
+
+                      <a-menu class="!py-0 dark:(!bg-gray-800) leading-8 !rounded">
+                        <a-menu-item key="0" class="!rounded-t">
+                          <nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group no-underline" to="/user">
+                            <MdiAt class="mt-1 group-hover:text-pink-500" />&nbsp;
+
+                            <span class="prose">{{ email }}</span>
+                          </nuxt-link>
+                        </a-menu-item>
+
+                        <a-menu-item key="1" class="!rounded-b">
+                          <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
+                            <MdiLogout class="group-hover:(!text-pink-500)" />&nbsp;
+
+                            <span class="prose">
+                              {{ $t('general.signOut') }}
+                            </span>
+                          </div>
+                        </a-menu-item>
+                      </a-menu>
+                    </a-sub-menu>
+                  </template>
+
                   <a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as" v-t="['c:navdraw:preview-as']">
                     <template #title>
                       <div class="nc-project-menu-item group">
@@ -252,6 +297,23 @@ definePageMeta({
 
                     <GeneralPreviewAs />
                   </a-sub-menu>
+
+                  <a-sub-menu v-if="isUIAllowed('previewAs')" key="language">
+                    <template #title>
+                      <div class="nc-project-menu-item group">
+                        <MaterialSymbolsTranslate class="group-hover:text-pink-500 nc-language" />
+                        Language
+                        <div class="flex-1" />
+
+                        <MaterialSymbolsChevronRightRounded
+                          class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+                        />
+                      </div>
+                    </template>
+
+                    <template #expandIcon></template>
+                    <GeneralLanguage sub-menu />
+                  </a-sub-menu>
                 </a-menu-item-group>
               </a-menu>
             </template>
@@ -265,29 +327,6 @@ definePageMeta({
           </div>
         </div>
 
-        <a-tooltip :mouse-enter-delay="1" placement="right">
-          <template #title> Toggle table list </template>
-
-          <Transition name="glow">
-            <div
-              v-show="!isOpen || isHovered"
-              class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center absolute top-1/2 right-[-0.75rem] shadow bg-gray-100 rounded-full"
-            >
-              <MaterialSymbolsChevronLeftRounded
-                v-if="isOpen"
-                class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
-                @click="toggle(false)"
-              />
-
-              <MaterialSymbolsChevronRightRounded
-                v-else
-                class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
-                @click="toggle(true)"
-              />
-            </div>
-          </Transition>
-        </a-tooltip>
-
         <DashboardTreeView v-show="isOpen" />
       </a-layout-sider>
     </template>
@@ -324,6 +363,7 @@ definePageMeta({
       @apply !border-r-0;
     }
   }
+
   &:hover .nc-sidebar-left-toggle-icon {
     @apply opacity-100;
   }

From 79377637d892586fabff5ea5f62de11bf2ceacdc Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 19 Aug 2022 00:30:04 +0530
Subject: [PATCH 06/11] chore: lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet/sidebar/index.vue   | 2 --
 packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue | 2 --
 2 files changed, 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index 0d0c2b9f52..e896faf7f3 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -55,8 +55,6 @@ let selectedViewId = $ref('')
 /** is view creation modal open */
 let modalOpen = $ref(false)
 
-const isHovered = useElementHover(sidebar)
-
 /** Watch route param and change active view based on `viewTitle` */
 watch(
   [views, () => route.params.viewTitle],
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 2ce3d2817b..542c5ec082 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -75,8 +75,6 @@ await loadProject()
 
 await loadTables()
 
-const isHovered = useElementHover(sidebar)
-
 const copyProjectInfo = async () => {
   try {
     await loadProjectMetaInfo()

From eab690e8b3bad6209f8866017ac72dc69814a8a5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 19 Aug 2022 11:13:10 +0530
Subject: [PATCH 07/11] refactor(gui-v2): use `useDialog` for rendering dialog

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/dashboard/TreeView.vue         | 24 +++++++++++++++----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 1c5c5cc769..56726c523c 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -34,8 +34,6 @@ const tablesById = $computed<Record<string, TableType>>(() =>
   }, {}),
 )
 
-const tableCreateDlg = ref(false)
-
 let key = $ref(0)
 
 const menuRef = $ref<HTMLLIElement>()
@@ -172,6 +170,23 @@ function openAirtableImportDialog() {
     close(1000)
   }
 }
+
+function openTableCreateDialog() {
+  $e('a:actions:create-table')
+
+  const isOpen = ref(true)
+
+  const { close } = useDialog(DlgTableCreate, {
+    'modelValue': isOpen,
+    'onUpdate:modelValue': closeDialog,
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+
+    close(1000)
+  }
+}
 </script>
 
 <template>
@@ -196,7 +211,7 @@ function openAirtableImportDialog() {
         <div style="direction: ltr" class="flex-1">
           <div
             class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
-            @click="tableCreateDlg = true"
+            @click="openTableCreateDialog"
           >
             <MdiPlus />
             <span class="text-gray-500 group-hover:(text-primary/100) flex-1">{{ $t('tooltip.addTable') }}</span>
@@ -335,7 +350,7 @@ function openAirtableImportDialog() {
             <div class="flex flex-col align-center">
               <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
 
-              <a-button type="primary" @click.stop="tableCreateDlg = true">{{ $t('tooltip.addTable') }}</a-button>
+              <a-button type="primary" @click.stop="openTableCreateDialog">{{ $t('tooltip.addTable') }}</a-button>
             </div>
           </a-card>
         </div>
@@ -381,7 +396,6 @@ function openAirtableImportDialog() {
       <GeneralShareBaseButton class="!mr-0" />
     </div>
 
-    <DlgTableCreate v-if="tableCreateDlg" v-model="tableCreateDlg" />
     <DlgTableRename v-if="renameTableMeta" v-model="renameTableDlg" :table-meta="renameTableMeta" />
   </div>
 </template>

From d83e37ac28fd1ba5c6dd8d1757e1a7f8acbd16d5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 19 Aug 2022 11:20:56 +0530
Subject: [PATCH 08/11] refactor(gui-v2): avoid repetition by splitting into
 multiple component

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/general/language/Menu.vue      | 65 +++++++++++++++++++
 .../components/general/language/index.vue     | 36 ++++++++++
 .../components/smartsheet/sidebar/index.vue   |  1 -
 .../pages/[projectType]/[projectId]/index.vue |  1 -
 4 files changed, 101 insertions(+), 2 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/general/language/Menu.vue
 create mode 100644 packages/nc-gui-v2/components/general/language/index.vue

diff --git a/packages/nc-gui-v2/components/general/language/Menu.vue b/packages/nc-gui-v2/components/general/language/Menu.vue
new file mode 100644
index 0000000000..08c5f3a07d
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/language/Menu.vue
@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import { onMounted, useGlobal, useI18n, useNuxtApp } from '#imports'
+
+const { availableLocales = ['en'], locale } = useI18n()
+const languages = $computed(() => availableLocales.sort())
+
+const { $e } = useNuxtApp()
+
+const { lang: currentLang } = useGlobal()
+
+const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
+
+function applyDirection() {
+  const targetDirection = isRtlLang ? 'rtl' : 'ltr'
+
+  const oppositeDirection = targetDirection === 'ltr' ? 'rtl' : 'ltr'
+
+  document.body.classList.remove(oppositeDirection)
+  document.body.classList.add(targetDirection)
+  document.body.style.direction = targetDirection
+}
+
+onMounted(() => {
+  applyDirection()
+})
+
+function changeLanguage(lang: string) {
+  currentLang.value = lang
+  locale.value = lang
+
+  applyDirection()
+
+  $e('c:navbar:lang', { lang })
+}
+</script>
+
+<template>
+  <a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded">
+    <a-menu-item
+      v-for="lang of languages"
+      :key="lang"
+      :class="lang === locale ? '!bg-primary/10 text-primary' : ''"
+      class="group"
+      :value="lang"
+      @click="changeLanguage(lang)"
+    >
+      <div
+        :class="lang === locale ? '!font-semibold !text-primary' : ''"
+        class="nc-project-menu-item capitalize group-hover:text-pink-500"
+      >
+        {{ Language[lang] || lang }}
+      </div>
+    </a-menu-item>
+
+    <a-menu-item>
+      <a
+        href="https://docs.nocodb.com/engineering/translation/#how-to-contribute--for-community-members"
+        target="_blank"
+        class="caption py-2 text-primary underline hover:opacity-75"
+      >
+        {{ $t('activity.translate') }}
+      </a>
+    </a-menu-item>
+  </a-menu>
+</template>
diff --git a/packages/nc-gui-v2/components/general/language/index.vue b/packages/nc-gui-v2/components/general/language/index.vue
new file mode 100644
index 0000000000..9df4b15f14
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/language/index.vue
@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import Menu from './Menu.vue'
+
+const { subMenu } = defineProps<{ subMenu?: boolean }>()
+</script>
+
+<template>
+  <template v-if="subMenu">
+    <Menu />
+  </template>
+  <a-dropdown v-else class="select-none color-transition" :trigger="['click']">
+    <MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" />
+
+    <template #overlay>
+      <Menu />
+    </template>
+  </a-dropdown>
+</template>
+
+<style scoped>
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply !mx-0;
+}
+
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply m-0;
+}
+
+:deep(.ant-dropdown-menu-item) {
+  @apply !py-0 active:(ring ring-pink-500);
+}
+</style>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index e896faf7f3..1f60a3e46f 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -12,7 +12,6 @@ import {
   inject,
   provide,
   ref,
-  useElementHover,
   useRoute,
   useRouter,
   useViews,
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 542c5ec082..e026d75408 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -8,7 +8,6 @@ import {
   provideSidebar,
   ref,
   useClipboard,
-  useElementHover,
   useGlobal,
   useProject,
   useRoute,

From 0755b71ccb85cff956b08818de9a1c51a3f45948 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 19 Aug 2022 11:23:25 +0530
Subject: [PATCH 09/11] refactor(gui-v2): delay tooltip to avoid showing
 immediately on hover

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/sidebar/toolbar/ToggleDrawer.vue    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
index 6a8a66ac00..d09808f387 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue
@@ -4,8 +4,8 @@ const { isOpen, toggle } = useSidebar({ storageKey: 'nc-right-sidebar' })
 </script>
 
 <template>
-  <a-tooltip :placement="isOpen ? 'bottomRight' : 'left'">
-    <template #title> Toggle sidebar </template>
+  <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/75 group nc-sidebar-add-row">
       <MdiChevronDoubleLeft

From d2a13ff9486561bc81f35fa86f2969601b2636e0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 19 Aug 2022 11:37:25 +0530
Subject: [PATCH 10/11] refactor(gui-v2): language component

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/assets/style-v2.scss       |  23 ++++
 .../nc-gui-v2/components/general/Language.vue | 119 ------------------
 .../components/general/language/Menu.vue      |  29 ++---
 .../components/general/language/index.vue     |   9 +-
 .../pages/[projectType]/[projectId]/index.vue |   4 +
 5 files changed, 38 insertions(+), 146 deletions(-)
 delete mode 100644 packages/nc-gui-v2/components/general/Language.vue

diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index eaf063e36a..786e47c17b 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -176,6 +176,7 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
 }
 
 .slide-enter,
+
 .slide-leave-active {
   transform: translate(-100%, 0);
 }
@@ -215,3 +216,25 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
 .ant-tabs-dropdown-menu-title-content{
   @apply flex items-center;
 }
+
+
+
+.ant-dropdown-menu-item-group-list {
+  @apply !mx-0;
+}
+
+.ant-dropdown-menu-item-group-title {
+  @apply border-b-1;
+}
+
+.ant-dropdown-menu-item-group-list {
+  @apply m-0;
+}
+
+.ant-dropdown-menu-item {
+  @apply !py-0 active:(ring ring-pink-500);
+}
+
+.ant-dropdown-menu-title-conten{
+  @apply !py-0;
+}
diff --git a/packages/nc-gui-v2/components/general/Language.vue b/packages/nc-gui-v2/components/general/Language.vue
deleted file mode 100644
index ccc8c99584..0000000000
--- a/packages/nc-gui-v2/components/general/Language.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<script lang="ts" setup>
-import { Language } from '~/lib'
-import { onMounted, useGlobal, useI18n, useNuxtApp } from '#imports'
-
-const { subMenu } = defineProps<{ subMenu?: boolean }>()
-
-const { $e } = useNuxtApp()
-
-const { lang: currentLang } = useGlobal()
-
-const { availableLocales = ['en'], locale } = useI18n()
-
-const languages = $computed(() => availableLocales.sort())
-
-const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
-
-function applyDirection() {
-  const targetDirection = isRtlLang ? 'rtl' : 'ltr'
-
-  const oppositeDirection = targetDirection === 'ltr' ? 'rtl' : 'ltr'
-
-  document.body.classList.remove(oppositeDirection)
-  document.body.classList.add(targetDirection)
-  document.body.style.direction = targetDirection
-}
-
-function changeLanguage(lang: string) {
-  currentLang.value = lang
-  locale.value = lang
-
-  applyDirection()
-
-  $e('c:navbar:lang', { lang })
-}
-
-onMounted(() => {
-  applyDirection()
-})
-</script>
-
-<template>
-  <template v-if="subMenu">
-    <a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded">
-      <a-menu-item
-        v-for="lang of languages"
-        :key="lang"
-        :class="lang === locale ? '!bg-primary/10 text-primary' : ''"
-        class="group"
-        :value="lang"
-        @click="changeLanguage(lang)"
-      >
-        <div
-          :class="lang === locale ? '!font-semibold !text-primary' : ''"
-          class="nc-project-menu-item capitalize group-hover:text-pink-500"
-        >
-          {{ Language[lang] || lang }}
-        </div>
-      </a-menu-item>
-
-      <a-menu-item>
-        <a
-          href="https://docs.nocodb.com/engineering/translation/#how-to-contribute--for-community-members"
-          target="_blank"
-          class="caption py-2 text-primary underline hover:opacity-75"
-        >
-          {{ $t('activity.translate') }}
-        </a>
-      </a-menu-item>
-    </a-menu>
-  </template>
-  <a-dropdown v-else class="select-none color-transition" :trigger="['click']">
-    <MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" />
-
-    <template #overlay>
-      <a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded">
-        <a-menu-item
-          v-for="lang of languages"
-          :key="lang"
-          :class="lang === locale ? '!bg-primary/10 text-primary' : ''"
-          class="group"
-          :value="lang"
-          @click="changeLanguage(lang)"
-        >
-          <div :class="lang === locale ? '!font-semibold !text-primary' : ''" class="nc-project-menu-item capitalize">
-            {{ Language[lang] || lang }}
-          </div>
-        </a-menu-item>
-
-        <a-menu-item class="mt-1">
-          <a
-            href="https://docs.nocodb.com/engineering/translation/#how-to-contribute--for-community-members"
-            target="_blank"
-            class="caption py-2 text-primary underline hover:opacity-75"
-          >
-            {{ $t('activity.translate') }}
-          </a>
-        </a-menu-item>
-      </a-menu>
-    </template>
-  </a-dropdown>
-</template>
-
-<style scoped>
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply !mx-0;
-}
-
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply m-0;
-}
-
-:deep(.ant-dropdown-menu-item) {
-  @apply !py-0 active:(ring ring-pink-500);
-}
-</style>
diff --git a/packages/nc-gui-v2/components/general/language/Menu.vue b/packages/nc-gui-v2/components/general/language/Menu.vue
index 08c5f3a07d..ded2f9096f 100644
--- a/packages/nc-gui-v2/components/general/language/Menu.vue
+++ b/packages/nc-gui-v2/components/general/language/Menu.vue
@@ -1,37 +1,27 @@
 <script lang="ts" setup>
+import { Language } from '~/lib'
 import { onMounted, useGlobal, useI18n, useNuxtApp } from '#imports'
-
-const { availableLocales = ['en'], locale } = useI18n()
-const languages = $computed(() => availableLocales.sort())
-
 const { $e } = useNuxtApp()
-
 const { lang: currentLang } = useGlobal()
-
+const { availableLocales = ['en'], locale } = useI18n()
+const languages = $computed(() => availableLocales.sort())
 const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
-
 function applyDirection() {
   const targetDirection = isRtlLang ? 'rtl' : 'ltr'
-
   const oppositeDirection = targetDirection === 'ltr' ? 'rtl' : 'ltr'
-
   document.body.classList.remove(oppositeDirection)
   document.body.classList.add(targetDirection)
   document.body.style.direction = targetDirection
 }
-
-onMounted(() => {
-  applyDirection()
-})
-
 function changeLanguage(lang: string) {
   currentLang.value = lang
   locale.value = lang
-
   applyDirection()
-
   $e('c:navbar:lang', { lang })
 }
+onMounted(() => {
+  applyDirection()
+})
 </script>
 
 <template>
@@ -44,15 +34,12 @@ function changeLanguage(lang: string) {
       :value="lang"
       @click="changeLanguage(lang)"
     >
-      <div
-        :class="lang === locale ? '!font-semibold !text-primary' : ''"
-        class="nc-project-menu-item capitalize group-hover:text-pink-500"
-      >
+      <div :class="lang === locale ? '!font-semibold !text-primary' : ''" class="nc-project-menu-item capitalize">
         {{ Language[lang] || lang }}
       </div>
     </a-menu-item>
 
-    <a-menu-item>
+    <a-menu-item class="mt-1">
       <a
         href="https://docs.nocodb.com/engineering/translation/#how-to-contribute--for-community-members"
         target="_blank"
diff --git a/packages/nc-gui-v2/components/general/language/index.vue b/packages/nc-gui-v2/components/general/language/index.vue
index 9df4b15f14..6fca3230b5 100644
--- a/packages/nc-gui-v2/components/general/language/index.vue
+++ b/packages/nc-gui-v2/components/general/language/index.vue
@@ -1,18 +1,15 @@
 <script lang="ts" setup>
-import Menu from './Menu.vue'
-
 const { subMenu } = defineProps<{ subMenu?: boolean }>()
 </script>
 
 <template>
-  <template v-if="subMenu">
-    <Menu />
-  </template>
+  <GeneralLanguageMenu v-if="subMenu" />
+
   <a-dropdown v-else class="select-none color-transition" :trigger="['click']">
     <MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" />
 
     <template #overlay>
-      <Menu />
+      <GeneralLanguageMenu />
     </template>
   </a-dropdown>
 </template>
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index e026d75408..af6744bfff 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -365,4 +365,8 @@ definePageMeta({
     @apply opacity-100;
   }
 }
+
+:deep(.ant-dropdown-menu-submenu-title){
+  @apply py-0
+}
 </style>

From db1b3fbed455b3285f032f4ef765c62071cb658a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 19 Aug 2022 11:56:38 +0530
Subject: [PATCH 11/11] chore(gui-v2):  lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index af6744bfff..b3c7b5b3db 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -366,7 +366,7 @@ definePageMeta({
   }
 }
 
-:deep(.ant-dropdown-menu-submenu-title){
-  @apply py-0
+:deep(.ant-dropdown-menu-submenu-title) {
+  @apply py-0;
 }
 </style>