Refactor: Radio topbar layout + fix soundboard connection modal

- Radio: Move controls from bottom bar to topbar above globe
  (guild/channel selectors, now playing, volume, connection, stop)
- Radio: Theme selector moved inline into topbar-right
- Radio: Globe now fills remaining space below topbar
- Soundboard: Fix connection modal not opening when voiceStats is null
  (modal now renders with '---' values when no voice data available)
- Both: Modal condition changed from `showConnModal && voiceStats` to
  just `showConnModal`, handling null voiceStats gracefully

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

web/src/plugins/radio/RadioTab.tsx

@@ -431,11 +431,65 @@ export default function RadioTab({ data }: { data: any }) {
   return (
     <div className="radio-container" data-theme={theme}>
 
-      {/* ── Globe ── */}
+      {/* ═══ TOPBAR ═══ */}
-      <div className="radio-globe" ref={containerRef} />
+      <header className="radio-topbar">
+        <div className="radio-topbar-left">
+          <span className="radio-topbar-logo">{'\u{1F30D}'}</span>
+          <span className="radio-topbar-title">World Radio</span>
 
-      {/* ── Theme Selector ── */}
+          {guilds.length > 1 && (
-      <div className="radio-theme">
+            <select className="radio-sel" value={selectedGuild} onChange={e => {
+              setSelectedGuild(e.target.value);
+              const g = guilds.find(x => x.id === e.target.value);
+              const ch = g?.voiceChannels.find(c => c.members > 0) ?? g?.voiceChannels[0];
+              setSelectedChannel(ch?.id ?? '');
+            }}>
+              {guilds.map(g => <option key={g.id} value={g.id}>{g.name}</option>)}
+            </select>
+          )}
+          <select className="radio-sel" value={selectedChannel} onChange={e => setSelectedChannel(e.target.value)}>
+            <option value="">Voice Channel...</option>
+            {currentGuild?.voiceChannels.map(c => (
+              <option key={c.id} value={c.id}>{'\u{1F50A}'} {c.name}{c.members > 0 ? ` (${c.members})` : ''}</option>
+            ))}
+          </select>
+        </div>
+
+        {currentPlaying && (
+          <div className="radio-topbar-np">
+            <div className="radio-eq radio-eq-np"><span /><span /><span /></div>
+            <div className="radio-np-info">
+              <span className="radio-np-name">{currentPlaying.stationName}</span>
+              <span className="radio-np-loc">{currentPlaying.placeName}{currentPlaying.country ? `, ${currentPlaying.country}` : ''}</span>
+            </div>
+          </div>
+        )}
+
+        <div className="radio-topbar-right">
+          {currentPlaying && (
+            <>
+              <div className="radio-volume">
+                <span className="radio-volume-icon">{volume === 0 ? '\u{1F507}' : volume < 0.4 ? '\u{1F509}' : '\u{1F50A}'}</span>
+                <input
+                  type="range"
+                  className="radio-volume-slider"
+                  min={0} max={1} step={0.01}
+                  value={volume}
+                  onChange={e => handleVolume(Number(e.target.value))}
+                />
+                <span className="radio-volume-val">{Math.round(volume * 100)}%</span>
+              </div>
+              <div className="radio-conn" onClick={() => setShowConnModal(true)} title="Verbindungsdetails">
+                <span className="radio-conn-dot" />
+                Verbunden
+                {voiceStats?.voicePing != null && (
+                  <span className="radio-conn-ping">{voiceStats.voicePing}ms</span>
+                )}
+              </div>
+              <button className="radio-topbar-stop" onClick={handleStop}>{'\u23F9'} Stop</button>
+            </>
+          )}
+          <div className="radio-theme-inline">
             {THEMES.map(t => (
               <div
                 key={t.id}
@@ -446,6 +500,12 @@ export default function RadioTab({ data }: { data: any }) {
               />
             ))}
           </div>
+        </div>
+      </header>
+
+      {/* ═══ GLOBE AREA ═══ */}
+      <div className="radio-globe-wrap">
+        <div className="radio-globe" ref={containerRef} />
 
         {/* ── Search ── */}
         <div className="radio-search">
@@ -573,66 +633,15 @@ export default function RadioTab({ data }: { data: any }) {
           </div>
         )}
 
-      {/* ── Bottom Bar ── */}
-      <div className={`radio-bar ${currentPlaying ? 'has-playing' : ''}`}>
-        <div className="radio-bar-channel">
-          {guilds.length > 1 && (
-            <select className="radio-sel" value={selectedGuild} onChange={e => {
-              setSelectedGuild(e.target.value);
-              const g = guilds.find(x => x.id === e.target.value);
-              const ch = g?.voiceChannels.find(c => c.members > 0) ?? g?.voiceChannels[0];
-              setSelectedChannel(ch?.id ?? '');
-            }}>
-              {guilds.map(g => <option key={g.id} value={g.id}>{g.name}</option>)}
-            </select>
-          )}
-          <select className="radio-sel" value={selectedChannel} onChange={e => setSelectedChannel(e.target.value)}>
-            <option value="">Voice Channel...</option>
-            {currentGuild?.voiceChannels.map(c => (
-              <option key={c.id} value={c.id}>{'\u{1F50A}'} {c.name}{c.members > 0 ? ` (${c.members})` : ''}</option>
-            ))}
-          </select>
-        </div>
-
-        {currentPlaying && (
-          <div className="radio-np">
-            <div className="radio-eq radio-eq-np"><span /><span /><span /></div>
-            <div className="radio-np-info">
-              <span className="radio-np-name">{currentPlaying.stationName}</span>
-              <span className="radio-np-loc">{currentPlaying.placeName}{currentPlaying.country ? `, ${currentPlaying.country}` : ''}</span>
-            </div>
-            <div className="radio-volume">
-              <span className="radio-volume-icon">{volume === 0 ? '\u{1F507}' : volume < 0.4 ? '\u{1F509}' : '\u{1F50A}'}</span>
-              <input
-                type="range"
-                className="radio-volume-slider"
-                min={0} max={1} step={0.01}
-                value={volume}
-                onChange={e => handleVolume(Number(e.target.value))}
-              />
-              <span className="radio-volume-val">{Math.round(volume * 100)}%</span>
-            </div>
-            <span className="radio-np-ch">{'\u{1F50A}'} {currentPlaying.channelName}</span>
-            <div className="radio-conn" onClick={() => setShowConnModal(true)} title="Verbindungsdetails">
-              <span className="radio-conn-dot" />
-              Verbunden
-              {voiceStats?.voicePing != null && (
-                <span className="radio-conn-ping">{voiceStats.voicePing}ms</span>
-              )}
-            </div>
-            <button className="radio-btn-stop" onClick={handleStop}>{'\u23F9'} Stop</button>
-          </div>
-        )}
-      </div>
-
         {/* ── Places counter ── */}
         <div className="radio-counter">
           {'\u{1F4FB}'} {places.length.toLocaleString('de-DE')} Sender weltweit
         </div>
+      </div>
 
       {/* ── Connection Details Modal ── */}
-      {showConnModal && voiceStats && (() => {
+      {showConnModal && (() => {
-        const uptimeSec = voiceStats.connectedSince
+        const uptimeSec = voiceStats?.connectedSince
           ? Math.floor((Date.now() - new Date(voiceStats.connectedSince).getTime()) / 1000)
           : 0;
         const h = Math.floor(uptimeSec / 3600);
@@ -657,30 +666,30 @@ export default function RadioTab({ data }: { data: any }) {
                 <div className="radio-modal-stat">
                   <span className="radio-modal-label">Voice Ping</span>
                   <span className="radio-modal-value">
-                    <span className="radio-modal-dot" style={{ background: pingColor(voiceStats.voicePing) }} />
+                    <span className="radio-modal-dot" style={{ background: pingColor(voiceStats?.voicePing ?? null) }} />
-                    {voiceStats.voicePing != null ? `${voiceStats.voicePing} ms` : '---'}
+                    {voiceStats?.voicePing != null ? `${voiceStats.voicePing} ms` : '---'}
                   </span>
                 </div>
                 <div className="radio-modal-stat">
                   <span className="radio-modal-label">Gateway Ping</span>
                   <span className="radio-modal-value">
-                    <span className="radio-modal-dot" style={{ background: pingColor(voiceStats.gatewayPing) }} />
+                    <span className="radio-modal-dot" style={{ background: pingColor(voiceStats?.gatewayPing ?? null) }} />
-                    {voiceStats.gatewayPing >= 0 ? `${voiceStats.gatewayPing} ms` : '---'}
+                    {voiceStats && voiceStats.gatewayPing >= 0 ? `${voiceStats.gatewayPing} ms` : '---'}
                   </span>
                 </div>
                 <div className="radio-modal-stat">
                   <span className="radio-modal-label">Status</span>
-                  <span className="radio-modal-value" style={{ color: voiceStats.status === 'ready' ? 'var(--success)' : '#f0a830' }}>
+                  <span className="radio-modal-value" style={{ color: voiceStats?.status === 'ready' ? 'var(--success)' : '#f0a830' }}>
-                    {voiceStats.status === 'ready' ? 'Verbunden' : voiceStats.status}
+                    {voiceStats?.status === 'ready' ? 'Verbunden' : voiceStats?.status ?? 'Warte auf Verbindung'}
                   </span>
                 </div>
                 <div className="radio-modal-stat">
                   <span className="radio-modal-label">Kanal</span>
-                  <span className="radio-modal-value">{voiceStats.channelName || '---'}</span>
+                  <span className="radio-modal-value">{voiceStats?.channelName || '---'}</span>
                 </div>
                 <div className="radio-modal-stat">
                   <span className="radio-modal-label">Verbunden seit</span>
-                  <span className="radio-modal-value">{uptimeStr}</span>
+                  <span className="radio-modal-value">{uptimeStr || '---'}</span>
                 </div>
               </div>
             </div>

web/src/plugins/soundboard/SoundboardTab.tsx

@@ -1238,8 +1238,8 @@ export default function SoundboardTab({ data }: SoundboardTabProps) {
       )}
 
       {/* ═══ CONNECTION MODAL ═══ */}
-      {showConnModal && voiceStats && (() => {
+      {showConnModal && (() => {
-        const uptimeSec = voiceStats.connectedSince
+        const uptimeSec = voiceStats?.connectedSince
           ? Math.floor((Date.now() - new Date(voiceStats.connectedSince).getTime()) / 1000)
           : 0;
         const h = Math.floor(uptimeSec / 3600);
@@ -1266,30 +1266,30 @@ export default function SoundboardTab({ data }: SoundboardTabProps) {
                 <div className="conn-stat">
                   <span className="conn-stat-label">Voice Ping</span>
                   <span className="conn-stat-value">
-                    <span className="conn-ping-dot" style={{background: pingColor(voiceStats.voicePing)}} />
+                    <span className="conn-ping-dot" style={{background: pingColor(voiceStats?.voicePing ?? null)}} />
-                    {voiceStats.voicePing != null ? `${voiceStats.voicePing} ms` : '---'}
+                    {voiceStats?.voicePing != null ? `${voiceStats.voicePing} ms` : '---'}
                   </span>
                 </div>
                 <div className="conn-stat">
                   <span className="conn-stat-label">Gateway Ping</span>
                   <span className="conn-stat-value">
-                    <span className="conn-ping-dot" style={{background: pingColor(voiceStats.gatewayPing)}} />
+                    <span className="conn-ping-dot" style={{background: pingColor(voiceStats?.gatewayPing ?? null)}} />
-                    {voiceStats.gatewayPing >= 0 ? `${voiceStats.gatewayPing} ms` : '---'}
+                    {voiceStats && voiceStats.gatewayPing >= 0 ? `${voiceStats.gatewayPing} ms` : '---'}
                   </span>
                 </div>
                 <div className="conn-stat">
                   <span className="conn-stat-label">Status</span>
-                  <span className="conn-stat-value" style={{color: voiceStats.status === 'ready' ? 'var(--green)' : '#f0a830'}}>
+                  <span className="conn-stat-value" style={{color: voiceStats?.status === 'ready' ? 'var(--green)' : '#f0a830'}}>
-                    {voiceStats.status === 'ready' ? 'Verbunden' : voiceStats.status}
+                    {voiceStats?.status === 'ready' ? 'Verbunden' : voiceStats?.status ?? 'Warte auf Verbindung'}
                   </span>
                 </div>
                 <div className="conn-stat">
                   <span className="conn-stat-label">Kanal</span>
-                  <span className="conn-stat-value">{voiceStats.channelName || '---'}</span>
+                  <span className="conn-stat-value">{voiceStats?.channelName || '---'}</span>
                 </div>
                 <div className="conn-stat">
                   <span className="conn-stat-label">Verbunden seit</span>
-                  <span className="conn-stat-value">{uptimeStr}</span>
+                  <span className="conn-stat-value">{uptimeStr || '---'}</span>
                 </div>
               </div>
             </div>

web/src/styles.css

@@ -354,7 +354,8 @@ html, body {
    ══════════════════════════════════════════════ */
 
 .radio-container {
-  position: relative;
+  display: flex;
+  flex-direction: column;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -416,6 +417,88 @@ html, body {
 }
 
 /* ── Globe ── */
+/* ── Radio Topbar ── */
+.radio-topbar {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  height: 52px;
+  background: var(--bg-secondary, #2b2d31);
+  border-bottom: 1px solid rgba(0, 0, 0, .24);
+  z-index: 10;
+  flex-shrink: 0;
+  gap: 16px;
+}
+
+.radio-topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.radio-topbar-logo {
+  font-size: 20px;
+}
+
+.radio-topbar-title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text-normal);
+  letter-spacing: -.02em;
+}
+
+.radio-topbar-np {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  justify-content: center;
+}
+
+.radio-topbar-right {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.radio-topbar-stop {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  background: var(--danger);
+  color: #fff;
+  border: none;
+  border-radius: var(--radius);
+  padding: 6px 14px;
+  font-size: 13px;
+  font-family: var(--font);
+  font-weight: 600;
+  cursor: pointer;
+  transition: all var(--transition);
+  flex-shrink: 0;
+}
+
+.radio-topbar-stop:hover {
+  background: #c63639;
+}
+
+.radio-theme-inline {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: 4px;
+}
+
+/* ── Globe Wrapper ── */
+.radio-globe-wrap {
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+}
+
 .radio-globe {
   width: 100%;
   height: 100%;
@@ -819,29 +902,6 @@ html, body {
   50% { transform: scaleY(1); }
 }
 
-/* ── Bottom Bar ── */
-.radio-bar {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 20;
-  background: rgba(30, 31, 34, 0.95);
-  backdrop-filter: blur(16px);
-  border-top: 1px solid var(--border);
-  padding: 10px 16px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
-}
-
-.radio-bar-channel {
-  display: flex;
-  gap: 8px;
-  flex-shrink: 0;
-}
-
 .radio-sel {
   background: var(--bg-secondary);
   border: 1px solid var(--border);
@@ -859,15 +919,6 @@ html, body {
   border-color: var(--accent);
 }
 
-/* ── Now Playing ── */
-.radio-np {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  flex: 1;
-  min-width: 0;
-}
-
 .radio-eq-np {
   flex-shrink: 0;
 }
@@ -897,21 +948,6 @@ html, body {
   text-overflow: ellipsis;
 }
 
-.radio-np-ch {
-  font-size: 12px;
-  color: var(--text-faint);
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.radio-bar .radio-btn-stop {
-  width: auto;
-  border-radius: var(--radius);
-  padding: 6px 14px;
-  font-size: 13px;
-  gap: 4px;
-  flex-shrink: 0;
-}
 
 /* ── Volume Slider ── */
 .radio-volume {
@@ -968,22 +1004,6 @@ html, body {
   text-align: right;
 }
 
-/* ── Theme Selector ── */
-.radio-theme {
-  position: absolute;
-  top: 16px;
-  right: 72px;
-  z-index: 25;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 5px 10px;
-  border-radius: 20px;
-  background: rgba(30, 31, 34, 0.85);
-  backdrop-filter: blur(12px);
-  border: 1px solid var(--border);
-}
-
 .radio-theme-dot {
   width: 16px;
   height: 16px;
@@ -1005,7 +1025,7 @@ html, body {
 /* ── Station count ── */
 .radio-counter {
   position: absolute;
-  bottom: 70px;
+  bottom: 16px;
   left: 16px;
   z-index: 10;
   font-size: 12px;
@@ -1049,30 +1069,28 @@ html, body {
     left: calc(50% - 24px);
   }
 
-  .radio-bar {
+  .radio-topbar {
-    flex-wrap: wrap;
+    padding: 0 12px;
-    padding: 8px 12px;
     gap: 8px;
   }
 
+  .radio-topbar-title {
+    display: none;
+  }
+
   .radio-sel {
     max-width: 140px;
     font-size: 12px;
   }
-
-  .radio-counter {
-    bottom: 62px;
-    left: 12px;
-  }
 }
 
 @media (max-width: 480px) {
-  .radio-np-ch {
+  .radio-topbar-np {
     display: none;
   }
 
-  .radio-bar-channel {
+  .radio-volume {
-    flex-wrap: wrap;
+    display: none;
   }
 
   .radio-sel {