New Design System + Codebase Refresh (#1823)

Since the very first 0.1.0-alpha.1 release, we've been moving quickly to add new features to the Maybe app. In doing so, some parts of the codebase have become outdated, unnecessary, or overly-complex as a natural result of this feature prioritization.

Now that "core" Maybe is complete, we're moving into a second phase of development where we'll be working hard to improve the accuracy of existing features and build additional features on top of "core". This PR is a quick overhaul of the existing codebase aimed to:

- Establish the brand new and simplified dashboard view (pictured above)
- Establish and move towards the conventions introduced in Cursor rules and project design overview #1788
- Consolidate layouts and improve the performance of layout queries
- Organize the core models of the Maybe domain (i.e. Account::Entry, Account::Transaction, etc.) and break out specific traits of each model into dedicated concerns for better readability
- Remove stale / dead code from codebase
- Remove overly complex code paths in favor of simpler ones

app/views/account/valuations/_valuation.html.erb

@@ -1,43 +1,43 @@
-<%# locals: (entry:, selectable: true, balance_trend: nil) %>
+<%# locals: (entry:, balance_trend: nil, **) %>
+
+<% valuation = entry.entryable %>
 
 <% color = balance_trend&.trend&.color || "#D444F1" %>
 <% icon = balance_trend&.trend&.icon || "plus" %>
 
-<div class="p-4 grid grid-cols-12 items-center text-primary text-sm font-medium">
-  <div class="col-span-8 flex items-center gap-4">
-    <% if selectable %>
-      <%= check_box_tag dom_id(entry, "selection"),
+<%= turbo_frame_tag dom_id(entry) do %>
+  <%= turbo_frame_tag dom_id(valuation) do %>
+    <div class="p-4 grid grid-cols-12 items-center text-primary text-sm font-medium">
+      <div class="col-span-8 flex items-center gap-4">
+        <%= check_box_tag dom_id(entry, "selection"),
                         class: "checkbox checkbox--light",
                         data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection" } %>
-    <% end %>
 
-    <div class="flex items-center gap-3">
-      <%= tag.div class: "w-6 h-6 rounded-full p-1.5 flex items-center justify-center", style: mixed_hex_styles(color) do %>
-        <%= lucide_icon icon, class: "w-4 h-4 shrink-0" %>
-      <% end %>
+        <div class="flex items-center gap-3">
+          <%= tag.div class: "w-6 h-6 rounded-full p-1.5 flex items-center justify-center", style: mixed_hex_styles(color) do %>
+            <%= lucide_icon icon, class: "w-4 h-4 shrink-0" %>
+          <% end %>
 
-      <div class="truncate text-primary">
-        <% if entry.new_record? %>
-          <%= content_tag :p, entry.display_name %>
-        <% else %>
-          <%= link_to entry.display_name,
+          <div class="truncate text-primary">
+            <%= link_to entry.display_name,
                         account_entry_path(entry),
                         data: { turbo_frame: "drawer", turbo_prefetch: false },
                         class: "hover:underline hover:text-gray-800" %>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-span-2 justify-self-end font-medium text-sm">
+        <% if balance_trend&.trend %>
+          <%= tag.span format_money(balance_trend.trend.value), style: "color: #{balance_trend.trend.color}" %>
+        <% else %>
+          <%= tag.span "--", class: "text-gray-400" %>
         <% end %>
       </div>
+
+      <div class="col-span-2 justify-self-end">
+        <%= tag.p format_money(entry.amount_money), class: "font-medium text-sm text-primary" %>
+      </div>
     </div>
-  </div>
-
-  <div class="col-span-2 justify-self-end font-medium text-sm">
-    <% if balance_trend&.trend %>
-      <%= tag.span format_money(balance_trend.trend.value), style: "color: #{balance_trend.trend.color}" %>
-    <% else %>
-      <%= tag.span "--", class: "text-subdued" %>
-    <% end %>
-  </div>
-
-  <div class="col-span-2 justify-self-end">
-    <%= tag.p format_money(entry.amount_money), class: "font-medium text-sm text-primary" %>
-  </div>
-</div>
+  <% end %>
+<% end %>

app/views/account/valuations/edit.html.erb

@@ -1,3 +0,0 @@
-<%= turbo_frame_tag dom_id(@entry) do %>
-  <%= render "account/valuations/form", entry: @entry %>
-<% end %>

app/views/account/valuations/index.html.erb

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag dom_id(@account, "valuations") do %>
-  <div class="bg-white space-y-4 p-5 border border-alpha-black-25 rounded-xl shadow-xs">
+  <div class="bg-white space-y-4 p-5 shadow-border-xs rounded-xl">
     <div class="flex items-center justify-between">
       <%= tag.h2 t(".valuations"), class: "font-medium text-lg" %>
       <%= link_to new_account_valuation_path(@account),
@@ -18,7 +18,7 @@
         <%= tag.div class: "col-span-1" %>
       </div>
 
-      <div class="rounded-lg bg-white border-alpha-black-25 shadow-xs">
+      <div class="rounded-lg bg-white shadow-border-xs">
         <%= turbo_frame_tag dom_id(@account.entries.account_valuations.new) %>
 
         <% if @entries.any? %>