docs: add telegram ui checklists for batches 1 and 3
Some checks failed
CI / test (push) Failing after 2m5s

This commit is contained in:
Codex
2026-03-09 13:28:11 +03:00
parent fbe684799a
commit 02ec6c95e9
3 changed files with 116 additions and 0 deletions

View File

@@ -0,0 +1,58 @@
# Android UI Checklist — Batch 1 (Telegram Reference)
Дата: 2026-03-09
Источник: первая пачка скринов (настройки, приватность, контакты, профиль, архив, общий список чатов)
## P0 — Navigation + Layout Shell
- [ ] Floating bottom navigation в rounded контейнере с полупрозрачным тёмным фоном.
- [ ] Активный tab в фиолетовом pill-состоянии, неактивные — белые/серые.
- [ ] Safe area для status/nav bars на всех экранах списка/настроек/профиля.
## P0 — Settings Visual System
- [ ] Экран настроек из секционных rounded cards (а не плоский список).
- [ ] Унифицированная строка настройки: leading icon + title + subtitle + trailing value/switch/chevron.
- [ ] Тонкие разделители внутри карточек.
- [ ] Переключатели в фирменном фиолетовом состоянии.
- [ ] Header-типографика: крупный title, back-иконка, actions справа.
## P0 — Chat/Contacts List Styling
- [ ] Поисковая плашка-пилюля сверху.
- [ ] Chat row: avatar + title + preview + time + unread badge.
- [ ] Состояния pinned/muted и mention/read indicator в preview-строке.
- [ ] FAB справа снизу (compose/add contact).
## P1 — Privacy/Data/Notifications Screens
- [ ] Privacy screen: value справа фиолетовым текстом ("Все", "Контакты").
- [ ] Data & memory screen: grouped cards + reset row + streaming toggle rows.
- [ ] Notifications screen: плотные секции, много switch-row без визуального шума.
- [ ] Экраны энергосбережения/прокси/звуки в едином компонентном стиле.
## P1 — Profile Screens
- [ ] Profile hero header (фон + аватар + имя + статус/online).
- [ ] Action-кнопки (выбрать фото/изменить/настройки) в rounded cards.
- [ ] Инфо-секции: телефон, username, bio, birthday как отдельные cards.
- [ ] Tab-like блок под профилем (публикации/архив/подарки).
## P1 — Contacts Screen
- [ ] Верхний app bar "Контакты" + action справа.
- [ ] Секции: quick actions (пригласить друзей/звонки), затем список контактов.
- [ ] Контакт-строка: аватар + имя + secondary last seen.
## P2 — Polish
- [ ] Плавные переходы между секциями/скролл-хедерами.
- [ ] Микро-анимации switch/chip/FAB в пределах 120-180ms.
- [ ] Консистентный ритм вертикальных отступов 12/16dp.
## UI Tokens (из Batch 1)
- [ ] `bg`: #0B0B0D
- [ ] `surface`: #17181B
- [ ] `surfaceAlt`: #1D1E22
- [ ] `accent`: #9B6BDF
- [ ] `textPrimary`: #F2F2F4
- [ ] `textSecondary`: #9A9AA1
- [ ] Радиусы: cards 20dp, search/input 18-20dp, nav container 26-30dp
## Definition of Done (Batch 1)
- [ ] Основные list/settings/profile экраны визуально совпадают с Telegram-паттерном.
- [ ] Bottom nav, cards и row-компоненты унифицированы и переиспользуются.
- [ ] Нет пересечений с системными панелями на жестовой навигации.

View File

@@ -0,0 +1,53 @@
# Android UI Checklist — Batch 3 (Telegram Reference)
Дата: 2026-03-09
Источник: последняя пачка скринов (канал/чат-пост, feed list, multi-select media, video-message capture)
## P0 — Channel/Post Message Layout
- [ ] Посты канала как расширенные bubbles/cards с блоками:
- [ ] quoted header (автор/канал),
- [ ] основной текст,
- [ ] link preview card,
- [ ] CTA-кнопка (например "ПЕРЕЙТИ В КАНАЛ").
- [ ] Footer поста: reactions strip + views + time + share action.
- [ ] Комментарии к посту: отдельная строка/кнопка "N комментария".
## P0 — Chat List Advanced States
- [ ] Архив как специальный top-row элемент.
- [ ] Pinned marker в строке чата.
- [ ] Большие unread counts (например 367) корректно отображаются в badge.
- [ ] Фильтр-чипы сверху списка ("Все", "Люди", ...).
## P0 — Media Selection Mode
- [ ] Multi-select overlay в медиасетке:
- [ ] X/галочки на элементах,
- [ ] затемнение невыбранных,
- [ ] верхняя панель действий,
- [ ] нижняя панель действий (ответить/переслать).
- [ ] Счётчик выбранных элементов в top bar.
## P1 — Chat Background + Overlay Readability
- [ ] Wallpaper-aware плашки: pinned bar, composer, menus должны быть читаемы на ярких обоях.
- [ ] Полупрозрачные подложки с блюром или тёмным тинтом.
## P1 — Video Message (Circle) Capture UI
- [ ] Режим круглого превью камеры по центру экрана.
- [ ] Таймер записи снизу (с красной точкой).
- [ ] Подсказка жеста "влево — отмена".
- [ ] Lock-контрол для hands-free записи.
- [ ] Переключение камеры/вспышка в компактных кнопках.
## P1 — Saved Messages / Gallery Grid
- [ ] Плотная медиа-сетка внутри чата/избранного.
- [ ] Встроенные контекстные элементы (чекбоксы, close, overlays) без перекрытия ключевого контента.
## P2 — Interactions
- [ ] Анимации перехода в multi-select режим.
- [ ] Анимации появления reaction strip и CTA/footer у постов.
- [ ] Плавная синхронизация скролла при высоких карточках постов.
## Definition of Done (Batch 3)
- [ ] Посты канала визуально и структурно соответствуют референсу (preview/CTA/footer).
- [ ] Multi-select media режим полноценный (верх/низ action bars + selection states).
- [ ] Circle video capture соответствует основному UX Telegram.
- [ ] Продвинутые состояния списка чатов (архив/pinned/крупные badges) реализованы.

View File

@@ -0,0 +1,5 @@
# Android UI Batches Index
- [Batch 1 checklist](./android-ui-batch-1-checklist.md) — настройки, профиль, контакты, базовая оболочка.
- [Batch 2 checklist](./android-ui-batch-2-checklist.md) — чат, media, reactions, message actions.
- [Batch 3 checklist](./android-ui-batch-3-checklist.md) — channel posts, media multi-select, circle video capture.