c7e577bf12
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
React + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel (or oxc when used in rolldown-vite) for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.
Expanding the ESLint configuration
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.