fix: stabilize software updates

internal/web/templates/layout.html

@@ -6,8 +6,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="color-scheme" content="light">
   <title>{{.Title}} · DNS Control</title>
-  <link rel="stylesheet" href="/static/styles.css?v=features-24">
-  <script src="/static/app.js?v=features-24" defer></script>
+  <link rel="stylesheet" href="/static/styles.css?v=features-27">
+  <script src="/static/app.js?v=features-27" defer></script>
 </head>
 <body class="page-{{.Page}}">
   <a class="skip-link" href="#main">Zum Inhalt springen</a>
@@ -44,7 +44,7 @@
         {{if eq .Mode "lan"}}<span class="environment-badge">LAN · HTTP</span>{{else}}<span class="environment-badge secure">HTTPS</span>{{end}}
       </header>
       {{if and .IsAdmin .SoftwareUpdate.UpdateAvailable (ne .Page "system")}}
-      <aside class="software-update-banner" aria-label="Software-Update verfügbar">
+      <aside class="software-update-banner" data-software-update-banner="{{.SoftwareUpdate.LatestVersion}}" aria-label="Software-Update verfügbar">
         <span class="software-update-banner-icon" aria-hidden="true">↗</span>
         <div><span>Neue Version verfügbar</span><strong>{{.SoftwareUpdate.LatestVersion}} ist bereit</strong></div>
         <div class="software-update-banner-actions">
@@ -77,17 +77,31 @@
   </div>
   {{end}}
   {{if and .IsAdmin .SoftwareUpdate.UpdateAvailable (ne .Page "system")}}
-  <div class="software-update-overlay" data-software-update-overlay hidden role="dialog" aria-modal="true" aria-labelledby="software-update-title-global">
-    <div class="software-update-dialog">
-      <div class="software-update-orbit" aria-hidden="true"><span>DC</span><i></i></div>
-      <span class="section-label">Systemupdate</span><h2 id="software-update-title-global">Update wird vorbereitet</h2>
-      <p data-software-update-message>Das neue Container-Image wird geladen.</p>
-      <div class="software-update-progress"><i data-software-update-progress></i></div>
-      <ol class="software-update-phases" aria-label="Update-Fortschritt"><li data-update-phase="pulling"><span>01</span>Image laden</li><li data-update-phase="restarting"><span>02</span>Dienst wechseln</li><li data-update-phase="verifying"><span>03</span>Healthcheck</li></ol>
-      <button class="button button-quiet" type="button" data-software-update-close hidden>Schließen</button>
-    </div>
-  </div>
+  {{template "software_update_overlay" .}}
   {{end}}
 </body>
 </html>
 {{end}}
+
+{{define "software_update_overlay"}}
+<div class="software-update-overlay" data-software-update-overlay hidden role="dialog" aria-modal="true" aria-labelledby="software-update-title{{if ne .Page "system"}}-global{{end}}">
+  <div class="software-update-dialog">
+    <div class="software-update-visual" aria-hidden="true">
+      <span class="software-update-scan"></span>
+      <div class="software-update-orbit"><span>DC</span><i></i></div>
+      <i class="update-signal signal-a"></i><i class="update-signal signal-b"></i><i class="update-signal signal-c"></i>
+    </div>
+    <span class="section-label">Systemupdate</span>
+    <h2 id="software-update-title{{if ne .Page "system"}}-global{{end}}" data-software-update-title>Update wird vorbereitet</h2>
+    <p data-software-update-message aria-live="polite">Das neue Container-Image wird sicher vorbereitet.</p>
+    <div class="software-update-progress-meta"><span data-software-update-progress-label>Vorbereitung</span><strong data-software-update-percent>04%</strong></div>
+    <div class="software-update-progress" data-software-update-progress-track role="progressbar" aria-label="Update-Fortschritt" aria-valuemin="0" aria-valuemax="100" aria-valuenow="4"><i data-software-update-progress></i><span></span></div>
+    <ol class="software-update-phases" aria-label="Update-Fortschritt">
+      <li data-update-phase="pulling"><span><b>01</b></span><strong>Image laden</strong><small>Registry</small></li>
+      <li data-update-phase="restarting"><span><b>02</b></span><strong>Dienst wechseln</strong><small>Container</small></li>
+      <li data-update-phase="verifying"><span><b>03</b></span><strong>Healthcheck</strong><small>Verifizieren</small></li>
+    </ol>
+    <button class="button button-quiet" type="button" data-software-update-close hidden>Schließen</button>
+  </div>
+</div>
+{{end}}