Files
sure/app/views/transactions/show.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

437 lines
20 KiB
Plaintext

<%= render DS::Dialog.new(frame: "drawer", responsive: true) do |dialog| %>
<% dialog.with_header(custom_header: true) do %>
<div class="flex items-start justify-between gap-4">
<%= render "transactions/header", entry: @entry %>
<%= dialog.close_button %>
</div>
<% end %>
<% dialog.with_body do %>
<%# Potential duplicate alert %>
<% if @entry.transaction.has_potential_duplicate? %>
<% potential_match = @entry.transaction.potential_duplicate_entry %>
<% if potential_match %>
<div class="mx-4 my-3 p-4 rounded-lg border border-warning bg-warning/5">
<div class="flex items-start gap-3">
<%= icon "alert-triangle", size: "md", color: "warning" %>
<div class="flex-1 space-y-2">
<h4 class="text-sm font-medium text-primary"><%= t("transactions.show.potential_duplicate_title") %></h4>
<p class="text-sm text-secondary"><%= t("transactions.show.potential_duplicate_description") %></p>
<div class="mt-3 p-3 rounded bg-container border border-primary">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-primary"><%= potential_match.name %></p>
<p class="text-xs text-secondary"><%= potential_match.date.strftime("%b %d, %Y") %> • <%= potential_match.account.name %></p>
</div>
<p class="text-sm font-medium privacy-sensitive <%= potential_match.amount.negative? ? "text-green-600" : "text-primary" %>">
<%= format_money(-potential_match.amount_money) %>
</p>
</div>
</div>
<div class="flex items-center gap-2 mt-3">
<%= render DS::Button.new(
text: t("transactions.show.merge_duplicate"),
href: merge_duplicate_transaction_path(@entry.transaction),
variant: :primary,
size: :sm,
data: { turbo_method: :post, turbo_frame: "_top" }
) %>
<%= render DS::Button.new(
text: t("transactions.show.keep_both"),
href: dismiss_duplicate_transaction_path(@entry.transaction),
variant: :outline,
size: :sm,
data: { turbo_method: :post, turbo_frame: "_top" }
) %>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
<%= render "entries/protection_indicator", entry: @entry, unlock_path: unlock_transaction_path(@entry.transaction) %>
<% dialog.with_section(title: t(".overview"), open: true) do %>
<div>
<% split_locked = @entry.split_child? || @entry.split_parent? %>
<% edit_locked = !can_edit_entry? %>
<% annotate_locked = !can_annotate_entry? %>
<%= styled_form_with model: @entry,
url: transaction_path(@entry),
class: "space-y-2",
data: { controller: "auto-submit-form" } do |f| %>
<%= hidden_field_tag :grouped, "true" if params[:grouped] == "true" %>
<%= f.text_field :name,
label: t(".name_label"),
disabled: @entry.split_child? || edit_locked,
"data-auto-submit-form-target": "auto" %>
<%= f.date_field :date,
label: t(".date_label"),
max: Date.current,
disabled: @entry.linked? || split_locked || edit_locked,
"data-auto-submit-form-target": "auto" %>
<% unless @entry.transaction.transfer? %>
<div class="flex items-center gap-2">
<%= f.select :nature,
[["Expense", "outflow"], ["Income", "inflow"]],
{ container_class: "w-1/3", label: t(".nature"), selected: @entry.amount.negative? ? "inflow" : "outflow" },
{ data: { "auto-submit-form-target": "auto" }, disabled: @entry.linked? || split_locked || edit_locked } %>
<%= f.money_field :amount, label: t(".amount"),
container_class: "w-2/3",
auto_submit: true,
min: 0,
value: @entry.amount.abs,
disabled: @entry.linked? || split_locked || edit_locked,
disable_currency: @entry.linked? || split_locked || edit_locked %>
</div>
<%= f.fields_for :entryable do |ef| %>
<%= ef.collection_select :category_id,
Current.family.categories.alphabetically,
:id, :name,
{ label: t(".category_label"),
class: "text-subdued", include_blank: t(".uncategorized"),
variant: :badge, searchable: true, disabled: @entry.split_child? || annotate_locked },
"data-auto-submit-form-target": "auto" %>
<% end %>
<% end %>
<% end %>
</div>
<% end %>
<% dialog.with_section(title: t(".details")) do %>
<%= styled_form_with model: @entry,
url: transaction_path(@entry),
class: "space-y-2",
data: { controller: "auto-submit-form" } do |f| %>
<%= hidden_field_tag :grouped, "true" if params[:grouped] == "true" %>
<% unless @entry.transaction.transfer? %>
<%= f.select :account,
options_for_select(
accessible_accounts.alphabetically.pluck(:name, :id),
@entry.account_id
),
{ label: t(".account_label") },
{ disabled: true } %>
<%= f.fields_for :entryable do |ef| %>
<%= ef.collection_select :merchant_id,
Current.family.available_merchants_for(Current.user).alphabetically,
:id, :name,
{ include_blank: t(".none"),
label: t(".merchant_label"),
variant: :logo, searchable: true, menu_placement: :auto, disabled: @entry.split_child? || !can_annotate_entry? },
"data-auto-submit-form-target": "auto" %>
<%= ef.select :tag_ids,
Current.family.tags.alphabetically.pluck(:name, :id),
{
include_blank: t(".none"),
multiple: true,
label: t(".tags_label"),
disabled: !can_annotate_entry?
},
{ "data-controller": "multi-select", "data-auto-submit-form-target": "auto" } %>
<% end %>
<% end %>
<% end %>
<%= render "transactions/notes", entry: @entry, can_annotate: can_annotate_entry? %>
<% end %>
<% dialog.with_section(title: t(".attachments")) do %>
<%= render "transactions/attachments", transaction: @entry.transaction, can_upload: can_annotate_entry?, can_delete: can_edit_entry? %>
<% end %>
<% if (details = build_transaction_extra_details(@entry)) %>
<% dialog.with_section(title: t(".additional_details"), open: false) do %>
<div class="px-3 py-2 space-y-3">
<% if details[:kind] == :simplefin %>
<% sf = details[:simplefin] %>
<% if sf.present? %>
<dl class="space-y-2">
<% if sf[:payee].present? %>
<div class="flex items-center justify-between gap-2">
<dt class="text-secondary text-sm"><%= t(".payee") %></dt>
<dd class="text-sm text-primary"><%= sf[:payee] %></dd>
</div>
<% end %>
<% if sf[:description].present? %>
<div class="flex items-center justify-between gap-2">
<dt class="text-secondary text-sm"><%= t(".description") %></dt>
<dd class="text-sm text-primary"><%= sf[:description] %></dd>
</div>
<% end %>
<% if sf[:memo].present? %>
<div class="flex items-center justify-between gap-2">
<dt class="text-secondary text-sm"><%= t(".memo") %></dt>
<dd class="text-sm text-primary"><%= sf[:memo] %></dd>
</div>
<% end %>
</dl>
<% end %>
<% if details[:provider_extras].present? %>
<div class="pt-2">
<h4 class="text-sm text-secondary mb-1"><%= t(".provider_extras") %></h4>
<dl class="space-y-2">
<% details[:provider_extras].each do |ex| %>
<div class="flex items-center justify-between gap-2">
<dt class="text-secondary text-sm"><%= ex[:key] %></dt>
<dd class="text-sm text-primary truncate max-w-[60%]" title="<%= ex[:title] %>"><%= ex[:value] %></dd>
</div>
<% end %>
</dl>
</div>
<% end %>
<% else %>
<pre class="text-xs text-secondary bg-surface-inset rounded p-2 overflow-auto"><%= details[:raw] %></pre>
<% end %>
</div>
<% end %>
<% end %>
<%# Split children list for split parent %>
<% if @entry.split_parent? %>
<% dialog.with_section(title: t("splits.show.title"), open: true) do %>
<div class="px-3 py-2 space-y-2">
<p class="text-xs text-secondary"><%= t("splits.show.description") %></p>
<% @entry.child_entries.includes(:entryable).each do |child| %>
<div class="flex items-center justify-between p-2 rounded-lg border border-primary">
<div>
<p class="text-sm font-medium text-primary"><%= child.name %></p>
<p class="text-xs text-secondary"><%= child.entryable.try(:category)&.name || t("splits.new.uncategorized") %></p>
</div>
<p class="text-sm font-medium privacy-sensitive <%= child.amount.negative? ? "text-green-600" : "text-primary" %>">
<%= format_money(-child.amount_money) %>
</p>
</div>
<% end %>
<div class="flex items-center gap-3 pt-2">
<%= render DS::Link.new(
text: t("splits.child.edit_split"),
icon: "pencil",
variant: "ghost",
size: :sm,
href: edit_transaction_split_path(@entry),
frame: :modal
) %>
<%= render DS::Button.new(
text: t("splits.show.unsplit_button"),
icon: "undo-2",
variant: "ghost",
size: :sm,
class: "text-destructive",
href: transaction_split_path(@entry),
method: :delete,
confirm: CustomConfirm.new(title: t("splits.show.unsplit_title"), body: t("splits.show.unsplit_confirm"), btn_text: t("splits.show.unsplit_button"), destructive: true),
frame: "_top"
) %>
</div>
</div>
<% end %>
<% end %>
<%# For split child, show parent info and actions %>
<% if @entry.split_child? %>
<% dialog.with_section(title: t("splits.child.title"), open: true) do %>
<div class="px-3 py-2">
<% parent = @entry.parent_entry %>
<% if parent %>
<div class="p-3 rounded-lg border border-secondary space-y-3">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-primary"><%= parent.name %></p>
<p class="text-xs text-secondary"><%= parent.date.strftime("%b %d, %Y") %></p>
</div>
<p class="text-sm font-medium privacy-sensitive text-primary">
<%= format_money(-parent.amount_money) %>
</p>
</div>
<div class="flex items-center gap-3 border-t border-primary pt-2">
<%= render DS::Link.new(
text: t("splits.child.edit_split"),
icon: "pencil",
variant: "ghost",
size: :sm,
href: edit_transaction_split_path(parent),
frame: :modal
) %>
<%= render DS::Button.new(
text: t("splits.child.unsplit"),
icon: "undo-2",
variant: "ghost",
size: :sm,
class: "text-destructive",
href: transaction_split_path(parent),
method: :delete,
confirm: CustomConfirm.new(title: t("splits.show.unsplit_title"), body: t("splits.show.unsplit_confirm"), btn_text: t("splits.show.unsplit_button"), destructive: true),
frame: "_top"
) %>
</div>
</div>
<% end %>
</div>
<% end %>
<% end %>
<% if can_edit_entry? %>
<% dialog.with_section(title: t(".settings")) do %>
<% unless @entry.split_parent? %>
<div class="pb-4">
<%= styled_form_with model: @entry,
url: transaction_path(@entry),
class: "p-3",
data: { controller: "auto-submit-form" } do |f| %>
<%= hidden_field_tag :grouped, "true" if params[:grouped] == "true" %>
<div class="flex cursor-pointer items-center gap-4 justify-between">
<div class="text-sm space-y-1">
<h4 class="text-primary"><%= t(".exclude") %></h4>
<p class="text-secondary"><%= t(".exclude_description") %></p>
</div>
<%= f.toggle :excluded, { data: { auto_submit_form_target: "auto" } } %>
</div>
<% end %>
</div>
<% end %>
<% if @entry.account.investment? || @entry.account.crypto? %>
<div class="pb-4">
<%= styled_form_with model: @entry,
url: transaction_path(@entry),
class: "p-3",
data: { controller: "auto-submit-form" } do |f| %>
<%= hidden_field_tag :grouped, "true" if params[:grouped] == "true" %>
<%= f.fields_for :entryable do |ef| %>
<div class="flex cursor-pointer items-center gap-4 justify-between">
<div class="text-sm space-y-1">
<h4 class="text-primary"><%= t(".activity_type") %></h4>
<p class="text-secondary"><%= t(".activity_type_description") %></p>
</div>
<%= ef.select :investment_activity_label,
options_for_select(
[["—", nil]] + Transaction::ACTIVITY_LABELS.map { |l| [t("transactions.activity_labels.#{l.parameterize(separator: '_')}"), l] },
@entry.entryable.investment_activity_label
),
{ label: false },
{ class: "form-field__input border border-secondary rounded-lg px-3 py-1.5 max-w-40 text-sm",
data: { auto_submit_form_target: "auto" } } %>
</div>
<% end %>
<% end %>
</div>
<% end %>
<% unless @entry.split_child? %>
<div class="pb-4">
<%= styled_form_with model: @entry,
url: transaction_path(@entry),
class: "p-3",
data: { controller: "auto-submit-form" } do |f| %>
<%= hidden_field_tag :grouped, "true" if params[:grouped] == "true" %>
<%= f.fields_for :entryable do |ef| %>
<div class="flex cursor-pointer items-center gap-4 justify-between">
<div class="text-sm space-y-1">
<h4 class="text-primary"><%= t(".one_time_title", type: @entry.amount.negative? ? t("transactions.form.income") : t("transactions.form.expense")) %></h4>
<p class="text-secondary"><%= t(".one_time_description") %></p>
</div>
<%= ef.toggle :kind, {
checked: @entry.transaction.one_time?,
data: { auto_submit_form_target: "auto" }
}, "one_time", "standard" %>
</div>
<% end %>
<% end %>
</div>
<% end %>
<%# Split Transaction %>
<% if @entry.transaction.splittable? %>
<div class="flex items-center justify-between gap-4 p-3">
<div class="text-sm space-y-1">
<h4 class="text-primary"><%= t("splits.show.button_title") %></h4>
<p class="text-secondary"><%= t("splits.show.button_description") %></p>
</div>
<%= render DS::Link.new(
text: t("splits.show.button"),
icon: "split",
variant: "outline",
href: new_transaction_split_path(@entry),
frame: :modal
) %>
</div>
<% end %>
<% unless @entry.split_child? %>
<div class="flex items-center justify-between gap-4 p-3">
<div class="text-sm space-y-1">
<h4 class="text-primary"><%= t(".transfer_or_debt_payment") %></h4>
<p class="text-secondary"><%= t(".transfer_matcher_description") %></p>
</div>
<%= render DS::Link.new(
text: t(".open_matcher"),
icon: "arrow-left-right",
variant: "outline",
href: new_transaction_transfer_match_path(@entry),
frame: :modal
) %>
</div>
<!-- Pending Duplicate Merger -->
<% if @entry.entryable.is_a?(Transaction) && @entry.entryable.pending? %>
<div class="flex items-center justify-between gap-4 p-3">
<div class="text-sm space-y-1">
<h4 class="text-primary"><%= t("transactions.show.pending_duplicate_merger_title") %></h4>
<p class="text-secondary"><%= t("transactions.show.pending_duplicate_merger_description") %></p>
</div>
<%= render DS::Link.new(
text: t("transactions.show.pending_duplicate_merger_button"),
icon: "merge",
variant: "outline",
href: new_transaction_pending_duplicate_merges_path(@entry),
frame: :modal
) %>
</div>
<% end %>
<!-- Convert to Trade (Investment Accounts Only, not already converted) -->
<% if @entry.account.investment? && @entry.entryable.is_a?(Transaction) && !@entry.excluded? %>
<div class="flex items-center justify-between gap-2 p-3">
<div class="text-sm space-y-1">
<h4 class="text-primary"><%= t(".convert_to_trade_title") %></h4>
<p class="text-secondary"><%= t(".convert_to_trade_description") %></p>
</div>
<%= render DS::Button.new(
text: t(".convert"),
variant: "outline",
icon: "arrow-right-left",
href: convert_to_trade_transaction_path(@entry.transaction),
method: :get,
frame: :modal
) %>
</div>
<% end %>
<!-- Mark as Recurring Form -->
<div class="flex items-center justify-between gap-2 p-3">
<div class="text-sm space-y-1">
<h4 class="text-primary"><%= t(".mark_recurring_title") %></h4>
<p class="text-secondary"><%= t(".mark_recurring_subtitle") %></p>
</div>
<%= render DS::Button.new(
text: t(".mark_recurring"),
variant: "outline",
icon: "repeat",
href: mark_as_recurring_transaction_path(@entry.transaction),
method: :post,
frame: "_top"
) %>
</div>
<% end %>
<%# Delete Transaction Form - hidden for split children %>
<% unless @entry.split_child? %>
<div class="flex items-center justify-between gap-2 p-3">
<div class="text-sm space-y-1">
<h4 class="text-primary"><%= t(".delete_title") %></h4>
<p class="text-secondary"><%= t(".delete_subtitle") %></p>
</div>
<%= render DS::Button.new(
text: t(".delete"),
variant: "outline-destructive",
href: entry_path(@entry),
method: :delete,
confirm: CustomConfirm.for_resource_deletion("transaction"),
frame: "_top"
) %>
</div>
<% end %>
</div>
<% end %>
<% end %>
<% end %>
<% end %>