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/category/deletions/new.html.erb

@@ -1,21 +1,32 @@
-<%= modal_form_wrapper title: t(".delete_category"), subtitle: t(".explanation", category_name: @category.name) do %>
-  <%= styled_form_with url: category_deletions_path(@category),
-                       class: "space-y-4",
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".delete_category"), subtitle: t(".explanation", category_name: @category.name)) %>
+
+  <% dialog.with_body do %>
+    <%= styled_form_with url: category_deletions_path(@category),
                        data: {
                          turbo: false,
                          controller: "deletion",
-                         deletion_dangerous_action_class: "form-field__submit bg-container text-red-600 border hover:bg-red-50",
-                         deletion_safe_action_class: "form-field__submit border border-transparent",
                          deletion_submit_text_when_not_replacing_value: t(".delete_and_leave_uncategorized", category_name: @category.name),
                          deletion_submit_text_when_replacing_value: t(".delete_and_recategorize", category_name: @category.name) } do |f| %>
-    <%= f.collection_select :replacement_category_id,
+      <%= f.collection_select :replacement_category_id,
                             Current.family.categories.alphabetically.without(@category),
                             :id, :name,
-                            { prompt: t(".replacement_category_prompt"), label: t(".category") },
-                            { data: { deletion_target: "replacementField", action: "deletion#updateSubmitButton" } } %>
+                            { prompt: t(".replacement_category_prompt"), label: t(".category"), container_class: "mb-4" },
+                            data: { deletion_target: "replacementField", action: "deletion#chooseSubmitButton" } %>
 
-    <%= f.submit t(".delete_and_leave_uncategorized", category_name: @category.name),
-                 class: "form-field__submit bg-container text-red-600 border hover:bg-red-50",
-                 data: { deletion_target: "submitButton" } %>
+      <%= render ButtonComponent.new(
+        variant: "destructive",
+        text: t(".delete_and_leave_uncategorized", category_name: @category.name),
+        full_width: true,
+        data: { deletion_target: "destructiveSubmitButton" }
+      ) %>
+
+      <%= render ButtonComponent.new(
+        text: "Delete and reassign",
+        data: { deletion_target: "safeSubmitButton" },
+        hidden: true,
+        full_width: true
+      ) %>
+    <% end %>
   <% end %>
 <% end %>

app/views/category/dropdowns/_row.html.erb

@@ -15,32 +15,17 @@
       method: :patch,
       class: "flex w-full items-center gap-1.5 cursor-pointer focus:outline-none" do %>
 
-    <span class="w-5 h-5">
-      <%= lucide_icon("check", class: "w-5 h-5 text-secondary") if is_selected %>
-    </span>
+    <%= icon("check") if is_selected %>
+
     <% if category.subcategory? %>
-      <%= lucide_icon "corner-down-right", class: "shrink-0 w-5 h-5 text-subdued" %>
+      <%= icon("corner-down-right", size: "sm") %>
     <% end %>
+
     <%= render partial: "categories/badge", locals: { category: category } %>
   <% end %>
 
-  <%= contextual_menu do %>
-    <div class="w-48 p-1 text-sm leading-6 text-primary bg-container shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
-      <%= link_to edit_category_path(category),
-            class: "block w-full py-2 px-3 space-x-2 text-primary hover:bg-gray-50 flex items-center rounded-lg",
-            data: { turbo_frame: :modal } do %>
-        <%= lucide_icon "pencil-line", class: "w-5 h-5 text-secondary" %>
-
-        <span><%= t(".edit") %></span>
-      <% end %>
-
-      <%= link_to new_category_deletion_path(category),
-            class: "block w-full py-2 px-3 space-x-2 text-red-600 hover:bg-red-50 flex items-center rounded-lg",
-            data: { turbo_frame: :modal } do %>
-        <%= lucide_icon "trash-2", class: "w-5 h-5" %>
-
-        <span><%= t(".delete") %></span>
-      <% end %>
-    </div>
+  <%= render MenuComponent.new do |menu| %>
+    <% menu.with_item(variant: "link", text: t(".edit"), icon: "pencil-line", href: edit_category_path(category), data: { turbo_frame: :modal }) %>
+    <% menu.with_item(variant: "link", text: t(".delete"), icon: "trash-2", href: new_category_deletion_path(category), data: { turbo_frame: :modal }, destructive: true) %>
   <% end %>
 <% end %>

app/views/category/dropdowns/show.html.erb

@@ -3,7 +3,7 @@
     <div class="grow p-1.5">
       <div class="relative flex items-center bg-container border border-secondary rounded-lg">
         <input placeholder="<%= t(".search_placeholder") %>" autocomplete="nope" type="search" class="placeholder:text-sm placeholder:text-secondary font-normal h-10 relative pl-10 w-full border-none rounded-lg" data-list-filter-target="input" data-action="list-filter#filter">
-        <%= lucide_icon("search", class: "w-5 h-5 text-secondary ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
+        <%= icon("search", class: "absolute inset-0 ml-2 transform top-1/2 -translate-y-1/2") %>
       </div>
     </div>
     <div data-list-filter-target="list" class="flex flex-col gap-0.5 p-1.5 mt-0.5 mr-2 max-h-64 overflow-y-scroll scrollbar">
@@ -22,7 +22,13 @@
         <div class="flex justify-center items-center py-12">
           <div class="text-center flex flex-col items-center max-w-[500px]">
             <p class="text-sm text-secondary font-normal mb-4"><%= t(".empty") %></p>
-            <%= button_to t(".bootstrap"), bootstrap_categories_path, class: "btn btn--outline", data: { turbo_frame: :_top } %>
+
+            <%= render ButtonComponent.new(
+              text: t(".bootstrap"),
+              variant: "outline",
+              href: bootstrap_categories_path,
+              method: :post,
+              data: { turbo_frame: :_top }) %>
           </div>
         </div>
       <% end %>
@@ -35,7 +41,7 @@
                       data: { turbo_frame: dom_id(@transaction.entry) },
                       params: { entry: { entryable_type: "Transaction", entryable_attributes: { id: @transaction.id, category_id: nil } } },
                       class: "flex text-sm font-medium items-center gap-2 text-secondary w-full rounded-lg p-2 hover:bg-gray-100" do %>
-          <%= lucide_icon "minus", class: "w-5 h-5" %>
+          <%= icon("minus") %>
 
           <%= t(".clear") %>
         <% end %>
@@ -45,7 +51,7 @@
         <%= link_to new_transaction_transfer_match_path(@transaction.entry),
                   class: "flex text-sm font-medium items-center gap-2 text-secondary w-full rounded-lg p-2 hover:bg-gray-100",
                   data: { turbo_frame: "modal" } do %>
-          <%= lucide_icon "refresh-cw", class: "w-5 h-5" %>
+          <%= icon("refresh-cw") %>
 
           <p>Match transfer/payment</p>
         <% end %>
@@ -66,7 +72,9 @@
 
         <p>One-time <%= @transaction.entry.amount.negative? ? "income" : "expense" %></p>
 
-        <%= lucide_icon "asterisk", class: "w-5 h-5 shrink-0 text-orange-500 ml-auto" %>
+        <span class="text-orange-500 ml-auto">
+          <%= icon("asterisk", color: "current") %>
+        </span>
       </div>
     </div>
   </div>