Sidebar: Refresh-Status direkt im HTML gerendert statt dynamisch

renderIncidentItem() baut den Refresh-Status (Gold-Rand, Spinner,
Statustext, Warteschlange-Position) direkt ins HTML ein. Ueberlebt
jetzt renderSidebar()-Aufrufe bei Lagenwechsel und Aktualisierungen.

Sidebar wird nach jedem WebSocket-Status-Update neu gerendert,
damit der Status fuer ALLE Lagen immer sichtbar bleibt.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
Claude Dev
2026-04-09 20:32:37 +02:00
Ursprung 9bfdf051c9
Commit 244cc56bde
2 geänderte Dateien mit 26 neuen und 1 gelöschten Zeilen

Datei anzeigen

@@ -40,12 +40,32 @@ const UI = {
const activeClass = isActive ? 'active' : '';
const creator = (incident.created_by_username || '').split('@')[0];
// Determine refresh status for sidebar display
let refreshClass = '';
let refreshStatusHtml = '';
if (isRefreshing) {
const state = this._progressState[incident.id];
const step = state ? state.step : 'researching';
const isQueued = (step === 'queued');
if (isQueued) {
refreshClass = ' queued-item';
const pos = state && state._queuePos ? ' (#' + state._queuePos + ')' : '';
refreshStatusHtml = '<div class="incident-refresh-status queued-status" id="sidebar-refresh-' + incident.id + '"><span>Warteschlange' + pos + '</span></div>';
} else {
refreshClass = ' refreshing-item';
const label = this._getStepLabel(step);
refreshStatusHtml = '<div class="incident-refresh-status" id="sidebar-refresh-' + incident.id + '"><span class="mini-spinner"></span><span>' + label + '</span><span id="sidebar-refresh-timer-' + incident.id + '" style="margin-left:auto;font-family:var(--font-mono,monospace);font-size:10px;color:var(--text-disabled);"></span></div>';
}
}
return `
<div class="incident-item ${activeClass}" data-id="${incident.id}" onclick="App.selectIncident(${incident.id})" role="button" tabindex="0">
<div class="incident-item ${activeClass}${refreshClass}" data-id="${incident.id}" onclick="App.selectIncident(${incident.id})" role="button" tabindex="0">
<span class="incident-dot ${dotClass}" id="dot-${incident.id}" aria-hidden="true"></span>
<div style="flex:1;min-width:0;">
<div class="incident-name">${this.escape(incident.title)}</div>
<div class="incident-meta">${incident.article_count} Artikel &middot; ${this.escape(creator)}</div>
${refreshStatusHtml}
</div>
${incident.visibility === 'private' ? '<span class="badge badge-private" style="font-size:9px;" aria-label="Private Lage">PRIVAT</span>' : ''}
${incident.refresh_mode === 'auto' ? '<span class="badge badge-auto" role="img" aria-label="Auto-Refresh aktiv">&#x21bb;</span>' : ''}
@@ -606,6 +626,9 @@ const UI = {
if (isQueued) {
const pos = (extra && extra.queue_position) ? extra.queue_position : '';
// Store queue position in state for renderIncidentItem
const pState = this._progressState[incidentId];
if (pState && pos) pState._queuePos = pos;
statusEl.className = 'incident-refresh-status queued-status';
statusEl.innerHTML = '<span>Warteschlange' + (pos ? ' (#' + pos + ')' : '') + '</span>';
} else {