Balance trends in activity view

app/components/DS/tooltip.html.erb

@@ -1,9 +1,9 @@
-<div data-controller="ds-tooltip" data-ds-tooltip-placement-value="<%= placement %>" data-ds-tooltip-offset-value="<%= offset %>" data-ds-tooltip-cross-axis-value="<%= cross_axis %>">
+<span data-controller="DS--tooltip" data-DS--tooltip-placement-value="<%= placement %>" data-DS--tooltip-offset-value="<%= offset %>" data-DS--tooltip-cross-axis-value="<%= cross_axis %>" class="inline-flex">
   <%= helpers.icon icon_name, size: size, color: color %>
 
-  <div role="tooltip" data-ds-tooltip-target="tooltip" class="hidden absolute z-50 bg-gray-700 text-sm px-1.5 py-1 rounded-md">
+  <div role="tooltip" data-DS--tooltip-target="tooltip" class="hidden absolute z-50 bg-gray-700 text-sm px-1.5 py-1 rounded-md">
     <div class="fg-inverse font-normal max-w-[200px]">
       <%= tooltip_content %>
     </div>
   </div>
-</div>
+</span>

app/components/DS/tooltip_controller.js

@@ -37,20 +37,21 @@ export default class extends Controller {
   }
 
   show = () => {
-    this.tooltipTarget.style.display = "block";
+    this.tooltipTarget.classList.remove("hidden");
     this.startAutoUpdate();
     this.update();
   };
 
   hide = () => {
-    this.tooltipTarget.style.display = "none";
+    this.tooltipTarget.classList.add("hidden");
     this.stopAutoUpdate();
   };
 
   startAutoUpdate() {
     if (!this._cleanup) {
+      const reference = this.element.querySelector("[data-icon]");
       this._cleanup = autoUpdate(
-        this.element.firstElementChild, // Use the icon as the reference element
+        reference || this.element,
         this.tooltipTarget,
         this.boundUpdate
       );
@@ -65,7 +66,8 @@ export default class extends Controller {
   }
 
   update() {
-    computePosition(this.element.firstElementChild, this.tooltipTarget, {
+    const reference = this.element.querySelector("[data-icon]");
+    computePosition(reference || this.element, this.tooltipTarget, {
       placement: this.placementValue,
       middleware: [
         offset({

app/components/UI/account/activity_feed.html.erb

@@ -4,7 +4,7 @@
       <%= tag.h2 t(".title"), class: "font-medium text-lg" %>
 
       <% if account.manual? %>
-        <%= render MenuComponent.new(variant: "button") do |menu| %>
+        <%= render DS::Menu.new(variant: "button") do |menu| %>
           <% menu.with_button(text: "New", variant: "secondary", icon: "plus") %>
 
           <% menu.with_item(

app/components/UI/account/entries_date_group.html.erb

@@ -1,5 +1,5 @@
 <%= tag.div id: id, data: { bulk_select_target: "group" }, class: "bg-container-inset rounded-xl p-1 w-full" do %>
-  <details open class="group">
+  <details class="group">
     <summary>
       <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">
@@ -16,9 +16,9 @@
         </div>
 
         <div class="flex items-center gap-4">
-          <div class="flex items-center gap-1">
+          <div class="flex items-center gap-2">
             <span class="font-medium"><%= balance_trend.current.format %></span>
-            <%= render DS::Tooltip.new(text: "The end of day balance, after all transactions and adjustments") %>
+            <%= render DS::Tooltip.new(text: "The end of day balance, after all transactions and adjustments", placement: "left", size: "sm") %>
           </div>
           <%= helpers.icon "chevron-down", class: "group-open:rotate-180" %>
         </div>
@@ -29,48 +29,48 @@
       <dl class="flex gap-4 items-center text-sm text-primary">
         <dt>Start of day balance</dt>
         <hr class="grow border-dashed border-secondary" />
-        <dd class="font-medium"><%= start_balance_money.format %></dd>
+        <dd class="font-bold"><%= start_balance_money.format %></dd>
       </dl>
 
       <% if account.balance_type == :investment %>
         <dl class="flex gap-4 items-center text-sm text-primary">
           <dt>Cash &#916;</dt>
           <hr class="grow border-dashed border-secondary" />
-          <dd class="font-medium"><%= transaction_totals_money.format %></dd>
+          <dd><%= transaction_totals_money.format %></dd>
         </dl>
 
         <dl class="flex gap-4 items-center text-sm text-primary">
           <dt>Holdings &#916;</dt>
           <hr class="grow border-dashed border-secondary" />
-          <dd class="font-medium"><%= holding_change_money.format %></dd>
+          <dd><%= holding_change_money.format %></dd>
         </dl>
       <% else %>
         <dl class="flex gap-4 items-center text-sm text-primary">
           <dt>Transaction totals</dt>
           <hr class="grow border-dashed border-secondary" />
-          <dd class="font-medium"><%= transaction_totals_money.format %></dd>
+          <dd><%= transaction_totals_money.format %></dd>
         </dl>
       <% end %>
 
       <dl class="flex gap-4 items-center text-sm text-primary">
         <dt>End of day balance</dt>
         <hr class="grow border-dashed border-secondary" />
-        <dd><%= end_balance_before_adjustments_money.format %></dd>
+        <dd class="font-medium"><%= end_balance_before_adjustments_money.format %></dd>
       </dl>
 
-      <div class="pl-4 space-y-3">
+      <hr class="border border-primary" />
-        <dl class="flex gap-4 items-center text-sm text-primary">
-          <dt>Value adjustments &#916; </dt>
-          <hr class="grow border-dashed border-secondary" />
-          <dd class="font-medium"><%= adjustments_money.format %></dd>
-        </dl>
 
-        <dl class="flex gap-4 items-center text-sm text-primary">
+      <dl class="flex gap-4 items-center text-sm text-primary">
-          <dt>Closing balance (incl. adjustments)</dt>
+        <dt>Value adjustments &#916; </dt>
-          <hr class="grow border-dashed border-primary" />
+        <hr class="grow border-dashed border-secondary" />
-          <dd class="font-bold"><%= end_balance_money.format %></dd>
+        <dd ><%= adjustments_money.format %></dd>
-        </dl>
+      </dl>
-      </div>
+
+      <dl class="flex gap-4 items-center text-sm text-primary">
+        <dt>Closing balance (incl. adjustments)</dt>
+        <hr class="grow border-dashed border-primary" />
+        <dd class="font-bold"><%= end_balance_money.format %></dd>
+      </dl>
     </div>
   </details>
 

app/models/account/activity_feed_data.rb

@@ -12,7 +12,7 @@ class Account::ActivityFeedData
   def trend_for_date(date)
     start_balance = start_balance_for_date(date)
     end_balance = end_balance_for_date(date)
-    
+
     Trend.new(
       current: end_balance.balance_money,
       previous: start_balance.balance_money