Merge import backup and backups page

[ShadowArcanist]

User feedback

• theres 2 pages for backups, backups and import. why? group those

---

Shadow's Analysis

Right now we have dedicated page for import backup:

Having a separate page for a feature that is rarely used also adds another item to the sidebar, which just bloats the sidebar.

---

Shadow's solution

Remove the import backup page on the second sidebar and add a button on backups page for importing backup which opens a model with all stuff needed to import backups

---

Userscript

Click me

// ==UserScript==
// @name         Coolify Backup Import Modal
// @namespace    local.coolify.internals.backup-import-modal
// @version      1.1.0
// @description  merges the separate Import Backup page into the Backups page. Adds an "Import backup" button before "+ Add" that opens a modal, the same way the New Scheduled Backup button works.
// @match        https://coolify.lab.shadowarcanist.com/*
// @run-at       document-start
// @grant        GM_addStyle
// ==/UserScript==

(() => {
  'use strict';
  if (window !== window.top) return;

  // This is a visual proposal only. The modal shows the import layout;
  // it does not upload files or run a restore.

  GM_addStyle(`
    /* Hide the now-merged "Import Backup" sidebar item (database + service). */
    .application-settings-navigation a[href$="/import-backup"],
    .cs-context a[href$="/import-backup"],
    .mobile-sidebar-sheet a[href$="/import-backup"] { display: none !important; }

    .ubi-import-btn { margin-right: .5rem; }

    .ubi-overlay { position: fixed; inset: 0; z-index: 99; display: none; overflow-y: auto; }
    .ubi-overlay.ubi-open { display: block; }
    .ubi-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
    .ubi-wrap { position: relative; display: flex; min-height: 100%; align-items: flex-start; justify-content: center; padding: .5rem; }
    @media (min-width: 640px) { .ubi-wrap { align-items: center; padding: 1rem; } }

    .ubi-panel {
      position: relative; display: flex; width: 100%; max-height: calc(100dvh - 2rem);
      flex-direction: column; overflow: hidden; border-radius: 12px; background: #fff; color: #0a0a0a;
      box-shadow: 0 0 0 1px var(--coollabs-hairline, rgba(0,0,0,.1)), var(--shadow-modal, 0 24px 60px -12px rgba(0,0,0,.35));
    }
    .dark .ubi-panel { background: #0c0c0d; color: #e5e5e5; }
    @media (min-width: 1024px) { .ubi-panel { width: auto; min-width: 42rem; max-width: 64rem; } }

    .ubi-header { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--coollabs-hairline, rgba(0,0,0,.08)); }
    .dark .ubi-header { border-color: rgba(255,255,255,.08); }
    .ubi-header h3 { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; }
    .ubi-close { display: flex; width: 1.75rem; height: 1.75rem; flex: none; align-items: center; justify-content: center; border-radius: 6px; color: #737373; cursor: pointer; transition: background-color .15s, color .15s; }
    .ubi-close:hover { background: rgba(0,0,0,.06); color: #000; }
    .dark .ubi-close:hover { background: rgba(255,255,255,.06); color: #fff; }
    .ubi-close svg { width: 1rem; height: 1rem; }

    .ubi-body { min-height: 0; flex: 1; overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }

    .ubi-callout { display: flex; gap: .625rem; border-radius: 10px; border: 1px solid rgba(220,38,38,.35); background: rgba(220,38,38,.06); padding: .75rem .875rem; }
    .dark .ubi-callout { border-color: rgba(248,113,113,.3); background: rgba(248,113,113,.08); }
    .ubi-callout svg { width: 1rem; height: 1rem; flex: none; color: #dc2626; margin-top: .1rem; }
    .dark .ubi-callout svg { color: #f87171; }
    .ubi-callout-title { font-size: 13px; font-weight: 600; color: #b91c1c; }
    .dark .ubi-callout-title { color: #fca5a5; }
    .ubi-callout-text { margin-top: .125rem; font-size: 12px; color: #7f1d1d; }
    .dark .ubi-callout-text { color: rgba(252,165,165,.85); }

    .ubi-section-title { font-size: 14px; font-weight: 600; }
    .ubi-section-desc { margin-top: .125rem; font-size: 12px; color: #737373; }
    .dark .ubi-section-desc { color: #a3a3a3; }
    .ubi-section-body { margin-top: .875rem; display: flex; flex-direction: column; gap: 1rem; }

    .ubi-label { display: block; margin-bottom: .375rem; font-size: 12px; font-weight: 500; }
    .ubi-helper { margin-top: .375rem; font-size: 11px; color: #737373; }
    .dark .ubi-helper { color: #a3a3a3; }

    .ubi-listbox { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .5rem; border-radius: 8px; border: 1px solid rgba(0,0,0,.14); background: #fff; padding: .5rem .75rem; font-size: 13px; text-align: left; cursor: pointer; }
    .dark .ubi-listbox { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #e5e5e5; }
    .ubi-listbox svg { width: .875rem; height: .875rem; flex: none; opacity: .6; }

    .ubi-grid2 { display: grid; gap: 1rem; }
    @media (min-width: 640px) { .ubi-grid2 { grid-template-columns: 1fr 1fr; } }

    .ubi-source-cards { display: grid; gap: .75rem; }
    @media (min-width: 640px) { .ubi-source-cards { grid-template-columns: 1fr 1fr; } }
    .ubi-source { display: flex; min-height: 5rem; align-items: center; gap: .75rem; border-radius: 10px; border: 1px solid rgba(0,0,0,.12); background: #fff; padding: .75rem; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
    .dark .ubi-source { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.05); }
    .ubi-source:hover { border-color: rgba(0,0,0,.24); }
    .dark .ubi-source:hover { border-color: rgba(255,255,255,.14); }
    .ubi-source[data-active] { border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.08); color: #b45309; }
    .dark .ubi-source[data-active] { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.1); color: #fbbf24; }
    .ubi-source-icon { display: flex; width: 2.25rem; height: 2.25rem; flex: none; align-items: center; justify-content: center; border-radius: 8px; background: rgba(0,0,0,.05); }
    .dark .ubi-source-icon { background: rgba(255,255,255,.06); }
    .ubi-source-icon svg { width: 1rem; height: 1rem; }
    .ubi-source-name { display: block; font-size: 13px; font-weight: 600; }
    .ubi-source-sub { margin-top: .125rem; display: block; font-size: 11px; color: #737373; }
    .dark .ubi-source-sub { color: #a3a3a3; }

    .ubi-panel-box { margin-top: 1rem; border-radius: 10px; border: 1px solid rgba(0,0,0,.1); background: rgba(0,0,0,.02); padding: 1rem; }
    .dark .ubi-panel-box { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.05); }
    .ubi-panel-box[hidden] { display: none; }
    .ubi-row { display: flex; flex-direction: column; gap: .75rem; }
    @media (min-width: 640px) { .ubi-row { flex-direction: row; align-items: flex-end; } }
    .ubi-row .ubi-field { min-width: 0; flex: 1; }

    .ubi-divider { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: #a3a3a3; }
    .ubi-divider span.line { height: 1px; flex: 1; background: rgba(0,0,0,.12); }
    .dark .ubi-divider span.line { background: rgba(255,255,255,.08); }

    .ubi-drop { display: flex; min-height: 5rem; align-items: center; justify-content: center; border-radius: 8px; border: 1px dashed rgba(0,0,0,.28); background: #fff; font-size: 13px; color: #737373; }
    .dark .ubi-drop { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #a3a3a3; }

    .ubi-actions-right { margin-top: 1rem; display: flex; justify-content: flex-end; }
    .ubi-danger { border-color: #dc2626 !important; background: #dc2626 !important; color: #fff !important; }
    .ubi-danger:hover { background: #b91c1c !important; }
  `);

  const RESOURCE_PATH = /^(\/project\/[^/]+\/environment\/[^/]+\/(?:service|database)\/[^/]+)/;
  const chevron = '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m8 9 4-4 4 4m0 6-4 4-4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
  const xIcon = '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>';
  const warnIcon = '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 9v4m0 4h.01M10.3 3.9 2.4 17a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>';
  const fileIcon = '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M14 3v4a1 1 0 0 0 1 1h4M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>';
  const s3Icon = '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><ellipse cx="12" cy="6" rx="8" ry="3" stroke="currentColor" stroke-width="1.7"/><path d="M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3" stroke="currentColor" stroke-width="1.7"/></svg>';

  let scheduled = false;
  let overlay = null;

  // The create-backup button varies by page: "+ Add" (database backups,
  // service scheduled backups) or an "Add backup" dropdown (service volume backups).
  const CREATE_RE = /^\+\s*Add$|add backup|new .*backup/i;

  function findCreateButton() {
    for (const section of document.querySelectorAll('.application-settings-section')) {
      const header = section.querySelector(':scope > header, :scope > .application-settings-section-header');
      if (!header) continue;
      const title = header.querySelector('h1, h2, h3')?.textContent || '';
      if (!/backup/i.test(title)) continue;
      const button = [...header.querySelectorAll('button')]
        .find(node => CREATE_RE.test(node.textContent.replace(/\s+/g, ' ').trim()));
      if (button) return button;
    }
    return null;
  }

  function hideImportNav() {
    document.querySelectorAll('a[href$="/import-backup"]').forEach(link => {
      if (!link.closest('.application-settings-navigation, .cs-context, .mobile-sidebar-sheet, nav')) return;
      (link.closest('li') || link).style.setProperty('display', 'none', 'important');
    });
  }

  function buildImportButton() {
    const button = document.createElement('button');
    button.type = 'button';
    button.className = 'button ubi-import-btn';
    button.textContent = 'Import backup';
    button.addEventListener('click', openModal);
    return button;
  }

  function buildOverlay() {
    const node = document.createElement('div');
    node.className = 'ubi-overlay';
    node.innerHTML = `
      <div class="ubi-scrim"></div>
      <div class="ubi-wrap">
        <div class="ubi-panel" role="dialog" aria-modal="true" aria-label="Import backup">
          <header class="ubi-header">
            <h3>Import backup</h3>
            <button type="button" class="ubi-close" aria-label="Close">${xIcon}</button>
          </header>
          <div class="ubi-body">
            <div class="ubi-callout">
              ${warnIcon}
              <div>
                <div class="ubi-callout-title">Existing data will be replaced</div>
                <div class="ubi-callout-text">Restoring a backup is destructive. Review the source and import command before continuing.</div>
              </div>
            </div>

            <section>
              <div class="ubi-section-title">Restore configuration</div>
              <div class="ubi-section-desc">Configure how the selected backup is applied to this database.</div>
              <div class="ubi-section-body">
                <div class="ubi-field">
                  <label class="ubi-label">Import command</label>
                  <input class="input" type="text" placeholder="pg_restore ..." />
                  <p class="ubi-helper">Add --clean to replace conflicting objects or --verbose for detailed logs.</p>
                </div>
                <div class="ubi-field" style="max-width:24rem">
                  <label class="ubi-label">Backup contents</label>
                  <button type="button" class="ubi-listbox"><span>Backup contains one database</span>${chevron}</button>
                </div>
              </div>
            </section>

            <section>
              <div class="ubi-section-title">Backup source</div>
              <div class="ubi-section-desc">Choose a local file or an object stored in S3.</div>
              <div class="ubi-section-body">
                <div class="ubi-source-cards">
                  <button type="button" class="ubi-source" data-source="file" data-active>
                    <span class="ubi-source-icon">${fileIcon}</span>
                    <span><span class="ubi-source-name">File</span><span class="ubi-source-sub">Upload a backup or use a server path.</span></span>
                  </button>
                  <button type="button" class="ubi-source" data-source="s3">
                    <span class="ubi-source-icon">${s3Icon}</span>
                    <span><span class="ubi-source-name">S3 storage</span><span class="ubi-source-sub">Download a backup from an S3 bucket.</span></span>
                  </button>
                </div>

                <div class="ubi-panel-box" data-panel="file">
                  <div class="ubi-row">
                    <div class="ubi-field">
                      <label class="ubi-label">File path on the server</label>
                      <input class="input" type="text" placeholder="/home/user/backup.sql.gz" />
                    </div>
                    <button type="button" class="button">Check file</button>
                  </div>
                  <div class="ubi-divider"><span class="line"></span>or upload<span class="line"></span></div>
                  <div class="ubi-drop">Select or drop a backup file here.</div>
                  <div class="ubi-actions-right"><button type="button" class="button ubi-danger">Restore from file</button></div>
                </div>

                <div class="ubi-panel-box" data-panel="s3" hidden>
                  <div class="ubi-grid2">
                    <div class="ubi-field">
                      <label class="ubi-label">S3 storage</label>
                      <button type="button" class="ubi-listbox"><span>Select storage</span>${chevron}</button>
                    </div>
                    <div class="ubi-field">
                      <label class="ubi-label">File path</label>
                      <input class="input" type="text" placeholder="/backups/database-backup.gz" />
                      <p class="ubi-helper">Path to the backup file in your S3 bucket.</p>
                    </div>
                  </div>
                  <div class="ubi-actions-right"><button type="button" class="button ubi-danger">Restore from S3</button></div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>`;

    node.addEventListener('click', event => {
      // Close on the X button, the scrim, or the backdrop area outside the panel.
      if (event.target.closest('.ubi-close')) return closeModal();
      if (event.target.matches('.ubi-scrim, .ubi-wrap')) closeModal();
    });
    node.querySelectorAll('.ubi-source').forEach(card => card.addEventListener('click', () => selectSource(node, card.dataset.source)));
    document.body.append(node);
    return node;
  }

  function selectSource(node, source) {
    node.querySelectorAll('.ubi-source').forEach(card =>
      card.toggleAttribute('data-active', card.dataset.source === source));
    node.querySelectorAll('.ubi-panel-box').forEach(box =>
      box.toggleAttribute('hidden', box.dataset.panel !== source));
  }

  function openModal() {
    if (!overlay) overlay = buildOverlay();
    overlay.classList.add('ubi-open');
  }

  function closeModal() {
    overlay?.classList.remove('ubi-open');
  }

  function mount() {
    scheduled = false;
    if (!RESOURCE_PATH.test(location.pathname)) return;
    hideImportNav();
    const createButton = findCreateButton();
    if (!createButton) return;
    const anchor = createButton.closest('[x-data]') || createButton;
    if (anchor.parentElement?.querySelector(':scope > .ubi-import-btn')) return;
    anchor.before(buildImportButton());
  }

  function schedule() {
    if (scheduled) return;
    scheduled = true;
    requestAnimationFrame(mount);
  }

  document.addEventListener('keydown', event => { if (event.key === 'Escape') closeModal(); });
  document.addEventListener('livewire:navigated', schedule);
  document.addEventListener('DOMContentLoaded', schedule);
  new MutationObserver(records => {
    if (records.some(record => [...record.addedNodes].some(node =>
      node.nodeType === 1 && !node.closest?.('.ubi-overlay, .ubi-import-btn')))) schedule();
  }).observe(document.documentElement, { childList: true, subtree: true });
  schedule();
})();