mirror of
https://github.com/we-promise/sure.git
synced 2026-06-08 12:19:03 +00:00
5d0eb7f445
* fix(ds): disabled buttons use not-allowed cursor
Tailwind v4 preflight sets cursor:pointer on every <button>, including
disabled ones. Add disabled:cursor-not-allowed to the DS button base so
disabled buttons read as non-interactive.
* fix(goals): disable new-goal submit until required fields valid
The submit button was always enabled, and the funding-accounts checkbox
group has no native 'required', so a goal with no linked account could be
submitted and only fail server-side (422). Disable the submit until name,
a positive target amount, and >=1 account are present, and add a
submit-time guard that surfaces inline errors and focuses the first
offending field as a backstop.
* fix(goals): keep color/icon picker from shifting the form
DS::Disclosure wraps its body in an mt-2 div that sits in normal flow, so
opening the absolutely-positioned picker popover nudged the form down ~8px.
Use a raw <details> for the picker so the popover overlays without
reflowing the content beneath it.
* fix(goals): container-responsive cards, meta-line status, scrollable tabs
- Card grids + KPI strip switch from viewport breakpoints to container
queries (@container), so columns track the actual content width when the
account/AI sidebars are open instead of crushing three columns into a
narrow center.
- Move the status pill from the title row to the meta line; the title now
gets the full header width (no more 'Hou...' truncation at 3-up). Drop
the secondary line when the pill already states it (completed / open).
- Card internals harden for narrow widths (ring shrink-0, footer wrap,
shorter 'N days left' secondary).
- Filter tabs scroll horizontally instead of wrapping 'On track' mid-label
or forcing the row wider than the viewport.
* fix(goals): only require a funding account on the create form
GoalsController#edit renders account checkboxes from visible accounts only,
so a goal backed solely by a now-hidden (disabled / pending_deletion)
account renders none checked. The submit-validation then wedged the edit
form — a name/notes change couldn't be saved even though #update preserves
existing links when account_ids is omitted. Gate the account requirement on
a require-account Stimulus value that is true only for the create form.
* fix(goals): give the color/icon picker trigger an accessible name
The hand-rolled <summary> is icon-only (pen), so screen readers announced an
unlabeled control. Add a localized aria-label.
* fix(goals): render form validation errors inline on server re-render
The client-side controller already surfaces name / amount / account errors
inline and disables submit, but a server 422 (JS disabled, or a race that
lets an invalid submit through) fell back to the top run-on banner
("X must be filled and Y and Z."). Make the existing inline error hints
server-aware so a failed submit shows the same per-field red text the
client path does, and drop the base-error banner — base only ever carries
the account requirement, which now renders beside the funding-accounts
list.
* fix(goals): blur projection chart under privacy mode
The projection chart's SVG axis labels and annotations (target, "$X short",
$200K/$400K ticks) rendered in cleartext while privacy mode blurred every
other number on the page. Tag the chart container `privacy-sensitive`, the
same wrapper-level treatment the net-worth and cashflow-sankey charts
already use, so it blurs with the rest.
* fix(goals): stop target-date input stretching when amount error shows
The target-amount / target-date row is a two-column grid. The amount
column carries its inline error <p> underneath, so when that error
appears the column grows and the default `items-stretch` makes the
sibling date input stretch to match — the date box visibly grew taller
than the amount box. Anchor the row with `items-start` so each input
keeps its natural height and the error just extends below its own column.
* fix(goals): make invalid submit announce errors instead of dead-ending
Review follow-ups:
- Swap the submit gate from the disabled attribute to aria-disabled: a
truly disabled default submit also blocks Enter-key implicit
submission, so an invalid form was a dead button with every inline
error still hidden. The button now stays clickable and lets
validateOnSubmit surface the errors; DS buttonish styles the
aria-disabled state (cursor-not-allowed + opacity-50). Side effect:
loading_button_controller submits also dim while busy, which reads as
an upgrade.
- Focus the first funding-account checkbox when accounts are the only
missing field (focus previously went nowhere).
- Drop the now-orphaned goals.goal_card.days_left_by locale key.
54 lines
2.7 KiB
Plaintext
54 lines
2.7 KiB
Plaintext
<div class="group relative bg-container rounded-xl shadow-border-xs hover:bg-container-hover transition-colors p-6 <%= "opacity-75" if goal.paused? || goal.archived? %>"
|
|
<% if filterable %> data-goals-filter-target="card"<% end %>
|
|
data-goal-name="<%= goal.name %>"
|
|
data-goal-status="<%= goal.display_status %>">
|
|
<div class="flex items-start gap-3">
|
|
<%= render Goals::AvatarComponent.new(goal: goal, size: "lg") %>
|
|
<div class="min-w-0 flex-1">
|
|
<%# Name owns its row at full width — the status pill moved to the meta
|
|
line below so it stops eating the title space on narrow cards. %>
|
|
<p class="text-base font-medium text-primary truncate">
|
|
<a href="<%= goal_path(goal) %>"
|
|
aria-label="<%= aria_label %>"
|
|
class="before:absolute before:inset-0 before:rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-alpha-black-100">
|
|
<%= goal.name %>
|
|
</a>
|
|
</p>
|
|
<div class="flex items-center gap-2 mt-0.5">
|
|
<%= render Goals::StatusPillComponent.new(goal: goal) %>
|
|
<% if secondary_line.present? %>
|
|
<p class="min-w-0 text-xs text-subdued truncate"><%= secondary_line %></p>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<%# shrink-0 keeps the ring at full size; the name block shrinks first. %>
|
|
<div class="shrink-0">
|
|
<%= render DS::ProgressRing.new(percent: progress_percent, tone: ring_tone) %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5">
|
|
<div class="flex items-baseline gap-1.5">
|
|
<span class="text-xl font-medium text-primary tabular-nums privacy-sensitive"><%= goal.current_balance_money.format(precision: 0) %></span>
|
|
<span class="text-xs text-subdued tabular-nums privacy-sensitive">/ <%= goal.target_amount_money.format(precision: 0) %></span>
|
|
</div>
|
|
<% if pace_line %>
|
|
<p class="text-xs text-subdued tabular-nums mt-1 privacy-sensitive"><%= pace_line %></p>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%# flex-wrap + gap so the account label and the footer line wrap onto
|
|
separate lines under a gap when cramped, instead of butting together
|
|
(the "1 accountcatch up" run-on at narrow card widths). %>
|
|
<div class="mt-4 flex flex-wrap items-center justify-between gap-x-3 gap-y-1">
|
|
<div class="flex items-center gap-2 min-w-0">
|
|
<%= render Goals::AccountStackComponent.new(accounts: linked_accounts, color_map: goal.account_color_map) %>
|
|
<span class="text-xs text-subdued whitespace-nowrap"><%= linked_accounts_count_label %></span>
|
|
</div>
|
|
<span class="text-xs text-subdued tabular-nums <%= "privacy-sensitive" if footer_has_money? %>">
|
|
<%= footer_line %><% if has_pending_pledge? %> · <%= t("goals.goal_card.pending_count", count: pending_pledges_count) %><% end %>
|
|
</span>
|
|
</div>
|
|
</div>
|