# 🗺️ 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