QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-05-29 23:39:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(goals): cover money displays with privacy-sensitive

Browse Source 
Audit-driven sweep. The class was already on the obvious surfaces (KPI
strip, ring center, card balance, funding-accounts breakdown); these
were the secondary surfaces missed in the initial PR — money interpolated
into descriptive prose, account-picker balances, live previews, and the
projection chart tooltip.

- card_component: target divisor next to the masked balance, pace line,
  and behind-status footer (`footer_has_money?` helper keeps non-money
  branches unmasked so paused / archived / "Goal reached" copy stays
  readable in privacy mode).
- show: header_summary (target + date subtitle), to_go remaining,
  inactive recap body, celebration body, catch_up body.
- _status_callout: conditional on `goal.status == :behind` — only that
  branch carries an amount; on_track / no_target_date have date or
  static copy.
- _form_edit + _form_stepper: account balance shown in the linked-
  account picker rows.
- _form_stepper review section: reviewSummary + reviewSuggested ps
  (Stimulus injects target / suggested $X/mo into both).
- _pending_pledge_banner: banner title span (amount + account + days).
- goal_pledges/new: live preview p (Stimulus injects "Reaches X%, $A of
  $B" / "Hits your $B target").
- goal_projection_chart_controller: tooltip was inline-styled with
  hard-coded gray-900 + white (DS drift) and had no privacy class.
  Replaced cssText with className using bg-container + text-primary +
  border-secondary + rounded-lg + privacy-sensitive — mirrors the
  pattern in time_series_chart_controller and the post-#1996 sankey
  fix. Tooltip now respects theme and privacy mode.
This commit is contained in:
Guillem Arias
2026-05-27 10:14:13 +02:00
parent 0d9079a79c
commit 91baa62604
9 changed files with 21 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/goals/card_component.html.erb
View File

@@ -46,10 +46,10 @@
<div class="mt-5">
<div class="flex items-baseline gap-1.5">
<span class="text-xl font-medium text-primary tabular-nums privacy-sensitive"><%= goal.current_balance_money.format(precision: 0) %></span>
<span class="text-xs text-subdued tabular-nums">/ <%= goal.target_amount_money.format(precision: 0) %></span>
<span class="text-xs text-subdued tabular-nums privacy-sensitive">/ <%= goal.target_amount_money.format(precision: 0) %></span>
</div>
<% if pace_line %>
<p class="text-xs text-subdued tabular-nums mt-1"><%= pace_line %></p>
<p class="text-xs text-subdued tabular-nums mt-1 privacy-sensitive"><%= pace_line %></p>
<% end %>
</div>
@@ -58,7 +58,7 @@
<%= render Goals::AccountStackComponent.new(accounts: linked_accounts, color_map: goal.account_color_map) %>
<span class="text-xs text-subdued"><%= linked_accounts_count_label %></span>
</div>
<span class="text-xs text-subdued tabular-nums">
<span class="text-xs text-subdued tabular-nums <%= "privacy-sensitive" if footer_has_money? %>">
<%= footer_line %><% if has_pending_pledge? %> · <%= t("goals.goal_card.pending_count", count: pending_pledges_count) %><% end %>
</span>
</div>

4
app/components/goals/card_component.rb
View File

@@ -113,4 +113,8 @@ class Goals::CardComponent < ApplicationComponent
end
end
end
def footer_has_money?
goal.status == :behind && goal.monthly_target_amount
end
end

3
app/javascript/controllers/goal_projection_chart_controller.js
View File

@@ -440,7 +440,8 @@ export default class extends Controller {
// own `relative`. Read the computed style instead.
if (getComputedStyle(root).position === "static") root.style.position = "relative";
const tooltip = document.createElement("div");
tooltip.style.cssText = "position:absolute;pointer-events:none;display:none;background:var(--color-gray-900);color:var(--color-white);font-size:12px;line-height:1.35;padding:6px 8px;border-radius:6px;white-space:nowrap;z-index:5;box-shadow:0 2px 8px rgba(0,0,0,0.15);";
tooltip.className = "bg-container text-primary text-sm font-sans absolute p-2 border border-secondary rounded-lg pointer-events-none z-50 privacy-sensitive";
tooltip.style.display = "none";
root.appendChild(tooltip);
const overlay = svg

2
app/views/goal_pledges/new.html.erb
View File

@@ -44,7 +44,7 @@
action: "input->goal-pledge-preview#update"
} %>
<p class="text-xs text-secondary tabular-nums -mt-1"
<p class="text-xs text-secondary tabular-nums -mt-1 privacy-sensitive"
data-goal-pledge-preview-target="preview"></p>
<%= f.select :account_id,

2
app/views/goals/_form_edit.html.erb
View File

@@ -46,7 +46,7 @@
<p class="text-sm font-medium text-primary truncate"><%= account.name %></p>
<p class="text-xs text-secondary"><%= (account.subtype || subtype).titleize %></p>
</div>
<span class="text-sm text-primary tabular-nums"><%= Money.new(account.balance, account.currency).format %></span>
<span class="text-sm text-primary tabular-nums privacy-sensitive"><%= Money.new(account.balance, account.currency).format %></span>
</label>
<% end %>
</div>

6
app/views/goals/_form_stepper.html.erb
View File

@@ -86,7 +86,7 @@
<p class="text-sm font-medium text-primary truncate"><%= account.name %></p>
<p class="text-xs text-secondary"><%= (account.subtype || subtype).titleize %></p>
</div>
<span class="text-sm text-primary tabular-nums"><%= Money.new(account.balance, account.currency).format %></span>
<span class="text-sm text-primary tabular-nums privacy-sensitive"><%= Money.new(account.balance, account.currency).format %></span>
</label>
<% end %>
</div>
@@ -115,11 +115,11 @@
<%= render DS::FilledIcon.new(variant: :container, icon: "target", size: "lg", rounded: false) %>
<div class="min-w-0 flex-1">
<p class="text-base font-medium text-primary truncate" data-goal-stepper-target="reviewName">…</p>
<p class="text-sm text-secondary tabular-nums" data-goal-stepper-target="reviewSummary">…</p>
<p class="text-sm text-secondary tabular-nums privacy-sensitive" data-goal-stepper-target="reviewSummary">…</p>
</div>
</div>
<p class="text-sm text-primary tabular-nums border-t border-subdued pt-3" data-goal-stepper-target="reviewSuggested">…</p>
<p class="text-sm text-primary tabular-nums border-t border-subdued pt-3 privacy-sensitive" data-goal-stepper-target="reviewSuggested">…</p>
</div>
</section>

2
app/views/goals/_pending_pledge_banner.html.erb
View File

@@ -10,7 +10,7 @@
<span class="text-secondary shrink-0 mt-0.5"><%= icon("info", size: "sm") %></span>
<div class="flex-1 min-w-0">
<p class="text-primary">
<span class="font-medium"><%= title %></span>
<span class="font-medium privacy-sensitive"><%= title %></span>
<span class="text-secondary">· <%= t("goals.show.pending_pledge.pledged_at", time_ago: time_ago_in_words(pledge.created_at)) %></span>
</p>
<p class="text-xs text-subdued mt-0.5"><%= t(body_key) %></p>

2
app/views/goals/_status_callout.html.erb
View File

@@ -24,5 +24,5 @@
<span class="shrink-0"><%= icon(icon_glyph, size: "sm") %></span>
<span class="font-medium"><%= label %></span>
<span class="opacity-60">·</span>
<span class="opacity-90"><%= context %></span>
<span class="opacity-90 <%= "privacy-sensitive" if goal.status == :behind %>"><%= context %></span>
</div>

10
app/views/goals/show.html.erb
View File

@@ -5,7 +5,7 @@
</div>
<div class="min-w-0 flex-1">
<h1 class="text-2xl font-semibold text-primary break-words"><%= @goal.name %></h1>
<p class="text-sm text-secondary mt-1"><%= @goal.header_summary %></p>
<p class="text-sm text-secondary mt-1 privacy-sensitive"><%= @goal.header_summary %></p>
<% last_days = @goal.last_matched_pledge_days_ago %>
<% unless last_days.nil? %>
<p class="text-xs text-subdued mt-0.5">
@@ -122,7 +122,7 @@
<%= render Goals::ProgressRingComponent.new(goal: @goal, size: 180) %>
<p class="text-xl font-medium text-primary tabular-nums privacy-sensitive mt-4"><%= @goal.current_balance_money.format(precision: 0) %></p>
<% unless @goal.completed? %>
<p class="text-xs text-subdued tabular-nums mt-0.5"><%= t(".ring.to_go", amount: @goal.remaining_amount_money.format(precision: 0)) %></p>
<p class="text-xs text-subdued tabular-nums mt-0.5 privacy-sensitive"><%= t(".ring.to_go", amount: @goal.remaining_amount_money.format(precision: 0)) %></p>
<% end %>
<% unless @goal.completed? || @goal.status == :reached || @goal.paused? || @goal.archived? %>
<%# Single Record pledge entry point on the page. Pre-filled with the
@@ -149,7 +149,7 @@
<h2 class="text-lg font-semibold text-primary">
<%= t(@goal.archived? ? ".inactive.heading_archived" : ".inactive.heading_paused") %>
</h2>
<p class="text-sm text-secondary mt-1 max-w-md tabular-nums">
<p class="text-sm text-secondary mt-1 max-w-md tabular-nums privacy-sensitive">
<%= t(".inactive.body", saved: @goal.current_balance_money.format(precision: 0), target: @goal.target_amount_money.format(precision: 0)) %>
</p>
</div>
@@ -159,7 +159,7 @@
<%= icon("party-popper", size: "2xl", color: "success") %>
</div>
<h2 class="text-lg font-semibold text-primary"><%= t(".celebration.heading") %></h2>
<p class="text-sm text-secondary mt-1 max-w-md"><%= t(".celebration.body", saved: @goal.current_balance_money.format(precision: 0), target: @goal.target_amount_money.format(precision: 0)) %></p>
<p class="text-sm text-secondary mt-1 max-w-md privacy-sensitive"><%= t(".celebration.body", saved: @goal.current_balance_money.format(precision: 0), target: @goal.target_amount_money.format(precision: 0)) %></p>
<% if @goal.may_archive? %>
<div class="mt-4">
<%= render DS::Button.new(
@@ -199,7 +199,7 @@
<h2 class="text-sm font-medium text-primary"><%= t(".projection.heading") %></h2>
<p class="text-xs text-secondary mt-0.5"><%= sanitize @goal.projection_summary %></p>
<% if @goal.status == :behind && @goal.monthly_target_amount %>
<p class="text-xs text-secondary mt-0.5 tabular-nums">
<p class="text-xs text-secondary mt-0.5 tabular-nums privacy-sensitive">
<%= t("goals.show.catch_up.body", avg: @goal.pace_money.format(precision: 0), required: Money.new(@goal.monthly_target_amount, @goal.currency).format(precision: 0)) %>
</p>
<% end %>