From 22dc34ce815d919d4ad1c6084e8059149ea7464c Mon Sep 17 00:00:00 2001
From: vibe-bot <bot@local>
Date: Sat, 9 Aug 2025 01:48:47 +0200
Subject: [PATCH] =?UTF-8?q?UI:=20Header-Texte=20ge=C3=A4ndert=20('Geladene?=
 =?UTF-8?q?=20Sounds'=20=20'Sounds',=20'Insgesamt=20abgespielt'=20=20'Play?=
 =?UTF-8?q?ed')=20+=20Live-Update=20f=C3=BCr=20Played=20Counter=20(alle=20?=
 =?UTF-8?q?5s)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 2773a39..c9f9553 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -100,6 +100,23 @@ export default function App() {
     return () => window.removeEventListener('scroll', onScroll);
   }, []);
 
+  // Live-Update für totalPlays Counter
+  useEffect(() => {
+    const updateTotalPlays = async () => {
+      try {
+        const h = await fetch('/api/health').then(r => r.json()).catch(() => null);
+        if (h && typeof h.totalPlays === 'number') setTotalPlays(h.totalPlays);
+      } catch {}
+    };
+    
+    // Sofort beim Start laden
+    updateTotalPlays();
+    
+    // Alle 5 Sekunden aktualisieren
+    const interval = setInterval(updateTotalPlays, 5000);
+    return () => clearInterval(interval);
+  }, []);
+
   useEffect(() => {
     (async () => {
       if (selected) {
@@ -166,11 +183,11 @@ export default function App() {
           </div>
           <div className="flex items-center space-x-8">
             <div className="text-center">
-              <p className="text-lg text-gray-400">Geladene Sounds</p>
+              <p className="text-lg text-gray-400">Sounds</p>
               <p className="text-2xl font-bold">{total}</p>
             </div>
             <div className="text-center">
-              <p className="text-lg text-gray-400">Insgesamt abgespielt</p>
+              <p className="text-lg text-gray-400">Played</p>
               <p className="text-2xl font-bold">{totalPlays}</p>
             </div>
             <div className="flex items-center space-x-4">