ADR-UI-005. Layout приложения

1. Контекст и постановка задачи

Приложению нужна предсказуемая разметка: единая оболочка (шапка с навигацией, рабочая область) и стандартный каркас страницы, чтобы гриды, формы и карточки не расходились по отступам и поведению скролла.

Роли и доступ ICD пока не заданы (открытый вопрос видения — см. IcdVision), хотя вход в систему предполагается. Поэтому фиксируем основной режим (рабочее приложение с оболочкой); режим «без оболочки» (экраны входа/выхода/отказа) и механику доступа (гарды, видимость навигации по правам) вводим отдельным ADR, не переписывая этот.

2. Драйверы решения

1. Единый каркас страницы — общий скелет (header страницы + body) для гридов, форм, карточек.
2. Минимум вложенности — не плодить layout-компоненты под каждый подвид страницы.
3. Разделение ответственности — оболочка приложения / каркас страницы / содержимое страницы.
4. Поэтапность — auth-режим не заложен преждевременно; основной layout не зависит от ещё не определённого доступа.

3. Рассмотренные варианты

• A. Один layout с условной шапкой — общая оболочка на все страницы, шапка скрывается на экранах входа. Минус: оболочка «знает» про состояние авторизации.
• B. Разные режимы, поэтапно — основной layout (оболочка рабочего приложения) вводим сейчас; режим «без оболочки» (экраны входа) и auth — отдельным ADR, когда определятся роли/доступ.
• C. Сразу полный набор (основной + отдельный auth-layout + гарды) — преждевременно, пока доступ не определён.

4. Решение

Выбран Вариант B. На текущем этапе реализуется только основной режим.

4.1. Оболочка приложения

Корневая оболочка рабочего приложения содержит:

оболочка
├── шапка
│   ├── логотип
│   ├── главное меню (горизонтальное)
│   └── зона профиля пользователя (наполняется с введением auth)
└── рабочая область
    └── <router-outlet>   ← сюда рендерятся страницы фич

Главное меню — горизонтальное, в шапке. Конкретный состав пунктов определяется на этапе UI-спеки страниц (отложено). Видимость пунктов по правам появится вместе с механикой доступа (отдельный ADR).

4.2. Каркас страницы рабочей области

Любая страница в <router-outlet> оборачивается в каркас page с двумя зонами:

<icd-page>
  <icd-page-header>
    <!-- заголовок раздела, кнопки действий; место для breadcrumbs -->
  </icd-page-header>
  <icd-page-body>
    <!-- грид / форма / карточка -->
  </icd-page-body>
</icd-page>

Каркас собирает зоны через контент-проекцию и задаёт сетку: header — sticky сверху, body — скроллящаяся область. Компоненты — собственные (набор ui/, слой layout), классы без суффиксов (Page, PageHeader, PageBody), селекторы icd-page / icd-page-header / icd-page-body.

Это даёт:

• единые отступы и поведение скролла во всём приложении;
• стандартное место для breadcrumbs (отдельный ADR);
• предсказуемую точку расширения (например, sticky-футер таблицы).

4.3. Соответствие зон

5. Положительные следствия

• Чёткое разделение: общая оболочка / каркас страницы / содержимое.
• Любая новая страница пишется через icd-page без риска разойтись по разметке.
• Основной layout не зависит от ещё не определённого доступа — auth-режим добавится без переписывания.

6. Отрицательные следствия и компромиссы

• Структура оболочки жёсткая: sidebar / split-pane потребуют существенного изменения, а не локальной правки.
• Зона профиля и второй режим (экраны входа) пока «заглушены» — часть шапки наполнится позже.

7. Проверка

• Любая страница рабочей области использует icd-page с icd-page-header + icd-page-body.
• Шапка приложения не дублируется в шаблонах страниц — она одна, в оболочке.
• Каркас страницы обеспечивает sticky-header и скролл body без правок на стороне страницы.

8. Открытые вопросы / отложено

• Второй режим (без оболочки) — экраны входа/выхода/отказа в доступе и механика доступа (гарды, видимость навигации по правам) — отдельным ADR по мере определения ролей/доступа.
• Состав главного меню — определяется на этапе UI-спеки страниц.
• Зона профиля пользователя — наполнение (аватар, выход) появится вместе с auth.

9. Связанные артефакты

• ADR_UI_003_ProjectStructure — Размещение layout-компонентов в наборе ui/.
• видение Сервиса — Видение: роли и доступ (пока открытый вопрос).