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/categories/index.html.erb

@@ -2,18 +2,23 @@
   <h1 class="text-primary text-xl font-medium"><%= t(".categories") %></h1>
 
   <div class="flex items-center gap-2">
-    <%= contextual_menu do %>
-      <%= contextual_menu_destructive_item "Delete all", destroy_all_categories_path, turbo_confirm: {
-        title: "Delete all categories?",
-        body: "All of your transactions will become uncategorized and this cannot be undone.",
-        accept: "Delete all categories",
-      } %>
+    <%= render MenuComponent.new do |menu| %>
+      <% menu.with_item(
+          variant: "button",
+          text: "Delete all",
+          href: destroy_all_categories_path,
+          method: :delete,
+          icon: "trash-2",
+          confirm: CustomConfirm.for_resource_deletion("All categories", high_severity: true)) %>
     <% end %>
 
-    <%= link_to new_category_path, 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><%= t(".new") %></p>
-    <% end %>
+    <%= render LinkComponent.new(
+      text: t(".new"),
+      variant: "primary",
+      icon: "plus",
+      href: new_category_path,
+      frame: :modal
+    ) %>
   </div>
 </header>
 
@@ -33,12 +38,18 @@
       <div class="text-center flex flex-col items-center max-w-[500px]">
         <p class="text-sm text-secondary mb-4"><%= t(".empty") %></p>
         <div class="flex items-center gap-2">
-          <%= button_to t(".bootstrap"), bootstrap_categories_path, class: "btn btn--primary" %>
+          <%= render ButtonComponent.new(
+            text: t(".bootstrap"),
+            href: bootstrap_categories_path,
+          ) %>
 
-          <%= link_to new_category_path, class: "btn btn--outline flex items-center gap-1", data: { turbo_frame: "modal" } do %>
-            <%= lucide_icon("plus", class: "w-5 h-5") %>
-            <span><%= t(".new") %></span>
-          <% end %>
+          <%= render LinkComponent.new(
+            text: t(".new"),
+            variant: "outline",
+            icon: "plus",
+            href: new_category_path,
+            frame: :modal
+          ) %>
         </div>
       </div>
     </div>