From ccf60db15ff7b1fa204d09a87d475c1f7d9d5616 Mon Sep 17 00:00:00 2001
From: Sucukdeluxe <259325684+Sucukdeluxe@users.noreply.github.com>
Date: Fri, 21 Aug 2026 00:12:17 +0200
Subject: [PATCH] feat: reveal available updates beside speed

Collapse the header update action completely when no update exists and animate the green action outward to the left of the fixed bandwidth widget only after a real update is detected.
---
 renderer/app.js                |  9 +++++++-
 renderer/index.html            | 10 +++++----
 renderer/styles.css            | 39 +++++++++++++++++++++++++++++++++-
 tests/startup-renderer.test.js |  7 +++++-
 tests/ui-smoke.js              | 20 ++++++++---------
 5 files changed, 68 insertions(+), 17 deletions(-)

diff --git a/renderer/app.js b/renderer/app.js
index 203eb1b..0fa7e2f 100644
--- a/renderer/app.js
+++ b/renderer/app.js
@@ -801,6 +801,7 @@ function _setHeaderUpdateLabel(text) {
 
 function _syncHeaderUpdateState() {
   const button = document.getElementById('headerUpdateBtn');
+  const slot = document.getElementById('headerUpdateSlot');
   const available = !!(_knownUpdateInfo && _knownUpdateInfo.available);
   const version = available ? String(_knownUpdateInfo.remoteVersion || '').replace(/^v/i, '') : '';
   const hint = _updateCheckBusy
@@ -808,10 +809,15 @@ function _syncHeaderUpdateState() {
     : available
       ? `Update v${version || 'unbekannt'} verfügbar. Klicken zum Installieren.`
       : 'Nach Aktualisierungen suchen';
+  if (slot) {
+    slot.classList.toggle('is-visible', available);
+    slot.setAttribute('aria-hidden', available ? 'false' : 'true');
+  }
   if (button) {
     button.classList.toggle('update-available', available);
     button.classList.toggle('is-checking', _updateCheckBusy);
-    button.disabled = _updateCheckBusy;
+    button.disabled = !available || _updateCheckBusy;
+    button.tabIndex = available ? 0 : -1;
     button.setAttribute('aria-busy', _updateCheckBusy ? 'true' : 'false');
     button.setAttribute('aria-label', hint);
     button.title = hint;
@@ -843,6 +849,7 @@ async function requestUpdateCheck({ forceRefresh = true } = {}) {
     } else if (result && result.error) {
       showCopyToast('Updateprüfung fehlgeschlagen');
     } else {
+      _knownUpdateInfo = null;
       showCopyToast('Kein Update verfügbar');
     }
     return result;
diff --git a/renderer/index.html b/renderer/index.html
index 0224fad..584830d 100644
--- a/renderer/index.html
+++ b/renderer/index.html
@@ -54,6 +54,12 @@
     </div>
     <div class="header-spacer" aria-hidden="true"></div>
     <div class="header-cluster header-utilities">
+      <div class="header-update-slot" id="headerUpdateSlot" aria-hidden="true">
+        <button class="header-update-button" id="headerUpdateBtn" title="Nach Aktualisierungen suchen" aria-label="Nach Aktualisierungen suchen" data-tooltip="Nach Aktualisierungen suchen" tabindex="-1" disabled>
+          <svg class="header-action-icon" aria-hidden="true"><use href="#icon-download"></use></svg>
+          <span class="header-update-label">Update</span>
+        </button>
+      </div>
       <div class="upload-speed-sparkline" id="uploadSpeedSparkline" title="Aktuelle Upload-Geschwindigkeit" aria-label="Aktuelle Upload-Geschwindigkeit">
         <span class="upload-speed-chart" aria-hidden="true">
           <span class="upload-speed-baseline"></span>
@@ -61,10 +67,6 @@
         </span>
         <strong id="uploadSpeedValue">0 B/s</strong>
       </div>
-      <button class="header-update-button" id="headerUpdateBtn" title="Nach Aktualisierungen suchen" aria-label="Nach Aktualisierungen suchen" data-tooltip="Nach Aktualisierungen suchen">
-        <svg class="header-action-icon" aria-hidden="true"><use href="#icon-download"></use></svg>
-        <span class="header-update-label">Update</span>
-      </button>
       <span class="header-divider" aria-hidden="true"></span>
       <nav class="menu-bar" id="menuBar" aria-label="Anwendungsmenüs">
         <div class="menu-bar-item" data-menu="datei">
diff --git a/renderer/styles.css b/renderer/styles.css
index 1952c95..bd9f81f 100644
--- a/renderer/styles.css
+++ b/renderer/styles.css
@@ -2109,6 +2109,29 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
   border: 0;
 }
 
+.header-update-slot {
+  width: 0;
+  flex: 0 0 0;
+  height: 32px;
+  margin-right: -4px;
+  overflow: hidden;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: width .28s cubic-bezier(.22, 1, .36, 1), flex-basis .28s cubic-bezier(.22, 1, .36, 1), margin-right .28s cubic-bezier(.22, 1, .36, 1), opacity .18s ease, visibility 0s linear .28s;
+}
+
+.header-update-slot.is-visible {
+  width: 146px;
+  flex-basis: 146px;
+  margin-right: 0;
+  overflow: visible;
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition-delay: 0s;
+}
+
 .header-update-button {
   position: relative;
   width: 146px;
@@ -2127,7 +2150,16 @@ select.hs-input { max-width: none; width: auto; min-width: 140px; }
   font: inherit;
   font-size: 12px;
   font-weight: 700;
-  transition: background-color .14s, transform .14s;
+  opacity: 0;
+  transform: translateX(14px);
+  pointer-events: none;
+  transition: background-color .14s, transform .28s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
+}
+
+.header-update-slot.is-visible .header-update-button {
+  opacity: 1;
+  transform: translateX(0);
+  pointer-events: auto;
 }
 
 .header-update-button.update-available {
@@ -4040,6 +4072,11 @@ input[type="checkbox"] {
     padding: 0;
   }
 
+  .header-update-slot.is-visible {
+    width: 34px;
+    flex-basis: 34px;
+  }
+
   .header-update-label,
   .version-label {
     display: none;
diff --git a/tests/startup-renderer.test.js b/tests/startup-renderer.test.js
index 02c2539..23212bb 100644
--- a/tests/startup-renderer.test.js
+++ b/tests/startup-renderer.test.js
@@ -154,11 +154,16 @@ test('header occupies its final geometry before asynchronous initialization', ()
   const mainSource = fs.readFileSync(path.join(projectRoot, 'main.js'), 'utf8');
   const css = fs.readFileSync(path.join(projectRoot, 'renderer', 'styles.css'), 'utf8');
   const updateButton = html.match(/<button class="header-update-button"[^>]*id="headerUpdateBtn"[^>]*>/u)?.[0] || '';
+  const updateSlotIndex = html.indexOf('class="header-update-slot"');
+  const speedWidgetIndex = html.indexOf('id="uploadSpeedSparkline"');
   const firstFrameInitialization = appSource.lastIndexOf('\ninitializeStaticHeader();');
   const asynchronousInitialization = appSource.lastIndexOf('\ninit().then(');
 
   assert.doesNotMatch(updateButton, /\shidden(?:\s|>)/u);
-  assert.match(css, /\.header-update-button\s*\{[^}]*width:\s*146px;[^}]*flex:\s*0 0 146px;/su);
+  assert.ok(updateSlotIndex >= 0 && updateSlotIndex < speedWidgetIndex);
+  assert.match(css, /\.header-update-slot\s*\{[^}]*width:\s*0;[^}]*flex:\s*0 0 0;[^}]*overflow:\s*hidden;/su);
+  assert.match(css, /\.header-update-slot\.is-visible\s*\{[^}]*width:\s*146px;[^}]*flex-basis:\s*146px;/su);
+  assert.match(css, /\.header-update-slot\.is-visible\s+\.header-update-button\s*\{[^}]*opacity:\s*1;[^}]*transform:\s*translateX\(0\);/su);
   assert.match(css, /\.version-badge\s*\{[^}]*min-width:\s*48px;/su);
   assert.notEqual(firstFrameInitialization, -1);
   assert.ok(firstFrameInitialization < asynchronousInitialization);
diff --git a/tests/ui-smoke.js b/tests/ui-smoke.js
index 08006c9..08b1160 100644
--- a/tests/ui-smoke.js
+++ b/tests/ui-smoke.js
@@ -185,8 +185,8 @@ setTimeout(async () => {
   }
 
   try {
-    const startupUpdateState = await wc.executeJavaScript('(() => { const button = document.getElementById("headerUpdateBtn"); return [_knownUpdateInfo?.remoteVersion, button?.hidden, getComputedStyle(button).display, document.getElementById("updateBanner")?.style.display].join("|"); })()');
-    check('Startup update survives pending renderer initialization', startupUpdateState === '9.9.8|false|flex|flex');
+    const startupUpdateState = await wc.executeJavaScript('(() => { const slot = document.getElementById("headerUpdateSlot"); return [_knownUpdateInfo?.remoteVersion, slot?.classList.contains("is-visible"), slot?.getAttribute("aria-hidden"), document.getElementById("updateBanner")?.style.display].join("|"); })()');
+    check('Startup update survives pending renderer initialization', startupUpdateState === '9.9.8|true|false|flex');
     await wc.executeJavaScript('_knownUpdateInfo = null; closeUpdateDialog(); _syncHeaderUpdateState();');
 
     const germanStartupReady = await waitUntil(() => wc.executeJavaScript('document.documentElement.lang + "|" + document.getElementById("languageInput")?.value + "|" + [...document.querySelectorAll(".tab")].map(tab => tab.textContent.trim()).join(",")'));
@@ -290,8 +290,8 @@ setTimeout(async () => {
     const headerUpdateButtonExists = await wc.executeJavaScript('Boolean(document.getElementById("headerUpdateBtn"))');
     check('App header exposes the update action', headerUpdateButtonExists);
 
-    const initialHeaderUpdateVisibility = await wc.executeJavaScript('(() => { const button = document.getElementById("headerUpdateBtn"); return [button?.hidden, getComputedStyle(button).display].join("|"); })()');
-    check('Header update action keeps its layout slot before an update is available', initialHeaderUpdateVisibility === 'false|flex');
+    const initialHeaderUpdateVisibility = await wc.executeJavaScript('(() => { const slot = document.getElementById("headerUpdateSlot"); const button = document.getElementById("headerUpdateBtn"); return [slot?.classList.contains("is-visible"), slot?.getAttribute("aria-hidden"), Math.round(slot?.getBoundingClientRect().width || 0), button?.disabled, button?.tabIndex].join("|"); })()');
+    check('Header update action is fully collapsed before an update is available', initialHeaderUpdateVisibility === 'false|true|0|true|-1');
 
     const initialUpdateLabel = await wc.executeJavaScript('document.querySelector("#headerUpdateBtn .header-update-label")?.textContent?.trim()');
     check('App header uses the compact update label', initialUpdateLabel === 'Update');
@@ -1198,20 +1198,20 @@ setTimeout(async () => {
       document.getElementById('headerUpdateBtn').click();
     })()\`);
     await new Promise(resolve => setTimeout(resolve, 100));
-    const coordinatedUpdateBusy = await wc.executeJavaScript('(() => { const manual = document.getElementById("manualUpdateCheckBtn"); const header = document.getElementById("headerUpdateBtn"); return [manual?.disabled, manual?.getAttribute("aria-busy"), manual?.textContent?.trim(), header?.disabled, header?.getAttribute("aria-busy"), header?.hidden].join("|"); })()');
-    check('All update entry points share one in-flight check', updateCheckCallCount === 1 && coordinatedUpdateBusy === 'true|true|Prüfe…|true|true|false');
+    const coordinatedUpdateBusy = await wc.executeJavaScript('(() => { const manual = document.getElementById("manualUpdateCheckBtn"); const header = document.getElementById("headerUpdateBtn"); const slot = document.getElementById("headerUpdateSlot"); return [manual?.disabled, manual?.getAttribute("aria-busy"), manual?.textContent?.trim(), header?.disabled, header?.getAttribute("aria-busy"), slot?.classList.contains("is-visible")].join("|"); })()');
+    check('All update entry points share one in-flight check without revealing the header action', updateCheckCallCount === 1 && coordinatedUpdateBusy === 'true|true|Prüfe…|true|true|false');
     updateCheckResolvers.splice(0).forEach(resolve => resolve({ available: false, error: 'Simulierter Netzwerkfehler' }));
     await new Promise(resolve => setTimeout(resolve, 150));
-    const coordinatedUpdateError = await wc.executeJavaScript('(() => { const manual = document.getElementById("manualUpdateCheckBtn"); const header = document.getElementById("headerUpdateBtn"); return [manual?.disabled, header?.disabled, header?.hidden, manual?.textContent?.trim(), document.getElementById("copyToast")?.textContent?.trim()].join("|"); })()');
-    check('Settings update check uses the shared error contract', coordinatedUpdateError === 'false|false|false|Nach Updates suchen|Updateprüfung fehlgeschlagen');
+    const coordinatedUpdateError = await wc.executeJavaScript('(() => { const manual = document.getElementById("manualUpdateCheckBtn"); const header = document.getElementById("headerUpdateBtn"); const slot = document.getElementById("headerUpdateSlot"); return [manual?.disabled, header?.disabled, slot?.classList.contains("is-visible"), manual?.textContent?.trim(), document.getElementById("copyToast")?.textContent?.trim()].join("|"); })()');
+    check('Settings update check uses the shared error contract', coordinatedUpdateError === 'false|true|false|Nach Updates suchen|Updateprüfung fehlgeschlagen');
     await wc.executeJavaScript('document.getElementById("copyToast")?.classList.remove("show")');
 
     await wc.executeJavaScript('requestUpdateCheck(); true');
     await new Promise(resolve => setTimeout(resolve, 100));
     updateCheckResolvers.splice(0).forEach(resolve => resolve({ available: false }));
     await new Promise(resolve => setTimeout(resolve, 150));
-    const noUpdateHeaderVisibility = await wc.executeJavaScript('(() => { const button = document.getElementById("headerUpdateBtn"); return [button?.hidden, getComputedStyle(button).display].join("|"); })()');
-    check('Successful no-update result keeps the header action in its stable slot', noUpdateHeaderVisibility === 'false|flex');
+    const noUpdateHeaderVisibility = await wc.executeJavaScript('(() => { const slot = document.getElementById("headerUpdateSlot"); const button = document.getElementById("headerUpdateBtn"); return [slot?.classList.contains("is-visible"), Math.round(slot?.getBoundingClientRect().width || 0), button?.disabled].join("|"); })()');
+    check('Successful no-update result keeps the header action collapsed', noUpdateHeaderVisibility === 'false|0|true');
 
     const settingsNavigation = await wc.executeJavaScript('(() => { const buttons = [...document.querySelectorAll(".settings-nav-button")]; return [buttons.length, buttons.map(button => button.textContent.trim()).join("|"), document.querySelector(".settings-nav-button.active")?.dataset.settingsPage, document.getElementById("settingsSearchInput")?.placeholder].join("::"); })()');
     check('Settings use the task-based sidebar navigation', settingsNavigation === '8::Allgemein|Uploads|Automatik|Benachrichtigungen|Logs & Support|Fernsteuerung|Diagnose-Zugriff|Backup & Übertragen::allgemein::Einstellungen durchsuchen');