sincerely 1.0.0 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3126012f05e46f992478bb05e997605aef323820d2fd72c95dfe3fa49105c33c
-  data.tar.gz: 5c5c1b66fc5e956506a634b8c4da25869019f741bb66e8517e28a08eef32c209
+  metadata.gz: 6404221d2f3d54bcc784af23015c254f5b6a7cc6f4e6f625b648cba7ce2370f2
+  data.tar.gz: f5c4bbee5ad0e3fd813e7995f4b33fc355b129b882420c386422a46508d40c12
 SHA512:
-  metadata.gz: 0b093a942bbb2d4ae549e049e47595ca42e645211b1b6d1a92be1e035cac3aa3c690c1f829505bba4e0ae61fbbfa950e08f25a9bc1c4507be2a3e2f5a2555225
-  data.tar.gz: 4f75a74cd95ec7025a04c6d549591129f6736c9303f07f866fe4213f74ba72a2fe677fc699c668efc405271e09b5b0437679bcb61a19439450400f45323fd58c
+  metadata.gz: c8e6d0d7130e5acb752cdb00cd9c15e79c17704851a22dc39232a64cfddfc15d4f3002277354c0db47e2ca5b3677971facf84874d880e34997c6e2dab340718f
+  data.tar.gz: 3c296dab84ca998b02dc855073fc53de6bb881a335186317104a6553fd32c80aa0e653c64a8e6ae39680baf9355b1a120917f8e0c912ba33e09ebd604784e3db

data/CHANGELOG.md

@@ -2,6 +2,37 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.1.0] - 2026-08-28
+
+### Added
+- Mountable notifications dashboard engine: overview stats, delivery/engagement timeline charts, notifications-by-status chart, and configurable time period filters
+- Templates CRUD with live preview (tabbed HTML/text preview, sample data input, Liquid variable extraction including filter syntax e.g. `name | upcase`)
+- Notifications index and detail views with clickable rows, keyboard navigation, template/notification-type/date-range filters, and pagination
+- Delivery and engagement events views with filtering and timelines
+- Manual notification sending from the dashboard ("send" feature)
+- Dark theme with mobile-friendly nav
+- Configurable `return_url`, `return_label`, and `logout_*` options (via YAML or ENV)
+- CI workflow to publish the gem to RubyGems automatically on tag push
+- arm64-darwin platform support
+
+### Changed
+- Dropped the `sincerely.` prefix from view/helper references across dashboard, notifications, templates, delivery/engagement, nav, and send views
+- Moved inline JS/CSS/SVGs out of views into the asset pipeline (Sprockets manifest, dedicated JS/CSS files, icon partials) and replaced inline `onclick`/`style` attributes with `data-*` attributes and CSS classes for CSP compatibility
+- Extracted controller responsibilities into concerns (pagination, periods, event filtering, delivery metrics/timeline)
+- Replaced `pluck`-based `IN` queries with subqueries and added eager loading to avoid N+1 queries; aggregated timeline counts in SQL instead of iterating in Ruby
+
+### Fixed
+- Guarded AASM state transitions (`may_*?`) to handle duplicate or out-of-order webhook events
+- Corrected timeline bucket boundaries, pagination clamping, invalid date-range handling, and donut chart segment math at 100%
+- Returned a 422 (instead of 500) on invalid Liquid template syntax during preview, and generic client errors with full server-side logging on delivery exceptions
+- Replaced the logout anchor with `button_to` so it works without Turbo
+- Assorted nil/default handling fixes for template subjects, content, and `template_data` across param types
+
+### Security
+- Guarded the inline SVG helper against path traversal
+- Sandboxed the template preview iframe and added a CSP
+- Restricted `template_data` to known Liquid variables instead of permitting arbitrary params
+
 ## [1.0.0] - 2024-07-31
 
 ### Added

data/app/assets/config/sincerely.js

@@ -0,0 +1,2 @@
+//= link_directory ../javascripts/sincerely .js
+//= link_directory ../stylesheets/sincerely .css

data/app/assets/images/sincerely/arrow_left.svg

@@ -0,0 +1 @@
+<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>

data/app/assets/images/sincerely/check.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+  <path d="M20 6L9 17l-5-5"></path>
+</svg>

data/app/assets/images/sincerely/chevron_left.svg

@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>

data/app/assets/images/sincerely/clock.svg

@@ -0,0 +1 @@
+<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>

data/app/assets/images/sincerely/code.svg

@@ -0,0 +1 @@
+<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path></svg>

data/app/assets/images/sincerely/eye.svg

@@ -0,0 +1 @@
+<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>

data/app/assets/images/sincerely/logout.svg

@@ -0,0 +1 @@
+<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>

data/app/assets/images/sincerely/menu.svg

@@ -0,0 +1 @@
+<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>

data/app/assets/images/sincerely/moon.svg

@@ -0,0 +1 @@
+<svg class="icon-moon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>

data/app/assets/images/sincerely/pencil.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+</svg>

data/app/assets/images/sincerely/plus.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+  <path d="M12 5v14M5 12h14"></path>
+</svg>

data/app/assets/images/sincerely/progress_spinner.svg

@@ -0,0 +1,3 @@
+<svg class="progress-spinner" viewBox="0 0 50 50">
+  <circle cx="25" cy="25" r="20" fill="none" stroke-width="4"></circle>
+</svg>

data/app/assets/images/sincerely/spinner.svg

@@ -0,0 +1,3 @@
+<svg class="spinner" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+  <circle cx="12" cy="12" r="10" stroke-width="2" stroke-dasharray="32" stroke-linecap="round"></circle>
+</svg>

data/app/assets/images/sincerely/sun.svg

@@ -0,0 +1 @@
+<svg class="icon-sun" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>

data/app/assets/images/sincerely/warning_circle.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+  <circle cx="12" cy="12" r="10"></circle>
+  <path d="M12 8v4M12 16h.01"></path>
+</svg>

data/app/assets/javascripts/sincerely/charts.js

@@ -0,0 +1,115 @@
+(function() {
+  // Line Chart interactions
+  function initLineChart() {
+    const chart = document.getElementById('lineChart');
+    if (!chart) return;
+
+    const lines = chart.querySelectorAll('.line-chart-line');
+    const areas = chart.querySelectorAll('.line-chart-area');
+    const legendItems = chart.querySelectorAll('.line-chart-legend-item');
+
+    function highlightState(state) {
+      lines.forEach(line => {
+        if (line.dataset.state === state) {
+          line.classList.add('highlighted');
+          line.classList.remove('dimmed');
+        } else {
+          line.classList.add('dimmed');
+          line.classList.remove('highlighted');
+        }
+      });
+      areas.forEach(area => {
+        if (area.dataset.state === state) {
+          area.classList.add('highlighted');
+          area.classList.remove('dimmed');
+        } else {
+          area.classList.add('dimmed');
+          area.classList.remove('highlighted');
+        }
+      });
+      legendItems.forEach(item => {
+        if (item.dataset.state === state) {
+          item.classList.add('highlighted');
+          item.classList.remove('dimmed');
+        } else {
+          item.classList.add('dimmed');
+          item.classList.remove('highlighted');
+        }
+      });
+    }
+
+    function resetHighlight() {
+      lines.forEach(line => line.classList.remove('highlighted', 'dimmed'));
+      areas.forEach(area => area.classList.remove('highlighted', 'dimmed'));
+      legendItems.forEach(item => item.classList.remove('highlighted', 'dimmed'));
+    }
+
+    legendItems.forEach(item => {
+      item.addEventListener('mouseenter', () => highlightState(item.dataset.state));
+      item.addEventListener('mouseleave', resetHighlight);
+    });
+
+    lines.forEach(line => {
+      line.addEventListener('mouseenter', () => highlightState(line.dataset.state));
+      line.addEventListener('mouseleave', resetHighlight);
+    });
+
+    areas.forEach(area => {
+      area.addEventListener('mouseenter', () => highlightState(area.dataset.state));
+      area.addEventListener('mouseleave', resetHighlight);
+    });
+  }
+
+  // Donut Chart interactions
+  function initDonutChart() {
+    const chart = document.getElementById('donutChart');
+    if (!chart) return;
+
+    const segments = chart.querySelectorAll('.donut-segment');
+    const legendItems = chart.querySelectorAll('.donut-legend-item');
+
+    function highlightState(state) {
+      segments.forEach(seg => {
+        if (seg.dataset.state === state) {
+          seg.classList.add('highlighted');
+          seg.classList.remove('dimmed');
+        } else {
+          seg.classList.add('dimmed');
+          seg.classList.remove('highlighted');
+        }
+      });
+      legendItems.forEach(item => {
+        if (item.dataset.state === state) {
+          item.classList.add('highlighted');
+          item.classList.remove('dimmed');
+        } else {
+          item.classList.add('dimmed');
+          item.classList.remove('highlighted');
+        }
+      });
+    }
+
+    function resetHighlight() {
+      segments.forEach(seg => {
+        seg.classList.remove('highlighted', 'dimmed');
+      });
+      legendItems.forEach(item => {
+        item.classList.remove('highlighted', 'dimmed');
+      });
+    }
+
+    legendItems.forEach(item => {
+      item.addEventListener('mouseenter', () => highlightState(item.dataset.state));
+      item.addEventListener('mouseleave', resetHighlight);
+    });
+
+    segments.forEach(seg => {
+      seg.addEventListener('mouseenter', () => highlightState(seg.dataset.state));
+      seg.addEventListener('mouseleave', resetHighlight);
+    });
+  }
+
+  // Initialize all charts
+  initLineChart();
+  initDonutChart();
+})();

data/app/assets/javascripts/sincerely/clickable_rows.js

@@ -0,0 +1,29 @@
+(function() {
+  document.addEventListener('click', function(e) {
+    var row = e.target.closest('tr.clickable-row');
+    if (!row || !row.dataset.href) return;
+    if (e.target.closest('a, button, details, summary')) return;
+
+    window.location = row.dataset.href;
+  });
+
+  document.addEventListener('keydown', function(e) {
+    var row = e.target;
+    if (!row.classList.contains('clickable-row')) return;
+
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      if (row.dataset.href) window.location = row.dataset.href;
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      var next = row.nextElementSibling;
+      while (next && !next.classList.contains('clickable-row')) next = next.nextElementSibling;
+      if (next) next.focus();
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      var prev = row.previousElementSibling;
+      while (prev && !prev.classList.contains('clickable-row')) prev = prev.previousElementSibling;
+      if (prev) prev.focus();
+    }
+  });
+})();

data/app/assets/javascripts/sincerely/layout.js

@@ -0,0 +1,104 @@
+const TIME_LABELS = { '1h': '1h', '24h': '24h', '7d': '7d', '30d': '30d', '3m': '3m', 'all': 'All' };
+const FILTERED_PAGES = ['dashboard', 'notifications', 'delivery_events', 'engagement_events'];
+const CURRENT_PAGE = document.body.dataset.controller;
+
+function toggleNav() {
+  const navLinks = document.getElementById('navLinks');
+  if (navLinks) navLinks.classList.toggle('open');
+}
+
+function toggleTheme() {
+  const html = document.documentElement;
+  const currentTheme = html.getAttribute('data-theme');
+  const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+  html.setAttribute('data-theme', newTheme);
+  localStorage.setItem('sincerely-theme', newTheme);
+}
+
+function toggleTimeDropdown() {
+  const dropdown = document.getElementById('timeDropdown');
+  if (dropdown) dropdown.classList.toggle('open');
+}
+
+function setTimePeriod(period) {
+  localStorage.setItem('sincerely-period', period);
+  const label = document.getElementById('timeLabel');
+  if (label) label.textContent = TIME_LABELS[period];
+  const dropdown = document.getElementById('timeDropdown');
+  if (dropdown) dropdown.classList.remove('open');
+  updateActiveItem(period);
+
+  const url = new URL(window.location);
+  url.searchParams.set('period', period);
+  window.location = url;
+}
+
+function updateActiveItem(period) {
+  document.querySelectorAll('.time-dropdown-item').forEach(item => {
+    item.classList.toggle('active', item.dataset.period === period);
+  });
+}
+
+function getSavedPeriod() {
+  return localStorage.getItem('sincerely-period') || '24h';
+}
+
+document.addEventListener('click', function(e) {
+  const dropdown = document.getElementById('timeDropdown');
+  if (dropdown && !dropdown.contains(e.target)) {
+    dropdown.classList.remove('open');
+  }
+
+  const navLinks = document.getElementById('navLinks');
+  const navToggle = document.querySelector('.nav-toggle');
+  if (navLinks && !navLinks.contains(e.target) && !navToggle.contains(e.target)) {
+    navLinks.classList.remove('open');
+  }
+});
+
+document.querySelectorAll('.time-dropdown-item').forEach(item => {
+  item.addEventListener('click', () => setTimePeriod(item.dataset.period));
+});
+
+document.querySelectorAll('.nav-links a').forEach(link => {
+  link.addEventListener('click', function(e) {
+    const navLinks = document.getElementById('navLinks');
+    if (navLinks) navLinks.classList.remove('open');
+
+    const href = this.getAttribute('href');
+    const isFilteredPage = FILTERED_PAGES.some(page =>
+      href.includes('/' + page) || href.endsWith('/sincerely') || href.endsWith('/sincerely/')
+    );
+
+    if (isFilteredPage) {
+      e.preventDefault();
+      const url = new URL(href, window.location.origin);
+      url.searchParams.set('period', getSavedPeriod());
+      window.location = url;
+    }
+  });
+});
+
+(function() {
+  const savedTheme = localStorage.getItem('sincerely-theme');
+  if (savedTheme) {
+    document.documentElement.setAttribute('data-theme', savedTheme);
+  } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    document.documentElement.setAttribute('data-theme', 'dark');
+  }
+
+  const urlParams = new URLSearchParams(window.location.search);
+  const urlPeriod = urlParams.get('period');
+  const savedPeriod = getSavedPeriod();
+  const period = urlPeriod || savedPeriod;
+
+  const label = document.getElementById('timeLabel');
+  if (label) label.textContent = TIME_LABELS[period] || '24h';
+  updateActiveItem(period);
+
+  if (!urlPeriod && FILTERED_PAGES.includes(CURRENT_PAGE)) {
+    const url = new URL(window.location);
+    url.searchParams.set('period', savedPeriod);
+    window.location.replace(url);
+  }
+})();

data/app/assets/javascripts/sincerely/send_form.js

@@ -0,0 +1,243 @@
+(function() {
+  const MAX_RECIPIENTS = 50;
+  let recipients = [];
+
+  const tagsContainer = document.getElementById('tagsContainer');
+  const tagsList = document.getElementById('tagsList');
+  const recipientInput = document.getElementById('recipientInput');
+  const recipientsCount = document.getElementById('recipientsCount');
+  const templateSelect = document.getElementById('templateSelect');
+  const templateVariables = document.getElementById('templateVariables');
+  const variablesGrid = document.getElementById('variablesGrid');
+  const sendButton = document.getElementById('sendButton');
+  const sendOverlay = document.getElementById('sendOverlay');
+  const sendResult = document.getElementById('sendResult');
+  const resultSuccess = document.getElementById('resultSuccess');
+  const resultPartial = document.getElementById('resultPartial');
+  const resultMessage = document.getElementById('resultMessage');
+  const resetButton = document.getElementById('resetButton');
+  const sendForm = document.querySelector('.send-form');
+
+  function isValidEmail(email) {
+    return /^[^\s@]+@[^\s@]+$/.test(email);
+  }
+
+  function addRecipient(email) {
+    email = email.trim().toLowerCase();
+    if (!email || recipients.includes(email) || recipients.length >= MAX_RECIPIENTS) return false;
+
+    recipients.push(email);
+    renderTags();
+    updateCount();
+    updateSendButton();
+    return true;
+  }
+
+  function removeRecipient(email) {
+    recipients = recipients.filter(r => r !== email);
+    renderTags();
+    updateCount();
+    updateSendButton();
+  }
+
+  function renderTags() {
+    tagsList.innerHTML = recipients.map(email => `
+      <span class="tag ${isValidEmail(email) ? '' : 'invalid'}">
+        ${escapeHtml(email)}
+        <button type="button" class="tag-remove" data-email="${escapeHtml(email)}">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 6L6 18M6 6l12 12"></path>
+          </svg>
+        </button>
+      </span>
+    `).join('');
+
+    tagsList.querySelectorAll('.tag-remove').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        removeRecipient(btn.dataset.email);
+      });
+    });
+  }
+
+  function updateCount() {
+    const count = recipients.length;
+    recipientsCount.textContent = `${count} / ${MAX_RECIPIENTS} recipients`;
+    recipientsCount.className = 'recipients-count';
+    if (count >= MAX_RECIPIENTS) {
+      recipientsCount.classList.add('limit');
+    } else if (count >= 40) {
+      recipientsCount.classList.add('warning');
+    }
+  }
+
+  function updateSendButton() {
+    const hasRecipients = recipients.filter(isValidEmail).length > 0;
+    const hasTemplate = templateSelect.value !== '';
+    sendButton.disabled = !hasRecipients || !hasTemplate;
+  }
+
+  function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  function parseAndAddEmails(input) {
+    const emails = input.split(/[\s,;]+/).filter(e => e.trim());
+    emails.forEach(addRecipient);
+  }
+
+  // Input handlers
+  recipientInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === ',' || e.key === ' ' || e.key === 'Tab') {
+      e.preventDefault();
+      const value = recipientInput.value.trim();
+      if (value) {
+        parseAndAddEmails(value);
+        recipientInput.value = '';
+      }
+    } else if (e.key === 'Backspace' && !recipientInput.value && recipients.length) {
+      removeRecipient(recipients[recipients.length - 1]);
+    }
+  });
+
+  recipientInput.addEventListener('paste', (e) => {
+    e.preventDefault();
+    const pastedText = e.clipboardData.getData('text');
+    parseAndAddEmails(pastedText);
+    recipientInput.value = '';
+  });
+
+  recipientInput.addEventListener('blur', () => {
+    const value = recipientInput.value.trim();
+    if (value) {
+      parseAndAddEmails(value);
+      recipientInput.value = '';
+    }
+  });
+
+  tagsContainer.addEventListener('click', () => {
+    recipientInput.focus();
+  });
+
+  // Template selection
+  templateSelect.addEventListener('change', async () => {
+    updateSendButton();
+
+    const templateId = templateSelect.value;
+    if (!templateId) {
+      templateVariables.style.display = 'none';
+      return;
+    }
+
+    try {
+      const variablesUrl = document.getElementById('templateVariablesUrl').dataset.url.replace(':id', templateId);
+      const response = await fetch(variablesUrl);
+      const data = await response.json();
+
+      if (data.variables && data.variables.length > 0) {
+        variablesGrid.innerHTML = data.variables.map(v => {
+          const label = v.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+          return `
+            <div class="variable-field">
+              <label for="var_${v}">${label}</label>
+              <input type="text" id="var_${v}" name="template_data[${v}]" placeholder="${label}...">
+            </div>
+          `;
+        }).join('');
+        templateVariables.style.display = 'block';
+      } else {
+        templateVariables.style.display = 'none';
+      }
+    } catch (err) {
+      console.error('Failed to load template variables:', err);
+      templateVariables.style.display = 'none';
+    }
+  });
+
+  // Send handler
+  sendButton.addEventListener('click', async () => {
+    const validRecipients = recipients.filter(isValidEmail);
+    if (validRecipients.length === 0) return;
+
+    const templateId = templateSelect.value;
+    if (!templateId) return;
+
+    // Collect template data
+    const templateData = {};
+    variablesGrid.querySelectorAll('input').forEach(input => {
+      const name = input.name.match(/template_data\[(\w+)\]/);
+      if (name) {
+        templateData[name[1]] = input.value;
+      }
+    });
+
+    // Show loading
+    sendOverlay.classList.add('active');
+    sendButton.querySelector('.btn-text').style.display = 'none';
+    sendButton.querySelector('.btn-loader').style.display = 'inline-flex';
+    sendButton.disabled = true;
+
+    try {
+      const createUrl = document.getElementById('sendCreateUrl').dataset.url;
+      const response = await fetch(createUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
+        },
+        body: JSON.stringify({
+          recipients: validRecipients.join(','),
+          template_id: templateId,
+          template_data: templateData
+        })
+      });
+
+      const result = await response.json();
+
+      // Hide loading, show result
+      sendOverlay.classList.remove('active');
+      sendForm.style.display = 'none';
+
+      if (result.failed > 0) {
+        resultSuccess.style.display = 'none';
+        resultPartial.style.display = 'flex';
+        resultMessage.innerHTML = `<strong>${result.sent}</strong> emails sent, <span class="failed">${result.failed}</span> failed`;
+      } else {
+        resultSuccess.style.display = 'flex';
+        resultPartial.style.display = 'none';
+        resultMessage.innerHTML = `<strong>${result.sent}</strong> emails sent successfully!`;
+      }
+
+      sendResult.style.display = 'flex';
+    } catch (err) {
+      console.error('Send failed:', err);
+      sendOverlay.classList.remove('active');
+      sendButton.querySelector('.btn-text').style.display = 'inline';
+      sendButton.querySelector('.btn-loader').style.display = 'none';
+      sendButton.disabled = false;
+      alert('Failed to send emails. Please try again.');
+    }
+  });
+
+  // Reset handler
+  resetButton.addEventListener('click', () => {
+    recipients = [];
+    renderTags();
+    updateCount();
+    templateSelect.value = '';
+    templateVariables.style.display = 'none';
+    variablesGrid.innerHTML = '';
+    sendResult.style.display = 'none';
+    sendForm.style.display = 'block';
+    sendButton.querySelector('.btn-text').style.display = 'inline';
+    sendButton.querySelector('.btn-loader').style.display = 'none';
+    updateSendButton();
+    recipientInput.focus();
+  });
+
+  // Initialize
+  updateCount();
+  updateSendButton();
+})();

data/app/assets/javascripts/sincerely/template_form.js

@@ -0,0 +1,44 @@
+(function() {
+  function updateHtmlPreview() {
+    const textarea = document.getElementById('html_content');
+    const iframe = document.getElementById('html_preview');
+    if (!textarea || !iframe) return;
+
+    iframe.srcdoc = textarea.value || '';
+  }
+
+  function updateTextPreview() {
+    const textarea = document.getElementById('text_content');
+    const preview = document.getElementById('text_preview');
+    if (!textarea || !preview) return;
+
+    preview.textContent = textarea.value || '';
+  }
+
+  document.querySelectorAll('.preview-container').forEach(container => {
+    const tabs = container.querySelectorAll('.preview-tab');
+    const panels = container.querySelectorAll('.preview-panel');
+    const previewType = container.dataset.preview;
+
+    tabs.forEach(tab => {
+      tab.addEventListener('click', () => {
+        const target = tab.dataset.target;
+
+        tabs.forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+
+        panels.forEach(p => {
+          p.classList.toggle('active', p.dataset.panel === target);
+        });
+
+        if (target === 'preview') {
+          if (previewType === 'html') {
+            updateHtmlPreview();
+          } else if (previewType === 'text') {
+            updateTextPreview();
+          }
+        }
+      });
+    });
+  });
+})();