# Cursor Rules for PWA React App

## Component Development Guidelines

### Structure
- Use functional components with TypeScript
- Follow the folder structure: components should be in `src/components/`
- Use PascalCase for component names
- Create separate files for each component

### Code Style
- Use TypeScript for type safety
- Use functional components with hooks
- Prefer named exports for components
- Use arrow functions for component definitions
- Keep components small and focused (single responsibility)

### Styling
- Use Tailwind CSS classes for styling
- Use `cn()` utility from `@/lib/utils` for conditional classes
- Prefer shadcn/ui components when available
- Use CSS variables for theming (defined in globals.css)
- Support RTL direction (Persian)

### State Management
- Use Jotai atoms for global state (in `src/atoms/`)
- Use React hooks (useState, useEffect) for local component state
- Custom hooks should be in `src/hooks/`

### API & Services
- All Supabase calls should go through `src/services/supabase.ts`
- Create custom hooks for data fetching (e.g., `useRequests`, `useChat`)
- Handle loading and error states

### Routing
- Use React Router v6+
- Use lazy loading for route components
- Wrap protected routes with `<ProtectedRoute>` component
- Use `useNavigate` for programmatic navigation

### Forms
- Use controlled components with useState
- Validate inputs before submission
- Show error messages with Toast notifications
- Disable submit button during loading

### Accessibility
- Use semantic HTML elements
- Add proper labels for form inputs
- Ensure keyboard navigation works
- Use ARIA attributes when needed

### Performance
- Use React.memo for expensive components when needed
- Implement lazy loading for routes
- Optimize images and assets
- Use Suspense boundaries

### TypeScript
- Define types for all props
- Use interfaces for object types
- Avoid `any` type, use `unknown` if needed
- Export types from service files

### File Organization
- Keep related files together
- Use index files for clean imports when appropriate
- Separate concerns (UI, logic, data)

### Best Practices
- Always handle async operations with try/catch
- Show loading states during async operations
- Provide user feedback with Toast notifications
- Clean up subscriptions and effects properly
- Use meaningful variable and function names in Persian context