Copilot instructions

1---
2applyTo: 'src/pages/**/*.{tsx,ts}'
3---
4# Page Component Guidelines
5 
6## PAGE ARCHITECTURE RULES
7 
8### Pages are COMPOSITION ONLY
9Pages should be thin orchestration layers that compose smaller components:
10 
11```tsx
12// PERFECT: Page as composition layer (10-30 lines max)
13const DashboardPage = () => {
14  return (
15    <PageLayout>
16      <DashboardHeader />
17      <DashboardMetrics />
18      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
19        <DashboardCharts />
20        <DashboardActivity />
21      </div>
22    </PageLayout>
23  )
24}
25 
26// NEVER: Business logic in pages
27const BadDashboardPage = () => {
28  const [users, setUsers] = useState([])
29  const [loading, setLoading] = useState(true)
30  
31  useEffect(() => {
32    // 50+ lines of data fetching logic
33  }, [])
34  
35  // 200+ lines of rendering logic
36  return <div>{/* massive JSX */}</div>
37}
38```
39 
40### Page Organization Rules
411. **Import dependencies** (max 5-8 imports)
422. **Call custom hooks** for data/state (1-3 hooks max)
433. **Return JSX composition** (10-20 lines max)
444. **No business logic** - extract to hooks or services
455. **No inline handlers** - extract to components or hooks
46 
47### Data Loading Pattern
48```tsx
49```tsx
50// PERFECT: Data loading in custom hooks
51const UserProfilePage = () => {
52  const { user, isLoading, error } = useUser()
53  
54  if (isLoading) return <LoadingSpinner />
55  if (error) return <ErrorMessage error={error} />
56  
57  return (
58    <PageLayout>
59      <UserHeader user={user} />
60      <UserDetails user={user} />
61      <UserActivity user={user} />
62    </PageLayout>
63  )
64}
65```
66```
67 
68### Page File Structure
69```
70src/pages/
71├── Index.tsx           # Landing page
72├── Dashboard.tsx       # Main dashboard
73├── Users/
74│   ├── UsersPage.tsx   # Users list page
75│   └── UserDetail.tsx  # Single user page
76├── Settings/
77│   ├── SettingsPage.tsx
78│   └── ProfilePage.tsx
79└── NotFound.tsx        # 404 page
80```
81 
82```