feat: Implement Profile Screen with full functionality and navigation
- 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.
This commit is contained in:
k1ngsterr1
187
docs/PROFILE_SCREEN.md
Normal file
187
docs/PROFILE_SCREEN.md
Normal file
@@ -0,0 +1,187 @@
|
||||
# 👤 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 для современного вида
|
||||
- Цветовая кодировка иконок для быстрой навигации
|
||||
- Информативные подписи к каждой секции
|
||||
- Визуальная иерархия через размеры шрифтов и цвета
|
||||
Reference in New Issue
Block a user