feat(bracket): save on page exit + human-friendly cascade warnings#287
Merged
Conversation
Two related UX safety nets on the bracket page.
Save on page exit
-----------------
Adds a beforeunload + unmount listener that flushes the bracket to
/v1/bracket/submit via fetch keepalive when the user navigates away
with unsaved changes. Covers tab close, reload, external link,
back/forward AND internal Next.js route changes (Pools, Profile,
the drawer, etc.). Gated on authenticated + dirty + no in-flight
save, so anonymous users and clean brackets don't generate
spurious traffic. Payload is the same ~5-10KB JSON the 30s
autosave already POSTs; well under keepalive's 64KB cap.
Refs are used to bridge the latest bracket/isDirty/auth values into
the listener so the empty-deps useEffect can register once and
still see current state.
Human-friendly cascade warnings
-------------------------------
The previous render dumped engine codes at the user:
'annex_c_third_pool_incomplete FIFA Annex C routing requires
exactly 8 best-third picks (got 6).'
Tim spotted this and asked for plain English plus, when the user
sits on a later tab (R32 onward) with empty slots because an
earlier stage is incomplete, a banner pointing them back.
New CascadeWarnings component renders three things:
1. Contextual banner at the top of late tabs with a 'Go to
<prior stage>' gold-pill CTA when the cascade warnings'
origin is upstream of the current tab. Click jumps to that
tab via setTab.
2. Single plain-English summary line per distinct warning code
(collapses the 8 duplicate annex_c_third_pool_incomplete
lines to one).
3. A <details> with the friendly list so a curious user can
expand without us writing copy for every combo.
All engine codes mapped:
missing_group_prediction / incomplete_group_order
-> 'A group still needs every match predicted...'
missing_wildcard_pick / annex_c_third_pool_incomplete
-> 'The Top 8 3rd-placed teams stage needs all 8 picks before
the Round of 32 can fill in.'
annex_c_lookup_missing / annex_c_no_third_for_group_winner
-> 'Your Top 8 3rds combination is rare enough that FIFA's
Annex C lookup table doesn't cover it. Try swapping one of
the picks.'
team_not_in_group / duplicate_team_in_group
-> 'A group has a duplicated team. Re-pick that group's
matches to fix the ordering.'
winner_not_in_match
-> 'A knockout pick references a team that isn't in the
matchup any more. Re-pick the winner.'
withdrawn_team_advancing
-> 'A team in this matchup has withdrawn from the tournament.'
Unknown codes fall back to a generic 'Something upstream needs
picking before this stage can finish resolving.' line so a new
engine code never leaks raw at the user.
The old <details className="bracket-warnings"> markup is gone;
the CSS class is left in place in bracket.css for any legacy
selectors (no styled rules referenced it directly).
Tim 2026-06-05.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: Tim Thomas <0800tim@gmail.com>
0800tim
added a commit
that referenced
this pull request
Jun 4, 2026
Brings exit-save + human-friendly cascade warnings.
Auto-triage: GREEN — auto-triage clearRisk score: 0/100
No flags raised by the automated scanners. A human reviewer will still take a look. Labels applied: Posted by |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two related UX safety nets on the bracket page.
Save on page exit
beforeunload+ unmount listener that flushes the bracket viafetch(..., {keepalive: true})to/v1/bracket/submitwhen the user navigates away with unsaved changes. Covers tab close, reload, external link, back/forward AND internal Next.js route changes (Pools, Profile, the drawer). Gated on authenticated + dirty + no in-flight save. Payload is ~5-10KB JSON, well under keepalive's 64KB cap.Human-friendly cascade warnings
Previous render leaked engine codes at the user (
annex_c_third_pool_incomplete FIFA Annex C routing requires exactly 8 best-third picks (got 6).× 8). NewCascadeWarningscomponent:setTab.<details>with friendly list for curious users.All 10 engine codes mapped, unknown codes fall back to a generic line so future codes never leak raw.
🤖 Generated with Claude Code