From 056024d753fc5f82b700b0a8ff20d3047da6a957 Mon Sep 17 00:00:00 2001
From: Daniel <daniel@daddelolymp.de>
Date: Fri, 6 Mar 2026 23:04:49 +0100
Subject: [PATCH] fix: preserve Radio tab play state across tab switches

All tab components are now always mounted and hidden via CSS
(display: none/contents) instead of conditionally rendered.
This prevents React state from being destroyed on tab switch,
so nowPlaying, SSE handlers, and stop buttons keep working.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/App.tsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index b810ca4..be710fa 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -74,7 +74,6 @@ export default function App() {
     return () => { es?.close(); clearTimeout(retryTimer); };
   }, []);
 
-  const TabComponent = activeTab ? tabComponents[activeTab] : null;
   const version = (import.meta as any).env?.VITE_APP_VERSION ?? '1.0.0';
 
   // Tab icon mapping
@@ -123,14 +122,21 @@ export default function App() {
             <h2>Keine Plugins geladen</h2>
             <p>Plugins werden im Server konfiguriert.</p>
           </div>
-        ) : TabComponent ? (
-          <TabComponent data={pluginData[activeTab] || {}} />
         ) : (
-          <div className="hub-empty">
-            <span className="hub-empty-icon">{tabIcons[activeTab] ?? '\u{1F4E6}'}</span>
-            <h2>{activeTab}</h2>
-            <p>Plugin-UI wird geladen...</p>
-          </div>
+          /* Render ALL tabs, hide inactive ones with CSS to preserve state */
+          plugins.map(p => {
+            const Comp = tabComponents[p.name];
+            if (!Comp) return null;
+            return (
+              <div
+                key={p.name}
+                className="hub-tab-panel"
+                style={{ display: activeTab === p.name ? 'contents' : 'none' }}
+              >
+                <Comp data={pluginData[p.name] || {}} />
+              </div>
+            );
+          })
         )}
       </main>
     </div>