Nc feat: header revamp (#9204)

* fix(nc-gui): update topbar breadcrumb divider

* feat(nc-gui): custom list component setup

* fix(nc-gui): update reload view data tooltip

* feat(nc-gui): custom list component

* feat(nc-gui): add table list menu

* fix(nc-gui): small changes

* fix(nc-gui): add bases list dropdown

* fix(nc-gui): show chevron icon in mobile view

* feat(nc-gui): add view list dropdown in topbar

* fix(nc-gui): auto scroll selected list option on open dropdown

* feat(nc-gui): add typedocs for each fun from custom list component

* chore(nc-gui): add typedocs for new functions

* fix(nc-gui): view search issue on default view

* fix(nc-gui): reset selected option hover state on search input

* fix(nc-gui): font weight issue

* fix(nc-gui): show reload data topbar option

* fix(nc-gui): change view action menu position

* fix(nc-gui): font weight issue

* feat(nc-gui): create new table/view from topbar

* fix(nc-gui): update other page headers

* fix(nc-gui): project view header

* fix(nc-gui): update admin panel workspaces page header

* fix(nc-gui): admin panel base/workspace user page header

* fix(nc-gui): admin panel scroll issue

* fix(nc-gui): update project home page

* fix(nc-gui): table list scroll issue

* chore(nc-gui): lint

* fix(nc-gui): reset breadcrumb btn hover state on open dropdown

* fix(nc-gui): review changes

* fix(nc-gui): use slash icon instead of text

* fix(nc-gui): pr review changes

* fix(nc-gui): details tab height issue

* fix(nc-gui): add user account pages breadcrumb

* fix(nc-gui): hide rename view option

* fix(nc-gui): disable scrollIntoView on base rename

* fix(nc-gui): on rename view select text

* fix(nc-gui): user menu overflow issue if sidebar baselist is scrollable

* feat(nc-gui): use virtual scrolling for NcList component

* fix(nc-gui): reduce chevron icon opacity

* chore(nc-gui): lint

* fix(nc-gui): ai review changes

* fix(nc-gui): view rename input focus issue

* fix(nc-gui): topbar width issue

* fix(nc-gui): udpate toolbar height

* fix(nc-gui): update chevron icon from breadcrumb

* fix(nc-gui): update breadcrumb icon size

* fix(nc-gui): add min width for breadcrumb

* fix(nc-gui): add topbar bottom border

* fix(nc-gui): details tab heigth and alignment issue

* fix(nc-gui): hide basename and show only icon

* fix(nc-gui): update NcList component

* fix(nc-gui): update admin panel header

* fix(nc-gui): add header in account settings pages

* fix(nc-gui): add account pages header oss

* fix(nc-gui): udpate max width

* chore(nc-gui): lint

* fix(nc-gui(: reduce topbar top padding

* fix(nc-gui): typo error

* fix(nc-gui): review changes

* fix(nc-gui): review changes

* fix(nc-gui): slash icon conflict

* fix(nc-gui): review changes

* fix(nc-gui): remove chevron icon & add list wrapper div to control height

* fix(nc-gui): ncList keyboard navigation issue

* chore(nc-gui): lint

packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue

@@ -32,6 +32,27 @@ const overlayClassName = computed(() => {
   return 'nc-view-create-dropdown'
 })
 
+/**
+ * Opens a modal for creating or editing a view.
+ *
+ * @param options - The options for opening the modal.
+ * @param options.title - The title of the modal. Default is an empty string.
+ * @param options.type - The type of view to create or edit.
+ * @param options.copyViewId - The ID of the view to copy, if creating a copy.
+ * @param options.groupingFieldColumnId - The ID of the column to use for grouping, if applicable.
+ * @param options.calendarRange - The date range for calendar views.
+ * @param options.coverImageColumnId - The ID of the column to use for cover images, if applicable.
+ *
+ * @returns A Promise that resolves when the modal operation is complete.
+ *
+ * @remarks
+ * This function opens a modal dialog for creating or editing a view.
+ * It handles the dialog state, view creation, and navigation to the newly created view.
+ * After creating a view, it refreshes the command palette and reloads the views.
+ *
+ * @see {@link packages/nc-gui/components/smartsheet/topbar/ViewListDropdown.vue} for a similar implementation of view creation dialog.
+ * If this function is updated, consider updating the other implementations as well.
+ */
 async function onOpenModal({
   title = '',
   type,

packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue

@@ -112,7 +112,7 @@ const enableEditMode = () => {
   nextTick(() => {
     input.value?.focus()
     input.value?.select()
-    input.value?.scrollIntoView()
+    // input.value?.scrollIntoView()
   })
 }
 
@@ -128,7 +128,7 @@ const enableEditModeForSource = (sourceId: string) => {
     if (!input) return
     input?.focus()
     input?.select()
-    input?.scrollIntoView()
+    // input?.scrollIntoView()
   })
 }
 
@@ -225,6 +225,19 @@ const setColor = async (color: string, base: BaseType) => {
   }
 }
 
+/**
+ * Opens a dialog to create a new table.
+ *
+ * @returns {void}
+ *
+ * @remarks
+ * This function is triggered when the user initiates the table creation process.
+ * It opens a dialog for table creation, handles the dialog closure,
+ * and potentially scrolls to the newly created table.
+ *
+ * @see {@link packages/nc-gui/components/smartsheet/topbar/TableListDropdown.vue} for a similar implementation
+ * of table creation dialog. If this function is updated, consider updating the other implementation as well.
+ */
 function openTableCreateDialog(sourceIndex?: number | undefined) {
   const isOpen = ref(true)
   let sourceId = base.value!.sources?.[0].id

packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { VNodeRef } from '@vue/runtime-core'
 import type { TableType, ViewType, ViewTypes } from 'nocodb-sdk'
 import type { WritableComputedRef } from '@vue/reactivity'
 import { isDefaultBase as _isDefaultBase } from '#imports'
@@ -64,6 +63,8 @@ const isDefaultBase = computed(() => {
   return _isDefaultBase(source)
 })
 
+const input = ref<HTMLInputElement>()
+
 const isDropdownOpen = ref(false)
 
 const isEditing = ref(false)
@@ -92,6 +93,13 @@ const handleOnClick = () => {
   }
 }
 
+const focusInput = () => {
+  setTimeout(() => {
+    input.value?.focus()
+    input.value?.select()
+  })
+}
+
 /** Enable editing view name on dbl click */
 function onDblClick() {
   if (isMobileMode.value) return
@@ -101,6 +109,10 @@ function onDblClick() {
     isEditing.value = true
     _title.value = vModel.value.title
     $e('c:view:rename', { view: vModel.value?.type })
+
+    nextTick(() => {
+      focusInput()
+    })
   }
 }
 
@@ -142,11 +154,13 @@ const onRenameMenuClick = () => {
     isEditing.value = true
     _title.value = vModel.value.title
     $e('c:view:rename', { view: vModel.value?.type })
+
+    nextTick(() => {
+      focusInput()
+    })
   }
 }
 
-const focusInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
-
 /** Rename a view */
 async function onRename() {
   isDropdownOpen.value = false
@@ -244,7 +258,7 @@ watch(isDropdownOpen, async () => {
 
       <a-input
         v-if="isEditing"
-        :ref="focusInput"
+        ref="input"
         v-model:value="_title"
         class="!bg-transparent !border-0 !ring-0 !outline-transparent !border-transparent !pl-0 !flex-1 mr-4"
         :class="{