mirror of
https://github.com/we-promise/sure.git
synced 2026-05-25 21:44:56 +00:00
* feat(design-system): DS::Disclosure :card variant + migrate 14 provider items Resolves part of #1715 §6. The provider-item view templates (binance, brex, coinbase, coinstats, enable_banking, ibkr, indexa_capital, kraken, lunchflow, mercury, plaid, simplefin, snaptrade, sophtron — 14 in total) all hand-rolled the same `<details open class="group bg-container p-4 shadow-border-xs rounded-xl">` shell with a custom summary inside and content below. Extend `DS::Disclosure` with a `:card` variant that bakes the card chrome onto the `<details>` element itself; the summary becomes slot-driven via the existing `summary_content` slot. Provider items keep their custom summary content (logos, brand colors, status copy) unchanged — they just hand it to the slot instead of writing it between `<summary>` tags. API: DS::Disclosure.new(variant: :card, open: true) do |d| d.with_summary_content do <div class="flex items-center gap-2"> chevron + custom summary markup </div> end body content end While here: - Drop the no-op `group-open:transform` from the default chevron (Tailwind v4 applies `rotate-90` directly). - Add `motion-safe:transition-transform motion-safe:duration-150` to chevron rotation for reduced-motion respect (matches the pattern landing in #1841). - Extract `summary_classes` / `details_classes` helpers so the default and card surfaces stay readable side-by-side. Note: this PR touches `DS::Disclosure` and will textually conflict with #1841 (focus-ring + reduced-motion polish). Both changes are compatible — when #1841 merges first, the resolution is just preserving both edits (the focus-ring classes are already merged into `summary_classes` here). * fix(review): use ring-alpha-black-300 focus token in DS::Disclosure CodeRabbit P2: switch the focus-visible outline from raw gray-900/white palette values to the alpha-black-300 ring token, matching the established focus pattern on settings/provider_card.html.erb. This keeps theme behavior centralized in the design system tokens instead of branching on theme-dark: in the component. Applies to both :default and :card summary variants. * fix(review): stretch DS::Disclosure summary_content to full width Codex P2 follow-up on the disclosure-migration stack: \`<summary>\` is \`display: list-item\`, so a flex inner div inside the slot shrink-wraps to content width — any \`justify-between\` the caller adds has nothing to distribute, and the right-side admin actions collapse toward the title across every provider-item partial migrated to \`DS::Disclosure variant: :card\` in #1855 (and the panels in #1856 / #1857 / #1858 that inherit this component). Wrap the slot in \`<div class=\"w-full\">\` so caller-supplied flex rows stretch across the card. \`:default\` variant is unchanged (it never uses \`summary_content\`).
135 lines
5.8 KiB
Plaintext
135 lines
5.8 KiB
Plaintext
<%# locals: (lunchflow_item:) %>
|
|
|
|
<%= tag.div id: dom_id(lunchflow_item) do %>
|
|
<%= render DS::Disclosure.new(variant: :card, open: true) do |disclosure| %>
|
|
<% disclosure.with_summary_content do %>
|
|
<div class="flex items-center justify-between gap-2">
|
|
<div class="flex items-center gap-2">
|
|
<%= icon "chevron-right", class: "group-open:rotate-90 motion-safe:transition-transform motion-safe:duration-150" %>
|
|
|
|
<div class="flex items-center justify-center h-8 w-8 bg-orange-600/10 rounded-full">
|
|
<% if lunchflow_item.logo.attached? %>
|
|
<%= image_tag lunchflow_item.logo, class: "rounded-full h-full w-full", loading: "lazy" %>
|
|
<% else %>
|
|
<div class="flex items-center justify-center">
|
|
<%= tag.p lunchflow_item.name.first.upcase, class: "text-orange-600 text-xs font-medium" %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div class="pl-1 text-sm">
|
|
<div class="flex items-center gap-2">
|
|
<%= tag.p lunchflow_item.name, class: "font-medium text-primary" %>
|
|
<% if lunchflow_item.scheduled_for_deletion? %>
|
|
<p class="text-destructive text-sm animate-pulse"><%= t(".deletion_in_progress") %></p>
|
|
<% end %>
|
|
</div>
|
|
<% if lunchflow_item.accounts.any? %>
|
|
<p class="text-xs text-secondary">
|
|
<%= lunchflow_item.institution_summary %>
|
|
</p>
|
|
<% end %>
|
|
<% if lunchflow_item.syncing? %>
|
|
<div class="text-secondary flex items-center gap-1">
|
|
<%= icon "loader", size: "sm", class: "animate-spin" %>
|
|
<%= tag.span t(".syncing") %>
|
|
</div>
|
|
<% elsif lunchflow_item.sync_error.present? %>
|
|
<div class="text-secondary flex items-center gap-1">
|
|
<%= render DS::Tooltip.new(text: lunchflow_item.sync_error, icon: "alert-circle", size: "sm", color: "destructive", as: :span) %>
|
|
<%= tag.span t(".error"), class: "text-destructive" %>
|
|
</div>
|
|
<% else %>
|
|
<p class="text-secondary">
|
|
<% if lunchflow_item.last_synced_at %>
|
|
<% if lunchflow_item.sync_status_summary %>
|
|
<%= t(".status_with_summary", timestamp: time_ago_in_words(lunchflow_item.last_synced_at), summary: lunchflow_item.sync_status_summary) %>
|
|
<% else %>
|
|
<%= t(".status", timestamp: time_ago_in_words(lunchflow_item.last_synced_at)) %>
|
|
<% end %>
|
|
<% else %>
|
|
<%= t(".status_never") %>
|
|
<% end %>
|
|
</p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<% if Current.user&.admin? %>
|
|
<div class="flex items-center gap-2">
|
|
<% if Rails.env.development? %>
|
|
<%= icon(
|
|
"refresh-cw",
|
|
as_button: true,
|
|
href: sync_lunchflow_item_path(lunchflow_item)
|
|
) %>
|
|
<% end %>
|
|
|
|
<%= render DS::Menu.new do |menu| %>
|
|
<% menu.with_item(
|
|
variant: "button",
|
|
text: t(".delete"),
|
|
icon: "trash-2",
|
|
href: lunchflow_item_path(lunchflow_item),
|
|
method: :delete,
|
|
confirm: CustomConfirm.for_resource_deletion(lunchflow_item.name, high_severity: true)
|
|
) %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% unless lunchflow_item.scheduled_for_deletion? %>
|
|
<div class="space-y-4 mt-4">
|
|
<% if lunchflow_item.accounts.any? %>
|
|
<%= render "accounts/index/account_groups", accounts: lunchflow_item.accounts %>
|
|
<% end %>
|
|
|
|
<%# Sync summary (collapsible) - using shared ProviderSyncSummary component %>
|
|
<% stats = if defined?(@lunchflow_sync_stats_map) && @lunchflow_sync_stats_map
|
|
@lunchflow_sync_stats_map[lunchflow_item.id] || {}
|
|
else
|
|
lunchflow_item.syncs.ordered.first&.sync_stats || {}
|
|
end %>
|
|
<%= render ProviderSyncSummary.new(
|
|
stats: stats,
|
|
provider_item: lunchflow_item,
|
|
institutions_count: lunchflow_item.connected_institutions.size
|
|
) %>
|
|
|
|
<%# Use model methods for consistent counts %>
|
|
<% unlinked_count = lunchflow_item.unlinked_accounts_count %>
|
|
<% linked_count = lunchflow_item.linked_accounts_count %>
|
|
<% total_count = lunchflow_item.total_accounts_count %>
|
|
|
|
<% if unlinked_count > 0 %>
|
|
<div class="p-4 flex flex-col gap-3 items-center justify-center">
|
|
<p class="text-primary font-medium text-sm"><%= t(".setup_needed") %></p>
|
|
<p class="text-secondary text-sm"><%= t(".setup_description", linked: linked_count, total: total_count) %></p>
|
|
<%= render DS::Link.new(
|
|
text: t(".setup_action"),
|
|
icon: "settings",
|
|
variant: "primary",
|
|
href: setup_accounts_lunchflow_item_path(lunchflow_item),
|
|
frame: :modal
|
|
) %>
|
|
</div>
|
|
<% elsif lunchflow_item.accounts.empty? && total_count == 0 %>
|
|
<div class="p-4 flex flex-col gap-3 items-center justify-center">
|
|
<p class="text-primary font-medium text-sm"><%= t(".no_accounts_title") %></p>
|
|
<p class="text-secondary text-sm"><%= t(".no_accounts_description") %></p>
|
|
<%= render DS::Link.new(
|
|
text: t(".setup_action"),
|
|
icon: "settings",
|
|
variant: "primary",
|
|
href: setup_accounts_lunchflow_item_path(lunchflow_item),
|
|
frame: :modal
|
|
) %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|