From 61f723a1f571152ca0d6035aeead82f9137b4cc4 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Wed, 30 Apr 2025 14:46:43 +0800
Subject: [PATCH] feat: add back-to-top button and update its positioning

---
 static/css/layout.css        | 4 ++--
 static/js/utils/uiHelpers.js | 9 +++------
 templates/base.html          | 5 +++++
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/static/css/layout.css b/static/css/layout.css
index 72d8120f..69a5375e 100644
--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -260,8 +260,8 @@
 /* Back to Top Button */
 .back-to-top {
     position: fixed;
-    bottom: 20px;
-    right: 20px;
+    bottom: 85px;
+    right: 30px;
     width: 36px;
     height: 36px;
     border-radius: 50%;
diff --git a/static/js/utils/uiHelpers.js b/static/js/utils/uiHelpers.js
index 90812225..a9da3b64 100644
--- a/static/js/utils/uiHelpers.js
+++ b/static/js/utils/uiHelpers.js
@@ -311,15 +311,12 @@ export function initFolderTagsVisibility() {
 }
 
 export function initBackToTop() {
-    const button = document.createElement('button');
-    button.className = 'back-to-top';
-    button.innerHTML = '<i class="fas fa-chevron-up"></i>';
-    button.title = 'Back to top';
-    document.body.appendChild(button);
+    const button = document.getElementById('backToTopBtn');
+    if (!button) return;
 
     // Get the scrollable container
     const scrollContainer = document.querySelector('.page-content');
-
+    
     // Show/hide button based on scroll position
     const toggleBackToTop = () => {
         const scrollThreshold = window.innerHeight * 0.3;
diff --git a/templates/base.html b/templates/base.html
index 3ed78e79..257ce245 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -76,6 +76,11 @@
         {% include 'components/progress_panel.html' %}
         {% block additional_components %}{% endblock %}
 
+        <!-- Add back-to-top button here -->
+        <button id="backToTopBtn" class="back-to-top" title="Back to top">
+            <i class="fas fa-chevron-up"></i>
+        </button>
+
         <div class="container">
             {% if is_initializing %}
                 <!-- Show initialization component when initializing -->