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.
191 lines
12 KiB
Markdown
191 lines
12 KiB
Markdown
# 🗺️ 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
|
||
|
||
```kotlin
|
||
// 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
|