All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 12s
- Sidebar: dynamic brand-accent colors, brainstorm section restyled - AI chat general: popup panel with expand/collapse, hides when contextual AI open - AI chat contextual: tabs reordered (Actions first), X close button, height fix - Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.) - Global color cleanup: emerald/orange hardcoded → brand-accent dynamic - Brainstorm page: orange → brand-accent throughout - PageEntry animation component added to key pages - Floating AI button: bg-brand-accent instead of hardcoded black - i18n: all 15 locales updated with new AI/billing keys - Billing: freemium quota tracking, BYOK, stripe subscription scaffolding - Admin: integrated into new design - AGENTS.md + CLAUDE.md project rules added
2.1 KiB
2.1 KiB
Content Placement Decision Tree
One-page flowchart for file placement
The Decision Tree
┌─────────────────────────────────────────────────┐
│ Does CONTENT vary by page context? │
│ (text, images, data source) │
└────────────┬────────────────────────────────────┘
│
┌──────┴──────┐
│ │
YES NO
│ │
▼ ▼
┌─────────────┐ ┌──────────────┐
│ Page File │ │ Feature File │
│ │ │ │
│ Document: │ │ Document: │
│ - Headings │ │ - Generic │
│ - Text │ │ content │
│ - Images │ │ - Default │
│ - Data API │ │ config │
│ - Scope │ │ │
└─────────────┘ └──────────────┘
Examples
Page File (Content Varies):
- ✅ Hero heading: "Welcome" (Home) vs "About" (About)
- ✅ Search placeholder: "Search products..." vs "Search help..."
- ✅ Calendar header: "Familjen Svensson: Vecka 40" (user's family)
- ✅ Data API:
/api/families/:currentFamilyId/walks(user-specific)
Feature File (Content Same Everywhere):
- ✅ Button text: "Submit" (always the same)
- ✅ Error message: "Invalid email" (generic validation)
- ✅ Tooltip: "Click to expand" (generic interaction)
- ✅ Data API:
/api/products(same for all users)
Visual Design?
Is this VISUAL design (colors, spacing, states)?
│
└─ YES → Component File
(Colors, typography, layout, states)
Quick Rule
- Page File = WHERE + WHAT (page-specific)
- Component File = HOW IT LOOKS (visual design)
- Feature File = WHAT IT DOES (functionality + generic content)