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).
146 lines
7.5 KiB
Plaintext
146 lines
7.5 KiB
Plaintext
<%# Wizard step: categorize one group of uncategorized transactions %>
|
|
<div class="w-full space-y-6 pb-12"
|
|
data-controller="categorize"
|
|
data-categorize-assign-entry-url-value="<%= assign_entry_transactions_categorize_path %>"
|
|
data-categorize-preview-rule-url-value="<%= preview_rule_transactions_categorize_path %>"
|
|
data-categorize-position-value="<%= @position %>"
|
|
data-categorize-transaction-type-value="<%= @group.transaction_type %>">
|
|
<%# Top bar: remaining count + skip %>
|
|
<div class="flex items-center justify-between">
|
|
<%= turbo_frame_tag "categorize_remaining" do %>
|
|
<span class="text-sm text-secondary">
|
|
<%= t(".remaining", count: @total_uncategorized) %>
|
|
</span>
|
|
<% end %>
|
|
<%= link_to transactions_categorize_path(position: @position + 1),
|
|
class: "flex items-center gap-1.5 text-sm font-medium text-secondary hover:text-primary" do %>
|
|
<%= t(".skip") %>
|
|
<%= icon("arrow-right", size: "sm") %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%# Group identity — above columns %>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-1">
|
|
<%= render partial: "transactions/categorizes/group_title",
|
|
locals: { display_name: @group.display_name, color: @group.merchant&.color || "#737373", transaction_type: @group.transaction_type } %>
|
|
</div>
|
|
<%= turbo_frame_tag "categorize_group_summary" do %>
|
|
<p class="text-sm text-secondary">
|
|
<%= t(".transaction_count", count: @group.entries.size) %>
|
|
·
|
|
<span class="privacy-sensitive"><%= format_money(@group.entries.sum { |e| e.amount_money.abs }) %></span>
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%# Main form %>
|
|
<%= form_with url: transactions_categorize_path, method: :post, id: "categorize-form", class: "w-full" do |form| %>
|
|
<%= form.hidden_field :position, value: @position %>
|
|
<%= form.hidden_field :transaction_type, value: @group.transaction_type %>
|
|
|
|
<div class="grid grid-cols-[3fr_2fr] gap-4 items-start w-full">
|
|
<%# Left column (60%): rule creation + transaction list %>
|
|
<div class="space-y-4">
|
|
<%# Rule creation %>
|
|
<div class="bg-container shadow-border-xs rounded-xl p-4 space-y-3">
|
|
<label class="flex items-center gap-2.5 cursor-pointer">
|
|
<input type="checkbox" name="create_rule" value="1"
|
|
<%= "checked" if @group.entries.size > 1 %>
|
|
class="checkbox checkbox--light"
|
|
data-categorize-target="createRuleCheckbox"
|
|
data-action="change->categorize#toggleRuleDetails">
|
|
<span class="text-sm font-medium text-primary"><%= t(".create_rule_label") %></span>
|
|
</label>
|
|
|
|
<div data-categorize-target="ruleDetails" class="<%= "opacity-40" unless @group.entries.size > 1 %>">
|
|
<input type="hidden" name="grouping_key"
|
|
value="<%= @group.grouping_key %>"
|
|
data-categorize-target="groupingKeyHidden">
|
|
|
|
<p class="text-sm text-secondary leading-relaxed">
|
|
<%= t(".rule_description_prefix", type: t(".type_#{@group.transaction_type}").downcase) %>
|
|
<span class="inline-flex items-center gap-1 align-middle">
|
|
<span class="font-medium text-primary" data-categorize-target="filterDisplay">"<%= @group.grouping_key %>"</span>
|
|
<button type="button"
|
|
class="text-secondary hover:text-primary transition-colors"
|
|
data-action="click->categorize#startFilterEdit"
|
|
data-categorize-target="filterEditTrigger">
|
|
<%= icon("pencil", size: "sm") %>
|
|
</button>
|
|
<span class="hidden items-center gap-1" data-categorize-target="filterEditArea">
|
|
<input type="text" value="<%= @group.grouping_key %>"
|
|
autocomplete="off"
|
|
class="text-sm border border-primary rounded-lg px-2 py-0.5 bg-container focus:outline-none focus:ring-1 focus:ring-offset-0 w-36 shadow-md"
|
|
data-categorize-target="filterInput"
|
|
data-action="keydown.enter->categorize#confirmFilterEdit keydown.escape->categorize#cancelFilterEdit">
|
|
<button type="button"
|
|
class="flex items-center justify-center w-6 h-6 rounded-md button-bg-primary text-inverse hover:opacity-80 transition-opacity shrink-0"
|
|
data-action="click->categorize#confirmFilterEdit">
|
|
<%= icon("check", size: "sm") %>
|
|
</button>
|
|
</span>
|
|
</span>
|
|
<%= t(".rule_description_suffix") %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<%# Transaction list %>
|
|
<div class="bg-container rounded-xl shadow-border-xs p-4 space-y-3">
|
|
<p class="text-xs text-secondary"><%= t(".transactions_hint") %></p>
|
|
<%= render partial: "transactions/categorizes/transaction_list",
|
|
locals: { entries: @group.entries, categories: @categories } %>
|
|
</div>
|
|
</div>
|
|
|
|
<%# Right column (40%): category picker %>
|
|
<div>
|
|
<div class="bg-container shadow-border-xs rounded-xl p-4 space-y-3">
|
|
<p class="text-sm font-medium text-secondary"><%= t(".assign_category") %></p>
|
|
|
|
<div data-controller="list-filter" class="space-y-3">
|
|
<%# Search field %>
|
|
<div class="relative flex items-center bg-container border border-primary rounded-lg">
|
|
<%= icon("search", class: "absolute left-3 text-secondary") %>
|
|
<input type="text"
|
|
placeholder="<%= t(".filter_placeholder") %>"
|
|
autocomplete="off"
|
|
autofocus
|
|
class="w-full pl-9 pr-3 py-2 text-sm bg-transparent border-none rounded-lg focus:outline-none focus:ring-0 placeholder:text-secondary"
|
|
data-list-filter-target="input"
|
|
data-categorize-target="filter"
|
|
data-action="input->list-filter#filter">
|
|
</div>
|
|
|
|
<%# Category pills — submit the form directly %>
|
|
<div data-list-filter-target="list" data-categorize-target="list"
|
|
data-action="click->categorize#clearFilter"
|
|
class="flex flex-wrap gap-2">
|
|
<p class="hidden text-sm text-secondary w-full py-2" data-list-filter-target="emptyMessage">
|
|
<%= t(".no_categories") %>
|
|
</p>
|
|
<% @categories.each do |category| %>
|
|
<button type="submit"
|
|
name="category_id"
|
|
value="<%= category.id %>"
|
|
class="filterable-item flex items-center gap-1 text-sm font-medium rounded-full px-2.5 py-1 border cursor-pointer hover:opacity-80 transition-opacity focus:outline-none focus:ring-2 focus:ring-offset-1"
|
|
style="background-color: color-mix(in oklab, <%= category.color %> 10%, transparent);
|
|
border-color: color-mix(in oklab, <%= category.color %> 20%, transparent);
|
|
color: <%= category.color %>;"
|
|
data-filter-name="<%= category.name %>">
|
|
<% if category.lucide_icon.present? %>
|
|
<%= icon(category.lucide_icon, size: "sm", color: "current") %>
|
|
<% end %>
|
|
<%= category.name %>
|
|
</button>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<% end %>
|
|
</div>
|