From 8e16651232f4c606f9e14b2223703416ef16ba7b Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Thu, 21 May 2026 00:15:34 +0200
Subject: [PATCH] style(layout): sidebar brand-square symmetry +
 WorkspaceSwitcher trigger polish
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Plan 2.5 P6 follow-up. Closes two desktop shell-parity gaps from P6
manual smoke against crewli-starter SoT:

- Sidebar logo decoupled from the collapse toggle. Expanded layout is
  now justify-between (brand group left, collapse chevron right) and
  collapsed layout is justify-center with the logo alone. The expand
  affordance becomes a small absolute-positioned circular button at
  the rail's right edge — solid background + border so the slight
  overlap with the centred logo reads as a tucked-in chip rather than
  a collision. Toggling collapsed no longer shifts the logo.
- Brand square (SidebarHeader logo) and workspace avatar
  (WorkspaceSwitcher trigger) unified to the same rounded square
  (h-8 w-8 rounded-xl). Existing sizes were already consistent at
  32px — radius bumped from rounded-lg (8px) / var(--p-border-radius)
  (~6px) to rounded-xl (12px) per the design direction. Collapsed
  rail now reads as a vertical mirror: brand square at the top,
  avatar square at the bottom, bracketing the nav icons.
- WorkspaceSwitcher trigger restyled: rounded-xl (was the sharper
  var-radius), p-2 (was px-[10px] py-[8px]), hover background. The
  collapsed-variant gating of name + chevron is unchanged from P5.

Edge-mounted overhang past the rail edge was not possible: the aside
carries `overflow-hidden` (intentional, for the w-64 ⇄ w-16 width
transition) which clips anything past the rail edge. The tucked-chip
pattern (24px circle at end-0, solid bg) is the visual compromise —
the affordance stays inside the rail, discoverable, and visually
decoupled from the logo.

Desktop only. Mobile drawer chrome (logo placement, drawer X button,
missing switcher) tracked separately as MOBILE-SHELL-PARITY.

Tests:
- +2 WorkspaceSwitcher.spec.ts: trigger uses rounded-xl; collapsed
  trigger renders avatar only (hides .meta).
- +1 SidebarHeader.spec.ts: collapsed row hides the .brand-name
  wordmark and toggles to justify-center (logo-stays-centred lock).

Suite delta: 558 → 561 (+3). vue-tsc clean. Scoped ESLint clean
(0 errors, pre-existing warnings only).

Manual smoke pending Bert: collapse the rail, verify logo stays put
and the expand chip appears at the right edge; verify the trigger
shows rounded corners + hover bg; verify the collapsed avatar
mirrors the brand square size/radius.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components-v2/layout/SidebarHeader.vue    | 112 +++++++++++-------
 .../layout/WorkspaceSwitcher.vue              |  18 ++-
 .../layout/__tests__/SidebarHeader.spec.ts    |  22 ++++
 .../__tests__/WorkspaceSwitcher.spec.ts       |  21 +++-
 4 files changed, 120 insertions(+), 53 deletions(-)

diff --git a/apps/app/src/components-v2/layout/SidebarHeader.vue b/apps/app/src/components-v2/layout/SidebarHeader.vue
index 1ffeaec5..df6a0420 100644
--- a/apps/app/src/components-v2/layout/SidebarHeader.vue
+++ b/apps/app/src/components-v2/layout/SidebarHeader.vue
@@ -12,29 +12,24 @@
  *   - Desktop (>=lg): toggle the persistent sidebar between expanded/collapsed
  *     → call toggleSidebar().
  *
- * CSS translation (main.css → Tailwind):
- *   .brand                → flex items-center gap-[10px] h-[var(--topbar-h,56px)]
- *                           px-4 border-b border-[var(--p-content-border-color)]
- *                           flex-shrink-0 relative
- *   .brand.collapsed      → justify-center (via :class when sidebarCollapsed)
- *   .mark                 → w-8 h-8 flex-shrink-0 rounded-lg
- *                           bg-gradient-to-br from-primary-500 to-primary-700
- *                           inline-flex items-center justify-center
- *                           text-white font-bold text-sm
- *   .wordmark             → font-bold text-base tracking-[-0.01em] whitespace-nowrap
- *   .pill                 → text-[9px] font-semibold bg-primary-50 dark:bg-primary-950
- *                           text-primary-600 dark:text-primary-400 px-1.5 py-px
- *                           rounded-full uppercase tracking-[0.05em]
- *   .sidebar-collapse     → ms-auto w-7 h-7 border-0 bg-transparent
- *                           text-[var(--p-text-muted-color)] rounded-[var(--p-border-radius)]
- *                           inline-flex items-center justify-center
- *                           transition-[background,color] duration-150
- *                           hover:bg-[var(--p-content-hover-background)]
- *                           hover:text-[var(--p-text-color)]
+ * Plan 2.5 P6-followup-styling: the collapse-toggle is decoupled from the
+ * brand group so the logo stays centered in the collapsed rail.
+ *  - Expanded: justify-between row — [brand group] [collapse chevron].
+ *  - Collapsed: justify-center row — [logo only], with the expand chevron
+ *    as a small floating circle absolute-positioned at the rail's right
+ *    edge (tucked over the logo's right side with a solid background
+ *    so the visual reads as an intentional chip, not an overlap). The
+ *    aside's `overflow-hidden` (intentional, for the width transition)
+ *    prevents true overhang past the rail edge — the tucked pattern is
+ *    the visual compromise that keeps the affordance discoverable.
  *
- * <style scoped> is used for the inset box-shadow on .mark because
- * Tailwind has no inset directional shadow utility at this granularity
- * (per RFC §7.4 — last resort, with justification comment).
+ * The logo square shares its size + radius with WorkspaceSwitcher's
+ * avatar square (h-8 w-8 rounded-xl) so the collapsed rail reads as
+ * symmetric: brand-square at top, workspace-square at bottom, bracketing
+ * the nav icons.
+ *
+ * <style scoped> covers the inset box-shadow on .mark only (no Tailwind
+ * utility at this granularity, per RFC §7.4 last-resort).
  */
 
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
@@ -61,42 +56,67 @@ function handleCollapseClick(): void {
 
 <template>
   <div
-    class="flex items-center gap-[10px] h-[56px] border-b border-[var(--p-content-border-color)] flex-shrink-0 relative transition-[padding,justify-content] duration-200"
-    :class="shell.sidebarCollapsed ? 'justify-center px-0' : 'px-4'"
+    class="flex items-center h-[56px] border-b border-[var(--p-content-border-color)] flex-shrink-0 relative transition-[padding,justify-content] duration-200"
+    :class="shell.sidebarCollapsed ? 'justify-center px-0' : 'justify-between px-4'"
   >
-    <!-- Logo mark: "C" in a gradient square -->
-    <span class="mark w-8 h-8 flex-shrink-0 rounded-lg bg-gradient-to-br from-primary-500 to-primary-700 inline-flex items-center justify-center text-white font-bold text-sm">
-      C
-    </span>
+    <!--
+      Expanded: brand group on the left (logo + wordmark + Beta pill).
+      Collapsed: only the logo square, centered in the rail.
+    -->
+    <div class="flex items-center gap-[10px]">
+      <!-- Brand square — shared treatment with WorkspaceSwitcher avatar (h-8 w-8 rounded-xl). -->
+      <span class="brand-mark mark w-8 h-8 flex-shrink-0 rounded-xl bg-gradient-to-br from-primary-500 to-primary-700 inline-flex items-center justify-center text-white font-bold text-sm">
+        C
+      </span>
 
-    <!-- Wordmark + Beta pill: hidden when sidebar is collapsed -->
-    <span
-      v-if="!shell.sidebarCollapsed"
-      class="font-bold text-base tracking-[-0.01em] whitespace-nowrap text-[var(--p-text-color)]"
-    >
-      Crewli
-    </span>
+      <span
+        v-if="!shell.sidebarCollapsed"
+        class="brand-name font-bold text-base tracking-[-0.01em] whitespace-nowrap text-[var(--p-text-color)]"
+      >
+        Crewli
+      </span>
 
-    <span
-      v-if="!shell.sidebarCollapsed"
-      class="text-[9px] font-semibold bg-primary-50 dark:bg-primary-950 text-primary-600 dark:text-primary-400 px-1.5 py-px rounded-full uppercase tracking-[0.05em]"
-    >
-      Beta
-    </span>
+      <span
+        v-if="!shell.sidebarCollapsed"
+        class="text-[9px] font-semibold bg-primary-50 dark:bg-primary-950 text-primary-600 dark:text-primary-400 px-1.5 py-px rounded-full uppercase tracking-[0.05em]"
+      >
+        Beta
+      </span>
+    </div>
 
-    <!-- Collapse-toggle button: always visible; acts as expand affordance when collapsed -->
+    <!-- Expanded: inline collapse chevron on the right (justify-between sibling). -->
     <button
-      class="ms-auto w-7 h-7 border-0 bg-transparent text-[var(--p-text-muted-color)] rounded-[var(--p-border-radius)] inline-flex items-center justify-center transition-[background,color] duration-150 hover:bg-[var(--p-content-hover-background)] hover:text-[var(--p-text-color)] cursor-pointer"
-      :class="shell.sidebarCollapsed ? '!ms-0' : ''"
-      :aria-label="shell.sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+      v-if="!shell.sidebarCollapsed"
+      class="w-7 h-7 border-0 bg-transparent text-[var(--p-text-muted-color)] rounded-[var(--p-border-radius)] inline-flex items-center justify-center transition-[background,color] duration-150 hover:bg-[var(--p-content-hover-background)] hover:text-[var(--p-text-color)] cursor-pointer"
+      aria-label="Collapse sidebar"
       type="button"
       @click="handleCollapseClick"
     >
       <Icon
-        :name="shell.sidebarCollapsed ? 'tabler-chevron-right' : 'tabler-chevron-left'"
+        name="tabler-chevron-left"
         :size="16"
       />
     </button>
+
+    <!--
+      Collapsed: expand chevron as a small floating chip at the rail's
+      right edge. Solid background + border so the slight overlap with
+      the centered logo reads as a tucked-in affordance rather than a
+      collision. Decoupled from the brand group so toggling does NOT
+      shift the logo's centering.
+    -->
+    <button
+      v-else
+      class="absolute end-0 top-1/2 -translate-y-1/2 w-6 h-6 rounded-full border border-[var(--p-content-border-color)] bg-[var(--p-content-background)] text-[var(--p-text-muted-color)] inline-flex items-center justify-center transition-[background,color] duration-150 hover:bg-[var(--p-content-hover-background)] hover:text-[var(--p-text-color)] cursor-pointer shadow-sm"
+      aria-label="Expand sidebar"
+      type="button"
+      @click="handleCollapseClick"
+    >
+      <Icon
+        name="tabler-chevron-right"
+        :size="12"
+      />
+    </button>
   </div>
 </template>
 
diff --git a/apps/app/src/components-v2/layout/WorkspaceSwitcher.vue b/apps/app/src/components-v2/layout/WorkspaceSwitcher.vue
index 012b0969..e6fc62f7 100644
--- a/apps/app/src/components-v2/layout/WorkspaceSwitcher.vue
+++ b/apps/app/src/components-v2/layout/WorkspaceSwitcher.vue
@@ -135,19 +135,27 @@ function inviteUser(): void {
 
 <template>
   <div class="relative flex-shrink-0 border-t border-[var(--p-content-border-color)] p-[10px]">
-    <!-- Trigger button -->
+    <!--
+      Trigger button.
+      Plan 2.5 P6-followup-styling: rounded-xl (matches the brand square
+      in SidebarHeader), p-2 padding, hover background — replaces the
+      sharper rounded-[var(--p-border-radius)] / px-[10px] py-[8px] state.
+      Collapsed variant centres the avatar only, hiding the name and
+      chevron, so the collapsed rail reads as a vertical mirror: brand
+      square at the top, avatar square at the bottom.
+    -->
     <button
-      class="flex w-full items-center gap-[10px] rounded-[var(--p-border-radius)] border border-transparent bg-transparent px-[10px] py-[8px] text-[var(--p-text-color)] transition-colors duration-150 hover:bg-[var(--p-content-hover-background)]"
+      class="trigger flex w-full items-center gap-[10px] rounded-xl border border-transparent bg-transparent p-2 text-[var(--p-text-color)] transition-colors duration-150 hover:bg-[var(--p-content-hover-background)]"
       :class="[
         collapsed ? 'justify-center' : '',
       ]"
       aria-haspopup="true"
       @click="toggle"
     >
-      <!-- Logo square (gradient background is bespoke: dynamic hex pair cannot be a static Tailwind class — RFC §7.4 justified inline-style) -->
+      <!-- Avatar square — shared treatment with SidebarHeader logo (h-8 w-8 rounded-xl). Gradient background is bespoke per organisation (dynamic hex pair, RFC §7.4 inline-style). -->
       <span
         v-if="current"
-        class="ws-logo ws-logo-square w-8 h-8 flex-shrink-0 rounded-[var(--p-border-radius)] inline-flex items-center justify-center text-white font-bold text-[12px]"
+        class="ws-logo ws-logo-square w-8 h-8 flex-shrink-0 rounded-xl inline-flex items-center justify-center text-white font-bold text-[12px]"
         :style="{ background: `linear-gradient(135deg, ${current.gradient[0]}, ${current.gradient[1]})` }"
       >
         {{ current.initials }}
@@ -156,7 +164,7 @@ function inviteUser(): void {
       <!-- Meta: name (hidden in collapsed mode). AD-2.5-W1 / P4: no sub. -->
       <span
         v-if="!collapsed && current"
-        class="flex flex-1 min-w-0 flex-col text-left leading-[1.2]"
+        class="meta flex flex-1 min-w-0 flex-col text-left leading-[1.2]"
       >
         <span class="name truncate text-[13.5px] font-semibold text-[var(--p-text-color)]">
           {{ current.name }}
diff --git a/apps/app/src/components-v2/layout/__tests__/SidebarHeader.spec.ts b/apps/app/src/components-v2/layout/__tests__/SidebarHeader.spec.ts
index 39a4c6c9..d9612e67 100644
--- a/apps/app/src/components-v2/layout/__tests__/SidebarHeader.spec.ts
+++ b/apps/app/src/components-v2/layout/__tests__/SidebarHeader.spec.ts
@@ -193,4 +193,26 @@ describe('SidebarHeader', () => {
 
     expect(btn.attributes('aria-label')).toBe('Collapse sidebar')
   })
+
+  // P6-followup-styling: when collapsed, the brand-name (wordmark) is
+  // hidden and the row centres the logo. The expand button is a
+  // separate absolute-positioned sibling — its presence must not push
+  // the logo off-centre. This spec locks the "logo stays centred"
+  // contract by asserting the row's flex alignment + wordmark absence.
+  it('collapsed: hides the Crewli wordmark and centres the row', async () => {
+    const wrapper = mountHeader()
+    const shell = useShellUiStore()
+
+    shell.sidebarCollapsed = true
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('.brand-name').exists()).toBe(false)
+    expect(wrapper.text()).not.toContain('Crewli')
+
+    // The header row toggles to justify-center when collapsed.
+    const row = wrapper.find('div')
+
+    expect(row.classes()).toContain('justify-center')
+  })
 })
diff --git a/apps/app/src/components-v2/layout/__tests__/WorkspaceSwitcher.spec.ts b/apps/app/src/components-v2/layout/__tests__/WorkspaceSwitcher.spec.ts
index e71f0d07..b42d70c9 100644
--- a/apps/app/src/components-v2/layout/__tests__/WorkspaceSwitcher.spec.ts
+++ b/apps/app/src/components-v2/layout/__tests__/WorkspaceSwitcher.spec.ts
@@ -49,7 +49,7 @@ const globalStubs = {
   },
 }
 
-function mountSwitcher(opts: { orgs?: Organisation[] } = {}) {
+function mountSwitcher(opts: { orgs?: Organisation[]; collapsed?: boolean } = {}) {
   setActivePinia(createPinia())
 
   const auth = useAuthStore()
@@ -58,7 +58,7 @@ function mountSwitcher(opts: { orgs?: Organisation[] } = {}) {
   auth.organisations = opts.orgs ?? [orgA, orgB, orgC]
 
   return mount(WorkspaceSwitcher, {
-    props: { collapsed: false },
+    props: { collapsed: opts.collapsed ?? false },
     global: {
       stubs: globalStubs,
     },
@@ -87,6 +87,23 @@ describe('WorkspaceSwitcher', () => {
     expect(wrapper.text()).toContain(orgA.name)
   })
 
+  // -------------------------------------------------------------------------
+  // P6-followup-styling — trigger uses rounded-xl + collapsed = avatar only
+  // -------------------------------------------------------------------------
+
+  it('trigger uses rounded-xl (not the sharper PrimeVue var-radius)', () => {
+    const wrapper = mountSwitcher()
+
+    expect(wrapper.find('.trigger').classes()).toContain('rounded-xl')
+  })
+
+  it('collapsed trigger renders avatar only, hides name + chevron', () => {
+    const wrapper = mountSwitcher({ collapsed: true })
+
+    expect(wrapper.find('.ws-logo').exists()).toBe(true)
+    expect(wrapper.find('.meta').exists()).toBe(false)
+  })
+
   // -------------------------------------------------------------------------
   // Fix 5 — dropdown panel structure
   // -------------------------------------------------------------------------