- 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
