refactor(webui): remove Migrate from the backup center (moved to Overview)

Migrate now lives at Overview › Migrate › Restore (standalone MigratePage). Strip
it out of BackupPage: drop the migrate sidebar item/panel/modal from the
fragment, the 'migrate' tab from the allowed set / titleFor / subtitleFor /
iconFor, the renderMigrate() call, and the migrate-host/app/confirm click
handlers; delete the now-orphaned backup-migrate.js. The backup center is now
Dashboard/Backups/Locations/Configuration.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

containers/libreportal/frontend/components/backup/core/html/backup-content.html

@@ -27,14 +27,6 @@
         </svg>
         Locations
       </div>
-      <div class="category" data-backup-tab="migrate">
-        <svg class="category-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M3 12h18"></path>
-          <polyline points="12 5 19 12 12 19"></polyline>
-          <path d="M3 5v14"></path>
-        </svg>
-        Migrate
-      </div>
       <div class="category" data-backup-tab="configuration">
         <svg class="category-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
           <circle cx="12" cy="12" r="3"></circle>
@@ -121,40 +113,6 @@
             <div class="backup-location-list" id="backup-location-list"></div>
           </section>
 
-          <section class="backup-tabpanel" id="backup-panel-migrate">
-            <div class="backup-card backup-migrate-card">
-              <div class="backup-card-header">
-                <h2>Cross-host migrate <span class="tooltip" title="Pulls a backup taken on another host out of a shared backup location and lays it down here. The destination's existing copy of the app is backed up first (rollback safety), then replaced." style="font-size:.75em;opacity:.7;cursor:help">ℹ️</span></h2>
-                <span class="backup-card-hint">Restore an app from another LibrePortal</span>
-              </div>
-              <div class="backup-migrate-empty" id="backup-migrate-empty" hidden>
-                <!-- Bordered callout panel — matches the per-app task-card
-                     visual so the empty state reads as a contained block
-                     rather than floating centred text. -->
-                <div class="backup-empty-state" style="border: 1px solid var(--border-color, #2a2a2a); background: var(--surface-2, rgba(255,255,255,0.02)); border-radius: 10px; padding: 28px 24px; margin: 12px 0;">
-                  <div style="margin-bottom: 6px; opacity: .7; display: flex; justify-content: center;">
-                    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
-                      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
-                      <circle cx="12" cy="10" r="3"></circle>
-                    </svg>
-                  </div>
-                  <div style="margin-bottom: 14px;">
-                    No backups from other hosts visible in any enabled location.<br>
-                    Add a <strong>shared backup location</strong> on both hosts to enable cross-host migrate.
-                  </div>
-                  <button type="button" class="backup-primary-btn" data-action="go-to-locations">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                      <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
-                      <circle cx="12" cy="10" r="3"></circle>
-                    </svg>
-                    Open Locations
-                  </button>
-                </div>
-              </div>
-              <div class="backup-migrate-body" id="backup-migrate-body"></div>
-            </div>
-          </section>
-
           <section class="backup-tabpanel" id="backup-panel-configuration">
             <div id="backup-configuration-body"></div>
           </section>
@@ -220,20 +178,6 @@
   </div>
 </div>
 
-<div class="backup-modal" id="backup-migrate-modal">
-  <div class="backup-modal-inner">
-    <div class="backup-modal-header">
-      <h3>Migrate from another LibrePortal</h3>
-      <button class="backup-modal-close" data-close-modal>×</button>
-    </div>
-    <div class="backup-modal-body" id="backup-migrate-modal-body"></div>
-    <div class="backup-modal-footer">
-      <button class="backup-secondary-btn" data-close-modal>Cancel</button>
-      <button class="backup-primary-btn" id="backup-migrate-confirm">Start migrate</button>
-    </div>
-  </div>
-</div>
-
 <div class="backup-modal" id="backup-engine-modal">
   <div class="backup-modal-inner backup-modal-wide">
     <div class="backup-modal-header">

containers/libreportal/frontend/components/backup/core/js/backup-page.js

@@ -39,7 +39,7 @@ class BackupPage {
        either source resolve correctly. */
     parseTabFromUrl() {
         if (this.embedded) return null;   // embedded: always open on Dashboard; sub-tabs are in-page only
-        const allowed = new Set(['dashboard', 'backups', 'locations', 'migrate', 'configuration']);
+        const allowed = new Set(['dashboard', 'backups', 'locations', 'configuration']);
         // Path-based: /backup/<tab> (bare /backup → default tab).
         const seg = window.location.pathname.replace(/^\/backup\/?/, '').split('/')[0];
         if (seg && allowed.has(seg)) return seg;
@@ -255,26 +255,6 @@ class BackupPage {
                 return;
             }
 
-            const migrateAppBtn = e.target.closest('[data-action="migrate-app"]');
-            if (migrateAppBtn) {
-                this.openMigrateModal({
-                    mode: 'app',
-                    locIdx: parseInt(migrateAppBtn.dataset.loc, 10),
-                    host:   migrateAppBtn.dataset.host,
-                    app:    migrateAppBtn.dataset.app
-                });
-                return;
-            }
-            const migrateHostBtn = e.target.closest('[data-action="migrate-host"]');
-            if (migrateHostBtn) {
-                this.openMigrateModal({
-                    mode:   'host',
-                    locIdx: parseInt(migrateHostBtn.dataset.loc, 10),
-                    host:   migrateHostBtn.dataset.host
-                });
-                return;
-            }
-            if (e.target.closest('#backup-migrate-confirm')) { this.confirmMigrate(); return; }
             if (e.target.closest('#backup-restore-confirm')) { this.confirmRestore(); return; }
             if (e.target.closest('#backup-delete-confirm'))  { this.confirmDelete();  return; }
             if (e.target.closest('#backup-delete-location-confirm')) { this.confirmDeleteLocation(); return; }
@@ -391,7 +371,6 @@ class BackupPage {
             dashboard:     'Dashboard',
             backups:       'Backups',
             locations:     'Locations',
-            migrate:       'Migrate',
             configuration: 'Configuration'
         }[tab] || 'Backups';
     }
@@ -401,7 +380,6 @@ class BackupPage {
             dashboard:     "Check what's protected — and when it last ran.",
             backups:       'Every backup across every enabled location.',
             locations:     'Where backups are stored. Add, edit, or remove destinations.',
-            migrate:       'Restore an app from another LibrePortal that shares one of your backup locations.',
             configuration: 'Schedule, retention, and engine settings.'
         }[tab] || '';
     }
@@ -423,11 +401,6 @@ class BackupPage {
                 '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">' +
                 '<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>' +
                 '<circle cx="12" cy="10" r="3"></circle></svg>',
-            migrate:
-                '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">' +
-                '<path d="M3 12h18"></path>' +
-                '<polyline points="12 5 19 12 12 19"></polyline>' +
-                '<path d="M3 5v14"></path></svg>',
             configuration:
                 '<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">' +
                 '<circle cx="12" cy="12" r="3"></circle>' +
@@ -510,7 +483,6 @@ class BackupPage {
         this.renderDashboard();
         this.renderLocations();
         this.renderSnapshots();
-        this.renderMigrate();
         this.renderConfiguration();
     }
 

containers/libreportal/frontend/components/backup/index.js

@@ -27,7 +27,6 @@ LP.features.register({
     '/components/backup/locations/js/backup-location-fields.js',
     '/components/backup/locations/js/backup-location-modal.js',
     '/components/backup/locations/js/backup-ssh-key.js',
-    '/components/backup/migrate/js/backup-migrate.js',
     '/components/backup/configuration/js/backup-configuration.js',
     '/components/backup/configuration/js/backup-retention-presets.js',
     '/components/backup/configuration/js/backup-engine-details.js',

containers/libreportal/frontend/components/backup/migrate/js/backup-migrate.js

@@ -1,182 +0,0 @@
-// Auto-extracted from backup-page.js (verbatim) — augments BackupPage.prototype. Loaded after the base.
-Object.assign(BackupPage.prototype, {
-    renderMigrate() {
-        const body  = document.getElementById('backup-migrate-body');
-        const empty = document.getElementById('backup-migrate-empty');
-        if (!body || !empty) return;
-
-        const data = this.migrate || {};
-        const locations = (data.locations || []).filter(l => (l.hosts || []).length > 0);
-
-        if (!locations.length) {
-            body.innerHTML = '';
-            empty.hidden = false;
-            return;
-        }
-        empty.hidden = true;
-
-        // Group: one card per source-host, with that host's apps listed underneath.
-        // We collapse across locations — if the same host appears in two locations,
-        // we still show it once with the union of apps (the per-app row carries
-        // which location it came from). Most setups have one shared location anyway.
-        const installed = new Set(data.destination?.installed_apps || []);
-        const html = locations.map(loc => `
-            <div class="backup-migrate-location">
-                <div class="backup-card-header" style="margin-bottom:8px">
-                    <h3 style="margin:0">${this.escape(loc.name || 'Location')}</h3>
-                    <span class="backup-card-hint">${(loc.hosts || []).length} other host${loc.hosts.length === 1 ? '' : 's'} backing up here</span>
-                </div>
-                ${loc.hosts.map(host => {
-                    const peerName = (this.hostnameToPeerName || {})[host.hostname];
-                    const headerLabel = peerName
-                        ? `<strong style="font-size:1.05em">${this.escape(peerName)}</strong><span class="backup-card-hint" style="margin-left:6px; font-size:.85em">host: <code>${this.escape(host.hostname)}</code></span>`
-                        : `<strong style="font-size:1.05em">${this.escape(host.hostname)}</strong>`;
-                    return `
-                    <div class="backup-migrate-host" style="border:1px solid var(--border-color, #2a2a2a); border-radius:8px; padding:14px; margin-bottom:12px">
-                        <div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px">
-                            <div>
-                                ${headerLabel}
-                                <span class="backup-card-hint" style="margin-left:10px">${(host.apps || []).length} app${host.apps.length === 1 ? '' : 's'} available</span>
-                            </div>
-                            <button class="backup-primary-btn" data-action="migrate-host"
-                                data-loc="${loc.idx}" data-host="${this.escape(host.hostname)}">
-                                Migrate every app from this host
-                            </button>
-                        </div>
-                        <div class="backup-migrate-apps" style="display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:8px">
-                            ${(host.apps || []).map(app => {
-                                const collide = installed.has(app.slug);
-                                return `
-                                <div class="backup-migrate-app" style="display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:var(--surface-2, #1a1a1a); border-radius:6px">
-                                    <div style="display:flex; flex-direction:column; min-width:0">
-                                        <span style="display:flex; align-items:center; gap:8px">
-                                            <strong>${this.escape(app.slug)}</strong>
-                                            ${collide ? `<span class="backup-status-dot warn" title="Already installed here"></span>` : ''}
-                                        </span>
-                                        <span class="backup-card-hint" style="font-size:.82em">
-                                            ${app.snapshots} snapshot${app.snapshots === 1 ? '' : 's'} · latest ${this.escape(this.formatRelativeTime(app.latest_date))}
-                                        </span>
-                                    </div>
-                                    <button class="backup-secondary-btn" data-action="migrate-app"
-                                        data-loc="${loc.idx}" data-host="${this.escape(host.hostname)}" data-app="${this.escape(app.slug)}">
-                                        Migrate
-                                    </button>
-                                </div>
-                                `;
-                            }).join('')}
-                        </div>
-                    </div>
-                `;
-                }).join('')}
-            </div>
-        `).join('');
-
-        body.innerHTML = html;
-    },
-    formatRelativeTime(iso) {
-        if (!iso) return 'never';
-        const t = Date.parse(iso);
-        if (!t) return iso;
-        const diff = Date.now() - t;
-        const minute = 60_000, hour = 60 * minute, day = 24 * hour;
-        if (diff < hour)    return `${Math.max(1, Math.round(diff / minute))} min ago`;
-        if (diff < day)     return `${Math.round(diff / hour)} h ago`;
-        if (diff < 7 * day) return `${Math.round(diff / day)} d ago`;
-        return new Date(t).toISOString().slice(0, 10);
-    },
-    openMigrateModal({ mode, locIdx, host, app }) {
-        const modal = document.getElementById('backup-migrate-modal');
-        const body  = document.getElementById('backup-migrate-modal-body');
-        if (!modal || !body) return;
-
-        const dest = this.migrate?.destination || {};
-        const installed = new Set(dest.installed_apps || []);
-        const running   = new Set(dest.running_apps   || []);
-        const locName = this.locName(locIdx);
-
-        // App-mode: one specific app. Host-mode: every app from the host.
-        let targetApps = [];
-        if (mode === 'app') {
-            targetApps = [app];
-        } else {
-            const loc = (this.migrate?.locations || []).find(l => l.idx === locIdx);
-            const h = (loc?.hosts || []).find(x => x.hostname === host);
-            targetApps = (h?.apps || []).map(a => a.slug);
-        }
-        const collisions = targetApps.filter(a => installed.has(a));
-        const collisionsRunning = collisions.filter(a => running.has(a));
-
-        const intro = mode === 'app'
-            ? `<p>Migrate <strong>${this.escape(app)}</strong> from <strong>${this.escape(host)}</strong> via <strong>${this.escape(locName)}</strong> onto this host.</p>`
-            : `<p>Migrate <strong>every app</strong> (${targetApps.length}) from <strong>${this.escape(host)}</strong> via <strong>${this.escape(locName)}</strong> onto this host.</p>`;
-
-        let collisionNote = '';
-        if (collisions.length) {
-            collisionNote = `
-                <p class="backup-card-hint" style="color:var(--warning, #d97706); margin-top:8px">
-                    ⚠ Already installed here: ${collisions.map(c => `<code>${this.escape(c)}</code>`).join(', ')}.
-                    These will be <strong>replaced</strong>.
-                    ${collisionsRunning.length ? `Currently running: ${collisionsRunning.map(c => `<code>${this.escape(c)}</code>`).join(', ')} — will be stopped first.` : ''}
-                </p>
-            `;
-        }
-
-        body.innerHTML = `
-            ${intro}
-            ${collisionNote}
-            <div style="margin-top:14px; display:flex; flex-direction:column; gap:8px">
-                <label style="display:flex; align-items:flex-start; gap:8px; cursor:pointer">
-                    <input type="checkbox" id="migrate-opt-pre-backup" ${collisions.length ? 'checked' : 'disabled'}>
-                    <span>
-                        Back up the destination's existing copy first
-                        <span class="backup-card-hint" style="display:block; font-size:.85em">
-                            Safety net: snapshot the current ${mode === 'app' ? this.escape(app) : 'app'} into your first
-                            enabled backup location (tagged <code>pre-migrate</code>) before wipe.
-                            ${collisions.length ? '' : 'No collision — nothing to back up.'}
-                        </span>
-                    </span>
-                </label>
-                <label style="display:flex; align-items:flex-start; gap:8px; cursor:pointer">
-                    <input type="checkbox" id="migrate-opt-rewrite-urls" checked>
-                    <span>
-                        Rewrite host-bound URLs to this host
-                        <span class="backup-card-hint" style="display:block; font-size:.85em">
-                            Replaces <code>CFG_*_URL</code>, <code>*_DOMAIN</code>, <code>*_HOSTNAME</code> with this
-                            host's values. Uncheck only if you want the moved app to keep claiming the source's hostname.
-                        </span>
-                    </span>
-                </label>
-            </div>
-        `;
-        modal.dataset.mode   = mode;
-        modal.dataset.locIdx = String(locIdx);
-        modal.dataset.host   = host;
-        modal.dataset.app    = app || '';
-        modal.classList.add('open');
-    },
-    async confirmMigrate() {
-        const modal = document.getElementById('backup-migrate-modal');
-        if (!modal) return;
-        const { mode, locIdx, host, app } = modal.dataset;
-        const preBackup = document.getElementById('migrate-opt-pre-backup')?.checked;
-        const rewrite   = document.getElementById('migrate-opt-rewrite-urls')?.checked;
-
-        // The bash CLI defaults are: pre-backup ON, URL rewrite ON. Opt-out flags
-        // only get appended when the user un-ticks; matches the kernel's defaults.
-        const opts = [];
-        if (preBackup === false) opts.push('--no-pre-backup');
-        if (rewrite   === false) opts.push('--keep-urls');
-        const optStr = opts.length ? ' ' + opts.join(' ') : '';
-
-        this.closeAllModals();
-        if (mode === 'app') {
-            await this.runTask(
-                `libreportal restore migrate app ${app} ${host} ${locIdx}${optStr}`,
-                'restore', app);
-        } else {
-            await this.runTask(
-                `libreportal restore migrate system ${host} ${locIdx}${optStr}`,
-                'restore', null);
-        }
-    },
-});