feat: add update banner UI with progress display

renderer/app.js

@@ -40,6 +40,17 @@ async function init() {
   syncAutoCheckToggle();
   setupDragDrop();
   loadHistory();
+
+  // Version display
+  try {
+    const version = await window.api.getVersion();
+    const versionLabel = document.getElementById('versionLabel');
+    if (versionLabel) versionLabel.textContent = `v${version}`;
+  } catch {}
+
+  // Update listeners
+  window.api.onUpdateAvailable(showUpdateBanner);
+  window.api.onUpdateProgress(handleUpdateProgress);
 }
 
 // --- Tab switching ---
@@ -1002,5 +1013,42 @@ function escapeAttr(str) {
   return str.replace(/&/g, '&').replace(/"/g, '"').replace(/'/g, ''');
 }
 
+// --- Update UI ---
+function showUpdateBanner(info) {
+  const banner = document.getElementById('updateBanner');
+  const msg = document.getElementById('updateMessage');
+  if (!banner || !msg) return;
+  msg.textContent = `Update v${info.remoteVersion} verfuegbar`;
+  banner.style.display = 'flex';
+
+  document.getElementById('installUpdateBtn').onclick = async () => {
+    msg.textContent = 'Update wird heruntergeladen...';
+    document.getElementById('installUpdateBtn').disabled = true;
+    await window.api.installUpdate();
+  };
+  document.getElementById('dismissUpdateBtn').onclick = () => {
+    banner.style.display = 'none';
+  };
+}
+
+function handleUpdateProgress(data) {
+  const msg = document.getElementById('updateMessage');
+  if (!msg) return;
+
+  if (data.stage === 'downloading') {
+    msg.textContent = `Downloading... ${data.percent || 0}%`;
+  } else if (data.stage === 'verifying') {
+    msg.textContent = 'Verifiziere...';
+  } else if (data.stage === 'launching') {
+    msg.textContent = 'Setup wird gestartet...';
+  } else if (data.stage === 'done') {
+    msg.textContent = 'Update installiert. App wird neu gestartet...';
+  } else if (data.stage === 'error') {
+    msg.textContent = `Update fehlgeschlagen: ${data.error}`;
+    const btn = document.getElementById('installUpdateBtn');
+    if (btn) { btn.disabled = false; btn.textContent = 'Erneut versuchen'; }
+  }
+}
+
 // --- Start ---
 init();

renderer/index.html

@@ -11,8 +11,15 @@
     <button class="tab active" data-view="upload">Upload</button>
     <button class="tab" data-view="settings">Einstellungen</button>
     <button class="tab" data-view="history">Verlauf</button>
+    <span class="version-label" id="versionLabel"></span>
   </nav>
 
+  <div id="updateBanner" class="update-banner" style="display:none">
+    <span id="updateMessage"></span>
+    <button class="btn btn-sm btn-primary" id="installUpdateBtn">Update installieren</button>
+    <button class="btn btn-sm btn-secondary" id="dismissUpdateBtn">&times;</button>
+  </div>
+
   <!-- Upload View -->
   <div id="upload-view" class="view active">
     <div class="hoster-select" id="hosterSelect"></div>

renderer/styles.css

@@ -789,3 +789,26 @@ body {
 ::-webkit-scrollbar-thumb:hover {
   background: rgba(255, 255, 255, 0.2);
 }
+
+/* Update Banner */
+.update-banner {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 20px;
+  background: linear-gradient(135deg, #667eea22, #764ba222);
+  border-bottom: 1px solid rgba(102, 126, 234, 0.3);
+  font-size: 0.85rem;
+  color: #e0e0e0;
+}
+
+.update-banner span {
+  flex: 1;
+}
+
+.version-label {
+  margin-left: auto;
+  font-size: 0.75rem;
+  color: #888;
+  padding: 4px 8px;
+}