# Copilot Instructions for in-car-system-fe

## Project Overview

- **Type:** React + TypeScript SPA using Vite
- **Purpose:** In-car system frontend for camera management, sighting history, and system settings
- **Key Directories:**
  - `src/components/`: UI components grouped by feature (Camera, Sighting, Settings, etc.)
  - `src/context/`: React context for global state (e.g., AlertHit, NPEDUser, SightingFeed)
  - `src/hooks/`: Custom React hooks for data fetching, config, and UI logic
  - `src/pages/`: Top-level route views (Dashboard, Camera, Session, SystemSettings)
  - `src/types/`: Shared TypeScript types
  - `src/utils/`: Utility functions and config helpers

## Architecture & Patterns

- **Component Structure:**
  - Feature-based folders (e.g., `CameraSettings`, `SightingOverview`)
  - Components are mostly functional, using hooks and context for state
- **State Management:**
  - Uses React Context for cross-component state (see `src/context/providers/`)
  - Reducers in `src/context/reducers/` for complex state updates
- **Data Flow:**
  - Data is fetched and managed via custom hooks (see `src/hooks/`)
  - Context providers wrap the app in `main.tsx`
- **Styling:**
  - CSS modules (e.g., `App.css`, `index.css`)
  - No CSS-in-JS or styled-components

## Developer Workflows

- **Install:** `npm install`
- **Start Dev Server:** `npm run dev`
- **Build:** `npm run build`
- **Preview Build:** `npm run preview`
- **Lint:** `npm run lint` (uses ESLint, see `eslint.config.js`)
- **Type Check:** `tsc --noEmit`
- **Test:** _No test framework configured by default_

## Project Conventions

- **TypeScript:**
  - All components and hooks are typed; shared types in `src/types/types.ts`
- **Component Naming:**
  - Use PascalCase for components and folders
  - Suffix with `Container`, `Card`, or `Modal` for UI roles
- **Assets:**
  - Images in `public/` or `src/assets/`
  - Sounds in `src/assets/sounds/`
- **No Redux, MobX, or external state libraries**
- **No backend API code in this repo**

## Integration Points

- **External:**
  - No direct backend integration code; data is assumed to come from context/hooks
  - Sound assets for UI feedback in `src/assets/sounds/ui/`

## Examples

- **Add a new camera setting:**
  - Create a new component in `src/components/CameraSettings/`
  - Add state via context or a custom hook if needed
- **Add a new page:**
  - Add a file to `src/pages/` and update routing in the main app (see `main.tsx`)

## References

- See `README.md` for Vite/ESLint setup details
- See `src/context/` and `src/hooks/` for app-specific state/data patterns

---

_If any conventions or workflows are unclear, please ask for clarification or examples from the codebase._