mirror of
https://github.com/we-promise/sure.git
synced 2026-05-09 13:45:01 +00:00
2bcdf6c554
* fix(design-system): replace undefined utility classes and broken /N modifiers
Audit of class-name resolution in views surfaced two related silent
failures across ~17 files:
1. Class names that don't exist anywhere in the design system. Tailwind
silently drops them and the element renders with no CSS for that
property.
- bg-primary (and bg-primary/5, /10, /90): never defined as a
custom utility, no --color-primary in @theme. Used as a CTA bg
in 8 places, all rendered transparent.
- text-inverted: typo of text-inverse.
- text-primary-foreground: shadcn/Radix vocabulary, not in our
token system.
- bg-accent / border-accent / text-accent: same shadcn vocabulary;
not defined.
2. Slash modifier (/N) used on custom @utility blocks. Modifiers only
resolve on Tailwind theme colors (anything in tokens.json color.*).
Custom @utility blocks compile to static @apply statements and
silently drop the /N variant. Affected uses:
- border-surface-inset/50 across provider account selectors.
- border-secondary/30, /40 in admin SSO form and simplefin setup.
- bg-surface-inset/30, /40 in settings preferences and simplefin.
Fixes:
| From | To |
|---------------------------------------------------|------------------------------------------------------|
| bg-primary text-white (and similar primary CTAs) | button-bg-primary text-inverse |
| bg-primary text-primary-foreground (badges) | button-bg-primary text-inverse |
| bg-primary text-inverted (typo) | button-bg-primary text-inverse |
| bg-primary text-primary (broken active pill) | bg-inverse text-inverse |
| bg-primary (status dot) | bg-inverse |
| bg-primary/5, bg-primary/10 (subtle accent bg) | bg-gray-tint-5, bg-gray-tint-10 |
| hover:bg-primary/90 | hover:button-bg-primary-hover |
| border-accent bg-accent/10 text-accent (badges) | border-secondary bg-surface-inset text-secondary |
| border-surface-inset/50 | border-secondary |
| border-secondary/30, /40 | border-tertiary |
| bg-surface-inset/30 | bg-surface-inset (full strength) |
| bg-surface-inset/40 | bg-container-inset |
Also documents the alpha-modifier limitation in design/tokens/README.md
under a new "Alpha modifiers in views (/N syntax)" section, with the
opacity-N convention for custom utilities and a note that the
gray-tint-5 / gray-tint-10 family (and similar pre-resolved tints) are
theme colors and accept /N modifiers natively.
The accent-badge mapping uses neutral semantics for now. A dedicated
brand-accent token (text-link-tint-10 etc.) is worth considering as a
follow-up if the "highlighted metadata badge" pattern recurs.
* fix(design-system): replace undefined divide-primary / divide-secondary with alpha tokens
Same class of bug as the rest of this PR: divide-{name} requires the
name to be a theme color (i.e. expose --color-{name}), and our custom
@utility utilities (primary, secondary, etc.) do not. Tailwind silently
drops the unrecognized class and rows render with no separator.
Spotted six instances during the visual audit:
- admin/users/index.html.erb (×2): users table + pending invitations
- admin/sso_providers/index.html.erb (×2): configured + legacy lists
- transactions/categorizes/_transaction_list.html.erb: categorize sidebar
- settings/preferences/show.html.erb: divide-secondary/60 (also broken)
Swapped to the alpha-black/white pattern already used elsewhere in the
codebase (imports/cleans/show, transactions/_summary, etc.):
divide-y divide-primary
-> divide-y divide-alpha-black-200 theme-dark:divide-alpha-white-200
divide-y divide-secondary/60
-> divide-y divide-alpha-black-100 theme-dark:divide-alpha-white-100
The lighter (-100) variant on the preferences list matches the original
intent of /60 (more subtle).
187 lines
9.6 KiB
Plaintext
187 lines
9.6 KiB
Plaintext
<%# locals: (entry:, balance_trend: nil, view_ctx: "global", in_split_group: false) %>
|
|
|
|
<% transaction = entry.entryable %>
|
|
|
|
<%= turbo_frame_tag dom_id(entry) do %>
|
|
<%= turbo_frame_tag dom_id(transaction) do %>
|
|
<div class="group flex lg:grid lg:grid-cols-12 items-center text-primary text-sm font-medium p-3 lg:p-4 <%= "pl-8 lg:pl-12" if in_split_group %>">
|
|
|
|
<div class="pr-4 lg:pr-10 flex items-center gap-3 lg:gap-4 col-span-8 min-w-0">
|
|
<%= check_box_tag dom_id(entry, "selection"),
|
|
disabled: transaction.transfer.present?,
|
|
class: "checkbox checkbox--light hidden lg:block",
|
|
data: {
|
|
id: entry.id,
|
|
entry_type: entry.entryable_type,
|
|
"bulk-select-target": "row",
|
|
action: "bulk-select#toggleRowSelection",
|
|
checkbox_toggle_target: "selectionEntry"
|
|
} %>
|
|
|
|
<div class="flex md:hidden items-center gap-1 col-span-2 relative shrink-0">
|
|
<%= render "transactions/transaction_category", transaction: transaction, variant: "mobile" %>
|
|
<% if transaction.merchant&.logo_url.present? %>
|
|
<%= image_tag Setting.transform_brand_fetch_url(transaction.merchant.logo_url),
|
|
class: "w-5 h-5 rounded-full absolute -bottom-1 -right-1 border border-secondary pointer-events-none",
|
|
loading: "lazy" %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="max-w-full min-w-0 <%= "opacity-50 text-secondary" if entry.excluded %>">
|
|
<%= content_tag :div, class: ["flex items-center gap-3 lg:gap-4"] do %>
|
|
<div class="hidden lg:flex">
|
|
<% if transaction.transfer? %>
|
|
<%= render DS::FilledIcon.new(
|
|
icon: "arrow-right-left",
|
|
hex_color: Category::TRANSFER_COLOR,
|
|
size: "lg",
|
|
rounded: true
|
|
) %>
|
|
<% elsif 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">
|
|
<% if transaction.transfer? %>
|
|
<%= link_to(
|
|
entry.name,
|
|
transaction.transfer.present? ? transfer_path(transaction.transfer) : entry_path(entry),
|
|
data: {
|
|
turbo_frame: "drawer",
|
|
turbo_prefetch: false
|
|
},
|
|
class: "hover:underline"
|
|
) %>
|
|
<% else %>
|
|
<%= link_to(
|
|
entry.name,
|
|
entry_path(entry),
|
|
data: {
|
|
turbo_frame: "drawer",
|
|
turbo_prefetch: false
|
|
},
|
|
class: "hover:underline"
|
|
) %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-1 flex-shrink-0">
|
|
<% if transaction.one_time? %>
|
|
<span class="text-orange-500" title="One-time <%= entry.amount.negative? ? "income" : "expense" %> (excluded from averages)">
|
|
<%= icon "asterisk", size: "sm", color: "current" %>
|
|
</span>
|
|
<% end %>
|
|
|
|
<%# Pending indicator %>
|
|
<% if transaction.pending? %>
|
|
<span class="inline-flex items-center gap-1 text-xs font-medium rounded-full px-1.5 py-0.5 border border-secondary text-secondary" title="<%= t("transactions.transaction.pending_tooltip") %>">
|
|
<%= icon "clock", size: "sm", color: "current" %>
|
|
<%= t("transactions.transaction.pending") %>
|
|
</span>
|
|
<% end %>
|
|
|
|
<%# Potential duplicate indicator - different styling for low vs medium confidence %>
|
|
<% if transaction.has_potential_duplicate? %>
|
|
<% if transaction.low_confidence_duplicate? %>
|
|
<span class="inline-flex items-center gap-1 text-xs font-medium rounded-full px-1.5 py-0.5 border border-secondary bg-surface-inset text-secondary" title="<%= t("transactions.transaction.review_recommended_tooltip") %>">
|
|
<%= icon "help-circle", size: "sm", color: "current" %>
|
|
<%= t("transactions.transaction.review_recommended") %>
|
|
</span>
|
|
<% else %>
|
|
<span class="inline-flex items-center gap-1 text-xs font-medium rounded-full px-1.5 py-0.5 border border-warning bg-warning/10 text-warning" title="<%= t("transactions.transaction.potential_duplicate_tooltip") %>">
|
|
<%= icon "alert-triangle", size: "sm", color: "current" %>
|
|
<%= t("transactions.transaction.possible_duplicate") %>
|
|
</span>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<%# Split indicator %>
|
|
<% if @split_parent_entry_ids ? @split_parent_entry_ids.include?(entry.id) : entry.split_parent? %>
|
|
<span class="inline-flex items-center gap-1 text-xs font-medium rounded-full px-1.5 py-0.5 border border-secondary bg-surface-inset text-secondary" title="<%= t("transactions.transaction.split_tooltip") %>">
|
|
<%= icon "split", size: "sm", color: "current" %>
|
|
<%= t("transactions.transaction.split") %>
|
|
</span>
|
|
<% end %>
|
|
<% if entry.split_child? && !in_split_group %>
|
|
<span class="text-secondary" title="<%= t("transactions.transaction.split_child_tooltip") %>">
|
|
<%= icon "corner-down-right", size: "sm", color: "current" %>
|
|
</span>
|
|
<% end %>
|
|
|
|
<% if transaction.transfer.present? %>
|
|
<%= render "transactions/transfer_match", transaction: transaction %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-secondary text-xs font-normal">
|
|
<% if transaction.transfer? %>
|
|
<span class="text-secondary">
|
|
<%= transaction.loan_payment? ? t("transactions.show.loan_payment") : t("transactions.show.transfer") %> • <%= entry.account.name %>
|
|
</span>
|
|
<% else %>
|
|
<% 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 class="flex min-w-0 items-center gap-1">
|
|
<%= render "categories/category_name_mobile", transaction: transaction %>
|
|
<% if transaction.merchant&.present? %>
|
|
<span class="lg:hidden min-w-0 truncate">• <%= transaction.merchant.name %></span>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden md:flex min-w-0 items-center gap-1 col-span-2">
|
|
<% if entry.account.investment? && !transaction.transfer? %>
|
|
<%# For investment accounts, show activity label instead of category %>
|
|
<%= render "investment_activity/quick_edit_badge", entry: entry, entryable: transaction %>
|
|
<% else %>
|
|
<%= render "transactions/transaction_category", transaction: transaction, variant: "desktop" %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="shrink-0 col-span-4 lg:col-span-2 ml-auto flex items-center justify-end gap-2 <%= "opacity-50" if entry.excluded %>">
|
|
<%# Protection indicator - shows on hover when entry is protected from sync %>
|
|
<% if entry.protected_from_sync? && !entry.excluded? %>
|
|
<%= link_to entry_path(entry),
|
|
data: { turbo_frame: "drawer", turbo_prefetch: false },
|
|
class: "invisible group-hover:visible transition-opacity",
|
|
title: t("entries.protection.tooltip") do %>
|
|
<%= icon "lock", size: "sm", class: "text-secondary" %>
|
|
<% end %>
|
|
<% end %>
|
|
<%= content_tag :p,
|
|
transaction.transfer? && view_ctx == "global" ? "+/- #{format_money(entry.amount_money.abs)}" : format_money(-entry.amount_money),
|
|
class: ["privacy-sensitive", "text-green-600": entry.amount.negative?] %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|