feat(savings): rebuild index to match Claude Design

- Page header: title "Savings" + "Your savings accounts and the goals
  you're working toward." Removed the top-right New goal button (moves
  into the Goals section).
- Hero card: "Total in savings" with sum-of-savings-subtype balance,
  30-day delta vs last 30 days (Family#savings_balance_30d_delta),
  3-stat sub-row (Accounts / Active goals / Saved toward goals), and a
  D3 sparkline area chart on the right (new
  `savings-sparkline` Stimulus controller, sourced from
  Family#savings_balance_series).
- Accounts section: lists Depository accounts with subtype = "savings"
  as cards (blue avatar, name, subtype, balance, "Funds N goals"). New
  Savings::AccountCardComponent.
- Goals section header: "Goals" + "Save toward what matters." + "New
  goal" button right-aligned to the section (not the page header).
- Removed state-filter pill nav. Active goals render in the main grid;
  Completed goals get a "Completed · N" divider w/ check-circle icon
  and their own grid below.
- Goal card layout reworked: horizontal bar replaced with a 64px donut
  ring on the right side of the card header (ring colour tracks
  goal.status — yellow=behind, primary=on-track, green=reached). Pill
  is inline with the goal name.
- Status pill copy: "Behind pace" → "Behind".
- Filter bar (copied from settings/providers): search input + status
  chips (All / On track / Behind / No date). Hidden when ≤ 6 active
  goals. Powered by `savings-goals-filter` Stimulus controller —
  toggles `.hidden` on cards by goal name + status.
- Family#savings_subtype_accounts, total_savings_balance,
  savings_balance_series, savings_balance_30d_delta helpers; controller
  computes hero payload + account-goal counts for the cards.

app/javascript/controllers/savings_goals_filter_controller.js

@@ -0,0 +1,54 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Free-text + status-chip filter for the savings-goals index grid.
+// Mirrors the providers-filter pattern. Each card has data-goal-name
+// 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"];
+  static values = { status: { type: String, default: "all" } };
+
+  connect() {
+    this.syncChipState();
+  }
+
+  filter() {
+    const query = this.hasInputTarget
+      ? this.inputTarget.value.toLocaleLowerCase().trim()
+      : "";
+    const active = this.statusValue;
+    let visible = 0;
+
+    this.cardTargets.forEach((card) => {
+      const name = (card.dataset.goalName || "").toLocaleLowerCase();
+      const status = card.dataset.goalStatus || "";
+      const matchesQuery = !query || name.includes(query);
+      const matchesStatus = active === "all" || status === active;
+      const show = matchesQuery && matchesStatus;
+      card.classList.toggle("hidden", !show);
+      if (show) visible++;
+    });
+
+    if (this.hasEmptyTarget) {
+      this.emptyTarget.classList.toggle("hidden", visible > 0);
+    }
+  }
+
+  selectChip(event) {
+    this.statusValue = event.currentTarget.dataset.status || "all";
+    this.syncChipState();
+    this.filter();
+  }
+
+  syncChipState() {
+    if (!this.hasChipTarget) return;
+    this.chipTargets.forEach((chip) => {
+      const active = chip.dataset.status === this.statusValue;
+      chip.setAttribute("aria-pressed", active);
+      chip.classList.toggle("bg-container", active);
+      chip.classList.toggle("shadow-border-xs", active);
+      chip.classList.toggle("text-primary", active);
+      chip.classList.toggle("text-secondary", !active);
+    });
+  }
+}

app/javascript/controllers/savings_sparkline_controller.js

@@ -0,0 +1,107 @@
+import { Controller } from "@hotwired/stimulus";
+import * as d3 from "d3";
+
+// Sparkline area chart for the savings hero card. Tiny, axis-less,
+// labelless — just the green line + soft area fill + end dot.
+// Data: [{ date: "YYYY-MM-DD", value: Number }, ...]
+export default class extends Controller {
+  static values = { series: Array };
+
+  connect() {
+    this._draw();
+    this._resize = this._draw.bind(this);
+    window.addEventListener("resize", this._resize);
+  }
+
+  disconnect() {
+    window.removeEventListener("resize", this._resize);
+  }
+
+  _draw() {
+    const root = this.element;
+    root.innerHTML = "";
+
+    const series = (this.seriesValue || []).map((p) => ({
+      date: new Date(p.date),
+      value: Number(p.value || 0),
+    }));
+    if (series.length < 2) return;
+
+    const width = root.clientWidth || 600;
+    const height = root.clientHeight || 140;
+    if (width <= 0 || height <= 0) return;
+
+    const margin = { top: 8, right: 12, bottom: 4, left: 8 };
+    const innerWidth = width - margin.left - margin.right;
+    const innerHeight = height - margin.top - margin.bottom;
+
+    const x = d3
+      .scaleTime()
+      .domain(d3.extent(series, (d) => d.date))
+      .range([margin.left, margin.left + innerWidth]);
+
+    const yMin = Math.min(...series.map((d) => d.value));
+    const yMax = Math.max(...series.map((d) => d.value));
+    const padding = (yMax - yMin) * 0.15 || yMax * 0.05 || 1;
+    const y = d3
+      .scaleLinear()
+      .domain([Math.max(0, yMin - padding), yMax + padding])
+      .range([margin.top + innerHeight, margin.top]);
+
+    const svg = d3
+      .select(root)
+      .append("svg")
+      .attr("width", width)
+      .attr("height", height)
+      .attr("viewBox", `0 0 ${width} ${height}`)
+      .attr("preserveAspectRatio", "none");
+
+    const gradId = `sparkline-fill-${Math.random().toString(36).slice(2, 8)}`;
+    const defs = svg.append("defs");
+    const grad = defs
+      .append("linearGradient")
+      .attr("id", gradId)
+      .attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", 1);
+    grad.append("stop").attr("offset", "0%").attr("stop-color", "var(--color-green-500)").attr("stop-opacity", 0.18);
+    grad.append("stop").attr("offset", "100%").attr("stop-color", "var(--color-green-500)").attr("stop-opacity", 0);
+
+    const area = d3
+      .area()
+      .x((d) => x(d.date))
+      .y0(margin.top + innerHeight)
+      .y1((d) => y(d.value))
+      .curve(d3.curveMonotoneX);
+
+    const line = d3
+      .line()
+      .x((d) => x(d.date))
+      .y((d) => y(d.value))
+      .curve(d3.curveMonotoneX);
+
+    svg
+      .append("path")
+      .datum(series)
+      .attr("fill", `url(#${gradId})`)
+      .attr("d", area);
+
+    svg
+      .append("path")
+      .datum(series)
+      .attr("fill", "none")
+      .attr("stroke", "var(--color-green-600)")
+      .attr("stroke-width", 2)
+      .attr("stroke-linejoin", "round")
+      .attr("stroke-linecap", "round")
+      .attr("d", line);
+
+    const last = series[series.length - 1];
+    svg
+      .append("circle")
+      .attr("cx", x(last.date))
+      .attr("cy", y(last.value))
+      .attr("r", 4)
+      .attr("fill", "var(--color-green-600)")
+      .attr("stroke", "var(--bg-container)")
+      .attr("stroke-width", 2);
+  }
+}