The plan was delivered as wp-suite-implementation-spec.zip and lived only in Downloads, so every "read CLAUDE.md first" instruction in it pointed at a file the repo did not have. Bring it in unchanged: CLAUDE.md, IMPLEMENTATION.md, and docs/waves/wave-0 through wave-9 plus backlog.md. UX-REVIEW-2026-08-14.md is committed alongside it. It is the review that produced F1-F6, S1-S13 and the A/B/C assessments, and item IDs throughout the wave files cite it, so it belongs under version control rather than sitting untracked in the working tree. No application code changes here. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
109 lines
4.6 KiB
Markdown
109 lines
4.6 KiB
Markdown
# Wave 2 — Drawer everywhere, flat strip deleted
|
|
|
|
**Items:** `B1`, `B2`, `S4`, `F2` (full)
|
|
**Depends on:** wave 1 merged
|
|
**Why here:** this settles global navigation before anything else is redrawn, and it resolves
|
|
the 390px collapse properly.
|
|
|
|
**The correction that defines this wave.** The proposed UX change list called for building a
|
|
new avatar menu to collapse the eight-item nav. Do not build it. The app already has a
|
|
drawer that holds the entire nav, and the review's judgment was that it is the best chrome in
|
|
the app. It ships on 3 of 6 pages while a flat strip duplicates it. Shipping the existing
|
|
drawer everywhere and deleting the strip is less work than building the menu, and it fixes
|
|
`F2` as a side effect.
|
|
|
|
---
|
|
|
|
### T2.1 — Extract the drawer into a shared component
|
|
|
|
- **Items:** `B1` part 1
|
|
- **Depends on:** T1.1
|
|
- **Blocks:** T2.2
|
|
- **Surface:** `html/`
|
|
- **Files:** the drawer markup/styles/script currently used by admin, field view and directory
|
|
|
|
**Do:** Lift the drawer into one shared implementation the pages include, rather than three
|
|
near-copies. Keep its current behavior and appearance — this is extraction, not redesign.
|
|
Where the three copies differ, take the admin version unless the PR explains otherwise.
|
|
|
|
**Do not:** change the drawer's visual design, its animation, or its contents in this task.
|
|
|
|
**Done when:**
|
|
|
|
- [ ] one drawer implementation exists; no page defines its own
|
|
- [ ] admin, field view and directory look and behave identically to the wave 0 baseline
|
|
- [ ] screenshot diff against baseline for those three pages is empty at both widths
|
|
- [ ] the drawer reads active-project state from the single source established in `T1.1`
|
|
|
|
---
|
|
|
|
### T2.2 — Mount the drawer on all six pages and delete the flat strip
|
|
|
|
- **Items:** `B1` part 2, `S4`, `F2` full
|
|
- **Depends on:** T2.1
|
|
- **Blocks:** T5.1, T7.2
|
|
- **Surface:** `html/`
|
|
- **Files:** all 6 pages, the flat nav strip markup and styles
|
|
|
|
**Problem:** The SOP wizard has its own header and no drawer. The creator has neither. These
|
|
are the two pages people actually live in, so global nav is missing exactly where it is most
|
|
needed (`S4`).
|
|
|
|
**Do:** Mount the shared drawer on all six pages, including the SOP wizard and the creator.
|
|
Delete the flat nav strip and its styles entirely. Reconcile the SOP wizard's bespoke header
|
|
against the shared chrome — the wizard keeps its step context, it does not keep its own
|
|
global nav.
|
|
|
|
Unify the brand treatment while you are here: the creator uses a mono wordmark and everything
|
|
else uses a logo chip. Pick the logo chip.
|
|
|
|
**Do not:** leave the flat strip in place behind a media query "just in case". Delete it. Its
|
|
existence is what produced the duplication.
|
|
|
|
**Done when:**
|
|
|
|
- [ ] all 6 pages render the same drawer with the same contents
|
|
- [ ] the flat nav strip is deleted; grep confirms no remaining references
|
|
- [ ] at 390px on every page, no nav control is clipped and every destination is reachable
|
|
- [ ] Field View at 390px passes with tap targets of at least 44px
|
|
- [ ] the creator and the SOP wizard show the same brand treatment as the other four pages
|
|
- [ ] the interim fix from `T1.2` is removed rather than layered on top
|
|
|
|
---
|
|
|
|
### T2.3 — B2: Project switcher truncation and breakpoints
|
|
|
|
- **Items:** `B2`
|
|
- **Depends on:** T2.2
|
|
- **Blocks:** nothing
|
|
- **Surface:** `html/`
|
|
- **Files:** app bar / drawer header styles
|
|
|
|
**Problem:** "Micron EUV Cleanroom Enable 2667008" does not fit 280px, and existing rules
|
|
narrow the switcher to 150px below 900px. This needs a breakpoint plan, not a width bump.
|
|
|
|
**Do:** Decide what the switcher shows at each breakpoint and implement that. A workable
|
|
plan: full name where it fits, project code alone at narrow widths, full name always
|
|
available in the drawer or on hover/focus. Whatever you choose, write it into
|
|
`docs/reference/file-map.md` so it is not re-litigated.
|
|
|
|
**Do not:** apply a plain ellipsis at every width. A project name truncated to "Micron EUV
|
|
Clean..." on the page where someone confirms which project they are in is the failure this
|
|
item exists to prevent.
|
|
|
|
**Done when:**
|
|
|
|
- [ ] the active project is identifiable at 390px, 768px, 1024px and 1440px
|
|
- [ ] the full name is reachable at every width by some means, and that means is documented
|
|
- [ ] correctness from `T1.1` is preserved — the switcher never reads "Select a project" while a project is active
|
|
- [ ] tested with the longest real project name
|
|
|
|
---
|
|
|
|
## Wave 2 exit criteria
|
|
|
|
- [ ] one drawer, six pages, no flat strip
|
|
- [ ] `F2` resolved for real; the `T1.2` interim is gone
|
|
- [ ] `S4` closed: global nav exists on the SOP wizard and the creator
|
|
- [ ] no visual regression on admin, field view or directory versus baseline
|