From 69c45d47146b247c0417eeeec229d9529aefd793 Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Mon, 11 May 2026 12:50:37 +0200
Subject: [PATCH] fix(savings_goals): update ONGOING count when filtering by
 status or search
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "ONGOING · N" badge was server-rendered with @active_goals.size and
never re-synced when the Stimulus filter hid cards. Add a count target
and update it alongside the existing empty/grid toggles.
---
 .../controllers/savings_goals_filter_controller.js           | 5 ++++-
 app/views/savings_goals/index.html.erb                       | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/javascript/controllers/savings_goals_filter_controller.js b/app/javascript/controllers/savings_goals_filter_controller.js
index 10c7d6382..53a8029d2 100644
--- a/app/javascript/controllers/savings_goals_filter_controller.js
+++ b/app/javascript/controllers/savings_goals_filter_controller.js
@@ -5,7 +5,7 @@ import { Controller } from "@hotwired/stimulus";
 // and data-goal-status; the controller toggles `.hidden` on cards
 // based on the active query/chip.
 export default class extends Controller {
-  static targets = ["input", "chip", "card", "empty", "grid"];
+  static targets = ["input", "chip", "card", "empty", "grid", "count"];
   static values = { status: { type: String, default: "all" } };
 
   connect() {
@@ -35,6 +35,9 @@ export default class extends Controller {
     if (this.hasGridTarget) {
       this.gridTarget.classList.toggle("hidden", visible === 0);
     }
+    if (this.hasCountTarget) {
+      this.countTarget.textContent = visible;
+    }
   }
 
   selectChip(event) {
diff --git a/app/views/savings_goals/index.html.erb b/app/views/savings_goals/index.html.erb
index 6a53f06e0..747d68f3a 100644
--- a/app/views/savings_goals/index.html.erb
+++ b/app/views/savings_goals/index.html.erb
@@ -109,7 +109,7 @@
         <div class="flex items-center gap-1.5 mb-4 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>
+          <span class="tabular-nums" data-savings-goals-filter-target="count"><%= @active_goals.size %></span>
         </div>
         <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5" data-savings-goals-filter-target="grid">
           <% @active_goals.each do |goal| %>