mirror of
https://github.com/we-promise/sure.git
synced 2026-05-07 12:54:04 +00:00
* chore(design-system): swap raw gray classes for semantic tokens in holdings/ Continues the raw-color sweep on the holdings/ domain plus the related account activity feed component. 11 occurrences across 5 files. Token additions: - button-bg-secondary-strong (gray-200 / gray-700) and -hover (gray-300 / gray-600). Holdings CTAs (Add Trade, Add Holding, Edit Cost Basis, Sync Prices, etc.) used a hand-rolled "secondary-strong" pattern that doesn't match the existing button-bg-secondary token (which is gray-50 / gray-700, much subtler). Adding the strong variant preserves the intentional visual weight of these CTAs and gives future PRs a name to reuse. - $version bump 1.0.0 -> 1.1.0 (additive). Mappings: - 8x text-primary bg-gray-200 hover:bg-gray-300 theme-dark:bg-gray-700 theme-dark:hover:bg-gray-600 (holdings/show + sync_prices + cost_basis_cell) -> text-primary button-bg-secondary-strong hover:button-bg-secondary-strong-hover - 1x bg-gray-50 theme-dark:bg-gray-700 hover:bg-gray-100 theme-dark:hover:bg-gray-600 (holdings/index search button) -> button-bg-secondary hover:button-bg-secondary-hover - 1x hover:bg-gray-100 theme-dark:hover:bg-gray-700 (cost_basis_cell hover row) -> hover:bg-container-inset-hover - 1x focus-within:border-gray-900 (activity_feed search wrapper) -> focus-within:border-primary Left intentionally: - bg-gray-300 status indicator dot in show.html.erb (same pattern as the settings pilot; no semantic equivalent for "neutral inactive indicator" yet). - bg-gray-700 in _missing_price_tooltip.html.erb (already fixed in PR #1626; would conflict on rebase). - focus-within:ring-gray-100 (subtle effect that works in both modes; ring-color tokens are a separate concern). * chore(design-system): bump $version to 2.1.0 for additive token additions Per the design tokens semver contract: PR #1626 already bumped to 2.0.0 (major / breaking when fg-* utilities were removed). This PR adds button-bg-secondary-strong + hover without removing or changing existing tokens, so the correct bump is minor (2.0.0 → 2.1.0). Spotted by CodeRabbit on the rebased branch. * fix(design-system): drop dead focus-within:ring-gray-100 on activity feed search The focus-within:ring-gray-100 class only sets --tw-ring-color, but the parent has no ring-width utility, so it produces no visible ring — dead code from before the focus-within:border-primary swap landed. Same issue spotted on app/views/accounts/show/_activity.html.erb in the finalize sweep PR; applying the equivalent fix here for the holdings activity feed component. --------- Signed-off-by: Guillem Arias Fauste <gariasf@proton.me>
164 lines
7.3 KiB
Plaintext
164 lines
7.3 KiB
Plaintext
<%= turbo_frame_tag dom_id(account, "entries") do %>
|
|
<div class="bg-container px-3 py-4 lg:p-4 shadow-border-xs rounded-xl" data-controller="checkbox-toggle">
|
|
<div class="flex items-center justify-between mb-4" data-testid="activity-menu">
|
|
<%= tag.h2 t("accounts.show.activity.title"), class: "font-medium text-lg" %>
|
|
|
|
<%# Show menu if: manual (can add balance) OR non-crypto (can add transactions) %>
|
|
<%# This hides the menu only for linked crypto accounts who have no actions %>
|
|
<% if !account.linked? || !account.crypto? %>
|
|
<%= render DS::Menu.new(variant: "button") do |menu| %>
|
|
<% menu.with_button(text: t("accounts.show.activity.new"), variant: "secondary", icon: "plus") %>
|
|
|
|
<% unless account.linked? %>
|
|
<% menu.with_item(
|
|
variant: "link",
|
|
text: t("accounts.show.activity.new_balance"),
|
|
icon: "circle-dollar-sign",
|
|
href: new_valuation_path(account_id: account.id),
|
|
data: { turbo_frame: :modal }) %>
|
|
<% end %>
|
|
|
|
<% unless account.crypto? %>
|
|
<% if account.investment? %>
|
|
<% menu.with_item(
|
|
variant: "link",
|
|
text: t("accounts.show.activity.new_activity"),
|
|
icon: "arrow-left-right",
|
|
href: new_trade_path(account_id: account.id),
|
|
data: { turbo_frame: :modal }) %>
|
|
<% else %>
|
|
<% menu.with_item(
|
|
variant: "link",
|
|
text: t("accounts.show.activity.new_transaction"),
|
|
icon: "credit-card",
|
|
href: new_transaction_path(account_id: account.id),
|
|
data: { turbo_frame: :modal }) %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% menu.with_item(
|
|
variant: "link",
|
|
text: t("accounts.show.activity.new_transfer"),
|
|
icon: "arrow-right-left",
|
|
href: new_transfer_path(from_account_id: account.id),
|
|
data: { turbo_frame: :modal }) %>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div>
|
|
<%= form_with url: account_path(account),
|
|
id: "entries-search",
|
|
scope: :q,
|
|
method: :get,
|
|
data: { controller: "auto-submit-form" } do |form| %>
|
|
<div class="flex gap-2 mb-4">
|
|
<div class="grow">
|
|
<div class="flex items-center px-3 py-2 gap-2 border border-secondary rounded-lg focus-within:border-primary">
|
|
<%= helpers.icon("search") %>
|
|
|
|
<%= hidden_field_tag :account_id, account.id %>
|
|
|
|
<%= form.search_field :search,
|
|
placeholder: t("accounts.show.activity.search.placeholder"),
|
|
value: search,
|
|
class: "form-field__input placeholder:text-sm placeholder:text-secondary",
|
|
"data-auto-submit-form-target": "auto" %>
|
|
</div>
|
|
</div>
|
|
|
|
<%= render DS::Menu.new(variant: "button", no_padding: true) do |menu| %>
|
|
<% menu.with_button(
|
|
id: "activity-status-filter-button",
|
|
type: "button",
|
|
text: t("accounts.show.activity.filter"),
|
|
variant: "outline",
|
|
icon: "list-filter"
|
|
) %>
|
|
|
|
<% menu.with_custom_content do %>
|
|
<div class="p-3 space-y-3 min-w-[160px]">
|
|
<p class="text-xs font-medium text-secondary uppercase"><%= t("accounts.show.activity.status") %></p>
|
|
<div class="flex items-center gap-3">
|
|
<%= check_box_tag "q[status][]",
|
|
"confirmed",
|
|
params.dig(:q, :status)&.include?("confirmed"),
|
|
id: "q_status_confirmed",
|
|
class: "checkbox checkbox--light",
|
|
form: "entries-search",
|
|
onchange: "document.getElementById('entries-search').requestSubmit()" %>
|
|
<%= label_tag "q_status_confirmed", t("accounts.show.activity.confirmed"), class: "text-sm text-primary" %>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<%= check_box_tag "q[status][]",
|
|
"pending",
|
|
params.dig(:q, :status)&.include?("pending"),
|
|
id: "q_status_pending",
|
|
class: "checkbox checkbox--light",
|
|
form: "entries-search",
|
|
onchange: "document.getElementById('entries-search').requestSubmit()" %>
|
|
<%= label_tag "q_status_pending", t("accounts.show.activity.pending"), class: "text-sm text-primary" %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
<%= button_tag type: "button",
|
|
id: "toggle-checkboxes-button",
|
|
aria: { label: t(".toggle_selection_checkboxes") },
|
|
class: "lg:hidden font-medium whitespace-nowrap inline-flex items-center gap-1 rounded-lg px-3 py-2 text-sm text-primary border border-secondary hover:bg-surface-hover",
|
|
data: {
|
|
action: "click->checkbox-toggle#toggle",
|
|
checkbox_toggle_target: "toggleButton"
|
|
} do %>
|
|
<%= helpers.icon("list-todo") %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<% if activity_dates.empty? %>
|
|
<%= tag.p t("accounts.show.activity.no_entries"), class: "text-secondary text-sm p-4" %>
|
|
<% else %>
|
|
<%= tag.div id: dom_id(account, "entries_bulk_select"),
|
|
data: {
|
|
controller: "bulk-select",
|
|
bulk_select_singular_label_value: "entry",
|
|
bulk_select_plural_label_value: "entries"
|
|
} do %>
|
|
<div id="entry-selection-bar" data-bulk-select-target="selectionBar" class="flex justify-center hidden">
|
|
<%= render "entries/selection_bar" %>
|
|
</div>
|
|
|
|
<div class="grid bg-container-inset rounded-xl grid-cols-12 items-center uppercase text-xs font-medium text-secondary px-5 py-3 mb-4">
|
|
<div class="pl-0.5 col-span-8 flex items-center gap-4">
|
|
<%= check_box_tag "selection_entry",
|
|
class: "checkbox checkbox--light hidden lg:block",
|
|
data: {
|
|
action: "bulk-select#togglePageSelection",
|
|
checkbox_toggle_target: "selectionEntry"
|
|
} %>
|
|
<%= tag.p t("accounts.show.activity.date") %>
|
|
</div>
|
|
|
|
<%= tag.p t("accounts.show.activity.amount"), class: "col-span-4 justify-self-end" %>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="space-y-4">
|
|
<% activity_dates.each do |activity_date_data| %>
|
|
<%= render UI::Account::ActivityDate.new(
|
|
account: account,
|
|
data: activity_date_data
|
|
) %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="p-4 bg-container rounded-bl-lg rounded-br-lg">
|
|
<%= render "shared/pagination", pagy: pagy %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|