5f88c56113
Phase 1:
- S0: Fix open redirect (safeNavigate), delete AuthContext/legacy auth, encrypt API keys, gitignore .env files
- S1: Split client.ts god object into 5 modules, unify toast system, delete unused Sidebar
- S2: Add glass button variant, migrate 32 z-index to SUMI tokens, fix card dark mode
- S3: Skip nav link, aria-hidden on icons, focus-visible ring fixes, alt attrs, aria-live regions
- S4: React.memo on list items, fix key={index}, loading=lazy on images
- S5: Branded loading screen, page transitions respect reduced-motion, LikeButton micro-interaction, i18n sidebar/header
Phase 2 Sprint 6:
- Wire Tailwind shadow utilities to SUMI tokens in @theme block (fixes 50+ files)
- Define shadow-card/shadow-card-hover tokens
- Remove dark:shadow-none workarounds from card.tsx (SUMI handles per-theme shadows)
Co-authored-by: Cursor <cursoragent@cursor.com>
9.1 KiB
9.1 KiB
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) vscomponents/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é