docs: start milestone v2.0 UX Simplification & Design Rework

.planning/PROJECT.md

@@ -8,18 +8,24 @@ A self-hosted personal budget dashboard that replaces a manual spreadsheet workf
 
 Opening the app should feel like opening a beautifully designed personal spreadsheet — clean pastel colors, clear data layout, approachable and visually delightful. The UI IS the product.
 
+## Current Milestone: v2.0 UX Simplification & Design Rework
+
+**Goal:** Make the app intuitive and visually clean — template-driven budgeting with a sharp, minimal, pastel design system.
+
+**Target features:**
+- Design system overhaul — sharp edges, clear pastels, minimal whitespace-driven layout
+- Wizard-style template setup with pre-filled common items (rent, car insurance, groceries, etc.)
+- Category library with smart defaults and sensible pre-loaded amounts
+- Auto-created monthly budgets from template on first visit (no prompts)
+- Simplified budget view — add one-offs from category library directly (replaces quick-add page)
+- Dashboard = this month's budget at a glance (not chart overload)
+- Dashboard data fixes — spending/budget data correctly reflects user input
+
 ## Current State
 
 **Shipped:** v1.0 (UI/UX Overhaul) + prior foundation (auth, CRUD, templates, quick-add)
 
-The app has a complete visual overhaul:
-- OKLCH design system with two-tier category colors and semantic budget status tokens
-- PageShell, StatCard, SummaryStrip shared components for consistent page structure
-- Three chart types (expense donut, income bar, spend horizontal bar) with CSS variable theming
-- URL-based month navigation with MonthNavigator dropdown
-- Collapsible per-category dashboard sections with direction-aware diff and CSS animations
-- All 9 pages upgraded with consistent design, skeleton loading, and i18n
-- Auth pages redesigned with brand presence and OAuth icons
+The app has a visual overhaul but the UX is poor — too many disconnected concepts (categories, templates, budgets, quick-add), the design feels clunky with excessive rounding, and the dashboard doesn't clearly show budget data. v2.0 simplifies the mental model to two concepts: "my template" and "this month's budget."
 
 ## Requirements
 
@@ -53,13 +59,18 @@ The app has a complete visual overhaul:
 
 ### Active
 
-<!-- Next milestone scope. TBD. -->
+<!-- v2.0 scope — defined during milestone kickoff -->
 
-(No active requirements — next milestone not yet planned)
+- [ ] Design system: sharp edges, clear pastels, minimal layout
+- [ ] Wizard-style template setup with smart defaults
+- [ ] Category library with pre-loaded common items
+- [ ] Auto-created monthly budgets from template
+- [ ] Simplified budget view with inline add-from-library
+- [ ] Dashboard shows current month's budget clearly
+- [ ] Dashboard data correctly reflects entered spending
 
 ### Out of Scope
 
-- New backend features or data model changes — UI milestone complete, future milestones may add backend
 - Recurring transaction automation — future feature
 - Spending alerts or notifications — future feature
 - Trend charts over months — future feature
@@ -70,9 +81,11 @@ The app has a complete visual overhaul:
 
 ## Context
 
-v1.0 (UI/UX Overhaul) shipped a complete visual transformation across all 9 pages. The design system uses OKLCH color tokens with a two-tier approach (darker text colors for WCAG contrast, lighter fills for charts). PageShell provides consistent page headers. Three chart types replace the old pie chart and progress bars. Collapsible category sections give users drill-down capability on the dashboard. All pages have skeleton loading states and full i18n coverage.
+v1.0 shipped a visual overhaul but the UX remains problematic. The user model has too many disconnected concepts — categories, templates, budgets, and quick-add are all separate pages with unclear relationships. The design system has excessive rounding and colors that aren't truly pastel. The dashboard shows charts but doesn't clearly reflect budget data the user entered.
 
-Tech stack: Go 1.25 + React 19 + TypeScript + Tailwind CSS 4 + shadcn/ui + Recharts + PostgreSQL 16. Package manager: bun. Single Docker image via multi-stage build.
+v2.0 simplifies to two user-facing concepts: "my template" (recurring budget structure with smart defaults) and "this month's budget" (auto-created from template, track actuals, add one-offs from library). The design shifts to sharp, minimal, clean pastels.
+
+Tech stack: Go 1.25 + React 19 + TypeScript + Tailwind CSS 4 + shadcn/ui + Recharts + PostgreSQL 16. Package manager: bun. Single Docker image via multi-stage build. Backend changes are in scope for this milestone where needed to support auto-creation and template-driven flow.
 
 ## Constraints
 
@@ -100,6 +113,10 @@ Tech stack: Go 1.25 + React 19 + TypeScript + Tailwind CSS 4 + shadcn/ui + Recha
 | CategorySection controlled open/onOpenChange pattern | Parent owns state for smart expand defaults and month-change reset | ✓ Good |
 | Auth card accent pattern (border-t-4 + favicon logo) | Consistent brand presence without heavy custom design | ✓ Good |
 | Direction-aware diff for all 6 category types | Spending over when actual > budget; income/saving over when actual < budget | ✓ Good |
+| Simplify to 2 user concepts: template + monthly budget | Categories/templates/budgets/quick-add too disconnected; users don't understand the flow | — Pending |
+| Sharp minimal design with clear pastels | v1.0 rounded/clunky design doesn't match the "clean spreadsheet" vision | — Pending |
+| Auto-create budgets from template on month visit | Removes friction; template is the source of truth | — Pending |
+| Wizard-style template setup with smart defaults | First-run must be intuitive; pre-filled common items reduce setup time | — Pending |
 
 ## Evolution
 
@@ -119,4 +136,4 @@ This document evolves at phase transitions and milestone boundaries.
 4. Update Context with current state
 
 ---
-*Last updated: 2026-03-24 after v1.0 UI/UX Overhaul milestone completion*
+*Last updated: 2026-04-02 after v2.0 milestone kickoff*

.planning/STATE.md

@@ -1,36 +1,36 @@
 ---
 gsd_state_version: 1.0
-milestone: v1.0
-milestone_name: milestone
+milestone: v2.0
+milestone_name: UX Simplification & Design Rework
 status: planning
-stopped_at: Completed 04-03-PLAN.md
-last_updated: "2026-03-24T08:42:34.008Z"
-last_activity: 2026-03-24
+stopped_at: null
+last_updated: "2026-04-02T00:00:00.000Z"
+last_activity: 2026-04-02
 progress:
-  total_phases: 4
-  completed_phases: 4
-  total_plans: 10
-  completed_plans: 10
-  percent: 100
+  total_phases: 0
+  completed_phases: 0
+  total_plans: 0
+  completed_plans: 0
+  percent: 0
 ---
 
 # Project State
 
 ## Project Reference
 
-See: .planning/PROJECT.md (updated 2026-03-16)
+See: .planning/PROJECT.md (updated 2026-04-02)
 
-**Core value:** Users can see their full monthly financial picture at a glance — income, spending, and what's left — in a visually rich, easy-to-read dashboard.
-**Current focus:** Phase 3 — Collapsible Dashboard Sections
+**Core value:** Opening the app should feel like opening a beautifully designed personal spreadsheet — clean pastel colors, clear data layout, approachable and visually delightful. The UI IS the product.
+**Current focus:** Defining requirements for v2.0
 
 ## Current Position
 
-Phase: 04 of 4 (full app design consistency)
-Plan: Not started
-Status: Ready to plan
-Last activity: 2026-03-24
+Phase: Not started (defining requirements)
+Plan: —
+Status: Defining requirements
+Last activity: 2026-04-02 — Milestone v2.0 started
 
-Progress: [████████████████████] 5/5 plans (100%)
+Progress: [░░░░░░░░░░░░░░░░░░░░] 0/0 plans (0%)
 
 ## Performance Metrics
 
@@ -105,6 +105,6 @@ None yet.
 
 ## Session Continuity
 
-Last session: 2026-03-17T15:23:32.629Z
-Stopped at: Completed 04-03-PLAN.md
+Last session: 2026-04-02
+Stopped at: Milestone v2.0 kickoff — defining requirements
 Resume file: None