Show buttons depending on reaction presence

app/assets/stylesheets/comments.css

@@ -81,6 +81,20 @@
     }
   }
 
+  .comment__reaction {
+    opacity: 0.66;
+
+    @media (any-hover: hover) {
+      .comment:not(:hover) & {
+        opacity: 0;
+      }
+    }
+
+    .comment--mine & {
+      display: none;
+    }
+  }
+
   .comment__event {
     max-inline-size: var(--comment-max);
 

app/assets/stylesheets/reactions.css

@@ -108,6 +108,10 @@
     --btn-size: var(--reaction-size);
 
     font-size: 0.75em;
+
+    .reactions:not(:has(.reaction)) & {
+      display: none;
+    }
   }
 
   /* Quick reactions

app/views/cards/comments/_comment.html.erb

@@ -22,8 +22,8 @@
           <% end %>
 
           <%= render "cards/comments/reactions/quick_reaction", comment: comment do %>
-            <button class="comment__reaction btn btn--circle borderless fill-transparent translucent" data-action="click->dialog#open:stop">
-              <%= icon_tag "reaction" %>
+            <button class="comment__reaction btn btn--circle borderless fill-transparent" data-action="click->dialog#open:stop">
+              <%= icon_tag "menu-dots-horizontal" %>
             </button>
           <% end %>
         </div>