# ComposeTv HomeTopBar Migration — 2026-05-28

## Source
Adapted from [ComposeTv 1.3.1](https://github.com/techlads/ComposeTv)
at `/home/rurouni/ComposeTv-1.3.1/`.

## Architecture

The ComposeTv app has TWO navigation chrome modes:
- **HomeTopBar** — TabRow across the top with Settings/Search as circular tabs
- **HomeDrawer** — ModalNavigationDrawer with 80dp gutter

Both have the **identical API**:
```kotlin
@Composable fun HomeTopBar(
    content: @Composable () -> Unit,       // slot-based — hosts main content
    selectedId: String,                     // which tab is active
    onMenuSelected: (NavMenuItem) -> Unit,  // route callback
)
```

They swap via a simple boolean `StateFlow` toggle:
```kotlin
when (usedTopBar.collectAsState().value) {
    true  -> HomeTopBar(...)
    false -> HomeDrawer(...)
}
```

## Key Patterns Adopted

### 1. D-Pad Focus Utility (`Modifier.handleDPadKeyEvents`)
**File:** `ui/util/DpadKeyEvents.kt`

Uses native `KeyEvent.ACTION_UP` + `onPreviewKeyEvent` for reliable D-pad handling:
```kotlin
Modifier.handleDPadKeyEvents(
    onLeft = { /* navigate to sidebar */ },
    onRight = { /* navigate to content */ },
    onEnter = { /* select */ },
)
```

Recognizes: `KEYCODE_DPAD_LEFT/RIGHT/CENTER`, `KEYCODE_ENTER`, `KEYCODE_NUMPAD_ENTER`,
`KEYCODE_SYSTEM_NAVIGATION_LEFT/RIGHT`.

### 2. Focus via MutableInteractionSource
```kotlin
val interactionSource = remember { MutableInteractionSource() }
val isFocused by interactionSource.collectIsFocusedAsState()
```
Used on each `Tab` composable. 3-state background: focused (AccentSoft), selected (SurfaceHigh), neither (Transparent).

### 3. Slot-Based Chrome
Both `HomeTopBar` and `HomeDrawer` accept `content: @Composable () -> Unit` and render it inside
a `Box(fillMaxSize)`. The navigation chrome owns the layout; the content is hosted inside it.

### 4. Route ↔ Selection Sync
```kotlin
LaunchedEffect(Unit) {
    navController.addOnDestinationChangedListener { _, destination, _ ->
        selectedId.value = destination.route ?: return@...
    }
}
```

## Files Created for UNSPOOLED

| File | Purpose |
|------|---------|
| `ui/util/DpadKeyEvents.kt` | D-pad key handler utility |
| `ui/navigation/NavMenuData.kt` | Static menu definitions (Home/Movies/TVShows/MyList/Search) |
| `ui/components/topbar/HomeTopBar.kt` | TabRow-based top navigation (170 lines adapted) |
| `ui/screens/home/HomeScreenShell.kt` | Wrapper that embeds NetflixHomeScreen inside HomeTopBar |

## Integration Point
`NexStreamNavHost.kt` — Home route swapped from `NetflixHomeScreen` to `HomeScreenShell`.
`HomeScreenShell` defaults to `useTopBar = true`.