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/pages/dashboard/_balance_sheet.html.erb

@@ -1,9 +1,19 @@
 <%# locals: (balance_sheet:) %>
 
-<div class="space-y-4">
+<div class="space-y-4 overflow-x-auto p-0.5">
   <% balance_sheet.classification_groups.each do |classification_group| %>
     <div class="bg-container shadow-border-xs rounded-xl space-y-4 p-4">
-      <h2 class="text-lg font-medium"><%= classification_group.display_name %></h2>
+      <h2 class="text-lg font-medium inline-flex items-center gap-1.5">
+        <span>
+          <%= classification_group.display_name %>
+        </span>
+
+        <% if classification_group.account_groups.any? %>
+          <span class="text-secondary">&middot;</span>
+
+          <span class="text-secondary font-medium text-lg"><%= classification_group.total_money.format(precision: 0) %></span>
+        <% end %>
+      </h2>
 
       <% if classification_group.account_groups.any? %>
         <div class="space-y-4">
@@ -23,9 +33,9 @@
           </div>
         </div>
 
-        <div class="bg-surface rounded-xl p-1 space-y-1">
+        <div class="bg-surface rounded-xl p-1 space-y-1 overflow-x-auto">
           <div class="px-4 py-2 flex items-center uppercase text-xs font-medium text-secondary">
-            <div class="hidden sm:block">Name</div>
+            <div class="w-40">Name</div>
             <div class="ml-auto text-right flex items-center gap-6">
               <div class="w-24">
                 <p>Weight</p>
@@ -36,33 +46,22 @@
             </div>
           </div>
 
-          <div class="shadow-border-xs rounded-lg bg-container">
+          <div class="shadow-border-xs rounded-lg bg-container min-w-fit">
             <% classification_group.account_groups.each do |account_group| %>
               <details class="group rounded-lg open:bg-surface font-medium text-sm">
                 <summary class="cursor-pointer p-4 group-open:bg-surface bg-container rounded-lg flex items-center justify-between">
-                  <div class="items-center gap-4 hidden md:flex">
-                    <%= lucide_icon("chevron-right", class: "group-open:rotate-90 text-secondary w-5 h-5") %>
+                  <div class="w-40 shrink-0 flex items-center gap-4">
+                    <%= icon("chevron-right", class: "group-open:rotate-90") %>
 
                     <p><%= account_group.name %></p>
                   </div>
 
                   <div class="ml-auto flex items-center text-right gap-6">
-                    <div class="w-24 flex items-center justify-end gap-2">
-                      <div class="hidden sm:flex sm:items-center sm:justify-end sm:gap-2">
-                        <%= render partial: "shared/progress_circle", locals: { progress: account_group.weight, color: account_group.color } %>
-                        <p><%= number_to_percentage(account_group.weight, precision: 0) %></p>
-                      </div>
-                      <div class="flex sm:hidden items-center gap-2">
-                        <div class="flex gap-[3px]">
-                          <% 10.times do |i| %>
-                            <div class="w-[2px] h-[10px] rounded-lg <%= i < (account_group.weight / 10.0).ceil ? "" : "opacity-20" %>" style="background-color: <%= account_group.color %>;"></div>
-                          <% end %>
-                        </div>
-                        <p class="text-sm"><%= number_to_percentage(account_group.weight, precision: 2) %></p>
-                      </div>
+                    <div class="w-24 shrink-0 flex items-center justify-end gap-2">
+                      <%= render "pages/dashboard/group_weight", weight: account_group.weight, color: account_group.color %>
                     </div>
 
-                    <div class="w-40">
+                    <div class="w-40 shrink-0">
                       <p><%= format_money(account_group.total_money) %></p>
                     </div>
                   </div>
@@ -70,39 +69,25 @@
 
                 <div>
                   <% account_group.accounts.each_with_index do |account, idx| %>
-                    <div class="pl-4 sm:pl-12 pr-4 py-3 flex items-center justify-between text-sm font-medium">
-                      <div class="hidden sm:flex sm:items-center sm:gap-3">
+                    <div class="pl-12 pr-4 py-3 flex items-center justify-between text-sm font-medium">
+                      <div class="flex items-center gap-3">
                         <%= render "accounts/logo", account: account, size: "sm", color: account_group.color %>
+
                         <%= link_to account.name, account_path(account) %>
                       </div>
 
                       <div class="ml-auto flex items-center text-right gap-6">
-                        <div class="w-24 flex items-center justify-end gap-2">
-                          <div class="hidden sm:flex sm:items-center sm:justify-end sm:gap-2">
-                            <%= render partial: "shared/progress_circle", locals: { progress: account.weight, color: account_group.color } %>
-                            <p><%= number_to_percentage(account.weight, precision: 0) %></p>
-                          </div>
-                          <div class="flex sm:hidden items-center gap-2">
-                            <div class="flex gap-[3px]">
-                              <% 10.times do |i| %>
-                                <div class="w-[2px] h-[10px] rounded-lg <%= i < (account.weight / 10.0).ceil ? "" : "opacity-20" %>" style="background-color: <%= account_group.color %>;"></div>
-                              <% end %>
-                            </div>
-                            <p class="text-sm"><%= number_to_percentage(account.weight, precision: 2) %></p>
-                          </div>
+                        <div class="w-24 shrink-0 flex items-center justify-end gap-2">
+                          <%= render "pages/dashboard/group_weight", weight: account.weight, color: account_group.color %>
                         </div>
 
-                        <div class="w-40">
+                        <div class="w-40 shrink-0">
                           <p><%= format_money(account.balance_money) %></p>
-                          <div class="sm:hidden text-xs text-secondary truncate max-w-28">
-                            <%= account.name %>
-                          </div>
                         </div>
                       </div>
                     </div>
 
                     <% if idx < account_group.accounts.size - 1 %>
-
                       <div class="pl-[84px] pr-40">
                         <div class="w-full border-subdued border-b"></div>
                       </div>
@@ -115,10 +100,14 @@
         </div>
 
       <% else %>
-        <div class="py-20 flex flex-col items-center">
-          <%= lucide_icon classification_group.icon, class: "w-6 h-6 shrink-0 text-secondary" %>
-          <p class="text-primary text-sm font-medium mb-1 mt-4">No <%= classification_group.display_name %></p>
-          <p class="text-secondary text-sm max-w-xs text-center"><%= "You have no #{classification_group.display_name}" %></p>
+        <div class="py-10 flex flex-col items-center">
+          <%= render FilledIconComponent.new(
+            variant: :container,
+            icon: classification_group.icon,
+          ) %>
+
+          <p class="text-primary text-sm font-medium mb-1 mt-4">No <%= classification_group.display_name %> yet</p>
+          <p class="text-secondary text-sm text-center"><%= "Add your #{classification_group.display_name} accounts to see a full breakdown" %></p>
         </div>
       <% end %>
     </div>

app/views/pages/dashboard/_group_weight.html.erb

@@ -0,0 +1,10 @@
+<%# locals: (weight:, color:) %>
+
+<div class="flex items-center gap-2">
+  <div class="flex gap-[3px]">
+    <% 10.times do |i| %>
+      <div class="w-[2px] h-[10px] rounded-lg <%= i < (weight / 10.0).ceil ? "" : "opacity-20" %>" style="background-color: <%= color %>;"></div>
+    <% end %>
+  </div>
+  <p class="text-sm"><%= number_to_percentage(weight, precision: 2) %></p>
+</div>

app/views/pages/dashboard/_net_worth_chart.html.erb

@@ -14,8 +14,13 @@
       <% end %>
     </div>
   </div>
-  <%= form_with url: root_path, method: :get, class: "flex items-center gap-4", data: { controller: "auto-submit-form" } do |form| %>
-    <%= period_select form: form, selected: period %>
+
+  <%= form_with url: root_path, method: :get, data: { controller: "auto-submit-form" } do |form| %>
+    <%= form.select :period,
+                    Period.as_options,
+                    { selected: period.key },
+                    data: { "auto-submit-form-target": "auto" },
+                    class: "bg-container border border-secondary font-medium rounded-lg px-3 py-2 text-sm pr-7 cursor-pointer text-primary focus:outline-hidden focus:ring-0" %>
   <% end %>
 </div>
 

app/views/pages/dashboard/_no_account_empty_state.html.erb

@@ -1,15 +0,0 @@
-<div class="flex justify-center items-center h-[800px]">
-  <div class="text-center flex flex-col gap-4 items-center max-w-[300px]">
-    <%= lucide_icon "layers", class: "w-6 h-6 text-secondary" %>
-
-    <div class="space-y-1 text-sm">
-      <p class="text-primary font-medium"><%= t(".no_account_title") %></p>
-      <p class="text-secondary"><%= t(".no_account_subtitle") %></p>
-    </div>
-
-    <%= link_to new_account_path, class: "btn btn--primary flex items-center gap-1", data: { turbo_frame: "modal" } do %>
-      <%= lucide_icon("plus", class: "w-5 h-5") %>
-      <span><%= t(".new_account") %></span>
-    <% end %>
-  </div>
-</div>

app/views/pages/dashboard/_no_accounts_graph_placeholder.html.erb

@@ -0,0 +1,17 @@
+<div class="h-[300px] lg:h-[340px] bg-container shadow-border-xs rounded-xl py-4 flex flex-col items-center justify-center">
+  <div class="space-y-3 text-center flex flex-col items-center">
+    <%= render FilledIconComponent.new(
+      variant: :container,
+      icon: "layers",
+    ) %>
+
+    <p class="text-sm font-medium text-primary">No accounts yet</p>
+    <p class="text-secondary text-sm">Add accounts to display net worth data</p>
+    <%= render LinkComponent.new(
+      text: "Add account",
+      icon: "plus",
+      href: new_account_path,
+      frame: :modal
+    ) %>
+  </div>
+</div>