From 73b2dea363ef23e71529ae35aa3da708da2d9df4 Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Sat, 16 May 2026 11:44:42 +0200
Subject: [PATCH] feat(layouts): add OrganizerLayoutV2 + AppShellV2 skeleton

Tailwind-grid shell skeleton with named slot regions (sidebar, topbar,
default, drawer). OrganizerLayoutV2 wires the skeleton with RouterView,
selectable via definePage meta. Vitest component mount test: 2 tests pass.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 apps/app/src/layouts/OrganizerLayoutV2.vue    | 26 +++++++++++
 .../app/src/layouts/components/AppShellV2.vue | 44 +++++++++++++++++++
 .../component/layouts/AppShellV2.spec.ts      | 34 ++++++++++++++
 3 files changed, 104 insertions(+)
 create mode 100644 apps/app/src/layouts/OrganizerLayoutV2.vue
 create mode 100644 apps/app/src/layouts/components/AppShellV2.vue
 create mode 100644 apps/app/tests/component/layouts/AppShellV2.spec.ts

diff --git a/apps/app/src/layouts/OrganizerLayoutV2.vue b/apps/app/src/layouts/OrganizerLayoutV2.vue
new file mode 100644
index 00000000..9f9970d3
--- /dev/null
+++ b/apps/app/src/layouts/OrganizerLayoutV2.vue
@@ -0,0 +1,26 @@
+<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.
+import AppShellV2 from '@/layouts/components/AppShellV2.vue'
+</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>
+    </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>
+    </template>
+
+    <RouterView />
+  </AppShellV2>
+</template>
diff --git a/apps/app/src/layouts/components/AppShellV2.vue b/apps/app/src/layouts/components/AppShellV2.vue
new file mode 100644
index 00000000..628f8fb1
--- /dev/null
+++ b/apps/app/src/layouts/components/AppShellV2.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+// AppShellV2 — Tailwind-grid SKELETON (RFC-WS-GUI-REDESIGN AD-G2/G3,
+// Plan 1). Named slot regions; PrimeVue shell pieces (AppSidebar,
+// AppTopbar, WorkspaceSwitcher, RightDrawer) are injected via slots in
+// a later plan. Outer container is intentionally custom Tailwind (no
+// PrimeVue equivalent for a permanent rail), matching crewli-starter `.app`.
+
+import { computed, onMounted, watch } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useShellUiStore } from '@/stores/useShellUiStore'
+
+const shell = useShellUiStore()
+const { sidebarCollapsed } = storeToRefs(shell)
+
+const rootClass = computed(() => ({ 'is-collapsed': sidebarCollapsed.value }))
+
+onMounted(() => shell.applyDomAttributes())
+watch(
+  () => [shell.theme, shell.density],
+  () => shell.applyDomAttributes(),
+)
+</script>
+
+<template>
+  <div
+    data-testid="appshell-v2"
+    class="grid min-h-screen grid-cols-[auto_1fr]"
+    :class="rootClass"
+  >
+    <div class="row-span-2">
+      <slot name="sidebar" />
+    </div>
+
+    <div class="flex min-h-screen flex-col">
+      <slot name="topbar" />
+
+      <main class="flex-1 overflow-auto p-6">
+        <slot />
+      </main>
+    </div>
+
+    <slot name="drawer" />
+  </div>
+</template>
diff --git a/apps/app/tests/component/layouts/AppShellV2.spec.ts b/apps/app/tests/component/layouts/AppShellV2.spec.ts
new file mode 100644
index 00000000..012db098
--- /dev/null
+++ b/apps/app/tests/component/layouts/AppShellV2.spec.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia } from 'pinia'
+import AppShellV2 from '@/layouts/components/AppShellV2.vue'
+
+describe('AppShellV2 (skeleton)', () => {
+  it('renders the grid regions and default slot content', () => {
+    const wrapper = mount(AppShellV2, {
+      global: { plugins: [createPinia()] },
+      slots: {
+        sidebar: '<nav data-testid="sb">SB</nav>',
+        topbar: '<header data-testid="tb">TB</header>',
+        default: '<main data-testid="content">CONTENT</main>',
+        drawer: '<aside data-testid="dr">DR</aside>',
+      },
+    })
+
+    expect(wrapper.find('[data-testid="appshell-v2"]').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="sb"]').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="tb"]').exists()).toBe(true)
+    expect(wrapper.find('[data-testid="content"]').text()).toBe('CONTENT')
+    expect(wrapper.find('[data-testid="dr"]').exists()).toBe(true)
+  })
+
+  it('applies the collapsed modifier from useShellUiStore', async () => {
+    const pinia = createPinia()
+    const wrapper = mount(AppShellV2, { global: { plugins: [pinia] } })
+    const { useShellUiStore } = await import('@/stores/useShellUiStore')
+
+    useShellUiStore().toggleSidebar()
+    await wrapper.vm.$nextTick()
+    expect(wrapper.find('[data-testid="appshell-v2"]').classes()).toContain('is-collapsed')
+  })
+})