82 lines
1.8 KiB
Markdown
82 lines
1.8 KiB
Markdown
### 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. |