From 03b5126c8a2120ffffd7dc0add1592440dfe1acc Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Mon, 11 May 2026 17:01:39 +0200
Subject: [PATCH] fix(savings_goals/show): contributions list + funding
 accounts breakdown use per-account deterministic color
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both used goal.color for every account avatar, so every linked account
ended up the same color as the goal. Sure's convention elsewhere
(accounts/_logo.html.erb) is accountable.color (type color: Depository
→ purple) — but savings goals only link Depository accounts, so that
would still collapse to one color. Reuse the deterministic
Savings::GoalAvatarComponent.color_for(name) helper from the index card
stack instead. Same account always resolves to the same color across
processes, and multiple accounts on the same goal read as distinct.

Funding-accounts breakdown bar at the top now also colors each segment
by account so the proportions are visibly typed (not a single goal-
color block).
---
 .../savings/funding_accounts_breakdown_component.html.erb     | 4 ++--
 app/views/savings_goals/_contributions_list.html.erb          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/savings/funding_accounts_breakdown_component.html.erb b/app/components/savings/funding_accounts_breakdown_component.html.erb
index ca3f674fb..fee45f857 100644
--- a/app/components/savings/funding_accounts_breakdown_component.html.erb
+++ b/app/components/savings/funding_accounts_breakdown_component.html.erb
@@ -4,7 +4,7 @@
   <div class="flex h-2 rounded-full overflow-hidden mb-4">
     <% rows.each do |row| %>
       <% next if row[:amount].to_d.zero? %>
-      <div style="width: <%= percent_for(row[:amount]) %>%; background-color: <%= goal.color %>;"
+      <div style="width: <%= percent_for(row[:amount]) %>%; background-color: <%= Savings::GoalAvatarComponent.color_for(row[:account].name) %>;"
            title="<%= row[:account].name %>"></div>
     <% end %>
   </div>
@@ -12,7 +12,7 @@
   <ul class="space-y-3">
     <% rows.each do |row| %>
       <li class="flex items-center gap-3">
-        <%= render Savings::GoalAvatarComponent.new(name: row[:account].name, color: goal.color, size: "sm") %>
+        <%= render Savings::GoalAvatarComponent.new(name: row[:account].name, color: Savings::GoalAvatarComponent.color_for(row[:account].name), size: "sm") %>
         <div class="flex-1 min-w-0">
           <p class="text-sm font-medium text-primary truncate"><%= row[:account].name %></p>
           <p class="text-[11px] text-subdued"><%= row[:account].subtype&.titleize || row[:account].accountable_type %> · <%= t("savings_goals.show.funding_balance", amount: Money.new(row[:account].balance, row[:account].currency).format) %></p>
diff --git a/app/views/savings_goals/_contributions_list.html.erb b/app/views/savings_goals/_contributions_list.html.erb
index 880628cba..5660ddcf1 100644
--- a/app/views/savings_goals/_contributions_list.html.erb
+++ b/app/views/savings_goals/_contributions_list.html.erb
@@ -10,7 +10,7 @@
       <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,
+          color: Savings::GoalAvatarComponent.color_for(contribution.account.name),
           size: "sm"
         ) %>
         <div class="flex-1 min-w-0">