feat(ds): extract DS::ProgressRing primitive; migrate goal card (#1899)#2112
Merged
Conversation
Adds a standalone Savings goals feature: a piggy-bank style tracker that lets a family set a target, link one or more Depository accounts as funding sources, and log manual contributions over time. Supersedes #1569 (closed) — same intent, redesigned per reviewer + Discord feedback. What this adds: - New `/savings_goals` sidebar entry (piggy-bank icon) with index, show, state-filtered tabs (all/active/paused/completed/archived), and a 2-step modal stepper for creation (Identity → Review). - Multi-account funding via a `SavingsGoalAccount` join: a goal requires ≥1 linked Depository account (checking/savings/HSA/CD/money-market), and all linked accounts must share the goal's currency. - Tracker balance model: goal balance = SUM(contributions.amount). No auto-flow from account balances. Contributions are pure logical records and don't move money between accounts. - Manual contributions modal scoped to the goal's linked accounts. Initial contributions seeded at creation can't be deleted; manual ones can. - AASM lifecycle: active / paused / completed / archived. Hard-delete only after archive. - Status pills (On track / Behind / Reached / No date) derived from pace vs target_date. - AI Assistant tool `create_savings_goal` lets the sidebar chat create a goal end-to-end from a natural-language prompt; soft errors carry the available-accounts list back to the LLM (mirrors the existing `import_bank_statement` pattern). - Family-scoped throughout (`Current.family`-only access, account family-scoping enforced both in controllers and the AI tool). - Demo data seed wires up 4 sample goals across the Depository accounts. Intentionally out of scope (separate PRs / v1.1): - Auto-fund from budget surplus + Sidekiq cron + budget-show card. - Dashboard "Savings goals" widget. - "Behind pace" projection chart on the detail page. - `evaluate_savings_goal_feasibility` LLM tool (level-setting before create_savings_goal). - Spend-less goals inside Budgets. - Family-member-private goals (deferred investigation).
- StatusPill: use functional `text-success` / `text-warning` tokens with matching icon colors and `px-2 py-1`, mirroring `app/views/budget_categories/_budget_category.html.erb:29-43`. - ProgressRing: rework center text to match `_budget_donut.html.erb` (small "Saved" label, `text-3xl font-medium` headline, "of $X" underline). Stroke color now derives from goal.status (yellow when behind, blue on track, green reached, gray for no-date). - GoalCard bar: track height + transition match budget category bar (`h-1.5`, `transition-all duration-500`, `inline-size`). - Index/show layouts: render page header inline (`<h1>` + actions). The default application layout doesn't yield `:page_actions`, so the CTA + kebab menu wouldn't appear when emitted via `content_for`. - Stepper review summary: target the actual form inputs by `name` rather than relying on the `data-target` Stimulus attribute, since `money_field` puts the attribute on the wrapper. Step 1 validation scoped to the step 1 panel. - Demo generator: filter Depository accounts via `where(accountable_type: "Depository")` — Rails delegated_type generates the `depository?` predicate, not a `.depository` scope.
…-chart
Previous savings goals UI looked nothing like the Claude Design output
(see sure-design-context/design/savings-goals/project/goals/*.jsx) and
the hand-rolled ring did not match the segmented D3 donut used at
app/views/budgets/_budget_donut.html.erb. This rewires the surface end
to end.
Donut chart:
- SavingsGoal#to_donut_segments_json returns the same segment shape as
Budget#to_donut_segments_json: filled portion in goal color, unused
remainder as `var(--budget-unallocated-fill)`. Visual identity is now
the same: segmented arc with cornerRadius and gap, courtesy of the
shared `donut-chart` Stimulus controller and D3.
- ProgressRingComponent renders a `data-controller="donut-chart"` div
with the same default-content/inner-text pattern as `_budget_donut`.
Index page (matches GoalsIndex.jsx):
- Page header: title + "Save toward what matters." subtitle + "New goal"
primary CTA right-aligned.
- Summary strip card: total saved / target, overall bar, active goals,
on-track ratio, behind count.
- State filter rendered as DS::Tabs-style pill nav (`bg-surface-inset
p-1 rounded-lg`, white-pill active state).
- Cards rebuilt: avatar (44px, rounded-xl, white initial on goal color)
+ name + secondary line ("N days left · by date" / "No target date" /
"Completed" / "Past due"), status pill with leading dot, big
$current/$target line + percent, bar in status colour, AccountStack
(overlapping initials) + "N accounts" + "to go".
Goal detail (matches GoalDetail.jsx):
- Header: 64px avatar + h1 name + status pill + "Target $X by date ·
N days left" subline + Edit (outline) + Add contribution (primary) +
kebab (DS::Menu for AASM transitions).
- Donut-chart ring card with stats overlay.
- 4-col stat row (Avg monthly, Total contributions, Target date,
Started) with mono numerals and "Needs $X/mo" / "Above target pace"
sub-captions where relevant.
- Two-col bottom: contributions list (avatar + account · date · source
· green +$amount) and funding accounts breakdown (stacked bar +
per-account row with $ and % of saved).
New components: Savings::AccountStackComponent (overlapping account
initials with ring-2 ring-container). StatusPillComponent now uses a
leading colored dot instead of an icon. GoalAvatarComponent radii
match Claude Design (rounded-md/lg/xl/2xl) and white initial.
Locale: new keys under savings_goals.{index.subtitle, index.summary.*,
goal_card.{accounts,days_left,completed,past_due,no_target_date},
show.header.*, show.ring.{of,to_go}, show.stats.*, show.funding_balance,
show.of_saved, show.notes}.
…dal, grouped funding accounts
Brings the savings goals UI closer to the Claude Design reference shared
by the user. Changes:
- Sidebar nav label: "Savings goals" → "Savings".
- Status pill copy: "Behind" → "Behind pace" (matches Pill component
from GoalsCommon.jsx).
- Empty state rewritten with a large target icon, "No goals yet"
heading, and the descriptive body copy from the design.
Goal detail page (matches GoalDetail.jsx):
- New "← All goals" back link above the header.
- 2-column hero: ring card on the left (320px column), Projection card
on the right.
- Projection card uses a new D3 Stimulus controller
(`savings-goal-projection-chart`) that draws:
· saved area + line from goal creation → today (solid, primary)
· dashed projection segment from today → target date (yellow when
behind, green when on track)
· horizontal dashed target line with label
· today marker (vertical dashed line + dot)
Data shape comes from `SavingsGoal#projection_payload`.
- Card subtitle generates a contextual sentence ("At $X/mo you'll fall
short. Bump to $Y/mo to hit it on time." / "At your current pace
you'll reach this goal around Month YYYY." / "Goal reached. Nice
work.") with a strong tag highlighting the actionable figure.
- Stat row now shows Linked balance (sum across linked accounts) +
"N accounts" sub-caption instead of duplicate "Target date" stat.
New goal modal (matches the design images 2 + 3):
- DS::Dialog custom header: DS::FilledIcon target glyph + title + step
subtitle ("Step 1 of 2 · Goal details" / "Step 2 of 2 · Review &
start") that updates as the user advances.
- Connected stepper at top of body: numbered circles connected by a
bar, step-1 circle flips to ✓ when complete.
- Step 1 heading "What are you saving for?" + supporting copy.
- Name field paired with a target glyph affordance on its left.
- Target amount + Target date in a 2-col grid.
- Funding accounts list now grouped by account subtype with uppercase
section headers (CHECKING / SAVINGS / HSA / CD / MONEY MARKET /
OTHER), each row showing avatar + name + subtype + balance.
- Step 2 heading "Looks good?" + Review card (goal target + funding
accounts summary + suggested monthly = target/months_remaining), and
a disclosure for the optional initial contribution.
- Footer: "Cancel" left text-button (closes modal) / "Back" left text
when on step 2; "Continue →" or "Create goal →" right arrow button.
Demo generator: Depository accounts now set `subtype` ("checking" /
"savings") on the accountable so they group correctly in the modal.
Tests: all green, 35 runs in the savings suite, 92 assertions.
- 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.
…ne negative range - Sparkline (`savings-sparkline` controller): dropped the `Math.max(0, yMin)` clamp on the y-axis domain so negative balances (or any series that dips into negative territory) render fully instead of being cropped off the canvas. - Hero card: padding `p-6` → `p-7`, column ratio `[minmax(0,1fr)_minmax(0,1.6fr)]` so the chart breathes, min height bumped to 220px, sparkline container `h-full min-h-[200px]` so it fills the card vertically. Stats row now sits at the bottom of the text column via `mt-auto pt-6`; labels promoted to `text-xs`, values to `text-lg`. - Section vertical rhythm: outer `space-y-6` → `space-y-8`. - Goal card: padding `p-[18px]` → `p-6`. Internal gap from header row to amount line `mt-3.5` → `mt-5`. Account-row gap `mt-3` → `mt-4`. - Account card: padding `p-5` → `p-6`. - Status pill "Behind" dot: `bg-yellow-500` → `bg-yellow-600` for a warmer/ambery tone matching the Claude Design reference. - Goal card donut "behind" stroke: `var(--color-yellow-500)` → `var(--color-yellow-600)` to match the pill.
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.
…e header Previous attempt put `mb-5` on the section header so the goal grid sat ~20px below it, but that also pushed the "No goals match" empty card down because it shares the same header. Margin collapse meant the empty card's own `mt-3` was getting added to the new big header `mb`. Rework: header back to `mb-2.5`, grid gets `mt-3` of its own. Empty card keeps its `mt-3`. Both children collapse to ~12px below the header now, which matches the breathing room the empty card had before this thread of edits.
…cards and empty state Move section gap from per-child mt-3 to a single mb-4 on the header, and toggle the grid wrapper hidden when no cards are visible. The previous markup gave inconsistent ONGOING-tag-to-content distance because the empty card sat below a 0-height grid, stacking margins differently than the cards layout.
…search 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.
… empty states P1: drop the sparkline + the single mixed hero. Hero became 3 separate KPI cards (Contributed last 30d, Needs this month, Goals on track), matching the Transactions page pattern. Each KPI answers a question the user opens the page asking — saving rate, this-month action, overall health. P3: empty state copy + CTA now reflect the reason it is empty. Search returns 0 → "No goals match X" + Clear search. Chip set to non-all → "No goals match this filter" + Show all. Both → both reasons + both buttons. Drop: total_savings_balance, savings_balance_series, savings_balance_30d_delta on Family (no other consumers). Add: Family#contribution_velocity(range:).
…rst sort, paused chip, rename "No date" to "Open-ended" P4: status pills now carry an icon alongside the colored tint (circle-check / triangle-alert / star / infinity / pause), so color is no longer the sole signal. Drop the redundant dot. P4: default sort on the active goals list becomes attention-first — behind → on_track → no_target_date → paused, alphabetical within bucket. The user opens the page and lands on the goals that need them. P5: add a Paused filter chip + render paused goal cards with opacity-75 so they read as inactive at a glance. Rename "No date" chip to "Open-ended" — clearer to non-jargon readers.
Each card now answers "what's my next move" without clicking into the detail page. Under the amount/target row, a pace line shows actual avg contributions vs the monthly target. The footer (previously "$X left") switches by status: - behind → "Save $Y/mo to catch up" - on_track → "Last contribution Nd ago" (or "today" / "No contributions yet") - reached / completed → "Goal reached" - no_target_date → "No deadline set" - paused → "Paused" Add SavingsGoal#last_contribution_at and #last_contribution_days_ago. Both these methods and average_monthly_contribution now respect a loaded :savings_contributions association so the index page doesn't N+1. Controller eager-loads :savings_contributions + :linked_accounts.
The Accounts grid duplicated the sidebar account list. Removing it gives the Goals section more breathing room and the page a tighter narrative: header → KPIs → Goals. Delete Savings::AccountCardComponent, Family#savings_subtype_accounts, the @savings_accounts / @account_goal_counts controller refs, and the related locale keys. Sidebar still shows the savings-subtype Depository accounts under "Cash" — no information is lost.
…apse notes, clean footer
P1 of modal refactor — visual fidelity baseline against the Claude
Design reference and refactoring-ui rules.
Drop required: true on name + target_amount (suppresses both the red `*`
indicator and the browser-default HTML5 validation tooltip). Client-side
validation moves into the Stimulus stepper in a follow-up commit.
Pass hide_currency: true on the money_field so single-currency families
don't see a redundant inline currency dropdown.
Wrap the Notes textarea in a <details> disclosure ("Add notes (optional)"
summary) so step 1 isn't padded with rarely-used fields.
Drop the footer top border-subdued divider so the action row floats
against the dialog's existing padding boundary.
Drop the view-layer SavingsGoal::COLORS.sample fallback on hidden color
field — the controller already seeds @savings_goal.color.
…+ circular header icon Replace the big square DS::FilledIcon next to the name input with a small Savings::GoalAvatarComponent that previews the goal's avatar (seeded color + first character of the typed name, updates live via new stepper#nameChanged action). Switch the modal header's target avatar from FilledIcon(size: lg, rounded: false) → (size: md, rounded: true) — matches the goal-avatar shape used elsewhere on the page. Replace the hand-rolled <button> for Cancel/Back with DS::Button variant: "ghost". Stepper now drills into the button's inner span to swap the label, same pattern already used for the Continue/Create button on the right. Drop the now-unused footerLeftLabel target.
…hash Replace the hardcoded var(--color-blue-500) on every funding-account row's avatar with a deterministic pick from Category::COLORS based on the account name's hash. Rows now read at a glance instead of melting into one blue column.
Drop the top-of-form server-error banner (kept only when model.errors on :base, which is rare) and stop relying on input.reportValidity() browser-default tooltips. Stepper validates step 1 manually when Continue is clicked: - name empty → red ring on input + "Please give your goal a name." below - target_amount ≤ 0 → red ring + "Set a target amount greater than zero." - no funding account checked → "Select at least one funding account." Each error clears as soon as the user fixes the field — typing in the name field clears the name error, entering an amount > 0 clears the amount error, checking any account clears the accounts error. Drop the now-unused flashLinkedAccountsRequired() shake; replaced by the per-field error pattern.
…osure for notes, drop redundant cancel Use Sure's .checkbox checkbox--light classes on the funding-account check_box_tag — matches transactions / entries / settings pages. Stepper line: 2px tall bg-secondary in resting state (was 1px bg-subdued which disappeared in dark mode). Step 2 inactive circle: border-secondary outline instead of bg-container-inset fill — visible in both themes. Notes collapse switches from raw <details> to DS::Disclosure for consistency with the rest of Sure's DS. Drop the footer Cancel button — the close X in the modal header already handles that, and double cancel was redundant. The footer-left slot now only renders Back (with arrow-left icon) and only on step 2.
Pass color: "current" to the icon helper so triangle-alert / circle-check / star / infinity / pause render in the same color as the pill's text (text-success / text-warning / text-secondary). The icon helper defaults to text-secondary, which made all icons grey regardless of pill variant.
…ing label Drop the outer <label>Name</label> heading + label: false on the text_field, and pass label: t(...) + container_class: "flex-1" so styled_form_builder wraps the name input in Sure's standard .form-field component. Label now sits inside the input box, matching the new transaction modal pattern (and every other styled_form_with form across Sure). The avatar still sits as a sibling outside the box, flex-aligned center.
bg-secondary is not a registered Sure utility, so the previous h-0.5 bg-secondary div rendered with no background — the line was just a transparent slot, barely visible in either theme. Replace with border-t-2 border-secondary on the connector div, and toggle border-inverse / border-secondary on step transition. Both classes are real Sure tokens with proper light/dark variants (alpha-black-200 / alpha-white-300 for border-secondary).
Passing label: false to f.text_area stripped the .form-field container,
leaving a naked textarea with no border or visible label inside the
DS::Disclosure. Pass a real label ("Notes (optional)") so styled_form_with
wraps it like every other textarea in Sure (transactions/_form.html.erb,
trades/show.html.erb, etc.). Bump rows to 3.
…rs on initial-contribution inputs DS::Button treats "hidden" as a display override class — adding class: "hidden" stripped the base inline-flex display, so when Stimulus later removed the hidden class the icon and text stacked vertically. Wrap the Back button in a hidden <div> and toggle the wrapper instead; the button keeps its inline-flex base. The Amount + From-account inputs in step 2 used label_tag + number_field_tag / select_tag directly with no .form-field wrapper, so they rendered as bare inputs (same issue Name had in step 1). Wrap each in .form-field > .form-field__body with form-field__label and form-field__input classes — matches the styled_form_with pattern used by Target amount / Target date in step 1.
…y_field Add virtual attr_accessors for initial_contribution_amount and initial_contribution_account_id on SavingsGoal so the form builder can bind to them without the model needing real columns. Replace the raw number_field_tag with f.money_field hide_currency: true so the field shows the currency symbol prefix and step-aware precision, matching the Target amount field in step 1.
…ontrib when reached, last-contribution recency
D1 — Drop the "Linked balance" stat. It summed the linked accounts'
total balances (e.g. $204K) rather than the amount saved toward the
goal ($1K), so it overstated progress by ~200x. Replace with a
"Target pace" card showing required $/mo.
D2 — Drop the redundant "← All goals" link. The breadcrumb nav above
the header already shows Home › Savings Goals.
D3 — Hide the Add-contribution button on reached / completed goals.
Logically you don't keep contributing after the goal is done.
D5 — Add last-contribution recency to the header sub ("Last
contribution 3d ago"), matching the goal card footer pattern from
the index refactor.
D11 — Stat row now 3 cards instead of 4 (avg monthly, total
contributions, target pace). Drop the "Started" card — low-signal for
new users.
For behind (non-paused) goals with a target_date, render a DS::Alert warning under the header surfacing the actionable insight from the index card: "Save $X/mo to catch up · Bump your monthly contribution to stay on track for <date> · [+ Add $X]". The CTA prefills the contribution flow with the target monthly amount in the button label so the user sees exactly what to commit to. Mirrors the goal-card footer pattern shipped during the index refactor — the detail page now carries the pace narrative forward instead of hiding it inside the projection paragraph.
… banners
D6 — Paused goals render a top info banner ("This goal is paused" +
[Resume goal]) before the hero. Archived goals get the same treatment
with a Restore CTA when applicable.
D8 — No-target-date goals replace the empty projection chart with a
focused prompt card: calendar-plus icon, "Add a target date" heading,
short copy, and a "Set target date" CTA that opens the edit modal.
Stops wasting the right half of the hero on an unrenderable chart.
D9 — Reached / completed goals replace the projection chart with a
celebration card: party-popper green icon, "Goal reached. Nice work."
heading, target-hit confirmation copy, and an "Archive goal" CTA when
the state machine allows it.
The original projection chart still renders for behind / on_track goals
with a real target_date — that's the only case where it adds value.
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.
Resolves sure-design DS drift patrol findings (raw <details> on goals/_color_picker and categories/_form). The color-icon-picker's <summary> is a 24/28px pencil button absolutely positioned next to the avatar — none of DS::Disclosure's existing variants (default / card / card_inset / inline) match that trigger shape, so the bot's suggested swap would regress the visual. - DS::Disclosure: add optional `summary_class:` kwarg. When set, the caller's class string replaces the variant's hard-coded summary chrome; otherwise the existing variant logic is preserved (verified against the 8 existing callsites — none pass summary_class, all fall through to current behavior). - goals/_color_picker + categories/_form: swap raw <details> for DS::Disclosure with summary_class carrying the pencil-button positioning. Stimulus data attributes (`color-icon-picker-target` and the outside-click handler) forwarded via **opts to tag.details so the controller still finds its target. The DS::Disclosure-rendered popover content now sits inside the component's `<div class="mt-2">` wrapper, but the popups themselves are `position: absolute` / `position: fixed`, so the wrapper is out-of-flow neutral.
The 2-step stepper on the create modal carried a review step whose only
real signal was a derived "Save $X/mo to hit it on time" hint. Name,
amount, and date are all visible in step 1, so the review step was
re-displaying form values the user just typed.
Collapses both flows into a single panel:
- `_form_stepper.html.erb` + `_form_edit.html.erb` → single
`_form.html.erb` driven by `goal.persisted?` for URL / method /
submit label.
- `goal_stepper_controller.js` → `goal_form_controller.js`. Drops the
step1Panel / step2Panel / step1Indicator / step2Indicator /
step1Circle / step2Circle / stepperLine / reviewName / reviewSummary
/ reviewSuggested / footerLeftButton / footerRightButton / submitButton
target plumbing and the next / back / blockEnter / updateStepperState
/ updateFooter / updateReview methods. Keeps name-validation,
amount-validation, accounts-required validation, avatar-preview-from-
name, and the suggested-pace computation — that one now writes into
an inline `<p data-goal-form-target="suggested">` below the
target_date field instead of the review card.
- `new.html.erb`: drops the `Step 1 of 2 · Goal details` subtitle
target. New `goals.new.subtitle` replaces the two step subtitles.
- `edit.html.erb`: renders the same `form` partial.
- `_color_picker.html.erb`: `data-goal-stepper-target="avatarPreview"`
→ `data-goal-form-target="avatarPreview"` (same Stimulus target,
renamed for the new controller scope).
- `funding_accounts_breakdown_component.rb`: i18n key path moves to
`goals.form.subtypes.*` matching the locale restructure.
- `en.yml`: `goals.form_stepper.step1.fields.*` → `goals.form.fields.*`.
`step2.*` and the `back` / `continue` / `cancel` keys drop. New
`goals.form.create` ("Create goal") + `goals.form.save` ("Save
changes") drive the submit-button label.
UX delta: the user no longer sees a "Step 1 of 2 / Step 2 of 2" beat.
The form is short enough that everything fits in one panel; the only
value-add from the old step 2 — the suggested-pace hint — now updates
live inline as the amount / date / account-count changes.
All 20 `test/controllers/goals_controller_test.rb` tests still pass.
`bundle exec erb_lint` clean on the touched templates.
Pulls `github.event.pull_request.number` and
`github.event.pull_request.head.sha` out of every shell `run:` block
and `actions/github-script` body into job-level env vars. The PR
number is nominally an integer (no immediate injection risk), but the
*pattern* of inlining a `github.event.*` expression into a privileged
workflow's shell scripts is what the SAST finding wants to eliminate:
- The workflow holds `CLOUDFLARE_API_TOKEN` and
`CLOUDFLARE_ACCOUNT_ID`.
- A future copy/paste of one of these step bodies onto a user-
controlled string (branch name, PR title, commit message) would
silently become an arbitrary command-injection path.
Touches:
- Job-level `env: { PR_NUMBER, HEAD_SHA }` so every step inherits.
- "Configure preview files": `sed` substitution now reads
`${PR_NUMBER}` from the shell env (the literal-placeholder side
stays escaped as `\${PR_NUMBER}`).
- "Delete existing preview container app" + "Delete existing preview
Worker": shell var assignments use `${PR_NUMBER}`.
- "Create GitHub Deployment" github-script: `process.env.PR_NUMBER`
inside the JS template literal instead of GHA template
interpolation.
- "Deploy to Cloudflare Containers": `${PR_NUMBER}` in the shell;
`CLOUDFLARE_WORKERS_SUBDOMAIN` also lifted into the step's `env:`
block so the URL template uses `${CLOUDFLARE_WORKERS_SUBDOMAIN}`,
not a templated secret expression in the shell command.
- "Comment on PR" github-script: replaces the four
`${{ github.event.pull_request.* }}` interpolations with
`process.env.PR_NUMBER` / `process.env.HEAD_SHA` and lifts the
preview URL via step env. `issue_number` is `Number(...)`-coerced
since env values are strings.
- "Store cleanup metadata" artifact name: uses `${{ env.PR_NUMBER }}`
(template context, not shell).
YAML still validates (`ruby -ryaml -e 'YAML.load_file(...)'`). The
only remaining `github.event.pull_request.*` references are the job-
gate `if:` condition and the env-extraction definitions themselves —
both safe contexts.
Biome's lint/style/useNumberNamespace rule. Same semantics — Number.NaN is the explicit namespace form post-ES2015. CI lint_js was failing on this line.
…cture # Conflicts: # .github/workflows/preview-deploy.yml # app/models/account/provider_import_adapter.rb
The preview isolation refactor (#2025) removed the "Delete existing preview container/Worker" steps. Merging main into this branch auto-kept this branch's copies, leaving two steps that run `npx wrangler` from `workers/preview` with Cloudflare secrets in scope. That trips bin/preview_deploy_security_check.rb (PR-controlled working-directory, npx wrangler, secrets outside the deploy step), failing scan_ruby and, in turn, the preview deploy gate. Removing them realigns the workflow with main's isolated model.
Signed-off-by: Guillem Arias Fauste <accounts@gariasf.com>
Signed-off-by: Guillem Arias Fauste <accounts@gariasf.com>
Signed-off-by: Juan José Mata <juanjo.mata@gmail.com>
Collapse the 9 churned goals migrations (create savings_* tables, rename to goals, add icon, add pledges + enums, drop contributions, restrict the goal_accounts->accounts FK) into one create_goals migration that builds the final schema directly. Schema is unchanged. The concurrent transactions pledge-id index stays a separate migration because CREATE INDEX CONCURRENTLY cannot run inside a transactional migration.
The custom-color swatch used a raw ring-blue-500 palette utility while the preset swatches use ring-alpha-black-500. Switch to the functional token for design-system consistency.
Adds a DS::ProgressRing ViewComponent + Lookbook preview: a single-arc circular progress ring decoupled from any model (percent, size, stroke_width, tone, label, show_percent). It owns the geometry (radius / circumference / dash offset) and the accessible progressbar markup that callers were hand-rolling. Migrates Goals::CardComponent's inline <svg> to it (geometry methods removed from the component; status now maps to a tone). Rendered output is identical — same track token, success/warning/neutral arc colors, ±2 geometry. Scope (stacked on #1798, which is where the goal surfaces live): - Deferred: folding the goals/show ring (Goals::ProgressRingComponent) — it's rendered via the donut-chart D3 controller (segmented), a different shape, so it stays for now. - Deferred: the loan-overview ring (arrives with #1775) and the --budget-unused-fill → --color-progress-track-fill token rename (touches the budget donut surfaces + DS token source). DS::ProgressRing reuses the existing track token for now via DEFAULT_TRACK.
Contributor
|
Warning Review limit reached
More reviews will be available in 4 minutes and 15 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (6)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Collaborator
|
Clean extraction. The The
Generated by Claude Code |
# Conflicts: # app/components/goals/card_component.html.erb # app/components/goals/card_component.rb
jjmata
approved these changes
Jun 2, 2026
github-project-automation
Bot
moved this from Todo
to Done
in [v0.7.2] Previous `stable` train
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
First step of #1899 — extract a reusable
DS::ProgressRingprimitive and migrate the goal card to it. Stacked on #1798 (feat/goals-v2-architecture), since the goal surfaces only exist there; base will flip tomainonce #1798 merges.DS::ProgressRingis a single-arc circular progress ring decoupled from any model:It owns the geometry (radius / circumference / dash offset), the tone→token color map, and the accessible
role="progressbar"markup (added only whenlabel:is given; otherwise decorative) that each callsite was re-deriving.Goals::CardComponent's inline<svg>now rendersDS::ProgressRing; itsring_radius/ring_circumference/ring_offset/ring_colormethods are gone (geometry lives in the primitive), with status mapped to a tone.Visual — primitive + pixel parity
The bottom row is the parity check: the old hand-rolled card SVG vs the migrated
DS::ProgressRingat 64px/success/72% — identical (same--budget-unused-filltrack,--color-successarc, geometry). Edges (clamp >100, 0%,show_percent: false) shown too.Deliberately deferred (noted in the issue)
Goals::ProgressRingComponent) — rendered via thedonut-chartD3 controller (segmented), a genuinely different shape. Folding it into a static SVG is a separate change; left as-is.--budget-unused-fill→--color-progress-track-filltoken rename — touches the budget donut surfaces + DS token source (needs DS sign-off).DS::ProgressRingreuses the existing token viaDEFAULT_TRACKfor now, so nothing is visually changed; the rename is a clean follow-up.Verification
bin/rails test test/components/DS/progress_ring_test.rb→ 6 runs, 0 failures (geometry clamp, tone map, conditional progressbar a11y, center-percent toggle).rubocop+erb_lintclean. Card parity shown above.