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/budgets/edit.html.erb

@@ -21,7 +21,7 @@
 
         <% if @budget.estimated_income && @budget.estimated_spending %>
           <div class="border border-tertiary rounded-lg p-3 flex">
-            <%= lucide_icon "sparkles", class: "w-5 h-5 text-secondary shrink-0" %>
+            <%= icon "sparkles" %>
             <div class="ml-2 space-y-1 text-sm">
               <h4 class="text-primary">Autosuggest income & spending budget</h4>
               <p class="text-secondary">
@@ -29,18 +29,18 @@
               </p>
             </div>
 
-            <div class="relative inline-block select-none ml-6">
-              <%= check_box_tag :auto_fill, "1", params[:auto_fill].present?, class: "sr-only peer", data: {
-                  action: "change->budget-form#toggleAutoFill",
-                  budget_form_income_param: { key: "budget_expected_income", value: sprintf("%.2f", @budget.estimated_income) },
-                  budget_form_spending_param: { key: "budget_budgeted_spending", value: sprintf("%.2f", @budget.estimated_spending) }
-                } %>
-              <label for="auto_fill" class="switch"></label>
-            </div>
+            <%= render ToggleComponent.new(
+              id: "auto_fill",
+              data: {
+                action: "change->budget-form#toggleAutoFill",
+                budget_form_income_param: { key: "budget_expected_income", value: sprintf("%.2f", @budget.estimated_income) },
+                budget_form_spending_param: { key: "budget_budgeted_spending", value: sprintf("%.2f", @budget.estimated_spending) }
+              }
+            ) %>
           </div>
         <% end %>
 
-        <%= f.submit "Continue", class: "btn btn--primary w-full" %>
+        <%= f.submit "Continue" %>
       <% end %>
     </div>
   </div>