# ComposeTv HomeTopBar → UNSPOOLED Migration (2026-05-28)

## Pattern
Copied from ComposeTv 1.3.1 (`/home/rurouni/ComposeTv-1.3.1/`) reference implementation.
Adapted for NexStream's theme system (NuvioTheme colors, emoji icons instead of ImageVectors).

## Files Created
| File | Purpose |
|------|---------|
| `ui/util/DpadKeyEvents.kt` | `Modifier.handleDPadKeyEvents(onLeft, onRight, onEnter)` — ACTION_UP D-pad interceptor |
| `ui/navigation/NavMenuData.kt` | Static `NavMenuItem` definitions — single source of truth for Home/Movies/TVShows/MyList/Search |
| `ui/components/topbar/HomeTopBar.kt` | Slot-based `HomeTopBar(content, selectedId, onMenuSelected)` — TabRow with focus-aware backgrounds |
| `ui/screens/home/HomeScreenShell.kt` | Wrapper: uses HomeTopBar as default, falls back to NetflixHomeScreen (with sidebar) when `useTopBar=false` |

## Integration
- `NexStreamNavHost.kt` — Home route changed from `NetflixHomeScreen` to `HomeScreenShell`
- TabRow items: Settings (circular), Home, Movies, TV Shows, My List (text), Search (circular icon)
- Focus: `MutableInteractionSource` + `collectIsFocusedAsState()` per tab
- Background states: focused=AccentSoft, selected=SurfaceHigh, neither=transparent
- Indicator suppressed (transparent Box)

## D-pad Key Handling Fix
The root cause of "remote not selecting provider cards" on Android TV:
- Old code used `Key.DirectionCenter` inconsistently 
- New utility uses native `KeyEvent.KEYCODE_DPAD_CENTER`, `KEYCODE_ENTER`, `KEYCODE_NUMPAD_ENTER`
- ACTION_UP only — one press = one action
- D-pad back navigation: `Key.Back` → `viewModel.previousStep()` / `viewModel.complete()` on Welcome

## Menu Item Model
```kotlin
data class NavMenuItem(
    val id: String,        // route name: "home", "movies", "tv-shows", "my-list", "search"
    val label: String,     // display text
    val icon: String,      // emoji for TV readability
    val isProfileTab: Boolean = false,
    val isSearchTab: Boolean = false,
)
```