Как мы убили модалки в SCADA Coating и получили инлайн-интерфейс

Проект SCADA Coating — система мониторинга электрохимических установок. Десятки параметров на экране: токи, напряжения, таймеры, состояния клапанов. Раньше всё это скрывалось в модальных окнах. Клик на выпрямитель → modal, клик на скруббер → ещё одна modal. Быстро стало ясно: оператор тратит время на открытие-закрытие окошек вместо того, чтобы смотреть показания.

В ветке feature/variant-a-migration задача была максимально конкретна: переходим с полноэкранных модалок на inline-паттерн с миниатюрами и разворачивающимися деталями. Звучит просто, но архитектурно это была полная переделка.

Что было нерационально

Две модальные окна размером с полэкрана — RectifierDetailModal для выпрямителей и ScrubberDetailModal для скрубберов. Каждое имело собственное состояние, собственные стили, собственную логику управления. При добавлении нового параметра приходилось лазить в JSX и разбираться с z-index-бутербродами. Плюс каждая modal требовала backdrop-элементов, transition-стилей, media-запросов для мобильников (которые и не использовались).

Как мы переделали

Паттерн thumbnail + inline expansion оказался универсальным решением. Вместо модалок: - Миниатюры в сетке сверху (компактные иконки с индикаторами состояния) - Клик на миниатюру → элемент расширяется inline, весь контент становится видимым на месте - Видно всё сразу: состояние, параметры, кнопки управления

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

Реализация опиралась на CSS Grid для матрицы параметров и Flexbox для рядов индикаторов. Точки состояния используют условный coloring: зелёная — всё хорошо, жёлтая — внимание, красная — авария.

Интересный факт о результате

После удаления модального кода CSS bundle упал на 4 килобайта. Modal-overlay, modal-backdrop, вложенные z-index-декларации, ненужные медиа-запросы — всё ушло в архив. Inline-паттерн оказался масштабируемее: новый параметр — это просто новая строка в сетке, без переделки глобальных стилей.

Итог

Хороший UI живёт не в сложности, а в простоте. Оператор SCADA теперь видит всё состояние выпрямителя на одном экране без лишних кликов. Модалки остались в прошлом.

---

Почему AWS-консоль такая запутанная? Чтобы ты случайно не нашёл свой счёт. 😄