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/account/SignupSettings.vue

@@ -29,21 +29,34 @@ loadSettings()
 </script>
 
 <template>
-  <div class="p-7 flex flex-col items-center">
-    <h1 class="text-2xl mt-4 mb-5 pl-3.5 font-bold">{{ t('activity.settings') }}</h1>
-    <div class="flex items-center gap-2">
-      <a-form-item>
-        <a-checkbox
-          v-model:checked="settings.invite_only_signup"
-          v-e="['c:account:enable-signup']"
-          class="nc-checkbox nc-invite-only-signup-checkbox !mt-6"
-          name="virtual"
-          @change="saveSettings"
-        />
-      </a-form-item>
-      <span data-rec="true">
-        {{ $t('labels.inviteOnlySignup') }}
-      </span>
+  <div class="flex flex-col">
+    <NcPageHeader>
+      <template #icon>
+        <GeneralIcon icon="settings" class="flex-none text-[20px] text-gray-700 h-5 w-5" />
+      </template>
+      <template #title>
+        <span data-rec="true">
+          {{ $t('activity.settings') }}
+        </span>
+      </template>
+    </NcPageHeader>
+    <div class="p-6 h-[calc(100vh_-_100px)] border-t-1 border-gray-200 flex flex-col gap-6 overflow-auto nc-scrollbar-thin">
+      <div class="flex flex-col items-center">
+        <div class="flex items-center gap-2">
+          <a-form-item>
+            <a-checkbox
+              v-model:checked="settings.invite_only_signup"
+              v-e="['c:account:enable-signup']"
+              class="nc-checkbox nc-invite-only-signup-checkbox !mt-6"
+              name="virtual"
+              @change="saveSettings"
+            />
+          </a-form-item>
+          <span data-rec="true">
+            {{ $t('labels.inviteOnlySignup') }}
+          </span>
+        </div>
+      </div>
     </div>
   </div>
 </template>