ultimate-jekyll-manager 1.6.5 → 1.6.7

package/dist/assets/js/pages/account/sections/notifications.js

@@ -19,6 +19,7 @@ const TOGGLE_ID = 'marketing-emails';
 const GRANT_DATE_ID = 'marketing-emails-grant-date';
 
 let formManager = null;
+let pushFormManager = null;
 
 export function init() {
   const $form = document.getElementById(FORM_ID);
@@ -90,4 +91,91 @@ export function loadData(account) {
   }
 
   formManager.ready();
+
+  initPushNotifications();
+}
+
+function updatePushUI() {
+  const $status = document.getElementById('push-notification-status');
+  const $tokenInput = document.getElementById('push-token-value');
+
+  if (!$status) {
+    return;
+  }
+
+  const notifications = webManager.notifications();
+  const stored = webManager.storage().get('notifications', {});
+  const permission = typeof Notification !== 'undefined' ? Notification.permission : 'default';
+
+  let state;
+  if (stored.subscribed && stored.token) {
+    state = 'subscribed';
+    $status.innerHTML = '<span class="badge bg-success">Subscribed</span>';
+    if ($tokenInput) { $tokenInput.value = stored.token; }
+    if (pushFormManager) { pushFormManager._setDisabled(true); }
+  } else if (!notifications.isSupported()) {
+    state = 'not-supported';
+    $status.innerHTML = '<span class="badge bg-warning">Not supported</span>';
+    if (pushFormManager) { pushFormManager._setDisabled(true); }
+  } else if (permission === 'denied') {
+    state = 'denied';
+    $status.innerHTML = '<span class="badge bg-danger">Denied</span>';
+    if (pushFormManager) { pushFormManager._setDisabled(true); }
+  } else {
+    state = 'not-subscribed';
+    $status.innerHTML = '<span class="badge bg-secondary">Not subscribed</span>';
+    if ($tokenInput) { $tokenInput.value = ''; }
+    if (pushFormManager) { pushFormManager.ready(); }
+  }
+
+  console.log('[Account:push] updatePushUI →', state, { storedSubscribed: stored.subscribed, storedToken: stored.token?.slice(-8), permission });
+}
+
+async function initPushNotifications() {
+  const $status = document.getElementById('push-notification-status');
+  const $form = document.getElementById('push-subscribe-form');
+  const $copyBtn = document.getElementById('copy-push-token-btn');
+
+  if (!$status) {
+    return;
+  }
+
+  const notifications = webManager.notifications();
+
+  // Full sync: validates permission + token + Firestore, then updates localStorage
+  await notifications.syncSubscription();
+
+  // Create the form (always starts disabled), then let updatePushUI control its state
+  if (notifications.isSupported() && $form) {
+    $form.style.display = '';
+
+    pushFormManager = new FormManager('#push-subscribe-form', {
+      autoReady: false,
+      allowResubmit: true,
+    });
+
+    pushFormManager.on('submit', async () => {
+      console.log('[Account:push] Subscribe button clicked');
+      await notifications.subscribe();
+      console.log('[Account:push] Subscribe complete — updating UI');
+      setTimeout(() => updatePushUI(), 0);
+    });
+  }
+
+  // Now that the form exists, let updatePushUI set the correct state
+  updatePushUI();
+
+  if ($copyBtn) {
+    const $tokenInput = document.getElementById('push-token-value');
+    const originalHtml = $copyBtn.innerHTML;
+    $copyBtn.addEventListener('click', () => {
+      if (!$tokenInput?.value) {
+        return;
+      }
+      navigator.clipboard.writeText($tokenInput.value).then(() => {
+        $copyBtn.textContent = 'Copied!';
+        setTimeout(() => { $copyBtn.innerHTML = originalHtml; }, 2000);
+      });
+    });
+  }
 }

package/dist/assets/js/pages/admin/calendar/calendar-events.js

@@ -32,7 +32,6 @@ export default class CalendarEvents {
     this._initTypeToggle();
     this._initRecurrenceToggle();
     this._initSendNow();
-    this._initDeleteButton();
     this._initCreateButton();
     this._initPreview();
   }
@@ -47,6 +46,7 @@ export default class CalendarEvents {
       this._setType('email');
       this._resetRecurrence();
       document.getElementById('campaign-modal-title-text').textContent = 'Create Campaign';
+      document.getElementById('campaign-modal-id').classList.add('d-none');
       document.getElementById('campaign-local-time-row').style.display = 'none';
     });
 
@@ -86,15 +86,57 @@ export default class CalendarEvents {
       allowResubmit: true,
     });
 
-    this.formManager.on('submit', async ({ data }) => {
-      const payload = this._buildPayload(data);
+    this.formManager.on('validation', ({ $submitButton }) => {
+      const action = $submitButton?.value || 'save';
+      if (action === 'delete' || action === 'test') {
+        this.formManager.clearFieldErrors();
+      }
+    });
+
+    this.formManager.on('submit', async ({ data, $submitButton }) => {
+      const action = $submitButton?.value || 'save';
+
+      if (action === 'delete') {
+        if (!this.editingCampaignId) { return; }
+        if (!confirm('Delete this campaign? This cannot be undone.')) {
+          this.formManager.ready();
+          return;
+        }
+        await this._deleteCampaign(this.editingCampaignId);
+        this._getEditorModal().hide();
+        return;
+      }
+
+      if (action === 'test') {
+        const payload = this._buildPayload(data);
+        payload.test = true;
+        payload.sendAt = 'now';
+        delete payload.recurrence;
 
+        if (this.editingCampaignId) {
+          payload.recurringId = this.editingCampaignId;
+        }
+
+        const url = `${webManager.getApiUrl()}/backend-manager/marketing/campaign`;
+        await authorizedFetch(url, {
+          method: 'POST',
+          timeout: 60000,
+          response: 'json',
+          tries: 1,
+          log: true,
+          body: payload,
+        });
+        this.formManager.showSuccess('Test sent');
+        return;
+      }
+
+      // Default: save
+      const payload = this._buildPayload(data);
       if (this.editingCampaignId) {
         await this._updateCampaign(this.editingCampaignId, payload);
       } else {
         await this._createCampaign(payload);
       }
-
       this._getEditorModal().hide();
     });
   }
@@ -109,7 +151,7 @@ export default class CalendarEvents {
         const isEmail = $radio.value === 'email';
         $emailFields.classList.toggle('d-none', !isEmail);
         $pushFields.classList.toggle('d-none', isEmail);
-        $subjectHint.textContent = isEmail ? '(email subject line)' : '(notification body text)';
+        $subjectHint.textContent = isEmail ? '(email subject line)' : '(notification body — campaign name is used as title)';
       });
     });
   }
@@ -204,27 +246,10 @@ export default class CalendarEvents {
       const now = new Date();
       document.getElementById('campaign-date').value = formatDateUTC(now);
       document.getElementById('campaign-time').value = formatTimeUTC(now);
+      this._updateLocalTimeHint();
     });
   }
 
-  _initDeleteButton() {
-    document.getElementById('btn-delete-campaign').addEventListener('click', async () => {
-      if (!this.editingCampaignId) {
-        return;
-      }
-
-      if (!confirm('Delete this campaign? This cannot be undone.')) {
-        return;
-      }
-
-      try {
-        await this._deleteCampaign(this.editingCampaignId);
-        this._getEditorModal().hide();
-      } catch (error) {
-        this.formManager.showError(`Delete failed: ${error.message}`);
-      }
-    });
-  }
 
   // ============================================
   // Modal Operations
@@ -233,6 +258,7 @@ export default class CalendarEvents {
     this.editingCampaignId = null;
     this.formManager.reset();
     this._toggleDeleteButton(false);
+    this._showCampaignId(null);
     this._setType('email');
     document.getElementById('campaign-modal-title-text').textContent = 'Create Campaign';
 
@@ -260,6 +286,7 @@ export default class CalendarEvents {
       }
       this.editingCampaignId = template.id;
       this._toggleDeleteButton(true);
+      this._showCampaignId(template.id);
       document.getElementById('campaign-modal-title-text').textContent = 'Edit Recurring Campaign';
       this._populateFormFromCampaign(template, true);
       this._getEditorModal().show();
@@ -274,10 +301,15 @@ export default class CalendarEvents {
       return;
     }
 
-    // Recurring template: editable (changes apply to all future sends)
+    // Recurring template: editable only if still pending
     if (displayType === DISPLAY_TYPES.RECURRING_TEMPLATE) {
+      if (campaign.status === 'sent' || campaign.status === 'failed') {
+        this._openResultsModal(campaign);
+        return;
+      }
       this.editingCampaignId = campaignId;
       this._toggleDeleteButton(true);
+      this._showCampaignId(campaignId);
       document.getElementById('campaign-modal-title-text').textContent = 'Edit Recurring Campaign';
       this._populateFormFromCampaign(campaign, true);
       this._getEditorModal().show();
@@ -287,6 +319,7 @@ export default class CalendarEvents {
     // One-off pending: fully editable
     this.editingCampaignId = campaignId;
     this._toggleDeleteButton(true);
+    this._showCampaignId(campaignId);
     document.getElementById('campaign-modal-title-text').textContent = 'Edit Campaign';
     this._populateFormFromCampaign(campaign, true);
     this._getEditorModal().show();
@@ -323,7 +356,8 @@ export default class CalendarEvents {
     document.getElementById('campaign-subject').value = settings.subject || '';
     document.getElementById('campaign-date').value = formatDateUTC(d);
     document.getElementById('campaign-time').value = formatTimeUTC(d);
-    document.getElementById('campaign-discount-code').value = settings.discountCode || '';
+    const contentData = settings.data?.content || {};
+    document.getElementById('campaign-discount-code').value = contentData.discountCode || '';
     document.getElementById('campaign-test').checked = !!settings.test;
 
     // Targeting
@@ -333,8 +367,8 @@ export default class CalendarEvents {
 
     // Email fields
     document.getElementById('campaign-preheader').value = settings.preheader || '';
-    document.getElementById('campaign-content').value = settings.content || '';
-    document.getElementById('campaign-template').value = settings.template || 'default';
+    document.getElementById('campaign-content').value = contentData.message || '';
+    document.getElementById('campaign-template').value = settings.template || 'card';
     document.getElementById('campaign-sender').value = settings.sender || 'marketing';
 
     // Push fields
@@ -409,6 +443,16 @@ export default class CalendarEvents {
     }
   }
 
+  _showCampaignId(id) {
+    const $el = document.getElementById('campaign-modal-id');
+    if (id) {
+      $el.textContent = id;
+      $el.classList.remove('d-none');
+    } else {
+      $el.classList.add('d-none');
+    }
+  }
+
   _updateLocalTimeHint() {
     const $row = document.getElementById('campaign-local-time-row');
     const $hint = document.getElementById('campaign-time-local');
@@ -456,9 +500,6 @@ export default class CalendarEvents {
     };
 
     // Config
-    if (c.discountCode) {
-      payload.discountCode = c.discountCode.trim();
-    }
     if (c.test) {
       payload.test = true;
     }
@@ -492,15 +533,23 @@ export default class CalendarEvents {
       if (c.preheader) {
         payload.preheader = c.preheader.trim();
       }
-      if (c.content) {
-        payload.content = c.content;
-      }
-      if (c.template && c.template !== 'default') {
+      if (c.template && c.template !== 'card') {
         payload.template = c.template;
       }
       if (c.sender) {
         payload.sender = c.sender;
       }
+
+      const content = {};
+      if (c.content) {
+        content.message = c.content;
+      }
+      if (c.discountCode) {
+        content.discountCode = c.discountCode.trim();
+      }
+      if (Object.keys(content).length) {
+        payload.data = { ...payload.data, content };
+      }
     }
 
     // Push-specific
@@ -732,9 +781,12 @@ export default class CalendarEvents {
     html += `<span class="badge bg-${campaign.type === 'email' ? 'primary' : 'success'}">${campaign.type === 'email' ? 'Email' : 'Push'}</span>`;
     html += `</div>`;
     html += `<table class="table table-sm table-borderless mb-0">`;
-    html += `<tr><td class="text-muted" style="width:120px">Name</td><td>${webManager.utilities().escapeHTML(settings.name || '')}</td></tr>`;
+    html += `<tr><td class="text-muted" style="width:120px">ID</td><td><code>${webManager.utilities().escapeHTML(campaign.id)}</code></td></tr>`;
+    html += `<tr><td class="text-muted">Name</td><td>${webManager.utilities().escapeHTML(settings.name || '')}</td></tr>`;
     html += `<tr><td class="text-muted">Subject</td><td>${webManager.utilities().escapeHTML(settings.subject || '')}</td></tr>`;
-    html += `<tr><td class="text-muted">Sent At</td><td>${formatDateUTC(d)} ${formatTimeUTC(d)} UTC</td></tr>`;
+    html += `<tr><td class="text-muted">Test</td><td>${settings.test ? '<span class="badge bg-warning">Yes</span>' : 'No'}</td></tr>`;
+    const localStr = d.toLocaleString('en', { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit', timeZoneName: 'short' });
+    html += `<tr><td class="text-muted">Sent At</td><td>${formatDateUTC(d)} ${formatTimeUTC(d)} UTC <span class="text-muted">(${localStr})</span></td></tr>`;
 
     if (campaign.type === 'email') {
       if (settings.preheader) {
@@ -767,10 +819,11 @@ export default class CalendarEvents {
     html += '</div>';
 
     // Content (email only)
-    if (campaign.type === 'email' && settings.content) {
+    const resultContent = settings.data?.content?.message;
+    if (campaign.type === 'email' && resultContent) {
       html += '<div class="mb-4">';
       html += '<h6>Content</h6>';
-      html += `<pre class="bg-body-tertiary p-3 rounded small" style="white-space:pre-wrap;max-height:200px;overflow-y:auto">${webManager.utilities().escapeHTML(settings.content)}</pre>`;
+      html += `<pre class="bg-body-tertiary p-3 rounded small" style="white-space:pre-wrap;max-height:200px;overflow-y:auto">${webManager.utilities().escapeHTML(resultContent)}</pre>`;
       html += '</div>';
     }
 

package/dist/assets/js/pages/admin/calendar/calendar-renderer.js

@@ -14,6 +14,18 @@ export default class CalendarRenderer {
     this.$toolbar = document.getElementById('calendar-toolbar');
     this.$grid = document.getElementById('calendar-grid');
     this._nowLineInterval = null;
+    this._resizeObserver = null;
+
+    this._initResizeObserver();
+  }
+
+  _initResizeObserver() {
+    this._resizeObserver = new ResizeObserver(() => {
+      if (this.core.viewMode === 'month') {
+        this._fitMonthEvents();
+      }
+    });
+    this._resizeObserver.observe(this.$grid);
   }
 
   // ============================================
@@ -90,6 +102,7 @@ export default class CalendarRenderer {
   // Month View
   // ============================================
   _renderMonthView() {
+    this._pillHeight = null;
     const core = this.core;
     const cells = core.getMonthGrid();
 
@@ -120,13 +133,26 @@ export default class CalendarRenderer {
     html += '</div>';
 
     this.$grid.innerHTML = html;
-    this._fitMonthEvents();
+    requestAnimationFrame(() => this._fitMonthEvents());
     this._bindCellClicks();
     this._bindCampaignClicks();
     this._bindDragAndDrop();
   }
 
   _fitMonthEvents() {
+    // Measure natural pill height once from a detached clone so flex
+    // compression doesn't skew the value
+    if (!this._pillHeight) {
+      const $sample = this.$grid.querySelector('.calendar-event');
+      if ($sample) {
+        const $clone = $sample.cloneNode(true);
+        $clone.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;';
+        document.body.appendChild($clone);
+        this._pillHeight = $clone.getBoundingClientRect().height;
+        $clone.remove();
+      }
+    }
+
     this.$grid.querySelectorAll('.calendar-cell').forEach(($cell) => {
       const $events = $cell.querySelector('.calendar-cell-events');
       if (!$events) { return; }
@@ -135,12 +161,15 @@ export default class CalendarRenderer {
       const $more = $events.querySelector('.calendar-cell-more');
       if ($pills.length === 0) { return; }
 
-      // Available height = cell inner height minus everything above the events container
+      // Hide everything first so the cell has its natural empty height
+      $pills.forEach(($p) => { $p.style.display = 'none'; });
+      if ($more) { $more.style.display = 'none'; }
+
       const cellRect = $cell.getBoundingClientRect();
       const eventsRect = $events.getBoundingClientRect();
       const available = cellRect.bottom - eventsRect.top;
 
-      const pillHeight = $pills[0].getBoundingClientRect().height;
+      const pillHeight = this._pillHeight || 20;
       const gap = 1;
 
       // Measure "+more" line height
@@ -151,24 +180,26 @@ export default class CalendarRenderer {
       const moreLineHeight = $more ? $more.getBoundingClientRect().height + gap : 0;
       if ($more) { $more.style.display = 'none'; }
 
-      let shown = 0;
-
-      for (let i = 0; i < $pills.length; i++) {
-        const heightSoFar = (shown + 1) * pillHeight + shown * gap;
-        const remaining = $pills.length - i - 1;
-        const wouldNeedMore = remaining > 0;
-        const totalNeeded = heightSoFar + (wouldNeedMore ? moreLineHeight : 0);
-
-        if (totalNeeded <= available) {
-          $pills[i].style.display = '';
-          shown++;
+      // Calculate how many pills fit
+      let maxVisible = 0;
+      for (let n = 1; n <= $pills.length; n++) {
+        const pillsHeight = n * pillHeight + (n - 1) * gap;
+        const needsMore = n < $pills.length;
+        const total = pillsHeight + (needsMore ? moreLineHeight : 0);
+        if (total <= available) {
+          maxVisible = n;
         } else {
-          $pills[i].style.display = 'none';
+          break;
         }
       }
 
+      // Apply visibility
+      $pills.forEach(($p, i) => {
+        $p.style.display = i < maxVisible ? '' : 'none';
+      });
+
       if ($more) {
-        const hidden = $pills.length - shown;
+        const hidden = $pills.length - maxVisible;
         if (hidden > 0) {
           $more.textContent = `+${hidden} more`;
           $more.style.display = '';

package/dist/defaults/dist/_layouts/blueprint/admin/calendar/index.html

@@ -60,6 +60,7 @@ prerender_icons:
   - name: "wifi"
   - name: "battery-full"
   - name: "table-list"
+  - name: "vial"
 ---
 
 <!-- Calendar Root -->
@@ -79,6 +80,7 @@ prerender_icons:
         <h5 class="modal-title" id="campaign-modal-title">
           {% uj_icon "plus", "fa-md me-2" %}
           <span id="campaign-modal-title-text">Create campaign</span>
+          <small class="text-muted fw-normal ms-2 d-none" id="campaign-modal-id" style="font-size: 0.6rem"></small>
         </h5>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
@@ -87,7 +89,7 @@ prerender_icons:
 
           <!-- Campaign Type -->
           <h6 class="mb-3">
-            {% uj_icon "bullhorn", "fa-sm me-2 text-info" %}
+            {% uj_icon "bullhorn", "me-2 text-info" %}
             Campaign type
           </h6>
           <div class="row mb-4">
@@ -186,9 +188,8 @@ prerender_icons:
                   <div class="col-md-6">
                     <label for="campaign-template" class="form-label">Template</label>
                     <select class="form-select" id="campaign-template" name="campaign.template">
-                      <option value="default" selected>Default</option>
-                      <option value="main/basic/card">Card</option>
-                      <option value="main/basic/plain">Plain</option>
+                      <option value="card" selected>Card</option>
+                      <option value="plain">Plain</option>
                     </select>
                   </div>
                   <div class="col-md-6">
@@ -201,6 +202,18 @@ prerender_icons:
                     </select>
                   </div>
                 </div>
+
+                <div class="mb-3">
+                  <label for="campaign-discount-code" class="form-label">
+                    Discount code
+                    <small class="text-muted fw-normal ms-1">(optional — resolves {discount.code} and {discount.percent})</small>
+                  </label>
+                  <input type="text"
+                         class="form-control"
+                         id="campaign-discount-code"
+                         name="campaign.discountCode"
+                         placeholder="e.g. UPGRADE15">
+                </div>
               </div>
 
               <!-- Push-only fields -->
@@ -271,19 +284,6 @@ prerender_icons:
             </div>
           </div>
 
-          <!-- Discount Code -->
-          <div class="mb-3">
-            <label for="campaign-discount-code" class="form-label">
-              Discount code
-              <small class="text-muted fw-normal ms-1">(optional)</small>
-            </label>
-            <input type="text"
-                   class="form-control"
-                   id="campaign-discount-code"
-                   name="campaign.discountCode"
-                   placeholder="e.g. UPGRADE15">
-          </div>
-
           <!-- Test Mode -->
           <div class="form-check mb-4">
             <input class="form-check-input"
@@ -300,7 +300,7 @@ prerender_icons:
 
           <!-- Schedule -->
           <h6 class="mb-3 mt-4">
-            {% uj_icon "clock", "fa-sm me-2 text-info" %}
+            {% uj_icon "clock", "me-2 text-info" %}
             Schedule
             <small class="text-muted fw-normal ms-1">(UTC)</small>
           </h6>
@@ -330,9 +330,9 @@ prerender_icons:
               <div class="invalid-feedback">Time is required</div>
             </div>
             <div class="col-md-3 d-flex align-items-end">
-              <button type="button" class="btn btn-sm btn-outline-primary w-100" id="btn-send-now">
-                {% uj_icon "paper-plane", "fa-sm me-1" %}
-                Send now
+              <button type="button" class="btn btn-md btn-outline-primary w-100" id="btn-send-now">
+                {% uj_icon "clock", "fa-sm me-1" %}
+                Set now
               </button>
             </div>
           </div>
@@ -342,7 +342,7 @@ prerender_icons:
 
           <!-- Recurrence -->
           <h6 class="mb-3 mt-4">
-            {% uj_icon "repeat", "fa-sm me-2 text-info" %}
+            {% uj_icon "repeat", "me-2 text-info" %}
             Recurrence
             <small class="text-muted fw-normal ms-1">(optional)</small>
           </h6>
@@ -445,7 +445,7 @@ prerender_icons:
 
           <!-- Targeting -->
           <h6 class="mb-3 mt-4">
-            {% uj_icon "users", "fa-sm me-2 text-success" %}
+            {% uj_icon "users", "me-2 text-success" %}
             Targeting
           </h6>
 
@@ -499,32 +499,33 @@ prerender_icons:
 
           <div class="mb-3">
             <label for="campaign-segments" class="form-label">
-              Segments
-              <small class="text-muted fw-normal ms-1">(comma-separated IDs)</small>
+              Include segments
+              <small class="text-muted fw-normal ms-1">(AND — contacts must match ALL listed segments)</small>
             </label>
             <input type="text"
                    class="form-control"
                    id="campaign-segments"
                    name="campaign.segments"
-                   placeholder="e.g. seg_abc123, seg_def456">
+                   placeholder="e.g. subscription_free, lifecycle_30d">
+            <small class="form-text text-muted">SSOT keys: subscription_free, subscription_paid, subscription_trialing, subscription_cancelled, subscription_churned_trial, subscription_churned_paid, lifecycle_7d, lifecycle_30d, engagement_active_30d, engagement_inactive_90d, etc.</small>
           </div>
 
           <div class="mb-3">
             <label for="campaign-exclude-segments" class="form-label">
               Exclude segments
-              <small class="text-muted fw-normal ms-1">(comma-separated IDs)</small>
+              <small class="text-muted fw-normal ms-1">(AND — contacts matching ANY excluded segment are removed)</small>
             </label>
             <input type="text"
                    class="form-control"
                    id="campaign-exclude-segments"
                    name="campaign.excludeSegments"
-                   placeholder="e.g. seg_unsubscribed">
+                   placeholder="e.g. subscription_paid, subscription_trialing">
           </div>
 
           <!-- Advanced Settings (collapsible) -->
           <h6 class="mb-3 mt-4">
             <a class="text-decoration-none" data-bs-toggle="collapse" href="#advanced-settings" role="button" aria-expanded="false">
-              {% uj_icon "sliders", "fa-sm me-2 text-info" %}
+              {% uj_icon "sliders", "me-2 text-info" %}
               Advanced settings
               <small class="text-muted fw-normal ms-1">(optional)</small>
             </a>
@@ -575,23 +576,26 @@ prerender_icons:
             </div>
           </div>
 
+          <div class="modal-footer d-flex justify-content-between">
+            <div>
+              <button type="submit" name="action" value="delete" formnovalidate class="btn btn-outline-danger d-none" id="btn-delete-campaign">
+                {% uj_icon "trash", "fa-sm me-1" %}
+                <span class="button-text">Delete</span>
+              </button>
+            </div>
+            <div class="d-flex gap-2">
+              <button type="submit" name="action" value="test" formnovalidate class="btn btn-outline-warning" id="btn-send-test">
+                {% uj_icon "vial", "fa-sm me-1" %}
+                <span class="button-text">Send test</span>
+              </button>
+              <button type="submit" name="action" value="save" class="btn btn-adaptive" id="btn-save-campaign">
+                {% uj_icon "paper-plane", "fa-sm me-1" %}
+                <span class="button-text">Save campaign</span>
+              </button>
+            </div>
+          </div>
         </form>
       </div>
-      <div class="modal-footer d-flex justify-content-between">
-        <div>
-          <button type="button" class="btn btn-outline-danger d-none" id="btn-delete-campaign">
-            {% uj_icon "trash", "fa-sm me-1" %}
-            Delete
-          </button>
-        </div>
-        <div class="d-flex gap-2">
-          <button type="button" class="btn btn-outline-adaptive" data-bs-dismiss="modal">Cancel</button>
-          <button type="submit" form="campaign-editor-form" class="btn btn-adaptive" id="btn-save-campaign">
-            {% uj_icon "paper-plane", "fa-sm me-1" %}
-            <span class="button-text">Save campaign</span>
-          </button>
-        </div>
-      </div>
     </div>
   </div>
 </div>

package/dist/defaults/dist/_layouts/themes/classy/frontend/pages/account/index.html

@@ -1277,6 +1277,36 @@ badges:
             </form>
           </div>
         </div>
+        <div class="card mt-3">
+          <div class="card-body">
+            <div class="d-flex justify-content-between align-items-center mb-1">
+              <h5 class="card-title mb-0">Push notifications</h5>
+              <span id="push-notification-status"><span class="badge bg-secondary">Checking...</span></span>
+            </div>
+            <p class="text-muted small mb-3">Receive push notifications in your browser for important updates.</p>
+
+            <form id="push-subscribe-form" novalidate onsubmit="return false" style="display:none">
+              <button type="submit" class="btn btn-adaptive btn-sm" id="push-subscribe-btn">
+                {% uj_icon "bell", "me-1" %}
+                <span class="button-text">Enable push notifications</span>
+              </button>
+            </form>
+
+            <div class="mt-3 pt-3 border-top">
+              <a class="small text-muted text-decoration-none d-flex align-items-center" data-bs-toggle="collapse" href="#push-token-details" role="button" aria-expanded="false">
+                {% uj_icon "code", "fa-xs me-1" %} Token details
+              </a>
+              <div class="collapse mt-2" id="push-token-details">
+                <div class="input-group input-group-sm">
+                  <input type="text" class="form-control font-monospace bg-body-tertiary" id="push-token-value" readonly value="No token" style="font-size: 0.65rem;">
+                  <button type="button" class="btn btn-outline-adaptive" id="copy-push-token-btn">
+                    {% uj_icon "copy" %}
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </section>
 
       <!-- API Keys Section -->

package/dist/defaults/src/_config.yml

@@ -77,6 +77,9 @@ web_manager:
         messagingSenderId: ""
         appId: ""
         measurementId: ""
+    messaging:
+      config:
+        vapidKey: ""
     appCheck:
       enabled: false
       config:

package/dist/service-worker.js

@@ -145,6 +145,27 @@ class Manager {
     // Initialize messaging
     this.libraries.messaging = firebase.messaging();
 
+    // Handle background push messages (when the page is not focused)
+    this.libraries.messaging.onBackgroundMessage((payload) => {
+      console.log('Background message received:', payload);
+
+      const notification = payload.notification || {};
+      const data = payload.data || {};
+
+      const title = notification.title || 'New notification';
+      const options = {
+        body: notification.body || '',
+        icon: notification.icon || notification.image || '/assets/images/favicon/favicon-192x192.png',
+        data: payload,
+      };
+
+      if (data.click_action) {
+        options.data.click_action = data.click_action;
+      }
+
+      serviceWorker.registration.showNotification(title, options);
+    });
+
     // Attach firebase to SWManager
     this.libraries.firebase = firebase;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ultimate-jekyll-manager",
-  "version": "1.6.5",
+  "version": "1.6.7",
   "description": "Ultimate Jekyll dependency manager",
   "main": "dist/index.js",
   "exports": {
@@ -108,7 +108,7 @@
     "prettier": "^3.8.3",
     "sass": "^1.100.0",
     "spellchecker": "^3.7.1",
-    "web-manager": "^4.2.0",
+    "web-manager": "^4.3.1",
     "webpack": "^5.107.2",
     "wonderful-fetch": "^2.0.5",
     "wonderful-version": "^1.3.2",