Improved participants sidebar UX by grouping users and clearly showing
who can't be contacted for match requests and why.
User Status Groups (in order):
1. Available - Online with declared heats (🟢 green dot)
- Ready to receive match requests
- Shows heat badges
- Active match button with "Send match request" tooltip
2. Online - No Heats - Online but no heats declared (🟡 yellow dot)
- Shows "No heats declared" gray badge
- Match button disabled with "User has not declared heats yet" tooltip
- Clear visual indicator of unavailability reason
3. Offline - Not currently online (⚪ gray dot)
- Can still send requests if they have heats (button faded)
- Shows "No heats declared" badge if no heats
- Match button disabled if no heats
Visual Improvements:
- Color-coded status dots for quick scanning
- Section headers with user counts per group
- "No heats declared" badge for users without heats
- Clear, contextual tooltips on disabled states
- Better spacing between groups (space-y-4 vs space-y-2)
Benefits:
- Users immediately see who's available to match
- No confusion about why buttons are disabled
- Priority given to online users with heats
- Reduced support questions
- Better conversion (users know what to do)
Applies to:
- Desktop sidebar (visible on chat tab)
- Mobile participants tab
c7e577bf12