bert.hausmans/crewli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
773 Commits 3 Branches 0 Tags
9f56fb1112cd3384e48461e9585d2b8c1c8ca499
Commit Graph

11 Commits

Author SHA1 Message Date
bert.hausmans
9f56fb1112 style(layout): borderless WorkspaceSwitcher with hover/open background; fix avatar jump 
Matches the crewli-starter SoT and fixes the recurring collapse jump at
its root cause. The prior structures left a residual avatar shift:
- the original split put the avatar at 24px expanded (wrapper px-4 +
  card p-2) vs 16px collapsed (bare square) — an 8px horizontal jump;
- the interim single-trigger variant used wrapper p-[10px] + trigger
  px-[10px] expanded (~20px) vs justify-center collapsed (16px) — a
  ~4px residual horizontal shift.

Unified both states to a single symmetric structure:

    avatar offset = wrapper px-2 (8px) + trigger p-2 (8px) = 16px

16px from the rail's left edge in BOTH states — identical to the
SidebarHeader brand logo. Because the padding is symmetric (8 + 8 each
side) and the collapsed rail is 64px = 16 + 32 + 16, the left-aligned
avatar is also visually centred when collapsed — no justify-center,
no px swap, no horizontal shift; constant vertical padding, no vertical
shift. The jump is gone at the root.

Borderless: the trigger has NO border in any state (the prior is-open
border is dropped per the starter screenshots). The only divider is the
wrapper's border-t between the switcher and the nav. The grey
background is the sole fill — transparent at rest, grey on hover, and
grey while the popover is open (isOpen wired to Popover @show/@hide).
The trigger's p-2 gives the grey background generous padding around the
avatar+text, matching the starter's hover treatment, and since it is
the button's own background it never moves the content.

Specs reworked: trigger p-2 identical across states (no px swap / no
justify-center — the no-jump lock), wrapper carries p-2, trigger is
borderless at rest AND while open, open-state grey background applies
on @show and clears on @hide. Single-.trigger / rounded-lg / collapsed-
hides-meta+chev / sub-line specs retained.

Suite delta: 571 → 571 (specs reworked, count unchanged). vue-tsc
clean. Scoped ESLint clean (0 errors). Desktop only.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-21 22:49:08 +02:00
bert.hausmans
9f26215e54 fix(layout): WorkspaceSwitcher crewli-starter parity — no avatar jump, is-open bg, no resting border 
Diagnosed against the crewli-starter SoT
(crewli-starter/src/components/layout/WorkspaceSwitcher.vue +
main.css .ws-switcher rules). Three issues Bert flagged in manual
smoke, one root cause:

ROOT CAUSE — the prior version swapped between TWO separate <button>
elements on collapse (a bare collapsed button vs a padded expanded
trigger) with different box models. Their vertical padding differed,
so the avatar's distance from the rail bottom changed by ~6px and
visibly jumped on collapse. crewli-starter instead renders ONE
`.trigger` button in both states and only hides `.meta` + `.chev`
(+ recentres) on collapse.

Fixes (all by adopting the single-trigger structure):
- Avatar no longer jumps: one `.trigger` button always; `py-2`
  vertical padding constant across states; only horizontal
  padding/justify changes on collapse. Avatar's vertical box is now
  identical collapsed vs expanded.
- No resting border: trigger is `border-transparent` at rest and on
  hover (hover only adds the grey bg), matching crewli-starter
  `.trigger:hover { background }`. The wrapper has only the `border-t`
  separator, no box border.
- is-open persistence: new `isOpen` ref synced from the PrimeVue
  Popover `@show`/`@hide` events. While the dropdown is open the
  trigger keeps the grey bg AND shows a visible border, matching
  crewli-starter `.ws-switcher.is-open .trigger { background;
  border-color }`. Persists until the popover closes (covers
  programmatic hide via selectOrg + outside-click dismissal).
- Hover padding: trigger `px-[10px] py-2` inside a `p-[10px]` wrapper
  reproduces crewli-starter's generous hover-card inset
  (`.ws-switcher { padding:10px } .trigger { padding:8px 10px }`).

Collapsed alignment preserved: wrapper p-[10px] + trigger
`justify-center px-0` centres the 32px avatar at 16px from the rail's
left edge — still aligned with the SidebarHeader brand logo (px-4).
At rest the collapsed trigger is transparent, so it still reads as a
bare square mirroring the header logo; hover/open add the card.

Specs: replaced the now-obsolete "bare avatar button / no .trigger"
+ "collapsed wrapper px-4" locks with crewli-starter-structure specs:
single .trigger in both states, collapsed centres the lone avatar +
hides .meta/.chev, py-2 constant (the no-jump lock), and is-open
keeps bg+border. Sub-line + dropdown specs unchanged.

Suite delta: 569 → 571 (+2). vue-tsc clean. Scoped ESLint clean
(0 errors). Desktop only.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-21 22:31:44 +02:00
bert.hausmans
2fd3c9ea66 style(layout): re-add placeholder workspace sub line + unify avatar across states 
Reverses AD-2.5-W1 option A (no-sub) after visual review against the
crewli-starter SoT — the two-line layout reads better. Adds a
light-grey placeholder sub line under the workspace name (expanded
trigger + dropdown items); collapsed stays bare-avatar-only. No
backend: the placeholder is a neutral static string ('Organisatie'),
real org type + metrics still deferred under
WORKSPACE-DROPDOWN-SUB-CONTENT. The org object exposes no field that
reads well as a subtitle today (id/name/slug/role only; role is an
access identifier, not a description), so a neutral string is used
rather than fabricated metrics or the role string P4 originally
removed.

Fix A — avatar unified across collapsed/expanded. The collapsed
avatar styling previously lived directly on the <button>, letting
user-agent button rendering diverge subtly from the expanded <span>
avatar. The collapsed render now wraps the EXACT SAME avatar span
markup (same classes, gradient, .ws-logo-square inset-shadow) in a
bare transparent p-0 button — the 32px square is byte-identical
across states; only the surrounding context differs.

Fix B — sub line re-added to WorkspaceDisplay (cleanly typed as
`sub: string`, sourced from a SUB_PLACEHOLDER const with a TODO
pointing at the deferred backend). Rendered light-grey
(text-[var(--p-text-muted-color)], matching the in-component muted
text) at text-[11.5px] in the trigger and text-[12.5px] in dropdown
rows, mirroring the pre-P4 sizes. Collapsed renders no sub.

Specs: reversed the P4/P5 no-sub locks to sub-present assertions
(trigger sub present + honest-placeholder/not-role; dropdown sub on
every row + no role leak; collapsed-no-sub via `.meta .sub`).
Updated the collapsed-bare-avatar spec for the new span-in-button
structure (.ws-logo moved from button to inner span).

Suite delta: 566 → 569 (+3). vue-tsc clean. Scoped ESLint clean
(0 errors). No backend, no fabricated data.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-21 07:43:14 +02:00
bert.hausmans
5e3335bf6d style(layout): give expanded WorkspaceSwitcher breathing room from rail edges 
Manual smoke showed the expanded trigger flush against the rail edges:
the wrapper used px-4 when collapsed but only p-2 when expanded.
Unified the expanded wrapper to `px-4 py-2`, matching the collapsed
state and the header brand row, so the rounded trigger card is inset
16px from both rail edges with symmetric breathing room consistent
with the header's px-4 rhythm.

Trade-off documented in the wrapper comment: with px-4 wrapper + p-2
internal trigger padding, the expanded avatar sits ~24px from the
rail edge — ~8px deeper than the bare header logo at 16px. Accepted
as deliberate (the expanded trigger reads as a distinct rounded
button card). The bare-square / logo mirror lives in the collapsed
state, which is unchanged.

No spec changes — the prior assertions cover the collapsed wrapper
(px-4 + h-[56px]) and the expanded trigger's rounded-lg shape, both
still hold. Suite delta: 564 -> 564.

Desktop only. vue-tsc clean. Scoped ESLint clean (0 errors).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-21 02:08:19 +02:00
bert.hausmans
a9c5746e12 style(layout): align WorkspaceSwitcher avatar to the header logo recipe 
Manual smoke after the logo-anchor fix (63300e5f) showed the footer
WorkspaceSwitcher used different spacing and a boxed avatar vs the
header logo. Applied the identical alignment recipe so the workspace
avatar mirrors the brand logo in both states (Option B from the
brief — bare square when collapsed, padded trigger only when
expanded).

Changes (WorkspaceSwitcher.vue only):
- Wrapper toggles `h-[56px] flex items-center px-4` when collapsed
  (mirrors the SidebarHeader brand row) and stays `p-2` when
  expanded (room for the padded trigger).
- Collapsed: a BARE rounded-lg avatar button at the same 16px left
  offset as the header logo. No `.trigger` container, no rounded
  hover-bg box wider than the avatar — the button IS the visible
  square (`.ws-logo .ws-logo-square w-8 h-8 rounded-lg`). True
  top/bottom mirror of the brand square.
- Expanded: unchanged padded `.trigger` button with avatar + name +
  chevron + hover bg. Avatar's left offset stays at 16px from the
  rail (wrapper p-2 + trigger p-2) so the expanded avatar also
  lines up vertically with the header logo.

Same alignment equation as the header recipe:

    rail_collapsed (64px) = square (32px) + 2 × px-4 (2 × 16px)

In both states the avatar's left edge sits at x=16px from the
rail's left — identical to the brand logo above. Vertical line
down the left side now reads as a single column of squares.

Desktop only. Mobile drawer chrome stays as MOBILE-SHELL-PARITY.

Tests adapted:
- `expanded trigger uses rounded-lg` (was tested in both states; the
  collapsed render no longer has a `.trigger` container).
- `expanded trigger has no justify-center` (split from the
  prior two-state assertion).
- New: `collapsed renders a bare avatar button (no .trigger
  container, just .ws-logo)` — locks the bare-square contract.
- New: `collapsed wrapper uses px-4` — locks the
  centring-equation invariant (rail=square+2×px-4) against
  accidental wrapper-padding regressions.

Suite delta: 563 → 564 (+1 net: +2 new collapsed-shape asserts,
−1 redundant two-state assert).

vue-tsc clean. Scoped ESLint clean (0 errors, pre-existing
warnings only). Manual smoke pending Bert — draw a vertical line
down the rail's left edge and verify the brand square and the
workspace square left edges sit on it in both states; in collapsed
mode verify the avatar is a bare square (no boxed button), same
visual treatment as the bare logo above.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-21 01:08:41 +02:00
bert.hausmans
63300e5fc9 style(layout): logo stays anchored on collapse + squarer corners 
Refines the prior sidebar styling commit (8e166512) after manual smoke:

- Brand logo + workspace avatar: rounded-xl -> rounded-lg (crisper
  square per design review; both stay unified at the same radius).
- Logo no longer jumps on collapse. The previous code toggled
  `justify-between` ⇄ `justify-center` on the header row, which
  re-centred the logo against the parent's width — and the parent
  width animates from 256px to 64px over 200ms, so the logo slid
  from x≈112px (centred in the expanded rail) to x=16px (centred in
  the collapsed rail). Visible jump.

  Fix: the brand row is now ALWAYS `px-4` and left-aligned. The
  logo's horizontal offset (16px from the rail's left edge) is
  identical in expanded and collapsed states. Why this still looks
  centred when the rail collapses:

      rail_collapsed (64px) = logo (32px) + 2 × px-4 (2 × 16px)

  With those numbers aligned, a stationary left-aligned logo IS
  visually centred in the 64px-wide collapsed rail. The width
  transition then "slides the rail closed around" the anchored
  logo. Wordmark + Beta badge sit to the RIGHT of the logo and
  v-if-disappear on collapse; their absence doesn't shift the logo
  because they were never to its left.
- Toggle chevron placement:
  - Expanded: collapse chevron (◀) inline at the right of the brand
    row, pushed by `ms-auto` (NOT by justify-between forcing the
    layout to recentre the logo).
  - Collapsed: a SECOND row below the brand row holds a centred
    expand chevron (▶) button. Replaces the prior tucked-chip that
    overlapped the logo. No overlap, no overhang needed against the
    aside's `overflow-hidden`.
- WorkspaceSwitcher trigger: same anchor-on-the-left treatment
  applied. The `justify-center` switch on collapse is gone (it
  caused an identical avatar slide). Wrapper padding `p-[10px]` ->
  `p-2` so the avatar's left offset (wrapper 8 + trigger 8 = 16px)
  matches the SidebarHeader logo (px-4 = 16px) — the brand square
  and the workspace square are now vertically aligned in the
  collapsed rail.

Desktop only. Mobile drawer chrome tracked separately as
MOBILE-SHELL-PARITY.

Tests adapted:
- WorkspaceSwitcher.spec.ts: trigger-rounded assertion bumped
  rounded-xl -> rounded-lg; +1 spec locks "trigger never carries
  justify-center" (avatar-anchored invariant).
- SidebarHeader.spec.ts: collapsed-behaviour spec rewritten — was
  asserting `justify-center`, now asserts the row carries `px-4`
  WITHOUT either justify-center OR justify-between (the actual
  anchor contract); +1 spec confirms the expand chevron lives in a
  SIBLING row of the brand mark (no overlap).

Suite delta: 561 -> 563 (+2). vue-tsc clean. Scoped ESLint clean
(0 errors, pre-existing warnings only).

Manual smoke pending Bert: collapse/expand slowly and watch the
logo — must NOT move horizontally. Confirm rounded-lg looks crisp
(not pebble-soft). Confirm expand chevron sits in its own row
below the logo, no overlap.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-21 00:45:08 +02:00
bert.hausmans
8e16651232 style(layout): sidebar brand-square symmetry + WorkspaceSwitcher trigger polish 
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>
 2026-05-21 00:15:34 +02:00
bert.hausmans
ac36dfe9b7 feat(layout): Plan 2.5 P5 — shell parity fixes 1–5 + useBreadcrumb retire 
Per RFC-WS-PRIMEVUE-PLAN-2-5 §5.1–§5.5 plus the AD-2.5-W1 option-A
supersession (no sub on dropdown items either, accepted divergence).

Atomic changes:
- AppTopbar: brand block (gradient "C" mark + Crewli wordmark) removed
  per Fix 1; the #start slot now renders <AppBreadcrumb /> per Fix 2.
  Legacy meta-based useBreadcrumb consumption (breadcrumbModel computed,
  vue-router useRouter import, command-based PrimeVue Breadcrumb model)
  is gone; AppBreadcrumb owns the registry-driven path. Dead
  topbar-mark-shadow scoped CSS rule deleted.
- AppBreadcrumb: import updated to the renamed useBreadcrumb.
- AppSidebar: docstring updated to make the Fix 3 vertical order
  (Header → Nav → Switcher, switcher bottom-anchored) explicit. No
  template change needed: SidebarNav's root <nav class="flex-1"> already
  fills available column space, naturally pushing WorkspaceSwitcher to
  the bottom (two flex-1 siblings would split the column 50/50 and
  compress the nav — a separate spacer element is structurally wrong).
- WorkspaceSwitcher: dropdown panel restructured per crewli-starter
  reference. Semantic class markers (.popover-head/.title/.link/.list/
  .opt/.is-current/.ws-logo/.name/.check-mark/.foot) added alongside
  Tailwind utilities so specs assert structure with stable selectors.
  Footer buttons wired to placeholder createWorkspace / inviteUser
  handlers (console.warn + TODO) until the flows ship. Manage link
  stays a non-navigating label (no v2-workspaces-manage route yet).
  No sub line on any dropdown row (AD-2.5-W1 option A).

Atomic legacy useBreadcrumb retirement (planned since P1):
- Legacy route-meta-driven useBreadcrumb + toBreadcrumbItems +
  BreadcrumbRouteRecord types deleted entirely (only AppTopbar
  consumed it, and that consumption is gone after Fix 2).
- useNavBreadcrumb → useBreadcrumb (single SoT for breadcrumb chain).
- NavBreadcrumbItem → BreadcrumbItem.
- AppBreadcrumb.vue import updated to the new name.
- SidebarNav.vue docstring reference scrubbed to the new name.
- useBreadcrumb.spec.ts: 10 legacy toBreadcrumbItems specs removed;
  4 walkNavTree specs retained.

AppTopbar.spec.ts:
- vue-router mock simplified (route.matched no longer relevant).
- AppBreadcrumb stubbed in #start; legacy command-vs-route assertion
  removed; new spec verifies AppBreadcrumb is rendered.

WorkspaceSwitcher.spec.ts: 5 new dropdown specs (header / row count /
current-row checkmark / footer buttons / no-sub on rows).

Suite delta: 557 → 552 (−5 net: −10 legacy toBreadcrumbItems specs,
+5 Fix 5 dropdown specs, −1 obsolete AppTopbar breadcrumb-model spec,
+1 new AppTopbar AppBreadcrumb-presence spec).

vue-tsc clean. Scoped ESLint clean (0 errors). All 3 re-grep checks
returned 0 hits (useNavBreadcrumb/NavBreadcrumbItem, topbar brand
selectors, standalone "sub" identifier in WorkspaceSwitcher — only
documentation comments referencing the no-sub state remain, which
describe absence by design).

Manual smoke skipped (Auto Mode); coverage from the post-edit specs
includes AppBreadcrumb-in-#start, dropdown structure, and trigger
no-sub. Recommend Bert run `pnpm --filter crewli-app dev` and verify
the 6 checks listed in the prompt before merging.

Known divergence from crewli-starter (accepted):
- Dropdown rows are ~16px shorter than crewli-starter (no sub line).
  Tracked as WORKSPACE-DROPDOWN-SUB-CONTENT for a future RFC with
  the required backend scope (organisations.type enum + metrics).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-20 20:22:33 +02:00
bert.hausmans
864cc558e2 feat(layout): Plan 2.5 P4 — WorkspaceSwitcher no-sub + SidebarNav APP_NAVIGATION 
Per RFC-WS-PRIMEVUE-PLAN-2-5 §4 AD-2.5-W1 and AD-2.5-B1, §5.4 Fix 4.

Changes:
- WorkspaceSwitcher: sub field removed from template, WorkspaceDisplay
  type, and buildDisplay derivation. Stories did not carry sub args
  (auto-derived from seeded org.role); no WithSub story existed. New
  regression spec (WorkspaceSwitcher.spec.ts) locks the no-sub render.
- SidebarNav: now consumes APP_NAVIGATION from src/config/navigation.ts
  as the single source of truth (shared with breadcrumb derivation in
  useNavBreadcrumb). The groups: V2NavGroup[] prop is removed; render
  walks top-level NavItems (branch nodes render label-heading + children;
  leaf nodes render as rows; items without routeName render as
  non-clickable dormant placeholders). Previous nav data source:
  groups prop fed by useV2Nav(orgNavItems) in OrganizerLayoutV2.
- APP_NAVIGATION expanded with 7 entries to preserve visual sidebar
  continuity (Evenementen at top-level + Beheer branch with 5 children).
  All new entries use routeName: undefined until the corresponding v2
  page lands (TODOs noted per entry); only Dashboard maps to v2-dashboard.
- AppSidebar: groups prop removed; passes only :collapsed to SidebarNav.
- OrganizerLayoutV2: useV2Nav(orgNavItems) plumbing retired; the layout
  now renders <AppSidebar /> with no nav-data wiring.
- Tests: AppSidebar.spec drops the "passes groups prop to SidebarNav"
  assertion; OrganizerLayoutV2.spec drops the "forwards orgNavItems"
  assertion. New WorkspaceSwitcher no-sub regression spec (+2 tests).
- Storybook: SidebarNav.stories and AppSidebar.stories updated to no
  longer thread navFixture/groups; WithActiveItem pushes v2-dashboard.

Position of WorkspaceSwitcher (Fix 3), workspace dropdown panel (Fix 5),
and AppBreadcrumb wiring (Fix 2) remain unchanged in P4 — both lands in
P5. The legacy useBreadcrumb composable also remains untouched until P5
(atomic with AppTopbar refactor).

Orphans flagged for follow-up cleanup (intentionally not deleted in P4):
useV2Nav composable + spec, V2NavGroup/V2NavItem types, sidebarNavActive
helper + spec, navFixture in stories/v2/_helpers.ts.

Suite delta: 575 → 575 (+2 WorkspaceSwitcher no-sub spec, -1 AppSidebar
groups-prop assertion, -1 OrganizerLayoutV2 groups-forward assertion).
vue-tsc clean. Scoped ESLint clean (0 errors).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
 2026-05-20 18:14:31 +02:00
bert.hausmans
d479d35881 fix(gui-v2): WorkspaceSwitcher review nits (Tailwind grid, scoped-CSS trim, a11y button, initials guard) 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-16 19:58:30 +02:00
bert.hausmans
3720e8c3d3 feat(gui-v2): port WorkspaceSwitcher to TypeScript 
Ports crewli-starter WorkspaceSwitcher into the Crewli SPA as production
TypeScript: PrimeVue Popover replaces the manual click-outside listener,
data is derived from useAuthStore/useOrganisationStore (no new store), gradient
pairs are deterministic via a new pure util with full Vitest coverage.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
 2026-05-16 19:48:50 +02:00