From ad496c0fb53706f221241dd48440c68d3333937d Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Sun, 6 Sep 2026 19:48:19 -0700 Subject: Chat reactions render inside the bubble (Telegram-style), not floating below it. Reactions were a sibling of the bubble (a separate row under it), so they hung outside the message. Moved the reaction pills inside .chat-bubble, tucked under the text, across all three renderers: community channel messages, DMs, and the read-only public /chat page. The pill background and the "your reaction" highlight border now derive from the bubble's own text colour (color-mix on currentColor), so they read correctly on both the plain bubble and the accent "me" bubble. Tapping a pill stops propagation so it toggles the reaction without also opening the message action sheet. Co-Authored-By: Claude Opus 4.8 Claude-Session: https://claude.ai/code/session_01MGzU12QrAA4G6BYGzGVdXz --- src/public-chat.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'src/public-chat.js') diff --git a/src/public-chat.js b/src/public-chat.js index d3dd042..0cdadc4 100644 --- a/src/public-chat.js +++ b/src/public-chat.js @@ -253,10 +253,10 @@ export function mountPublicChat() { m.author === COMMUNITY.owner ? h('span', { class: 'chat-badge' }, t('msgAdmin')) : null, h('span', { class: 'chat-time' }, timeAgo(ms / 1000))), h('div', { class: 'chat-bubble' }, quote, ...linkedBody(content), - edit && edit.author === m.author ? h('span', { class: 'chat-edited' }, ' ' + t('msgEdited')) : null), - reacts && reacts.size ? h('div', { class: 'chat-reacts' }, - ...[...[...reacts.values()].reduce((m2, e) => m2.set(e, (m2.get(e) || 0) + 1), new Map()).entries()] - .map(([emoji, n]) => h('span', { class: 'chat-react' }, emoji + (n > 1 ? ' ' + n : '')))) : null))); + edit && edit.author === m.author ? h('span', { class: 'chat-edited' }, ' ' + t('msgEdited')) : null, + reacts && reacts.size ? h('div', { class: 'chat-reacts' }, + ...[...[...reacts.values()].reduce((m2, e) => m2.set(e, (m2.get(e) || 0) + 1), new Map()).entries()] + .map(([emoji, n]) => h('span', { class: 'chat-react' }, emoji + (n > 1 ? ' ' + n : '')))) : null)))); } if (stick) log.scrollTop = log.scrollHeight; } -- cgit v1.2.3