Two-Tab Menu Editor 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: Simplify the menu editor to the «Настройки» and «Разделы» tabs.

Architecture: Reuse the existing detail, domains, publications, preview, and MenuManagementTables components. The editor owns only tab visibility: settings groups menu-level controls; sections exposes existing section/item tables; Copilot is removed from the segmented navigation.

Tech Stack: React 19, Next.js, Ant Design 6, Vitest.

Global Constraints

• The only top-level tabs are «Настройки» and «Разделы».
• «Настройки» contains parameters, domains, and publications.
• «Разделы» contains the existing linked sections and selected-section items tables.
• Keep preview responsive and preserve archived/read-only behavior.
• Do not change API contracts or migrate data.

---

Task 1: Two-tab editor layout

Files:

• Modify: apps/web/ui/app/menus/MenuEditorScreen.tsx
• Modify: apps/web/ui/app/menus/MenuEditorScreen.test.tsx or create it when absent
• Modify: apps/web/messages/ru.json
• Modify: apps/web/messages/en.json
• Modify: apps/web/messages/sr.json

Interfaces:

• Consumes existing MenuManagementTables, DomainsPanel, PublicationsPanel, and MenuPreview.

• Produces editorMode: 'settings' | 'sections'.

• [ ] Step 1: Write a failing browser/component test

expect(screen.getByRole('radio', { name: 'Настройки' })).toBeVisible();
expect(screen.getByRole('radio', { name: 'Разделы' })).toBeVisible();
expect(
  screen.queryByRole('radio', { name: 'AI Copilot' }),
).not.toBeInTheDocument();

• [ ] Step 2: Verify it is red

Run: bun --cwd apps/web test ui/app/menus/MenuEditorScreen.test.tsx

Expected: FAIL because the current navigation exposes three modes.

• [ ] Step 3: Implement the two modes

const [editorMode, setEditorMode] = useState<'settings' | 'sections'>(
  'settings',
);

<Segmented
  block
  value={editorMode}
  onChange={(value) => setEditorMode(value as 'settings' | 'sections')}
  options={[
    { label: t('editor.modeSettings'), value: 'settings' },
    { label: t('editor.modeSections'), value: 'sections' },
  ]}
/>;

Render details/domains/publications under settings; render MenuManagementTables under sections. Remove the Copilot import and its mode-specific render branch. Add localized editor.modeSections values.

• [ ] Step 4: Verify it is green

Run: bun --cwd apps/web test ui/app/menus/MenuEditorScreen.test.tsx

Expected: PASS.

• [ ] Step 5: Run regression checks

Run: bun --cwd apps/web typecheck && bun --cwd apps/web lint ui/app/menus/MenuEditorScreen.tsx && bun --cwd apps/web format:check

Expected: exit 0.

• [ ] Step 6: Browser smoke

Open the editor at desktop and mobile widths. Verify settings show parameters/domains/publications; sections show the sections and item tables; no top-level AI Copilot tab is visible; preview remains usable.

• [ ] Step 7: Commit

Run: git add apps/web/ui/app/menus/MenuEditorScreen.tsx apps/web/ui/app/menus/MenuEditorScreen.test.tsx apps/web/messages/ru.json apps/web/messages/en.json apps/web/messages/sr.json && git commit -m "feat(web): simplify menu editor navigation"