Stub out basic emoji presets

app/assets/stylesheets/reactions.css

@@ -4,6 +4,11 @@
     --reaction-border-color: var(--color-ink-lighter);
     --row-gap: 0;
 
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--inline-space-half);
+    inline-size: 100%;
     margin-block-start: calc(var(--block-space-half) / 2);
     margin-inline: calc(var(--column-gap) / -1);
   }
@@ -48,7 +53,6 @@
     --btn-border-color: var(--reaction-border-color);
 
     font-size: 0.74em;
-    margin-block-start: calc(var(--block-space-half) / 2);
 
     @media (any-hover: hover) {
       &:where(:not(:active):hover) {
@@ -87,4 +91,31 @@
   .reaction--deleting {
     animation: scale-fade-out 0.2s both;
   }
+
+  .reaction__popup {
+    --panel-padding: 0.5ch;
+    --offset: calc(-1 * var(--panel-padding));
+
+    inset: var(--offset) auto auto var(--offset);
+    min-inline-size: auto;
+    transform: none;
+  }
+
+  .reaction__quick-emojis {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+
+    .btn {
+      --btn-icon-size: 1.5ch;
+      --btn-size: 1.75rem;
+
+      position: relative;
+
+      @media (any-hover: hover) {
+        &:hover {
+          z-index: 1;
+        }
+      }
+    }
+  }
 }

app/helpers/emoji_helper.rb

@@ -0,0 +1,12 @@
+module EmojiHelper
+  REACTIONS = {
+    "👍" => "Thumbs up",
+    "👏" => "Clapping",
+    "👋" => "Waving hand",
+    "💪" => "Muscle",
+    "❤️" => "Red heart",
+    "😂" => "Face with tears of joy",
+    "🎉" => "Party popper",
+    "🔥" => "Fire"
+  }
+end

app/views/cards/comments/reactions/_reactions.html.erb

@@ -1,16 +1,37 @@
 <%= turbo_frame_tag comment, :reacting do %>
-  <div class="reactions flex flex-wrap align-center gap full-width">
+  <div class="reactions">
     <div id="<%= dom_id(comment, :reactions) %>" class="flex-inline flex-wrap gap">
       <%= render partial: "cards/comments/reactions/reaction", collection: comment.reactions.includes(:reacter).ordered %>
     </div>
 
     <%= turbo_frame_tag comment, :new_reaction do %>
-      <div class="flex-inline" data-controller="soft-keyboard">
-        <%= link_to new_card_comment_reaction_path(comment.card, comment), role: "button",
-              class: "btn reaction__action", action: "soft-keyboard#open" do %>
-          <%= icon_tag "reaction" %> <span class="for-screen-reader">Add a reaction</span>
-        <% end %>
+      <div class="position-relative" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside">
+        <button class="reaction__action btn btn--circle" data-action="click->dialog#open:stop">
+          <%= icon_tag "reaction" %>
+        </button>
+
+        <dialog class="reaction__popup popup panel fill-white shadow" data-dialog-target="dialog">
+          <div class="reaction__quick-emojis">
+            <% EmojiHelper::REACTIONS.each do |character, title| %>
+              <%= form_with model: [ comment.card, comment, Reaction.new ], data: { turbo_frame: dom_id(comment, :new_reaction), action: "dialog#close"} do |form| %>
+                <%= hidden_field_tag "comment[content]", character %>
+                <%= form.button type: "submit", title: title, class: "reaction__quick-emoji-btn btn btn--circle borderless", data: { emoji: character } do %>
+                  <span class="reaction__emoji"><%= character %></span>
+                  <span class="for-screen-reader"><%= title %></span>
+                <% end %>
+              <% end %>
+            <% end %>
+
+            <div class="flex-inline" data-controller="soft-keyboard">
+              <%= link_to new_card_comment_reaction_path(comment.card, comment), role: "button",
+                    class: "btn btn--circle borderless", action: "soft-keyboard#open" do %>
+                <%= icon_tag "reaction" %> <span class="for-screen-reader">Add a reaction</span>
+              <% end %>
+            </div>
+          </div>
+        </dialog>
       </div>
     <% end %>
+
   </div>
 <% end %>