# YouTube-style Profile Picker Design (2026-06-14)

## Reference

The profile selection screen at `ui/screens/profiles/ProfileSelectScreen.kt` was redesigned to match YouTube TV's "Who's watching?" screen.

## Layout

```
Box (fillMaxSize, Background)
  └─ Background accent glow (400dp circle, bottom-right, focusedColor@15%)
  └─ Column (fillMaxSize, centered)
      ├─ "Unspooled" (28sp, Black, TextPrimary)
      ├─ "Who's watching?" (20sp, Medium, TextSecondary)
      ├─ Spacer(48dp)
      ├─ LazyRow (center arrangement, 16dp horizontal padding per item)
      │   ├─ ProfileAvatar (per profile)        
      │   │   └─ Circular avatar + name below + checkmark badge
      │   └─ AddProfileAvatar ("+ Add account")
      ├─ Spacer(72dp)
      └─ GuestButton ("Watch as guest" pill)
  └─ AnimatedVisibility (ProfileCreatorOverlay)
  └─ PinOverlay (conditional, when pinTarget != null)
```

## ProfileAvatar Composable

### Visual States

| State | Avatar Size | Ring | Glow | Name Color |
|-------|-------------|------|------|------------|
| Idle | 120dp | 0dp transparent | None | TextSecondary |
| Focused | 138dp (lerped) | 4dp white | `shadow(16dp, white@40%)` + outer white glow | TextPrimary |
| Selected (unfocused) | 120dp | amber ring + checkmark | 12% accent glow | TextSecondary |

### Focus Implementation

```kotlin
.focusable()
.onFocusChanged { f ->
    val nowFocused = f.isFocused || f.hasFocus
    if (focused != nowFocused) { focused = nowFocused; if (nowFocused) onFocus() }
}
.clickable(interactionSource, indication = null) { onClick() }
```

**Pitfall:** `focusable()` + `onFocusChanged` shows visual focus but does NOT handle SELECT. Without `.clickable()`, pressing D-pad center does nothing. Always pair them.

### Animation

- `spring(dampingRatio = NoBouncy, stiffness = MediumLow)` for smooth lerp between idle and focused
- `animateColorAsState` on background accent glow color (cycles per focused profile)
- All lerp values: diameter, ring width, glow alpha, name color

## AddProfileAvatar Composable

- Muted circle: 120dp → 138dp on focus, `White@10%` background, white "+" character (Light weight)
- Focus: same scale 1.15x + white ring + glow ring
- Label: "Add account" (not "ADD PROFILE"), lerps from TextTertiary to TextPrimary

## GuestButton ("Watch as guest")

- `Surface(onClick)` with `RoundedCornerShape(50)` (fully rounded pill)
- `containerColor = Surface@50%`, `focusedContainerColor = SurfaceHigh`
- `border = Border@50%`, `focusedBorder = FocusRing`
- Text: TextSecondary → TextPrimary on focus, Medium weight, 15sp, `padding(32dp x 14dp)`

## Theme Conformance

All colors use `NuvioTheme.colors.*` — NO hardcoded `Color.White`, `Color.Black`, or hex values on this screen. The user is sensitive to mismatches and will catch them.

## PIN Overlay

- Full-screen semi-transparent dark overlay
- 4-digit D-pad input: Up=8, Down=2, Left=4, Right=6
- Center/Enter submits, Left/Right also toggles `hiddenFocus`
- Shake animation on error (keyframes: -22, 18, -14, 10, -6, 0 over 400ms)
- Error: red-tinted digit boxes (#311818 background, #E35D5D border + text)
- Active cursor: vertical bar (2dp x 24dp)
- Filled digit: 14dp white dot