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.
52 lines
1.7 KiB
Markdown
52 lines
1.7 KiB
Markdown
# Swap Groups Panel UI Improvements
|
|
|
|
## Goal
|
|
Make the swap approval interface simple, intuitive, and appealing.
|
|
|
|
## Current Issues
|
|
1. **Too much information at once** - Shows all player details, positions, avatars immediately
|
|
2. **Buried lede** - Most important info (user needs to approve) not prominent
|
|
3. **Not immediately scannable** - User must read through to find action items
|
|
4. **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.
|