veza/apps/web/dev_audit/frontend/09_scalability_ui.md

Phase I — Scalabilité UI

---

I1. Ajout de 50 écrans

Routing — ⚠️ Partiel

• L'architecture de routing routeConfig.tsx est centralisée avec des fonctions getPublicRoutes(), getProtectedRoutes(), etc. [routeConfig.tsx:57-109]. Ajouter une route est simple (une ligne), mais toutes les routes sont dans un seul fichier.
• Pour 50 écrans supplémentaires, ce fichier deviendrait un bottleneck. Recommandation : migrer vers un routing file-based ou colocalisé par feature.
• Le lazy loading via createLazyComponent [lazy-component/createLazyComponent.tsx] est scalable — chaque nouvelle page est automatiquement code-splittée.

Design system — ✅ Prêt

• Le design system SUMI v2.0 couvre les primitives nécessaires : Button (7 variants), Input, Select, Dialog, Tabs, Card, Badge, Table, DropdownMenu, DatePicker, etc. [02_design_system_inventory.md]
• Les tokens (couleurs, typo, spacing, shadows) sont suffisamment riches pour supporter de nouveaux écrans sans modification.

Convention de nommage — ✅ Prêt

• Pattern feature-based clair : features/{name}/pages/, features/{name}/components/, features/{name}/hooks/
• Convention PascalCase pour les composants, camelCase pour les hooks
• Pattern XxxSkeleton.tsx, XxxEmpty.tsx, useXxx.ts, types.ts, index.ts bien établi

State management — ✅ Prêt

• Zustand pour l'état global (UI, auth, cart) est scalable — chaque feature peut avoir son store
• React Query pour le server state est naturellement scalable — chaque query est indépendante
• La combinaison des deux évite un store central monolithique

Verdict : ⚠️ Partiel — Le design system et le state management sont prêts, mais le routing centralisé et la migration incomplète components/views/ → features/pages/ freinent.

---

I2. Theming / Dark mode

Tokenisation — ✅ Prêt

• 100% des couleurs sont tokenisées dans index.css via CSS variables SUMI [index.css:15-296]
• 0 couleur hardcodée (bg-[#...]) dans les className ✅
• Palette complète dark + light définie [index.css:301-364]

Migration effort — Minimal

• 24 fichiers utilisent le préfixe dark: de Tailwind — ce qui est très peu car le theming est géré par data-theme attribute + CSS variables, pas par le mécanisme dark: de Tailwind.
• Le switch de thème est fonctionnel via uiStore.setTheme() [stores/ui.ts:35-51] et ThemeProvider [components/theme/ThemeProvider.tsx]

Valeurs hardcodées à migrer

• #ffffff dans index.css:363 (primary-foreground light) — acceptable dans le fichier de tokens
• #8b7ec8 pour chart-5 [index.css:240] — dans les tokens
• Couleurs contextuelles (graffiti-magenta, gaming-gold, terminal-green, sakura) [index.css:202-205] — dans les tokens

Verdict : ✅ Prêt — Le theming est pleinement fonctionnel avec un effort minimal pour ajouter des thèmes supplémentaires.

---

I3. Internationalisation (i18n)

Système en place

• i18next + react-i18next + i18next-browser-languagedetector installés [package.json]
• Configuration dans lib/i18n.ts ✅
• 2 langues : en.json et fr.json dans src/locales/ ✅
• Hook useTranslation.ts custom disponible [hooks/useTranslation.ts]

Adoption

• ~80+ fichiers utilisent useTranslation ou t() — adoption significative
• ~35+ fichiers contiennent des strings hardcodées en anglais dans le JSX :
  • "No Cover", "No lyrics available", "No courses found", "No messages yet", "No equipment found", "Loading...", "Error" [voir 08_technical_debt_frontend.md]
  • Ces strings devraient utiliser t() pour être traduisibles

RTL support

• ❌ Aucun support RTL détecté. Pas de dir attribute, pas de classes rtl:.
• Pour l'arabe, l'hébreu, etc., une refonte du layout serait nécessaire.

Formatage dates/nombres

• date-fns (4.1.x) installé — supporte la localisation ✅
• La localisation de date-fns est-elle configurée avec i18next ? [DONNÉES INSUFFISANTES]

Verdict : ⚠️ Partiel — Le système i18n est en place et partiellement adopté, mais ~35+ fichiers ont des strings hardcodées et le RTL n'est pas supporté.

---

I4. White-labeling / Multi-tenant UI

Logo et branding

• ❌ Le logo/branding semble hardcodé dans les composants (à vérifier dans Header/Sidebar)
• Les couleurs sont tokenisées → changement de palette possible
• Les polices sont en variables CSS → personnalisables

Couleurs externalisables

• ✅ Via les CSS variables SUMI — un tenant pourrait surcharger les variables :root
• Les couleurs contextuelles (graffiti-magenta, gaming-gold, etc.) montrent une flexibilité de palette

Layouts personnalisables

• ❌ Les layouts (Sidebar, Header, DashboardLayout) sont codés en dur
• Pas de configuration de layout par tenant

Verdict : ❌ Bloqué — Le white-labeling nécessiterait un refactoring significatif pour externaliser le branding, bien que les tokens CSS offrent une base.

---

I5. Performance à l'échelle

Virtualisation des listes

• ✅ @tanstack/react-virtual installé et utilisé [package.json, components/ui/virtualized-list/VirtualizedList.tsx]
• VirtualizedList.tsx (125L) — composant générique de virtualisation
• Chat messages virtualisés [features/chat/components/virtualized-chat-messages/]

Pagination

• ✅ Pagination serveur implémentée dans les services API :
  • playlistService.ts : page, limit, safeLimit, safePage [playlistService.ts]
  • trackService.ts : page, limit en query params [trackService.ts]
  • socialService.ts : page = 1 [socialService.ts]
  • marketplaceService.ts : page/limit [marketplaceService.ts]
• Composants de pagination UI : TrackListPaginationNav.tsx (148L), TrackListPaginationInfo.tsx (25L)

Infinite scroll

• features/tracks/hooks/useInfiniteScroll.ts — hook dédié ✅
• components/ui/virtualized-list/useInfiniteScroll.ts — hook pour la liste virtualisée ✅

Cursor-based pagination

• ❌ Pas de pagination cursor-based détectée — uniquement offset/limit

Verdict : ✅ Prêt — Virtualisation, pagination serveur et infinite scroll sont en place.

---

Tableau récapitulatif

Dimension	Verdict	Détail
Ajout de 50 écrans	⚠️ Partiel	DS prêt, routing centralisé à améliorer
Theming / Dark mode	✅ Prêt	100% tokenisé, dark/light fonctionnel
i18n	⚠️ Partiel	Système en place, adoption ~70%, pas de RTL
White-labeling	❌ Bloqué	Branding hardcodé, pas de config par tenant
Performance à l'échelle	✅ Prêt	Virtualisation, pagination, infinite scroll