Porfiry
81 lines
5.2 KiB
Markdown
81 lines
5.2 KiB
Markdown
# Одобренные макеты
|
|
|
|
**Здесь только принятое.** Это не «вариант для сравнения» и не черновик — это
|
|
решение, на которое опираемся в реализации. Правило простое: одобренный макет
|
|
**живёт здесь**, а не остаётся «выбранным» среди вариантов в `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` кликом по карточке меняется выбор и появляется предупреждение.
|