88 lines
4 KiB
Markdown
88 lines
4 KiB
Markdown
|
# 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`](/home/leclere/Projets/IA/orchai/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`](/home/leclere/Projets/IA/orchai/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`](/home/leclere/Projets/IA/orchai/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`](/home/leclere/Projets/IA/orchai/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`](/home/leclere/Projets/IA/orchai/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.
|