FreeTubeApp / FreeTubeApp/FreeTube
[Feature Request]: "Undo" ability on certain toasts / popup messages
- Dominant language
- Vue
- Stars
- 21.9k
- Forks
- 1.5k
- Avg merge
- 1d 15h
- Merged PRs (30d)
- 62
Description
### Guidelines
- [X] I have searched the issue tracker for [open](https://github.com/FreeTubeApp/FreeTube/issues?q=is%3Aopen+is%3Aissue) and [closed](https://github.com/FreeTubeApp/FreeTube/issues?q=is%3Aissue+is%3Aclosed) issues that are similar to the feature request I want to file, without success.
- [X] I have searched the [documentation](https://docs.freetubeapp.io/) for information that matches the description of the feature request I want to file, without success.
- [X] This issue contains only one feature request.
### Problem Description
For data updates, we usually notify the user of the success of the deletion/addition/change through a toast. However, people will very often click through UI states very quickly, often not realizing that they made a potentially irreversible mistake until in the moment immediately thereafter, where we inform them of what has happened. This problem is worsened for non-English language users of FreeTube, for whom some of the relevant disclaimers or button text may not have been translated properly or at all.
### Proposed Solution
Present the user with the ability to undo that action by updating the `ft-toast` component to support an "Undo" action. This would be a great and tangible improvement to the UX, allowing users more control and time for consideration, which is especially important for tough-to-reverse or irreversible changes [like data deletion](https://uxmovement.com/buttons/how-to-design-destructive-actions-that-prevent-data-loss/).
This can be split up into two tasks:
1. Implement the functionality on the `ft-toast` component
2. Implement the new `ft-toast` functionality on applicable controls throughout FreeTube, usually destructive or irksome-to-reverse actions. Here are the ones that I find applicable:
- [X] "Remove from playlist"
- [ ] "Hide channel"
- [ ] "Remove from {playlistName}" (quick bookmark)
- [ ] "Remove from history"
- [ ] "Remove password"
- [ ] "Unsubscribe" (note that "Confirm before unsubscribing" optional feature provides confirmation prompt beforehand, but that feature may not be warranted to exist if this feature is implemented)
- [ ] (less necessary since confirmation prompt is provided beforehand) "Delete profile" / "Clear search history and cache" / "Remove watch history" / "Remove all subscriptions / profiles" / "Remove all playlists" / "Delete playlist" / "Remove duplicate videos" / "Remove watched videos" / "Delete selected [subscriptions]"
As for how this can be added to the `ft-toast`, one potential technical implementation would be adding a `prop` named something like `undoAction` that is of type `Function`. If that `prop` is present, an `Undo` button appears on the `ft-toast` whereupon a click/Space/Enter press invokes that function. A second `prop` that represents an array of arguments to the function may be needed as well for some cases.
### Alternatives Considered
It could be argued that the Undo button for certain UI states does not necessarily need to be a popup, and instead could be something more persistent (think the "Undo" after selecting "Hide" on a video in YT). But that may not work for many other UI states.
### Issue Labels
ease of use improvement, improvement to existing feature, new feature
### Additional Information
_No response_
Contributor guide
Research direction
Start with the ft-toast component, then trace the listed destructive controls such as Remove from playlist, Hide channel, and Remove from history. Done means applicable actions expose an accessible Undo control and correctly restore the prior state; the issue does not name specific files or tests to run.
Written by the indexing model from the issue text.
Assessment
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100