source_monitor 0.11.1 → 0.12.0

data/app/views/source_monitor/logs/index.html.erb

@@ -8,6 +8,7 @@
 
   <% base_params = @filter_params.except(:page) %>
 
+  <%= turbo_frame_tag "source_monitor_logs" do %>
   <div class="flex flex-wrap items-center gap-3">
     <div class="flex overflow-hidden rounded-md border border-slate-200">
       <% status_options = [
@@ -24,7 +25,8 @@
                       "px-4 py-2 text-sm font-medium border-slate-200",
                       active ? "bg-slate-800 text-white" : "bg-white text-slate-600 hover:bg-slate-50",
                       value.present? ? "border-l" : ""
-                    ].join(" ") %>
+                    ].join(" "),
+                    data: { turbo_frame: "source_monitor_logs" } %>
       <% end %>
     </div>
 
@@ -44,12 +46,13 @@
                       "px-4 py-2 text-sm font-medium border-slate-200",
                       active ? "bg-slate-800 text-white" : "bg-white text-slate-600 hover:bg-slate-50",
                       value.present? ? "border-l" : ""
-                    ].join(" ") %>
+                    ].join(" "),
+                    data: { turbo_frame: "source_monitor_logs" } %>
       <% end %>
     </div>
   </div>
 
-  <%= form_with url: source_monitor.logs_path, method: :get, local: true, html: { class: "rounded-lg border border-slate-200 bg-white p-4 shadow-sm" } do |form| %>
+  <%= form_with url: source_monitor.logs_path, method: :get, html: { class: "rounded-lg border border-slate-200 bg-white p-4 shadow-sm", data: { turbo_frame: "source_monitor_logs" } } do |form| %>
     <%= form.hidden_field :status, value: @filter_set.status %>
     <%= form.hidden_field :log_type, value: @filter_set.log_type %>
 
@@ -62,12 +65,10 @@
                             class: "mt-1 rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200" %>
       </div>
 
-      <div class="flex flex-col">
-        <%= form.label :timeframe, "Timeframe", class: "text-xs font-semibold uppercase tracking-wide text-slate-500" %>
-        <%= form.select :timeframe,
-                        options_for_select([["All time", nil], ["Last 24 hours", "24h"], ["Last 7 days", "7d"], ["Last 30 days", "30d"]], @filter_set.timeframe),
-                        {}, class: "mt-1 rounded-md border border-slate-300 px-3 py-2 text-sm shadow-sm focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200" %>
-      </div>
+      <%= render SourceMonitor::FilterDropdownComponent.new(
+        label: "Timeframe", param_name: :timeframe,
+        options: [["All time", ""], ["Last 24 hours", "24h"], ["Last 7 days", "7d"], ["Last 30 days", "30d"]],
+        selected_value: @filter_set.timeframe, form: form) %>
 
       <div class="flex flex-col">
         <%= form.label :started_after, "Started after", class: "text-xs font-semibold uppercase tracking-wide text-slate-500" %>
@@ -100,7 +101,7 @@
 
     <div class="mt-4 flex flex-wrap items-center gap-3">
       <%= form.submit "Search", class: "inline-flex items-center rounded-md bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700" %>
-      <%= link_to "Clear", source_monitor.logs_path, class: "text-sm font-medium text-blue-600 hover:text-blue-500" %>
+      <%= link_to "Clear", source_monitor.logs_path, class: "text-sm font-medium text-blue-600 hover:text-blue-500", data: { turbo_frame: "source_monitor_logs" } %>
     </div>
   <% end %>
 
@@ -155,8 +156,9 @@
               <span class="font-medium"><%= row.http_summary %></span>
             </td>
             <td class="px-6 py-4 text-sm">
-              <% status_classes = row.success? ? "bg-green-100 text-green-700" : "bg-rose-100 text-rose-700" %>
-              <span class="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold <%= status_classes %>"><%= row.status_label %></span>
+              <%= render SourceMonitor::StatusBadgeComponent.new(
+                    status: row.success? ? "success" : "failed",
+                    label: row.status_label) %>
               <% if row.error_message.present? %>
                 <p class="mt-2 text-xs text-slate-500"><%= row.error_message %></p>
               <% end %>
@@ -185,33 +187,10 @@
     </table>
   </div>
 
-  <div class="flex flex-wrap items-center justify-between gap-3">
-    <div class="text-xs text-slate-500" data-page-indicator="<%= @query_result.page %>">
-      Page <%= @query_result.page %>
-    </div>
-    <div class="flex gap-2">
-      <% prev_page = @query_result.has_previous_page ? @query_result.page - 1 : @query_result.page %>
-      <% next_page = @query_result.has_next_page ? @query_result.page + 1 : @query_result.page %>
-      <% prev_params = @filter_params.merge(page: prev_page).compact %>
-      <% next_params = @filter_params.merge(page: next_page).compact %>
-      <%= link_to "Previous",
-                  source_monitor.logs_path(prev_params),
-                  class: [
-                    "inline-flex items-center rounded-md border px-3 py-1 text-sm font-medium",
-                    @query_result.has_previous_page ? "border-slate-300 text-slate-700 hover:bg-slate-50" : "border-slate-200 text-slate-300 cursor-not-allowed"
-                  ].join(" "),
-                  aria: { disabled: !@query_result.has_previous_page } %>
-      <%= link_to "Next",
-                  source_monitor.logs_path(next_params),
-                  class: [
-                    "inline-flex items-center rounded-md border px-3 py-1 text-sm font-medium",
-                    @query_result.has_next_page ? "border-slate-300 text-slate-700 hover:bg-slate-50" : "border-slate-200 text-slate-300 cursor-not-allowed"
-                  ].join(" "),
-                  aria: { disabled: !@query_result.has_next_page } %>
-    </div>
-  </div>
-
-  <p class="text-xs text-slate-500">
-    Showing up to <%= @query_result.per_page %> logs per page.
-  </p>
+  <%= render "source_monitor/shared/pagination",
+        paginator_result: @query_result,
+        base_path: source_monitor.logs_path,
+        extra_params: @filter_params.except(:page),
+        turbo_frame: "source_monitor_logs" %>
+  <% end %>
 </div>

data/app/views/source_monitor/shared/_form_errors.html.erb

@@ -0,0 +1,14 @@
+<%# Shared form validation error display
+  Locals:
+    record - ActiveRecord model instance with potential errors
+%>
+<% if record.errors.any? %>
+  <div class="mt-4 rounded border border-red-300 bg-red-50 p-4">
+    <h2 class="font-medium text-red-700">Please fix the following:</h2>
+    <ul class="mt-2 list-disc space-y-1 pl-5 text-red-700">
+      <% record.errors.full_messages.each do |message| %>
+        <li><%= message %></li>
+      <% end %>
+    </ul>
+  </div>
+<% end %>

data/app/views/source_monitor/source_scrape_tests/_result.html.erb

@@ -28,35 +28,7 @@
       </div>
 
       <div class="px-6 py-5">
-        <div class="grid grid-cols-2 gap-6">
-          <div>
-            <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Feed Word Count</dt>
-            <dd class="mt-1 text-2xl font-semibold text-slate-900"><%= test_result[:feed_word_count] || "N/A" %></dd>
-          </div>
-          <div>
-            <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Scraped Word Count</dt>
-            <dd class="mt-1 text-2xl font-semibold text-slate-900"><%= test_result[:scraped_word_count] || "N/A" %></dd>
-          </div>
-        </div>
-
-        <% if test_result[:improvement] && test_result[:improvement] != 0 %>
-          <div class="mt-4">
-            <% color = test_result[:improvement] > 0 ? "text-green-600" : "text-amber-600" %>
-            <span class="text-sm font-medium <%= color %>">
-              <%= test_result[:improvement] > 0 ? "+" : "" %><%= test_result[:improvement] %>% word count change
-            </span>
-          </div>
-        <% end %>
-
-        <% if test_result[:scrape_result]&.success? %>
-          <div class="mt-4 rounded-md bg-green-50 px-3 py-2 text-sm text-green-700">
-            Scrape successful. Enabling scraping for this source would capture more content.
-          </div>
-        <% else %>
-          <div class="mt-4 rounded-md bg-amber-50 px-3 py-2 text-sm text-amber-700">
-            Scrape had issues: <%= test_result[:scrape_result]&.message || "Unknown error" %>
-          </div>
-        <% end %>
+        <%= render "source_monitor/source_scrape_tests/result_content", test_result: test_result %>
       </div>
 
       <div class="flex items-center justify-end gap-3 border-t border-slate-200 px-6 py-4">

data/app/views/source_monitor/source_scrape_tests/_result_content.html.erb

@@ -0,0 +1,33 @@
+<%# Shared scrape test result content used by both show.html.erb and _result.html.erb
+  Locals:
+    test_result - Hash with :feed_word_count, :scraped_word_count, :improvement, :scrape_result
+%>
+<div class="grid grid-cols-2 gap-6">
+  <div>
+    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Feed Word Count</dt>
+    <dd class="mt-1 text-2xl font-semibold text-slate-900"><%= test_result[:feed_word_count] || "N/A" %></dd>
+  </div>
+  <div>
+    <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Scraped Word Count</dt>
+    <dd class="mt-1 text-2xl font-semibold text-slate-900"><%= test_result[:scraped_word_count] || "N/A" %></dd>
+  </div>
+</div>
+
+<% if test_result[:improvement] && test_result[:improvement] != 0 %>
+  <div class="mt-4">
+    <% color = test_result[:improvement] > 0 ? "text-green-600" : "text-amber-600" %>
+    <span class="text-sm font-medium <%= color %>">
+      <%= test_result[:improvement] > 0 ? "+" : "" %><%= test_result[:improvement] %>% word count change
+    </span>
+  </div>
+<% end %>
+
+<% if test_result[:scrape_result]&.success? %>
+  <div class="mt-4 rounded-md bg-green-50 px-3 py-2 text-sm text-green-700">
+    Scrape successful. Enabling scraping for this source would capture more content.
+  </div>
+<% else %>
+  <div class="mt-4 rounded-md bg-amber-50 px-3 py-2 text-sm text-amber-700">
+    Scrape had issues: <%= test_result[:scrape_result]&.message || "Unknown error" %>
+  </div>
+<% end %>

data/app/views/source_monitor/source_scrape_tests/show.html.erb

@@ -13,35 +13,7 @@
         </p>
       </div>
       <div class="px-6 py-5">
-        <div class="grid grid-cols-2 gap-6">
-          <div>
-            <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Feed Word Count</dt>
-            <dd class="mt-1 text-2xl font-semibold text-slate-900"><%= @test_result[:feed_word_count] || "N/A" %></dd>
-          </div>
-          <div>
-            <dt class="text-xs font-medium uppercase tracking-wide text-slate-500">Scraped Word Count</dt>
-            <dd class="mt-1 text-2xl font-semibold text-slate-900"><%= @test_result[:scraped_word_count] || "N/A" %></dd>
-          </div>
-        </div>
-
-        <% if @test_result[:improvement] && @test_result[:improvement] != 0 %>
-          <div class="mt-4">
-            <% color = @test_result[:improvement] > 0 ? "text-green-600" : "text-amber-600" %>
-            <span class="text-sm font-medium <%= color %>">
-              <%= @test_result[:improvement] > 0 ? "+" : "" %><%= @test_result[:improvement] %>% word count change
-            </span>
-          </div>
-        <% end %>
-
-        <% if @test_result[:scrape_result]&.success? %>
-          <div class="mt-4 rounded-md bg-green-50 px-3 py-2 text-sm text-green-700">
-            Scrape successful. Enabling scraping for this source would capture more content.
-          </div>
-        <% else %>
-          <div class="mt-4 rounded-md bg-amber-50 px-3 py-2 text-sm text-amber-700">
-            Scrape had issues: <%= @test_result[:scrape_result]&.message || "Unknown error" %>
-          </div>
-        <% end %>
+        <%= render "source_monitor/source_scrape_tests/result_content", test_result: @test_result %>
       </div>
 
       <% unless @source.scraping_enabled? %>

data/app/views/source_monitor/sources/_bulk_scrape_enable_modal.html.erb

@@ -1,8 +1,8 @@
 <div data-controller="modal" class="relative">
-  <div data-modal-target="panel" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50" data-action="click->modal#backdrop">
+  <div data-modal-target="panel" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50" data-action="click->modal#backdrop" role="dialog" aria-modal="true" aria-labelledby="bulk-scrape-enable-modal-heading">
     <div class="w-full max-w-md rounded-lg bg-white shadow-xl" data-action="click->modal#stop">
       <div class="border-b border-slate-200 px-6 py-4">
-        <h3 class="text-lg font-semibold text-slate-900">Enable Scraping</h3>
+        <h3 id="bulk-scrape-enable-modal-heading" class="text-lg font-semibold text-slate-900">Enable Scraping</h3>
       </div>
       <div class="px-6 py-4">
         <p class="text-sm text-slate-700">

data/app/views/source_monitor/sources/_bulk_scrape_modal.html.erb

@@ -1,10 +1,9 @@
 <% selected = (local_assigns[:selected] || :current).to_sym %>
 <% preview_limit = local_assigns[:preview_limit] || SourceMonitor::Scraping::BulkSourceScraper::DEFAULT_PREVIEW_LIMIT %>
-<% preview_items_relation = SourceMonitor::Item.where(source_id: source.id)
+<% preview_items = local_assigns[:preview_items] || @items&.to_a || SourceMonitor::Item.where(source_id: source.id)
   .order(Arel.sql("published_at DESC NULLS LAST, created_at DESC"))
-  .limit(preview_limit) %>
-<% preview_items = preview_items_relation.to_a %>
-<% counts = SourceMonitor::Scraping::BulkSourceScraper.selection_counts(
+  .limit(preview_limit).to_a %>
+<% counts = local_assigns[:counts] || SourceMonitor::Scraping::BulkSourceScraper.selection_counts(
      source: source,
      preview_items: preview_items,
      preview_limit: preview_limit
@@ -24,12 +23,15 @@
     data-modal-target="panel"
     class="hidden fixed inset-0 z-50 items-center justify-center"
     data-testid="bulk-scrape-modal"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="bulk-scrape-modal-heading"
   >
     <div class="absolute inset-0 bg-slate-900/40" data-action="click->modal#close"></div>
     <div class="relative z-10 w-full max-w-xl overflow-hidden rounded-lg bg-white shadow-xl">
       <div class="flex items-start justify-between border-b border-slate-200 px-6 py-4">
         <div>
-          <h2 class="text-lg font-semibold text-slate-900">Bulk Scrape Items</h2>
+          <h2 id="bulk-scrape-modal-heading" class="text-lg font-semibold text-slate-900">Bulk Scrape Items</h2>
           <p class="mt-1 text-xs text-slate-500">Queue scraping jobs for this source without leaving the page.</p>
         </div>
         <button

data/app/views/source_monitor/sources/_details.html.erb

@@ -1,9 +1,9 @@
 <% source = local_assigns.fetch(:source) %>
-<% recent_fetch_logs = source.fetch_logs.order(started_at: :desc).limit(5) %>
-<% recent_scrape_logs = source.scrape_logs.order(started_at: :desc).limit(5) %>
+<% presenter = SourceMonitor::SourceDetailsPresenter.new(source) %>
+<% recent_fetch_logs = @recent_fetch_logs || source.fetch_logs.order(started_at: :desc).limit(5) %>
+<% recent_scrape_logs = @recent_scrape_logs || source.scrape_logs.order(started_at: :desc).limit(5) %>
 <% preview_limit = SourceMonitor::Scraping::BulkSourceScraper::DEFAULT_PREVIEW_LIMIT %>
-<% items = source.items.recent.includes(:item_content).limit(preview_limit) %>
-<% fetch_status = async_status_badge(source.fetch_status) %>
+<% items = @items || source.items.recent.includes(:item_content).limit(preview_limit) %>
 <% health_status_override = local_assigns[:health_status_override] %>
 
 <div class="space-y-8">
@@ -28,15 +28,12 @@
                       action: "turbo:submit-start->async-submit#start turbo:submit-end->async-submit#finish"
                     }
                   } do %>
-              <svg class="h-4 w-4 text-slate-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
-              </svg>
+              <%= render SourceMonitor::IconComponent.new(:refresh, size: :sm, css_class: "text-slate-500") %>
             <% end %>
           <% end %>
         </div>
-        <span data-testid="fetch-status-badge" class="mt-2 inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold <%= fetch_status[:classes] %>">
-          <%= loading_spinner_svg if fetch_status[:show_spinner] %>
-          <%= fetch_status[:label] %>
+        <span class="mt-2" data-testid="fetch-status-badge">
+          <%= render SourceMonitor::StatusBadgeComponent.new(status: source.fetch_status) %>
         </span>
       </div>
       <div>
@@ -174,34 +171,11 @@
           <h2 class="text-lg font-medium">Source Details</h2>
         </div>
         <dl class="divide-y divide-slate-100">
-          <% interval_hours = number_with_precision(source.fetch_interval_minutes / 60.0, precision: 2)
-             circuit_state =
-               if source.fetch_circuit_open?
-                 until_time = source.fetch_circuit_until&.strftime("%b %d, %Y %H:%M %Z") || "unknown"
-                 "Open until #{until_time}"
-               else
-                 "Closed"
-               end
-
-             details = {
-               "Website" => (source.website_url.present? ? external_link_to(source.website_url, source.website_url, class: "text-slate-900 hover:text-blue-500") : "\u2014"),
-               "Fetch interval" => "#{source.fetch_interval_minutes} minutes (~#{interval_hours} hours)",
-               "Adaptive interval" => source.adaptive_fetching_enabled? ? "Auto" : "Fixed",
-               "Scraper" => source.scraper_adapter,
-               "Feed content" => source.feed_content_readability_enabled? ? "Readability" : "Raw",
-               "Active" => source.active? ? "Yes" : "No",
-               "Scraping" => source.scraping_enabled? ? "Enabled" : "Disabled",
-               "Auto scrape" => source.auto_scrape? ? "Enabled" : "Disabled",
-               "Requires JS" => source.requires_javascript? ? "Yes" : "No",
-               "Failure count" => source.failure_count,
-               "Retry attempt" => source.fetch_retry_attempt,
-               "Circuit state" => circuit_state,
-               "Last error" => source.last_error.presence || "None",
-               "Items count" => source.items_count,
-               "Retention days" => source.items_retention_days || "—",
-               "Max items" => source.max_items || "—"
-             } %>
-          <% details.each do |label, value| %>
+          <div class="flex items-center justify-between px-5 py-3">
+            <dt class="text-sm font-medium text-slate-600">Website</dt>
+            <dd class="text-sm text-slate-900"><%= source.website_url.present? ? external_link_to(source.website_url, source.website_url, class: "text-slate-900 hover:text-blue-500") : "\u2014" %></dd>
+          </div>
+          <% presenter.details_hash.each do |label, value| %>
             <div class="flex items-center justify-between px-5 py-3">
               <dt class="text-sm font-medium text-slate-600"><%= label %></dt>
               <dd class="text-sm text-slate-900"><%= value %></dd>
@@ -246,9 +220,10 @@
               <div class="px-5 py-3 text-sm text-slate-700">
                 <div class="flex items-center justify-between">
                   <span>Started <%= log.started_at&.strftime("%b %d, %H:%M") || "Unknown" %></span>
-                  <span class="ml-4 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold <%= log.success? ? "bg-green-100 text-green-700" : "bg-rose-100 text-rose-700" %>">
-                    <%= log.success? ? "Success" : "Failure" %>
-                  </span>
+                  <%= render SourceMonitor::StatusBadgeComponent.new(
+                        status: log.success? ? "success" : "failed",
+                        label: log.success? ? "Success" : "Failure",
+                        size: :sm) %>
                 </div>
                 <p class="mt-1 text-xs text-slate-500"><%= log.items_created %> created · <%= log.items_updated %> updated · <%= log.items_failed %> failed</p>
               </div>
@@ -269,9 +244,10 @@
               <div class="px-5 py-3 text-sm text-slate-700">
                 <div class="flex items-center justify-between">
                   <span>Started <%= log.started_at&.strftime("%b %d, %H:%M") || "Unknown" %></span>
-                  <span class="ml-4 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold <%= log.success? ? "bg-green-100 text-green-700" : "bg-rose-100 text-rose-700" %>">
-                    <%= log.success? ? "Success" : "Failure" %>
-                  </span>
+                  <%= render SourceMonitor::StatusBadgeComponent.new(
+                        status: log.success? ? "success" : "failed",
+                        label: log.success? ? "Success" : "Failure",
+                        size: :sm) %>
                 </div>
                 <p class="mt-1 text-xs text-slate-500"><%= log.scraper_adapter || "—" %></p>
               </div>
@@ -327,14 +303,10 @@
                     </td>
                     <td class="px-5 py-4 text-xs">
                       <% scrape_badge = item_scrape_status_badge(item: item, source: source) %>
-                      <span
-                        class="inline-flex items-center gap-1 rounded-full px-3 py-1 font-semibold <%= scrape_badge[:classes] %>"
-                        data-testid="item-scrape-status-badge"
-                        data-status="<%= scrape_badge[:status] %>"
-                      >
-                        <%= loading_spinner_svg(css_class: "h-3.5 w-3.5 animate-spin text-blue-500") if scrape_badge[:show_spinner] %>
-                        <%= scrape_badge[:label] %>
-                      </span>
+                      <%= render SourceMonitor::StatusBadgeComponent.new(
+                            status: scrape_badge[:status],
+                            label: scrape_badge[:label],
+                            data: { testid: "item-scrape-status-badge" }) %>
                     </td>
                     <td class="px-5 py-4 text-xs text-slate-500">
                       <%= item.item_content&.feed_word_count || "\u2014" %>

data/app/views/source_monitor/sources/_health_status_badge.html.erb

@@ -5,18 +5,16 @@
 <% interactive = interactive_health_status?(source, override: override) && actions.any? %>
 
 <% if interactive %>
-  <div data-controller="dropdown" class="relative inline-block text-left" data-testid="source-health-menu">
+  <div data-controller="dropdown" class="relative inline-block text-left" data-testid="source-health-menu-<%= dom_id(source) %>">
     <button type="button"
             class="inline-flex w-full items-center justify-center rounded-full px-3 py-1 text-xs font-semibold <%= badge[:classes] %>"
-            data-action="dropdown#toggle click@window->dropdown#hide"
-            data-testid="source-health-menu-toggle">
+            data-action="dropdown#toggle"
+            data-testid="source-health-menu-toggle-<%= dom_id(source) %>">
       <% if badge[:show_spinner] %>
         <%= loading_spinner_svg(css_class: "mr-1 h-3.5 w-3.5 animate-spin text-blue-500") %>
       <% end %>
       <span><%= badge[:label] %></span>
-      <svg class="ml-2 h-3 w-3 text-slate-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-        <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.168l3.71-3.938a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06z" clip-rule="evenodd" />
-      </svg>
+      <%= render SourceMonitor::IconComponent.new(:chevron_down, size: :sm, css_class: "ml-2 text-slate-500") %>
     </button>
     <div data-dropdown-target="menu" class="absolute z-20 mt-2 w-80 origin-top-left rounded-md border border-slate-200 bg-white shadow-lg hidden">
       <div class="py-2">

data/app/views/source_monitor/sources/_row.html.erb

@@ -4,12 +4,7 @@
 <% scrape_candidates = local_assigns[:scrape_candidate_ids] || Set.new %>
 <% activity_rate = rate_map.fetch(source.id, 0.0) %>
 <% health_status_override = local_assigns[:health_status_override] %>
-<% health_status = if !source.active?
-    { label: "Paused", classes: "bg-amber-100 text-amber-700", show_spinner: false }
-  else
-    source_health_badge(source, override: health_status_override)
-  end %>
-<% fetch_status = async_status_badge(source.fetch_status) %>
+<% health_status = source_health_badge(source, override: health_status_override) unless !source.active? %>
 <% search_params = local_assigns[:search_params] || {} %>
 <% delete_query =
      if search_params.respond_to?(:to_unsafe_h)
@@ -21,7 +16,7 @@
      else
        {}
      end %>
-<% delete_query = delete_query.respond_to?(:compact_blank) ? delete_query.compact_blank : delete_query.reject { |_key, value| value.respond_to?(:blank?) ? value.blank? : value.nil? } if delete_query.present? %>
+<% delete_query = compact_blank_hash(delete_query) if delete_query.present? %>
 <% delete_path = delete_query.present? ? source_monitor.source_path(source, q: delete_query) : source_monitor.source_path(source) %>
 
 <tr id="<%= dom_id(source, :row) %>" class="hover:bg-slate-50">
@@ -72,7 +67,7 @@
               source: source,
               health_status_override: health_status_override %>
       <% else %>
-        <span class="inline-flex items-center rounded-full px-3 py-1 font-semibold <%= health_status[:classes] %>"><%= health_status[:label] %></span>
+        <%= render SourceMonitor::StatusBadgeComponent.new(status: "paused") %>
       <% end %>
       <% if source.rolling_success_rate.present? %>
         <span class="text-[11px] text-slate-500">Success Rate: <%= number_to_percentage(source.rolling_success_rate * 100, precision: 0) %></span>
@@ -81,13 +76,10 @@
   </td>
   <td class="px-6 py-4">
     <div class="flex flex-col gap-1 text-xs">
-      <span class="inline-flex items-center rounded-full px-3 py-1 font-semibold <%= fetch_status[:classes] %>">
-        <%= loading_spinner_svg(css_class: "mr-1 h-3.5 w-3.5 animate-spin text-blue-500") if fetch_status[:show_spinner] %>
-        <%= fetch_status[:label] %>
+      <%= render SourceMonitor::StatusBadgeComponent.new(status: source.fetch_status) %>
         <% if source.fetch_status == "fetching" && source.last_fetch_started_at.present? %>
           <span class="ml-2 font-normal text-[10px] text-slate-500">(since <%= source.last_fetch_started_at.strftime("%H:%M:%S") %>)</span>
         <% end %>
-      </span>
       <span class="text-[11px] text-slate-500">(<%= number_with_precision(1440.0 / source.fetch_interval_minutes, precision: 1) %>x / day)</span>
     </div>
   </td>
@@ -106,15 +98,12 @@
     <%= source.last_fetched_at ? source.last_fetched_at.strftime("%b %d, %H:%M") : "Never" %>
   </td>
   <td class="px-6 py-4 text-right text-sm">
-    <div data-controller="dropdown" class="relative inline-block text-left">
+    <div data-controller="dropdown" class="relative inline-block text-left" data-testid="source-actions-<%= dom_id(source) %>">
       <button type="button"
               class="inline-flex items-center rounded-md border border-slate-200 bg-white px-2.5 py-1.5 text-slate-600 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-              data-action="dropdown#toggle click@window->dropdown#hide"
+              data-action="dropdown#toggle"
               aria-label="Source actions">
-        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94a.75.75 0 0 0-1.093-.332l-.822.548a2.25 2.25 0 0 1-2.287.014l-.856-.506a.75.75 0 0 0-1.087.63l.03.988a2.25 2.25 0 0 1-.639 1.668l-.715.715a.75.75 0 0 0 0 1.06l.715.715a2.25 2.25 0 0 1 .639 1.668l-.03.988a.75.75 0 0 0 1.087.63l.856-.506a2.25 2.25 0 0 1 2.287.014l.822.548a.75.75 0 0 0 1.093-.332l.38-.926a2.25 2.25 0 0 1 1.451-1.297l.964-.258a.75.75 0 0 0 .534-.72v-.946a.75.75 0 0 0-.534-.72l-.964-.258a2.25 2.25 0 0 1-1.45-1.297l-.381-.926Z" />
-          <path stroke-linecap="round" stroke-linejoin="round" d="M12 10a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z" />
-        </svg>
+        <%= render SourceMonitor::IconComponent.new(:menu_dots) %>
       </button>
       <div data-dropdown-target="menu" class="absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md border border-slate-200 bg-white shadow-lg transition hidden">
         <div class="py-1 text-sm text-slate-700">

data/app/views/source_monitor/sources/edit.html.erb

@@ -1,16 +1,7 @@
 <div class="mx-auto max-w-2xl py-10">
   <h1 class="text-3xl font-semibold">Edit Source</h1>
 
-  <% if @source.errors.any? %>
-    <div class="mt-4 rounded border border-red-300 bg-red-50 p-4">
-      <h2 class="font-medium text-red-700">Please fix the following:</h2>
-      <ul class="mt-2 list-disc space-y-1 pl-5 text-red-700">
-        <% @source.errors.full_messages.each do |message| %>
-          <li><%= message %></li>
-        <% end %>
-      </ul>
-    </div>
-  <% end %>
+  <%= render "source_monitor/shared/form_errors", record: @source %>
 
   <div class="mt-6">
     <%= render "form", source: @source %>

data/app/views/source_monitor/sources/index.html.erb

@@ -28,45 +28,37 @@
       </div>
     </div>
     <div class="flex flex-wrap items-end gap-2">
-      <div>
-        <%= form.label :active_eq, "Status", class: "block text-xs font-medium text-slate-500 mb-1" %>
-        <%= form.select :active_eq, options_for_select([["All Statuses", ""], ["Active", "true"], ["Paused", "false"]], @search_params["active_eq"].to_s), {}, class: "rounded-md border border-slate-200 bg-white px-2 py-2 text-sm text-slate-700 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500", onchange: "this.form.requestSubmit()" %>
-      </div>
-      <div>
-        <%= form.label :health_status_eq, "Health", class: "block text-xs font-medium text-slate-500 mb-1" %>
-        <%= form.select :health_status_eq, options_for_select([["All Health", ""], ["Working", "working"], ["Declining", "declining"], ["Improving", "improving"], ["Failing", "failing"]], @search_params["health_status_eq"].to_s), {}, class: "rounded-md border border-slate-200 bg-white px-2 py-2 text-sm text-slate-700 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500", onchange: "this.form.requestSubmit()" %>
-      </div>
-      <div>
-        <%= form.label :feed_format_eq, "Format", class: "block text-xs font-medium text-slate-500 mb-1" %>
-        <%= form.select :feed_format_eq, options_for_select([["All Formats", ""], ["RSS", "rss"], ["Atom", "atom"], ["JSON", "json"]], @search_params["feed_format_eq"].to_s), {}, class: "rounded-md border border-slate-200 bg-white px-2 py-2 text-sm text-slate-700 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500", onchange: "this.form.requestSubmit()" %>
-      </div>
-      <div>
-        <% adapter_options = SourceMonitor::Source.distinct.where.not(scraper_adapter: [nil, ""]).order(:scraper_adapter).pluck(:scraper_adapter) %>
-        <%= form.label :scraper_adapter_eq, "Adapter", class: "block text-xs font-medium text-slate-500 mb-1" %>
-        <%= form.select :scraper_adapter_eq, options_for_select([["All Adapters", ""]] + adapter_options.map { |a| [a.titleize, a] }, @search_params["scraper_adapter_eq"].to_s), {}, class: "rounded-md border border-slate-200 bg-white px-2 py-2 text-sm text-slate-700 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500", onchange: "this.form.requestSubmit()" %>
-      </div>
-      <div>
-        <%= form.label :scraping_enabled_eq, "Scrape", class: "block text-xs font-medium text-slate-500 mb-1" %>
-        <%= form.select :scraping_enabled_eq, options_for_select([["All Sources", ""], ["Scraping Enabled", "true"], ["Scraping Disabled", "false"], ["Recommendations", "recommend"]], @search_params["scraping_enabled_eq"].to_s), {}, class: "rounded-md border border-slate-200 bg-white px-2 py-2 text-sm text-slate-700 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500", onchange: "this.form.requestSubmit()" %>
-      </div>
+      <%= render SourceMonitor::FilterDropdownComponent.new(
+        label: "Status", param_name: :active_eq,
+        options: [["All Statuses", ""], ["Active", "true"], ["Paused", "false"]],
+        selected_value: @search_params["active_eq"].to_s, form: form) %>
+      <%= render SourceMonitor::FilterDropdownComponent.new(
+        label: "Health", param_name: :health_status_eq,
+        options: [["All Health", ""], ["Working", "working"], ["Declining", "declining"], ["Improving", "improving"], ["Failing", "failing"]],
+        selected_value: @search_params["health_status_eq"].to_s, form: form) %>
+      <%= render SourceMonitor::FilterDropdownComponent.new(
+        label: "Format", param_name: :feed_format_eq,
+        options: [["All Formats", ""], ["RSS", "rss"], ["Atom", "atom"], ["JSON", "json"]],
+        selected_value: @search_params["feed_format_eq"].to_s, form: form) %>
+      <%= render SourceMonitor::FilterDropdownComponent.new(
+        label: "Adapter", param_name: :scraper_adapter_eq,
+        options: [["All Adapters", ""]] + @filter_presenter.adapter_options.map { |a| [a.titleize, a] },
+        selected_value: @search_params["scraper_adapter_eq"].to_s, form: form) %>
+      <%= render SourceMonitor::FilterDropdownComponent.new(
+        label: "Scrape", param_name: :scraping_enabled_eq,
+        options: [["All Sources", ""], ["Scraping Enabled", "true"], ["Scraping Disabled", "false"], ["Recommendations", "recommend"]],
+        selected_value: @search_params["scraping_enabled_eq"].to_s, form: form) %>
     </div>
   <% end %>
 
   <div class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
     <%= turbo_frame_tag "source_monitor_sources_table" do %>
-      <% dropdown_filter_keys = %w[active_eq health_status_eq feed_format_eq scraper_adapter_eq scraping_enabled_eq avg_feed_words_lt] %>
-      <% active_dropdown_filters = dropdown_filter_keys.select { |k| @search_params[k].present? } %>
-      <% has_any_filter = @search_term.present? || @fetch_interval_filter.present? || active_dropdown_filters.any? %>
-      <% if has_any_filter %>
+      <% if @filter_presenter.has_any_filter? %>
         <div class="rounded-t-lg border-b border-blue-100 bg-blue-50 px-4 py-3 text-xs text-blue-700">
           <% if @search_term.present? %>
             <% clear_search_query = @search_params.dup %>
             <% clear_search_query.delete("name_or_feed_url_or_website_url_cont") %>
-            <% clear_search_query = if clear_search_query.respond_to?(:compact_blank)
-              clear_search_query.compact_blank
-            else
-              clear_search_query.reject { |_key, value| value.respond_to?(:blank?) ? value.blank? : value.nil? }
-            end %>
+            <% clear_search_query = compact_blank_hash(clear_search_query) %>
             <% clear_search_path = clear_search_query.empty? ? source_monitor.sources_path : source_monitor.sources_path(q: clear_search_query) %>
             <div>
               Showing results for "<%= @search_term %>".
@@ -84,28 +76,16 @@
             </div>
           <% end %>
 
-          <% if active_dropdown_filters.any? %>
+          <% if @filter_presenter.active_filter_keys.any? %>
             <div class="mt-1 flex flex-wrap items-center gap-2">
               <span>Filtered by</span>
-              <% filter_labels = {
-                "active_eq" => @search_params["active_eq"] == "true" ? "Status: Active" : "Status: Paused",
-                "health_status_eq" => "Health: #{@search_params['health_status_eq']&.titleize}",
-                "feed_format_eq" => "Format: #{@search_params['feed_format_eq']&.upcase}",
-                "scraper_adapter_eq" => "Adapter: #{@search_params['scraper_adapter_eq']&.titleize}",
-                "scraping_enabled_eq" => @search_params["scraping_enabled_eq"] == "true" ? "Scraping: Enabled" : "Scraping: Disabled",
-                "avg_feed_words_lt" => "Avg Feed Words: < #{@search_params['avg_feed_words_lt']}"
-              } %>
-              <% active_dropdown_filters.each do |filter_key| %>
+              <% @filter_presenter.active_filter_keys.each do |filter_key| %>
                 <% clear_query = @search_params.dup %>
                 <% clear_query.delete(filter_key) %>
-                <% clear_query = if clear_query.respond_to?(:compact_blank)
-                  clear_query.compact_blank
-                else
-                  clear_query.reject { |_k, v| v.respond_to?(:blank?) ? v.blank? : v.nil? }
-                end %>
+                <% clear_query = compact_blank_hash(clear_query) %>
                 <% clear_path = clear_query.empty? ? source_monitor.sources_path : source_monitor.sources_path(q: clear_query) %>
                 <span class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700">
-                  <%= filter_labels[filter_key] %>
+                  <%= @filter_presenter.filter_labels[filter_key] %>
                   <%= link_to "×", clear_path, class: "ml-0.5 font-bold text-blue-500 hover:text-blue-700", data: { turbo_frame: "source_monitor_sources_table" } %>
                 </span>
               <% end %>