8 Commits

Author	SHA1	Message	Date
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\`).	2026-05-21 12:56:02 +02:00
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>	2026-05-20 18:17:51 +02:00
Guillem Arias Fauste	cdce00c71e	refactor(design-system): migrate 38 hand-rolled provider buttons to DS::Button / DS::Link (#1715 §5 part B) (#1860) ... * refactor(design-system): migrate 9 hand-rolled buttons with orphan btn-- classes to DS::Button / DS::Link Part of #1715 §5. The `btn`, `btn--primary`, `btn--outline`, `btn--ghost`, `btn--sm` CSS classes have no backing styles anywhere in the codebase (no .btn definition in app/assets/, no Bootstrap dependency). These callsites have been rendering unstyled buttons / links since the underlying CSS was last removed. Migrate the 9 broken callsites: - `app/views/transactions/show.html.erb` — duplicate-merge action buttons (×2): `button_to ... class: "btn btn--primary btn--sm"` / `class: "btn btn--outline btn--sm"` → DS::Button with href + variant + size + `data: { turbo_method: :post }`. - `app/views/snaptrade_items/select_existing_account.html.erb` — "Go to Provider Settings" link → DS::Link primary sm. - `app/views/indexa_capital_items/select_existing_account.html.erb` — same pattern → DS::Link primary sm. - `app/views/import/confirms/show.html.erb` — Publish button + Cancel link → DS::Button primary full-width + DS::Link ghost full-width. - `app/views/simplefin_items/new.html.erb` — Cancel link (`class: "btn"` only) + Connect submit → DS::Link secondary + bare `f.submit` (already routes to DS::Button via StyledFormBuilder). - `app/views/settings/providers/_ibkr_panel.html.erb`, `_snaptrade_panel.html.erb`, `_indexa_capital_panel.html.erb` — strip the orphan `class: "btn btn--primary"` from `f.submit` callers; the submit is already a styled DS::Button via the form builder. The next PR in this chain (Phase B) will tackle the larger inline- button cluster (~29 files, 38 instances) — provider panels and provider-item flows hand-rolling the same `inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover focus:outline-none focus:ring-2 focus:ring-primary transition-colors` string. * refactor(design-system): migrate 38 hand-rolled provider buttons to DS::Button / DS::Link (#1715 §5 part B) Bulk sweep of the second cluster from §5. 29 files, 38 button instances — each one hand-rolled the same long Tailwind string for the primary action button: inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-inverse bg-inverse hover:bg-inverse-hover focus:outline-none focus:ring-2 focus:ring-primary transition-colors (some variations used `button-bg-primary hover:button-bg-primary-hover` instead of `bg-inverse hover:bg-inverse-hover` — same intent). Every instance is now a DS::Button / DS::Link with `variant: :primary`, which: - Picks up the new focus-ring + touch-target work from #1840 once that merges. - Stops duplicating the long Tailwind string across 29 files — single source of truth in `DS::Buttonish::VARIANTS[:primary]`. - Picks up consistent `aria-label` derivation for icon-only forms. - Removes the misnamed `focus:ring-primary` (no token) — the new ring comes from `base.css` automatically. Migration patterns applied: - `f.submit text, class: "inline-flex …"` inside `styled_form_with` → bare `<%= f.submit text %>`. StyledFormBuilder routes through DS::Button. - `link_to text, path, class: "inline-flex …"` → DS::Link primary. - `button_to text, path, method: :X, class: "inline-flex …"` → DS::Button with `href: path` and `data: { turbo_method: :X }`. - `submit_tag text, class: "inline-flex …"` inside raw `form_with` → DS::Button with `type: :submit`. Notable adjustments: - `holdings/show.html.erb` — the form was `form_with` (not styled). Switched to `styled_form_with` so `f.submit` routes through DS::Button. `f.combobox` (hotwire_combobox) still works through the styled builder. - Two `link_to settings_providers_path` callsites in `coinstats_items/new.html.erb` + `enable_banking_items/new.html.erb` had `w-full inline-flex … hidden md:inline-flex` — the responsive pair conflicted (both `inline-flex` and `hidden md:inline-flex` on the same element). Migrated to `full_width: true` without the responsive split; the buttons now render at all breakpoints consistently. (Pre-existing copy-paste bug, fixed in passing.) - `enable_banking_panel` add-connection button gained `icon: "plus"` via the DS::Button API; the explicit `gap-2 … icon "plus"` markup is now redundant. Sibling buttons that don't match the primary spec (destructive trash, secondary outline-bordered, button-bg-secondary-strong on holdings/show.html.erb, etc.) are intentionally left alone — they need their own audit pass once #1840 lands and the focus-ring behavior on those variants is stable. * fix(review): restore SimpleFIN submit styling + i18n provider_form label - SimpleFIN new modal: switch form_with -> styled_form_with so f.submit picks up the DS::Button render via styled builder (Codex #1860). - _provider_form: replace hardcoded "Save and connect" with t(".save_and_connect") and add scoped key under settings.providers.provider_form (CodeRabbit).	2026-05-20 18:15:15 +02:00
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 1ba6d3c34c. * test: align i18n assertions with translated messages * Standardize balance error key and tweak locales Replace SophtronAccount's :requires_balance error key with :no_balance and update related locale strings for sophtron, plaid, and simplefin accounts to use the new key and clearer copy. Also switch the QIF upload redirect notice to use a relative translation key (t('.qif_uploaded')), remove an unused SSO providers help line, and fix a trailing-newline/whitespace issue in the subscriptions locale. These changes standardize validation keys and improve translation consistency and messaging. --------- Co-authored-by: KiloClaw <kiloclaw@openclaw.ai>	2026-05-17 09:52:49 +02:00
Guillem Arias Fauste	0d32bb70ec	chore(design-system): swap raw gray classes for semantic tokens across remaining views (#1655) ... * chore(design-system): swap raw gray classes for semantic tokens across remaining views Finalizes the raw-color sweep started in #1652 (settings) and continued in #1654 (holdings). Covers accounts, budgets, chats, pages, imports, provider integrations (mercury, lunchflow, sophtron, enable_banking, coinstats), auth flows (password reset, MFA, registrations), shared layouts, and selected DS component hover states. 35 files, ~56 line changes. Mappings (matching the patterns established in the prior sweeps): - text-white bg-gray-900 hover:bg-gray-800 (with optional focus:ring-gray-900) -> text-inverse button-bg-primary hover:button-bg-primary-hover -> focus:ring-button-bg-primary - text-gray-500 / 600 / 700 -> text-secondary - text-gray-800 -> text-primary - text-gray-400 -> text-subdued - hover:text-gray-700 / hover:text-gray-100 -> hover:text-primary - bg-gray-50 / 100 / 200 (standalone) -> bg-surface-inset - bg-gray-500/5 -> bg-gray-tint-5 - bg-gray-500/10 -> bg-gray-tint-10 - bg-gray-900 (decorative active states) -> bg-inverse - hover:bg-gray-50 / 100 (standalone) -> hover:bg-surface-inset - hover:bg-gray-300 -> hover:bg-surface-inset-hover - bg-white hover:bg-gray-100 -> bg-container hover:bg-container-hover - border-gray-300 -> border-secondary - focus:border-gray-200 -> focus:border-secondary - focus-within:border-gray-900 -> focus-within:border-primary - DS::Buttonish outline / ghost / icon hover: hover:bg-gray-100 theme-dark:hover:bg-gray-700 -> hover:bg-container-inset-hover Left intentionally raw, with rationale: - bg-gray-300 / bg-gray-400 decorative dots and avatar circles. The raw value reads OK against both bg-container variants; no semantic "neutral indicator" token exists. Same pattern as #1652 / #1654. - bg-gray-400/20 theme-dark:bg-gray-500/20 (onboardings/trial). Custom alpha tint with no equivalent token. - bg-white theme-dark:bg-gray-700 (DS::Tabs active pill, budgets tabs). Custom tab-pill pattern; gray-700 in dark mode (one shade lighter than page bg-gray-900) is intentional for visibility. - bg-gray-100 theme-dark:bg-gray-700 (DS::Toggle base bg). Closest match (bg-container-inset-hover) is semantically a hover state. - DS::Buttonish secondary variant gray-200/300/700/600 pattern. Same pattern as #1654 holdings; needs button-bg-secondary-strong from that PR. Will swap in a follow-up after #1654 merges. - disabled:bg-gray-500 theme-dark:disabled:bg-gray-400 on inverse buttons (DS::Buttonish primary, enable_banking, coinstats). Custom disabled state for the inverse pair; no token. - text-gray-300 SVG stroke (shared/_progress_circle). - bg-white text-gray-900 (layouts/print). Print contexts intentionally light regardless of theme. - bg-gray-800 / border-gray-700 / text-white / hover:text-gray-100 (impersonation_sessions/_super_admin_bar). Admin overlay styled to remain dark in both modes; not a theme-aware component. Files covered by other in-flight PRs were skipped to avoid rebase conflicts: chats/_ai_consent's fg-inverse swap (#1626), shared/_text_tooltip and shared/_money_field tooltip pills (#1626), investments/_value_tooltip (#1626), components/DS/tooltip (#1626). * fix(design-system): keep changelog avatar text raw to preserve dark-mode contrast The changelog avatar fallback (when @release_notes[:avatar] is missing) sits inside the "decorative + raw" exception list — bg-gray-300 stays fixed across themes since no semantic neutral-indicator token exists. The earlier sweep partially themed the pair: bg-gray-300 stayed raw but text-gray-600 became text-secondary. text-secondary resolves to gray-300 in dark mode, which matches the bg → text became invisible against its own background. Reverting only the text class to text-gray-600 restores the original fixed-light placeholder behavior. Both classes raw, both themes readable. * fix(design-system): address review feedback on raw-color-sweep-finalize Six issues caught by CodeRabbit + Codex review: 1. focus:ring-button-bg-primary silently emits no CSS (×6 files). button-bg-primary is a custom @utility, not a theme color, so Tailwind's ring-{name} resolution finds no --color-button-bg-primary. Replaces with focus:ring-gray-900 theme-dark:focus:ring-white — same color flip as the button bg, but resolved through theme colors so the ring actually renders. Files: lunchflow/mercury/sophtron _api_error + _setup_required, coinstats_items/new. 2. accounts/show/_activity.html.erb: focus-within:ring-gray-100 was dead (no ring-width on the parent). Removed. 3. import/confirms/show.html.erb: uniform hover:bg-surface-inset-hover applied to both active and inactive step indicators created a jarring dark-to-light flip on the active step (bg-inverse → bg-surface-inset-hover). Now hover follows the resting state: active uses hover:bg-inverse-hover, inactive uses hover:bg-surface-inset-hover. 4. password_resets/new.html.erb: bg-white left raw alongside the migrated hover:bg-surface-inset. Swapped to bg-container so dark mode flips properly. 5. registrations/new.html.erb + password_validator_controller.js: view now uses bg-surface-inset on password strength block lines, but the Stimulus controller still toggled bg-gray-200 on validate. Updated controller to add/remove bg-surface-inset matching the view, so unmet states reset to the tokenized class instead of leaving raw gray-200 stuck on the element.	2026-05-04 21:47:01 +02:00
ghost	6c84fc760e	fix(mercury): support named multiple API connections (#1627) ... * fix(mercury): support named multiple connections * fix(mercury): address multi-connection review feedback * fix(mercury): localize connection labels * fix(mercury): strip API tokens before provider calls * test(mercury): localize provider config assertions * fix(mercury): address multi-connection review * refactor(mercury): simplify connection selection failure	2026-05-03 10:56:31 +02:00
soky srm	9410e5b38d	Providers sharing (#1273) ... * third party provider scoping * Simplify logic and allow only admins to mange providers * Broadcast fixes * FIX tests and build * Fixes * Reviews * Scope merchants * DRY fixes	2026-03-25 17:47:04 +01:00
soky srm	179552657c	Mercury integration (#723) ... * Initial mercury impl * FIX both mercury and generator class * Finish mercury integration and provider generator * Fix schema * Fix linter and tags * Update routes.rb * Avoid schema drift --------- Signed-off-by: soky srm <sokysrm@gmail.com> Co-authored-by: Juan José Mata <juanjo.mata@gmail.com>	2026-01-22 20:37:07 +01:00