Files
sure/app/views/coinstats_items/new.html.erb
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

129 lines
6.3 KiB
Plaintext

<%= turbo_frame_tag "modal" do %>
<%= render DS::Dialog.new do |dialog| %>
<% dialog.with_header(title: t(".title")) %>
<% dialog.with_body do %>
<% error_msg = local_assigns[:error_message] || @error_message %>
<% if error_msg.present? %>
<div class="p-2 rounded-md bg-destructive/10 text-destructive text-sm overflow-hidden mb-3">
<p class="line-clamp-3" title="<%= error_msg %>"><%= error_msg %></p>
</div>
<% end %>
<% items = local_assigns[:coinstats_items] || @coinstats_items || Current.family.coinstats_items.where.not(api_key: nil) %>
<% selected_item = items&.first %>
<% if selected_item.present? %>
<% blockchains = local_assigns[:blockchains] || @blockchains || [] %>
<% exchanges = local_assigns[:exchanges] || @exchanges || [] %>
<% address_value = local_assigns[:address] || @address %>
<% blockchain_value = local_assigns[:blockchain] || @blockchain %>
<% exchange_connection_id = local_assigns[:exchange_connection_id] || @exchange_connection_id %>
<% exchange_connection_fields = local_assigns[:exchange_connection_fields] || @exchange_connection_fields || {} %>
<div class="space-y-5">
<section class="rounded-xl border border-primary bg-container p-4 space-y-3">
<div class="space-y-1">
<h3 class="text-sm font-medium text-primary"><%= t(".link_wallet_title") %></h3>
<p class="text-sm text-secondary"><%= t(".link_wallet_description") %></p>
</div>
<%= styled_form_with url: link_wallet_coinstats_items_path,
method: :post,
data: { turbo: true },
class: "space-y-3" do |form| %>
<%= form.hidden_field :coinstats_item_id, value: selected_item.id %>
<%= form.text_field :address,
label: t(".address_label"),
placeholder: t(".address_placeholder"),
value: address_value %>
<% if blockchains.present? %>
<%= form.select :blockchain,
options_for_select(blockchains, blockchain_value),
{ include_blank: t(".blockchain_select_blank") },
label: t(".blockchain_label"),
class: "w-full rounded-md border border-primary px-3 py-2 text-sm bg-container-inset text-primary" %>
<% else %>
<%= form.text_field :blockchain,
label: t(".blockchain_label"),
placeholder: t(".blockchain_placeholder"),
value: blockchain_value %>
<% end %>
<div class="flex justify-end">
<%= form.submit t(".link_wallet_submit") %>
</div>
<% end %>
</section>
<section class="rounded-xl border border-primary bg-container p-4 space-y-3"
data-controller="coinstats-exchange-fields"
data-coinstats-exchange-fields-exchanges-value="<%= html_escape(exchanges.to_json) %>"
data-coinstats-exchange-fields-initial-connection-id-value="<%= exchange_connection_id %>"
data-coinstats-exchange-fields-initial-fields-value="<%= html_escape(exchange_connection_fields.to_json) %>">
<div class="space-y-1">
<h3 class="text-sm font-medium text-primary"><%= t(".link_exchange_title") %></h3>
<p class="text-sm text-secondary"><%= t(".link_exchange_description") %></p>
<p class="text-xs text-secondary"><%= t(".link_exchange_note") %></p>
</div>
<%= styled_form_with url: link_exchange_coinstats_items_path,
method: :post,
data: { turbo: true },
class: "space-y-3" do |form| %>
<%= form.hidden_field :coinstats_item_id, value: selected_item.id %>
<%= form.hidden_field :exchange_connection_name, value: "", data: { coinstats_exchange_fields_target: "connectionName" } %>
<%= form.select :exchange_connection_id,
options_for_select(exchanges.map { |exchange| [ exchange[:name], exchange[:connection_id] ] }, exchange_connection_id),
{ include_blank: t(".exchange_select_blank") },
label: t(".exchange_label"),
class: "w-full rounded-md border border-primary px-3 py-2 text-sm bg-container-inset text-primary",
data: {
coinstats_exchange_fields_target: "select",
action: "change->coinstats-exchange-fields#render"
} %>
<div data-coinstats-exchange-fields-target="fields" class="space-y-3"></div>
<div class="flex justify-end">
<%= form.submit t(".link_exchange_submit") %>
</div>
<% end %>
</section>
</div>
<% else %>
<div class="space-y-4">
<div class="flex items-start gap-3">
<%= icon("alert-circle", class: "text-warning w-5 h-5 shrink-0 mt-0.5") %>
<div class="text-sm text-secondary">
<p class="font-medium text-primary mb-2"><%= t(".not_configured_title") %></p>
<p><%= t(".not_configured_message") %></p>
</div>
</div>
<div class="bg-surface rounded-lg p-4 space-y-2 text-sm">
<ol class="list-decimal list-inside space-y-1 text-secondary">
<li><%= t(".not_configured_step1_html").html_safe %></li>
<li><%= t(".not_configured_step2_html").html_safe %></li>
<li><%= t(".not_configured_step3_html").html_safe %></li>
</ol>
</div>
<div class="mt-4">
<%= render DS::Link.new(
text: t(".go_to_settings"),
href: settings_providers_path,
variant: :primary,
full_width: true,
data: { turbo: false }
) %>
</div>
</div>
<% end %>
<% end %>
<% end %>
<% end %>