Reactions
The emoji people have put on a message, each with its count and pressed when you're among them, and a button to add one. Forms, so toggling one is a request your app already handles.
Pills and the add button
Each pill posts to toggle itself; the pressed one is yours. The add button opens whatever picker you wire it to, here a native popover.
<%= message_reactions do |r| %>
<% r.reaction "π", count: 3, reacted: true, names: [ "Ben Reyes", "Chloe Park", "You" ], url: "#" %>
<% r.reaction "π", count: 1, names: [ "Ana Silva" ], url: "#" %>
<% r.reaction "π", count: 2, url: "#" %>
<% r.add popovertarget: "reactions_picker" %>
<% end %>
<div id="reactions_picker" popover class="rounded-lg border border-neutral-200 bg-white p-1 shadow-lg dark:border-neutral-700 dark:bg-neutral-900">
<% %w[π π β€οΈ π π β
].each do |emoji| %>
<button type="button" class="rounded-md px-2 py-1 text-lg hover:bg-neutral-100 dark:hover:bg-neutral-800"><%= emoji %></button>
<% end %>
</div>Under a message
m.reactions { |r| β¦ } builds them in place, under the body.
Yes! I'll book the corner table.
<div class="mx-auto max-w-md">
<%= message "Yes! I'll book the corner table.", author: "Ana Silva", avatar: true, time: @now - 20.minutes do |m| %>
<% m.reactions { |r| r.reaction "π", count: 1, reacted: true, url: "#"; r.reaction "π", count: 2, url: "#" } %>
<% end %>
</div>