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/trades/_header.html.erb

@@ -26,7 +26,7 @@
   <% trade = entry.trade %>
 
   <div class="mb-2">
-    <%= disclosure t(".overview") do %>
+    <%= render DisclosureComponent.new(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">

app/views/trades/_trade.html.erb

@@ -12,9 +12,12 @@
 
         <div class="max-w-full">
           <%= tag.div class: ["flex items-center gap-2"] do %>
-            <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-600/5 text-gray-600">
-              <%= entry.name.first.upcase %>
-            </div>
+            <%= render FilledIconComponent.new(
+              variant: :text,
+              text: entry.name,
+              size: "sm",
+              rounded: true
+            ) %>
 
             <div class="truncate">
               <%= link_to entry.name,

app/views/trades/new.html.erb

@@ -1,3 +1,6 @@
-<%= modal_form_wrapper title: t(".title") do %>
-  <%= render "trades/form", entry: @entry %>
+<%= render DialogComponent.new do |dialog| %>
+  <% dialog.with_header(title: t(".title")) %>
+  <% dialog.with_body do %>
+    <%= render "trades/form", entry: @entry %>
+  <% end %>
 <% end %>

app/views/trades/show.html.erb

@@ -1,11 +1,12 @@
-<%= drawer do %>
-  <%= render "trades/header", entry: @entry %>
+<%= render DialogComponent.new(variant: "drawer") do |dialog| %>
+  <% dialog.with_header do %>
+    <%= render "trades/header", entry: @entry %>
+  <% end %>
 
   <% trade = @entry.trade %>
 
-  <div class="space-y-2">
-    <!-- Details Section -->
-    <%= disclosure t(".details") do %>
+  <% dialog.with_body do %>
+    <% dialog.with_section(title: t(".details"), open: true) do %>
       <div class="pb-4">
         <%= styled_form_with model: @entry,
               url: trade_path(@entry),
@@ -42,8 +43,7 @@
       </div>
     <% end %>
 
-    <!-- Additional Section -->
-    <%= disclosure t(".additional") do %>
+    <% dialog.with_section(title: t(".additional")) do %>
       <div class="pb-4">
         <%= styled_form_with model: @entry,
               url: trade_path(@entry),
@@ -58,8 +58,7 @@
       </div>
     <% end %>
 
-    <!-- Settings Section -->
-    <%= disclosure t(".settings") do %>
+    <% dialog.with_section(title: t(".settings")) do %>
       <div class="pb-4">
         <!-- Exclude Trade Form -->
         <%= styled_form_with model: @entry,
@@ -72,13 +71,7 @@
               <p class="text-secondary"><%= t(".exclude_subtitle") %></p>
             </div>
 
-            <div class="relative inline-block select-none">
-              <%= f.check_box :excluded,
-                      class: "sr-only peer",
-                      "data-auto-submit-form-target": "auto" %>
-              <label for="entry_excluded"
-                         class="switch"></label>
-            </div>
+            <%= f.toggle :excluded, { data: { auto_submit_form_target: "auto" } } %>
           </div>
         <% end %>
 
@@ -98,5 +91,5 @@
         </div>
       </div>
     <% end %>
-  </div>
+  <% end %>
 <% end %>