- 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.
6.9 KiB
👤 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
var showProfileScreen by remember { mutableStateOf(false) }
// Навигация из Settings
onProfileClick = {
showSettingsScreen = false
showProfileScreen = true
}
// Навигация из ChatsListScreen
onProfileClick = {
showProfileScreen = true
}
Callbacks
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)
-
Интеграция с AccountManager
- Загрузка username из базы
- Сохранение изменений профиля
-
Реализация Logout
- Очистка данных аккаунта
- Переход на экран авторизации
-
Экраны настроек
- Safety Screen (резервное копирование seed фразы)
- Updates Screen (проверка обновлений)
- Theme Screen (расширенные настройки темы)
-
Верификация
- Бейдж верифицированного пользователя (как в архиве)
📝 Примечания
- Экран полностью адаптируется под темную/светлую тему
- Все тексты соответствуют оригиналу из архива
- Анимации сделаны в стиле Telegram (плавные fade transitions)
- Код организован с комментариями и разделителями для читаемости
🎨 Стилистика
Дизайн соответствует общей стилистике приложения:
- Минималистичный и чистый UI
- Rounded corners для современного вида
- Цветовая кодировка иконок для быстрой навигации
- Информативные подписи к каждой секции
- Визуальная иерархия через размеры шрифтов и цвета