feat: hang the Apple TV tab bar from the top as a notch with symbol tabs

Merged
BL
1d ago
+229-50

Problem and reproduction

The Apple TV tab bar was a floating glass capsule with every tab written out in full, sitting 27 points below the top of the screen. It took a lot of room over the spotlight and pages, and every tab competed for attention even when you weren't using the bar.

Implementation and impact

The bar now hangs from the top edge as a notch, and only shows what you need until you move up to it.

  • Notch: dark glass against the top of the screen, with sides that flare out slightly where they meet the edge, rounded bottom corners and a thin white outline on the sides and bottom only (TVTopMenuNotchShape, TVTopMenuNotchChrome). It's slimmer than the old capsule. TVTopMenuGlassChrome stays for the other capsule rows that use it.
  • Collapsed off focus: while focus is below the bar, it shows only Search, the selected tab's name and the avatar.
  • Symbols in the bar: once the bar has focus, the other tabs come back as symbols, the same ones as on iPhone and iPad (Root.symbol reuses AppTab and PrimaryMenuBuiltin). Only the focused tab shows its name, so the selected tab closes to its symbol when focus moves to another one.
  • Highlight: the focused or selected pill is a white outline with a faint fill instead of a solid white pill with black text. It's one shape (matchedGeometryEffect) that glides between Search and the tabs. Search uses it too instead of its solid white circle; the avatar keeps its white ring.
  • Smooth motion: the tabs used to draw straight from @FocusState, so the tab gaining focus opened without animation while the one losing it closed with one, and moving right jumped. The bar now follows focus through shownFocus, set inside one spring animation, so every tab, the highlight and the notch move together. Symbol and name fade one after the other so they never overlap.
  • Choosing a tab: the bar closes around the chosen tab over 0.16 seconds and the page opens 0.19 seconds after the press. Closing while the page was being built made the close stutter, and every delay I tried the other way round was either laggy or slow. Choosing the tab you're already on, and Reduce Motion, open the page straight away. The delayed open is cancellable: moving focus, pressing Menu, the bar losing focus, or a page or the player opening from elsewhere (such as a Siri search) in that gap drops the choice, so it can't pop Search or Settings or overwrite Home.
  • Pages: VividTheme.Skyline.barTopInset goes from 27 to 0 and the pages' offsets under it come down by 10, so Home, Movies, Series, For You and Calendar start 37 points higher. The Home spotlight grows from 748 to 785 points to fill the space, so its bottom edge and the rows below stay where they were.

Apple TV only. iOS, the tabs' order and visibility settings, VoiceOver labels (every tab still reads its name) and the avatar's behaviour are unchanged.

Validation

  • xcodebuild build -scheme VividTV for the Apple TV 4K (3rd generation) tvOS 27.0 simulator with local ad hoc signing, at each step: succeeded. Launched each build and confirmed it stayed running with no crash report.
  • Release build for a physical Apple TV 4K (3rd generation), installed with devicectl and launched, at each of the later commits up to 201ede18: succeeded.
  • Recorded the simulator at 60 fps and checked focus moves frame by frame. This is how I found the jump moving right, and confirmed the highlight and widths now animate together.
  • No automated tests added; this is UI motion and layout.

Performance

No benchmark run. Focus moves change one piece of state inside one animation, and the page build is deliberately kept out of the frames where the bar closes.

Testing status

  • Tested? Yes.
  • Environment: Physical Apple TV 4K (3rd generation), and the Apple TV 4K (3rd generation) simulator on tvOS 27.0.
  • Revision: 201ede18 on device. Later commits change docs and make the delayed tab open cancellable; that fix compiles but hasn't been on the TV yet.
  • Checks and results: I tried the bar on the TV through each round: moving along the tabs both ways, moving down to the page and back, and choosing tabs. Motion is smooth both ways and the close on choosing a tab is smooth.
  • Limitations: Not checked on a TV that crops the edges (overscan), where the notch against the top edge could clip. Not checked with Reduce Motion on, or on the 1080p simulator. Opening a title from the taller spotlight, and its zoom transition, weren't specifically checked.

Design impact and approval

  • Design impact: Yes. New tab bar shape, position, symbol tabs, collapsed state, outlined highlight, Search's highlight, and a taller spotlight with pages moved up.
  • Approval from blurbery: My own design, worked through and approved on device in this round of changes.

Documentation impact

  • docs/apple-tv-browsing.md: the tab bar paragraph (notch, symbols, collapse, highlight, motion and close timing) and the spotlight's height.

  • docs/app-design.md: the spotlight's height and the bar's description.

  • docs/apple-tv-focus.md: the spotlight's fixed height.

  • I checked the docs this change affects and updated them in this PR, or explained above why none needed changes.

AI disclosure

I implemented these changes and used Claude Opus as a tool.