From 6eb63ccbdafb412a55f9a62ec5f4abecc92a8746 Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Mon, 26 Jan 2026 21:02:09 +0100
Subject: [PATCH] feat: Add scroll-to-bottom button in DM view

Reuses the same CSS styling as channel chat button.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/static/js/dm.js   | 19 +++++++++++++++++++
 app/templates/dm.html |  6 +++++-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/app/static/js/dm.js b/app/static/js/dm.js
index ceade09..316f463 100644
--- a/app/static/js/dm.js
+++ b/app/static/js/dm.js
@@ -119,6 +119,25 @@ function setupEventListeners() {
             }
         });
     }
+
+    // Scroll-to-bottom button
+    const messagesContainer = document.getElementById('dmMessagesContainer');
+    const scrollToBottomBtn = document.getElementById('dmScrollToBottomBtn');
+    if (messagesContainer && scrollToBottomBtn) {
+        messagesContainer.addEventListener('scroll', function() {
+            const isAtBottom = messagesContainer.scrollHeight - messagesContainer.scrollTop <= messagesContainer.clientHeight + 100;
+            if (isAtBottom) {
+                scrollToBottomBtn.classList.remove('visible');
+            } else {
+                scrollToBottomBtn.classList.add('visible');
+            }
+        });
+
+        scrollToBottomBtn.addEventListener('click', function() {
+            messagesContainer.scrollTop = messagesContainer.scrollHeight;
+            scrollToBottomBtn.classList.remove('visible');
+        });
+    }
 }
 
 /**
diff --git a/app/templates/dm.html b/app/templates/dm.html
index 83e0fc4..ddf1fb3 100644
--- a/app/templates/dm.html
+++ b/app/templates/dm.html
@@ -74,7 +74,7 @@
             </div>
             <!-- Messages Container -->
             <div class="row flex-grow-1 overflow-hidden" style="min-height: 0;">
-                <div class="col-12" style="height: 100%;">
+                <div class="col-12 position-relative" style="height: 100%;">
                     <div id="dmMessagesContainer" class="messages-container h-100 overflow-auto p-3">
                         <div id="dmMessagesList">
                             <!-- Placeholder shown when no conversation selected -->
@@ -85,6 +85,10 @@
                             </div>
                         </div>
                     </div>
+                    <!-- Scroll to bottom button -->
+                    <button id="dmScrollToBottomBtn" class="scroll-to-bottom-btn" title="Scroll to bottom">
+                        <i class="bi bi-chevron-double-down"></i>
+                    </button>
                 </div>
             </div>