From e43e6dade447bf8ce5150323719937e28ebabe74 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Fri, 4 Sep 2026 09:07:52 -0700 Subject: 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 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01MGzU12QrAA4G6BYGzGVdXz --- src/style.css | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) (limited to 'src/style.css') 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; -- cgit v1.2.3