# Phase C — Cartographie des Composants

---

## Vue d'ensemble

| Zone | Fichiers .tsx (source) | Rôle |
|------|----------------------|------|
| `components/ui/` | ~120 | Primitives UI (design system) |
| `components/layout/` | 8 | Shell applicatif |
| `components/views/` | ~138 | Feature views (architecture legacy) |
| `components/{domain}/` | ~337 | Composants domaine (30 sous-dossiers) |
| `features/*/` | ~350+ | Feature modules (architecture cible) |
| **Total estimé** | **~950+** composants source | |

---

## 1. Primitives UI (`components/ui/`)

### Composants > 200 lignes (complexes)

| Composant | Lignes | Type | Observations |
|-----------|--------|------|-------------|
| `context-menu/ContextMenu.tsx` | 358 | Compound | Keyboard nav + ARIA complet |
| `table.tsx` | 305 | Compound | Table sémantique complète |
| `avatar.tsx` | 305 | Smart | Image fallback + sizes + status |
| `empty-state.tsx` | 237 | Dumb | Variantes multiples avec illustrations |
| `ImageViewerModal.tsx` | 230 | Smart | Zoom, navigation, gestures |
| `radio-group.tsx` | 228 | Compound | Accessible, keyboard nav |
| `badge.tsx` | 222 | Dumb | 7+ variantes CVA |
| `FormField.tsx` | 217 | Smart | Form integration + validation |
| `Sidebar.tsx` | 217 | Smart | Duplicate de layout/Sidebar ? |
| `dropdown.tsx` | 215 | Smart | Dropdown legacy |
| `LoadingState.tsx` | 214 | Dumb | Spinner, skeleton, message |
| `ImageCropper.tsx` | 211 | Smart | Canvas-based cropping |
| `progress.tsx` | 208 | Dumb | Linear + circular variants |
| `collapsible.tsx` | 198 | Smart | Animated expand/collapse |
| `alert.tsx` | 185 | Dumb | Info/warning/error/success |
| `card.tsx` | 180 | Compound | Header, Content, Footer, variants |
| `slider.tsx` | 170 | Smart | Range input, dual thumb |
| `WaveformVisualizer.tsx` | 165 | Smart | Canvas audio waveform |
| `confirmation-dialog.tsx` | 165 | Smart | Async confirm/cancel |
| `hover-card/HoverCard.tsx` | 268 | Smart | Positionnement auto |
| `ErrorDisplay.tsx` | 246 | Dumb | Variantes error/empty/loading |
| `select/SelectDropdownContent.tsx` | 156 | Smart | Virtualised dropdown |
| `KeyboardShortcutsPanel.tsx` | 151 | Dumb | Panel raccourcis |
| `modal.tsx` | 150 | Smart | Focus trap + overlay |
| `OptimizedImage.tsx` | 145 | Smart | Lazy load + blur placeholder |

### Composants légers (< 50 lignes)

- `AnimatedNumber.tsx` (16L), `ComingSoon.tsx` (14L), `ContentFadeIn.tsx` (33L), `ScrollToTop.tsx` (38L), `LazyComponent.tsx` (39L), `tooltip.tsx` (2L — re-export), `tabs.tsx` (7L — re-export)

### Compound Components (pattern Radix)

| Groupe | Fichiers | Pattern |
|--------|----------|---------|
| `dialog/` | 9 fichiers | Dialog, Content, Header, Body, Footer, Title, Description, Trigger, Skeleton |
| `dropdown-menu/` | 11 fichiers | Menu, Content, Item, Checkbox, Radio, Label, Separator, Shortcut, Trigger |
| `tabs/` | 5 fichiers | Tabs, List, Trigger, Content |
| `select/` | 5 fichiers | Select, Trigger, DropdownContent, OptionItem |
| `accordion/` | 4 fichiers | Accordion, Item, Trigger, Content |
| `date-picker/` | 4 fichiers | DatePicker, Calendar, Trigger |
| `hover-card/` | 4 fichiers | HoverCard, TrackHoverContent, UserHoverContent |
| `file-upload/` | 6 fichiers | FileUpload, Dropzone, FileList, ErrorList |
| `avatar-upload/` | 5 fichiers | AvatarUpload, Dropzone, Actions, Skeleton |
| `virtualized-list/` | 3 fichiers | VirtualizedList + hooks |
| `data-list/` | 5 fichiers | DataList, Empty, Error, Skeleton |
| `lazy-component/` | 4 fichiers | createLazyComponent, ErrorBoundary, ErrorFallback |
| `optimized-image/` | 4 fichiers | OptimizedImage, BlurPlaceholder, Skeleton, Responsive |

---

## 2. Layout (`components/layout/`)

| Composant | Lignes | Type | Rôle |
|-----------|--------|------|------|
| `Sidebar.tsx` | 294 | Smart | Navigation principale, collapse, mobile |
| `AudioPlayer.tsx` | 264 | Smart | Player bar persistent |
| `Navbar.tsx` | 263 | Smart | Barre de navigation top |
| `Header.tsx` | 172 | Smart | Header applicatif |
| `DashboardLayout.tsx` | 61 | Smart | Layout wrapper (sidebar + main) |
| `Layout.tsx` | 57 | Dumb | Layout générique |
| `MobileBottomNav.tsx` | 50 | Dumb | Navigation mobile |
| `PageTransition.tsx` | 26 | Dumb | Transition entre pages |

**Observation** : `Sidebar.tsx` dans layout/ (294L) et `Sidebar.tsx` dans ui/ (217L) — **duplication probable**. L'un est le layout sidebar, l'autre semble être un composant UI sidebar générique.

---

## 3. Features (architecture cible)

### Features les plus volumineuses

| Feature | Composants | Fichier principal | Lignes max |
|---------|-----------|-------------------|------------|
| `tracks` | ~40+ | TrackListRow.tsx | 320L |
| `playlists` | ~25+ | PlaylistListPage.tsx | 238L |
| `auth` | ~35+ | LoginPage.tsx | 225L |
| `chat` | ~15+ | ChatInput.tsx | 261L |
| `player` | ~20+ | PlayerExpanded.tsx | 241L |
| `streaming` | ~10+ | PlaybackSummary.tsx | 206L |
| `profile` | ~8+ | UserProfilePageTabs.tsx | 226L |
| `search` | ~8+ | SearchPageResults.tsx | 218L |
| `dashboard` | ~5+ | DashboardPage.tsx | 328L |
| `roles` | ~3+ | RolesPage.tsx | 275L |
| `library` | ~6+ | LibraryPageGrid.tsx | 102L |
| `studio` | ~10+ | FileToolbar.tsx | 242L |
| `settings` | ~5+ | SettingsPage.tsx | 183L |
| `marketplace` | ~5+ | Cart.tsx | 224L |
| `notifications` | ~5+ | NotificationsPage.tsx | 157L |

### Composants > 250 lignes dans features (attention)

| Composant | Lignes | Risque |
|-----------|--------|--------|
| `features/dashboard/pages/DashboardPage.tsx` | 328 | ⚠️ Dépasse limite 300L |
| `features/tracks/components/TrackListRow.tsx` | 320 | ⚠️ Dépasse limite 300L |
| `features/tracks/components/TrackList.tsx` | 290 | OK mais proche |
| `features/roles/pages/RolesPage.tsx` | 275 | Proche limite |
| `features/chat/components/ChatInput.tsx` | 261 | Proche limite |
| `features/tracks/components/TrackSearchResults.tsx` | 258 | Proche limite |

---

## 4. Composants domaine (`components/{domain}/`)

### Répartition par domaine

| Domaine | Composants (.tsx) | Observations |
|---------|------------------|-------------|
| `views/` | 138 | ⚠️ Plus gros dossier — views refactorés en sous-dossiers |
| `studio/` | 49 | Studio projects, file browser |
| `settings/` | 38 | Settings views (6 onglets) |
| `education/` | 18 | Cours, learning — feature "ComingSoon" |
| `social/` | 18 | Feed, groups, posts |
| `admin/` | 16 | Administration, moderation |
| `marketplace/` | 14 | Product listing |
| `inventory/` | 14 | Gear management |
| `player/` | 14 | Player UI (audio player legacy) |
| `upload/` | 10 | Upload components |
| `seller/` | 10 | Seller dashboard |
| `library/` | 9 | Library views |
| `monitoring/` | 9 | Monitoring dashboard |
| `notifications/` | 9 | Notification system |
| `share/` | 7 | Sharing components |
| `developer/` | 6 | Developer tools |
| `forms/` | 6 | Form components |
| `commerce/` | 5 | Commerce views |
| `gamification/` | 5 | XP, achievements, leaderboard |
| `charts/` | 4 | Chart components |
| `feedback/` | 4 | Toast, progress |
| `search/` | 4 | Global search |
| `dashboard/` | 3 | Dashboard widgets |
| `navigation/` | 3 | Breadcrumbs |
| `live/` | 2 | Live streaming |
| `theme/` | 2 | Theme provider/switcher |
| `auth/` | 1 | ProtectedRoute |
| `analytics/` | 1 | TrackAnalyticsView |
| `keyboard/` | 1 | Keyboard shortcuts |
| `pwa/` | 1 | PWA install banner |
| `user/` | 1 | User profile |

---

## 5. Tests associés

### Couverture des tests

| Zone | Fichiers .test.tsx | Observations |
|------|-------------------|-------------|
| `components/ui/` | ~25+ | Bonne couverture des primitives |
| `features/auth/` | ~15+ | Tests unitaires + integration |
| `features/tracks/` | ~15+ | Tests composants + services |
| `features/playlists/` | ~15+ | Tests + integration tests |
| `features/player/` | ~8+ | Tests services + hooks |
| `features/streaming/` | ~8+ | Tests services + hooks |
| `services/` | ~15+ | Tests services API |
| `hooks/` | ~12+ | Tests hooks custom |
| `__tests__/` | 2 | Accessibility + contrast |
| `router/` | 1 | Tests de routing |

**Estimation couverture** : ~60-70% des composants critiques ont des tests associés. Les features `chat`, `dashboard`, `studio`, `marketplace` semblent sous-testées côté composants.

---

## 6. Observations structurelles

### Points forts
- **Compound components** bien structurés (dialog, tabs, dropdown-menu, select) avec index.ts barrel exports
- **Skeletons systématiques** dans les views refactorées
- **Pattern cohérent** dans les features : `types.ts`, `index.ts`, `useXxx.ts`, `XxxSkeleton.tsx`
- **Composants bien nommés** : convention PascalCase, nom descriptif

### Points faibles
- **Dualité layout/** : `components/layout/Sidebar.tsx` (294L) vs `components/ui/Sidebar.tsx` (217L)
- **components/views/** (138 fichiers) coexiste avec `features/*/pages/` — migration incomplète
- **2 composants dépassent 300L** sans split (DashboardPage 328L, TrackListRow 320L)
- **Quelques legacy wrappers** : fichiers plats dans `components/views/` (AnalyticsView.tsx, CartView.tsx) qui wrappent les sous-dossiers refactorés
- **components/player/** (14 fichiers) coexiste avec `features/player/components/` (~20 fichiers) — même problème de dualité