🔗 How to provide undo delete with Phoenix LiveView

Destructive actions need to be handled carefully, so that a user doesn’t inadvertently lose important data. The most common solution in a web app is to provide a confirmation step before the action is applied, but providing an undo option makes deletion frictionless and safe. This pattern can also be seen in the ability to undo a send operation in email apps.

While I was working on the interface for Mailcast, I wanted to provide an undo option after a user deleted an email alias. To do this, I needed to store the state per item. Rather than littering the model with virtual fields, I decided to use a view model to decorate the records with the UI state.