d78000aa3f
- Added ProfileScreen.kt for user profile management. - Updated MainActivity.kt to integrate ProfileScreen and manage navigation states. - Created documentation for Profile Screen implementation, navigation flow, and testing checklist. - Removed SettingsScreen.kt as part of the refactor. - Added helper components for profile display and editing. - Ensured compliance with Material 3 design principles and dark/light theme support.
188 lines
6.9 KiB
Markdown
188 lines
6.9 KiB
Markdown
# 👤 Profile Screen Implementation
|
||
|
||
## 📋 Overview
|
||
|
||
Реализован полнофункциональный экран профиля пользователя на базе функционала из архивной версии приложения, адаптированный под стилистику текущего Kotlin приложения.
|
||
|
||
## ✨ Основные возможности
|
||
|
||
### 1. 👤 Карточка профиля
|
||
|
||
- **Аватар с инициалами** - генерируется из имени пользователя
|
||
- **Отображение имени** - основное имя пользователя
|
||
- **Username** - с префиксом @ (если установлен)
|
||
- **Короткий Public Key** - первые и последние 3 символа
|
||
|
||
### 2. ✏️ Редактирование профиля
|
||
|
||
- **Редактируемое поле "Your name"**
|
||
- Placeholder: "ex. Freddie Gibson"
|
||
- Inline редактирование
|
||
- **Редактируемое поле "Username"**
|
||
- С префиксом "@"
|
||
- Placeholder: "ex. freddie871"
|
||
|
||
- **Кнопка Save**
|
||
- Появляется автоматически при изменении полей
|
||
- Анимированное появление/исчезновение
|
||
- Сохраняет изменения через callback `onSaveProfile`
|
||
|
||
### 3. 🔑 Public Key
|
||
|
||
- **Поле копирования**
|
||
- Нажатие на поле копирует ключ в буфер обмена
|
||
- Анимация "Copied!" при успешном копировании
|
||
- Таймер 1.5 секунды для возврата к исходному состоянию
|
||
|
||
- **Подсказка**
|
||
- Объясняет назначение публичного ключа
|
||
- Помогает пользователю поделиться контактом
|
||
|
||
### 4. 🔧 Секция Settings
|
||
|
||
Три основных пункта с цветными иконками:
|
||
|
||
#### **🔄 Updates** (Lime Green)
|
||
|
||
- Проверка новых версий
|
||
- Обновления безопасности и новые функции
|
||
|
||
#### **🎨 Theme** (Indigo)
|
||
|
||
- Настройка внешнего вида
|
||
- Переключение темной/светлой темы
|
||
|
||
#### **🛡️ Safety** (Purple)
|
||
|
||
- Резервное копирование
|
||
- Настройки безопасности
|
||
- **Важно:** предупреждение о конфиденциальности
|
||
|
||
### 5. 🚪 Logout
|
||
|
||
- **Красная иконка и текст** для визуального выделения
|
||
- Без chevron (стрелки вправо) для финальности действия
|
||
- Объяснение последствий выхода
|
||
|
||
## 🎨 Дизайн
|
||
|
||
### Цветовая схема
|
||
|
||
- **Background**: `#0F0F0F` (dark) / `#FFFFFF` (light)
|
||
- **Surface**: `#1A1A1A` (dark) / `#F5F5F5` (light)
|
||
- **Text Primary**: White (dark) / `#1A1A1A` (light)
|
||
- **Text Secondary**: `#999999` (dark) / `#666666` (light)
|
||
- **Primary Blue**: Используется для аватара и кнопки Save
|
||
|
||
### Компоненты
|
||
|
||
- **Rounded Corners**: 16dp для карточек, 8dp для иконок
|
||
- **Avatar Size**: 100dp
|
||
- **Icon Background**: 36dp с цветовой кодировкой
|
||
- **Typography**: Sans Serif с весами 400-700
|
||
|
||
## 🔄 Анимации
|
||
|
||
- **Fade In/Out** (200ms) при переходах между экранами
|
||
- **AnimatedContent** для "Copied!" сообщения
|
||
- **AnimatedVisibility** для кнопки Save
|
||
|
||
## 📱 Интеграция
|
||
|
||
### В MainActivity.kt
|
||
|
||
```kotlin
|
||
var showProfileScreen by remember { mutableStateOf(false) }
|
||
|
||
// Навигация из Settings
|
||
onProfileClick = {
|
||
showSettingsScreen = false
|
||
showProfileScreen = true
|
||
}
|
||
|
||
// Навигация из ChatsListScreen
|
||
onProfileClick = {
|
||
showProfileScreen = true
|
||
}
|
||
```
|
||
|
||
### Callbacks
|
||
|
||
```kotlin
|
||
ProfileScreen(
|
||
isDarkTheme = isDarkTheme,
|
||
accountName = accountName,
|
||
accountUsername = accountUsername,
|
||
accountPublicKey = accountPublicKey,
|
||
onBack = { showProfileScreen = false },
|
||
onSaveProfile = { name, username ->
|
||
// Сохранение изменений профиля
|
||
},
|
||
onLogout = {
|
||
// Выход из аккаунта
|
||
},
|
||
onNavigateToTheme = { /* ... */ },
|
||
onNavigateToSafety = { /* ... */ },
|
||
onNavigateToUpdates = { /* ... */ }
|
||
)
|
||
```
|
||
|
||
## 🎯 Реализованный функционал из архива
|
||
|
||
### Из `MyProfile.tsx`:
|
||
|
||
✅ Карточка профиля с аватаром
|
||
✅ Редактируемые поля name/username
|
||
✅ Кнопка сохранения изменений
|
||
✅ Копирование публичного ключа
|
||
✅ Навигация к Updates
|
||
✅ Навигация к Theme
|
||
✅ Навигация к Safety
|
||
✅ Кнопка Logout с предупреждением
|
||
|
||
### Из `SettingsInput.tsx`:
|
||
|
||
✅ Copy field с анимацией "copied"
|
||
✅ Editable fields
|
||
✅ Clickable items с иконками
|
||
✅ Colored icon backgrounds
|
||
|
||
### Из `ProfileCard.tsx`:
|
||
|
||
✅ Центрированный аватар с инициалами
|
||
✅ Отображение имени и username
|
||
✅ Короткая версия публичного ключа
|
||
|
||
## 🚀 Следующие шаги (TODO)
|
||
|
||
1. **Интеграция с AccountManager**
|
||
- Загрузка username из базы
|
||
- Сохранение изменений профиля
|
||
2. **Реализация Logout**
|
||
- Очистка данных аккаунта
|
||
- Переход на экран авторизации
|
||
3. **Экраны настроек**
|
||
- Safety Screen (резервное копирование seed фразы)
|
||
- Updates Screen (проверка обновлений)
|
||
- Theme Screen (расширенные настройки темы)
|
||
|
||
4. **Верификация**
|
||
- Бейдж верифицированного пользователя (как в архиве)
|
||
|
||
## 📝 Примечания
|
||
|
||
- Экран полностью адаптируется под темную/светлую тему
|
||
- Все тексты соответствуют оригиналу из архива
|
||
- Анимации сделаны в стиле Telegram (плавные fade transitions)
|
||
- Код организован с комментариями и разделителями для читаемости
|
||
|
||
## 🎨 Стилистика
|
||
|
||
Дизайн соответствует общей стилистике приложения:
|
||
|
||
- Минималистичный и чистый UI
|
||
- Rounded corners для современного вида
|
||
- Цветовая кодировка иконок для быстрой навигации
|
||
- Информативные подписи к каждой секции
|
||
- Визуальная иерархия через размеры шрифтов и цвета
|