From f920aae969128ed61ec4423910537028f6935077 Mon Sep 17 00:00:00 2001
From: vibe-bot <bot@local>
Date: Fri, 8 Aug 2025 18:51:57 +0200
Subject: [PATCH] feat(ui): Back-to-top Button (sichtbar nach Scroll, smooth
 scroll nach oben)

---
 web/src/App.tsx    | 19 +++++++++++++++++++
 web/src/styles.css | 16 ++++++++++++++++
 2 files changed, 35 insertions(+)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 25ab1b2..668fbd5 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -15,6 +15,7 @@ export default function App() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [info, setInfo] = useState<string | null>(null);
+  const [showTop, setShowTop] = useState<boolean>(false);
   const [volume, setVolume] = useState<number>(1);
   const [favs, setFavs] = useState<Record<string, boolean>>({});
   const [theme, setTheme] = useState<string>(() => localStorage.getItem('theme') || 'dark');
@@ -85,6 +86,14 @@ export default function App() {
     localStorage.setItem('theme', theme);
   }, [theme]);
 
+  // Back-to-top Sichtbarkeit
+  useEffect(() => {
+    const onScroll = () => setShowTop(window.scrollY > 300);
+    onScroll();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
+
   useEffect(() => {
     (async () => {
       if (selected) {
@@ -328,6 +337,16 @@ export default function App() {
       </section>
       {/* footer counter entfällt, da oben sichtbar */}
     </div>
+      {showTop && (
+        <button
+          type="button"
+          className="back-to-top"
+          aria-label="Nach oben"
+          onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+        >
+          ↑ Top
+        </button>
+      )}
     </ErrorBoundary>
   );
 }
diff --git a/web/src/styles.css b/web/src/styles.css
index 69687ec..6244952 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -225,5 +225,21 @@ header p { opacity: .8; }
 .tab.active { background: linear-gradient(135deg, rgba(168,85,247,.55), rgba(59,130,246,.55)); color: #fff; border-color: transparent; }
 
 
+/* Back to top */
+.back-to-top {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  padding: 10px 14px;
+  border-radius: 999px;
+  border: 1px solid rgba(255,255,255,.25);
+  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
+  color: #e7e7ee;
+  box-shadow: 0 10px 30px rgba(0,0,0,.35);
+  z-index: 40000;
+}
+.back-to-top:hover { filter: brightness(1.1); }
+
+