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/holdings/_cash.html.erb

@@ -4,7 +4,12 @@
 
 <div class="grid grid-cols-12 items-center text-primary text-sm font-medium p-4">
   <div class="col-span-4 flex items-center gap-4">
-    <%= render "shared/circle_logo", name: currency.iso_code %>
+    <%= render FilledIconComponent.new(
+      variant: :text,
+      text: currency.symbol,
+      rounded: true,
+      size: "lg"
+    ) %>
 
     <div class="space-y-0.5">
       <%= tag.p t(".brokerage_cash"), class: "text-primary" %>

app/views/holdings/_missing_price_tooltip.html.erb

@@ -1,6 +1,6 @@
 <div data-controller="tooltip" data-tooltip-cross-axis-value="50">
   <div class="flex items-center gap-1 text-warning">
-    <%= lucide_icon "info", class: "w-4 h-4 shrink-0" %>
+    <%= icon "info", size: "sm", color: "current" %>
     <%= tag.span t(".missing_data"), class: "font-normal text-xs" %>
   </div>
   <div role="tooltip" data-tooltip-target="tooltip" class="tooltip bg-gray-700 text-sm p-2 rounded w-64">

app/views/holdings/index.html.erb

@@ -6,7 +6,9 @@
                   id: dom_id(@account, "new_trade"),
                   data: { turbo_frame: :modal },
                   class: "flex gap-1 font-medium items-center bg-gray-50 text-primary p-2 rounded-lg" do %>
-        <%= lucide_icon("plus", class: "w-5 h-5 text-primary") %>
+        <span class="text-primary">
+          <%= icon("plus", color: "current") %>
+        </span>
         <%= tag.span t(".new_holding"), class: "text-sm" %>
       <% end %>
     </div>

app/views/holdings/show.html.erb

@@ -1,20 +1,17 @@
-<%= drawer do %>
-  <div class="space-y-4">
-    <header class="flex justify-between">
+<%= render DialogComponent.new(variant: "drawer") do |dialog| %>
+  <% dialog.with_header do %>
+    <div class="flex items-center justify-between">
       <div>
         <%= tag.h3 @holding.name, class: "text-2xl font-medium text-primary" %>
         <%= tag.p @holding.ticker, class: "text-sm text-secondary" %>
       </div>
 
       <%= image_tag "https://logo.synthfinance.com/ticker/#{@holding.ticker}", loading: "lazy", class: "w-9 h-9 rounded-full" %>
-    </header>
-
-    <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><%= t(".overview") %></h4>
-        <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
-      </summary>
+    </div>
+  <% end %>
 
+  <% dialog.with_body do %>
+    <% dialog.with_section(title: t(".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">
@@ -45,14 +42,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><%= t(".history") %></h4>
-        <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
-      </summary>
+    <% end %>
 
+    <% dialog.with_section(title: t(".history"), open: true) do %>
       <div class="space-y-2">
         <div class="px-3 py-4">
           <% if @holding.trades.any? %>
@@ -85,15 +77,10 @@
           <% end %>
         </div>
       </div>
-    </details>
+    <% end %>
 
     <% unless @holding.account.plaid_account_id.present? %>
-      <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><%= t(".settings") %></h4>
-          <%= lucide_icon "chevron-down", class: "group-open:transform group-open:rotate-180 text-secondary w-5" %>
-        </summary>
-
+      <% dialog.with_section(title: t(".settings"), open: true) do %>
         <div class="pb-4">
           <div class="flex items-center justify-between gap-2 p-3">
             <div class="text-sm space-y-1">
@@ -108,7 +95,7 @@
                 data: { turbo_confirm: true } %>
           </div>
         </div>
-      </details>
+      <% end %>
     <% end %>
-  </div>
+  <% end %>
 <% end %>