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/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>