senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
1132 commits 37 branches 94 tags 1.5 GiB
Commit graph

677 commits

Author SHA1 Message Date
senke
1f04a71d2a edge-cases: implement Edge 5.1 and 5.2 - browser compatibility fallbacks 
- Edge 5.1: Verified BroadcastChannel fallback already implemented (returns null, logs warning)
- Edge 5.2: Created safe storage utility for localStorage/sessionStorage
- safeLocalStorage and safeSessionStorage automatically fall back to in-memory storage
- Handles private browsing mode and quota exceeded errors gracefully
- Tests availability before use
- Logs warnings when fallback is used
- Provides utility functions to check support
- Improves reliability in all browser environments
 2026-01-16 14:21:03 +01:00
senke
72cde021fc edge-cases: implement Edge 2.1 - handle partial network failures 
- Created NetworkFailureTracker to track success/failure patterns
- Detects partial failures: HTTP 206, timeout after partial transfer, intermittent connectivity
- Detects complete failures: connection refused, network unreachable, all requests fail
- Enhanced error messages to distinguish partial vs complete failures
- Partial failures: show intermittent connectivity message
- Complete failures: show no connection message
- Retry logic: partial failures more retryable (if idempotent)
- Logs partial/complete failures for monitoring
- Tracks request patterns in 30-second window (last 10 requests)
- Improves user experience with clearer error messages
 2026-01-16 13:08:14 +01:00
senke
5dc558bbc3 implicit: implement Implicit 9.1 - document all environment variables 
- Created .env.example with all required environment variables
- Documented API, WebSocket, Stream, Upload configurations
- Documented application configuration (name, version)
- Documented debug mode and MSW settings
- Documented optional variables (FCM, Sentry)
- All variables include descriptions and default values
- Helps developers set up the project correctly
 2026-01-16 13:02:51 +01:00
senke
f62feffcbe edge-cases: implement Edge 1.5 - use EmptyState component everywhere 
- Replaced KodoEmptyState in DashboardPage with EmptyState
- Replaced all custom empty states in SearchPage with EmptyState:
  - No results found state
  - No tracks found state
  - No playlists found state
  - No users found state
  - Start searching state
- All empty states now use the standard EmptyState component
- Consistent UI and behavior across all empty states
 2026-01-16 13:00:54 +01:00
senke
db113d3cc0 edge-cases: implement Edge 3.3 - handle tab switching during operations 
- Created useTabVisibility hook to track tab visibility state
- Provides whenVisible(), whenHidden(), onVisible() utilities
- Executes callbacks when visibility changes
- Created useLongRunningOperation hook for managing long-running operations
- Operations can continue when tab is hidden (configurable)
- Provides start(), stop(), isRunning() control functions
- Supports abort controller for cancellation
- Cleanup on unmount
- All hooks are properly typed and documented with examples
 2026-01-16 12:59:29 +01:00
senke
1a9caf7415 edge-cases: implement Edge 3.2 - handle rapid user interactions 
- Created useDebouncedCallback hook for debouncing callbacks
- Created useThrottledCallback hook for throttling callbacks
- Created usePreventDoubleClick hook for preventing double-clicks
- All hooks are properly typed and documented with examples
- Components can use these hooks to prevent rapid interactions
- Existing ButtonLoading component already disables buttons during loading
 2026-01-16 12:58:21 +01:00
senke
e2f849fd8f edge-cases: implement Edge 2.3 - handle slow network connections 
- Added slow request detection with 1 second threshold
- Tracks request timing in request interceptor
- Detects and marks slow requests (> SLOW_REQUEST_THRESHOLD)
- Logs slow requests in dev mode with duration
- Provides utility functions:
  - isSlowRequest() - check if request is slow
  - getRequestDuration() - get request duration in ms
- Components can use these utilities to show additional loading feedback
- React Query already provides isLoading/isFetching for loading states
 2026-01-16 12:51:14 +01:00
senke
848fbcf3f6 edge-cases: implement Edge 2.2 - handle request cancellation 
- Enhanced createCancellableRequest() with better error handling
- Enhanced createRequestWithTimeout() with proper cancellation support
- Added Edge 2.2 documentation comments
- Cancelled requests are handled gracefully:
  - Don't trigger retries
  - Don't show error toasts
  - Properly rejected with cancellation errors
- AbortController signals fully supported
- Helper functions prevent aborting already-aborted signals
 2026-01-16 12:49:40 +01:00
senke
743de757ea edge-cases: improve empty state handling in LibraryPage (Edge 1.1, 1.3) 
- Replaced custom empty state div with EmptyState component
- Added EmptyState import from @/components/ui/empty-state
- Improved empty state UI with icon, title, description, and action button
- Different messages for empty list vs empty search results
- Added upload action button when no tracks (not in search mode)
- Fixed pre-existing errors: added useInfiniteQuery import, fixed tracksData reference
- Edge 1.4: Marked as complete (EmptyState component already exists)
- Edge 1.1 & 1.3: In progress - improved empty state handling
 2026-01-16 12:44:19 +01:00
senke
bed9119122 cleanup: remove deprecated unused functions (Cleanup 17) 
- Removed useLibraryItemsNormalized() - deprecated, no imports found
- Removed useLibraryFavoritesNormalized() - deprecated, no imports found
- Functions were marked @deprecated and only returned empty states
- Migration to React Query completed, these functions no longer needed
- Cleanup 17: In progress - removed deprecated dead code
 2026-01-16 12:41:37 +01:00
senke
a9e7805cae cleanup: remove obsolete TODO and update Cleanup 14 status 
- Removed obsolete TODO in useChat.ts: fetchHistory function already implemented
- Updated EXHAUSTIVE_TODO_LIST.md: Cleanup 14 marked as COMPLETE
- Summary: Fixed 1 TODO, improved 1 TODO, removed 1 obsolete TODO
- Preserved backend-dependent and architectural TODOs per audit recommendations
 2026-01-16 12:31:57 +01:00
senke
c172c3b865 cleanup: address simple TODO comments (Cleanup 14) 
- Fixed ChatRoom.tsx: Implemented current user ID check for isMe
  - Added useUser hook to get current user
  - Replaced hardcoded isMe=false with proper user ID comparison
- Improved TwoFactorVerify.tsx: Enhanced TODO comment with specific action items
  - Clarified that verify() is for setup, not login
  - Added FIXME with clear explanation of the issue
  - Documented that parent should handle verification
- Cleanup 14: In progress - addressing simple, safe TODOs
 2026-01-16 12:31:40 +01:00
senke
905bd423c3 cleanup: remove obsolete test file (Cleanup 3) 
- Removed stores/auth.test.ts - references deleted stores/auth.ts
- File imports from './auth' which doesn't exist (verified in Cleanup 4)
- Auth store is now at features/auth/store/authStore.ts
- Cleanup 3: In progress - removed obsolete auth test file
 2026-01-16 12:26:52 +01:00
senke
51ca1e36d7 fix: add missing logger import in toast.ts 
- Added logger import that was missing from Cleanup 12
- Fixes 'logger is not defined' error
- Cleanup 16: Verifying no unused variables in production code
 2026-01-16 12:21:33 +01:00
senke
f2c630644e cleanup: remove unused imports (Cleanup 15 - batch 1) 
- ESLint --fix automatically removed unused imports:
  - services/api/client.ts: Removed unused import
  - utils/formValidation.ts: Removed unused import
  - e2e/global-setup.ts: Fixed unused imports
- Cleanup 15: In progress - automated fixes applied
 2026-01-16 12:19:06 +01:00
senke
71323bdd46 cleanup: audit TODO comments (Cleanup 13) 
- Created TODO_COMMENTS_AUDIT.md documenting findings
- Found 26 TODO/FIXME/XXX/HACK comments total (excluding generated files)
- Categorized: Backend dependencies (preserve), Implementation needed (action), Bugs (fix), Refactor/migration (improve)
- High priority: Fix TwoFactorVerify.tsx authentication bug
- Medium priority: Implement play functionality, fix test issues
- Low priority: Backend-dependent features, architectural improvements
- Cleanup 13: Audit complete - Ready for Cleanup 14
 2026-01-16 12:17:10 +01:00
senke
c89771895d cleanup: add missing logger import in OfflineQueueManager 
- Added logger import to OfflineQueueManager.tsx
- Fixes missing import after console.error replacement
- Cleanup 10-12: Complete
 2026-01-16 12:15:53 +01:00
senke
6a0bd12936 cleanup: audit and replace console statements with logger (Cleanup 10-12) 
- Created CONSOLE_STATEMENTS_AUDIT.md documenting findings
- Found 33 console statements total (excluding generated files)
- Replaced production console.error with logger.error:
  - main.tsx: Initialization error logging
  - config/env.ts: Environment validation error logging
  - OfflineQueueManager.tsx: Queue operation error logging (2 instances)
  - toast.ts: Toast module loading error logging
- Preserved: Logger implementation, test mocks, JSDoc examples, dev-only utilities
- Cleanup 10: Audit complete
- Cleanup 11-12: Replace console.log/error/warn - COMPLETE (production code only)
 2026-01-16 12:15:20 +01:00
senke
229327973e cleanup: remove remaining commented code in ImageCropper 
- Removed commented alternative import statement
- Cleanup 9: Complete (8 files cleaned)
 2026-01-16 12:14:00 +01:00
senke
aa0c462a79 cleanup: remove obsolete commented-out code (Cleanup 9) 
- AuthView: Removed commented imports and JSX for non-existent EmailVerification/ResetPasswordForm components (functionality handled by separate pages)
- SettingsView: Removed commented useTheme hook
- CheckoutView: Removed commented total calculation
- LazyComponent: Removed commented ErrorBoundary import
- ImageCropper: Removed commented alternative import (already using correct import)
- EditPlaylistModal: Removed commented isCollaborative state
- ExploreView: Removed commented GENRES array
- Preserved: Documentation comments, explanatory comments, TODO comments
- Cleanup 9: Complete (7 files cleaned)
 2026-01-16 12:13:39 +01:00
senke
481d4ceae7 cleanup: audit commented-out code (Cleanup 8) 
- Created COMMENTED_CODE_AUDIT.md documenting findings
- Found ~4,329 commented lines total (mostly documentation)
- Actual commented-out code blocks are minimal
- Excluded generated files and documentation comments
- Ready for manual review in Cleanup 9
- Cleanup 8: Complete
 2026-01-16 12:12:38 +01:00
senke
74f6952ba2 cleanup: remove obsolete backup UI components directory (Cleanup 2) 
- Removed apps/web/src/components/ui.backup/ directory
- Verified no imports or references to ui.backup in codebase
- Directory contained 50+ backup component files no longer needed
- Cleanup 1: LibraryPage.tsx.old already removed (verified)
- Cleanup 2: Complete
 2026-01-16 12:11:37 +01:00
senke
2d7ffe3b49 aesthetic-improvements: fix remaining decorative transforms batch 5 (Action 11.5.1.6) 
- Library: PlaylistsView (removed decorative translate transform)
- Views: GearView (removed decorative translate transform)
- PWA: PWAInstallBanner (removed decorative translate transform)
- Replaced decorative transforms with subtle opacity changes or removed entirely
- Preserved: Functional overlay gradients for text readability (all remaining gradients are functional)
- Action 11.5.1.6: Apply direction to all components - Batch 5 complete (3 components)
 2026-01-16 12:08:36 +01:00
senke
647ebae2fa aesthetic-improvements: fix remaining decorative effects in components batch 4 (Action 11.5.1.6) 
- Studio: ProjectsManager (removed decorative translate transform)
- Inventory: AddEquipmentView (removed decorative scale transform)
- Layout: Header (removed decorative shadow), Navbar (removed decorative gradients, 2 instances)
- Library: PlaylistDetailView (replaced decorative gradient with solid color, fixed padding p-6 → p-8)
- Layout: AudioPlayer (replaced subtle decorative gradient with solid color)
- Replaced decorative transforms with subtle opacity changes or removed entirely
- Replaced decorative gradients with solid colors
- Action 11.5.1.6: Apply direction to all components - Batch 4 complete (6 components)
 2026-01-16 12:08:21 +01:00
senke
5fe4c57e9d aesthetic-improvements: fix decorative gradient in ThemeSwitcher (Action 11.5.1.6) 
- ThemeSwitcher: Replaced decorative gradient with solid color (bg-gradient-to-br from-kodo-cyan to-kodo-magenta → bg-kodo-cyan)
- Preserved: Functional overlay gradients for text readability (LiveStreamDetailView, ExploreView, ImageViewerModal, PWAInstallBanner)
- Action 11.5.1.6: Apply direction to all components - Batch 3 complete (gradient fix)
 2026-01-16 12:07:15 +01:00
senke
4b047d160a aesthetic-improvements: fix spacing in components batch 2 (Action 11.5.1.6) 
- Modals: CreatorModal (p-6 → p-8, space-y-6 → space-y-8)
- Seller: CreateProductView (space-y-6 → space-y-8, 2 instances)
- Social: ExploreView, GroupCard (space-y-6 → space-y-8, p-6 → p-8)
- Studio: ProjectsManager, CloudFileBrowser (space-y-6 → space-y-8, gap-6 → gap-8)
- Theme: ThemeSwitcher (space-y-6 → space-y-8, p-6 → p-8)
- Settings: AppearanceSettingsView (p-6 → p-8, space-y-6 → space-y-8)
- Library: PlaylistsView (space-y-6 → space-y-8)
- Upload: TagSuggestionsModal, LyricsEditorModal, BulkUploadModal (p-6 → p-8, space-y-6 → space-y-8)
- UI: modal, dialog, ImageCropper (p-6 → p-8)
- All spacing now aligned to 8px grid (32px standard padding)
- Action 11.5.1.6: Apply direction to all components - Batch 2 complete (spacing fixes)
 2026-01-16 12:06:56 +01:00
senke
51c38a95db aesthetic-improvements: apply design direction to components batch 1 (Action 11.5.1.6) 
- UI components: FAB (removed scale transforms), tabs (removed decorative shadow)
- Upload components: FileUploadZone, MetadataEditor, BulkUploadModal (removed scale transforms and decorative gradient)
- Search: SearchBar (removed decorative shadow)
- PWA: PWAInstallBanner (removed decorative shadow)
- Social: ExploreView (removed decorative shadow and image zoom)
- Live: LiveStreamDetailView (removed decorative shadow)
- Player: VisualizerSettingsModal (removed scale transform)
- Marketplace: ReviewProductModal, ProductDetailView (removed scale transforms)
- Library: PlaylistsView (removed scale transform)
- Settings: AppearanceSettingsView (removed scale transform)
- Theme: ThemeSwitcher (removed scale transform)
- Studio: ProjectsManager, CloudFileBrowser (removed scale transforms)
- Social: GroupCard (removed image zoom)
- Seller: CreateProductView (removed scale transform)
- Modals: CreatorModal (removed scale transform)
- Replaced decorative scale transforms with subtle opacity changes or removed entirely
- Action 11.5.1.6: Apply direction to all components - Batch 1 complete (17 components)
 2026-01-16 12:06:00 +01:00
senke
6dde4dd4b4 aesthetic-improvements: fix remaining spacing in pages and views (Action 11.5.1.5) 
- DashboardPage: Updated gap (gap-6 → gap-8) for 8px grid alignment
- FileDetailsView: Updated section spacing (space-y-6 → space-y-8)
- GearView: Updated section spacing (space-y-6 → space-y-8, 2 instances)
- ProfileView: Updated gap (gap-6 → gap-8)
- DiscoverView: Updated card padding (p-6 → p-8)
- PurchasesView: Updated gap (gap-6 → gap-8)
- Preserved: Responsive padding (p-4 sm:p-6, px-6 md:px-12) and conditional padding (p-6 for non-primary cards)
- Action 11.5.1.5: Apply direction to all pages - Batch 3 complete (spacing fixes)
 2026-01-16 12:03:28 +01:00
senke
b2390132c3 aesthetic-improvements: apply design direction to views batch 2 (Action 11.5.1.5) 
- FileManagerView: Removed decorative scale transform (group-hover:scale-110 → removed)
- LiveView: Removed decorative image zoom (group-hover:scale-105 → removed) and icon scale (hover:scale-110 → hover:text-kodo-gold/80)
- FileDetailsView: Replaced decorative gradient with solid color (bg-gradient-to-br from-kodo-cyan to-kodo-cyan → bg-kodo-cyan/20, removed decorative shadow)
- CartView: Removed decorative shadow (shadow-neon-cyan/20 → removed)
- CheckoutView: Removed decorative shadow (shadow-neon-cyan/20 → removed)
- Preserved: Functional overlay gradients for text readability (ProfileView, DiscoverView)
- Action 11.5.1.5: Apply direction to all pages - Batch 2 complete (5 views)
 2026-01-16 12:02:55 +01:00
senke
d798797eb9 aesthetic-improvements: apply design direction to pages batch 3 (Action 11.5.1.5) 
- Pages: Updated remaining spacing issues (p-6 → p-8, space-y-6 → space-y-8, gap-6 → gap-8)
  - DashboardPage, DeveloperPage, GearPage, DesignSystemDemoPage, MarketplaceHome
- Views: Updated spacing (space-y-6 → space-y-8, gap-6 → gap-8, p-6 → p-8)
  - FileManagerView, NotificationsView, SocialView, FileDetailsView, UploadView, MarketplaceView, GearView, LiveView, ProfileView
- Action 11.5.1.5: Apply direction to all pages - Batch 3 complete (5 pages + 9 views = 14 files)
 2026-01-16 12:00:50 +01:00
senke
da74375ca5 aesthetic-improvements: apply design direction to pages batch 2 (Action 11.5.1.5) 
- Pages: Updated padding (p-6 → p-8) and spacing (space-y-6 → space-y-8, gap-6 → gap-8) for 8px grid alignment
  - LivePage, SocialPage, EducationPage, QueuePage, DeveloperPage, SettingsPage
- Views: Updated spacing and removed decorative effects
  - ProfileView: Removed decorative hover scale (group-hover:scale-105), replaced decorative gradient with solid color (bg-gradient-to-r → bg-kodo-ink), updated spacing
  - CheckoutView, FileDetailsView, AnalyticsView, GearView, DiscoverView, StudioView, SearchPageView, EducationView, CartView: Updated spacing (space-y-6 → space-y-8, gap-6 → gap-8, p-6 → p-8)
- Action 11.5.1.5: Apply direction to all pages - Batch 2 complete (6 pages + 10 views = 16 files)
 2026-01-16 11:58:55 +01:00
senke
cb1354ce42 aesthetic-improvements: apply design direction to pages batch 1 (Action 11.5.1.5) 
- DashboardPage: Replaced decorative chart gradient with solid color (bg-gradient-to-t → bg-kodo-steel/30, removed hover gradient change)
- SearchPage: Updated section spacing (space-y-6 → space-y-8) for 8px grid alignment
- DesignSystemDemoPage: Updated section spacing (space-y-6 → space-y-8) and grid gaps (gap-6 → gap-8) for 8px grid alignment
- Action 11.5.1.5: Apply direction to all pages - Batch 1 complete (3 pages)
 2026-01-16 11:55:42 +01:00
senke
e1d9e50420 aesthetic-improvements: add visual grid overlay tool (Action 11.2.1.4) 
- 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
 2026-01-16 11:53:29 +01:00
senke
7c69474cf9 aesthetic-improvements: align spacing to 8px grid (Action 11.2.1.3) 
- Created automated script (scripts/align-8px-grid.py) to align all spacing to 8px grid
- Replaced non-8px-aligned spacing: gap-3/p-3/m-3 (12px) → gap-4/p-4/m-4 (16px), gap-5/p-5/m-5 (20px) → gap-6/p-6/m-6 (24px), gap-10/p-10/m-10 (40px) → gap-12/p-12/m-12 (48px), gap-20/p-20/m-20 (80px) → gap-24/p-24/m-24 (96px)
- Preserved: 4px values (gap-1, p-1, m-1) as they may be intentional fine-tuning, responsive breakpoints (sm:, md:, lg:), test files, documentation
- Modified files across all components to ensure consistent 8px grid alignment
- Action 11.2.1.3: Align all elements to 8px grid - COMPLETE
 2026-01-16 11:50:46 +01:00
senke
3644fb4fb3 aesthetic-improvements: fix inconsistent selected track styling in LibraryPage (Action 11.3.1.3) 
- Fixed mixed cyan/steel styling: bg-kodo-cyan/15 → bg-kodo-steel/15 for consistency
- Selected track state now uses consistent steel colors throughout
- Action 11.3.1.3: final consistency fix
 2026-01-16 11:47:43 +01:00
senke
41b1cfaedd aesthetic-improvements: automated replacement of decorative cyan with steel (80/20 rule, Action 11.3.1.3) 
- Created automated script (scripts/replace-decorative-cyan.py) to systematically replace decorative/informational kodo-cyan instances with kodo-steel variants
- Script intelligently preserves active/functional states, design system variants, semantic indicators, and interactive states
- Modified 85 files, replaced 145 decorative instances, preserved 47 functional instances
- No linter errors, type safety maintained
- Action 11.3.1.3 significantly advanced (total: ~302 instances replaced across ~229 files including previous batches)
 2026-01-16 11:40:13 +01:00
senke
5c94ccf752 aesthetic-improvements: reduce decorative cyan in layout and settings (80/20 rule, batch 15) 
- Layout: AudioPlayer decorative queue icon (1 instance)
- Settings: AccountSettings decorative icon (1 instance)
- Components: BulkModeBanner decorative close button text (1 instance)
- Total: ~3 files, ~3 instances replaced
- Preserved: Active/selected states (AudioPlayer selected queue tab, BulkModeBanner active state banner - functional active mode indicator, AccountSettings selected theme, CreatorModal selected visibility option, GroupCard public/private badges - semantic indicators, dialog.tsx confirm/info variants - design system variants), functional elements, design system variants, semantic status indicators, interactive states, functional loading indicators, informational alerts/toasts
- Action 11.3.1.3 in progress (fifteenth batch: layout and settings components)
 2026-01-16 11:35:43 +01:00
senke
c075e3a8a4 aesthetic-improvements: reduce decorative cyan in education and services (80/20 rule, batch 14) 
- Education: CertificateModal decorative student name text, CourseLearningView decorative file icon, QuizModal decorative icon (3 instances)
- Services: chatService mock data decorative role color (2 instances)
- Total: ~4 files, ~5 instances replaced
- Preserved: Active/selected states (CourseLearningView active lesson background and icon, QuizModal selected answer, dashboard/TrackList current track indicators and playing animation, ThemeSwitcher selected theme, StatCard cyan color option - design system variant), functional elements (QuizModal progress bar), design system variants, semantic status indicators, interactive states, functional loading indicators, informational alerts/toasts
- Action 11.3.1.3 in progress (fourteenth batch: education and services components)
 2026-01-16 11:34:18 +01:00
senke
3749aa2394 aesthetic-improvements: reduce decorative cyan in chat, auth, player, streaming, and dashboard (80/20 rule, batch 13) 
- Chat: ChatSidebar loading spinner and decorative icon, VirtualizedChatMessages decorative attachment badge, ChatPage decorative icon and loading spinner border/text, ChatMessage decorative username indicator and icon (7 instances)
- Auth: TwoFactorVerify decorative icon (1 instance)
- Player: PlayerLoading decorative spinner (1 instance)
- Streaming: PlaybackSummary decorative icon (1 instance)
- Dashboard: DashboardPage decorative chart color and gradient and icon (3 instances)
- Total: ~13 files, ~13 instances replaced
- Preserved: Active/selected states (ChatSidebar selected conversation, ChatMessage isMe message bubble and highlighted message, DashboardPage selected button 30J, ChatInput drag active overlay and emoji picker active, TrackFilters active filter badge, TrackHistory current track, TrackGridDensitySelector selected density, PlaybackSpeedControl selected speed, ViewToggle selected view mode, TrackList selected tracks, TrackListRow selected state, PlaylistList selected view mode, QualitySelector selected quality, SettingsPage selected tab and theme, LoginForm checkbox accent - focus/interaction, RegisterPage checkbox accent - focus/interaction), functional links (ForgotPasswordPage link, TwoFactorVerify links, RegisterPage links, AuthLayout link, ProfileForm links, LoginPage link, RegisterPage link), design system variants, semantic status indicators, interactive states, functional loading indicators, informational alerts/toasts
- Action 11.3.1.3 in progress (thirteenth batch: chat, auth, player, streaming, and dashboard components)
 2026-01-16 11:32:55 +01:00
senke
64bddbba00 aesthetic-improvements: fix missed AutoMetadataDetectionModal loading spinner border (80/20 rule, batch 12 follow-up) 
- AutoMetadataDetectionModal: loading spinner border (border-t-kodo-cyan → border-t-kodo-steel)
- Action 11.3.1.3 in progress (twelfth batch follow-up)
 2026-01-16 11:30:28 +01:00
senke
79e1ffbc7a aesthetic-improvements: reduce decorative cyan in player, library, and views (80/20 rule, batch 12) 
- Player: VisualizerSettingsModal decorative icon (1 instance)
- Library: QueueView decorative artist text, AutoMetadataDetectionModal decorative icon and loading spinner border and fileName text and detected key text, SaveQueueAsPlaylistModal decorative icon, EditPlaylistModal decorative icon, PlaylistsView loading spinner, CreatePlaylistModal decorative icon (7 instances)
- Views: StudioView decorative icon, FileDetailsView decorative icon, GearView decorative icons and order number text, ProfileView loading spinner and social icons, AnalyticsView loading spinner and decorative chart legend dot and chart bars and device icon and revenue text, DiscoverView loading spinner and decorative icon and weekly mix text, FileManagerView decorative music icons (14 instances)
- Total: ~22 files, ~22 instances replaced
- Preserved: Active/selected states (LyricsPanel autoScroll active state, VisualizerSettingsModal selected mode, PlayerControls shuffle/repeatMode/showVisualizer active states, MiniPlayer isQueueOpen active state, AddToPlaylistModal selected playlist, PlaylistDetailView dragged item, StudioView active tab, SearchBar focused state, CheckoutView checkbox accents - focus/interaction, SearchPageView radio button accent - focus/interaction, FileManagerView selected files checkmarks - active states, ProfileView social links - functional links, LiveView links - functional links), primary actions, design system variants
- Action 11.3.1.3 in progress (twelfth batch: player, library, and views components)
 2026-01-16 11:30:07 +01:00
senke
fed22d40a5 aesthetic-improvements: reduce decorative cyan across multiple component categories (80/20 rule, batch 11) 
- Social: FeedView, ConnectionsView, GroupsView, ExploreView, GroupDetailView loading spinners and decorative text, CreatePostModal decorative select text and hashtag links, PostCard decorative tag links and waveform bars and view comments link, CreateGroupModal decorative icon (9 instances)
- Settings: DataExportModal decorative icon, LoginHistory decorative IP text, AppearanceSettingsView decorative icon and selected theme checkmark, BackupsView decorative icon, CloudIntegrationView decorative icon, AccessibilitySettingsView decorative icon, SecuritySettings decorative icon, PasskeyModal decorative icon and loading spinner (8 instances)
- Studio: ProjectsManager loading spinner and progress percentage text, CloudFileBrowser decorative music icons, AIToolsView decorative music icon, ConnectivityView decorative icon, CreateProjectModal decorative icon, CloudSettingsView decorative icon (6 instances)
- Admin: AdminDashboardView loading spinner and decorative chart bars and icon, AdminSettingsView decorative icon, AdminModerationView loading spinner, AdminUsersView loading spinner (5 instances)
- Inventory: InventoryView loading spinner, EquipmentCard decorative price icon, EquipmentDetailView loading spinner and decorative icons and price text, AddEquipmentView decorative icon (5 instances)
- Seller: CreateProductView decorative icon, SellerDashboardView loading spinner and decorative icon and sales text (3 instances)
- Live: LiveStreamDetailView decorative streamer name text (1 instance)
- Developer: DeveloperDashboardView loading spinner, WebhooksView decorative icon (2 instances)
- Upload: BulkUploadModal decorative icon, FilePreviewCard decorative audio file icon, MetadataForm decorative button text, CoverArtUploadModal decorative icon, LyricsEditorModal decorative icon (5 instances)
- Notifications: NotificationItem decorative follow icon and mark as read button, NotificationBell decorative mark all read link (3 instances)
- Total: ~46 files, ~46 instances replaced
- Preserved: Active/selected states (CloudFileBrowser selected files checkmarks, CreatePostModal post type active state, GroupCard/GroupDetailView public/private badges - semantic indicators, DataExportModal checkbox accents - focus/interaction, AppearanceSettingsView selected theme - active state, PasskeyModal checkbox accent - focus/interaction, LyricsEditorModal checkbox accent - focus/interaction, FileUploadZone drag active state - active state, EquipmentDetailView support link - functional link, FlashSaleModal link - functional link, EquipmentDetailView image indicator dots - active state), primary actions, design system variants
- Action 11.3.1.3 in progress (eleventh batch: social, settings, studio, admin, inventory, seller, live, developer, upload, notifications components)
 2026-01-16 11:26:33 +01:00
senke
c5c211c21c aesthetic-improvements: reduce decorative cyan in marketplace, gamification, commerce, and education (80/20 rule, batch 10) 
- Marketplace: LicenceDetailsModal decorative icon and price text, ProductDetailView decorative author text, ReviewProductModal decorative icon, LicenceCard decorative price text (4 instances)
- Gamification: AchievementCard decorative XP reward text, LeaderboardView loading spinner and decorative XP text, ProfileXPView loading spinner and decorative icons, AchievementsView loading spinner (5 instances)
- Commerce: WishlistView decorative price text, PromoCodeModal decorative icon, CartItem decorative license tag icon, OrderSummary decorative total price text (4 instances)
- Education: MyCoursesView decorative icon (1 instance)
- Total: ~14 files, ~14 instances replaced
- Preserved: Functional links (LicenceDetailsModal legal contract link), active/selected states (CourseLearningView active lesson, QuizModal selected answer - already preserved), primary actions, design system variants
- Action 11.3.1.3 in progress (tenth batch: marketplace, gamification, commerce, and education components)
 2026-01-16 11:23:25 +01:00
senke
3814eefc11 aesthetic-improvements: reduce decorative cyan in UI components (80/20 rule, batch 9) 
- LiveView: decorative chat message username color (text-kodo-cyan → text-kodo-steel)
- Sidebar: decorative section header icon (text-kodo-cyan → text-kodo-steel)
- CartView: decorative promo code link (text-kodo-cyan → text-kodo-steel)
- Total: ~3 files, ~3 instances replaced
- Preserved: Functional links (LoginPage register link, RegisterPage login link, LiveView streamer profile link, LiveView wallet link), design system variants (Spinner default variant, alert.tsx info variant, badge.tsx cyan variant, ErrorDisplay.tsx info variant, Toast.tsx info variant, Alert.tsx info variant - intentional design system options), semantic status indicators (PasswordStrengthIndicator strong password - semantic color), interactive states (radio-group.tsx focus/interaction, select.tsx selected option, dropdown-menu.tsx checked state), primary actions
- Action 11.3.1.3 in progress (ninth batch: UI components decorative elements)
 2026-01-16 11:21:33 +01:00
senke
a0dfc0f709 aesthetic-improvements: reduce decorative cyan in views and pages (80/20 rule, batch 8) 
- Loading spinners: PurchasesView, NotificationsView, MarketplaceView, EducationView, SearchPageView (text-kodo-cyan → text-kodo-steel, 5 instances)
- Decorative text/emphasis: CartView total price, CheckoutView total price, FullPlayer artist name, DashboardPage username highlight (text-kodo-cyan → text-kodo-steel, 4 instances)
- Decorative icons: CheckoutView credit card icon, CreateGroupModal header icon, DeveloperPage icon, SocialPage icon, DashboardPage activity icons (text-kodo-cyan → text-kodo-steel, 5 instances)
- Informational badges: PurchasesView product type badge (text-kodo-cyan → text-kodo-steel, 1 instance)
- Total: ~10 files, ~15 instances replaced
- Preserved: Active/selected states (DashboardPage selected button 30J, CheckoutView checkbox accents - focus/interaction, SearchPageView radio button accent - focus/interaction), primary actions, design system variants, functional loading indicators (PlayerLoading spinner - already preserved)
- Action 11.3.1.3 in progress (eighth batch: views and pages decorative elements)
 2026-01-16 11:19:41 +01:00
senke
3250cc7f70 aesthetic-improvements: reduce decorative cyan in track detail and library (80/20 rule, batch 7) 
- TrackDetailPage: decorative empty state icon (text-kodo-cyan → text-kodo-steel) and informational play count text (text-kodo-cyan → text-kodo-steel)
- LibraryPage: decorative genre badges (bg-kodo-cyan/10 text-kodo-cyan → bg-kodo-steel/10 text-kodo-steel, 2 instances: grid view and list view)
- Total: ~2 files, ~4 instances replaced
- Preserved: Active/selected states (LibraryPage view mode selection, selected tracks, TrackList selected tracks, TrackListRow selected state, QualitySelector selected quality, PlaybackSpeedControl selected speed, PlaylistBatchActions batch mode banner, ChatSidebar selected conversation, TrackFilters active filters badge, PlaylistList selected view mode, TrackGridDensitySelector selected density, ViewToggle selected view mode), semantic status indicators (TrackHistory updated action), functional loading indicators (PlayerLoading spinner), primary actions, design system variants
- Action 11.3.1.3 in progress (seventh batch: track detail and library genre badges)
 2026-01-16 11:17:46 +01:00
senke
bb306ca799 aesthetic-improvements: complete ServerErrorPage text color replacement (80/20 rule, batch 6 follow-up) 
- ServerErrorPage: list items text color (text-kodo-cyan → text-kodo-steel)
- Action 11.3.1.3 in progress (sixth batch follow-up)
 2026-01-16 11:16:13 +01:00
senke
45141b9ee4 aesthetic-improvements: reduce decorative cyan in error and chat components (80/20 rule, batch 6) 
- NotFoundPage: decorative icon background (bg-kodo-cyan/20 → bg-kodo-steel/20, icon text-kodo-cyan → text-kodo-steel)
- ServerErrorPage: informational status box (bg-kodo-cyan/10 → bg-kodo-steel/10, border-kodo-cyan → border-kodo-steel, icon/text text-kodo-cyan → text-kodo-steel)
- ChatRoom: empty state icon background (bg-kodo-cyan/10 → bg-kodo-steel/10, border-kodo-cyan/20 → border-kodo-steel/20, icon text-kodo-cyan → text-kodo-steel)
- PlaybackHeatmap: stats box background (bg-kodo-cyan/10 → bg-kodo-steel/10, text-kodo-cyan → text-kodo-steel)
- Total: ~4 files, ~5 instances replaced
- Preserved: Active/functional states (ChatInput drag active overlay, ChatRoom highlighted message, TrackFilters active filters badge, PlaylistBatchActions batch mode banner, PlaybackHeatmap intensity visualization - functional), semantic status indicators (TrackHistory updated action - semantic color)
- Action 11.3.1.3 in progress (sixth batch: error pages and chat components)
 2026-01-16 11:15:52 +01:00
senke
fd8aae6a63 aesthetic-improvements: reduce more decorative cyan backgrounds (80/20 rule, batch 5) 
- PostCard: poll progress bar background (bg-kodo-cyan/20 → bg-kodo-steel/20) - decorative visualization
- SharePostModal: quote option icon background (bg-kodo-cyan/10 → bg-kodo-steel/10, text-kodo-cyan → text-kodo-steel) - decorative icon
- TrackAnalyticsView: chart bar background (bg-kodo-cyan/20 → bg-kodo-steel/20) - decorative visualization
- Total: ~3 files, ~3 instances replaced
- Preserved: Active/selected states (QuizModal selected answer, CourseLearningView active lesson), primary actions
- Action 11.3.1.3 in progress (fifth batch: social and analytics decorative elements)
 2026-01-16 11:13:36 +01:00
senke
f6afee0980 aesthetic-improvements: apply design direction to LibraryPage 
- Spacing (8px grid): space-y-6 → space-y-8, gap-6 → gap-8 (2 instances), space-y-3 → space-y-4 (align to 8px grid)
- Card padding: p-6 → p-8 for loading skeleton cards (32px standard)
- Replace decorative gradients: track card cover and list view item number backgrounds from bg-gradient-to-br to solid bg-kodo-ink (2 instances)
- Preserved: Functional hover effects (hover:bg-white/5, hover:border-kodo-steel/50, group-hover:text-white), primary actions (cyan for selected states, genre badges), existing functional gradients (overlay for play button visibility)
- Action 11.5.1.4 complete ✅
 2026-01-16 11:11:31 +01:00
senke
f7a81d8b8a aesthetic-improvements: apply design direction to DashboardPage 
- Spacing (8px grid): space-y-6 → space-y-8, gap-6 → gap-8, space-y-3 → space-y-4 (align to 8px grid)
- Remove excessive hover effects: removed group-hover:scale-110 on stat card icons and activity item icons (decorative scale transforms)
- Replace decorative gradients: stat card backgrounds from bg-gradient-to-br to solid bg colors (from-kodo-cyan/10 to-kodo-cyan/5 → bg-kodo-cyan/10, etc.)
- Preserved: Functional hover effects (hover:bg-white/10, hover:border-kodo-steel/50), primary actions (cyan for primary stat), existing card padding (p-6/p-8 already aligned)
- Action 11.5.1.3 complete ✅
 2026-01-16 11:10:17 +01:00
senke
6952b526b5 aesthetic-improvements: reduce informational cyan backgrounds (80/20 rule, batch 4) 
- 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)
 2026-01-16 11:08:45 +01:00
senke
730d8fcba8 aesthetic-improvements: replace Header decorative icon (80/20 rule, batch 3 follow-up) 
- Header.tsx: decorative icon background (bg-kodo-cyan/20 → bg-kodo-steel/20, border-kodo-cyan/30 → border-kodo-steel/30, icon text-kodo-cyan → text-kodo-steel, shadow-neon-cyan/20 → shadow-2xl)
- Preserved: Header active notification state (isUserMenuOpen) - correctly keeps cyan
- Action 11.3.1.3 in progress (third batch follow-up)
 2026-01-16 11:07:31 +01:00
senke
c37c08fd2e aesthetic-improvements: reduce more decorative cyan backgrounds (80/20 rule, batch 3) 
- Layout components: Sidebar hub header icon, Header icon background (2 instances) - decorative icons
- AutoMetadataDetectionModal: modal border (decorative)
- CourseDetailView: card border (decorative)
- Total: ~4 files, ~4 instances replaced
- Preserved: Active/selected states (AudioPlayer dragged item, Header active notification, VisualizerSettingsModal selected mode, CreateProjectModal selected DAW, AIToolsView active tool, CourseLearningView active lesson, TipStreamerModal selected payment, CloudFileBrowser active tag, PlaylistDetailView dragged item, AddToPlaylistModal selected playlist, CreatorModal selected visibility)
- Action 11.3.1.3 in progress (third batch: layout and modal decorative elements)
 2026-01-16 11:07:01 +01:00
senke
4dd1f64a7e aesthetic-improvements: reduce more decorative cyan backgrounds (80/20 rule, batch 2) 
- Settings modals: DataExportView, ChangeEmailModal, PasskeyModal decorative icon backgrounds (3 instances)
- DashboardPage: chart bars and tooltip (decorative visualization, 2 instances)
- TwoFactorSetup: decorative icon background (1 instance)
- Total: ~6 files, ~6 instances replaced
- Preserved: Active/selected states (DashboardPage selected button, TrackList current track indicator, StudioView active tab, SessionManagement current session, AccountSettings selected theme, IntegrationsView connected state)
- Action 11.3.1.3 in progress (second batch: settings modals and chart visualization)
 2026-01-16 11:05:45 +01:00
senke
73d7bbf3d7 aesthetic-improvements: reduce decorative cyan backgrounds (80/20 rule) 
- KodoEmptyState: decorative background blur and border (bg-kodo-cyan/20 → bg-kodo-steel/20, border-kodo-cyan/30 → border-kodo-steel/30, icon text-kodo-cyan → text-kodo-steel)
- PWAInstallBanner: decorative icon background and blur effect (2 instances)
- Page headers: SettingsPage, GearPage, DeveloperPage, SocialPage icon backgrounds (4 instances) - decorative header icons
- DashboardPage: activity item icon gradient background (decorative)
- FileManagerView: selection banner background (decorative)
- Total: ~8 files, ~9 instances replaced
- Preserved: Active/selected states (StudioView active tab, AccountSettings selected theme, SessionManagement current session), primary actions, informational alerts
- Action 11.3.1.3 in progress (first batch: decorative backgrounds)
 2026-01-16 11:03:48 +01:00
senke
bcf8ded605 aesthetic-improvements: replace remaining secondary cyan hover states with steel 
- TrackListSelectionActions: clear selection button hover (1 instance)
- CreateGroupModal: upload zone placeholder text hover (1 instance)
- AddToPlaylistModal: new playlist button icon hover (1 instance)
- Total: ~3 files, ~3 instances replaced
- Preserved: Primary send button (ChatInput), all primary player controls, all primary CTAs
- Action 11.3.1.2 in progress (sixth batch complete)
 2026-01-16 11:00:12 +01:00
senke
6a6c5caf9c aesthetic-improvements: replace secondary cyan hover states with steel (batch 5) 
- PlayerControls: visualizer toggle hover text (1 instance)
- Header: theme toggle hover text (1 instance)
- PlaylistCard: checkbox hover border (1 instance)
- GearView: equipment card hover border (1 instance)
- ProfileView: track title hover text (1 instance)
- ProjectsManager: project title hover text (1 instance)
- CourseCard: course title hover text (1 instance)
- TwoFactorSetup: 2FA option hover states (2 instances: bg and text)
- Total: ~8 files, ~9 instances replaced
- Preserved: Active/selected states (cyan), primary actions (cyan)
- Action 11.3.1.2 in progress (fifth batch complete)
 2026-01-16 10:59:09 +01:00
senke
6c7deabd00 aesthetic-improvements: replace DashboardPage activity item hover 
- DashboardPage: activity item title hover text (1 instance)
- Completes batch 4 replacement
 2026-01-16 10:57:30 +01:00
senke
77dfbaedf1 aesthetic-improvements: replace secondary cyan hover states with steel (batch 4) 
- LibraryPage: card hover border, title hover text (3 instances, also removed scale transform)
- ProductCard: title hover text (1 instance)
- TrackListSelectionActions: action button hovers (5 instances: play, like, download, more, clear) - replaced with hover:bg-white/5
- AuthLayout: footer link hover text (1 instance)
- Pages: SocialPage, GearPage, DeveloperPage outline button hovers (3 instances)
- SocialPage: comment button hover text (1 instance)
- Total: ~8 files, ~14 instances replaced
- Preserved: Primary buttons (cyan), player control buttons (cyan - primary actions), AuthButton primary variant (cyan)
- Action 11.3.1.2 in progress (fourth batch complete)
 2026-01-16 10:57:14 +01:00
senke
a2c93145bb aesthetic-improvements: replace secondary cyan hover states with steel (batch 3) 
- UI components: accordion hover text (1 file)
- Player components: AudioPlayer, MiniPlayer icon button hovers (2 files, 3 instances)
- Social components: CreatePostModal, SharePostModal, ProductDetailView (3 files, 3 instances)
- Settings: AccessibilitySettingsView hover text (1 file)
- Analytics: TrackAnalyticsView, AnalyticsView chart bar hovers (2 files, 2 instances)
- Gamification: LeaderboardView hover text (1 file)
- Upload: FileUploadZone hover border (1 file)
- Banner: BulkModeBanner close button hover (1 file)
- Total: ~12 files, ~15 instances replaced
- Preserved: Focus rings (cyan), active/selected states (cyan), primary actions (cyan)
- Note: ChatSidebar selected state hover kept cyan (primary state)
- Note: VirtualizedChatMessages scroll button kept cyan (primary action)
- Action 11.3.1.2 in progress (third batch complete)
 2026-01-16 10:55:42 +01:00
senke
e03533ec66 aesthetic-improvements: replace secondary cyan hover states with steel (batch 2) 
- Card components: CartItem, WishlistView, PostCard, GroupCard, PlaylistsView, UserCard (7 files)
- Settings components: BackupsView, SessionManagement, CloudIntegrationView, OfflineQueueManager (4 files)
- DashboardPage: stat cards and activity items hover states (2 instances)
- FeedView: input and button hover states (2 instances)
- Upload zones: MetadataForm, CreatePlaylistModal, CreateProductView, AddEquipmentView, CreateGroupModal (5 files, 6 instances)
- UserCard: avatar border hover state
- Total: ~18 files, ~20 instances replaced
- Preserved: Focus rings (cyan), active/selected states (cyan)
- Action 11.3.1.2 in progress (second batch complete)
 2026-01-16 10:53:34 +01:00
senke
af75d62a63 aesthetic-improvements: replace secondary cyan hover states with steel 
- Button outline variant: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50
- Header secondary nav: hover:text-kodo-cyan → hover:text-white, hover:bg-kodo-cyan/5 → hover:bg-white/5
- FileManagerView: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50 (kept selected state cyan)
- ProjectsManager: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50, hover:text-kodo-cyan → hover:text-white
- GroupDetailView: hover:border-kodo-cyan/30 → hover:border-kodo-steel/50
- AIToolsView: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50
- CloudFileBrowser: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50 (kept selected state cyan)
- ProfileView: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50
- CourseCard: hover:border-kodo-cyan/50 → hover:border-kodo-steel/50
- TwoFactorSetup: hover:border-kodo-cyan → hover:border-kodo-steel/50
- GearView: hover:text-kodo-cyan → hover:text-white, hover:border-kodo-cyan → hover:border-kodo-steel/50
- ChatInput: hover:text-kodo-cyan → hover:text-white (3 instances)
- ChatMessage: hover:text-kodo-cyan → hover:text-white (2 instances)
- ChatRoom: hover:text-kodo-cyan → hover:text-white
- AddToPlaylistModal: hover:border-kodo-cyan → hover:border-kodo-steel/50, hover:text-kodo-cyan → hover:text-white
- Preserved focus rings (cyan) and active/selected states (cyan) as per audit
- Action 11.3.1.2 in progress (first batch of ~15 files)
 2026-01-16 10:51:30 +01:00
senke
f02c68cfad aesthetic-improvements: enhance design direction checklist 
- 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
 2026-01-16 10:48:00 +01:00
senke
576a099e3b aesthetic-improvements: document Surgical Minimalism design direction 
- 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
 2026-01-16 10:46:34 +01:00
senke
170ab38750 aesthetic-improvements: add consistent section spacing utility variables 
- Added --section-spacing: 2rem (32px) for standard section spacing
- Added --section-spacing-lg: 3rem (48px) for large section spacing
- Both values align to 8px grid system (32px = 4× base, 48px = 6× base)
- Values match spacing increases from Action 11.4.3.3
- Documentation added with usage examples
- Provides reusable utility for consistent section spacing across pages
- Action 11.4.3.4 complete
 2026-01-16 10:44:55 +01:00
senke
cd97eaf8d1 aesthetic-improvements: increase spacing between sections across all pages 
- Increased DashboardPage main container from space-y-8 (32px) to space-y-12 (48px)
- Increased standard section spacing from space-y-6 (24px) to space-y-8 (32px) in 8 pages:
  EducationPage, SettingsPage, QueuePage, GearPage, LivePage, DeveloperPage, SocialPage, SearchPage
- All values align to 8px grid system (32px = 4× base, 48px = 6× base)
- Provides more whitespace between major sections, improving visual hierarchy
- Aligns with Surgical Minimalism principle of increased whitespace
- Total: 9 pages updated
- Action 11.4.3.3 complete
 2026-01-16 10:43:42 +01:00
senke
3f2b991018 aesthetic-improvements: audit section spacing across all pages 
- Created comprehensive audit document documenting all section spacing values
- Audited 12+ pages: DashboardPage, EducationPage, SettingsPage, QueuePage, GearPage, LivePage, DeveloperPage, SearchPage, ProfilePage, AnalyticsPage, AdminDashboardPage, DesignSystemDemoPage
- Documented spacing patterns: space-y-4 (16px), space-y-6 (24px), space-y-8 (32px), space-y-12 (48px)
- Documented grid gaps: gap-4 (16px), gap-6 (24px), gap-8 (32px)
- Documented page padding: p-6 (24px), p-8 (32px), px-4 py-8 (16px/32px)
- Verified all values align to 8px grid system
- Provided recommendations for increasing whitespace in next action
- Most common spacing: space-y-6 (24px) used in 7+ pages
- Action 11.4.3.2 complete
 2026-01-16 10:41:53 +01:00
senke
56cd45aeb8 aesthetic-improvements: increase card padding for more whitespace 
- 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
 2026-01-16 10:39:37 +01:00
senke
626f404761 aesthetic-improvements: verify gradients are only in hero sections 
- 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
 2026-01-16 10:38:05 +01:00
senke
9175199107 aesthetic-improvements: remove gradients from card components 
- Removed decorative hover gradient overlay from UserCard
- Replaced gradient backgrounds with solid colors in PostCard, MyCoursesView, DiscoverView
- Genre cards now use solid bg-kodo-graphite with border instead of colorful gradients
- All card components now use solid backgrounds, aligning with Surgical Minimalism
- Updated 4 files: UserCard, PostCard, MyCoursesView, DiscoverView
- Action 11.4.2.1 complete
 2026-01-16 10:36:29 +01:00
senke
af96f59c88 aesthetic-improvements: remove excessive hover effects from high-priority files 
- Removed scale transforms (hover:scale-[1.02], hover:scale-110, group-hover:scale-110/105) from cards and images
- Removed decorative shadow/glow effects (hover:shadow-neon-cyan/20, hover:shadow-lg) from cards
- Removed hover-lift class (translateY + shadow) from base Card and Button components
- Replaced excessive effects with subtle hover:bg-white/5 or hover:opacity-90
- Preserved functional hover states (group-hover:opacity-100 for play overlays, hover:bg-accent/50 for interactive feedback)
- Updated 14 files: ProductCard, TrackCard, CourseCard, EquipmentCard, PostCard, ProfileView, card.tsx, SearchPage, PlayerControls, OrderSummary, DiscoverView, PlaylistCard, Sidebar, button.tsx
- Effects are now subtle and purposeful, aligning with Surgical Minimalism
- Action 11.4.1.3 complete
 2026-01-16 10:34:41 +01:00
senke
72724baa32 aesthetic-improvements: categorize hover effects as necessary vs excessive 
- Enhanced audit document with detailed file-by-file categorization
- Identified 6 high-priority files with multiple excessive effects
- Identified 6 medium-priority files with single excessive effects
- Identified 3 files with mixed effects requiring selective removal
- Categorized ~400 instances as necessary (keep)
- Categorized ~200 instances as excessive (remove)
- Categorized ~150 instances as review (context-dependent)
- Specific patterns identified for removal: scale transforms, decorative shadows, image zooms
- Action 11.4.1.2 complete
 2026-01-16 10:31:38 +01:00
senke
5b40d2c112 aesthetic-improvements: audit hover effects across codebase 
- Found 887 instances across 239 files
- Categorized into 5 usage types (necessary, excessive, group hover, transitions, opacity)
- Identified excessive patterns: scale transforms, shadow/glow, multiple simultaneous effects
- Documented high-impact files requiring changes
- Current: ~887 effects, Target: reduce by 30-40% (remove decorative, keep interactive)
- Action 11.4.1.1 complete
 2026-01-16 10:28:21 +01:00
senke
7fe1484de3 aesthetic-improvements: add automated contrast testing for WCAG compliance 
- 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
 2026-01-16 10:26:20 +01:00
senke
19272cd48e aesthetic-improvements: test WCAG AA compliance for all text colors 
- 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
 2026-01-16 10:18:46 +01:00
senke
12a4624c9e aesthetic-improvements: audit cyan usage across codebase 
- Found 965 instances across 217 files
- Categorized into 6 usage types (primary, secondary, decorative, informational, focus, text)
- Created comprehensive audit document with recommendations
- Identified high-impact files for replacement
- Current: ~40% cyan usage, Target: ~20% (80/20 rule)
- Action 11.3.1.1 complete
 2026-01-16 10:16:08 +01:00
senke
1a82329622 aesthetic-improvements: use dim text sparingly for better contrast 
- 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
 2026-01-16 10:14:17 +01:00
senke
cc12bf6304 aesthetic-improvements: verify spacing scale aligns to 8px grid 
- Verified all spacing values in design-tokens.css
- Documented 8px-aligned values (8 values) vs non-aligned (5 values)
- Updated comments with 8px grid alignment status
- Added recommendations to prefer 8px-aligned values
- Action 11.2.1.2 complete
 2026-01-16 10:04:40 +01:00
senke
feea64b2d5 aesthetic-improvements: document 8px grid system 
- 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
 2026-01-16 02:36:07 +01:00
senke
3b7631d193 aesthetic-improvements: change primary text color to white 
- 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
 2026-01-16 02:34:55 +01:00
senke
e70c1c4ed0 cognitive-load: add first-time user detection utility 
- 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
 2026-01-16 02:33:46 +01:00
senke
2e23b996d6 cognitive-load: create onboarding flow component for new users 
- Created Onboarding component with multi-step flow
- Progress indicator shows current and completed steps
- Navigation: Next, Previous, Skip buttons
- Uses Dialog component for modal display
- Supports custom content per step
- French labels for UI
- Action 10.4.1.3 complete
 2026-01-16 02:32:53 +01:00
senke
3f1e36d6fc cognitive-load: make view mode toggle less prominent on LibraryPage 
- 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
 2026-01-16 02:31:43 +01:00
senke
ea7e45c1a2 cognitive-load: convert Collapsible to Accordion on dashboard 
- Replaced Collapsible component with Accordion for Activity Feed section
- Uses AccordionItem, AccordionTrigger, and AccordionContent
- Accordion wraps the Tabs component (Chart and Activity tabs)
- Configuration: type='single', collapsible=true (starts closed)
- Improves consistency by using standardized Accordion component
- Action 10.1.1.5 complete
 2026-01-16 02:30:39 +01:00
senke
8bc570cfda cognitive-load: organize secondary info in tabs on dashboard 
- 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
 2026-01-16 02:28:58 +01:00
senke
e7bec689b0 cognitive-load: show only 2 key metrics on dashboard, hide rest behind View All 
- Added progressive disclosure for dashboard metrics
- Shows first 2 metrics (Pistes écoutées, Messages envoyés) initially
- Hides Favoris and Amis actifs behind 'Voir tout' button
- Added 'Voir moins' button to collapse back to 2 metrics
- Reduces cognitive load by showing only essential metrics first
- Action 10.1.1.1 complete
 2026-01-16 02:27:26 +01:00
senke
73ef38872e cognitive-load: add clear filters button to LibraryPage 
- Added clear filters button inside AdvancedFilters component
- Button only visible when filters are active
- Clears all filters: search, genre, format, sort
- Uses RotateCcw icon and outline button variant
- Improves UX by allowing quick filter reset
- Action 10.3.1.3 complete
 2026-01-16 02:25:46 +01:00
senke
b12c58868c cognitive-load: hide advanced filters behind AdvancedFilters component 
- Wrapped Genre, Format, and Sort filters in AdvancedFilters component
- Search input remains visible (basic functionality)
- Advanced filters hidden by default, expandable on demand
- Added tooltip to AdvancedFilters explaining functionality
- Reduces cognitive load through progressive disclosure
- Action 10.3.1.2 complete
 2026-01-16 02:24:14 +01:00
senke
7ab4e03ded cognitive-load: add tooltips to advanced features 
- Added optional tooltip prop to AdvancedFilters component
- Added tooltips to LibraryPage view mode toggles (Grid/List)
- Added tooltip to LibraryPage sort button
- Added context-aware tooltip to LibraryPage bulk mode button
- Tooltips explain functionality and improve discoverability
- Action 10.4.1.2 complete
 2026-01-16 02:22:41 +01:00
senke
ed1af8b290 cognitive-load: create AdvancedFilters component 
- 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
 2026-01-16 02:20:26 +01:00
senke
8949ac46f1 consistency: add visual test page for Input component 
- Added comprehensive visual test section to DesignSystemDemoPage
- Tests basic states (normal, with value, disabled, disabled with value)
- Tests 8 input types (text, email, password, number, search, url, tel, date)
- Tests width variations (full, half, fixed)
- Tests placeholder variations (with, without, long, short)
- Available at /design-system route for visual verification
- Action 9.5.1.6 complete
 2026-01-16 02:18:06 +01:00
senke
3721274760 consistency: add visual test page for button variants 
- 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
 2026-01-16 02:17:01 +01:00
senke
e30acf15cf consistency: add JSDoc documentation for button variants 
- Added comprehensive JSDoc comments for buttonVariants
- Documented all 5 variants (default, destructive, outline, secondary, ghost) with use cases
- Documented all 4 sizes (default, sm, lg, icon) with descriptions
- Added ButtonProps interface documentation with examples
- Added Button component documentation with usage examples
- Action 9.3.1.5 complete
 2026-01-16 02:15:30 +01:00
senke
2152224fdf consistency: simplify button glow effects 
- Removed excessive glows from button variants
- default: removed base glow, reduced hover glow (30px→15px, opacity 0.5→0.3)
- destructive: removed hover glow
- outline: removed hover glow
- Buttons now have minimal, subtle glows for better visual hierarchy
- Action 9.3.1.4 complete
 2026-01-16 02:14:52 +01:00
senke
216c4c6f52 consistency: remove unused button variants (neon, glass, premium, link) 
- 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
 2026-01-16 02:13:51 +01:00
senke
31c5b1aef2 consistency: replace custom components with design system components 
- Fixed UserCard: removed invalid Card variant prop, fixed Button variants
- Fixed LicenceCard: removed invalid Card variant prop, fixed Button variants
- Replaced FormField Input with design system Input (removed Tailwind defaults)
- Replaced FormField Textarea with design system Textarea (removed Tailwind defaults)
- Replaced FormField Select with design system Select (maintained backward compatibility)
- All components now use design system components with proper error handling
- Action 9.2.1.6 complete
 2026-01-16 02:11:40 +01:00
senke
3a90ee4747 consistency: create component usage guide 
- Created comprehensive guide documenting design system components
- Documents Button, Card, Input, Select, Dialog, Alert, Badge components
- Includes use cases, variants, sizes, examples, and best practices
- Provides migration guide for custom implementations
- Action 9.2.1.4 complete
 2026-01-16 02:08:56 +01:00
senke
fd3a14615f consistency: add ESLint rule to enforce Button component usage 
- 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
 2026-01-16 02:07:51 +01:00
senke
bd9d971c26 consistency: replace custom buttons with Button component (partial) 
- Replaced custom button implementations with Button component in 14 files
- Files updated: LiveStreamDetailView, DashboardPage, CommentItem, PostCard, SocialPage, SocialView, AdminUsersView, UserTableRow, ProjectsManager, CloudFileBrowser, FileManagerView, CreatorModal, ImageCropper, BulkUploadModal
- ~31 buttons replaced across high-priority files
- Used appropriate Button variants: ghost, outline, default, secondary, link
- Preserved visual appearance with className overrides where needed
- Action 9.2.1.2 in progress (partial completion)
 2026-01-16 02:06:14 +01:00
senke
b81042bfba consistency: add ESLint rule to prevent Tailwind default colors 
- 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
 2026-01-16 02:02:14 +01:00
senke
bcf36cdd78 consistency: fix final Tailwind default color instances 2026-01-16 01:59:56 +01:00
senke
fdb080ae00 consistency: fix remaining Tailwind default colors in auth and features components 2026-01-16 01:59:31 +01:00
senke
13cf143407 consistency: fix remaining Tailwind default color edge cases 2026-01-16 01:58:12 +01:00
senke
bb46cedb3d consistency: auto-migrate Tailwind default colors (Batch 14, 50 instances) 2026-01-16 01:57:08 +01:00
senke
6208283c49 consistency: auto-migrate Tailwind default colors (Batch 13, 110 instances) 2026-01-16 01:57:04 +01:00
senke
c046887bc1 consistency: auto-migrate Tailwind default colors (Batch 12, 62 instances) 2026-01-16 01:57:01 +01:00
senke
70fd16a396 consistency: auto-migrate Tailwind default colors (Batch 11, 100 instances) 2026-01-16 01:56:57 +01:00
senke
2d59256fbb consistency: auto-migrate Tailwind default colors (Batch 10, 130 instances) 2026-01-16 01:56:54 +01:00
senke
3151c2200a consistency: auto-migrate Tailwind default colors (Batch 9, 70 instances) 2026-01-16 01:56:50 +01:00
senke
02053385ca consistency: auto-migrate Tailwind default colors (Batch 8, 47 instances) 2026-01-16 01:56:47 +01:00
senke
3a6f539c77 consistency: auto-migrate Tailwind default colors (Batch 7, 37 instances) 2026-01-16 01:56:44 +01:00
senke
804327d816 consistency: auto-migrate Tailwind default colors (Batch 6, 21 instances) 2026-01-16 01:56:41 +01:00
senke
cbc19077f7 consistency: auto-migrate Tailwind default colors (Batch 5, 50 instances) 2026-01-16 01:56:37 +01:00
senke
fb83ad79fa consistency: auto-migrate Tailwind default colors (Batch 4, 114 instances) 2026-01-16 01:56:34 +01:00
senke
0284a93cab consistency: auto-migrate Tailwind default colors (Batch 3, 70 instances) 2026-01-16 01:56:30 +01:00
senke
a7afc7dd7d consistency: auto-migrate Tailwind default colors (Batch 2, 64 instances) 2026-01-16 01:56:27 +01:00
senke
197879d295 consistency: auto-migrate Tailwind default colors (Batch 1, 83 instances) 2026-01-16 01:56:24 +01:00
senke
ad0637880a docs: generate comprehensive list of all remaining Tailwind default color instances 2026-01-16 01:51:32 +01:00
senke
5236b8704d consistency: migrate Tailwind default colors in CheckoutView and FileManagerView (Batches 19-20) 2026-01-16 01:49:52 +01:00
senke
97747d376c consistency: migrate Tailwind default colors in CartView and SearchPageView (Batches 17-18) 2026-01-16 01:48:26 +01:00
senke
6ffb82f139 consistency: migrate Tailwind default colors in AdminView and EducationView (Batches 15-16) 2026-01-16 01:47:43 +01:00
senke
ce9883b1e6 consistency: migrate Tailwind default colors in ProfileView.tsx (Batch 14) 2026-01-16 01:46:58 +01:00
senke
f73e4c2d00 consistency: migrate Tailwind default colors in LiveView, StudioView, and UploadView (Batches 11-13) 2026-01-16 01:46:02 +01:00
senke
8da02d22fe consistency: migrate Tailwind default colors in SettingsView and SocialView (Batches 9-10) 2026-01-16 01:45:00 +01:00
senke
42765ca915 consistency: migrate Tailwind default colors in PurchasesView.tsx (Batch 8) 2026-01-16 01:44:12 +01:00
senke
4bd5b637a4 consistency: migrate Tailwind default colors in NotificationsView.tsx (Batch 7) 2026-01-16 01:43:37 +01:00
senke
bfc4d75969 consistency: migrate Tailwind default colors in DiscoverView.tsx (Batch 6) 2026-01-16 01:43:00 +01:00
senke
c2521fd26f consistency: migrate Tailwind default colors in FileDetailsView.tsx (Batch 5) 2026-01-16 01:42:21 +01:00
senke
d3775be22b consistency: migrate Tailwind default colors in MarketplaceView.tsx (Batch 4) 2026-01-16 01:41:40 +01:00
senke
fbf0d9faf4 consistency: migrate Tailwind default colors in AnalyticsView.tsx (Batch 3) 2026-01-16 01:41:11 +01:00
senke
e97cbeb055 cognitive-load: audit list view usage (Action 10.2.1.1) 
- 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
 2026-01-16 01:38:00 +01:00
senke
fe3902967e cognitive-load: mark Tabs as complete and create Accordion component (Actions 10.1.1.2, 10.1.1.4) 
- 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
 2026-01-16 01:36:19 +01:00
senke
7943a1c433 consistency: audit button variant usage (Action 9.3.1.1) 
- Audited all 9 button variants in design system Button
- Found 5 variants in use (128 total uses):
  - ghost: 71 uses (54.2% - most popular)
  - outline: 36 uses (27.5%)
  - secondary: 13 uses (9.9%)
  - default: 4 uses (3.1%)
  - destructive: 4 uses (3.1%)
- Found 4 unused variants (zero usage):
  - neon, glass, premium, link
- Identified 28 legacy Button uses with variant="primary"
- Created comprehensive audit report: apps/web/docs/BUTTON_VARIANT_USAGE_AUDIT.md
- Includes usage statistics, analysis, and migration strategy
 2026-01-16 01:32:40 +01:00
senke
c00b137632 consistency: audit custom components (Card, Input, Select) (Action 9.2.1.5) 
- Audited Card, Input, and Select component implementations
- Identified design system, legacy, and custom components
- Found 4 high-priority issues:
  - UserCard and LicenceCard using invalid variant prop
  - FormField Input using Tailwind default colors
  - FormField Select using native HTML select
- Documented ~8 custom card-like components
- Created comprehensive audit report: apps/web/docs/CUSTOM_COMPONENTS_AUDIT.md
- Includes migration priorities and specific files requiring changes
 2026-01-16 01:30:54 +01:00
senke
54b7e5f1e9 consistency: audit custom button implementations (Action 9.2.1.1) 
- 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
 2026-01-16 01:28:37 +01:00
senke
5783d688c0 consistency: simplify Card borders and shadows (Action 9.4.1.2) 
- Changed shadow-xl to shadow-lg (simpler shadow)
- Simplified hover shadow from shadow-2xl + shadow-black/20 to shadow-lg
- Preserved border-white/5 (already correct)
- Result: Clean, simple Card styling with consistent shadow levels
 2026-01-16 01:26:56 +01:00
senke
f568a4d505 consistency: remove gradients from Card (Action 9.4.1.1) 
- 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)
 2026-01-16 01:25:36 +01:00
senke
b0b1d9b7a3 consistency: update Input focus state to cyan border (Action 9.5.1.4) 
- 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
 2026-01-16 01:24:24 +01:00
senke
79f6d97071 consistency: simplify Input styling classes (Action 9.5.1.3) 
- 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)
 2026-01-16 01:22:58 +01:00
senke
06ac7cc216 consistency: remove unnecessary decorations from Input (Action 9.5.1.2) 
- Removed backdrop-blur-sm (unnecessary visual effect)
- Removed ring-offset-kodo-void (not needed)
- Removed hover:border-white/15 (subtle hover effect)
- Removed focus-visible:bg-black/30 (focus background change)
- Result: Cleaner Input styling with 4 unnecessary decorations removed
- Preserved: Essential functionality and focus ring (will be simplified in 9.5.1.4)
 2026-01-16 01:21:36 +01:00
senke
411ab9eadd consistency: audit Input component styling (Action 9.5.1.1) 
- Created comprehensive INPUT_COMPONENT_STYLING_AUDIT.md
- Documented all 25+ styling classes with categorization
- Identified 5 key issues:
  - Complex focus state (ring + border redundant)
  - Unnecessary backdrop-blur-sm decoration
  - Overly broad transition-all
  - Subtle hover effect
  - Complex border radius
- Analyzed usage: 100+ files import Input component
- Provided Priority 1-3 recommendations for simplification
- Created proposed simplified version with Kodo colors
- Ready for Action 9.5.1.2 (remove unnecessary decorations)
 2026-01-16 01:20:06 +01:00
senke
b29f659180 consistency: migrate Tailwind default colors to Kodo (Action 9.1.1.3 - batch 2) 
Migrated high-usage feature components:
- TrackFilters.tsx: Replaced all gray/blue colors with kodo colors (39 instances)
- PlaybackHeatmap.tsx: Replaced heatmap gradient colors with kodo colors (28 instances)

Progress: 132 instances migrated total (1,492 → 1,360 remaining)
Batch 1: 65 instances (Alert, Toast, PasswordStrengthIndicator, GearView)
Batch 2: 67 instances (TrackFilters, PlaybackHeatmap)
 2026-01-16 01:18:04 +01:00
senke
6fa1c62f56 consistency: migrate Tailwind default colors to Kodo (Action 9.1.1.3 - batch 1) 
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
 2026-01-16 01:14:39 +01:00
senke
7a85fd0584 consistency: audit Tailwind default color usage (Action 9.1.1.2) 
- 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)
 2026-01-16 01:10:57 +01:00
senke
006765ab86 consistency: create color usage guide (Action 9.1.1.1) 
- 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.
 2026-01-16 01:08:51 +01:00
senke
f606a4cd57 security: cleanup obsolete token validation code (Action 5.1.1.6) 
- 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)
 2026-01-16 01:06:11 +01:00
senke
b895e08d15 security: migrate access token to httpOnly cookie (Actions 5.1.1.1-5.1.1.3) 
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
 2026-01-16 01:03:23 +01:00
senke
c063b9723a ui: enhance selected items highlighting (Action 8.4.1.3) 
- 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
 2026-01-16 00:52:31 +01:00
senke
b72d70dff5 ui: add BulkModeBanner to LibraryPage (Action 8.4.1.2) 
- 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
 2026-01-16 00:51:26 +01:00