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

[kommunarr]

Guidelines

• [X] I have searched the issue tracker for open and closed issues that are similar to the feature request I want to file, without success.
• [X] I have searched the documentation 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.

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

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

[kommunarr]

To my understanding, NeDB doesn't natively support "Undo," so we would have to implement it indirectly. It might take someone more knowledgeable than me to evaluate what's best here. Here are a couple of naive thoughts on how this could be done: a. Store deleted object(s) in state after their deletion. Re-add them to DB when "Undo" is clicked. b. Change deletion to represent the presence of a deletion flag. Undo operation flips the flag. Actually delete DB entries with deletion flag present after X amount of time or when program is started up next.