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>
2026-05-21 12:54:54 +02:00
2024-02-02 09:05:04 -06:00
2024-02-02 09:05:04 -06:00
2024-02-02 09:05:04 -06:00
2025-05-20 13:31:05 -05:00
2024-02-02 09:05:04 -06:00
2024-08-23 10:06:24 -04:00
2024-08-23 10:06:24 -04:00
2026-05-18 21:46:28 +02:00
2024-02-02 09:05:04 -06:00
2024-02-02 09:05:04 -06:00
2025-09-24 00:19:51 +02:00
2026-04-13 13:44:37 +02:00
2024-02-02 09:05:04 -06:00

Ask DeepWiki View performance data on Skylight Dosu Pipelock Security Scan

sure_shot

Deutsch | Español | Français | 日本語 | 한국어 | Português | Русский | 中文

Sure: The personal finance app for everyone

Get involved: DiscordWebsiteIssues

Important

This repository is a community fork of the now-abandoned Maybe Finance project.
Learn more in their final release doc.

Backstory

The Maybe Finance (archived/abandoned repo) team spent most of 20212022 building a full-featured personal finance and wealth management app. It even included an “Ask an Advisor” feature that connected users with a real CFP/CFA — all included with your subscription.

The business end of things didn't work out, and so they stopped developing the app in mid-2023.

After spending nearly $1 million on development (employees, contractors, data providers, infra, etc.), the team open-sourced the app. Their goal was to let users self-host it for free — and eventually launch a hosted version for a small fee.

They actually did launch that hosted version … briefly.

That also didnt work out — at least not as a sustainable B2C business — so now here we are: hosting a community-maintained fork to keep the codebase alive and see where this can go next.

Join us!

Hosting Sure

Sure is a fully working personal finance app that can be self hosted with Docker.

Forking and Attribution

This repo is a community fork of the archived Maybe Finance repo. Youre free to fork it under the AGPLv3 license — but wed love it if you stuck around and contributed here instead.

To stay compliant and avoid trademark issues:

  • Be sure to include the original AGPLv3 license and clearly state in your README that your fork is based on Maybe Finance but is not affiliated with or endorsed by Maybe Finance Inc.
  • "Maybe" is a trademark of Maybe Finance Inc. and therefore, use of it is NOT allowed in forked repositories (or the logo)

Performance Issues

With data-heavy apps, inevitably, there are performance issues. We've set up a public dashboard showing the problematic requests seen on the demo site, along with the stacktraces to help debug them.

https://www.skylight.io/app/applications/s6PEZSKwcklL/recent/6h/endpoints

Any contributions that help improve performance are very much welcome.

Local Development Setup

If you are trying to self-host the app, read this guide to get started.

The instructions below are for developers to get started with contributing to the app.

Requirements

  • See .ruby-version file for required Ruby version
  • PostgreSQL >9.3 (latest stable version recommended)
  • Redis > 5.4 (latest stable version recommended)

Getting Started

cd sure
cp .env.local.example .env.local
bin/setup
bin/dev

# Optionally, load demo data
rake demo_data:default

Visit http://localhost:3000 to view the app.

If you loaded the optional demo data, log in with these credentials:

  • Email: user@example.com
  • Password: Password1!

For further instructions, see guides below.

Setup Guides

One-click Install

Run on PikaPods

Deploy on Railway

Managed OpenClaw for Sure Finances

Managed OpenClaw for Sure Finances

License and Trademarks

Maybe and Sure are both distributed under an AGPLv3 license.

  • "Maybe" is a trademark of Maybe Finance, Inc.
  • "Sure" is not, and refers to this community fork.

Alt

Description
No description provided
Readme AGPL-3.0 110 MiB
Languages
Ruby 75.4%
HTML 15.4%
Dart 5.3%
JavaScript 3.1%
CSS 0.3%
Other 0.3%