> For the complete documentation index, see [llms.txt](https://mango-5m.gitbook.io/mango5m-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mango-5m.gitbook.io/mango5m-docs/resources/mango-radio/features/the-station-browser.md).

# The Station Browser

The angled infotainment panel — full station list, hearts and now playing.

<figure><img src="https://3694989814-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F6edDnCRamvDxPx0AsLch%2Fuploads%2F6WavK2rQGedkE5XbpCB2%2Fmango_radio_showcase.png?alt=media&amp;token=e8030a6b-1aa8-4548-92ad-037553e1f096" alt=""><figcaption></figcaption></figure>

Press `G` in a vehicle and a panel slides in from the right, rotating into a resting pose angled slightly towards you.

## The layout

**Status strip** — the Mango Radio wordmark, a live clock and signal bars. The bars track the real broadcast signal and turn accent-coloured when a station drops out of range.

**Station header** — a black logo tile beside a banner carrying the station name and the current song and artist. With no track metadata it falls back to `Radio - <genre>`; with the radio off it shows a clean off state with a power glyph rather than pretending something is playing.

**Transport controls** — previous, play/pause, next. Previous and next step through the list (the Favourites page steps through favourites only). Play/pause turns the radio off and resumes the station you were last on.

**Station list** — the vivid accent body. Each row carries a heart, square artwork, the station name and its genre. The on-air station becomes a **white row with accent text**, gains a small equalizer, and shows the live song title in place of the genre.

**Icon toolbar** — accent arrows step stations, the heart and antenna switch pages, the power icon turns the radio off.

**Hint strip** — the keyboard legend and the close key.

## Keyboard by default

`keyboardNav` defaults to **true**, meaning the panel has no cursor at all. Nothing takes the mouse away from driving.

| Key         | Does                                              |
| ----------- | ------------------------------------------------- |
| `↑` `↓`     | Move the highlight — hold to scroll, accelerating |
| `↵`         | Tune to the highlighted station                   |
| `Q` `E`     | Previous / next station                           |
| `TAB`       | All Stations → Favourites → power button          |
| `SPACE`     | Pause / resume                                    |
| `F`         | Favourite the highlighted station                 |
| `G` / `ESC` | Close                                             |

`TAB` cycling onto the power button highlights it in the accent colour; `↵` there turns the radio off.

The highlighted row gets a white rail down its left edge. Holding `↑` or `↓` accelerates from roughly seven to twenty-two steps a second, and switches to snap scrolling at speed so the list keeps up.

## Cursor mode

Set `keyboardNav = false` for classic point-and-click: hover states, click any row to tune, click a heart to favourite, click outside the panel to close. In this mode the panel also tilts a degree or so following the mouse, which is disabled in keyboard mode since there is no cursor to follow.

## Genre artwork

A faint illustration sits behind the station list matching the genre of whichever station is focused, crossfading as you browse. See [Artwork and Colours](/mango5m-docs/resources/mango-radio/features/artwork-and-colours.md).

## Staying in sync

The browser and the carousel are two views of the same radio. Changing station in either — or from another script entirely — updates the other within half a second. The carousel hides itself while the browser is open so they never overlap.

While closed the panel is fully removed from layout, so it costs nothing.