Fix dashboard hydration and archive theming

This commit is contained in:
2026-03-23 23:08:18 -04:00
parent c852ad0d80
commit feb2f2c37e
25 changed files with 290 additions and 13 deletions

View File

@@ -0,0 +1,26 @@
## ADDED Requirements
### Requirement: User can switch between light and dark themes
The system SHALL allow the user to toggle between light and dark themes with a persistent preference.
#### Scenario: User toggles dark mode on
- **WHEN** the user activates the theme toggle while the app is in light mode
- **THEN** the system applies the dark theme and saves the preference for future visits
#### Scenario: User toggles dark mode off
- **WHEN** the user activates the theme toggle while the app is in dark mode
- **THEN** the system applies the light theme and saves the preference for future visits
### Requirement: Theme preference respects system defaults on first visit
The system SHALL use the user's system color scheme preference when no saved preference exists.
#### Scenario: No stored preference uses system theme
- **WHEN** the user opens the app for the first time without a saved theme preference
- **THEN** the system applies dark mode when the operating system prefers dark color schemes and light mode otherwise
### Requirement: Theme selection loads without a flash of the wrong theme
The system SHALL initialize the theme before the first visible paint so the page does not briefly render in the wrong theme.
#### Scenario: Initial paint matches saved theme
- **WHEN** the app loads and a saved theme preference exists
- **THEN** the document theme is applied before the page content is visibly rendered

View File

@@ -0,0 +1,12 @@
## ADDED Requirements
### Requirement: Expense tracking UI renders correctly in both themes
The system SHALL render the expense tracking workspace, history list, forms, and item states with readable contrast in both light and dark themes.
#### Scenario: Expense workspace renders in dark mode
- **WHEN** the user opens the expense tracking view while dark mode is active
- **THEN** the form card, history card, inputs, actions, and expense rows use dark-compatible colors and remain readable
#### Scenario: Expense workspace renders in light mode
- **WHEN** the user opens the expense tracking view while light mode is active
- **THEN** the form card, history card, inputs, actions, and expense rows use light-compatible colors and remain readable

View File

@@ -0,0 +1,12 @@
## ADDED Requirements
### Requirement: Monthly dashboard UI renders correctly in both themes
The system SHALL render dashboard sections, insight cards, category bars, stat tiles, and empty states with readable contrast in both light and dark themes.
#### Scenario: Dashboard renders in dark mode
- **WHEN** the user opens the dashboard while dark mode is active
- **THEN** the summary cards, comparison cards, progress bars, and empty states use dark-compatible colors and remain readable
#### Scenario: Dashboard renders in light mode
- **WHEN** the user opens the dashboard while light mode is active
- **THEN** the summary cards, comparison cards, progress bars, and empty states use light-compatible colors and remain readable

View File

@@ -0,0 +1,12 @@
## ADDED Requirements
### Requirement: Paycheck tracking UI renders correctly in both themes
The system SHALL render the paycheck tracking workspace, schedule panel, form, and list items with readable contrast in both light and dark themes.
#### Scenario: Paycheck workspace renders in dark mode
- **WHEN** the user opens the paycheck tracking view while dark mode is active
- **THEN** the schedule panel, form card, inputs, and paycheck rows use dark-compatible colors and remain readable
#### Scenario: Paycheck workspace renders in light mode
- **WHEN** the user opens the paycheck tracking view while light mode is active
- **THEN** the schedule panel, form card, inputs, and paycheck rows use light-compatible colors and remain readable

View File

@@ -21,5 +21,5 @@
## 5. Verification
- [ ] 5.1 Visually verify light and dark modes across the dashboard, add-expense, and income pages in the browser.
- [ ] 5.2 Verify that theme preference persists across page refreshes and that there is no flash of the wrong theme on load.
- [x] 5.1 Visually verify light and dark modes across the dashboard, add-expense, and income pages in the browser.
- [x] 5.2 Verify that theme preference persists across page refreshes and that there is no flash of the wrong theme on load.