refactor(frontend): Phase 3 - create advanced composite components
Extract complex UI sections into reusable composite components
New Components Created:
1. HeatBadges (heats/HeatBadges.jsx)
- Displays competition heats with compact notation
- Configurable max visible badges with "+X more" overflow
- Tooltips with full heat information
2. UserListItem (users/UserListItem.jsx)
- Reusable user entry with avatar, username, full name
- Optional heat badges display
- Flexible action button slot (render props pattern)
- Online/offline status support
3. ParticipantsSidebar (events/ParticipantsSidebar.jsx)
- Complete sidebar component for event participants
- Filter checkbox for hiding users from own heats
- Participant and online counters
- Integrated UserListItem with match actions
4. FileTransferProgress (webrtc/FileTransferProgress.jsx)
- WebRTC P2P file transfer UI
- Progress bar with percentage
- Send/Cancel actions
5. LinkShareInput (webrtc/LinkShareInput.jsx)
- Fallback link sharing when WebRTC unavailable
- Google Drive, Dropbox link support
Pages Refactored:
- EventChatPage: 564 → 471 lines (-93 lines, -16%)
* Replaced 90-line participants sidebar with <ParticipantsSidebar />
* Removed duplicate formatHeat logic (now in HeatBadges)
- MatchChatPage: 446 → 369 lines (-77 lines, -17%)
* Replaced 56-line file transfer UI with <FileTransferProgress />
* Replaced 39-line link input form with <LinkShareInput />
Phase 3 Total: -170 lines
Grand Total (Phase 1+2+3): -559 lines (-17%)
Final Results:
- EventChatPage: 761 → 471 lines (-290 lines, -38% reduction)
- MatchChatPage: 567 → 369 lines (-198 lines, -35% reduction)
Benefits:
- Massive complexity reduction in largest components
- Composite components can be reused across pages
- Better testability - each component tested independently
- Cleaner code organization - single responsibility principle
- Easier maintenance - changes in one place propagate everywhere
082105c5bf