Automatically scroll to bottom

Signed-off-by: Emmy D'Anello <emmy.danello@animath.fr>

chat/static/chat.js

@@ -95,8 +95,18 @@ function setChannels(new_channels) {
 }
 
 function receiveMessage(message) {
+    let scrollableContent = document.getElementById('chat-messages')
+    let isScrolledToBottom = scrollableContent.scrollHeight - scrollableContent.clientHeight <= scrollableContent.scrollTop + 1
+
     messages[message['channel_id']].set(message['id'], message)
     redrawMessages()
+
+    // Scroll to bottom if the user was already at the bottom
+    if (isScrolledToBottom)
+        scrollableContent.scrollTop = scrollableContent.scrollHeight - scrollableContent.clientHeight
+
+    if (message['content'].includes("@everyone"))
+        showNotification(channels[message['channel_id']]['name'], `${message['author']} : ${message['content']}`)
 }
 
 function fetchMessages(channel_id, offset = 0, limit = MAX_MESSAGES) {

chat/templates/chat/content.html

@@ -36,7 +36,7 @@
             </button>
         </h3>
     </div>
-    <div class="card-body overflow-y-scroll mw-100 h-100 flex-grow-0" id="chat-messages">
+    <div class="card-body d-flex flex-column-reverse flex-grow-0 overflow-y-scroll" id="chat-messages">
         <div class="text-center d-none" id="fetch-previous-messages">
             <a href="#" class="nav-link" onclick="event.preventDefault(); fetchPreviousMessages()">
                 {% trans "Fetch previous messages…" %}