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
190
docs/PROFILE_NAVIGATION.md
Normal file
190
docs/PROFILE_NAVIGATION.md
Normal file
@@ -0,0 +1,190 @@
|
||||
# 🗺️ 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
|
||||
Reference in New Issue
Block a user