diff --git a/docs/android-ui-batch-2-checklist.md b/docs/android-ui-batch-2-checklist.md new file mode 100644 index 0000000..aa2c4ba --- /dev/null +++ b/docs/android-ui-batch-2-checklist.md @@ -0,0 +1,72 @@ +# Android UI Checklist — Batch 2 (Telegram Reference) + +Дата: 2026-03-09 +Источник: 10 скринов Telegram Android (чат, контекстные действия, медиа, поиск/чаты) + +## P0 — Chat Screen Parity (must-have) +- [ ] Top app bar чата: back + avatar + name + status + call + menu, полупрозрачная подложка на фоне обоев. +- [ ] Закреплённое сообщение блоком под app bar (2 строки, иконки pin/close, tap для перехода). +- [ ] Message composer Telegram-стиля: +- [ ] Полупрозрачный rounded input контейнер. +- [ ] Иконка emoji слева, поле ввода, скрепка, кнопка отправки/голосового. +- [ ] Корректные отступы от nav bar + IME. +- [ ] Сообщения вход/выход: плотные пузыри, время и delivery статус внизу справа. +- [ ] Reply-preview внутри outgoing bubble (вертикальная полоска, автор, snippet). +- [ ] Forwarded header в сообщении ("Переслано от ...") + мини-аватар. +- [ ] Поддержка 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 +- [ ] Long press открывает reaction bar над сообщением (emoji + "expand"). +- [ ] Контекстное меню действий (reply/save/forward/pin/delete) в floating dark card. +- [ ] Режим multi-select: +- [ ] Верхняя панель (close/count/actions). +- [ ] Нижняя action bar (reply/forward) в виде rounded pills. +- [ ] 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 +- [ ] Верхние фильтр-чипы/табы ("Все", "Люди", ...), компактные rounded chips. +- [ ] Список чатов: +- [ ] Аватар, title, preview, date/time. +- [ ] Badge unread справа. +- [ ] Иконки 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 ничего не перекрывается системными панелями.