Add an add-reaction button to the reaction row (#78)

Adding to a message that already had reactions meant going back up to
the hover row's 🙂. A "+🙂" button now sits at the end of the row of
reaction pills, always visible once the message has at least one
reaction, and opens the same emoji picker.

The picker anchors to the left edge of the pill row rather than the
button: the button moves right with every added reaction, and a picker
hanging off it ran past the edge of a phone screen. Both buttons share
the picker's open state, so only one picker is ever open at a time.

MessageList had no tests; this adds a few covering the new button.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

frontend/src/components/MessageList.css

@@ -391,6 +391,7 @@
 }
 
 .message-reaction-pills {
+  position: relative;
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
@@ -430,3 +431,24 @@
   width: 100%;
   resize: vertical;
 }
+
+/* The picker anchors to the row of pills, not to this button: the button's
+   position moves right with every added reaction, and a picker hanging
+   off it ran past the edge of a phone screen. (No `position` here on
+   purpose -- .message-reaction-wrap's relative would re-anchor it.) */
+.message-reaction-add-wrap {
+  display: contents;
+}
+
+/* #78: always visible once a message has reactions, so adding to the pile
+   doesn't need the hover-row button. Same shape as the pills it sits
+   beside, kept quieter so it doesn't read as another reaction. */
+.message-reaction-add {
+  gap: 2px;
+  opacity: 0.8;
+}
+
+.message-reaction-add:hover,
+.message-reaction-add:focus-visible {
+  opacity: 1;
+}