Repository navigation
Refactor Plan pages with shared HeroCard and PeriodStepper components - #3
Merged
Merged
Conversation
- Plan's masthead sits where every tab's does, with the calendar and the page's actions beside it and a full-width Recurring | Buckets switch under it (PlanTabs becomes PlanHeader). - Buckets and Income open on the same hero Recurring does: a shared HeroCard and Ribbon, with on-hand by bucket and monthly income by person. - The recurring chip rail no longer snaps "All" flush to the card edge. - Bucket activity no longer pops into the ledger after arrival: an absent `movements` param now defers to the saved preference on the server, so the first paint has the rows and the post-mount second navigation is gone. - Inline edit forms are inset inside their cards; list tiles, action order and small meta text match across Recurring, Buckets and Income. - New purchase: the currency symbol hugs the amount. Statement: a zero figure carries no "+". Categories: the "Bought" caption no longer clips. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019iNojndGyPD9Kt2Db6gCCf
- Activity, the map and the statement share a PeriodStepper on the square .icon-btn the calendar already used, replacing three hand-rolled steppers (two with inline SVG chevrons) that used the round "close" shape. - The Ledger title is 28px like every other tab's. - Recurring rows drop "needs confirming" from every confirm-by-hand rule and instead show a pending "To confirm" tag, linked to the Ledger, only on a rule with one of your charges actually waiting (counted per rule). - Help groups its topics into one card per section with hairline dividers, instead of a separate card per topic. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019iNojndGyPD9Kt2Db6gCCf
|
Important
This repository does not receive automatic reviews because it has fewer than 10 stars. ⚙️ Run configuration
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
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
2 participants
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.
This PR consolidates repeated UI patterns across the planning and analytics pages into reusable components, improving consistency and maintainability.
Summary
Extracted three new shared components to eliminate duplication:
Replaced the centered
PlanTabscomponent with a full-widthPlanHeaderthat integrates the Plan section navigation directly into the page masthead, improving layout consistency.Key Changes
New Components
HeroCard.svelte: Standardizes the headline statement across planning pages (overline, large figure, supporting line, optional content)Ribbon.svelte: Extracted from RecurringBreakdown, now reusable for any proportional breakdown visualizationPeriodStepper.svelte: Unified period navigation (Previous · label · Next) used by Activity, Map, Analytics, and Statement pagesRefactored Pages
PlanTabswithPlanHeaderthat includes the section toggle and calendar link in a full-width layoutHeroCardandRibboncomponents instead of inline markupHeroCardheadline andRibbonbreakdown by personHeroCardheadline with on-hand and lifetime saved figures, plus ribbon showing accruing bucketsPeriodStepperPeriodStepperUI Improvements
Implementation Details
PeriodSteppersupports both link-based navigation (map, statement) and handler-based (analytics)Ribboncomponent handles animation on mount and respects prefers-reduced-motionHeroCardaccepts optional icon, line snippet, and children for flexible contenthttps://claude.ai/code/session_019iNojndGyPD9Kt2Db6gCCf