root/gaming-hub
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor: Radio topbar layout + fix soundboard connection modal

Browse source 
- 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>
This commit is contained in:
Daniel 2026-03-06 11:36:01 +01:00
parent b821ad9615
commit f18638ff57
3 changed files with 292 additions and 265 deletions
Download patch file Download diff file Expand all files Collapse all files

20
web/src/plugins/soundboard/SoundboardTab.tsx
View file

@ -1238,8 +1238,8 @@ export default function SoundboardTab({ data }: SoundboardTabProps) {
)}
{/* ═══ CONNECTION MODAL ═══ */}
{showConnModal && voiceStats && (() => {
const uptimeSec = voiceStats.connectedSince
{showConnModal && (() => {
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)}} />
{voiceStats.voicePing != null ? `${voiceStats.voicePing} ms` : '---'}
<span className="conn-ping-dot" style={{background: pingColor(voiceStats?.voicePing ?? null)}} />
{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)}} />
{voiceStats.gatewayPing >= 0 ? `${voiceStats.gatewayPing} ms` : '---'}
<span className="conn-ping-dot" style={{background: pingColor(voiceStats?.gatewayPing ?? null)}} />
{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'}}>
{voiceStats.status === 'ready' ? 'Verbunden' : voiceStats.status}
<span className="conn-stat-value" style={{color: voiceStats?.status === 'ready' ? 'var(--green)' : '#f0a830'}}>
{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>