From ac434c0258b0f105e2aa6046d716060d44c5658d Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:14 +0000
Subject: [PATCH 01/25] fix: Improved dark scrollbar style and moved sidebar
 button css to a common css

---
 packages/nc-gui/assets/style.scss | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index 5dee33bf42..db39bda82e 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -79,6 +79,11 @@ main {
     width: 4px;
     height: 4px;
   }
+
+  &::-webkit-scrollbar-track {
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+  }
   &::-webkit-scrollbar-track-piece {
     width: 0px;
   }
@@ -86,11 +91,14 @@ main {
     @apply bg-transparent;
   }
   &::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+
     width: 4px;
-    @apply bg-gray-200;
+    @apply bg-gray-300;
   }
   &::-webkit-scrollbar-thumb:hover {
-    @apply bg-gray-300;
+    @apply bg-gray-400;
   }
 }
 
@@ -583,3 +591,7 @@ input[type='number'] {
 .ant-pagination .ant-pagination-item-link-icon {
   @apply !block !py-1.5;
 }
+
+.nc-button.ant-btn.nc-sidebar-node-btn {
+  @apply opacity-0 group-hover:(opacity-100) text-gray-600 hover:(bg-gray-400 bg-opacity-20 text-gray-900) duration-100;
+}
\ No newline at end of file

From b77dac0c9425ebf0a6e8f14cafeb4fc08efab135 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:14 +0000
Subject: [PATCH 02/25] fix: Improved sidebar scrollbar layout and resiable bar
 placement

---
 packages/nc-gui/components/dashboard/Sidebar.vue | 2 +-
 packages/nc-gui/components/dashboard/View.vue    | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/Sidebar.vue b/packages/nc-gui/components/dashboard/Sidebar.vue
index fe8c5907bc..164c11e554 100644
--- a/packages/nc-gui/components/dashboard/Sidebar.vue
+++ b/packages/nc-gui/components/dashboard/Sidebar.vue
@@ -43,7 +43,7 @@ onUnmounted(() => {
     </div>
     <div
       ref="treeViewDom"
-      class="flex flex-col nc-scrollbar-sm-dark flex-grow"
+      class="flex flex-col nc-scrollbar-dark-md flex-grow"
       :class="{
         'border-t-1': !isSharedBase,
         'border-transparent': !isTreeViewOnScrollTop,
diff --git a/packages/nc-gui/components/dashboard/View.vue b/packages/nc-gui/components/dashboard/View.vue
index cf1fb90ff4..cbd75c7ce6 100644
--- a/packages/nc-gui/components/dashboard/View.vue
+++ b/packages/nc-gui/components/dashboard/View.vue
@@ -154,13 +154,13 @@ watch(route, () => {
   .splitpanes__splitter:hover:before {
     @apply bg-scrollbar;
     width: 3px !important;
-    left: -3px;
+    left: 0px;
   }
 
   .splitpanes--dragging .splitpanes__splitter:before {
     @apply bg-scrollbar;
     width: 3px !important;
-    left: -3px;
+    left: 0px;
   }
 
   .splitpanes--dragging .splitpanes__splitter {

From ed0f3c28ebc08c5539e17ca9df95dee9b0abc40a Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:14 +0000
Subject: [PATCH 03/25] fix: Moved sidebar button css to a common css

---
 packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index 7a7c616c84..a2fe6a30d9 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -749,10 +749,6 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
   @apply !mx-0 !pl-8.75 !pr-0.5 !py-0.75 hover:bg-gray-200 !rounded-md;
 }
 
-:deep(.nc-button.ant-btn.nc-sidebar-node-btn) {
-  @apply opacity-0 group-hover:(opacity-100) text-gray-600 hover:(bg-gray-400 bg-opacity-20 text-gray-900) duration-100;
-}
-
 :deep(.ant-collapse-content-box) {
   @apply !px-0 !pb-0 !pt-0.25;
 }

From e50fc047071b612cbaedde3334f8bc4d703281a8 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:14 +0000
Subject: [PATCH 04/25] fix: Added viewsByTable in views store thus we can
 store multiple view list per table

---
 packages/nc-gui/store/views.ts | 33 +++++++++++++++++++++++++--------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui/store/views.ts b/packages/nc-gui/store/views.ts
index 12e76ba77d..de0fad35c6 100644
--- a/packages/nc-gui/store/views.ts
+++ b/packages/nc-gui/store/views.ts
@@ -8,7 +8,18 @@ export const useViewsStore = defineStore('viewsStore', () => {
   const router = useRouter()
   const route = router.currentRoute
 
-  const views = ref<ViewType[]>([])
+  const tablesStore = useTablesStore()
+
+  const viewsByTable = ref<Map<string, ViewType[]>>(new Map())
+  const views = computed({
+    get: () => (tablesStore.activeTableId ? viewsByTable.value.get(tablesStore.activeTableId) : []) ?? [],
+    set: (value) => {
+      if (!tablesStore.activeTableId) return
+      if (!value) return viewsByTable.value.delete(tablesStore.activeTableId)
+
+      viewsByTable.value.set(tablesStore.activeTableId, value)
+    },
+  })
   const isViewsLoading = ref(true)
   const isViewDataLoading = ref(true)
   const isPublic = computed(() => route.value.meta?.public)
@@ -70,16 +81,20 @@ export const useViewsStore = defineStore('viewsStore', () => {
   // Used for Grid View Pagination
   const isPaginationLoading = ref(false)
 
-  const tablesStore = useTablesStore()
+  const loadViews = async ({ tableId, ignoreLoading }: { tableId?: string; ignoreLoading?: boolean } = {}) => {
+    tableId = tableId ?? tablesStore.activeTableId
+    if (tableId) {
+      if (!ignoreLoading) isViewsLoading.value = true
 
-  const loadViews = async () => {
-    if (tablesStore.activeTableId) {
-      isViewsLoading.value = true
-      const response = (await $api.dbView.list(tablesStore.activeTableId)).list as ViewType[]
+      const response = (await $api.dbView.list(tableId)).list as ViewType[]
       if (response) {
-        views.value = response.sort((a, b) => a.order! - b.order!)
+        viewsByTable.value.set(
+          tableId,
+          response.sort((a, b) => a.order! - b.order!),
+        )
       }
-      isViewsLoading.value = false
+
+      if (!ignoreLoading) isViewsLoading.value = false
     }
   }
 
@@ -132,6 +147,8 @@ export const useViewsStore = defineStore('viewsStore', () => {
     openedViewsTab,
     onViewsTabChange,
     sharedView,
+    viewsByTable,
+    activeViewTitleOrId,
   }
 })
 

From 4ecf87075fa2a80ab784deaddcfff4eb1163165b Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:15 +0000
Subject: [PATCH 05/25] fix: Added active table to useViewData so it defaults
 openedtable

---
 packages/nc-gui/composables/useViewData.ts | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index 400b856e67..fd81f35f75 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -32,11 +32,16 @@ const formatData = (list: Record<string, any>[]) =>
   }))
 
 export function useViewData(
-  meta: Ref<TableType | undefined> | ComputedRef<TableType | undefined>,
+  _meta: Ref<TableType | undefined> | ComputedRef<TableType | undefined>,
   viewMeta: Ref<ViewType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>,
   where?: ComputedRef<string | undefined>,
 ) {
-  if (!meta) {
+  const { activeTableId, activeTable } = storeToRefs(useTablesStore())
+
+  const meta = computed(() => _meta.value || activeTable.value)
+  const metaId = computed(() => _meta.value?.id || activeTableId.value)
+
+  if (!meta.value) {
     throw new Error('Table meta is not available')
   }
 
@@ -101,7 +106,7 @@ export function useViewData(
     const { count } = await $api.dbViewRow.count(
       NOCO,
       project?.value?.id as string,
-      meta?.value?.id as string,
+      metaId.value as string,
       viewMeta?.value?.id as string,
     )
     paginationData.value.totalRows = count
@@ -150,7 +155,7 @@ export function useViewData(
 
     aggCommentCount.value = await $api.utils.commentCount({
       ids,
-      fk_model_id: meta.value?.id as string,
+      fk_model_id: metaId.value as string,
     })
 
     for (const row of formattedData.value) {
@@ -160,9 +165,9 @@ export function useViewData(
   }
 
   async function loadData(params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) {
-    if ((!project?.value?.id || !meta.value?.id || !viewMeta.value?.id) && !isPublic.value) return
+    if ((!project?.value?.id || !metaId.value || !viewMeta.value?.id) && !isPublic.value) return
     const response = !isPublic.value
-      ? await api.dbViewRow.list('noco', project.value.id!, meta.value!.id!, viewMeta.value!.id!, {
+      ? await api.dbViewRow.list('noco', project.value.id!, metaId.value!, viewMeta.value!.id!, {
           ...queryParams.value,
           ...params,
           ...(isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(sorts.value) }),

From efdcdfdd16e355c2f166d681c1806774a1b722c9 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:15 +0000
Subject: [PATCH 06/25] fix: Removed global scrollbar style

---
 .../toolbar/FieldListAutoCompleteDropdown.vue          | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
index 898e0096a6..f02dc35103 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldListAutoCompleteDropdown.vue
@@ -100,14 +100,4 @@ if (!localValue.value && allowEmpty !== true) {
 .ant-select-selection-search-input {
   box-shadow: none !important;
 }
-::-webkit-scrollbar {
-  -webkit-appearance: none;
-  width: 7px;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 4px;
-  background-color: rgba(0, 0, 0, 0.5);
-  box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
-}
 </style>

From 50326a6608af22b795070a2b1e92e1b010a989e3 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:15 +0000
Subject: [PATCH 07/25] fix: Added loading to NcSelect

---
 packages/nc-gui/components/nc/Select.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/nc/Select.vue b/packages/nc-gui/components/nc/Select.vue
index 84dc75d985..cf8b33aaae 100644
--- a/packages/nc-gui/components/nc/Select.vue
+++ b/packages/nc-gui/components/nc/Select.vue
@@ -8,6 +8,7 @@ const props = defineProps<{
   filterOption?: (input: string, option: any) => boolean
   dropdownMatchSelectWidth?: boolean
   allowClear?: boolean
+  loading?: boolean
 }>()
 
 const emits = defineEmits(['update:value', 'change'])
@@ -22,6 +23,8 @@ const filterOption = computed(() => props.filterOption)
 
 const dropdownMatchSelectWidth = computed(() => props.dropdownMatchSelectWidth)
 
+const loading = computed(() => props.loading)
+
 const vModel = useVModel(props, 'value', emits)
 
 const onChange = (value: string) => {
@@ -39,10 +42,13 @@ const onChange = (value: string) => {
     :filter-option="filterOption"
     :dropdown-match-select-width="dropdownMatchSelectWidth"
     :allow-clear="allowClear"
+    :loading="true"
+    :disabled="true"
     @change="onChange"
   >
     <template #suffixIcon>
-      <GeneralIcon icon="arrowDown" class="text-gray-800 nc-select-expand-btn" />
+      <GeneralLoader v-if="loading" />
+      <GeneralIcon v-else icon="arrowDown" class="text-gray-800 nc-select-expand-btn" />
     </template>
     <slot />
   </a-select>

From fedfdb59f845a52232e20f209d680756673e79e3 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:15 +0000
Subject: [PATCH 08/25] fix: Added views in left sidebar

---
 .../dashboard/TreeView/CreateViewBtn.vue      | 127 ++++++
 .../dashboard/TreeView/TableList.vue          |   7 +-
 .../dashboard/TreeView/TableNode.vue          | 280 ++++++++-----
 .../dashboard/TreeView/ViewsList.vue          | 392 ++++++++++++++++++
 .../dashboard/TreeView/ViewsNode.vue          | 296 +++++++++++++
 packages/nc-gui/components/dlg/ViewCreate.vue | 140 ++++---
 .../components/smartsheet/sidebar/MenuTop.vue |   2 +-
 .../smartsheet/toolbar/ViewInfo.vue           |  15 +-
 packages/nc-gui/context/index.ts              |   1 +
 9 files changed, 1080 insertions(+), 180 deletions(-)
 create mode 100644 packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
 create mode 100644 packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
 create mode 100644 packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue

diff --git a/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue b/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
new file mode 100644
index 0000000000..7c3e8a4466
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { ViewType } from 'nocodb-sdk'
+import { ViewTypes } from 'nocodb-sdk'
+
+const { $e } = useNuxtApp()
+
+const router = useRouter()
+
+const { refreshCommandPalette } = useCommandPalette()
+const viewsStore = useViewsStore()
+const { views } = storeToRefs(viewsStore)
+const { loadViews } = viewsStore
+
+const table = inject(SidebarTableInj)!
+
+const isOpen = ref(false)
+
+function onOpenModal({
+  title = '',
+  type,
+  copyViewId,
+  groupingFieldColumnId,
+}: {
+  title?: string
+  type: ViewTypes
+  copyViewId?: string
+  groupingFieldColumnId?: string
+}) {
+  isOpen.value = false
+
+  const isDlgOpen = ref(true)
+
+  const { close } = useDialog(resolveComponent('DlgViewCreate'), {
+    'modelValue': isDlgOpen,
+    title,
+    type,
+    'tableId': table.value.id,
+    'selectedViewId': copyViewId,
+    groupingFieldColumnId,
+    'views': views,
+    'onUpdate:modelValue': closeDialog,
+    'onCreated': async (view: ViewType) => {
+      closeDialog()
+
+      refreshCommandPalette()
+
+      await loadViews()
+
+      router.push({ params: { viewTitle: view.id || '' } })
+
+      $e('a:view:create', { view: view.type })
+    },
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+
+    close(1000)
+  }
+}
+</script>
+
+<template>
+  <NcDropdown v-model:isOpen="isOpen" @click.stop="isOpen = !isOpen">
+    <slot />
+    <template #overlay>
+      <NcMenu class="max-w-48">
+        <div class="py-2 px-4 text-gray-500 text-sm">New View</div>
+        <NcMenuItem @click="onOpenModal({ type: ViewTypes.GRID })">
+          <div class="item">
+            <div class="item-inner">
+              <GeneralViewIcon :meta="{ type: ViewTypes.GRID }" />
+              <div>Grid</div>
+            </div>
+
+            <GeneralIcon class="plus" icon="plus" />
+          </div>
+        </NcMenuItem>
+
+        <NcMenuItem @click="onOpenModal({ type: ViewTypes.FORM })">
+          <div class="item">
+            <div class="item-inner">
+              <GeneralViewIcon :meta="{ type: ViewTypes.FORM }" />
+              <div>Form</div>
+            </div>
+
+            <GeneralIcon class="plus" icon="plus" />
+          </div>
+        </NcMenuItem>
+        <NcMenuItem @click="onOpenModal({ type: ViewTypes.GALLERY })">
+          <div class="item">
+            <div class="item-inner">
+              <GeneralViewIcon :meta="{ type: ViewTypes.GALLERY }" />
+              <div>Gallery</div>
+            </div>
+
+            <GeneralIcon class="plus" icon="plus" />
+          </div>
+        </NcMenuItem>
+        <NcMenuItem @click="onOpenModal({ type: ViewTypes.KANBAN })">
+          <div class="item">
+            <div class="item-inner">
+              <GeneralViewIcon :meta="{ type: ViewTypes.KANBAN }" />
+              <div>Kanban</div>
+            </div>
+
+            <GeneralIcon class="plus" icon="plus" />
+          </div>
+        </NcMenuItem>
+      </NcMenu>
+    </template>
+  </NcDropdown>
+</template>
+
+<style lang="scss" scoped>
+.item {
+  @apply flex flex-row items-center w-36 justify-between;
+}
+
+.item-inner {
+  @apply flex flex-row items-center gap-x-1.75;
+}
+
+.plus {
+  @apply text-brand-400;
+}
+</style>
diff --git a/packages/nc-gui/components/dashboard/TreeView/TableList.vue b/packages/nc-gui/components/dashboard/TreeView/TableList.vue
index 6f8beef505..c372fea1cd 100644
--- a/packages/nc-gui/components/dashboard/TreeView/TableList.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/TableList.vue
@@ -26,10 +26,6 @@ const tables = computed(() => projectTables.value.get(project.value.id!) ?? [])
 
 const { $api } = useNuxtApp()
 
-const { openTable } = useTableNew({
-  projectId: project.value.id!,
-})
-
 const tablesById = computed(() =>
   tables.value.reduce<Record<string, TableType>>((acc, table) => {
     acc[table.id!] = table
@@ -153,7 +149,7 @@ const availableTables = computed(() => {
           v-for="table of availableTables"
           :key="table.id"
           v-e="['a:table:open']"
-          class="nc-tree-item text-sm cursor-pointer group"
+          class="nc-tree-item text-sm"
           :data-order="table.order"
           :data-id="table.id"
           :data-testid="`tree-view-table-${table.title}`"
@@ -163,7 +159,6 @@ const availableTables = computed(() => {
           :data-title="table.title"
           :data-base-id="base?.id"
           :data-type="table.type"
-          @click="openTable(table)"
         >
         </TableNode>
       </div>
diff --git a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
index 95d2930103..7d4e2b1192 100644
--- a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
@@ -20,6 +20,10 @@ const project = toRef(props, 'project')
 const table = toRef(props, 'table')
 const baseIndex = toRef(props, 'baseIndex')
 
+const { openTable } = useTableNew({
+  projectId: project.value.id!,
+})
+
 const route = useRoute()
 
 const { isUIAllowed } = useRoles()
@@ -34,9 +38,13 @@ useTableNew({
 })
 
 const projectRole = inject(ProjectRoleInj)
+provide(SidebarTableInj, table)
 
 const { setMenuContext, openRenameTableDialog, duplicateTable } = inject(TreeViewInj)!
 
+const { loadViews: _loadViews } = useViewsStore()
+const { activeView } = storeToRefs(useViewsStore())
+
 // todo: temp
 const { projectTables } = storeToRefs(useTablesStore())
 const tables = computed(() => projectTables.value.get(project.value.id!) ?? [])
@@ -73,80 +81,127 @@ const { isSharedBase } = useProject()
 const canUserEditEmote = computed(() => {
   return isUIAllowed('tableIconEdit', { roles: projectRole?.value })
 })
+
+const isExpanded = ref(false)
+const isLoading = ref(false)
+
+const onExpand = async () => {
+  if (isExpanded.value) {
+    isExpanded.value = false
+    return
+  }
+
+  isLoading.value = true
+  try {
+    await _loadViews({ tableId: table.value.id, ignoreLoading: true })
+  } catch (e) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    isLoading.value = false
+    isExpanded.value = true
+  }
+}
+
+watch(
+  () => activeView.value?.id,
+  () => {
+    if (!activeView.value) return
+
+    if (activeView.value?.fk_model_id === table.value?.id) {
+      isExpanded.value = true
+    }
+  },
+  {
+    immediate: true,
+  },
+)
+
+const isTableOpened = computed(() => {
+  return openedTableId.value === table.value?.id && activeView.value?.is_default
+})
 </script>
 
 <template>
   <div
-    class="nc-tree-item text-sm cursor-pointer group select-none"
+    class="nc-tree-item text-sm select-none w-full"
     :data-order="table.order"
     :data-id="table.id"
     :data-testid="`tree-view-table-${table.title}`"
     :data-table-id="table.id"
-    :class="[
-      // todo: table filter
-      // { hidden: !filteredTables?.includes(table), active: openedTableId === table.id },
-      `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
-      { active: openedTableId === table.id },
-    ]"
+    :class="[`nc-project-tree-tbl nc-project-tree-tbl-${table.title}`]"
   >
     <GeneralTooltip
-      class="pl-11 pr-0.75 mb-0.25 rounded-md h-7.1"
+      class="nc-tree-item-inner pl-11 pr-0.75 mb-0.25 rounded-md h-7.1 w-full group cursor-pointer hover:bg-gray-200"
       :class="{
         'hover:bg-gray-200': openedTableId !== table.id,
-        'pl-17.75': baseIndex !== 0,
-        'pl-12.25': baseIndex === 0,
+        'pl-12': baseIndex !== 0,
+        'pl-6.5': baseIndex === 0,
+        '!bg-primary-selected': isTableOpened,
       }"
       modifier-key="Alt"
     >
       <template #title>{{ table.table_name }}</template>
-      <div class="table-context flex items-center gap-1 h-full" @contextmenu="setMenuContext('table', table)">
-        <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-          <div
-            class="flex items-center nc-table-icon"
-            :class="{
-              'pointer-events-none': !canUserEditEmote,
-            }"
-            @click.stop
-          >
-            <LazyGeneralEmojiPicker
-              :key="table.meta?.icon"
-              :emoji="table.meta?.icon"
-              size="small"
-              :readonly="!canUserEditEmote"
-              @emoji-selected="setIcon($event, table)"
+      <div
+        class="table-context flex items-center gap-1 h-full"
+        @contextmenu="setMenuContext('table', table)"
+        @click="openTable(table)"
+      >
+        <div class="flex flex-row h-full items-center">
+          <NcButton type="text" size="xxsmall" class="nc-sidebar-node-btn" @click.stop="onExpand">
+            <GeneralIcon
+              icon="triangleFill"
+              class="nc-sidebar-base-node-btns group-hover:visible invisible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.5 !text-gray-600 rotate-90 hover:bg-"
+              :class="{ '!rotate-180': isExpanded }"
+            />
+          </NcButton>
+          <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
+            <div
+              class="flex items-center nc-table-icon"
+              :class="{
+                'pointer-events-none': !canUserEditEmote,
+              }"
+              @click.stop
             >
-              <template #default>
-                <NcTooltip class="flex" placement="topLeft" hide-on-click :disabled="!canUserEditEmote">
-                  <template #title>
-                    {{ 'Change icon' }}
-                  </template>
-
-                  <MdiTable
-                    v-if="table.type === 'table'"
-                    class="flex w-5 !text-gray-500 text-sm"
-                    :class="{
-                      'group-hover:text-gray-500': isUIAllowed('tableSort', { roles: projectRole }),
-                      '!text-black': openedTableId === table.id,
-                    }"
-                  />
-                  <MdiEye
-                    v-else
-                    class="flex w-5 !text-gray-500 text-sm"
-                    :class="{
-                      'group-hover:text-gray-500': isUIAllowed('tableSort', { roles: projectRole }),
-                      '!text-black': openedTableId === table.id,
-                    }"
-                  />
-                </NcTooltip>
-              </template>
-            </LazyGeneralEmojiPicker>
+              <LazyGeneralEmojiPicker
+                :key="table.meta?.icon"
+                :emoji="table.meta?.icon"
+                size="small"
+                :readonly="!canUserEditEmote"
+                @emoji-selected="setIcon($event, table)"
+              >
+                <template #default>
+                  <NcTooltip class="flex" placement="topLeft" hide-on-click :disabled="!canUserEditEmote">
+                    <template #title>
+                      {{ 'Change icon' }}
+                    </template>
+
+                    <MdiTable
+                      v-if="table.type === 'table'"
+                      class="flex w-5 !text-gray-500 text-sm"
+                      :class="{
+                        'group-hover:text-gray-500': isUIAllowed('tableSort', { roles: projectRole }),
+                        '!text-black': openedTableId === table.id,
+                      }"
+                    />
+                    <MdiEye
+                      v-else
+                      class="flex w-5 !text-gray-500 text-sm"
+                      :class="{
+                        'group-hover:text-gray-500': isUIAllowed('tableSort', { roles: projectRole }),
+                        '!text-black': openedTableId === table.id,
+                      }"
+                    />
+                  </NcTooltip>
+                </template>
+              </LazyGeneralEmojiPicker>
+            </div>
           </div>
         </div>
 
         <span
           class="nc-tbl-title capitalize text-ellipsis overflow-hidden select-none"
           :class="{
-            'text-black !font-semibold': openedTableId === table.id,
+            'text-black !font-medium': isTableOpened,
           }"
           :data-testid="`nc-tbl-title-${table.title}`"
           :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
@@ -155,58 +210,65 @@ const canUserEditEmote = computed(() => {
         </span>
         <div class="flex flex-grow h-full"></div>
 
-        <NcDropdown
-          v-if="
-            !isSharedBase &&
-            (isUIAllowed('tableRename', { roles: projectRole }) || isUIAllowed('tableDelete', { roles: projectRole }))
-          "
-          :trigger="['click']"
-          @click.stop
-        >
-          <MdiDotsHorizontal
-            class="min-w-5.75 min-h-5.75 mt-0.2 mr-0.25 px-0.5 transition-opacity opacity-0 group-hover:opacity-100 nc-tbl-context-menu outline-0 rounded-md hover:(bg-gray-500 bg-opacity-15 !text-black)"
-            :class="{
-              '!text-gray-600': openedTableId !== table.id,
-              '!text-black': openedTableId === table.id,
-            }"
-          />
-
-          <template #overlay>
-            <NcMenu>
-              <NcMenuItem
-                v-if="isUIAllowed('tableRename', { roles: projectRole })"
-                :data-testid="`sidebar-table-rename-${table.title}`"
-                @click="openRenameTableDialog(table, project.bases[baseIndex].id)"
-              >
-                <GeneralIcon icon="edit" class="text-gray-700" />
-                {{ $t('general.rename') }}
-              </NcMenuItem>
-
-              <NcMenuItem
-                v-if="
-                  isUIAllowed('tableDuplicate') &&
-                  project.bases?.[baseIndex] &&
-                  (project.bases[baseIndex].is_meta || project.bases[baseIndex].is_local)
-                "
-                :data-testid="`sidebar-table-duplicate-${table.title}`"
-                @click="duplicateTable(table)"
-              >
-                <GeneralIcon icon="duplicate" class="text-gray-700" />
-                {{ $t('general.duplicate') }}
-              </NcMenuItem>
-
-              <NcMenuItem
-                v-if="isUIAllowed('tableDelete', { roles: projectRole })"
-                :data-testid="`sidebar-table-delete-${table.title}`"
-                class="!text-red-500 !hover:bg-red-50"
-                @click="isTableDeleteDialogVisible = true"
-              >
-                <GeneralIcon icon="delete" />
-                {{ $t('general.delete') }}
-              </NcMenuItem>
-            </NcMenu>
-          </template>
-        </NcDropdown>
+        <div class="flex flex-row items-center">
+          <NcDropdown
+            v-if="
+              !isSharedBase &&
+              (isUIAllowed('tableRename', { roles: projectRole }) || isUIAllowed('tableDelete', { roles: projectRole }))
+            "
+            :trigger="['click']"
+            @click.stop
+          >
+            <MdiDotsHorizontal
+              class="min-w-5.75 min-h-5.75 mt-0.2 mr-0.25 px-0.5 transition-opacity opacity-0 group-hover:opacity-100 nc-tbl-context-menu outline-0 rounded-md hover:(bg-gray-500 bg-opacity-15 !text-black)"
+              :class="{
+                '!text-gray-600': openedTableId !== table.id,
+                '!text-black': openedTableId === table.id,
+              }"
+            />
+
+            <template #overlay>
+              <NcMenu>
+                <NcMenuItem
+                  v-if="isUIAllowed('tableRename', { roles: projectRole })"
+                  :data-testid="`sidebar-table-rename-${table.title}`"
+                  @click="openRenameTableDialog(table, project.bases[baseIndex].id)"
+                >
+                  <GeneralIcon icon="edit" class="text-gray-700" />
+                  {{ $t('general.rename') }}
+                </NcMenuItem>
+
+                <NcMenuItem
+                  v-if="
+                    isUIAllowed('tableDuplicate') &&
+                    project.bases?.[baseIndex] &&
+                    (project.bases[baseIndex].is_meta || project.bases[baseIndex].is_local)
+                  "
+                  :data-testid="`sidebar-table-duplicate-${table.title}`"
+                  @click="duplicateTable(table)"
+                >
+                  <GeneralIcon icon="duplicate" class="text-gray-700" />
+                  {{ $t('general.duplicate') }}
+                </NcMenuItem>
+
+                <NcMenuItem
+                  v-if="isUIAllowed('tableDelete', { roles: projectRole })"
+                  :data-testid="`sidebar-table-delete-${table.title}`"
+                  class="!text-red-500 !hover:bg-red-50"
+                  @click="isTableDeleteDialogVisible = true"
+                >
+                  <GeneralIcon icon="delete" />
+                  {{ $t('general.delete') }}
+                </NcMenuItem>
+              </NcMenu>
+            </template>
+          </NcDropdown>
+          <DashboardTreeViewCreateViewBtn>
+            <NcButton type="text" size="xxsmall" class="nc-sidebar-node-btn">
+              <GeneralIcon icon="plus" class="text-xl leading-5" style="-webkit-text-stroke: 0.15px" />
+            </NcButton>
+          </DashboardTreeViewCreateViewBtn>
+        </div>
       </div>
       <DlgTableDelete
         v-if="table.id && project?.id"
@@ -215,24 +277,16 @@ const canUserEditEmote = computed(() => {
         :project-id="project.id"
       />
     </GeneralTooltip>
+    <DashboardTreeViewViewsList v-if="isExpanded" :table-id="table.id" :project-id="project.id" />
   </div>
 </template>
 
 <style scoped lang="scss">
 .nc-tree-item {
-  @apply relative cursor-pointer after:(pointer-events-none content-[''] rounded absolute top-0 left-0  w-full h-full right-0 !bg-current transition transition-opactity duration-100 opacity-0);
+  @apply relative after:(pointer-events-none content-[''] rounded absolute top-0 left-0  w-full h-full right-0 !bg-current transition duration-100 opacity-0);
 }
 
 .nc-tree-item svg {
   @apply text-primary text-opacity-60;
 }
-
-.nc-tree-item.active {
-  @apply !bg-primary-selected rounded-md;
-  //@apply border-r-3 border-primary;
-
-  svg {
-    @apply !text-opacity-100;
-  }
-}
 </style>
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
new file mode 100644
index 0000000000..1a586c1cc1
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
@@ -0,0 +1,392 @@
+<script lang="ts" setup>
+import type { ViewType } from 'nocodb-sdk'
+import { ViewTypes } from 'nocodb-sdk'
+import type { SortableEvent } from 'sortablejs'
+import Sortable from 'sortablejs'
+import type { Menu as AntMenu } from 'ant-design-vue'
+import {
+  extractSdkResponseErrorMsg,
+  message,
+  onMounted,
+  parseProp,
+  ref,
+  resolveComponent,
+  useApi,
+  useCommandPalette,
+  useDialog,
+  useNuxtApp,
+  useRouter,
+  useUndoRedo,
+  viewTypeAlias,
+  watch,
+} from '#imports'
+
+interface Emits {
+  (event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string; groupingFieldColumnId?: string }): void
+
+  (event: 'deleted'): void
+}
+
+const emits = defineEmits<Emits>()
+const project = inject(ProjectInj)!
+const table = inject(SidebarTableInj)!
+
+const { $e } = useNuxtApp()
+
+const isDefaultBase = computed(() => {
+  const base = project.value?.bases?.find((b) => b.id === table.value.base_id)
+
+  return base?.is_meta
+})
+
+const { viewsByTable, activeView } = storeToRefs(useViewsStore())
+
+const views = computed(() => viewsByTable.value.get(table.value.id!)?.filter((v) => !v.is_default) ?? [])
+
+const { api } = useApi()
+
+const router = useRouter()
+
+const { refreshCommandPalette } = useCommandPalette()
+
+const { addUndo, defineModelScope } = useUndoRedo()
+
+/** Selected view(s) for menu */
+const selected = ref<string[]>([])
+
+/** dragging renamable view items */
+const dragging = ref(false)
+
+const menuRef = ref<typeof AntMenu>()
+
+const isMarked = ref<string | false>(false)
+
+/** Watch currently active view, so we can mark it in the menu */
+watch(activeView, (nextActiveView) => {
+  if (nextActiveView && nextActiveView.id) {
+    selected.value = [nextActiveView.id]
+  }
+})
+
+/** shortly mark an item after sorting */
+function markItem(id: string) {
+  isMarked.value = id
+  setTimeout(() => {
+    isMarked.value = false
+  }, 300)
+}
+
+/** validate view title */
+function validate(view: ViewType) {
+  if (!view.title || view.title.trim().length < 0) {
+    return 'View name is required'
+  }
+
+  if (views.value.some((v) => v.title === view.title && v.id !== view.id)) {
+    return 'View name should be unique'
+  }
+
+  return true
+}
+
+let sortable: Sortable
+
+function onSortStart(evt: SortableEvent) {
+  evt.stopImmediatePropagation()
+  evt.preventDefault()
+  dragging.value = true
+}
+
+async function onSortEnd(evt: SortableEvent, undo = false) {
+  if (!undo) {
+    evt.stopImmediatePropagation()
+    evt.preventDefault()
+    dragging.value = false
+  }
+
+  if (views.value.length < 2) return
+
+  const { newIndex = 0, oldIndex = 0 } = evt
+
+  if (newIndex === oldIndex) return
+
+  if (!undo) {
+    addUndo({
+      redo: {
+        fn: async () => {
+          const ord = sortable.toArray()
+          const temp = ord.splice(oldIndex, 1)
+          ord.splice(newIndex, 0, temp[0])
+          sortable.sort(ord)
+          await onSortEnd(evt, true)
+        },
+        args: [],
+      },
+      undo: {
+        fn: async () => {
+          const ord = sortable.toArray()
+          const temp = ord.splice(newIndex, 1)
+          ord.splice(oldIndex, 0, temp[0])
+          sortable.sort(ord)
+          await onSortEnd({ ...evt, oldIndex: newIndex, newIndex: oldIndex }, true)
+        },
+        args: [],
+      },
+      scope: defineModelScope({ view: activeView.value }),
+    })
+  }
+
+  const children = evt.to.children as unknown as HTMLLIElement[]
+
+  const previousEl = children[newIndex - 1]
+  const nextEl = children[newIndex + 1]
+
+  const currentItem = views.value.find((v) => v.id === evt.item.id)
+
+  if (!currentItem || !currentItem.id) return
+
+  const previousItem = (previousEl ? views.value.find((v) => v.id === previousEl.id) : {}) as ViewType
+  const nextItem = (nextEl ? views.value.find((v) => v.id === nextEl.id) : {}) as ViewType
+
+  let nextOrder: number
+
+  // set new order value based on the new order of the items
+  if (views.value.length - 1 === newIndex) {
+    nextOrder = parseFloat(String(previousItem.order)) + 1
+  } else if (newIndex === 0) {
+    nextOrder = parseFloat(String(nextItem.order)) / 2
+  } else {
+    nextOrder = (parseFloat(String(previousItem.order)) + parseFloat(String(nextItem.order))) / 2
+  }
+
+  const _nextOrder = !isNaN(Number(nextOrder)) ? nextOrder : oldIndex
+
+  currentItem.order = _nextOrder
+
+  await api.dbView.update(currentItem.id, { order: _nextOrder })
+
+  markItem(currentItem.id)
+
+  $e('a:view:reorder')
+}
+
+const initSortable = (el: HTMLElement) => {
+  if (sortable) sortable.destroy()
+
+  sortable = new Sortable(el, {
+    // handle: '.nc-drag-icon',
+    ghostClass: 'ghost',
+    onStart: onSortStart,
+    onEnd: onSortEnd,
+  })
+}
+
+onMounted(() => menuRef.value && initSortable(menuRef.value.$el))
+
+/** Navigate to view by changing url param */
+function changeView(view: ViewType) {
+  const routeName = 'index-typeOrId-projectId-index-index-viewId-viewTitle'
+  if (
+    router.currentRoute.value.query &&
+    router.currentRoute.value.query.page &&
+    router.currentRoute.value.query.page === 'fields'
+  ) {
+    router.push({
+      name: routeName,
+      params: { viewTitle: view.id || '', viewId: table.value.id, projectId: project.value.id },
+      query: router.currentRoute.value.query,
+    })
+  } else {
+    router.push({ name: routeName, params: { viewTitle: view.id || '', viewId: table.value.id, projectId: project.value.id } })
+  }
+
+  if (view.type === ViewTypes.FORM && selected.value[0] === view.id) {
+    // reload the page if the same form view is clicked
+    // router.go(0)
+    // fix me: router.go(0) reloads entire page. need to reload only the form view
+    router
+      .replace({ name: routeName, query: { reload: 'true' }, params: { viewId: table.value.id, projectId: project.value.id } })
+      .then(() => {
+        router.replace({ name: routeName, query: {}, params: { viewId: table.value.id, projectId: project.value.id } })
+      })
+  }
+}
+
+/** Rename a view */
+async function onRename(view: ViewType, originalTitle?: string, undo = false) {
+  try {
+    await api.dbView.update(view.id!, {
+      title: view.title,
+      order: view.order,
+    })
+
+    await router.replace({
+      params: {
+        viewTitle: view.id,
+      },
+    })
+
+    refreshCommandPalette()
+
+    if (!undo) {
+      addUndo({
+        redo: {
+          fn: (v: ViewType, title: string) => {
+            const tempTitle = v.title
+            v.title = title
+            onRename(v, tempTitle, true)
+          },
+          args: [view, view.title],
+        },
+        undo: {
+          fn: (v: ViewType, title: string) => {
+            const tempTitle = v.title
+            v.title = title
+            onRename(v, tempTitle, true)
+          },
+          args: [view, originalTitle],
+        },
+        scope: defineModelScope({ view: activeView.value }),
+      })
+    }
+
+    // View renamed successfully
+    // message.success(t('msg.success.viewRenamed'))
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+/** Open delete modal */
+function openDeleteDialog(view: ViewType) {
+  const isOpen = ref(true)
+
+  const { close } = useDialog(resolveComponent('DlgViewDelete'), {
+    'modelValue': isOpen,
+    'view': view,
+    'onUpdate:modelValue': closeDialog,
+    'onDeleted': () => {
+      closeDialog()
+
+      emits('deleted')
+
+      refreshCommandPalette()
+      if (activeView.value === view) {
+        // return to the default view
+        router.replace({
+          params: {
+            viewTitle: views.value[0].id,
+          },
+        })
+      }
+    },
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+
+    close(1000)
+  }
+}
+
+const setIcon = async (icon: string, view: ViewType) => {
+  try {
+    // modify the icon property in meta
+    view.meta = {
+      ...parseProp(view.meta),
+      icon,
+    }
+
+    api.dbView.update(view.id as string, {
+      meta: view.meta,
+    })
+
+    $e('a:view:icon:sidebar', { icon })
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+</script>
+
+<template>
+  <DashboardTreeViewCreateViewBtn :overlay-class-name="isDefaultBase ? '!left-18 !min-w-42' : '!left-25 !min-w-42'">
+    <NcButton
+      type="text"
+      size="xsmall"
+      class="!w-full !py-0 !h-7 !text-gray-500 !hover:(bg-transparent font-normal text-brand-500) !font-normal !text-sm"
+      :centered="false"
+    >
+      <GeneralIcon
+        icon="plus"
+        class="mr-2"
+        :class="{
+          'ml-18.75': isDefaultBase,
+          'ml-24.25': !isDefaultBase,
+        }"
+      />
+      <span class="text-sm">New View</span>
+    </NcButton>
+  </DashboardTreeViewCreateViewBtn>
+
+  <a-menu
+    ref="menuRef"
+    :class="{ dragging }"
+    class="nc-views-menu flex flex-col w-full !border-r-0 !bg-inherit"
+    :selected-keys="selected"
+  >
+    <DashboardTreeViewViewsNode
+      v-for="view of views"
+      :id="view.id"
+      :key="view.id"
+      :view="view"
+      :on-validate="validate"
+      class="nc-view-item !rounded-md !px-0.75 !py-0.5 w-full transition-all ease-in duration-100"
+      :class="{
+        'bg-gray-200': isMarked === view.id,
+        'active': activeView?.id === view.id,
+        [`nc-${view.type ? viewTypeAlias[view.type] : undefined || view.type}-view-item`]: true,
+      }"
+      :data-view-id="view.id"
+      @change-view="changeView"
+      @open-modal="$emit('openModal', $event)"
+      @delete="openDeleteDialog"
+      @rename="onRename"
+      @select-icon="setIcon($event, view)"
+    />
+  </a-menu>
+</template>
+
+<style lang="scss">
+.nc-views-menu {
+  .ghost,
+  .ghost > * {
+    @apply !pointer-events-none;
+  }
+
+  &.dragging {
+    .nc-icon {
+      @apply !hidden;
+    }
+
+    .nc-view-icon {
+      @apply !block;
+    }
+  }
+
+  .ant-menu-item:not(.sortable-chosen) {
+    @apply color-transition;
+  }
+
+  .ant-menu-title-content {
+    @apply !w-full;
+  }
+
+  .sortable-chosen {
+    @apply !bg-gray-200;
+  }
+
+  .active {
+    @apply !bg-primary-selected font-medium;
+  }
+}
+</style>
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
new file mode 100644
index 0000000000..74daf9a809
--- /dev/null
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
@@ -0,0 +1,296 @@
+<script lang="ts" setup>
+import type { VNodeRef } from '@vue/runtime-core'
+import type { KanbanType, ViewType, ViewTypes } from 'nocodb-sdk'
+import type { WritableComputedRef } from '@vue/reactivity'
+import { IsLockedInj, inject, message, onKeyStroke, useDebounceFn, useNuxtApp, useRoles, useVModel } from '#imports'
+
+interface Props {
+  view: ViewType
+  onValidate: (view: ViewType) => boolean | string
+}
+
+interface Emits {
+  (event: 'update:view', data: Record<string, any>): void
+
+  (event: 'selectIcon', icon: string): void
+
+  (event: 'changeView', view: Record<string, any>): void
+
+  (event: 'rename', view: ViewType, title: string | undefined): void
+
+  (event: 'delete', view: ViewType): void
+
+  (event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string; groupingFieldColumnId?: string }): void
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits<Emits>()
+
+const vModel = useVModel(props, 'view', emits) as WritableComputedRef<ViewType & { alias?: string; is_default: boolean }>
+
+const { $e } = useNuxtApp()
+
+const { isUIAllowed } = useRoles()
+
+const { activeViewTitleOrId } = storeToRefs(useViewsStore())
+
+const project = inject(ProjectInj, ref())
+
+const activeView = inject(ActiveViewInj, ref())
+
+const isLocked = inject(IsLockedInj, ref(false))
+
+const { rightSidebarState } = storeToRefs(useSidebarStore())
+
+const isDefaultBase = computed(() => {
+  const base = project.value?.bases?.find((b) => b.id === vModel.value.base_id)
+
+  return base?.is_meta
+})
+
+const isDropdownOpen = ref(false)
+
+const isEditing = ref(false)
+/** Is editing the view name enabled */
+
+/** Helper to check if editing was disabled before the view navigation timeout triggers */
+const isStopped = ref(false)
+
+/** Original view title when editing the view name */
+const _title = ref<string | undefined>()
+
+/** Debounce click handler, so we can potentially enable editing view name {@see onDblClick} */
+const onClick = useDebounceFn(() => {
+  if (isEditing.value || isStopped.value) return
+
+  emits('changeView', vModel.value)
+}, 250)
+
+/** Enable editing view name on dbl click */
+function onDblClick() {
+  if (!isUIAllowed('viewCreateOrEdit')) return
+
+  if (!isEditing.value) {
+    isEditing.value = true
+    _title.value = vModel.value.title
+    $e('c:view:rename', { view: vModel.value?.type })
+  }
+}
+
+/** Handle keydown on input field */
+function onKeyDown(event: KeyboardEvent) {
+  if (event.key === 'Escape') {
+    onKeyEsc(event)
+  } else if (event.key === 'Enter') {
+    onKeyEnter(event)
+  }
+}
+
+/** Rename view when enter is pressed */
+function onKeyEnter(event: KeyboardEvent) {
+  event.stopImmediatePropagation()
+  event.preventDefault()
+
+  onRename()
+}
+
+/** Disable renaming view when escape is pressed */
+function onKeyEsc(event: KeyboardEvent) {
+  event.stopImmediatePropagation()
+  event.preventDefault()
+
+  onCancel()
+}
+
+onKeyStroke('Enter', (event) => {
+  if (isEditing.value) {
+    onKeyEnter(event)
+  }
+})
+
+const focusInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
+
+/** Duplicate a view */
+// todo: This is not really a duplication, maybe we need to implement a true duplication?
+function onDuplicate() {
+  isDropdownOpen.value = false
+
+  emits('openModal', {
+    type: vModel.value.type!,
+    title: vModel.value.title,
+    copyViewId: vModel.value.id,
+    groupingFieldColumnId: (vModel.value.view as KanbanType).fk_grp_col_id!,
+  })
+
+  $e('c:view:copy', { view: vModel.value.type })
+}
+
+/** Delete a view */
+async function onDelete() {
+  isDropdownOpen.value = false
+
+  emits('delete', vModel.value)
+}
+
+/** Rename a view */
+async function onRename() {
+  isDropdownOpen.value = false
+  if (!isEditing.value) return
+
+  const isValid = props.onValidate({ ...vModel.value, title: _title.value! })
+
+  if (isValid !== true) {
+    message.error(isValid)
+
+    onCancel()
+    return
+  }
+
+  if (vModel.value.title === '' || vModel.value.title === _title.value) {
+    onCancel()
+    return
+  }
+
+  const originalTitle = vModel.value.title
+
+  vModel.value.title = _title.value || ''
+
+  emits('rename', vModel.value, originalTitle)
+
+  onStopEdit()
+}
+
+/** Cancel renaming view */
+function onCancel() {
+  if (!isEditing.value) return
+
+  // vModel.value.title = _title || ''
+  onStopEdit()
+}
+
+/** Stop editing view name, timeout makes sure that view navigation (click trigger) does not pick up before stop is done */
+function onStopEdit() {
+  isStopped.value = true
+  isEditing.value = false
+  _title.value = ''
+
+  setTimeout(() => {
+    isStopped.value = false
+  }, 250)
+}
+
+watch(rightSidebarState, () => {
+  if (rightSidebarState.value === 'peekCloseEnd') {
+    isDropdownOpen.value = false
+  }
+})
+
+function onRef(el: HTMLElement) {
+  if (activeViewTitleOrId.value === vModel.value.id) {
+    nextTick(() => {
+      setTimeout(() => {
+        el?.scrollIntoView({ block: 'center', inline: 'center' })
+      }, 1000)
+    })
+  }
+}
+</script>
+
+<template>
+  <a-menu-item
+    class="!min-h-7 !max-h-7 !mb-0.25 select-none group text-gray-700 !flex !items-center !mt-0 hover:(!bg-gray-200 !text-gray-900) cursor-pointer"
+    :class="{
+      '!pl-18': isDefaultBase,
+      '!pl-23.5': !isDefaultBase,
+    }"
+    :data-testid="`view-sidebar-view-${vModel.alias || vModel.title}`"
+    @dblclick.stop="onDblClick"
+    @click="onClick"
+  >
+    <div
+      :ref="onRef"
+      v-e="['a:view:open', { view: vModel.type }]"
+      class="text-sm flex items-center w-full gap-1"
+      data-testid="view-item"
+    >
+      <div class="flex min-w-6" :data-testid="`view-sidebar-drag-handle-${vModel.alias || vModel.title}`">
+        <LazyGeneralEmojiPicker
+          class="nc-table-icon"
+          :emoji="props.view?.meta?.icon"
+          size="small"
+          :clearable="true"
+          @emoji-selected="emits('selectIcon', $event)"
+        >
+          <template #default>
+            <GeneralViewIcon :meta="props.view" class="nc-view-icon"></GeneralViewIcon>
+          </template>
+        </LazyGeneralEmojiPicker>
+      </div>
+
+      <a-input
+        v-if="isEditing"
+        :ref="focusInput"
+        v-model:value="_title"
+        class="!bg-transparent !border-0 !ring-0 !outline-transparent !border-transparent"
+        :class="{
+          'font-medium': activeView?.id === vModel.id,
+        }"
+        @blur="onRename"
+        @keydown.stop="onKeyDown($event)"
+      />
+
+      <div
+        v-else
+        class="capitalize text-ellipsis overflow-hidden select-none w-full"
+        data-testid="sidebar-view-title"
+        :class="{
+          'font-medium': activeView?.id === vModel.id,
+        }"
+        :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
+      >
+        {{ vModel.alias || vModel.title }}
+      </div>
+
+      <div class="flex-1" />
+
+      <template v-if="!isEditing && !isLocked && isUIAllowed('viewCreateOrEdit')">
+        <NcDropdown v-model:visible="isDropdownOpen" overlay-class-name="!rounded-lg">
+          <NcButton
+            type="text"
+            size="xxsmall"
+            class="nc-sidebar-node-btn invisible !group-hover:visible"
+            :class="{
+              '!visible': isDropdownOpen,
+            }"
+            @click.stop="isDropdownOpen = !isDropdownOpen"
+          >
+            <GeneralIcon icon="threeDotHorizontal" class="text-xl w-4.75" />
+          </NcButton>
+
+          <template #overlay>
+            <NcMenu class="min-w-27" :data-testid="`view-sidebar-view-actions-${vModel.alias || vModel.title}`">
+              <NcMenuItem @click.stop="onDblClick">
+                <GeneralIcon icon="edit" />
+                Rename
+              </NcMenuItem>
+              <NcMenuItem @click.stop="onDuplicate">
+                <GeneralIcon icon="copy" />
+                Duplicate
+              </NcMenuItem>
+
+              <NcDivider />
+
+              <template v-if="!vModel.is_default">
+                <NcMenuItem class="!text-red-500" @click.stop="onDelete">
+                  <GeneralIcon icon="delete" class="text-sm" />
+                  <div class="-ml-0.25">Delete</div>
+                </NcMenuItem>
+              </template>
+            </NcMenu>
+          </template>
+        </NcDropdown>
+      </template>
+    </div>
+  </a-menu-item>
+</template>
diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index 185d5bb2e2..1e1ba17cad 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -14,7 +14,7 @@ interface Props {
   groupingFieldColumnId?: string
   geoDataFieldColumnId?: string
   views: ViewType[]
-  meta: TableType
+  tableId: string
 }
 
 interface Emits {
@@ -31,10 +31,20 @@ interface Form {
   fk_geo_data_col_id: string | null
 }
 
-const { views = [], meta, selectedViewId, groupingFieldColumnId, geoDataFieldColumnId, ...props } = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  selectedViewId: undefined,
+  groupingFieldColumnId: undefined,
+  geoDataFieldColumnId: undefined,
+})
 
 const emits = defineEmits<Emits>()
 
+const { getMeta } = useMetas()
+
+const { views, selectedViewId, groupingFieldColumnId, geoDataFieldColumnId, tableId } = toRefs(props)
+
+const meta = ref<TableType | undefined>()
+
 const inputEl = ref<ComponentPublicInstance>()
 
 const formValidator = ref<typeof AntForm>()
@@ -64,7 +74,7 @@ const viewNameRules = [
   {
     validator: (_: unknown, v: string) =>
       new Promise((resolve, reject) => {
-        views.every((v1) => v1.title !== v) ? resolve(true) : reject(new Error(`View name should be unique`))
+        views.value.every((v1) => v1.title !== v) ? resolve(true) : reject(new Error(`View name should be unique`))
       }),
     message: 'View name should be unique',
   },
@@ -97,52 +107,13 @@ watch(
 function init() {
   form.title = `Untitled ${capitalize(typeAlias.value)}`
 
-  const repeatCount = views.filter((v) => v.title.startsWith(form.title)).length
+  const repeatCount = views.value.filter((v) => v.title.startsWith(form.title)).length
   if (repeatCount) {
     form.title = `${form.title} ${repeatCount}`
   }
 
-  if (selectedViewId) {
-    form.copy_from_id = selectedViewId
-  }
-
-  // preset the grouping field column
-  if (props.type === ViewTypes.KANBAN) {
-    viewSelectFieldOptions.value = meta
-      .columns!.filter((el) => el.uidt === UITypes.SingleSelect)
-      .map((field) => {
-        return {
-          value: field.id,
-          label: field.title,
-        }
-      })
-
-    if (groupingFieldColumnId) {
-      // take from the one from copy view
-      form.fk_grp_col_id = groupingFieldColumnId
-    } else {
-      // take the first option
-      form.fk_grp_col_id = viewSelectFieldOptions.value?.[0]?.value as string
-    }
-  }
-
-  if (props.type === ViewTypes.MAP) {
-    viewSelectFieldOptions.value = meta
-      .columns!.filter((el) => el.uidt === UITypes.GeoData)
-      .map((field) => {
-        return {
-          value: field.id,
-          label: field.title,
-        }
-      })
-
-    if (geoDataFieldColumnId) {
-      // take from the one from copy view
-      form.fk_geo_data_col_id = geoDataFieldColumnId
-    } else {
-      // take the first option
-      form.fk_geo_data_col_id = viewSelectFieldOptions.value?.[0]?.value as string
-    }
+  if (selectedViewId.value) {
+    form.copy_from_id = selectedViewId?.value
   }
 
   nextTick(() => {
@@ -165,9 +136,7 @@ async function onSubmit() {
   }
 
   if (isValid && form.type) {
-    const _meta = unref(meta)
-
-    if (!_meta || !_meta.id) return
+    if (!tableId.value) return
 
     try {
       let data: GridType | KanbanType | GalleryType | FormType | MapType | null = null
@@ -176,19 +145,19 @@ async function onSubmit() {
 
       switch (form.type) {
         case ViewTypes.GRID:
-          data = await api.dbView.gridCreate(_meta.id, form)
+          data = await api.dbView.gridCreate(tableId.value, form)
           break
         case ViewTypes.GALLERY:
-          data = await api.dbView.galleryCreate(_meta.id, form)
+          data = await api.dbView.galleryCreate(tableId.value, form)
           break
         case ViewTypes.FORM:
-          data = await api.dbView.formCreate(_meta.id, form)
+          data = await api.dbView.formCreate(tableId.value, form)
           break
         case ViewTypes.KANBAN:
-          data = await api.dbView.kanbanCreate(_meta.id, form)
+          data = await api.dbView.kanbanCreate(tableId.value, form)
           break
         case ViewTypes.MAP:
-          data = await api.dbView.mapCreate(_meta.id, form)
+          data = await api.dbView.mapCreate(tableId.value, form)
       }
 
       if (data) {
@@ -208,6 +177,60 @@ async function onSubmit() {
     }, 500)
   }
 }
+
+const isMetaLoading = ref(false)
+
+onMounted(async () => {
+  if (props.type === ViewTypes.KANBAN || props.type === ViewTypes.MAP) {
+    isMetaLoading.value = true
+    try {
+      meta.value = (await getMeta(tableId.value))!
+
+      if (props.type === ViewTypes.MAP) {
+        viewSelectFieldOptions.value = meta
+          .value!.columns!.filter((el) => el.uidt === UITypes.GeoData)
+          .map((field) => {
+            return {
+              value: field.id,
+              label: field.title,
+            }
+          })
+
+        if (geoDataFieldColumnId.value) {
+          // take from the one from copy view
+          form.fk_geo_data_col_id = geoDataFieldColumnId.value
+        } else {
+          // take the first option
+          form.fk_geo_data_col_id = viewSelectFieldOptions.value?.[0]?.value as string
+        }
+      }
+
+      // preset the grouping field column
+      if (props.type === ViewTypes.KANBAN) {
+        viewSelectFieldOptions.value = meta.value
+          .columns!.filter((el) => el.uidt === UITypes.SingleSelect)
+          .map((field) => {
+            return {
+              value: field.id,
+              label: field.title,
+            }
+          })
+
+        if (groupingFieldColumnId.value) {
+          // take from the one from copy view
+          form.fk_grp_col_id = groupingFieldColumnId.value
+        } else {
+          // take the first option
+          form.fk_grp_col_id = viewSelectFieldOptions.value?.[0]?.value as string
+        }
+      }
+    } catch (e) {
+      console.error(e)
+    } finally {
+      isMetaLoading.value = false
+    }
+  }
+})
 </script>
 
 <template>
@@ -237,11 +260,11 @@ async function onSubmit() {
           name="fk_grp_col_id"
           :rules="groupingFieldColumnRules"
         >
-          <a-select
+          <NcSelect
             v-model:value="form.fk_grp_col_id"
             class="w-full nc-kanban-grouping-field-select"
-            :options="viewSelectFieldOptions"
-            :disabled="groupingFieldColumnId"
+            :disabled="groupingFieldColumnId || isMetaLoading"
+            :loading="true"
             placeholder="Select a Grouping Field"
             not-found-content="No Single Select Field can be found. Please create one first."
           />
@@ -252,11 +275,12 @@ async function onSubmit() {
           name="fk_geo_data_col_id"
           :rules="geoDataFieldColumnRules"
         >
-          <a-select
+          <NcSelect
             v-model:value="form.fk_geo_data_col_id"
             class="w-full"
             :options="viewSelectFieldOptions"
-            :disabled="geoDataFieldColumnId"
+            :disabled="groupingFieldColumnId || isMetaLoading"
+            :loading="isMetaLoading"
             placeholder="Select a GeoData Field"
             not-found-content="No GeoData Field can be found. Please create one first."
           />
diff --git a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
index 94031e9ecf..200af9f5e6 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
@@ -355,7 +355,7 @@ watch(
   </a-menu>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .nc-views-menu {
   @apply min-h-20 flex-grow;
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
index 0d2a5926dd..ed05b2ad74 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
@@ -18,11 +18,21 @@ const { activeTable } = storeToRefs(useTablesStore())
   >
     <LazyGeneralEmojiPicker :emoji="activeTable?.meta?.icon" readonly size="xsmall">
       <template #default>
-        <MdiTable class="min-w-5 !text-gray-500" :class="{}" />
+        <MdiTable
+          class="min-w-5 !text-gray-500"
+          :class="{
+            '!text-gray-500': !selectedView?.is_default,
+            '!text-gray-800 mr-0.25': selectedView?.is_default,
+          }"
+        />
       </template>
     </LazyGeneralEmojiPicker>
     <span
-      class="text-ellipsis overflow-hidden pl-1 text-gray-500 max-w-1/2"
+      class="text-ellipsis overflow-hidden pl-1 max-w-1/2"
+      :class="{
+        'text-gray-500': !selectedView?.is_default,
+        'text-gray-700': selectedView?.is_default,
+      }"
       :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
     >
       {{ activeTable?.title }}
@@ -38,6 +48,7 @@ const { activeTable } = storeToRefs(useTablesStore())
     <span class="truncate pl-1.25 text-gray-700 max-w-28/100">
       {{ selectedView?.title }}
     </span>
+
     <LazySmartsheetToolbarReload v-if="openedViewsTab === 'view'" />
   </div>
 </template>
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index 805567f7f6..7fc4e8ddbd 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -43,6 +43,7 @@ export const ProjectStarredModeInj: InjectionKey<Ref<boolean>> = Symbol('project
 export const ProjectInj: InjectionKey<Ref<NcProject>> = Symbol('project-injection')
 export const ProjectIdInj: InjectionKey<Ref<string>> = Symbol('project-id-injection')
 export const EditColumnInj: InjectionKey<Ref<boolean>> = Symbol('edit-column-injection')
+export const SidebarTableInj: InjectionKey<Ref<TableType>> = Symbol('sidebar-table-injection')
 export const TreeViewInj: InjectionKey<{
   setMenuContext: (type: 'project' | 'base' | 'table' | 'main' | 'layout', value?: any) => void
   duplicateTable: (table: TableType) => void

From 351f787bb2fffe305a75419f1493b4f8e8b860f3 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:15 +0000
Subject: [PATCH 09/25] fix: Removed right view sidebar

---
 .../smartsheet/sidebar/MenuBottom.vue         | 151 -------
 .../components/smartsheet/sidebar/MenuTop.vue | 389 ------------------
 .../smartsheet/sidebar/RenameableMenuItem.vue | 292 -------------
 .../components/smartsheet/sidebar/index.vue   | 281 -------------
 .../nc-gui/components/tabs/Smartsheet.vue     |  45 +-
 .../components/tabs/SmartsheetResizable.vue   | 209 ----------
 6 files changed, 19 insertions(+), 1348 deletions(-)
 delete mode 100644 packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue
 delete mode 100644 packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
 delete mode 100644 packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
 delete mode 100644 packages/nc-gui/components/smartsheet/sidebar/index.vue
 delete mode 100644 packages/nc-gui/components/tabs/SmartsheetResizable.vue

diff --git a/packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue
deleted file mode 100644
index 465a61d15f..0000000000
--- a/packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue
+++ /dev/null
@@ -1,151 +0,0 @@
-<script lang="ts" setup>
-import { ViewTypes } from 'nocodb-sdk'
-import { iconMap, useNuxtApp, useSmartsheetStoreOrThrow, viewIcons } from '#imports'
-
-const emits = defineEmits<Emits>()
-
-interface Emits {
-  (event: 'openModal', data: { type: ViewTypes; title?: string }): void
-}
-
-const { $e } = useNuxtApp()
-
-const { isSqlView } = useSmartsheetStoreOrThrow()
-
-const { betaFeatureToggleState } = useBetaFeatureToggle()
-
-function onOpenModal(type: ViewTypes, title = '') {
-  $e('c:view:create', { view: type })
-  emits('openModal', { type, title })
-}
-</script>
-
-<template>
-  <a-menu :selected-keys="[]" class="flex flex-col !text-gray-600 !bg-inherit">
-    <div class="px-6 text-xs flex items-center gap-4 my-2 !text-gray-700">
-      {{ $t('activity.createView') }}
-    </div>
-
-    <a-menu-item
-      key="grid"
-      class="nc-create-view group !flex !items-center !my-0 !h-2.5rem nc-create-grid-view"
-      @click="onOpenModal(ViewTypes.GRID)"
-    >
-      <a-tooltip :mouse-enter-delay="1" placement="left">
-        <template #title>
-          {{ $t('msg.info.addView.grid') }}
-        </template>
-
-        <div class="!py-0 text-xs flex items-center h-full w-full gap-2">
-          <GeneralViewIcon :meta="{ type: ViewTypes.GRID }" class="min-w-5 flex" />
-
-          <div>{{ $t('objects.viewType.grid') }}</div>
-
-          <div class="flex-1" />
-
-          <component :is="iconMap.plus" />
-        </div>
-      </a-tooltip>
-    </a-menu-item>
-
-    <a-menu-item
-      key="gallery"
-      class="nc-create-view group !flex !items-center !my-0 !h-2.5rem nc-create-gallery-view"
-      @click="onOpenModal(ViewTypes.GALLERY)"
-    >
-      <a-tooltip :mouse-enter-delay="1" placement="left">
-        <template #title>
-          {{ $t('msg.info.addView.gallery') }}
-        </template>
-
-        <div class="!py-0 text-xs flex items-center h-full w-full gap-2">
-          <GeneralViewIcon :meta="{ type: ViewTypes.GALLERY }" class="min-w-5 flex" />
-
-          <div>{{ $t('objects.viewType.gallery') }}</div>
-
-          <div class="flex-1" />
-
-          <component :is="iconMap.plus" />
-        </div>
-      </a-tooltip>
-    </a-menu-item>
-
-    <a-menu-item
-      v-if="!isSqlView"
-      key="form"
-      class="nc-create-view group !flex !items-center !my-0 !h-2.5rem nc-create-form-view"
-      @click="onOpenModal(ViewTypes.FORM)"
-    >
-      <a-tooltip :mouse-enter-delay="1" placement="left">
-        <template #title>
-          {{ $t('msg.info.addView.form') }}
-        </template>
-
-        <div class="!py-0 text-xs flex items-center h-full w-full gap-2">
-          <GeneralViewIcon :meta="{ type: ViewTypes.FORM }" class="min-w-5 flex" />
-
-          <div>{{ $t('objects.viewType.form') }}</div>
-
-          <div class="flex-1" />
-
-          <component :is="iconMap.plus" />
-        </div>
-      </a-tooltip>
-    </a-menu-item>
-
-    <a-menu-item
-      key="kanban"
-      class="nc-create-view group !flex !items-center !my-0 !h-2.5rem nc-create-kanban-view"
-      @click="onOpenModal(ViewTypes.KANBAN)"
-    >
-      <a-tooltip :mouse-enter-delay="1" placement="left">
-        <template #title>
-          {{ $t('msg.info.addView.kanban') }}
-        </template>
-
-        <div class="!py-0 text-xs flex items-center h-full w-full gap-2">
-          <GeneralViewIcon :meta="{ type: ViewTypes.KANBAN }" class="min-w-5 flex" />
-
-          <div>{{ $t('objects.viewType.kanban') }}</div>
-
-          <div class="flex-1" />
-
-          <component :is="iconMap.plus" />
-        </div>
-      </a-tooltip>
-    </a-menu-item>
-    <a-menu-item
-      v-if="betaFeatureToggleState.show"
-      key="map"
-      class="nc-create-view group !flex !items-center !my-0 !h-2.5rem nc-create-map-view"
-      @click="onOpenModal(ViewTypes.MAP)"
-    >
-      <a-tooltip :mouse-enter-delay="1" placement="left">
-        <template #title>
-          {{ $t('msg.info.addView.map') }}
-        </template>
-
-        <div class="!py-0 text-xs flex items-center h-full w-full gap-2">
-          <component :is="viewIcons[ViewTypes.MAP].icon" :style="{ color: viewIcons[ViewTypes.MAP]?.color }" />
-
-          <div>{{ $t('objects.viewType.map') }}</div>
-
-          <div class="flex-1" />
-
-          <component :is="iconMap.plus" />
-        </div>
-      </a-tooltip>
-    </a-menu-item>
-
-    <div class="w-full h-3" />
-  </a-menu>
-</template>
-
-<style lang="scss" scoped>
-:deep(.nc-create-view) {
-  @apply !py-0 !h-8 mx-3.75 rounded-md hover:(text-gray-800 bg-gray-100);
-}
-:deep(.nc-create-view.ant-menu-item) {
-  @apply px-2.25;
-}
-</style>
diff --git a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
deleted file mode 100644
index 200af9f5e6..0000000000
--- a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
+++ /dev/null
@@ -1,389 +0,0 @@
-<script lang="ts" setup>
-import type { ViewType } from 'nocodb-sdk'
-import { ViewTypes } from 'nocodb-sdk'
-import type { SortableEvent } from 'sortablejs'
-import Sortable from 'sortablejs'
-import type { Menu as AntMenu } from 'ant-design-vue'
-import {
-  ActiveViewInj,
-  extractSdkResponseErrorMsg,
-  inject,
-  message,
-  onMounted,
-  parseProp,
-  ref,
-  resolveComponent,
-  useApi,
-  useCommandPalette,
-  useDialog,
-  useNuxtApp,
-  useRouter,
-  useUndoRedo,
-  viewTypeAlias,
-  watch,
-} from '#imports'
-
-interface Props {
-  views: ViewType[]
-}
-
-interface Emits {
-  (event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string; groupingFieldColumnId?: string }): void
-
-  (event: 'deleted'): void
-}
-
-const { views = [] } = defineProps<Props>()
-
-const emits = defineEmits<Emits>()
-
-const { $e } = useNuxtApp()
-
-const activeView = inject(ActiveViewInj, ref())
-
-const { api } = useApi()
-
-const router = useRouter()
-
-const { refreshCommandPalette } = useCommandPalette()
-
-const { addUndo, defineModelScope } = useUndoRedo()
-
-/** Selected view(s) for menu */
-const selected = ref<string[]>([])
-
-/** dragging renamable view items */
-const dragging = ref(false)
-
-const menuRef = ref<typeof AntMenu>()
-
-const isMarked = ref<string | false>(false)
-
-/** Watch currently active view, so we can mark it in the menu */
-watch(activeView, (nextActiveView) => {
-  if (nextActiveView && nextActiveView.id) {
-    selected.value = [nextActiveView.id]
-  }
-})
-
-/** shortly mark an item after sorting */
-function markItem(id: string) {
-  isMarked.value = id
-  setTimeout(() => {
-    isMarked.value = false
-  }, 300)
-}
-
-/** validate view title */
-function validate(view: ViewType) {
-  if (!view.title || view.title.trim().length < 0) {
-    return 'View name is required'
-  }
-
-  if (views.some((v) => v.title === view.title && v.id !== view.id)) {
-    return 'View name should be unique'
-  }
-
-  return true
-}
-
-let sortable: Sortable
-
-function onSortStart(evt: SortableEvent) {
-  evt.stopImmediatePropagation()
-  evt.preventDefault()
-  dragging.value = true
-}
-
-async function onSortEnd(evt: SortableEvent, undo = false) {
-  if (!undo) {
-    evt.stopImmediatePropagation()
-    evt.preventDefault()
-    dragging.value = false
-  }
-
-  if (views.length < 2) return
-
-  const { newIndex = 0, oldIndex = 0 } = evt
-
-  if (newIndex === oldIndex) return
-
-  if (!undo) {
-    addUndo({
-      redo: {
-        fn: async () => {
-          const ord = sortable.toArray()
-          const temp = ord.splice(oldIndex, 1)
-          ord.splice(newIndex, 0, temp[0])
-          sortable.sort(ord)
-          await onSortEnd(evt, true)
-        },
-        args: [],
-      },
-      undo: {
-        fn: async () => {
-          const ord = sortable.toArray()
-          const temp = ord.splice(newIndex, 1)
-          ord.splice(oldIndex, 0, temp[0])
-          sortable.sort(ord)
-          await onSortEnd({ ...evt, oldIndex: newIndex, newIndex: oldIndex }, true)
-        },
-        args: [],
-      },
-      scope: defineModelScope({ view: activeView.value }),
-    })
-  }
-
-  const children = evt.to.children as unknown as HTMLLIElement[]
-
-  const previousEl = children[newIndex - 1]
-  const nextEl = children[newIndex + 1]
-
-  const currentItem = views.find((v) => v.id === evt.item.id)
-
-  if (!currentItem || !currentItem.id) return
-
-  const previousItem = (previousEl ? views.find((v) => v.id === previousEl.id) : {}) as ViewType
-  const nextItem = (nextEl ? views.find((v) => v.id === nextEl.id) : {}) as ViewType
-
-  let nextOrder: number
-
-  // set new order value based on the new order of the items
-  if (views.length - 1 === newIndex) {
-    nextOrder = parseFloat(String(previousItem.order)) + 1
-  } else if (newIndex === 0) {
-    nextOrder = parseFloat(String(nextItem.order)) / 2
-  } else {
-    nextOrder = (parseFloat(String(previousItem.order)) + parseFloat(String(nextItem.order))) / 2
-  }
-
-  const _nextOrder = !isNaN(Number(nextOrder)) ? nextOrder : oldIndex
-
-  currentItem.order = _nextOrder
-
-  await api.dbView.update(currentItem.id, { order: _nextOrder })
-
-  markItem(currentItem.id)
-
-  $e('a:view:reorder')
-}
-
-const initSortable = (el: HTMLElement) => {
-  if (sortable) sortable.destroy()
-
-  sortable = new Sortable(el, {
-    // handle: '.nc-drag-icon',
-    ghostClass: 'ghost',
-    onStart: onSortStart,
-    onEnd: onSortEnd,
-  })
-}
-
-onMounted(() => menuRef.value && initSortable(menuRef.value.$el))
-
-/** Navigate to view by changing url param */
-function changeView(view: ViewType) {
-  if (
-    router.currentRoute.value.query &&
-    router.currentRoute.value.query.page &&
-    router.currentRoute.value.query.page === 'fields'
-  ) {
-    router.push({ params: { viewTitle: view.id || '' }, query: router.currentRoute.value.query })
-  } else {
-    router.push({ params: { viewTitle: view.id || '' } })
-  }
-
-  if (view.type === ViewTypes.FORM && selected.value[0] === view.id) {
-    // reload the page if the same form view is clicked
-    // router.go(0)
-    // fix me: router.go(0) reloads entire page. need to reload only the form view
-    router.replace({ query: { reload: 'true' } }).then(() => {
-      router.replace({ query: {} })
-    })
-  }
-}
-
-/** Rename a view */
-async function onRename(view: ViewType, originalTitle?: string, undo = false) {
-  try {
-    await api.dbView.update(view.id!, {
-      title: view.title,
-      order: view.order,
-    })
-
-    await router.replace({
-      params: {
-        viewTitle: view.id,
-      },
-    })
-
-    refreshCommandPalette()
-
-    if (!undo) {
-      addUndo({
-        redo: {
-          fn: (v: ViewType, title: string) => {
-            const tempTitle = v.title
-            v.title = title
-            onRename(v, tempTitle, true)
-          },
-          args: [view, view.title],
-        },
-        undo: {
-          fn: (v: ViewType, title: string) => {
-            const tempTitle = v.title
-            v.title = title
-            onRename(v, tempTitle, true)
-          },
-          args: [view, originalTitle],
-        },
-        scope: defineModelScope({ view: activeView.value }),
-      })
-    }
-
-    // View renamed successfully
-    // message.success(t('msg.success.viewRenamed'))
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  }
-}
-
-/** Open delete modal */
-function openDeleteDialog(view: ViewType) {
-  const isOpen = ref(true)
-
-  const { close } = useDialog(resolveComponent('DlgViewDelete'), {
-    'modelValue': isOpen,
-    'view': view,
-    'onUpdate:modelValue': closeDialog,
-    'onDeleted': () => {
-      closeDialog()
-
-      emits('deleted')
-
-      refreshCommandPalette()
-      if (activeView.value === view) {
-        // return to the default view
-        router.replace({
-          params: {
-            viewTitle: views[0].id,
-          },
-        })
-      }
-    },
-  })
-
-  function closeDialog() {
-    isOpen.value = false
-
-    close(1000)
-  }
-}
-
-const setIcon = async (icon: string, view: ViewType) => {
-  try {
-    // modify the icon property in meta
-    view.meta = {
-      ...parseProp(view.meta),
-      icon,
-    }
-
-    api.dbView.update(view.id as string, {
-      meta: view.meta,
-    })
-
-    $e('a:view:icon:sidebar', { icon })
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  }
-}
-
-const scrollViewNode = () => {
-  const activeViewDom = document.querySelector(`.nc-views-menu [data-view-id="${activeView.value?.id}"]`) as HTMLElement
-  if (!activeViewDom) return
-
-  if (isElementInvisible(activeViewDom)) {
-    // Scroll to the view node
-    activeViewDom?.scrollIntoView({ behavior: 'auto', inline: 'start' })
-  }
-}
-
-watch(
-  () => activeView.value?.id,
-  () => {
-    if (!activeView.value?.id) return
-
-    // TODO: Find a better way to scroll to the view node
-    setTimeout(() => {
-      scrollViewNode()
-    }, 800)
-  },
-  {
-    immediate: true,
-  },
-)
-</script>
-
-<template>
-  <a-menu
-    ref="menuRef"
-    :class="{ dragging }"
-    class="nc-views-menu flex flex-col !ml-3 w-full !border-r-0 !bg-inherit"
-    :selected-keys="selected"
-  >
-    <!-- Lazy load breaks menu item active styles, i.e. styles never change even when active item changes -->
-    <SmartsheetSidebarRenameableMenuItem
-      v-for="view of views"
-      :id="view.id"
-      :key="view.id"
-      :view="view"
-      :on-validate="validate"
-      class="nc-view-item !rounded-md !px-1.25 !py-0.5 w-full transition-all ease-in duration-300"
-      :class="{
-        'bg-gray-200': isMarked === view.id,
-        'active': activeView?.id === view.id,
-        [`nc-${view.type ? viewTypeAlias[view.type] : undefined || view.type}-view-item`]: true,
-      }"
-      :data-view-id="view.id"
-      @change-view="changeView"
-      @open-modal="$emit('openModal', $event)"
-      @delete="openDeleteDialog"
-      @rename="onRename"
-      @select-icon="setIcon($event, view)"
-    />
-    <div class="min-h-1 max-h-1 w-full bg-transparent"></div>
-  </a-menu>
-</template>
-
-<style lang="scss" scoped>
-.nc-views-menu {
-  @apply min-h-20 flex-grow;
-
-  .ghost,
-  .ghost > * {
-    @apply !pointer-events-none;
-  }
-
-  &.dragging {
-    .nc-icon {
-      @apply !hidden;
-    }
-
-    .nc-view-icon {
-      @apply !block;
-    }
-  }
-
-  .ant-menu-item:not(.sortable-chosen) {
-    @apply color-transition;
-  }
-
-  .sortable-chosen {
-    @apply !bg-gray-100 bg-opacity-60;
-  }
-
-  .active {
-    @apply bg-gray-200 bg-opacity-60 font-medium;
-  }
-}
-</style>
diff --git a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
deleted file mode 100644
index fbe9942c92..0000000000
--- a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ /dev/null
@@ -1,292 +0,0 @@
-<script lang="ts" setup>
-import type { VNodeRef } from '@vue/runtime-core'
-import type { KanbanType, ViewType, ViewTypes } from 'nocodb-sdk'
-import type { WritableComputedRef } from '@vue/reactivity'
-import { IsLockedInj, inject, message, onKeyStroke, useDebounceFn, useNuxtApp, useRoles, useVModel } from '#imports'
-
-interface Props {
-  view: ViewType
-  onValidate: (view: ViewType) => boolean | string
-}
-
-interface Emits {
-  (event: 'update:view', data: Record<string, any>): void
-
-  (event: 'selectIcon', icon: string): void
-
-  (event: 'changeView', view: Record<string, any>): void
-
-  (event: 'rename', view: ViewType, title: string | undefined): void
-
-  (event: 'delete', view: ViewType): void
-
-  (event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string; groupingFieldColumnId?: string }): void
-}
-
-const props = defineProps<Props>()
-
-const emits = defineEmits<Emits>()
-
-const vModel = useVModel(props, 'view', emits) as WritableComputedRef<ViewType & { alias?: string; is_default: boolean }>
-
-const { $e } = useNuxtApp()
-
-const { isUIAllowed } = useRoles()
-
-const activeView = inject(ActiveViewInj, ref())
-
-const isLocked = inject(IsLockedInj, ref(false))
-
-const { rightSidebarState } = storeToRefs(useSidebarStore())
-
-const isDropdownOpen = ref(false)
-
-const isEditing = ref(false)
-/** Is editing the view name enabled */
-
-/** Helper to check if editing was disabled before the view navigation timeout triggers */
-const isStopped = ref(false)
-
-/** Original view title when editing the view name */
-const _title = ref<string | undefined>()
-
-/** Debounce click handler, so we can potentially enable editing view name {@see onDblClick} */
-const onClick = useDebounceFn(() => {
-  if (isEditing.value || isStopped.value) return
-
-  emits('changeView', vModel.value)
-}, 250)
-
-/** Enable editing view name on dbl click */
-function onDblClick() {
-  if (!isUIAllowed('viewCreateOrEdit')) return
-
-  if (!isEditing.value) {
-    isEditing.value = true
-    _title.value = vModel.value.title
-    $e('c:view:rename', { view: vModel.value?.type })
-  }
-}
-
-/** Handle keydown on input field */
-function onKeyDown(event: KeyboardEvent) {
-  if (event.key === 'Escape') {
-    onKeyEsc(event)
-  } else if (event.key === 'Enter') {
-    onKeyEnter(event)
-  }
-}
-
-/** Rename view when enter is pressed */
-function onKeyEnter(event: KeyboardEvent) {
-  event.stopImmediatePropagation()
-  event.preventDefault()
-
-  onRename()
-}
-
-/** Disable renaming view when escape is pressed */
-function onKeyEsc(event: KeyboardEvent) {
-  event.stopImmediatePropagation()
-  event.preventDefault()
-
-  onCancel()
-}
-
-onKeyStroke('Enter', (event) => {
-  if (isEditing.value) {
-    onKeyEnter(event)
-  }
-})
-
-const focusInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
-
-/** Duplicate a view */
-// todo: This is not really a duplication, maybe we need to implement a true duplication?
-function onDuplicate() {
-  isDropdownOpen.value = false
-
-  emits('openModal', {
-    type: vModel.value.type!,
-    title: vModel.value.title,
-    copyViewId: vModel.value.id,
-    groupingFieldColumnId: (vModel.value.view as KanbanType).fk_grp_col_id!,
-  })
-
-  $e('c:view:copy', { view: vModel.value.type })
-}
-
-/** Delete a view */
-async function onDelete() {
-  isDropdownOpen.value = false
-
-  emits('delete', vModel.value)
-}
-
-/** Rename a view */
-async function onRename() {
-  isDropdownOpen.value = false
-  if (!isEditing.value) return
-
-  const isValid = props.onValidate({ ...vModel.value, title: _title.value! })
-
-  if (isValid !== true) {
-    message.error(isValid)
-
-    onCancel()
-    return
-  }
-
-  if (vModel.value.title === '' || vModel.value.title === _title.value) {
-    onCancel()
-    return
-  }
-
-  const originalTitle = vModel.value.title
-
-  vModel.value.title = _title.value || ''
-
-  emits('rename', vModel.value, originalTitle)
-
-  onStopEdit()
-}
-
-/** Cancel renaming view */
-function onCancel() {
-  if (!isEditing.value) return
-
-  // vModel.value.title = _title || ''
-  onStopEdit()
-}
-
-/** Stop editing view name, timeout makes sure that view navigation (click trigger) does not pick up before stop is done */
-function onStopEdit() {
-  isStopped.value = true
-  isEditing.value = false
-  _title.value = ''
-
-  setTimeout(() => {
-    isStopped.value = false
-  }, 250)
-}
-
-watch(rightSidebarState, () => {
-  if (rightSidebarState.value === 'peekCloseEnd') {
-    isDropdownOpen.value = false
-  }
-})
-</script>
-
-<template>
-  <a-menu-item
-    class="!min-h-8 !max-h-8 !mb-0.25 select-none group text-gray-700 !flex !items-center !mt-0 hover:(!bg-gray-100 !text-gray-900)"
-    :data-testid="`view-sidebar-view-${vModel.alias || vModel.title}`"
-    @dblclick.stop="onDblClick"
-    @click="onClick"
-  >
-    <div v-e="['a:view:open', { view: vModel.type }]" class="text-xs flex items-center w-full gap-1" data-testid="view-item">
-      <div class="flex min-w-6" :data-testid="`view-sidebar-drag-handle-${vModel.alias || vModel.title}`">
-        <LazyGeneralEmojiPicker
-          class="nc-table-icon"
-          :emoji="props.view?.meta?.icon"
-          size="small"
-          :clearable="true"
-          @emoji-selected="emits('selectIcon', $event)"
-        >
-          <template #default>
-            <GeneralViewIcon :meta="props.view" class="nc-view-icon"></GeneralViewIcon>
-          </template>
-        </LazyGeneralEmojiPicker>
-      </div>
-
-      <a-input
-        v-if="isEditing"
-        :ref="focusInput"
-        v-model:value="_title"
-        class="!bg-transparent !text-xs !border-0 !ring-0 !outline-transparent !border-transparent"
-        :class="{
-          'font-medium': activeView?.id === vModel.id,
-        }"
-        @blur="onRename"
-        @keydown.stop="onKeyDown($event)"
-      />
-
-      <div
-        v-else
-        class="capitalize text-ellipsis overflow-hidden select-none w-full"
-        data-testid="sidebar-view-title"
-        :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
-      >
-        {{ vModel.alias || vModel.title }}
-      </div>
-
-      <div class="flex-1" />
-
-      <template v-if="!isEditing && !isLocked && isUIAllowed('viewCreateOrEdit')">
-        <NcDropdown v-model:visible="isDropdownOpen" overlay-class-name="!rounded-lg">
-          <div
-            class="invisible !group-hover:visible"
-            :class="{
-              '!visible': isDropdownOpen,
-            }"
-          >
-            <NcButton
-              type="text"
-              size="xsmall"
-              class="nc-view-sidebar-node-context-btn !px-1 !hover:bg-gray-200"
-              @click.stop="isDropdownOpen = !isDropdownOpen"
-            >
-              <GeneralIcon icon="threeDotVertical" class="-mt-0.5" />
-            </NcButton>
-          </div>
-          <template #overlay>
-            <div
-              class="flex flex-col items-center min-w-27"
-              :data-testid="`view-sidebar-view-actions-${vModel.alias || vModel.title}`"
-            >
-              <NcButton
-                type="text"
-                size="small"
-                class="w-full !rounded-none !hover:bg-gray-200"
-                :centered="false"
-                @click.stop="onDblClick"
-              >
-                <div class="flex flex-row items-center gap-x-2 pl-2 text-xs">
-                  <GeneralIcon icon="edit" />
-                  Rename
-                </div>
-              </NcButton>
-              <NcButton
-                type="text"
-                size="small"
-                class="nc-view-copy-icon w-full !rounded-none !hover:bg-gray-200"
-                :centered="false"
-                @click.stop="onDuplicate"
-              >
-                <div class="flex flex-row items-center gap-x-2 pl-1.5 text-xs">
-                  <GeneralIcon icon="copy" class="text-base" />
-                  Duplicate
-                </div>
-              </NcButton>
-
-              <template v-if="!vModel.is_default">
-                <NcButton
-                  type="text"
-                  size="small"
-                  class="nc-view-delete-icon w-full !hover:bg-gray-200 !rounded-none"
-                  :centered="false"
-                  @click.stop="onDelete"
-                >
-                  <div class="flex flex-row items-center gap-x-2.25 pl-1.75 text-red-400 text-xs">
-                    <GeneralIcon icon="delete" />
-                    Delete
-                  </div>
-                </NcButton>
-              </template>
-            </div>
-          </template>
-        </NcDropdown>
-      </template>
-    </div>
-  </a-menu-item>
-</template>
diff --git a/packages/nc-gui/components/smartsheet/sidebar/index.vue b/packages/nc-gui/components/smartsheet/sidebar/index.vue
deleted file mode 100644
index 7f3a858fd6..0000000000
--- a/packages/nc-gui/components/smartsheet/sidebar/index.vue
+++ /dev/null
@@ -1,281 +0,0 @@
-<script setup lang="ts">
-import type { ViewType, ViewTypes } from 'nocodb-sdk'
-import {
-  ActiveViewInj,
-  MetaInj,
-  inject,
-  ref,
-  resolveComponent,
-  storeToRefs,
-  useCommandPalette,
-  useDialog,
-  useNuxtApp,
-  useRoles,
-  useRoute,
-  useRouter,
-  useViewsStore,
-  watch,
-} from '#imports'
-
-const { refreshCommandPalette } = useCommandPalette()
-
-const meta = inject(MetaInj, ref())
-
-const activeView = inject(ActiveViewInj, ref())
-
-const { activeTab } = storeToRefs(useTabs())
-
-const viewsStore = useViewsStore()
-const { loadViews } = viewsStore
-const { isViewsLoading, views } = storeToRefs(viewsStore)
-
-const { lastOpenedViewMap } = storeToRefs(useProject())
-
-const { activeTable } = storeToRefs(useTablesStore())
-
-const setLastOpenedViewId = (viewId?: string) => {
-  if (viewId && activeTab.value?.id) {
-    lastOpenedViewMap.value[activeTab.value?.id] = viewId
-  }
-}
-
-const { isUIAllowed } = useRoles()
-
-const router = useRouter()
-
-const route = useRoute()
-
-const { $e } = useNuxtApp()
-
-const { isRightSidebarOpen } = storeToRefs(useSidebarStore())
-
-const tabBtnsContainerRef = ref<HTMLElement | null>(null)
-
-/** Watch route param and change active view based on `viewTitle` */
-watch(
-  [views, () => route.params.viewTitle],
-  ([nextViews, viewTitle]) => {
-    const lastOpenedViewId = activeTab.value?.id && lastOpenedViewMap.value[activeTab.value?.id]
-    const lastOpenedView = nextViews.find((v) => v.id === lastOpenedViewId)
-
-    if (viewTitle) {
-      let view = nextViews.find((v) => v.title === viewTitle)
-      if (view) {
-        activeView.value = view
-        setLastOpenedViewId(activeView.value?.id)
-      } else {
-        /** search with view id and if found replace with title */
-        view = nextViews.find((v) => v.id === viewTitle)
-        if (view) {
-          router.replace({
-            params: {
-              viewTitle: view.id,
-            },
-          })
-        }
-      }
-    } else if (lastOpenedView) {
-      /** if active view is not found, set it to last opened view */
-      router.replace({
-        params: {
-          viewTitle: lastOpenedView.id,
-        },
-      })
-    } else {
-      if (nextViews?.length && activeView.value !== nextViews[0]) {
-        activeView.value = nextViews[0]
-      }
-    }
-
-    /** if active view is not found, set it to first view */
-    if (nextViews?.length && (!activeView.value || !nextViews.includes(activeView.value))) {
-      activeView.value = nextViews[0]
-    }
-  },
-  { immediate: true },
-)
-
-/** Open delete modal */
-function onOpenModal({
-  title = '',
-  type,
-  copyViewId,
-  groupingFieldColumnId,
-}: {
-  title?: string
-  type: ViewTypes
-  copyViewId?: string
-  groupingFieldColumnId?: string
-}) {
-  const isOpen = ref(true)
-
-  const { close } = useDialog(resolveComponent('DlgViewCreate'), {
-    'modelValue': isOpen,
-    title,
-    type,
-    meta,
-    'selectedViewId': copyViewId,
-    groupingFieldColumnId,
-    'views': views,
-    'onUpdate:modelValue': closeDialog,
-    'onCreated': async (view: ViewType) => {
-      closeDialog()
-
-      refreshCommandPalette()
-
-      await loadViews()
-
-      router.push({ params: { viewTitle: view.id || '' } })
-
-      $e('a:view:create', { view: view.type })
-    },
-  })
-
-  function closeDialog() {
-    isOpen.value = false
-
-    close(1000)
-  }
-}
-</script>
-
-<template>
-  <div class="relative nc-view-sidebar flex flex-col border-l-1 border-gray-200 relative h-full w-full bg-white">
-    <template v-if="isViewsLoading">
-      <a-skeleton-input :active="true" class="!h-8 !rounded overflow-hidden ml-3 mr-3 mt-3.75 mb-3.75" />
-    </template>
-    <div
-      v-else
-      ref="tabBtnsContainerRef"
-      class="flex flex-row group py-1 mx-3.25 mt-1.25 mb-2.75 rounded-md gap-x-2 nc-view-sidebar-tab items-center justify-between"
-    >
-      <div class="flex text-gray-600 ml-1.75">Views</div>
-      <NcTooltip
-        placement="bottomLeft"
-        hide-on-click
-        class="flex opacity-0 group-hover:(opacity-100) transition-all duration-50"
-        :class="{
-          '!w-8 !opacity-100': !isRightSidebarOpen,
-        }"
-      >
-        <template #title>
-          {{
-            isRightSidebarOpen
-              ? `${$t('general.hide')} ${$t('objects.sidebar').toLowerCase()}`
-              : `${$t('general.show')} ${$t('objects.sidebar').toLowerCase()}`
-          }}
-        </template>
-        <NcButton
-          type="text"
-          size="small"
-          class="nc-sidebar-left-toggle-icon !text-gray-600 !hover:text-gray-800"
-          @click="isRightSidebarOpen = !isRightSidebarOpen"
-        >
-          <div class="flex items-center text-inherit">
-            <GeneralIcon
-              icon="doubleRightArrow"
-              class="duration-150 transition-all"
-              :class="{
-                'transform rotate-180': !isRightSidebarOpen,
-              }"
-            />
-          </div>
-        </NcButton>
-      </NcTooltip>
-    </div>
-
-    <div class="flex-1 flex flex-col min-h-0">
-      <div class="flex flex-col h-full justify-between w-full">
-        <div class="flex flex-grow nc-scrollbar-md pr-1.75 mr-0.5">
-          <div v-if="isViewsLoading" class="flex flex-col w-full">
-            <div class="flex flex-row items-center w-full mt-1.5 ml-5 gap-x-3">
-              <a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" />
-              <a-skeleton-input :active="true" class="!w-1/2 !h-4 !rounded overflow-hidden" />
-            </div>
-            <div class="flex flex-row items-center w-full mt-4 ml-5 gap-x-3">
-              <a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" />
-              <a-skeleton-input :active="true" class="!w-1/2 !h-4 !rounded overflow-hidden" />
-            </div>
-            <div class="flex flex-row items-center w-full mt-4 ml-5 gap-x-3">
-              <a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" />
-              <a-skeleton-input :active="true" class="!w-1/2 !h-4 !rounded overflow-hidden" />
-            </div>
-          </div>
-          <LazySmartsheetSidebarMenuTop v-else :views="views" @open-modal="onOpenModal" @deleted="loadViews" />
-        </div>
-        <div v-if="isUIAllowed('viewCreateOrEdit')" class="flex flex-col">
-          <div class="!mb-3 w-full border-b-1 border-gray-200" />
-
-          <div v-if="!activeTable" class="flex flex-col pt-2 pb-5 px-6">
-            <a-skeleton-input :active="true" class="!w-3/5 !h-4 !rounded overflow-hidden" />
-            <div class="flex flex-row justify-between items-center w-full mt-4.75">
-              <div class="flex flex-row items-center flex-grow gap-x-3">
-                <a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" />
-                <a-skeleton-input :active="true" class="!w-3/5 !h-4 !rounded overflow-hidden" />
-              </div>
-              <div class="flex">
-                <a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" />
-              </div>
-            </div>
-            <div class="flex flex-row justify-between items-center w-full mt-3.75">
-              <div class="flex flex-row items-center flex-grow gap-x-3">
-                <a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" />
-                <a-skeleton-input :active="true" class="!w-3/5 !h-4 !rounded overflow-hidden" />
-              </div>
-              <div class="flex">
-                <a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" />
-              </div>
-            </div>
-            <div class="flex flex-row justify-between items-center w-full mt-3.75">
-              <div class="flex flex-row items-center flex-grow gap-x-3">
-                <a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" />
-                <a-skeleton-input :active="true" class="!w-3/5 !h-4 !rounded overflow-hidden" />
-              </div>
-              <div class="flex">
-                <a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" />
-              </div>
-            </div>
-            <div class="flex flex-row justify-between items-center w-full mt-3.75">
-              <div class="flex flex-row items-center flex-grow gap-x-3">
-                <a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" />
-                <a-skeleton-input :active="true" class="!w-3/5 !h-4 !rounded overflow-hidden" />
-              </div>
-              <div class="flex">
-                <a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" />
-              </div>
-            </div>
-          </div>
-          <LazySmartsheetSidebarMenuBottom v-else @open-modal="onOpenModal" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-:deep(.ant-menu-title-content) {
-  @apply w-full;
-}
-
-:deep(.ant-layout-sider-children) {
-  @apply flex flex-col;
-}
-
-.tab {
-  @apply flex flex-row items-center h-7.5 justify-center w-1/2 py-1 bg-gray-100 rounded-md gap-x-1.5 text-gray-500 hover:text-black cursor-pointer transition-all duration-300 select-none;
-}
-
-.tab-icon {
-  @apply transition-all duration-300;
-}
-.tab .tab-title {
-  @apply min-w-0;
-  word-break: 'keep-all';
-  white-space: 'nowrap';
-  display: 'inline';
-}
-
-.active {
-  @apply bg-white shadow text-gray-700;
-}
-</style>
diff --git a/packages/nc-gui/components/tabs/Smartsheet.vue b/packages/nc-gui/components/tabs/Smartsheet.vue
index ec71154ebe..a25a9c1493 100644
--- a/packages/nc-gui/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui/components/tabs/Smartsheet.vue
@@ -160,38 +160,31 @@ const onDrop = async (event: DragEvent) => {
 <template>
   <div class="nc-container flex flex-col h-full" @drop="onDrop" @dragover.prevent>
     <LazySmartsheetTopbar />
-    <TabsSmartsheetResizable style="height: calc(100% - var(--topbar-height))">
-      <template #content>
-        <div v-if="openedViewsTab === 'view'" class="flex flex-col h-full flex-1 min-w-0">
-          <LazySmartsheetToolbar v-if="!isForm" />
-          <div class="flex flex-row w-full" style="height: calc(100% - var(--topbar-height))">
-            <Transition name="layout" mode="out-in">
-              <template v-if="meta">
-                <div class="flex flex-1 min-h-0 w-3/4">
-                  <div v-if="activeView" class="h-full flex-1 min-w-0 min-h-0 bg-white">
-                    <LazySmartsheetGrid v-if="isGrid" ref="grid" />
+    <div style="height: calc(100% - var(--topbar-height))">
+      <div v-if="openedViewsTab === 'view'" class="flex flex-col h-full flex-1 min-w-0">
+        <LazySmartsheetToolbar v-if="!isForm" />
+        <div class="flex flex-row w-full" style="height: calc(100% - var(--topbar-height))">
+          <Transition name="layout" mode="out-in">
+            <template v-if="meta">
+              <div class="flex flex-1 min-h-0 w-3/4">
+                <div v-if="activeView" class="h-full flex-1 min-w-0 min-h-0 bg-white">
+                  <LazySmartsheetGrid v-if="isGrid" ref="grid" />
 
-                    <LazySmartsheetGallery v-else-if="isGallery" />
+                  <LazySmartsheetGallery v-else-if="isGallery" />
 
-                    <LazySmartsheetForm v-else-if="isForm && !$route.query.reload" />
+                  <LazySmartsheetForm v-else-if="isForm && !$route.query.reload" />
 
-                    <LazySmartsheetKanban v-else-if="isKanban" />
+                  <LazySmartsheetKanban v-else-if="isKanban" />
 
-                    <LazySmartsheetMap v-else-if="isMap" />
-                  </div>
+                  <LazySmartsheetMap v-else-if="isMap" />
                 </div>
-              </template>
-            </Transition>
-          </div>
+              </div>
+            </template>
+          </Transition>
         </div>
-        <SmartsheetDetails v-else />
-      </template>
-      <template #sidebar>
-        <template v-if="!isPublic">
-          <LazySmartsheetSidebar />
-        </template>
-      </template>
-    </TabsSmartsheetResizable>
+      </div>
+      <SmartsheetDetails v-else />
+    </div>
 
     <LazySmartsheetExpandedFormDetached />
   </div>
diff --git a/packages/nc-gui/components/tabs/SmartsheetResizable.vue b/packages/nc-gui/components/tabs/SmartsheetResizable.vue
deleted file mode 100644
index bd6f6a561b..0000000000
--- a/packages/nc-gui/components/tabs/SmartsheetResizable.vue
+++ /dev/null
@@ -1,209 +0,0 @@
-<script lang="ts" setup>
-import { Pane, Splitpanes } from 'splitpanes'
-import 'splitpanes/dist/splitpanes.css'
-
-const {
-  isRightSidebarOpen,
-  isLeftSidebarOpen,
-  leftSidebarWidthPercent,
-  rightSidebarSize: sideBarSize,
-} = storeToRefs(useSidebarStore())
-const wrapperRef = ref<HTMLDivElement>()
-const splitpaneWrapperRef = ref()
-
-const { rightSidebarState: sidebarState } = storeToRefs(useSidebarStore())
-
-const contentSize = computed(() => 100 - sideBarSize.value.current)
-const animationDuration = 250
-const contentDomWidth = ref(window.innerWidth)
-
-const sidebarWidth = computed(() => (sideBarSize.value.old * contentDomWidth.value) / 100)
-const currentSidebarSize = computed({
-  get: () => sideBarSize.value.current,
-  set: (val) => {
-    sideBarSize.value.current = val
-    sideBarSize.value.old = val
-  },
-})
-
-watch(isRightSidebarOpen, () => {
-  sideBarSize.value.current = sideBarSize.value.old
-
-  if (isRightSidebarOpen.value) {
-    setTimeout(() => (sidebarState.value = 'openStart'), 0)
-
-    setTimeout(() => (sidebarState.value = 'openEnd'), animationDuration)
-  } else {
-    sideBarSize.value.old = sideBarSize.value.current
-
-    sidebarState.value = 'hiddenStart'
-
-    setTimeout(() => {
-      sideBarSize.value.current = 0
-
-      sidebarState.value = 'hiddenEnd'
-    }, animationDuration)
-  }
-})
-
-function handleMouseMove(e: MouseEvent) {
-  if (!wrapperRef.value) return
-  if (sidebarState.value === 'openEnd') return
-
-  const viewportWidth = window.innerWidth
-
-  if (e.clientX > viewportWidth - 14 && ['hiddenEnd', 'peekCloseEnd'].includes(sidebarState.value)) {
-    sidebarState.value = 'peekOpenStart'
-
-    setTimeout(() => {
-      sidebarState.value = 'peekOpenEnd'
-    }, animationDuration)
-  } else if (e.clientX < viewportWidth - (sidebarWidth.value + 10) && sidebarState.value === 'peekOpenEnd') {
-    sidebarState.value = 'peekCloseOpen'
-
-    setTimeout(() => {
-      sidebarState.value = 'peekCloseEnd'
-    }, animationDuration)
-  }
-}
-
-function onWindowResize() {
-  contentDomWidth.value = ((100 - leftSidebarWidthPercent.value) / 100) * window.innerWidth
-}
-
-onMounted(() => {
-  document.addEventListener('mousemove', handleMouseMove)
-
-  window.addEventListener('resize', onWindowResize)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('mousemove', handleMouseMove)
-  window.removeEventListener('resize', onWindowResize)
-})
-
-watch(
-  [isLeftSidebarOpen, leftSidebarWidthPercent],
-  () => {
-    if (isLeftSidebarOpen.value) {
-      contentDomWidth.value = ((100 - leftSidebarWidthPercent.value) / 100) * window.innerWidth
-    } else {
-      contentDomWidth.value = window.innerWidth
-    }
-  },
-  {
-    immediate: true,
-  },
-)
-</script>
-
-<template>
-  <Splitpanes
-    ref="splitpaneWrapperRef"
-    class="nc-view-sidebar-content-resizable-wrapper w-full h-full"
-    :class="{
-      'hide-resize-bar': !isRightSidebarOpen || sidebarState === 'openStart',
-    }"
-    @resize="currentSidebarSize = $event[1].size"
-  >
-    <Pane :size="contentSize">
-      <slot name="content" />
-    </Pane>
-    <Pane min-size="15%" :size="currentSidebarSize" max-size="40%" class="nc-view-sidebar-splitpane relative !overflow-visible">
-      <div
-        ref="wrapperRef"
-        class="nc-view-sidebar-wrapper relative flex flex-col h-full justify-center !min-w-32 absolute overflow-visible"
-        :class="{
-          'minimized-height': !isRightSidebarOpen,
-          'peek-sidebar': ['peekOpenEnd', 'peekCloseOpen'].includes(sidebarState),
-          'hide-sidebar': ['hiddenStart', 'hiddenEnd', 'peekCloseEnd'].includes(sidebarState),
-        }"
-        :style="{
-          width: sidebarState === 'hiddenEnd' ? '0px' : `${sidebarWidth}px`,
-        }"
-      >
-        <slot name="sidebar" />
-      </div>
-    </Pane>
-  </Splitpanes>
-</template>
-
-<style lang="scss">
-.nc-view-sidebar-wrapper.minimized-height > * {
-  @apply pb-1 !(rounded-l-lg border-1 border-gray-200 shadow-lg);
-  height: 89.5%;
-}
-
-.nc-view-sidebar-wrapper > * {
-  transition: all 0.15s ease-in-out;
-  @apply z-10 absolute;
-}
-
-.nc-view-sidebar-wrapper.peek-sidebar {
-  > * {
-    @apply !opacity-100;
-    transform: translateX(-100%);
-  }
-}
-
-.nc-view-sidebar-wrapper.hide-sidebar {
-  @apply !min-w-0;
-
-  > * {
-    @apply opacity-0;
-    transform: translateX(100%);
-  }
-}
-
-/** Split pane CSS */
-
-.nc-view-sidebar-content-resizable-wrapper > {
-  .splitpanes__splitter {
-    width: 0 !important;
-    position: relative;
-    overflow: visible;
-  }
-  .splitpanes__splitter:before {
-    @apply bg-transparent;
-    width: 1px;
-    content: '';
-    position: absolute;
-    left: -2px;
-    top: 0;
-    height: 100%;
-    z-index: 40;
-  }
-
-  .splitpanes__splitter:hover:before {
-    @apply bg-scrollbar;
-    z-index: 40;
-    width: 4px !important;
-    left: -2px;
-  }
-
-  .splitpanes--dragging .splitpanes__splitter:before {
-    @apply bg-scrollbar;
-    z-index: 40;
-    width: 10px !important;
-    left: -2px;
-  }
-}
-
-.splitpanes--dragging > .splitpanes__splitter::before {
-  @apply w-1 mr-0 bg-scrollbar;
-  z-index: 40;
-  width: 4px !important;
-  left: -2px;
-}
-
-.splitpanes--dragging {
-  cursor: col-resize;
-}
-
-.nc-view-sidebar-content-resizable-wrapper.hide-resize-bar > {
-  .splitpanes__splitter {
-    display: none !important;
-    background-color: transparent !important;
-  }
-}
-</style>

From 610fdcf1614b925e1b3c6381872ceefe383796c0 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:15 +0000
Subject: [PATCH 10/25] fix: Fixed auto scrolling

---
 .../nc-gui/components/dashboard/TreeView/ProjectNode.vue    | 6 +-----
 packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue | 2 +-
 packages/nc-gui/components/dashboard/TreeView/index.vue     | 6 ++----
 packages/nc-gui/components/project/AllTables.vue            | 6 +-----
 4 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index a2fe6a30d9..0dccb91290 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -191,11 +191,7 @@ function openTableCreateDialog(baseIndex?: number | undefined) {
       const newTableDom = document.querySelector(`[data-table-id="${table.id}"]`)
       if (!newTableDom) return
 
-      // Verify that table node is not in the viewport
-      if (isElementInvisible(newTableDom)) {
-        // Scroll to the table node
-        newTableDom?.scrollIntoView({ behavior: 'smooth' })
-      }
+      newTableDom?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
     }, 1000)
 
     close(1000)
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
index 74daf9a809..a2a1bd2094 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
@@ -190,7 +190,7 @@ function onRef(el: HTMLElement) {
   if (activeViewTitleOrId.value === vModel.value.id) {
     nextTick(() => {
       setTimeout(() => {
-        el?.scrollIntoView({ block: 'center', inline: 'center' })
+        el?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
       }, 1000)
     })
   }
diff --git a/packages/nc-gui/components/dashboard/TreeView/index.vue b/packages/nc-gui/components/dashboard/TreeView/index.vue
index f9126cb407..f66c9890ce 100644
--- a/packages/nc-gui/components/dashboard/TreeView/index.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/index.vue
@@ -212,10 +212,8 @@ const scrollTableNode = () => {
   const activeTableDom = document.querySelector(`.nc-treeview [data-table-id="${_activeTable.value?.id}"]`)
   if (!activeTableDom) return
 
-  if (isElementInvisible(activeTableDom)) {
-    // Scroll to the table node
-    activeTableDom?.scrollIntoView({ behavior: 'smooth' })
-  }
+  // Scroll to the table node
+  activeTableDom?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
 }
 
 watch(
diff --git a/packages/nc-gui/components/project/AllTables.vue b/packages/nc-gui/components/project/AllTables.vue
index 07f2bb21f7..1f09942514 100644
--- a/packages/nc-gui/components/project/AllTables.vue
+++ b/packages/nc-gui/components/project/AllTables.vue
@@ -57,11 +57,7 @@ function openTableCreateDialog(baseIndex?: number | undefined) {
       const newTableDom = document.querySelector(`[data-table-id="${table.id}"]`)
       if (!newTableDom) return
 
-      // Verify that table node is not in the viewport
-      if (isElementInvisible(newTableDom)) {
-        // Scroll to the table node
-        newTableDom?.scrollIntoView({ behavior: 'smooth' })
-      }
+      newTableDom?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
     }, 1000)
 
     close(1000)

From 707f6c6d0706b59fe3bf060eedbba264e3ea0d29 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:16 +0000
Subject: [PATCH 11/25] fix: Added isDefaultBase util to FE

---
 packages/nc-gui/components/dashboard/TreeView/ViewsList.vue | 4 +++-
 packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue | 4 +++-
 packages/nc-gui/utils/baseUtils.ts                          | 5 +++++
 3 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 packages/nc-gui/utils/baseUtils.ts

diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
index 1a586c1cc1..7a27b1f028 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
@@ -4,6 +4,7 @@ import { ViewTypes } from 'nocodb-sdk'
 import type { SortableEvent } from 'sortablejs'
 import Sortable from 'sortablejs'
 import type { Menu as AntMenu } from 'ant-design-vue'
+import { isDefaultBase as _isDefaultBase } from '~/utils/baseUtils'
 import {
   extractSdkResponseErrorMsg,
   message,
@@ -35,8 +36,9 @@ const { $e } = useNuxtApp()
 
 const isDefaultBase = computed(() => {
   const base = project.value?.bases?.find((b) => b.id === table.value.base_id)
+  if (!base) return false
 
-  return base?.is_meta
+  return _isDefaultBase(base)
 })
 
 const { viewsByTable, activeView } = storeToRefs(useViewsStore())
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
index a2a1bd2094..dc658f3236 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
@@ -2,6 +2,7 @@
 import type { VNodeRef } from '@vue/runtime-core'
 import type { KanbanType, ViewType, ViewTypes } from 'nocodb-sdk'
 import type { WritableComputedRef } from '@vue/reactivity'
+import { isDefaultBase as _isDefaultBase } from '~/utils/baseUtils'
 import { IsLockedInj, inject, message, onKeyStroke, useDebounceFn, useNuxtApp, useRoles, useVModel } from '#imports'
 
 interface Props {
@@ -45,8 +46,9 @@ const { rightSidebarState } = storeToRefs(useSidebarStore())
 
 const isDefaultBase = computed(() => {
   const base = project.value?.bases?.find((b) => b.id === vModel.value.base_id)
+  if (!base) return false
 
-  return base?.is_meta
+  return _isDefaultBase(base)
 })
 
 const isDropdownOpen = ref(false)
diff --git a/packages/nc-gui/utils/baseUtils.ts b/packages/nc-gui/utils/baseUtils.ts
new file mode 100644
index 0000000000..fb8e7ef31f
--- /dev/null
+++ b/packages/nc-gui/utils/baseUtils.ts
@@ -0,0 +1,5 @@
+import type { BaseType } from 'nocodb-sdk'
+
+const isDefaultBase = (base: BaseType) => base.is_meta
+
+export { isDefaultBase }

From 12581fc64ec9af62d0283af9f388908a7f2c341d Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:16 +0000
Subject: [PATCH 12/25] fix: Added Default View title to Topbar

---
 .../nc-gui/components/smartsheet/toolbar/ViewInfo.vue     | 8 ++------
 packages/nc-gui/lang/en.json                              | 3 ++-
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
index ed05b2ad74..45a5a558fc 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
@@ -28,11 +28,7 @@ const { activeTable } = storeToRefs(useTablesStore())
       </template>
     </LazyGeneralEmojiPicker>
     <span
-      class="text-ellipsis overflow-hidden pl-1 max-w-1/2"
-      :class="{
-        'text-gray-500': !selectedView?.is_default,
-        'text-gray-700': selectedView?.is_default,
-      }"
+      class="text-ellipsis overflow-hidden pl-1 max-w-1/2 text-gray-500"
       :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
     >
       {{ activeTable?.title }}
@@ -46,7 +42,7 @@ const { activeTable } = storeToRefs(useTablesStore())
     </LazyGeneralEmojiPicker>
 
     <span class="truncate pl-1.25 text-gray-700 max-w-28/100">
-      {{ selectedView?.title }}
+      {{ selectedView?.is_default ? $t('title.defaultView') : selectedView?.title }}
     </span>
 
     <LazySmartsheetToolbarReload v-if="openedViewsTab === 'view'" />
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 95f950458b..c10a000d64 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -281,7 +281,8 @@
     "resetPasswordMenu": "Reset Password",
     "tokens": "Tokens",
     "userManagement": "User Management",
-    "licence": "Licence"
+    "licence": "Licence",
+    "defaultView": "Default View"
   },
   "labels": {
     "searchProjects": "Search Projects",

From 85fb294f7ab036c21083bf52cca73f60b7e01644 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:16 +0000
Subject: [PATCH 13/25] fix: Added isDefaultBase util to FE

---
 .../components/dashboard/TreeView/ViewsList.vue     |  2 +-
 .../components/dashboard/TreeView/ViewsNode.vue     | 13 +++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
index 7a27b1f028..611b2f3ebe 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
@@ -4,8 +4,8 @@ import { ViewTypes } from 'nocodb-sdk'
 import type { SortableEvent } from 'sortablejs'
 import Sortable from 'sortablejs'
 import type { Menu as AntMenu } from 'ant-design-vue'
-import { isDefaultBase as _isDefaultBase } from '~/utils/baseUtils'
 import {
+  isDefaultBase as _isDefaultBase,
   extractSdkResponseErrorMsg,
   message,
   onMounted,
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
index dc658f3236..6ef21b6b8b 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
@@ -2,8 +2,17 @@
 import type { VNodeRef } from '@vue/runtime-core'
 import type { KanbanType, ViewType, ViewTypes } from 'nocodb-sdk'
 import type { WritableComputedRef } from '@vue/reactivity'
-import { isDefaultBase as _isDefaultBase } from '~/utils/baseUtils'
-import { IsLockedInj, inject, message, onKeyStroke, useDebounceFn, useNuxtApp, useRoles, useVModel } from '#imports'
+import {
+  IsLockedInj,
+  isDefaultBase as _isDefaultBase,
+  inject,
+  message,
+  onKeyStroke,
+  useDebounceFn,
+  useNuxtApp,
+  useRoles,
+  useVModel,
+} from '#imports'
 
 interface Props {
   view: ViewType

From 178f9deb6a7ca1e3a845384c2d651742ab0f62b9 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:17 +0000
Subject: [PATCH 14/25] fix: Delete modal centered

---
 packages/nc-gui/components/general/DeleteModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/general/DeleteModal.vue b/packages/nc-gui/components/general/DeleteModal.vue
index 61eaed3145..4c3c18f520 100644
--- a/packages/nc-gui/components/general/DeleteModal.vue
+++ b/packages/nc-gui/components/general/DeleteModal.vue
@@ -40,7 +40,7 @@ onKeyStroke('Enter', () => {
 </script>
 
 <template>
-  <GeneralModal v-model:visible="visible" size="small">
+  <GeneralModal v-model:visible="visible" size="small" centered>
     <div class="flex flex-col p-6">
       <div class="flex flex-row pb-2 mb-4 font-medium text-lg border-b-1 border-gray-50 text-gray-800">
         {{ $t('general.delete') }} {{ props.entityName }}

From 2b39b9746d6744cc7a1123e810a1a1f5dad222a0 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:17 +0000
Subject: [PATCH 15/25] fix: Minor sidebar style fixed

---
 .../nc-gui/components/dashboard/TreeView/TableNode.vue     | 7 ++-----
 .../nc-gui/components/dashboard/TreeView/ViewsNode.vue     | 2 +-
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
index 7d4e2b1192..112280c7d1 100644
--- a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
@@ -217,14 +217,11 @@ const isTableOpened = computed(() => {
               (isUIAllowed('tableRename', { roles: projectRole }) || isUIAllowed('tableDelete', { roles: projectRole }))
             "
             :trigger="['click']"
+            class="nc-sidebar-node-btn"
             @click.stop
           >
             <MdiDotsHorizontal
-              class="min-w-5.75 min-h-5.75 mt-0.2 mr-0.25 px-0.5 transition-opacity opacity-0 group-hover:opacity-100 nc-tbl-context-menu outline-0 rounded-md hover:(bg-gray-500 bg-opacity-15 !text-black)"
-              :class="{
-                '!text-gray-600': openedTableId !== table.id,
-                '!text-black': openedTableId === table.id,
-              }"
+              class="min-w-5.75 min-h-5.75 mt-0.2 mr-0.25 px-0.5 !text-gray-600 transition-opacity opacity-0 group-hover:opacity-100 nc-tbl-context-menu outline-0 rounded-md hover:(bg-gray-500 bg-opacity-15 !text-black)"
             />
 
             <template #overlay>
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
index 6ef21b6b8b..3b60e7896d 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
@@ -283,7 +283,7 @@ function onRef(el: HTMLElement) {
             <NcMenu class="min-w-27" :data-testid="`view-sidebar-view-actions-${vModel.alias || vModel.title}`">
               <NcMenuItem @click.stop="onDblClick">
                 <GeneralIcon icon="edit" />
-                Rename
+                <div class="-ml-0.25">Rename</div>
               </NcMenuItem>
               <NcMenuItem @click.stop="onDuplicate">
                 <GeneralIcon icon="copy" />

From a8dcc0e86358da8fef1df7d3389a09675318ec6c Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:17 +0000
Subject: [PATCH 16/25] fix: Minor sidebar style fixed

---
 packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
index 3b60e7896d..2073f37870 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
@@ -286,7 +286,7 @@ function onRef(el: HTMLElement) {
                 <div class="-ml-0.25">Rename</div>
               </NcMenuItem>
               <NcMenuItem @click.stop="onDuplicate">
-                <GeneralIcon icon="copy" />
+                <GeneralIcon icon="duplicate" />
                 Duplicate
               </NcMenuItem>
 

From 44604566287babdac256e340189f6d155e5a3c06 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:18 +0000
Subject: [PATCH 17/25] fix: Fixed acl with base option

---
 .../components/dashboard/TreeView/ProjectNode.vue     | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index 0dccb91290..c41a773da1 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -440,11 +440,7 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
           </span>
           <div :class="{ 'flex flex-grow h-full': !editMode }" @click="onProjectClick(project)"></div>
 
-          <NcDropdown
-            v-if="isUIAllowed('tableCreate', { roles: projectRole })"
-            v-model:visible="isOptionsOpen"
-            :trigger="['click']"
-          >
+          <NcDropdown v-model:visible="isOptionsOpen" :trigger="['click']">
             <NcButton
               class="nc-sidebar-node-btn"
               :class="{ '!text-black !opacity-100': isOptionsOpen }"
@@ -612,10 +608,7 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
                               </div>
                             </a-tooltip>
                           </div>
-                          <div
-                            v-if="isUIAllowed('tableCreate', { roles: projectRole })"
-                            class="flex flex-row items-center gap-x-0.25 w-12.25"
-                          >
+                          <div class="flex flex-row items-center gap-x-0.25 w-12.25">
                             <NcDropdown
                               :visible="isBasesOptionsOpen[base!.id!]"
                               :trigger="['click']"

From f3aec3cf901ce4ad6246beb935e5d3e34dc855db Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:18 +0000
Subject: [PATCH 18/25] fix: Fixed creating view of a different project's table

---
 .../dashboard/TreeView/CreateViewBtn.vue      |  9 ++++-
 .../dashboard/TreeView/ViewsList.vue          | 33 ++++-------------
 packages/nc-gui/store/views.ts                | 37 ++++++++++++++++++-
 3 files changed, 51 insertions(+), 28 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue b/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
index 7c3e8a4466..02917ac392 100644
--- a/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
@@ -9,9 +9,10 @@ const router = useRouter()
 const { refreshCommandPalette } = useCommandPalette()
 const viewsStore = useViewsStore()
 const { views } = storeToRefs(viewsStore)
-const { loadViews } = viewsStore
+const { loadViews, navigateToView } = viewsStore
 
 const table = inject(SidebarTableInj)!
+const project = inject(ProjectInj)!
 
 const isOpen = ref(false)
 
@@ -46,7 +47,11 @@ function onOpenModal({
 
       await loadViews()
 
-      router.push({ params: { viewTitle: view.id || '' } })
+      navigateToView({
+        view,
+        tableId: table.value.id!,
+        projectId: project.value.id!,
+      })
 
       $e('a:view:create', { view: view.type })
     },
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
index 611b2f3ebe..4551df02b5 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
@@ -53,6 +53,8 @@ const { refreshCommandPalette } = useCommandPalette()
 
 const { addUndo, defineModelScope } = useUndoRedo()
 
+const { navigateToView } = useViewsStore()
+
 /** Selected view(s) for menu */
 const selected = ref<string[]>([])
 
@@ -187,31 +189,12 @@ onMounted(() => menuRef.value && initSortable(menuRef.value.$el))
 
 /** Navigate to view by changing url param */
 function changeView(view: ViewType) {
-  const routeName = 'index-typeOrId-projectId-index-index-viewId-viewTitle'
-  if (
-    router.currentRoute.value.query &&
-    router.currentRoute.value.query.page &&
-    router.currentRoute.value.query.page === 'fields'
-  ) {
-    router.push({
-      name: routeName,
-      params: { viewTitle: view.id || '', viewId: table.value.id, projectId: project.value.id },
-      query: router.currentRoute.value.query,
-    })
-  } else {
-    router.push({ name: routeName, params: { viewTitle: view.id || '', viewId: table.value.id, projectId: project.value.id } })
-  }
-
-  if (view.type === ViewTypes.FORM && selected.value[0] === view.id) {
-    // reload the page if the same form view is clicked
-    // router.go(0)
-    // fix me: router.go(0) reloads entire page. need to reload only the form view
-    router
-      .replace({ name: routeName, query: { reload: 'true' }, params: { viewId: table.value.id, projectId: project.value.id } })
-      .then(() => {
-        router.replace({ name: routeName, query: {}, params: { viewId: table.value.id, projectId: project.value.id } })
-      })
-  }
+  navigateToView({
+    view,
+    tableId: table.value.id!,
+    projectId: project.value.id!,
+    hardReload: view.type === ViewTypes.FORM && selected.value[0] === view.id,
+  })
 }
 
 /** Rename a view */
diff --git a/packages/nc-gui/store/views.ts b/packages/nc-gui/store/views.ts
index de0fad35c6..104c386dcf 100644
--- a/packages/nc-gui/store/views.ts
+++ b/packages/nc-gui/store/views.ts
@@ -1,4 +1,4 @@
-import type { ViewType } from 'nocodb-sdk'
+import { type ViewType } from 'nocodb-sdk'
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import type { ViewPageType } from '~/lib'
 
@@ -136,6 +136,40 @@ export const useViewsStore = defineStore('viewsStore', () => {
 
   const isLockedView = computed(() => activeView.value?.lock_type === 'locked')
 
+  const navigateToView = async ({
+    view,
+    projectId,
+    tableId,
+    hardReload,
+  }: {
+    view: ViewType
+    projectId: string
+    tableId: string
+    hardReload?: boolean
+  }) => {
+    const routeName = 'index-typeOrId-projectId-index-index-viewId-viewTitle'
+
+    if (
+      router.currentRoute.value.query &&
+      router.currentRoute.value.query.page &&
+      router.currentRoute.value.query.page === 'fields'
+    ) {
+      await router.push({
+        name: routeName,
+        params: { viewTitle: view.id || '', viewId: tableId, projectId },
+        query: router.currentRoute.value.query,
+      })
+    } else {
+      await router.push({ name: routeName, params: { viewTitle: view.id || '', viewId: tableId, projectId } })
+    }
+
+    if (hardReload) {
+      await router.replace({ name: routeName, query: { reload: 'true' }, params: { viewId: tableId, projectId } }).then(() => {
+        router.replace({ name: routeName, query: {}, params: { viewId: tableId, projectId } })
+      })
+    }
+  }
+
   return {
     isLockedView,
     isViewsLoading,
@@ -149,6 +183,7 @@ export const useViewsStore = defineStore('viewsStore', () => {
     sharedView,
     viewsByTable,
     activeViewTitleOrId,
+    navigateToView,
   }
 })
 

From f7429d5cb84cce553fdf56dce34ff1709e7845b6 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:18 +0000
Subject: [PATCH 19/25] fix: Removed Create View label

---
 packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue b/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
index 02917ac392..ac5369ceab 100644
--- a/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
@@ -70,7 +70,6 @@ function onOpenModal({
     <slot />
     <template #overlay>
       <NcMenu class="max-w-48">
-        <div class="py-2 px-4 text-gray-500 text-sm">New View</div>
         <NcMenuItem @click="onOpenModal({ type: ViewTypes.GRID })">
           <div class="item">
             <div class="item-inner">

From fcd98c903a8fb41fd0c96c32e318a4de97bd1f68 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:19 +0000
Subject: [PATCH 20/25] fix: Fixed view duplication and delete

---
 .../dashboard/TreeView/ViewsList.vue          | 78 +++++++++++++++----
 1 file changed, 65 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
index 4551df02b5..d50038fd14 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
@@ -43,6 +43,8 @@ const isDefaultBase = computed(() => {
 
 const { viewsByTable, activeView } = storeToRefs(useViewsStore())
 
+const { navigateToTable } = useTablesStore()
+
 const views = computed(() => viewsByTable.value.get(table.value.id!)?.filter((v) => !v.is_default) ?? [])
 
 const { api } = useApi()
@@ -53,7 +55,7 @@ const { refreshCommandPalette } = useCommandPalette()
 
 const { addUndo, defineModelScope } = useUndoRedo()
 
-const { navigateToView } = useViewsStore()
+const { navigateToView, loadViews } = useViewsStore()
 
 /** Selected view(s) for menu */
 const selected = ref<string[]>([])
@@ -205,10 +207,11 @@ async function onRename(view: ViewType, originalTitle?: string, undo = false) {
       order: view.order,
     })
 
-    await router.replace({
-      params: {
-        viewTitle: view.id,
-      },
+    navigateToView({
+      view,
+      tableId: table.value.id!,
+      projectId: project.value.id!,
+      hardReload: view.type === ViewTypes.FORM && selected.value[0] === view.id,
     })
 
     refreshCommandPalette()
@@ -250,20 +253,22 @@ function openDeleteDialog(view: ViewType) {
     'modelValue': isOpen,
     'view': view,
     'onUpdate:modelValue': closeDialog,
-    'onDeleted': () => {
+    'onDeleted': async () => {
       closeDialog()
 
       emits('deleted')
 
       refreshCommandPalette()
-      if (activeView.value === view) {
-        // return to the default view
-        router.replace({
-          params: {
-            viewTitle: views.value[0].id,
-          },
+      if (activeView.value?.id === view.id) {
+        navigateToTable({
+          tableId: table.value.id!,
+          projectId: project.value.id!,
         })
       }
+
+      await loadViews({
+        tableId: table.value.id!,
+      })
     },
   })
 
@@ -291,6 +296,53 @@ const setIcon = async (icon: string, view: ViewType) => {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
+
+function onOpenModal({
+  title = '',
+  type,
+  copyViewId,
+  groupingFieldColumnId,
+}: {
+  title?: string
+  type: ViewTypes
+  copyViewId?: string
+  groupingFieldColumnId?: string
+}) {
+  const isOpen = ref(true)
+
+  const { close } = useDialog(resolveComponent('DlgViewCreate'), {
+    'modelValue': isOpen,
+    title,
+    type,
+    'tableId': table.value.id,
+    'selectedViewId': copyViewId,
+    groupingFieldColumnId,
+    'views': views,
+    'onUpdate:modelValue': closeDialog,
+    'onCreated': async (view: ViewType) => {
+      closeDialog()
+
+      refreshCommandPalette()
+
+      await loadViews()
+
+      navigateToView({
+        view,
+        tableId: table.value.id!,
+        projectId: project.value.id!,
+        hardReload: view.type === ViewTypes.FORM && selected.value[0] === view.id,
+      })
+
+      $e('a:view:create', { view: view.type })
+    },
+  })
+
+  function closeDialog() {
+    isOpen.value = false
+
+    close(1000)
+  }
+}
 </script>
 
 <template>
@@ -333,7 +385,7 @@ const setIcon = async (icon: string, view: ViewType) => {
       }"
       :data-view-id="view.id"
       @change-view="changeView"
-      @open-modal="$emit('openModal', $event)"
+      @open-modal="onOpenModal"
       @delete="openDeleteDialog"
       @rename="onRename"
       @select-icon="setIcon($event, view)"

From 51e2c9f2b595439103743cc29c01d2134ea06181 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:19 +0000
Subject: [PATCH 21/25] fix: View icon fix

---
 .../smartsheet/toolbar/ViewInfo.vue           | 22 ++++++-------------
 1 file changed, 7 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
index 45a5a558fc..23ceb54a12 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewInfo.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { ViewTypes } from 'nocodb-sdk'
-import { ActiveViewInj, inject } from '#imports'
 
-const selectedView = inject(ActiveViewInj)
-const { openedViewsTab } = storeToRefs(useViewsStore())
+const { openedViewsTab, activeView } = storeToRefs(useViewsStore())
 
 const { activeTable } = storeToRefs(useTablesStore())
 </script>
@@ -12,19 +10,13 @@ const { activeTable } = storeToRefs(useTablesStore())
   <div
     class="flex flex-row font-medium items-center border-gray-50 mt-0.5"
     :class="{
-      'min-w-2/5 max-w-2/5': selectedView?.type !== ViewTypes.KANBAN,
-      'min-w-1/4 max-w-1/4': selectedView?.type === ViewTypes.KANBAN,
+      'min-w-2/5 max-w-2/5': activeView?.type !== ViewTypes.KANBAN,
+      'min-w-1/4 max-w-1/4': activeView?.type === ViewTypes.KANBAN,
     }"
   >
     <LazyGeneralEmojiPicker :emoji="activeTable?.meta?.icon" readonly size="xsmall">
       <template #default>
-        <MdiTable
-          class="min-w-5 !text-gray-500"
-          :class="{
-            '!text-gray-500': !selectedView?.is_default,
-            '!text-gray-800 mr-0.25': selectedView?.is_default,
-          }"
-        />
+        <MdiTable class="min-w-5 !text-gray-500" />
       </template>
     </LazyGeneralEmojiPicker>
     <span
@@ -35,14 +27,14 @@ const { activeTable } = storeToRefs(useTablesStore())
     </span>
 
     <div class="px-2 text-gray-300">/</div>
-    <LazyGeneralEmojiPicker :emoji="selectedView?.meta?.icon" readonly size="xsmall">
+    <LazyGeneralEmojiPicker :emoji="activeView?.meta?.icon" readonly size="xsmall">
       <template #default>
-        <GeneralViewIcon :meta="{ type: selectedView?.type }" class="min-w-4.5 text-lg flex" />
+        <GeneralViewIcon :meta="{ type: activeView?.type }" class="min-w-4.5 text-lg flex" />
       </template>
     </LazyGeneralEmojiPicker>
 
     <span class="truncate pl-1.25 text-gray-700 max-w-28/100">
-      {{ selectedView?.is_default ? $t('title.defaultView') : selectedView?.title }}
+      {{ activeView?.is_default ? $t('title.defaultView') : activeView?.title }}
     </span>
 
     <LazySmartsheetToolbarReload v-if="openedViewsTab === 'view'" />

From 01c866758f5fcb65ad226fdc0d9c96e089cc0bd1 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:20 +0000
Subject: [PATCH 22/25] fix: Integrated view sidebar removal to tests

---
 .../dashboard/TreeView/CreateViewBtn.vue      |  8 +--
 .../dashboard/TreeView/ProjectNode.vue        |  6 ++-
 .../dashboard/TreeView/TableList.vue          |  1 -
 .../dashboard/TreeView/TableNode.vue          |  9 ++--
 .../dashboard/TreeView/ViewsList.vue          |  5 +-
 .../dashboard/TreeView/ViewsNode.vue          |  8 +--
 packages/nc-gui/components/nc/Select.vue      |  4 +-
 packages/nc-gui/lib/acl.ts                    |  1 +
 .../pages/Dashboard/Sidebar/index.ts          | 46 ++++++++++++++++-
 .../pages/Dashboard/ViewSidebar/index.ts      | 51 ++++++++-----------
 tests/playwright/pages/Dashboard/index.ts     |  4 ++
 .../db/columns/columnAttachments.spec.ts      |  2 +-
 .../tests/db/features/undo-redo.spec.ts       |  4 +-
 .../playwright/tests/db/general/views.spec.ts | 16 +++---
 .../tests/db/views/viewForm.spec.ts           |  4 +-
 .../tests/db/views/viewKanban.spec.ts         |  8 +--
 16 files changed, 112 insertions(+), 65 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue b/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
index ac5369ceab..fcf4eb6675 100644
--- a/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
@@ -71,7 +71,7 @@ function onOpenModal({
     <template #overlay>
       <NcMenu class="max-w-48">
         <NcMenuItem @click="onOpenModal({ type: ViewTypes.GRID })">
-          <div class="item">
+          <div class="item" data-testid="sidebar-view-create-grid">
             <div class="item-inner">
               <GeneralViewIcon :meta="{ type: ViewTypes.GRID }" />
               <div>Grid</div>
@@ -82,7 +82,7 @@ function onOpenModal({
         </NcMenuItem>
 
         <NcMenuItem @click="onOpenModal({ type: ViewTypes.FORM })">
-          <div class="item">
+          <div class="item" data-testid="sidebar-view-create-form">
             <div class="item-inner">
               <GeneralViewIcon :meta="{ type: ViewTypes.FORM }" />
               <div>Form</div>
@@ -92,7 +92,7 @@ function onOpenModal({
           </div>
         </NcMenuItem>
         <NcMenuItem @click="onOpenModal({ type: ViewTypes.GALLERY })">
-          <div class="item">
+          <div class="item" data-testid="sidebar-view-create-gallery">
             <div class="item-inner">
               <GeneralViewIcon :meta="{ type: ViewTypes.GALLERY }" />
               <div>Gallery</div>
@@ -101,7 +101,7 @@ function onOpenModal({
             <GeneralIcon class="plus" icon="plus" />
           </div>
         </NcMenuItem>
-        <NcMenuItem @click="onOpenModal({ type: ViewTypes.KANBAN })">
+        <NcMenuItem data-testid="sidebar-view-create-kanban" @click="onOpenModal({ type: ViewTypes.KANBAN })">
           <div class="item">
             <div class="item-inner">
               <GeneralViewIcon :meta="{ type: ViewTypes.KANBAN }" />
diff --git a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
index c41a773da1..f1cea52648 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
@@ -440,7 +440,11 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
           </span>
           <div :class="{ 'flex flex-grow h-full': !editMode }" @click="onProjectClick(project)"></div>
 
-          <NcDropdown v-model:visible="isOptionsOpen" :trigger="['click']">
+          <NcDropdown
+            v-if="isUIAllowed('tableCreate', { roles: projectRole })"
+            v-model:visible="isOptionsOpen"
+            :trigger="['click']"
+          >
             <NcButton
               class="nc-sidebar-node-btn"
               :class="{ '!text-black !opacity-100': isOptionsOpen }"
diff --git a/packages/nc-gui/components/dashboard/TreeView/TableList.vue b/packages/nc-gui/components/dashboard/TreeView/TableList.vue
index c372fea1cd..4920353c03 100644
--- a/packages/nc-gui/components/dashboard/TreeView/TableList.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/TableList.vue
@@ -152,7 +152,6 @@ const availableTables = computed(() => {
           class="nc-tree-item text-sm"
           :data-order="table.order"
           :data-id="table.id"
-          :data-testid="`tree-view-table-${table.title}`"
           :table="table"
           :project="project"
           :base-index="baseIndex"
diff --git a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
index 112280c7d1..7638f44c1a 100644
--- a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
@@ -123,12 +123,12 @@ const isTableOpened = computed(() => {
 
 <template>
   <div
-    class="nc-tree-item text-sm select-none w-full"
+    class="nc-tree-item nc-table-node-wrapper text-sm select-none w-full"
     :data-order="table.order"
     :data-id="table.id"
-    :data-testid="`tree-view-table-${table.title}`"
     :data-table-id="table.id"
     :class="[`nc-project-tree-tbl nc-project-tree-tbl-${table.title}`]"
+    :data-active="openedTableId === table.id"
   >
     <GeneralTooltip
       class="nc-tree-item-inner pl-11 pr-0.75 mb-0.25 rounded-md h-7.1 w-full group cursor-pointer hover:bg-gray-200"
@@ -143,6 +143,7 @@ const isTableOpened = computed(() => {
       <template #title>{{ table.table_name }}</template>
       <div
         class="table-context flex items-center gap-1 h-full"
+        :data-testid="`tree-view-table-${table.title}`"
         @contextmenu="setMenuContext('table', table)"
         @click="openTable(table)"
       >
@@ -260,8 +261,8 @@ const isTableOpened = computed(() => {
               </NcMenu>
             </template>
           </NcDropdown>
-          <DashboardTreeViewCreateViewBtn>
-            <NcButton type="text" size="xxsmall" class="nc-sidebar-node-btn">
+          <DashboardTreeViewCreateViewBtn v-if="isUIAllowed('viewCreateOrEdit')">
+            <NcButton type="text" size="xxsmall" class="nc-create-view-btn nc-sidebar-node-btn">
               <GeneralIcon icon="plus" class="text-xl leading-5" style="-webkit-text-stroke: 0.15px" />
             </NcButton>
           </DashboardTreeViewCreateViewBtn>
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
index d50038fd14..38740f328a 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
@@ -346,7 +346,10 @@ function onOpenModal({
 </script>
 
 <template>
-  <DashboardTreeViewCreateViewBtn :overlay-class-name="isDefaultBase ? '!left-18 !min-w-42' : '!left-25 !min-w-42'">
+  <DashboardTreeViewCreateViewBtn
+    v-if="isUIAllowed('viewCreateOrEdit')"
+    :overlay-class-name="isDefaultBase ? '!left-18 !min-w-42' : '!left-25 !min-w-42'"
+  >
     <NcButton
       type="text"
       size="xsmall"
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
index 2073f37870..95415cda72 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
@@ -270,7 +270,7 @@ function onRef(el: HTMLElement) {
           <NcButton
             type="text"
             size="xxsmall"
-            class="nc-sidebar-node-btn invisible !group-hover:visible"
+            class="nc-sidebar-node-btn invisible !group-hover:visible nc-sidebar-view-node-context-btn"
             :class="{
               '!visible': isDropdownOpen,
             }"
@@ -286,15 +286,15 @@ function onRef(el: HTMLElement) {
                 <div class="-ml-0.25">Rename</div>
               </NcMenuItem>
               <NcMenuItem @click.stop="onDuplicate">
-                <GeneralIcon icon="duplicate" />
+                <GeneralIcon icon="duplicate" class="nc-view-copy-icon" />
                 Duplicate
               </NcMenuItem>
 
               <NcDivider />
 
               <template v-if="!vModel.is_default">
-                <NcMenuItem class="!text-red-500" @click.stop="onDelete">
-                  <GeneralIcon icon="delete" class="text-sm" />
+                <NcMenuItem class="!text-red-500" l @click.stop="onDelete">
+                  <GeneralIcon icon="delete" class="text-sm nc-view-delete-icon" />
                   <div class="-ml-0.25">Delete</div>
                 </NcMenuItem>
               </template>
diff --git a/packages/nc-gui/components/nc/Select.vue b/packages/nc-gui/components/nc/Select.vue
index cf8b33aaae..5c1255c5ba 100644
--- a/packages/nc-gui/components/nc/Select.vue
+++ b/packages/nc-gui/components/nc/Select.vue
@@ -42,8 +42,8 @@ const onChange = (value: string) => {
     :filter-option="filterOption"
     :dropdown-match-select-width="dropdownMatchSelectWidth"
     :allow-clear="allowClear"
-    :loading="true"
-    :disabled="true"
+    :loading="loading"
+    :disabled="loading"
     @change="onChange"
   >
     <template #suffixIcon>
diff --git a/packages/nc-gui/lib/acl.ts b/packages/nc-gui/lib/acl.ts
index f856a260ea..43b860fe25 100644
--- a/packages/nc-gui/lib/acl.ts
+++ b/packages/nc-gui/lib/acl.ts
@@ -25,6 +25,7 @@ const rolePermissions = {
       projectDelete: true,
       projectDuplicate: true,
       newUser: true,
+      viewCreateOrEdit: true,
     },
   },
   [OrgUserRoles.VIEWER]: {
diff --git a/tests/playwright/pages/Dashboard/Sidebar/index.ts b/tests/playwright/pages/Dashboard/Sidebar/index.ts
index 1c83e88a8e..46212f8745 100644
--- a/tests/playwright/pages/Dashboard/Sidebar/index.ts
+++ b/tests/playwright/pages/Dashboard/Sidebar/index.ts
@@ -1,5 +1,5 @@
 import { expect, Locator } from '@playwright/test';
-import { ProjectTypes } from 'nocodb-sdk';
+import { ProjectTypes, ViewTypes } from 'nocodb-sdk';
 import { DashboardPage } from '..';
 import BasePage from '../../Base';
 import { DocsSidebarPage } from './DocsSidebar';
@@ -59,4 +59,48 @@ export class SidebarPage extends BasePage {
     });
     await this.dashboard.docs.pagesList.waitForOpen({ title });
   }
+
+  async createView({ title, type }: { title: string; type: ViewTypes }) {
+    const createViewButtonOfActiveProject = this.dashboard
+      .get()
+      .locator('.nc-table-node-wrapper[data-active="true"] .nc-create-view-btn');
+    await createViewButtonOfActiveProject.waitFor({ state: 'visible' });
+    await createViewButtonOfActiveProject.scrollIntoViewIfNeeded();
+    await createViewButtonOfActiveProject.click();
+
+    if (type === ViewTypes.GRID) {
+      await this.rootPage.getByTestId('sidebar-view-create-grid').last().click({ force: true });
+    } else if (type === ViewTypes.FORM) {
+      await this.rootPage.getByTestId('sidebar-view-create-form').last().click({ force: true });
+    } else if (type === ViewTypes.KANBAN) {
+      await this.rootPage.getByTestId('sidebar-view-create-kanban').last().click({ force: true });
+    } else if (type === ViewTypes.GALLERY) {
+      await this.rootPage.getByTestId('sidebar-view-create-gallery').last().click({ force: true });
+    }
+
+    await this.rootPage.locator('input[id="form_item_title"]:visible').waitFor({ state: 'visible' });
+    await this.rootPage.locator('input[id="form_item_title"]:visible').fill(title);
+    const submitAction = () =>
+      this.rootPage.locator('.ant-modal-content').locator('button.ant-btn.ant-btn-primary').click();
+    await this.waitForResponse({
+      httpMethodsToMatch: ['POST'],
+      requestUrlPathToMatch: '/api/v1/db/meta/tables/',
+      uiAction: submitAction,
+      responseJsonMatcher: json => json.title === title,
+    });
+    // Todo: Wait for view to be rendered
+    await this.rootPage.waitForTimeout(1000);
+  }
+
+  async verifyCreateViewButtonVisibility({ isVisible }: { isVisible: boolean }) {
+    const createViewButtonOfActiveProject = this.dashboard
+      .get()
+      .locator('.nc-table-node-wrapper[data-active="true"] .nc-create-view-btn');
+
+    if (isVisible) {
+      await expect(createViewButtonOfActiveProject).toBeVisible();
+    } else {
+      await expect(createViewButtonOfActiveProject).toHaveCount(0);
+    }
+  }
 }
diff --git a/tests/playwright/pages/Dashboard/ViewSidebar/index.ts b/tests/playwright/pages/Dashboard/ViewSidebar/index.ts
index b319bf4eee..35376ff9c3 100644
--- a/tests/playwright/pages/Dashboard/ViewSidebar/index.ts
+++ b/tests/playwright/pages/Dashboard/ViewSidebar/index.ts
@@ -1,6 +1,7 @@
 import { expect, Locator } from '@playwright/test';
 import { DashboardPage } from '..';
 import BasePage from '../../Base';
+import { ViewTypes } from 'nocodb-sdk';
 
 export class ViewSidebarPage extends BasePage {
   readonly project: any;
@@ -31,7 +32,7 @@ export class ViewSidebarPage extends BasePage {
   }
 
   get() {
-    return this.dashboard.get().locator('.nc-view-sidebar');
+    return this.dashboard.get().locator('.nc-table-node-wrapper[data-active="true"]');
   }
 
   async isVisible() {
@@ -53,34 +54,22 @@ export class ViewSidebarPage extends BasePage {
     await this.rootPage.goto(this.rootPage.url());
   }
 
-  private async createView({ title, locator }: { title: string; locator: Locator }) {
-    await this.rootPage.waitForTimeout(1000);
-    await locator.click();
-    await this.rootPage.locator('input[id="form_item_title"]:visible').waitFor({ state: 'visible' });
-    await this.rootPage.locator('input[id="form_item_title"]:visible').fill(title);
-    const submitAction = () =>
-      this.rootPage.locator('.ant-modal-content').locator('button.ant-btn.ant-btn-primary').click({ force: true });
-    await this.waitForResponse({
-      httpMethodsToMatch: ['POST'],
-      requestUrlPathToMatch: '/api/v1/db/meta/tables/',
-      uiAction: submitAction,
-      responseJsonMatcher: json => json.title === title,
-    });
-    await this.verifyToast({ message: 'View created successfully' });
-    // Todo: Wait for view to be rendered
+  private async createView({ title, type }: { title: string; type: ViewTypes }) {
     await this.rootPage.waitForTimeout(1000);
+
+    await this.dashboard.sidebar.createView({ title, type });
   }
 
   async createGalleryView({ title }: { title: string }) {
-    await this.createView({ title, locator: this.createGalleryButton });
+    await this.createView({ title, type: ViewTypes.GALLERY });
   }
 
   async createGridView({ title }: { title: string }) {
-    await this.createView({ title, locator: this.createGridButton });
+    await this.createView({ title, type: ViewTypes.GRID });
   }
 
   async createFormView({ title }: { title: string }) {
-    await this.createView({ title, locator: this.createFormButton });
+    await this.createView({ title, type: ViewTypes.FORM });
   }
 
   async openView({ title }: { title: string }) {
@@ -90,13 +79,13 @@ export class ViewSidebarPage extends BasePage {
   }
 
   async createKanbanView({ title }: { title: string }) {
-    await this.createView({ title, locator: this.createKanbanButton });
+    await this.createView({ title, type: ViewTypes.KANBAN });
 
     await this.rootPage.waitForTimeout(1500);
   }
 
   async createMapView({ title }: { title: string }) {
-    await this.createView({ title, locator: this.createMapButton });
+    await this.createView({ title, type: ViewTypes.MAP });
   }
 
   // Todo: Make selection better
@@ -135,13 +124,15 @@ export class ViewSidebarPage extends BasePage {
     await this.get().locator(`[data-testid="view-sidebar-view-${title}"]`).hover();
     await this.get()
       .locator(`[data-testid="view-sidebar-view-${title}"]`)
-      .locator('.nc-view-sidebar-node-context-btn')
+      .locator('.nc-sidebar-view-node-context-btn')
       .click();
 
     await this.rootPage
       .locator(`[data-testid="view-sidebar-view-actions-${title}"]`)
       .locator('.nc-view-delete-icon')
-      .click();
+      .click({
+        force: true,
+      });
 
     await this.rootPage.locator('button:has-text("Delete View"):visible').click();
   }
@@ -157,13 +148,15 @@ export class ViewSidebarPage extends BasePage {
     await this.get().locator(`[data-testid="view-sidebar-view-${title}"]`).hover();
     await this.get()
       .locator(`[data-testid="view-sidebar-view-${title}"]`)
-      .locator('.nc-view-sidebar-node-context-btn')
+      .locator('.nc-sidebar-view-node-context-btn')
       .click();
 
     await this.rootPage
       .locator(`[data-testid="view-sidebar-view-actions-${title}"]`)
       .locator('.nc-view-copy-icon')
-      .click();
+      .click({
+        force: true,
+      });
     const submitAction = () =>
       this.rootPage.locator('.ant-modal-content').locator('button:has-text("Create View"):visible').click();
     await this.waitForResponse({
@@ -198,11 +191,9 @@ export class ViewSidebarPage extends BasePage {
   }
 
   async validateRoleAccess(param: { role: string }) {
-    const count = param.role.toLowerCase() === 'creator' ? 1 : 0;
-    await expect(this.createGridButton).toHaveCount(count);
-    await expect(this.createGalleryButton).toHaveCount(count);
-    await expect(this.createFormButton).toHaveCount(count);
-    await expect(this.createKanbanButton).toHaveCount(count);
+    await this.dashboard.sidebar.verifyCreateViewButtonVisibility({
+      isVisible: param.role.toLowerCase() === 'creator',
+    });
 
     // await this.openDeveloperTab({});
     // await expect(this.erdButton).toHaveCount(1);
diff --git a/tests/playwright/pages/Dashboard/index.ts b/tests/playwright/pages/Dashboard/index.ts
index 014c3ca9a8..9a2aa2fce6 100644
--- a/tests/playwright/pages/Dashboard/index.ts
+++ b/tests/playwright/pages/Dashboard/index.ts
@@ -191,6 +191,10 @@ export class DashboardPage extends BasePage {
     await this.sidebar.userMenu.click();
     await this.rootPage.getByTestId('nc-sidebar-user-logout').waitFor({ state: 'visible' });
     await this.sidebar.userMenu.clickLogout();
+
+    // TODO: Remove this
+    await this.rootPage.reload();
+
     await this.rootPage.locator('[data-testid="nc-form-signin"]:visible').waitFor();
     await new Promise(resolve => setTimeout(resolve, 150));
   }
diff --git a/tests/playwright/tests/db/columns/columnAttachments.spec.ts b/tests/playwright/tests/db/columns/columnAttachments.spec.ts
index cfd8647cb5..c94d6c32f6 100644
--- a/tests/playwright/tests/db/columns/columnAttachments.spec.ts
+++ b/tests/playwright/tests/db/columns/columnAttachments.spec.ts
@@ -51,7 +51,7 @@ test.describe('Attachment column', () => {
     });
     await dashboard.rootPage.waitForTimeout(500);
     const sharedFormUrl = await dashboard.form.topbar.getSharedViewUrl();
-    await dashboard.viewSidebar.openView({ title: 'Country' });
+    await dashboard.treeView.openTable({ title: 'Country' });
 
     // Verify attachment in shared form
     const newPage = await context.newPage();
diff --git a/tests/playwright/tests/db/features/undo-redo.spec.ts b/tests/playwright/tests/db/features/undo-redo.spec.ts
index 9c0f3d1cfb..20939be061 100644
--- a/tests/playwright/tests/db/features/undo-redo.spec.ts
+++ b/tests/playwright/tests/db/features/undo-redo.spec.ts
@@ -457,10 +457,10 @@ test.describe('Undo Redo - Table & view rename operations', () => {
           break;
       }
       await dashboard.viewSidebar.renameView({ title: viewTypes[i], newTitle: 'newNameForTest' });
-      await dashboard.viewSidebar.verifyView({ title: 'newNameForTest', index: 1 });
+      await dashboard.viewSidebar.verifyView({ title: 'newNameForTest', index: 0 });
       await new Promise(resolve => setTimeout(resolve, 100));
       await undo({ page, dashboard });
-      await dashboard.viewSidebar.verifyView({ title: viewTypes[i], index: 1 });
+      await dashboard.viewSidebar.verifyView({ title: viewTypes[i], index: 0 });
       await dashboard.viewSidebar.deleteView({ title: viewTypes[i] });
     }
   });
diff --git a/tests/playwright/tests/db/general/views.spec.ts b/tests/playwright/tests/db/general/views.spec.ts
index 29c0604254..a98244c73c 100644
--- a/tests/playwright/tests/db/general/views.spec.ts
+++ b/tests/playwright/tests/db/general/views.spec.ts
@@ -21,29 +21,29 @@ test.describe('Views CRUD Operations', () => {
   test('Create views, reorder and delete', async () => {
     await dashboard.treeView.openTable({ title: 'City' });
     await dashboard.viewSidebar.createGridView({ title: 'CityGrid' });
-    await dashboard.viewSidebar.verifyView({ title: 'CityGrid', index: 1 });
+    await dashboard.viewSidebar.verifyView({ title: 'CityGrid', index: 0 });
     await dashboard.viewSidebar.renameView({
       title: 'CityGrid',
       newTitle: 'CityGrid2',
     });
     await dashboard.viewSidebar.verifyView({
       title: 'CityGrid2',
-      index: 1,
+      index: 0,
     });
 
     await dashboard.viewSidebar.createFormView({ title: 'CityForm' });
-    await dashboard.viewSidebar.verifyView({ title: 'CityForm', index: 2 });
+    await dashboard.viewSidebar.verifyView({ title: 'CityForm', index: 1 });
     await dashboard.viewSidebar.renameView({
       title: 'CityForm',
       newTitle: 'CityForm2',
     });
     await dashboard.viewSidebar.verifyView({
       title: 'CityForm2',
-      index: 2,
+      index: 1,
     });
 
     await dashboard.viewSidebar.createGalleryView({ title: 'CityGallery' });
-    await dashboard.viewSidebar.verifyView({ title: 'CityGallery', index: 3 });
+    await dashboard.viewSidebar.verifyView({ title: 'CityGallery', index: 2 });
     await dashboard.viewSidebar.renameView({
       title: 'CityGallery',
       newTitle: 'CityGallery2',
@@ -51,7 +51,7 @@ test.describe('Views CRUD Operations', () => {
 
     await dashboard.viewSidebar.verifyView({
       title: 'CityGallery2',
-      index: 3,
+      index: 2,
     });
 
     await dashboard.viewSidebar.changeViewIcon({
@@ -77,14 +77,14 @@ test.describe('Views CRUD Operations', () => {
     await dashboard.viewSidebar.deleteView({ title: 'CityForm2' });
     await dashboard.viewSidebar.verifyViewNotPresent({
       title: 'CityForm2',
-      index: 2,
+      index: 1,
     });
 
     // fix index after enabling reorder test
     await dashboard.viewSidebar.deleteView({ title: 'CityGallery2' });
     await dashboard.viewSidebar.verifyViewNotPresent({
       title: 'CityGallery2',
-      index: 1,
+      index: 0,
     });
   });
 
diff --git a/tests/playwright/tests/db/views/viewForm.spec.ts b/tests/playwright/tests/db/views/viewForm.spec.ts
index 3e6ba05f8f..aedaae5389 100644
--- a/tests/playwright/tests/db/views/viewForm.spec.ts
+++ b/tests/playwright/tests/db/views/viewForm.spec.ts
@@ -31,7 +31,7 @@ test.describe('Form view', () => {
     await dashboard.treeView.openTable({ title: 'Country' });
 
     await dashboard.viewSidebar.createFormView({ title: 'CountryForm' });
-    await dashboard.viewSidebar.verifyView({ title: 'CountryForm', index: 1 });
+    await dashboard.viewSidebar.verifyView({ title: 'CountryForm', index: 0 });
 
     // verify form-view fields order
     await form.verifyFormViewFieldsOrder({
@@ -92,7 +92,7 @@ test.describe('Form view', () => {
     await dashboard.treeView.openTable({ title: 'Country' });
 
     await dashboard.viewSidebar.createFormView({ title: 'CountryForm' });
-    await dashboard.viewSidebar.verifyView({ title: 'CountryForm', index: 1 });
+    await dashboard.viewSidebar.verifyView({ title: 'CountryForm', index: 0 });
 
     await form.configureHeader({
       title: 'Country',
diff --git a/tests/playwright/tests/db/views/viewKanban.spec.ts b/tests/playwright/tests/db/views/viewKanban.spec.ts
index 6906adecdb..38dc97f30c 100644
--- a/tests/playwright/tests/db/views/viewKanban.spec.ts
+++ b/tests/playwright/tests/db/views/viewKanban.spec.ts
@@ -61,7 +61,7 @@ test.describe('View', () => {
     });
     await dashboard.viewSidebar.verifyView({
       title: 'Film Kanban',
-      index: 1,
+      index: 0,
     });
 
     // configure stack-by field
@@ -202,7 +202,7 @@ test.describe('View', () => {
     });
     await dashboard.viewSidebar.verifyView({
       title: 'Film Kanban',
-      index: 1,
+      index: 0,
     });
 
     await toolbar.sort.add({
@@ -227,7 +227,7 @@ test.describe('View', () => {
     await dashboard.viewSidebar.copyView({ title: 'Film Kanban' });
     await dashboard.viewSidebar.verifyView({
       title: 'Untitled Kanban',
-      index: 2,
+      index: 1,
     });
     const kanban = dashboard.kanban;
     await kanban.verifyStackCount({ count: 6 });
@@ -328,7 +328,7 @@ test.describe('View', () => {
     });
     await dashboard.viewSidebar.verifyView({
       title: 'Film Kanban',
-      index: 1,
+      index: 0,
     });
 
     // Share view

From e931b4177fe40e4c78cda3e6c5d041f548461f98 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:20 +0000
Subject: [PATCH 23/25] fix: Integrated view sidebar removal to tests

---
 .../dashboard/TreeView/CreateViewBtn.vue         |  2 +-
 .../components/dashboard/TreeView/TableNode.vue  |  1 -
 .../components/dashboard/TreeView/ViewsList.vue  |  2 ++
 tests/playwright/pages/Dashboard/TreeView.ts     | 16 ++++++++--------
 .../tests/db/general/toolbarOperations.spec.ts   |  8 +++++---
 tests/playwright/tests/db/general/views.spec.ts  |  4 ++--
 tests/playwright/tests/db/views/viewForm.spec.ts |  3 +--
 7 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue b/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
index fcf4eb6675..467589c314 100644
--- a/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
@@ -66,7 +66,7 @@ function onOpenModal({
 </script>
 
 <template>
-  <NcDropdown v-model:isOpen="isOpen" @click.stop="isOpen = !isOpen">
+  <NcDropdown v-model:isOpen="isOpen" destroy-popup-on-hide @click.stop="isOpen = !isOpen">
     <slot />
     <template #overlay>
       <NcMenu class="max-w-48">
diff --git a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
index 7638f44c1a..c932258d4f 100644
--- a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
@@ -143,7 +143,6 @@ const isTableOpened = computed(() => {
       <template #title>{{ table.table_name }}</template>
       <div
         class="table-context flex items-center gap-1 h-full"
-        :data-testid="`tree-view-table-${table.title}`"
         @contextmenu="setMenuContext('table', table)"
         @click="openTable(table)"
       >
diff --git a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
index 38740f328a..6fcdf9d7a0 100644
--- a/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
@@ -32,6 +32,8 @@ const emits = defineEmits<Emits>()
 const project = inject(ProjectInj)!
 const table = inject(SidebarTableInj)!
 
+const { isUIAllowed } = useRoles()
+
 const { $e } = useNuxtApp()
 
 const isDefaultBase = computed(() => {
diff --git a/tests/playwright/pages/Dashboard/TreeView.ts b/tests/playwright/pages/Dashboard/TreeView.ts
index c3aa3fbf35..1b6868f559 100644
--- a/tests/playwright/pages/Dashboard/TreeView.ts
+++ b/tests/playwright/pages/Dashboard/TreeView.ts
@@ -72,7 +72,7 @@ export class TreeViewPage extends BasePage {
 
   async getTable({ index, tableTitle }: { index: number; tableTitle?: string }) {
     if (tableTitle) {
-      return this.get().getByTestId(`tree-view-table-${tableTitle}`);
+      return this.get().getByTestId(`nc-tbl-title-${tableTitle}`);
     }
 
     return this.get().locator('.nc-tree-item').nth(index);
@@ -95,18 +95,18 @@ export class TreeViewPage extends BasePage {
       await this.rootPage.locator('.h-full > div > .nc-sidebar-left-toggle-icon').click();
     }
 
-    await this.get().getByTestId(`tree-view-table-${title}`).waitFor({ state: 'visible' });
+    await this.get().getByTestId(`nc-tbl-title-${title}`).waitFor({ state: 'visible' });
 
     if (networkResponse === true) {
       await this.waitForResponse({
-        uiAction: () => this.get().getByTestId(`tree-view-table-${title}`).click(),
+        uiAction: () => this.get().getByTestId(`nc-tbl-title-${title}`).click(),
         httpMethodsToMatch: ['GET'],
         requestUrlPathToMatch: `/api/v1/db/data/noco/`,
         responseJsonMatcher: json => json.pageInfo,
       });
       await this.dashboard.waitForTabRender({ title, mode });
     } else {
-      await this.get().getByTestId(`tree-view-table-${title}`).click();
+      await this.get().getByTestId(`nc-tbl-title-${title}`).click();
       await this.rootPage.waitForTimeout(1000);
     }
   }
@@ -148,13 +148,13 @@ export class TreeViewPage extends BasePage {
 
   async verifyTable({ title, index, exists = true }: { title: string; index?: number; exists?: boolean }) {
     if (exists) {
-      await expect(this.get().getByTestId(`tree-view-table-${title}`)).toHaveCount(1);
+      await expect(this.get().getByTestId(`nc-tbl-title-${title}`)).toHaveCount(1);
 
       if (index) {
         await expect(this.get().locator('.nc-tbl-title').nth(index)).toHaveText(title);
       }
     } else {
-      await expect(this.get().getByTestId(`tree-view-table-${title}`)).toHaveCount(0);
+      await expect(this.get().getByTestId(`nc-tbl-title-${title}`)).toHaveCount(0);
     }
   }
 
@@ -206,7 +206,7 @@ export class TreeViewPage extends BasePage {
     await this.dashboard
       .get()
       .locator(`[data-testid="tree-view-table-draggable-handle-${sourceTable}"]`)
-      .dragTo(this.get().locator(`[data-testid="tree-view-table-${destinationTable}"]`));
+      .dragTo(this.get().locator(`[data-testid="nc-tbl-title-${destinationTable}"]`));
   }
 
   async projectSettings({ title }: { title?: string }) {
@@ -261,7 +261,7 @@ export class TreeViewPage extends BasePage {
       httpMethodsToMatch: ['POST'],
       requestUrlPathToMatch: `/api/v1/db/meta/duplicate/`,
     });
-    await this.get().locator(`[data-testid="tree-view-table-${title} copy"]`).waitFor();
+    await this.get().locator(`[data-testid="nc-tbl-title-${title} copy"]`).waitFor();
   }
 
   async verifyTabIcon({ title, icon, iconDisplay }: { title: string; icon: string; iconDisplay?: string }) {
diff --git a/tests/playwright/tests/db/general/toolbarOperations.spec.ts b/tests/playwright/tests/db/general/toolbarOperations.spec.ts
index 81fcd8f44f..ffda9512f4 100644
--- a/tests/playwright/tests/db/general/toolbarOperations.spec.ts
+++ b/tests/playwright/tests/db/general/toolbarOperations.spec.ts
@@ -512,8 +512,9 @@ test.describe('Toolbar operations (GRID)', () => {
     await toolbar.clickGroupBy();
 
     await dashboard.viewSidebar.createGridView({ title: 'Test' });
-    await dashboard.viewSidebar.openView({ title: 'Test' });
-    await dashboard.viewSidebar.openView({ title: 'Film' });
+    await dashboard.rootPage.waitForTimeout(500);
+
+    await dashboard.treeView.openTable({ title: 'Film' });
 
     await dashboard.grid.groupPage.verifyGroupHeader({
       indexMap: [0],
@@ -529,13 +530,14 @@ test.describe('Toolbar operations (GRID)', () => {
 
   test('Duplicate View and Verify GroupBy', async () => {
     await dashboard.treeView.openTable({ title: 'Film' });
+    await dashboard.viewSidebar.createGridView({ title: 'Film Grid' });
 
     // Open GroupBy Menu
     await toolbar.clickGroupBy();
     await toolbar.groupBy.add({ title: 'Length', ascending: false, locallySaved: false });
     await toolbar.clickGroupBy();
 
-    await dashboard.viewSidebar.copyView({ title: 'Film' });
+    await dashboard.viewSidebar.copyView({ title: 'Film Grid' });
 
     await dashboard.grid.groupPage.verifyGroupHeader({
       indexMap: [0],
diff --git a/tests/playwright/tests/db/general/views.spec.ts b/tests/playwright/tests/db/general/views.spec.ts
index a98244c73c..6d87a6dbd4 100644
--- a/tests/playwright/tests/db/general/views.spec.ts
+++ b/tests/playwright/tests/db/general/views.spec.ts
@@ -109,7 +109,7 @@ test.describe('Views CRUD Operations', () => {
     await dashboard.rootPage.waitForTimeout(1000);
     await toolbar.searchData.verify('City-CityGrid');
 
-    await dashboard.viewSidebar.openView({ title: 'City' });
+    await dashboard.treeView.openTable({ title: 'City' });
     await dashboard.rootPage.waitForTimeout(1000);
     await toolbar.searchData.verify('City-City');
 
@@ -121,7 +121,7 @@ test.describe('Views CRUD Operations', () => {
     await toolbar.searchData.get().fill('Actor-ActorGrid');
     await toolbar.searchData.verify('Actor-ActorGrid');
 
-    await dashboard.viewSidebar.openView({ title: 'Actor' });
+    await dashboard.treeView.openTable({ title: 'Actor' });
     await dashboard.rootPage.waitForTimeout(1000);
     await toolbar.searchData.verify('');
 
diff --git a/tests/playwright/tests/db/views/viewForm.spec.ts b/tests/playwright/tests/db/views/viewForm.spec.ts
index aedaae5389..5019b6744d 100644
--- a/tests/playwright/tests/db/views/viewForm.spec.ts
+++ b/tests/playwright/tests/db/views/viewForm.spec.ts
@@ -385,7 +385,6 @@ test.describe('Form view with LTAR', () => {
     await dashboard.rootPage.waitForTimeout(500);
 
     await dashboard.treeView.openTable({ title: 'Country' });
-    await dashboard.viewSidebar.openView({ title: 'Country' });
 
     await dashboard.grid.cell.verify({
       index: 3,
@@ -492,7 +491,7 @@ test.describe('Form view', () => {
     // kludge- reload
     await dashboard.rootPage.reload();
 
-    await dashboard.viewSidebar.openView({ title: 'selectBased' });
+    await dashboard.treeView.openTable({ title: 'selectBased' });
 
     await dashboard.rootPage.waitForTimeout(2000);
 

From 1b278b95359c9b3e844438c96c62596291b11382 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Fri, 22 Sep 2023 15:23:20 +0000
Subject: [PATCH 24/25] fix: Integrated view sidebar removal to tests

---
 .../dashboard/TreeView/TableNode.vue          |  1 +
 .../pages/Dashboard/Sidebar/index.ts          | 25 +++++++++++++++----
 tests/playwright/pages/Dashboard/TreeView.ts  |  2 +-
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
index c932258d4f..a356e29b38 100644
--- a/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
+++ b/packages/nc-gui/components/dashboard/TreeView/TableNode.vue
@@ -143,6 +143,7 @@ const isTableOpened = computed(() => {
       <template #title>{{ table.table_name }}</template>
       <div
         class="table-context flex items-center gap-1 h-full"
+        :data-testid="`nc-tbl-side-node-${table.title}`"
         @contextmenu="setMenuContext('table', table)"
         @click="openTable(table)"
       >
diff --git a/tests/playwright/pages/Dashboard/Sidebar/index.ts b/tests/playwright/pages/Dashboard/Sidebar/index.ts
index 46212f8745..61ea263dbc 100644
--- a/tests/playwright/pages/Dashboard/Sidebar/index.ts
+++ b/tests/playwright/pages/Dashboard/Sidebar/index.ts
@@ -64,20 +64,35 @@ export class SidebarPage extends BasePage {
     const createViewButtonOfActiveProject = this.dashboard
       .get()
       .locator('.nc-table-node-wrapper[data-active="true"] .nc-create-view-btn');
-    await createViewButtonOfActiveProject.waitFor({ state: 'visible' });
     await createViewButtonOfActiveProject.scrollIntoViewIfNeeded();
     await createViewButtonOfActiveProject.click();
 
+    // TODO: Find a better way to do it
+    let createViewTypeButton: Locator;
+
     if (type === ViewTypes.GRID) {
-      await this.rootPage.getByTestId('sidebar-view-create-grid').last().click({ force: true });
+      createViewTypeButton = this.rootPage.getByTestId('sidebar-view-create-grid');
     } else if (type === ViewTypes.FORM) {
-      await this.rootPage.getByTestId('sidebar-view-create-form').last().click({ force: true });
+      createViewTypeButton = this.rootPage.getByTestId('sidebar-view-create-form');
     } else if (type === ViewTypes.KANBAN) {
-      await this.rootPage.getByTestId('sidebar-view-create-kanban').last().click({ force: true });
+      createViewTypeButton = this.rootPage.getByTestId('sidebar-view-create-kanban');
     } else if (type === ViewTypes.GALLERY) {
-      await this.rootPage.getByTestId('sidebar-view-create-gallery').last().click({ force: true });
+      createViewTypeButton = this.rootPage.getByTestId('sidebar-view-create-gallery');
+    }
+
+    await this.rootPage.waitForTimeout(750);
+    const allButtons = await createViewTypeButton.all();
+    for (const btn of allButtons) {
+      if (await btn.isVisible()) {
+        createViewTypeButton = btn;
+        break;
+      }
     }
 
+    await createViewTypeButton.click({
+      force: true,
+    });
+
     await this.rootPage.locator('input[id="form_item_title"]:visible').waitFor({ state: 'visible' });
     await this.rootPage.locator('input[id="form_item_title"]:visible').fill(title);
     const submitAction = () =>
diff --git a/tests/playwright/pages/Dashboard/TreeView.ts b/tests/playwright/pages/Dashboard/TreeView.ts
index 1b6868f559..3fbffddb65 100644
--- a/tests/playwright/pages/Dashboard/TreeView.ts
+++ b/tests/playwright/pages/Dashboard/TreeView.ts
@@ -72,7 +72,7 @@ export class TreeViewPage extends BasePage {
 
   async getTable({ index, tableTitle }: { index: number; tableTitle?: string }) {
     if (tableTitle) {
-      return this.get().getByTestId(`nc-tbl-title-${tableTitle}`);
+      return this.get().getByTestId(`nc-tbl-side-node-${tableTitle}`);
     }
 
     return this.get().locator('.nc-tree-item').nth(index);

From f6948d8564603fb99d36e150446da801f0037010 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Sat, 23 Sep 2023 12:03:57 +0530
Subject: [PATCH 25/25] fix: Fixed tests issues with view sidebar removal

---
 .../components/smartsheet/grid/GroupBy.vue    | 14 +++++++---
 .../[projectId]/index/index/index.vue         |  2 +-
 .../pages/index/[typeOrId]/view/[viewId].vue  |  4 +--
 packages/nc-gui/store/tables.ts               |  4 ---
 .../Dashboard/Grid/Column/LTAR/LinkRecord.ts  |  2 +-
 tests/playwright/pages/Dashboard/TreeView.ts  | 10 ++++++-
 .../pages/Dashboard/common/Cell/index.ts      |  2 +-
 .../pages/Dashboard/common/Topbar/Share.ts    | 26 ++++++++++++++++---
 .../pages/Dashboard/common/Topbar/index.ts    |  9 ++++---
 tests/playwright/pages/SharedForm/index.ts    |  2 +-
 .../tests/db/features/baseShare.spec.ts       |  4 +--
 11 files changed, 56 insertions(+), 23 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/grid/GroupBy.vue b/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
index 082e04939e..773f6ea715 100644
--- a/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
+++ b/packages/nc-gui/components/smartsheet/grid/GroupBy.vue
@@ -30,6 +30,8 @@ const emits = defineEmits(['update:paginationData'])
 
 const vGroup = useVModel(props, 'group', emits)
 
+const { isViewDataLoading, isPaginationLoading } = storeToRefs(useViewsStore())
+
 const reloadViewDataHook = inject(ReloadViewDataHookInj, createEventHook())
 
 const _depth = props.depth ?? 0
@@ -85,13 +87,19 @@ reloadViewDataHook?.on(reloadViewDataHandler)
 
 watch(
   [() => vGroup.value.key],
-  (n, o) => {
+  async (n, o) => {
     if (n !== o) {
+      isViewDataLoading.value = true
+      isPaginationLoading.value = true
+
       if (vGroup.value.nested) {
-        props.loadGroups({}, vGroup.value)
+        await props.loadGroups({}, vGroup.value)
       } else {
-        props.loadGroupData(vGroup.value, true)
+        await props.loadGroupData(vGroup.value, true)
       }
+
+      isViewDataLoading.value = false
+      isPaginationLoading.value = false
     }
   },
   { immediate: true },
diff --git a/packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index/index.vue b/packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index/index.vue
index 10933e4238..ccb6d6a9ae 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index/index.vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/[projectId]/index/index/index.vue
@@ -112,7 +112,7 @@ function openQuickImportDialog(type: QuickImportTypes, file: File) {
 }
 
 watch(
-  () => project.value.id,
+  () => project.value?.id,
   () => {
     if (project.value?.id && project.value.type === 'database') {
       const { addTab } = useTabs()
diff --git a/packages/nc-gui/pages/index/[typeOrId]/view/[viewId].vue b/packages/nc-gui/pages/index/[typeOrId]/view/[viewId].vue
index aa472daa96..c39c910cdb 100644
--- a/packages/nc-gui/pages/index/[typeOrId]/view/[viewId].vue
+++ b/packages/nc-gui/pages/index/[typeOrId]/view/[viewId].vue
@@ -10,7 +10,7 @@ definePageMeta({
 
 const route = useRoute()
 
-const { loadSharedView } = useSharedView()
+const { loadSharedView, meta } = useSharedView()
 const { isViewDataLoading } = storeToRefs(useViewsStore())
 
 const showPassword = ref(false)
@@ -37,5 +37,5 @@ onMounted(async () => {
     <LazySharedViewAskPassword v-model="showPassword" />
   </div>
 
-  <LazySharedViewGrid v-else />
+  <LazySharedViewGrid v-else-if="meta" />
 </template>
diff --git a/packages/nc-gui/store/tables.ts b/packages/nc-gui/store/tables.ts
index a844942a38..bfbf842bc8 100644
--- a/packages/nc-gui/store/tables.ts
+++ b/packages/nc-gui/store/tables.ts
@@ -63,14 +63,10 @@ export const useTablesStore = defineStore('tablesStore', () => {
   )
 
   const loadProjectTables = async (projectId: string, force = false) => {
-    const projects = projectsStore.projects
     if (!force && projectTables.value.get(projectId)) {
       return
     }
 
-    const workspaceProject = projects.get(projectId)
-    if (!workspaceProject) throw new Error('Project not found')
-
     const existingTables = projectTables.value.get(projectId)
     if (existingTables && !force) {
       return
diff --git a/tests/playwright/pages/Dashboard/Grid/Column/LTAR/LinkRecord.ts b/tests/playwright/pages/Dashboard/Grid/Column/LTAR/LinkRecord.ts
index 6ea0a20344..352b786063 100644
--- a/tests/playwright/pages/Dashboard/Grid/Column/LTAR/LinkRecord.ts
+++ b/tests/playwright/pages/Dashboard/Grid/Column/LTAR/LinkRecord.ts
@@ -24,7 +24,7 @@ export class LinkRecord extends BasePage {
 
     {
       const childList = linkRecord.getByTestId(`nc-excluded-list-item`);
-      expect.poll(() => linkRecord.getByTestId(`nc-excluded-list-item`).count()).toBe(cardTitle.length);
+      await expect.poll(() => linkRecord.getByTestId(`nc-excluded-list-item`).count()).toBe(cardTitle.length);
       for (let i = 0; i < cardTitle.length; i++) {
         await childList.nth(i).locator('.nc-display-value').scrollIntoViewIfNeeded();
         await childList.nth(i).locator('.nc-display-value').waitFor({ state: 'visible' });
diff --git a/tests/playwright/pages/Dashboard/TreeView.ts b/tests/playwright/pages/Dashboard/TreeView.ts
index 3fbffddb65..68430cc7fc 100644
--- a/tests/playwright/pages/Dashboard/TreeView.ts
+++ b/tests/playwright/pages/Dashboard/TreeView.ts
@@ -99,7 +99,15 @@ export class TreeViewPage extends BasePage {
 
     if (networkResponse === true) {
       await this.waitForResponse({
-        uiAction: () => this.get().getByTestId(`nc-tbl-title-${title}`).click(),
+        uiAction: () =>
+          this.get()
+            .getByTestId(`nc-tbl-title-${title}`)
+            .click({
+              position: {
+                x: 10,
+                y: 10,
+              },
+            }),
         httpMethodsToMatch: ['GET'],
         requestUrlPathToMatch: `/api/v1/db/data/noco/`,
         responseJsonMatcher: json => json.pageInfo,
diff --git a/tests/playwright/pages/Dashboard/common/Cell/index.ts b/tests/playwright/pages/Dashboard/common/Cell/index.ts
index f04090517b..8176d0d390 100644
--- a/tests/playwright/pages/Dashboard/common/Cell/index.ts
+++ b/tests/playwright/pages/Dashboard/common/Cell/index.ts
@@ -341,7 +341,7 @@ export class CellPageObject extends BasePage {
         await this.rootPage.waitForSelector('.nc-modal-child-list:visible');
 
         // verify child list count & contents
-        expect.poll(() => this.rootPage.locator('.ant-card:visible').count()).toBe(count);
+        await expect.poll(() => this.rootPage.locator('.ant-card:visible').count()).toBe(count);
 
         // close child list
         await this.rootPage.locator('.nc-modal-child-list').locator('.nc-close-btn').last().click();
diff --git a/tests/playwright/pages/Dashboard/common/Topbar/Share.ts b/tests/playwright/pages/Dashboard/common/Topbar/Share.ts
index edf354c006..143d7c7a9f 100644
--- a/tests/playwright/pages/Dashboard/common/Topbar/Share.ts
+++ b/tests/playwright/pages/Dashboard/common/Topbar/Share.ts
@@ -51,7 +51,16 @@ export class TopbarSharePage extends BasePage {
   }
 
   async clickShareBasePublicAccess() {
-    await this.get().locator(`[data-testid="nc-share-base-sub-modal"]`).locator('.ant-switch').nth(0).click();
+    await this.get()
+      .locator(`[data-testid="nc-share-base-sub-modal"]`)
+      .locator('.ant-switch')
+      .nth(0)
+      .click({
+        position: {
+          x: 4,
+          y: 4,
+        },
+      });
   }
 
   async isSharedBasePublicAccessEnabled() {
@@ -63,14 +72,25 @@ export class TopbarSharePage extends BasePage {
   }
 
   async clickShareBaseEditorAccess() {
-    await this.get().locator(`[data-testid="nc-share-base-sub-modal"]`).locator('.ant-switch').nth(1).click();
+    await this.rootPage.waitForTimeout(1000);
+
+    const shareBaseSwitch = this.get().locator(`[data-testid="nc-share-base-sub-modal"]`).locator('.ant-switch');
+    const count = await shareBaseSwitch.count();
+
+    await this.get()
+      .locator(`[data-testid="nc-share-base-sub-modal"]`)
+      .locator('.ant-switch')
+      .nth(count - 1)
+      .click({
+        position: { x: 4, y: 4 },
+      });
   }
 
   async isSharedBaseEditorAccessEnabled() {
     return await this.get()
       .locator(`[data-testid="nc-share-base-sub-modal"]`)
       .locator('.ant-switch')
-      .nth(1)
+      .nth(0)
       .isChecked();
   }
 
diff --git a/tests/playwright/pages/Dashboard/common/Topbar/index.ts b/tests/playwright/pages/Dashboard/common/Topbar/index.ts
index 6f2fa9c21c..eb4eda4cc0 100644
--- a/tests/playwright/pages/Dashboard/common/Topbar/index.ts
+++ b/tests/playwright/pages/Dashboard/common/Topbar/index.ts
@@ -54,12 +54,13 @@ export class TopbarPage extends BasePage {
     return await this.getClipboardText();
   }
 
-  async getSharedBaseUrl({ role }: { role: string }) {
+  async getSharedBaseUrl({ role, enableSharedBase }: { role: string; enableSharedBase: boolean }) {
     await this.clickShare();
-    if (!(await this.share.isSharedBasePublicAccessEnabled())) await this.share.clickShareBasePublicAccess();
-    if (role === 'editor' && !(await this.share.isSharedBaseEditorAccessEnabled())) {
+    if (enableSharedBase) await this.share.clickShareBasePublicAccess();
+
+    if (role === 'editor' && enableSharedBase) {
       await this.share.clickShareBaseEditorAccess();
-    } else if (role === 'viewer' && (await this.share.isSharedBaseEditorAccessEnabled())) {
+    } else if (role === 'viewer' && !enableSharedBase) {
       await this.share.clickShareBaseEditorAccess();
     }
     await this.share.clickCopyLink();
diff --git a/tests/playwright/pages/SharedForm/index.ts b/tests/playwright/pages/SharedForm/index.ts
index cb2ce79ca3..2f435427e9 100644
--- a/tests/playwright/pages/SharedForm/index.ts
+++ b/tests/playwright/pages/SharedForm/index.ts
@@ -58,7 +58,7 @@ export class SharedFormPage extends BasePage {
 
     {
       const childList = linkRecord.locator(`.ant-card`);
-      expect.poll(() => linkRecord.locator(`.ant-card`).count()).toBe(cardTitle.length);
+      await expect.poll(() => linkRecord.locator(`.ant-card`).count()).toBe(cardTitle.length);
       for (let i = 0; i < cardTitle.length; i++) {
         expect(await childList.nth(i).textContent()).toContain(cardTitle[i]);
       }
diff --git a/tests/playwright/tests/db/features/baseShare.spec.ts b/tests/playwright/tests/db/features/baseShare.spec.ts
index 8265a8d19c..713f168810 100644
--- a/tests/playwright/tests/db/features/baseShare.spec.ts
+++ b/tests/playwright/tests/db/features/baseShare.spec.ts
@@ -66,7 +66,7 @@ test.describe('Shared base', () => {
     let url = '';
     // share button visible only if a table is opened
     await dashboard.treeView.openTable({ title: 'Country' });
-    url = await dashboard.grid.topbar.getSharedBaseUrl({ role: 'editor' });
+    url = await dashboard.grid.topbar.getSharedBaseUrl({ role: 'editor', enableSharedBase: true });
 
     await dashboard.rootPage.waitForTimeout(2000);
     // access shared base link
@@ -85,7 +85,7 @@ test.describe('Shared base', () => {
 
     // await dashboard.treeView.openProject({ title: context.project.title });
     await dashboard.treeView.openTable({ title: 'Country' });
-    url = await dashboard.grid.topbar.getSharedBaseUrl({ role: 'viewer' });
+    url = await dashboard.grid.topbar.getSharedBaseUrl({ role: 'viewer', enableSharedBase: false });
 
     await dashboard.rootPage.waitForTimeout(2000);
     // access shared base link