Menu Navigation Tables Implementation Plan

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

Goal: Expose menus, sections, and items as three full-width route destinations with URL-backed selection.

Architecture: Keep the menu editor exclusively for a single menu's metadata, domains, and publications. Reuse the existing table CRUD/reorder component behind two new route screens; a pure navigation view-model validates URL selection and constructs routes so query state remains compatible across direct links and changing selects.

Tech Stack: Next.js 16 App Router, React 19, Ant Design, next-intl, Vitest.

Global Constraints

• Do not modify API contracts or run migrations.
• Keep stale-response guards around menu/item loads and mutations.
• Do not commit to staging; work is prepared on feat/menu-navigation-tables for a PR.
• Preserve inline CRUD, permissions, error/loading states, and drag sorting.

---

Task 1: URL selection model and navigation regression tests

Files:

• Create: apps/web/ui/app/menus/menuNavigationView.ts

• Create: apps/web/ui/app/menus/menuNavigationView.test.ts

• [ ] Write tests proving menuId and sectionId are read from route queries, a menu switch removes sectionId, and a section outside the selected menu is rejected.

• [ ] Run the focused test and observe it fail because the selection helper does not exist.

• [ ] Implement pure selection and URL builders without React state.

• [ ] Re-run the focused test green.

Task 2: Route-specific table screens

Files:

• Create: apps/web/ui/app/menus/MenuNavigationTablesScreen.tsx

• Create: apps/web/app/[locale]/app/menus/sections/page.tsx

• Create: apps/web/app/[locale]/app/menus/items/page.tsx

• Modify: apps/web/ui/app/menus/MenuManagementTables.tsx

• Test: apps/web/ui/app/menus/MenuManagementTables.test.tsx

• [ ] Write component tests for a menu-to-sections action and a section-to-items action.

• [ ] Run the focused test and observe the missing action failure.

• [ ] Render exactly one table per selected route, with compact selects above sections/items and the existing mutation/reorder behavior.

• [ ] Keep response generation checks when loading items after a menu selection changes.

• [ ] Re-run the focused test green.

Task 3: Navigation, editor boundary, and translations

Files:

• Modify: apps/web/ui/app/AppShell.tsx

• Modify: apps/web/ui/app/menus/MenusScreen.tsx

• Modify: apps/web/ui/app/menus/MenuEditorScreen.tsx

• Modify: apps/web/ui/app/menus/MenuEditorScreen.test.tsx

• Modify: apps/web/messages/{ru,en,sr}.json

• [ ] Write tests that assert navigation targets /app/menus/sections?menuId=... and the editor no longer exposes table management.

• [ ] Run focused tests red.

• [ ] Make Menus a three-child route group, point row actions at the sections route, and retain the editor for its own controls only.

• [ ] Add localized route/select/action labels and run focused tests green.

Task 4: Verification

• [ ] Run focused web tests, web typecheck, lint, formatting check, and a browser smoke of all three routes.
• [ ] Inspect the final diff against every requirement in docs/superpowers/specs/2026-08-16-menu-navigation-tables-design.md.