- 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)
- Expanded basic checklist into comprehensive implementation guide
- Added detailed sections: Color (80/20 rule), Spacing (8px grid), Interactions, Visual Elements
- Added component-specific checks: Buttons, Cards, Navigation, Forms, Pages
- Included specific Tailwind classes and values for each check
- Added 'keep vs remove' guidance for hover effects and visual elements
- Added final validation section for overall assessment
- Provides actionable, step-by-step guidance for applying Surgical Minimalism
- Action 11.5.1.2 complete
- Created comprehensive design direction document
- Defined 6 core principles: 80/20 color rule, increased whitespace, subtle interactions, gradients used sparingly, 8px grid system, text color hierarchy
- Documented design tokens and color usage guidelines
- Added implementation checklist for applying principles
- Included good vs avoid examples with code snippets
- Documented migration path and references to audit documents
- Aligns with all completed aesthetic improvement actions
- Serves as foundation for future design work
- Action 11.5.1.1 complete
- 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
- Created verification document documenting all remaining gradients
- Verified 12 remaining gradients are appropriate:
- 6 in hero/featured sections (DiscoverView, ProfileView, SocialView, LiveView)
- 1 functional overlay for text readability
- 5 decorative elements (icon containers, visualizations)
- Confirmed no gradients on card backgrounds
- All gradients used sparingly and appropriately, aligning with Surgical Minimalism
- Action 11.4.2.2 complete
- Created contrast utility (apps/web/src/utils/contrast.ts)
- getRelativeLuminance() - calculates WCAG relative luminance
- getContrastRatio() - calculates contrast ratio between colors
- meetsWCAGAA() / meetsWCAGAAA() - validates WCAG standards
- parseRGB() - parses RGB strings from CSS variables
- Created contrast test suite (apps/web/src/__tests__/contrast.test.ts)
- Tests all design system color combinations
- Validates primary text (white) on all backgrounds
- Validates secondary text (dim) on all backgrounds
- Validates text with opacity variants
- All combinations must meet WCAG AA (4.5:1)
- Added contrast test step to CI workflow
- Prevents contrast ratio regressions
- Action 11.1.1.5 complete
- Created comprehensive contrast test report
- Tested all text color combinations (white, dim, opacity variants)
- Tested on all 5 background colors (void, ink, graphite, slate, steel)
- All combinations exceed 4.5:1 ratio requirement
- Primary text: 15.9:1 to 20.6:1 (excellent)
- Secondary text: 6.1:1 to 7.8:1 (good)
- Text with opacity: 11.8:1 to 16.2:1 (excellent)
- No violations found - all text meets WCAG AA
- Action 11.1.1.3 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 GRID_SYSTEM.md documentation
- Documents 8px base grid system for visual rhythm
- Spacing scale table with 8px-aligned values
- Usage guidelines and examples
- Migration notes for current spacing system
- Action 11.2.1.1 complete
- Changed --kodo-text-main from #F3F3E0 (Quiet Paper) to #FFFFFF (white)
- Improves contrast and readability on dark backgrounds
- Better WCAG AA compliance
- Action 11.1.1.1 complete
- Created firstTime utility for detecting first-time users
- Functions: isFirstTime, markAsNotFirstTime, isOnboardingCompleted, markOnboardingCompleted
- Uses localStorage to persist state across sessions
- Graceful error handling with logger warnings
- SSR-safe (returns false on server)
- Can be integrated with Onboarding component
- Action 10.4.1.4 complete
- Moved view mode toggle from two prominent buttons to dropdown menu
- Single button shows current view mode icon (Grid or List)
- Dropdown contains both view options with icons and labels
- Active option highlighted in dropdown
- Reduces visual prominence while preserving functionality
- List view kept as per audit recommendation
- Action 10.2.1.2 complete
- Added Tabs component to organize Activity Feed content
- Chart and Activity List now in separate tabs (Graphique, Activité)
- Reduces cognitive load by showing one view at a time
- Default tab is 'Graphique' (Chart)
- Tabs are inside the collapsible Activity Feed section
- Action 10.1.1.3 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
- Added comprehensive visual test section to DesignSystemDemoPage
- Tests all 5 variants (default, destructive, outline, secondary, ghost)
- Tests all 4 sizes (sm, default, lg, icon)
- Tests all variant × size combinations (20 total)
- Tests normal and disabled states
- Available at /design-system route for visual verification
- Action 9.3.1.6 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
- Added no-restricted-syntax rule to detect native <button> elements
- Rule warns developers to use Button component from @/components/ui/button
- Ensures consistent styling, accessibility, and design system compliance
- Rule tested and working correctly
- Action 9.2.1.3 complete
- Added no-restricted-syntax rule to detect Tailwind default color classes
- Warns on default colors (slate, gray, zinc, red, blue, etc.) in className strings
- Prompts developers to use Kodo design system colors instead
- Rule tested and working - correctly flags violations
- Action 9.1.1.4 complete
- Audited all files with view mode toggle (6 files total)
- Found list view is actively used and is default in 3 contexts:
- SearchPageView: List is default for search results
- FileManagerView: List is default for file browsing
- CloudFileBrowser: List is default for cloud files
- Grid view is default in track browsing contexts (LibraryPage, LibraryManager, ProfileView)
- Recommendation: Keep list view - serves different purposes than grid view
- Created comprehensive audit report: apps/web/docs/LIST_VIEW_USAGE_AUDIT.md
- Includes context-specific analysis and recommendations
- 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
- Scanned 166 files with button elements
- Identified 30+ high-priority custom button implementations
- Documented locations, line numbers, and recommended Button variants
- Created comprehensive audit report: apps/web/docs/CUSTOM_BUTTONS_AUDIT.md
- High priority: Live stream, Dashboard, Social, Admin, Studio, File Manager, Modals
- Includes migration strategy and next steps
- 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 comprehensive TAILWIND_COLORS_AUDIT.md documenting all Tailwind default colors
- Found 1,492 instances across 235 files
- Most common: text-gray-* (992), bg-gray-* (146), border-gray-* (107)
- Documented color distribution, top 20 classes, and mapping guide
- Identified top 20 files requiring migration
- Created migration priority guide (High/Medium/Low)
- Documented special cases (test files, component libraries)
- Ready for Action 9.1.1.3 (migration to Kodo colors)
- Created comprehensive COLOR_USAGE.md documenting Kodo design system colors
- Documents all background, accent, semantic, and text colors with usage guidelines
- Includes 80/20 rule, color hierarchy, do's and don'ts
- Provides code examples and migration notes from Tailwind defaults
- References color definition files for developers
This guide ensures consistent color usage across the application and helps
developers choose the right colors for their components.
- Remove obsolete error logging in api/auth.ts that expected tokens in localStorage
- Fix tokenRefresh.ts periodic refresh to not check tokens (httpOnly cookies not accessible)
- Mark Actions 5.1.1.6-5.1.1.9 as complete in TODO list
Actions 5.1.1.7-5.1.1.9 were already completed in previous actions:
- 5.1.1.7: TokenStorage already returns null (httpOnly cookies not readable)
- 5.1.1.8: tokenRefresh already works with cookies
- 5.1.1.9: All token access goes through TokenStorage
No localStorage.getItem/setItem calls for tokens remain (only removeItem for cleanup)
Backend changes (Action 5.1.1.1):
- Set access_token cookie in Login, Register, and Refresh handlers
- Cookie uses same configuration as refresh_token (httpOnly, Secure, SameSite)
- Expiry matches AccessTokenTTL (5 minutes)
- Update logout handler to clear access_token cookie
Backend middleware (Action 5.1.1.1):
- Update auth middleware to read access token from cookie first
- Fallback to Authorization header for backward compatibility
- Update OptionalAuth with same cookie-first logic
Frontend changes (Actions 5.1.1.2 & 5.1.1.3):
- Remove localStorage token storage from TokenStorage service
- TokenStorage now returns null for getAccessToken/getRefreshToken (httpOnly cookies not accessible)
- Remove Authorization header logic from API client
- Remove token expiration checks (can't check httpOnly cookies from JS)
- Update AuthContext to remove localStorage usage
- Update tokenRefresh to work without reading tokens from JS
- Simplify refresh logic: periodic refresh every 4 minutes (no expiration checks)
Security improvements:
- Access tokens no longer exposed to XSS attacks (httpOnly cookies)
- Tokens automatically sent with requests via withCredentials: true
- Backend reads tokens from cookies, not Authorization headers
- All users will need to re-login after deployment (breaking change)
Breaking change: All users must re-login after deployment
- Grid view: Added bg-kodo-cyan/10 background, stronger ring (ring-kodo-cyan/40), shadow with cyan glow
- List view: Added bg-kodo-cyan/15 background, border-l-4 border-kodo-cyan left border, subtle shadow
- Both views now have more prominent visual indication when selected
- Maintains existing hover and focus states
- Part of Action 8.4.1.3: Highlight selected items clearly
- Imported BulkModeBanner component
- Added banner at top of content area (before header)
- Banner shows when isBulkMode is true
- Displays selectedTracks.size count
- onClose handler disables bulk mode and clears selection
- Banner appears above ErrorDisplay for proper visual hierarchy
- Part of Action 8.4.1.2: Show banner in LibraryPage when bulk mode active
- 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 isLoading prop to ConfirmationDialog for delete comment
- Uses deleteCommentMutation.isPending to show loading state
- Follows existing pattern for confirmation dialogs
- Part of Action 8.3.1.3: Add loading states to all mutation buttons
- Many buttons already have loading states (verified during implementation)
- Added Loader2 import from lucide-react
- Added disabled prop to DropdownMenuItem using mutation.isPending
- Shows spinner and 'Ajout en cours...' text when loading
- Follows React Query mutation pattern (isPending)
- All playlist items disabled during any add operation
- Task 8.3.1.1 complete
- 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
- Created comprehensive audit document: apps/web/docs/INTERACTIVE_ELEMENTS_AUDIT.md
- Identified 10 categories of interactive elements
- Found 500+ interactive elements across codebase
- Documented patterns: good, needs improvement, missing
- Prioritized areas for hover/focus state improvements
- Task 8.2.1.2 complete
- Added hover:shadow-lg and hover:shadow-kodo-cyan/20 for depth
- Added hover:scale-[1.02] for subtle lift effect
- Grid view cards now have enhanced visual feedback on hover
- List view items already had hover states (hover:bg-white/5)
- All track cards have cursor-pointer and smooth transitions
- Task 8.2.1.1 complete
- Added support for action=upload query parameter in LibraryPage
- Dashboard FAB navigates to /library?action=upload, opens modal
- LibraryPage header button directly opens modal
- Both buttons result in same behavior (upload modal opens)
- Query parameter cleaned from URL after modal closes
- Task 8.1.1.4 complete
- Removed LibraryPage empty state buttons (grid and list views)
- Removed LibraryManager header and empty state buttons
- Kept Dashboard FAB (primary) and LibraryPage header button (secondary)
- Result: Only 2 upload buttons remain, consistent behavior
- Empty state messages preserved, users can use header button
- Task 8.1.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
- Removed Upload button from header section
- Added FAB component at bottom-right position
- FAB shows 'Upload Track' label with backdrop blur
- Large size (64px) with Plus icon
- Premium variant with enhanced glow effects
- Always visible, floating above content
- Task 7.3.1.8 complete
- Changed variant from default to premium (enhanced gradient/glow)
- Increased size from h-12 to h-14 (56px)
- Increased padding from px-8 to px-10
- Increased text from text-base to text-lg
- Changed font-weight to font-bold
- Increased icon size from w-4 h-4 to w-5 h-5
- Enhanced shadow glow effects
- Task 7.3.1.3 complete
- Changed welcome message from text-4xl to text-2xl
- Reduces visual prominence, allowing primary stat to be focal point
- Maintains font-bold for hierarchy
- Task 7.3.1.2 complete
- Primary stat now spans 2 columns on md/lg screens
- Increased value text from text-3xl to text-6xl (2x larger)
- Increased icon size from w-5 h-5 to w-8 h-8
- Increased padding and text sizes throughout for prominence
- Task 7.3.1.1 complete
- Created complete spacing system guide in apps/web/docs/SPACING_GUIDE.md
- Documented numeric and semantic spacing scales with full value tables
- Included usage guidelines, best practices, and common patterns
- Added migration guide for replacing arbitrary values
- Documented ESLint enforcement and related documentation
- Task 7.2.1.7 complete
- Added semantic spacing variables (xs through xxl)
- Preserved existing numeric spacing scale
- Added documentation for semantic vs numeric usage
- Provides both precise control and design system consistency
- Task 7.2.1.1 complete
- Standardized 9 paragraphs without explicit sizes
- Added text-sm to secondary/description text (7 instances)
- Added text-base to body text (2 instances)
- Established standard: text-base for body, text-sm for secondary
- Verified 490 paragraphs across 207 files follow type scale
- Created standardization plan document
- Task 7.1.2.4 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
- Audited 55 h1 elements across 52 files
- Documented size distribution: text-3xl (26), text-2xl (16), text-4xl (10), etc.
- Identified inconsistencies: 6 different sizes used for h1 elements
- Found 11+ files with text-2xl h1 that should be text-3xl for consistency
- Documented responsive patterns and special cases
- Provided recommendations for standardization
- Created comprehensive audit report in apps/web/docs/H1_ELEMENTS_AUDIT_REPORT.md
- Action 7.1.2.1 complete
- Added no-restricted-syntax rule to warn on arbitrary text sizes (text-[...px], text-[...rem])
- Rule matches both string literals and template literals
- Warns developers to use type scale classes (text-xs through text-4xl)
- Includes guidance about SVG chart text exceptions
- Rule tested and confirmed working
- Helps prevent future arbitrary text sizes from being introduced
- Action 7.1.1.5 complete
- Documented all remaining arbitrary text sizes (9px, 10px, 11px instances)
- Noted that 99.8% of text already uses scale correctly
- Documented edge cases for design review
- Guide now complete with full inventory
- 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
- Audited 1,891 text size class usages across 342 files
- Documented usage distribution: text-sm (870), text-xs (596), text-2xl (130), etc.
- Identified top 10 files with highest usage
- Analyzed usage patterns by component type (pages, forms, cards, navigation)
- Identified inconsistencies in heading hierarchies and body text sizes
- Provided recommendations for standardization
- Created comprehensive audit report in apps/web/docs/TYPOGRAPHY_AUDIT_REPORT.md
- Action 7.1.1.3 complete
- Created apps/web/tailwind.config.ts with documentation
- Verified text size utilities (text-xs through text-4xl) already working
- Confirmed 1871+ usages of text size classes throughout codebase
- Tailwind v4 automatically generates utilities from CSS variables in @theme
- All utilities functional via design-tokens.css
- Action 7.1.1.2 complete
- Added end of list indicator when all tracks loaded (hasNextPage false)
- Shows track count in end of list message
- Added error handling for infinite scroll errors (errors after initial load)
- Shows retry button when error occurs during scroll
- Only shows error indicator when tracks already loaded (not initial error)
- Edge cases now handled gracefully
- Action 6.3.1.5 complete
- Replaced basic text indicator with LoadingState component
- Uses inline variant with spinner and text
- Size: sm (appropriate for bottom of list)
- Text: 'Chargement de plus de pistes...'
- Styled with kodo-secondary for theme consistency
- Centered with proper padding for visibility
- Action 6.3.1.4 complete
- Removed old page state reference from useEffect
- Fixed genres/formats extraction to use filteredTracks
- Updated TODO list with Action 6.3.1.3 completion
- Converted from useQuery with pagination to useInfiniteQuery
- Removed page state (no longer needed)
- Flattened all pages into single filteredTracks array
- Integrated useInfiniteScroll hook with VirtualizedList
- Removed pagination component (replaced with infinite scroll)
- Added loading indicator when fetching next page
- Updated query invalidation to use correct query key
- Fixed batchUpdate to use tracksApi.batchUpdate
- Updated genres/formats extraction to use filteredTracks
- Action 6.3.1.3 complete
- Updated features/auth/api/authApi.ts to re-export from services/api/auth.ts
- Added deprecation comments to features/tracks/api/trackApi.ts
- Added documentation comments to webhooks, sessions, and admin API files
- All feature API files now document their relationship to the service layer
- Maintains backward compatibility
- No breaking changes
- Action 6.1.1.10 complete
- Updated apps/web/src/services/api/index.ts to export all API services
- Exports apiClient and utilities from './client'
- Exports authApi and types from './auth'
- Exports tracksApi and types from './tracks'
- Exports usersApi and types from './users'
- Exports playlistsApi and types from './playlists'
- Removed duplicate apiClient export from './auth'
- Added documentation comments for each service section
- All services properly exported and accessible via barrel export
- No TypeScript errors
- Action 6.1.1.9 complete
- Replaced imports in VerifyEmailPage.tsx (verifyEmail, resendVerificationEmail → authApi.verifyEmail, authApi.resendVerification)
- Replaced imports in useUsernameAvailability.ts (checkUsernameAvailability → authApi.checkUsername with response.available extraction)
- Replaced imports in usePasswordReset.ts (requestPasswordReset, resetPassword → authApi.requestPasswordReset, authApi.resetPassword)
- Replaced imports in RegisterPage.tsx (resendVerificationEmail → authApi.resendVerification)
- All function calls updated to use authApi methods with proper request object wrapping
- Test files still use direct imports (acceptable - tests can use implementation details)
- AuthContext.tsx uses services/authService (legacy service, separate from features/auth/services/authService)
- No TypeScript errors related to authApi
- Action 6.1.1.8 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
- Replaced imports in UploadModal.tsx (uploadTrack → tracksApi.create)
- Replaced imports in ShareDialog.tsx (createTrackShare → tracksApi.createShare)
- Replaced imports in LibraryPage.tsx (getTracks, batchDeleteTracks, batchUpdateTracks → tracksApi.list, tracksApi.batchDelete, tracksApi.batchUpdate)
- Replaced imports in UserProfilePage.tsx (getTracks → tracksApi.list)
- All function calls updated to use tracksApi methods
- Types re-exported from tracksApi for convenience
- No direct imports from @/features/tracks/api/trackApi remain in feature components
- Test files still use direct imports (acceptable - tests can use implementation details)
- No TypeScript errors related to tracksApi
- Action 6.1.1.2 complete
- Created apps/web/src/services/api/tracks.ts with tracksApi object
- Exports: list, get, create, update, delete, getStats, getHistory, download, like, unlike, getLikes, createShare
- Includes chunked upload methods: initiateChunkedUpload, uploadChunk, completeChunkedUpload
- Includes batch operations: batchDelete, batchUpdate
- Wraps existing track API functions from features/tracks/api/trackApi.ts
- Includes getTrack from features/tracks/services/trackService.ts for single track retrieval
- Re-exports all related types for convenience
- Added to services/api/index.ts for barrel export
- No TypeScript errors
- Follows existing service layer pattern (similar to auth.ts)
- Action 6.1.1.1 complete
- Added PROACTIVE_REFRESH_INTERVAL_MS constant (4 minutes)
- Reduced PROACTIVE_REFRESH_BUFFER_MS to 1 minute (tokens expire in 5 min)
- Added proactiveRefreshInterval variable to track periodic refresh
- Created startPeriodicRefresh() function that sets up interval to refresh every 4 minutes
- Updated scheduleProactiveRefresh() to call startPeriodicRefresh()
- Updated cancelProactiveRefresh() to also clear the interval
- Periodic refresh checks token validity before refreshing
- Stops periodic refresh if token is expired or missing
- No TypeScript errors
- Works with existing token refresh infrastructure
- Action 5.1.1.5 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
- Integrated useFormValidation hook into RegisterForm
- Integrated useFormValidation hook into LoginForm
- Validation triggers on form data change (debounced 300ms)
- Backend validation errors displayed alongside client-side errors
- Errors mapped to correct form fields
- Uses watch() from react-hook-form to monitor form changes
- Handles field name mapping (password_confirm vs password_confirmation)
- No TypeScript errors
- Action 5.2.1.2 complete
- Added debouncing to validate function using setTimeout
- Default debounce delay: 300ms (configurable via debounceMs option)
- Debounce can be disabled by setting debounceMs to 0
- Uses validation ID tracking to cancel superseded validations
- Only updates state if validation is still the latest request
- Cleans up timer on unmount
- Prevents unnecessary API calls during rapid typing
- No TypeScript errors
- Action 5.2.1.5 complete
- Created useFormValidation hook with validate function
- Accepts validation type (e.g., "RegisterRequest", "LoginRequest")
- Calls /api/v1/validate endpoint with type and data
- Returns validation state: isValidating, errors, isValid, error
- Provides clear() function to reset validation state
- Handles both wrapped and direct API response formats
- Uses parseApiError for consistent error handling
- Exported from hooks/index.ts with types
- No TypeScript errors
- Follows existing hook patterns
- Action 5.2.1.3 complete
- Created useIsRateLimited() hook to check rate limit state
- Updated CommentSection submit button to disable when rate limited
- Updated LikeButton to disable when rate limited
- Updated PlaylistForm submit button to disable when rate limited
- Updated ChatInput send button to disable when rate limited
- Updated UploadModal upload button to disable when rate limited
- All buttons check isLimited from rate limit store
- Hook uses Zustand selector for efficient re-renders
- Pattern established for future mutation buttons
- Action 5.4.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
- Created rate limit store (apps/web/src/stores/rateLimit.ts) to store parsed headers
- Added header parsing in success response interceptor:
- X-RateLimit-Limit: Maximum requests allowed
- X-RateLimit-Remaining: Requests remaining
- X-RateLimit-Reset: Unix timestamp when limit resets
- Added header parsing in error response interceptor:
- Includes Retry-After header for 429 errors
- All rate limit headers parsed from both lowercase and uppercase variants
- Store automatically updated on every API response
- Store includes isLimited flag calculated from remaining/retryAfter
- Uses Zustand with persistence for cross-tab state
- Actions 5.4.1.1 and 5.4.1.6 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
- Removed development-only check for request ID in formatErrorMessage function
- Request ID now always included when includeRequestId parameter is true
- Improves error correlation in production environments
- Updated comment to reflect change
- Action 5.3.1.1 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)
- Added optimistic updates to high-priority playlist mutations:
- useCreatePlaylist: Optimistically adds new playlist to list
- useUpdatePlaylist: Optimistically updates playlist in cache and list
- useDeletePlaylist: Optimistically removes playlist from list
- useAddTrackToPlaylist: Optimistically adds track and updates count
- 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 in progress (high-priority mutations complete)
- Created QueryClient singleton (queryClientSingleton.ts):
- Provides global access to QueryClient for state invalidation
- Set in main.tsx after QueryClient creation
- Updated invalidateQueries() to use QueryClient directly:
- Replaced custom event system with direct QueryClient.invalidateQueries()
- Added query key mapping for all resource types
- Event system kept as fallback if QueryClient not available
- Updated invalidateStore() for Library Store:
- Removed clearItems() call (method doesn't exist, domain data migrated to React Query)
- Library Store now only contains UI state (filters)
- React Query cache invalidation handles refetching
- Query keys mapped:
- tracks: ['tracks'], ['track'], ['library']
- playlists: ['playlists'], ['playlist']
- users: ['users'], ['user'], ['auth'], ['userProfile']
- conversations: ['conversations'], ['conversation'], ['chat'], ['chatConversations']
- roles: ['roles'], ['role']
- library: ['library'], ['tracks'], ['favorites'], ['libraryItems']
- auth: ['auth'], ['user']
- Action 4.6.1.5 complete
- Removed stateMiddleware utility (431 lines):
- Deleted apps/web/src/utils/stateMiddleware.ts
- Deleted apps/web/src/utils/stateMiddleware.test.ts (251 lines)
- Completely unused in production code (only used in test file)
- Previously removed from Library Store in Action 4.1.2.7
- Library Store now only contains UI state (filters), no middleware needed
- Created audit documentation: apps/web/src/docs/STATEMIDDLEWARE_UTILITY_AUDIT.md
- Action 4.6.1.4 complete
- Removed undoRedo utility (8587 bytes):
- Deleted apps/web/src/utils/undoRedo.ts
- Removed WithUndoRedo<T> type from stores/types.ts
- Removed WithUndoRedo export from stores/index.ts
- Completely unused (confirmed in Action 4.6.1.9 audit)
- Removed stateNormalization utility (6321 bytes):
- Deleted apps/web/src/utils/stateNormalization.ts
- Updated stores.test.ts to remove outdated tests:
- Removed createEmptyNormalized import
- Removed outdated Library Store tests (items/favorites)
- Updated Library Store tests to test current structure (filters only)
- Updated Chat Store tests to use feature store
- Updated Auth Store tests (user data migrated to React Query)
- Fixed beforeEach to not call non-existent methods
- Only used in outdated test file (confirmed in Action 4.6.1.11 audit)
- Both utilities made obsolete by React Query migration
- Actions 4.6.1.10 and 4.6.1.12 complete
- Audited undoRedo utility: completely unused (no imports found)
- Only type exports remain (WithUndoRedo) but also unused
- Previously removed from Library Store in Action 4.1.2.5
- Safe to remove (Action 4.6.1.10)
- Audited stateNormalization utility: only used in outdated test
- Only createEmptyNormalized used in stores.test.ts
- Tests check obsolete Library Store structure (items/favorites)
- Library Store migrated to React Query in Action 4.1.2.6
- Safe to remove after updating test file (Action 4.6.1.12)
- Created audit documentation:
- apps/web/src/docs/UNDOREDO_UTILITY_AUDIT.md
- apps/web/src/docs/STATENORMALIZATION_UTILITY_AUDIT.md
- Actions 4.6.1.9 and 4.6.1.11 complete
- Removed duplicate stores/chat.ts (old store)
- Consolidated to features/chat/store/chatStore.ts (active store)
- Updated ChatMessages.tsx to use feature store (currentConversationId + lookup)
- Updated storeSelectors.ts to use feature store and export only existing methods
- Updated stateHydration.ts to skip chat hydration (uses React Query)
- Updated stateInvalidation.ts to not call fetchConversations (React Query handles it)
- Updated stores/index.ts to export feature store
- Updated documentation
- Test files still reference old store (separate update needed)
- Action 4.5.1.5 complete
- 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
- Added optional onStateSync callback to BroadcastSyncOptions
- Callback is called when state is updated locally or synced from another tab
- Callback receives new state and previous state as parameters
- Error handling prevents callback errors from breaking sync
- Stores can opt-in by providing callback that invalidates React Query queries
- No breaking changes - callback is optional
- Action 4.2.1.1 complete
- Removed _refreshUserPromise from AuthState interface
- Removed _refreshUserPromise from initial state
- Field no longer needed - React Query handles deduplication automatically
- No references to field remain in codebase
- Action 4.3.1.3 complete
- Removed manual promise deduplication logic (_refreshUserPromise usage)
- Removed promise creation and storage
- Simplified to direct async function that calls getMe()
- React Query's useUser hook handles deduplication automatically
- Preserved all error handling and state preservation logic
- Function simplified from 83 lines to 58 lines
- Action 4.3.1.2 complete
- Removed user field from AuthState interface
- Removed all user assignments in login, register, logout, refreshUser, checkAuthStatus
- Updated refreshUser to verify auth via getMe() but not store user (React Query handles that)
- Updated checkAuthStatus to verify auth via getMe() but not store user
- Updated persist partialize to not store user (only isAuthenticated)
- Updated broadcastSync shouldSync to only check isAuthenticated
- Removed User import
- Store now only manages isAuthenticated boolean
- User data exclusively managed by React Query (useUser hook)
- All production code already migrated (Actions 4.1.1.3-4.1.1.4 complete)
- Action 4.1.1.5 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
- Added documentation explaining coexistence of Zustand and React Query sync
- Added type guards in broadcastSync.ts to verify message format before processing
- Added type guards in reactQuerySync.ts to verify message format before processing
- Both sync mechanisms use different channel names (no direct conflicts)
- Both sync mechanisms use different message formats (no cross-processing)
- Type guards ensure handlers only process their own message types
- Prevents accidental cross-processing of messages between sync mechanisms
- Both syncs can coexist safely without conflicts
- Action 2.3.1.3 complete
- Added useQueryClient hook to App component
- Added setupReactQuerySync import and initialization
- Initialize sync on App mount with cleanup on unmount
- React Query cache synchronization now active across browser tabs
- Multi-tab updates work when mutations succeed or queries are invalidated
- Action 2.3.1.2 complete
- Created reactQuerySync.ts with setupReactQuerySync() function
- Uses BroadcastChannel API to sync cache updates across browser tabs
- Subscribes to QueryClient mutation cache to broadcast mutation successes
- Subscribes to QueryClient query cache to broadcast query invalidations
- Implements message deduplication using message IDs and processed messages Set
- Implements tab ID tracking to avoid processing messages from same tab
- Handles three message types: query-invalidate, query-set-data, mutation-success
- Includes shouldSync filter function for selective synchronization
- Includes cleanup function to stop synchronization
- Focuses on invalidations and mutations (not every query update) for performance
- Comprehensive error handling and logging
- Action 2.3.1.1 complete - utility ready for integration
- Migrated useDashboard hook from useState/useEffect to React Query
- Added query key factory: dashboardQueryKeys for proper cache management
- Configured staleTime: 30 seconds (dashboard data changes frequently)
- Configured gcTime: 2 minutes (keeps data in cache)
- Added retry: 1 with retryDelay: 1000ms for automatic retry
- Preserved backward compatibility: same return interface
- Dashboard data now automatically cached and deduplicated
- Multiple components using useDashboard share cached data
- Automatic background refetching when data becomes stale
- Better performance and reduced API calls
- Action 2.1.1.7 complete - Sub-Epic 2.1.1 complete
- Removed getDashboardStats() function (old separate API call)
- Removed getRecentActivity() function (old separate API calls)
- Removed helper functions: mapActionToType, formatActivityTitle, formatActivityDescription
- Removed fallback to old methods in getDashboardData()
- Removed unused import of socialService
- All dashboard data now comes exclusively from aggregated /api/v1/dashboard endpoint
- No separate API calls remain in dashboard service
- Cleaner code, single source of truth for dashboard data
- Actions 2.1.1.5 and 2.1.1.6 complete - old API calls removed
- Updated getDashboardData() to call /api/v1/dashboard endpoint
- Added support for query parameters: activity_limit, library_limit, stats_period
- Added TrackPreview and LibraryPreview interfaces matching backend contract
- Updated DashboardData interface to include optional library_preview field
- Updated useDashboard hook to accept options and return libraryPreview
- Added fallback to old multiple-call method if new endpoint fails
- Dashboard now loads with single request instead of multiple parallel calls
- All existing functionality preserved, backward compatible during migration
- Action 2.1.1.3 complete - frontend ready to use aggregated endpoint
- Added comprehensive tests for wrapped format handling
- Test wrapped format with success: true and data unwrapping
- Test wrapped format with success: false and error handling
- Test wrapped format with null data
- Test safety check for non-wrapped responses (warning log)
- Test non-object response data handling
- Test verification that no direct format handling remains
- All 30 tests pass successfully
- Tests verify wrapped format only, no direct format handling
- Action 1.3.2.3 complete - response format consistency verified
- Removed direct format handling code (110+ lines)
- Removed validation and recovery logic for direct format responses
- Added safety check to log warning if non-wrapped response received
- Client now only handles wrapped format {success, data} or {success: false, error}
- Graceful degradation: non-wrapped responses still returned with warning
- TypeScript compilation successful, no linter errors
- Action 1.3.2.2 complete - frontend simplified to wrapped format only
- Added cache fallback: uses cached response for GET requests when validation fails
- Added optional retry mechanism (disabled by default, enabled via config)
- Added user notifications for recovery actions (configurable)
- Recovery config: { useCache, retry, notifyUser } on request config
- Prevents infinite retry loops with _validationRetryAttempted flag
- Validates cached responses before using them
- Handles both wrapped and direct format responses
- Graceful degradation: falls back to unvalidated data if recovery fails
- Applied to both validation sections (wrapped and direct formats)
- Action 1.2.2.5 complete - validation errors now handled gracefully
- Created ValidationAlerting class to monitor validation metrics
- Alerts when failure rate exceeds threshold (default 5%)
- Periodic checks every 5 minutes (configurable)
- Cooldown period (15 min) to prevent alert spam
- Minimum validations required (10) before alerting
- Structured alert logging with full metrics context
- Automatically starts in production (can be disabled via env var)
- Alerts sent to backend logging and Sentry
- Action 1.2.2.4 complete - validation alerting now active for monitoring
- Created ValidationMetricsTracker class to track validation metrics
- Tracks total, successful, and failed validations
- Calculates failure rate percentage
- Tracks failures by normalized endpoint patterns
- Records last failure and success timestamps
- Integrated into both validation points (wrapped and direct formats)
- Exported singleton for metrics access and monitoring
- Action 1.2.2.3 complete - validation metrics now tracked for monitoring
- Enhanced validation error logging with production monitoring context
- Added error_type field for easy filtering in monitoring systems
- Added timestamp and schema_provided flag for correlation
- Logs automatically sent to backend endpoint and Sentry in production
- Structured JSON format for easy aggregation and alerting
- Action 1.2.2.2 complete - validation failures now fully logged for production monitoring
- Enhanced response validation logging (wrapped and direct formats)
- Changed validation failures from warn to error level for better visibility
- Added structured error details (path, message, code, received, expected)
- Added response data preview for debugging
- Added success logging in debug mode
- Maintains graceful degradation (continues with unvalidated data) to avoid breaking app
- Action 1.2.2.1 complete - validation now comprehensive for all responses with schemas
- Replace RefreshResponse with VezaBackendApiInternalDtoTokenResponse
- Replace ResendVerificationRequest with VezaBackendApiInternalDtoResendVerificationRequest
- Keep AuthResponse as is (uses extended User/AuthTokens)
- Keep form data types (frontend-specific)
- Tracks types already updated, roles/chat/settings kept as is
- Update User type in types/api.ts to extend VezaBackendApiInternalModelsUser
- Preserve UI-specific computed fields (avatar_url, stats, roles, status, etc.)
- Make required fields actually required (id, username, email, role, etc.)
- All existing imports continue to work via barrel exports
- No User-specific TypeScript errors introduced
