- 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
- Verified Tooltip component exists at apps/web/src/components/ui/tooltip.tsx
- Component is fully functional with multiple positions, triggers, and features
- Already integrated with Kodo design system
- No dependency installation needed
- Action 10.4.1.1 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
- Action 9.3.1.3 completed as part of 9.3.1.2
- All removed variant usages were replaced before removing variants
- No remaining references to neon, glass, premium, or link variants
- 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
- Action 9.5.1.5 requested removal of backdrop-blur and complex transitions
- These were already removed in Actions 9.5.1.2 and 9.5.1.3
- Current Input component has minimal, clean styling
- Marked as complete with note that work was already done
- 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
