orchai/docs/ui-ux-audit-2026-04-20.md

Audit UI/UX transverse - 2026-04-20

Périmètre audité

Front React complet sous src/components:

• agents/*
• projects/*
• tickets/*
• trackers/*
• settings/*
• layout/*

Incohérences détectées (avant refactor)

1. Boutons d'action dupliqués avec variations de couleurs et de tailles selon les pages (bg-blue-600, bg-gray-900, bg-red-100, etc.).
2. Champs de formulaire répétés avec plusieurs variantes de classes (input, select, textarea) non centralisées.
3. Cartes/blocs de contenu dupliqués (rounded-lg border border-gray-200 bg-white p-4) avec petites divergences de spacing.
4. Alertes (error, warning, success, info) construites page par page avec des styles proches mais non unifiés.
5. Badges de statut ticket réimplémentés dans plusieurs pages avec logique dupliquée et couverture de statuts non homogène.

Composants réutilisés sur plusieurs pages

1) Boutons (multi-pages)

Usage sur:

• Agents: AgentList, AgentForm
• Projets: ProjectForm, ProjectDashboard, ProjectGraylog, ProjectLiveAgent, ProjectModules, ProjectTasks
• Tickets: TicketList, TicketDetail
• Trackers: TrackerConfig, TrackerList, FilterBuilder
• Settings: SettingsPage
• Layout: WindowControls, NotificationCenter
• UI: ConfirmModal

Unification appliquée:

• Ajout de buttonClass() dans src/components/ui/primitives.ts
• Variantes centralisées: primary, secondary, danger, dangerSoft, neutralDark, success, ghost
• Tailles centralisées: xs, sm, md, icon

2) Formulaires (input/select/textarea + labels)

Usage sur:

• AgentForm, ProjectForm, SettingsPage, TrackerConfig, ProjectGraylog, ProjectLiveAgent, ProjectTasks, TicketDetail, FilterBuilder

Unification appliquée:

• labelClass, inputClass, textAreaClass dans src/components/ui/primitives.ts
• Remplacement des classes inline répétées par ces styles partagés.

3) Cartes de contenu

Usage sur:

• ProjectDashboard, ProjectGraylog, ProjectLiveAgent, ProjectModules, ProjectTasks, TrackerConfig, TrackerList, TicketList, TicketDetail, AgentList

Unification appliquée:

• cardClass / cardContentClass dans src/components/ui/primitives.ts
• Réemploi des mêmes classes de surface sur les pages.

4) Alertes (erreur/succès/warning/info)

Usage sur:

• AgentForm, AgentList, ProjectForm, ProjectGraylog, ProjectLiveAgent, ProjectModules, ProjectTasks, SettingsPage, TrackerConfig, TicketDetail

Unification appliquée:

• noticeClass(tone, compact) dans src/components/ui/primitives.ts
• Tons standards: error, success, warning, info.

5) Badges de statut ticket

Usage sur:

• TicketList, TicketDetail, ProjectDashboard

Unification appliquée:

• Nouveau composant src/components/ui/TicketStatusBadge.tsx
• Mapping de statuts mutualisé via ticketStatusClass()
• Suppression des mappings locaux dupliqués dans les pages tickets/dashboard.

Méthode de génération commune

Oui, pour les composants réutilisés multi-pages identifiés, la génération du style passe désormais par une couche commune:

• primitives.ts pour les patterns UI transverses
• TicketStatusBadge.tsx pour les badges de statuts ticket

Cela réduit la divergence visuelle et simplifie les évolutions de design futures.

Limites / reste à harmoniser

1. Certaines zones très contextuelles (ex: bulles de conversation live, badges de session archivée, blocs de diff) conservent des styles spécifiques, volontairement.
2. Une seconde passe peut encore factoriser quelques micro-patterns (ex: tabs, badges non-ticket, liens d'action inline) si nécessaire.