Pre-launch design sync with Figma spec (#2154)

* Add lookbook + viewcomponent, organize design system file

* Build menu component

* Button updates

* More button fixes

* Replace all menus with new ViewComponent

* Checkpoint: fix tests, all buttons and menus converted

* Split into Link and Button components for clarity

* Button cleanup

* Simplify custom confirmation configuration in views

* Finalize button, link component API

* Add toggle field to custom form builder + Component

* Basic tabs component

* Custom tabs, convert all menu / tab instances in app

* Gem updates

* Centralized icon helper

* Update all icon usage to central helper

* Lint fixes

* Centralize all disclosure instances

* Dialog replacements

* Consolidation of all dialog styles

* Test fixes

* Fix app layout issues, move to component with slots

* Layout simplification

* Flakey test fix

* Fix dashboard mobile issues

* Finalize homepage

* Lint fixes

* Fix shadows and borders in dark mode

* Fix tests

* Remove stale class

* Fix filled icon logic

* Move transparent? to public interface

app/views/rules/_category_rule_cta.html.erb

@@ -13,8 +13,9 @@
     <%= f.hidden_field :rule_prompt_dismissed_at, value: Time.current %>
 
     <%= tag.div class:"flex gap-2 justify-end" do %>
-      <%= f.submit "Dismiss", class: "btn btn--secondary" %>
-      <%= tag.a "Create rule", href: new_rule_path(resource_type: "transaction", action_type: "set_transaction_category", action_value: cta[:category_id]), class: "btn btn--primary", data: { turbo_frame: "modal" } %>
+      <%= render ButtonComponent.new(text: "Dismiss", variant: "secondary") %>
+      <% rule_href = new_rule_path(resource_type: "transaction", action_type: "set_transaction_category", action_value: cta[:category_id]) %>
+      <%= render LinkComponent.new(text: "Create rule", variant: "primary", href: rule_href, frame: :modal) %>
     <% end %>
   <% end %>
 <% end %>

app/views/rules/_form.html.erb

@@ -1,6 +1,6 @@
 <%# locals: (rule:) %>
 
-<%= styled_form_with model: rule, class: "space-y-4 w-[550px]",
+<%= styled_form_with model: rule, class: "space-y-4",
                      data: { controller: "rules", rule_registry_value: rule.registry.to_json } do |f| %>
 
   <%= f.hidden_field :resource_type, value: rule.resource_type %>
@@ -37,15 +37,8 @@
     </ul>
 
     <div class="flex items-center gap-2">
-      <button type="button" data-action="rules#addCondition" class="btn btn--ghost">
-        <%= icon("plus") %>
-        <span>Add condition</span>
-      </button>
-
-      <button type="button" data-action="rules#addConditionGroup" class="btn btn--ghost">
-        <%= icon("boxes") %>
-        <span>Add condition group</span>
-      </button>
+      <%= render ButtonComponent.new(text: "Add condition", icon: "plus", variant: "ghost", type: "button", data: { action: "rules#addCondition" }) %>
+      <%= render ButtonComponent.new(text: "Add condition group", icon: "boxes", variant: "ghost", type: "button", data: { action: "rules#addConditionGroup" }) %>
     </div>
   </section>
 
@@ -65,13 +58,7 @@
       <% end %>
     </ul>
 
-    <button
-        type="button"
-        data-action="rules#addAction"
-        class="btn btn--ghost">
-      <%= icon("plus") %>
-      <span>Add action</span>
-    </button>
+    <%= render ButtonComponent.new(text: "Add action", icon: "plus", variant: "ghost", type: "button", data: { action: "rules#addAction" }) %>
   </section>
 
   <section class="space-y-4">

app/views/rules/_rule.html.erb

@@ -42,20 +42,20 @@
   </div>
 
   <div class="flex items-center gap-4">
-    <%= render "shared/toggle_form", model: rule, attribute: :active %>
+    <%= styled_form_with model: rule, data: { controller: "auto-submit-form" } do |f| %>
+      <%= f.toggle :active, { data: { auto_submit_form_target: "auto" } } %>
+    <% end %>
 
-    <%= contextual_menu icon: "more-vertical", id: "chat-menu" do %>
-      <%= contextual_menu_item "Edit", url: edit_rule_path(rule), icon: "pencil", turbo_frame: "modal" %>
-
-      <%= contextual_menu_item "Re-apply rule", url: confirm_rule_path(rule), turbo_frame: "modal", icon: "refresh-cw" %>
-
-      <% turbo_confirm = {
-        title: "Delete rule",
-        body: "Are you sure you want to delete this rule? Data affected by this rule will no longer be automatically updated. This action cannot be undone.",
-        accept: "Delete rule",
-      } %>
-
-      <%= contextual_menu_destructive_item "Delete", rule_path(rule), turbo_confirm: turbo_confirm %>
+    <%= render MenuComponent.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>

app/views/rules/confirm.html.erb

@@ -1,20 +1,18 @@
-<%= modal(reload_on_close: true) do %>
-  <div class="space-y-4 p-4 max-w-[400px]">
-    <div>
-      <div class="flex justify-between mb-2 gap-4">
-        <h3 class="font-medium text-md">Confirm changes</h3>
-        <button data-action="mousedown->modal#close">
-          <%= lucide_icon("x", class: "w-5 h-5 shrink-0 text-secondary") %>
-        </button>
-      </div>
-      <div class="text-secondary text-sm">
-        <p>
-          You are about to apply this rule to
-          <span class="text-primary font-medium"><%= @rule.affected_resource_count %> <%= @rule.resource_type.pluralize %></span>
-          that meet the specified rule criteria.  Please confirm if you wish to proceed with this change.
-        </p>
-      </div>
-    </div>
-    <%= button_to "Confirm changes", apply_rule_path(@rule), class: "btn btn--primary w-full justify-center", data: { turbo_frame: "_top"} %>
-  </div>
+<%= render DialogComponent.new(reload_on_close: true) do |dialog| %>
+  <% dialog.with_header(title: "Confirm changes") %>
+
+  <% dialog.with_body do %>
+    <p class="text-secondary text-sm mb-4">
+      You are about to apply this rule to
+      <span class="text-primary font-medium"><%= @rule.affected_resource_count %> <%= @rule.resource_type.pluralize %></span>
+      that meet the specified rule criteria.  Please confirm if you wish to proceed with this change.
+    </p>
+
+    <%= render ButtonComponent.new(
+      text: "Confirm changes",
+      href: apply_rule_path(@rule),
+      method: :post,
+      full_width: true,
+      data: { turbo_frame: "_top" }) %>
+  <% end %>
 <% end %>

app/views/rules/edit.html.erb

@@ -1,5 +1,8 @@
 <%= link_to "Back to rules", rules_path %>
 
-<%= modal_form_wrapper title: "Edit #{@rule.resource_type} rule" do %>
-  <%= render "rules/form", rule: @rule %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: "Edit #{@rule.resource_type} rule") %>
+  <% dialog.with_body do %>
+    <%= render "rules/form", rule: @rule %>
+  <% end %>
 <% end %>

app/views/rules/index.html.erb

@@ -1,29 +1,32 @@
 <header class="flex items-center justify-between">
   <h1 class="text-primary text-xl font-medium">Rules</h1>
 
-  <% turbo_confirm = {
-    title: "Delete all rules",
-    body: "Are you sure you want to delete all rules? This action cannot be undone.",
-    accept: "Delete all rules",
-  } %>
-
   <div class="flex items-center gap-2">
     <% if @rules.any? %>
-      <%= contextual_menu do %>
-        <%= contextual_menu_destructive_item "Delete all rules", destroy_all_rules_path, turbo_confirm: turbo_confirm %>
+      <%= render MenuComponent.new do |menu| %>
+        <% menu.with_item(
+          variant: "button",
+          text: "Delete all rules",
+          href: destroy_all_rules_path,
+          icon: "trash-2",
+          method: :delete,
+          confirm: CustomConfirm.for_resource_deletion("All rules", high_severity: true)) %>
       <% end %>
     <% end %>
 
-    <%= link_to new_rule_path(resource_type: "transaction"), class: "btn btn--primary flex items-center gap-1 justify-center", data: { turbo_frame: :modal } do %>
-      <%= lucide_icon "plus", class: "w-5 h-5" %>
-      <p>New rule</p>
-    <% end %>
+    <%= render LinkComponent.new(
+      text: "New rule",
+      variant: "primary",
+      href: new_rule_path(resource_type: "transaction"),
+      icon: "plus",
+      frame: :modal
+    ) %>
   </div>
 </header>
 
 <% if self_hosted? %>
   <div class="flex items-center gap-2 mb-2 py-4">
-    <%= lucide_icon("circle-alert", class: "w-4 h-4 text-secondary") %>
+    <%= icon("circle-alert", size: "sm") %>
     <p class="text-sm text-secondary">
       AI-enabled rule actions will cost money.  Be sure to filter as narrowly as possible to avoid unnecessary costs.
     </p>
@@ -50,10 +53,13 @@
         <p class="text-sm text-primary font-medium mb-1">No rules yet</p>
         <p class="text-sm text-secondary mb-4">Set up rules to perform actions to your transactions and other data on every account sync.</p>
         <div class="flex items-center gap-2">
-          <%= link_to new_rule_path(resource_type: "transaction"), class: "btn btn--primary flex items-center gap-1", data: { turbo_frame: "modal" } do %>
-            <%= lucide_icon("plus", class: "w-5 h-5") %>
-            <span>New rule</span>
-          <% end %>
+          <%= render LinkComponent.new(
+            text: "New rule",
+            variant: "primary",
+            href: new_rule_path(resource_type: "transaction"),
+            icon: "plus",
+            frame: :modal
+          ) %>
         </div>
       </div>
     </div>

app/views/rules/new.html.erb

@@ -1,5 +1,8 @@
 <%= link_to "Back to rules", rules_path %>
 
-<%= modal_form_wrapper title: "New #{@rule.resource_type} rule" do %>
-  <%= render "rules/form", rule: @rule %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: "New #{@rule.resource_type} rule") %>
+  <% dialog.with_body do %>
+    <%= render "rules/form", rule: @rule %>
+  <% end %>
 <% end %>