Create backup flow is inconsistent #11834

ShadowArcanist · 2026-09-16T11:06:25Z

ShadowArcanist
Sep 16, 2026
Maintainer

Issue

Here is the current flow of setting up backups:

650674048-c9561bfb-9e67-45e4-8568-8abeb7839630.mov

The database backup schedule automatically opens the configuration modal but storage doesn't!!

Shadow's suggestion

The solution is obvious "just make storage backup follow database backup" but.. why do we even need 2 modals for setting up backups in the first place?

As end user it looks like one modal is to create schedule and one is for configuring the backup but this could be combined into single modal because the second modal (to configure backup) general tab already shows configs for schedules, so if we just shove in the option to select database/storage on the general page the whole process needs just one modal

We could do something like this:

650691144-5143d37f-61ed-457b-9edf-fd5f4699fcce.mov

Userscript

Click me

// ==UserScript==
// @name         Coolify Add Backup Modal
// @namespace    local.coolify.internals.storage-backup-modal
// @version      2.3.1
// @description  Unifies the split backup flow: intercepts the native "Add backup" control and opens one fixed-size create-and-configure modal (Database / Storage) with a General / Schedule / S3 storage / Retention / Danger Zone sidebar, styled with Coolify's own modal colors.
// @match        https://coolify.lab.shadowarcanist.com/*
// @run-at       document-start
// @grant        GM_addStyle
// ==/UserScript==

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

  // Coolify currently splits backups two ways: a database backup opens a tabbed
  // configuration modal, while a storage/volume backup opens a separate one. This
  // unifies both behind one modal with a left sidebar (General, Schedule, S3 storage,
  // Retention, Danger Zone). The General pane picks what to back up (a database or a
  // volume), and the mode adapts the rest.
  //
  // IMPORTANT: Coolify's native "Add backup" control is an Alpine dropdown whose
  // "New … backup" dialog teleports to <body>, and Livewire re-renders it. Mutating
  // that subtree (hiding it, injecting siblings) fights Livewire's morphdom and can
  // leave a teleported modal stuck open with a click-blocking overlay. So we never
  // touch Coolify's DOM: we intercept the trigger's click in the capture phase and
  // open our own body-level menu + modal instead.
  //
  // This is a visual proposal: it lays out every field using Coolify's own classes and
  // CSS variables, so it matches light and dark themes, but it does not persist to
  // Livewire.

  GM_addStyle(`
    /* A body-level floating menu, positioned in JS. Kept out of Coolify's DOM. */
    .ubm-menu {
      position: fixed; z-index: 2147483000; min-width: 15rem;
      display: none; flex-direction: column; padding: .375rem; border-radius: 10px;
      background: #fff; color: #0a0a0a;
      box-shadow: 0 0 0 1px var(--coollabs-hairline, rgba(0,0,0,.1)), 0 12px 32px -8px rgba(0,0,0,.3);
    }
    .dark .ubm-menu { background: var(--glass-popup, #0c0c0d); color: #e5e5e5; box-shadow: 0 0 0 1px var(--glass-line, rgba(255,255,255,.08)), 0 12px 32px -8px rgba(0,0,0,.5); }
    .ubm-menu[data-open] { display: flex; }
    .ubm-menu-item { display: flex; gap: .625rem; align-items: flex-start; padding: .5rem .625rem; border-radius: 8px; text-align: left; cursor: pointer; background: none; border: 0; color: inherit; }
    .ubm-menu-item:hover { background: color-mix(in srgb, var(--color-accent, #b93642) 14%, transparent); }
    .ubm-menu-item svg { width: 1.05rem; height: 1.05rem; flex: none; margin-top: .1rem; opacity: .85; }
    .ubm-menu-name { display: block; font-size: 13px; font-weight: 600; }
    .ubm-menu-sub { display: block; margin-top: .1rem; font-size: 11px; color: #737373; }
    .dark .ubm-menu-sub { color: #a3a3a3; }

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

    .ubm-panel {
      position: relative; display: flex; width: min(94vw, 60rem); height: min(90dvh, 40rem);
      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));
    }
    /* Match Coolify's own modal surface (.modal-box / [x-show="modalOpen"]). */
    .dark .ubm-panel { background: var(--glass-popup, rgba(18,16,18,0.97)); color: #e5e5e5; }

    .ubm-header { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--coollabs-hairline, rgba(0,0,0,.08)); }
    .ubm-header h3 { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; }
    .ubm-header .ubm-kind { display: inline-flex; align-items: center; gap: .35rem; margin-left: .5rem; padding: .1rem .5rem; border-radius: 999px; font-size: 11px; font-weight: 600; background: color-mix(in srgb, var(--color-accent, #b93642) 16%, transparent); color: var(--color-accent, #b93642); }
    .ubm-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; }
    .ubm-close:hover { background: rgba(0,0,0,.06); color: #000; }
    .dark .ubm-close:hover { background: rgba(255,255,255,.06); color: #fff; }
    .ubm-close svg { width: 1rem; height: 1rem; }

    .ubm-body { display: flex; min-height: 0; flex: 1; }

    .ubm-nav { flex: none; width: 13.5rem; padding: .875rem; border-right: 1px solid var(--coollabs-hairline, rgba(0,0,0,.08)); overflow-y: auto; }
    .ubm-nav-label { padding: 0 .5rem .5rem; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #a3a3a3; }
    .ubm-nav-item { display: flex; width: 100%; align-items: center; gap: .625rem; padding: .5rem .625rem; border-radius: 8px; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; background: none; border: 0; color: inherit; transition: background-color .12s; }
    .ubm-nav-item svg { width: 1rem; height: 1rem; flex: none; opacity: .7; }
    .ubm-nav-item:hover { background: rgba(0,0,0,.05); }
    .dark .ubm-nav-item:hover { background: rgba(255,255,255,.05); }
    .ubm-nav-item[aria-current="true"] { background: color-mix(in srgb, var(--color-accent, #b93642) 15%, transparent); color: var(--color-accent, #b93642); }
    .ubm-nav-item[aria-current="true"] svg { opacity: 1; }
    .ubm-nav-item.ubm-danger-item { color: #b91c1c; }
    .dark .ubm-nav-item.ubm-danger-item { color: #fca5a5; }
    .ubm-nav-item.ubm-danger-item[aria-current="true"] { background: rgba(220,38,38,.12); }

    .ubm-content { min-width: 0; flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; }
    @media (max-width: 767px) {
      .ubm-body { flex-direction: column; }
      .ubm-nav { width: auto; display: flex; gap: .25rem; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--coollabs-hairline, rgba(0,0,0,.08)); }
      .ubm-nav-label { display: none; }
      .ubm-nav-item span:not(.ubm-nav-icon) { white-space: nowrap; }
    }

    .ubm-page { display: none; flex-direction: column; gap: 1.25rem; }
    .ubm-page[data-active] { display: flex; }
    .ubm-page-title { font-size: 15px; font-weight: 600; }
    .ubm-page-desc { margin-top: .125rem; font-size: 12px; color: var(--color-fg-muted, #737373); }
    .dark .ubm-page-desc { color: var(--color-fg-muted, #a3a3a3); }

    .ubm-field { min-width: 0; }
    .ubm-label { display: block; margin-bottom: .375rem; font-size: 12px; font-weight: 500; }
    .ubm-opt { color: var(--color-fg-muted, #a3a3a3); font-weight: 400; }
    .ubm-helper { margin-top: .375rem; font-size: 11px; line-height: 1.4; color: var(--color-fg-muted, #737373); }
    .dark .ubm-helper { color: var(--color-fg-muted, #a3a3a3); }

    /* Listboxes reuse Coolify's own .input colors; this adds only layout. */
    .ubm-listbox { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .5rem; text-align: left; cursor: pointer; }
    .ubm-listbox svg { width: .875rem; height: .875rem; flex: none; opacity: .6; }

    .ubm-grid2 { display: grid; gap: 1rem; }
    @media (min-width: 640px) { .ubm-grid2 { grid-template-columns: 1fr 1fr; } }
    .ubm-grid3 { display: grid; gap: 1rem; }
    @media (min-width: 640px) { .ubm-grid3 { grid-template-columns: repeat(3, 1fr); } }

    .ubm-toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-radius: 10px; border: 1px solid var(--coollabs-hairline, rgba(0,0,0,.1)); background: var(--glass-control, rgba(0,0,0,.03)); padding: .75rem .875rem; }
    .ubm-toggle-copy .t { font-size: 13px; font-weight: 600; }
    .ubm-toggle-copy .d { margin-top: .125rem; font-size: 11px; color: var(--color-fg-muted, #737373); }
    .dark .ubm-toggle-copy .d { color: var(--color-fg-muted, #a3a3a3); }
    .ubm-switch { position: relative; flex: none; width: 2.35rem; height: 1.35rem; border-radius: 999px; border: 0; cursor: pointer; background: rgba(120,120,120,.4); transition: background-color .15s; }
    .ubm-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1.05rem; height: 1.05rem; border-radius: 999px; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
    .ubm-switch[data-on] { background: var(--color-accent, #b93642); }
    .ubm-switch[data-on]::after { transform: translateX(1rem); }

    .ubm-collapse[data-hidden] { display: none; }

    .ubm-retention-group { border-radius: 10px; border: 1px solid var(--coollabs-hairline, rgba(0,0,0,.1)); background: var(--glass-control, rgba(0,0,0,.02)); padding: 1rem; }
    .ubm-retention-group > .h { display: flex; align-items: center; gap: .5rem; margin-bottom: .875rem; font-size: 13px; font-weight: 600; }
    .ubm-retention-group > .h svg { width: .9rem; height: .9rem; opacity: .7; }

    .ubm-callout { display: flex; gap: .625rem; border-radius: 10px; border: 1px solid var(--color-error, rgba(220,38,38,.35)); background: color-mix(in srgb, var(--color-error, #dc2626) 8%, transparent); padding: .75rem .875rem; }
    .ubm-callout svg { width: 1rem; height: 1rem; flex: none; color: var(--color-error, #dc2626); margin-top: .1rem; }
    .ubm-callout-title { font-size: 13px; font-weight: 600; color: var(--color-error, #b91c1c); }
    .ubm-callout-text { margin-top: .125rem; font-size: 12px; color: var(--color-fg-muted, #737373); }

    .ubm-only { display: none; }
    .ubm-panel[data-mode="database"] .ubm-only-database,
    .ubm-panel[data-mode="storage"] .ubm-only-storage { display: block; }

    .ubm-footer { display: flex; align-items: center; justify-content: flex-end; gap: .625rem; padding: .875rem 1.25rem; border-top: 1px solid var(--coollabs-hairline, rgba(0,0,0,.08)); }
    .ubm-footer .ubm-hint { margin-right: auto; font-size: 11px; color: var(--color-fg-muted, #a3a3a3); }
    .ubm-danger-btn { border-color: var(--color-error, #dc2626) !important; background: var(--color-error, #dc2626) !important; color: #fff !important; }
    .ubm-danger-btn:hover { filter: brightness(0.92); }
  `);

  const RESOURCE_PATH = /^\/project\/[^/]+\/environment\/[^/]+\/(?:service|database|application)\//;

  const icons = {
    chevron: '<svg viewBox="0 0 24 24" fill="none"><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>',
    x: '<svg viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
    warn: '<svg viewBox="0 0 24 24" fill="none"><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>',
    database: '<svg viewBox="0 0 24 24" fill="none"><ellipse cx="12" cy="5" rx="8" ry="3" stroke="currentColor" stroke-width="1.7"/><path d="M4 5v14c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3" stroke="currentColor" stroke-width="1.7"/></svg>',
    storage: '<svg viewBox="0 0 24 24" fill="none"><path d="M3 7a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/></svg>',
    gear: '<svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="1.7"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.6 1.6 0 0 0-1-1.5 1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.6 1.6 0 0 0 1.5-1 1.6 1.6 0 0 0-.3-1.8l-.1-.1A2 2 0 1 1 7 4.5l.1.1a1.6 1.6 0 0 0 1.8.3H9a1.6 1.6 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
    calendar: '<svg viewBox="0 0 24 24" fill="none"><rect x="3" y="5" width="18" height="16" rx="2" stroke="currentColor" stroke-width="1.7"/><path d="M3 9h18M8 3v4M16 3v4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>',
    s3: '<svg viewBox="0 0 24 24" fill="none"><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>',
    retention: '<svg viewBox="0 0 24 24" fill="none"><path d="M3 6h18M8 6V4h8v2M6 6l1 14a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-14" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg>',
    hdd: '<svg viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="16" rx="2" stroke="currentColor" stroke-width="1.7"/><path d="M7 15h.01M11 15h6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>',
  };

  let overlay = null;

  // The native create control varies by page: "+ Add", "Add backup", or "New ... backup".
  const CREATE_RE = /^\+\s*add$|add backup|new .*backup/i;

  function toggleRow(title, desc, on) {
    return `
      <div class="ubm-toggle-row">
        <div class="ubm-toggle-copy"><div class="t">${title}</div><div class="d">${desc}</div></div>
        <button type="button" class="ubm-switch" role="switch" aria-checked="${on ? 'true' : 'false'}" aria-label="${title}"${on ? ' data-on' : ''}></button>
      </div>`;
  }

  function retentionGroup(scope) {
    return `
      <div class="ubm-retention-group">
        <div class="h">${scope.icon}${scope.name}</div>
        <div class="ubm-grid3">
          <div class="ubm-field">
            <label class="ubm-label">Number of backups</label>
            <input class="input" type="number" min="0" placeholder="${scope.amount}" />
            <p class="ubm-helper">0 = keep unlimited.</p>
          </div>
          <div class="ubm-field">
            <label class="ubm-label">Retention (days)</label>
            <input class="input" type="number" min="0" placeholder="${scope.days}" />
          </div>
          <div class="ubm-field">
            <label class="ubm-label">Max storage (GB)</label>
            <input class="input" type="number" min="0" placeholder="${scope.storage}" />
          </div>
        </div>
      </div>`;
  }

  const NAV_ITEMS = [
    { id: 'general', label: 'General', icon: icons.gear },
    { id: 'schedule', label: 'Schedule', icon: icons.calendar },
    { id: 's3', label: 'S3 storage', icon: icons.s3 },
    { id: 'retention', label: 'Retention', icon: icons.retention },
    { id: 'danger', label: 'Danger Zone', icon: icons.warn, danger: true },
  ];

  function buildOverlay() {
    const node = document.createElement('div');
    node.className = 'ubm-overlay';
    node.innerHTML = `
      <div class="ubm-scrim"></div>
      <div class="ubm-wrap">
        <div class="ubm-panel" role="dialog" aria-modal="true" aria-label="Add backup" data-mode="database">
          <header class="ubm-header">
            <h3>Add backup <span class="ubm-kind">${icons.database}<span class="ubm-kind-text">Database</span></span></h3>
            <button type="button" class="ubm-close" aria-label="Close">${icons.x}</button>
          </header>
          <div class="ubm-body">
            <nav class="ubm-nav" aria-label="Backup settings">
              <div class="ubm-nav-label">Settings</div>
              ${NAV_ITEMS.map((item, i) => `
                <button type="button" class="ubm-nav-item${item.danger ? ' ubm-danger-item' : ''}" data-nav="${item.id}" aria-current="${i === 0 ? 'true' : 'false'}">
                  <span class="ubm-nav-icon">${item.icon}</span><span>${item.label}</span>
                </button>`).join('')}
            </nav>
            <div class="ubm-content">

              <section class="ubm-page" data-page="general" data-active>
                <div><div class="ubm-page-title">General</div><div class="ubm-page-desc">Choose what to back up and give this backup a name.</div></div>
                <div class="ubm-field ubm-only ubm-only-database">
                  <label class="ubm-label">Database to back up</label>
                  <button type="button" class="input ubm-listbox"><span>PostgreSQL — postgres-db</span>${icons.chevron}</button>
                  <p class="ubm-helper">The database resource whose data this schedule dumps.</p>
                </div>
                <div class="ubm-field ubm-only ubm-only-storage">
                  <label class="ubm-label">Volume / storage to back up</label>
                  <button type="button" class="input ubm-listbox"><span>Select a volume</span>${icons.chevron}</button>
                  <p class="ubm-helper">A named Docker volume or persistent directory attached to this resource.</p>
                </div>
                <div class="ubm-field">
                  <label class="ubm-label">Backup name <span class="ubm-opt">(optional)</span></label>
                  <input class="input" type="text" placeholder="Nightly backup" />
                </div>
                <div class="ubm-only ubm-only-database">
                  ${toggleRow('Back up all databases', 'Dump every database on the server (pg_dumpall / mysqldump --all-databases), not just the default one.', true)}
                  <div class="ubm-field ubm-collapse" data-collapse="dumpall" data-hidden style="margin-top:1rem">
                    <label class="ubm-label">Databases to back up</label>
                    <input class="input" type="text" placeholder="app, analytics, sessions" />
                    <p class="ubm-helper">Comma-separated database names. Leave the toggle on to include everything.</p>
                  </div>
                </div>
                <div class="ubm-field ubm-only ubm-only-storage">
                  <label class="ubm-label">Path within the volume <span class="ubm-opt">(optional)</span></label>
                  <input class="input" type="text" placeholder="/data" />
                  <p class="ubm-helper">Restrict the archive to a subpath. Empty backs up the whole volume.</p>
                </div>
              </section>

              <section class="ubm-page" data-page="schedule">
                <div><div class="ubm-page-title">Schedule</div><div class="ubm-page-desc">When this backup runs.</div></div>
                <div class="ubm-field">
                  <label class="ubm-label">Frequency</label>
                  <input class="input" type="text" placeholder="0 0 * * *" />
                  <p class="ubm-helper">Cron expression or a preset like <code>daily</code>, <code>hourly</code>, <code>weekly</code>. Example: <code>0 0 * * *</code> = every day at midnight.</p>
                </div>
                <div class="ubm-field">
                  <label class="ubm-label">Timezone</label>
                  <button type="button" class="input ubm-listbox"><span>UTC</span>${icons.chevron}</button>
                </div>
              </section>

              <section class="ubm-page" data-page="s3">
                <div><div class="ubm-page-title">S3 storage</div><div class="ubm-page-desc">Optionally upload each backup to an S3-compatible bucket.</div></div>
                ${toggleRow('Save to S3', 'Upload every backup to object storage in addition to keeping it on the server.', false)}
                <div class="ubm-field ubm-collapse" data-collapse="s3" data-hidden>
                  <label class="ubm-label">S3 storage</label>
                  <button type="button" class="input ubm-listbox"><span>Select storage</span>${icons.chevron}</button>
                  <p class="ubm-helper">Configure S3 destinations under Settings → Backup.</p>
                </div>
              </section>

              <section class="ubm-page" data-page="retention">
                <div><div class="ubm-page-title">Retention</div><div class="ubm-page-desc">How long to keep backups before old ones are rotated out. A backup is removed once any limit is exceeded.</div></div>
                ${retentionGroup({ name: 'Local (on the server)', icon: icons.hdd, amount: '7', days: '14', storage: '10' })}
                ${retentionGroup({ name: 'S3', icon: icons.s3, amount: '30', days: '90', storage: '100' })}
              </section>

              <section class="ubm-page" data-page="danger">
                <div><div class="ubm-page-title">Danger Zone</div><div class="ubm-page-desc">Irreversible actions for this backup.</div></div>
                <div class="ubm-callout">
                  ${icons.warn}
                  <div>
                    <div class="ubm-callout-title">Delete this backup schedule</div>
                    <div class="ubm-callout-text">Removes the schedule and its configuration. Existing backup files already stored locally or in S3 are not deleted.</div>
                  </div>
                </div>
                <div><button type="button" class="button ubm-danger-btn">Delete backup</button></div>
              </section>

            </div>
          </div>
          <footer class="ubm-footer">
            <span class="ubm-hint">Visual proposal — not saved.</span>
            <button type="button" class="button ubm-cancel">Cancel</button>
            <button type="button" class="button button-highlighted ubm-submit">Add backup</button>
          </footer>
        </div>
      </div>`;

    node.addEventListener('click', event => {
      if (event.target.closest('.ubm-close, .ubm-cancel')) return closeModal();
      if (event.target.matches('.ubm-scrim, .ubm-wrap')) return closeModal();
      const nav = event.target.closest('.ubm-nav-item');
      if (nav) return selectPage(node, nav.dataset.nav);
      const sw = event.target.closest('.ubm-switch');
      if (sw) return toggleSwitch(node, sw);
    });

    document.body.append(node);
    return node;
  }

  function selectPage(node, id) {
    node.querySelectorAll('.ubm-nav-item').forEach(item =>
      item.setAttribute('aria-current', item.dataset.nav === id ? 'true' : 'false'));
    node.querySelectorAll('.ubm-page').forEach(page =>
      page.toggleAttribute('data-active', page.dataset.page === id));
    node.querySelector('.ubm-content').scrollTop = 0;
  }

  function toggleSwitch(node, sw) {
    const on = sw.toggleAttribute('data-on');
    sw.setAttribute('aria-checked', on ? 'true' : 'false');
    // The dump-all toggle inverts its panel: showing the per-database list only when off.
    const row = sw.closest('.ubm-only, .ubm-page');
    const dumpall = row?.querySelector('[data-collapse="dumpall"]');
    if (dumpall && sw.getAttribute('aria-label') === 'Back up all databases') {
      dumpall.toggleAttribute('data-hidden', on);
    }
    const s3 = row?.querySelector('[data-collapse="s3"]');
    if (s3 && sw.getAttribute('aria-label') === 'Save to S3') {
      s3.toggleAttribute('data-hidden', !on);
    }
  }

  function openModal(mode) {
    if (!overlay) overlay = buildOverlay();
    const panel = overlay.querySelector('.ubm-panel');
    panel.dataset.mode = mode;
    panel.querySelector('.ubm-kind').innerHTML =
      `${mode === 'storage' ? icons.storage : icons.database}<span class="ubm-kind-text">${mode === 'storage' ? 'Storage' : 'Database'}</span>`;
    selectPage(overlay, 'general');
    overlay.classList.add('ubm-open');
  }

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

  // One body-level menu, reused for every trigger and rebuilt lazily.
  let menu = null;
  function buildMenu() {
    const el = document.createElement('div');
    el.className = 'ubm-menu';
    el.setAttribute('role', 'menu');
    el.innerHTML = `
      <button type="button" class="ubm-menu-item" role="menuitem" data-kind="database">
        ${icons.database}
        <span><span class="ubm-menu-name">Database backup</span><span class="ubm-menu-sub">Scheduled dump of a database.</span></span>
      </button>
      <button type="button" class="ubm-menu-item" role="menuitem" data-kind="storage">
        ${icons.storage}
        <span><span class="ubm-menu-name">Storage backup</span><span class="ubm-menu-sub">Archive a volume or persistent directory.</span></span>
      </button>`;
    el.querySelectorAll('.ubm-menu-item').forEach(item =>
      item.addEventListener('click', () => { closeMenu(); openModal(item.dataset.kind); }));
    document.body.append(el);
    return el;
  }

  function openMenu(button) {
    if (!menu) menu = buildMenu();
    menu.setAttribute('data-open', '');
    const rect = button.getBoundingClientRect();
    const width = menu.offsetWidth;
    const left = Math.max(8, Math.min(rect.right - width, innerWidth - width - 8));
    let top = rect.bottom + 6;
    if (top + menu.offsetHeight > innerHeight - 8) top = Math.max(8, rect.top - menu.offsetHeight - 6);
    menu.style.left = `${left}px`;
    menu.style.top = `${top}px`;
  }
  function closeMenu() { menu?.removeAttribute('data-open'); }

  // Best-effort: close a native "New … backup" modal if one is (or gets) stuck open.
  // Coolify teleports these dialogs to <body>; their open state is Alpine's modalOpen.
  function closeNativeBackupModals() {
    if (!window.Alpine?.$data) return;
    for (const dialog of document.querySelectorAll('body [role="dialog"], body [x-trap], body .fixed')) {
      if (!/New (storage|database) backup/i.test(dialog.textContent || '')) continue;
      for (let el = dialog; el; el = el.parentElement) {
        try {
          const data = window.Alpine.$data(el);
          if (data && 'modalOpen' in data) { data.modalOpen = false; break; }
        } catch { /* not an Alpine root */ }
      }
    }
  }

  // A native backup create trigger: a button/menuitem inside a settings section whose
  // header mentions "backup", whose label matches the create wording.
  function backupTrigger(target) {
    if (!RESOURCE_PATH.test(location.pathname)) return null;
    const button = target.closest?.('button, [role="menuitem"], a');
    if (!button || button.closest('.ubm-menu, .ubm-overlay')) return null;
    const section = button.closest('.application-settings-section');
    const header = section?.querySelector(':scope > header, :scope > .application-settings-section-header');
    if (!header || !/backup/i.test(header.querySelector('h1, h2, h3')?.textContent || '')) return null;
    return CREATE_RE.test(button.textContent.replace(/\s+/g, ' ').trim()) ? button : null;
  }

  // Intercept in the capture phase, before Alpine's own bubble-phase @click can open
  // (and, per a Coolify morph bug, get stuck opening) the native modal.
  document.addEventListener('click', event => {
    const trigger = backupTrigger(event.target);
    if (!trigger) return;
    event.preventDefault();
    event.stopImmediatePropagation();
    closeNativeBackupModals();
    openMenu(trigger);
  }, true);

  // Dismiss our menu on an unrelated click, Escape, scroll, or resize.
  document.addEventListener('click', event => {
    if (!event.target.closest('.ubm-menu')) closeMenu();
  });
  document.addEventListener('keydown', event => {
    if (event.key !== 'Escape') return;
    closeMenu();
    closeModal();
  });
  window.addEventListener('resize', closeMenu);
  window.addEventListener('scroll', closeMenu, true);
})();

Navigation Menu

Uh oh!

Create backup flow is inconsistent #11834

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Create backup flow is inconsistent #11834

Uh oh!

Uh oh!

ShadowArcanist Sep 16, 2026 Maintainer

Issue

Shadow's suggestion

Userscript

Replies: 0 comments

ShadowArcanist
Sep 16, 2026
Maintainer