Skip to content

feat(mobile): classic root header that scrolls away into a title pill - #14757

Open
dylanjeffers wants to merge 1 commit into
mainfrom
feat/mobile-scroll-pill-header
Open

dylanjeffers wants to merge 1 commit into
mainfrom
feat/mobile-scroll-pill-header

Conversation

@dylanjeffers

Copy link
Copy Markdown
Contributor

Replaces the pinned glass pill bar from #14748 on the root tabs.

What changes

  • At rest: the root header is the pre-glass original again: avatar, gradient title, white background, controls on the right.
  • Scrolling: the header (and the controls row under it) moves with the list like normal content. Overscroll keeps the area above it filled.
  • Collapsed: once the title row leaves, a small glass pill with the screen name slides in under the status bar. The screen's controls sit below it in a small glass bar, and they slide in as the in-flow row leaves.
Tab Compact controls
Feed For You / Latest, filter on Latest
Trending Tracks / Underground / Winners, filter on Tracks
Explore none; pill shows a search icon. The header stays put while showing search results.
Library Tracks / Albums / Playlists pills (switch tabs)
Notifications none

Notes

  • Library: the category pills and the top tab bar now float over the tab lists through a custom tabBar. Each tab's banner and filter moved into the list header, and each tab keeps its own scroll offset (useLibraryTabChrome). Filtering with no results stays inside the list, so the input keeps focus.
  • Glass tint: GlassCapsule takes an optional tintColor. The compact pills use about 70% of the page color, because the clear material was hard to read over track titles.
  • Explore: the tab bar's search button scrolls back to the top before focusing the field.

Testing

  • Swapped a Release JS bundle into a Release build on an iOS 26.5 sim (signed in) and scrolled each of the five tabs: at rest, mid-collapse and collapsed. Also checked overscroll, tab switching from the compact Library pills, and dark mode on Notifications.
  • Not run on Android.

🤖 Generated with Claude Code

Root tab headers go back to the pre-glass look (avatar, gradient title,
white background) and scroll with the content. Once the title row is gone,
a small glass pill with the screen name pins under the status bar, with the
screen's controls in a small glass bar below it.

Applies to Feed, Trending, Explore, Library and Notifications.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Nov 7, 2026

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 401a3ec

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant