stefankoelle/icloud-contacts-sync
1
0
Fork 0
mirror of https://github.com/skoelle/icloud-contacts-sync.git synced 2026-09-18 07:50:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: show reactions on chat messages, fix infinite scroll

Browse Source 
- Add reaction display (emoji + user) below each message bubble
- Move sentinel/loading/end elements inside scrollable chat container
- Use chatBox as IntersectionObserver root for proper scroll detection
- Increase chat container max-height to 600px
This commit is contained in:
stefankoelle
2026-09-17 19:51:45 +02:00
parent 43ce0bcfe1
commit 0594a86894
1 changed files with 42 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/templates/contact.html
+39 -5
View File
@@ -331,7 +331,7 @@
display: flex;
flex-direction: column;
gap: 0.75rem;
max-height: 500px;
max-height: 600px;
overflow-y: auto;
padding: 0.5rem 0;
}
@@ -428,6 +428,29 @@
color: #aaa;
font-size: 0.75rem;
}
.chat-reactions {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
margin-top: 0.25rem;
padding: 0 0.5rem;
}
.chat-reaction {
display: inline-flex;
align-items: center;
gap: 0.15rem;
padding: 0.1rem 0.35rem;
background: rgba(0,0,0,0.05);
border-radius: 10px;
font-size: 0.65rem;
color: #555;
}
.chat-reaction-emoji {
font-size: 0.75rem;
}
</style>
</head>
<body>
@@ -592,11 +615,12 @@
{% if chat_enabled %}
<div class="chat-section">
<div class="section-title">Nachrichten</div>
<div id="chat-messages" class="chat-messages"></div>
<div id="chat-messages" class="chat-messages">
<div id="chat-loading" class="chat-loading" style="display:none">Lade Nachrichten…</div>
<div id="chat-end" class="chat-end" style="display:none"></div>
<div id="chat-sentinel" style="height:1px"></div>
</div>
</div>
{% endif %}
</div>
@@ -665,6 +689,13 @@
}
const text = m.content ? escHtml(m.content) : '<span class="chat-msg-type">[' + m.message_type + ']</span>';
html += '<div class="chat-msg-bubble">' + text + '</div>';
if (m.reactions && m.reactions.length > 0) {
html += '<div class="chat-reactions">';
for (const r of m.reactions) {
html += '<span class="chat-reaction"><span class="chat-reaction-emoji">' + escHtml(r.reaction || r.emoji || "") + '</span>' + (r.user ? " " + escHtml(r.user) : "") + '</span>';
}
html += '</div>';
}
html += '<div class="chat-msg-meta">';
html += '<span class="chat-msg-time">' + fmtTime(m.timestamp_ms) + '</span>';
if (m.platform) {
@@ -697,7 +728,10 @@
loading.style.display = "none";
if (!data.messages || data.messages.length === 0) {
if (total === 0) {
chatBox.innerHTML = '<div class="chat-empty">Keine Nachrichten gefunden</div>';
const empty = document.createElement("div");
empty.className = "chat-empty";
empty.textContent = "Keine Nachrichten gefunden";
chatBox.insertBefore(empty, sentinel);
} else {
endEl.textContent = "Alle Nachrichten geladen";
endEl.style.display = "";
@@ -706,7 +740,7 @@
return;
}
for (const m of data.messages) {
chatBox.appendChild(renderMsg(m));
chatBox.insertBefore(renderMsg(m), sentinel);
}
offset += data.messages.length;
if (offset >= total) {
@@ -722,7 +756,7 @@
const observer = new IntersectionObserver(entries => {
if (entries[0].isIntersecting && !loading_) loadMore();
}, { rootMargin: "200px" });
}, { root: chatBox, rootMargin: "200px" });
observer.observe(sentinel);
})();
</script>