sincerely 1.0.0 → 1.1.0

data/app/views/sincerely/dashboard/index.html.erb

@@ -27,153 +27,9 @@
     <h2 class="card-title">Notifications Over Time</h2>
   </div>
   <% if @notifications_timeline[:series].any? %>
-    <%
-      state_colors = {
-        'draft' => '#9ca3af',
-        'accepted' => '#B9E0B8',
-        'delivered' => '#10b981',
-        'opened' => '#78c6cc',
-        'clicked' => '#BDD9DB',
-        'bounced' => '#D4183D',
-        'rejected' => '#D4183D',
-        'complained' => '#D4183D',
-        'delayed' => '#f97316'
-      }
-
-      labels = @notifications_timeline[:labels]
-      series = @notifications_timeline[:series]
-
-      # Chart dimensions
-      chart_width = 800
-      chart_height = 220
-      padding_left = 45
-      padding_right = 20
-      padding_top = 20
-      padding_bottom = 30
-
-      plot_width = chart_width - padding_left - padding_right
-      plot_height = chart_height - padding_top - padding_bottom
-
-      max_value = series.values.flatten.max || 0
-      max_value = [max_value, 1].max  # Minimum of 1 to avoid division by zero
-
-      magnitude = 10 ** Math.log10([max_value, 1].max).floor
-      max_y = ((max_value.to_f / magnitude).ceil * magnitude).to_i
-      max_y = [max_y, 1].max
-
-      x_step = labels.length > 1 ? plot_width.to_f / (labels.length - 1) : plot_width
-    %>
-    <div class="line-chart-container" id="lineChart">
-      <div class="line-chart-wrapper">
-        <svg class="line-chart" viewBox="0 0 <%= chart_width %> <%= chart_height %>" preserveAspectRatio="xMidYMid meet">
-          <%# Grid lines %>
-          <% 5.times do |i| %>
-            <% y = padding_top + (plot_height * i / 4.0) %>
-            <line class="line-chart-grid" x1="<%= padding_left %>" y1="<%= y %>" x2="<%= chart_width - padding_right %>" y2="<%= y %>" />
-            <text class="line-chart-label line-chart-label-y" x="<%= padding_left - 8 %>" y="<%= y + 3 %>"><%= (max_y * (4 - i) / 4.0).round %></text>
-          <% end %>
-
-          <%# X-axis labels (show subset to avoid overlap) %>
-          <% label_step = [1, (labels.length / 8.0).ceil].max %>
-          <% labels.each_with_index do |label, i| %>
-            <% if i % label_step == 0 || i == labels.length - 1 %>
-              <% x = padding_left + (i * x_step) %>
-              <text class="line-chart-label line-chart-label-x" x="<%= x %>" y="<%= chart_height - 8 %>"><%= label %></text>
-            <% end %>
-          <% end %>
-
-          <%# Lines for each state %>
-          <% series.each do |state, values| %>
-            <% color = state_colors[state.to_s] || '#6b7280' %>
-            <%
-              points = values.each_with_index.map do |value, i|
-                x = padding_left + (i * x_step)
-                y = padding_top + plot_height - (value.to_f / max_y * plot_height)
-                "#{x.round(2)},#{y.round(2)}"
-              end.join(' ')
-
-              # Area fill points
-              area_points = "#{padding_left},#{padding_top + plot_height} #{points} #{padding_left + ((values.length - 1) * x_step)},#{padding_top + plot_height}"
-            %>
-            <polygon class="line-chart-area" data-state="<%= state %>" fill="<%= color %>" points="<%= area_points %>" />
-            <polyline class="line-chart-line" data-state="<%= state %>" stroke="<%= color %>" points="<%= points %>" />
-          <% end %>
-        </svg>
-      </div>
-
-      <%# Legend %>
-      <div class="line-chart-legend">
-        <% series.each do |state, values| %>
-          <% color = state_colors[state.to_s] || '#6b7280' %>
-          <div class="line-chart-legend-item" data-state="<%= state %>">
-            <span class="donut-legend-color" style="background: <%= color %>"></span>
-            <span class="donut-legend-text"><%= state.to_s.humanize %></span>
-          </div>
-        <% end %>
-      </div>
-    </div>
-
-    <script>
-      (function() {
-        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);
-        });
-      })();
-    </script>
+    <%= render 'sincerely/shared/line_chart',
+               labels: @notifications_timeline[:labels],
+               series: @notifications_timeline[:series] %>
   <% else %>
     <div class="line-chart-empty">No notifications in this period</div>
   <% end %>
@@ -185,111 +41,36 @@
       <h2 class="card-title">Notifications by Status</h2>
     </div>
     <% if @notifications_by_state.any? %>
-      <%
-        state_colors = {
-        'draft' => '#9ca3af',
-        'accepted' => '#B9E0B8',
-        'delivered' => '#10b981',
-        'opened' => '#78c6cc',
-        'clicked' => '#BDD9DB',
-        'bounced' => '#D4183D',
-        'rejected' => '#D4183D',
-        'complained' => '#D4183D',
-        'delayed' => '#f97316'
-      }
-        total = @notifications_by_state.values.sum
-        radius = 68
-        circumference = 2 * Math::PI * radius
-        offset = 0
-      %>
+      <% segments = donut_segment_data(@notifications_by_state) %>
       <div class="donut-chart-container" id="donutChart">
         <div class="donut-chart-wrapper">
           <svg class="donut-chart" viewBox="0 0 200 200">
-            <% @notifications_by_state.each do |state, count| %>
-              <%
-                percentage = count.to_f / total
-                dash_length = circumference * percentage
-                # Add small overlap to prevent visual gaps between segments
-                overlap = 0.5
-                visible_dash = dash_length + overlap
-                color = state_colors[state.to_s] || '#6b7280'
-              %>
+            <% segments.each do |seg| %>
               <circle
                 class="donut-segment"
-                data-state="<%= state %>"
-                cx="100" cy="100" r="<%= radius %>"
-                stroke="<%= color %>"
-                stroke-dasharray="<%= visible_dash %> <%= circumference - visible_dash %>"
-                stroke-dashoffset="<%= -offset %>"
+                data-state="<%= seg[:state] %>"
+                cx="100" cy="100" r="<%= Sincerely::ChartHelper::DONUT_RADIUS %>"
+                stroke="<%= seg[:color] %>"
+                stroke-dasharray="<%= seg[:visible_dash] %> <%= seg[:gap] %>"
+                stroke-dashoffset="<%= seg[:offset] %>"
               />
-              <% offset += dash_length %>
             <% end %>
           </svg>
           <div class="donut-center">
-            <div class="donut-center-value"><%= number_with_delimiter(total) %></div>
+            <div class="donut-center-value"><%= number_with_delimiter(@notifications_by_state.values.sum) %></div>
             <div class="donut-center-label">Total</div>
           </div>
         </div>
         <div class="donut-legend">
-          <% @notifications_by_state.each do |state, count| %>
-            <% color = state_colors[state.to_s] || '#6b7280' %>
-            <div class="donut-legend-item" data-state="<%= state %>">
-              <span class="donut-legend-color" style="background: <%= color %>"></span>
-              <span class="donut-legend-text"><%= state.to_s.humanize %></span>
-              <span class="donut-legend-count"><%= number_with_delimiter(count) %></span>
+          <% segments.each do |seg| %>
+            <div class="donut-legend-item" data-state="<%= seg[:state] %>">
+              <span class="donut-legend-color" style="background: <%= seg[:color] %>"></span>
+              <span class="donut-legend-text"><%= seg[:state].to_s.humanize %></span>
+              <span class="donut-legend-count"><%= number_with_delimiter(seg[:count]) %></span>
             </div>
           <% end %>
         </div>
       </div>
-      <script>
-        (function() {
-          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);
-          });
-        })();
-      </script>
     <% else %>
       <div class="donut-empty">No notifications in this period</div>
     <% end %>
@@ -298,7 +79,7 @@
   <div class="card">
     <div class="card-header">
       <h2 class="card-title">Recent Notifications</h2>
-      <a href="<%= sincerely.notifications_path %>" class="btn btn-secondary btn-sm">View All</a>
+      <a href="<%= notifications_path %>" class="btn btn-secondary btn-sm">View All</a>
     </div>
     <div class="table-wrapper">
       <table>
@@ -308,9 +89,9 @@
         <tbody>
           <% if @recent_notifications.any? %>
             <% @recent_notifications.each do |notification| %>
-              <tr class="clickable-row" onclick="window.location='<%= sincerely.notification_path(notification) %>'">
+              <tr class="clickable-row" role="link" tabindex="0" data-href="<%= notification_path(notification) %>">
                 <td><%= truncate(notification.recipient, length: 30) %></td>
-                <td><span class="badge badge-<%= notification.delivery_state %>"><%= notification.delivery_state.humanize %></span></td>
+                <td><span class="badge <%= state_badge_class(notification.delivery_state) %>"><%= notification.delivery_state.humanize %></span></td>
                 <td><%= notification.created_at.strftime('%b %d, %H:%M') %></td>
               </tr>
             <% end %>
@@ -327,7 +108,7 @@
   <div class="card">
     <div class="card-header">
       <h2 class="card-title">Recent Delivery Events</h2>
-      <a href="<%= sincerely.delivery_events_path %>" class="btn btn-secondary btn-sm">View All</a>
+      <a href="<%= delivery_events_path %>" class="btn btn-secondary btn-sm">View All</a>
     </div>
     <div class="table-wrapper">
       <table>
@@ -336,14 +117,7 @@
         </thead>
         <tbody>
           <% if @recent_delivery_events.any? %>
-            <% @recent_delivery_events.each do |event| %>
-              <% notification = notification_model.find_by(message_id: event.message_id) %>
-              <tr<%= " class=\"clickable-row\" onclick=\"window.location='#{sincerely.notification_path(notification)}'\"".html_safe if notification %>>
-                <td><span class="badge badge-<%= event.event_type %>"><%= event.event_type %></span></td>
-                <td><%= truncate(event.recipient, length: 25) %></td>
-                <td><%= (event.timestamp || event.created_at).strftime('%b %d, %H:%M') %></td>
-              </tr>
-            <% end %>
+            <%= render partial: 'sincerely/shared/event', collection: @recent_delivery_events, locals: { notifications_by_message_id: @notifications_by_message_id, detailed: false, recipient_length: 25 } %>
           <% else %>
             <tr><td colspan="3" class="empty-state">No delivery events</td></tr>
           <% end %>
@@ -355,7 +129,7 @@
   <div class="card">
     <div class="card-header">
       <h2 class="card-title">Recent Engagement Events</h2>
-      <a href="<%= sincerely.engagement_events_path %>" class="btn btn-secondary btn-sm">View All</a>
+      <a href="<%= engagement_events_path %>" class="btn btn-secondary btn-sm">View All</a>
     </div>
     <div class="table-wrapper">
       <table>
@@ -364,14 +138,7 @@
         </thead>
         <tbody>
           <% if @recent_engagement_events.any? %>
-            <% @recent_engagement_events.each do |event| %>
-              <% notification = notification_model.find_by(message_id: event.message_id) %>
-              <tr<%= " class=\"clickable-row\" onclick=\"window.location='#{sincerely.notification_path(notification)}'\"".html_safe if notification %>>
-                <td><span class="badge badge-<%= event.event_type %>"><%= event.event_type %></span></td>
-                <td><%= truncate(event.recipient, length: 25) %></td>
-                <td><%= (event.timestamp || event.created_at).strftime('%b %d, %H:%M') %></td>
-              </tr>
-            <% end %>
+            <%= render partial: 'sincerely/shared/event', collection: @recent_engagement_events, locals: { notifications_by_message_id: @notifications_by_message_id, detailed: false, recipient_length: 25 } %>
           <% else %>
             <tr><td colspan="3" class="empty-state">No engagement events</td></tr>
           <% end %>
@@ -380,3 +147,5 @@
     </div>
   </div>
 </div>
+
+<%= javascript_include_tag 'sincerely/charts' %>

data/app/views/sincerely/delivery_events/index.html.erb

@@ -7,45 +7,31 @@
   <div class="card-header">
     <h2 class="card-title">Filters</h2>
   </div>
-  <form method="get" action="<%= sincerely.delivery_events_path %>" class="filters-form">
+  <form method="get" action="<%= delivery_events_path %>" class="filters-form">
     <div class="filters-grid">
       <div class="filter-group">
         <label for="event_type">Status</label>
         <select name="event_type" id="event_type">
           <option value="">All statuses</option>
-          <% @event_types.each do |type| %>
-            <option value="<%= type %>" <%= 'selected' if params[:event_type] == type %>><%= type.to_s.humanize %></option>
-          <% end %>
+          <%= render partial: 'sincerely/shared/status_option', collection: @event_types, as: :status_value, locals: { param_name: :event_type } %>
         </select>
       </div>
       <div class="filter-group">
         <label for="template_id">Template</label>
         <select name="template_id" id="template_id">
           <option value="">All templates</option>
-          <% @templates.each do |template| %>
-            <option value="<%= template.id %>" <%= 'selected' if params[:template_id] == template.id.to_s %>>
-              <%= template.name %>
-            </option>
-          <% end %>
+          <%= render partial: 'sincerely/shared/template_option', collection: @templates, as: :template %>
         </select>
       </div>
       <div class="filter-group">
         <label for="recipient">Recipient</label>
         <input type="text" name="recipient" id="recipient" value="<%= params[:recipient] %>" placeholder="Search by recipient...">
       </div>
-      <div class="filter-group">
-        <label for="notification_type">Type</label>
-        <select name="notification_type" id="notification_type">
-          <option value="">All types</option>
-          <option value="email" <%= 'selected' if params[:notification_type] == 'email' %>>Email</option>
-          <option value="sms" <%= 'selected' if params[:notification_type] == 'sms' %>>SMS</option>
-          <option value="push" <%= 'selected' if params[:notification_type] == 'push' %>>Push</option>
-        </select>
-      </div>
+      <%= render 'sincerely/shared/notification_type_filter' %>
     </div>
     <div class="filter-actions">
       <button type="submit" class="btn btn-primary">Apply Filters</button>
-      <a href="<%= sincerely.delivery_events_path %>" class="btn btn-secondary">Clear</a>
+      <a href="<%= delivery_events_path %>" class="btn btn-secondary">Clear</a>
     </div>
   </form>
 </div>
@@ -66,25 +52,7 @@
         </tr>
       </thead>
       <tbody>
-        <% @events.each do |event| %>
-          <% notification = notification_model.find_by(message_id: event.message_id) %>
-          <tr<%= " class=\"clickable-row\" onclick=\"window.location='#{sincerely.notification_path(notification)}'\"".html_safe if notification %>>
-            <td><span class="badge badge-<%= event.event_type %>"><%= event.event_type %></span></td>
-            <td><%= truncate(event.recipient, length: 30) %></td>
-            <td><code><%= truncate(event.message_id, length: 20) %></code></td>
-            <td>
-              <% if event.options.present? %>
-                <details onclick="event.stopPropagation()">
-                  <summary class="btn btn-secondary btn-sm">View</summary>
-                  <pre class="event-details"><%= JSON.pretty_generate(event.options) rescue event.options %></pre>
-                </details>
-              <% else %>
-                -
-              <% end %>
-            </td>
-            <td><%= (event.timestamp || event.created_at).strftime('%b %d, %Y %H:%M:%S') %></td>
-          </tr>
-        <% end %>
+        <%= render partial: 'sincerely/shared/event', collection: @events, locals: { notifications_by_message_id: @notifications_by_message_id, detailed: true, recipient_length: 30 } %>
         <% if @events.empty? %>
           <tr>
             <td colspan="5" class="empty-state">No delivery events found</td>

data/app/views/sincerely/engagement_events/index.html.erb

@@ -7,45 +7,31 @@
   <div class="card-header">
     <h2 class="card-title">Filters</h2>
   </div>
-  <form method="get" action="<%= sincerely.engagement_events_path %>" class="filters-form">
+  <form method="get" action="<%= engagement_events_path %>" class="filters-form">
     <div class="filters-grid">
       <div class="filter-group">
         <label for="event_type">Status</label>
         <select name="event_type" id="event_type">
           <option value="">All statuses</option>
-          <% @event_types.each do |type| %>
-            <option value="<%= type %>" <%= 'selected' if params[:event_type] == type %>><%= type.to_s.humanize %></option>
-          <% end %>
+          <%= render partial: 'sincerely/shared/status_option', collection: @event_types, as: :status_value, locals: { param_name: :event_type } %>
         </select>
       </div>
       <div class="filter-group">
         <label for="template_id">Template</label>
         <select name="template_id" id="template_id">
           <option value="">All templates</option>
-          <% @templates.each do |template| %>
-            <option value="<%= template.id %>" <%= 'selected' if params[:template_id] == template.id.to_s %>>
-              <%= template.name %>
-            </option>
-          <% end %>
+          <%= render partial: 'sincerely/shared/template_option', collection: @templates, as: :template %>
         </select>
       </div>
       <div class="filter-group">
         <label for="recipient">Recipient</label>
         <input type="text" name="recipient" id="recipient" value="<%= params[:recipient] %>" placeholder="Search by recipient...">
       </div>
-      <div class="filter-group">
-        <label for="notification_type">Type</label>
-        <select name="notification_type" id="notification_type">
-          <option value="">All types</option>
-          <option value="email" <%= 'selected' if params[:notification_type] == 'email' %>>Email</option>
-          <option value="sms" <%= 'selected' if params[:notification_type] == 'sms' %>>SMS</option>
-          <option value="push" <%= 'selected' if params[:notification_type] == 'push' %>>Push</option>
-        </select>
-      </div>
+      <%= render 'sincerely/shared/notification_type_filter' %>
     </div>
     <div class="filter-actions">
       <button type="submit" class="btn btn-primary">Apply Filters</button>
-      <a href="<%= sincerely.engagement_events_path %>" class="btn btn-secondary">Clear</a>
+      <a href="<%= engagement_events_path %>" class="btn btn-secondary">Clear</a>
     </div>
   </form>
 </div>
@@ -66,25 +52,7 @@
         </tr>
       </thead>
       <tbody>
-        <% @events.each do |event| %>
-          <% notification = notification_model.find_by(message_id: event.message_id) %>
-          <tr<%= " class=\"clickable-row\" onclick=\"window.location='#{sincerely.notification_path(notification)}'\"".html_safe if notification %>>
-            <td><span class="badge badge-<%= event.event_type %>"><%= event.event_type %></span></td>
-            <td><%= truncate(event.recipient, length: 30) %></td>
-            <td><code><%= truncate(event.message_id, length: 20) %></code></td>
-            <td>
-              <% if event.options.present? %>
-                <details onclick="event.stopPropagation()">
-                  <summary class="btn btn-secondary btn-sm">View</summary>
-                  <pre class="event-details"><%= JSON.pretty_generate(event.options) rescue event.options %></pre>
-                </details>
-              <% else %>
-                -
-              <% end %>
-            </td>
-            <td><%= (event.timestamp || event.created_at).strftime('%b %d, %Y %H:%M:%S') %></td>
-          </tr>
-        <% end %>
+        <%= render partial: 'sincerely/shared/event', collection: @events, locals: { notifications_by_message_id: @notifications_by_message_id, detailed: true, recipient_length: 30 } %>
         <% if @events.empty? %>
           <tr>
             <td colspan="5" class="empty-state">No engagement events found</td>

data/app/views/sincerely/notifications/index.html.erb

@@ -7,47 +7,31 @@
   <div class="card-header">
     <h2 class="card-title">Filter Notifications</h2>
   </div>
-  <form method="get" action="<%= sincerely.notifications_path %>" class="filters-form">
+  <form method="get" action="<%= notifications_path %>" class="filters-form">
     <div class="filters-grid">
       <div class="filter-group">
         <label for="status">Status</label>
         <select name="status" id="status">
           <option value="">All statuses</option>
-          <% @states.each do |state| %>
-            <option value="<%= state %>" <%= 'selected' if params[:status] == state %>>
-              <%= state.to_s.humanize %>
-            </option>
-          <% end %>
+          <%= render partial: 'sincerely/shared/status_option', collection: @states, as: :status_value, locals: { param_name: :status } %>
         </select>
       </div>
       <div class="filter-group">
         <label for="template_id">Template</label>
         <select name="template_id" id="template_id">
           <option value="">All templates</option>
-          <% @templates.each do |template| %>
-            <option value="<%= template.id %>" <%= 'selected' if params[:template_id] == template.id.to_s %>>
-              <%= template.name %>
-            </option>
-          <% end %>
+          <%= render partial: 'sincerely/shared/template_option', collection: @templates, as: :template %>
         </select>
       </div>
       <div class="filter-group">
         <label for="recipient">Recipient</label>
         <input type="text" name="recipient" id="recipient" value="<%= params[:recipient] %>" placeholder="Search by recipient...">
       </div>
-      <div class="filter-group">
-        <label for="notification_type">Type</label>
-        <select name="notification_type" id="notification_type">
-          <option value="">All types</option>
-          <option value="email" <%= 'selected' if params[:notification_type] == 'email' %>>Email</option>
-          <option value="sms" <%= 'selected' if params[:notification_type] == 'sms' %>>SMS</option>
-          <option value="push" <%= 'selected' if params[:notification_type] == 'push' %>>Push</option>
-        </select>
-      </div>
+      <%= render 'sincerely/shared/notification_type_filter' %>
     </div>
     <div class="filter-actions">
       <button type="submit" class="btn btn-primary">Apply Filters</button>
-      <a href="<%= sincerely.notifications_path %>" class="btn btn-secondary">Clear</a>
+      <a href="<%= notifications_path %>" class="btn btn-secondary">Clear</a>
     </div>
   </form>
 </div>
@@ -70,12 +54,12 @@
       </thead>
       <tbody>
         <% @notifications.each do |notification| %>
-          <tr class="clickable-row" onclick="window.location='<%= sincerely.notification_path(notification) %>'">
+          <tr class="clickable-row" role="link" tabindex="0" data-href="<%= notification_path(notification) %>">
             <td><%= notification.id %></td>
             <td><%= truncate(notification.recipient, length: 35) %></td>
             <td><%= notification.template&.name || 'N/A' %></td>
             <td><span class="badge"><%= notification.notification_type %></span></td>
-            <td><span class="badge badge-<%= notification.delivery_state %>"><%= notification.delivery_state.humanize %></span></td>
+            <td><span class="badge <%= state_badge_class(notification.delivery_state) %>"><%= notification.delivery_state.humanize %></span></td>
             <td><%= notification.sent_at&.strftime('%b %d, %Y %H:%M') || '-' %></td>
           </tr>
         <% end %>

data/app/views/sincerely/notifications/show.html.erb

@@ -1,7 +1,7 @@
 <div class="page-header page-header--visible">
   <div class="page-header-top">
     <button onclick="history.back()" class="btn-back" title="Back">
-      <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>
+      <%= inline_svg 'sincerely/chevron_left' %>
     </button>
     <h1 class="page-title">Notification #<%= @notification.id %></h1>
   </div>
@@ -32,7 +32,7 @@
         <span class="detail-label">Template</span>
         <span class="detail-value">
           <% if @notification.template %>
-            <a href="<%= sincerely.template_path(@notification.template) %>"><%= @notification.template.name %></a>
+            <a href="<%= template_path(@notification.template) %>"><%= @notification.template.name %></a>
           <% else %>
             N/A
           <% end %>
@@ -79,10 +79,10 @@
     <div class="timeline">
       <% @timeline.each do |event| %>
         <div class="timeline-item">
-          <div class="timeline-marker badge-<%= event[:type] %>"></div>
+          <div class="timeline-marker <%= event_type_badge_class(event[:type]) %>"></div>
           <div class="timeline-content">
             <div class="timeline-header">
-              <span class="badge badge-<%= event[:type] %>"><%= event[:type] %></span>
+              <span class="badge <%= event_type_badge_class(event[:type]) %>"><%= event[:type] %></span>
               <span class="timeline-time"><%= event[:timestamp].strftime('%b %d, %Y %H:%M:%S') %></span>
             </div>
             <% if event[:details].present? %>