From 45b2701b4ac573a66d30d1f6f51092709afb65ef Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Mon, 11 May 2026 16:44:45 +0200
Subject: [PATCH] fix(savings_goals): ring on_track color, contributions
 horizontal scroll, modal restored on back, chart saved fill
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ring on on_track / no_target_date goal cards rendered with no progress
arc — ring_color returned var(--text-primary) / var(--text-subdued)
which aren't real CSS custom properties (Sure's text tokens are Tailwind
utilities). Switch to var(--color-green-500) / var(--color-gray-400)
which ARE CSS vars from the Tailwind palette and resolve at SVG fill
time.

Contributions list had a horizontal scrollbar because the rows used
-mx-3 px-3 to extend the hover background, which pushed content beyond
the card padding. Drop the negative-margin trick and add
overflow-x-hidden to the scroll container. Rows still hover-highlight
inside the card bounds.

Modal cache restoration — Turbo cached pages with open <dialog> elements
inside <turbo-frame id="modal">. After dismissing the new-goal modal
and navigating to a goal detail page, browser back restored the cached
index page WITH the dialog still in the modal frame; the dialog's
Stimulus controller then ran auto-open and reopened it. Now the dialog
close handler empties the parent modal turbo-frame so the cache
snapshot is clean.

Chart saved-fill — bump area gradient stop-opacity 0.10 → 0.22 so the
contribution history is more visible against the dark canvas. Chart
was rendering correctly but the white-at-10%-opacity gradient was too
faint to read on top of the dashed projection.
---
 app/components/DS/dialog_controller.js                   | 9 +++++++++
 app/components/savings/goal_card_component.rb            | 4 ++--
 .../savings_goal_projection_chart_controller.js          | 2 +-
 app/views/savings_goals/_contributions_list.html.erb     | 2 +-
 app/views/savings_goals/show.html.erb                    | 2 +-
 5 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/app/components/DS/dialog_controller.js b/app/components/DS/dialog_controller.js
index 5391d42ae..2092700c6 100644
--- a/app/components/DS/dialog_controller.js
+++ b/app/components/DS/dialog_controller.js
@@ -27,9 +27,18 @@ export default class extends Controller {
 
   close() {
     this.element.close();
+    this.#clearParentModalFrame();
 
     if (this.reloadOnCloseValue) {
       Turbo.visit(window.location.href);
     }
   }
+
+  // When the dialog lives inside a top-level <turbo-frame id="modal">,
+  // emptying the frame on close stops Turbo's page cache from snapshotting
+  // an open dialog and reopening it on browser back.
+  #clearParentModalFrame() {
+    const frame = this.element.closest('turbo-frame[id="modal"]');
+    if (frame) frame.innerHTML = "";
+  }
 }
diff --git a/app/components/savings/goal_card_component.rb b/app/components/savings/goal_card_component.rb
index 5799cdd14..0abe159f3 100644
--- a/app/components/savings/goal_card_component.rb
+++ b/app/components/savings/goal_card_component.rb
@@ -16,8 +16,8 @@ class Savings::GoalCardComponent < ApplicationComponent
     case goal.status
     when :reached then "var(--color-green-600)"
     when :behind then "var(--color-yellow-600)"
-    when :on_track then "var(--text-primary)"
-    else "var(--text-subdued)"
+    when :on_track then "var(--color-green-500)"
+    else "var(--color-gray-400)"
     end
   end
 
diff --git a/app/javascript/controllers/savings_goal_projection_chart_controller.js b/app/javascript/controllers/savings_goal_projection_chart_controller.js
index 57df9c9ab..07b24042f 100644
--- a/app/javascript/controllers/savings_goal_projection_chart_controller.js
+++ b/app/javascript/controllers/savings_goal_projection_chart_controller.js
@@ -86,7 +86,7 @@ export default class extends Controller {
       .append("linearGradient")
       .attr("id", `saved-fill-${this._id()}`)
       .attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", 1);
-    gradient.append("stop").attr("offset", "0%").attr("stop-color", textPrimary).attr("stop-opacity", 0.10);
+    gradient.append("stop").attr("offset", "0%").attr("stop-color", textPrimary).attr("stop-opacity", 0.22);
     gradient.append("stop").attr("offset", "100%").attr("stop-color", textPrimary).attr("stop-opacity", 0);
 
     if (targetAmount > 0) {
diff --git a/app/views/savings_goals/_contributions_list.html.erb b/app/views/savings_goals/_contributions_list.html.erb
index ddceafad1..880628cba 100644
--- a/app/views/savings_goals/_contributions_list.html.erb
+++ b/app/views/savings_goals/_contributions_list.html.erb
@@ -7,7 +7,7 @@
 <% else %>
   <ul>
     <% contributions.each do |contribution| %>
-      <li class="flex items-center gap-3 px-3 -mx-3 py-2 rounded-lg hover:bg-surface-hover">
+      <li class="flex items-center gap-3 px-2 py-2 rounded-lg hover:bg-surface-hover">
         <%= render Savings::GoalAvatarComponent.new(
           name: contribution.account.name,
           color: @savings_goal.color,
diff --git a/app/views/savings_goals/show.html.erb b/app/views/savings_goals/show.html.erb
index 0414c4e4f..f77d75421 100644
--- a/app/views/savings_goals/show.html.erb
+++ b/app/views/savings_goals/show.html.erb
@@ -243,7 +243,7 @@
         <h3 class="text-sm font-medium text-primary"><%= t(".contributions_heading") %></h3>
         <span class="ml-2 text-xs text-subdued tabular-nums"><%= @contributions.size %></span>
       </div>
-      <div class="max-h-[420px] overflow-y-auto -mx-1 px-1">
+      <div class="max-h-[420px] overflow-y-auto overflow-x-hidden">
         <%= render "contributions_list", contributions: @contributions %>
       </div>
     </div>