refactor(core): split PageHeader + CorePageHeaderTabs

Splits the chrome primitive into two specialised components so each page
gets the spacing it actually needs:

- `PageHeader` (existing, simplified): content-sized header for list views
  and simple pages (Tasks, Scraps, etc.). Drops the 56px min/max-height
  enforcement and removes the dead `#tabs` slot path (unused since the
  CoreSurfaceTabBar sibling refactor in #4187/#4188).
- `CorePageHeaderTabs` (new): bundles a PageHeader + CoreSurfaceTabBar and
  enforces the 56px height externally via a scoped `:deep()` rule. Used on
  tabbed surfaces (Account, Organization detail, Admin) where the title↔
  breadcrumb rhythm matters across route transitions.

The new primitive accepts `tabs`, `can`, `basePath`, and `hideTabs` for the
tab bar, plus passthrough of icon/title/subtitle/avatar/actions/breadcrumb
slots and props to the inner PageHeader.

Migrates 3 callsites:
- user.view.vue (Account)
- admin.layout.vue (with hideTabs in breadcrumb mode)
- organization.detail.component.vue

Visual impact: pages without tabs (e.g. /tasks) no longer pay the 56px
chrome tax; tabbed surfaces preserve the route-transition rhythm.

Author: PierreBrisorgueil

src/modules/admin/tests/admin.layout.unit.tests.js

@@ -44,27 +44,21 @@ const mountLayout = (configOverrides = {}, routePath = '/admin/users') =>
       stubs: {
         RouterLink: true,
         RouterView: { template: '<div class="router-view-stub" />' },
-        PageHeader: {
-          name: 'PageHeader',
-          props: ['title', 'icon'],
+        // Single stub for the new bundled header-with-tabs primitive — exposes
+        // all the props admin.layout passes through, plus the breadcrumb slot.
+        CorePageHeaderTabs: {
+          name: 'CorePageHeaderTabs',
+          props: ['title', 'icon', 'tabs', 'can', 'basePath', 'hideTabs'],
           template: `
-            <div class="page-header-stub" :data-title="title" :data-icon="icon">
+            <div class="page-header-tabs-stub" :data-title="title" :data-icon="icon" :data-hide-tabs="hideTabs">
               <slot name="avatar" />
               <slot name="breadcrumb" />
-              <slot name="tabs" />
               <slot name="title" />
               <slot name="subtitle" />
               <slot name="actions" />
             </div>
           `,
         },
-        // Stub SurfaceTabBar so we can read the props it receives without rendering full v-tabs.
-        // name: 'CoreSurfaceTabBar' is required for findComponent({ name: ... }) to work.
-        CoreSurfaceTabBar: {
-          name: 'CoreSurfaceTabBar',
-          props: ['tabs', 'can', 'basePath'],
-          template: '<div class="surface-tab-bar-stub" :data-tabs-count="tabs?.length || 0" />',
-        },
       },
     },
   });
@@ -79,24 +73,24 @@ describe('admin.layout', () => {
 
   it('renders the page header', () => {
     const wrapper = mountLayout();
-    expect(wrapper.find('.page-header-stub').exists()).toBe(true);
+    expect(wrapper.find('.page-header-tabs-stub').exists()).toBe(true);
   });
 
   it('renders a <router-view> for nested admin content', () => {
     const wrapper = mountLayout();
     expect(wrapper.find('.router-view-stub').exists()).toBe(true);
   });
 
-  it('passes the four built-in tabs to CoreSurfaceTabBar when no extras are configured', () => {
+  it('passes the four built-in tabs to CorePageHeaderTabs when no extras are configured', () => {
     const wrapper = mountLayout();
-    const bar = wrapper.findComponent({ name: 'CoreSurfaceTabBar' });
-    expect(bar.exists()).toBe(true);
-    const tabs = bar.props('tabs');
+    const headerTabs = wrapper.findComponent({ name: 'CorePageHeaderTabs' });
+    expect(headerTabs.exists()).toBe(true);
+    const tabs = headerTabs.props('tabs');
     expect(tabs).toHaveLength(4);
     expect(tabs.map((t) => t.value)).toEqual(['users', 'organizations', 'readiness', 'activity']);
   });
 
-  it('passes built-in + extra tabs from config.admin.tabs to CoreSurfaceTabBar', () => {
+  it('passes built-in + extra tabs from config.admin.tabs to CorePageHeaderTabs', () => {
     const wrapper = mountLayout({
       admin: {
         tabs: [
@@ -105,45 +99,45 @@ describe('admin.layout', () => {
         ],
       },
     });
-    const bar = wrapper.findComponent({ name: 'CoreSurfaceTabBar' });
-    const tabs = bar.props('tabs');
+    const headerTabs = wrapper.findComponent({ name: 'CorePageHeaderTabs' });
+    const tabs = headerTabs.props('tabs');
     expect(tabs).toHaveLength(6);
     expect(tabs[4].value).toBe('knowledge');
     expect(tabs[5].value).toBe('costs');
   });
 
-  it('passes basePath="/admin" to CoreSurfaceTabBar', () => {
+  it('passes basePath="/admin" to CorePageHeaderTabs', () => {
     const wrapper = mountLayout();
-    const bar = wrapper.findComponent({ name: 'CoreSurfaceTabBar' });
-    expect(bar.props('basePath')).toBe('/admin');
+    const headerTabs = wrapper.findComponent({ name: 'CorePageHeaderTabs' });
+    expect(headerTabs.props('basePath')).toBe('/admin');
   });
 
-  it('passes a function `can` predicate to CoreSurfaceTabBar', () => {
+  it('passes a function `can` predicate to CorePageHeaderTabs', () => {
     const wrapper = mountLayout();
-    const bar = wrapper.findComponent({ name: 'CoreSurfaceTabBar' });
-    expect(typeof bar.props('can')).toBe('function');
+    const headerTabs = wrapper.findComponent({ name: 'CorePageHeaderTabs' });
+    expect(typeof headerTabs.props('can')).toBe('function');
   });
 
-  it('gracefully handles non-array admin.tabs (CoreSurfaceTabBar receives only the built-in 4)', () => {
+  it('gracefully handles non-array admin.tabs (CorePageHeaderTabs receives only the built-in 4)', () => {
     const wrapper = mountLayout({ admin: { tabs: 'invalid' } });
-    const bar = wrapper.findComponent({ name: 'CoreSurfaceTabBar' });
-    expect(bar.props('tabs')).toHaveLength(4);
+    const headerTabs = wrapper.findComponent({ name: 'CorePageHeaderTabs' });
+    expect(headerTabs.props('tabs')).toHaveLength(4);
   });
 
   it('renders the error banner at the TOP of the layout, before the header', async () => {
     adminStoreState.error = 'Boom';
     const wrapper = mountLayout();
     await wrapper.vm.$nextTick();
     const html = wrapper.html();
-    expect(html.indexOf('Boom')).toBeLessThan(html.indexOf('page-header-stub'));
+    expect(html.indexOf('Boom')).toBeLessThan(html.indexOf('page-header-tabs-stub'));
   });
 
   it('renders the mailer warning at the TOP when serverConfig.mail.configured is false', async () => {
     authStoreState.serverConfig = { mail: { configured: false } };
     const wrapper = mountLayout();
     await wrapper.vm.$nextTick();
     const html = wrapper.html();
-    expect(html.indexOf('No mailer configured')).toBeLessThan(html.indexOf('page-header-stub'));
+    expect(html.indexOf('No mailer configured')).toBeLessThan(html.indexOf('page-header-tabs-stub'));
   });
 
   it('does NOT render the mailer warning when mail is configured', () => {
@@ -152,16 +146,6 @@ describe('admin.layout', () => {
     expect(wrapper.html()).not.toContain('No mailer configured');
   });
 
-  it('renders <CoreSurfaceTabBar> as a SIBLING of <PageHeader> (not inside its #tabs slot)', () => {
-    const wrapper = mountLayout();
-    const pageHeaderEl = wrapper.find('.page-header-stub');
-    const surfaceTabBarEl = wrapper.find('.surface-tab-bar-stub');
-    expect(pageHeaderEl.exists()).toBe(true);
-    expect(surfaceTabBarEl.exists()).toBe(true);
-    // Sibling layout: the tab-bar element is NOT inside the page-header-stub element.
-    expect(pageHeaderEl.element.contains(surfaceTabBarEl.element)).toBe(false);
-  });
-
   it('renders <router-view> OUTSIDE the layout <v-container>', () => {
     const wrapper = mountLayout();
     const layoutContainer = wrapper.find('.v-container');
@@ -171,32 +155,34 @@ describe('admin.layout', () => {
     expect(layoutContainer.element.contains(routerViewEl.element)).toBe(false);
   });
 
-  it('PageHeader receives title="Admin" + icon="fa-solid fa-user-tie" in list mode', () => {
+  it('CorePageHeaderTabs receives title="Admin" + icon="fa-solid fa-user-tie" in list mode', () => {
     const wrapper = mountLayout();
-    const ph = wrapper.findComponent({ name: 'PageHeader' });
-    expect(ph.props('title')).toBe('Admin');
-    expect(ph.props('icon')).toBe('fa-solid fa-user-tie');
+    const headerTabs = wrapper.findComponent({ name: 'CorePageHeaderTabs' });
+    expect(headerTabs.props('title')).toBe('Admin');
+    expect(headerTabs.props('icon')).toBe('fa-solid fa-user-tie');
   });
 
-  it('PageHeader receives title="" + icon stays in breadcrumb mode', async () => {
+  it('CorePageHeaderTabs receives title="" + icon stays in breadcrumb mode', async () => {
     adminStoreState.currentBreadcrumb = { title: 'Jane Doe' };
     const wrapper = mountLayout({}, '/admin/users/u1');
     await wrapper.vm.$nextTick();
-    const ph = wrapper.findComponent({ name: 'PageHeader' });
-    expect(ph.props('title')).toBe('');
-    expect(ph.props('icon')).toBe('fa-solid fa-user-tie');
+    const headerTabs = wrapper.findComponent({ name: 'CorePageHeaderTabs' });
+    expect(headerTabs.props('title')).toBe('');
+    expect(headerTabs.props('icon')).toBe('fa-solid fa-user-tie');
   });
 
-  it('does NOT render <CoreSurfaceTabBar> when currentBreadcrumb is set (detail mode)', async () => {
+  it('passes hideTabs=true when currentBreadcrumb is set (detail mode)', async () => {
     adminStoreState.currentBreadcrumb = { title: 'Jane Doe' };
     const wrapper = mountLayout({}, '/admin/users/u1');
     await wrapper.vm.$nextTick();
-    expect(wrapper.findComponent({ name: 'CoreSurfaceTabBar' }).exists()).toBe(false);
+    const headerTabs = wrapper.findComponent({ name: 'CorePageHeaderTabs' });
+    expect(headerTabs.props('hideTabs')).toBe(true);
   });
 
-  it('renders <CoreSurfaceTabBar> when currentBreadcrumb is null (list mode)', () => {
+  it('passes hideTabs=false when currentBreadcrumb is null (list mode)', () => {
     const wrapper = mountLayout();
-    expect(wrapper.findComponent({ name: 'CoreSurfaceTabBar' }).exists()).toBe(true);
+    const headerTabs = wrapper.findComponent({ name: 'CorePageHeaderTabs' });
+    expect(headerTabs.props('hideTabs')).toBe(false);
   });
 
   it('renders the breadcrumb when useAdminStore().currentBreadcrumb is set', async () => {

src/modules/admin/views/admin.layout.vue

@@ -27,22 +27,20 @@
       </span>
     </v-alert>
 
-    <PageHeader
+    <CorePageHeaderTabs
       icon="fa-solid fa-user-tie"
       :title="currentBreadcrumb ? '' : 'Admin'"
+      :tabs="allTabs"
+      :can="adminCan"
+      :base-path="basePath"
+      :hide-tabs="!!currentBreadcrumb"
     >
       <template v-if="currentBreadcrumb" #breadcrumb>
         <router-link to="/admin" class="text-medium-emphasis text-decoration-none">Admin</router-link>
         <v-icon icon="fa-solid fa-chevron-right" size="x-small" class="mx-2 text-medium-emphasis"></v-icon>
         <span :class="currentBreadcrumb.titleClass || ''">{{ currentBreadcrumb.title }}</span>
       </template>
-    </PageHeader>
-    <CoreSurfaceTabBar
-      v-if="!currentBreadcrumb"
-      :tabs="allTabs"
-      :can="adminCan"
-      :base-path="basePath"
-    />
+    </CorePageHeaderTabs>
   </v-container>
 
   <router-view />
@@ -51,8 +49,7 @@
 /**
  * Module dependencies.
  */
-import PageHeader from '../../core/components/core.pageHeader.component.vue';
-import CoreSurfaceTabBar from '../../core/components/core.surfaceTabBar.component.vue';
+import CorePageHeaderTabs from '../../core/components/core.pageHeaderTabs.component.vue';
 import { ability } from '../../../lib/helpers/ability';
 import { useAdminStore } from '../stores/admin.store';
 import { useAuthStore } from '../../auth/stores/auth.store';
@@ -85,7 +82,7 @@ const BUILT_IN_TABS = Object.freeze([
  */
 export default {
   name: 'AdminLayout',
-  components: { PageHeader, CoreSurfaceTabBar },
+  components: { CorePageHeaderTabs },
   computed: {
     /**
      * @desc Base path for admin tabs (where CoreSurfaceTabBar resolves relative routes).

src/modules/core/components/core.pageHeader.component.vue

@@ -1,50 +1,44 @@
 <template>
   <v-row class="core-page-header mx-4 my-1 flex-nowrap" align="center">
-    <template v-if="$slots.tabs">
-      <!-- Tabs mode: tabs replace icon + title -->
-      <slot name="tabs"></slot>
-    </template>
-    <template v-else>
-      <!-- Standard mode: icon + (breadcrumb OR title) -->
-      <slot v-if="!$vuetify.display.mobile" name="avatar">
-        <v-avatar v-if="icon" :color="avatarColor" size="40">
-          <v-icon :icon="icon" size="small" color="white"></v-icon>
-        </v-avatar>
-      </slot>
+    <!-- Standard mode: icon + (breadcrumb OR title) -->
+    <slot v-if="!$vuetify.display.mobile" name="avatar">
+      <v-avatar v-if="icon" :color="avatarColor" size="40">
+        <v-icon :icon="icon" size="small" color="white"></v-icon>
+      </v-avatar>
+    </slot>
+    <div
+      class="core-page-header__content"
+      :class="[
+        $vuetify.display.mobile ? 'ml-6' : '',
+        !$vuetify.display.mobile && ($slots.avatar || icon) ? 'ml-2' : '',
+      ]"
+    >
+      <!-- Breadcrumb takes precedence over title when provided -->
       <div
-        class="core-page-header__content"
-        :class="[
-          $vuetify.display.mobile ? 'ml-6' : '',
-          !$vuetify.display.mobile && ($slots.avatar || icon) ? 'ml-2' : '',
-        ]"
+        v-if="$slots.breadcrumb"
+        class="core-page-header__breadcrumb text-title-large font-weight-medium text-truncate"
+        :class="titleClass"
+        style="line-height: 1;"
       >
-        <!-- Breadcrumb takes precedence over title when provided -->
-        <div
-          v-if="$slots.breadcrumb"
-          class="core-page-header__breadcrumb text-title-large font-weight-medium text-truncate"
+        <slot name="breadcrumb"></slot>
+      </div>
+      <template v-else>
+        <h2
+          class="core-page-header__title text-title-large font-weight-medium text-truncate"
           :class="titleClass"
           style="line-height: 1;"
         >
-          <slot name="breadcrumb"></slot>
-        </div>
-        <template v-else>
-          <h2
-            class="core-page-header__title text-title-large font-weight-medium text-truncate"
-            :class="titleClass"
-            style="line-height: 1;"
-          >
-            <slot name="title">{{ title }}</slot>
-          </h2>
-          <p
-            v-if="subtitle || $slots.subtitle"
-            class="core-page-header__subtitle text-body-medium text-medium-emphasis text-truncate"
-            style="margin: 0; line-height: 1;"
-          >
-            <slot name="subtitle">{{ subtitle }}</slot>
-          </p>
-        </template>
-      </div>
-    </template>
+          <slot name="title">{{ title }}</slot>
+        </h2>
+        <p
+          v-if="subtitle || $slots.subtitle"
+          class="core-page-header__subtitle text-body-medium text-medium-emphasis text-truncate"
+          style="margin: 0; line-height: 1;"
+        >
+          <slot name="subtitle">{{ subtitle }}</slot>
+        </p>
+      </template>
+    </div>
     <v-spacer></v-spacer>
     <!-- Actions slot — wrapped in a flex cluster (flex-wrap = safety net for extreme viewports) -->
     <div v-if="$slots.actions" class="core-page-header__actions d-flex align-center flex-wrap">
@@ -82,19 +76,14 @@ export default {
 </script>
 
 <style scoped>
-/*
- * Canonical 56px height — keeps list view (title) and detail view (breadcrumb)
- * visually aligned so route transitions don't jump.
- */
-.core-page-header {
-  min-height: 56px;
-  max-height: 56px;
-}
-
 /*
  * flex: 1 + min-width: 0 lets the title/breadcrumb container shrink past its
  * intrinsic width when content is long, so the truncate kicks in instead of
  * pushing the actions cluster off-screen.
+ *
+ * NOTE: PageHeader is content-sized by default. Tabbed surfaces that need
+ * a 56px rhythm for title↔breadcrumb route transitions use CorePageHeaderTabs,
+ * which enforces the height externally.
  */
 .core-page-header__content {
   flex: 1 1 0;