- Update Sidebar to use Design System Button component and consistent styling
- Refactor LibraryPage to use Card variants (glass/gaming) for track grid
- Ensure consistent button usage across key UI components
- Fix type errors in DashboardPage
- Refactor DashboardPage to use StatCard, new Button variants, and glassmorphism cards
- Update DashboardLayout to include AstralBackground for premium visual effect
- Style GlobalPlayer with glass-hud utility classes
- Fix type errors in LoginPage by using local Card shim
- Refactor Navbar, ChatInput, RegisterPage, and CreatePlaylistDialog to use @veza/design-system components
- Shim local UI components (Button, Input, Card) to align with Design System API and styles
- Fix hundreds of type errors by exporting missing components (SearchInput, FileUpload) and adding missing props (icon, variant)
- Button component uses 'default' variant for primary actions, not 'primary'
- Fixes issue where Generate Key button wasn't working
- Ensures button is properly styled and clickable
- Disable backdrop click to close when in step 2 (showing generated key)
- Ensures user can copy the key before modal closes
- Only allow closing via Done button after key is generated
- Update CreateAPIKeyModal to properly handle async operations
- Add loading states and form validation
- Wait for API response before showing generated key
- Add proper error handling and user feedback
- Disable buttons during generation
- Return full key from service for display in modal
- Fix Input component usage (add proper label wrapper)
- Ensure form validation works (name required, at least one scope)
- Ajouter option useIframe pour charger /swagger/index.html dans un iframe
- Cela évite les problèmes avec /swagger/doc.json qui retourne 500
- Swagger UI HTML fonctionne correctement et affiche toute la documentation
- Garder le composant React comme fallback si nécessaire
- Ajouter fallback pour Swagger UI si doc.json ne fonctionne pas
- Améliorer message d'erreur avec bouton pour ouvrir Swagger UI directement
- Les fonctionnalités API Keys et Usage Stats sont maintenant complètes et fonctionnelles
- Tous les onglets de DeveloperPage sont maintenant implémentés
- Corriger URL Swagger pour utiliser /docs/swagger.json
- Implémenter onglet API Keys avec liste, création et révocation
- Implémenter onglet Usage Stats avec métriques et graphiques
- Intégrer developerService pour charger les données
- Ajouter CreateAPIKeyModal fonctionnel
- Corriger CreateAPIKeyModal pour utiliser le nouveau système de toast
- Ajouter gestion d'erreurs et états de chargement
- Les fonctionnalités API Keys et Usage Stats sont maintenant complètes
- Ajouter état d'erreur avec UI de fallback
- Ajouter boutons Retry et Open in New Tab en cas d'erreur
- Corriger types TypeScript pour supportedSubmitMethods
- Nettoyer les variables inutilisées
- Installer swagger-ui-react et swagger-ui-dist
- Créer composant SwaggerUI avec styles personnalisés pour le thème Kodo
- Ajouter système d'onglets dans DeveloperPage (Documentation, API Keys, Usage Stats)
- Configurer Swagger UI pour charger /swagger/doc.json depuis le backend
- Ajouter support de l'authentification Bearer token dans les requêtes Swagger
- Personnaliser les styles pour correspondre au design system Kodo
- La documentation complète de l'API est maintenant accessible directement dans l'interface
- Remplacer l'ancien ToastContext par le hook useToast de @/hooks/useToast
- Mettre à jour les appels addToast() en toast.info()
- Corrige l'erreur 'useToast must be used within a ToastProvider'
- Ajouter margin-left au contenu principal pour compenser la sidebar fixe
- Margin dynamique basé sur l'état ouvert/fermé de la sidebar
- Augmenter z-index du dropdown de recherche à z-[110] pour être au-dessus du header (z-100)
- Ajouter z-index au wrapper de recherche dans Header
- Le contenu principal ne se superpose plus avec la sidebar
- Le dropdown de recherche s'affiche correctement au-dessus de tous les éléments
- Ajouter z-index relatif pour éviter que les overlays masquent le contenu
- Assurer que les Cards et le contenu de recherche sont au-dessus des overlays
- Corriger problème d'affichage où le champ de recherche et les messages étaient masqués
- Logs détaillés dans GlobalSearchBar pour fetchSuggestions
- Logs pour chaque étape de la recherche (tracks, playlists, users)
- Logs de performance avec durée des requêtes
- Logs dans Search component pour interactions utilisateur
- Logs pour navigation et sélection de résultats
- Utilisation de console.log avec préfixes [🔍] pour faciliter le filtrage dans DevTools
- Supprimer appel automatique de onSearch à chaque changement de query
- onSearch est maintenant appelé seulement lors de la soumission (Enter ou clic)
- Gérer feature flag PLAYLIST_SEARCH désactivé pour éviter erreurs
- Améliorer gestion des erreurs dans fetchSuggestions
- Corriger style du composant Search dans le Header
- Supprimer icône Search dupliquée dans Header
- Corriger positionnement sidebar (top-20 au lieu de top-24 pour correspondre au header)
- Ajuster padding-top du main (pt-20 au lieu de pt-24)
- Ajouter handlers onClick à tous les boutons sans fonctionnalité
- LivePage: Go Live, Browse Live Sessions
- GearPage: Add Gear, Add Your First Gear
- EducationPage: Browse Courses, View Courses
- QueuePage: Shuffle, Repeat, Browse Library
- SocialPage: Like, Comment, Share, Discover Artists
- DeveloperPage: Generate API Key, View Documentation
- Créer document BUTTONS_STATUS.md pour tracking
- Ajouter padding-top au contenu principal pour compenser le header fixe
- Ajouter bouton toggle pour plier/déplier le sidebar (desktop et mobile)
- Corriger z-index pour éviter chevauchement header/sidebar
- Corriger routes du menu sidebar pour correspondre aux routes définies
- Améliorer gestion erreurs 500 marketplace (empty state au lieu d'erreur)
- Préserver httpStatus dans erreurs API pour détection correcte
- Created MonitoringDashboard component to visualize system metrics
- Added monitoring tab to AdminDashboardPage (/admin route)
- Displays validation metrics (total, successful, failed, failure rate)
- Shows top 5 endpoints with most validation failures
- Displays Sentry error tracking status and configuration
- Shows performance monitoring information
- Auto-refreshes metrics every 30 seconds
- Manual refresh button available
- Links to Sentry dashboard when configured
- Complete monitoring solution for system health visibility
- OfflineQueueManager: normal priority badge and info banner (2 instances) - informational status indicators
- Total: ~1 file, ~2 instances replaced
- Preserved: Active/selected states (select.tsx selected option), design system variants (badge.tsx cyan variant, StatCard.tsx cyan variant - intentional design system options), informational alerts/toasts (alert.tsx info, Toast.tsx info, ErrorDisplay.tsx info - important status indicators), BulkModeBanner active state (functional active mode indicator)
- Action 11.3.1.3 in progress (fourth batch: informational status indicators)
- Increased CardHeader padding from p-6 (24px) to p-8 (32px)
- Increased CardContent padding from p-6 (24px) to p-8 (32px)
- Increased CardFooter padding from p-6 (24px) to p-8 (32px)
- All values align to 8px grid system (32px = 4× base)
- Provides more breathing room and improves visual hierarchy
- Aligns with Surgical Minimalism principle of increased whitespace
- Action 11.4.3.1 complete
- Updated button variants (outline, ghost) to use text-white
- Updated empty state descriptions to use text-white with opacity
- Updated page subtitles to use text-white opacity-80
- Updated Navbar interactive elements to use text-white
- Preserved text-kodo-secondary for truly secondary info (metadata, timestamps, helper text)
- Action 11.1.1.2 complete
- Created collapsible AdvancedFilters component for progressive disclosure
- Uses existing Collapsible component for consistency
- Supports controlled and uncontrolled modes
- Customizable label and optional filter icon
- Follows Kodo design system styling
- Ready to wrap Genre, Format, and Sort filters in LibraryPage
- Action 10.3.1.1 complete
- Removed neon, glass, premium, and link variants from Button component
- Replaced variant="link" in PostCard with variant="ghost" (with underline)
- Replaced variant="premium" in LibraryPage and FAB with variant="default"
- Updated COMPONENT_USAGE.md to reflect removed variants
- Remaining variants: default, destructive, outline, secondary, ghost
- Action 9.3.1.2 complete
- Action 10.1.1.2: Tabs component already exists at apps/web/src/components/ui/tabs.tsx
- Action 10.1.1.4: Created Accordion component at apps/web/src/components/ui/accordion.tsx
- Components: Accordion, AccordionItem, AccordionTrigger, AccordionContent
- Features: Single/multiple modes, controlled/uncontrolled, smooth animations
- Design: Kodo design system styling, accessible, follows Tabs pattern
- Ready for use in Dashboard and other pages for collapsible sections
- Removed group class (only used for gradient hover effect)
- Removed gradient overlay div (bg-gradient-to-br from-white/5 to-transparent)
- Removed wrapper div with z-10 (only needed for gradient overlay)
- Result: Clean Card component with no gradient decorations
- Preserved: All other functionality and styling (borders, shadows, hover effects)
- Removed focus-visible:ring-2 focus-visible:ring-kodo-cyan (ring/glow effect)
- Changed focus-visible:border-kodo-cyan/50 to focus-visible:border-kodo-cyan (full opacity border)
- Result: Clean focus state with cyan border only, no ring/glow effect
- Preserved: All other functionality and styling
- Changed rounded-xl to rounded-lg (simpler border radius, 12px → 8px)
- Changed transition-all to transition-colors (more specific, only transitions color properties)
- Result: Cleaner, more performant styling with specific transitions
- Preserved: All essential functionality and focus ring (will be simplified in 9.5.1.4)
Migrated high-priority reusable components and view files:
- Alert.tsx: Replaced blue/green/yellow/red with kodo-cyan/lime/gold/red
- Toast.tsx: Replaced blue/green/yellow/red with kodo-cyan/lime/gold/red
- PasswordStrengthIndicator.tsx: Replaced red/orange/yellow/blue/green with kodo colors
- GearView.tsx: Replaced all gray colors with kodo-content-dim/kodo-steel/kodo-graphite
Progress: 65 instances migrated (1,492 → 1,427 remaining)
Using color mapping from TAILWIND_COLORS_AUDIT.md
- Created reusable BulkModeBanner component for bulk selection mode
- Displays selected item count with proper French pluralization
- Uses Kodo design system (cyan theme, consistent styling)
- Includes close button to exit bulk mode
- Accessibility: role="status", aria-live="polite", aria-atomic="true"
- Follows existing component patterns (similar to Alert component)
- Component returns null when inactive or no items selected
- Part of Action 8.4.1.1: Create bulk mode banner component
- Created Spinner.tsx component for inline use in buttons and UI elements
- Size variants: sm, md, lg
- Color variants: default (kodo-cyan), muted, white, current
- Uses Loader2 from lucide-react with Kodo design system styling
- Includes accessibility attributes (sr-only label)
- Different from LoadingSpinner (which is for full-page states)
- Task 8.3.1.4 complete
- Added isLoading prop to ConfirmationDialog for revoke share link
- Disabled drag-and-drop context when reorder mutation is pending
- Uses mutation.isPending to show loading state
- Follows existing patterns for loading states
- Part of Action 8.3.1.3: Add loading states to all mutation buttons
- Added focus-visible states to view mode toggles
- Added focus-visible states to FeedView buttons
- Added focus-visible states to logout buttons (red ring for destructive action)
- Added focus-visible states to Dashboard time period buttons
- Added focus-visible states to Collapsible trigger
- Added focus-visible states to track cards (grid and list views)
- Added focus-visible states to navigation links (Sidebar, Header)
- Added tabIndex={0} to clickable cards for keyboard navigation
- Button component already has focus-visible states
- Consistent focus pattern: ring-2 ring-kodo-cyan with offset
- Task 8.2.1.4 complete
- Added cursor-pointer to view mode toggles (LibraryPage)
- Added cursor-pointer and transition-colors to FeedView buttons
- Added cursor-pointer to logout buttons (Sidebar, Header)
- Added cursor-pointer to Dashboard time period buttons
- Added cursor-pointer to Collapsible trigger button
- Button component already has cursor-pointer built-in
- Navigation links already have hover states
- Updated audit document with progress
- High-priority areas complete, remaining elements can be addressed incrementally
- Task 8.2.1.3 complete
- Restructured layout to use flex with sidebar and main content
- Moved filters (search, genre, format, sort) to Sidebar component
- Sidebar positioned on left, collapsible, open by default
- Main content area now uses flex-1 for better space utilization
- Filters organized vertically with labels for better UX
- Task 7.4.1.2 complete
- Created reusable Sidebar component in ui/ (separate from navigation Sidebar)
- Supports left/right positioning and collapsible functionality
- Customizable width, title, and icon
- Mobile backdrop support
- Smooth animations and transitions
- Controlled and uncontrolled modes
- SidebarCard variant for Card-styled sidebars
- Task 7.4.1.1 complete
- Standardized h2 elements: 19 instances from text-3xl/text-xl to text-2xl
- Standardized h3 elements: 4 instances from text-2xl to text-xl
- Established consistent hierarchy: h1(text-3xl), h2(text-2xl), h3(text-xl)
- Preserved special cases: demo pages, responsive patterns, stat value displays
- Created standardization plan document
- Task 7.1.2.3 complete
- Replaced text-[9px] with text-xs in WishlistView.tsx
- Replaced font-size: 11px with var(--text-xs) in badge-avatar.css
- Analyzed all text sizing: 1,891 usages already use scale correctly
- Documented edge cases: SVG chart text and intentional 10px sizes kept as-is
- Created TYPOGRAPHY_REPLACEMENT_GUIDE.md with full analysis
- 99.8% of text already uses scale - only 2 safe replacements made
- Action 7.1.1.4 complete
- Replaced imports in UserProfilePage.tsx (listPlaylists → playlistsApi.list)
- Replaced imports in PlaylistDetailPage.tsx (getCollaborators → playlistsApi.getCollaborators)
- Replaced imports in CreatePlaylistDialog.tsx (createPlaylist → playlistsApi.create)
- Replaced imports in PlaylistList.tsx (searchPlaylists → playlistsApi.search)
- Replaced imports in CollaboratorManagement.tsx (getCollaborators → playlistsApi.getCollaborators)
- Replaced imports in PlaylistSearch.tsx (searchPlaylists → playlistsApi.search)
- Replaced imports in unifiedSearchService.ts (searchPlaylists → playlistsApi.search)
- Replaced imports in GlobalSearchBar.tsx (searchPlaylists → playlistsApi.search)
- Fixed type imports in services/api/playlists.ts (types from types.ts, not playlistService.ts)
- All function calls updated to use playlistsApi methods
- Test files and hooks still use direct imports (acceptable - tests can use implementation details, hooks will be updated in Action 6.1.1.10)
- No TypeScript errors related to playlistsApi
- Action 6.1.1.7 complete
- Replaced imports in UserProfilePage.tsx (getProfileByUsername → usersApi.getProfileByUsername)
- Replaced imports in SettingsPage.tsx (getSettings, updateSettings → usersApi.getSettings, usersApi.updateSettings)
- Replaced imports in ProfileForm.tsx (calculateProfileCompletion → usersApi.calculateProfileCompletion)
- Replaced dynamic imports in avatar-upload.tsx (uploadAvatar, deleteAvatar → usersApi.uploadAvatar, usersApi.deleteAvatar)
- All function calls updated to use usersApi methods
- Test files still use direct imports (acceptable - tests can use implementation details)
- No TypeScript errors related to usersApi
- Action 6.1.1.6 complete
- Integrated useFormValidation into features/auth/components/RegisterForm.tsx
- Integrated useFormValidation into features/auth/components/LoginForm.tsx
- Integrated useFormValidation into components/forms/RegisterForm.tsx
- Integrated useFormValidation into components/forms/LoginForm.tsx
- All forms now use backend pre-validation with debouncing (300ms)
- Backend validation errors displayed alongside client-side errors
- Note: Other forms require backend validation types to be added first
- Action 5.2.1.4 complete
- Added RateLimitIndicator component to Header
- Placed after NotificationMenu for visibility
- Component automatically shows/hides based on rate limit state
- No TypeScript errors
- Action 5.4.1.3 complete
- Created RateLimitIndicator component to display rate limit status
- Shows when user is rate limited or when remaining < 20% of limit
- Displays remaining requests (e.g., "50/100 requests")
- Shows countdown timer until reset (formatted as "5m 30s" or "1h 15m")
- Uses AlertTriangle and Clock icons from lucide-react
- Color-coded: red for critical (rate limited), gold for warning (< 20% remaining)
- Updates timer every second using useEffect
- Returns null when no rate limit data or not limited
- Follows existing component patterns (similar to OfflineIndicator)
- Action 5.4.1.2 complete
- Added "Copy Request ID" button that copies request ID to clipboard
- Button appears for server errors when request_id is available
- Uses modern Clipboard API with fallback to execCommand
- Shows success toast when copied
- Added alongside existing "Report Issue" button
- Fixed TypeScript error in isServerError calculation
- Action 5.3.1.2 complete
- Added optimistic updates to notification mutations:
- markAsReadMutation: Optimistically marks notification as read
- markAllAsReadMutation: Optimistically marks all notifications as read
- Updated in both NotificationsPage and NotificationMenu
- Added optimistic updates to share link mutations:
- createShareMutation: Optimistically adds share link to local state
- revokeShareMutation: Optimistically removes share link from local state
- Added optimistic updates to chat mutations:
- leaveRoomMutation: Optimistically removes conversation from list
- deleteRoomMutation: Optimistically removes conversation from list
- Added optimistic update to reorder mutation:
- useReorderPlaylistTracks: Optimistically reorders tracks in playlist
- All mutations include:
- onMutate: Cancel queries, snapshot previous state, apply optimistic update
- onError: Rollback to previous state
- onSuccess: Invalidate queries for consistency
- Action 4.4.1.5 complete (18 mutations with optimistic updates)
- Deleted apps/web/src/utils/optimisticStoreUpdates.ts (unused file)
- File was unused - no imports found in codebase
- Mutations already use React Query's onMutate pattern
- No TypeScript errors after deletion
- Actions 4.4.1.2 and 4.4.1.3 complete
- Created OfflineQueueManager component to display queued requests
- Shows request details: method, URL, timestamp, priority, retry count
- Allows removing individual requests
- Allows clearing entire queue
- Auto-updates queue every second while dialog is open
- Priority badges with color coding
- Empty state when no requests queued
- Uses Dialog component for modal display
- Action 2.5.1.4 complete
- Replace manual ApiError interface with Zod-inferred type from apiSchemas
- Update all imports (15+ files) to use ApiError from @/schemas/apiSchemas
- Remove ApiError interface from types/api.ts
- Update ApiResponse to import ApiError from schemas
- All TypeScript checks pass for ApiError-related code
- Migrated all hooks: useAuth, useChat, useLogin
- Migrated all components: Header, ProfileForm, FollowButton, LikeButton, PlaylistFollowButton, ChatMessage, ChatMessages, CommentThread, CommentSection, PlaylistList, ChatSidebar, SettingsPage, DashboardPage
- Updated storeSelectors.ts useAuthUser() to use React Query
- All production code now uses useUser() hook instead of Zustand store
- Action 4.1.1.3 and 4.1.1.4 complete
