Update from Git Manager GUI

renderer/renderer.js

@@ -3,6 +3,8 @@ const $ = id => document.getElementById(id);
 
 let selectedFolder = null;
 let giteaCache = {}; 
+let currentLocalProjects = [];
+let backupGitRepos = [];
 
 /* ================================================
    FAVORITEN & ZULETZT GEÖFFNET — State & Helpers
@@ -1415,6 +1417,132 @@ function ensureProgressUI() {
     document.body.appendChild(container);
 }
 
+function ensureBackupRunOverlay() {
+    if ($('backupRunOverlay')) return;
+
+    const overlay = document.createElement('div');
+    overlay.id = 'backupRunOverlay';
+    overlay.style.cssText = `
+        position: fixed;
+        inset: 0;
+        z-index: 10001;
+        background: rgba(5, 10, 18, 0.58);
+        backdrop-filter: blur(4px);
+        display: none;
+        align-items: center;
+        justify-content: center;
+        padding: 16px;
+    `;
+
+    const card = document.createElement('div');
+    card.style.cssText = `
+        width: min(520px, 96vw);
+        background: linear-gradient(180deg, rgba(16, 26, 44, 0.96), rgba(12, 20, 34, 0.96));
+        border: 1px solid rgba(88, 213, 255, 0.26);
+        border-radius: 12px;
+        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
+        padding: 18px 18px 16px;
+        color: #fff;
+    `;
+
+    const header = document.createElement('div');
+    header.style.cssText = 'display:flex;align-items:center;gap:10px;margin-bottom:10px;font-weight:700;font-size:14px;color:#9de8ff;';
+
+    const spinner = document.createElement('div');
+    spinner.style.cssText = `
+        width: 16px;
+        height: 16px;
+        border: 2px solid rgba(88, 213, 255, 0.25);
+        border-top-color: #58d5ff;
+        border-radius: 50%;
+        animation: backupSpin 0.9s linear infinite;
+    `;
+
+    const title = document.createElement('span');
+    title.textContent = 'Backup laeuft... bitte warten';
+    header.appendChild(spinner);
+    header.appendChild(title);
+
+    const detail = document.createElement('div');
+    detail.id = 'backupRunOverlayText';
+    detail.style.cssText = 'font-size:13px;color:#d8eaff;margin-bottom:10px;min-height:20px;';
+    detail.textContent = 'Initialisiere Backup...';
+
+    const percent = document.createElement('div');
+    percent.id = 'backupRunOverlayPercent';
+    percent.style.cssText = 'font-size:12px;color:#9fc6dc;margin-bottom:8px;text-align:right;';
+    percent.textContent = '0%';
+
+    const barWrap = document.createElement('div');
+    barWrap.style.cssText = 'height:10px;background:rgba(255,255,255,0.10);border-radius:999px;overflow:hidden;';
+
+    const bar = document.createElement('div');
+    bar.id = 'backupRunOverlayBar';
+    bar.style.cssText = 'height:100%;width:0%;background:linear-gradient(90deg, #58d5ff, #5c87ff);transition:width 200ms ease-out;';
+    barWrap.appendChild(bar);
+
+    card.appendChild(header);
+    card.appendChild(detail);
+    card.appendChild(percent);
+    card.appendChild(barWrap);
+    overlay.appendChild(card);
+    document.body.appendChild(overlay);
+
+    if (!$('backupOverlayAnimationStyle')) {
+        const style = document.createElement('style');
+        style.id = 'backupOverlayAnimationStyle';
+        style.textContent = '@keyframes backupSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }';
+        document.head.appendChild(style);
+    }
+}
+
+function mapBackupProgressText(rawText, percentValue) {
+    const text = String(rawText || '').toLowerCase();
+    const percent = Math.min(100, Math.max(0, Math.round(Number(percentValue) || 0)));
+
+    if (percent >= 100) return 'Finalisiere Backup...';
+    if (text.includes('upload')) return 'Upload laeuft...';
+    if (text.includes('download')) return 'Dateien werden heruntergeladen...';
+    if (text.includes('git')) return 'Git-Projekte werden gesammelt...';
+    if (text.includes('erstelle backup') || text.includes('backup wird erstellt')) return 'Backup wird erstellt...';
+    if (percent <= 8) return 'Vorbereitung laeuft...';
+    if (percent <= 35) return 'Dateien werden gesammelt...';
+    if (percent <= 85) return 'Daten werden verarbeitet...';
+    return 'Finalisiere Backup...';
+}
+
+function showBackupRunOverlay(text) {
+    ensureBackupRunOverlay();
+    const overlay = $('backupRunOverlay');
+    const detail = $('backupRunOverlayText');
+    const percent = $('backupRunOverlayPercent');
+    const bar = $('backupRunOverlayBar');
+    if (detail) detail.textContent = text || 'Backup wird vorbereitet...';
+    if (percent) percent.textContent = '0%';
+    if (bar) bar.style.width = '0%';
+    if (overlay) overlay.style.display = 'flex';
+}
+
+function updateBackupRunOverlay(percentValue, text) {
+    const overlay = $('backupRunOverlay');
+    if (!overlay || overlay.style.display === 'none') return;
+    const clamped = Math.min(100, Math.max(0, Math.round(Number(percentValue) || 0)));
+    const detail = $('backupRunOverlayText');
+    const percent = $('backupRunOverlayPercent');
+    const bar = $('backupRunOverlayBar');
+    if (detail) detail.textContent = mapBackupProgressText(text, clamped);
+    if (percent) percent.textContent = `${clamped}%`;
+    if (bar) bar.style.width = `${clamped}%`;
+}
+
+function hideBackupRunOverlay() {
+    const overlay = $('backupRunOverlay');
+    if (!overlay) return;
+    setTimeout(() => {
+        overlay.style.display = 'none';
+    }, 250);
+}
+
 function showProgress(percent, text) {
     ensureProgressUI();
     const container = $('folderProgressContainer');
@@ -1423,6 +1551,7 @@ function showProgress(percent, text) {
     if (txt) txt.innerText = text || '';
     if (bar) bar.style.width = `${Math.min(100, Math.max(0, percent))}%`;
     if (container) container.style.display = 'block';
+    updateBackupRunOverlay(percent, text);
 }
 
 function hideProgress() {
@@ -2730,6 +2859,11 @@ async function refreshLocalTree(folder) {
             exclude: ['node_modules', '.git'], 
             maxDepth: 5 
         });
+
+        currentLocalProjects = Array.isArray(res.tree)
+            ? res.tree.filter(node => node && node.isDirectory)
+            : [];
+        populateBackupSourceOptions();
         
         const grid = $('explorerGrid');
         if (!grid) return;
@@ -2741,6 +2875,8 @@ async function refreshLocalTree(folder) {
         }
 
         if (!res.tree || res.tree.length === 0) {
+            currentLocalProjects = [];
+            populateBackupSourceOptions();
             grid.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 40px; color: var(--text-muted);">Keine Dateien gefunden</div>';
             return;
         }
@@ -2805,9 +2941,17 @@ async function pushLocalFolder() {
     const branch = $('branchSelect')?.value || 'main';
     const repoName = $('repoName')?.value;
     const platform = $('platform')?.value;
+    const savedCreds = await window.electronAPI.loadCredentials();
+    const autoBackup = Boolean(savedCreds && savedCreds.autoBackupEnabled);
+    const backupTarget = String((savedCreds && savedCreds.backupPrefLocalFolder) || '').trim();
     
     setStatus('Pushing...');
-    showProgress(0, 'Starting push...');
+    if (autoBackup) {
+        showBackupRunOverlay('Auto-Backup wird erstellt...');
+        showProgress(0, 'Auto-Backup wird erstellt...');
+    } else {
+        showProgress(0, 'Starting push...');
+    }
     
     try {
         const res = await window.electronAPI.pushProject({ 
@@ -2815,19 +2959,26 @@ async function pushLocalFolder() {
             branch, 
             repoName, 
             platform,
-            commitMessage: message
+            commitMessage: message,
+            autoBackup,
+            backupTarget
         });
         
         if (res.ok) {
-            setStatus('Push succeeded');
+            if (autoBackup) {
+                showSuccess('Vorab-Backup OK, Upload erfolgreich ✓');
+            } else {
+                showSuccess('Upload erfolgreich ✓');
+            }
         } else {
-            showError('Push failed: ' + (res.error || 'Unknown error'));
+            showError('Upload fehlgeschlagen: ' + (res.error || 'Unbekannter Fehler'));
         }
     } catch (error) {
         console.error('Push error:', error);
-        showError('Push failed');
+        showError('Upload fehlgeschlagen');
     } finally {
         hideProgress();
+        hideBackupRunOverlay();
     }
 }
 
@@ -3492,6 +3643,47 @@ function showInputModal({ title, label, defaultValue, confirmText, onConfirm })
     modal.onclick = (e) => { if (e.target === modal) modal.remove(); };
 }
 
+function showActionConfirmModal({ title, message, confirmText = 'Bestätigen', danger = false }) {
+    return new Promise((resolve) => {
+        const modal = document.createElement('div');
+        modal.className = 'modal confirm-modal';
+        modal.style.zIndex = '99999';
+        modal.innerHTML = `
+            <div class="modalContent card confirm-modal-content">
+                <h2 class="confirm-modal-title">${danger ? '🗑️' : 'ℹ️'} ${escapeHtml(title || 'Bestätigung')}</h2>
+                <p class="confirm-modal-message">${escapeHtml(message || '')}</p>
+                <div class="modal-buttons confirm-modal-buttons">
+                    <button id="actionConfirmOk" class="confirm-modal-btn ${danger ? 'confirm-modal-btn--danger' : 'confirm-modal-btn--primary'}">${escapeHtml(confirmText)}</button>
+                    <button id="actionConfirmCancel" class="confirm-modal-btn confirm-modal-btn--secondary">Abbrechen</button>
+                </div>
+            </div>
+        `;
+
+        document.body.appendChild(modal);
+
+        const okBtn = modal.querySelector('#actionConfirmOk');
+        const cancelBtn = modal.querySelector('#actionConfirmCancel');
+        if (okBtn) okBtn.focus();
+
+        const closeWith = (result) => {
+            modal.remove();
+            resolve(result);
+        };
+
+        if (okBtn) okBtn.onclick = () => closeWith(true);
+        if (cancelBtn) cancelBtn.onclick = () => closeWith(false);
+
+        modal.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') closeWith(false);
+            if (e.key === 'Enter') closeWith(true);
+        });
+
+        modal.onclick = (e) => {
+            if (e.target === modal) closeWith(false);
+        };
+    });
+}
+
 /* -------------------------
    HELPER FUNCTIONS
    ------------------------- */
@@ -4400,6 +4592,30 @@ window.addEventListener('DOMContentLoaded', async () => {
         showProgress(p.percent, `Download: ${p.processed}/${p.total}`);
     });
 
+    if (window.electronAPI.onPrePushBackupStatus) {
+        window.electronAPI.onPrePushBackupStatus((payload) => {
+            if (!payload || !payload.stage) return;
+
+            if (payload.stage === 'backup-start') {
+                setStatus('Auto-Backup wird erstellt...');
+                showBackupRunOverlay('Auto-Backup wird erstellt...');
+                showProgress(8, 'Auto-Backup wird erstellt...');
+            } else if (payload.stage === 'backup-done') {
+                setStatus('Vorab-Backup erstellt. Upload startet...');
+                showProgress(22, 'Vorab-Backup erstellt. Upload startet...');
+                showInfo('Vorab-Backup OK, Upload startet...');
+            } else if (payload.stage === 'upload-start') {
+                setStatus('Upload läuft...');
+                showProgress(30, 'Upload läuft...');
+            } else if (payload.stage === 'backup-failed') {
+                const errorMsg = payload.error ? `Auto-Backup fehlgeschlagen: ${payload.error}` : 'Auto-Backup fehlgeschlagen.';
+                setStatus('Auto-Backup fehlgeschlagen');
+                showError(errorMsg);
+                hideBackupRunOverlay();
+            }
+        });
+    }
+
     if (window.electronAPI.onRetryQueueUpdated) {
         window.electronAPI.onRetryQueueUpdated((payload) => {
             const size = payload && typeof payload.size === 'number' ? payload.size : 0;
@@ -4431,7 +4647,596 @@ window.addEventListener('DOMContentLoaded', async () => {
     setStatus('Ready');
     initUpdater(); // Updater initialisieren
     updateNavigationUI();
+
+    // ═══════════════════════════════════════════════════════════
+    // ✅ BACKUP MANAGEMENT MODAL - EVENT HANDLERS
+    // ═══════════════════════════════════════════════════════════
+    
+    // Button zum Öffnen des Backup-Modals
+    if ($('btnOpenBackupManagement')) {
+        $('btnOpenBackupManagement').onclick = async () => {
+            const modal = $('backupManagementModal');
+            if (modal) modal.classList.remove('hidden');
+            await loadBackupUiPrefs();
+            await ensureBackupSourcesLoaded();
+            populateBackupSourceOptions();
+            const repoName = getActiveBackupRepoName();
+            if (repoName) {
+                setStatus(`Backup-Verwaltung: ${repoName}`);
+            }
+            await refreshBackupAuthStatus();
+            loadBackupList();
+        };
+    }
+
+    // Schließen-Button im Modal
+    if ($('btnCloseBackupModal')) {
+        $('btnCloseBackupModal').onclick = () => {
+            const modal = $('backupManagementModal');
+            if (modal) modal.classList.add('hidden');
+        };
+    }
+
+    const localCredentialsSection = $('localCredentials');
+    if (localCredentialsSection) {
+        localCredentialsSection.style.display = 'flex';
+    }
+
+    // 🚀 CREATE BACKUP NOW - Button
+    if ($('btnCreateBackupNow')) {
+        $('btnCreateBackupNow').onclick = async () => {
+            const source = getSelectedBackupSource();
+            const repoName = source?.repoName || getActiveBackupRepoName();
+            if (!repoName) {
+                showWarning('Kein Repository erkannt. Bitte zuerst ein Repository öffnen oder einen Projektordner wählen.');
+                return;
+            }
+
+            const provider = 'local';
+
+            const closeBackupModalForRun = () => {
+                const modal = $('backupManagementModal');
+                if (modal) modal.classList.add('hidden');
+            };
+
+            if (provider === 'local' && source && (source.kind === 'gitea-repo' || source.kind === 'gitea-all')) {
+                const destination = $('localBackupFolder')?.value?.trim() || '';
+                if (!destination) {
+                    showWarning('Bitte zuerst den Backup-Zielordner auswählen.');
+                    return;
+                }
+
+                closeBackupModalForRun();
+                setStatus('Lade Projekte von Git und sichere lokal...');
+                const btn = $('btnCreateBackupNow');
+                const oldText = btn.textContent;
+                btn.disabled = true;
+                showBackupRunOverlay('Lade Projekte von Git und sichere lokal...');
+                showProgress(0, 'Lade Projekte von Git...');
+
+                try {
+                    const res = await window.electronAPI.exportGiteaProjectsToLocal(
+                        source.kind === 'gitea-all'
+                            ? { mode: 'all', destination }
+                            : { mode: 'single', owner: source.owner, repo: source.repo, destination }
+                    );
+
+                    if (res?.ok) {
+                        updateBackupRunOverlay(100, 'Finalisiere Backup...');
+                        const reposCount = res.repositoryCount || (Array.isArray(res.repositories) ? res.repositories.length : 0);
+                        showSuccess(`✓ Git-Backup abgeschlossen: ${reposCount} Projekte in ${destination}`);
+                        setStatus('Komplett-Backup abgeschlossen');
+                    } else {
+                        showError('Komplett-Backup fehlgeschlagen: ' + (res?.error || 'Unbekannter Fehler'));
+                    }
+                } catch (error) {
+                    showError('Komplett-Backup fehlgeschlagen: ' + (error?.message || String(error)));
+                } finally {
+                    hideProgress();
+                    hideBackupRunOverlay();
+                    btn.disabled = false;
+                    btn.textContent = oldText;
+                }
+                return;
+            }
+
+            const sourcePath = source?.projectPath || selectedFolder || '';
+            if (!sourcePath) {
+                showWarning('Bitte Backup-Quelle aus der Liste auswählen.');
+                return;
+            }
+
+            closeBackupModalForRun();
+            setStatus('Erstelle Backup...');
+            const btn = $('btnCreateBackupNow');
+            const oldText = btn.textContent;
+            btn.disabled = true;
+            showBackupRunOverlay('Lokales Backup wird erstellt...');
+            showProgress(0, 'Erstelle Backup...');
+
+            try {
+                const res = await window.electronAPI.createCloudBackup({
+                    repoName,
+                    projectPath: sourcePath
+                });
+
+                if (res?.ok) {
+                    updateBackupRunOverlay(100, 'Finalisiere Backup...');
+                    showSuccess('✓ Backup erfolgreich erstellt!');
+                    setStatus('Backup abgeschlossen');
+                    // Lade Backup-Liste neu
+                    setTimeout(loadBackupList, 500);
+                } else {
+                    showError('Backup fehlgeschlagen: ' + (res?.error || 'Unbekannter Fehler'));
+                }
+            } catch (error) {
+                showError('Fehler: ' + (error?.message || String(error)));
+            } finally {
+                hideProgress();
+                hideBackupRunOverlay();
+                btn.disabled = false;
+                btn.textContent = oldText;
+            }
+        };
+    }
+
+    // 🔄 REFRESH BACKUP LIST - Button
+    if ($('btnRefreshBackupsList')) {
+        $('btnRefreshBackupsList').onclick = loadBackupList;
+    }
+
+    if ($('backupSourceSelect')) {
+        $('backupSourceSelect').addEventListener('change', async () => {
+            const key = $('backupSourceSelect')?.value || '';
+            if (key) {
+                await saveBackupUiPrefs({ backupPrefSourceSelection: key });
+            }
+            await refreshBackupAuthStatus();
+            loadBackupList();
+        });
+    }
+
+    if ($('btnPickLocalBackupFolder')) {
+        $('btnPickLocalBackupFolder').onclick = async () => {
+            try {
+                const folder = await window.electronAPI.selectFolder();
+                if (!folder) return;
+                const input = $('localBackupFolder');
+                if (input) input.value = folder;
+                await saveBackupUiPrefs({ backupPrefLocalFolder: folder });
+                await ensureBackupSourcesLoaded();
+                populateBackupSourceOptions();
+                await refreshBackupAuthStatus();
+                await loadBackupList();
+            } catch (error) {
+                showError('Ordnerauswahl fehlgeschlagen: ' + (error?.message || String(error)));
+            }
+        };
+    }
+
+    // 📋 Handler für Auto-Backup Toggle
+    if ($('settingAutoBackup')) {
+        $('settingAutoBackup').addEventListener('change', async (e) => {
+            try {
+                const enabled = e.target.checked;
+                const creds = await window.electronAPI.loadCredentials();
+                if (creds) {
+                    await window.electronAPI.saveCredentials({
+                        ...creds,
+                        autoBackupEnabled: enabled
+                    });
+                    showInfo(enabled ? '✓ Auto-Backup aktiviert' : '✓ Auto-Backup deaktiviert');
+                }
+            } catch (error) {
+                console.error('Error toggling auto-backup:', error);
+            }
+        });
+    }
+
+    // Listener für Backup Created Events (von IPC)
+    if (window.electronAPI.onBackupCreated) {
+        window.electronAPI.onBackupCreated((data) => {
+            if (data?.ok) {
+                showSuccess(`📦 Backup erstellt: ${data.filename}`);
+                logActivity('info', `Backup erstellt: ${data.filename} (${data.size} bytes)`);
+                loadBackupList();
+            }
+        });
+    }
+
 });
+
+// ═══════════════════════════════════════════════════════════
+// HELPER FUNCTIONS - BACKUP
+// ═══════════════════════════════════════════════════════════
+
+function getBackupCredentialsFromUI(provider) {
+    if (!provider) return null;
+
+    const creds = {};
+    let isValid = true;
+
+    if (provider === 'local') {
+        creds.basePath = $('localBackupFolder')?.value?.trim();
+        isValid = !!creds.basePath;
+    }
+
+    return isValid ? creds : null;
+}
+
+async function refreshBackupAuthStatus() {
+    const el = $('backupAuthStatus');
+    if (!el) return;
+
+    const repoName = getActiveBackupRepoName();
+    const provider = 'local';
+
+    if (!repoName) {
+        el.textContent = 'Status: Kein Repository erkannt';
+        el.style.color = 'var(--warning)';
+        return;
+    }
+
+    try {
+        const res = await window.electronAPI.getBackupAuthStatus({ repoName, provider });
+        if (res?.ok && res.connected) {
+            const sourceLabel = res.source === 'repo'
+                ? 'projektbezogen'
+                : (res.source === 'global' ? 'global gespeichert' : 'aktiv');
+            el.textContent = `Status: Verbunden (${sourceLabel})`;
+            el.style.color = 'var(--success)';
+        } else {
+            el.textContent = 'Status: Nicht verbunden - einmalig verbinden erforderlich';
+            el.style.color = 'var(--warning)';
+        }
+    } catch (_) {
+        el.textContent = 'Status: Verbindung konnte nicht geprüft werden';
+        el.style.color = 'var(--danger)';
+    }
+}
+
+function getActiveBackupRepoName() {
+    const selectedSource = getSelectedBackupSource();
+    if (selectedSource && selectedSource.repoName) return selectedSource.repoName;
+
+    if (currentState && currentState.repo) return currentState.repo;
+    const inputRepo = $('repoName')?.value?.trim();
+    if (inputRepo) return inputRepo;
+    if (selectedFolder) {
+        const folderName = selectedFolder.split(/[\\/]/).pop();
+        if (folderName) return folderName;
+    }
+    return '';
+}
+
+function getSelectedBackupSource() {
+    const key = $('backupSourceSelect')?.value || '';
+    if (!key) return null;
+
+    if (key === '__ALL_GIT__') {
+        return {
+            key,
+            kind: 'gitea-all',
+            repoName: 'all-git-projects',
+            label: 'Alles komplett sichern (Git)'
+        };
+    }
+
+    if (key.startsWith('repo::')) {
+        const payload = key.slice(6);
+        const [owner, repo] = payload.split('/');
+        const name = repo || 'projekt';
+        return {
+            key,
+            kind: 'gitea-repo',
+            owner,
+            repo,
+            repoName: name,
+            label: name
+        };
+    }
+
+    return null;
+}
+
+async function ensureBackupSourcesLoaded() {
+    try {
+        const res = await window.electronAPI.listGiteaRepos();
+        if (!res || !res.ok || !Array.isArray(res.repos)) {
+            backupGitRepos = [];
+            return;
+        }
+
+        backupGitRepos = res.repos.map(r => ({
+            owner: (r.owner && (r.owner.login || r.owner.username)) || '',
+            repo: r.name || ''
+        })).filter(r => r.owner && r.repo);
+    } catch (_) {}
+}
+
+function populateBackupSourceOptions() {
+    const select = $('backupSourceSelect');
+    if (!select) return;
+
+    const prevValue = select.value || '';
+    const prefValue = select.dataset.prefValue || '';
+    const keepValue = prevValue || prefValue;
+
+    const opts = [];
+    opts.push({ value: '', text: '-- Wähle aus vorhandenen Projekten --' });
+
+    if (backupGitRepos.length > 0) {
+        opts.push({ value: '__ALL_GIT__', text: '🧩 Alles komplett sichern (alle Git-Projekte)' });
+    }
+
+    const repos = [...backupGitRepos].sort((a, b) => `${a.owner}/${a.repo}`.localeCompare(`${b.owner}/${b.repo}`, 'de'));
+    repos.forEach(node => {
+        opts.push({
+            value: `repo::${node.owner}/${node.repo}`,
+            text: `📦 ${node.owner}/${node.repo}`
+        });
+    });
+
+    if (keepValue && keepValue.startsWith('repo::') && !opts.some(o => o.value === keepValue)) {
+        try {
+            const decoded = keepValue.slice(6);
+            opts.push({ value: keepValue, text: `📌 ${decoded} (zuletzt)` });
+        } catch (_) {}
+    }
+
+    select.innerHTML = opts
+        .map(o => `<option value="${o.value}">${o.text}</option>`)
+        .join('');
+
+    if (keepValue && opts.some(o => o.value === keepValue)) {
+        select.value = keepValue;
+    } else if (opts.length > 1) {
+        select.value = opts[1].value;
+    } else {
+        select.value = '';
+    }
+}
+
+async function loadBackupUiPrefs() {
+    try {
+        const creds = await window.electronAPI.loadCredentials();
+        if (!creds) return;
+
+        const localFolder = String(creds.backupPrefLocalFolder || '').trim();
+        const sourceSelection = String(creds.backupPrefSourceSelection || '').trim();
+
+        const localFolderEl = $('localBackupFolder');
+        if (localFolderEl && localFolder && !localFolderEl.value) {
+            localFolderEl.value = localFolder;
+        }
+
+        const sourceSelectEl = $('backupSourceSelect');
+        if (sourceSelectEl && sourceSelection) {
+            sourceSelectEl.dataset.prefValue = sourceSelection;
+        }
+    } catch (_) {}
+}
+
+async function saveBackupUiPrefs(patch) {
+    try {
+        const creds = await window.electronAPI.loadCredentials();
+        const current = creds || {};
+        await window.electronAPI.saveCredentials({ ...current, ...patch });
+    } catch (_) {}
+}
+
+async function loadBackupList() {
+    const repoName = getActiveBackupRepoName();
+    if (!repoName) {
+        const container = $('backupListContainer');
+        if (container) {
+            container.innerHTML = '<div style="padding: 16px; color: var(--text-muted);">Kein Repository erkannt</div>';
+        }
+        return;
+    }
+
+    const provider = 'local';
+    const credentials = getBackupCredentialsFromUI(provider);
+
+    // Optionaler Komfort: Wenn neue Credentials eingetragen sind, automatisch speichern.
+    if (credentials) {
+        try {
+            await window.electronAPI.setupBackupProvider({ repoName, provider, credentials });
+        } catch (_) {
+            // Wenn kein vollständiges Formular vorhanden ist, versuchen wir mit gespeicherter Konfiguration weiter.
+        }
+    }
+
+    setStatus('Lade Backup-Liste...');
+    showProgress(0, 'Lade Backups...');
+
+    try {
+        const res = await window.electronAPI.listCloudBackups({ repoName, provider });
+
+        hideProgress();
+
+        const container = $('backupListContainer');
+        if (!container) return;
+
+        if (!res?.ok) {
+            container.innerHTML = `<div style="padding: 16px; color: var(--danger);">Fehler beim Laden: ${res?.error || 'Unbekannt'}</div>`;
+            return;
+        }
+
+        const backups = res.backups || [];
+
+        if (backups.length === 0) {
+            container.innerHTML = '<div style="padding: 16px; color: var(--text-muted);">Noch keine Backups vorhanden</div>';
+            return;
+        }
+
+        container.innerHTML = '';
+
+        const baseNameCounts = new Map();
+        backups.forEach((b) => {
+            const name = getBackupDisplayName(b.filename || b.name || '');
+            if (!name) return;
+            baseNameCounts.set(name, (baseNameCounts.get(name) || 0) + 1);
+        });
+
+        backups.forEach((backup, index) => {
+            const backupFilename = backup.filename || backup.name || '';
+            const baseDisplayName = getBackupDisplayName(backupFilename) || `Backup ${index + 1}`;
+            const duplicateCount = baseNameCounts.get(baseDisplayName) || 0;
+            const displaySuffix = duplicateCount > 1 ? ` • ${formatTimeOnly(backup.modifiedTime || backup.date)}` : '';
+            const backupDisplayName = `${baseDisplayName}${displaySuffix}`;
+            const item = document.createElement('div');
+            item.className = 'backup-list-item';
+
+            const info = document.createElement('div');
+            info.className = 'backup-list-info';
+
+            const filename = document.createElement('div');
+            filename.textContent = backupDisplayName;
+            filename.title = backupFilename || backupDisplayName;
+            filename.className = 'backup-list-name';
+
+            const meta = document.createElement('div');
+            meta.className = 'backup-list-meta';
+            meta.textContent = `Größe: ${formatBytes(backup.size)} • ${new Date(backup.modifiedTime || new Date()).toLocaleString('de-DE')}`;
+
+            info.appendChild(filename);
+            info.appendChild(meta);
+
+            const buttons = document.createElement('div');
+            buttons.className = 'backup-list-actions';
+
+            // Download-Button
+            const btnRestore = document.createElement('button');
+            btnRestore.className = 'backup-list-action backup-list-action--restore';
+            btnRestore.textContent = '⬇️ Wiederherstellen';
+            btnRestore.onclick = async () => {
+                if (!backupFilename) {
+                    showError('Backup-Dateiname fehlt.');
+                    return;
+                }
+                const proceedRestore = await showActionConfirmModal({
+                    title: 'Backup wiederherstellen',
+                    message: `Backup "${backupFilename}" wirklich wiederherstellen? Vorhandene Dateien werden überschrieben.`,
+                    confirmText: 'Wiederherstellen'
+                });
+                if (!proceedRestore) return;
+                await restoreBackup(backupFilename, repoName);
+            };
+
+            // Delete-Button
+            const btnDelete = document.createElement('button');
+            btnDelete.className = 'backup-list-action backup-list-action--delete';
+            btnDelete.textContent = '🗑️ Löschen';
+            btnDelete.onclick = async () => {
+                if (!backupFilename) {
+                    showError('Backup-Dateiname fehlt.');
+                    return;
+                }
+                const proceedDelete = await showActionConfirmModal({
+                    title: 'Backup löschen',
+                    message: `Backup "${backupFilename}" wirklich löschen?`,
+                    confirmText: 'Löschen',
+                    danger: true
+                });
+                if (!proceedDelete) return;
+                await deleteBackup(backupFilename, repoName);
+            };
+
+            buttons.appendChild(btnRestore);
+            buttons.appendChild(btnDelete);
+            item.appendChild(info);
+            item.appendChild(buttons);
+            container.appendChild(item);
+        });
+
+        setStatus(`${backups.length} Backups gefunden`);
+    } catch (error) {
+        hideProgress();
+        setStatus('Fehler beim Laden der Backups');
+        const container = $('backupListContainer');
+        if (container) container.innerHTML = `<div style="padding: 16px; color: var(--danger);">Fehler: ${error?.message || 'Unbekannt'}</div>`;
+    }
+}
+
+async function restoreBackup(filename, repoName) {
+    if (!selectedFolder) {
+        showWarning('Bitte zuerst einen lokalen Ordner auswählen');
+        return;
+    }
+
+    setStatus('Stelle Backup wieder her...');
+    showProgress(0, `Lade ${filename}...`);
+
+    try {
+        const res = await window.electronAPI.restoreCloudBackup({
+            repoName,
+            filename,
+            targetPath: selectedFolder
+        });
+
+        hideProgress();
+
+        if (res?.ok) {
+            showSuccess(`✓ Backup "${filename}" wiederhergestellt`);
+            if (selectedFolder) refreshLocalTree(selectedFolder);
+        } else {
+            showError('Wiederherstellung fehlgeschlagen: ' + (res?.error || 'Unbekannt'));
+        }
+    } catch (error) {
+        hideProgress();
+        showError('Fehler: ' + (error?.message || String(error)));
+    }
+}
+
+async function deleteBackup(filename, repoName) {
+    setStatus('Lösche Backup...');
+
+    try {
+        const res = await window.electronAPI.deleteCloudBackup({
+            repoName,
+            filename
+        });
+
+        if (res?.ok) {
+            showSuccess(`✓ Backup gelöscht`);
+            loadBackupList();
+        } else {
+            showError('Löschen fehlgeschlagen: ' + (res?.error || 'Unbekannt'));
+        }
+    } catch (error) {
+        showError('Fehler: ' + (error?.message || String(error)));
+    }
+}
+
+function formatBytes(bytes) {
+    if (!bytes || bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+}
+
+function getBackupDisplayName(filename) {
+    const raw = String(filename || '').trim();
+    if (!raw) return '';
+
+    const normalized = raw.replace(/\.zip$/i, '');
+    const match = normalized.match(/^(.*?)-backup-\d{8}-\d{6}(?:-[^-]+)?$/i);
+    if (match && match[1]) {
+        return match[1];
+    }
+
+    return normalized;
+}
+
+function formatTimeOnly(input) {
+    if (!input) return '--:--:--';
+    const date = new Date(input);
+    if (Number.isNaN(date.getTime())) return '--:--:--';
+    return date.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+
 /* ================================
    RELEASE MANAGEMENT UI FUNCTIONS
    Füge dies zu renderer.js hinzu