feat(settings/providers): replace Add another provider CTA with a search + kind filter

Per the design review, the "Add another provider · Browse providers"
card was a redirect to content one scroll-tick away. A search input
plus kind chips lets users self-segment the catalog and is the right
tool once it grows beyond the four to twelve providers we ship today.

- New providers_filter Stimulus controller — case-insensitive free
  text search across name/region/kind, plus a chip group with
  All / Banks / Crypto / Investment that toggle visibility via
  Tailwind's `hidden` class.
- _search_filters partial: search box (count-pluralized placeholder)
  + chip group, ARIA-labelled and aria-pressed for the chips.
- ProviderCard exposes filter_data (target + name/region/kind data
  attrs) so the controller can match without re-rendering.
- Lunchflow's `kind` was "Lunch" — switched to "Bank" so it falls
  under the Banks chip alongside its actual offering (it aggregates
  banks).
- Drops the add_provider_cta partial and its locale entries; adds
  search_filters.* and an empty_filter message.
This commit is contained in:
Guillem Arias
2026-05-09 11:33:13 +02:00
committed by Guillem Arias
parent bf73e3a1e3
commit d037412b8d
9 changed files with 146 additions and 49 deletions

View File

@@ -115,18 +115,22 @@ class Settings::ProvidersTest < ApplicationSystemTestCase
assert_text "Re-consent needed in 5 days"
end
test "add provider CTA banner appears above available group when providers are connected" do
SimplefinItem.create!(family: @family, name: "Test SimpleFIN", access_url: "https://bridge.simplefin.org/simplefin/access")
test "search input filters provider cards by name" do
visit settings_providers_path
cta = find("a", text: "Browse providers")
available_heading = find(:xpath, "//h2[contains(., 'Available')]")
find('[data-providers-filter-target="input"]').set("Coinbase")
cta_y = cta.native.location.y
available_y = available_heading.native.location.y
assert_selector "a[data-providers-filter-target='card']", text: /Coinbase/i
assert_no_selector "a[data-providers-filter-target='card']", text: /Binance/i
end
assert_operator cta_y, :<, available_y, "Add-provider CTA should appear above the Available heading"
test "kind chip narrows the grid to providers of that kind" do
visit settings_providers_path
click_on "Crypto"
assert_selector "a[data-providers-filter-target='card']", text: /Coinbase/i
assert_no_selector "a[data-providers-filter-target='card']", text: /SimpleFIN/i
end
test "available providers render as a card grid" do