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/workspace/integrations/view.vue

@@ -47,10 +47,16 @@ onBeforeMount(() => {
 
 <template>
   <div v-if="currentWorkspace" class="flex w-full max-w-[97.5rem] flex-col nc-workspace-integrations">
-    <div class="flex gap-2 items-center min-w-0 py-4 px-6">
-      <h1 class="text-base capitalize font-weight-bold tracking-[0.5px] mb-0 nc-workspace-title truncate min-w-10 capitalize">
-        <span class="text-gray-500"> {{ currentWorkspace?.title }} ></span> {{ $t('general.integrations') }}
-      </h1>
+    <div class="flex gap-2 items-center min-w-0 pt-2 px-2">
+      <div class="nc-breadcrumb">
+        <div class="nc-breadcrumb-item capitalize">
+          {{ currentWorkspace?.title }}
+        </div>
+        <GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />
+        <h1 class="nc-breadcrumb-item active">
+          {{ $t('general.integrations') }}
+        </h1>
+      </div>
     </div>
 
     <NcTabs v-model:activeKey="activeViewTab">
@@ -60,7 +66,7 @@ onBeforeMount(() => {
       <template v-if="isUIAllowed('workspaceIntegrations')">
         <a-tab-pane key="integrations" class="w-full">
           <template #tab>
-            <div class="flex flex-row items-center pb-1 gap-x-1.5" data-testid="nc-workspace-settings-tab-integrations">
+            <div class="flex flex-row items-center pb-1 pt-2 gap-x-1.5" data-testid="nc-workspace-settings-tab-integrations">
               <GeneralIcon icon="integration" />
               {{ $t('general.integrations') }}
             </div>
@@ -73,7 +79,7 @@ onBeforeMount(() => {
       <template v-if="isUIAllowed('workspaceIntegrations')">
         <a-tab-pane key="connections" class="w-full">
           <template #tab>
-            <div class="flex flex-row items-center pb-1 gap-x-1.5" data-testid="nc-workspace-settings-tab-integrations">
+            <div class="flex flex-row items-center pb-1 pt-2 gap-x-1.5" data-testid="nc-workspace-settings-tab-integrations">
               <GeneralIcon icon="gitCommit" />
               {{ $t('general.connections') }}
               <div