Menu Table Icon Actions 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: Make menu, section, and item table actions compact icon buttons aligned at the table's right edge, matching checklist templates.

Architecture: Keep all mutation behavior in MenuManagementTables. Replace only the visual representation of non-editing edit/delete controls and give each action column a narrow, right-aligned table contract. Inline editing continues to expose its text save/cancel controls.

Tech Stack: React 19, TypeScript, Ant Design 6, Ant Design Pro Components, Vitest.

Global Constraints

• Reuse existing EditOutlined, DeleteOutlined, Button, and Popconfirm behavior; add no dependencies.
• Use accessible aria-label and tooltip text for icon-only controls.
• Preserve row-click prevention, disabled states, confirmation behavior, and compact card layout.
• Follow TDD: run a focused test red before implementation, then green.

---

Task 1: Compact Desktop Action Columns

Files:

• Modify: apps/web/ui/app/menus/MenuManagementTables.tsx:423-746
• Modify: apps/web/ui/app/menus/MenuManagementTables.test.tsx:24-174,269-427

Interfaces:

• Consumes: the existing actions renderer and localized action keys from useTranslations('Menus').

• Produces: icon-only display-mode actions with stable accessible names, and action columns configured as width: 96, align: 'right', valueType: 'option'.

• [x] Step 1: Write the failing regression test

Add a test that renders a selected menu/section/item table and asserts that display-mode action buttons expose the existing localized aria-label values (Изменить, Удалить) without rendering their labels as visible button text.

• [x] Step 2: Run the focused test and verify it fails

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

Expected: FAIL because the current buttons render Изменить and Удалить text content.

• [x] Step 3: Implement the smallest visual change

In MenuManagementTables.tsx, make display-mode edit/delete buttons type="text", preserve their icons and handlers, add aria-label, and wrap each in a Tooltip. Set menu, section, and item action columns to width: 96, align: 'right', and valueType: 'option'. Keep text save/cancel actions while a row is being edited.

• [x] Step 4: Run the focused test and verify it passes

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

Expected: PASS with no failed tests.

• [x] Step 5: Run static checks for the touched code

Run: bun --cwd apps/web typecheck && bun --cwd apps/web lint ui/app/menus/MenuManagementTables.tsx ui/app/menus/MenuManagementTables.test.tsx && ./apps/web/node_modules/.bin/prettier --check apps/web/ui/app/menus/MenuManagementTables.tsx apps/web/ui/app/menus/MenuManagementTables.test.tsx && git diff --check -- apps/web/ui/app/menus/MenuManagementTables.tsx apps/web/ui/app/menus/MenuManagementTables.test.tsx

Expected: every command exits 0.