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.
12 KiB
12 KiB
🗺️ Profile Screen Navigation Flow
┌─────────────────────────────────────────────────────────────────┐
│ ChatsListScreen │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ Header │ │
│ │ ┌────────┐ │ │
│ │ │ Avatar │ Username [⚙️ Settings] │ │
│ │ └────────┘ │ │
│ │ │ │
│ │ Click Avatar/Name ──────────────────────────────► │ │
│ └──────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
│
│ showProfileScreen = true
▼
┌─────────────────────────────────────────────────────────────────┐
│ ProfileScreen │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ [◀] Profile [Save] ←──┐ │ │
│ ├──────────────────────────────────────────────────────┤ │ │
│ │ │ │ │
│ │ ┌─────────────┐ │ │ │
│ │ │ │ │ │ │
│ │ │ 👤 AB │ Avatar (100dp) │ │ │
│ │ │ │ │ │ │
│ │ └─────────────┘ │ │ │
│ │ │ │ │
│ │ Alexander Brown │ │ │
│ │ @alex • 04c...e5b │ │ │
│ │ │ │ │
│ ├──────────────────────────────────────────────────────┤ │ │
│ │ PROFILE INFORMATION │ │ │
│ │ ┌────────────────────────────────────────────────┐ │ │ │
│ │ │ Your name │ │ │ │
│ │ │ Alexander Brown ← Editable ─────────────┼─┘ │
│ │ ├────────────────────────────────────────────────┤ │ │
│ │ │ Username │ │ │
│ │ │ @alex ← Editable ─────────────┼─┐ │
│ │ └────────────────────────────────────────────────┘ │ │ │
│ │ │ │ │
│ │ ┌────────────────────────────────────────────────┐ │ │ │
│ │ │ Public Key 04c266b98ae...8e5b [📋] │ │ │ │
│ │ └────────────────────────────────────────────────┘ │ │ │
│ │ 💡 This is your public key... │ │ │
│ │ │ │ │
│ ├──────────────────────────────────────────────────────┤ │ │
│ │ SETTINGS │ │ │
│ │ ┌────────────────────────────────────────────────┐ │ │ │
│ │ │ 🔄 Updates ❯ │────┼──►│
│ │ │ Check for new versions │ │ │ │
│ │ ├────────────────────────────────────────────────┤ │ │ │
│ │ │ 🎨 Theme ❯ │────┼──►│
│ │ │ Customize appearance │ │ │ │
│ │ ├────────────────────────────────────────────────┤ │ │ │
│ │ │ 🛡️ Safety ❯ │────┼──►│
│ │ │ Backup and security settings │ │ │ │
│ │ └────────────────────────────────────────────────┘ │ │ │
│ │ 💡 Please view screen alone... │ │ │
│ │ │ │ │
│ │ ┌────────────────────────────────────────────────┐ │ │ │
│ │ │ 🚪 Logout │ │ │ │
│ │ │ Sign out of your account │────┼──►│
│ │ └────────────────────────────────────────────────┘ │ │ │
│ │ 💡 After logging out... │ │ │
│ │ │ │ │
│ └──────────────────────────────────────────────────────┘ │ │
└─────────────────────────────────────────────────────────────────┘
│
┌──────────────────┼──────────────────┐
│ │ │
▼ ▼ ▼
┌────────────┐ ┌────────────┐ ┌────────────┐
│ Updates │ │ Theme │ │ Safety │
│ Screen │ │ Screen │ │ Screen │
│ (TODO) │ │ │ │ (TODO) │
└────────────┘ └────────────┘ └────────────┘
Alternative Entry Point:
┌─────────────────────────────────────────────────────────────────┐
│ SettingsScreen │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ [◀] Settings │ │
│ ├──────────────────────────────────────────────────────────┤ │
│ │ ┌────────────────────────────────────────────────────┐ │ │
│ │ │ 👤 Alexander Brown ❯ │──┼──►│
│ │ │ +7 775 9932587 │ │ │
│ │ │ 04c...e5b │ │ │
│ │ └────────────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ Click Profile Card ─────────────────────────────────► │ │
│ └──────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
│
│ showProfileScreen = true
│ showSettingsScreen = false
▼
ProfileScreen
🎯 Navigation States
// MainActivity state management
var showProfileScreen by remember { mutableStateOf(false) }
var showSettingsScreen by remember { mutableStateOf(false) }
// From ChatsListScreen
onProfileClick = {
showProfileScreen = true // Direct to profile
}
// From SettingsScreen
onProfileClick = {
showSettingsScreen = false // Close settings
showProfileScreen = true // Open profile
}
// Back from ProfileScreen
onBack = {
showProfileScreen = false // Returns to previous screen
}
✨ User Interaction Flow
1️⃣ Editing Profile
User changes name/username
▼
Save button appears (animated)
▼
User clicks Save
▼
onSaveProfile(name, username) callback
▼
Data saved to AccountManager
▼
Save button disappears
2️⃣ Copying Public Key
User clicks Public Key field
▼
Copy to clipboard
▼
Show "Copied!" animation
▼
After 1.5s: back to normal state
3️⃣ Logout Flow
User clicks Logout
▼
onLogout() callback
▼
Clear account data
▼
Navigate to AuthFlow
🎨 Visual States
Save Button States
- Hidden: No changes made
- Visible (Animated): Changes detected
- Fade In + Expand Horizontally (200ms)
- Active: Can be clicked to save
- Hidden (Animated): After saving
- Fade Out + Shrink Horizontally (150ms)
Public Key Copy States
- Default: Shows truncated key (16 chars + "...")
- Copied: Shows "Copied!" in green
- Animated Transition: 1.5 second timer
Screen Transitions
- Fade In: 200ms when entering ProfileScreen
- Fade Out: 150ms when exiting ProfileScreen
- No Slide: Clean, simple fade transitions