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/project/AccessSettings.vue

@@ -17,7 +17,7 @@ const { sorts, sortDirection, loadSorts, handleGetSortedData, saveOrUpdate: save
 const isSuper = computed(() => orgRoles.value?.[OrgUserRoles.SUPER_ADMIN])
 
 const orgStore = useOrg()
-const { orgId } = storeToRefs(orgStore)
+const { orgId, org } = storeToRefs(orgStore)
 
 const isAdminPanel = inject(IsAdminPanelInj, ref(false))
 
@@ -255,129 +255,149 @@ const customRow = (record: Record<string, any>) => ({
 
 <template>
   <div
+    class="nc-collaborator-table-container nc-access-settings-view flex flex-col"
     :class="{
-      'px-6': isAdminPanel,
-      'px-1': !isAdminPanel,
+      'h-[calc(100vh_-_100px)]': !isAdminPanel,
     }"
-    class="nc-collaborator-table-container pt-6 nc-access-settings-view h-[calc(100vh-8rem)] flex flex-col gap-6"
   >
-    <div v-if="isAdminPanel" class="font-bold w-full text-2xl" data-rec="true">
-      <div class="flex items-center gap-3">
+    <div v-if="isAdminPanel">
+      <div class="nc-breadcrumb px-2">
+        <div class="nc-breadcrumb-item">
+          {{ org.title }}
+        </div>
+        <GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />
         <NuxtLink
           :href="`/admin/${orgId}/bases`"
-          class="!hover:(text-black underline-gray-600) flex items-center !text-black !underline-transparent ml-0.75 max-w-1/4"
+          class="!hover:(text-gray-800 underline-gray-600) flex items-center !text-gray-700 !underline-transparent ml-0.75 max-w-1/4"
         >
-          <component :is="iconMap.arrowLeft" class="text-3xl" />
-
-          {{ $t('objects.projects') }}
-        </NuxtLink>
-
-        <span class="text-2xl"> / </span>
-        <GeneralBaseIconColorPicker readonly />
-        <span class="text-base">
-          {{ currentBase?.title }}
-        </span>
-      </div>
-    </div>
-
-    <div v-else class="w-full flex justify-between items-center max-w-350 gap-3">
-      <a-input
-        v-model:value="userSearchText"
-        :placeholder="$t('title.searchMembers')"
-        :disabled="isLoading"
-        allow-clear
-        class="nc-input-border-on-value !max-w-90 !h-8 !px-3 !py-1 !rounded-lg"
-      >
-        <template #prefix>
-          <GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500 group-hover:text-black" />
-        </template>
-      </a-input>
-
-      <NcButton :disabled="isLoading" size="small" @click="isInviteModalVisible = true">
-        <div class="flex items-center gap-1">
-          <component :is="iconMap.plus" class="w-4 h-4" />
-          {{ $t('activity.addMembers') }}
-        </div>
-      </NcButton>
-    </div>
-
-    <NcTable
-      v-model:order-by="orderBy"
-      :is-data-loading="isLoading"
-      :columns="columns"
-      :data="sortedCollaborators"
-      :bordered="false"
-      :custom-row="customRow"
-      class="flex-1 nc-collaborators-list max-w-350"
-    >
-      <template #emptyText>
-        <a-empty :description="$t('title.noMembersFound')" />
-      </template>
-
-      <template #headerCell="{ column }">
-        <template v-if="column.key === 'select'">
-          <NcCheckbox v-model:checked="selectAll" :disabled="!sortedCollaborators.length" />
-        </template>
-        <template v-else>
-          {{ column.title }}
-        </template>
-      </template>
-
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.key === 'select'">
-          <NcCheckbox v-model:checked="selected[record.id]" />
-        </template>
-
-        <div v-if="column.key === 'email'" class="w-full flex gap-3 items-center users-email-grid">
-          <GeneralUserIcon size="base" :email="record.email" class="flex-none" />
-          <div class="flex flex-col flex-1 max-w-[calc(100%_-_44px)]">
-            <div class="flex gap-3">
-              <NcTooltip class="truncate max-w-full text-gray-800 capitalize font-semibold" show-on-truncate-only>
-                <template #title>
-                  {{ record.display_name || record.email.slice(0, record.email.indexOf('@')) }}
-                </template>
-                {{ record.display_name || record.email.slice(0, record.email.indexOf('@')) }}
-              </NcTooltip>
-            </div>
-            <NcTooltip class="truncate max-w-full text-xs text-gray-600" show-on-truncate-only>
-              <template #title>
-                {{ record.email }}
-              </template>
-              {{ record.email }}
-            </NcTooltip>
+          <div class="nc-breadcrumb-item">
+            {{ $t('objects.projects') }}
           </div>
+        </NuxtLink>
+        <GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />
+        <div class="nc-breadcrumb-item active truncate capitalize">
+          {{ currentBase?.title }}
         </div>
-        <div v-if="column.key === 'role'">
-          <template v-if="accessibleRoles.includes(record.roles)">
-            <RolesSelector
-              :role="record.roles"
-              :roles="accessibleRoles"
-              :inherit="
-                isEeUI && record.workspace_roles && WorkspaceRolesToProjectRoles[record.workspace_roles]
-                  ? WorkspaceRolesToProjectRoles[record.workspace_roles]
-                  : null
-              "
-              show-inherit
-              :description="false"
-              :on-role-change="(role) => updateCollaborator(record, role as ProjectRoles)"
-            />
+      </div>
+      <NcPageHeader>
+        <template #icon>
+          <div class="nc-page-header-icon flex justify-center items-center h-5 w-5">
+            <GeneralBaseIconColorPicker readonly />
+          </div>
+        </template>
+        <template #title>
+          <span data-rec="true" class="capitalize">
+            {{ currentBase?.title }}
+          </span>
+        </template>
+      </NcPageHeader>
+    </div>
+
+    <div
+      class="h-full flex flex-col items-center gap-6 px-6 pt-6"
+      :class="{
+        'border-t-1 border-gray-200': isAdminPanel,
+      }"
+    >
+      <div v-if="!isAdminPanel" class="w-full flex justify-between items-center max-w-350 gap-3">
+        <a-input
+          v-model:value="userSearchText"
+          :placeholder="$t('title.searchMembers')"
+          :disabled="isLoading"
+          allow-clear
+          class="nc-input-border-on-value !max-w-90 !h-8 !px-3 !py-1 !rounded-lg"
+        >
+          <template #prefix>
+            <GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500 group-hover:text-black" />
+          </template>
+        </a-input>
+
+        <NcButton :disabled="isLoading" size="small" @click="isInviteModalVisible = true">
+          <div class="flex items-center gap-1">
+            <component :is="iconMap.plus" class="w-4 h-4" />
+            {{ $t('activity.addMembers') }}
+          </div>
+        </NcButton>
+      </div>
+
+      <NcTable
+        v-model:order-by="orderBy"
+        :is-data-loading="isLoading"
+        :columns="columns"
+        :data="sortedCollaborators"
+        :bordered="false"
+        :custom-row="customRow"
+        class="flex-1 nc-collaborators-list max-w-350"
+      >
+        <template #emptyText>
+          <a-empty :description="$t('title.noMembersFound')" />
+        </template>
+
+        <template #headerCell="{ column }">
+          <template v-if="column.key === 'select'">
+            <NcCheckbox v-model:checked="selectAll" :disabled="!sortedCollaborators.length" />
           </template>
           <template v-else>
-            <RolesBadge :border="false" :role="record.roles" />
+            {{ column.title }}
           </template>
-        </div>
-        <div v-if="column.key === 'created_at'">
-          <NcTooltip class="max-w-full">
-            <template #title>
-              {{ parseStringDateTime(record.created_at) }}
+        </template>
+
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'select'">
+            <NcCheckbox v-model:checked="selected[record.id]" />
+          </template>
+
+          <div v-if="column.key === 'email'" class="w-full flex gap-3 items-center users-email-grid">
+            <GeneralUserIcon size="base" :email="record.email" class="flex-none" />
+            <div class="flex flex-col flex-1 max-w-[calc(100%_-_44px)]">
+              <div class="flex gap-3">
+                <NcTooltip class="truncate max-w-full text-gray-800 capitalize font-semibold" show-on-truncate-only>
+                  <template #title>
+                    {{ record.display_name || record.email.slice(0, record.email.indexOf('@')) }}
+                  </template>
+                  {{ record.display_name || record.email.slice(0, record.email.indexOf('@')) }}
+                </NcTooltip>
+              </div>
+              <NcTooltip class="truncate max-w-full text-xs text-gray-600" show-on-truncate-only>
+                <template #title>
+                  {{ record.email }}
+                </template>
+                {{ record.email }}
+              </NcTooltip>
+            </div>
+          </div>
+          <div v-if="column.key === 'role'">
+            <template v-if="accessibleRoles.includes(record.roles)">
+              <RolesSelector
+                :role="record.roles"
+                :roles="accessibleRoles"
+                :inherit="
+                  isEeUI && record.workspace_roles && WorkspaceRolesToProjectRoles[record.workspace_roles]
+                    ? WorkspaceRolesToProjectRoles[record.workspace_roles]
+                    : null
+                "
+                show-inherit
+                :description="false"
+                :on-role-change="(role) => updateCollaborator(record, role as ProjectRoles)"
+              />
             </template>
-            <span>
-              {{ timeAgo(record.created_at) }}
-            </span>
-          </NcTooltip>
-        </div>
-      </template>
-    </NcTable>
+            <template v-else>
+              <RolesBadge :border="false" :role="record.roles" />
+            </template>
+          </div>
+          <div v-if="column.key === 'created_at'">
+            <NcTooltip class="max-w-full">
+              <template #title>
+                {{ parseStringDateTime(record.created_at) }}
+              </template>
+              <span>
+                {{ timeAgo(record.created_at) }}
+              </span>
+            </NcTooltip>
+          </div>
+        </template>
+      </NcTable>
+    </div>
 
     <LazyDlgInviteDlg v-model:model-value="isInviteModalVisible" :base-id="currentBase?.id" type="base" />
   </div>
@@ -395,4 +415,10 @@ const customRow = (record: Record<string, any>) => ({
 :deep(.nc-collaborator-role-select .ant-select-selector) {
   @apply !rounded;
 }
+
+.nc-page-header-icon {
+  :deep(svg) {
+    @apply h-4.5 w-4.5;
+  }
+}
 </style>

packages/nc-gui/components/project/AllTables.vue

@@ -111,9 +111,9 @@ const onCreateBaseClick = () => {
 </script>
 
 <template>
-  <div class="nc-all-tables-view">
+  <div class="nc-all-tables-view px-6 pt-6">
     <div
-      class="flex flex-row gap-x-6 pt-6 pb-2 overflow-x-auto nc-scrollbar-thin"
+      class="flex flex-row gap-x-6 pb-2 overflow-x-auto nc-scrollbar-thin"
       :class="{
         'pointer-events-none': base?.isLoading,
       }"
@@ -199,7 +199,7 @@ const onCreateBaseClick = () => {
       v-else-if="activeTables.length"
       class="flex mt-4"
       :style="{
-        height: 'calc(100vh - var(--topbar-height) - 15.2rem)',
+        height: 'calc(100vh - var(--topbar-height) - 218px)',
       }"
     >
       <NcTable
@@ -219,7 +219,7 @@ const onCreateBaseClick = () => {
             class="w-full flex items-center gap-3 max-w-full text-gray-800 font-semibold"
             data-testid="proj-view-list__item-title"
           >
-            <div class="min-w-5 flex items-center justify-center">
+            <div class="min-w-6 flex items-center justify-center">
               <GeneralTableIcon :meta="record" class="flex-none text-gray-600" />
             </div>
             <NcTooltip class="truncate max-w-[calc(100%_-_28px)]" show-on-truncate-only>

packages/nc-gui/components/project/View.vue

@@ -112,14 +112,14 @@ watch(
   <div class="h-full nc-base-view">
     <div
       v-if="!isAdminPanel"
-      class="flex flex-row pl-2 pr-2 gap-1 border-b-1 border-gray-200 justify-between w-full"
+      class="flex flex-row px-2 py-2 gap-1 justify-between w-full border-b-1 border-gray-200"
       :class="{ 'nc-table-toolbar-mobile': isMobileMode, 'h-[var(--topbar-height)]': !isMobileMode }"
     >
       <div class="flex flex-row items-center gap-x-3">
         <GeneralOpenLeftSidebarBtn />
-        <div class="flex flex-row items-center h-full gap-x-2.5">
+        <div class="flex flex-row items-center h-full gap-x-2 px-2">
           <GeneralProjectIcon :color="parseProp(currentBase?.meta).iconColor" :type="currentBase?.type" />
-          <NcTooltip class="flex font-medium text-sm capitalize truncate max-w-150" show-on-truncate-only>
+          <NcTooltip class="flex font-bold text-sm capitalize truncate max-w-150 text-gray-800" show-on-truncate-only>
             <template #title> {{ currentBase?.title }}</template>
             <span class="truncate">
               {{ currentBase?.title }}
@@ -130,12 +130,15 @@ watch(
       <LazyGeneralShareProject />
     </div>
     <div
-      class="flex mx-12 my-8 nc-base-view-tab"
+      class="flex nc-base-view-tab container"
       :style="{
         height: 'calc(100% - var(--topbar-height))',
       }"
     >
       <a-tabs v-model:activeKey="projectPageTab" class="w-full">
+        <template #leftExtra>
+          <div class="w-3"></div>
+        </template>
         <a-tab-pane v-if="!isAdminPanel" key="allTable">
           <template #tab>
             <div class="tab-title" data-testid="proj-view-tab__all-tables">
@@ -193,11 +196,7 @@ watch(
               </div>
             </div>
           </template>
-          <DashboardSettingsDataSources
-            v-model:state="baseSettingsState"
-            :base-id="base.id"
-            class="max-h-[calc(100%_-_36px)] pt-3"
-          />
+          <DashboardSettingsDataSources v-model:state="baseSettingsState" :base-id="base.id" class="max-h-full" />
         </a-tab-pane>
       </a-tabs>
     </div>
@@ -213,7 +212,10 @@ watch(
 }
 
 .tab-title {
-  @apply flex flex-row items-center gap-x-2 px-2;
+  @apply flex flex-row items-center gap-x-2 px-2 py-[1px];
+}
+:deep(.ant-tabs-tab) {
+  @apply pt-2 pb-3;
 }
 :deep(.ant-tabs-tab .tab-title) {
   @apply text-gray-500;