FreeTubeApp / FreeTubeApp/FreeTube

[Feature Request]: "Undo" ability on certain toasts / popup messages

Open
#4,386 3 comments 0 reactions 0 assignees View on GitHub
E: ease of use improvement E: improvement existing feature E: new feature
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.