From 0a8bab24fb14954ea185a858f7357227c22407a5 Mon Sep 17 00:00:00 2001
From: mhoennig <michael@hoennig.de>
Date: Thu, 23 Jul 2026 08:47:36 +0200
Subject: [PATCH] refactor: Move update notification icon to footer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Statt Reset-Button im Footer:
- 📦-Symbol rechts neben Version (nur wenn Update verfügbar)
- Klick zeigt die Update-Benachrichtigung wieder an
- Hilft, wenn man den Banner auf \"Später\" verschoben hat

Features:
- Icon nur sichtbar wenn werkbaum-update-available Flag gesetzt
- Hover-Effekt: Icon wird größer (scale 1.2)
- Tooltip erklärt Funktion
- Auto-Update nach Benachrichtigung

Reset-Button entfernt (Nutzer wünscht sich das oben neben Fullscreen,
wenn überhaupt benötigt).

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 frontend/src/app.js | 78 +++++++++++++++++++++++++--------------------
 1 file changed, 44 insertions(+), 34 deletions(-)

diff --git a/frontend/src/app.js b/frontend/src/app.js
index 9025146..a9cc3e0 100644
--- a/frontend/src/app.js
+++ b/frontend/src/app.js
@@ -1397,40 +1397,50 @@ function resetToDefaults(){
   }, 500);
 }
 
-/* Reset-Button im Footer hinzufügen */
-document.addEventListener('DOMContentLoaded', () => {
-  const footer = document.querySelector('.site-footer');
-  if(!footer) return;
+/* Update-Benachrichtigung-Symbol im Footer (rechts neben Version) */
+function updateFooterUpdateIcon(){
+  let icon = document.getElementById('footerUpdateIcon');
+  const hasUpdate = localStorage.getItem('werkbaum-update-available');
 
-  const resetBtn = document.createElement('button');
-  resetBtn.textContent = '🔄 Reset';
-  resetBtn.title = 'App auf Defaults zurücksetzen (alle Einstellungen + Editor löschen)';
-  resetBtn.style.cssText = `
-    background: none;
-    border: 1px solid var(--muted, #999);
-    color: var(--muted, #999);
-    cursor: pointer;
-    font-size: 12px;
-    padding: 2px 6px;
-    border-radius: 3px;
-    vertical-align: middle;
-    transition: all 0.2s ease;
-  `;
-  resetBtn.addEventListener('mouseenter', () => {
-    resetBtn.style.borderColor = 'var(--or, #0F766E)';
-    resetBtn.style.color = 'var(--or, #0F766E)';
-  });
-  resetBtn.addEventListener('mouseleave', () => {
-    resetBtn.style.borderColor = 'var(--muted, #999)';
-    resetBtn.style.color = 'var(--muted, #999)';
-  });
-  resetBtn.addEventListener('click', resetToDefaults);
+  if(hasUpdate && !icon){
+    const footer = document.querySelector('.site-footer');
+    if(!footer) return;
 
-  /* Einfügen nach der Versionsnummer */
-  const verLink = footer.querySelector('.ver');
-  if(verLink && verLink.nextSibling) {
-    verLink.parentNode.insertBefore(resetBtn, verLink.nextSibling.nextSibling);
-  } else {
-    footer.insertBefore(resetBtn, footer.firstChild);
+    icon = document.createElement('button');
+    icon.id = 'footerUpdateIcon';
+    icon.textContent = '📦';
+    icon.title = 'Neue Version verfügbar — klick um Benachrichtigung zu zeigen';
+    icon.style.cssText = `
+      background: none;
+      border: none;
+      color: var(--or, #0F766E);
+      cursor: pointer;
+      font-size: 16px;
+      padding: 0 4px;
+      vertical-align: middle;
+      transition: transform 0.2s ease;
+    `;
+    icon.addEventListener('mouseenter', () => {
+      icon.style.transform = 'scale(1.2)';
+    });
+    icon.addEventListener('mouseleave', () => {
+      icon.style.transform = 'scale(1)';
+    });
+    icon.addEventListener('click', checkAndShowUpdateNotification);
+
+    const verLink = footer.querySelector('.ver');
+    if(verLink && verLink.nextSibling) {
+      verLink.parentNode.insertBefore(icon, verLink.nextSibling);
+    }
+  } else if(!hasUpdate && icon){
+    icon.remove();
   }
-});
+}
+
+/* Icon beim Laden und bei Update-Erkennung aktualisieren */
+document.addEventListener('DOMContentLoaded', updateFooterUpdateIcon);
+const originalCheckAndShowUpdateNotification = checkAndShowUpdateNotification;
+checkAndShowUpdateNotification = function(){
+  originalCheckAndShowUpdateNotification.call(this);
+  updateFooterUpdateIcon();
+};