diff options
| -rw-r--r-- | src/features/messages.js | 8 | ||||
| -rw-r--r-- | src/style.css | 10 |
2 files changed, 12 insertions, 6 deletions
diff --git a/src/features/messages.js b/src/features/messages.js index 318d1cc..d5d286a 100644 --- a/src/features/messages.js +++ b/src/features/messages.js @@ -18104,7 +18104,7 @@ export function messagesFeature(ctx) { // the message's own custom emoji (an edit brings its own set) const em = emojiTagMap((edit && edit.author === m.author ? edit.rumor : m.rumor).tags); return h( - 'div', { class: 'chat-row' + (mine ? ' mine' : '') + (grouped ? ' grouped' : '') }, + 'div', { class: 'chat-row group' + (mine ? ' mine' : '') + (grouped ? ' grouped' : '') }, grouped ? h('div', { class: 'chat-avatar spacer' }) : avatar(m.author), h('div', { class: 'chat-body' }, grouped ? null : h('div', { class: 'chat-meta' }, @@ -18146,8 +18146,7 @@ export function messagesFeature(ctx) { title: t('msgReact'), onClick: (e) => { e.stopPropagation(); sendReaction(room, chId, m, emoji); }, }, reactNode(emoji), n > 1 ? ' ' + n : ''))) - : null)(zapChip(m.rumor.id, { cls: 'chat-react', onClick: canZapPk(m.author) ? () => zapMessage(m.author, m.rumor.id) : null, onHold: () => openZapSettings(m.author, m.rumor.id) }))), - msgZapBtn(m.author, m.rumor.id))) + : null)(zapChip(m.rumor.id, { cls: 'chat-react', onClick: canZapPk(m.author) ? () => zapMessage(m.author, m.rumor.id) : null, onHold: () => openZapSettings(m.author, m.rumor.id) }))))) ); }); } @@ -18767,8 +18766,7 @@ export function messagesFeature(ctx) { ui.msgSheet = ui.msgSheet === m.rumor.id ? null : m.rumor.id; render(); }), - }, dmQuote(m), ...(m.rumor.kind === 15 ? [] : noteBody(m.rumor.content, 0, emojiTagMap(m.rumor.tags))), ...attachmentNodes(m.rumor, m.wn), dmChips(m)), - m.mine ? null : msgZapBtn(m.rumor.pubkey, m.rumor.id)), + }, dmQuote(m), ...(m.rumor.kind === 15 ? [] : noteBody(m.rumor.content, 0, emojiTagMap(m.rumor.tags))), ...attachmentNodes(m.rumor, m.wn), dmChips(m))), h('div', { class: 'chat-time' }, timeLabel(m.rumor.created_at * 1000))))) : [h('div', { class: 'muted small', style: 'text-align:center;padding:24px 0' }, t('msgNoDmsYet'))])), dmReplyBar(), diff --git a/src/style.css b/src/style.css index 17412b2..1db0984 100644 --- a/src/style.css +++ b/src/style.css @@ -534,6 +534,13 @@ html:has(#app .chat-card), body:has(#app .chat-card) { overflow: hidden; } } .chat-row { display: flex; gap: 9px; align-items: flex-start; } .chat-row.grouped { margin-top: -6px; } +/* group chats: the avatar sits beside the name and the bubble starts at the + left edge under both, instead of indented a whole avatar column */ +.chat-row.group { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 9px; row-gap: 3px; align-items: center; } +.chat-row.group > .chat-body { display: contents; } +.chat-row.group .chat-meta { grid-column: 2; margin-bottom: 0; } +.chat-row.group .chat-line { grid-column: 1 / -1; } +.chat-row.group > .chat-avatar.spacer { display: none; } .chat-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: var(--accent-soft); @@ -623,7 +630,8 @@ html:has(#app .chat-card), body:has(#app .chat-card) { overflow: hidden; } .chat-react.on { border-color: color-mix(in srgb, currentColor 55%, transparent); font-weight: 600; } /* zap tally: a little bolt + sats, amber on both themes; .on = we zapped it */ .zap-tally { display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 650; color: #e6a800; white-space: nowrap; flex-shrink: 0; } -.zap-tally.chat-react { font-size: 12px; padding: 1px 7px 1px 5px; } +/* in a bubble the zap total is just the amber bolt + sats: no pill, no ring */ +.zap-tally.chat-react { font-size: 12px; padding: 1px 2px 1px 0; background: none; border: none; } .zap-tally.clickable { cursor: pointer; } /* the one-tap ⚡ beside someone else's chat bubble */ .chat-line { display: flex; align-items: center; gap: 4px; } |