mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 07:49:01 +00:00
8cf6a7a4ca978fdc39f1f857089084ff310e262b
141 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
Guillem Arias
|
903121f66b |
Merge origin/main into feat/goals-v2-architecture
Pulls in #1853 (DS::SearchInput), #1855 (DS::Disclosure :card), #1856 (3 provider panels migration) so the goals views can migrate to the new primitives. |
||
|
Guillem Arias
|
48862f8ed9 |
refactor(goals): use semantic color tokens for ring + status callout
`Goals::CardComponent#ring_color` and `goals/_status_callout` reached into the Tailwind palette directly (`text-yellow-700`, `var(--color-green-600)`, etc.) for status-coded colors. The sure-design-system already exposes the matching semantic tokens (`text-warning`, `text-success`, `--color-success`, `--color-warning`), which theme-swap correctly in dark mode and survive palette renames without view edits. - `ring_color`: collapse `:reached` / `:on_track` to `--color-success` (the status pill already differentiates them via icon — completed star vs check) and `:behind` to `--color-warning`. The `:no_target_date` fallback keeps `--color-gray-400` for now since there's no semantic neutral token; that gets cleaned up alongside the DS::ProgressRing extraction. - `_status_callout`: drop `text-yellow-700 theme-dark:text-yellow-300` and `text-green-700 theme-dark:text-green-300` for the equivalent semantic `text-warning` / `text-success` utilities. No visual regression in light mode (success collapses two adjacent greens into one); dark mode now properly inverts via the design system's theme variants instead of hand-rolled overrides. The `stroke="var(--budget-unused-fill)"` track on the inline card ring stays for now — that's a token-rename refactor that touches budget code outside this PR's scope and lands cleanest with the DS::ProgressRing primitive that consolidates the three ring implementations. |
||
|
Guillem Arias Fauste
|
78c3331360 |
feat(design-system): DS::Disclosure :card variant + migrate 14 provider items (#1715 §6) (#1855)
* feat(design-system): DS::Disclosure :card variant + migrate 14 provider items Resolves part of #1715 §6. The provider-item view templates (binance, brex, coinbase, coinstats, enable_banking, ibkr, indexa_capital, kraken, lunchflow, mercury, plaid, simplefin, snaptrade, sophtron — 14 in total) all hand-rolled the same `<details open class="group bg-container p-4 shadow-border-xs rounded-xl">` shell with a custom summary inside and content below. Extend `DS::Disclosure` with a `:card` variant that bakes the card chrome onto the `<details>` element itself; the summary becomes slot-driven via the existing `summary_content` slot. Provider items keep their custom summary content (logos, brand colors, status copy) unchanged — they just hand it to the slot instead of writing it between `<summary>` tags. API: DS::Disclosure.new(variant: :card, open: true) do |d| d.with_summary_content do <div class="flex items-center gap-2"> chevron + custom summary markup </div> end body content end While here: - Drop the no-op `group-open:transform` from the default chevron (Tailwind v4 applies `rotate-90` directly). - Add `motion-safe:transition-transform motion-safe:duration-150` to chevron rotation for reduced-motion respect (matches the pattern landing in #1841). - Extract `summary_classes` / `details_classes` helpers so the default and card surfaces stay readable side-by-side. Note: this PR touches `DS::Disclosure` and will textually conflict with #1841 (focus-ring + reduced-motion polish). Both changes are compatible — when #1841 merges first, the resolution is just preserving both edits (the focus-ring classes are already merged into `summary_classes` here). * fix(review): use ring-alpha-black-300 focus token in DS::Disclosure CodeRabbit P2: switch the focus-visible outline from raw gray-900/white palette values to the alpha-black-300 ring token, matching the established focus pattern on settings/provider_card.html.erb. This keeps theme behavior centralized in the design system tokens instead of branching on theme-dark: in the component. Applies to both :default and :card summary variants. * fix(review): stretch DS::Disclosure summary_content to full width Codex P2 follow-up on the disclosure-migration stack: \`<summary>\` is \`display: list-item\`, so a flex inner div inside the slot shrink-wraps to content width — any \`justify-between\` the caller adds has nothing to distribute, and the right-side admin actions collapse toward the title across every provider-item partial migrated to \`DS::Disclosure variant: :card\` in #1855 (and the panels in #1856 / #1857 / #1858 that inherit this component). Wrap the slot in \`<div class=\"w-full\">\` so caller-supplied flex rows stretch across the card. \`:default\` variant is unchanged (it never uses \`summary_content\`). |
||
|
Guillem Arias Fauste
|
8e444ff98b |
feat(design-system): add DS::SearchInput primitive (closes #1715 §3) (#1853)
* feat(design-system): add DS::SearchInput + migrate 2 broken-focus callsites Resolves #1715 §3. Two standalone search-field callsites — `/settings/preferences` currency filter and `/settings/providers` filter row — had a hand- rolled markup that ended in `focus:ring-gray-500`. That utility has no backing token in the design system (`ring-gray-500` isn't in Tailwind's default + Sure doesn't register a gray ring color), so the input rendered with zero focus indicator on a bordered bg-container surface. Keyboard users couldn't tell when the field was focused. Introduce `DS::SearchInput` — icon-on-left, bordered, token-backed focus ring matching the DS::Button pattern landing in #1840 (`outline-2 outline-offset-2 outline-gray-900` with the dark-mode override). API: DS::SearchInput.new( name: "...", placeholder: "...", value: ..., aria_label: "...", # defaults to placeholder class: "...", # passed to the wrapper **opts # spread onto the <input>, e.g. data-* ) Migrate the two broken callsites. Three other "search" patterns stay as-is (out of scope for this PR): - `form.search_field :search` inside `styled_form_with` blocks (accounts/show/_activity.html.erb, UI::Account::ActivityFeed) — already routes through StyledFormBuilder's form-field CSS. - Embedded-dropdown search input inside DS::Select, DS::Menu, and the splits/category-select panels — uses a different shape (no border, no ring) because the parent panel provides the chrome. - Category dropdown's combobox search input (app/views/category/dropdowns/show.html.erb) — has a custom `role=combobox` flow and stays intentionally distinct. * feat(design-system): add embedded variant to DS::SearchInput, migrate 2 more callsites Adds `variant: :embedded` to `DS::SearchInput` for search inputs that live *inside* another DS panel (DS::Select dropdown, splits category filter, future DS::Popover-hosted filters). No own border / no own focus ring — the parent panel provides the chrome, so adding ring + outline competes with its `focus-within` state. API: DS::SearchInput.new(variant: :embedded, placeholder: "...", data: {...}) The `:standalone` default (from the previous commit) stays unchanged and remains the right choice for top-of-list filter inputs. Migrated: - `app/components/DS/select.html.erb` — the in-dropdown search input for `DS::Select.new(searchable: true)`. Was the only remaining internal raw <input type="search"> markup in the component. - `app/views/splits/_category_select.html.erb` — split-transaction category picker filter. Same shape as DS::Select's search but hand-rolled because the picker isn't a vanilla DS::Select. Three other search patterns stay out of scope (intentionally, per the previous commit): - `form.search_field :search` inside `styled_form_with` — uses form-field CSS, different visual contract. - `app/views/category/dropdowns/show.html.erb` — bespoke `role="combobox"` flow with `aria-expanded` / `aria-autocomplete` semantics that don't belong in this primitive. * fix(review): mobile font + embedded variant focus-within ring - DS::SearchInput: switch text-sm -> text-base sm:text-sm on both variants so the input keeps its 16px base size on mobile. iOS Safari zooms the viewport when a focused input is below 16px, which the unconditional text-sm was triggering on the Settings Preferences currency search and Settings Bank Sync provider search. - DS::Select (searchable variant) + splits/_category_select: add focus-within:ring-4 focus-within:ring-alpha-black-200 (with theme-dark variant) on the wrapper around the embedded search input. The embedded variant intentionally has no own focus ring so it inherits chrome from its parent panel — but the two current parent panels were not providing one, so keyboard focus on the dropdown search box rendered with no visible indicator. Ring matches the .form-field token used across the design system. * fix(merge): repair DS::Select search input merge resolution The previous merge of main left invalid Ruby inside the DS::SearchInput `data:` hash: aria-label="<%= t("helpers.select.search_placeholder") %>" This is an ERB string assignment masquerading as a hash entry — it does not parse and would have raised SyntaxError at render. Two follow-ups: - Drop the `aria-label` entry entirely. `DS::SearchInput` already defaults `aria_label` to `placeholder`, and `placeholder` is set on the call, so the resulting <input> already carries `aria-label="<%= t(...) %>"`. - Restore the `input->select#syncTabindex` action that main #1848 added on the embedded search input. It keeps the roving tabindex on the listbox in sync as filtered results change. Original PR branch had only `list-filter#filter`; reintegrate both with explicit `input->` event prefixes for parity with main. --------- Signed-off-by: Juan José Mata <juanjo.mata@gmail.com> Co-authored-by: Juan José Mata <juanjo.mata@gmail.com> |
||
|
Guillem Arias
|
e16d9c4a6a |
Merge origin/feat/goals-v2-architecture; reconcile beta→preview rename
Remote branch added a beta_gated_nav_item helper + 'Gating the main nav' docs section. Main concurrently renamed the beta-features gate to preview-features (concern, predicate, JSONB key, locale flash). Rename the new helper / partial local / pill marker to match preview naming and port the nav-gating docs into gating-a-preview-feature.md so the improvement survives the rename. Resolved conflicts: - db/schema.rb: take the later schema version (2026_05_19_100000). - docs/llm-guides/gating-a-beta-feature.md: accept main's deletion; port the 'Gating the main nav' section into the preview guide. Renames carried through to keep the gate wired end-to-end: - application_helper.rb: beta_gated_nav_item → preview_gated_nav_item; beta_features_enabled? → preview_features_enabled?; beta: → preview:. - _nav_item.html.erb: beta: local → preview: local; shared.beta i18n key → shared.preview. - application.html.erb: caller renamed to preview_gated_nav_item. - goals/index.html.erb: pill label uses shared.preview. - shared/en.yml: 'beta: Beta' → 'preview: Preview'. - goals_controller, goal_pledges_controller: require_beta_features! → require_preview_features!. - goals_controller_test, goal_pledges_controller_test: flip the preference key, flash matcher, and test names to 'preview'. |
||
|
Guillem Arias
|
926d71c74a |
Merge origin/main into feat/goals-v2-architecture
Resolved conflicts:
- db/schema.rb: take main's schema version (later migration timestamp);
goals + debug_log_entries tables both present.
- app/views/categories/_form.html.erb: keep branch's shared
color-icon-picker controller action; adopt main's t('.auto_adjust') i18n.
|
||
|
Guillem Arias Fauste
|
12785754c8 |
feat(design-system): split DS::Menu into strict action-list + new DS::Popover (#1850)
* feat(design-system): split DS::Menu into strict action-list + new DS::Popover for mixed content Closes #1743. DS::Menu used to absorb both action-list dropdowns (row context menus, "more actions") AND mixed-content panels (user-account dropdown, filter forms, picker pop-ups). The two shapes carry incompatible a11y contracts: - **Action list**: `role="menu"` container, `role="menuitem"` children, Up/Down arrow nav per WAI-ARIA APG. - **Mixed content**: NO menu role — `role="menu"` restricts AT users to menuitem-only navigation and breaks any panel with forms, headings, or generic groupings. This PR splits the component: ## DS::Menu (tightened) Strict action-list primitive. Variants reduced to `:icon` and `:button` (no `:avatar`). `custom_content` slot removed. Bakes in: - `role="menu"` on the panel, `aria-haspopup="menu"` + `aria-expanded` + `aria-controls` on the trigger. - `role="menuitem"` + `tabindex="-1"` on every DS::MenuItem; the controller installs roving tabindex (first item gets `tabindex="0"` when the menu opens) and handles ArrowUp/Down/Home/End + Escape + Enter/Space activation. - `role="separator"` on the divider variant. - Stable per-instance `menu-<8-char hex>` id so the trigger's `aria-controls` resolves correctly. `DS::Menu.new(variant: :avatar, ...)` now raises ArgumentError pointing at DS::Popover. ## DS::Popover (new) Positioned panel for **mixed**, **non-action-list** content: account menus, picker forms, filter forms, embedded controls. Slots: `button`, `header`, `custom_content`. Variants: `:icon`, `:button`, `:avatar`. NO `role="menu"` — the panel announces as a generic dialog-popup (`aria-haspopup="dialog"`, `aria-expanded`, `aria-controls`). Mirrors DS::Menu's floating-ui positioning + Escape/outside-click lifecycle in its own Stimulus controller (`DS--popover`). Avatar variant ships a focus ring + bumped touch target (44×44 via `w-11 h-11` per #1738). ## Migrated callsites (7 → DS::Popover) - `app/views/users/_user_menu.html.erb` — avatar trigger + profile header + nav links (items kept as DS::MenuItem inside `custom_content` for visual parity) - `app/views/categories/_menu.html.erb` — turbo-framed category picker - `app/views/budgets/_budget_header.html.erb` — budget picker - `app/views/reports/index.html.erb` — period picker - `app/views/holdings/_cost_basis_cell.html.erb` — cost-basis edit form - `app/views/transactions/searches/_form.html.erb` — filter form - `app/components/UI/account/activity_feed.html.erb:70` — status checkboxes (the row-level "new" menu on line 9 stays as DS::Menu) The other 33 DS::Menu callsites stay as-is — pure action lists. Locale: `ds.popover.avatar_default_label` + `users.user_menu.aria_label` keys added (en only; other locales handled in a separate i18n pass). * fix(test): update sidebar user-menu selector for Menu→Popover migration The user-menu now renders as `DS::Popover` (variant: :avatar) instead of `DS::Menu` after the menu split, so its trigger carries `data-DS--popover-target="button"` rather than the old `data-DS--menu-target`. Update the sidebar-driven settings test helper to match — every system test that drives Settings via the sidebar gates on this selector. * fix(review): DS::Popover/Menu trigger a11y + caller-attr preservation - popover.rb / menu.rb: button slot now merges (not overwrites) caller- provided data and aria hashes, sets aria-haspopup/expanded/controls on the :button variant, defaults type="button" on block-rendered buttons. - menu.rb / menu.html.erb: drop renders_one :header (strict-menu API shouldn't expose an arbitrary-markup escape hatch); preview updated. - menu_controller.js: handle Enter/Space activation on focused menuitem so keyboard navigation matches the ARIA menu pattern. - cost_basis_cell / transactions/searches/_menu: retarget cancel button data-action from DS--menu#close to DS--popover#close (host controller changed in the migration). * fix: apply CodeRabbit auto-fixes Fixed 1 file(s) based on 1 unresolved review comment. Co-authored-by: CodeRabbit <noreply@coderabbit.ai> * fix(review): MenuItem roving: false for DS::Popover usage Codex P1 on #1850: \`DS::MenuItem\` hard-codes \`tabindex=\"-1\"\` and \`role=\"menuitem\"\` for both link and button variants — correct inside \`DS::Menu\` (which provides arrow-key roving and announces \`role=\"menu\"\`), but breaks every \`DS::MenuItem\` rendered inside \`DS::Popover\` (\`app/views/users/_user_menu.html.erb\`). Popover has no roving handler, so Tab skips every item — Settings, Changelog, Feedback, Contact, Log out become keyboard-unreachable. Add a \`roving:\` keyword (default \`true\`) to \`DS::MenuItem\` that gates both \`tabindex=\"-1\"\` and \`role=\"menuitem\"\`. \`DS::Menu\` callers keep the default (roving menu semantics intact). Pass \`roving: false\` from \`_user_menu.html.erb\` so user-menu items land in the normal Tab order. Existing \`menu.with_item(...)\` callers in the design system still default to \`true\`, so no behavior change for \`DS::Menu\` consumers. * fix(review): make menuitem_attrs authoritative on roving CodeRabbit Major on #1850: \`merged_opts\` was splatted AFTER \`menuitem_attrs\` in \`DS::MenuItem#wrapper\`, so a stray \`role: :button\` or \`tabindex: 0\` from a \`menu.with_item(..., role: …)\` caller could silently downgrade the \`DS::Menu\` ARIA contract that \`menuitem_attrs\` enforces. Strip \`:role\` and \`:tabindex\` from \`merged_opts\` whenever \`roving\` is enabled, then splat \`menuitem_attrs\` last. When \`roving: false\` (popover usage in \`_user_menu.html.erb\`) callers keep full control — Tab order and explicit ARIA stay tunable by the caller. --------- Signed-off-by: Juan José Mata <juanjo.mata@gmail.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: CodeRabbit <noreply@coderabbit.ai> Co-authored-by: Juan José Mata <juanjo.mata@gmail.com> |
||
|
Guillem Arias Fauste
|
e67ff3e3dc |
refactor(design-system): migrate single-color tokens to @theme + lint @utility /N footgun (#1849)
* refactor(design-system): migrate single-color semantic tokens to @theme + lint @utility /N footgun Closes #1653. Tailwind v4 auto-generates the `/N` opacity-modifier pipeline (`color-mix(in oklab, var(--color-X) N%, transparent)`) only for colors declared in `@theme`. Tokens emitted as `@utility name { @apply ... }` bypass that pipeline entirely, so `text-link/70`, `bg-surface/50`, etc. silently compile to nothing — the workaround from #1626 was `text-inverse opacity-70`. Migrate the 11 single-color semantic tokens whose class names match Tailwind's color-utility convention (`bg-X`, `text-X`, `border-X`) and have no cross-prefix collision: bg-surface, bg-surface-hover, bg-surface-inset, bg-surface-inset-hover bg-container, bg-container-hover, bg-container-inset, bg-container-inset-hover bg-nav-indicator text-link border-tertiary After migration, `--color-surface`, `--color-container`, etc. live in `@theme` and Tailwind auto-generates every prefix variant (`bg-surface`, `text-surface`, `border-surface`, plus `/10`..`/100`). The original utility class names are preserved (now via auto-generation instead of `@utility` blocks), so every existing callsite continues to work. NOT migrated, by design: - **inverse family** (`bg-inverse`, `text-inverse`, `bg-inverse-hover`, `border-inverse`): bg- and text- variants have *different* colors, cannot share one `--color-inverse`. Renaming the family (`bg-strong-surface` + `text-on-strong-surface`) would touch ~61 view files and trade one footgun for semantic loss; deferred until a concrete `bg-inverse/N` use case appears. - **primary/secondary/subdued/destructive** (cross-prefix collision): `text-primary` (gray.900) and `border-primary` (alpha-black.300) carry deliberately distinct values, can't share `--color-primary`. Same for the secondary/subdued pairs. Migrating either alone would force a rename of the other. - **button-bg-*, tab-item-*, tab-bg-group**: class names don't follow Tailwind's `<prefix>-<name>` convention, so auto-generation would emit `bg-button-bg-primary` not `button-bg-primary`. - **composites** (`bg-loader`, `bg-overlay`, `shadow-border-*`, `border-divider`): compile to multiple properties or alias-reference other utilities — must stay as @utility. Add an `erb_lint` DeprecatedClasses rule covering the @utility-only tokens with `\d+` regex modifiers so any future `text-inverse/70` etc. fails CI with the explanation that `opacity-N` is the workaround and #1653 is the tracking issue. Verified the rule fires on synthetic input; verified zero new violations on the existing app. Stats: `@utility` blocks dropped from 45 → 34; @theme primitives grew from 183 → 194. * fix(review): cover remaining @utility /N footgun tokens in erb_lint CodeRabbit flagged that the new DeprecatedClasses /N rule missed seven still-defined @utility color tokens: border-destructive, border-solid, button-bg-secondary-strong, button-bg-secondary-strong-hover, button-bg-disabled, button-bg-ghost-hover, button-bg-outline-hover. Without them, classes like button-bg-disabled/50 pass lint while Tailwind silently drops the class. Adding the patterns surfaced two pre-existing offenders (border-destructive/30, border-destructive/20). Swap both to solid border-destructive — the @utility override defines red-500 (light) while --color-destructive in @theme is red-600, so the /N modifier was rendering an off-shade rather than the intended faded variant. Verified the rule fires on synthetic input for all seven new patterns, then verified zero remaining violations on the new patterns across app/**/*.erb. * chore(erb_lint): add trailing newline to .erb_lint.yml Per review feedback on #1849. Some editors flag the missing newline; keeps style consistent with the rest of the codebase. |
||
|
Guillem Arias Fauste
|
25bb394378 |
fix(design-system): DS::Select a11y — fix aria-expanded, listbox keyboard nav, label binding (#1848)
* fix(design-system): DS::Select a11y — fix aria-expanded, listbox keyboard nav, label binding Closes #1744. Several concrete bugs from the savings-goals audit: 1. **`aria-expanded` wired to the wrong state.** The template had `aria-expanded="<%= @selected_value.present? ? "true" : "false" %>"`, which is "has a value been chosen", not "is the menu open". AT users heard a misleading signal on every page load. Init to `"false"`; the Stimulus controller's openMenu/close already correctly maintains the attribute after that. 2. **`aria-labelledby` referenced a nonexistent id.** The trigger pointed at `"#{method}_label"`, but the rendered `<label>` had no id at all — the binding silently failed. Add `id: "#{method}_label"` to `form.label` so the reference actually resolves to the label text. Only emit `aria-labelledby` when there *is* a visible label. 3. **`tabindex="0"` on every option.** Listbox options should use roving tabindex (only the selected option is in tab order; the rest are reachable via ArrowUp/Down). Set `tabindex="0"` on the selected option only; `"-1"` on the rest. The select controller's `select()` handler keeps the roving invariant on user interaction. 4. **No keyboard navigation between options.** Add ArrowDown/Up (cycle), Home (first), End (last). The existing Enter/Escape handlers stay. ArrowUp/Down inside the search input is left alone so the input's caret behavior isn't hijacked. 5. **Search input had no accessible name.** Add an explicit `aria-label` matching the placeholder copy so AT users hear "search" when focus enters the field. API unchanged. Builder-level routing fix in `StyledFormBuilder#select` (calling DS::Select for `f.select(...)` the same way `f.collection_select` already does) is intentionally out of scope — it's a separate translation pass for the choices format. Documented as a follow-up. * fix(review): bridge search input to visible options in DS::Select ArrowDown/Up from the search input now focus the first/last visible option, and keyboard navigation operates on visible options only. After typing a search query, the controller promotes the first visible option to tabindex="0" so Tab can land on it even when the previously tab-eligible option is filtered out. Addresses Codex review on PR #1848 (issue #1744). * fix(review): include trigger in DS::Select aria-labelledby Codex P2 follow-up on #1848: \`aria-labelledby=\"#{method}_label\"\` makes the trigger button's accessible name come solely from the external form label — that overrides the button's own text node (\`selected_item[:label]\` / placeholder). Screen readers therefore announce only "Currency" without ever hearing the selected "USD" unless the user opens the listbox. Give the trigger \`id=\"#{method}_trigger\"\` and reference both ids: \`aria-labelledby=\"#{method}_label #{method}_trigger\"\`. The accessible-name algorithm concatenates the two, so AT users now hear \"<Label> <selected value>\" while \`aria-expanded\` / \`aria-haspopup\` continue to convey the dropdown state. |
||
|
Guillem Arias Fauste
|
56ff8513cb |
fix(design-system): DS::Tabs a11y — WAI-ARIA tab pattern + keyboard nav (#1847)
* fix(design-system): DS::Tabs a11y — WAI-ARIA tab pattern + keyboard nav Closes #1745. DS::Tabs rendered as a bare `<nav>` + `<button>` list with no role wiring. AT users would hear "navigation, button, button, button" instead of the tab semantics. Keyboard users got no arrow-key nav between tabs. Five fixes: 1. **Role scaffolding.** `<nav>` → `role="tablist"`, `aria-orientation="horizontal"`. Each tab `<button>` → `role="tab"`, `aria-selected`, `aria-controls="panel-#{id}"`. Each panel `<div>` → `role="tabpanel"`, `id="panel-#{tab_id}"`, `aria-labelledby="#{tab_id}"`, `tabindex="0"` (so the panel itself is reachable via keyboard for in-panel content nav). 2. **Roving tabindex.** Active tab is `tabindex="0"`, inactive are `tabindex="-1"`. ArrowLeft/Right cycles focus across the tablist without leaving the widget; Tab jumps past the whole widget. Stimulus controller updates both `aria-selected` and `tabindex` on tab switch. 3. **Manual activation.** Per WAI-ARIA APG "Tabs with Manual Activation" — arrow keys MOVE focus, Enter/Space ACTIVATES the focused tab. Avoids accidental tab swaps when the user is just navigating. Important here because several tab contents trigger Turbo fetches (transactions index, account sidebar, budgets). 4. **Home/End shortcuts.** Home jumps focus to the first tab, End to the last. WAI-ARIA APG-standard. 5. **Raw palette → token.** Replace `bg-white theme-dark:bg-gray-700` on the active button with the existing `tab-item-active` utility (defined in `_generated.css` from `design/tokens/sure.tokens.json`). Single class, dual-mode. Also gate the transition behind `motion-safe:` so reduced-motion users get an instant snap. API unchanged — the slot signatures (`btns(id:, label:)`, `panels(tab_id:)`) take the same args. Caller-provided `id:` is still the public identifier; `panel-#{id}` is internal naming for the `aria-controls`/`aria-labelledby` pair. * fix(review): scope DS::Tabs DOM ids to component instance Per CodeRabbit review on #1847: raw `panel-#{tab_id}` and `id: tab_id` on buttons collide when multiple DS::Tabs widgets on the same page share generic tab ids (e.g., "all", "overview", "transactions"), breaking aria-controls / aria-labelledby associations. Scope ids via per-instance `dom_prefix` ("tabs-#{object_id}") and share the same prefix between DS::Tabs and DS::Tabs::Nav so button ids and panel labelledby/controls stay consistent. * fix(review): use <div> host for role=tablist in DS::Tabs::Nav Codex P2 follow-up on #1847: \`<nav>\` has a fixed landmark role per ARIA-in-HTML and may not be repurposed as a tablist. The current \`tag.nav class: ..., role: \"tablist\"\` produces invalid markup — some AT implementations ignore the role override, in which case the child \`role=\"tab\"\` buttons end up without a valid tablist parent and the keyboard / AT contract this PR is meant to add silently regresses. Swap the container for a neutral \`tag.div\`. Tab semantics (\`role\`, \`aria-orientation\`, keyboard nav, manual-activation pattern) are unchanged. |
||
|
Guillem Arias Fauste
|
7a0cafd6ba |
fix(design-system): DS::Dialog a11y — role, aria-modal, aria-labelledby, heading_level (#1846)
* fix(design-system): DS::Dialog a11y — role, aria-modal, aria-labelledby, heading_level Closes #1740. The savings-goals audit captured the dialog rendering without `role`, `aria-modal`, or `aria-labelledby` — AT users landing focus inside the dialog hear no title and no modal-mode hint. Affects every modal/drawer surface in the app (transfer matches, valuations, trades, imports, settings, etc. — 30+ views). Fixes: 1. `role="dialog"` + `aria-modal="true"` on the `<dialog>` element. Native `<dialog>` already maps to these implicitly in modern browsers, but Safari and pre-2024 mappings benefit from the explicit role. 2. `aria-labelledby` wired to a stable `dialog-title-<8-char hex>` id minted in initialize. The header slot's `<h*>` carries the matching id; AT now announces the title on focus-in. If the caller passes `custom_header: true` (no title), the `aria-labelledby` reference resolves to nothing and AT gracefully falls back to the first focusable. 3. New `heading_level:` kwarg (default `2`). Lets callers nest dialogs inside surfaces that already have an `<h2>` heading without breaking outline order. The existing `<h2>` baseline stays as the default. API is additive; existing 30+ DS::Dialog callsites work without modification. Out of scope (own issues): - Drawer modal-vs-non-modal split (`<dialog>` is currently always opened via `showModal()`). Browser behavior is correct for both variants today; non-modal drawer is a separate UX call. - Reduced-motion audit — no CSS transitions on `dialog` open/close. - Explicit focus-on-open (title vs first input) — browser-native `showModal()` already focuses the first focusable; caller can override with `autofocus`. Not changing the default here. - `en.common.close` missing translation — separate bug, filed. * fix(review): gate aria-labelledby + validate heading_level Only emit aria-labelledby when the header slot rendered an auto-title so the id reference never dangles (custom_header: true and body-only dialogs like the global confirm dialog no longer expose a broken label). Validate heading_level is an Integer 1..6 in the initializer to prevent invalid <h0>/<h7> markup. Update stale comment that referenced tag.public_send instead of content_tag. * fix(ds-dialog): always emit aria-labelledby (slot lambda is lazy) The previous fix gated `aria-labelledby` on `@has_auto_title`, set inside the `renders_one :header` slot lambda. ViewComponent v3 evaluates slot lambdas lazily at slot-render time (after the parent template's `tag.dialog` opening attributes are computed), so the flag was always `false` when the `aria-labelledby` attribute was read. Verified end-to-end via Playwright on `/design-system/preview/dialog/{modal,drawer}`: the rendered `<dialog>` is missing `aria-labelledby` even when `with_header(title: ...)` is set, despite the matching `<h2 id="dialog-title-...">` being present in the DOM. AT therefore announces "dialog" with no title — the exact regression the PR set out to fix on slot-driven callers (which is every dialog in the app). Always emitting `aria-labelledby="dialog-title-<hex>"` is safe per the WAI-ARIA spec: a dangling reference (e.g. `custom_header: true` or body-only dialogs) is silently ignored, and callers can override via `**opts` (last-wins). This matches the intent stated in the PR body of #1740. - Drop now-dead `@has_auto_title` ivar + `has_auto_title?` predicate. - Update template comment to explain the slot-lambda timing trap. |
||
|
Guillem Arias Fauste
|
e30ccd94af |
fix(design-system): DS::Tooltip a11y — focusable trigger, keyboard parity, Esc dismiss (#1845)
* fix(design-system): DS::Tooltip a11y — focusable trigger, keyboard parity, Esc dismiss Closes #1747. Five fixes on the tooltip primitive. 1. **Tooltip anchor not in a11y tree.** The trigger was a bare Lucide icon, which Lucide renders with `aria-hidden="true"`. The tooltip target had `role="tooltip"` but nothing referenced it, so AT users had no way to discover the description. Wrap the icon in a focusable `<button type="button">` with `aria-describedby="<tooltip-id>"` so the underlying icon stays `aria-hidden` and the button picks up the description binding. 2. **Stable per-instance id.** Each DS::Tooltip now mints a `tooltip-<8-char hex>` id wired between the trigger's `aria-describedby` and the tooltip's `id`. 3. **Keyboard parity.** Hover-only triggers locked keyboard-only users out. Add `focusin` / `focusout` listeners on the controller element so Tab onto the trigger reveals the tooltip, Tab away dismisses it. 4. **Esc-to-dismiss.** Matches the WAI-ARIA tooltip pattern. `Escape` while the tooltip is open closes it without removing focus from the trigger. 5. **Resize-safe width cap.** Replace the hard-coded `max-w-[200px]` with `max-w-[20rem]` so the tooltip scales with the user's root font-size setting (large-text accessibility pref). Slightly wider visual cap (320px @ default) but no longer clips on text-zoom. Plus: docstring note that tooltip content must be non-interactive (no buttons / links / form controls inside) — `aria-describedby` exposes content as a description, not as an interactive subtree. Callers needing actions should reach for a popover/menu primitive. API unchanged. Existing 30+ DS::Tooltip callsites work without modification — they all pass `text:`-only payloads, which still render correctly under the new markup. * fix(review): as: option + alpha focus-ring on DS::Tooltip Addresses two AI review findings on #1845: 1. **Button-inside-summary spec violation.** Wrapping the icon in `<button>` regressed keyboard/AT behavior at 13 callsites where DS::Tooltip lives inside a `<summary>` (8 provider items, lunchflow disclosure, activity_date, 4 simplefin badges). HTML's content model forbids interactive content inside `<summary>`; browsers and AT can drop focus or conflate activation with the disclosure toggle. Add `as:` parameter — default `:button` preserves the standalone a11y wrap; `:span` renders a non-focusable wrapper for summary-nested usage. `focusin` bubbles up to the controller from the ancestor `<summary>`, so keyboard tooltips still appear on tab. Migrate the 13 in-summary callsites to `as: :span`. 2. **Raw palette focus ring → alpha tokens.** Swap `outline-gray-900 theme-dark:focus-visible:outline-white` to the established focus-ring pattern `focus-visible:ring-2 focus-visible:ring-alpha-black-300 theme-dark:focus-visible:ring-alpha-white-300` — matches the DS::Toggle fix landed in #1843 review and provider_card / form-field tokens. * fix(review): bind tooltip focus on ancestor <summary> Codex P2 follow-up on #1845: \`as: :span\` renders a non-focusable trigger inside the disclosure \`<summary>\`. Keyboard users hit Tab and focus lands on the summary itself; \`focusin\` fires on the summary and bubbles UP — never down to a descendant span — so the existing listener on \`this.element\` never fires and the tooltip stays hidden for keyboard-only users on every in-summary row (provider _item partials, lunchflow disclosure, activity_date, simplefin badges). My earlier reply that the focusin "bubbles up to the Stimulus controller on the outer span" was wrong about the direction; \`focusin\` only bubbles upward. In \`addEventListeners\`, resolve \`this.element.closest("summary")\` and bind \`focusin\` / \`focusout\` / \`keydown\` on it too. Track the ancestor on the controller and undo the bindings in \`removeEventListeners\` so reconnect-on-Turbo cycles don't leak. Update the template comment to reflect the actual mechanism. * docs(ds-tooltip): correct as=:span comment to match controller mechanism --------- Signed-off-by: Juan José Mata <juanjo.mata@gmail.com> Co-authored-by: Juan José Mata <juanjo.mata@gmail.com> |
||
|
Guillem Arias Fauste
|
f2782901d3 |
fix(design-system): DS::Link a11y — distinguishable default, icon-only label, external-link hardening (#1844)
* fix(design-system): DS::Link a11y — distinguishable default, icon-only label, external-link hardening Closes #1739. DS::Link extends Buttonish, so the styled variants (`:primary`, `:secondary`, `:icon`, `:ghost`, etc.) inherit the Buttonish styling pipeline. The `default` variant is the bare inline link, which had multiple a11y gaps: 1. **WCAG 1.4.1 — color is not the only difference.** The default variant had `container_classes: ""`, so a link rendered as plain text-color text with no underline, no weight change, nothing. Color-only differentiation fails WCAG 1.4.1 for low-vision and colorblind users. Now: `text-link underline underline-offset-2 hover:no-underline` — underlined at rest, underline removed on hover for a polish hint, plus the `text-link` token (blue-600 light / blue-500 dark) for color. 2. **Focus ring.** `<a>` doesn't pick up the `button` focus rule from base.css (#1738). Add `focus-visible:outline-2 outline-offset-2 outline-gray-900 theme-dark:outline-white` directly on the default variant. The Buttonish-derived variants render as buttons visually but as `<a>` in markup — out of scope here; covered by their own callsites styling. 3. **Icon-only accessible name.** Mirror the DS::Button fix from #1738: derive a humanized `aria-label` from the icon key when the caller doesn't provide one, so AT users hear "More horizontal" instead of just the URL. 4. **External-link hardening.** `target="_blank"` without `rel="noopener"` exposes `window.opener` to the new tab (reverse-tabnabbing). Always set `noopener noreferrer` when the target is `_blank`. Authors can override by passing `rel:` explicitly. 5. **sr-only "(opens in new tab)" hint.** Append an `sr-only` span after the link text when `target="_blank"` so AT users hear the navigation behavior. Visual indication (e.g. an external-link icon) stays at the caller's discretion. Locale key: `ds.link.opens_in_new_tab` (en only — other locales in a separate translation pass per repo norm). API unchanged. No existing callsites use `target="_blank"` or icon-only links, so no migration needed. * fix(review): fold new-tab cue into icon-only aria-label When an icon-only DS::Link also targets `_blank`, the generated `aria-label` was overriding the descendant accessible name, masking the sr-only "(opens in new tab)" span. Include the cue directly in the generated label so AT users hear the warning. Also switch `capitalize` to `humanize` so multi-word icon keys like `external-link` read as "External link" rather than "External link" already worked but `humanize` is the more idiomatic Rails choice and keeps us aligned with the suggested patch. Flagged by Codex P2 + CodeRabbit on PR #1844. * fix(review): swap raw outline palette to alpha-ring tokens Codex P1 follow-up after the ready-for-review transition: the default \`DS::Link\` focus ring used raw \`outline-gray-900\` + \`theme-dark:focus-visible:outline-white\`, which violates the DS-hygiene rule that bans raw Tailwind palette utilities in component styling. Swap to the established alpha-ring pattern already used by DS::Toggle (#1843), DS::Tooltip (#1845), provider_card, and form-field — \`focus-visible:ring-2 focus-visible:ring-alpha-black-300\` + \`theme-dark:focus-visible:ring-alpha-white-300\`. Same visual contract (WCAG 1.4.11), theme tokens centralized. |
||
|
Guillem Arias Fauste
|
e07d641ead |
fix(design-system): DS::Button a11y audit — focus ring, touch target, type default, icon-only label (#1840)
* fix(design-system): DS::Button a11y audit Closes #1738. Four concrete fixes surfaced by the savings-goals audit + #1737 universal checklist: 1. Focus ring (WCAG 2.4.7). `base.css` had `focus-visible:outline-gray-900` which is **1.07:1** against the primary button's gray-900 background — invisible. Widen to `outline-2 outline-offset-2`, place outline outside the button via offset, and add a dark-mode `outline-white` so the ring is always visible against the page chrome regardless of the button surface. 2. Touch target (WCAG 2.5.5). Icon-only buttons at the default `:md` size were `w-9 h-9` = 36×36, below the 44×44 enhanced target. Bump `md.icon_container_classes` to `w-11 h-11` and `lg.icon_container_classes` to `w-12 h-12` to keep the size scale intact. `sm` stays at 32×32 (already passes WCAG 2.5.8 AA's 24×24 minimum; intentional compact-density variant). 3. Default button type. `content_tag(:button, ...)` inherits the HTML default `type="submit"`, so a DS::Button rendered inside a form steals Enter-key submission from the first text input (reproducible in the form stepper). Default to `type="button"` in the non-`href` branch; existing form submitters pass `type: "submit"` explicitly and continue to work. The `button_to` (href) branch keeps the submit default because button_to wraps its own form. 4. Icon-only accessible name. Icon-only buttons render no text node, so AT users hear "button" with no name. Derive a humanized aria-label from the icon key (e.g. `icon: "more-horizontal"` → `aria-label="More horizontal"`); explicit `aria: { label: }` on the caller still wins. Soft fallback — callers should still pass meaningful labels for richer copy. Plus: replace the stale `fg-white` icon class on the destructive variant with `text-inverse` (the `fg-*` namespace was deprecated in #1626 so `fg-white` resolved to nothing; the icon was using its helper-default color rather than the white the design intended). Out of scope: - Menu avatar trigger (custom 36×36 button bypassing DS::Button) — belongs to #1743 DS::Menu audit. - DS::FilledIcon `lg` size container (decorative, not interactive) — belongs to #1742. * fix(design-system): force type=submit on StyledFormBuilder#submit The DS::Button default-type-button change in the previous commit broke every `form.submit "Log in"` callsite because `StyledFormBuilder#submit` (app/helpers/styled_form_builder.rb) renders a DS::Button under the hood with no explicit `type:`. After the default flip, those submit buttons rendered as `type="button"`, so submitting forms (login, password reset, every form using `form.submit`) silently no-ops. CI surfaced this via ~30 system tests failing in the `sign_in` helper, which couldn't get past the login page. Pin `type: "submit"` on the DS::Button rendered by `StyledFormBuilder#submit`. The 22 view-level `f.submit` / `render DS::Button.new(type: :submit, ...)` callers already pass type explicitly and are unaffected. * fix(review): href-branch type-button bug + focus-ring tokens + profile Save submit CodeRabbit P1+P2 review on #1840: 1. button.rb: `merged_opts.delete(:href)` always returned nil because Buttonish#initialize strips :href from opts into @href, so the `if href.blank?` guard was ALWAYS true. Every DS::Button rendered via button_to (the href branch) got `type="button"` on the inner button, breaking submission of those button_to-generated forms (e.g. imports/_ready.html.erb publish button, imports/_failure.html.erb try-again button). Drop the local `href = merged_opts.delete(:href)` so the guard now reads the @href reader, leaving the href branch's HTML default intact. 2. settings/profiles/show.html.erb: the Save button is rendered with `render DS::Button.new(...)` inside `styled_form_with` (not via form.submit), so the StyledFormBuilder#submit type-pin from |
||
|
Guillem Arias Fauste
|
34d6f4d8d6 |
fix(design-system): DS::Disclosure focus ring + motion-safe chevron (#1841)
Closes #1741. Two small a11y polishes on the native `<details>` / `<summary>` primitive: - Add a token-backed focus-visible ring on `<summary>`. Previously inherited only the browser default outline, which was thin and inconsistent across engines. Match the new pattern from #1738: `outline-2 outline-offset-2 outline-gray-900` plus `theme-dark:outline-white` so the ring lands on the page chrome outside the disclosure regardless of mode. (WCAG 2.4.7.) - Gate the chevron rotation behind `motion-safe:transition-transform` + `motion-safe:duration-150`. The chevron now slides between closed/open states for users who haven't opted out of motion, and snap-rotates instantly under `prefers-reduced-motion: reduce`. (WCAG 2.3.3, AAA.) While here: drop the no-op `group-open:transform` class. Tailwind v4 applies `rotate-90` / `rotate-180` directly without needing the explicit `transform` utility — it was a v3 holdover. |
||
|
Guillem Arias Fauste
|
51b0336262 |
fix(design-system): DS::FilledIcon decorative-vs-meaningful API (#1842)
* fix(design-system): DS::FilledIcon decorative-vs-meaningful API Closes #1742. `DS::FilledIcon` is mostly used as a decorative visual indicator next to a textual label (transaction merchant avatar, recurring-transaction icon, payment-method tile, etc.). The wrapper was rendering without any aria scaffolding, so screen readers had to traverse the inner `<svg>` or single-letter `<span>` with no context. Two new kwargs: - `description:` (nil) — when set, the wrapper emits `role="img" aria-label="<description>"`. Use this when the surrounding DOM does not carry the label (e.g. icon-only badges in a grid). - `aria_hidden:` (auto) — defaults to `true` when `description:` is blank (= decorative), `false` when description is present. Pass explicitly to override for the rare case where you want the visual exposed but the name already lives in adjacent text. API stays backwards-compatible: existing 33 callsites get `aria-hidden="true"` by default, which is correct — the visible text next to the icon already carries the name. While here: doc the `:text` variant gotcha — only `text.first` is rendered, so AT users hearing "A" can't infer "Apple". Callers should pass the full `description:` when relying on this variant. Out of scope (filed elsewhere if needed): - Touch-target audit (decorative wrapper, WCAG 2.5.5 doesn't apply). - `hex_color:` palette soft-validation (would require a token-name registry; deferred until #1736 / #1653 land). - `color-mix(in oklab, ...)` browser-support note for the transparent variant — tier-2 concern. * fix(review): gate role/aria-label when hidden, normalize blank description CodeRabbit feedback on #1842: - Avoid emitting role="img" and aria-label alongside aria-hidden="true" (dead markup; AT ignores semantics on hidden subtrees). - Normalize blank description strings to nil via .presence so the default aria_hidden fallback treats "" the same as nil. * fix(review): use description.presence so aria-label drops blank strings Codex follow-up review 4319747515 caught that the prior fix still emitted `aria-label=""` when description was a blank string. `.presence` returns nil for blank — Rails `tag.div` drops the attribute entirely when the value is nil. |
||
|
Guillem Arias Fauste
|
e56ad3de42 |
fix(design-system): DS::Toggle focus ring, role=switch, and semantic tokens (#1843)
* fix(design-system): DS::Toggle a11y + token swaps Closes #1746. Four fixes on the toggle primitive (visual switch backed by a sr-only checkbox). 1. **Focus ring (WCAG 2.4.7)** — the `<input>` is `sr-only`, so the browser-default focus ring lands on an invisible 0px element. The label (the track) had no focus styling, meaning the component had **no visible focus indicator at all**. Add `peer-focus-visible:ring-2 ring-offset-2 ring-gray-900` with `theme-dark:peer-focus-visible:ring-white` so the ring appears on the visible track when the underlying checkbox receives keyboard focus. 2. **Role semantics** — visual is a switch, but the element was announced as "checkbox, checked" because the native input is a checkbox. Add `role="switch"` so AT users hear "switch, on" / "switch, off". `aria-checked` is inherited from the checkbox's checked state, no manual wiring needed. 3. **Token swaps** — replace raw palette references with semantic tokens: - Track `bg-gray-100 theme-dark:bg-gray-700` → `bg-surface-inset` - Checked `peer-checked:bg-green-600` → `peer-checked:bg-success` Picks up the contrast bump from #1735 automatically. 4. **Motion safety (WCAG 2.3.3)** — gate the bg color + thumb-translate transitions behind `motion-safe:`. Reduced-motion users see an instant state snap; everyone else gets the existing 300ms ease. API unchanged. Existing 8 callsites (settings/preferences, settings/appearances, account_sharings, budgets/edit, recurring_transactions, styled_form_builder bridge) work without changes. * fix(review): use alpha tokens for Toggle focus ring Swap raw palette (ring-gray-900 / theme-dark:ring-white) on the DS::Toggle focus ring to ring-alpha-black-300 / ring-alpha-white-300 to match the focus-ring token pattern already used by form-field, provider_card, and shared/_badge. Closes AI review feedback on #1843. |
||
|
Guillem Arias Fauste
|
1ddd8bd040 |
feat(i18n): complete Catalan translations + extract residual hardcoded strings (#1836)
* feat(i18n): complete Catalan translations + extract residual hardcoded strings
CA coverage
- All view/model/breadcrumb/doorkeeper/mailer locale files for ca: 0 missing
keys (was ~3,400). Translations follow informal "tu" register, sentence case,
domain glossary (Compte/Saldo/Transacció/Posició/Operació/Pressupost/...).
- Catalan pluralization test: ca uses one/other; mirrors
test/lib/polish_pluralization_test.rb.
- 8 LanguageTool-flagged grammar fixes applied (Connexió òrfena, Secret de
l'API, comma-pero, apostrophe elisions, etc).
Hardcoded string extraction (also fixes EN parity)
- UI::Account::Chart#title + chart.html.erb view tabs -> UI.account.chart.*
- UI::Account::BalanceReconciliation labels + tooltips ->
UI.account.balance_reconciliation.{labels,tooltips}.*
- transactions/_transfer_match.html.erb (Auto-matched, A/M, Confirm/Reject
match, Payment/Transfer is confirmed) -> transactions.transfer_match.*
- AccountOrder labels (Name/Balance asc/desc) -> account_order.* keys with
fallback to existing hardcoded labels.
- Depository::SUBTYPES surface in account list -> depositories.subtypes.*.*
- User role badge -> users.roles.* (admin / member / super_admin).
- 110+ country names -> countries.* (config/locales/countries.ca.yml).
Breadcrumb locale fix
- Breadcrumbable was a before_action that ran before Localize's around_action
switched I18n.locale, so default crumbs rendered in EN even when locale=ca.
- Convert to helper_method that defers translation to render-time (when
I18n.locale is already correct). Add all missing breadcrumb keys to ca + en.
- Layouts switched from @breadcrumbs to breadcrumbs helper.
Locale-aware helpers / formatters
- ApplicationHelper#localized_ordinal: ordinalize that respects ca
(1r/2n/3r/4t/Nè). Wired into preferences month_start_day select.
- Family#moniker_label / moniker_label_plural: translate the default "Family"/
"Group" monikers via shared.family_moniker.* with fallback to the family's
custom override.
- Budget#name: use I18n.l for month_year/short/long instead of strftime("%B %Y")
so the budget header date follows the active locale.
Tooling
- script/lt_check_ca.rb: batched LanguageTool checker (premium endpoint when
LT_USERNAME/LT_API_KEY are set, free fallback otherwise), picky mode,
motherTongue=en for false-friend detection.
- lib/tasks/i18n_screenshot.rake: dev-only rake to set user.locale=ca and
role=super_admin on the demo user so the i18n surfaces can be walked.
Out of scope (pre-existing, not introduced here)
- Native browser file input "Choose Files / No file chosen" (browser locale).
- D3.js client-side chart x-axis dates (JS-side Intl.DateTimeFormat needed).
- Sankey/donut labels = seed category names (data, not i18n).
- 2 rails-i18n datetime/errors interpolation warnings inherited from
config/locales/defaults/ca.yml.
* fix(i18n): apply idiomatic Catalan review (3-agent + native review)
Three parallel review agents flagged 203 findings (31 high / 73 medium / 99 low)
across all 111 ca.yml files. This commit applies the high-severity bugs plus a
curated subset of medium-impact fixes.
Grammar / agreement
- provider_sync_summary.health.stale_pending: `(exclòs)` -> `(exclosa/excloses)`
to agree with feminine `transacció(s)`.
- accounts.confirm_unlink.warning_no_sync: added reflexive `es` -
`el compte ja no es sincronitzarà`.
- sophtron_setup_required.heading: `no configurats` -> `sense configurar`
(avoids broken agreement across "ID" masc. + "clau" fem.).
- admin.sso_providers.form.errors_title: split into one/other pluralization
keys (en + ca); singular `ha impedit` was wrong for count > 1.
Brand consistency
- IndexaCapital -> Indexa Capital (37 occurrences across one file).
- Lunchflow -> Lunch Flow in two remaining places.
Anglicisms / domain mistranslations
- kraken_items setup_accounts.instructions: `ompliments d'operacions`
(lit. dental/food fillings) -> `execucions d'operacions`.
- settings kraken_panel.read_only_title: `Sincronització d'intercanvi`
(swap/trade) -> `Sincronització només de lectura amb l'exchange`.
- transactions convert_to_trade.security_custom + security_not_listed_hint:
`cotització` (price quote) -> `ticker` (the EN field IS a ticker symbol).
- loans.form.rate_type: `Tipus d'interès` collided with sibling
interest_rate -> `Modalitat del tipus`.
- brex_items.provider_panel.sandbox_note_html: `L'staging` (broken
contraction) -> `el staging`.
Idiom traps
- coinbase/binance/kraken wait_for_sync: `acabi de sincronitzar` is
ambiguous in CA (`acabar de + inf` reads as "has just done X") ->
`acabi la sincronització`.
- chats.ai_greeting.there: `a tothom` -> `''` (the EN fallback "Hey there"
is singular; literal CA `tothom` is plural and wrong for 1:1 chat).
- transactions.split_parent_row.split_label: `Divideix` (imperative) is
wrong as a status badge -> `Divisió` (noun).
- transactions.keep_both (2 occurrences): infinitive `mantenir ambdues` ->
imperative `mantén-les totes dues` to match the sibling Yes/No buttons.
- rules.clear_ai_cache: `Reinicia` (restart) -> `Buida` (empty/clear),
which matches the success notice (`s'està netejant`).
Moniker gender breakage (cross-file)
%{moniker} is interpolated downcased from family.moniker_label and may
resolve to feminine `família`/`llar` or masculine `grup`. Strings that
hard-code a gendered article ('al teu %{moniker}', 'aquesta %{moniker}',
'aquest/a %{moniker}') broke on at least one branch. Restructured the
affected sentences to drop the gendered determiner:
- account_sharings.show.no_members
- merchants.family_empty / family_title / provider_empty
- registrations.new.join_family_title
- settings.preferences.show.currencies_subtitle / sharing_subtitle
- simplefin_items.select_existing_account.no_accounts_found
- invitations.new.subtitle
- invitation_mailer.invite_email.subject (mailers/) + body (views/)
- snaptrade_items.providers.snaptrade.free_tier_warning
Terminology consistency
- models/account_statement/ca.yml attributes aligned with view-side
forms: `Saldo d'obertura`/`Saldo de tancament` ->
`Saldo inicial`/`Saldo final`; `Suggeriment de...` -> `Pista de...`.
- account_statements.coverage.status.not_expected:
`No s'esperava` -> `No previst` (status label, not past action).
- account_statements.index.empty_unmatched: aligned with the section's
own label `Safata sense aparellar`.
- imports.create.document_provider_not_configured + document_upload_failed:
`arxiu vectorial` -> `magatzem vectorial` (correct TermCat term).
- coinstats_items blockchain gender: `els blockchains` / `un blockchain` ->
`les blockchains` / `una blockchain` (feminine per TermCat).
- accounts.account.remove_default: `Treu el predeterminat` ->
`Treu com a predeterminat` (pairs with sibling `Estableix com a
predeterminat`).
- accounts.tax_treatments.tax_deferred: `Diferit fiscalment` (lit. calque)
-> `Tributació diferida` (standard CA tax-accounting term).
- settings.payments.show.currently_on_plan: `Actualment al` ->
`Actualment al pla:` (was a fragment).
Out of scope (review flagged, not applied here)
- LOW-severity stylistic preferences (Veure vs Mostra, etc).
- `models/category/ca.yml` default category names — seeded at family
creation, not via I18n at runtime, so changes wouldn't affect existing
families.
- `models/period/ca.yml` short labels mixing EN (MTD/YTD) and CA (STD/MA)
— needs a one-convention decision separately.
* fix(i18n,ca): drop gendered article in period_activity + tighten cash-flow terms
- pages.dashboard.investment_summary.period_activity: 'Activitat del
%{period}' contracted 'del' = 'de el' (masc.sg.). %{period} resolves
to mixed forms ('Setmana en curs' fem, 'Últims 30 dies' pl., 'Any en
curs' apostrophe), so hard-coded 'del' was wrong on most labels.
Replaced with 'Activitat — %{period}' (em-dash) to skip the
contraction entirely.
- pages.dashboard.outflows_donut.title / total_outflows: switched from
bare 'Sortides' / 'Total de sortides' to 'Sortides de caixa' /
'Total de sortides de caixa' to match TermCat's precise term
('sortida de caixa' = cash outflow).
* fix(i18n,ca): rephrase transfer source/destination amount labels
'Import d'origen' / 'Import de destinació' were literal calques of
'Source amount' / 'Destination amount'. In a multi-currency transfer
form (sender/receiver in different currencies) the natural CA pair is
'Import enviat' / 'Import rebut'.
* fix(i18n,ca): 'Dades en brut' -> 'Dades sense processar'
The literal calque of 'Raw data' read as too technical for personal-
finance UI. 'Dades sense processar' is the more natural Catalan
equivalent for raw/unprocessed data files.
* fix(i18n): localize Import col_sep label + separator options
The CSV upload form rendered 'Col sep' (the auto-humanized attribute
name) plus hardcoded English 'Comma (,)' / 'Semicolon (;)' options
from Import::SEPARATORS.
- activerecord.attributes.import.col_sep added (en + ca: 'Column
separator' / 'Separador de columnes').
- Import.separator_options class method returns translated tuples;
view switched from Import::SEPARATORS to Import.separator_options.
- activerecord.attributes.import.col_seps.{comma,semicolon} added so
the option labels follow the active locale.
* fix(i18n,ca): drop moniker apposition in sharing/currencies section titles
- sharing_title 'Compartició de %{moniker}' rendered as 'Compartició
de Família' (a noun-noun apposition that's odd in CA) -> 'Compartició
de comptes'.
- sharing_subtitle replaced '%{moniker}' with 'entre els membres' so
the sentence reads naturally and doesn't depend on moniker gender.
- currencies_title 'Divises de %{moniker}' had the same apposition
-> 'Divises'. Subtitle no longer references moniker either.
* fix(i18n,ca): keep 'Self Hosting' untranslated
Reverted 'Autoallotjament' / 'autoallotjada' / 'autoallotjats' usages
to the original English 'Self Hosting' (sidebar label, breadcrumbs,
hostings page title, chat assistant settings hint, redis configuration
subheading, LLM usages cost-estimates description).
The brand-style term reads more naturally in EN for technical users
configuring their own deployment.
* fix(i18n,ca): lowercase 'self hosting' (sentence case in labels)
* fix(i18n): extract budget_categories stepper + allocation_progress strings
Hardcoded English strings on the budget category editor:
- 'Setup' / 'Categories' stepper labels in budgets/_budget_nav.html.erb
- 'X% set' / '> 100% set' / 'left to allocate' / 'Budget exceeded by ...'
in budget_categories/_allocation_progress.erb
- '/m avg' caption + 'Shared' placeholder + 'Leave empty to share
parent's budget' tooltip in budget_categories/_budget_category_form
and _uncategorized_budget_category_form
Extracted to:
- budgets.budget_nav.{setup,categories}
- budget_categories.allocation_progress.{percent_set,over_set,left_to_allocate,budget_exceeded_html}
- budget_categories.budget_category_form.{monthly_average,shared_placeholder,shared_title}
CA translations added; EN keys mirror the prior literals.
* chore(i18n): drop translation tooling from PR
These were dev-only helpers used during the Catalan translation pass:
- script/lt_check_ca.rb: LanguageTool API checker (premium/free
endpoint, picky mode, batching). Useful for ongoing locale QA but
shouldn't ship in this feature PR.
- lib/tasks/i18n_screenshot.rake: rake task that flips user.locale and
role on the demo user for walking the i18n surfaces locally.
Both stay available locally; pulled out of the PR scope.
* fix(i18n): apply PR review feedback (CodeRabbit + Codex)
- balance_reconciliation crypto_items: use :end_balance_crypto tooltip
(was :end_balance_investment). Added new UI.account.balance_reconciliation.tooltips.end_balance_crypto key in en + ca.
- doorkeeper.ca.yml confidentiality.no: was YAML boolean false, now string 'No'.
- views/categories: 'Poor contrast, choose darker color or' continued with hardcoded 'auto-adjust.' button text; extracted to categories.form.auto_adjust key (en + ca).
- imports.create.document_upload_failed: 'a l'magatzem' was broken
contraction -> 'al magatzem'.
- invitation_mailer body + mailer subject: 'unir-se' -> 'unir-te' (was
3rd person, should be 2nd to match the rest of the copy).
- 7 strings across mercury_items / sophtron_items / simplefin_items /
lunchflow_items / brex_items / indexa_capital_items / other_assets:
'se sincronitzaran' -> 'es sincronitzaran', 'se segueixen' ->
'es segueixen' (correct reflexive pronoun before consonants).
- settings.providers.status: key was 'false' (YAML-coerced), now 'off'
to match settings/en.yml status.off used in view lookups.
- sophtron_items.sophtron_setup_required.message: stripped trailing
blank line from the quoted scalar.
- settings/profiles/show.html.erb: switched 'family_moniker ==
"Group"' branch checks to 'Current.family&.moniker == "Group"'.
After Family#moniker_label started returning translated values,
callers using the display label for branching would render the
household copy for group families in ca. Compare the stored sentinel
instead.
- Did not apply CodeRabbit's webauthn 'eliminada' -> 'desada' suggestion:
the key is wired to the destroy action (verified at
settings/webauthn_credentials_controller.rb:55), so 'eliminada' is
correct.
|
||
|
Guillem Arias
|
91b9d368e4 |
fix(goals): card hover uses bg-container-hover (gray-50) instead of shadow lift
Mirror the affordance used in the accounts/select_provider screen and the bank-sync flows: a near-imperceptible gray-50 fill swap rather than a shadow. Lighter than the previous shadow lift, doesn't introduce elevation noise inside the grid, and the ring track (gray-200) + status pill outline still keep enough separation against the gray-50 hover bg that we don't reintroduce the original contrast issue. |
||
|
Guillem Arias
|
78f97320de |
feat(goals): footer 'N pending' on cards + drop warning tone from top callout
- Pending pledges surface in the card footer as '· N pending' tacked on after the existing footer line (text-subdued). Quiet, semantic, doesn't compete with the status pill or the avatar. - The top-of-page 'You have pending pledges' callout was using the amber DS::Alert warning variant. Pending isn't a warning — it's a passive 'we're waiting on a sync' state. Switch to the info variant so the visual weight matches the meaning. |
||
|
Guillem Arias
|
66680877f4 |
fix(goals): swap pending-pledge avatar dot for inline clock glyph
The amber DS::Pill dot on the avatar collided visually with the amber 'Behind' status pill on the same card — two amber signals in the same eye-line. Move the indicator to a text-subdued clock icon between the goal name and the status pill: quieter, semantically clearer (clock = pending sync / time-bound), no tone collision with the status palette. Same accessibility hook (aria-label + title). |
||
|
Guillem Arias
|
25eb18d9af |
feat(goals): pending-pledge dot on card avatar
Goals with open + unexpired pledges now carry a small amber DS::Pill dot at the top-right of the avatar on the index card. Same primitive + position pattern as the beta gate dot on the sidebar nav, so the 'small marker' affordance reads consistently across the app. Pledges are preloaded via the existing .includes(:open_pledges, ...) on the index query, so the indicator is free at request time. |
||
|
Guillem Arias
|
82e3ba8ef7 |
fix(goals): keep archived cards out of the filter loop entirely
The earlier 'filter archived too' attempts kept toggling the archived section based on chip state, which produced more confusion than value (filter shows partial counts, archived hides on some chips, etc.). Step back: archived stays in its own collapsed-by-default section, always visible, never reacts to the chip / search filter. Render the cards with filterable: false so they don't add a filter target in the first place — no JS handling needed, and the active grid + chips behave exactly like they did before this whole thread. |
||
|
Guillem Arias
|
dcb6f391e5 |
fix(goals): drop hover bg on card, use subtle shadow lift instead
The card was the only place in Sure setting hover:bg-surface-hover on a bg-container card; every other static card (settings, recurring transactions, ai_prompts, etc.) stays still. The hover bg (gray-100) landed almost exactly on top of the ring track (gray-200) and washed out the pill fill, fighting the very signals the card was trying to show. Swap to hover:shadow-sm — the lift matches the transaction-tabs precedent already in Sure, the bg stays white, and ring track + status pill keep their contrast. |
||
|
Guillem Arias
|
f0c9490c09 |
fix(goals): goal status pill uses DS::Pill outline (consolidate + survive hover bg)
The status pill on the goal card used a 10%-alpha fill (bg-warning/10, bg-green-500/10). On the card's hover state (bg-surface-hover) the fill blended into the new background and the pill lost its tint outline. Extend DS::Pill with a green tone and an optional icon: param (renders a Lucide icon in place of the dot) so the same primitive can carry both the beta marker and the goal status badges. Map Goals::StatusPillComponent to DS::Pill outline style — transparent fill + colored border + colored text + glyph — which is immune to any change in the surrounding card bg. One badge primitive, light-mode contrast already fixed (the color-mix 30% darkening on text), and the card hover state no longer washes out the status. |
||
|
Guillem Arias
|
fbcd13c44d |
fix(a11y): focus trap + returnFocus on DS::Dialog
Native <dialog>.showModal() moves focus inside the dialog on open but doesn't trap Tab / Shift+Tab, and focus restoration on close is inconsistent across engines. Add three things to the dialog controller: - Capture document.activeElement before showModal() so the trigger is recoverable when the dialog closes (ESC, backdrop click, explicit close button, programmatic close all route through the native close event). - Wrap Tab inside the dialog so a keyboard user can't tab out into the scrim-covered page behind. - Restore focus to the captured trigger on the close event. If the trigger has been detached (Turbo morphed it out), skip silently rather than throw. Verified manually: opening the new-goal modal moves focus to the name input; ESC restores focus to the "New goal" link; Tab wraps from the last focusable back to the first. |
||
|
Guillem Arias
|
79c81377ac |
i18n + a11y(goals): extract picker strings + drop redundant status-pill aria-label
- Color picker had four hardcoded English strings ("Color", "Icon",
"Poor contrast, choose darker color or", "auto-adjust."). Move them
under `goals.color_picker.*` and call them through `t()`. CLAUDE.md
requires every user-facing string go through i18n.
- Status pill duplicated its visible label in `aria-label`, which makes
screen readers ignore the visible text. Drop the override so the
visible label is the accessible name.
|
||
|
Guillem Arias
|
f7adcac2eb |
fix(DS::Pill): readable contrast in light mode + drop pill from Goal detail
- Bind CSS `color-scheme` to Sure's `data-theme` attribute so the pill's `light-dark()` resolves to the side that matches the active theme. In the dark theme it was previously falling back to the light branch. - Darken light-mode pill text 30% with black on top of the 700 stop so the 10–11px uppercase label reads against the violet-50 background. - Drop the Beta pill from the Goal detail page header. A single goal is not the feature; the pill belongs on the feature index, not on each record. |
||
|
Guillem Arias
|
ac23521c0a | Merge remote-tracking branch 'origin/main' into feat/goals-v2-architecture | ||
|
Guillem Arias Fauste
|
5249842c76 |
feat: beta features toggle + Beta pill primitive (#1829)
* feat: beta features toggle + Beta pill primitive Adds the infrastructure for self-service beta opt-in. No call sites yet: this PR is meant to land first so feature PRs (Goals, etc.) can ship behind the gate incrementally. User opts in via a single toggle at the bottom of Settings → Preferences. The flag persists in the existing `users.preferences` JSONB column under `beta_features_enabled` — same shape as `dashboard_two_column` and `show_split_grouped`, so no migration is needed. Controllers gate a beta feature by adding `before_action :require_beta_features!` from the new `BetaGateable` concern (included in ApplicationController). Views use the `beta_features_enabled?` helper to hide / show nav items, banners, etc. Logged-out callers always return false. Ships `DS::BetaPill`, a small inline marker for tagging features as Beta / Canary in nav, headers, and lists. Five tones (violet by default, indigo, fuchsia, amber, gray) map to existing Sure color tokens — no raw hex. Three styles (soft / filled / outline) and two sizes (sm / md) cover the surfaces in the design handoff. The `dot_only:` mode renders just the colored dot for use on a collapsed sidebar. * review: rename to DS::Pill, fix CR/Codex nits, add tests CodeRabbit + Codex review feedback: - Rename DS::BetaPill → DS::Pill. The component was already generic in shape (tones, styles, sizes); the name was misleading scope. "Beta" becomes the default label (still i18n-driven). Goals' StatusPill can later refactor onto this primitive without a third pill. - Localize the default pill label via i18n (`ds.pill.default_label`) instead of hard-coding English. - Add role="img" to the dot-only span so the aria-label is consistently exposed to assistive tech. - Wrap the Preferences toggle row in <label for="…"> so the title and description become an honest click target for the toggle (matches the cursor-pointer affordance). - Drop arbitrary Tailwind values (py-[3px], gap-[5px], tracking-[…]) in favor of scale tokens. text-[10/11px] stays because the pill is intentionally sub-12px (Sure's smallest scale token is text-xs / 12px) to read as a marker, not a label. - Add User#beta_features_enabled? predicate tests covering default-off, explicit-true, and non-boolean truthy values. Won't fix: - Palette refs (`--color-violet-*` etc.). Sure has no semantic Beta/ Canary tokens; introducing them in this PR would be a design-system change beyond the scope. The component centralizes palette use in one `palette` method, matching the existing pattern in Goals::StatusPillComponent. * review: consistent title fallback in full-pill branch * docs: how to gate a feature behind the beta toggle * docs: unwrap doc lines to match existing style * chore(preview): run Cloudflare PR previews on basic instances (#1831) * fix(preview): use Rails health endpoint for container ping (#1823) * fix(preview): use Rails health endpoint for container ping * fix(preview): point container ping to localhost/up --------- Co-authored-by: Sure Admin (bot) <sure-admin@splashblot.com> |
||
|
Guillem Arias
|
a4927a3fb8 | Merge remote-tracking branch 'origin/feat/goals-v2-architecture' into feat/goals-v2-architecture | ||
|
Guillem Arias
|
2872f3798e |
Merge remote-tracking branch 'origin/main' into feat/goals-v2-architecture
# Conflicts: # app/views/categories/_form.html.erb |
||
|
Brendon Scheiber
|
0c126b1674 |
feat(i18n): extract hardcoded English strings to locale files (#1806)
* Extract hardcoded strings to i18n
Replace numerous hardcoded English strings with I18n lookups (t / I18n.t) across controllers, views, helpers, and components, and convert model validation error messages to symbol keys. Added multiple locale files under config/locales for models and views. This centralizes user-facing notices/alerts, UI text, import/validation messages, and prepares the app for localization and easier translation maintenance.
* Update en.yml
* Update preview-cleanup.yml
* Revert "Update preview-cleanup.yml"
This reverts commit
|
||
|
Guillem Arias
|
33189c2673 |
ux(goals): polish detail page + unbreak render
- Fix render-blocker: Money#symbol doesn't exist (use #currency.symbol). - Sanitize projection_summary so the _html locale renders <strong> markup instead of escaping it. - Switch donut + card ring track to --budget-unused-fill; --budget-unallocated-fill resolves to the same gray as bg-surface in light mode so the unfilled arc was invisible on the detail page. - Mobile detail: drop avatar, right-align action buttons, stack projection header (subtitle + legend) so the subtitle reads on one line; bump legend gap on mobile. - Nowrap the projected reach-date so e.g. "Jul 2026" stays together. |
||
|
Guillem Arias
|
9f29185160 |
fix(goals): address AI review on PR #1798 (CodeRabbit + Codex)
Correctness: - GoalPledge#matches? rejects outflows on transfer pledges so a +$200 purchase no longer satisfies a $200 deposit pledge after .abs - GoalsController#sync_linked_accounts! saves through the goal so currency/depository/family validations actually run on update - AlreadyClaimedError replaces empty RecordInvalid in resolve_with! and reconciler rescues the dedicated class - SweepExpiredGoalPledgesJob wraps each expire! in a per-record rescue - Assistant::Function::CreateGoal disambiguates duplicate account names and returns an absolute URL via mailer host config - Family#savings_inflow_velocity defensively scopes from the family's accounts (was Account.joins(:goal_accounts).where(goal_id: ...)) - GoalPledgesController#set_goal preloads linked_accounts + providers to drop the N+1 on any_connected_account? - Stepper subtitle update walks to the enclosing dialog before querySelector so two stepper instances don't fight over one header - categories/_form.html.erb data-action targets color-icon-picker, not the non-existent "category" controller UX / visual: - Projection chart drops preserveAspectRatio="none" and pins endDate at today for past-due goals so the today marker stays in-domain - _color_picker / categories form swap non-standard border-1 for border - Goals index search input uses ring-alpha-black-100 (was raw gray-500) Refactors: - Goal#header_summary extracts the multi-line ERB header block - Goal#catch_up_delta_money sums open_pledges in SQL - Goal#projection_summary uses I18n.l for the on-track month label - Account#default_pledge_kind moves the manual/transfer decision out of GoalPledgesController - GoalPledge::Reconciler iterates ordered (created_at, id) so first-claim wins is deterministic under non-sequential PKs - Goals::FundingAccountsBreakdownComponent + Goals::AccountStackComponent use clamp(0..) instead of Float::INFINITY / [x, 0].max - Goals::StatusPillComponent#label provides a titleize fallback - Goal projection chart skips the redundant initial _draw and reuses the snapped point in the past branch (no double-bisect) - Goal pledge preview drops maximumFractionDigits: 0 so USD/EUR show cents while JPY/KRW stay whole-unit - Demo generator captures the Wedding fund goal in the seed loop instead of looking it up by hardcoded name Tests: - GoalPledgeTest: outflow rejection - GoalsControllerTest: cross-currency attachment rejected on update - SweepExpiredGoalPledgesJobTest: cancelled coverage + per-record rescue - GoalTest: pledge_action_label_key flips to manual_save without an unconditional guard |
||
|
Guillem Arias
|
f182da79c8 |
fix(goals): unified per-goal account color map + smaller pen toggle
User flagged two regressions: account colors didn't match between the
goal preview-card avatar stack on the index and the funding-widget
rows on the show page, and the color-picker pen toggle on the new-goal
modal still felt too big.
Color matching:
- `AccountStackComponent` (index card) used
`Goals::AvatarComponent.color_for(account.name)` — MD5-of-name into
the 10-color palette.
- `FundingAccountsBreakdownComponent` (show page) recently switched to
`color_for(account.id.to_s)` — MD5-of-id.
- Same account, two surfaces, two different palette picks. Plus
either hashing scheme can collide within a multi-account goal
(palette has 10 colors).
Move ownership to the Goal model: `Goal#account_color_map` returns
`{ account_id => palette_hex }` for the goal's linked accounts. Sort
by `id` for a stable order across reloads, then assign
`palette[i % palette.size]`. Stable + collision-free up to 10
accounts in a single goal (a realistic upper bound — most goals
link 1-3).
Both consumers now read off the same source:
- `AccountStackComponent.new(accounts:, color_map:)` accepts a hash
and falls back to the name-hash if no map provided (kept for
callers that don't have a goal in scope yet).
- `FundingAccountsBreakdownComponent#color_for` reads
`goal.account_color_map[account.id]`.
- Goal card on index passes `goal.account_color_map` to the stack.
Pen toggle:
The new-goal color-picker pen sat in a `w-5 h-5` circle with a
`border` ring + `text-secondary` icon. The border + secondary text
weight kept it loud against the avatar even at 20px. Drop the
border, drop the size another step (`w-4 h-4`), recolor the icon
`text-subdued` + `hover:text-secondary` so the affordance recedes
when not interacted with. Position shifts from `-bottom-1 -right-1`
(8px overhang) to `-bottom-0.5 -right-0.5` (2px overhang) since the
smaller circle doesn't need the larger float. Icon swaps "pen" for
"pencil" (the more conventional edit indicator across Sure).
|
||
|
Guillem Arias
|
263ccbf5cc |
fix(goals): scale up card/widget/chart text, fix chart continuity, ease ring focal point
Five small audit follow-ups bundled because they were each one-line swaps and individually wouldn't earn their own commit. Card text scale (vs Sure house style — budget_category h3 ≈ text-base, budget _actuals_summary value text-xl, account row text-sm subtype): - goal card title text-sm → text-base - goal card balance text-lg → text-xl - goal card pace/footer/subtitle text-[11px] → text-xs - funding row subtype subtitle text-xs → text-sm - funding row "last 30d / last 90d" labels text-[10px] → text-xs Chart label scale (projection chart was an outlier at font-size: 10 while time_series_chart_controller uses 12): - every `font-size: 10` in goal_projection_chart_controller.js → 12 - tooltip cssText font-size: 11 → 12 Color-picker pen toggle on the new-goal avatar was w-6 h-6 (24px circle, ~55% of the lg 44px avatar). Shrink to w-5 h-5 + add a w-3 h-3 class on the inner icon so it scales down with it. Graph continuity bug: the saved-line endpoint and the projection-line start point could disagree by tens of $thousands. Saved came from `Balance::ChartSeriesBuilder` (daily snapshot in `balances`), projection started at `currentAmount = goal.current_balance.to_f` (live `linked_accounts.sum(:balance)`). When the snapshot lagged the live read, the chart showed a vertical gap at the "today" marker. Filter any same-day-or-later points out of the raw saved series, always extend the saved series to `(today, currentAmount)`. Saved line now closes at exactly the projection's start. The recent balance-drop story is still honestly shown (the line dips toward the live value rather than ending at the stale snapshot). Ring card focal-point (RUI audit): the left ring card on goals#show sat at the same `shadow-border-xs` elevation as the projection chart and funding card. "When every card is raised, nothing's primary." Drop the shadow + container background — the ring now reads as a status panel sitting on the page surface, not a content card competing with its neighbours. Paused/archived/celebration/empty right-slot variants keep elevation since they ARE content cards. Deferred: light-mode pink distribution-bar contrast. The fix needs a DS token decision (hairline outline vs darker step on the palette entries); rolling it into a polish PR risks dragging in DS changes unrelated to goals. Logged for a follow-up. |
||
|
Guillem Arias
|
880ca69657 |
fix(goals): demote Behind pill to neutral surface + drop em-dashes
Behavioural + RUI audit follow-ups.
The yellow overload finding flagged three concurrent yellow surfaces
on the show page: the "Behind" status pill, the catch-up alert, and
the open-pledge banner(s). Demoting the alert to outline ownership
of the primary CTA addressed one layer, but the pill kept fighting
the alert for hue attention. "Behind" is a state, not a call to
action; the alert owns the action signal.
Switch the pill's classes from `bg-yellow-500/10 text-yellow-700`
to `bg-surface-inset text-yellow-700` (with the same dark-mode
override). Background goes neutral (matches paused/archived chips);
the text keeps the warning hue and the triangle-alert icon stays.
Signal preserved, weight reduced. The yellow alert below now reads
as the primary nudge instead of one of three matching tones.
Also: copy/em-dash sweep across goal surfaces. User-facing strings
that contained em-dashes ("Reaches 70% — $X of $Y", "into your
linked account — Sure will catch it", "You're at 80% — $X of $Y")
read as a stylistic tic; replace with comma/period/period
respectively. Form-stepper review placeholders "—" become "…"
(ellipsis reads as "not yet set" without the typographic weight).
Code comments + log messages also scrubbed for consistency; awkward
sed artifacts (//. its...) restored to readable English.
No locale-key shape changes; pure string-content edits + one
component-style tweak.
|
||
|
Guillem Arias
|
26d9ad76bf |
fix(goals): exclude pending transactions from pace + mobile-stack funding rows
Two audit fixes that pair well. PF audit B20: pace, family velocity, and the funding widget's 30/90-day totals all summed Entry amounts over the linked accounts *including provider-pending transactions*. A pending Plaid/SimpleFIN deposit inflated pace today; the next sync that reversed or dropped it silently shrunk pace tomorrow, with no signal to the user. Worse, the reconciler could match a pending transaction and flip the pledge to "matched" before the underlying entry vanished. `.merge(Transaction.excluding_pending)` on the three Entry queries (Goal#pace, Family#savings_inflow_velocity, the funding widget's `inflow_totals_map`) brings the existing `Transaction::PENDING_PROVIDERS`-aware scope into play. Single-line fix across the three call sites. UX audit: funding-account rows used `grid-cols-[24px_1fr_48px_120px]` at every breakpoint. On a 375pt iPhone viewport that left ~50px for the name column after `p-5` padding + container chrome — name truncated to "Ban…" and the per-row % column squeezed against the weight/totals stack. The percent number is also already encoded in the distribution bar above the rows; on mobile it can disappear without losing signal. Drop the % column at < sm: - mobile grid: `grid-cols-[24px_minmax(0,1fr)_auto]` (avatar / name / totals) - sm+: original 4-column layout with the per-row % - per-row balance subline + accountable label now also drops `.00` cents (consistency with the rest of the page). |
||
|
Guillem Arias
|
a695fb528c |
fix(goals): align card + banner copy/numbers with show-page changes
Tail of the redundancy + clarity pass:
- Goal card on the index drops ".00" cents from every Money.format
call (now `format(precision: 0)`). The card uses the same
visual rhythm as the show page; cents add zero info at this
scale.
- Card's "behind"-status footer now reads "Save $X/mo to catch
up" with X = `catch_up_delta_money` (the delta the user must
add), not the full `monthly_target_amount` (which read as a
total monthly burn). Same fix as the show-page banner.
- Pending-pledge banner title becomes pluralized: drops "0 days
left" / "1 days left" grammatical bugs. New locale tree:
title.zero → "Pending: $X into Y · expires today"
title.one → "Pending: $X into Y · 1 day left"
title.other → "Pending: $X into Y · N days left"
Also drops the "Watching for" phrasing (system-talk) for
"Pending:" (state-talk) and drops cents from the amount.
- `confirm_cancel_body` likewise renders amount without cents.
Cards and banner now read consistently with the show page; one
voice across the surfaces.
|
||
|
Guillem Arias
|
4bda89999b |
fix(goals/show): strip redundancy + sharpen catch-up framing
The show page repeated the same data multiple times across surfaces
that should each say one thing once. Per-screen counts before this
commit:
- Account % distribution: 4 places (distribution bar + dot-legend
strip + 5-bar weight pill + % column)
- Current balance: 3 places (ring, funding heading total, ring
"of $X" subline)
- Target amount: 3 places (header, ring subline, catch-up body)
- Target date: 3 places (header, catch-up body, chart axis)
- Pace: 2 places (catch-up body, projection subtitle)
- ".00" cents: every monetary string
This pass:
- Funding widget drops the dot-legend strip (color/name/% triplet
redundant with the distribution bar's color + the per-row avatar
color) and the 5-bar weight pill (rendered as "1-of-5 sliver" for
low-weight accounts — read as a glitch; the % number next to it
covered the same fact). Row grid shrinks from 5 to 4 columns.
- Funding section heading drops `· $187,031` — the ring card
already carries the total balance.
- Catch-up alert reframes:
Title was "Save $26,621/mo to stay on track" (the *full* required
rate, with the misleading "stay on track" while the pill says
"Behind"). Now "Save $20,002/mo more to catch up" using
`catch_up_delta_money` — the user's actual delta over current
pace.
Body collapsed from two with-date / no-date variants to a single
"Current pace $X/mo · required $Y/mo to hit your target." Drops
the target date duplication since the header already says it.
Pledge CTA pre-fills with the *delta*, not the full required —
so accepting it once funds the gap instead of stacking the full
required rate on top of existing pace.
Secondary link "Or adjust your target" → "Adjust target instead"
(less defeatist framing).
- Projection chart subtitle "At $X/mo you'll miss your target date."
drops the pace duplication (catch-up above already states pace).
New: "Falling short at current pace." Diagnostic only.
- All money on the show page uses `format(precision: 0)`. The ".00"
cents added no information at goal-tracking scale.
- Header `Record pledge` demotes to `outline` variant when status is
`:behind` — the catch-up alert below owns the primary action.
One primary action per surface.
Also adjacent fixes:
- Funding widget keys avatar / distribution color off `account.id`,
not `account.name`. Renaming an account no longer recolors it
retroactively; two accounts with name-hash collisions no longer
share a color (Ruby idiom audit finding).
- `Goals::StatusPillComponent`: add `:completed` variant with
`circle-check-big` icon. `Goal#display_status` now returns
`:completed` when `goal.completed?` so a manually-completed
goal (e.g. user stopped at 80%) reads "Completed" rather than
falling through to `:on_track`/`:behind` and lying on the index.
Locale: drop `body_with_date` (folded into `body`),
`projection.behind` no longer carries interpolation args (caller
doesn't pass them either), `projection.no_pace` plain-language
rewrite ("inflow" → "deposits"), add `status.completed: "Completed"`.
|
||
|
Guillem Arias
|
28cb299211 |
fix(goals/funding-widget): replace chart with last 30d + last 90d totals
The cumulative-inflow chart kept producing readings that didn't match user mental models — chart endpoint = 90-day cumulative, right-hand column = 30-day total, and the visual line didn't carry the "this is per-week deposit activity" intuition that a sparkline implies. After iterating through bars, balance trajectory, and filled-area cumulative, simplest is best. Drop the chart. Each row now shows two right-aligned totals stacked vertically: - Primary line: "$X last 30d" — text-sm, text-primary, the "this month so far" headline answer. - Secondary line: "$Y last 90d" — text-xs, text-secondary, the quarterly-trend reference. Tells the user whether this account contributes regularly without forcing them to read a chart. Both numbers compute in one query — pluck (account_id, date, amount) over 90 days, sum per account into two buckets based on whether the entry's date falls inside the 30-day cutoff. Grid shrinks from 5 columns (avatar / name / weight / chart / total) to 4 (avatar / name / weight / two-totals), with the two-totals column getting 120px so both numbers fit right-aligned with their labels. Drop `funding_accounts_subtitle` and the chart-window plumbing (`TRAJECTORY_SAMPLES`, `cumulative_inflow_map`, `column_total_from`, SVG markup, `vector-effect`, etc.). |
||
|
Guillem Arias
|
737599f723 |
fix(goals/funding-widget): non-scaling-stroke for trajectory line
`preserveAspectRatio="none"` stretched the viewBox's 100×28 to the container's natural width (≈600px) while leaving the Y axis at 1×. With anisotropic scaling, SVG strokes inherit the path's local scale — horizontal segments rendered ~6px wide, vertical segments ~1.5px wide, diagonals in between. The line read as visibly fatter on the flat top run than on the climbing/dropping segments. Add `vector-effect="non-scaling-stroke"` to the line path so the stroke width stays a constant 1.5 CSS px regardless of how the viewBox is scaled. Filled area is unaffected (no stroke). |
||
|
Guillem Arias
|
cd8b92d455 |
fix(goals/funding-widget): chart shows cumulative inflow, not balance level
Balance trajectory rendered every account as "near the top with a gentle wobble" — pink ($1830/30d), orange ($0/30d), blue ($300/30d) all looked nearly identical because each was a positive balance with mild growth, and per-row 0-baseline scaling pushed all lines toward the ceiling. The chart and the "$X last 30d" column on the right were telling completely different stories on the same row. Switch the metric the chart plots: - Data: 31 daily samples (today − 30 … today) of *cumulative inflow* per account, fetched in one `GROUP BY (account_id, date)` over the 30-day window. Each per-account array is a monotonic non-decreasing prefix sum starting at 0. - Scale: per-row, anchored at 0, ceiling = `max(values) × 1.05`. - The chart's rightmost point now equals the "$X last 30d" column value by construction — chart and column tell the same story. - `last_30_money` is read off the cumulative array's last element, no separate aggregation query. Visual shapes after the swap: - Steady-inflow account → smooth diagonal climb - Bumpy/episodic account → step pattern with flat plateaus - No-inflow account → flat line at the bottom, no filled area Removed `balances` query path entirely; trajectory_for is gone. |
||
|
Guillem Arias
|
75a3632119 |
fix(goals/funding-widget): per-account balance trajectory area chart
Bars communicated "events," not "where the account level sits." A sparse-deposit account painted three thin bars at the bottom and looked dead. An account with a single big deposit dominated every other row's scale. Swap to the same visual language as the projection chart on goals#show — filled area below a stroked line — but one chart per linked account, rendering that account's actual balance trajectory over the last 90 days. Mechanics: - New `trajectory_map` on the component pulls every `balances` row for every linked account in one query (`Balance.where(account_id: account_ids, date: 90d..today)`). Result is grouped per account and resampled to 24 points by a single-pass forward walk that carry-forwards the most-recent balance at-or-before each anchor date. O(rows + samples), not O(rows × samples). - Per-row Y-scale: baseline 0 (when the account has ever held a positive balance), ceiling = max balance × 1.05. The chart reads as "how full was this account over time" rather than "how dramatic is the shape." Flat-at-$5k accounts paint near the top; growing $200 → $500 accounts climb from 40% to top. - Filled area at `opacity: 0.18` in the account color + stroked line at full opacity on top — same treatment as the projection chart's saved series. - Grid track for the chart column widened from `minmax(60px, 1fr)` to `minmax(80px, 1fr)` so the curve has enough horizontal room to read. Removed `shared_spark_max` + `sparkline_map` + the bucketed inflow sparkline machinery. Per-row scale is correct here — magnitude already lives in the weight pill on the left and the "$X last 30d" column on the right; the chart's job is shape. |
||
|
Guillem Arias
|
815fb9d8fa |
fix(goals/funding-widget): switch sparkline to bars + shared scale
The shared-scale fix alone wasn't enough — a single outlier bucket on one account compressed every other row to invisibility, and the interpolated line between sparse non-zero buckets painted fake "event triangles" between actual data points. Switch from a stroked path to per-bucket bars: - 12 rects per row, x = `i * 8 + 1`, width 6, 2px gap between. - Bar height = `(value / shared_max) * 24`, floored at 1 unit so a non-zero bucket is always visible even when an outlier elsewhere dominates the scale. - Empty buckets render nothing — no fake baseline, no interpolated trough. - Bars grounded at `y = 28` (bottom of viewBox), so "zero" is implicit and the eye reads upward from a stable floor. - Shared `spark_max` across every account's bars (the component method introduced for the line version stays — that part of the diagnosis was right, it just needed a chart type that handled the scale honestly). Net read: the column-chart-on-each-row layout matches "12 weeks of deposits into this account" much more directly than a sparkline ever did, and outlier-vs-modest-but-steady contributions are both legible at a glance. |
||
|
Guillem Arias
|
5530ff5f06 |
chore(goals): drop dead V1 hooks + surface chart errors
Loose ends from the V1 → V2 refactor that the architecture commit didn't sweep. - Demo generator (B14): the `goal_spec[:contributions]` arrays + the `wedding_contribs` / `house_contribs` builders still shipped in the file, but the seeding loop that consumed them was deleted alongside `GoalContribution`. Dead data. Strip both the per-goal arrays and the two locals. Goal balance/pace in the demo family now derives from the linked depository accounts' own seeded entries elsewhere in the generator. - Goal stepper controller (B16): the `static targets` declaration still listed `initialContributionAmount` and `initialContributionAccountSelect`, and `refreshAccountSelect` + its two callsites still ran every time a linked-account checkbox flipped. The HTML targets disappeared with the V2 stepper rebuild, so `has*Target` guards short-circuited and the method was a no-op — but it was still dispatched on every change. Drop the targets, the method, and the two callsites. - Chart series rescue (B25): `Goal#balance_series_values` and `FundingAccountsBreakdownComponent#sparkline_map` both swallowed `StandardError` with a `Rails.logger.warn(…)`. The chart then degraded to "target line only" silently. Promote the log to `error` level and forward to Sentry when present (matching the pattern in `Account::Syncer`, `Sync`, `PlaidItem`). Fallback to empty result still preserved so the surface degrades instead of 500-ing. |
||
|
Guillem Arias
|
4a46a90a88 |
perf(goals/funding-widget): collapse N+1 sparkline + last-30 queries
V2's funding widget ran (12 + 1) queries per linked account on the
goals#show render:
- one `last_30_inflow_for(account)` summed over a 30-day range,
- twelve separate `sparkline_for(account)` sums, one per 8-day
bucket inside a 90-day window.
For 3 linked accounts, that's 39 SQL queries from this component
alone before the projection chart's Balance::ChartSeriesBuilder
runs. Replace with two grouped queries that scan once across all
linked accounts:
- `last_30_inflow_map`: a `GROUP BY account_id` over the 30-day
window, returning a hash `{ account_id => clamped_inflow }`.
One query, no matter how many accounts are linked.
- `sparkline_map`: a `GROUP BY account_id,
LEAST(GREATEST((CURRENT_DATE - entries.date) / bucket_days, 0),
11)` over the 90-day window. One query covers every account ×
every bucket. Each per-account array is filled in oldest →
newest order so the SVG path reads left → right naturally.
Net query count for the funding widget drops from 13 × N to 2.
Both helpers fall through to safe defaults (`0`, all-zeros array)
on missing keys so the row loop stays branch-free.
|
||
|
Guillem Arias
|
10b360bb54 |
fix(goals/funding-widget): restore DS-aligned per-account breakdown
V2 rebuilt the funding widget around per-account rows + a custom SVG
sparkline, but cut visible signal and DS adherence in the process.
This rebuild restores the V1 affordances and folds in the V2
sparkline as an enhancement.
- Heading regression: `text-lg font-medium` (with total in `text-lg`)
→ `text-sm font-medium` (total inheriting `text-sm`). The section
heading collapsed to body-copy size and no longer matched the
Projection heading beside it. Restore both to `text-lg`.
- Avatar regression: V2 hand-rolled
`w-10 h-10 rounded-full … style="color: white"`. That box (40px)
matches no `Goals::AvatarComponent` size (sm=24px, md=36px,
lg=44px), uses `rounded-full` where the DS uses
`rounded-md/lg/xl/2xl`, and hardcodes white text instead of the
`text-inverse` token. Render `Goals::AvatarComponent` directly
at `size: "sm"`.
- Privacy regression: `row[:balance_money]` subline ("Depository ·
$3,000") wasn't wrapped in `privacy-sensitive`. Blur mode no
longer hid the balance, while heading total and last-30d value
on the same row both had the class. Add `privacy-sensitive` to
the subline.
- Untranslated leak: `<%= account.accountable_type %>` printed the
raw "Depository" / "Investment" / "Crypto" class string with no
i18n. Add `accountable_label(account)` on the component that
prefers the depository subtype ("Savings", "HSA"…) via
`goals.form_stepper.step1.subtypes.*`, falling back through
`accounts.types.*` and finally a `titleize`.
- Lost weight signal: V1 had a stacked distribution bar across the
top, colored legend dots, and a 5-bar weight pill per row.
Users could see "Account A contributes 60% of balance" at a
glance. V2 deleted all three. Restore the distribution bar +
legend + the existing `pages/dashboard/group_weight` partial in
a `weight` column (skipped when only one account is linked).
- Lost container framing: V1 wrapped rows in
`bg-container-inset rounded-xl p-1` with `shared/ruler`
dividers between rows. V2 used `space-y-3` with no container
and no dividers, leaving rows floating. Restore both.
- Empty state regression: V2's fallback rendered the section
heading as a body paragraph (`<p>Funding accounts</p>`) inside
a `p-5 rounded-xl` card — looked like an unfinished widget.
Replace with a real empty state via `goals.show.funding_accounts.
empty.heading` + `body` ("Edit the goal to link the depository
accounts you save into.").
- Row order: V2 sorted by 30-day inflow (which can flatten to
ties at $0 across rows). Sort by balance instead — the column
the user is comparing against anyway.
- Pace alignment: drop the transfer-kind exclusion from the
component's `last_30_inflow_for` and `sparkline_for` so the
widget reads the same flow as `Goal#pace` (commit B). Internal
transfers between linked accounts net out per-account here too,
external transfers count as inflow on the receiving account.
The 12-bucket sparkline still runs 12 queries per account; that
N+1 lands in a follow-up commit alongside the component-level
query collapse.
|
||
|
Guillem Arias
|
88032ce020 |
feat(goals): v2 architecture — drop ledger, derive balance, add pledge
Reshape the goals feature to live on top of linked-account balances. A goal's balance is now the live balance of every depository account linked to it — no parallel ledger, no "log a contribution" step. The "Add contribution" affordance is replaced by a 7-day GoalPledge (kind: transfer | manual_save). GoalPledge::Reconciler matches incoming Transactions (via Account::ProviderImportAdapter) and Valuations (via Account::ReconciliationManager) against open pledges within ±5 days, ±$0.50, or ±1% — single hook covers every provider (Plaid, SimpleFIN, Lunchflow, Enable Banking, Brex, IBKR, Kraken, SnapTrade) plus manual balance edits. A 15-minute Sidekiq cron sweeps expired pledges. Goal model: balance derived from linked_accounts.sum(&:balance), new pace (90-day net non-transfer inflow), months_of_runway, last_matched_pledge_*, pledge_action_label_key (the "I just transferred…" vs "I just saved…" verb switch). UI: - Index gets a 3-card KPI strip (Contributed last 30d / Needs this month / On track) plus a pending-pledges callout. - Show page swaps the "Add contribution" CTA for the pledge modal, replaces the contribution list with a pending-pledge banner, and rebuilds the funding widget into per-account rows with a 12-bucket weekly sparkline and last-30 inflow. - Projection chart adds a required-line (dashed light from today → target) and a translucent pending-pledge bump at today's X. Schema (3 migrations): 1. goal_pledges table with PG enums (goal_pledge_kind, goal_pledge_status), open-by-expiry index, and unique-when-not-null matched_transaction_id. 2. Drop goal_contributions. 3. Partial unique index on transactions ((extra -> 'goal' ->> 'pledge_id')) built CONCURRENTLY so it doesn't block prod. After pulling: run bin/rails db:migrate, then commit the schema.rb sync separately (or let CI regenerate). Deferred to v1.1: allocation columns, contention/archived banners, "why is this behind?" diagnostic, reallocate flow, refresh-sync + Plaid throttle, unallocated-cash chip, joint-account approval, goal_activities log, polymorphic matched_entry_id/type for manual pledge audit. |