From f284e3645869a4f6f8317e2473748528c3a315b2 Mon Sep 17 00:00:00 2001
From: mhoennig <michael@hoennig.de>
Date: Thu, 23 Jul 2026 08:57:30 +0200
Subject: [PATCH] improvement: Add reset button to debug panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 frontend/src/app.js | 81 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 73 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app.js b/frontend/src/app.js
index a9cc3e0..d91d01c 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -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 */