Enhance UI components and improve app memory management#36
Merged
kryptodrex merged 22 commits intodevelopfrom Mar 14, 2026
Merged
Enhance UI components and improve app memory management#36kryptodrex merged 22 commits intodevelopfrom
kryptodrex merged 22 commits intodevelopfrom
Conversation
Introduce a compact .btn-utility style for low‑emphasis/contextual actions and add a new 'utility' variant to Button props. Implement an optional successText prop that briefly replaces the button label for 2s after click (while still calling onClick), locking the button width to avoid layout shifts. Added local state, refs, timer cleanup, and a click handler to manage the transient success UI and merged inline styles to preserve width.
Add a settings button to the WelcomeScreen that opens the Settings modal. CSS updates position the button in the top-right of the welcome card (.welcome-card set to position: relative and .welcome-settings-btn positioned absolute). Import Settings, track showSettings state, render the button (with aria label) and include the <Settings isOpen={showSettings} onClose=... /> component.
Replace native action buttons with the shared Button component for generating and copying the encryption key (adds variant and successText). Simplify markup by removing the .encryption-key-display wrapper and delete its CSS rules; update the heading to "Your Encryption Key" and slightly reword the alert text for clarity. Import Button from shared and normalize onClick handlers.
Main: add quit-app and reopen-welcome-window ipc handlers and a welcomeWindowIdsPendingReopen set to avoid reopening the welcome window when a window requests a reopen. Introduce getDefaultPlanTransitionBounds to calculate centered plan window bounds with side gaps and use it as a fallback in budgetLoaded when no size is provided. Update welcome window close handling to respect pending-reopen IDs. Change DevTools toggle to target the focused window (fallbacks to main/welcome/first window). Preload: expose quitApp and reopenWelcomeWindow to renderer via contextBridge. App: remove automatic encryption setup check and FileStorageService usage; only show the encryption setup UI when explicitly requested from an active plan (forceSetupAgain && budgetData) and simplify related handlers. Types: add enabled? to RetirementElection and add typings for quitApp and reopenWelcomeWindow in ElectronAPI. These changes enable safer reopen/quit flows, better window sizing behavior during welcome->plan transitions, and simplify the encryption setup UX.
Introduce a demo launch flow with a DEMO_LAUNCH_DELAY_MS and demoLoading state, and combine loading+demoLoading into an isBusy flag to prevent concurrent actions. Move settings and demo controls into a new .welcome-header (CSS updated) using flex layout; make the demo button show a loading state and delay before calling createDemoBudget. Replace the standalone Try Demo large button with a small header action, update various buttons and recent-file interactions to respect isBusy, and tweak the welcome copy. These changes improve UX by preventing overlapping operations and providing feedback while the demo plan is prepared.
Introduce CSS custom properties for button spacing, font size and radius; unify layout (inline-flex, gap, line-height) and adjust selectors (use .btn .btn-icon modifiers). Add responsive variable overrides and convert size variants to use CSS vars. In Button.tsx add BUTTON_SIZE_STYLES and ICON_BUTTON_SIZE_STYLES, always include base 'btn' class and use 'btn-icon' as a modifier, and merge size styles into the inline style (with lockedWidth preserved). Also add .backup copies of the updated CSS and TSX files.
Introduce a suggested leftover-per-paycheck UI and logic to the setup wizard, including styling and responsive CSS. Replace hours-per-pay-period input with hours-per-week and compute hours per pay period using getPaychecksPerYear so hourly users are converted automatically based on pay frequency. Add automatic tax-rate estimation (federal, state, SS, Medicare) applied once when advancing from the tax step, with a flag to avoid reapplying. Update placeholders, helper text, and add an InfoBox to explain starter estimates. Minor copy tweaks for clarity throughout the wizard.
Introduce an accessible MetricCard component and make metric tiles in KeyMetrics clickable/keyboard-navigable (cursor, focus-visible, role/tabIndex, Enter/Space handling). Add navigation callbacks (onNavigateToTaxes/NetPay/Savings/Bills/Remaining) and guard clicks on glossary buttons. Compute and display effectiveTaxRate and remainingShareOfNet values. Update CSS (.metric-card-interactive) for hover/focus styling. Enhance PlanDashboard to support scrolling to a specific position within a tab (top or bottom): add TabScrollPosition type, pendingTabScroll state, scrollTabToPosition helper, and a double requestAnimationFrame effect to perform scrolling after tab activation. Extend openTabFromLink to accept scrollPosition and wire KeyMetrics to open tabs with appropriate scroll options. These changes improve keyboard accessibility and enable navigating directly to specific tab sections.
Introduce app-wide backup and cleanup features: add APP_STORAGE keys/constants and implement FileStorageService.getKnownPlanIds, clearAppMemory, exportAppData, and importAppData. Exports produce a JSON envelope with global preference keys while excluding plan-specific data (e.g. accounts, encryption fields) and stripping sensitive fields from the settings blob; imports validate the envelope and restore only allowed global keys. clearAppMemory removes all app-prefixed keys but preserves unrelated localStorage entries. Also update tests and LocalStorageMock (length and key) to cover plan ID discovery, export/import behavior, clearing app memory, and invalid backup handling.
Introduce a danger zone in Settings with UI and styles to back up, import, and reset local app memory. Adds CSS for the danger section and modal. New state and handlers (backingUp, backedUp, importing, resettingMemory, showResetConfirm) implement file export/import via window.electronAPI and FileStorageService, refresh settings and theme after import, reopen the welcome window, and quit the app after a confirmed reset. Keeps OS keychain entries intact (commented), and provides loading states and confirmations to prevent accidental data loss.
Add visual and functional improvements for retirement plans: new CSS for retirement-type badges (pre/post-tax), disabled item styling, and meta spacing. In TSX, import retirement helpers and use RETIREMENT_PLAN_OPTIONS for the plan select; derive display label with getRetirementPlanDisplayLabel. Add getAccountName helper, sort retirements to prioritize enabled items and by contribution totals, and exclude disabled elections from totals. Preserve/assign enabled state on save and add handleToggleRetirementEnabled plus an enable/disable action button. Misc: switch wording from “Paid” to “Saved”, rename section labels to “Plans”, and show source & tax-type badges in each retirement item.
Treat onboarding/setup plans as not-yet-saveable by detecting incomplete paySettings (salary/hourly) and clearing unsaved-change prompts until setup is finished. Ensure new retirement elections default to enabled (enabled !== false) and ignore elections with enabled === false in contribution calculations (pre-tax, post-tax, and calculateRetirementContributions), preventing disabled elections from affecting totals.
Introduce hintVisibleModes to ViewModeSelector to conditionally show hint text and update multiple components (BillsManager, LoansManager, PayBreakdown, SavingsManager, TaxBreakdown) to only show hints for 'paycheck' mode. Add a suggested leftover-per-paycheck calculation and UI to PaySettingsModal (imports getPaychecksPerYear, new suggestion block, and accompanying CSS). Make assorted UI/UX improvements: compact small buttons in PlanDashboard header/footer, move encryption status into footer, adjust PlanDashboard layout and responsive behavior, refine utility button styles, and improve WelcomeScreen accessibility for recent files (keyboard/focus handling and styles). Minor styling and markup cleanups across components to support these changes.
Extend FileStorageService tests to reject settings-export envelopes when importing/loading budgets and when chosen via open file dialog or relink picker (mocks window.electronAPI loadBudget/openFileDialog). Add retirement.utils tests to verify canonical labels for known plan types, trimmed custom labels and fallback for 'other', and to assert exported RETIREMENT_PLAN_OPTIONS values for UI selectors.
Add detection and UX for budget files moved/renamed on disk. Main changes:
- electron/main: add FS watch logic keyed by window to detect renames by inode/dev, IPC handler ('set-active-budget-file-path') and send 'budget-file-renamed' events to renderer; ensure watchers cleaned up on window close.
- electron/preload & types: expose setActiveBudgetFilePath and onBudgetFileRenamed to renderer.
- PlanDashboard: track missing/renamed active file, prevent saving to stale paths, register active path with main process, handle live rename updates, and show a relink modal to locate moved file. Add related CSS.
- WelcomeScreen: handle missing recent files with a relink modal to locate or remove entries. Add CSS and UI flows.
- FileStorageService: add relinkMovedBudgetFile, inspectBudgetFile, settings-backup detection, improved JSON vs legacy-encrypted parsing, legacy decryption prompt flow, and robust path verification when saving/loading; derive and persist plan name from file path.
- BudgetContext: derive plan name from file path, verify saved file path exists before saving (force Save As if missing), and sync plan name on load.
Overall this implements local rename detection, user-driven relinking of moved files, safer save/load handling for missing or legacy-encrypted files, and UI to surface these actions to users.
|
✅ Version Update Detected Version has been correctly bumped from |
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.
This pull request introduces a comprehensive refactor plan for centralizing shared logic and reducing code duplication across the application, as well as implementing the first steps of that plan in the Electron main process. The main changes include a detailed roadmap for extracting and consolidating utility functions, services, hooks, and shared UI patterns, and the addition of robust file rename detection logic for budget files in the Electron backend. These changes aim to improve maintainability, consistency, and correctness, particularly around file handling and financial calculations.
Refactor Roadmap and Planning
app_updates/Shared Logic Refactor.md, outlining prioritized tasks to extract and centralize reusable logic (e.g., financial calculations, file path helpers, CRUD hooks, dialog strategies) into shared modules with clear "done" criteria and phased execution plan.Electron Main Process Improvements
File Watch and Rename Detection:
BudgetFileWatchStatestructure and management functions to track file state per window.'set-active-budget-file-path'to register or clear watched files per window.Window and Application Behavior:
'reopen-welcome-window','quit-app').These foundational changes set the stage for the upcoming refactors described in the plan, with a particular focus on file safety, consistency, and maintainability.