[DoodleBears]

Requested by Vain · project thread

Why the change

The header buttons on Chats (Search, Settings) and Activity (Filter, Search) were drawn grey circles on both platforms. They should be each platform's native control.

Issue / Discussion: none (requested in the project thread).

Special things to note

• Merge risk: low. Header buttons on Chats and Activity, plus the Android search back/clear buttons, which share the same icon button. iOS < 26 keeps the raised circles. No native config change: @expo/ui SwiftUI is already in the dev build (it's used by NavigationAction), so a Metro reload is enough.
• Coordination with fix(mobile): drop the frosted header band and inset Back before iOS 26 #2466: that PR changes the conversation header before iOS 26. This one touches only the Chats and Activity headers, and no files are shared.
• Verification: new test/header-action.test.tsx covers four cases. On iOS 26 the buttons are glass SwiftUI buttons with the right SF Symbols and testIDs. On iOS 18 they fall back to the raised buttons. An active filter is marked selected on both paths. The full mobile vitest suite, tsc --noEmit, pnpm lint and oxfmt --check all pass.
• Not yet run: native screenshots (iOS 27 light, dark and AX5 with taps; Android light and dark). Vain asked to merge first and test this change in a combined batch, with screenshots added afterwards. iOS 18 isn't covered because there's no iOS 18 Simulator and the XS Max is busy with Mobile DM holds 120 FPS in a Release build while streaming and scrolling history #1845.
• New testIDs: activity-filter-button, activity-search-button. settings-button and search-button are unchanged.
• CI test plan: affected (mobile only).

Change outline

• New HeaderAction (src/ui/shell/header-action{,.ios}.tsx), with icon set to filter, search or settings and an optional active:
  • iOS 26+: a SwiftUI Button with buttonStyle('glass'), circle shape and SF Symbols. When active, it uses the accent foreground and the isSelected trait.
  • iOS < 26 and Android: HeaderIconButton with the RN glyph (accent when active, accessibilityState.selected).
• HeaderIconButton (header-icon-button{,.android}.tsx): the default is the existing raised circle. On Android it's a Material 3 standard icon button (no container, 40dp circular ripple, 48dp target). New token materialIconButton.container.
• Removed SettingsButton, HeaderSearchButton and ActivityIconButton.
• Updated DESIGN.md (Chats header, Activity query controls) and added a bilingual changes/ fragment.

🤖 Generated with Claude Code

https://claude.ai/code/session_012p4JA6z94Erp3Jy4JciiuD

[coderabbitai]

Warning

Review limit reached

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

Next included review available in 12 minutes.

Check out review usage here.

View limit details

Limit details: You’ve used all 2 included reviews currently available.

Learn how review limits work.

Review configuration:

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 25fe7202-a6fb-4b8f-9238-e149c8219250

📥 Commits

Reviewing files that changed from the base of the PR and between 2d0bf6e and 12e6de4.

📒 Files selected for processing: 12

• apps/mobile/DESIGN.md
• apps/mobile/app/(tabs)/(home)/index.tsx
• apps/mobile/src/ui/design/tokens.ts
• apps/mobile/src/ui/shell/activity-toolbar-base.tsx
• apps/mobile/src/ui/shell/header-action.ios.tsx
• apps/mobile/src/ui/shell/header-action.tsx
• apps/mobile/src/ui/shell/header-glyph.tsx
• apps/mobile/src/ui/shell/header-icon-button.android.tsx
• apps/mobile/src/ui/shell/header-icon-button.tsx
• apps/mobile/src/ui/shell/header-search.tsx
• apps/mobile/test/header-action.test.tsx
• changes/2487-mobile-native-header-buttons.md

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[DoodleBears]

Device check (combined batch on main 5c26b5a, Release, QA iOS 27 Simulator)

• Light and dark: PASS. Chats Search/Settings and Activity Filter/Search are glass circles with SF Symbols. With a filter applied (Newest first), Filter turns accent blue.
• AX5: FAIL on 5c26b5a. The glyphs scale with Dynamic Type but the circles don't, so they overflow. The fix is fix(mobile): cap header glass button symbols at xxxLarge Dynamic Type #2502 (merged as 77ddca9); a re-check on that build will follow.

Chats light	Chats dark	Activity filtered light	Activity filtered dark	Chats AX5 (before #2502)

Not covered: iOS 18 and Android.

---

Generated by Claude Code

[DoodleBears]

Android phone result: PASS (Xiaomi, Android 16 / HyperOS 3, store build from main a0701f3 with #2487 and #2502, installed over the existing app, isolated QA Host)

Screenshots: 2487-android/phone (commit b0c6729): {light,dark,font}-{chats,activity}.png, notes.md

• Chats (search, settings) and Activity (filter, search) header buttons render in light, dark and max font (font scale 2.0). They are aligned with the title.
• At max font, the title and tabs grow while the button icons keep their size.

---

Generated by Claude Code