- Created grid overlay utility (apps/web/src/utils/gridOverlay.ts) for dev mode
- Toggle with Ctrl+G (Cmd+G on Mac) keyboard shortcut
- Shows 8px grid overlay to visualize spacing alignment
- Only works in development mode (import.meta.env.DEV)
- Initialized in main.tsx after app setup
- Action 11.2.1.4: Add visual grid overlay tool (dev only) - COMPLETE
- 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
- 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
- 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
- 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 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
- 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
- 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
- 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
- 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
