first commit

CADAM-master/.cursor/rules/frontend-architecture.mdc

@@ -0,0 +1,97 @@
+---
+alwaysApply: true
+---
+# Frontend Architecture - React/TypeScript
+
+## Component Architecture
+
+### Views (Page Components)
+- Located in `src/views/`
+- Each view represents a full page/route
+- Use React Router for navigation
+- Implement proper loading and error states
+- Examples: `PromptView`, `EditorView`, `HistoryView`
+
+### Reusable Components
+- Located in `src/components/`
+- Organized by feature/domain
+- Use TypeScript interfaces for props
+- Follow shadcn/ui patterns
+- Implement proper accessibility
+
+### Component Categories
+- `ui/`: Base UI components (buttons, inputs, etc.)
+- `chat/`: Components used in ChatSection
+- `parameter/`: Components used in ParameterSection
+- `viewer/`: Components used in ViewerSection
+- `history/`: Components used in the history page
+
+## State Management
+
+### Contexts (`src/contexts/`)
+- `AuthContext`: User authentication and session
+- `BlobContext`: STL blob generated from OpenSCAD WASM
+- `ColorContext`: Purely stylistic color for model
+- `CurrentMessageContext`: Current message being processed
+- `SelectedItemsContext`: Selected items across components
+
+### React Query
+- Used for server state management
+- Configured in `src/main.tsx`
+- Provides caching, synchronization, and background updates
+- Handle loading, error, and success states
+
+## Custom Hooks (`src/hooks/`)
+- `useOpenSCAD`: OpenSCAD integration
+- `useItemSelection`: Item selection management
+- `useToast`: Toast notification management
+
+## Services (`src/services/`)
+- `conversationService`: Chat/conversation API calls, mutations and queries
+- `messageService`: Message handling and processing, mutations and queries
+- All services use Supabase client for API calls
+
+## Utilities (`src/utils/`)
+- `file-utils`: Primarily for getting a safe filename when exporting a file
+- `parameterUtils`: Parameter validation and processing
+- `downloadUtils`: Functions for downloading generated model
+
+## Types (`src/types/`)
+- `misc.ts`: Miscellaneous type definitions, should probably get broken up in the future
+- Use proper TypeScript interfaces and types
+- Export types for reuse across components
+
+## 3D Graphics Integration
+
+### Three.js Setup
+- Use React Three Fiber for React integration
+- Implement proper cleanup and resource management
+- Handle WebGL context loss gracefully
+- Use proper lighting and materials
+
+### OpenSCAD Integration
+- Web Worker in `src/worker/` for OpenSCAD processing
+- WASM-based OpenSCAD compilation
+- Real-time parameter updates
+- Error handling for compilation failures
+
+## Routing Structure
+- Main routes defined in `src/main.tsx`
+- Error boundaries for route error handling
+
+## Styling
+- Tailwind CSS for utility-first styling
+- shadcn/ui components for consistent design
+- Custom CSS in `src/index.css`
+- Not standard css classes, adam specific, refer to tailwind.config.js for specifics
+
+## Error Handling
+- Error boundaries for component error catching
+- Toast notifications for user feedback
+- Proper error states in components
+
+## Performance
+- React Query for efficient data fetching
+- Proper memoization with `useMemo` and `useCallback`
+- Lazy loading for route components
+- Image optimization and lazy loading