Мобильный интерфейс и PWA¶

Synth — единый адаптивный интерфейс: одни и те же экраны работают на компьютере, планшете и телефоне. Отдельного мобильного приложения нет — вёрстка подстраивается под ширину окна, а на мобильных панели становятся выдвижными. Synth можно установить на домашний экран как приложение (PWA).

Мобильный чат

Три зоны адаптива¶

Зона	Ширина	Что меняется
Телефон	≤ 768 px	Чат на весь экран, панели — дроверы, крупные таргеты
Планшет	769–1199 px	Чат почти на всю ширину, панели — дроверы
Десктоп	≥ 1200 px	Привычная раскладка с тремя колонками не меняется

Мобильные стили включаются только на телефоне и планшете, поэтому десктопный опыт остаётся прежним.

Раскладка на телефоне и планшете¶

Чат занимает весь экран — диалог не сжимается боковыми панелями.
Левая и правая панели — оверлей-дроверы: выезжают из мобильного хедера, закрываются по нажатию вне области или по Esc.
Разделитель ширины панелей (ResizeHandle) на мобильных скрыт.
Нижней навигации нет: всё управление — в верхнем баре и дроверах.

Touch-first¶

Интерфейс рассчитан на управление пальцем:

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

Клавиатура¶

Экранная клавиатура не перекрывает поле ввода: композер автоматически поднимается над ней.
На тач-устройствах Enter переносит строку, отправка — отдельной кнопкой.
На устройстве с клавиатурой Enter отправляет сообщение.
Незавершённый ввод (раскладка IME) по Enter не отправляется.

Подтверждения и модалки¶

Системные окна подтверждения заменены на единый диалог Synth — он выглядит одинаково на всех устройствах.
На телефоне настройки и журналы открываются как скролл-табы на всю ширину, а таблицы админ-разделов прокручиваются горизонтально.

Установка как приложение¶

Synth — PWA: его можно добавить на домашний экран и запускать в отдельном окне без адресной строки.

Для установки используется кнопка в мобильном хедере — она появляется, когда браузер сообщает о такой возможности.
На iOS используйте «Поделиться → На экран “Домой”».
Приложение открывается в режиме standalone с тёмной темой оформления.
Регистрация service worker происходит только в production-сборке.

Зачем устанавливать

Установленное приложение запускается быстрее, не теряет сессию при переключении задач и выглядит как нативное — без браузерной обвязки.

Офлайн-заглушка¶

Приложение кэширует каркас интерфейса — оболочку, стили и шрифты:

Навигационные запросы идут в сеть, а при отсутствии соединения показывается офлайн-заглушка.
Запросы к API, WebSocket, аутентификации, админке и проверке состояния не кэшируются — данные всегда актуальны и не попадают в офлайн-кэш.
Изменение версии service worker подхватывается браузером автоматически.

Обновление версии¶

Когда доступна новая версия Synth, в интерфейсе появляется баннер «Доступно обновление»:

Проверка выполняется при открытии приложения, раз в 30 минут, при возвращении в приложение и при первом действии после долгого простоя.
Новая версия определяется по ожидающему service worker или по расхождению версии с сервером.
Обновление применяется по нажатию — после этого загружается свежая версия.

Кэш и данные

Обновляется только каркас приложения. Диалоги, проекты и настройки хранятся на сервере и не теряются.