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/budget_categories/_budget_category.html.erb

@@ -8,11 +8,17 @@
         <%= render "budget_categories/budget_category_donut", budget_category: budget_category %>
       </div>
     <% else %>
-      <div class="w-8 h-8 group-hover:scale-105 transition-all duration-300 rounded-full flex justify-center items-center" style="<%= mixed_hex_styles(budget_category.category.color) %>">
+      <div class="w-8 h-8 group-hover:scale-105 transition-all duration-300 rounded-full flex justify-center items-center" style="color: <%= budget_category.category.color %>">
         <% if budget_category.category.lucide_icon %>
-          <%= icon(budget_category.category.lucide_icon) %>
+          <%= icon(budget_category.category.lucide_icon, color: "current") %>
         <% else %>
-          <%= render "shared/circle_logo", name: budget_category.category.name, hex: budget_category.category.color %>
+          <%= render FilledIconComponent.new(
+            variant: :text,
+            hex_color: budget_category.category.color,
+            text: budget_category.category.name,
+            size: "sm",
+            rounded: true
+          ) %>
         <% end %>
       </div>
     <% end %>

app/views/budget_categories/_budget_category_donut.html.erb

@@ -11,7 +11,9 @@
   <div data-donut-chart-target="contentContainer" class="flex justify-center items-center h-full p-1">
     <div data-donut-chart-target="defaultContent" class="h-full w-full rounded-full flex flex-col items-center justify-center" style="background-color: <%= hex_with_alpha(budget_category.category.color, 0.05) %>">
       <% if budget_category.category.lucide_icon %>
-        <%= lucide_icon budget_category.category.lucide_icon, class: "w-4 h-4 shrink-0", style: "color: #{budget_category.category.color}" %>
+        <span style="color: <%= budget_category.category.color %>">
+          <%= icon(budget_category.category.lucide_icon, size: "sm", color: "current") %>
+        </span>
       <% else %>
         <span class="text-sm uppercase" style="color: <%= budget_category.category.color %>">
           <%= budget_category.category.name.first.upcase %>

app/views/budget_categories/_confirm_button.html.erb

@@ -1,11 +1,10 @@
 <div id="<%= dom_id(budget, :confirm_button) %>">
-  <% if budget.allocations_valid? %>
-    <%= link_to "Confirm",
-        budget_path(budget),
-        class: "block btn btn--primary w-full text-center" %>
-  <% else %>
-    <span class="block btn btn--secondary w-full text-center text-subdued cursor-not-allowed">
-      Confirm
-    </span>
-  <% end %>
+  <%= render ButtonComponent.new(
+    text: "Confirm",
+    variant: "primary",
+    full_width: true,
+    href: budget_path(budget),
+    method: :get,
+    disabled: !budget.allocations_valid?
+  ) %>
 </div>

app/views/budget_categories/_no_categories.html.erb

@@ -6,12 +6,18 @@
     </p>
 
     <div class="flex items-center gap-2">
-      <%= button_to "Use defaults (recommended)", bootstrap_categories_path, class: "btn btn--primary" %>
+      <%= render ButtonComponent.new(
+        text: "Use defaults (recommended)",
+        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>New category</span>
-      <% end %>
+      <%= render LinkComponent.new(
+        text: "New category",
+        variant: "outline",
+        icon: "plus",
+        href: new_category_path,
+        frame: :modal,
+      ) %>
     </div>
   </div>
 </div>

app/views/budget_categories/index.html.erb

@@ -32,7 +32,7 @@
                   <% group.budget_subcategories.each do |budget_subcategory| %>
                     <div class="w-full flex items-center gap-4">
                       <div class="ml-4 flex items-center justify-center text-subdued">
-                        <%= lucide_icon "corner-down-right", class: "w-5 h-5 shrink-0" %>
+                        <%= icon("corner-down-right") %>
                       </div>
 
                       <%= render "budget_categories/budget_category_form", budget_category: budget_subcategory %>

app/views/budget_categories/show.html.erb

@@ -1,39 +1,32 @@
-<%= drawer do %>
-  <div class="space-y-4">
-    <header class="flex justify-between">
-      <div>
-        <p class="text-sm text-secondary">Category</p>
-        <h3 class="text-2xl font-medium text-primary">
-          <%= @budget_category.name %>
-        </h3>
-
-        <% if @budget_category.budget.initialized? %>
-          <p class="text-sm text-secondary">
-            <span class="text-primary">
-              <%= format_money(@budget_category.actual_spending_money) %>
-            </span>
-            <span>/</span>
-            <span><%= format_money(@budget_category.budgeted_spending_money) %></span>
-          </p>
-        <% end %>
-      </div>
+<%= render DialogComponent.new(variant: :drawer) do |dialog| %>
+  <% dialog.with_header do %>
+    <div>
+      <p class="text-sm text-secondary">Category</p>
+      <h3 class="text-2xl font-medium text-primary">
+        <%= @budget_category.name %>
+      </h3>
 
       <% if @budget_category.budget.initialized? %>
-        <div class="ml-auto w-10 h-10">
-          <%= render "budget_categories/budget_category_donut",
-                    budget_category: @budget_category %>
-        </div>
+        <p class="text-sm text-secondary">
+          <span class="text-primary">
+            <%= format_money(@budget_category.actual_spending_money) %>
+          </span>
+          <span>/</span>
+          <span><%= format_money(@budget_category.budgeted_spending_money) %></span>
+        </p>
       <% end %>
-    </header>
+    </div>
 
-    <details class="group space-y-2" open>
-      <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2
-                     text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
-        <h4>Overview</h4>
-        <%= lucide_icon "chevron-down",
-            class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
-      </summary>
+    <% if @budget_category.budget.initialized? %>
+      <div class="ml-auto w-10 h-10">
+        <%= render "budget_categories/budget_category_donut",
+                    budget_category: @budget_category %>
+      </div>
+    <% end %>
+  <% end %>
 
+  <% dialog.with_body do %>
+    <% dialog.with_section(title: "Overview", open: true) do %>
       <div class="pb-4">
         <dl class="space-y-3 px-3 py-2">
           <div class="flex items-center justify-between text-sm">
@@ -49,20 +42,20 @@
             <div class="flex items-center justify-between text-sm">
               <dt class="text-secondary">Status</dt>
               <% if @budget_category.available_to_spend.negative? %>
-                <dd class="text-red-500 flex items-center gap-1 text-red-500 font-medium">
-                  <%= lucide_icon "alert-circle", class: "shrink-0 w-4 h-4 text-red-500" %>
+                <dd class="flex items-center gap-1 text-red-500 font-medium">
+                  <%= icon "alert-circle", size: "sm", color: "destructive" %>
                   <%= format_money @budget_category.available_to_spend_money.abs %>
                   <span>overspent</span>
                 </dd>
               <% elsif @budget_category.available_to_spend.zero? %>
-                <dd class="text-orange-500 flex items-center gap-1 text-orange-500 font-medium">
-                  <%= lucide_icon "x-circle", class: "shrink-0 w-4 h-4 text-orange-500" %>
+                <dd class="flex items-center gap-1 text-orange-500 font-medium">
+                  <%= icon "x-circle", size: "sm", color: "warning" %>
                   <%= format_money @budget_category.available_to_spend_money %>
                   <span>left</span>
                 </dd>
               <% else %>
                 <dd class="text-primary flex items-center gap-1 text-green-500 font-medium">
-                  <%= lucide_icon "check-circle-2", class: "shrink-0 w-4 h-4 text-green-500" %>
+                  <%= icon "check-circle", size: "sm", color: "success" %>
                   <%= format_money @budget_category.available_to_spend_money %>
                   <span>left</span>
                 </dd>
@@ -92,16 +85,9 @@
           </div>
         </dl>
       </div>
-    </details>
-
-    <details class="group space-y-2" open>
-      <summary class="flex list-none items-center justify-between rounded-xl px-3 py-2
-                     text-xs font-medium uppercase text-secondary bg-gray-25 focus-visible:outline-hidden">
-        <h4>Recent Transactions</h4>
-        <%= lucide_icon "chevron-down",
-            class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
-      </summary>
+    <% end %>
 
+    <% dialog.with_section(title: "Recent Transactions", open: true) do %>
       <div class="space-y-2">
         <div class="px-3 py-4 space-y-2">
           <% if @recent_transactions.any? %>
@@ -133,14 +119,17 @@
               <% end %>
             </ul>
 
-            <%= link_to "View all category transactions",
-                  transactions_path(q: {
-                    categories: [@budget_category.name],
-                    start_date: @budget.start_date,
-                    end_date: @budget.end_date
-                  }),
-                  data: { turbo_frame: :_top },
-                  class: "block text-center btn btn--outline w-full" %>
+            <%= render LinkComponent.new(
+              text: "View all category transactions",
+              variant: "outline",
+              full_width: true,
+              href: transactions_path(q: {
+                categories: [@budget_category.name],
+                start_date: @budget.start_date,
+                end_date: @budget.end_date
+              }),
+              frame: :_top
+            ) %>
           <% else %>
             <p class="text-secondary text-sm mb-4">
               No transactions found for this budget period.
@@ -148,6 +137,6 @@
           <% end %>
         </div>
       </div>
-    </details>
-  </div>
+    <% end %>
+  <% end %>
 <% end %>