🔗 Use a view model with Phoenix LiveView

I was working on the interface for Mailcast, where I wanted to highlight search matches and present a UI overlay for deleted items, with undo support. Each record, then, needed to know if it was selected or deleted.

Mailcast interface with inline search matching and deleting items with undo support.

For each record, you need to know if it is selected or deleted, and in the case of the deleted items that can be undone, some information to support the undo is needed.

There are a few options you might consider:

1. You could keep lists of selected and deleted items and then compare them during render.
2. It would be nicer to be able to use {item.selected} and {item.deleted}, but then you need to litter your model with fields to support the UI state (you would need virtual fields in an Ecto schema).
3. The third option is to use a view model to decorate the records with the UI state.