макеты · не панель

SelfPost — полное обновление интерфейса

Click-through прототип всех экранов: текущая панель, согласованный roadmap и кандидаты. Знак и палитра из листа утверждения не меняются. Это HTML в docs/assets/panel-ui/, не вёрстка internal/web.

Ширина окна

Сейчас оболочка центрируется, колонка контента упирается в 64rem, формы ещё уже — 48rem. На широком мониторе поля пустые. Растянуть всё на 100% окна нельзя: поля Settings и Backup становятся нечитаемыми.

Гибрид

Навигация прижата влево. Ops-страницы (Status, Deliveries, очередь, лог, DMARC, inbound) занимают остаток до 90rem (~1440px). Формы остаются 42rem и выровнены влево в колонке, а не висят по центру пустого поля. Login и setup — по-прежнему узкий центрированный блок.

сейчас, окно ~1600px
nav 64rem пусто
макет, ops-страница
nav контент до 90rem
макет, форма
nav 42rem поле не растягивает инпуты
На телефоне это не «узкий десктоп». Таблицы из шести колонок складываются в список. Навигация — выезжающая колонка на CSS-checkbox, без обязательного JavaScript (как панели Edit у приложений уже сейчас).

Информационная архитектура

Global administrator

  • Status
  • Domains → domain → delete
  • Deliveries → message
  • Mail queue
  • System log
  • Inbound 1.x — скрыт, пока INBOUND_RELAY_ENABLE выключен
  • DMARC reports candidate
  • Backup, Users, Settings
  • Help candidate — пункт навбара и drawer с карточек Status

Domain-admin

  • Domains (только назначенные) → domain
  • Deliveries → message, включая пояснение retry
  • Settings — только учётные данные панели
  • Help drawer
  • Нет Status, очереди, system log, Backup, Users, inbound, глобального DMARC hub

В прототипе роль, inbound-флаг, ширина и тема переключаются в шапке. contributing и schema-squash экранов не имеют.

Знак и новые иконки

Утверждённый stamp не заменяется. Для узкой шапки телефона предлагается уже существующий SP-значок (фавикон), а не компактный wordmark: на 390px высота важнее, чем прочитать «SelfPost» второй раз.

Полный знак
эталон · login / setup
Компактный знак
колонка навбара
SP
телефон · шапка drawer

Иконки новых пунктов

Тот же штрих 1.5, что у Status / Domains. Не пиктограммы-эмодзи и не заливка.

Inbound
DMARC
Help

Экраны

Вход

Текущая панель

Roadmap

Аварийный телефон

Как смотреть

Откройте app.html в браузере. Шапка прототипа — не часть панели: роль, Desktop/Phone, inbound, светлая/тёмная. Копирайт экранов английский, как в продукте. Drawer Help открывается с карточек Status (кнопка «?») или из навбара.

После утверждения макетов вёрстка panel.css и шаблонов — отдельная задача. CSP и progressive enhancement в этом HTML не воспроизводятся один в один: здесь допустимы вещи, которые в панели останутся в файле стилей.