Channel list.

Browse Source
This commit is contained in:
retoor 2025-03-08 07:22:14 +01:00
parent 24260f9c37
commit 1b72063a5b
2 changed files with 15 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/snek/static/base.css
View File

@ -102,7 +102,7 @@ a {
overflow-y: auto;
}
.chat-messages {
.chat-messages, .threads {
flex: 1;
overflow-y: scroll;
scrollbar-width: none;
@ -130,7 +130,7 @@ a {
display: none;
}
.chat-messages .message {
.chat-messages .message, .threads .thread {
display: flex;
align-items: flex-start;
margin-bottom: 0;
@ -138,7 +138,7 @@ a {
border-radius: 8px;
}
.chat-messages .message .avatar {
.chat-messages .message .avatar, .threads .thread .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
@ -152,11 +152,11 @@ a {
margin-right: 15px;
}
.chat-messages .message .message-content {
.chat-messages .message .message-content, .threads .thread .message-content {
flex: 1;
}
.chat-messages .message .message-content .author {
.chat-messages .message .message-content .author, .threads .thread .message-content .author {
font-weight: bold;
color: #f05a28;
margin-bottom: 3px;
@ -172,7 +172,7 @@ word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.chat-messages .message .message-content .text {
.chat-messages .message .message-content .text, .threads .thread .message-content .text {
margin-bottom: 5px;
color: #e6e6e6;
word-break: break-word;
@ -191,7 +191,7 @@ hyphens: auto;
}
}
.chat-messages .message .message-content .time {
.chat-messages .message .message-content .time, .threads .thread .message-content .time {
font-size: 0.8em;
color: #aaa;
}
@ -294,7 +294,7 @@ input[type="text"], .chat-input textarea {
background-color: #555;
}
.chat-messages {
.chat-messages, .threads {
scrollbar-width: none;
scrollbar-color: #888 #f1f1f1;
}

77
src/snek/templates/threads.html
View File

@ -2,12 +2,12 @@
{% block main %}
<section class="chat-area" id="chat">
<div class="chat-messages">
<div class="threads">
{% for thread in threads %}
{% autoescape false %}
<div style="max-width:100%;" data-uid="{{thread.uid}}" data-color="{{thread.last_message_user_color}}" data-channel_uid="{{thread.uid}}"
data-user_nick="{{last_message_user_nick}}" data-created_at="{{thread.created_at}}" data-user_uid="{{user_uid}}"
class="message">
class="thread">
<div class="avatar" style="opacity: 1; background-color: {{thread.last_message_user_color}}; color: black;"><img
src="/avatar/{{thread.last_message_user_uid}}.svg" /></div>
<div class="message-content">
@ -32,71 +32,11 @@
});
}
function isElementVisible(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
const messagesContainer = document.querySelector(".chat-messages");
function isScrolledPastHalf() {
let scrollTop = messagesContainer.scrollTop;
let scrollableHeight = messagesContainer.scrollHeight - messagesContainer.clientHeight;
if (scrollTop < scrollableHeight / 2) {
return true;
}
return false;
}
let isLoadingExtra = false;
async function loadExtra() {
const firstMessage = messagesContainer.querySelector(".message:first-child");
if (isLoadingExtra) {
return;
}
if (!isScrolledPastHalf()) {
return;
}
isLoadingExtra = true;
const messages = await app.rpc.getMessages(channelUid, 0, firstMessage.dataset.created_at);
messages.forEach((message) => {
firstMessage.insertAdjacentHTML("beforebegin", message.html);
})
updateLayout(false);
isLoadingExtra = false;
}
messagesContainer.addEventListener("scroll", () => {
loadExtra();
});
const threadsContainer = document.querySelector(".chat-threads");
function updateLayout(doScrollDown) {
const messagesContainer = document.querySelector(".chat-messages");
updateTimes();
let previousUser = null;
document.querySelectorAll(".message").forEach((message) => {
if (previousUser !== message.dataset.user_uid) {
message.classList.add("switch-user");
previousUser = message.dataset.user_uid;
} else {
message.classList.remove("switch-user");
}
});
lastMessage = messagesContainer.querySelector(".message:last-child");
if (doScrollDown) {
lastMessage.scrollIntoView({ inline: "nearest" });
}
}
setInterval(updateTimes, 1000);
@ -131,20 +71,17 @@
}
}
const messagesContainer = document.querySelector(".chat-messages");
const lastMessage = messagesContainer.querySelector(".message:last-child");
const doScrollDownBecauseLastMessageIsVisible = !lastMessage || isElementVisible(lastMessage);
const threadsContainer = document.querySelector(".chat-threads");
const message = document.createElement("div");
message.innerHTML = data.html;
document.querySelector(".chat-messages").appendChild(message.firstChild);
updateLayout(doScrollDownBecauseLastMessageIsVisible);
document.querySelector(".chat-threads").appendChild(message.firstChild);
updateLayout();
setTimeout(() => {
updateLayout(doScrollDownBecauseLastMessageIsVisible)
updateLayout()
}, 1000);
});
initInputField(document.querySelector("textarea"));
updateLayout(true);
</script>
{% endblock %}