refactor: Move action buttons inside message bubbles

- Move Reply, Quote, Map, Resend buttons inside message bubbles
- Unify Map button style (outline-secondary like others)
- Add subtle separator line between message and buttons
- Slightly smaller buttons (28px) for better fit inside bubbles

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
MarekWo
2026-01-26 21:10:16 +01:00
parent 6eb63ccbda
commit 3f6c87398d
2 changed files with 23 additions and 21 deletions
+6 -4
View File
@@ -133,7 +133,9 @@ main {
.message-actions {
display: flex;
gap: 0.25rem;
margin-top: 0.25rem;
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
/* Message Bubbles */
@@ -851,13 +853,13 @@ main {
/* Icon-only action buttons on message bubbles */
.btn-msg-action {
width: 32px;
height: 32px;
width: 28px;
height: 28px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
font-size: 0.875rem;
}
/* =============================================================================
+17 -17
View File
@@ -719,11 +719,11 @@ function createMessageElement(msg) {
</div>
<div class="message own">
<div class="message-content">${processMessageContent(msg.content)}</div>
</div>
<div class="message-actions justify-content-end">
<button class="btn btn-outline-secondary btn-msg-action" onclick='resendMessage(${JSON.stringify(msg.content)})' title="Resend">
<i class="bi bi-arrow-repeat"></i>
</button>
<div class="message-actions justify-content-end">
<button class="btn btn-outline-secondary btn-msg-action" onclick='resendMessage(${JSON.stringify(msg.content)})' title="Resend">
<i class="bi bi-arrow-repeat"></i>
</button>
</div>
</div>
</div>
`;
@@ -747,19 +747,19 @@ function createMessageElement(msg) {
<div class="message other">
<div class="message-content">${processMessageContent(msg.content)}</div>
${metaInfo ? `<div class="message-meta">${metaInfo}</div>` : ''}
</div>
<div class="message-actions">
<button class="btn btn-outline-secondary btn-msg-action" onclick="replyTo('${escapeHtml(msg.sender)}')" title="Reply">
<i class="bi bi-reply"></i>
</button>
<button class="btn btn-outline-secondary btn-msg-action" onclick='quoteTo(${JSON.stringify(msg.sender)}, ${JSON.stringify(msg.content)})' title="Quote">
<i class="bi bi-quote"></i>
</button>
${contactsGeoCache[msg.sender] ? `
<button class="btn btn-outline-primary btn-msg-action" onclick="showContactOnMap('${escapeHtml(msg.sender)}', ${contactsGeoCache[msg.sender].lat}, ${contactsGeoCache[msg.sender].lon})" title="Show on map">
<i class="bi bi-geo-alt"></i>
<div class="message-actions">
<button class="btn btn-outline-secondary btn-msg-action" onclick="replyTo('${escapeHtml(msg.sender)}')" title="Reply">
<i class="bi bi-reply"></i>
</button>
` : ''}
<button class="btn btn-outline-secondary btn-msg-action" onclick='quoteTo(${JSON.stringify(msg.sender)}, ${JSON.stringify(msg.content)})' title="Quote">
<i class="bi bi-quote"></i>
</button>
${contactsGeoCache[msg.sender] ? `
<button class="btn btn-outline-secondary btn-msg-action" onclick="showContactOnMap('${escapeHtml(msg.sender)}', ${contactsGeoCache[msg.sender].lat}, ${contactsGeoCache[msg.sender].lon})" title="Show on map">
<i class="bi bi-geo-alt"></i>
</button>
` : ''}
</div>
</div>
</div>
`;