From fe9e2dccbefd7bbfa2c028a77dcaa8a6164fe7be Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Mon, 11 May 2026 12:35:25 +0200
Subject: [PATCH] =?UTF-8?q?feat(savings):=20add=20"ONGOING=20=C2=B7=20N"?=
 =?UTF-8?q?=20+=20"COMPLETED=20=C2=B7=20N"=20section=20dividers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Same pattern as the bank-providers page's `AVAILABLE · 3` header (see
`app/views/settings/providers/_search_filters.html.erb` references):
small uppercase tracking-wide secondary label, separator dot, tabular
count. Replaces the prior "Completed · 1" inline label with a more
consistent treatment and adds an "Ongoing · N" header above the active
goals grid.

Name choice: "Ongoing" rather than "Active" because the grid includes
both `active` and `paused` AASM states; "ongoing" reads as still-in-
progress for both. Parallel to the existing "Completed" sibling.
---
 app/views/savings_goals/index.html.erb    | 8 ++++++--
 config/locales/views/savings_goals/en.yml | 2 ++
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/app/views/savings_goals/index.html.erb b/app/views/savings_goals/index.html.erb
index bc383c4c8..47788c3c6 100644
--- a/app/views/savings_goals/index.html.erb
+++ b/app/views/savings_goals/index.html.erb
@@ -106,6 +106,11 @@
       <% end %>
 
       <% if @active_goals.any? %>
+        <div class="flex items-center gap-1.5 mb-2.5 text-[11px] font-medium uppercase tracking-wide text-secondary">
+          <span><%= t(".ongoing_section.heading") %></span>
+          <span class="text-subdued">·</span>
+          <span class="tabular-nums"><%= @active_goals.size %></span>
+        </div>
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5">
           <% @active_goals.each do |goal| %>
             <%= render Savings::GoalCardComponent.new(goal: goal) %>
@@ -123,8 +128,7 @@
 
     <% if @completed_goals.any? %>
       <section>
-        <div class="flex items-center gap-2 mb-3 text-sm text-secondary">
-          <%= icon("circle-check-big", size: "sm") %>
+        <div class="flex items-center gap-1.5 mb-2.5 text-[11px] font-medium uppercase tracking-wide text-secondary">
           <span><%= t(".completed_section.heading") %></span>
           <span class="text-subdued">·</span>
           <span class="tabular-nums"><%= @completed_goals.size %></span>
diff --git a/config/locales/views/savings_goals/en.yml b/config/locales/views/savings_goals/en.yml
index 9966600f4..38d1c57fc 100644
--- a/config/locales/views/savings_goals/en.yml
+++ b/config/locales/views/savings_goals/en.yml
@@ -20,6 +20,8 @@ en:
       goals_section:
         heading: Goals
         subtitle: Save toward what matters.
+      ongoing_section:
+        heading: Ongoing
       completed_section:
         heading: Completed
       search: