From f03a3f16c67676a0c3d18fb4890b4ded2aeba040 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Mon, 18 May 2026 12:55:18 +0200
Subject: [PATCH] =?UTF-8?q?refactor(gui-v2):=20cleanup(b)=20=E2=80=94=20Ap?=
 =?UTF-8?q?pTopbar=20wraps=20PrimeVue=20Menubar=20per=20RFC=20AD-3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components-v2/layout/AppTopbar.vue    | 302 ++++++++++--------
 .../layout/__tests__/AppTopbar.spec.ts        |  30 ++
 2 files changed, 191 insertions(+), 141 deletions(-)

diff --git a/apps/app/src/components-v2/layout/AppTopbar.vue b/apps/app/src/components-v2/layout/AppTopbar.vue
index 4da4dc39..acb3118e 100644
--- a/apps/app/src/components-v2/layout/AppTopbar.vue
+++ b/apps/app/src/components-v2/layout/AppTopbar.vue
@@ -24,6 +24,10 @@
  *
  * Icon convention: import Icon from '@/components/Icon.vue', <Icon name="tabler-x" :size="N" />
  *
+ * RFC AD-3: PrimeVue Menubar is the chrome root (wrap-don't-rewrite).
+ * Breadcrumb block → #start slot; search/notifications/user cluster → #end slot.
+ * :model="[]" — no Menubar menu items; Menubar is the AD-3 chrome shell only.
+ *
  * Styling: crewli-starter CSS translated to Tailwind inline.
  * <style scoped> used only for:
  *   1. topbar-mark-shadow — inset box-shadow (no Tailwind utility at this granularity, RFC §7.4)
@@ -33,6 +37,7 @@
 import Avatar from 'primevue/avatar'
 import Breadcrumb from 'primevue/breadcrumb'
 import InputText from 'primevue/inputtext'
+import Menubar from 'primevue/menubar'
 import Menu from 'primevue/menu'
 import OverlayBadge from 'primevue/overlaybadge'
 import Popover from 'primevue/popover'
@@ -240,110 +245,121 @@ const userMenuItems = computed<MenuItem[]>(() => [
 
 <template>
   <!--
-    .topbar: sticky top-0, h-[var(--topbar-h)], flex items-center, gap-3,
-    bg-[var(--surface)], border-b border-[var(--border)], z-30, px-5
+    RFC AD-3: PrimeVue Menubar is the chrome root.
+    :model="[]" — no Menubar menu items; Menubar is the AD-3 chrome shell only.
+    :pt maps Menubar internal regions to the existing hand-rolled chrome classes
+    so visual layout is not gratuitously altered (pixel parity deferred to Bert).
   -->
-  <header class="sticky top-0 z-30 flex h-[var(--topbar-h,56px)] items-center gap-3 border-b border-[var(--p-content-border-color)] bg-[var(--p-content-background)] px-5">
-    <!-- Left group: hamburger + brand + breadcrumb -->
-    <div class="flex items-center gap-[6px]">
-      <!--
-        Hamburger — mobile only (lg:hidden).
-        .hamburger: display none at >=lg, display inline-flex at <768px
-        .icon-btn: 38x38, rounded, transparent bg, fg-muted color, hover bg-hover
-      -->
-      <button
-        type="button"
-        class="lg:hidden inline-flex h-[38px] w-[38px] items-center justify-center rounded-[var(--p-border-radius)] border-0 bg-transparent text-[var(--p-text-muted-color)] transition-colors duration-150 hover:bg-[var(--p-content-hover-background)] hover:text-[var(--p-text-color)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--p-primary-color)] focus-visible:outline-offset-1"
-        aria-label="Open menu"
-        @click="shell.setMobileOpen(true)"
-      >
-        <Icon
-          name="tabler-menu-2"
-          :size="20"
-        />
-      </button>
-
-      <!--
-        Brand — hidden on mobile, shown >=lg.
-        .topbar-brand: display none default, display inline-flex >=lg
-        .mark: 28x28, rounded-lg, gradient bg, white text, font-bold 13px
-        .wordmark: font-bold 16px, tracking-tight
-      -->
-      <div class="hidden lg:inline-flex items-center gap-2">
+  <Menubar
+    :model="[]"
+    :pt="{
+      root: 'sticky top-0 z-30 h-[var(--topbar-h,56px)] border-0 border-b border-[var(--p-content-border-color)] rounded-none bg-[var(--p-content-background)] px-5',
+      start: 'flex items-center gap-[6px] min-w-0',
+      end: 'ms-auto flex items-center gap-[6px]',
+    }"
+  >
+    <template #start>
+      <div data-tb="breadcrumb">
         <!--
-          Topbar mark — dynamic gradient cannot be a static Tailwind class.
-          Inline style justified (RFC §7.4). Box-shadow via scoped CSS
-          (inset-shadow has no Tailwind utility at this granularity).
+          Hamburger — mobile only (lg:hidden).
+          .hamburger: display none at >=lg, display inline-flex at <768px
+          .icon-btn: 38x38, rounded, transparent bg, fg-muted color, hover bg-hover
         -->
-        <div
-          class="topbar-mark-shadow inline-flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-[13px] font-bold text-white"
-          style="background: linear-gradient(135deg, var(--p-primary-500, #0d9488), var(--p-primary-700, #0f766e))"
-          aria-hidden="true"
+        <button
+          type="button"
+          class="lg:hidden inline-flex h-[38px] w-[38px] items-center justify-center rounded-[var(--p-border-radius)] border-0 bg-transparent text-[var(--p-text-muted-color)] transition-colors duration-150 hover:bg-[var(--p-content-hover-background)] hover:text-[var(--p-text-color)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--p-primary-color)] focus-visible:outline-offset-1"
+          aria-label="Open menu"
+          @click="shell.setMobileOpen(true)"
         >
-          C
+          <Icon
+            name="tabler-menu-2"
+            :size="20"
+          />
+        </button>
+
+        <!--
+          Brand — hidden on mobile, shown >=lg.
+          .topbar-brand: display none default, display inline-flex >=lg
+          .mark: 28x28, rounded-lg, gradient bg, white text, font-bold 13px
+          .wordmark: font-bold 16px, tracking-tight
+        -->
+        <div class="hidden lg:inline-flex items-center gap-2">
+          <!--
+            Topbar mark — dynamic gradient cannot be a static Tailwind class.
+            Inline style justified (RFC §7.4). Box-shadow via scoped CSS
+            (inset-shadow has no Tailwind utility at this granularity).
+          -->
+          <div
+            class="topbar-mark-shadow inline-flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-[13px] font-bold text-white"
+            style="background: linear-gradient(135deg, var(--p-primary-500, #0d9488), var(--p-primary-700, #0f766e))"
+            aria-hidden="true"
+          >
+            C
+          </div>
+          <span class="text-[16px] font-bold tracking-[-0.01em] text-[var(--p-text-color)]">
+            Crewli
+          </span>
         </div>
-        <span class="text-[16px] font-bold tracking-[-0.01em] text-[var(--p-text-color)]">
-          Crewli
-        </span>
+
+        <!--
+          Breadcrumb — PrimeVue Breadcrumb, route-driven.
+          .breadcrumb: flex, items-center, gap-[6px], text-[13px], color fg-muted, flex-wrap nowrap, overflow-hidden
+          Hidden on mobile per crewli-starter (<768px: display:none!important)
+        -->
+        <nav
+          class="hidden lg:flex items-center"
+          aria-label="Breadcrumb"
+        >
+          <Breadcrumb
+            :model="breadcrumbModel"
+            class="border-0 bg-transparent p-0 text-[13px]"
+          />
+        </nav>
       </div>
+    </template>
 
-      <!--
-        Breadcrumb — PrimeVue Breadcrumb, route-driven.
-        .breadcrumb: flex, items-center, gap-[6px], text-[13px], color fg-muted, flex-wrap nowrap, overflow-hidden
-        Hidden on mobile per crewli-starter (<768px: display:none!important)
-      -->
-      <nav
-        class="hidden lg:flex items-center"
-        aria-label="Breadcrumb"
-      >
-        <Breadcrumb
-          :model="breadcrumbModel"
-          class="border-0 bg-transparent p-0 text-[13px]"
-        />
-      </nav>
-    </div>
-
-    <!-- Right group: ws-mobile-btn, search, density, theme, notifications, user -->
-    <div class="ms-auto flex items-center gap-[6px]">
+    <template #end>
       <!--
         Mobile workspace button — visible only <lg.
         .ws-mobile-btn: display none (>= 1024px). On mobile: display flex.
         38x38, rounded, color #fff, font-bold 12px, gradient bg via inline :style
         (dynamic hex pair — RFC §7.4). Box-shadow via scoped CSS.
       -->
-      <button
-        v-if="authStore.currentOrganisation"
-        type="button"
-        class="ws-mobile-btn-shadow lg:hidden inline-flex h-[38px] w-[38px] flex-shrink-0 items-center justify-center rounded-[var(--p-border-radius)] border-0 text-[12px] font-bold text-white"
-        :style="{
-          background: `linear-gradient(135deg, ${mobileOrgGradient[0]}, ${mobileOrgGradient[1]})`,
-        }"
-        :aria-label="`Workspace: ${authStore.currentOrganisation.name}`"
-      >
-        {{ mobileOrgInitials }}
-      </button>
+      <div data-tb="search">
+        <button
+          v-if="authStore.currentOrganisation"
+          type="button"
+          class="ws-mobile-btn-shadow lg:hidden inline-flex h-[38px] w-[38px] flex-shrink-0 items-center justify-center rounded-[var(--p-border-radius)] border-0 text-[12px] font-bold text-white"
+          :style="{
+            background: `linear-gradient(135deg, ${mobileOrgGradient[0]}, ${mobileOrgGradient[1]})`,
+          }"
+          :aria-label="`Workspace: ${authStore.currentOrganisation.name}`"
+        >
+          {{ mobileOrgInitials }}
+        </button>
 
-      <!--
-        Search — static chrome, no backend.
-        .search: position relative, w-[320px], max-w-full
-        .search input: h-[38px], px-[12px] ps-[36px], bg-surface-alt, border rounded
-        .search .kbd: absolute right-2, text-[11px], px-[6px] py-[2px], border rounded
-        Hidden on smallest viewports per crewli-starter (<768px: width 0 / display:none)
-      -->
-      <div class="relative hidden sm:block w-[240px] lg:w-[320px] max-w-full">
-        <Icon
-          name="tabler-search"
-          :size="16"
-          class="pointer-events-none absolute left-[11px] top-1/2 -translate-y-1/2 text-[var(--p-text-muted-color)]"
-        />
-        <InputText
-          class="h-[38px] w-full rounded-[var(--p-border-radius)] border border-transparent bg-[var(--p-content-hover-background)] ps-[36px] pe-[52px] text-[var(--p-text-color)] placeholder:text-[var(--p-text-muted-color)] focus:border-[var(--p-primary-color)] focus:bg-[var(--p-content-background)] focus:shadow-[0_0_0_3px_var(--p-primary-50)] focus:outline-none transition-[border-color,background,box-shadow] duration-150"
-          placeholder="Search artists, crew, events..."
-          :pt="{ root: { 'data-search-input': '' } }"
-        />
-        <span class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 rounded-[var(--p-border-radius-sm,4px)] border border-[var(--p-content-border-color)] bg-[var(--p-content-background)] px-[6px] py-[2px] font-mono text-[11px] text-[var(--p-text-muted-color)]">
-          ⌘K
-        </span>
+        <!--
+          Search — static chrome, no backend.
+          .search: position relative, w-[320px], max-w-full
+          .search input: h-[38px], px-[12px] ps-[36px], bg-surface-alt, border rounded
+          .search .kbd: absolute right-2, text-[11px], px-[6px] py-[2px], border rounded
+          Hidden on smallest viewports per crewli-starter (<768px: width 0 / display:none)
+        -->
+        <div class="relative hidden sm:block w-[240px] lg:w-[320px] max-w-full">
+          <Icon
+            name="tabler-search"
+            :size="16"
+            class="pointer-events-none absolute left-[11px] top-1/2 -translate-y-1/2 text-[var(--p-text-muted-color)]"
+          />
+          <InputText
+            class="h-[38px] w-full rounded-[var(--p-border-radius)] border border-transparent bg-[var(--p-content-hover-background)] ps-[36px] pe-[52px] text-[var(--p-text-color)] placeholder:text-[var(--p-text-muted-color)] focus:border-[var(--p-primary-color)] focus:bg-[var(--p-content-background)] focus:shadow-[0_0_0_3px_var(--p-primary-50)] focus:outline-none transition-[border-color,background,box-shadow] duration-150"
+            placeholder="Search artists, crew, events..."
+            :pt="{ root: { 'data-search-input': '' } }"
+          />
+          <span class="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 rounded-[var(--p-border-radius-sm,4px)] border border-[var(--p-content-border-color)] bg-[var(--p-content-background)] px-[6px] py-[2px] font-mono text-[11px] text-[var(--p-text-muted-color)]">
+            ⌘K
+          </span>
+        </div>
       </div>
 
       <!--
@@ -380,28 +396,30 @@ const userMenuItems = computed<MenuItem[]>(() => [
         PrimeVue Popover replaces crewli-starter's manual document.addEventListener('mousedown', …)
         TODO TECH-WS-GUI-REDESIGN: real notification feed — not foundation scope
       -->
-      <OverlayBadge
-        :value="notifCount > 0 ? String(notifCount) : undefined"
-        severity="danger"
-      >
-        <button
-          type="button"
-          class="inline-flex h-[38px] w-[38px] items-center justify-center rounded-[var(--p-border-radius)] border-0 bg-transparent text-[var(--p-text-muted-color)] transition-colors duration-150 hover:bg-[var(--p-content-hover-background)] hover:text-[var(--p-text-color)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--p-primary-color)] focus-visible:outline-offset-1"
-          aria-label="Notifications"
-          @click="toggleNotifPopover"
+      <div data-tb="notifications">
+        <OverlayBadge
+          :value="notifCount > 0 ? String(notifCount) : undefined"
+          severity="danger"
         >
-          <Icon
-            name="tabler-bell"
-            :size="18"
-          />
-        </button>
-      </OverlayBadge>
+          <button
+            type="button"
+            class="inline-flex h-[38px] w-[38px] items-center justify-center rounded-[var(--p-border-radius)] border-0 bg-transparent text-[var(--p-text-muted-color)] transition-colors duration-150 hover:bg-[var(--p-content-hover-background)] hover:text-[var(--p-text-color)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--p-primary-color)] focus-visible:outline-offset-1"
+            aria-label="Notifications"
+            @click="toggleNotifPopover"
+          >
+            <Icon
+              name="tabler-bell"
+              :size="18"
+            />
+          </button>
+        </OverlayBadge>
 
-      <Popover ref="notifPopoverRef">
-        <div class="min-w-[320px] p-4 text-[13px] text-[var(--p-text-muted-color)]">
-          No notifications
-        </div>
-      </Popover>
+        <Popover ref="notifPopoverRef">
+          <div class="min-w-[320px] p-4 text-[13px] text-[var(--p-text-muted-color)]">
+            No notifications
+          </div>
+        </Popover>
+      </div>
 
       <!--
         User menu — PrimeVue Avatar + Menu.
@@ -409,40 +427,42 @@ const userMenuItems = computed<MenuItem[]>(() => [
         Menu: PrimeVue Menu replaces crewli-starter's manual click-outside listener.
         #start slot used for user info header.
       -->
-      <Avatar
-        :label="userInitials"
-        shape="circle"
-        class="cursor-pointer"
-        :pt="{ root: { style: 'background: linear-gradient(135deg, #f472b6, var(--p-primary-500, #0d9488)); color: #fff;' } }"
-        aria-label="User menu"
-        @click="toggleUserMenu"
-      />
+      <div data-tb="user">
+        <Avatar
+          :label="userInitials"
+          shape="circle"
+          class="cursor-pointer"
+          :pt="{ root: { style: 'background: linear-gradient(135deg, #f472b6, var(--p-primary-500, #0d9488)); color: #fff;' } }"
+          aria-label="User menu"
+          @click="toggleUserMenu"
+        />
 
-      <Menu
-        ref="userMenuRef"
-        :model="userMenuItems"
-        popup
-      >
-        <template #start>
-          <div class="flex items-center gap-3 px-4 py-3 border-b border-[var(--p-content-border-color)]">
-            <Avatar
-              :label="userInitials"
-              shape="circle"
-              :pt="{ root: { style: 'background: linear-gradient(135deg, #f472b6, var(--p-primary-500, #0d9488)); color: #fff; width:40px; height:40px; font-size:14px;' } }"
-            />
-            <div class="min-w-0">
-              <div class="truncate text-[13.5px] font-semibold text-[var(--p-text-color)]">
-                {{ authStore.user?.full_name ?? '' }}
-              </div>
-              <div class="truncate text-[12px] text-[var(--p-text-muted-color)]">
-                {{ authStore.user?.email ?? '' }}
+        <Menu
+          ref="userMenuRef"
+          :model="userMenuItems"
+          popup
+        >
+          <template #start>
+            <div class="flex items-center gap-3 px-4 py-3 border-b border-[var(--p-content-border-color)]">
+              <Avatar
+                :label="userInitials"
+                shape="circle"
+                :pt="{ root: { style: 'background: linear-gradient(135deg, #f472b6, var(--p-primary-500, #0d9488)); color: #fff; width:40px; height:40px; font-size:14px;' } }"
+              />
+              <div class="min-w-0">
+                <div class="truncate text-[13.5px] font-semibold text-[var(--p-text-color)]">
+                  {{ authStore.user?.full_name ?? '' }}
+                </div>
+                <div class="truncate text-[12px] text-[var(--p-text-muted-color)]">
+                  {{ authStore.user?.email ?? '' }}
+                </div>
               </div>
             </div>
-          </div>
-        </template>
-      </Menu>
-    </div>
-  </header>
+          </template>
+        </Menu>
+      </div>
+    </template>
+  </Menubar>
 </template>
 
 <style scoped>
diff --git a/apps/app/src/components-v2/layout/__tests__/AppTopbar.spec.ts b/apps/app/src/components-v2/layout/__tests__/AppTopbar.spec.ts
index 2eb2da90..56213b0b 100644
--- a/apps/app/src/components-v2/layout/__tests__/AppTopbar.spec.ts
+++ b/apps/app/src/components-v2/layout/__tests__/AppTopbar.spec.ts
@@ -50,7 +50,19 @@ vi.mock('vue-router', () => ({
 // Stubs for PrimeVue components
 // ---------------------------------------------------------------------------
 
+/**
+ * MenubarStub — mirrors the PrimeVue Menubar slot contract used by AppTopbar
+ * (RFC AD-3). Renders #start and #end named slots so [data-tb="breadcrumb"]
+ * and [data-tb="user"] are inspectable inside the stub.
+ */
+const MenubarStub = {
+  name: 'Menubar',
+  props: ['model', 'pt'],
+  template: '<div class="menubar-stub"><slot name="start" /><slot name="end" /></div>',
+}
+
 const globalStubs = {
+  Menubar: MenubarStub,
   Breadcrumb: { name: 'Breadcrumb', props: ['model'], template: '<nav class="breadcrumb-stub" />' },
   InputText: { name: 'InputText', template: '<input class="input-text-stub" />' },
   OverlayBadge: { name: 'OverlayBadge', props: ['value', 'severity'], template: '<div class="overlay-badge-stub"><slot /></div>' },
@@ -286,4 +298,22 @@ describe('AppTopbar', () => {
     expect(lastItem.command).toBeUndefined()
     expect('route' in lastItem).toBe(false)
   })
+
+  // -------------------------------------------------------------------------
+  // RFC AD-3: AppTopbar wraps PrimeVue Menubar as chrome root
+  // -------------------------------------------------------------------------
+
+  it('renders the top bar inside a PrimeVue Menubar (RFC AD-3)', () => {
+    const w = mountTopbar()
+
+    expect(w.findComponent(MenubarStub).exists()).toBe(true)
+  })
+
+  it('breadcrumb lives in Menubar #start, user cluster in #end', () => {
+    const w = mountTopbar()
+    const bar = w.findComponent(MenubarStub)
+
+    expect(bar.find('[data-tb="breadcrumb"]').exists()).toBe(true)
+    expect(bar.find('[data-tb="user"]').exists()).toBe(true)
+  })
 })