From 33189c2673e38f4db390f1cc953ae14a1254410e Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Fri, 15 May 2026 13:25:03 +0200
Subject: [PATCH] ux(goals): polish detail page + unbreak render

- Fix render-blocker: Money#symbol doesn't exist (use #currency.symbol).
- Sanitize projection_summary so the _html locale renders <strong> markup
  instead of escaping it.
- Switch donut + card ring track to --budget-unused-fill;
  --budget-unallocated-fill resolves to the same gray as bg-surface in
  light mode so the unfilled arc was invisible on the detail page.
- Mobile detail: drop avatar, right-align action buttons, stack
  projection header (subtitle + legend) so the subtitle reads on one
  line; bump legend gap on mobile.
- Nowrap the projected reach-date so e.g. "Jul 2026" stays together.
---
 app/components/goals/card_component.html.erb         |  2 +-
 .../controllers/goal_projection_chart_controller.js  |  4 ++--
 app/models/goal.rb                                   |  8 ++++----
 app/views/goals/show.html.erb                        | 12 +++++++-----
 config/locales/views/goals/en.yml                    |  2 +-
 5 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/app/components/goals/card_component.html.erb b/app/components/goals/card_component.html.erb
index cc5b6f43f..df05906f4 100644
--- a/app/components/goals/card_component.html.erb
+++ b/app/components/goals/card_component.html.erb
@@ -24,7 +24,7 @@
                 cy="<%= Goals::CardComponent::RING_SIZE / 2.0 %>"
                 r="<%= ring_radius %>"
                 fill="none"
-                stroke="var(--budget-unallocated-fill)"
+                stroke="var(--budget-unused-fill)"
                 stroke-width="<%= Goals::CardComponent::RING_STROKE %>" />
         <circle cx="<%= Goals::CardComponent::RING_SIZE / 2.0 %>"
                 cy="<%= Goals::CardComponent::RING_SIZE / 2.0 %>"
diff --git a/app/javascript/controllers/goal_projection_chart_controller.js b/app/javascript/controllers/goal_projection_chart_controller.js
index 7d9bf14a9..621022fa4 100644
--- a/app/javascript/controllers/goal_projection_chart_controller.js
+++ b/app/javascript/controllers/goal_projection_chart_controller.js
@@ -570,8 +570,8 @@ export default class extends Controller {
 
   _fmtMoneyShort(amount, _currency) {
     // The server ships `currency_symbol` via projection_payload (resolved
-    // through Money.new(0, code).symbol so EUR/GBP/JPY/etc. render with
-    // the family-locale-correct glyph). Fall back to "$" if a stale
+    // through Money.new(0, code).currency.symbol so EUR/GBP/JPY/etc. render
+    // with the family-locale-correct glyph). Fall back to "$" if a stale
     // payload reaches us mid-deploy.
     const symbol = this.dataValue?.currency_symbol || "$";
     const abs = Math.abs(amount);
diff --git a/app/models/goal.rb b/app/models/goal.rb
index c34fff00b..80d03d918 100644
--- a/app/models/goal.rb
+++ b/app/models/goal.rb
@@ -168,12 +168,12 @@ class Goal < ApplicationRecord
     rem = remaining_amount.to_d
 
     if filled.zero? && rem.zero?
-      return [ { color: "var(--budget-unallocated-fill)", amount: 1, id: "unused" } ]
+      return [ { color: "var(--budget-unused-fill)", amount: 1, id: "unused" } ]
     end
 
     segments = []
     segments << { color: color.presence || "var(--color-blue-500)", amount: filled, id: "saved" } if filled.positive?
-    segments << { color: "var(--budget-unallocated-fill)", amount: rem, id: "unused" } if rem.positive?
+    segments << { color: "var(--budget-unused-fill)", amount: rem, id: "unused" } if rem.positive?
     segments
   end
 
@@ -200,7 +200,7 @@ class Goal < ApplicationRecord
       target_amount: target_amt.to_f,
       target_amount_label: Money.new(target_amt, currency).format(precision: 0),
       target_amount_short_label: short_money(target_amt, currency),
-      currency_symbol: Money.new(0, currency).symbol,
+      currency_symbol: Money.new(0, currency).currency.symbol,
       current_amount: current_balance.to_f,
       avg_monthly: pace.to_f,
       required_monthly: monthly_target_amount.to_f,
@@ -377,7 +377,7 @@ class Goal < ApplicationRecord
     # Money so the chart matches the rest of the app for EUR/GBP families.
     def short_money(amount, code)
       amount_f = amount.to_f
-      symbol = Money.new(0, code).symbol
+      symbol = Money.new(0, code).currency.symbol
       abs = amount_f.abs
       if abs >= 1_000_000
         short = (amount_f / 1_000_000.0).round(1)
diff --git a/app/views/goals/show.html.erb b/app/views/goals/show.html.erb
index 8411afc33..ba697b0e2 100644
--- a/app/views/goals/show.html.erb
+++ b/app/views/goals/show.html.erb
@@ -1,7 +1,9 @@
 <div class="space-y-4 pb-6 lg:pb-12">
   <header class="flex flex-col gap-3 sm:flex-row sm:items-start sm:gap-4">
     <div class="flex items-start gap-3 min-w-0 flex-1">
-      <%= render Goals::AvatarComponent.new(goal: @goal, size: "xl") %>
+      <div class="hidden sm:block">
+        <%= render Goals::AvatarComponent.new(goal: @goal, size: "xl") %>
+      </div>
       <div class="min-w-0 flex-1">
         <div class="flex items-center gap-2 mb-1 flex-wrap">
           <h1 class="text-2xl font-semibold text-primary min-w-0 break-words"><%= @goal.name %></h1>
@@ -16,7 +18,7 @@
       <% end %>
       </div>
     </div>
-    <div class="flex items-center gap-2 flex-wrap sm:shrink-0">
+    <div class="flex items-center gap-2 flex-wrap justify-end sm:shrink-0">
       <% unless @goal.completed? || @goal.status == :reached %>
         <%# Demote to outline when the catch-up alert below owns the primary
             action. One primary per surface. %>
@@ -217,13 +219,13 @@
       </div>
     <% else %>
       <div class="bg-container rounded-xl shadow-border-xs p-5 flex flex-col">
-        <div class="flex items-start justify-between mb-2 gap-3">
+        <div class="flex flex-col gap-2 mb-2 sm:flex-row sm:items-start sm:justify-between sm:gap-3">
           <div class="min-w-0">
             <h2 class="text-sm font-medium text-primary"><%= t(".projection.heading") %></h2>
-            <p class="text-xs text-secondary mt-0.5"><%= @goal.projection_summary %></p>
+            <p class="text-xs text-secondary mt-0.5"><%= sanitize @goal.projection_summary %></p>
           </div>
           <% projection_color = @goal.status == :on_track ? "var(--color-green-600)" : "var(--color-yellow-600)" %>
-          <div class="flex items-center gap-3 text-[11px] text-secondary shrink-0">
+          <div class="flex items-center flex-wrap gap-x-5 gap-y-1 text-[11px] text-secondary sm:gap-x-3 sm:shrink-0">
             <span class="inline-flex items-center gap-1.5">
               <svg width="18" height="6" class="text-primary"><line x1="0" y1="3" x2="18" y2="3" stroke="currentColor" stroke-width="2" /></svg>
               <%= t(".projection.legend_saved") %>
diff --git a/config/locales/views/goals/en.yml b/config/locales/views/goals/en.yml
index 05bd65b9e..0c65ea36e 100644
--- a/config/locales/views/goals/en.yml
+++ b/config/locales/views/goals/en.yml
@@ -137,7 +137,7 @@ en:
         no_target_date: No target date set. Set one to project a finish line.
         no_pace: No deposits yet. Add money to a linked account to start a projection.
         behind: Falling short at current pace.
-        on_track_html: At your current pace, you'll reach this goal around <strong class="text-primary">%{date}</strong>.
+        on_track_html: At your current pace, you'll reach this goal around <strong class="text-primary whitespace-nowrap">%{date}</strong>.
         aria_label: "Projection chart for %{name}"
       catch_up:
         title: "Save %{amount}/mo more to catch up"