feat: Verbindungsdetails Modal mit Live-Ping

- Backend: Voice-Stats (Ping, Gateway, Status, Uptime) via SSE alle 5s
- Frontend: Klick auf Verbunden oeffnet Modal mit allen Verbindungsdetails
- Ping-Anzeige direkt im Header neben Verbunden
- Farbcodierte Ping-Dots (gruen <80ms, gelb <150ms, rot >=150ms)
- Uptime-Zaehler seit letztem VoiceConnection Ready
- connectedSince Tracking pro Guild
This commit is contained in:
Claude Code 2026-03-05 16:28:35 +01:00
parent 761032a280
commit 1a1fdf69c8
3 changed files with 2980 additions and 2774 deletions

File diff suppressed because it is too large Load diff

View file

@ -353,6 +353,90 @@ input, select {
50% { box-shadow: 0 0 12px rgba(35, 165, 90, .8); }
}
.conn-ping {
font-size: 10px;
opacity: .7;
margin-left: 2px;
}
/* ── Connection Details Modal ── */
.conn-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .55);
z-index: 9000;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(4px);
animation: fadeIn .15s ease;
}
.conn-modal {
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
width: 340px;
box-shadow: 0 20px 60px rgba(0,0,0,.4);
overflow: hidden;
animation: slideUp .2s ease;
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.conn-modal-header {
display: flex;
align-items: center;
gap: 8px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
font-weight: 700;
font-size: 14px;
}
.conn-modal-close {
margin-left: auto;
background: none;
border: none;
color: var(--muted);
cursor: pointer;
padding: 4px;
border-radius: 6px;
display: flex;
transition: all .15s;
}
.conn-modal-close:hover {
background: rgba(255,255,255,.08);
color: var(--fg);
}
.conn-modal-body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.conn-stat {
display: flex;
justify-content: space-between;
align-items: center;
}
.conn-stat-label {
color: var(--muted);
font-size: 13px;
}
.conn-stat-value {
font-weight: 600;
font-size: 13px;
display: flex;
align-items: center;
gap: 6px;
}
.conn-ping-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
/* ── Admin Icon Button ── */
.admin-btn-icon {
width: 32px;