Components

Organization

src/components/
  ui/        shared primitives (button, input, badge, dialog, table, …)
  layout/    application shell (app-shell, client-shell, navbars, …)

Feature screens live in features/<module>/components/ (see src/features/README.md); generic and reusable components live in src/components/.

Rules

1. Do not rewrite a primitive: compose with components/ui components (className props via cn from #/lib/utils).
2. A layout component carries no business logic — it receives data via props or state hooks (useAuth).
3. Accessibility is baseline: Label bound to the input via htmlFor/id, aria-label on icon controls, role="alert" on global form errors.
4. User-facing text is in French, hardcoded in the component (no translation layer).

Accents (Tailwind)

• Tailwind 4 utility classes + CSS variables defined in styles.css (.border, bg-card, text-muted-foreground, text-destructive, …).
• Avoid hardcoded hex colors: use theme tokens.
• Statuses: <Badge variant="success|warning|info|danger|neutral"> (components/ui/badge.tsx) — no more bg-[#hex] text-white.
• Page headers, tables, modals, empty states: page-header, table, dialog, empty-state primitives in components/ui/.
• Full system: Design system.

Don’ts

• ❌ Copy/paste a ui/ component to tweak it inside a feature.
• ❌ Generate a “catch-all” component (any props, all responsibilities).
• ❌ Display data without loading/error states (Query patterns).