Commit graph

211 commits

Author SHA1 Message Date
senke
62a6b3a528 improving UI: improve audio player phase 1 2026-01-26 19:18:52 +01:00
senke
f61c0c3dcc improving UI: adding API doc to Developer Page 2026-01-26 14:12:17 +01:00
senke
8803070c2e feat(frontend): complete design system migration and cleanup old pages 2026-01-25 12:33:46 +01:00
senke
06b12daabd refactor of veza frontend ui- batch 1 2026-01-22 17:23:11 +01:00
senke
7348ac05d6 refactor(frontend): improve sidebar and library ui with design system
- Update Sidebar to use Design System Button component and consistent styling
- Refactor LibraryPage to use Card variants (glass/gaming) for track grid
- Ensure consistent button usage across key UI components
- Fix type errors in DashboardPage
2026-01-18 22:40:59 +01:00
senke
9d4d3d9a8f refactor(frontend): enhance ui with design system components
- Refactor DashboardPage to use StatCard, new Button variants, and glassmorphism cards
- Update DashboardLayout to include AstralBackground for premium visual effect
- Style GlobalPlayer with glass-hud utility classes
- Fix type errors in LoginPage by using local Card shim
2026-01-18 22:36:15 +01:00
senke
1a5c81282c refactor(frontend): improve ui using design system
- Refactor Navbar, ChatInput, RegisterPage, and CreatePlaylistDialog to use @veza/design-system components
- Shim local UI components (Button, Input, Card) to align with Design System API and styles
- Fix hundreds of type errors by exporting missing components (SearchInput, FileUpload) and adding missing props (icon, variant)
2026-01-18 22:27:53 +01:00
senke
f167696a4d stabilized but still broken MVP VERSION 2026-01-18 16:28:22 +01:00
senke
023b8a89c6 fix: Corriger URL Swagger et finaliser implémentation DeveloperPage
- Ajouter fallback pour Swagger UI si doc.json ne fonctionne pas
- Améliorer message d'erreur avec bouton pour ouvrir Swagger UI directement
- Les fonctionnalités API Keys et Usage Stats sont maintenant complètes et fonctionnelles
- Tous les onglets de DeveloperPage sont maintenant implémentés
2026-01-18 13:55:28 +01:00
senke
79c5d2d7d5 fix: Corriger extraction des données de recherche depuis réponse API imbriquée
- Gérer la structure imbriquée response.data.data.pagination et response.data.data.tracks
- Ajouter fallback pour structure plate si nécessaire
- Corriger extraction pour tracks et users search
- Les résultats de recherche s'affichent maintenant correctement
2026-01-18 13:29:02 +01:00
senke
1ef4cdb35a implicit-tasks: update unit tests after type changes - fix Track mocks to use string IDs and creator_id 2026-01-16 15:12:37 +01:00
senke
2ae9535009 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
ccb5c576a3 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
c64cf7aea4 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
6974c12a25 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
c86832ad08 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
3fb12b2ce2 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
f9f34eccad 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
cf2b347c8d 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
d0118c15cd 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
774333ebfe 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
490091cb02 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
46f586b6af 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
936b2c36fe 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
4396d9ea63 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
0a9c67de40 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
85911dce7f 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
c02826dd70 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
210d37860d 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
c2b36fe05c 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
6eef4b7efa 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
f8655ebaed 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
5558288809 consistency: fix final Tailwind default color instances 2026-01-16 01:59:56 +01:00
senke
de79895e5d consistency: fix remaining Tailwind default colors in auth and features components 2026-01-16 01:59:31 +01:00
senke
fcc83ddeb4 consistency: auto-migrate Tailwind default colors (Batch 14, 50 instances) 2026-01-16 01:57:08 +01:00
senke
43d4974ab6 consistency: auto-migrate Tailwind default colors (Batch 13, 110 instances) 2026-01-16 01:57:04 +01:00
senke
955898cc37 consistency: auto-migrate Tailwind default colors (Batch 12, 62 instances) 2026-01-16 01:57:01 +01:00
senke
5ea2191f9c consistency: auto-migrate Tailwind default colors (Batch 11, 100 instances) 2026-01-16 01:56:57 +01:00
senke
911ea4d304 consistency: auto-migrate Tailwind default colors (Batch 10, 130 instances) 2026-01-16 01:56:54 +01:00
senke
89ec2b06f0 consistency: auto-migrate Tailwind default colors (Batch 9, 70 instances) 2026-01-16 01:56:50 +01:00
senke
db88a6e64e consistency: auto-migrate Tailwind default colors (Batch 8, 47 instances) 2026-01-16 01:56:47 +01:00
senke
654e7eba67 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
24e0c8a791 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
8301aa99e2 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
senke
332b685f68 ui: use Spinner component in loading states (Action 8.3.1.5 partial)
- Replaced Loader2 with Spinner in high-leverage locations:
  - LibraryPage (addToPlaylist)
  - CommentSection (create comment)
  - CommentThread (reply, edit)
  - PlaylistForm (submit)
  - AddCollaboratorModal
  - CollaboratorList (remove)
  - PlaylistFollowButton
  - PlaylistActions (edit, delete)
  - PlaylistBatchActions (share, delete)
  - SharePlaylistModal
  - AddTrackToPlaylistModal
  - ShareLinkManager (create)
- Spinner provides consistent Kodo design system styling
- Remaining Loader2 usages can be migrated incrementally
- Part of Action 8.3.1.5: Use Spinner in loading states
2026-01-16 00:48:39 +01:00
senke
80a2f4dbf2 ui: add loading states to revoke share link and reorder tracks (Action 8.3.1.3 partial)
- Added isLoading prop to ConfirmationDialog for revoke share link
- Disabled drag-and-drop context when reorder mutation is pending
- Uses mutation.isPending to show loading state
- Follows existing patterns for loading states
- Part of Action 8.3.1.3: Add loading states to all mutation buttons
2026-01-16 00:44:30 +01:00
senke
d12c9f4988 ui: add loading state to delete comment button (Action 8.3.1.3 partial)
- Added isLoading prop to ConfirmationDialog for delete comment
- Uses deleteCommentMutation.isPending to show loading state
- Follows existing pattern for confirmation dialogs
- Part of Action 8.3.1.3: Add loading states to all mutation buttons
- Many buttons already have loading states (verified during implementation)
2026-01-16 00:44:08 +01:00
senke
6a97903ceb ui: add loading state to addToPlaylist button (Action 8.3.1.1)
- Added Loader2 import from lucide-react
- Added disabled prop to DropdownMenuItem using mutation.isPending
- Shows spinner and 'Ajout en cours...' text when loading
- Follows React Query mutation pattern (isPending)
- All playlist items disabled during any add operation
- Task 8.3.1.1 complete
2026-01-16 00:41:45 +01:00
senke
4408765ced ui: add focus states for keyboard navigation (Action 8.2.1.4)
- Added focus-visible states to view mode toggles
- Added focus-visible states to FeedView buttons
- Added focus-visible states to logout buttons (red ring for destructive action)
- Added focus-visible states to Dashboard time period buttons
- Added focus-visible states to Collapsible trigger
- Added focus-visible states to track cards (grid and list views)
- Added focus-visible states to navigation links (Sidebar, Header)
- Added tabIndex={0} to clickable cards for keyboard navigation
- Button component already has focus-visible states
- Consistent focus pattern: ring-2 ring-kodo-cyan with offset
- Task 8.2.1.4 complete
2026-01-16 00:38:37 +01:00
senke
5c1835186f ui: add hover states and cursor-pointer to high-priority clickable elements (Action 8.2.1.3)
- Added cursor-pointer to view mode toggles (LibraryPage)
- Added cursor-pointer and transition-colors to FeedView buttons
- Added cursor-pointer to logout buttons (Sidebar, Header)
- Added cursor-pointer to Dashboard time period buttons
- Added cursor-pointer to Collapsible trigger button
- Button component already has cursor-pointer built-in
- Navigation links already have hover states
- Updated audit document with progress
- High-priority areas complete, remaining elements can be addressed incrementally
- Task 8.2.1.3 complete
2026-01-16 00:36:35 +01:00