cleanup phases 6

archive/post-phase/ui/ui-phase-2-shells-and-navigation.md

@@ -0,0 +1,296 @@
+# UI Phase 2 — Shells & navigation
+
+> **Mission:** replace the starter chrome with per-actor shells — consumer-app chrome for customers, a
+> workspace for nurses, a dense console for admin/partner — and fix the navigation-correctness defects the
+> audit verified: the sidebar active state that never fires, the middleware redirect hop on every sidebar
+> click, the fragile RTL anchoring, and the desktop SSR mobile-first flash. Phases 0–1 gave the app a design
+> language and primitives; this phase is where every actor finally gets chrome that *looks like Balinyaar and
+> navigates correctly*. **This phase owns `client/src/layout/`.**
+>
+> **Track:** frontend · **Depends on:** [Phase 0](ui-phase-0-design-language.md),
+> [Phase 1](ui-phase-1-primitives-and-states.md) · **Unlocks:** every actor gets branded, correct chrome —
+> the area redesigns (phases 3–11) compose inside these shells
+> **Before you start, read [../../phases/_shared/agent-operating-rules.md](../../phases/_shared/agent-operating-rules.md) and invoke the frontend-designer skill — both are mandatory.**
+
+## 1. Context — where this sits
+
+The feature layer is disciplined, but the chrome around it is the untouched react-starter-kit. Diagnosed
+current state (all verified in code):
+
+1. **The sidebar active highlight never fires.** `SideBarNavItem.tsx:28` compares
+   `pathname.startsWith(path)` where `pathname` (from `next/navigation`) is locale-prefixed
+   (`/fa/nurse/requests`) and `path` is unprefixed (`/nurse/requests`) — `defineRouting` uses
+   `localePrefix: 'always'`, so the comparison always fails. Nurse/admin/partner users get zero "where am I"
+   signal. `AppLink`'s `activeClassName` (`AppLinkNextNavigation.tsx:95`, `pathname == currentPath`) has the
+   same bug.
+2. **Three locale strategies coexist in the chrome.** Sidebar links push unprefixed hrefs through raw
+   `next/link` (`SideBarNavItem.tsx:34` via `AppLink`) — a middleware redirect hop on every click and a
+   locale-flip risk for `/en` users; `BottomBar.tsx:14` and `NotificationBell` manually prefix with
+   `/${locale}`; `CustomerLayout.tsx:52` does the same inline. There is no `createNavigation` wrapper —
+   `src/i18n/` holds only `routing.ts` + `request.ts`.
+3. **The chrome is starter junk on a trust-first product.** `PublicLayout.tsx:9` titles the login screen
+   `'Unauthorized - Balinyaar'` in English; `SideBar.tsx:56` renders `<UserInfo showAvatar />` with no user —
+   an eternal English "Current User" / "Loading..." (`UserInfo.tsx:34-36`, prop typed `user?: any`);
+   `TopBarAndSideBarLayout.tsx:71` tooltips `'Open Sidebar'`; `SideBar.tsx:76` says `'Logout Current User'`.
+4. **Structural defects:** `SERVER_SIDE_MOBILE_FIRST = true` (`hooks/layout.ts:8`) makes every desktop SSR
+   paint the mobile shell, then content jumps 240px after hydration; content offset uses physical
+   `paddingLeft/Right` keyed to anchor strings (`TopBarAndSideBarLayout.tsx:53-60`) — RTL correctness by
+   double-flip coincidence; the drawer-close handler sits on the whole content `Stack` (`SideBar.tsx:52`) so
+   any tap inside closes it; `BottomBar` has no safe-area padding and renders unconditionally on desktop
+   (`CustomerLayout.tsx:81`); the customer shell has **no sign-out, no back affordance, no contextual
+   title**; no shell has a locale switcher or an actor switcher for dual-role sessions.
+
+**What already exists (do not rebuild):**
+
+- **[Phase 0](ui-phase-0-design-language.md):** the brand mark (registered as `logo`), the
+  `theme.components` pass (AppBar/Drawer/ListItemButton/BottomNavigation already restyled), the single icon
+  family incl. a direction-aware back chevron, elevation/motion/focus tokens.
+- **[Phase 1](ui-phase-1-primitives-and-states.md):** PageHeader, state views, route-level
+  `loading.tsx`/`error.tsx`/`not-found.tsx`, per-route metadata, formatting utils.
+- **RoleGuard + role hydration** (refinement phase 2): `RoleGuard` wraps all four shells with
+  resolved-vs-pending `/me` hydration, error recovery, and mismatch redirects. Chrome only here — never touch it.
+- **The per-actor shell split:** `CustomerLayout` / `NurseLayout` / `AdminLayout` / `PartnerLayout` mapped
+  1:1 to route groups. Restyle and restructure the chrome *inside* this architecture; keep the split.
+- **`BottomBar`'s longest-prefix active matching** (`BottomBar.tsx:31-41`) — the one nav component that
+  matches correctly today. Keep its semantics; generalize them.
+- **Performance-conscious composition:** `DarkModeToggleButton`/`DarkModeFormSwitch` are the only
+  `useColorScheme` subscribers; `NotificationBell` isolates the polling unread count. Shells never re-render
+  on theme flips or bell updates — preserve this.
+- **`AdminLayout`'s capability-gated nav** via `useAdminCapabilities()` (`AdminLayout.tsx:21-37`).
+
+## 2. Required reading (do this first)
+
+- [audit/shell-and-navigation.md](audit/shell-and-navigation.md) — the full 20-problem inventory with
+  file/line evidence and the keep-list. This is your problem spec.
+- [audit/cross-cutting-ux.md](audit/cross-cutting-ux.md) — the chrome-adjacent items (English chrome
+  strings, `UserInfo`, `hooks/layout.ts`, metadata) and its keep-list.
+- The `frontend-designer` skill (`.claude/skills/frontend-designer/SKILL.md`) — the design contract; phase 0
+  will have updated it with the new tokens/icons.
+- Code, in this order: `client/src/layout/` (all files — you own this folder), `client/src/i18n/routing.ts`,
+  `client/src/components/common/AppLink/`, `client/src/components/UserInfo/UserInfo.tsx` (you will delete
+  it), `client/src/components/auth/RoleGuard.tsx` (do not touch — know why), `client/src/hooks/layout.ts`,
+  `client/src/hooks/auth.ts` (`useActorRole`, `useAdminCapabilities`), `client/src/context/auth/types.ts`
+  (`SessionUser.roles` — feeds the actor switcher), `client/src/constants/routes.ts`,
+  `client/src/components/TrustBadge/`, `client/src/services/profiles/` + `client/src/services/auth/hooks/useMe.ts`
+  (feed the identity card), `client/src/components/notifications/NotificationBell.tsx`.
+- `client/CLAUDE.md` — "Golden rules", "Direction (RTL/LTR)", the theme system, and the Project Structure
+  layout section you must update at close.
+- next-intl v4 docs for `createNavigation` (routing-aware `Link`/`usePathname`/`useRouter`/`redirect`).
+
+## 3. Scope — build this
+
+### 3.1 Locale-aware navigation — one wrapper, two bugs fixed
+
+Create **`src/i18n/navigation.ts`**: `createNavigation(routing)` from `next-intl/navigation`, exporting
+`Link`, `usePathname`, `useRouter`, `redirect`, `getPathname`. Then route **all chrome navigation** through it:
+
+- `SideBarNavItem` / `SideBarNavList`: link via the new `Link`; compute active state against the new
+  `usePathname()` (which strips the locale prefix, so unprefixed `ROUTES.*` compare directly). This makes the
+  active highlight fire for the first time **and** removes the middleware redirect hop + locale-flip risk in
+  one move.
+- Active matching must be **longest-prefix winner-takes-all** (the `BottomBar` semantics): extract a small
+  shared helper (e.g. `src/layout/matchActivePath.ts`, unit-tested) used by both the sidebar and the bottom
+  bars — plain `startsWith` would keep `/nurse` (dashboard) lit on every nurse route.
+- `BottomBar`: drop the manual `withLocale` prefixing in favor of the wrapper's router; keep its matching via
+  the shared helper.
+- `AppLink`'s `activeClassName` comparison, `NotificationBell`'s `router.push`, and `CustomerLayout`'s inline
+  `` `/${locale}${…}` `` all migrate to the wrapper. After this, `grep -r '/${locale}' src/` inside chrome
+  code should return nothing.
+
+### 3.2 Customer shell — contextual header + deliberate desktop
+
+Rework `CustomerLayout`:
+
+- **Contextual header.** On the 5 root tabs (`/`, `/bookings`, `/patients`, `/wallet`, `/profile` — the
+  `(customer)` group has no URL segment): the phase-0 **brand lockup** (mark + wordmark). On pushed routes
+  (nurse profile, booking detail, checkout, ticket thread…): **page title + back chevron** (the phase-0
+  auto-mirrored icon) that calls `router.back()`. Drive it with a route→title map in `src/layout/`
+  (longest-prefix over `ROUTES.*`, titles from the existing `nav`/`shell` namespaces) plus a lightweight
+  per-page override slot (React context) for dynamic titles — the area phases (4–6, 9) will feed nurse/booking
+  names into it later; ship static titles now. **Kill the static «اپلیکیشن خانواده» label**
+  (`tShell('customer_app')` today).
+- Keep the support entry, `NotificationBell`, and dark toggle in the header (badge/popover upgrades belong to
+  phase 10 — leave slots, don't build them).
+- **BottomBar:** add `paddingBottom: 'env(safe-area-inset-bottom)'` on the Paper (the home-indicator overlap
+  is on the primary mobile nav); refine the active state on top of the phase-0 BottomNavigation override
+  (selected color + label weight — tokens, not hexes).
+- **Desktop treatment — decide and implement deliberately.** Recommended: a constrained app frame — the
+  content column keeps `CONTENT_MAX_WIDTH`, gains side gutters on a `background.default` canvas — and above
+  the `md` breakpoint **hide the mobile tab bar** in favor of a top-nav variant (the same 5 items as inline
+  header tabs). Implement with CSS breakpoints (`sx` `display` keys), not `useIsMobile` branching (see 3.6).
+
+### 3.3 Nurse shell — a workspace, not a starter drawer
+
+Rework `NurseLayout` (still on the shared engine, which you are also refitting in 3.6):
+
+- **Grouped sidebar** with subheaders + dividers, replacing the flat 10-item array (`NurseLayout.tsx:19-33`):
+  **امروز** (dashboard, requests, visits) · **حرفهٔ من** (services, coverage, verification) · **مالی**
+  (earnings, bank) · **پشتیبانی** (support). Extend the nav-item model with a group key; the engine renders
+  `ListSubheader`-style sections. Group labels are i18n keys in both catalogs.
+- **A real identity card:** new typed **`ProfileSummary`** shared component
+  (`src/components/ProfileSummary/`, co-located test): avatar, display name, masked phone in Persian digits,
+  role label, and `TrustBadge` when the actor is a nurse. Feed it from the `/me` session (`useMe` — phone,
+  roles) plus the profiles domain for name/avatar where hydrated; render graceful skeleton/fallback states —
+  never English literals. **DELETE `src/components/UserInfo/`** (the starter `user?: any` card) and every
+  import/test of it.
+- **Mobile: a 5-tab nurse bottom nav** so field nurses stop digging through a drawer: امروز (dashboard) ·
+  درخواست‌ها · ویزیت‌ها · درآمد · بیشتر — «بیشتر» opens the drawer with the remaining items (profile,
+  services, coverage, bank, verification, support, sign-out). Reuse `BottomBar`.
+- **TopBar shows the current page title** via the same route→title engine as 3.2 (kill the static «نمای
+  پرستار»).
+
+### 3.4 Admin + partner shells — a dense console
+
+- **Slim top bar:** current page title (route→title map) as a start-anchored breadcrumb-style label — not the
+  centered static console name — plus a **bell** (widen `NotificationBell`'s `role` union to include
+  `'admin'`; the `/admin/notifications` center already exists — note this minimal foundation extension in
+  your report) and an **identity chip** (`ProfileSummary` compact variant or a chip: name/phone + the
+  fine-grained role label off `roleCodes` — a `finance` admin should *see* they're finance).
+- **Sectioned sidebar** with the now-working active state: **اعتماد** (verification, reviews) · **مالی**
+  (payouts; refunds are worked *via tickets* — do not invent a refunds nav item) · **پشتیبانی** (tickets,
+  alerts) · **سیستم** (config, holidays, audit, roles, partners, users). Add the missing `/admin/users` entry
+  (`ROUTES.ADMIN_USERS` exists; gate it like roles on `caps.canManageRoles` — display convenience, server is
+  the authority). The notifications sidebar item is replaced by the header bell. **Keep every
+  `useAdminCapabilities` gate exactly as is** — grouping must not change what a role sees.
+- **Partner shell:** same engine + its own 4-item nav; identity area shows the **center name** from
+  `useMyPartnerCenter` (fallback skeleton while resolving — the page-level access-denied handling stays where
+  it is).
+
+### 3.5 Public shell — strip it to a brand frame
+
+`PublicLayout` today wraps login in starter dashboard chrome: the hard-coded English `'Unauthorized -
+Balinyaar'` title (`PublicLayout.tsx:9`), a pencil button opening a drawer containing only a dark-mode
+switch, and an **empty** `BottomBar` strip on mobile (`PublicLayout.tsx:34`, `BOTTOM_BAR_ITEMS = []`).
+Replace it with a minimal centered brand shell: the phase-0 logo, a locale switcher, and the dark toggle — no
+sidebar, no bottom bar, no `TopBarAndSideBarLayout`. Delete the dead `BOTTOM_BAR_DESKTOP_VISIBLE` flag from
+`layout/config.ts` with it. (The login screen itself — hero, trust presence — is **DEFERRED → phase 3**.)
+
+### 3.6 Cross-cutting engine fixes (`TopBarAndSideBarLayout` + `SideBar` + `TopBar`)
+
+- **Drawer close scoping:** move the close handler off the content `Stack` (`SideBar.tsx:52`) onto the nav
+  links themselves — toggling dark mode or mis-tapping a divider must not close the drawer.
+- **Kill the desktop SSR flash:** stop deriving shell *structure* from `useIsMobile`
+  (`SERVER_SIDE_MOBILE_FIRST` renders the mobile shell, then jumps 240px). Render responsively with CSS:
+  breakpoint-keyed `sx` values (paddings, drawer variant/visibility via `display`) so the desktop first paint
+  already includes the persistent sidebar. `hooks/layout.ts` stays for non-structural consumers; the shells
+  stop depending on it for layout.
+- **Logical properties:** replace the physical `paddingLeft/Right` + `anchor?.includes('left')` logic
+  (`TopBarAndSideBarLayout.tsx:53-60, 89-91`) with `paddingInlineStart` / start-anchored drawer semantics —
+  RTL correctness by construction, not by the stylis double-flip coincidence.
+- **Chrome strings → both catalogs:** `'Open Sidebar'` (`TopBarAndSideBarLayout.tsx:71`), `'Logout Current
+  User'` (`SideBar.tsx:76`); the `UserInfo` literals die with the component. Zero English chrome remains on `/fa`.
+- **TopBar:** fix the `whiteSpace: 'nowrap'` overflow risk (ellipsis + `minWidth: 0`); delete the starter
+  comment residue (`TopBar.tsx:20`); title alignment becomes start-anchored for the console shells per 3.4.
+- **`layout/config.ts`:** delete the commented-out anchor alternates (lines 8-9) and dead flags; keep the
+  constants authoritative — update them, never bypass them.
+
+### 3.7 Session affordances — sign-out, actor switch, locale switch
+
+- **Sign-out reachable in EVERY shell.** The customer shell currently has **none** — add a sign-out row to
+  the profile-tab hub (`/profile`) now (the full hub redesign is **DEFERRED → phase 9**; one labeled row, not
+  a redesign). Sidebar shells keep sign-out in the drawer footer — now labeled and translated.
+- **Actor switcher for dual-role sessions:** `SessionUser.roles` already lives in AuthContext. When a session
+  holds both `customer` and `nurse`, show «نمای پرستار ⇄ اپلیکیشن خانواده» in the nurse sidebar and on the
+  customer profile hub. Navigation only — `RoleGuard` and `resolveRoleDestination` stay the "which app"
+  authority.
+- **Locale switcher (fa/en) in all shells** (sidebar footer / customer profile hub / public shell): switch
+  locale **preserving the current path** via the 3.1 wrapper (`router.replace(pathname, { locale })`).
+- **Keep `DarkModeToggleButton`/`DarkModeFormSwitch` as the only `useColorScheme` subscribers** — the
+  switchers must not add scheme subscriptions to the shells.
+
+## 4. Mocks & seams in this phase
+
+**None introduced.** This phase is chrome over data that already flows (`useMe`, profiles,
+`useMyPartnerCenter`, the notifications unread count) behind the existing `services/{domain}` seams — UI
+stays mock-tolerant regardless of each domain's mock flag. **REQ posture:** if a backend gap surfaces (the
+likely one: `/me` lacking a display name for `ProfileSummary`, forcing a second profile fetch per shell),
+append a REQ to
+[../../shared-working-context/frontend/requests/for-backend.md](../../shared-working-context/frontend/requests/for-backend.md)
+— REQ-001…038 are taken; number from **REQ-039**. Never edit `server/`.
+
+## 5. Critical rules you must not get wrong
+
+1. **RoleGuard and role/redirect logic untouched.** Refinement phase 2 built resolved-vs-pending hydration;
+   this phase is chrome, not security or routing policy. The actor switcher navigates; it never re-derives roles.
+2. **`useAdminCapabilities` gating stays exactly as is** — sectioning the admin nav must not add, remove, or
+   loosen a single capability gate.
+3. **Do not regress the keep-lists** ([audit](audit/shell-and-navigation.md)): the root `[locale]` layout
+   (lang/dir, conditional Mikhak, cookie-seeded scheme, RTL Emotion cache) is untouchable; the per-actor
+   shell split stays; the customer 5-tab IA (Home/Bookings/Patients/Wallet/Profile) stays; longest-prefix
+   active matching stays; `DarkModeButton` remains the sole `useColorScheme` subscriber; `NotificationBell`
+   keeps isolating the poll; `CONTENT_MAX_WIDTH` reading column stays for text-heavy views;
+   `ErrorBoundary` keeps wrapping every shell's main content.
+4. **Design contract non-negotiables:** every new string in **both** `en.json`/`fa.json` (fa is the product's
+   voice — write it first); tokens/palette keys, never hexes; logical/RTL-safe props only (this phase exists
+   partly to *remove* physical ones — do not add new ones); verify dark mode on every surface you touch;
+   MUI v9 API only (no `useFlexGap`/`flexWrap` as Stack props); new shared components (`ProfileSummary`, the
+   active-path helper, any header context) get co-located tests.
+5. **Fetch/cookies/provider rules untouched:** no raw `fetch`, no `document.cookie`, no layout above
+   `[locale]`, no `createTheme()` in components. `ProfileSummary` consumes existing hooks — it does not add
+   API calls of its own design.
+6. **Deleting `UserInfo` is a removal, not a rename** — check `src/**/*.test.{ts,tsx}` and the
+   `@/components` barrel for imports, and update the frontend-designer skill's component table (it lists
+   `UserInfo`) to point at `ProfileSummary`.
+
+## 6. Definition of Done
+
+On top of the shared [definition-of-done.md](../../phases/_shared/definition-of-done.md):
+
+- [ ] `npm run check` green; `npm run test:ci` green (new tests for `ProfileSummary`, the active-path
+      helper, and any touched shared component); `en.json`/`fa.json` in sync.
+- [ ] `src/i18n/navigation.ts` exists and **all** chrome navigation flows through it — no raw `next/link`
+      and no manual `/${locale}` prefixing left in `src/layout/` or chrome components.
+- [ ] The sidebar highlights the active item on every nurse/admin/partner route (first time ever), and
+      clicking a sidebar link produces **one** navigation in the Network tab — no 307 middleware hop, no
+      locale flip on `/en`.
+- [ ] Customer shell: brand lockup on the 5 root tabs; title + mirrored back chevron on pushed routes;
+      safe-area padding on the bottom bar; on ≥`md` the mobile tab bar is hidden in favor of the desktop
+      treatment.
+- [ ] Nurse shell: grouped sidebar (امروز/حرفهٔ من/مالی/پشتیبانی), `ProfileSummary` identity card with
+      TrustBadge, 5-tab mobile bottom nav; `UserInfo` deleted repo-wide.
+- [ ] Admin/partner shells: sectioned capability-gated sidebar, page-title top bar, bell + identity chip
+      (admin), center-name identity (partner).
+- [ ] Public shell: no English title, no pencil, no empty drawer or bottom strip — logo + locale switcher +
+      dark toggle only.
+- [ ] Desktop first paint of a sidebar shell includes the persistent sidebar — no 240px post-hydration jump
+      (verify with a hard reload, network throttled).
+- [ ] Sign-out is reachable in all four shells; a dual-role session sees the actor switcher; every shell has
+      a locale switcher that preserves the current path.
+- [ ] Visual verification on the four axes — `/fa` + `/en` × light + dark — and mobile + desktop for every
+      shell (fa first).
+
+## 7. How to test (what a human can verify after this phase)
+
+1. Log in as the seeded nurse → `/nurse`. The sidebar shows four labeled groups and your name/phone/TrustBadge
+   — not "Current User". Click «ویزیت‌ها»: the item highlights, the top bar reads the page title, and the
+   Network tab shows a single navigation (no 307).
+2. Resize to mobile (or open devtools device mode): the nurse shell shows a 5-tab bottom nav; tab «بیشتر»
+   opens the drawer; toggling dark mode inside the drawer does **not** close it; tapping a nav link does.
+3. As a customer on `/`: the header shows the brand lockup. Open a nurse profile from search → the header
+   flips to title + back chevron; the chevron returns to results. On `/en` the chevron mirrors correctly.
+4. On desktop ≥900px as a customer: no mobile tab bar pinned to the bottom; the desktop nav variant is
+   present; content sits in the framed column.
+5. Go to `/profile` as a customer: a sign-out row exists and works. With a dual customer+nurse session, the
+   actor switcher appears here and in the nurse sidebar, and lands on the other shell (RoleGuard permitting).
+6. Log in as the seeded admin: top bar shows the page title, the bell, and your role chip (e.g. «مالی» for a
+   finance admin); the sidebar is sectioned and still shows only capability-permitted consoles. As the
+   finance-only admin, confirm no new items appeared.
+7. Open `/login` logged-out on `/fa`: no English anywhere, no drawer, no bottom strip — brand mark, locale
+   switcher, dark toggle.
+8. Hard-reload `/nurse` on desktop: the sidebar is present at first paint; no sideways content jump.
+9. Switch locale from any shell's switcher on a deep route (e.g. `/fa/nurse/earnings`): you land on
+   `/en/nurse/earnings`, same page.
+
+## 8. Hand off & document (close the phase)
+
+- Update **`client/CLAUDE.md` → Project Structure**: the `layout/` section (new shell composition,
+  route→title map, removed starter engine parts), `i18n/navigation.ts`, `components/ProfileSummary/`, and
+  the `UserInfo` deletion. Update the frontend-designer skill's §4 component table (`UserInfo` →
+  `ProfileSummary`) and §5 layout description if shell variants changed.
+- Write the report at `dev/shared-working-context/reports/ui-phase-2-report.md`: what changed per shell, the
+  navigation-wrapper migration list, the desktop-treatment decision you made, any foundation files you
+  extended minimally (e.g. `NotificationBell` role union), and screenshots/notes from the four-axes check.
+- List any REQs filed (REQ-039+) with one-line rationales; "none" is an acceptable outcome.
+- Save a memory note per operating-rules §8: the shells are now the branded per-actor chrome, chrome
+  navigation is `createNavigation`-based (active state + no redirect hop), `UserInfo` is gone, and
+  phases 3–11 must route new chrome strings/titles through the route→title map rather than static labels.