Per-element actions for elements in LiveView stream

Hi all

My go to pattern for handling data recently has been: have a Delete button on item. When user clicks the button, overlay the item with “Are you sure Yes/No”, and only delete the item when the user clicks “Yes”.

For non-streams this is easy.

socket
|> assign(a_list_of_items: items)
|> assign(requested_for_removal: nil)


# .... and then in a handle_event

socket |> assign(requested_for_removal: selected_item_id)

# .... and in heex

<div :for={ item <- @items}>
   <div :if={ item.id != @requested_for_removal }>item data</div>
   <div :if={ item.id == @requested_for_removal}>Are you sure? etc.</div>
</div>

For streams, however, this presents a bit of a problem. Since items are not retained in memory, I need to:

• fetch the item when delete is clicked
• find its index in the stream
• update the stream at that position with data like “requested for removal”
• and if, for example, I want to only have one such overlay on page, I need to somehow remove it from a previous element

Has someone implemented something similar, and is there a better way?

Perhaps render hidden divs and show them with JS by toggling class names on elements?