Channel list.

src/snek/static/base.css

@@ -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;
 }

src/snek/templates/threads.html

@@ -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");
+    const threadsContainer = document.querySelector(".chat-threads");
-
-    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();
-    });
 
     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 threadsContainer = document.querySelector(".chat-threads");
-        const lastMessage = messagesContainer.querySelector(".message:last-child");
-        const doScrollDownBecauseLastMessageIsVisible = !lastMessage || isElementVisible(lastMessage);
 
         const message = document.createElement("div");
         message.innerHTML = data.html;
-        document.querySelector(".chat-messages").appendChild(message.firstChild);
+        document.querySelector(".chat-threads").appendChild(message.firstChild);
-        updateLayout(doScrollDownBecauseLastMessageIsVisible);
+        updateLayout();
         setTimeout(() => {
-            updateLayout(doScrollDownBecauseLastMessageIsVisible)
+            updateLayout()
         }, 1000);
     });
 
-    initInputField(document.querySelector("textarea"));
     updateLayout(true);
 </script>
 {% endblock %}