feat(gui-v2): wire OrganizerLayoutV2 to compose the real shell components

Replaces the Plan-1 skeleton stubs: OrganizerLayoutV2 now fills
AppShellV2's #sidebar/#topbar/#drawer slots with the ported AppSidebar /
AppTopbar / RightDrawer and sources orgNavItems via useV2Nav() (legal
now that OrganizerLayoutV2.vue is the layouts-v2 zone). AppShellV2 is
unchanged; its contract test stays green. New component test locks the
composition (right component per slot, :groups forwarded, no skeleton).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-17 02:04:07 +02:00
parent a341a60412
commit 41b4017bd1
2 changed files with 107 additions and 11 deletions

View File

@@ -1,26 +1,45 @@
<script setup lang="ts">
// OrganizerLayoutV2 — v2 layout file selected by
// definePage({ meta: { layout: 'OrganizerLayoutV2' } }) on pages-v2/**
// (RFC-WS-GUI-REDESIGN AD-G2). Plan 1: wires the skeleton + RouterView.
// A later plan fills the sidebar/topbar/drawer slots with ported
// PrimeVue shell pieces.
/**
* OrganizerLayoutV2 — v2 shell layout selected by
* definePage({ meta: { layout: 'OrganizerLayoutV2' } }) on pages-v2/**
* (RFC-WS-GUI-REDESIGN AD-G2).
*
* Plan 2 Task 7 — composition only: fills AppShellV2's named slots with
* the ported PrimeVue shell pieces (AppSidebar / AppTopbar / RightDrawer)
* and renders routed pages via <RouterView/> in the default slot.
*
* Nav data is sourced HERE: the layouts zone may import @/navigation,
* whereas components-v2 may NOT (import-boundary matrix). orgNavItems is
* folded into V2NavGroup[] by useV2Nav() and passed to AppSidebar :groups.
*
* No provide/inject: each shell piece reads its own state from
* useShellUiStore / useAuthStore (RFC AD-G4). This layout wires
* composition + nav data only; it owns no shell state.
*/
import { orgNavItems } from '@/navigation/vertical'
import { useV2Nav } from '@/composables/useV2Nav'
import AppShellV2 from '@/layouts/components/AppShellV2.vue'
import AppSidebar from '@/components-v2/layout/AppSidebar.vue'
import AppTopbar from '@/components-v2/layout/AppTopbar.vue'
import RightDrawer from '@/components-v2/layout/RightDrawer.vue'
const { groups } = useV2Nav(orgNavItems)
</script>
<template>
<AppShellV2>
<template #sidebar>
<nav class="w-72 border-r border-surface-200 p-4 dark:border-surface-800">
<span class="text-sm text-surface-500">Crewli v2</span>
</nav>
<AppSidebar :groups="groups" />
</template>
<template #topbar>
<header class="flex h-14 items-center border-b border-surface-200 px-6 dark:border-surface-800">
<span class="text-sm text-surface-500">v2 shell (skeleton)</span>
</header>
<AppTopbar />
</template>
<RouterView />
<template #drawer>
<RightDrawer />
</template>
</AppShellV2>
</template>