Add Back to Top button functionality and styles

static/js/main.js

@@ -14,7 +14,8 @@ import {
     copyTriggerWord,
     openCivitai,
     toggleFolderTags,
-    initFolderTagsVisibility 
+    initFolderTagsVisibility,
+    initBackToTop
 } from './utils/uiHelpers.js';
 import { initializeInfiniteScroll } from './utils/infiniteScroll.js';
 import { showDeleteModal, confirmDelete, closeDeleteModal } from './utils/modalUtils.js';
@@ -48,6 +49,7 @@ document.addEventListener('DOMContentLoaded', () => {
     restoreFolderFilter();
     initTheme();
     initFolderTagsVisibility();
+    initBackToTop();
     window.searchManager = new SearchManager();
 });
 

static/js/utils/uiHelpers.js

@@ -119,4 +119,36 @@ export function initFolderTagsVisibility() {
         folderTags.classList.add('collapsed');
         btn.title = 'Expand folder tags';
     }
+}
+
+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);
+
+    // Show/hide button based on scroll position
+    const toggleBackToTop = () => {
+        const scrollThreshold = window.innerHeight * 1.5;
+        if (window.scrollY > scrollThreshold) {
+            button.classList.add('visible');
+        } else {
+            button.classList.remove('visible');
+        }
+    };
+
+    // Smooth scroll to top
+    button.addEventListener('click', () => {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth'
+        });
+    });
+
+    // Listen for scroll events
+    window.addEventListener('scroll', toggleBackToTop);
+    
+    // Initial check
+    toggleBackToTop();
 }