From b86dfe7351276ed2c06f575bef788dfa752eaaa5 Mon Sep 17 00:00:00 2001
From: Emmy D'Anello <emmy.danello@animath.fr>
Date: Sat, 27 Apr 2024 20:23:55 +0200
Subject: [PATCH] Automatically scroll to bottom

Signed-off-by: Emmy D'Anello <emmy.danello@animath.fr>
---
 chat/static/chat.js              | 10 ++++++++++
 chat/templates/chat/content.html |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/chat/static/chat.js b/chat/static/chat.js
index 9252ea0..482d8b1 100644
--- a/chat/static/chat.js
+++ b/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) {
diff --git a/chat/templates/chat/content.html b/chat/templates/chat/content.html
index 4588ef2..bb7e62d 100644
--- a/chat/templates/chat/content.html
+++ b/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…" %}