Porfiry
5.2 KiB
Одобренные макеты
Здесь только принятое. Это не «вариант для сравнения» и не черновик — это
решение, на которое опираемся в реализации. Правило простое: одобренный макет
живёт здесь, а не остаётся «выбранным» среди вариантов в sketches/.
| Файл | Что это | Одобрено |
|---|---|---|
001-sidebar-utility.html |
Основа дизайна: привычный мессенджер | 2026-09-18 |
005-new-chat-picker.html |
Модалка «Новый диалог»: выбор ассистента | 2026-09-19 |
sketches/ — предложения: 002-rail-voice-first, 003-three-pane-command,
004-settings-agents, 005-new-chat-picker (черновик, из него вырос одобренный).
001-sidebar-utility.html — основа дизайна
Это база всего клиента. Привычный мессенджер: список диалогов слева (320 px), чат справа. Узкое окно — как в Телеграме: на экране что-то одно, у открытого диалога сверху кнопка «Назад».
Что в нём есть:
- лента папок — «Все чаты / Работа / Дом / ＋», со счётчиком непрочитанных;
- поиск диалога;
- список диалогов: значок, название, последняя строка, время, кружок непрочитанных;
- шапка чата со значком, именем и состоянием связи;
- сообщения: пользователь справа, ассистент слева;
- поле ввода с кнопкой отправки и круглой кнопкой записи голоса.
Из него убрано при одобрении:
- подсказка под полем ввода;
- кольцо токенов — в библиотеке
clientтаких данных нет, а «нет данных — нет цифры».
Стиль: фон #121218, панели #17212B, акцент #6AB2F2, текст #EBEBEB.
005-new-chat-picker.html — Новый диалог
Модалка появляется по «＋» (новый диалог), когда ассистентов больше одного. Состоит из одного окна 480 px и больше ничего: заголовок «Новый диалог», подсказка-вопрос, список ассистентов, две кнопки внизу.
Что в карточке ассистента:
- значок — цвет или картинка (как настроено в настройках агентов);
- имя;
- адрес сервера;
- состояние связи: «на связи» зелёным, «не отвечает» красным;
- кружок отметки справа.
Поведение:
- первый отмечен сразу — создать диалог можно одним нажатием;
- выбран ассистент без связи → под списком появляется предупреждение, но выбор не запрещается (связь может пропасть на секунду);
- окно маленькое и без вкладок: одно действие — один выбор.
Когда этой модалки не должно быть:
- ассистент один — диалог создаётся сразу в нём, спрашивать не о чем;
- ассистентов ноль — кнопки «＋» нет вообще (создавать диалог не в ком), вместо списка диалогов подсказка «добавьте ассистента в настройках».
Отвергнуто при одобрении: пояснительная панель над окном клиента — она попала в макет случайно, это была заметка для проверки, а не часть интерфейса. В одобренном файле её нет и быть не должно.
Про цвета в макетах
Цвета в макетах стоят числами — так и надо, иначе макет не будет выглядеть
задуманным. В коде так нельзя: цвет берётся из цветовой схемы по смыслу,
потому что тем будет несколько. Разбор — THEMES.md.
Как смотреть
Открыть файл в браузере — самодостаточный, без сборки и без зависимостей.
- в
001переключается узкий/широкий вид и видны состояния сообщений; - в
005кликом по карточке меняется выбор и появляется предупреждение.