95 lines
4.9 KiB
Markdown
95 lines
4.9 KiB
Markdown
# Функционал экрана "Контакты" в Prism Messenger
|
||
|
||
## 🎯 Основная фича: Поиск любого пользователя по никнейму
|
||
|
||
### Визуальный дизайн
|
||
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ 🔍 Поиск по @username... │ <- Поле поиска
|
||
│ Введите никнейм для поиска │
|
||
├─────────────────────────────────┤
|
||
│ [25] [5] │ <- Статистика
|
||
│ пользователей 🟢 в сети │
|
||
├─────────────────────────────────┤
|
||
│ [Все] [🟢 Онлайн] [⭐ Контакты] │ <- Фильтры
|
||
├─────────────────────────────────┤
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 🟦 A @alice [💬] │ │ <- Карточка пользователя
|
||
│ │ 🟢 В сети │ │
|
||
│ │ alice@mail.ru │ │
|
||
│ └─────────────────────────────┘ │
|
||
│ ┌─────────────────────────────┐ │
|
||
│ │ 🟩 B @bob [💬] │ │
|
||
│ │ Был(а) 5 мин. назад │ │
|
||
│ │ Люблю программировать │ │
|
||
│ └─────────────────────────────┘ │
|
||
└─────────────────────────────────┘
|
||
```
|
||
|
||
## ✨ Ключевые возможности
|
||
|
||
### 1. **Мгновенный поиск по никнейму**
|
||
- Просто введите `@username` в поиске
|
||
- Поиск работает в реальном времени
|
||
- Можно найти ЛЮБОГО пользователя системы
|
||
|
||
### 2. **Быстрый старт чата**
|
||
- Нажмите на карточку пользователя или иконку 💬
|
||
- Мгновенно создается приватный чат
|
||
- Переход сразу в экран переписки
|
||
|
||
### 3. **Визуальные индикаторы**
|
||
- 🟢 **Зеленый круг** = пользователь онлайн
|
||
- **Чип "В сети"** для активных пользователей
|
||
- Время последнего визита для оффлайн пользователей
|
||
- Цветные аватары с первой буквой никнейма
|
||
|
||
### 4. **Умные фильтры**
|
||
- **Все** - показывает всех пользователей
|
||
- **Онлайн** - только активные пользователи
|
||
- **Контакты** - избранные (в разработке)
|
||
|
||
### 5. **Статистика в реальном времени**
|
||
- Общее количество пользователей
|
||
- Количество пользователей онлайн
|
||
- Обновляется автоматически
|
||
|
||
## 🔥 Пример использования
|
||
|
||
1. **Хочу написать пользователю @johndoe**
|
||
- Открываю вкладку "Контакты"
|
||
- Ввожу в поиск: `johndoe`
|
||
- Вижу карточку пользователя
|
||
- Нажимаю на нее или иконку сообщения
|
||
- Попадаю сразу в чат!
|
||
|
||
2. **Хочу найти кого-то онлайн**
|
||
- Переключаю фильтр на "Онлайн"
|
||
- Вижу всех активных пользователей
|
||
- Могу сразу начать общение
|
||
|
||
## 💡 Технические детали
|
||
|
||
### GraphQL запросы:
|
||
- `GET_USERS` - получение списка всех пользователей
|
||
- `CREATE_PRIVATE_CONVERSATION` - создание приватного чата
|
||
|
||
### Оптимизации:
|
||
- Анимация появления карточек
|
||
- Индикатор загрузки при создании чата
|
||
- Кеширование результатов поиска
|
||
- Оптимистичные обновления UI
|
||
|
||
### Безопасность:
|
||
- Нельзя найти самого себя
|
||
- Проверка прав при создании чата
|
||
- Валидация на стороне сервера
|
||
|
||
## 🚀 Планы развития
|
||
|
||
1. **Добавление в контакты** - избранные пользователи
|
||
2. **Блокировка пользователей**
|
||
3. **Групповые приглашения**
|
||
4. **QR-коды для быстрого добавления**
|
||
5. **Импорт контактов из телефона** |