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>
This commit is contained in:
Daniel 2026-03-06 23:04:49 +01:00
parent 09396dafce
commit 056024d753

View file

@ -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>