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/entries/_entry.html.erb

@@ -1,5 +1,4 @@
-<%# locals: (entry:, selectable: true, balance_trend: nil) %>
+<%# locals: (entry:, balance_trend: nil, view_ctx: "global") %>
 
-<%= turbo_frame_tag dom_id(entry) do %>
-  <%= render partial: entry.entryable.to_partial_path, locals: { entry:, selectable:, balance_trend: } %>
-<% end %>
+<%= render partial: entry.entryable.to_partial_path,
+           locals: { entry: entry, balance_trend: balance_trend, view_ctx: view_ctx } %>

app/views/account/entries/_entry_group.html.erb

@@ -1,13 +1,12 @@
-<%# locals: (date:, entries:, content:, selectable:, totals: false) %>
+<%# locals: (date:, entries:, content:, totals: false) %>
+
 <div id="entry-group-<%= date %>" class="bg-gray-25 rounded-xl p-1 w-full" data-bulk-select-target="group">
   <div class="py-2 px-4 flex items-center justify-between font-medium text-xs text-secondary">
     <div class="flex pl-0.5 items-center gap-4">
-      <% if selectable %>
         <%= check_box_tag "#{date}_entries_selection",
                           class: ["checkbox checkbox--light", "hidden": entries.size == 0],
                           id: "selection_entry_#{date}",
                           data: { action: "bulk-select#toggleGroupSelection" } %>
-      <% end %>
 
       <p class="uppercase space-x-1.5">
         <%= tag.span I18n.l(date, format: :long) %>
@@ -22,7 +21,7 @@
       </div>
     <% end %>
   </div>
-  <div class="bg-white shadow-xs rounded-md border border-alpha-black-25 divide-y divide-alpha-black-50">
+  <div class="bg-white shadow-border-xs rounded-md divide-y divide-alpha-black-50">
     <%= content %>
   </div>
 </div>

app/views/account/entries/_loading.html.erb

@@ -1,4 +1,4 @@
-<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="p-5 flex justify-center items-center">
     <%= tag.p t(".loading"), class: "text-secondary animate-pulse text-sm" %>
   </div>

app/views/account/holdings/_cash.html.erb

@@ -14,7 +14,7 @@
 
   <div class="col-span-2 flex justify-end items-center gap-2">
     <% cash_weight = account.balance.zero? ? 0 : account.cash_balance / account.balance * 100 %>
-    <%= render "shared/progress_circle", progress: cash_weight, text_class: "text-blue-500" %>
+    <%= render "shared/progress_circle", progress: cash_weight %>
     <%= tag.p number_to_percentage(cash_weight, precision: 1) %>
   </div>
 

app/views/account/holdings/_holding.html.erb

@@ -18,7 +18,7 @@
 
     <div class="col-span-2 flex justify-end items-center gap-2">
       <% if holding.weight %>
-        <%= render "shared/progress_circle", progress: holding.weight, text_class: "text-blue-500" %>
+        <%= render "shared/progress_circle", progress: holding.weight %>
         <%= tag.p number_to_percentage(holding.weight, precision: 1) %>
       <% else %>
         <%= tag.p "--", class: "text-secondary mb-5" %>

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

@@ -1,5 +1,5 @@
 <%= turbo_frame_tag dom_id(@account, "holdings") 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 rounded-xl shadow-border-xs">
     <div class="flex items-center justify-between">
       <%= tag.h2 t(".holdings"), class: "font-medium text-lg" %>
       <%= link_to new_account_trade_path(account_id: @account.id),
@@ -20,7 +20,7 @@
         <%= tag.p t(".return"), class: "col-span-2 justify-self-end" %>
       </div>
 
-      <div class="rounded-lg bg-white border-alpha-black-25 shadow-xs">
+      <div class="rounded-lg bg-white shadow-border-xs">
         <% if @account.current_holdings.any? %>
           <%= render "account/holdings/cash", account: @account %>
           <%= render "account/holdings/ruler" %>

app/views/account/trades/_selection_bar.html.erb

@@ -1,15 +0,0 @@
-<div class="fixed bottom-6 z-10 flex items-center justify-between rounded-xl bg-gray-900 px-4 text-sm text-white w-[420px] py-1.5">
-  <div class="flex items-center gap-2">
-    <%= check_box_tag "entry_selection", 1, true, class: "checkbox checkbox--dark", data: { action: "bulk-select#deselectAll" } %>
-
-    <p data-bulk-select-target="selectionBarText"></p>
-  </div>
-
-  <div class="flex items-center gap-1 text-secondary">
-    <%= form_with url: bulk_delete_account_transactions_path, data: { turbo_confirm: true, turbo_frame: "_top" } do %>
-      <button type="button" data-bulk-select-scope-param="bulk_delete" data-action="bulk-select#submitBulkRequest" class="p-1.5 group hover:bg-gray-700 flex items-center justify-center rounded-md" title="Delete">
-        <%= lucide_icon "trash-2", class: "w-5 group-hover:text-white" %>
-      </button>
-    <% end %>
-  </div>
-</div>

app/views/account/trades/_trade.html.erb

@@ -1,52 +1,50 @@
-<%# locals: (entry:, selectable: true, balance_trend: nil) %>
+<%# locals: (entry:, balance_trend: nil, **) %>
 
-<% trade, account = entry.account_trade, entry.account %>
+<% trade = entry.entryable %>
 
-<div class="grid grid-cols-12 items-center <%= entry.excluded ? "text-subdued bg-gray-25" : "text-primary" %> text-sm font-medium p-4">
-  <div class="col-span-6 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(trade) do %>
+    <div class="grid grid-cols-12 items-center <%= entry.excluded ? "text-gray-400 bg-gray-25" : "text-primary" %> text-sm font-medium p-4">
+      <div class="col-span-6 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="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.display_name.first.upcase %>
-        </div>
+        <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.display_name.first.upcase %>
+            </div>
 
-        <div class="truncate">
-          <% if entry.new_record? %>
-            <%= content_tag :p, entry.display_name %>
-          <% else %>
-            <%= link_to entry.display_name,
+            <div class="truncate">
+              <%= link_to entry.display_name,
                         account_entry_path(entry),
                         data: { turbo_frame: "drawer", turbo_prefetch: false },
                         class: "hover:underline hover:text-gray-800" %>
+            </div>
           <% end %>
         </div>
-      <% end %>
-    </div>
-  </div>
+      </div>
 
-  <div class="col-span-2 flex items-center">
-    <%= render "categories/badge", category: trade_category %>
-  </div>
+      <div class="col-span-2 flex items-center">
+        <%= render "categories/badge", category: trade_category %>
+      </div>
 
-  <div class="col-span-2 justify-self-end font-medium text-sm">
-    <%= content_tag :p,
+      <div class="col-span-2 justify-self-end font-medium text-sm">
+        <%= content_tag :p,
                     format_money(-entry.amount_money),
                     class: ["text-green-600": entry.amount.negative?] %>
-  </div>
-
-  <div class="col-span-2 justify-self-end">
-    <% if balance_trend&.trend %>
-      <div class="flex items-center gap-2">
-        <%= tag.p format_money(balance_trend.trend.current), class: "font-medium text-sm text-primary" %>
       </div>
-    <% else %>
-      <%= tag.p "--", class: "font-medium text-sm text-subdued" %>
-    <% end %>
-  </div>
-</div>
+
+      <div class="col-span-2 justify-self-end">
+        <% if balance_trend&.trend %>
+          <div class="flex items-center gap-2">
+            <%= tag.p format_money(balance_trend.trend.current), class: "font-medium text-sm text-primary" %>
+          </div>
+        <% else %>
+          <%= tag.p "--", class: "font-medium text-sm text-gray-400" %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

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

@@ -1,42 +0,0 @@
-<%= turbo_frame_tag dom_id(@account, "trades") do %>
-  <div id="trades" data-controller="bulk-select" data-bulk-select-resource-value="<%= t(".trade") %>" class="bg-white space-y-4 p-5 border border-alpha-black-25 rounded-xl shadow-xs">
-    <div class="flex justify-between items-center">
-      <h3 class="font-medium text-lg"><%= t(".trades") %></h3>
-      <%= link_to new_account_trade_path(@account),
-                  id:    dom_id(@account, "new_trade"),
-                  class: "flex gap-1 font-medium items-center bg-gray-50 text-primary p-2 rounded-lg",
-                  data:  { turbo_frame: :modal } do %>
-        <%= lucide_icon("plus", class: "w-5 h-5 text-primary") %>
-        <span class="text-sm"><%= t(".new") %></span>
-      <% end %>
-    </div>
-
-    <div class="bg-gray-25 rounded-xl grid grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-5 py-3">
-      <div class="pl-0.5 col-span-6 flex items-center gap-4">
-        <%= check_box_tag "selection_entry",
-                          class: "checkbox checkbox--light",
-                          data:  { action: "bulk-select#togglePageSelection" } %>
-        <%= tag.p t(".trade") %>
-      </div>
-
-      <%= tag.p t(".type"), class: "col-span-3 justify-self-end" %>
-      <%= tag.p t(".amount"), class: "col-span-3 justify-self-end" %>
-    </div>
-
-    <div>
-      <div id="transaction-selection-bar" data-bulk-select-target="selectionBar" class="flex justify-center hidden">
-        <%= render "selection_bar" %>
-      </div>
-
-      <% if @entries.empty? %>
-        <p class="text-secondary py-4"><%= t(".no_trades") %></p>
-      <% else %>
-        <div class="space-y-6">
-          <%= entries_by_date(@entries) do |entries, _transfers| %>
-            <%= render partial: "account/trades/trade", collection: entries, as: :entry %>
-          <% end %>
-        </div>
-      <% end %>
-    </div>
-  </div>
-<% end %>

app/views/account/transactions/_transaction.html.erb

@@ -1,75 +1,98 @@
-<%# locals: (entry:, selectable: true, balance_trend: nil) %>
+<%# locals: (entry:, balance_trend: nil, view_ctx: "global") %>
 
-<div class="grid grid-cols-12 items-center text-primary text-sm font-medium p-4 <%= @focused_record == entry ? "border border-gray-900 rounded-lg" : "" %>">
-  <div class="pr-10 flex items-center gap-4 <%= balance_trend ? "col-span-6" : "col-span-8" %>">
-    <% if selectable %>
-      <%= check_box_tag dom_id(entry, "selection"),
-                        disabled: entry.entryable.transfer?,
-                        class: "checkbox checkbox--light",
-                        data: { id: entry.id, "bulk-select-target": "row", action: "bulk-select#toggleRowSelection" } %>
-    <% end %>
+<% transaction = entry.entryable %>
 
-    <div class="max-w-full">
-      <%= content_tag :div, class: ["flex items-center gap-2"] do %>
-        <% if entry.entryable.merchant&.icon_url %>
-          <%= image_tag entry.entryable.merchant.icon_url, class: "w-6 h-6 rounded-full", loading: "lazy" %>
-        <% else %>
-          <%= render "shared/circle_logo", name: entry.display_name, size: "sm" %>
-        <% end %>
+<%= turbo_frame_tag dom_id(entry) do %>
+  <%= turbo_frame_tag dom_id(transaction) do %>
+    <div class="grid grid-cols-12 items-center text-primary text-sm font-medium p-4
+                <%= @focused_record == entry || @focused_record == transaction ?
+                    "border border-gray-900 rounded-lg" : "" %>">
 
-        <div class="truncate">
-          <div class="space-y-0.5">
-            <div class="flex items-center gap-1">
-              <% if entry.new_record? %>
-                <%= content_tag :p, entry.display_name %>
-              <% else %>
-                <%= link_to entry.entryable.transfer? ? entry.entryable.transfer.name : entry.display_name,
-                        entry.entryable.transfer? ? transfer_path(entry.entryable.transfer) : account_entry_path(entry),
-                        data: { turbo_frame: "drawer", turbo_prefetch: false },
-                        class: "hover:underline hover:text-gray-800" %>
-              <% end %>
+      <div class="pr-10 flex items-center gap-4
+                  <%= balance_trend ? "col-span-6" : "col-span-8" %>">
+        <%= check_box_tag dom_id(entry, "selection"),
+            disabled: transaction.transfer?,
+            class: "checkbox checkbox--light",
+            data: {
+              id: entry.id,
+              "bulk-select-target": "row",
+              action: "bulk-select#toggleRowSelection"
+            } %>
 
-              <% if entry.excluded %>
-                <span title="One-time <%= entry.amount.negative? ? "income" : "expense" %> (excluded from averages)">
-                  <%= lucide_icon "asterisk", class: "w-4 h-4 shrink-0 text-orange-500" %>
-                </span>
-              <% end %>
+        <div class="max-w-full">
+          <%= content_tag :div, class: ["flex items-center gap-2"] do %>
+            <% if transaction.merchant&.icon_url %>
+              <%= image_tag transaction.merchant.icon_url,
+                  class: "w-6 h-6 rounded-full",
+                  loading: "lazy" %>
+            <% else %>
+              <%= render "shared/circle_logo",
+                  name: entry.display_name,
+                  size: "sm" %>
+            <% end %>
 
-              <% if entry.entryable.transfer? %>
-                <%= render "account/transactions/transfer_match", entry: entry %>
-              <% end %>
+            <div class="truncate">
+              <div class="space-y-0.5">
+                <div class="flex items-center gap-1">
+                  <%= link_to(
+                        transaction.transfer? ? transaction.transfer.name : entry.display_name,
+                        transaction.transfer? ? transfer_path(transaction.transfer) : account_entry_path(entry),
+                        data: {
+                          turbo_frame: "drawer",
+                          turbo_prefetch: false
+                        },
+                        class: "hover:underline hover:text-gray-800"
+                      ) %>
+
+                  <% if entry.excluded %>
+                    <span title="One-time <%= entry.amount.negative? ? "income" : "expense" %> (excluded from averages)">
+                      <%= lucide_icon "asterisk", class: "w-4 h-4 shrink-0 text-orange-500" %>
+                    </span>
+                  <% end %>
+
+                  <% if transaction.transfer? %>
+                    <%= render "account/transactions/transfer_match", transaction: transaction %>
+                  <% end %>
+                </div>
+
+                <div class="text-secondary text-xs font-normal">
+                  <% if transaction.transfer? %>
+                    <%= render "transfers/account_links",
+                        transfer: transaction.transfer,
+                        is_inflow: transaction.transfer_as_inflow.present? %>
+                  <% else %>
+                    <%= link_to entry.account.name,
+                        account_path(entry.account, tab: "transactions", focused_record_id: entry.id),
+                        data: { turbo_frame: "_top" },
+                        class: "hover:underline" %>
+                  <% end %>
+                </div>
+              </div>
             </div>
+          <% end %>
+        </div>
+      </div>
 
-            <div class="text-secondary text-xs font-normal">
-              <% if entry.entryable.transfer? %>
-                <%= render "transfers/account_links", transfer: entry.entryable.transfer, is_inflow: entry.entryable.transfer_as_inflow.present? %>
-              <% else %>
-                <%= link_to entry.account.name, account_path(entry.account, tab: "transactions", focused_record_id: entry.id), data: { turbo_frame: "_top" }, class: "hover:underline" %>
-              <% end %>
-            </div>
-          </div>
+      <div class="flex items-center gap-1 col-span-2">
+        <%= render "account/transactions/transaction_category", transaction: transaction %>
+      </div>
+
+      <div class="col-span-2 ml-auto">
+        <%= content_tag :p,
+            transaction.transfer? && view_ctx == "global" ? "+/- #{format_money(entry.amount_money.abs)}" : format_money(-entry.amount_money),
+            class: ["text-green-600": entry.amount.negative?] %>
+      </div>
+
+      <% if balance_trend %>
+        <div class="col-span-2 justify-self-end">
+          <% if balance_trend.trend %>
+            <%= tag.p format_money(balance_trend.trend.current),
+                class: "font-medium text-sm text-primary" %>
+          <% else %>
+            <%= tag.p "--", class: "font-medium text-sm text-gray-400" %>
+          <% end %>
         </div>
       <% end %>
     </div>
-  </div>
-
-  <div class="flex items-center gap-1 col-span-2">
-    <%= render "account/transactions/transaction_category", entry: entry %>
-  </div>
-
-  <div class="col-span-2 ml-auto">
-    <%= content_tag :p,
-                    format_money(-entry.amount_money),
-                    class: ["text-green-600": entry.amount.negative?] %>
-  </div>
-
-  <% if balance_trend %>
-    <div class="col-span-2 justify-self-end">
-      <% if balance_trend.trend %>
-        <%= tag.p format_money(balance_trend.trend.current), class: "font-medium text-sm text-primary" %>
-      <% else %>
-        <%= tag.p "--", class: "font-medium text-sm text-subdued" %>
-      <% end %>
-    </div>
   <% end %>
-</div>
+<% end %>

app/views/account/transactions/_transaction_category.html.erb

@@ -1,9 +1,9 @@
-<%# locals: (entry:) %>
+<%# locals: (transaction:) %>
 
-<div id="<%= dom_id(entry, "category_menu") %>">
-  <% if entry.account_transaction.transfer&.categorizable? || entry.account_transaction.transfer.nil? %>
-    <%= render "categories/menu", transaction: entry.account_transaction %>
+<div id="<%= dom_id(transaction, "category_menu") %>">
+  <% if transaction.transfer&.categorizable? || transaction.transfer.nil? %>
+    <%= render "categories/menu", transaction: transaction %>
   <% else %>
-    <%= render "categories/badge", category: entry.account_transaction.transfer&.payment? ? payment_category :  transfer_category %>
+    <%= render "categories/badge", category: transaction.transfer&.payment? ? payment_category :  transfer_category %>
   <% end %>
 </div>

app/views/account/transactions/_transfer_match.html.erb

@@ -1,26 +1,26 @@
-<%# locals: (entry:) %>
+<%# locals: (transaction:) %>
 
-<div id="<%= dom_id(entry, "transfer_match") %>" class="flex items-center gap-1">
-  <% if entry.account_transaction.transfer.confirmed? %>
-    <span title="<%= entry.account_transaction.transfer.payment? ? "Payment" : "Transfer" %> is confirmed">
+<div id="<%= dom_id(transaction, "transfer_match") %>" class="flex items-center gap-1">
+  <% if transaction.transfer.confirmed? %>
+    <span title="<%= transaction.transfer.payment? ? "Payment" : "Transfer" %> is confirmed">
       <%= lucide_icon "link-2", class: "w-4 h-4 text-indigo-600" %>
     </span>
-  <% elsif entry.account_transaction.transfer.pending? %>
+  <% elsif transaction.transfer.pending? %>
     <span class="inline-flex items-center rounded-full bg-indigo-50 px-2 py-0.5 text-xs font-medium text-indigo-700">
       Auto-matched
     </span>
 
-    <%= button_to transfer_path(entry.account_transaction.transfer, transfer: { status: "confirmed" }),
+    <%= button_to transfer_path(transaction.transfer, transfer: { status: "confirmed" }),
                     method: :patch,
-                    class: "text-secondary hover:text-gray-800 flex items-center justify-center",
+                    class: "text-secondary hover:text-gray-800 flex items-center justify-center cursor-pointer",
                     title: "Confirm match" do %>
       <%= lucide_icon "check", class: "w-4 h-4 text-indigo-400 hover:text-indigo-600" %>
     <% end %>
 
-    <%= button_to transfer_path(entry.account_transaction.transfer, transfer: { status: "rejected" }),
+    <%= button_to transfer_path(transaction.transfer, transfer: { status: "rejected" }),
                     method: :patch,
                     data: { turbo: false },
-                    class: "text-secondary hover:text-gray-800 flex items-center justify-center",
+                    class: "text-secondary hover:text-gray-800 flex items-center justify-center cursor-pointer",
                     title: "Reject match" do %>
       <%= lucide_icon "x", class: "w-4 h-4 text-subdued hover:text-gray-600" %>
     <% end %>

app/views/account/transactions/bulk_edit.html.erb

@@ -1,7 +1,7 @@
 <%= turbo_frame_tag "bulk_transaction_edit_drawer" do %>
   <dialog data-controller="modal"
           data-action="click->modal#clickOutside"
-    class="bg-white border border-alpha-black-25 rounded-2xl max-h-[calc(100vh-32px)] max-w-[480px] w-full shadow-xs h-full mt-4 mr-4 ml-auto">
+    class="bg-white shadow-border-xs rounded-2xl max-h-[calc(100vh-32px)] max-w-[480px] w-full mt-4 mr-4 ml-auto">
     <%= styled_form_with url: bulk_update_account_transactions_path, scope: "bulk_update", class: "h-full", data: { turbo_frame: "_top" } do |form| %>
       <div class="flex h-full flex-col justify-between p-4">
         <div>

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

@@ -1,32 +0,0 @@
-<%= turbo_frame_tag dom_id(@account, "transactions") do %>
-  <div class="bg-white space-y-4 p-5 border border-alpha-black-25 rounded-xl shadow-xs">
-    <div class="flex justify-between items-center">
-      <h3 class="font-medium text-lg"><%= t(".transactions") %></h3>
-      <%= link_to new_account_transaction_path(account_id: @account),
-                  class: "flex gap-1 font-medium items-center bg-gray-50 text-primary p-2 rounded-lg",
-                  data:  { turbo_frame: :modal } do %>
-        <%= lucide_icon("plus", class: "w-5 h-5 text-primary") %>
-        <span class="text-sm"><%= t(".new") %></span>
-      <% end %>
-    </div>
-
-    <div id="transactions" data-controller="bulk-select" data-bulk-select-resource-value="<%= t(".transaction") %>">
-      <div id="transaction-selection-bar" data-bulk-select-target="selectionBar" class="flex justify-center hidden">
-        <%= render "selection_bar" %>
-      </div>
-
-      <% if @entries.empty? %>
-        <p class="text-secondary py-4"><%= t(".no_transactions") %></p>
-      <% else %>
-        <div class="space-y-6">
-          <%= entries_by_date(@entries) do |entries, _transfers| %>
-            <%= render entries %>
-          <% end %>
-        </div>
-        <div class="pt-4">
-          <%= render "pagination", pagy: @pagy %>
-        </div>
-      <% end %>
-    </div>
-  </div>
-<% end %>

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? %>