mirror of
https://github.com/we-promise/sure.git
synced 2026-05-25 13:34:58 +00:00
20844923e6
Migrates the hand-rolled "Pending" / "Review recommended" / "Potential duplicate" / "Split" badges across the transaction views to the extended DS::Pill primitive from #1902. **Visual contract for badge mode** In #1902 the badge mode (`marker: false`) used `rounded-md` (chip shape) because the marker mode does. But every existing pill / status badge in the codebase uses `rounded-full` — see `settings/providers/_status_pill.html.erb`, `settings/providers/_maturity_badge.html.erb`, and the inline transaction badges this PR is migrating. To keep the visual contract consistent, this PR shifts `DS::Pill`'s badge mode to `rounded-full` (marker mode stays `rounded-md`, unchanged from #1829). The shape distinction now reads: markers are tags, badges are pills. **Callsites migrated** (5): - `app/views/transactions/_transaction.html.erb` — Pending, Review-recommended, Possible-duplicate, Split badges - `app/views/transactions/_header.html.erb` — Pending badge - `app/views/transactions/_split_parent_row.html.erb` — Split badge **Tone mapping** | Badge | Tone | Notes | |---|---|---| | Pending | `:neutral` | unchanged copy/icon, gains subtle DS-controlled bg | | Review recommended | `:neutral` | matches existing `bg-surface-inset` look | | Possible duplicate | `:warning` | DS semantic alias for the existing `text-warning` | | Split | `:neutral` | matches existing `bg-surface-inset` look | **Deferred to follow-up PRs** - `app/views/transactions/_transfer_match.html.erb` — uses two responsive-visibility variants (`hidden lg:inline-flex` for long copy, `inline-flex lg:hidden` for short). DS::Pill currently has no `class:` arg for caller-controlled wrapper classes; deferring until that lands. - `app/views/transactions/searches/filters/_badge.html.erb` — has a close button alongside the label (`button_to clear_filter_*`) and uses `rounded-3xl p-1.5` instead of a true pill. Closer to a removable filter chip — better fit for a separate `DS::FilterChip` primitive than for `DS::Pill`. Refs #1751.
72 lines
2.6 KiB
Plaintext
72 lines
2.6 KiB
Plaintext
<%# locals: (entry:) %>
|
|
<% transaction = entry.entryable %>
|
|
|
|
<div class="group flex lg:grid lg:grid-cols-12 items-center text-sm font-medium p-3 lg:p-4 opacity-50 text-secondary">
|
|
<div class="pr-4 lg:pr-10 flex items-center gap-3 lg:gap-4 col-span-8 min-w-0">
|
|
<%# Empty space where checkbox would be, for alignment %>
|
|
<div class="hidden lg:block w-4 shrink-0"></div>
|
|
|
|
<div class="max-w-full">
|
|
<div class="flex items-center gap-3 lg:gap-4">
|
|
<div class="hidden lg:flex">
|
|
<% if transaction.merchant&.logo_url.present? %>
|
|
<%= image_tag Setting.transform_brand_fetch_url(transaction.merchant.logo_url),
|
|
class: "w-9 h-9 rounded-full border border-secondary",
|
|
loading: "lazy" %>
|
|
<% else %>
|
|
<div class="hidden lg:flex">
|
|
<%= render DS::FilledIcon.new(
|
|
variant: :text,
|
|
text: entry.name,
|
|
size: "lg",
|
|
rounded: true
|
|
) %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="truncate">
|
|
<div class="space-y-0.5">
|
|
<div class="flex items-center gap-1 min-w-0">
|
|
<div class="truncate flex-shrink">
|
|
<%= link_to entry.name,
|
|
entry_path(entry),
|
|
data: { turbo_frame: "drawer", turbo_prefetch: false },
|
|
class: "hover:underline" %>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-1 flex-shrink-0">
|
|
<%= render DS::Pill.new(
|
|
label: t("transactions.split_parent_row.split_label"),
|
|
tone: :neutral,
|
|
marker: false,
|
|
icon: "split"
|
|
) %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-secondary text-xs font-normal">
|
|
<% if transaction.merchant&.present? %>
|
|
<span class="hidden lg:inline truncate"><%= transaction.merchant.name %> • </span>
|
|
<% end %>
|
|
<span class="text-secondary hidden lg:inline">
|
|
<%= link_to entry.account.name,
|
|
account_path(entry.account, tab: "transactions"),
|
|
data: { turbo_frame: "_top" },
|
|
class: "hover:underline" %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden md:flex items-center gap-1 col-span-2">
|
|
</div>
|
|
|
|
<div class="shrink-0 col-span-4 lg:col-span-2 ml-auto flex items-center justify-end gap-2">
|
|
<%= content_tag :p, format_money(-entry.amount_money), class: "privacy-sensitive" %>
|
|
</div>
|
|
</div>
|