# 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.