improvement: Add reset button to debug panel

Reset-Button gehört ins Debug-Panel (Testing-Feature):

Changes:
- Debug-Panel erweitert mit flexiblem Layout (flex-column)
- 🔄 Reset-Button hinzugefügt (klickbar, hover-Effekt)
- ✕ Close-Button für Panel (zum Schließen)
- Bessere Styling: halbtransparente Buttons, klare Hover-States

Reset ist nur während Testing nötig — gehört ins Debug-Panel,
nicht in die Haupt-UI. Das 📦-Icon im Footer bleibt für
verfügbare Updates.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
mhoennig
2026-07-23 08:57:30 +02:00
co-authored by Claude Haiku 4.5
parent 0a8bab24fb
commit f284e36458
+73 -8
View File
@@ -1265,25 +1265,90 @@ function showUpdateDebug(){
position: fixed;
bottom: 10px;
right: 10px;
background: rgba(0,0,0,0.8);
background: rgba(0,0,0,0.9);
color: #0F766E;
padding: 8px 12px;
padding: 12px;
border-radius: 4px;
font-size: 11px;
font-family: monospace;
max-width: 200px;
max-height: 100px;
max-width: 240px;
max-height: 150px;
overflow-y: auto;
z-index: 999;
border: 1px solid #0F766E;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 8px;
`;
panel.title = 'Update Debug Panel Klick zum Schließen';
panel.title = 'Update Debug Panel für Testing';
document.body.appendChild(panel);
panel.addEventListener('click', () => panel.remove());
/* Log-Text Container */
const logText = document.createElement('div');
logText.id = 'updateDebugLog';
logText.style.cssText = `flex: 1; overflow-y: auto; cursor: auto;`;
logText.addEventListener('click', e => e.stopPropagation());
panel.appendChild(logText);
/* Reset-Button */
const resetBtn = document.createElement('button');
resetBtn.textContent = '🔄 Reset';
resetBtn.title = 'App auf Defaults zurücksetzen (alle Einstellungen + Editor löschen)';
resetBtn.style.cssText = `
background: rgba(15, 118, 110, 0.2);
border: 1px solid #0F766E;
color: #0F766E;
cursor: pointer;
font-size: 10px;
padding: 3px 6px;
border-radius: 3px;
font-family: monospace;
transition: all 0.2s ease;
`;
resetBtn.addEventListener('mouseenter', () => {
resetBtn.style.background = 'rgba(15, 118, 110, 0.4)';
});
resetBtn.addEventListener('mouseleave', () => {
resetBtn.style.background = 'rgba(15, 118, 110, 0.2)';
});
resetBtn.addEventListener('click', e => {
e.stopPropagation();
resetToDefaults();
});
panel.appendChild(resetBtn);
/* Close-Button */
const closeBtn = document.createElement('button');
closeBtn.textContent = '✕ Close';
closeBtn.style.cssText = `
background: rgba(15, 118, 110, 0.2);
border: 1px solid #0F766E;
color: #0F766E;
cursor: pointer;
font-size: 10px;
padding: 3px 6px;
border-radius: 3px;
font-family: monospace;
transition: all 0.2s ease;
`;
closeBtn.addEventListener('mouseenter', () => {
closeBtn.style.background = 'rgba(15, 118, 110, 0.4)';
});
closeBtn.addEventListener('mouseleave', () => {
closeBtn.style.background = 'rgba(15, 118, 110, 0.2)';
});
closeBtn.addEventListener('click', e => {
e.stopPropagation();
panel.remove();
});
panel.appendChild(closeBtn);
}
const log = localStorage.getItem('werkbaum-update-log') || '';
panel.textContent = log ? log.split('\n').slice(-6).join('\n') : 'Keine Einträge';
const logText = panel.querySelector('#updateDebugLog');
if(logText) {
logText.textContent = log ? log.split('\n').slice(-6).join('\n') : 'Keine Einträge';
}
}
/* Erste Prüfung nach 2 Sekunden */