specs/openspec/changes/archive/2026-08-27-consume-mantine-components/tasks.md

1. Миграция AppBreadcrumbs на Mantine Breadcrumbs

• 1.1 [frontend] Заменить ручную разметку BreadcrumbTrail в src/app/ui/AppBreadcrumbs.tsx на Mantine Breadcrumbs: <Breadcrumbs component="nav" aria-label={t("breadcrumbs.label")} data-depth={items.length} separator="→">, предшествующие крошки — <Link> children, текущая — <span aria-current="page">; логика AccountBreadcrumbs/AppBreadcrumbs (маршруты и построение цепочек) остается без изменений

  • Covers: N/A — замена внутренней реализации без изменения observable behavior спеку app-breadcrumb-navigation (skip_specs) и соответствует решениям D1–D2 Design.
  • Verification: Прочитать src/app/ui/AppBreadcrumbs.tsx, убедиться, что используется Mantine Breadcrumbs с component="nav", aria-label, data-depth и separator="→", а цепочки/пропсы AccountBreadcrumbs не изменены.

• 1.2 [frontend] Удалить кастомные классы хлебных крошек (breadcrumbs, breadcrumbs-entry, breadcrumbs-separator-N, breadcrumbs-item-N) и их CSS из src/app/styles.css, сохранив только адаптивное правило скрытия промежуточных крошек по data-depth на root и базовое оформление ссылок

  • Covers: N/A — удаление дублирующего стиля по D3 Design; адаптивность по data-depth остаётся кастомной, т.к. Mantine Breadcrumbs не скрывает крошки по глубине.
  • Verification: Прочитать src/app/styles.css, проверить отсутствие unused breadcrumbs-* селекторов и наличие медиа-правила data-depth="3"/эквивалента для узкого экрана.

• 1.3 [frontend] Обновить src/app/ui/AppBreadcrumbs.test.tsx под новую DOM-разметку Mantine: сохранить проверки navigation role с aria-label, aria-current="page" у текущей крошки, data-depth, ссылок и fallback «Счет» без identifier

  • Covers: N/A — тест проверяет неизменное поведение (roles, aria-current, data-depth, ссылки) и не создаёт новый Requirement; требует адаптации к структуре Mantine.
  • Verification: Запустить таргетированно тест (например npm run test:unit -- AppBreadcrumbs или эквивалент из package.json), убедиться в зелёном проходе.

• 1.4 [frontend] Выполнить полный local-verify-гейт frontend для подтверждения строгой корректности после рефакторинга

  • Covers: N/A — canonical gate проверяет affected frontend delivery (D1–D3), а не вводит самостоятельное observable behavior.
  • Verification: Выполнить npm ci (при необходимости) и npm run verify в frontend на Node 22, проверить отсутствие ошибок strict TypeScript, Biome, тестов/coverage, Knip, dependency boundaries и build.

2. Affected-area gates и итоговая проверка

• 2.1 [specs] Выполнить structural validation change-артефактов canonical store

  • Covers: N/A — задача проверяет specs-delivery уже покрытых артефактов (skip_specs) и не вводит новый Requirement.
  • Verification: Запустить openspec validate consume-mantine-components --type change --strict --store wealth-ledger-specs и git diff --check в specs.

• 2.2 [workspace] Провести semantic verification реализации против Proposal, Design и Tasks и independent read-only review без Critical/Important findings

  • Covers: N/A — terminal semantic verification и independent review проверяют change целиком и не реализуют отдельный Requirement.
  • Verification: Сверить фактическое поведение крошек и чистку стилей с Proposal/Design/Tasks, подтвердить отсутствие blocking findings перед archive eligibility.