Merged
Conversation
Support a dedicated budget-file icon and refactor icon generation. Update package.json to point the budget file association to build/budget-file-icon. In scripts/generate-icons.js introduce generateIconSet(), add budget-icon-source.png handling to produce budget-file-icon.png/.icns/.ico, validate input buffers, improve error messages and logging, and fall back to copying the app icon set if the budget source is missing.
Refactor button visuals and usage across the dashboard. Removed legacy .encryption-status-btn and header-btn-primary rules and converted header button styles to use color-mix and theme variables for more consistent theming and improved hover/box-shadow effects (src/components/PlanDashboard/PlanDashboard.css). Switched the Save button in PlanDashboard from primary to secondary variant and cleaned up an unused commented Export PDF button (src/components/PlanDashboard/PlanDashboard.tsx). Updated shared button tokens: primary/secondary color/backgrounds, hover/active states, and added subtle shadows (src/components/_shared/controls/Button/Button.css). Increased borderRadius for small/xsmall button size presets (including icon buttons) from 0.25rem to 0.5rem to match the updated design system (src/components/_shared/controls/Button/Button.tsx).
Add tabViews.shared.css to consolidate common tab view layout, empty-state and account-section/header styles and responsive rules. Update multiple tab components (BillsManager, KeyMetrics, LoansManager, PayBreakdown, SavingsManager, TaxBreakdown) to import the shared stylesheet and add the standardized "tab-view" root class. Standardize empty-state variants (dashed/compact) and update LoansManager and SavingsManager to use the new modifiers. Rename AccountsModal container from .accounts-manager to .accounts-modal and update the Modal contentClassName. Add .field-error to the shared FormGroup.css and replace ExportModal error color tokens with unified alert variables. Remove duplicated button/form CSS from several component stylesheets to reduce redundancy and centralize styling. Files changed include creation of src/components/tabViews/tabViews.shared.css and edits to multiple .css and .tsx files across modals and tab views.
Add a new views.shared.css with .view-screen and .view-screen-card and update WelcomeScreen, SetupWizard and EncryptionSetup to use these shared layout classes (removes duplicated layout rules from those component CSS files). Replace many hardcoded color-mix/backdrop/box-shadow values across multiple component styles with new CSS theme variables (e.g. --shadow-elevated-shell, --shadow-accent-*, --surface-accent-subtle, --border-accent-soft, --focus-ring-accent, --overlay-backdrop) defined in index.css for consistent theming. Update modals, controls, workflow panels and form focus/hover styles to use the new tokens for more consistent shadows, borders and focus rings.
Replace hardcoded monospace font-family declarations with a single CSS variable (--font-mono) for consistency and easier maintenance. Added --font-mono to :root in index.css and updated sharedPathDisplay.css, KeyboardShortcutsModal.css, PayBreakdown.css, and TaxBreakdown.css to use var(--font-mono).
Add a shared .button-group rule to FormGroup.css (flex layout, gap, centered, wrap) and remove duplicate global .button-group rules from EncryptionSetup.css and WelcomeScreen.css. Component-specific styles are now scoped to .encryption-setup .button-group and .welcome-screen .button-group (margin, gap and mobile layout adjustments), reducing duplication and preventing style bleed between views. Also simplified mobile selectors and removed an unnecessary .btn width override.
Introduce a reusable PillBadge component (PillBadge.tsx, PillBadge.css, index.ts) and export it from the shared components index. Replace numerous ad-hoc badge spans and duplicated badge CSS across the app (BillsManager, LoansManager, SavingsManager, LoansManager, GlossaryModal, SetupWizard) with the new PillBadge and variant API (success, accent, info, warning, neutral, outline). Simplify AboutModal by using the shared Modal component (remove custom overlay/header/footer handling) and trim its CSS accordingly. Remove redundant badge styling rules from multiple .css files and consolidate badge presentation into the new component.
Add CSS rules to keep the modal header close button color consistent between light and dark themes. The button now uses --text-secondary for its color and preserves that color on hover (except when disabled), with a subtle background using color-mix(in srgb, var(--text-primary) 8%, transparent) and no scale transform. This prevents a harsh black-on-white appearance in light mode and ensures consistent hover behavior.
Introduce src/components/_shared/payEditorShared.css with shared UI styles for the pay editor. Adds leftover suggestion banner styles and a tax-line editor grid (headers, fields, responsive layout), including input focus and error states. These styles are intended for SetupWizard, PaySettingsModal and TaxBreakdown components.
Import shared pay editor styles, remove local .pay-settings-leftover-suggestion CSS, and rename the JSX classes to .leftover-suggestion / .leftover-suggestion-copy. Add a numeric check so the suggested leftover is only shown when parsed formattedSuggestedLeftover is greater than editMinLeftover. This consolidates styling into the shared stylesheet and prevents showing the suggestion when it falls below the minimum.
Move tax line editor styles into the shared _shared/payEditorShared.css and import that stylesheet in TaxBreakdown.tsx. Removed the local .tax-lines-* rules from TaxBreakdown.css so the component now relies on the shared pay editor styles, reducing duplication and making styling reusable across pay-related components. Files changed: TaxBreakdown.css (removed local rules), TaxBreakdown.tsx (added import).
Import shared payEditor styles and remove legacy .setup-* rules from SetupWizard.css. Update JSX to use new class names (leftover-suggestion, leftover-suggestion-copy, tax-lines-*, col-*, tax-line-*, tax-line-label-input, tax-line-error) and rename header/column classes. Add a numeric check so the suggested leftover only renders if the parsed leftover amount is greater than minLeftover. Overall this moves tax/leftover styling into a shared stylesheet and updates the component to match the new class structure and rendering logic.
Introduce a richer SectionItemCard component and styles, centralizing item layout and actions used by bills, loans, and savings. SectionItemCard.tsx now accepts title/subtitle/amount/amountLabel/badges/isPaused/onPauseToggle/onEdit/onDelete and renders Pause/Resume, Edit and Delete buttons plus a PAUSED overlay; SectionItemCard.css adds the new visual styles. BillsManager, LoansManager and SavingsManager components were updated to use SectionItemCard (removing duplicated per-view markup and many local CSS rules) and to wire pause/enable toggles through the shared API. Also added getRetirementContributionPreview and adjustments to retirement rendering to use the unified card layout and show contribution breakdowns.
Restore visible draggable area and adjust layout spacing. Update src/App.css to remove extra top padding, set .drag-bar background to transparent and opacity to 1 so the draggable region is visible/interactive. Update src/components/PlanDashboard/PlanDashboard.css to refine header and footer padding for improved alignment and spacing.
Introduce an .app-drag-region utility that enables -webkit-app-region: drag and marks common interactive elements as no-drag so controls remain usable. Apply the class to the dashboard, setup wizard, and welcome screen headers so those header areas can be used to drag the window (useful for Electron frameless windows).
Refactor CSS to use centralized design tokens and tighten selectors. Many RGBA color usages and box-shadows were replaced with CSS variables (added several tokens in index.css like --surface-*, --focus-ring-*, --border-accent-*, --text-header-muted, etc.), improving theme/dark-mode consistency. Removed several legacy .field-error and duplicated dark-mode alert rules in component styles. Introduced a new AccountsDeleteModal.css and import in AccountsModal.tsx, updated the delete button to use a dedicated class. Also renamed/targeted button/icon classes in PayBreakdown and other components to more specific class names and adjusted some selector specificity (e.g. .header-right > button). Small visual/token-driven tweaks to tabs, toggles, alerts, and other UI elements.
Shared stylings
Add a roundToCent utility and make number formatting/parsing locale-aware. Replace several uses of roundUpToCent with roundToCent in budget and savings calculations for standard rounding semantics, and update tests. Update PayBreakdown UI and styles: remove visual stage labels/arrows, allow Remaining to go negative (no longer clamped), add negative-remaining CSS and error alert when allocations exceed net pay, and display negative styling on the footer amount. Minor tweaks to waterfall logic and formatting. Overall: improved rounding behavior, better locale support, and clearer user feedback for over-allocated budgets.
Prevent unwanted text-transform on glossary terms by adding CSS classes and rendering unknown/disabled terms as a static span to preserve original casing. Update KeyMetrics titles to use uppercase literals where desired. Refactor SetupWizard: improve layout (flex container, scrollable content, fixed header/footer), initialize tax lines based on selected currency via getDefaultTaxLinesForCurrency, and introduce hasEditedTaxLines to avoid overwriting user edits when switching currency. Add handleCurrencyChange to apply sensible defaults (USD starter estimates vs neutral non-USD lines) and only auto-estimate tax rates for USD plans. Minor handlers now mark tax lines as edited when modified.
Enhance AccountsEditor UX and styling: add refs to scrollIntoView and focus the add-account name input when the add form is opened; change add-form toggle handling; move infoMessage rendering inside the accounts list; replace icon-only edit/delete buttons with accessible text variants and add dedicated delete styles (error color, hover mix); tweak account name layout to use inline-flex. Also update SetupWizard to use a simpler default account name ("Checking"), adjust copy, and enable the add-account toggle by passing showToggleButton (removed the previous subtitle). These changes improve accessibility, discoverability, and visual feedback for account actions.
Replace the inline plan-name/year editor with a dedicated modal. Introduces showPlanEditModal, draftYearSelection, and field-level error state (planEditNameError, planEditYearError). start/cancel/save handlers updated to open/close the modal, initialize/reset drafts, and run validation that enforces a dynamic max year (current year + 10). UI changes remove the old inline edit controls and add a Modal containing a name input, a year select (prev/current/next/custom) and an optional custom year input with validation and helper text.
Add an optional `enabled?: boolean` on Benefit and treat `enabled === false` as a paused/disabled benefit. Update BudgetContext to default new benefits to enabled, skip disabled benefits in budget calculations and pay breakdowns, and exclude them from totals and per-account sums. In BillsManager add isBenefitEnabled, toggle handler, pause UI props, and adjust sorting/aggregation to prioritize and ignore disabled benefits so paused benefits remain visible but excluded from calculations.
Import and use the InfoBox component instead of a plain paragraph for the encryption note to ensure consistent styling. Also update the encryption option label from "Use Generated Key (Recommended)" to "Use Auto-Generated Key (Recommended)" to clarify the wording.
Refactor and enhance pay breakdown UI and styles across KeyMetrics and PayBreakdown. - KeyMetrics: add new visual components and styles (km-breakdown-bar, km-bar-container, km-bar-segment, km-flow-summary-*) and replace the previous flow classes. Import and use calculateAnnualizedPayBreakdown to surface pre/post-tax deductions, compute percentages (with clamping), and render a compact breakdown bar plus a detailed money-flow summary list with visual tracks and conditional percent labels. - PayBreakdown: simplify and restyle the pay breakdown panel (flow-breakdown and flow-breakdown-header), move legend/header into the panel and guard percent calculations. Remove the older breakdown-bar markup in favor of a clearer header + visual flow section. - CSS: add new styles for the revamped breakdown visuals and legend; remove/replace previous bar styles to unify look and responsiveness. Overall this change improves visual clarity, adds pre/post-tax detail, and makes the breakdown components more consistent and responsive.
Rename and reorganize allocation edit UI and adjust layout/styles. CSS: comment out .flow-stage grid-template, switch visual-flow area to use flex + gap, rename .paybreakdown-account-edit-actions to .allocation-edit-actions, add flex behavior (flex-grow/gap) and responsive rules so edit buttons can stack and stretch. TSX: update header text from "Paycheck Flow Details" to "Gross to Net Breakdown", remove inline save/cancel buttons from the account line and instead render the Cancel/Save controls in the category actions row next to the + Add Item button (with the add button allowed to grow). These changes consolidate edit controls, improve responsiveness, and simplify the visual flow layout.
Add CSS to truncate long category names (.category-name-text / .category-name-static) and prevent badge shrinking. Introduce helpers isAutoCategory, getCategoryItemCount and navigateToCategorySource to DRY up logic for auto-generated categories (bills, benefits, retirement, loans, savings). Use the new helpers to display item count badges and unify navigation handling, and refactor category rendering into clearer blocks. Also tweak alert copy to remove the word "Remaining" for a simpler message.
Introduce a generic ViewModeOption type and make ViewModeSelector generic so it can accept custom mode strings. Add an optional options prop (with DEFAULT_OPTIONS fallback) and replace hardcoded buttons with a mapped list of option buttons. Preserve existing hint behavior but make hintVisibleModes typed to the generic mode type and keep reserveHintSpace logic intact.
Introduce buildKeyMetricsSegments util with types to generate bar segments and flow summary rows from annual metric inputs (handles zero gross, excludes zero-value segments, includes shortfall). Add SEGMENT_META for segment metadata and export relevant interfaces. Add Vitest unit tests covering normal, zero-exclusion, and zero-gross cases. Also add KeyMetricsBreakdownView type and keyMetricsBreakdownView setting to settings.ts.
Introduce alternative breakdown views for KeyMetrics: add a view toggle (ViewModeSelector) and persist selection to budget settings. Refactor segment building to use buildKeyMetricsSegments and compute flow/bar segments with minimum visible sizes. Add interactive pie chart rendering (SVG strokes, hover state) and legend interactivity. Update KeyMetrics.css with styles for the view toggle, pie chart, new segment colors/dots, and responsive layout changes.
Introduce a reusable Banner layout component (Banner.tsx, Banner.css, and index) and export it from the shared components index. Integrate the Banner into BillsManager, LoansManager, and SavingsManager to display an aggregated “Total … Across All Accounts” value (compute totals, round/format for display). Also includes a minor whitespace tweak in shared tab views CSS. The Banner uses semantic status/aria-live and is styled responsively.
UI/CSS: Tweak KeyMetrics card/grid sizing and spacing (increase min card width, center grid, adjust paddings, font sizes, gaps, and small spacing tweaks) to improve layout and responsiveness. Logic: Refactor key metrics calculations to: filter out disabled bills and contributions; add frequency-based savings contribution handling; split retirement savings by deduction source and pre/post-tax/paycheck vs account; include account-based retirement savings; compute a consolidated "billsAndDeductions" segment instead of separate pretax/posttax/bills; subtract paycheck retirement from pre/post-tax deduction amounts used in the bar. Rendering: Use annualFlexibleRemaining where appropriate for remaining metrics; compute stacked bar widths proportionally (normalizing to visible segments) and use that for stacked view rendering. Add new pie/segment color mapping for billsAndDeductions. Tests: Update keyMetricsSegments tests to expect the new 'billsAndDeductions' ordering and percentages.
23 tasks
|
✅ Version Update Detected Version has been correctly bumped from |
There was a problem hiding this comment.
Pull request overview
This PR merges the v0.3.3 release work into develop, introducing new user-facing UI/UX features (notably the Plan edit modal and a revamped Key Metrics breakdown), improved rounding/number-parsing utilities, and several infrastructure/build updates.
Changes:
- Added new shared UI surfaces/components (view wrappers, banners, pill badges, enhanced item cards) and applied them across multiple tabs and setup flows.
- Expanded money utilities (standard rounding + locale-aware format/parse) and introduced a Key Metrics segments builder with tests.
- Updated build/release tooling (icon generation, release notes extraction, version bump + dependency updates).
Reviewed changes
Copilot reviewed 81 out of 82 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| version | Bumps app version marker to 0.3.3. |
| src/utils/money.ts | Adds roundToCent, locale-aware formatting/parsing changes. |
| src/utils/money.test.ts | Adds tests for new rounding behavior and locale formatting changes. |
| src/utils/keyMetricsSegments.ts | New helper to compute Key Metrics bar segments and flow rows. |
| src/utils/keyMetricsSegments.test.ts | Tests for Key Metrics segments builder. |
| src/types/settings.ts | Adds persisted Key Metrics breakdown view setting type/field. |
| src/types/payroll.ts | Adds optional enabled flag to benefits. |
| src/services/budgetCalculations.ts | Skips disabled benefits during paycheck breakdown calculations. |
| src/index.css | Adds new theme tokens (mono font, shadows, surfaces, overlay vars). |
| src/contexts/BudgetContext.tsx | Uses new rounding + normalizes benefit enabled when adding. |
| src/components/views/views.shared.css | New shared full-screen view wrapper styles. |
| src/components/views/WelcomeScreen/WelcomeScreen.tsx | Adopts shared view wrapper + drag region. |
| src/components/views/WelcomeScreen/WelcomeScreen.css | Removes duplicated container styles; uses shared tokens. |
| src/components/views/SetupWizard/SetupWizard.tsx | Adds currency-aware tax defaults, shared view wrapper, UI refactors. |
| src/components/views/SetupWizard/SetupWizard.css | Refactors layout to use shared wrappers + new tokens. |
| src/components/views/EncryptionSetup/EncryptionSetup.tsx | Adopts shared view wrapper. |
| src/components/views/EncryptionSetup/EncryptionSetup.css | Removes duplicated container styles. |
| src/components/tabViews/tabViews.shared.css | New shared tab view + empty state + account section styles. |
| src/components/tabViews/TaxBreakdown/TaxBreakdown.tsx | Uses shared tab view wrapper + shared editor CSS. |
| src/components/tabViews/TaxBreakdown/TaxBreakdown.css | Consolidates shared styles; uses --font-mono. |
| src/components/tabViews/SavingsManager/SavingsManager.tsx | Refactors UI to SectionItemCard + totals banner; adds rounding preview helper. |
| src/components/tabViews/SavingsManager/SavingsManager.css | Removes duplicated empty-state/card styling, relies on shared styles. |
| src/components/tabViews/PayBreakdown/PayBreakdown.tsx | Refactors breakdown UI + editing actions; supports negative remaining display. |
| src/components/tabViews/PayBreakdown/PayBreakdown.css | Adds new flow container styling, improves category truncation, negative remaining styles. |
| src/components/tabViews/LoansManager/LoansManager.tsx | Refactors to SectionItemCard + totals banner + shared tab view wrapper. |
| src/components/tabViews/LoansManager/LoansManager.css | Removes duplicated shared styling; refines hover styling. |
| src/components/tabViews/KeyMetrics/KeyMetrics.tsx | Major Key Metrics redesign: segments builder, multi-view breakdown, persisted setting. |
| src/components/tabViews/KeyMetrics/KeyMetrics.css | New breakdown (bars/stacked/pie) styling + responsive updates. |
| src/components/tabViews/BillsManager/BillsManager.tsx | Refactors to SectionItemCard + totals banner; adds benefit pause/resume. |
| src/components/tabViews/BillsManager/BillsManager.css | Removes duplicated shared styling; keeps notes styling. |
| src/components/modals/SettingsModal/SettingsModal.tsx | Renames “App Memory Wipe” copy to “Reset App Settings”. |
| src/components/modals/PaySettingsModal/PaySettingsModal.tsx | Uses shared pay editor CSS and leftover-suggestion banner. |
| src/components/modals/PaySettingsModal/PaySettingsModal.css | Removes duplicated leftover-suggestion + field error styles. |
| src/components/modals/KeyboardShortcutsModal/KeyboardShortcutsModal.css | Uses --font-mono. |
| src/components/modals/GlossaryModal/GlossaryTerm.tsx | Preserves casing by wrapping unknown terms in a span. |
| src/components/modals/GlossaryModal/GlossaryTerm.css | Ensures glossary term casing is not uppercased by surrounding styles. |
| src/components/modals/GlossaryModal/GlossaryModal.tsx | Uses PillBadge for glossary category labels. |
| src/components/modals/GlossaryModal/GlossaryModal.css | Aligns border colors with new theme variables. |
| src/components/modals/FeedbackModal/FeedbackModal.css | Removes duplicated field-error styling. |
| src/components/modals/ExportModal/ExportModal.css | Switches to alert theme variables; removes field-error style. |
| src/components/modals/AccountsModal/AccountsModal.tsx | Renames modal class + extracts delete-modal CSS to separate file. |
| src/components/modals/AccountsModal/AccountsModal.css | Slims down to only modal sizing; removes extracted delete styles. |
| src/components/modals/AccountsModal/AccountsDeleteModal.css | New extracted stylesheet for delete confirmation UI. |
| src/components/modals/AboutModal/AboutModal.tsx | Migrates About modal to shared Modal component. |
| src/components/modals/AboutModal/AboutModal.css | Removes overlay/header/footer styles now handled by shared Modal. |
| src/components/_shared/workflows/EncryptionConfigPanel/EncryptionConfigPanel.tsx | Uses InfoBox and improves option label copy. |
| src/components/_shared/workflows/EncryptionConfigPanel/EncryptionConfigPanel.css | Uses new theme tokens for shadow/focus ring. |
| src/components/_shared/workflows/AccountsEditor/AccountsEditor.tsx | Reorders add-account UI, adds scroll/focus behavior, updates action buttons. |
| src/components/_shared/workflows/AccountsEditor/AccountsEditor.css | Uses new theme tokens; styles delete utility button. |
| src/components/_shared/sharedPathDisplay.css | Uses --font-mono. |
| src/components/_shared/payEditorShared.css | New shared styles for leftover suggestion + tax line editor. |
| src/components/_shared/layout/ViewModeSelector/ViewModeSelector.tsx | Generalizes selector to accept custom options. |
| src/components/_shared/layout/SectionItemCard/SectionItemCard.tsx | Redesigns card API (title/subtitle/badges/actions + paused state). |
| src/components/_shared/layout/SectionItemCard/SectionItemCard.css | Adds paused overlay + redesigned header/body/actions layout. |
| src/components/_shared/layout/Modal/Modal.css | Uses overlay token, raises z-index, opts out of drag regions, tweaks icon button styling. |
| src/components/_shared/layout/Banner/index.ts | Exposes new Banner component. |
| src/components/_shared/layout/Banner/Banner.tsx | New totals banner component. |
| src/components/_shared/layout/Banner/Banner.css | Styles Banner using new theme tokens. |
| src/components/_shared/index.ts | Exports new Banner + PillBadge. |
| src/components/_shared/feedback/Alert/Alert.css | Removes duplicated dark-mode overrides. |
| src/components/_shared/controls/Toggle/Toggle.css | Uses overlay token for thumb shadow. |
| src/components/_shared/controls/RadioGroup/RadioGroup.css | Uses focus ring token. |
| src/components/_shared/controls/PillBadge/index.ts | Exposes new PillBadge. |
| src/components/_shared/controls/PillBadge/PillBadge.tsx | New pill badge component + variants. |
| src/components/_shared/controls/PillBadge/PillBadge.css | Styles pill badge variants. |
| src/components/_shared/controls/InputWithPrefix/InputWithPrefix.css | Removes duplicated field-error styling. |
| src/components/_shared/controls/FormattedNumberInput/FormattedNumberInput.css | Removes duplicated field-error styling. |
| src/components/_shared/controls/FormGroup/FormGroup.css | Centralizes .field-error + restores shared .button-group. |
| src/components/_shared/controls/DateInput/DateInput.css | Uses focus ring and surface tokens; removes duplicated field-error style. |
| src/components/_shared/controls/Button/Button.tsx | Tweaks small/icon radius tokens. |
| src/components/_shared/controls/Button/Button.css | Adjusts primary/secondary styling to match new theme direction. |
| src/components/PlanDashboard/PlanTabs/TabPositionHandle.css | Uses new theme tokens. |
| src/components/PlanDashboard/PlanTabs/TabManagementModal.css | Uses new theme tokens. |
| src/components/PlanDashboard/PlanTabs/PlanTabs.css | Uses new theme tokens. |
| src/components/PlanDashboard/PlanDashboard.tsx | Replaces inline plan edit with modal + validation and year presets. |
| src/components/PlanDashboard/PlanDashboard.css | Updates header styling, reduces duplicated form/button styles. |
| src/App.css | Updates drag-region behavior and introduces .app-drag-region utility. |
| scripts/generate-icons.js | Adds budget-file icon generation with fallback behavior. |
| package.json | Bumps version, adds d3-sankey deps, updates build script, sets file association icon. |
| RELEASE_NOTES.md | Adds user-facing release notes for 0.3.3. |
| .github/workflows/release.yml | Improves release notes extraction to skip the header block. |
Comments suppressed due to low confidence (5)
src/components/tabViews/KeyMetrics/KeyMetrics.tsx:1
- The persisted setting type is
KeyMetricsBreakdownView = 'flow' | 'stacked' | 'pie'(insrc/types/settings.ts), but this UI uses'bars'instead of'flow'and then force-casts it. This can store a value ('bars') that is not part of the declared setting union, and it can also read an existing'flow'value that won’t match any render branch (bars/stacked/pie), resulting in the breakdown UI not rendering. Align the enum values (either use'flow'everywhere instead of'bars', or change the type and persisted values to'bars') and add a small migration mapping (flow -> bars) when reading older settings if needed.
src/components/tabViews/KeyMetrics/KeyMetrics.tsx:1 - The persisted setting type is
KeyMetricsBreakdownView = 'flow' | 'stacked' | 'pie'(insrc/types/settings.ts), but this UI uses'bars'instead of'flow'and then force-casts it. This can store a value ('bars') that is not part of the declared setting union, and it can also read an existing'flow'value that won’t match any render branch (bars/stacked/pie), resulting in the breakdown UI not rendering. Align the enum values (either use'flow'everywhere instead of'bars', or change the type and persisted values to'bars') and add a small migration mapping (flow -> bars) when reading older settings if needed.
src/components/views/SetupWizard/SetupWizard.tsx:1 - This compares numeric thresholds using
parseInt()on a formatted currency string after stripping non-digits. That breaks as soon as the formatted value includes decimals or grouping (e.g., "$1,000.50" becomes100050), causing incorrect “Suggested leftover” visibility. Compare using the underlying numeric suggested-leftover value (preferred), or parse using a locale-aware numeric parser and include cents correctly.
src/components/modals/PaySettingsModal/PaySettingsModal.tsx:1 - Same issue as SetupWizard: stripping non-digits from a formatted currency string and then
parseInt()will mis-handle decimals and thousands separators, producing incorrect comparisons and potentially showing/hiding the suggestion at the wrong times. Use the raw numeric suggested-leftover value for the comparison (or a proper locale-aware parse that preserves decimals).
src/utils/money.ts:1 - Adding
Number.EPSILONunconditionally biases rounding for negative amounts (it nudges toward zero), which can produce incorrect results when rounding negative values. A safer approach is to apply EPSILON with the value’s sign (or avoid EPSILON and use a decimal-safe strategy). Consider adding at least one negative-value test case to lock in correct behavior.
| "dev": "npm run sync-version && vite", | ||
| "dev:inspector": "npm run sync-version && OPEN_DEVTOOLS=true vite", | ||
| "build": "npx vite build", | ||
| "build": "npx vite build && npm run sync-version", |
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
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 pull request introduces several user-facing features, visual improvements, and infrastructure updates to the Paycheck Planner app. The most significant changes include a new modal for editing the plan name and year, enhancements to Key Metrics and UI consistency, improved icon generation for budget files, and updates to dependencies and build processes.
Major Features and UI Enhancements:
Visual and Theming Updates:
PlanDashboard.css. [1] [2] [3] [4] [5] [6] [7] [8] [9]Icon and File Association Improvements:
budget-file-icon) with fallback logic, and updated the app manifest to use this icon for.budgetfiles. [1] [2] [3]Build and Dependency Updates:
d3-sankeyand its type definitions to dependencies for improved charting, and updated the build process to ensure version syncing. [1] [2] [3]0.3.3inpackage.json.Release Process and Documentation:
RELEASE_NOTES.md.RELEASE_NOTES.mdwith a detailed, user-focused summary of all new features, improvements, and bug fixes for this release.