Compare commits

base: retoor:17bb88050a27051ab677e64255fd2fc8872be8d0
Branches Tags
retoor:main
retoor:feat/make-database-async
..
compare: retoor:f9f1179db5e72492e22b59cc0415577b599fa119
Branches Tags
retoor:main
retoor:feat/make-database-async

No commits in common. "17bb88050a27051ab677e64255fd2fc8872be8d0" and "f9f1179db5e72492e22b59cc0415577b599fa119" have entirely different histories.
17bb88050a ... f9f1179db5

3 changed files with 36 additions and 98 deletions
Show Stats Expand all files Collapse all files

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

@ -368,7 +368,7 @@ input[type="text"], .chat-input textarea {
}
}
.message.switch-user + .message, .message.long-time + .message, .message-list-bottom + .message{
.message.switch-user + .message, .message.long-time + .message, .message:first-child {
.time {
display: block;
opacity: 1;

117
src/snek/static/message-list.js
View File

@ -9,53 +9,8 @@ import {app} from "./app.js";
const LONG_TIME = 1000 * 60 * 20
export class ReplyEvent extends Event {
constructor(messageTextTarget) {
super('reply', { bubbles: true, composed: true });
this.messageTextTarget = messageTextTarget;
const newMessage = messageTextTarget.cloneNode(true);
newMessage.style.maxHeight = "0"
messageTextTarget.parentElement.insertBefore(newMessage, messageTextTarget);
newMessage.querySelectorAll('.embed-url-link').forEach(link => {
link.remove()
})
newMessage.querySelectorAll('picture').forEach(picture => {
const img = picture.querySelector('img');
if (img) {
picture.replaceWith(img);
}
})
newMessage.querySelectorAll('img').forEach(img => {
const src = img.src || img.currentSrc;
img.replaceWith(document.createTextNode(src));
})
newMessage.querySelectorAll('iframe').forEach(iframe => {
const src = iframe.src || iframe.currentSrc;
iframe.replaceWith(document.createTextNode(src));
})
newMessage.querySelectorAll('a').forEach(a => {
const href = a.getAttribute('href');
const text = a.innerText || a.textContent;
if (text === href || text === '') {
a.replaceWith(document.createTextNode(href));
} else {
a.replaceWith(document.createTextNode(`[${text}](${href})`));
}
})
this.replyText = newMessage.innerText.replaceAll("\n\n", "\n").trim();
newMessage.remove()
}
}
class MessageElement extends HTMLElement {
// static observedAttributes = ['data-uid', 'data-color', 'data-channel_uid', 'data-user_nick', 'data-created_at', 'data-user_uid'];
static observedAttributes = ['data-uid', 'data-color', 'data-channel_uid', 'data-user_nick', 'data-created_at', 'data-user_uid'];
isVisible() {
if (!this) return false;
@ -96,12 +51,6 @@ class MessageElement extends HTMLElement {
}
this.timeDiv = this.querySelector('.time span');
this.replyDiv = this.querySelector('.time a');
this.replyDiv.addEventListener('click', (e) => {
e.preventDefault();
this.dispatchEvent(new ReplyEvent(this.messageDiv));
})
}
if (!this.siblingGenerated && this.nextElementSibling) {
@ -150,9 +99,7 @@ class MessageList extends HTMLElement {
constructor() {
super();
app.ws.addEventListener("update_message_text", (data) => {
if (this.messageMap.has(data.uid)) {
this.upsertMessage(data);
}
this.upsertMessage(data);
});
app.ws.addEventListener("set_typing", (data) => {
this.triggerGlow(data.user_uid,data.color);
@ -161,33 +108,29 @@ class MessageList extends HTMLElement {
this.messageMap = new Map();
this.visibleSet = new Set();
this._observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
this.visibleSet.add(entry.target);
const messageElement = entry.target;
if (messageElement instanceof MessageElement) {
messageElement.updateUI();
entries.forEach((entry) => {
if (entry.isIntersecting) {
this.visibleSet.add(entry.target);
const messageElement = entry.target;
if (messageElement instanceof MessageElement) {
messageElement.updateUI();
}
} else {
this.visibleSet.delete(entry.target);
}
} else {
this.visibleSet.delete(entry.target);
}
});
});
console.log(this.visibleSet);
}, {
root: this,
threshold: 0,
root: this,
threshold: 0.1
})
for(const c of this.children) {
this._observer.observe(c);
if (c instanceof MessageElement) {
this.messageMap.set(c.dataset.uid, c);
}
if (c instanceof MessageElement) {
this.messageMap.set(c.dataset.uid, c);
}
}
this.endOfMessages = document.createElement('div');
this.endOfMessages.classList.add('message-list-bottom');
this.prepend(this.endOfMessages);
this.scrollToBottom(true);
}
@ -231,6 +174,7 @@ class MessageList extends HTMLElement {
};
document.addEventListener('keydown', escListener);
})
}
isElementVisible(element) {
if (!element) return false;
@ -243,13 +187,13 @@ class MessageList extends HTMLElement {
);
}
isScrolledToBottom() {
return this.isElementVisible(this.endOfMessages);
return this.isElementVisible(this.firstElementChild);
}
scrollToBottom(force = false, behavior= 'instant') {
if (force || !this.isScrolledToBottom()) {
this.firstElementChild.scrollIntoView({ behavior, block: 'end' });
scrollToBottom(force = false, behavior= 'smooth') {
if (force || this.isScrolledToBottom()) {
this.firstElementChild.scrollIntoView({ behavior, block: 'start' });
setTimeout(() => {
this.firstElementChild.scrollIntoView({ behavior, block: 'end' });
this.firstElementChild.scrollIntoView({ behavior, block: 'start' });
}, 200);
}
}
@ -283,8 +227,9 @@ class MessageList extends HTMLElement {
upsertMessage(data) {
let message = this.messageMap.get(data.uid);
const newMessage = !!message;
if (message) {
message.parentElement?.removeChild(message);
message.parentElement.removeChild(message);
}
if (!data.message) return
@ -294,16 +239,16 @@ class MessageList extends HTMLElement {
wrapper.innerHTML = data.html;
if (message) {
message.updateMessage(...(wrapper.firstElementChild._originalChildren || wrapper.firstElementChild.children));
message.updateMessage(...wrapper.firstElementChild._originalChildren);
} else {
message = wrapper.firstElementChild;
this.messageMap.set(data.uid, message);
this._observer.observe(message);
message = wrapper.firstElementChild;
this.messageMap.set(data.uid, message);
this._observer.observe(message);
}
const scrolledToBottom = this.isScrolledToBottom();
this.prepend(message);
if (scrolledToBottom) this.scrollToBottom(true);
if (scrolledToBottom) this.scrollToBottom(true, !newMessage ? 'smooth' : 'auto');
}
}

15
src/snek/templates/web.html
View File

@ -72,13 +72,12 @@ function throttle(fn, wait) {
// --- Scroll: load extra messages, throttled ---
let isLoadingExtra = false;
async function loadExtra() {
const firstMessage = messagesContainer.lastElementChild;
const firstMessage = messagesContainer.children[messagesContainer.children.length - 1];
if (isLoadingExtra || !isScrolledPastHalf() || !firstMessage) return;
isLoadingExtra = true;
const messages = await app.rpc.getMessages(channelUid, 0, firstMessage.dataset.created_at);
if (messages.length) {
const frag = document.createDocumentFragment();
messages.reverse();
messages.forEach(msg => {
const temp = document.createElement("div");
temp.innerHTML = msg.html;
@ -139,16 +138,10 @@ chatInputField.textarea.focus();
// --- Reply helper ---
function replyMessage(message) {
chatInputField.value = "```markdown\n> " + (message || '').trim().split("\n").join("\n> ") + "\n```\n";
chatInputField.textarea.dispatchEvent(new Event('change', { bubbles: true }));
chatInputField.value = "```markdown\n> " + (message || '').split("\n").join("\n> ") + "\n```\n";
chatInputField.focus();
}
messagesContainer.addEventListener("reply", (e) => {
const messageText = e.replyText || e.messageTextTarget.textContent.trim();
replyMessage(messageText);
})
// --- Mention helpers ---
function extractMentions(message) {
return [...new Set(message.match(/@\w+/g) || [])];
@ -222,7 +215,7 @@ document.addEventListener('keydown', function(event) {
keyTimeout = setTimeout(() => { gPressCount = 0; }, 300);
if (gPressCount === 2) {
gPressCount = 0;
messagesContainer.lastElementChild?.scrollIntoView({ block: "end", inline: "nearest" });
messagesContainer.querySelector(".message:first-child")?.scrollIntoView({ block: "end", inline: "nearest" });
loadExtra();
}
}
@ -261,7 +254,7 @@ function updateLayout(doScrollDown) {
function isScrolledPastHalf() {
let scrollTop = messagesContainer.scrollTop;
let scrollableHeight = messagesContainer.scrollHeight - messagesContainer.clientHeight;
return Math.abs(scrollTop) > scrollableHeight / 2;
return scrollTop < scrollableHeight / 2;
}
// --- Initial layout update ---