73 lines
5.2 KiB
Markdown
73 lines
5.2 KiB
Markdown
# Android UI Checklist — Batch 2 (Telegram Reference)
|
||
|
||
Дата: 2026-03-09
|
||
Источник: 10 скринов Telegram Android (чат, контекстные действия, медиа, поиск/чаты)
|
||
|
||
## P0 — Chat Screen Parity (must-have)
|
||
- [x] Top app bar чата: back + avatar + name + status + menu, полупрозрачная подложка на фоне обоев.
|
||
- [x] Закреплённое сообщение блоком под app bar (2 строки, иконки pin/close, tap для перехода).
|
||
- [x] Message composer Telegram-стиля:
|
||
- [x] Полупрозрачный rounded input контейнер.
|
||
- [x] Иконка emoji слева, поле ввода, скрепка, кнопка отправки/голосового.
|
||
- [x] Корректные отступы от nav bar + IME.
|
||
- [ ] Сообщения вход/выход: плотные пузыри, время и delivery статус внизу справа.
|
||
- [x] Reply-preview внутри outgoing bubble (вертикальная полоска, автор, snippet).
|
||
- [x] Forwarded header в сообщении ("Переслано от ...") + мини-аватар.
|
||
- [x] Поддержка chat wallpaper (обои в фоне, читабельный контраст поверх).
|
||
|
||
## P0 — Voice/Audio Message UI
|
||
- [ ] Voice bubble: крупная play/pause кнопка, waveform/прогресс, длительность, время сообщения.
|
||
- [ ] Состояния воспроизведения (play/pause/ended) визуально различимы.
|
||
- [ ] Outgoing/incoming voice bubble отличаются по цвету/тональности как у text bubbles.
|
||
|
||
## P0 — Message Actions + Reactions
|
||
- [x] Long press открывает reaction bar над сообщением (emoji + "expand").
|
||
- [x] Контекстное меню действий (reply/save/forward/pin/delete) в floating dark card.
|
||
- [x] Режим multi-select:
|
||
- [x] Верхняя панель (close/count/actions).
|
||
- [x] Нижняя action bar (reply/forward) в виде rounded pills.
|
||
- [x] Selected state сообщения с явной подсветкой/overlay.
|
||
|
||
## P1 — Media & Attachment Bubbles
|
||
- [ ] Media bubble с превью изображения/видео + таймкод для видео.
|
||
- [ ] File-list bubble (несколько файлов): thumbnail слева, имя/вес/тип справа.
|
||
- [ ] Audio file bubble (не voice): progress bar + текущая/общая длительность.
|
||
- [ ] Метаданные поста/канала (просмотры/время/reaction strip) у медиа-сообщений.
|
||
|
||
## P1 — Fullscreen Media Viewer
|
||
- [ ] Fullscreen header: close + index ("1") + share + delete.
|
||
- [ ] Поддержка reaction overlay в viewer (как на скрине).
|
||
- [ ] Свайп между медиа (gallery mode), если в сообщении несколько вложений.
|
||
|
||
## P1 — Chat Header Special Cases
|
||
- [ ] Баннер "Добавить контакт / Заблокировать" для unknown user.
|
||
- [ ] Music mini-player строка под app bar (play + title + close).
|
||
- [ ] Карточка "о пользователе" в истории чата (не в контактах, страна/дата регистрации и т.д.).
|
||
|
||
## P1 — Chat List Screen Parity
|
||
- [x] Верхние фильтр-чипы/табы ("Все", "Люди", ...), компактные rounded chips.
|
||
- [ ] Список чатов:
|
||
- [ ] Аватар, title, preview, date/time.
|
||
- [x] Badge unread справа.
|
||
- [x] Иконки delivery/camera/attachments в preview строке.
|
||
- [ ] Плавающий FAB (compose/new chat) справа снизу.
|
||
- [ ] Floating bottom navigation с blur/dark container и активным фиолетовым tab.
|
||
|
||
## P2 — Motion & Polish
|
||
- [ ] Плавная анимация открытия reaction/context menu (scale+fade).
|
||
- [ ] Плавные переходы pinned bar и composer states.
|
||
- [ ] Micro-interactions на bubbles/chips/FAB как в Telegram (короткие, не "пружинные").
|
||
|
||
## UI Tokens (из этой пачки)
|
||
- [ ] Bubble outgoing: светло-фиолетовый (`accentContainer`), incoming: тёмно-графитовый (`surfaceVariant`).
|
||
- [ ] Основной акцент: мягкий фиолетовый (`#9B6BDF` диапазон).
|
||
- [ ] Обязательный контраст текста на обоях через затемнение/blur подложек.
|
||
- [ ] Радиусы: bubbles ~14-18dp, composer ~22-26dp, cards/menu ~18-20dp.
|
||
|
||
## Definition of Done (Batch 2)
|
||
- [ ] Chat screen визуально соответствует референсу по структуре (header/pinned/messages/composer).
|
||
- [ ] Все состояния long-press -> reactions -> context actions -> multi-select работают без наложений.
|
||
- [ ] Voice/audio/media/file bubbles выглядят и ведут себя ожидаемо.
|
||
- [ ] Chat list и фильтр-чипы приведены к Telegram-like стилю.
|
||
- [ ] На устройствах с gesture navigation ничего не перекрывается системными панелями.
|