bert.hausmans
a9c5746e12
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>
Crewli — Organizer SPA
Main product UI for organisation and event staff (Vue 3 + Vuexy + Vuetify). Lives in this repo; only re-copy from Vuexy when upgrading the template.
Setup
- Install dependencies:
pnpm install
- Create
.env.local:
VITE_API_URL=http://localhost:8000/api/v1
VITE_APP_NAME="Crewli Organizer"
- Dev server uses port 5174 (see
vite.config.tsor run from repo root:make app).
pnpm dev --port 5174
Port
Runs on http://localhost:5174
Production: e.g. VITE_API_URL=https://api.crewli.app/api/v1 and host the SPA at https://crewli.app (see api/.env.example for FRONTEND_APP_URL and SANCTUM_STATEFUL_DOMAINS).