Add scroll-to-top button

Fixed button in bottom-right corner appears after scrolling 300px,
fades in with slide-up animation, smooth-scrolls to page top on click.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/static/css/components.css

@@ -831,3 +831,44 @@ textarea:focus-visible {
     opacity: 0.5;
     font-size: 0.9rem;
 }
+
+/* ── Scroll-to-top button ── */
+
+.scroll-to-top {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    z-index: 90;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: 1px solid var(--border-color);
+    background: var(--card-bg);
+    color: var(--text-secondary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 2px 8px var(--shadow-color, rgba(0,0,0,0.2));
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(8px);
+    transition: opacity 0.25s, transform 0.25s, color 0.15s, background 0.15s;
+}
+
+.scroll-to-top.visible {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+}
+
+.scroll-to-top:hover {
+    color: var(--primary-text-color);
+    background: var(--bg-secondary);
+    border-color: var(--primary-color);
+}
+
+.scroll-to-top .icon {
+    width: 18px;
+    height: 18px;
+}

server/src/wled_controller/static/js/app.js

@@ -536,6 +536,14 @@ document.addEventListener('DOMContentLoaded', async () => {
         window.addEventListener('resize', updateHeaderHeight);
     }
 
+    // Scroll-to-top button visibility
+    const scrollBtn = document.getElementById('scroll-to-top');
+    if (scrollBtn) {
+        window.addEventListener('scroll', () => {
+            scrollBtn.classList.toggle('visible', window.scrollY > 300);
+        }, { passive: true });
+    }
+
     // Initialize command palette
     initCommandPalette();
 

server/src/wled_controller/templates/index.html

@@ -152,6 +152,10 @@
         </footer>
     </div>
 
+    <button id="scroll-to-top" class="scroll-to-top" onclick="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Scroll to top">
+        <svg class="icon" viewBox="0 0 24 24"><path d="m18 15-6-6-6 6"/></svg>
+    </button>
+
     <div id="toast" class="toast"></div>
 
     {% include 'modals/calibration.html' %}