You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1.7 KiB
1.7 KiB
Swap Groups Panel UI Improvements
Goal
Make the swap approval interface simple, intuitive, and appealing.
Current Issues
- Too much information at once - Shows all player details, positions, avatars immediately
- Buried lede - Most important info (user needs to approve) not prominent
- Not immediately scannable - User must read through to find action items
- Missing urgency indicators - No visual "waiting on you" signal
Proposed Changes
1. Lead with User's Action
If user needs to approve, show prominently at top:
⚠️ Your Approval Needed
Position swap requires your approval (2 of 3 pending)
[Approve Button] [Details ▼]
2. Collapsed View for Non-Actionable
If user is just waiting or already approved:
⏳ Position Swap Pending
Waiting for 2 approvals [Details ▼]
3. Simplified Player List
- Show compact view by default: "You: Position 1 → Position 3"
- Expandable details for full info
- Only show other players when expanded
4. Visual Priority
- Needs Action: Yellow/amber highlight, larger text, prominent button
- Waiting: Neutral colors, compact
- Initiator view: Show who's blocking with subtle indicators
Implementation Notes
- Keep existing color scheme (amber for pending, green for approved, blue for auto)
- Maintain accessibility
- Ensure mobile-responsive
- Add smooth expand/collapse animation
- Consider adding number badge for pending count
Files to Update
/Volumes/AppleFS/kDrive/Documents/workspace/playchoo-nextjs/src/components/SwapGroupsPanel.tsx- Translations (if adding new strings)
Design Reference
Look at existing JoinRequestsPanel.tsx for pattern consistency.