From 5f0151a6914522f34c71474958aa5e18eb530dc6 Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Mon, 26 Jan 2026 20:59:38 +0100
Subject: [PATCH] feat: Add floating scroll-to-bottom button in channel chat

- Semi-transparent button appears when user scrolls up
- Positioned at bottom-right of messages container
- Clicking scrolls to latest messages and hides button
- Smooth fade-in/out animation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/static/css/style.css | 39 +++++++++++++++++++++++++++++++++++++++
 app/static/js/app.js     | 20 +++++++++++++++++++-
 app/templates/index.html |  6 +++++-
 3 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/app/static/css/style.css b/app/static/css/style.css
index 8053e53..bf7482a 100644
--- a/app/static/css/style.css
+++ b/app/static/css/style.css
@@ -1000,3 +1000,42 @@ main {
 .mentions-popup::-webkit-scrollbar-thumb:hover {
     background: #aaa;
 }
+
+/* =============================================================================
+   Scroll to Bottom Button
+   ============================================================================= */
+
+.scroll-to-bottom-btn {
+    position: absolute;
+    bottom: 1rem;
+    right: 1.5rem;
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    border: none;
+    background-color: rgba(var(--bs-primary-rgb), 0.7);
+    color: white;
+    font-size: 1.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease, visibility 0.2s ease, background-color 0.15s ease;
+    z-index: 100;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.scroll-to-bottom-btn.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
+.scroll-to-bottom-btn:hover {
+    background-color: rgba(var(--bs-primary-rgb), 0.9);
+}
+
+.scroll-to-bottom-btn:active {
+    transform: scale(0.95);
+}
diff --git a/app/static/js/app.js b/app/static/js/app.js
index fb6c47c..8a36566 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -439,13 +439,31 @@ function setupEventListeners() {
         });
     }
 
-    // Track user scrolling
+    // Track user scrolling and show/hide scroll-to-bottom button
     const container = document.getElementById('messagesContainer');
+    const scrollToBottomBtn = document.getElementById('scrollToBottomBtn');
     container.addEventListener('scroll', function() {
         const isAtBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + 100;
         isUserScrolling = !isAtBottom;
+
+        // Show/hide scroll-to-bottom button
+        if (scrollToBottomBtn) {
+            if (isAtBottom) {
+                scrollToBottomBtn.classList.remove('visible');
+            } else {
+                scrollToBottomBtn.classList.add('visible');
+            }
+        }
     });
 
+    // Scroll-to-bottom button click handler
+    if (scrollToBottomBtn) {
+        scrollToBottomBtn.addEventListener('click', function() {
+            scrollToBottom();
+            scrollToBottomBtn.classList.remove('visible');
+        });
+    }
+
     // Load device info when modal opens
     const deviceInfoModal = document.getElementById('deviceInfoModal');
     deviceInfoModal.addEventListener('show.bs.modal', function() {
diff --git a/app/templates/index.html b/app/templates/index.html
index 40f6e4c..a1518f2 100644
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -72,7 +72,7 @@
 <div class="container-fluid d-flex flex-column" style="height: 100%;">
     <!-- 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="messagesContainer" class="messages-container h-100 overflow-auto p-3">
                 <div id="messagesList">
                     <!-- Messages will be loaded here via JavaScript -->
@@ -84,6 +84,10 @@
                     </div>
                 </div>
             </div>
+            <!-- Scroll to bottom button -->
+            <button id="scrollToBottomBtn" class="scroll-to-bottom-btn" title="Scroll to bottom">
+                <i class="bi bi-chevron-double-down"></i>
+            </button>
         </div>
     </div>