31 lines
2.0 KiB
Markdown
31 lines
2.0 KiB
Markdown
# Execution Plan: Premium Mega Menu
|
|
|
|
## Step 1: E2E Testing Track (M1)
|
|
- Target: Spawn an E2E testing sub-orchestrator to write requirement-driven E2E tests for the 3-image layout Mega Menu.
|
|
- Verification: Tests cover:
|
|
- Root Image on the left.
|
|
- Column Image inside grid next to/above column title.
|
|
- Hovering links displaying the correct link image on the right.
|
|
- Lazy loading of hover images.
|
|
- Responsive layout (mobile drawer hides complex image layouts gracefully).
|
|
|
|
## Step 2: Database & Backend Updates (M2)
|
|
- Target: Spawn database and backend lead agents to:
|
|
- Add optional `rootImage` to `Menu`, and `columnImage`, `hoverImage` to `MenuItem` in `apps/backend/prisma/schema.prisma`.
|
|
- Create and run migration.
|
|
- Update `packages/types/index.ts` to include the three image fields.
|
|
- Update Elysia route body validation schemas and database saving logic in `apps/backend/src/routes/menus.ts`.
|
|
- Update `apps/mcp-server/menu-tools.ts` and `menu-toolkit.ts` if needed.
|
|
- Verification: Monorepo compiles successfully (`npm run typecheck` and builds pass).
|
|
|
|
## Step 3: Storefront & Admin UI (M3)
|
|
- Target: Spawn frontend lead and Next.js SEO architect agents to:
|
|
- Update the admin builder `apps/admin/src/pages/MenuManagerPage.tsx` to support configuring `rootImage`, `columnImage`, and `hoverImage` inside the tree node editor.
|
|
- Update `apps/spa/src/store/menuStore.ts` and `apps/spa/src/components/DesktopMegaMenu.tsx` / `MobileDrawer.tsx` to use the new fields.
|
|
- Update `apps/website/src/components/navigation/menuTypes.ts` and `apps/website/src/components/navigation/DesktopMegaMenu.tsx` / `MobileDrawer.tsx` to implement the 3-image layout using `next/image` with lazy loading and fade-in animations.
|
|
- Verification: No typecheck errors and UI renders correctly based on configured values.
|
|
|
|
## Step 4: E2E & Adversarial Hardening (M4)
|
|
- Target: Run E2E tests, add white-box/adversarial tests (Phase 2), and run the Forensic Auditor to audit code integrity.
|
|
- Verification: All tests pass, Forensic Auditor gives a CLEAN verdict.
|