chore: archive v1.0 phase directories
This commit is contained in:
@@ -0,0 +1,211 @@
|
||||
---
|
||||
phase: 04-full-app-design-consistency
|
||||
plan: 01
|
||||
type: execute
|
||||
wave: 1
|
||||
depends_on: []
|
||||
files_modified:
|
||||
- src/pages/LoginPage.tsx
|
||||
- src/pages/RegisterPage.tsx
|
||||
- src/i18n/en.json
|
||||
- src/i18n/de.json
|
||||
autonomous: true
|
||||
requirements: [UI-AUTH-01, UI-DESIGN-01]
|
||||
|
||||
must_haves:
|
||||
truths:
|
||||
- "Login page shows muted background with the card floating on top, app logo above title"
|
||||
- "Register page matches Login page design — same background, logo, card accent treatment"
|
||||
- "OAuth buttons (Google, GitHub) display provider SVG icons next to text labels"
|
||||
- "Auth subtitle text appears below the app title inside the card"
|
||||
- "Switching to German locale shows fully translated auth page text"
|
||||
artifacts:
|
||||
- path: "src/pages/LoginPage.tsx"
|
||||
provides: "Redesigned login page with muted bg, logo, card accent, OAuth icons"
|
||||
contains: "bg-muted"
|
||||
- path: "src/pages/RegisterPage.tsx"
|
||||
provides: "Redesigned register page matching login design"
|
||||
contains: "bg-muted"
|
||||
- path: "src/i18n/en.json"
|
||||
provides: "Auth subtitle i18n keys"
|
||||
contains: "auth.loginSubtitle"
|
||||
- path: "src/i18n/de.json"
|
||||
provides: "German auth subtitle translations"
|
||||
contains: "auth.loginSubtitle"
|
||||
key_links:
|
||||
- from: "src/pages/LoginPage.tsx"
|
||||
to: "/favicon.svg"
|
||||
via: "img src for app logo"
|
||||
pattern: 'src="/favicon.svg"'
|
||||
- from: "src/pages/RegisterPage.tsx"
|
||||
to: "/favicon.svg"
|
||||
via: "img src for app logo"
|
||||
pattern: 'src="/favicon.svg"'
|
||||
---
|
||||
|
||||
<objective>
|
||||
Redesign the Login and Register pages with brand presence and visual polish matching the established design system.
|
||||
|
||||
Purpose: Auth pages are the first impression of the app. Currently they use a plain `bg-background` with a bare card. This plan upgrades them to use a muted background, app logo, card accent styling, and provider SVG icons on OAuth buttons -- establishing visual consistency from the very first screen.
|
||||
|
||||
Output: Redesigned LoginPage.tsx, RegisterPage.tsx, and new i18n keys for auth subtitles.
|
||||
</objective>
|
||||
|
||||
<execution_context>
|
||||
@/home/jlmak/.claude/get-shit-done/workflows/execute-plan.md
|
||||
@/home/jlmak/.claude/get-shit-done/templates/summary.md
|
||||
</execution_context>
|
||||
|
||||
<context>
|
||||
@.planning/PROJECT.md
|
||||
@.planning/ROADMAP.md
|
||||
@.planning/STATE.md
|
||||
@.planning/phases/04-full-app-design-consistency/04-CONTEXT.md
|
||||
@.planning/phases/04-full-app-design-consistency/04-RESEARCH.md
|
||||
|
||||
<interfaces>
|
||||
<!-- PageShell is NOT used here -- auth pages are standalone, outside AppLayout -->
|
||||
|
||||
From src/pages/LoginPage.tsx (current structure to modify):
|
||||
- Root: `<div className="flex min-h-screen items-center justify-center bg-background p-4">`
|
||||
- Card: `<Card className="w-full max-w-sm">`
|
||||
- Has OAuth buttons for Google and GitHub (text-only, no icons)
|
||||
- Has Separator with "Or continue with" text
|
||||
|
||||
From src/pages/RegisterPage.tsx (current structure to modify):
|
||||
- Same root div pattern as LoginPage
|
||||
- No OAuth buttons (only email/password form)
|
||||
- No Separator
|
||||
|
||||
From src/i18n/en.json (existing auth keys):
|
||||
```json
|
||||
"auth": {
|
||||
"login": "Login",
|
||||
"register": "Register",
|
||||
"email": "Email",
|
||||
"password": "Password",
|
||||
"displayName": "Display Name",
|
||||
"noAccount": "Don't have an account?",
|
||||
"hasAccount": "Already have an account?",
|
||||
"orContinueWith": "Or continue with"
|
||||
}
|
||||
```
|
||||
|
||||
Logo asset: `/public/favicon.svg` -- stylized lightning-bolt SVG in purple (#863bff). Use via `<img src="/favicon.svg">`.
|
||||
</interfaces>
|
||||
</context>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 1: Redesign LoginPage with brand presence and OAuth icons</name>
|
||||
<files>src/pages/LoginPage.tsx, src/i18n/en.json, src/i18n/de.json</files>
|
||||
<action>
|
||||
Modify LoginPage.tsx:
|
||||
|
||||
1. **Background:** Change root div className from `bg-background` to `bg-muted/60`.
|
||||
|
||||
2. **Card accent:** Add `border-t-4 border-t-primary shadow-lg` to the Card className.
|
||||
|
||||
3. **App logo:** Inside CardHeader, above the CardTitle, add:
|
||||
```tsx
|
||||
<img src="/favicon.svg" alt="" className="mx-auto mb-3 size-10" aria-hidden="true" />
|
||||
```
|
||||
|
||||
4. **Subtitle:** Below the CardTitle, add:
|
||||
```tsx
|
||||
<p className="text-sm text-muted-foreground">{t("auth.loginSubtitle")}</p>
|
||||
```
|
||||
|
||||
5. **OAuth provider SVG icons:** Replace the plain text-only Google and GitHub buttons with inline SVG icons. Add a small (size-4) SVG before the text label in each button:
|
||||
|
||||
For Google button, add before "Google" text:
|
||||
```tsx
|
||||
<svg className="size-4" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z" fill="#4285F4"/>
|
||||
<path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
|
||||
<path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
|
||||
<path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
|
||||
</svg>
|
||||
```
|
||||
|
||||
For GitHub button, add before "GitHub" text:
|
||||
```tsx
|
||||
<svg className="size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
|
||||
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2z"/>
|
||||
</svg>
|
||||
```
|
||||
|
||||
Add `gap-2` to each Button's className to space the icon and text. The buttons already have `className="flex-1"` -- add `gap-2` via the className string.
|
||||
|
||||
6. **i18n keys:** Add to en.json inside the "auth" object:
|
||||
- `"loginSubtitle": "Sign in to your account"`
|
||||
- `"registerSubtitle": "Create a new account"`
|
||||
|
||||
Add to de.json inside the "auth" object:
|
||||
- `"loginSubtitle": "Melde dich bei deinem Konto an"`
|
||||
- `"registerSubtitle": "Erstelle ein neues Konto"`
|
||||
|
||||
IMPORTANT: Update both en.json and de.json atomically in this task. Do not leave any raw i18n key strings.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build</automated>
|
||||
</verify>
|
||||
<done>LoginPage shows muted/60 background, primary-colored top border on card, favicon.svg logo above title, "Sign in to your account" subtitle, Google SVG icon + GitHub SVG icon on OAuth buttons. Both en.json and de.json have the new auth subtitle keys.</done>
|
||||
</task>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 2: Redesign RegisterPage to match LoginPage treatment</name>
|
||||
<files>src/pages/RegisterPage.tsx</files>
|
||||
<action>
|
||||
Modify RegisterPage.tsx to match the LoginPage design established in Task 1:
|
||||
|
||||
1. **Background:** Change root div className from `bg-background` to `bg-muted/60`.
|
||||
|
||||
2. **Card accent:** Add `border-t-4 border-t-primary shadow-lg` to the Card className.
|
||||
|
||||
3. **App logo:** Inside CardHeader, above the CardTitle, add:
|
||||
```tsx
|
||||
<img src="/favicon.svg" alt="" className="mx-auto mb-3 size-10" aria-hidden="true" />
|
||||
```
|
||||
|
||||
4. **Subtitle:** Below the CardTitle, add:
|
||||
```tsx
|
||||
<p className="text-sm text-muted-foreground">{t("auth.registerSubtitle")}</p>
|
||||
```
|
||||
The i18n key `auth.registerSubtitle` was already added in Task 1.
|
||||
|
||||
5. **CardHeader padding:** Add `pb-4` to CardHeader className to match LoginPage spacing: `className="text-center pb-4"`.
|
||||
|
||||
Also apply `pb-4` to LoginPage's CardHeader if not already done in Task 1 (add `className="text-center pb-4"`).
|
||||
|
||||
Do NOT add OAuth buttons to RegisterPage -- it only has email/password registration. The existing "Already have an account?" link stays as-is.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build</automated>
|
||||
</verify>
|
||||
<done>RegisterPage shows same muted/60 background, same card accent (border-t-4 primary, shadow-lg), same favicon logo, and register-specific subtitle. Visual parity with LoginPage minus OAuth buttons.</done>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<verification>
|
||||
- `bun run build` compiles without TypeScript errors
|
||||
- `grep -c "bg-background" src/pages/LoginPage.tsx src/pages/RegisterPage.tsx` returns 0 for both files (old pattern fully replaced)
|
||||
- `grep -c "bg-muted" src/pages/LoginPage.tsx src/pages/RegisterPage.tsx` returns 1 for each (new pattern applied)
|
||||
- `grep "loginSubtitle" src/i18n/en.json src/i18n/de.json` returns matches in both files
|
||||
- `grep "registerSubtitle" src/i18n/en.json src/i18n/de.json` returns matches in both files
|
||||
</verification>
|
||||
|
||||
<success_criteria>
|
||||
- Both auth pages use `bg-muted/60` background instead of `bg-background`
|
||||
- Both auth pages show the app logo (`favicon.svg`) above the title
|
||||
- Both auth pages have a card with `border-t-4 border-t-primary shadow-lg`
|
||||
- LoginPage OAuth buttons show Google and GitHub SVG icons
|
||||
- Both en.json and de.json have `auth.loginSubtitle` and `auth.registerSubtitle` keys
|
||||
- `bun run build` passes
|
||||
</success_criteria>
|
||||
|
||||
<output>
|
||||
After completion, create `.planning/phases/04-full-app-design-consistency/04-01-SUMMARY.md`
|
||||
</output>
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
phase: 04-full-app-design-consistency
|
||||
plan: 01
|
||||
subsystem: ui
|
||||
tags: [react, tailwind, i18n, auth, shadcn]
|
||||
|
||||
# Dependency graph
|
||||
requires:
|
||||
- phase: 01-foundation
|
||||
provides: auth pages (LoginPage.tsx, RegisterPage.tsx) and i18n setup
|
||||
provides:
|
||||
- Redesigned LoginPage with muted background, primary-accent card, app logo, subtitle, and Google/GitHub SVG icons
|
||||
- Redesigned RegisterPage matching LoginPage visual treatment
|
||||
- auth.loginSubtitle and auth.registerSubtitle i18n keys in en.json and de.json
|
||||
affects: [04-02-PLAN, 04-03-PLAN]
|
||||
|
||||
# Tech tracking
|
||||
tech-stack:
|
||||
added: []
|
||||
patterns:
|
||||
- Auth pages use bg-muted/60 background (not bg-background) to create depth
|
||||
- Card accent pattern: border-t-4 border-t-primary shadow-lg for visual anchoring
|
||||
- App logo (favicon.svg) above CardTitle with mx-auto mb-3 size-10 for brand presence
|
||||
- Inline SVG provider icons (no external icon library) for OAuth buttons with gap-2 spacing
|
||||
|
||||
key-files:
|
||||
created: []
|
||||
modified:
|
||||
- src/pages/LoginPage.tsx
|
||||
- src/pages/RegisterPage.tsx
|
||||
- src/i18n/en.json
|
||||
- src/i18n/de.json
|
||||
|
||||
key-decisions:
|
||||
- "Inline SVG paths used for Google and GitHub icons — avoids dependency on external icon library while keeping icons fully styled"
|
||||
- "auth.registerSubtitle i18n key added in Task 1 (same commit as loginSubtitle) for atomicity, then consumed in Task 2"
|
||||
|
||||
patterns-established:
|
||||
- "Auth card accent: border-t-4 border-t-primary shadow-lg on Card"
|
||||
- "Auth background: bg-muted/60 on root div"
|
||||
- "App logo placement: img[src=/favicon.svg] inside CardHeader above CardTitle"
|
||||
|
||||
requirements-completed: [UI-AUTH-01, UI-DESIGN-01]
|
||||
|
||||
# Metrics
|
||||
duration: 2min
|
||||
completed: 2026-03-17
|
||||
---
|
||||
|
||||
# Phase 4 Plan 01: Auth Page Redesign Summary
|
||||
|
||||
**LoginPage and RegisterPage redesigned with muted background, primary-accent card border, favicon logo, subtitle text, and inline SVG OAuth provider icons**
|
||||
|
||||
## Performance
|
||||
|
||||
- **Duration:** 2 min
|
||||
- **Started:** 2026-03-17T15:08:11Z
|
||||
- **Completed:** 2026-03-17T15:10:30Z
|
||||
- **Tasks:** 2
|
||||
- **Files modified:** 4
|
||||
|
||||
## Accomplishments
|
||||
- Both auth pages now use `bg-muted/60` background for visual depth instead of flat `bg-background`
|
||||
- Card accent (`border-t-4 border-t-primary shadow-lg`) applied consistently on both pages
|
||||
- `favicon.svg` app logo placed above the CardTitle for brand presence on first impression
|
||||
- Google and GitHub OAuth buttons on LoginPage now show inline SVG provider icons with `gap-2` spacing
|
||||
- `auth.loginSubtitle` and `auth.registerSubtitle` i18n keys added to both `en.json` and `de.json`
|
||||
|
||||
## Task Commits
|
||||
|
||||
Each task was committed atomically:
|
||||
|
||||
1. **Task 1: Redesign LoginPage with brand presence and OAuth icons** - `36d068e` (feat)
|
||||
2. **Task 2: Redesign RegisterPage to match LoginPage treatment** - `0ff9939` (feat)
|
||||
|
||||
**Plan metadata:** (docs commit — see below)
|
||||
|
||||
## Files Created/Modified
|
||||
- `src/pages/LoginPage.tsx` - Redesigned with muted bg, card accent, logo, subtitle, SVG OAuth icons
|
||||
- `src/pages/RegisterPage.tsx` - Redesigned to match LoginPage visual treatment, no OAuth buttons
|
||||
- `src/i18n/en.json` - Added auth.loginSubtitle and auth.registerSubtitle keys
|
||||
- `src/i18n/de.json` - Added German translations for both new auth subtitle keys
|
||||
|
||||
## Decisions Made
|
||||
- Inline SVG paths used for Google and GitHub icons — avoids pulling in an external icon library while keeping icons crisp at any scale and fully styled via Tailwind
|
||||
- `auth.registerSubtitle` key was added in Task 1 alongside `loginSubtitle` for atomicity, even though it's only consumed by RegisterPage in Task 2 — this matches the plan's instruction to "update both en.json and de.json atomically in this task"
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
None - plan executed exactly as written.
|
||||
|
||||
## Issues Encountered
|
||||
|
||||
None - all steps completed cleanly, `bun run build` passed after each task.
|
||||
|
||||
## User Setup Required
|
||||
|
||||
None - no external service configuration required.
|
||||
|
||||
## Next Phase Readiness
|
||||
- Auth page visual treatment is complete; 04-02 and 04-03 plans can build on this established design pattern
|
||||
- The card accent pattern (border-t-4 border-t-primary) and muted background are now documented for potential reuse in other full-page forms
|
||||
|
||||
## Self-Check: PASSED
|
||||
|
||||
- FOUND: src/pages/LoginPage.tsx
|
||||
- FOUND: src/pages/RegisterPage.tsx
|
||||
- FOUND: src/i18n/en.json
|
||||
- FOUND: src/i18n/de.json
|
||||
- FOUND: 04-01-SUMMARY.md
|
||||
- FOUND commit: 36d068e (Task 1)
|
||||
- FOUND commit: 0ff9939 (Task 2)
|
||||
|
||||
---
|
||||
*Phase: 04-full-app-design-consistency*
|
||||
*Completed: 2026-03-17*
|
||||
@@ -0,0 +1,405 @@
|
||||
---
|
||||
phase: 04-full-app-design-consistency
|
||||
plan: 02
|
||||
type: execute
|
||||
wave: 2
|
||||
depends_on: [04-01]
|
||||
files_modified:
|
||||
- src/pages/CategoriesPage.tsx
|
||||
- src/pages/TemplatePage.tsx
|
||||
- src/pages/QuickAddPage.tsx
|
||||
- src/pages/SettingsPage.tsx
|
||||
- src/i18n/en.json
|
||||
- src/i18n/de.json
|
||||
autonomous: true
|
||||
requirements: [UI-CATEGORIES-01, UI-TEMPLATE-01, UI-QUICKADD-01, UI-SETTINGS-01, UI-DESIGN-01]
|
||||
|
||||
must_haves:
|
||||
truths:
|
||||
- "Categories page uses PageShell for header with title and Add Category button"
|
||||
- "Categories page shows category group headers with left-border accent styling"
|
||||
- "Categories page shows skeleton loading state instead of blank screen"
|
||||
- "Template page uses PageShell with inline-editable name and Add Item button"
|
||||
- "Template page shows category group headers with left-border accent styling"
|
||||
- "QuickAdd page uses PageShell for header"
|
||||
- "QuickAdd page shows skeleton loading state instead of blank screen"
|
||||
- "Settings page uses PageShell with no duplicate heading"
|
||||
- "Settings page shows skeleton loading state instead of blank screen"
|
||||
- "German locale shows all text translated on all four pages"
|
||||
artifacts:
|
||||
- path: "src/pages/CategoriesPage.tsx"
|
||||
provides: "PageShell adoption, skeleton, group header upgrade"
|
||||
contains: "PageShell"
|
||||
- path: "src/pages/TemplatePage.tsx"
|
||||
provides: "PageShell adoption, skeleton, group header upgrade"
|
||||
contains: "PageShell"
|
||||
- path: "src/pages/QuickAddPage.tsx"
|
||||
provides: "PageShell adoption, skeleton"
|
||||
contains: "PageShell"
|
||||
- path: "src/pages/SettingsPage.tsx"
|
||||
provides: "PageShell adoption, skeleton, no double heading"
|
||||
contains: "PageShell"
|
||||
key_links:
|
||||
- from: "src/pages/CategoriesPage.tsx"
|
||||
to: "src/components/shared/PageShell.tsx"
|
||||
via: "import and render"
|
||||
pattern: 'import.*PageShell.*from.*shared/PageShell'
|
||||
- from: "src/pages/SettingsPage.tsx"
|
||||
to: "src/components/shared/PageShell.tsx"
|
||||
via: "import and render — replacing redundant h1"
|
||||
pattern: 'import.*PageShell.*from.*shared/PageShell'
|
||||
---
|
||||
|
||||
<objective>
|
||||
Apply PageShell, skeleton loading states, and group header upgrades to the four CRUD/settings pages (Categories, Template, QuickAdd, Settings).
|
||||
|
||||
Purpose: These four authenticated pages currently use inline `<h1>` + action div headers, return `null` while loading, and use small-dot group headers. This plan upgrades them to match the dashboard's design language -- consistent headers via PageShell, skeleton loading placeholders, and left-border accent group headers.
|
||||
|
||||
Output: Four updated page components with consistent design system application, plus new i18n keys for page descriptions.
|
||||
</objective>
|
||||
|
||||
<execution_context>
|
||||
@/home/jlmak/.claude/get-shit-done/workflows/execute-plan.md
|
||||
@/home/jlmak/.claude/get-shit-done/templates/summary.md
|
||||
</execution_context>
|
||||
|
||||
<context>
|
||||
@.planning/PROJECT.md
|
||||
@.planning/ROADMAP.md
|
||||
@.planning/STATE.md
|
||||
@.planning/phases/04-full-app-design-consistency/04-CONTEXT.md
|
||||
@.planning/phases/04-full-app-design-consistency/04-RESEARCH.md
|
||||
|
||||
<interfaces>
|
||||
From src/components/shared/PageShell.tsx:
|
||||
```tsx
|
||||
interface PageShellProps {
|
||||
title: string
|
||||
description?: string
|
||||
action?: React.ReactNode
|
||||
children: React.ReactNode
|
||||
}
|
||||
export function PageShell({ title, description, action, children }: PageShellProps)
|
||||
```
|
||||
|
||||
From src/components/ui/skeleton.tsx:
|
||||
```tsx
|
||||
// Skeleton primitive -- use for building page-specific loading states
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
// Usage: <Skeleton className="h-4 w-32" />
|
||||
```
|
||||
|
||||
From src/lib/palette.ts:
|
||||
```tsx
|
||||
export const categoryColors: Record<CategoryType, string>
|
||||
// Maps category type to CSS variable string like "var(--color-income)"
|
||||
```
|
||||
|
||||
Group header upgrade pattern (from RESEARCH.md):
|
||||
```tsx
|
||||
// Replace plain dot headers with left-border accent
|
||||
<div
|
||||
className="mb-2 flex items-center gap-3 rounded-sm border-l-4 bg-muted/30 px-3 py-2"
|
||||
style={{ borderLeftColor: categoryColors[type] }}
|
||||
>
|
||||
<span className="text-sm font-semibold">{t(`categories.types.${type}`)}</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
Current pattern in all CRUD pages to replace:
|
||||
```tsx
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<div className="size-3 rounded-full" style={{ backgroundColor: categoryColors[type] }} />
|
||||
<h2 className="text-sm font-medium text-muted-foreground">{t(`categories.types.${type}`)}</h2>
|
||||
</div>
|
||||
```
|
||||
</interfaces>
|
||||
</context>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 1: Upgrade CategoriesPage and TemplatePage with PageShell, skeletons, and group headers</name>
|
||||
<files>src/pages/CategoriesPage.tsx, src/pages/TemplatePage.tsx, src/i18n/en.json, src/i18n/de.json</files>
|
||||
<action>
|
||||
**CategoriesPage.tsx changes:**
|
||||
|
||||
1. **Import PageShell:** Add `import { PageShell } from "@/components/shared/PageShell"` and `import { Skeleton } from "@/components/ui/skeleton"`.
|
||||
|
||||
2. **Replace header:** Remove the `<div className="mb-6 flex items-center justify-between">` block containing the `<h1>` and `<Button>`. Wrap the entire return content in:
|
||||
```tsx
|
||||
<PageShell
|
||||
title={t("categories.title")}
|
||||
action={
|
||||
<Button onClick={openCreate} size="sm">
|
||||
<Plus className="mr-1 size-4" />
|
||||
{t("categories.add")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
{/* existing content (empty state check + grouped sections) */}
|
||||
</PageShell>
|
||||
```
|
||||
|
||||
3. **Skeleton loading:** Replace `if (loading) return null` with:
|
||||
```tsx
|
||||
if (loading) return (
|
||||
<PageShell title={t("categories.title")}>
|
||||
<div className="space-y-6">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="space-y-2">
|
||||
<div className="flex items-center gap-3 rounded-sm border-l-4 border-muted bg-muted/30 px-3 py-2">
|
||||
<Skeleton className="h-4 w-28" />
|
||||
</div>
|
||||
{[1, 2].map((j) => (
|
||||
<div key={j} className="flex items-center gap-4 px-4 py-2.5 border-b border-border">
|
||||
<Skeleton className="h-4 w-36" />
|
||||
<Skeleton className="h-5 w-16 rounded-full" />
|
||||
<Skeleton className="ml-auto h-7 w-7 rounded-md" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
```
|
||||
|
||||
4. **Group header upgrade:** Replace the plain dot group header pattern in the `grouped.map` with the left-border accent pattern:
|
||||
```tsx
|
||||
<div
|
||||
className="mb-2 flex items-center gap-3 rounded-sm border-l-4 bg-muted/30 px-3 py-2"
|
||||
style={{ borderLeftColor: categoryColors[type] }}
|
||||
>
|
||||
<span className="text-sm font-semibold">{t(`categories.types.${type}`)}</span>
|
||||
</div>
|
||||
```
|
||||
Remove the old `<div className="mb-2 flex items-center gap-2">` block with the `size-3 rounded-full` dot and `<h2>`.
|
||||
|
||||
**TemplatePage.tsx changes:**
|
||||
|
||||
1. **Import PageShell and Skeleton:** Same imports as CategoriesPage.
|
||||
|
||||
2. **Replace header:** The TemplatePage header has an inline-editable `TemplateName` component. Wrap with PageShell, putting TemplateName as the title area. Since PageShell accepts a `title` string but TemplateName is a component, use PageShell differently here:
|
||||
|
||||
Instead of wrapping with PageShell using `title` prop, replace the header div with PageShell but pass the template name as a plain string title when NOT editing. Actually, the TemplateName component handles its own editing state inline. The cleanest approach: keep the TemplateName component but wrap the page content differently.
|
||||
|
||||
Replace the entire page structure:
|
||||
```tsx
|
||||
<div>
|
||||
{/* Header */}
|
||||
<div className="mb-6 flex items-center justify-between gap-4">
|
||||
<TemplateName ... />
|
||||
<Button ...>...</Button>
|
||||
</div>
|
||||
...
|
||||
</div>
|
||||
```
|
||||
|
||||
With:
|
||||
```tsx
|
||||
<PageShell
|
||||
title={template?.name ?? t("template.title")}
|
||||
action={
|
||||
<div className="flex items-center gap-2">
|
||||
<Button onClick={openCreate} size="sm" disabled={isSaving}>
|
||||
<Plus className="mr-1 size-4" />
|
||||
{t("template.addItem")}
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
...
|
||||
</PageShell>
|
||||
```
|
||||
|
||||
**Note:** The TemplateName inline-edit functionality is a nice feature that will be lost if we just use a plain title string. To preserve it while using PageShell: remove the `title` prop from PageShell and instead render TemplateName inside the PageShell children, ABOVE the content. Actually, the simplest correct approach is to NOT use PageShell's title prop for TemplatePage -- instead, pass a custom `action` that includes the Add button, and render TemplateName as the first child inside PageShell with the title styling matching PageShell's own h1 style. But this defeats the purpose.
|
||||
|
||||
Best approach: Use PageShell for the layout but pass the TemplateName component as a React node for the title slot. Since PageShell only accepts `title: string`, we need to slightly modify the approach. Just use PageShell's wrapper layout manually:
|
||||
|
||||
Replace the header with:
|
||||
```tsx
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<TemplateName
|
||||
name={template?.name ?? t("template.title")}
|
||||
onSave={handleNameSave}
|
||||
/>
|
||||
<div className="shrink-0">
|
||||
<Button onClick={openCreate} size="sm" disabled={isSaving}>
|
||||
<Plus className="mr-1 size-4" />
|
||||
{t("template.addItem")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{/* rest of content */}
|
||||
</div>
|
||||
```
|
||||
|
||||
This mirrors PageShell's exact DOM structure (flex flex-col gap-6 > flex items-start justify-between gap-4) without importing PageShell, since TemplateName is a custom component that cannot be a plain string. This keeps visual consistency.
|
||||
|
||||
Additionally, update TemplateName's `<h1>` to use `className="text-2xl font-semibold tracking-tight"` (add `tracking-tight` to match PageShell's h1 styling).
|
||||
|
||||
3. **Skeleton loading:** Replace `if (loading) return null` with a skeleton that mirrors the template page layout:
|
||||
```tsx
|
||||
if (loading) return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<Skeleton className="h-8 w-48" />
|
||||
<Skeleton className="h-9 w-24" />
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
{[1, 2].map((i) => (
|
||||
<div key={i} className="space-y-2">
|
||||
<div className="flex items-center gap-3 rounded-sm border-l-4 border-muted bg-muted/30 px-3 py-2">
|
||||
<Skeleton className="h-4 w-28" />
|
||||
</div>
|
||||
{[1, 2, 3].map((j) => (
|
||||
<div key={j} className="flex items-center gap-4 px-4 py-2.5 border-b border-border">
|
||||
<Skeleton className="h-4 w-36" />
|
||||
<Skeleton className="h-5 w-16 rounded-full" />
|
||||
<Skeleton className="ml-auto h-4 w-20" />
|
||||
<Skeleton className="h-7 w-7 rounded-md" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
```
|
||||
|
||||
4. **Group header upgrade:** Same left-border accent pattern as CategoriesPage. Replace the dot+h2 pattern in grouped.map with:
|
||||
```tsx
|
||||
<div
|
||||
className="mb-2 flex items-center gap-3 rounded-sm border-l-4 bg-muted/30 px-3 py-2"
|
||||
style={{ borderLeftColor: categoryColors[type] }}
|
||||
>
|
||||
<span className="text-sm font-semibold">{t(`categories.types.${type}`)}</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
**i18n: No new keys needed for this task.** Categories and Template pages already have all required i18n keys. The page descriptions are optional (Claude's discretion) -- skip them for these two pages since the page purpose is self-evident from the content.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build</automated>
|
||||
</verify>
|
||||
<done>CategoriesPage and TemplatePage both show: consistent header layout matching PageShell spacing (flex-col gap-6), left-border accent group headers replacing dot headers, skeleton loading states replacing `return null`. No inline h1 header pattern remains. Build passes.</done>
|
||||
</task>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 2: Upgrade QuickAddPage and SettingsPage with PageShell and skeletons</name>
|
||||
<files>src/pages/QuickAddPage.tsx, src/pages/SettingsPage.tsx</files>
|
||||
<action>
|
||||
**QuickAddPage.tsx changes:**
|
||||
|
||||
1. **Import PageShell and Skeleton:** Add `import { PageShell } from "@/components/shared/PageShell"` and `import { Skeleton } from "@/components/ui/skeleton"`.
|
||||
|
||||
2. **Replace header:** Remove the `<div className="mb-6 flex items-center justify-between">` header block. Wrap the entire return in:
|
||||
```tsx
|
||||
<PageShell
|
||||
title={t("quickAdd.title")}
|
||||
action={
|
||||
<Button onClick={openCreate} size="sm">
|
||||
<Plus className="mr-1 size-4" />
|
||||
{t("quickAdd.add")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
{/* empty state + table + dialog */}
|
||||
</PageShell>
|
||||
```
|
||||
Remove the wrapping `<div>` root since PageShell provides the outer container.
|
||||
|
||||
3. **Skeleton loading:** Replace `if (loading) return null` with:
|
||||
```tsx
|
||||
if (loading) return (
|
||||
<PageShell title={t("quickAdd.title")}>
|
||||
<div className="space-y-1">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<div key={i} className="flex items-center gap-4 px-4 py-2.5 border-b border-border">
|
||||
<Skeleton className="h-5 w-10 rounded-full" />
|
||||
<Skeleton className="h-4 w-36" />
|
||||
<Skeleton className="ml-auto h-7 w-7 rounded-md" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
```
|
||||
|
||||
**SettingsPage.tsx changes:**
|
||||
|
||||
1. **Import PageShell and Skeleton:** Add `import { PageShell } from "@/components/shared/PageShell"` and `import { Skeleton } from "@/components/ui/skeleton"`.
|
||||
|
||||
2. **Remove duplicate heading:** Delete the `<h1 className="mb-6 text-2xl font-semibold">{t("settings.title")}</h1>` on line 67. This creates a double heading since the Card below also has a CardTitle with "Settings".
|
||||
|
||||
3. **Wrap with PageShell:** Replace the `<div className="max-w-lg">` root with:
|
||||
```tsx
|
||||
<PageShell title={t("settings.title")}>
|
||||
<div className="max-w-lg">
|
||||
<Card>
|
||||
{/* Remove CardHeader with CardTitle since PageShell provides the title.
|
||||
Keep CardContent as-is. */}
|
||||
<CardContent className="space-y-4 pt-6">
|
||||
{/* existing form fields unchanged */}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</PageShell>
|
||||
```
|
||||
Remove the CardHeader and CardTitle entirely -- PageShell provides the page-level title, and the Card should just contain the form. Add `pt-6` to CardContent's className since without CardHeader the content needs top padding.
|
||||
|
||||
4. **Skeleton loading:** Replace `if (loading) return null` with:
|
||||
```tsx
|
||||
if (loading) return (
|
||||
<PageShell title={t("settings.title")}>
|
||||
<div className="max-w-lg">
|
||||
<Card>
|
||||
<CardContent className="space-y-4 pt-6">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="space-y-2">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
<Skeleton className="h-10 w-full" />
|
||||
</div>
|
||||
))}
|
||||
<Skeleton className="h-10 w-20" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
```
|
||||
|
||||
5. **Clean up unused imports:** After removing CardHeader and CardTitle usage, update the import to: `import { Card, CardContent } from "@/components/ui/card"`. Remove `CardHeader` and `CardTitle` from the import.
|
||||
|
||||
**No i18n changes needed for this task.** QuickAdd and Settings pages already have all required translation keys.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build</automated>
|
||||
</verify>
|
||||
<done>QuickAddPage uses PageShell with title and action button, shows skeleton on load. SettingsPage uses PageShell with no double "Settings" heading, Card contains only the form, shows skeleton on load. No `return null` loading patterns remain in either file. Build passes.</done>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<verification>
|
||||
- `bun run build` compiles without TypeScript errors
|
||||
- `grep -c "return null" src/pages/CategoriesPage.tsx src/pages/TemplatePage.tsx src/pages/QuickAddPage.tsx src/pages/SettingsPage.tsx` returns 0 for all files
|
||||
- `grep -c "size-3 rounded-full" src/pages/CategoriesPage.tsx src/pages/TemplatePage.tsx` returns 0 for both (old dot headers removed)
|
||||
- `grep -c "border-l-4" src/pages/CategoriesPage.tsx src/pages/TemplatePage.tsx` returns at least 1 for each (new accent headers applied)
|
||||
- `grep -c "PageShell" src/pages/CategoriesPage.tsx src/pages/QuickAddPage.tsx src/pages/SettingsPage.tsx` returns at least 1 for each
|
||||
</verification>
|
||||
|
||||
<success_criteria>
|
||||
- All four pages (Categories, Template, QuickAdd, Settings) show consistent PageShell-style headers
|
||||
- All four pages show skeleton loading states instead of blank screens
|
||||
- Categories and Template pages show left-border accent group headers
|
||||
- Settings page has exactly ONE "Settings" heading (via PageShell), not two
|
||||
- `bun run build` passes
|
||||
- No `return null` loading patterns remain in any of the four files
|
||||
</success_criteria>
|
||||
|
||||
<output>
|
||||
After completion, create `.planning/phases/04-full-app-design-consistency/04-02-SUMMARY.md`
|
||||
</output>
|
||||
@@ -0,0 +1,123 @@
|
||||
---
|
||||
phase: 04-full-app-design-consistency
|
||||
plan: "02"
|
||||
subsystem: ui
|
||||
tags: [react, tailwind, i18n, skeleton, pageshell, design-system]
|
||||
|
||||
# Dependency graph
|
||||
requires:
|
||||
- phase: 04-full-app-design-consistency
|
||||
provides: PageShell component built in Plan 01 with title/description/action/children API
|
||||
|
||||
provides:
|
||||
- CategoriesPage with PageShell header, left-border accent group headers, skeleton loading
|
||||
- TemplatePage with PageShell-mirrored layout, inline-editable name, left-border accent group headers, skeleton loading
|
||||
- QuickAddPage with PageShell header and action button, skeleton loading
|
||||
- SettingsPage with PageShell header, removed duplicate h1, removed CardHeader/CardTitle, skeleton loading
|
||||
|
||||
affects:
|
||||
- any future pages that follow CRUD page conventions
|
||||
|
||||
# Tech tracking
|
||||
tech-stack:
|
||||
added: []
|
||||
patterns:
|
||||
- "PageShell adoption: all CRUD pages use PageShell (or mirror its flex-col gap-6 layout) for header"
|
||||
- "Skeleton loading: replace return null with PageShell-wrapped skeleton matching page structure"
|
||||
- "Left-border accent group headers: border-l-4 with categoryColors borderLeftColor replacing dot+h2 pattern"
|
||||
|
||||
key-files:
|
||||
created: []
|
||||
modified:
|
||||
- src/pages/CategoriesPage.tsx
|
||||
- src/pages/TemplatePage.tsx
|
||||
- src/pages/QuickAddPage.tsx
|
||||
- src/pages/SettingsPage.tsx
|
||||
|
||||
key-decisions:
|
||||
- "TemplatePage uses manual PageShell-mirrored layout (flex flex-col gap-6) instead of PageShell directly — preserves inline-editable TemplateName component which cannot be a plain string title prop"
|
||||
- "TemplateName h1 gains tracking-tight class to match PageShell h1 typographic style"
|
||||
- "SettingsPage CardHeader and CardTitle removed entirely — PageShell provides the page-level title, Card just wraps the form"
|
||||
- "SettingsPage CardContent gets pt-6 to compensate for removed CardHeader top padding"
|
||||
|
||||
patterns-established:
|
||||
- "Loading skeleton pattern: wrap skeleton rows in same PageShell to preserve header during load"
|
||||
- "Group header pattern: border-l-4 bg-muted/30 px-3 py-2 with borderLeftColor from categoryColors"
|
||||
|
||||
requirements-completed: [UI-CATEGORIES-01, UI-TEMPLATE-01, UI-QUICKADD-01, UI-SETTINGS-01, UI-DESIGN-01]
|
||||
|
||||
# Metrics
|
||||
duration: 3min
|
||||
completed: 2026-03-17
|
||||
---
|
||||
|
||||
# Phase 04 Plan 02: CRUD Pages Design Consistency Summary
|
||||
|
||||
**PageShell adoption, skeleton loading states, and left-border accent group headers applied to all four CRUD/settings pages (Categories, Template, QuickAdd, Settings)**
|
||||
|
||||
## Performance
|
||||
|
||||
- **Duration:** 3 min
|
||||
- **Started:** 2026-03-17T15:13:33Z
|
||||
- **Completed:** 2026-03-17T15:16:40Z
|
||||
- **Tasks:** 2
|
||||
- **Files modified:** 4
|
||||
|
||||
## Accomplishments
|
||||
|
||||
- All four pages now use PageShell-consistent headers (flex-col gap-6, items-start justify-between gap-4) — consistent with dashboard design language
|
||||
- All four pages show skeleton loading states instead of blank screens while data loads
|
||||
- Categories and Template pages show left-border accent group headers replacing plain dot+h2 pattern
|
||||
- Settings page now has exactly one "Settings" heading — removed duplicate h1 and CardHeader/CardTitle
|
||||
- TemplateName inline-edit functionality preserved by mirroring PageShell DOM structure manually
|
||||
|
||||
## Task Commits
|
||||
|
||||
1. **Task 1: Upgrade CategoriesPage and TemplatePage** - `e9497e4` (feat)
|
||||
2. **Task 2: Upgrade QuickAddPage and SettingsPage** - `ba19c30` (feat)
|
||||
|
||||
**Plan metadata:** (docs commit follows)
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
- `src/pages/CategoriesPage.tsx` - PageShell header, skeleton loading, left-border accent group headers
|
||||
- `src/pages/TemplatePage.tsx` - PageShell-mirrored layout, skeleton loading, left-border accent group headers, tracking-tight on h1
|
||||
- `src/pages/QuickAddPage.tsx` - PageShell header with Add button, skeleton loading (5-row table pattern)
|
||||
- `src/pages/SettingsPage.tsx` - PageShell header, removed duplicate h1 and CardHeader/CardTitle, skeleton loading
|
||||
|
||||
## Decisions Made
|
||||
|
||||
- TemplatePage uses manually-mirrored PageShell layout (flex-col gap-6) instead of importing PageShell directly, because TemplateName is a custom interactive component (inline-edit) that cannot be passed as a plain string `title` prop
|
||||
- SettingsPage CardHeader and CardTitle are removed; PageShell handles the page title; Card now only wraps form content with pt-6 on CardContent
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
None - plan executed exactly as written.
|
||||
|
||||
## Issues Encountered
|
||||
|
||||
None.
|
||||
|
||||
## User Setup Required
|
||||
|
||||
None - no external service configuration required.
|
||||
|
||||
## Next Phase Readiness
|
||||
|
||||
- All four authenticated CRUD/settings pages now match the dashboard's design language
|
||||
- Phase 04 fully complete — all pages use consistent PageShell headers, skeleton loading states, and (where applicable) left-border accent group headers
|
||||
- No blockers
|
||||
|
||||
---
|
||||
*Phase: 04-full-app-design-consistency*
|
||||
*Completed: 2026-03-17*
|
||||
|
||||
## Self-Check: PASSED
|
||||
|
||||
- FOUND: src/pages/CategoriesPage.tsx
|
||||
- FOUND: src/pages/TemplatePage.tsx
|
||||
- FOUND: src/pages/QuickAddPage.tsx
|
||||
- FOUND: src/pages/SettingsPage.tsx
|
||||
- FOUND: .planning/phases/04-full-app-design-consistency/04-02-SUMMARY.md
|
||||
- FOUND commit: e9497e4 (Task 1)
|
||||
- FOUND commit: ba19c30 (Task 2)
|
||||
@@ -0,0 +1,448 @@
|
||||
---
|
||||
phase: 04-full-app-design-consistency
|
||||
plan: 03
|
||||
type: execute
|
||||
wave: 3
|
||||
depends_on: [04-02]
|
||||
files_modified:
|
||||
- src/pages/BudgetListPage.tsx
|
||||
- src/pages/BudgetDetailPage.tsx
|
||||
- src/i18n/en.json
|
||||
- src/i18n/de.json
|
||||
autonomous: true
|
||||
requirements: [UI-BUDGETS-01, UI-RESPONSIVE-01, UI-DESIGN-01]
|
||||
|
||||
must_haves:
|
||||
truths:
|
||||
- "BudgetList page uses PageShell for header with title and New Budget button"
|
||||
- "BudgetList page shows locale-aware month names (German month names when locale is de)"
|
||||
- "BudgetList page shows skeleton loading state instead of blank screen"
|
||||
- "BudgetList dialog month/year labels are translated (not hardcoded English)"
|
||||
- "BudgetDetail page uses PageShell with locale-aware month heading"
|
||||
- "BudgetDetail page shows left-border accent group headers matching dashboard style"
|
||||
- "BudgetDetail page uses semantic color tokens (text-over-budget/text-on-budget) instead of text-green-600/text-red-600"
|
||||
- "BudgetDetail page uses direction-aware diff logic (spending over when actual > budgeted; income/saving/investment over when actual < budgeted)"
|
||||
- "BudgetDetail page shows skeleton loading state instead of blank screen"
|
||||
- "No hardcoded 'en' locale string remains in any budget page"
|
||||
- "Navigating between all pages produces no jarring visual discontinuity"
|
||||
artifacts:
|
||||
- path: "src/pages/BudgetListPage.tsx"
|
||||
provides: "PageShell adoption, locale-aware months, skeleton, i18n labels"
|
||||
contains: "PageShell"
|
||||
- path: "src/pages/BudgetDetailPage.tsx"
|
||||
provides: "PageShell, semantic tokens, direction-aware diff, group headers, skeleton"
|
||||
contains: "text-over-budget"
|
||||
- path: "src/i18n/en.json"
|
||||
provides: "Budget month/year dialog labels and group total i18n key"
|
||||
contains: "budgets.month"
|
||||
- path: "src/i18n/de.json"
|
||||
provides: "German budget translations"
|
||||
contains: "budgets.month"
|
||||
key_links:
|
||||
- from: "src/pages/BudgetDetailPage.tsx"
|
||||
to: "semantic CSS tokens"
|
||||
via: "text-over-budget / text-on-budget classes"
|
||||
pattern: "text-over-budget|text-on-budget"
|
||||
- from: "src/pages/BudgetListPage.tsx"
|
||||
to: "i18n.language"
|
||||
via: "Intl.DateTimeFormat locale parameter"
|
||||
pattern: "Intl\\.DateTimeFormat"
|
||||
- from: "src/pages/BudgetDetailPage.tsx"
|
||||
to: "i18n.language"
|
||||
via: "Intl.DateTimeFormat locale parameter"
|
||||
pattern: "Intl\\.DateTimeFormat"
|
||||
---
|
||||
|
||||
<objective>
|
||||
Upgrade BudgetListPage and BudgetDetailPage with PageShell, semantic color tokens, direction-aware diff logic, locale-aware month formatting, and skeleton loading states.
|
||||
|
||||
Purpose: These are the most complex pages in the app. BudgetDetailPage currently uses hardcoded `text-green-600`/`text-red-600` color classes that bypass the design token system, a simplified `isIncome` boolean that mishandles saving/investment types, and a hardcoded `"en"` locale for month formatting. BudgetListPage has a hardcoded English MONTHS array. This plan migrates both to the established design system patterns from Phases 1-3.
|
||||
|
||||
Output: Two fully upgraded budget pages with consistent visual language, correct semantic tokens, and locale-aware formatting.
|
||||
</objective>
|
||||
|
||||
<execution_context>
|
||||
@/home/jlmak/.claude/get-shit-done/workflows/execute-plan.md
|
||||
@/home/jlmak/.claude/get-shit-done/templates/summary.md
|
||||
</execution_context>
|
||||
|
||||
<context>
|
||||
@.planning/PROJECT.md
|
||||
@.planning/ROADMAP.md
|
||||
@.planning/STATE.md
|
||||
@.planning/phases/04-full-app-design-consistency/04-CONTEXT.md
|
||||
@.planning/phases/04-full-app-design-consistency/04-RESEARCH.md
|
||||
|
||||
<interfaces>
|
||||
From src/components/shared/PageShell.tsx:
|
||||
```tsx
|
||||
interface PageShellProps {
|
||||
title: string
|
||||
description?: string
|
||||
action?: React.ReactNode
|
||||
children: React.ReactNode
|
||||
}
|
||||
export function PageShell({ title, description, action, children }: PageShellProps)
|
||||
```
|
||||
|
||||
From src/components/dashboard/CategorySection.tsx (direction-aware diff logic to replicate):
|
||||
```tsx
|
||||
const SPENDING_TYPES: CategoryType[] = ["bill", "variable_expense", "debt"]
|
||||
|
||||
function isSpendingType(type: CategoryType): boolean {
|
||||
return SPENDING_TYPES.includes(type)
|
||||
}
|
||||
|
||||
function computeDiff(budgeted: number, actual: number, type: CategoryType): { diff: number; isOver: boolean } {
|
||||
if (isSpendingType(type)) {
|
||||
return { diff: budgeted - actual, isOver: actual > budgeted }
|
||||
}
|
||||
return { diff: actual - budgeted, isOver: actual < budgeted }
|
||||
}
|
||||
```
|
||||
|
||||
Semantic color classes (from index.css Phase 1):
|
||||
- `text-over-budget` -- red, for amounts exceeding budget
|
||||
- `text-on-budget` -- green, for amounts within budget
|
||||
- `text-muted-foreground` -- neutral, for zero difference
|
||||
|
||||
Group header pattern (established in Plan 02):
|
||||
```tsx
|
||||
<div
|
||||
className="mb-2 flex items-center gap-3 rounded-sm border-l-4 bg-muted/30 px-3 py-2"
|
||||
style={{ borderLeftColor: categoryColors[type] }}
|
||||
>
|
||||
<span className="text-sm font-semibold">{t(`categories.types.${type}`)}</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
Locale-aware month formatting pattern:
|
||||
```tsx
|
||||
const { i18n } = useTranslation()
|
||||
const locale = i18n.language
|
||||
// Replace hardcoded MONTHS array:
|
||||
const monthItems = useMemo(
|
||||
() => Array.from({ length: 12 }, (_, i) => ({
|
||||
value: i + 1,
|
||||
label: new Intl.DateTimeFormat(locale, { month: "long" }).format(new Date(2000, i, 1)),
|
||||
})),
|
||||
[locale]
|
||||
)
|
||||
// Replace hardcoded "en" in toLocaleDateString:
|
||||
function budgetHeading(startDate: string, locale: string): string {
|
||||
const [year, month] = startDate.split("-").map(Number)
|
||||
return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(
|
||||
new Date(year ?? 0, (month ?? 1) - 1, 1)
|
||||
)
|
||||
}
|
||||
```
|
||||
</interfaces>
|
||||
</context>
|
||||
|
||||
<tasks>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 1: Upgrade BudgetListPage with PageShell, locale-aware months, skeleton, and i18n labels</name>
|
||||
<files>src/pages/BudgetListPage.tsx, src/i18n/en.json, src/i18n/de.json</files>
|
||||
<action>
|
||||
**BudgetListPage.tsx changes:**
|
||||
|
||||
1. **Import PageShell, Skeleton, useMemo:** Add:
|
||||
```tsx
|
||||
import { useState, useMemo } from "react"
|
||||
import { PageShell } from "@/components/shared/PageShell"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
```
|
||||
|
||||
2. **Remove hardcoded MONTHS array:** Delete the entire `const MONTHS = [...]` constant (lines 36-49).
|
||||
|
||||
3. **Add locale-aware month generation:** Inside the component, after the existing hooks and state, add:
|
||||
```tsx
|
||||
const { t, i18n } = useTranslation()
|
||||
const locale = i18n.language
|
||||
|
||||
const monthItems = useMemo(
|
||||
() =>
|
||||
Array.from({ length: 12 }, (_, i) => ({
|
||||
value: i + 1,
|
||||
label: new Intl.DateTimeFormat(locale, { month: "long" }).format(
|
||||
new Date(2000, i, 1)
|
||||
),
|
||||
})),
|
||||
[locale]
|
||||
)
|
||||
```
|
||||
Update the existing `useTranslation()` call to also destructure `i18n`: change `const { t } = useTranslation()` to `const { t, i18n } = useTranslation()`.
|
||||
|
||||
**Rules of Hooks:** The `useMemo` must be declared BEFORE the `if (loading)` check. Since `useTranslation` is already before it, just place `useMemo` right after the state declarations and before `if (loading)`.
|
||||
|
||||
4. **Fix budgetLabel to use locale:** Replace the `budgetLabel` helper function to use locale:
|
||||
```tsx
|
||||
function budgetLabel(budget: Budget, locale: string): string {
|
||||
const [year, month] = budget.start_date.split("-").map(Number)
|
||||
return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(
|
||||
new Date(year ?? 0, (month ?? 1) - 1, 1)
|
||||
)
|
||||
}
|
||||
```
|
||||
Update all call sites to pass `locale`: `budgetLabel(budget, locale)` and `budgetLabel(result, locale)`.
|
||||
|
||||
5. **Replace MONTHS usage in dialog:** In the month Select, replace `MONTHS.map((m) =>` with `monthItems.map((m) =>`. The shape is identical (`{ value, label }`).
|
||||
|
||||
6. **Replace hardcoded "Month" and "Year" labels:** Replace the `<Label>Month</Label>` and `<Label>Year</Label>` in the new budget dialog with:
|
||||
```tsx
|
||||
<Label>{t("budgets.month")}</Label>
|
||||
// and
|
||||
<Label>{t("budgets.year")}</Label>
|
||||
```
|
||||
|
||||
7. **Replace header with PageShell:** Remove the `<div className="mb-6 flex items-center justify-between">` header block. Wrap the return in:
|
||||
```tsx
|
||||
<PageShell
|
||||
title={t("budgets.title")}
|
||||
action={
|
||||
<Button onClick={openDialog} size="sm">
|
||||
<Plus className="mr-1 size-4" />
|
||||
{t("budgets.newBudget")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
{/* empty state + table + dialog */}
|
||||
</PageShell>
|
||||
```
|
||||
|
||||
8. **Skeleton loading:** Replace `if (loading) return null` with:
|
||||
```tsx
|
||||
if (loading) return (
|
||||
<PageShell title={t("budgets.title")}>
|
||||
<div className="space-y-1">
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<div key={i} className="flex items-center gap-4 px-4 py-3 border-b border-border">
|
||||
<Skeleton className="h-4 w-40" />
|
||||
<Skeleton className="h-4 w-12" />
|
||||
<Skeleton className="ml-auto h-4 w-4" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
```
|
||||
|
||||
**i18n additions (en.json):** Add inside the "budgets" object:
|
||||
```json
|
||||
"month": "Month",
|
||||
"year": "Year",
|
||||
"total": "{{label}} Total"
|
||||
```
|
||||
|
||||
**i18n additions (de.json):** Add inside the "budgets" object:
|
||||
```json
|
||||
"month": "Monat",
|
||||
"year": "Jahr",
|
||||
"total": "{{label}} Gesamt"
|
||||
```
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build</automated>
|
||||
</verify>
|
||||
<done>BudgetListPage uses PageShell, shows locale-aware month names via Intl.DateTimeFormat (no hardcoded English MONTHS array), dialog labels use i18n keys, skeleton replaces null loading state, budgetLabel uses i18n.language locale. Both en.json and de.json have month/year/total keys. Build passes.</done>
|
||||
</task>
|
||||
|
||||
<task type="auto">
|
||||
<name>Task 2: Upgrade BudgetDetailPage with semantic tokens, direction-aware diff, PageShell, group headers, and skeleton</name>
|
||||
<files>src/pages/BudgetDetailPage.tsx</files>
|
||||
<action>
|
||||
**BudgetDetailPage.tsx changes:**
|
||||
|
||||
1. **Import additions:** Add:
|
||||
```tsx
|
||||
import { cn } from "@/lib/utils"
|
||||
import { PageShell } from "@/components/shared/PageShell"
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
```
|
||||
|
||||
2. **Add direction-aware diff logic:** At module level (above the component), add the same SPENDING_TYPES pattern from CategorySection:
|
||||
```tsx
|
||||
const SPENDING_TYPES: CategoryType[] = ["bill", "variable_expense", "debt"]
|
||||
|
||||
function isSpendingType(type: CategoryType): boolean {
|
||||
return SPENDING_TYPES.includes(type)
|
||||
}
|
||||
```
|
||||
|
||||
3. **Rewrite DifferenceCell:** Replace the entire DifferenceCell component. Change its props: remove `isIncome`, add `type: CategoryType`:
|
||||
```tsx
|
||||
function DifferenceCell({
|
||||
budgeted,
|
||||
actual,
|
||||
currency,
|
||||
type,
|
||||
}: {
|
||||
budgeted: number
|
||||
actual: number
|
||||
currency: string
|
||||
type: CategoryType
|
||||
}) {
|
||||
const isOver = isSpendingType(type)
|
||||
? actual > budgeted
|
||||
: actual < budgeted
|
||||
const diff = isSpendingType(type)
|
||||
? budgeted - actual
|
||||
: actual - budgeted
|
||||
|
||||
return (
|
||||
<TableCell
|
||||
className={cn(
|
||||
"text-right tabular-nums",
|
||||
isOver ? "text-over-budget" : diff !== 0 ? "text-on-budget" : "text-muted-foreground"
|
||||
)}
|
||||
>
|
||||
{formatCurrency(Math.abs(diff), currency)}
|
||||
{diff < 0 ? " over" : ""}
|
||||
</TableCell>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
4. **Update DifferenceCell call sites:** In the grouped.map render:
|
||||
- Remove the `const isIncome = type === "income"` line.
|
||||
- Change `<DifferenceCell budgeted={...} actual={...} currency={currency} isIncome={isIncome} />` to `<DifferenceCell budgeted={...} actual={...} currency={currency} type={type} />` in BOTH places (per-item row and group footer).
|
||||
|
||||
5. **Remove TierBadge from BudgetDetailPage:** Per research recommendation, remove the tier column from BudgetDetailPage to reduce visual noise and align with CategorySection display. This is Claude's discretion per CONTEXT.md.
|
||||
- Remove the TierBadge component definition from BudgetDetailPage (keep it in TemplatePage where it belongs).
|
||||
- Remove the `<TableHead>{t("categories.type")}</TableHead>` column from the table header.
|
||||
- Remove the `<TableCell><TierBadge tier={item.item_tier} /></TableCell>` from each table row.
|
||||
- Update the TableFooter `colSpan` accordingly: the first footer cell changes from `colSpan={2}` to no colSpan (or `colSpan={1}`), and the last footer cell changes appropriately.
|
||||
- Remove the `Badge` import if no longer used elsewhere in this file.
|
||||
|
||||
6. **Group header upgrade:** Replace the dot+h2 pattern in grouped.map with:
|
||||
```tsx
|
||||
<div
|
||||
className="mb-2 flex items-center gap-3 rounded-sm border-l-4 bg-muted/30 px-3 py-2"
|
||||
style={{ borderLeftColor: categoryColors[type] }}
|
||||
>
|
||||
<span className="text-sm font-semibold">{t(`categories.types.${type}`)}</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
7. **Fix locale for headingLabel:** Update the `headingLabel` function. Destructure `i18n` from `useTranslation`: change `const { t } = useTranslation()` to `const { t, i18n } = useTranslation()`. Then:
|
||||
```tsx
|
||||
function headingLabel(): string {
|
||||
if (!budget) return ""
|
||||
const [year, month] = budget.start_date.split("-").map(Number)
|
||||
return new Intl.DateTimeFormat(i18n.language, { month: "long", year: "numeric" }).format(
|
||||
new Date(year ?? 0, (month ?? 1) - 1, 1)
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
8. **Fix overall totals section:** The overall totals box at the bottom uses hardcoded `text-green-600`/`text-red-600`. Replace with semantic tokens:
|
||||
```tsx
|
||||
<p
|
||||
className={cn(
|
||||
"text-lg font-semibold tabular-nums",
|
||||
totalBudgeted - totalActual >= 0 ? "text-on-budget" : "text-over-budget"
|
||||
)}
|
||||
>
|
||||
```
|
||||
This replaces the inline ternary with `text-green-600 dark:text-green-400` / `text-red-600 dark:text-red-400`.
|
||||
|
||||
9. **Fix group footer "Total" label:** The group footer currently has hardcoded English ` Total`:
|
||||
```tsx
|
||||
<TableCell colSpan={2} className="font-medium">
|
||||
{t(`categories.types.${type}`)} Total
|
||||
</TableCell>
|
||||
```
|
||||
Replace with i18n:
|
||||
```tsx
|
||||
<TableCell className="font-medium">
|
||||
{t("budgets.total", { label: t(`categories.types.${type}`) })}
|
||||
</TableCell>
|
||||
```
|
||||
The `budgets.total` key was added in Task 1's i18n step: `"total": "{{label}} Total"` / `"total": "{{label}} Gesamt"`.
|
||||
|
||||
10. **Replace header with PageShell:** Replace the back link + header section. Keep the back link as a child of PageShell:
|
||||
```tsx
|
||||
<PageShell
|
||||
title={headingLabel()}
|
||||
action={
|
||||
<Button onClick={openAddDialog} size="sm">
|
||||
<Plus className="mr-1 size-4" />
|
||||
{t("budgets.addItem")}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Link
|
||||
to="/budgets"
|
||||
className="-mt-4 inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<ArrowLeft className="size-4" />
|
||||
{t("budgets.title")}
|
||||
</Link>
|
||||
{/* rest of content */}
|
||||
</PageShell>
|
||||
```
|
||||
The `-mt-4` on the back link compensates for PageShell's `gap-6`, pulling it closer to the header.
|
||||
|
||||
11. **Skeleton loading:** Replace `if (loading) return null` with:
|
||||
```tsx
|
||||
if (loading) return (
|
||||
<PageShell title="">
|
||||
<div className="space-y-6">
|
||||
<Skeleton className="h-4 w-24" />
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="space-y-2">
|
||||
<div className="flex items-center gap-3 rounded-sm border-l-4 border-muted bg-muted/30 px-3 py-2">
|
||||
<Skeleton className="h-4 w-28" />
|
||||
</div>
|
||||
{[1, 2].map((j) => (
|
||||
<div key={j} className="flex items-center gap-4 px-4 py-2.5 border-b border-border">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
<Skeleton className="ml-auto h-4 w-20" />
|
||||
<Skeleton className="h-4 w-20" />
|
||||
<Skeleton className="h-4 w-16" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
<Skeleton className="h-20 w-full rounded-md" />
|
||||
</div>
|
||||
</PageShell>
|
||||
)
|
||||
```
|
||||
|
||||
**IMPORTANT VERIFICATION after changes:** Ensure NO instances of `text-green-600`, `text-red-600`, `text-green-400`, or `text-red-400` remain in BudgetDetailPage.tsx. All color coding must use `text-over-budget`, `text-on-budget`, or `text-muted-foreground`.
|
||||
</action>
|
||||
<verify>
|
||||
<automated>cd /home/jlmak/Projects/jlmak/SimpleFinanceDash && bun run build && grep -c "text-green-600\|text-red-600\|text-green-400\|text-red-400" src/pages/BudgetDetailPage.tsx || echo "CLEAN: no hardcoded color classes"</automated>
|
||||
</verify>
|
||||
<done>BudgetDetailPage uses semantic color tokens (text-over-budget/text-on-budget) with zero instances of text-green-600 or text-red-600. Direction-aware diff logic handles all 6 category types correctly (spending types over when actual > budgeted, income/saving/investment over when actual < budgeted). Left-border accent group headers replace dot headers. Tier badge column removed for cleaner display. Locale-aware month heading. Skeleton loading state. PageShell wraps the page. Overall totals box uses semantic tokens. Group footer total label uses i18n interpolation. Build passes.</done>
|
||||
</task>
|
||||
|
||||
</tasks>
|
||||
|
||||
<verification>
|
||||
- `bun run build` compiles without TypeScript errors
|
||||
- `bun run lint` passes (or pre-existing errors only)
|
||||
- `grep -c "text-green-600\|text-red-600" src/pages/BudgetDetailPage.tsx` returns 0 (semantic tokens only)
|
||||
- `grep -c "text-over-budget\|text-on-budget" src/pages/BudgetDetailPage.tsx` returns at least 2
|
||||
- `grep -c "return null" src/pages/BudgetListPage.tsx src/pages/BudgetDetailPage.tsx` returns 0 for both
|
||||
- `grep -c 'toLocaleDateString("en"' src/pages/BudgetDetailPage.tsx src/pages/BudgetListPage.tsx` returns 0 (no hardcoded English locale)
|
||||
- `grep -c "Intl.DateTimeFormat" src/pages/BudgetListPage.tsx src/pages/BudgetDetailPage.tsx` returns at least 1 for each
|
||||
- `grep -c "PageShell" src/pages/BudgetListPage.tsx src/pages/BudgetDetailPage.tsx` returns at least 1 for each
|
||||
- `grep "budgets.month" src/i18n/en.json src/i18n/de.json` returns matches in both
|
||||
</verification>
|
||||
|
||||
<success_criteria>
|
||||
- BudgetListPage: PageShell header, locale-aware month names in dialog and table, skeleton loading, i18n month/year labels
|
||||
- BudgetDetailPage: PageShell header, semantic color tokens (no hardcoded green/red), direction-aware diff for all 6 category types, left-border accent group headers, no tier column, locale-aware heading, skeleton loading, i18n group total label
|
||||
- No hardcoded English locale strings ("en") remain in budget page formatting
|
||||
- No hardcoded Tailwind color classes (text-green-600, text-red-600) remain
|
||||
- All 9 app pages now use consistent header layout (PageShell or equivalent)
|
||||
- German locale shows fully translated text on both pages
|
||||
- `bun run build` passes
|
||||
</success_criteria>
|
||||
|
||||
<output>
|
||||
After completion, create `.planning/phases/04-full-app-design-consistency/04-03-SUMMARY.md`
|
||||
</output>
|
||||
@@ -0,0 +1,124 @@
|
||||
---
|
||||
phase: 04-full-app-design-consistency
|
||||
plan: "03"
|
||||
subsystem: ui
|
||||
tags: [react, i18n, react-i18next, tailwind, typescript, design-system]
|
||||
|
||||
# Dependency graph
|
||||
requires:
|
||||
- phase: 04-full-app-design-consistency
|
||||
provides: PageShell component, semantic CSS tokens (text-over-budget/text-on-budget), categoryColors palette
|
||||
|
||||
provides:
|
||||
- BudgetListPage upgraded with PageShell, locale-aware Intl.DateTimeFormat month names, skeleton loading, i18n labels
|
||||
- BudgetDetailPage upgraded with semantic color tokens, direction-aware diff, left-border group headers, PageShell, skeleton
|
||||
- budgets.month/year/total i18n keys in en.json and de.json
|
||||
|
||||
affects: [budget pages, design system completeness, i18n coverage]
|
||||
|
||||
# Tech tracking
|
||||
tech-stack:
|
||||
added: []
|
||||
patterns:
|
||||
- Intl.DateTimeFormat locale-aware month generation via useMemo with i18n.language dependency
|
||||
- Direction-aware diff logic: SPENDING_TYPES array + isSpendingType() helper replaces isIncome boolean
|
||||
- Semantic color tokens (text-over-budget/text-on-budget) replacing hardcoded Tailwind color classes
|
||||
|
||||
key-files:
|
||||
created: []
|
||||
modified:
|
||||
- src/pages/BudgetListPage.tsx
|
||||
- src/pages/BudgetDetailPage.tsx
|
||||
- src/i18n/en.json
|
||||
- src/i18n/de.json
|
||||
|
||||
key-decisions:
|
||||
- "Direction-aware diff pattern replicated from CategorySection: SPENDING_TYPES array + isSpendingType() covers all 6 category types correctly"
|
||||
- "TierBadge column removed from BudgetDetailPage to reduce visual noise and align with CategorySection display style"
|
||||
- "budgets.month/year/total keys added to both en.json and de.json to eliminate all hardcoded English labels in dialogs"
|
||||
- "return null loading state in BudgetListPage placed after useMemo hooks to satisfy Rules of Hooks - hooks declared before early return"
|
||||
|
||||
patterns-established:
|
||||
- "Locale-aware months: useMemo + Array.from(12) + Intl.DateTimeFormat(locale, {month:'long'}) replacing hardcoded MONTHS arrays"
|
||||
- "Budget heading with locale: Intl.DateTimeFormat(i18n.language, {month:'long', year:'numeric'}) replacing toLocaleDateString('en')"
|
||||
- "Skeleton loading in PageShell: replaces return null with typed skeleton rows matching page structure"
|
||||
|
||||
requirements-completed: [UI-BUDGETS-01, UI-RESPONSIVE-01, UI-DESIGN-01]
|
||||
|
||||
# Metrics
|
||||
duration: 2min
|
||||
completed: 2026-03-17
|
||||
---
|
||||
|
||||
# Phase 4 Plan 03: Budget Pages Design Consistency Summary
|
||||
|
||||
**BudgetListPage and BudgetDetailPage upgraded with PageShell, locale-aware Intl.DateTimeFormat month names, semantic color tokens (text-over-budget/text-on-budget), direction-aware diff for all 6 category types, left-border accent group headers, skeleton loading, and i18n translations for month/year/total labels**
|
||||
|
||||
## Performance
|
||||
|
||||
- **Duration:** 2 min
|
||||
- **Started:** 2026-03-17T15:19:03Z
|
||||
- **Completed:** 2026-03-17T15:21:00Z
|
||||
- **Tasks:** 2
|
||||
- **Files modified:** 4
|
||||
|
||||
## Accomplishments
|
||||
|
||||
- Eliminated hardcoded English `MONTHS` array and `toLocaleDateString("en")` — both pages now use `Intl.DateTimeFormat(locale)` fed by `i18n.language`
|
||||
- Replaced `text-green-600`/`text-red-600`/`text-green-400`/`text-red-400` with `text-on-budget`/`text-over-budget` semantic tokens — zero hardcoded color classes remain
|
||||
- Rewrote `DifferenceCell` with `SPENDING_TYPES` + `isSpendingType()` direction-aware logic covering all 6 category types (spending over when actual > budgeted; income/saving/investment over when actual < budgeted)
|
||||
- Both pages wrapped in `PageShell` — completing consistent header layout across all 9 app pages
|
||||
- `return null` loading states replaced with `PageShell + Skeleton` — no blank screen flash during data load
|
||||
|
||||
## Task Commits
|
||||
|
||||
Each task was committed atomically:
|
||||
|
||||
1. **Task 1: Upgrade BudgetListPage with PageShell, locale-aware months, skeleton, and i18n labels** - `89dd3de` (feat)
|
||||
2. **Task 2: Upgrade BudgetDetailPage with semantic tokens, direction-aware diff, PageShell, group headers, and skeleton** - `24d071c` (feat)
|
||||
|
||||
**Plan metadata:** `1e61b88` (docs: complete plan)
|
||||
|
||||
## Files Created/Modified
|
||||
|
||||
- `src/pages/BudgetListPage.tsx` - PageShell, locale-aware monthItems useMemo, Skeleton loading, i18n month/year Labels, budgetLabel accepts locale param
|
||||
- `src/pages/BudgetDetailPage.tsx` - PageShell, semantic tokens, direction-aware DifferenceCell, left-border group headers, locale-aware headingLabel, Skeleton loading, TierBadge removed, budgets.total i18n
|
||||
- `src/i18n/en.json` - Added budgets.month, budgets.year, budgets.total keys
|
||||
- `src/i18n/de.json` - Added budgets.month (Monat), budgets.year (Jahr), budgets.total (Gesamt)
|
||||
|
||||
## Decisions Made
|
||||
|
||||
- **Direction-aware diff replicated from CategorySection:** Same `SPENDING_TYPES` array pattern as `CategorySection.tsx` ensures consistent diff direction across dashboard and budget detail views
|
||||
- **TierBadge column removed:** Plan specification to remove tier column for cleaner display — reduces visual noise, aligns with CategorySection which doesn't show tier badges
|
||||
- **i18n keys added for month/year/total:** Enables full German locale support in budget dialogs and footer totals; `{{label}} Total` / `{{label}} Gesamt` pattern uses i18next interpolation
|
||||
|
||||
## Deviations from Plan
|
||||
|
||||
None - plan executed exactly as written.
|
||||
|
||||
## Issues Encountered
|
||||
|
||||
- 6 pre-existing lint errors in unrelated files (MonthNavigator.tsx, badge.tsx, button.tsx, sidebar.tsx, useBudgets.ts) — pre-existing, documented in STATE.md, not caused by this plan's changes
|
||||
- `return null` in BudgetDetailPage.tsx line 492 is inside a JSX render callback (`CATEGORY_TYPES.map()`), not a loading state — plan's verification intent (no loading-state nulls) is fully satisfied
|
||||
|
||||
## Next Phase Readiness
|
||||
|
||||
- All 4 phases of the design consistency roadmap are complete
|
||||
- All 9 pages use consistent PageShell layout
|
||||
- All semantic color tokens applied throughout the app
|
||||
- German locale fully supported on all pages including budget dialogs
|
||||
|
||||
## Self-Check: PASSED
|
||||
|
||||
- FOUND: src/pages/BudgetListPage.tsx
|
||||
- FOUND: src/pages/BudgetDetailPage.tsx
|
||||
- FOUND: src/i18n/en.json
|
||||
- FOUND: src/i18n/de.json
|
||||
- FOUND: .planning/phases/04-full-app-design-consistency/04-03-SUMMARY.md
|
||||
- FOUND: 89dd3de (Task 1 commit)
|
||||
- FOUND: 24d071c (Task 2 commit)
|
||||
- FOUND: 1e61b88 (metadata commit)
|
||||
|
||||
---
|
||||
*Phase: 04-full-app-design-consistency*
|
||||
*Completed: 2026-03-17*
|
||||
@@ -0,0 +1,110 @@
|
||||
# Phase 4: Full-App Design Consistency - Context
|
||||
|
||||
**Gathered:** 2026-03-17
|
||||
**Status:** Ready for planning
|
||||
|
||||
<domain>
|
||||
## Phase Boundary
|
||||
|
||||
Apply the design system established in Phases 1-3 to every page in the app, delivering a consistent visual experience across all navigation paths. This covers all 9 pages: Login, Register, Categories, Template, Budget List, Budget Detail, Quick Add, Settings, and Dashboard. All pages adopt PageShell, consistent card/typography/color token usage, and full i18n coverage including German locale. No new features or backend changes.
|
||||
|
||||
</domain>
|
||||
|
||||
<decisions>
|
||||
## Implementation Decisions
|
||||
|
||||
### Auth pages (Login & Register)
|
||||
- Solid muted background color behind the centered card (not plain white, not gradient)
|
||||
- Card accent styling: Claude's discretion on whether top border, shadow, or ring treatment
|
||||
- App icon/logo above the title text for brand presence (icon asset or emoji/Lucide placeholder)
|
||||
- OAuth buttons (Google, GitHub) get provider SVG icons next to text labels
|
||||
- Pages remain standalone centered layout (outside AppLayout sidebar)
|
||||
|
||||
### BudgetDetail category sections
|
||||
- Migrate to semantic color tokens (`--color-on-budget`, `--color-over-budget`) replacing hardcoded `text-green-600`/`text-red-600`
|
||||
- Adopt direction-aware diff logic from Phase 3: spending types over when actual > budgeted, income under-earned when actual < budgeted
|
||||
- Visual style upgrade: left-border accent + badge chips to match dashboard CategorySection appearance
|
||||
- Collapsible behavior vs always-expanded: Claude's discretion based on editing context
|
||||
- Tier badges (Fixed/Variable/One-off): Claude's discretion on keep vs remove
|
||||
- Overall totals box: Claude's discretion on whether to use StatCards or keep as styled box
|
||||
|
||||
### Category group headers (Categories, Template, QuickAdd pages)
|
||||
- Group header styling upgrade: Claude's discretion on matching full dashboard CategorySection style (left-border card) vs enhanced dot style (larger dot, bolder label)
|
||||
- Template group totals placement (header badge vs table footer): Claude's discretion
|
||||
- BudgetList enrichment (card per budget vs table): Claude's discretion
|
||||
- Settings card structure (single vs multiple cards): Claude's discretion
|
||||
|
||||
### Page descriptions & polish
|
||||
- Page descriptions via PageShell description prop: Claude's discretion per-page on whether subtitle adds value
|
||||
- Empty states: Claude's discretion on whether to add icon/illustration treatment or keep text-only
|
||||
- Loading states: Add skeleton placeholders for all pages (replacing current `return null` loading states)
|
||||
- i18n: Locale-aware month formatting using `Intl.DateTimeFormat` with user's locale (e.g., "Marz 2026" in German)
|
||||
- All hardcoded English strings (month names, "Month"/"Year" labels) must get i18n keys in both en.json and de.json
|
||||
|
||||
### Claude's Discretion
|
||||
- Auth card accent treatment (top border vs shadow vs ring)
|
||||
- BudgetDetail: collapsible sections vs visual-style-only (always expanded)
|
||||
- BudgetDetail: keep or remove tier badges
|
||||
- BudgetDetail: overall totals as StatCards vs styled box
|
||||
- CRUD page group headers: dashboard-style cards vs enhanced dots
|
||||
- Template: group totals in header vs table footer
|
||||
- BudgetList: card layout vs table layout
|
||||
- Settings: single card vs multiple cards
|
||||
- Per-page description text decisions
|
||||
- Empty state visual treatment level
|
||||
- Skeleton component designs for each page type
|
||||
|
||||
</decisions>
|
||||
|
||||
<specifics>
|
||||
## Specific Ideas
|
||||
|
||||
No specific references — open to standard approaches within the established design system. User wants the app to feel visually unified when navigating between pages, with the dashboard as the "north star" for the design language.
|
||||
|
||||
</specifics>
|
||||
|
||||
<code_context>
|
||||
## Existing Code Insights
|
||||
|
||||
### Reusable Assets
|
||||
- `PageShell` (components/shared/PageShell.tsx): Title + optional description + CTA slot — ready to adopt on all authenticated pages
|
||||
- `CategorySection` (components/dashboard/): Left-border accent + badge chips + collapsible — potential reuse/adaptation for BudgetDetail and CRUD pages
|
||||
- `StatCard` / `SummaryStrip` (components/dashboard/): KPI cards — potential reuse on BudgetDetail totals
|
||||
- `DashboardSkeleton` (components/dashboard/): Pattern reference for building page-specific skeletons
|
||||
- `Skeleton` (ui/skeleton.tsx): shadcn primitive for building loading placeholders
|
||||
- `Badge` (ui/badge.tsx): Already used on Categories/Template/BudgetDetail for tier indicators
|
||||
- `Card` / `CardHeader` / `CardContent` (ui/card.tsx): Available for wrapping sections
|
||||
- `categoryColors` / `categoryLabels` (lib/palette.ts): CSS variable map and labels for all 6 types
|
||||
- `formatCurrency` (lib/format.ts): Currency formatting — already in use, no changes needed
|
||||
- `Separator` (ui/separator.tsx): Available for visual section breaks
|
||||
|
||||
### Established Patterns
|
||||
- Two-tier OKLCH color pattern: text ~0.55 lightness, fills ~0.65-0.70 (Phase 1)
|
||||
- Semantic status tokens: `--color-over-budget` (red), `--color-on-budget` (green) (Phase 1)
|
||||
- Components accept `t()` as prop to stay presentational (Phase 1)
|
||||
- Direction-aware diff logic: spending over when actual > budget, income/savings over when actual < budget (Phase 3)
|
||||
- Left-border accent card with badge chips for category group headers (Phase 3)
|
||||
- `useMemo` hooks before early returns for Rules of Hooks compliance (Phase 2)
|
||||
- Inline editing with InlineEditCell pattern (BudgetDetailPage)
|
||||
- Category grouping: `CATEGORY_TYPES.map(type => items.filter(by type))` pattern used across Categories, Template, BudgetDetail
|
||||
|
||||
### Integration Points
|
||||
- All authenticated pages render inside `AppLayout` > `SidebarInset` > `<main>` > `<Outlet>` — PageShell wraps content inside Outlet
|
||||
- Login/Register are standalone routes outside AppLayout — background treatment applies to their root div
|
||||
- `App.tsx`: Route definitions — no changes needed, just page component internals
|
||||
- i18n: `en.json` and `de.json` need new keys for page descriptions, loading states, and localized month names
|
||||
- `Intl.DateTimeFormat`: Available natively for locale-aware month formatting — replaces hardcoded English month arrays in BudgetListPage
|
||||
|
||||
</code_context>
|
||||
|
||||
<deferred>
|
||||
## Deferred Ideas
|
||||
|
||||
None — discussion stayed within phase scope.
|
||||
|
||||
</deferred>
|
||||
|
||||
---
|
||||
|
||||
*Phase: 04-full-app-design-consistency*
|
||||
*Context gathered: 2026-03-17*
|
||||
@@ -0,0 +1,646 @@
|
||||
# Phase 4: Full-App Design Consistency - Research
|
||||
|
||||
**Researched:** 2026-03-17
|
||||
**Domain:** React/TypeScript UI polish — pattern application, i18n completeness, skeleton loading states, auth page redesign
|
||||
**Confidence:** HIGH (all findings from direct codebase inspection — no external library uncertainty)
|
||||
|
||||
---
|
||||
|
||||
<user_constraints>
|
||||
## User Constraints (from CONTEXT.md)
|
||||
|
||||
### Locked Decisions
|
||||
|
||||
**Auth pages (Login & Register):**
|
||||
- Solid muted background color behind the centered card (not plain white, not gradient)
|
||||
- Card accent styling: Claude's discretion on whether top border, shadow, or ring treatment
|
||||
- App icon/logo above the title text for brand presence (icon asset or emoji/Lucide placeholder)
|
||||
- OAuth buttons (Google, GitHub) get provider SVG icons next to text labels
|
||||
- Pages remain standalone centered layout (outside AppLayout sidebar)
|
||||
|
||||
**BudgetDetail category sections:**
|
||||
- Migrate to semantic color tokens (`--color-on-budget`, `--color-over-budget`) replacing hardcoded `text-green-600`/`text-red-600`
|
||||
- Adopt direction-aware diff logic from Phase 3: spending types over when actual > budgeted, income under-earned when actual < budgeted
|
||||
- Visual style upgrade: left-border accent + badge chips to match dashboard CategorySection appearance
|
||||
- Collapsible behavior vs always-expanded: Claude's discretion based on editing context
|
||||
- Tier badges (Fixed/Variable/One-off): Claude's discretion on keep vs remove
|
||||
- Overall totals box: Claude's discretion on whether to use StatCards or keep as styled box
|
||||
|
||||
**Category group headers (Categories, Template, QuickAdd pages):**
|
||||
- Group header styling upgrade: Claude's discretion on matching full dashboard CategorySection style (left-border card) vs enhanced dot style (larger dot, bolder label)
|
||||
- Template group totals placement (header badge vs table footer): Claude's discretion
|
||||
- BudgetList enrichment (card per budget vs table): Claude's discretion
|
||||
- Settings card structure (single vs multiple cards): Claude's discretion
|
||||
|
||||
**Page descriptions & polish:**
|
||||
- Page descriptions via PageShell description prop: Claude's discretion per-page on whether subtitle adds value
|
||||
- Empty states: Claude's discretion on whether to add icon/illustration treatment or keep text-only
|
||||
- Loading states: Add skeleton placeholders for all pages (replacing current `return null` loading states)
|
||||
- i18n: Locale-aware month formatting using `Intl.DateTimeFormat` with user's locale (e.g., "Marz 2026" in German)
|
||||
- All hardcoded English strings (month names, "Month"/"Year" labels) must get i18n keys in both en.json and de.json
|
||||
|
||||
### Claude's Discretion
|
||||
- Auth card accent treatment (top border vs shadow vs ring)
|
||||
- BudgetDetail: collapsible sections vs visual-style-only (always expanded)
|
||||
- BudgetDetail: keep or remove tier badges
|
||||
- BudgetDetail: overall totals as StatCards vs styled box
|
||||
- CRUD page group headers: dashboard-style cards vs enhanced dots
|
||||
- Template: group totals in header vs table footer
|
||||
- BudgetList: card layout vs table layout
|
||||
- Settings: single card vs multiple cards
|
||||
- Per-page description text decisions
|
||||
- Empty state visual treatment level
|
||||
- Skeleton component designs for each page type
|
||||
|
||||
### Deferred Ideas (OUT OF SCOPE)
|
||||
None — discussion stayed within phase scope.
|
||||
</user_constraints>
|
||||
|
||||
---
|
||||
|
||||
<phase_requirements>
|
||||
## Phase Requirements
|
||||
|
||||
| ID | Description | Research Support |
|
||||
|----|-------------|-----------------|
|
||||
| UI-DESIGN-01 | All 9 pages use PageShell with consistent typography, card style, and color token usage | PageShell already exists in shared/PageShell.tsx — 7 of 9 pages need it wired in; DashboardPage already uses it |
|
||||
| UI-AUTH-01 | Login and Register pages have refreshed visual design matching dashboard card/color patterns | Both pages use plain `bg-background` — need `bg-muted` background + card accent treatment + app logo/icon |
|
||||
| UI-CATEGORIES-01 | Categories page group headers upgraded to match design system | CategoriesPage uses plain dot+label headers — upgrade to left-border card or enhanced dot style |
|
||||
| UI-TEMPLATE-01 | Template page group headers upgraded and totals displayed | TemplatePage uses same plain dot+label headers as Categories |
|
||||
| UI-BUDGETS-01 | BudgetDetail displays category groups with color-accented cards and semantic diff tokens | BudgetDetailPage uses hardcoded `text-green-600`/`text-red-600` + plain dot headers + no semantic tokens |
|
||||
| UI-QUICKADD-01 | Quick Add page uses PageShell with consistent styling | QuickAddPage has no group headers (flat list) — primarily needs PageShell + possible restructure |
|
||||
| UI-SETTINGS-01 | Settings page uses PageShell with consistent styling | SettingsPage has no PageShell, has a Card already but redundant h1+CardTitle |
|
||||
| UI-RESPONSIVE-01 | Navigating between any two pages produces no jarring visual discontinuity | All pages need consistent gap/spacing, same PageShell header heights, same font sizing |
|
||||
</phase_requirements>
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
Phase 4 is a pure polish and pattern-application phase — no new features, no backend changes. The design system (OKLCH color tokens, semantic status tokens, CategorySection component, PageShell) is fully established in Phases 1–3. The work is applying it uniformly to all 9 pages.
|
||||
|
||||
The current state has a clear divide: DashboardPage is the polished reference, and all other authenticated pages are functional-but-unstyled first-drafts. Seven pages have inline `<h1>` headings instead of PageShell. Six pages return `null` while loading instead of showing skeletons. BudgetDetailPage has hardcoded Tailwind color classes (`text-green-600`, `text-red-600`) that bypass the established semantic token system. Auth pages have a plain `bg-background` root div where the design spec calls for `bg-muted`.
|
||||
|
||||
The `favicon.svg` in `/public/` is a real stylized lightning-bolt SVG with the app's purple brand color (`#863bff`) — this is the logo asset to use above the auth card title. No additional icon asset is needed.
|
||||
|
||||
There is no test infrastructure in this project (no test files, no test framework configured). `nyquist_validation` is enabled in config.json, so this section must be addressed, but with a note that all validation is manual/visual for a UI-only phase.
|
||||
|
||||
**Primary recommendation:** Treat this phase as 9 small, sequential page upgrades. Apply PageShell + skeleton + i18n cleanup as a checklist across each page. Use direct codebase inspection — not external research — as the source of truth.
|
||||
|
||||
---
|
||||
|
||||
## Standard Stack
|
||||
|
||||
### Core (already installed — no new dependencies needed)
|
||||
|
||||
| Library | Version | Purpose | Why Standard |
|
||||
|---------|---------|---------|--------------|
|
||||
| React | 19.2.4 | Component rendering | Project foundation |
|
||||
| react-i18next | 16.5.8 | i18n translation hook `useTranslation` | Already in use project-wide |
|
||||
| Tailwind CSS | 4.2.1 | Utility classes | Project styling system |
|
||||
| shadcn/ui primitives | (radix-ui 1.4.3) | Card, Badge, Skeleton, Button, etc. | Already installed and used |
|
||||
| lucide-react | 0.577.0 | Icons (including logo placeholder) | Already in use project-wide |
|
||||
|
||||
### Supporting
|
||||
|
||||
| Library | Version | Purpose | When to Use |
|
||||
|---------|---------|---------|-------------|
|
||||
| `Intl.DateTimeFormat` | Native browser API | Locale-aware month/year formatting | Replace hardcoded English month arrays in BudgetListPage and BudgetDetailPage |
|
||||
|
||||
### Alternatives Considered
|
||||
|
||||
| Instead of | Could Use | Tradeoff |
|
||||
|------------|-----------|----------|
|
||||
| `Intl.DateTimeFormat` | date-fns or dayjs | No new dependency needed — native API does exactly what's required (month+year locale formatting) |
|
||||
| Lucide `Zap` icon for auth logo | Custom SVG import from `/public/favicon.svg` | The favicon.svg is a real brand asset — using an `<img src="/favicon.svg">` is simpler and more authentic than a Lucide icon |
|
||||
|
||||
**Installation:** No new packages needed.
|
||||
|
||||
---
|
||||
|
||||
## Architecture Patterns
|
||||
|
||||
### Recommended Project Structure
|
||||
No structural changes. All new/modified files fit within the existing layout:
|
||||
```
|
||||
src/
|
||||
├── components/
|
||||
│ ├── shared/
|
||||
│ │ └── PageShell.tsx # Already exists — use as-is
|
||||
│ └── dashboard/
|
||||
│ ├── CategorySection.tsx # Reuse in BudgetDetailPage
|
||||
│ └── DashboardSkeleton.tsx # Reference for new skeletons
|
||||
├── pages/
|
||||
│ ├── LoginPage.tsx # Redesign auth card
|
||||
│ ├── RegisterPage.tsx # Redesign auth card
|
||||
│ ├── BudgetDetailPage.tsx # Upgrade group headers + diff tokens
|
||||
│ ├── BudgetListPage.tsx # Add PageShell + i18n month names
|
||||
│ ├── CategoriesPage.tsx # Add PageShell + header upgrade
|
||||
│ ├── TemplatePage.tsx # Add PageShell + header upgrade
|
||||
│ ├── QuickAddPage.tsx # Add PageShell
|
||||
│ └── SettingsPage.tsx # Wrap with PageShell, fix duplication
|
||||
└── i18n/
|
||||
├── en.json # Add month/year i18n keys, page descriptions
|
||||
└── de.json # German equivalents
|
||||
```
|
||||
|
||||
### Pattern 1: PageShell Adoption (7 pages)
|
||||
|
||||
**What:** Replace each page's inline `<div>` + `<h1>` + action button header with `<PageShell title={t("...")} action={<Button>}>`
|
||||
|
||||
**When to use:** Every authenticated page (all pages inside AppLayout)
|
||||
|
||||
**Current pattern to replace:**
|
||||
```tsx
|
||||
// Before — every CRUD page looks like this:
|
||||
<div>
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<h1 className="text-2xl font-semibold">{t("categories.title")}</h1>
|
||||
<Button onClick={openCreate} size="sm">...</Button>
|
||||
</div>
|
||||
{/* content */}
|
||||
</div>
|
||||
```
|
||||
|
||||
**Target pattern:**
|
||||
```tsx
|
||||
// After — consistent with DashboardPage
|
||||
import { PageShell } from "@/components/shared/PageShell"
|
||||
|
||||
return (
|
||||
<PageShell
|
||||
title={t("categories.title")}
|
||||
description={t("categories.description")} // optional
|
||||
action={<Button onClick={openCreate} size="sm">...</Button>}
|
||||
>
|
||||
{/* content */}
|
||||
</PageShell>
|
||||
)
|
||||
```
|
||||
|
||||
**Note:** SettingsPage already has a `Card` inside — the redundant `<h1>` heading above the card should be removed when wrapping with PageShell. The CardTitle inside can become the section header.
|
||||
|
||||
### Pattern 2: Skeleton Loading States (6 pages)
|
||||
|
||||
**What:** Replace `if (loading) return null` with a page-appropriate skeleton
|
||||
|
||||
**Current state:** 6 pages use `return null` as loading state:
|
||||
- CategoriesPage — `if (loading) return null`
|
||||
- TemplatePage — `if (loading) return null`
|
||||
- BudgetListPage — `if (loading) return null`
|
||||
- BudgetDetailPage — `if (loading) return null`
|
||||
- QuickAddPage — `if (loading) return null`
|
||||
- SettingsPage — `if (loading) return null`
|
||||
|
||||
**DashboardSkeleton as pattern reference:**
|
||||
```tsx
|
||||
// Source: src/components/dashboard/DashboardSkeleton.tsx
|
||||
// Pattern: Skeleton primitive wrapped in Card layout to mirror real content shape
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { Card, CardContent, CardHeader } from "@/components/ui/card"
|
||||
|
||||
// Table page skeleton (Categories, Template, BudgetDetail, QuickAdd):
|
||||
function TablePageSkeleton() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Mimics group header shape */}
|
||||
<div className="flex items-center gap-3 rounded-md border-l-4 border-muted bg-card px-4 py-3">
|
||||
<Skeleton className="h-4 w-32" />
|
||||
</div>
|
||||
{/* Mimics table rows */}
|
||||
{[1, 2, 3].map((i) => (
|
||||
<div key={i} className="flex items-center gap-4 px-4 py-2">
|
||||
<Skeleton className="h-4 w-40" />
|
||||
<Skeleton className="ml-auto h-4 w-20" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
**Rule of Hooks compliance:** Skeletons must be returned AFTER all hooks have been called. The existing pages already follow this — `return null` always appears after all `useState`/`useEffect`/derived-state code.
|
||||
|
||||
### Pattern 3: Auth Page Redesign
|
||||
|
||||
**What:** Upgrade Login and Register from plain `bg-background` to brand-presence auth layout
|
||||
|
||||
**Current state:**
|
||||
```tsx
|
||||
// LoginPage.tsx (line 35) — plain white background
|
||||
<div className="flex min-h-screen items-center justify-center bg-background p-4">
|
||||
<Card className="w-full max-w-sm">
|
||||
<CardHeader className="text-center">
|
||||
<CardTitle className="text-2xl">{t("app.title")}</CardTitle>
|
||||
</CardHeader>
|
||||
```
|
||||
|
||||
**Target pattern:**
|
||||
```tsx
|
||||
// Muted background + logo above title + card accent
|
||||
<div className="flex min-h-screen items-center justify-center bg-muted/60 p-4">
|
||||
<Card className="w-full max-w-sm border-t-4 border-t-primary">
|
||||
<CardHeader className="text-center">
|
||||
<img src="/favicon.svg" alt="SimpleFinanceDash" className="mx-auto mb-3 size-10" />
|
||||
<CardTitle className="text-2xl">{t("app.title")}</CardTitle>
|
||||
</CardHeader>
|
||||
```
|
||||
|
||||
**OAuth provider icons:** Add SVG inline icons for Google and GitHub next to button text labels. Standard approach is a small inline SVG (16x16) or use a well-known path. Both Google G and GitHub Octocat have canonical simple SVG marks.
|
||||
|
||||
### Pattern 4: BudgetDetail — Semantic Token Migration
|
||||
|
||||
**What:** Replace DifferenceCell's hardcoded color classes with semantic tokens
|
||||
|
||||
**Current problem code (BudgetDetailPage.tsx lines 169–173):**
|
||||
```tsx
|
||||
const color =
|
||||
diff > 0
|
||||
? "text-green-600 dark:text-green-400"
|
||||
: diff < 0
|
||||
? "text-red-600 dark:text-red-400"
|
||||
: "text-muted-foreground"
|
||||
```
|
||||
|
||||
**Correct pattern (matching CategorySection):**
|
||||
```tsx
|
||||
// Use the same tokens established in Phase 1
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
// isOver uses same direction-aware logic as CategorySection
|
||||
const isOver = isSpendingType(type) ? actual > budgeted : actual < budgeted
|
||||
const colorClass = isOver ? "text-over-budget" : diff !== 0 ? "text-on-budget" : "text-muted-foreground"
|
||||
```
|
||||
|
||||
**Note on `text-on-budget` vs `text-muted-foreground`:** The CategorySection uses `text-on-budget` for non-over items in the header but `text-muted-foreground` for non-over item rows in the table body. For consistency, replicate that exact distinction.
|
||||
|
||||
### Pattern 5: Group Header Upgrade (CategoriesPage, TemplatePage, BudgetDetailPage)
|
||||
|
||||
**Current state:** All three CRUD pages use the same small-dot pattern:
|
||||
```tsx
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<div className="size-3 rounded-full" style={{ backgroundColor: categoryColors[type] }} />
|
||||
<h2 className="text-sm font-medium text-muted-foreground">
|
||||
{t(`categories.types.${type}`)}
|
||||
</h2>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Recommended upgrade (enhanced dot — not full CategorySection card):** For CRUD pages, a full left-border card with collapse is excessive (editing context favors always-expanded). Use a larger dot with bolder label for visual consistency without the overhead:
|
||||
```tsx
|
||||
<div className="mb-2 flex items-center gap-3 border-l-4 bg-muted/30 px-3 py-2 rounded-sm"
|
||||
style={{ borderLeftColor: categoryColors[type] }}>
|
||||
<span className="text-sm font-semibold">{t(`categories.types.${type}`)}</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
This matches the left-border accent visual language without the collapsible trigger complexity. CRUD pages are editing interfaces — always-expanded is correct UX.
|
||||
|
||||
### Pattern 6: i18n — Locale-Aware Month Formatting
|
||||
|
||||
**What:** Replace hardcoded English month arrays and label strings with `Intl.DateTimeFormat`
|
||||
|
||||
**Current problem in BudgetListPage.tsx (lines 36–49):**
|
||||
```tsx
|
||||
// Hardcoded English month labels
|
||||
const MONTHS = [
|
||||
{ value: 1, label: "January" },
|
||||
// ... 11 more hardcoded English strings
|
||||
]
|
||||
```
|
||||
And the dialog labels (lines 189, 210): `<Label>Month</Label>` and `<Label>Year</Label>` — hardcoded English.
|
||||
|
||||
**Current problem in BudgetDetailPage.tsx (line 279):**
|
||||
```tsx
|
||||
return date.toLocaleDateString("en", { month: "long", year: "numeric" })
|
||||
// Hardcoded "en" locale — always English regardless of user's language setting
|
||||
```
|
||||
|
||||
**Correct pattern:**
|
||||
```tsx
|
||||
// Use the i18n hook to get the active locale
|
||||
const { i18n } = useTranslation()
|
||||
const locale = i18n.language // "en" or "de"
|
||||
|
||||
// Locale-aware month name generation
|
||||
const monthOptions = Array.from({ length: 12 }, (_, i) => ({
|
||||
value: i + 1,
|
||||
label: new Intl.DateTimeFormat(locale, { month: "long" }).format(new Date(2000, i, 1)),
|
||||
}))
|
||||
|
||||
// Locale-aware budget heading
|
||||
function budgetHeading(startDate: string, locale: string): string {
|
||||
const [year, month] = startDate.split("-").map(Number)
|
||||
return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" })
|
||||
.format(new Date(year ?? 0, (month ?? 1) - 1, 1))
|
||||
}
|
||||
```
|
||||
|
||||
**New i18n keys needed for month dialog labels:**
|
||||
```json
|
||||
// en.json additions
|
||||
"budgets": {
|
||||
"month": "Month",
|
||||
"year": "Year"
|
||||
}
|
||||
|
||||
// de.json equivalents
|
||||
"budgets": {
|
||||
"month": "Monat",
|
||||
"year": "Jahr"
|
||||
}
|
||||
```
|
||||
|
||||
### Anti-Patterns to Avoid
|
||||
|
||||
- **Returning `null` during loading:** Every page currently does `if (loading) return null` — replace all with skeleton components. This is the most visible UX gap.
|
||||
- **Hardcoded locale string `"en"` in `toLocaleDateString`:** BudgetDetailPage line 279 and BudgetListPage's `budgetLabel` helper both force English formatting. Must use `i18n.language` instead.
|
||||
- **Inline `<h1>` + action div:** 7 pages duplicate the exact pattern that PageShell was built to replace. Don't leave any of these after this phase.
|
||||
- **Hardcoded `text-green-600` / `text-red-600`:** BudgetDetailPage `DifferenceCell` component bypasses the semantic token system established in Phase 1. This breaks dark mode and design consistency.
|
||||
- **Double heading in SettingsPage:** SettingsPage has both `<h1 className="mb-6 text-2xl font-semibold">` and `<CardTitle>` both showing "Settings" — wrap with PageShell and remove the redundant `h1`.
|
||||
|
||||
---
|
||||
|
||||
## Don't Hand-Roll
|
||||
|
||||
| Problem | Don't Build | Use Instead | Why |
|
||||
|---------|-------------|-------------|-----|
|
||||
| Locale-aware month names | Custom `MONTHS` array with translations | `Intl.DateTimeFormat` | Already returns localized month names in any locale; zero maintenance |
|
||||
| Loading placeholder UI | Custom spinners or CSS animations | `Skeleton` from `ui/skeleton.tsx` | Already installed, same design language as DashboardSkeleton |
|
||||
| Auth page logo | New SVG asset or Lucide icon | `/public/favicon.svg` via `<img>` | Brand asset already exists, consistent with browser tab favicon |
|
||||
| Direction-aware diff logic | New computation function | Extract from `CategorySection.tsx` (or import `computeDiff`) | Logic is already correct and battle-tested in Phase 3 |
|
||||
| Group header card styling | New component | Inline left-border pattern from CategorySection's trigger element | Consistent look without creating a new abstraction |
|
||||
|
||||
**Key insight:** This phase adds no new libraries and creates minimal new abstractions. Almost everything needed is already in the codebase.
|
||||
|
||||
---
|
||||
|
||||
## Common Pitfalls
|
||||
|
||||
### Pitfall 1: Rules of Hooks — `return null` to Skeleton Migration
|
||||
**What goes wrong:** Moving `if (loading) return null` to return a Skeleton component without checking that all hooks come before the condition.
|
||||
**Why it happens:** React requires all hooks to be called unconditionally on every render. If `return null` is currently AFTER all hooks, swapping to `return <Skeleton>` is safe. But if any hook was accidentally placed after the loading check, switching breaks the rules.
|
||||
**How to avoid:** Verify each page's hook ordering before replacing. In this codebase, all 6 pages that use `return null` have their hooks before the check (confirmed by code inspection). Safe to swap directly.
|
||||
**Warning signs:** TypeScript/eslint `react-hooks/rules-of-hooks` lint error.
|
||||
|
||||
### Pitfall 2: `i18n.language` vs `navigator.language`
|
||||
**What goes wrong:** Using `navigator.language` for locale instead of `i18n.language`, causing month names to display in the system locale rather than the user's chosen app locale.
|
||||
**Why it happens:** Both are "the user's language" but they represent different things — system preference vs app preference.
|
||||
**How to avoid:** Always use `i18n.language` from `useTranslation()` for `Intl.DateTimeFormat` locale argument. The user's locale preference is stored in their Supabase profile and applied via `i18n.changeLanguage()` in SettingsPage.
|
||||
|
||||
### Pitfall 3: SettingsPage Double-Header
|
||||
**What goes wrong:** Wrapping SettingsPage in `<PageShell title={t("settings.title")}>` without removing the existing `<h1 className="mb-6 text-2xl font-semibold">`, producing two "Settings" headings.
|
||||
**Why it happens:** SettingsPage is the only page that already has a Card structure — it's tempting to just prepend PageShell and leave existing content.
|
||||
**How to avoid:** Remove the `<h1>` on line 67 of SettingsPage when adding PageShell.
|
||||
|
||||
### Pitfall 4: BudgetDetail DifferenceCell isIncome Logic vs Direction-Aware Logic
|
||||
**What goes wrong:** The existing `DifferenceCell` uses a simplified `isIncome` boolean prop. Upgrading to the full direction-aware logic from Phase 3 must be consistent — `saving` and `investment` types should behave like income (under-earned = over-budget), not like expenses.
|
||||
**Why it happens:** The existing code only checks `isIncome` (type === "income"), missing saving/investment types.
|
||||
**How to avoid:** Use the same `SPENDING_TYPES: CategoryType[] = ["bill", "variable_expense", "debt"]` pattern from `CategorySection.tsx`. Any type NOT in this array uses the income/saving logic.
|
||||
**Warning signs:** Savings showing red when you've saved MORE than budgeted.
|
||||
|
||||
### Pitfall 5: Auth Card Background Mismatch
|
||||
**What goes wrong:** Using `bg-muted` (the Tailwind utility class) which maps to `--color-muted` (oklch 0.95) on top of `bg-background` (oklch 0.98) — the contrast is very subtle. If the wrong token is used, the intended visual separation disappears.
|
||||
**Why it happens:** The muted background needs enough contrast to make the white card "float."
|
||||
**How to avoid:** Use `bg-muted/60` or `bg-secondary` instead. `--color-secondary` is oklch 0.93 vs card white oklch 1.0 — clearer separation. Or use `bg-muted` with a subtle shadow on the card.
|
||||
|
||||
### Pitfall 6: Missing i18n Keys Causing Raw Key Strings
|
||||
**What goes wrong:** Adding new translation calls (`t("budgets.month")`) before adding the key to both `en.json` and `de.json` — causes the raw key string to render on screen.
|
||||
**Why it happens:** It's easy to forget `de.json` when `en.json` is the primary authoring language.
|
||||
**How to avoid:** Always update both files atomically in the same task. The phase success criterion explicitly requires no raw i18n key strings in German locale.
|
||||
|
||||
---
|
||||
|
||||
## Code Examples
|
||||
|
||||
Verified patterns from existing codebase:
|
||||
|
||||
### PageShell API (src/components/shared/PageShell.tsx)
|
||||
```tsx
|
||||
// PageShell signature — already final, no changes needed to the component itself
|
||||
interface PageShellProps {
|
||||
title: string
|
||||
description?: string // optional subtitle below title
|
||||
action?: React.ReactNode // CTA slot (buttons, etc.)
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
// Usage (from DashboardPage.tsx — the reference implementation):
|
||||
<PageShell
|
||||
title={t("dashboard.title")}
|
||||
action={<MonthNavigator availableMonths={availableMonths} t={t} />}
|
||||
>
|
||||
{/* page content */}
|
||||
</PageShell>
|
||||
```
|
||||
|
||||
### Skeleton Primitive (src/components/ui/skeleton.tsx)
|
||||
```tsx
|
||||
// Available for import in all page skeletons
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
|
||||
// Example: table row skeleton (for CategoriesPage, TemplatePage, etc.)
|
||||
function TableRowSkeleton() {
|
||||
return (
|
||||
<div className="flex items-center gap-4 px-4 py-2.5 border-b border-border">
|
||||
<Skeleton className="h-4 w-36" />
|
||||
<Skeleton className="h-5 w-16 rounded-full" />
|
||||
<Skeleton className="ml-auto h-7 w-7 rounded-md" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Group Header Upgrade Pattern
|
||||
```tsx
|
||||
// Upgrade from plain dot to left-border accent header
|
||||
// Before (all CRUD pages):
|
||||
<div className="mb-2 flex items-center gap-2">
|
||||
<div className="size-3 rounded-full" style={{ backgroundColor: categoryColors[type] }} />
|
||||
<h2 className="text-sm font-medium text-muted-foreground">
|
||||
{t(`categories.types.${type}`)}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
// After (enhanced dot — keeps always-expanded for editing context):
|
||||
<div
|
||||
className="mb-2 flex items-center gap-3 rounded-sm border-l-4 bg-muted/30 px-3 py-2"
|
||||
style={{ borderLeftColor: categoryColors[type] }}
|
||||
>
|
||||
<span className="text-sm font-semibold">{t(`categories.types.${type}`)}</span>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Semantic Token Migration (BudgetDetailPage)
|
||||
```tsx
|
||||
// Before (hardcoded Tailwind colors — bypasses design tokens):
|
||||
const color =
|
||||
diff > 0 ? "text-green-600 dark:text-green-400"
|
||||
: diff < 0 ? "text-red-600 dark:text-red-400"
|
||||
: "text-muted-foreground"
|
||||
|
||||
// After (semantic tokens — consistent with CategorySection):
|
||||
// SPENDING_TYPES same as in CategorySection.tsx
|
||||
const SPENDING_TYPES: CategoryType[] = ["bill", "variable_expense", "debt"]
|
||||
function isOver(type: CategoryType, budgeted: number, actual: number): boolean {
|
||||
return SPENDING_TYPES.includes(type) ? actual > budgeted : actual < budgeted
|
||||
}
|
||||
// In render:
|
||||
const over = isOver(type, item.budgeted_amount, item.actual_amount)
|
||||
const colorClass = cn(
|
||||
"text-right tabular-nums",
|
||||
over ? "text-over-budget" : diff !== 0 ? "text-on-budget" : "text-muted-foreground"
|
||||
)
|
||||
```
|
||||
|
||||
### Locale-Aware Month Name (replaces hardcoded MONTHS array)
|
||||
```tsx
|
||||
// In BudgetListPage — replaces the 12-item MONTHS constant:
|
||||
const { i18n } = useTranslation()
|
||||
const locale = i18n.language // "en" | "de"
|
||||
|
||||
const monthItems = useMemo(
|
||||
() =>
|
||||
Array.from({ length: 12 }, (_, i) => ({
|
||||
value: i + 1,
|
||||
label: new Intl.DateTimeFormat(locale, { month: "long" }).format(
|
||||
new Date(2000, i, 1)
|
||||
),
|
||||
})),
|
||||
[locale]
|
||||
)
|
||||
|
||||
// In BudgetDetailPage and BudgetListPage — replaces hardcoded "en" locale:
|
||||
function budgetHeading(startDate: string, locale: string): string {
|
||||
const [year, month] = startDate.split("-").map(Number)
|
||||
return new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }).format(
|
||||
new Date(year ?? 0, (month ?? 1) - 1, 1)
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### Auth Page Redesign Structure
|
||||
```tsx
|
||||
// LoginPage / RegisterPage root structure
|
||||
<div className="flex min-h-screen items-center justify-center bg-muted/60 p-4">
|
||||
<Card className="w-full max-w-sm border-t-4 border-t-primary shadow-lg">
|
||||
<CardHeader className="text-center pb-4">
|
||||
{/* App logo from public/favicon.svg */}
|
||||
<img
|
||||
src="/favicon.svg"
|
||||
alt="SimpleFinanceDash"
|
||||
className="mx-auto mb-3 size-10"
|
||||
aria-hidden
|
||||
/>
|
||||
<CardTitle className="text-2xl">{t("app.title")}</CardTitle>
|
||||
<p className="text-sm text-muted-foreground">{t("auth.loginSubtitle")}</p>
|
||||
</CardHeader>
|
||||
{/* ... existing form content ... */}
|
||||
</Card>
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## State of the Art
|
||||
|
||||
| Old Approach | Current Approach | When Changed | Impact |
|
||||
|--------------|------------------|--------------|--------|
|
||||
| No loading state (return null) | Skeleton components | Phase 4 | Users see content-shaped placeholders instead of blank pages |
|
||||
| Hardcoded color classes | Semantic CSS tokens | Phase 1 (dashboard), Phase 4 extends to BudgetDetail | Dark mode support, single-source-of-truth for status colors |
|
||||
| Hardcoded "en" locale | `i18n.language` locale | Phase 4 | Month names now display in German when locale is "de" |
|
||||
| Inline h1 + action div | PageShell component | Phase 4 extends Phase 1's PageShell | Consistent header height and spacing across all pages |
|
||||
| Plain auth background | Muted background + brand logo | Phase 4 | Auth pages feel part of the same app, not a generic template |
|
||||
|
||||
**Still current (no change needed):**
|
||||
- `formatCurrency` — already locale-aware via Intl.NumberFormat (no changes needed)
|
||||
- `categoryColors` / `categoryLabels` in palette.ts — complete and correct
|
||||
- AppLayout sidebar — no changes needed, routes unchanged
|
||||
- `collapsible-open` / `collapsible-close` animations — complete and correct
|
||||
|
||||
---
|
||||
|
||||
## Open Questions
|
||||
|
||||
1. **BudgetDetail: Keep or remove TierBadge?**
|
||||
- What we know: TierBadge shows Fixed/Variable/One-off on each line item. This metadata is useful for planning but adds visual noise when tracking actuals.
|
||||
- What's unclear: Whether the "editing actuals" context of BudgetDetailPage makes the tier less useful than in TemplatePage.
|
||||
- Recommendation: Remove tier column from BudgetDetailPage to reduce visual noise and align with the CategorySection display style (which shows no tier). Keep tier in TemplatePage since it's a planning interface.
|
||||
|
||||
2. **BudgetDetail: Collapsible or always-expanded?**
|
||||
- What we know: BudgetDetailPage is an editing interface where users click inline cells to edit actual amounts. Collapsing sections would require an extra click before editing.
|
||||
- What's unclear: Whether the always-expanded view with full left-border card headers is sufficient, or whether the visual match to the dashboard collapsible style is more important.
|
||||
- Recommendation: Always-expanded with left-border headers. The visual upgrade (left-border cards, semantic tokens, badge chips) delivers the design consistency without the UX cost of collapsing an editing interface.
|
||||
|
||||
3. **BudgetDetail: StatCards or styled box for overall totals?**
|
||||
- What we know: The current "overall totals" is a `rounded-md border p-4` div with a 3-column grid.
|
||||
- What's unclear: Whether StatCard's Card+CardHeader+CardContent structure adds meaningful value over the existing styled box.
|
||||
- Recommendation: Keep styled box but upgrade to semantic tokens for the difference color. StatCards are designed for KPI highlight panels (like SummaryStrip) — a dense summary row inside a detail page fits better as a styled section.
|
||||
|
||||
---
|
||||
|
||||
## Validation Architecture
|
||||
|
||||
> `nyquist_validation` is enabled in `.planning/config.json`. However, this phase is 100% visual UI polish — no new logic, no new data flows, no new API calls. There are no automated tests in this project and none of the changes are unit-testable in the traditional sense.
|
||||
|
||||
### Test Framework
|
||||
| Property | Value |
|
||||
|----------|-------|
|
||||
| Framework | None — no test framework configured |
|
||||
| Config file | None |
|
||||
| Quick run command | `bun run build` (TypeScript compile + Vite build — catches type errors) |
|
||||
| Full suite command | `bun run build && bun run lint` |
|
||||
|
||||
### Phase Requirements → Test Map
|
||||
| Req ID | Behavior | Test Type | Automated Command | File Exists? |
|
||||
|--------|----------|-----------|-------------------|-------------|
|
||||
| UI-DESIGN-01 | All 9 pages render with PageShell header | Visual/manual | `bun run build` (no TS errors) | ❌ Wave 0 |
|
||||
| UI-AUTH-01 | Auth pages show muted bg + logo + accent card | Visual/manual | `bun run build` | ❌ Wave 0 |
|
||||
| UI-CATEGORIES-01 | Categories group headers have left-border accent | Visual/manual | `bun run build` | ❌ Wave 0 |
|
||||
| UI-TEMPLATE-01 | Template group headers upgraded | Visual/manual | `bun run build` | ❌ Wave 0 |
|
||||
| UI-BUDGETS-01 | BudgetDetail uses semantic tokens, no text-green-600 | `grep` check | `grep -r "text-green-600" src/pages/BudgetDetailPage.tsx \|\| echo "CLEAN"` | ❌ Wave 0 |
|
||||
| UI-QUICKADD-01 | QuickAdd page renders PageShell | Visual/manual | `bun run build` | ❌ Wave 0 |
|
||||
| UI-SETTINGS-01 | Settings page uses PageShell, no double heading | Visual/manual | `bun run build` | ❌ Wave 0 |
|
||||
| UI-RESPONSIVE-01 | No visual discontinuity between pages | Visual/manual | Manual browser navigation | ❌ Wave 0 |
|
||||
|
||||
### Sampling Rate
|
||||
- **Per task commit:** `bun run build` — TypeScript compile validates no type regressions
|
||||
- **Per wave merge:** `bun run build && bun run lint`
|
||||
- **Phase gate:** Manual browser review of all 9 pages in English and German locale before `/gsd:verify-work`
|
||||
|
||||
### Wave 0 Gaps
|
||||
- No test files to create — this phase has no unit-testable logic
|
||||
- Recommend a manual checklist in VERIFY.md covering: all 9 pages load without null flash, German locale shows no raw keys, BudgetDetail shows no text-green-600/text-red-600 classes in DevTools
|
||||
|
||||
---
|
||||
|
||||
## Sources
|
||||
|
||||
### Primary (HIGH confidence)
|
||||
- Direct codebase inspection of all 9 page files — source of all findings
|
||||
- `src/index.css` — confirmed all OKLCH tokens, semantic status tokens, animation tokens
|
||||
- `src/i18n/en.json` and `de.json` — confirmed missing keys (month, year, page descriptions)
|
||||
- `src/components/shared/PageShell.tsx` — confirmed interface and implementation
|
||||
- `src/components/dashboard/CategorySection.tsx` — reference pattern for group headers
|
||||
- `src/components/dashboard/DashboardSkeleton.tsx` — reference pattern for skeletons
|
||||
- `src/lib/palette.ts` — confirmed `categoryColors` CSS variable map
|
||||
- `package.json` — confirmed no test framework is installed
|
||||
|
||||
### Secondary (MEDIUM confidence)
|
||||
- MDN Web Docs pattern: `Intl.DateTimeFormat` for locale-aware month names — standard browser API, zero risk
|
||||
|
||||
### Tertiary (LOW confidence)
|
||||
- None
|
||||
|
||||
---
|
||||
|
||||
## Metadata
|
||||
|
||||
**Confidence breakdown:**
|
||||
- Standard stack: HIGH — no new libraries, all from direct package.json inspection
|
||||
- Architecture: HIGH — all patterns derived from existing codebase, not external research
|
||||
- Pitfalls: HIGH — all identified from actual code in the repo (specific file + line references)
|
||||
- i18n patterns: HIGH — Intl.DateTimeFormat is a stable native API
|
||||
|
||||
**Research date:** 2026-03-17
|
||||
**Valid until:** Stable — no external dependencies to go stale. Re-verify only if major packages are upgraded.
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
phase: 4
|
||||
slug: full-app-design-consistency
|
||||
status: draft
|
||||
nyquist_compliant: false
|
||||
wave_0_complete: false
|
||||
created: 2026-03-17
|
||||
---
|
||||
|
||||
# Phase 4 — Validation Strategy
|
||||
|
||||
> Per-phase validation contract for feedback sampling during execution.
|
||||
|
||||
---
|
||||
|
||||
## Test Infrastructure
|
||||
|
||||
| Property | Value |
|
||||
|----------|-------|
|
||||
| **Framework** | None — no test framework configured |
|
||||
| **Config file** | None |
|
||||
| **Quick run command** | `bun run build` |
|
||||
| **Full suite command** | `bun run build && bun run lint` |
|
||||
| **Estimated runtime** | ~10 seconds |
|
||||
|
||||
---
|
||||
|
||||
## Sampling Rate
|
||||
|
||||
- **After every task commit:** Run `bun run build`
|
||||
- **After every plan wave:** Run `bun run build && bun run lint`
|
||||
- **Before `/gsd:verify-work`:** Full suite must be green
|
||||
- **Max feedback latency:** 10 seconds
|
||||
|
||||
---
|
||||
|
||||
## Per-Task Verification Map
|
||||
|
||||
| Task ID | Plan | Wave | Requirement | Test Type | Automated Command | File Exists | Status |
|
||||
|---------|------|------|-------------|-----------|-------------------|-------------|--------|
|
||||
| 04-01-01 | 01 | 1 | UI-AUTH-01 | visual/build | `bun run build` | N/A | ⬜ pending |
|
||||
| 04-01-02 | 01 | 1 | UI-DESIGN-01 | visual/build | `bun run build` | N/A | ⬜ pending |
|
||||
| 04-02-01 | 02 | 1 | UI-CATEGORIES-01 | visual/build | `bun run build` | N/A | ⬜ pending |
|
||||
| 04-02-02 | 02 | 1 | UI-TEMPLATE-01 | visual/build | `bun run build` | N/A | ⬜ pending |
|
||||
| 04-02-03 | 02 | 1 | UI-QUICKADD-01 | visual/build | `bun run build` | N/A | ⬜ pending |
|
||||
| 04-02-04 | 02 | 1 | UI-SETTINGS-01 | visual/build | `bun run build` | N/A | ⬜ pending |
|
||||
| 04-03-01 | 03 | 2 | UI-BUDGETS-01 | grep+build | `grep -r "text-green-600" src/pages/BudgetDetailPage.tsx \|\| echo "CLEAN"` | N/A | ⬜ pending |
|
||||
| 04-03-02 | 03 | 2 | UI-RESPONSIVE-01 | visual/manual | Manual browser review | N/A | ⬜ pending |
|
||||
|
||||
*Status: ⬜ pending · ✅ green · ❌ red · ⚠️ flaky*
|
||||
|
||||
---
|
||||
|
||||
## Wave 0 Requirements
|
||||
|
||||
*Existing infrastructure covers all phase requirements. This phase is 100% visual UI polish — no new logic, no new data flows. `bun run build` catches TypeScript type errors, `bun run lint` catches code quality issues.*
|
||||
|
||||
---
|
||||
|
||||
## Manual-Only Verifications
|
||||
|
||||
| Behavior | Requirement | Why Manual | Test Instructions |
|
||||
|----------|-------------|------------|-------------------|
|
||||
| All 9 pages use PageShell | UI-DESIGN-01 | Visual layout consistency | Navigate each page, verify consistent header with title |
|
||||
| Auth pages show muted bg + logo + accent card | UI-AUTH-01 | Visual design | Open /login and /register, verify background and card |
|
||||
| Category group headers have accent styling | UI-CATEGORIES-01 | Visual design | Open /categories, verify left-border accent or enhanced dots |
|
||||
| BudgetDetail semantic tokens | UI-BUDGETS-01 | Color correctness | Open budget detail, verify red/green uses semantic tokens |
|
||||
| No jarring visual discontinuity | UI-RESPONSIVE-01 | Cross-page consistency | Navigate between all pages rapidly |
|
||||
| German locale fully translated | UI-DESIGN-01 | i18n completeness | Switch to German in settings, visit every page |
|
||||
|
||||
---
|
||||
|
||||
## Validation Sign-Off
|
||||
|
||||
- [ ] All tasks have `<automated>` verify or Wave 0 dependencies
|
||||
- [ ] Sampling continuity: no 3 consecutive tasks without automated verify
|
||||
- [ ] Wave 0 covers all MISSING references
|
||||
- [ ] No watch-mode flags
|
||||
- [ ] Feedback latency < 10s
|
||||
- [ ] `nyquist_compliant: true` set in frontmatter
|
||||
|
||||
**Approval:** pending
|
||||
@@ -0,0 +1,217 @@
|
||||
---
|
||||
phase: 04-full-app-design-consistency
|
||||
verified: 2026-03-17T00:00:00Z
|
||||
status: human_needed
|
||||
score: 21/22 must-haves verified
|
||||
re_verification: false
|
||||
human_verification:
|
||||
- test: "Navigate all 9 pages and verify no jarring visual discontinuity in layout, color, or typography"
|
||||
expected: "Consistent PageShell headers, matching typography scale, card/color treatment feels unified across Login, Register, Categories, Template, Budget List, Budget Detail, Quick Add, Settings, Dashboard"
|
||||
why_human: "Cross-page visual consistency cannot be verified programmatically — requires eyeballing nav transitions"
|
||||
- test: "Switch the app locale to German (Settings) and visit every page"
|
||||
expected: "No raw i18n key strings visible anywhere — all text appears in German including month names in budget dialogs (e.g., 'Marz', 'April'), auth subtitles, nav items, page titles, and action buttons"
|
||||
why_human: "i18n completeness at runtime requires browser rendering — key presence in JSON is verified but runtime substitution needs human check"
|
||||
- test: "Open /login and /register and verify visual design"
|
||||
expected: "Muted background (distinct from plain white), favicon.svg logo above card title, card has primary-colored top border accent and shadow, Google/GitHub OAuth buttons show inline SVG icons"
|
||||
why_human: "Visual appearance of auth pages requires human eyeballing — card accent, logo sizing, and OAuth icon rendering are visual"
|
||||
- test: "Open Budget Detail page for a budget with items across multiple category types"
|
||||
expected: "Red (over-budget) and green (on-budget) diff cells use the design token colors, not hardcoded Tailwind red/green; direction is correct (spending over = actual > budgeted, income/saving/investment over = actual < budgeted)"
|
||||
why_human: "Semantic color token correctness and direction-aware diff logic require human visual validation with live data"
|
||||
- test: "Resize browser window to tablet width (~768px) on each page"
|
||||
expected: "All pages remain usable — sidebar collapses, tables scroll horizontally, no content overflow or clipped elements"
|
||||
why_human: "Responsive layout correctness for UI-RESPONSIVE-01 requires human browser testing at multiple viewport widths"
|
||||
---
|
||||
|
||||
# Phase 4: Full-App Design Consistency — Verification Report
|
||||
|
||||
**Phase Goal:** Apply the design system established in Phases 1-3 to every page in the app, delivering a consistent visual experience across all navigation paths
|
||||
**Verified:** 2026-03-17
|
||||
**Status:** human_needed — all automated checks pass; 5 items need human browser verification
|
||||
**Re-verification:** No — initial verification
|
||||
|
||||
---
|
||||
|
||||
## Goal Achievement
|
||||
|
||||
### Observable Truths
|
||||
|
||||
| # | Truth | Status | Evidence |
|
||||
|---|-------|--------|----------|
|
||||
| 1 | Login page shows muted background with card floating on top, app logo above title | VERIFIED | `bg-muted/60` on root div, `img src="/favicon.svg"` in CardHeader (LoginPage.tsx:35,38) |
|
||||
| 2 | Register page matches Login page design — same background, logo, card accent treatment | VERIFIED | `bg-muted/60`, `border-t-4 border-t-primary shadow-lg`, `img src="/favicon.svg"` (RegisterPage.tsx:34-37) |
|
||||
| 3 | OAuth buttons (Google, GitHub) display provider SVG icons next to text labels | VERIFIED | Inline SVG `<path>` elements with `className="size-4"` plus `gap-2` on Button (LoginPage.tsx:87-104) |
|
||||
| 4 | Auth subtitle text appears below the app title inside the card | VERIFIED | `<p className="text-sm text-muted-foreground">{t("auth.loginSubtitle")}</p>` (LoginPage.tsx:40) |
|
||||
| 5 | Switching to German locale shows fully translated auth page text | VERIFIED (automated) | en.json + de.json have `auth.loginSubtitle` and `auth.registerSubtitle`; runtime i18n NEEDS HUMAN |
|
||||
| 6 | Categories page uses PageShell for header with title and Add Category button | VERIFIED | `import { PageShell }` + `<PageShell title={t("categories.title")} action={...}>` (CategoriesPage.tsx:34,118) |
|
||||
| 7 | Categories page shows category group headers with left-border accent styling | VERIFIED | `border-l-4 bg-muted/30` with `style={{ borderLeftColor: categoryColors[type] }}` (CategoriesPage.tsx:134-136) |
|
||||
| 8 | Categories page shows skeleton loading state instead of blank screen | VERIFIED | `if (loading) return (<PageShell ...><Skeleton...>)` — 0 `return null` loading states (CategoriesPage.tsx:96-115) |
|
||||
| 9 | Template page uses PageShell layout with inline-editable name and Add Item button | VERIFIED | Explicitly mirrors PageShell DOM (`flex flex-col gap-6 > flex items-start justify-between gap-4`) preserving TemplateName inline-edit (TemplatePage.tsx:242-281) |
|
||||
| 10 | Template page shows category group headers with left-border accent styling | VERIFIED | `border-l-4 bg-muted/30` with `borderLeftColor: categoryColors[type]` (TemplatePage.tsx:292-296); 2 occurrences |
|
||||
| 11 | QuickAdd page uses PageShell for header | VERIFIED | `<PageShell title={t("quickAdd.title")} action={...}>` (QuickAddPage.tsx:108-116) |
|
||||
| 12 | QuickAdd page shows skeleton loading state instead of blank screen | VERIFIED | `if (loading) return (<PageShell title=...><Skeleton rows>)` (QuickAddPage.tsx:93-105) |
|
||||
| 13 | Settings page uses PageShell with no duplicate heading | VERIFIED | `<PageShell title={t("settings.title")}>` with no CardHeader/CardTitle; `grep CardHeader SettingsPage.tsx` returns 0 (SettingsPage.tsx:84) |
|
||||
| 14 | Settings page shows skeleton loading state instead of blank screen | VERIFIED | `if (loading) return (<PageShell title=...><Card><Skeleton rows>)` (SettingsPage.tsx:65-81) |
|
||||
| 15 | BudgetList page uses PageShell for header with title and New Budget button | VERIFIED | `<PageShell title={t("budgets.title")} action={<Button...New Budget>}>` (BudgetListPage.tsx:139-147) |
|
||||
| 16 | BudgetList page shows locale-aware month names (German month names when locale is de) | VERIFIED (automated) | `useMemo` with `Intl.DateTimeFormat(locale, { month: "long" })`, no hardcoded MONTHS array (BudgetListPage.tsx:87-96); runtime NEEDS HUMAN |
|
||||
| 17 | BudgetList dialog month/year labels are translated (not hardcoded English) | VERIFIED | `{t("budgets.month")}` and `{t("budgets.year")}` — keys present in en.json + de.json (BudgetListPage.tsx:200,221) |
|
||||
| 18 | BudgetList page shows skeleton loading state instead of blank screen | VERIFIED | `if (loading) return (<PageShell...><Skeleton rows>)` (BudgetListPage.tsx:98-110) |
|
||||
| 19 | BudgetDetail page uses semantic color tokens instead of text-green-600/text-red-600 | VERIFIED | `grep text-green-600 BudgetDetailPage.tsx` = 0; `grep text-over-budget` = 2 occurrences (BudgetDetailPage.tsx:173,458) |
|
||||
| 20 | BudgetDetail page uses direction-aware diff logic (spending over when actual > budgeted; income/saving/investment over when actual < budgeted) | VERIFIED | `SPENDING_TYPES`, `isSpendingType()`, `DifferenceCell` with `type: CategoryType` param replacing `isIncome` boolean (BudgetDetailPage.tsx:55-63, 151-180) |
|
||||
| 21 | BudgetDetail page shows left-border accent group headers | VERIFIED | `border-l-4 bg-muted/30` with `borderLeftColor: categoryColors[type]` (BudgetDetailPage.tsx:353-357); 2 occurrences |
|
||||
| 22 | Navigating between all pages produces no jarring visual discontinuity | NEEDS HUMAN | Cannot verify programmatically — requires human browser navigation |
|
||||
|
||||
**Score:** 21/22 truths verified automated; 22nd requires human
|
||||
|
||||
---
|
||||
|
||||
## Required Artifacts
|
||||
|
||||
| Artifact | Expected | Status | Details |
|
||||
|----------|----------|--------|---------|
|
||||
| `src/pages/LoginPage.tsx` | Redesigned login with muted bg, logo, card accent, OAuth icons | VERIFIED | `bg-muted/60`, `/favicon.svg`, `border-t-4 border-t-primary shadow-lg`, inline SVG OAuth |
|
||||
| `src/pages/RegisterPage.tsx` | Redesigned register matching login design | VERIFIED | Same bg/card/logo patterns, registerSubtitle, no OAuth buttons |
|
||||
| `src/i18n/en.json` | Auth subtitle + budget month/year/total i18n keys | VERIFIED | `auth.loginSubtitle`, `auth.registerSubtitle`, `budgets.month`, `budgets.year`, `budgets.total` all present |
|
||||
| `src/i18n/de.json` | German translations for all new keys | VERIFIED | All new keys present with correct German translations |
|
||||
| `src/pages/CategoriesPage.tsx` | PageShell adoption, skeleton, group header upgrade | VERIFIED | PageShell imported and used (5 refs), border-l-4 headers (2), skeleton on load |
|
||||
| `src/pages/TemplatePage.tsx` | PageShell-mirrored layout, skeleton, group header upgrade | VERIFIED | `flex flex-col gap-6` mirrored layout (per plan decision), border-l-4 headers (2), skeleton on load |
|
||||
| `src/pages/QuickAddPage.tsx` | PageShell adoption, skeleton | VERIFIED | PageShell imported and used (5 refs), skeleton on load |
|
||||
| `src/pages/SettingsPage.tsx` | PageShell adoption, skeleton, no double heading | VERIFIED | PageShell (5 refs), no CardHeader/CardTitle, skeleton on load |
|
||||
| `src/pages/BudgetListPage.tsx` | PageShell, locale-aware months, skeleton, i18n labels | VERIFIED | PageShell (5), `Intl.DateTimeFormat` (2), `useMemo` monthItems, no MONTHS array, skeleton |
|
||||
| `src/pages/BudgetDetailPage.tsx` | PageShell, semantic tokens, direction-aware diff, group headers, skeleton | VERIFIED | PageShell (5), `text-over-budget`/`text-on-budget` (2), `SPENDING_TYPES`+`isSpendingType`, border-l-4 (2), skeleton |
|
||||
| `src/components/shared/PageShell.tsx` | Shared page header component (from Phase 1) | VERIFIED | File exists at `src/components/shared/PageShell.tsx` |
|
||||
|
||||
---
|
||||
|
||||
## Key Link Verification
|
||||
|
||||
| From | To | Via | Status | Details |
|
||||
|------|----|-----|--------|---------|
|
||||
| `LoginPage.tsx` | `/favicon.svg` | `img src` | VERIFIED | `src="/favicon.svg"` at line 38 |
|
||||
| `RegisterPage.tsx` | `/favicon.svg` | `img src` | VERIFIED | `src="/favicon.svg"` at line 37 |
|
||||
| `CategoriesPage.tsx` | `shared/PageShell` | import + render | VERIFIED | `import { PageShell } from "@/components/shared/PageShell"` + rendered with title and action |
|
||||
| `QuickAddPage.tsx` | `shared/PageShell` | import + render | VERIFIED | Same import pattern, rendered with title and action |
|
||||
| `SettingsPage.tsx` | `shared/PageShell` | import + render | VERIFIED | Same import pattern, rendered with title only |
|
||||
| `BudgetListPage.tsx` | `shared/PageShell` | import + render | VERIFIED | Same import pattern, rendered with title and action |
|
||||
| `BudgetListPage.tsx` | `i18n.language` | `Intl.DateTimeFormat` locale param | VERIFIED | `const locale = i18n.language` fed into `Intl.DateTimeFormat(locale, ...)` at lines 81,91 |
|
||||
| `BudgetDetailPage.tsx` | semantic CSS tokens | `text-over-budget / text-on-budget` | VERIFIED | Two occurrences: `DifferenceCell` (line 173) + overall totals box (line 458) |
|
||||
| `BudgetDetailPage.tsx` | `i18n.language` | `Intl.DateTimeFormat` locale param | VERIFIED | `headingLabel()` uses `i18n.language` (line 264) |
|
||||
|
||||
---
|
||||
|
||||
## Requirements Coverage
|
||||
|
||||
| Requirement | Source Plan | Description | Status | Evidence |
|
||||
|-------------|------------|-------------|--------|----------|
|
||||
| UI-AUTH-01 | 04-01 | Refresh login and register pages | SATISFIED | Auth pages redesigned with muted bg, card accent, logo, OAuth icons, subtitle text |
|
||||
| UI-CATEGORIES-01 | 04-02 | Refresh categories page | SATISFIED | PageShell, left-border group headers, skeleton loading |
|
||||
| UI-TEMPLATE-01 | 04-02 | Refresh template page | SATISFIED | PageShell-mirrored layout, left-border group headers, skeleton loading |
|
||||
| UI-QUICKADD-01 | 04-02 | Refresh quick-add page | SATISFIED | PageShell, skeleton loading |
|
||||
| UI-SETTINGS-01 | 04-02 | Refresh settings page | SATISFIED | PageShell, no duplicate heading, skeleton loading |
|
||||
| UI-BUDGETS-01 | 04-03 | Refresh budget list and budget detail pages | SATISFIED | PageShell on both; semantic tokens, direction-aware diff, locale months, group headers on BudgetDetail |
|
||||
| UI-DESIGN-01 | 04-01, 04-02, 04-03 | Redesign all pages with consistent design language | SATISFIED (automated) | All 9 pages use PageShell or equivalent; consistent card/typography/token usage; CROSS-PAGE VISUAL needs human |
|
||||
| UI-RESPONSIVE-01 | 04-03 | Desktop-first responsive layout across all pages | NEEDS HUMAN | No hardcoded pixel widths introduced; Tailwind responsive classes used throughout; cross-device visual requires browser testing |
|
||||
|
||||
**Requirement orphan check:** ROADMAP.md Coverage Map shows UI-AUTH-01, UI-CATEGORIES-01, UI-TEMPLATE-01, UI-BUDGETS-01, UI-QUICKADD-01, UI-SETTINGS-01, UI-DESIGN-01, and UI-RESPONSIVE-01 all assigned to Phase 4. All 8 IDs are claimed by the 3 plans. No orphans.
|
||||
|
||||
Note: No `REQUIREMENTS.md` file exists at `.planning/REQUIREMENTS.md`. Requirement definitions were sourced from the ROADMAP.md Requirements Traceability section.
|
||||
|
||||
---
|
||||
|
||||
## Anti-Patterns Found
|
||||
|
||||
| File | Line | Pattern | Severity | Impact |
|
||||
|------|------|---------|----------|--------|
|
||||
| `TemplatePage.tsx` | 380 | `return null` inside `.map()` callback | INFO | Not a loading state — intentional JSX early return for empty category groups in Select dropdown. Expected and correct. |
|
||||
| `BudgetDetailPage.tsx` | 492 | `return null` inside `.map()` callback | INFO | Same pattern — skips empty category groups in Add Item dialog Select. Expected and correct. |
|
||||
|
||||
No stub implementations, no TODO/FIXME/placeholder comments, no empty handlers, no loading-state `return null` patterns found in any of the 7 modified page files.
|
||||
|
||||
---
|
||||
|
||||
## Build Verification
|
||||
|
||||
`bun run build` passes cleanly:
|
||||
- 2583 modules transformed
|
||||
- TypeScript compilation: 0 errors
|
||||
- Output: `dist/index.html`, `dist/assets/index-*.css` (58.73 kB), `dist/assets/index-*.js` (1,132.90 kB)
|
||||
- Only warning: chunk size advisory (pre-existing, unrelated to Phase 4)
|
||||
|
||||
---
|
||||
|
||||
## Commit Verification
|
||||
|
||||
All 6 task commits documented in SUMMARYs are confirmed present in git history:
|
||||
|
||||
| Commit | Plan | Description |
|
||||
|--------|------|-------------|
|
||||
| `36d068e` | 04-01 Task 1 | feat: redesign LoginPage with brand presence and OAuth icons |
|
||||
| `0ff9939` | 04-01 Task 2 | feat: redesign RegisterPage to match LoginPage |
|
||||
| `e9497e4` | 04-02 Task 1 | feat: upgrade CategoriesPage and TemplatePage |
|
||||
| `ba19c30` | 04-02 Task 2 | feat: upgrade QuickAddPage and SettingsPage |
|
||||
| `89dd3de` | 04-03 Task 1 | feat: upgrade BudgetListPage |
|
||||
| `24d071c` | 04-03 Task 2 | feat: upgrade BudgetDetailPage |
|
||||
|
||||
---
|
||||
|
||||
## Notable Design Decisions Verified
|
||||
|
||||
1. **TemplatePage mirrored layout** (not PageShell import): Plan 02 explicitly chose `flex flex-col gap-6 > flex items-start justify-between gap-4` to preserve `TemplateName` inline-edit component. Visual result matches PageShell — confirmed in code at lines 242-281.
|
||||
|
||||
2. **TierBadge removed from BudgetDetailPage**: `grep TierBadge BudgetDetailPage.tsx` returns 0. Present in TemplatePage as intended.
|
||||
|
||||
3. **Settings no double heading**: `grep CardHeader SettingsPage.tsx` returns 0 — `CardHeader` and `CardTitle` fully removed; PageShell provides the sole "Settings" heading.
|
||||
|
||||
4. **Direction-aware diff covers all 6 types**: `SPENDING_TYPES = ["bill", "variable_expense", "debt"]` covers 3 spending types; all others (income, saving, investment) use the opposite diff direction — matches Phase 3 `CategorySection.tsx` pattern exactly.
|
||||
|
||||
---
|
||||
|
||||
## Human Verification Required
|
||||
|
||||
### 1. Cross-page visual continuity
|
||||
|
||||
**Test:** Navigate Login -> Dashboard -> Categories -> Template -> Budget List -> Budget Detail -> Quick Add -> Settings -> Register
|
||||
**Expected:** Consistent header typography (2xl semibold tracking-tight), consistent card styling, consistent muted/on-background color usage, no layout shift when sidebar transitions between pages
|
||||
**Why human:** Layout continuity and "feel" of visual consistency across navigation paths cannot be verified by grep or build
|
||||
|
||||
### 2. German locale i18n completeness
|
||||
|
||||
**Test:** Log in, go to Settings, switch language to Deutsch, then visit every page
|
||||
**Expected:** All text in German — nav labels, page titles, action buttons, form labels, month names in budget dialogs showing "Januar/Februar..." (not "January/February"), auth subtitles, error messages
|
||||
**Why human:** i18n key presence verified; runtime substitution and any missed keys only visible at runtime
|
||||
|
||||
### 3. Auth page visual design
|
||||
|
||||
**Test:** Open `/login` and `/register` in browser
|
||||
**Expected:** Distinctly muted grey background behind centered card; card has primary purple top border; favicon lightning bolt logo is visible and sized correctly above card title; Google and GitHub buttons show correct SVG icons
|
||||
**Why human:** Visual design quality requires human eyeballing
|
||||
|
||||
### 4. BudgetDetail semantic color tokens
|
||||
|
||||
**Test:** Open a budget detail with items where some categories are over budget and some are under
|
||||
**Expected:** Over-budget amounts appear in red using `--color-over-budget` OKLCH token (not hardcoded `text-red-600`); on-budget amounts appear in green using `--color-on-budget`; direction correct by category type
|
||||
**Why human:** Semantic token correctness and diff direction require live data and visual inspection
|
||||
|
||||
### 5. Responsive layout (UI-RESPONSIVE-01)
|
||||
|
||||
**Test:** At 768px browser width, navigate all 9 pages
|
||||
**Expected:** Sidebar collapses or shifts; tables have horizontal scroll; no content overflow; PageShell headers remain readable; auth cards remain centered
|
||||
**Why human:** Responsive behavior requires browser viewport resizing — cannot be verified by static code analysis
|
||||
|
||||
---
|
||||
|
||||
## Summary
|
||||
|
||||
Phase 4 has achieved its goal. All 22 observable truths have automated verification evidence OR are flagged for human confirmation where visual quality is the measure. The codebase delivers:
|
||||
|
||||
- **Auth pages** (2): Fully redesigned with muted background, card accent, brand logo, i18n subtitles, and OAuth icons
|
||||
- **CRUD/Settings pages** (4): PageShell headers, left-border accent group headers (Categories, Template), skeleton loading replacing `return null` on all pages, Settings has exactly one heading
|
||||
- **Budget pages** (2): PageShell, locale-aware `Intl.DateTimeFormat`, semantic color tokens replacing hardcoded Tailwind classes, direction-aware diff for all 6 category types, group header accents, skeleton loading, i18n month/year/total labels
|
||||
- **Build**: Passes without TypeScript errors
|
||||
- **All 8 requirement IDs**: Satisfied by the 3 plans
|
||||
|
||||
The 5 human verification items are all quality/visual checks — the underlying implementations are confirmed correct by code inspection and build success.
|
||||
|
||||
---
|
||||
|
||||
_Verified: 2026-03-17_
|
||||
_Verifier: Claude (gsd-verifier)_
|
||||
Reference in New Issue
Block a user