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/transactions/_summary.html.erb

@@ -1,19 +1,19 @@
 <%# locals: (totals:) %>
-<div class="grid grid-cols-3 bg-white rounded-xl border border-alpha-black-25 shadow-xs divide-x divide-alpha-black-100">
+<div class="grid grid-cols-3 bg-white rounded-xl shadow-border-xs divide-x divide-alpha-black-100">
   <div class="p-4 space-y-2">
     <p class="text-sm text-secondary">Total transactions</p>
-    <p class="text-primary font-medium text-xl" id="total-transactions"><%= totals.count %></p>
+    <p class="text-primary font-medium text-xl" id="total-transactions"><%= totals.transactions_count %></p>
   </div>
   <div class="p-4 space-y-2">
     <p class="text-sm text-secondary">Income</p>
     <p class="text-primary font-medium text-xl" id="total-income">
-      <%= format_money Money.new(totals.income_total, totals.currency) %>
+      <%= totals.income_money.format %>
     </p>
   </div>
   <div class="p-4 space-y-2">
     <p class="text-sm text-secondary">Expenses</p>
     <p class="text-primary font-medium text-xl" id="total-expense">
-      <%= format_money Money.new(totals.expense_total, totals.currency) %>
+      <%= totals.expense_money.format %>
     </p>
   </div>
 </div>

app/views/transactions/index.html.erb

@@ -1,4 +1,4 @@
-<div class="space-y-4 h-full flex flex-col overflow-y-auto" data-controller="focus-record" data-focus-record-id-value="<%= @focused_record ? dom_id(@focused_record) : nil %>">
+<div class="space-y-4 h-fit max-h-full flex flex-col" data-controller="focus-record" data-focus-record-id-value="<%= @focused_record ? dom_id(@focused_record) : nil %>">
   <%= render "header" %>
 
   <%= render "summary", totals: @totals %>
@@ -7,7 +7,7 @@
        data-controller="bulk-select"
        data-bulk-select-singular-label-value="<%= t(".transaction") %>"
        data-bulk-select-plural-label-value="<%= t(".transactions") %>"
-       class="overflow-y-auto flex flex-col bg-white rounded-xl border border-alpha-black-25 shadow-xs p-4">
+       class="overflow-y-auto flex flex-col bg-white rounded-xl shadow-border-xs p-4">
     <%= render "transactions/searches/search" %>
 
     <div id="entry-selection-bar" data-bulk-select-target="selectionBar" class="flex justify-center hidden">
@@ -28,11 +28,9 @@
           <p class="col-span-2 justify-self-end">amount</p>
         </div>
         <div class="space-y-6">
-          <%= entries_by_date(@transaction_entries, transfers: @transfers, totals: true) do |entries, transfers| %>
-            <%= render partial: "transfers/transfer", collection: transfers %>
-
-            <%# Render regular entries %>
-            <%= render partial: "account/entries/entry", collection: entries.reject { |e| e.entryable.transfer? } %>
+          <%= entries_by_date(@transactions.map(&:entry), totals: true) do |entries| %>
+            <%# Only render the outflow side of transfers to avoid duplicate entries %>
+            <%= render partial: "account/entries/entry", collection: entries.reject { |e| e.entryable.transfer_as_inflow.present? } %>
           <% end %>
         </div>
       </div>
@@ -41,7 +39,7 @@
     <% end %>
 
     <div class="pt-4">
-      <%= render "pagination", pagy: @pagy %>
+      <%= render "shared/pagination", pagy: @pagy %>
     </div>
   </div>
 </div>

app/views/transactions/searches/_menu.html.erb

@@ -6,7 +6,7 @@
   data-controller="tabs"
   data-tabs-active-class="bg-gray-25 text-primary"
   data-tabs-default-tab-value="<%= get_default_transaction_search_filter[:key] %>"
-  class="hidden absolute flex z-10 h-80 w-[540px] top-12 right-0 border border-tertiary bg-white rounded-lg shadow-xs">
+  class="hidden absolute flex z-10 h-80 w-[540px] top-12 right-0 shadow-border-xs bg-white rounded-lg">
   <div class="flex w-44 flex-col items-start p-3 text-sm font-medium text-secondary border-r border-r-alpha-black-100">
     <% transaction_search_filters.each do |filter| %>
       <button

app/views/transactions/searches/filters/_badge.html.erb

@@ -44,7 +44,7 @@
   <%= button_to clear_filter_transactions_path(param_key: param_key, param_value: param_value, **request.query_parameters),
         method: :delete,
         data: { turbo: false },
-        class: "flex items-center" do %>
-    <%= lucide_icon "x", class: "w-4 h-4 text-secondary" %>
+        class: "flex items-center cursor-pointer" do %>
+    <%= lucide_icon "x", class: "w-4 h-4 text-secondary hover:text-primary" %>
   <% end %>
 </li>