Maybe/app/views/rules/_rule.html.erb

<%# locals: (rule:) %>
<div id="<%= dom_id(rule) %>" class="flex justify-between items-center p-4 <%= rule.active? ? "text-primary" : "text-secondary" %>">

  <div class="text-sm space-y-1.5">
    <% if rule.name.present? %>
      <h3 class="font-medium text-md"><%= rule.name %></h3>
    <% end %>
    <% if rule.conditions.any? %>
      <div class="flex items-center gap-2 mt-1">
        <div class="flex items-center gap-1 text-secondary w-16 shrink-0">
          <span class="font-mono text-xs">IF</span>
        </div>
        <p class="flex items-center flex-wrap gap-1.5 m-0">
          <span class="px-2 py-1 border border-secondary rounded-full">
            <% if rule.conditions.first.compound? %>
              <%= rule.conditions.first.sub_conditions.first.filter.label %> <%= rule.conditions.first.sub_conditions.first.operator %> <%= rule.conditions.first.sub_conditions.first.value_display %>
            <% else %>
              <%= rule.conditions.first.filter.label %> <%= rule.conditions.first.operator %> <%= rule.conditions.first.value_display %>
            <% end %>
          </span>
          <% if rule.conditions.count > 1 %>
            and <%= rule.conditions.count - 1 %> more <%= rule.conditions.count - 1 == 1 ? "condition" : "conditions" %>
          <% end %>
        </p>
      </div>
    <% end %>
    <div class="flex items-center gap-2 mt-1">
      <div class="flex items-center gap-1 text-secondary w-16 shrink-0">
        <span class="font-mono text-xs">THEN</span>
      </div>
      <p class="flex items-center flex-wrap gap-1.5 m-0">
        <span class="px-2 py-1 border border-secondary rounded-full">
          <% if rule.actions.first.value && rule.actions.first.options %>
            <%= rule.actions.first.executor.label %> to <%= rule.actions.first.value_display %>
          <% else %>
            <%= rule.actions.first.executor.label %>
          <% end %>
        </span>
        <% if rule.actions.count > 1 %>
          and <%= rule.actions.count - 1 %> more <%= rule.actions.count - 1 == 1 ? "action" : "actions" %>
        <% end %>
      </p>
    </div>
    <div class="flex items-center gap-2 mt-1">
      <div class="flex items-center gap-1 text-secondary w-16 shrink-0">
        <span class="font-mono text-xs">FOR</span>
      </div>
      <p class="flex items-center flex-wrap gap-1.5 m-0">
        <span class="px-2 py-1 border border-secondary rounded-full">
          <% if rule.effective_date.nil? %>
            All past and future <%= rule.resource_type.pluralize %>
          <% else %>
            <%= rule.resource_type.pluralize %> on or after <%= rule.effective_date.strftime("%b %-d, %Y") %>
          <% end %>
        </span>
      </p>
    </div>
  </div>
  <div class="flex items-center gap-4">
    <%= styled_form_with model: rule, namespace: "rule_#{rule.id}", data: { controller: "auto-submit-form" } do |f| %>
      <%= f.toggle :active, { data: { auto_submit_form_target: "auto" } } %>
    <% end %>
    <%= render DS::Menu.new do |menu| %>
      <% menu.with_item(variant: "link", text: "Edit", href: edit_rule_path(rule), icon: "pencil", data: { turbo_frame: "modal" }) %>
      <% menu.with_item(variant: "link", text: "Re-apply rule", href: confirm_rule_path(rule), icon: "refresh-cw", data: { turbo_frame: "modal" }) %>
      <% menu.with_item(
        variant: "button",
        text: "Delete",
        href: rule_path(rule),
        icon: "trash-2",
        method: :delete,
        confirm: CustomConfirm.for_resource_deletion("rule")) %>
    <% end %>
  </div>
</div>