user-system/docs/superpowers/plans/2026-05-10-prelaunch-navigation-and-batch-delete.md

Prelaunch Navigation And Batch Delete Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Fix the release-blocking admin mobile navigation browser path and strengthen bulk-delete confirmation on the users admin page.

Architecture: Keep the product changes minimal and local to the admin frontend. Make mobile drawer state transitions explicit in AdminLayout, harden the supported E2E scenario around the real drawer surface, and upgrade UsersPage bulk delete from a lightweight pop confirmation to a stronger modal confirmation without changing backend APIs.

Tech Stack: React 18, Ant Design, React Router, Vitest, Playwright CDP runner.

---

Task 1: Capture the failing browser evidence

Files:

• Modify: none

• Run cd frontend/admin && $env:E2E_SCENARIOS='desktop-mobile-navigation'; npm.cmd run e2e:full:win.

• Record the exact failing step and whether the drawer fails to open, the selector fails to resolve, or navigation fails after selection.

• Do not change product code until the failure mode is confirmed.

Task 2: Add the AdminLayout regression first

Files:

• Modify: frontend/admin/src/layouts/AdminLayout/AdminLayout.test.tsx

• Modify: frontend/admin/src/layouts/AdminLayout/AdminLayout.tsx

• Add a failing test that switches from desktop to mobile, opens the menu, navigates through the drawer, and proves the drawer closes deterministically after selection.

• Run cd frontend/admin && npm.cmd run test:run -- src/layouts/AdminLayout/AdminLayout.test.tsx.

• Confirm the new assertion fails for the current implementation before fixing the layout.

Task 3: Fix mobile drawer state and harden the browser scenario

Files:

• Modify: frontend/admin/src/layouts/AdminLayout/AdminLayout.tsx

• Modify: frontend/admin/scripts/run-playwright-cdp-e2e.mjs

• Replace toggle-based mobile drawer state transitions with explicit open and close handlers.

• Keep desktop collapse behavior unchanged.

• Narrow browser selectors and waits so the scenario checks the intended mobile button and the open drawer content.

• Re-run cd frontend/admin && $env:E2E_SCENARIOS='desktop-mobile-navigation'; npm.cmd run e2e:full:win.

Task 4: Add the UsersPage regression first

Files:

• Modify: frontend/admin/src/pages/admin/UsersPage/UsersPage.test.tsx

• Modify: frontend/admin/src/pages/admin/UsersPage/UsersPage.tsx

• Add a failing test that selects users, triggers bulk delete, verifies no delete happens on the first lightweight action alone, and confirms the API call only occurs after the stronger explicit confirmation.

• Run cd frontend/admin && npm.cmd run test:run -- src/pages/admin/UsersPage/UsersPage.test.tsx.

• Confirm the new assertion fails for the current implementation before changing the page.

Task 5: Implement stronger bulk-delete confirmation

Files:

• Modify: frontend/admin/src/pages/admin/UsersPage/UsersPage.tsx

• Replace the direct Popconfirm bulk-delete path with a stronger confirmation modal flow.

• Keep the existing self-delete guard and empty-selection guard.

• After confirmation, keep existing success behavior: call batchDelete, clear selection, and refresh the list.

• Re-run cd frontend/admin && npm.cmd run test:run -- src/pages/admin/UsersPage/UsersPage.test.tsx.

Task 6: Verify the affected frontend surface

Files:

• Modify: only if verification reveals another real defect

• Run cd frontend/admin && npm.cmd run test:run -- src/layouts/AdminLayout/AdminLayout.test.tsx src/pages/admin/UsersPage/UsersPage.test.tsx.

• Run cd frontend/admin && npm.cmd run lint.

• Run cd frontend/admin && npm.cmd run build.

• Re-run cd frontend/admin && $env:E2E_SCENARIOS='desktop-mobile-navigation'; npm.cmd run e2e:full:win.

• Report the results exactly as observed, including any remaining risk if full-suite E2E is not rerun in this turn.