### 1. Manual Save

#### ✅ "Save Session" Button

- Button icon: 🖫 (diskette), with tooltip: "Save session"
    
- Opens modal:
    
    - Input: name of the session
        
    - Option: overwrite existing session with same name (if applicable)
        
- Stores:
    
    - Name
        
    - Timestamp
        
    - State (`data`)
        
    - `isAutosave: false`
        

---

### 2. Saved Sessions Panel

#### ✅ Access

- Button/icon to open modal or dropdown with saved sessions
    

#### 🔁 Display Rules

- Top item: "Autosaved Session" (non-deletable, clearly labeled)
    
- Followed by manually saved sessions, **sorted alphabetically by name**
    

#### ✅ Item UI Elements

- Session name
    
- Save timestamp
    
- Load button (clickable name)
    
- Delete button (only for manual saves)
    
    - Delete must open confirmation modal:
        
        > “Delete this saved session? This action cannot be undone.”
        

#### ✅ Loading a Saved Session

- Replaces current app state with the saved one
    
- If unsaved changes exist, confirm before loading:
    
    > “Load saved session? This will replace your current progress.”
    

---

### 🧠 Logic Extension: Loading Saved Sessions & Autosave

> ✅ **When the user loads a saved session, autosave continues in the background.**

- The **loaded state becomes the new working session**.
    
- All further changes are autosaved into the `Autosaved Session`.
    
- The user can still press "Save Session" again:
    
    - If using the **same name**, prompt:
        
        > “Overwrite the session ‘ChillBeat’? This will replace the saved version.”
        
        - Or offer a new name input
            
- User can also choose to **delete the older version** after saving.