Chat renders links and sends emoji reactions. Links: community bubbles and DM bubbles now run through noteBody (URLs → anchors, image URLs inline, npub mentions clickable, all content kept as text nodes — nothing from a relay reaches innerHTML); the public /chat page gets its own linkedBody (same splitter, nostr refs stay dim stubs since there are no profile screens there). Reactions: a 🙂 opener on every bubble (rides the edge like the delete ×, steps left on own rows) unfolds a six-emoji picker; tapping an existing chip joins that vote, your own reaction is highlighted, and picking a different emoji replaces it (kind-7 rumor on the channel stream, one per author, fold keeps the latest — inbound rendering already existed, this adds the sending half). Optimistic like sendMessage: the chip lands instantly and is rolled back to whatever stood before if signing/wrapping fails

Co-Authored-By: Claude Fable 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01MGzU12QrAA4G6BYGzGVdXz

1 files changed, 18 insertions, 1 deletions

diff --git a/src/style.css b/src/style.css
index ea9618e..ecf1338 100644
--- a/src/style.css
+++ b/src/style.css
@@ -419,11 +419,28 @@ hr.divider { margin: 16px 0; }
   background: var(--paper); color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer;
 }
 .chat-row:hover .chat-del { display: flex; }
-.chat-reacts { display: flex; gap: 5px; margin-top: 3px; }
+/* the react opener rides the bubble edge like the delete ×; on a mine-row
+   both show, so it steps left to clear the × */
+.chat-react-btn {
+  position: absolute; top: -7px; right: -7px; width: 18px; height: 18px;
+  display: none; align-items: center; justify-content: center;
+  border: 1px solid var(--line-strong); border-radius: 50%;
+  background: var(--paper); font-size: 10px; line-height: 1; cursor: pointer; padding: 0;
+}
+.chat-row:hover .chat-react-btn { display: flex; }
+.chat-row.mine .chat-react-btn { right: 14px; }
+.chat-react-picker { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
+.chat-react-picker button {
+  font-size: 15px; line-height: 1; padding: 4px 6px;
+  border: 1px solid var(--line); border-radius: 9px; background: var(--paper); cursor: pointer;
+}
+.chat-reacts { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
 .chat-react {
   font-size: 12px; background: var(--paper); border: 1px solid var(--line);
   border-radius: 9px; padding: 1px 7px;
 }
+.chat-react.clickable { cursor: pointer; }
+.chat-react.on { border-color: var(--accent); color: var(--accent); }
 .chat-compose {
   display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line);
   align-items: center; flex: 0 0 auto;