Skip to content

fix(mobile): Android Back uses the Material arrow - #2358

Merged
DoodleBears merged 8 commits into
mainfrom
claude/project-thread-m7tsnr-appbar
Oct 21, 2026
Merged

DoodleBears merged 8 commits into
mainfrom
claude/project-thread-m7tsnr-appbar

Conversation

@DoodleBears

@DoodleBears DoodleBears commented Oct 19, 2026 •

Copy link
Copy Markdown
Contributor

Requested by Vain · project thread

Why the change

On Android, Back in the chat header and in drawer and sheet headers drew the iOS chevron instead of the Material arrow_back.

Refs: M3 app bars, #2339, #2338.

Special things to note

  • Merge risk: two-way door, revert the squash commit; small blast radius, JS only and Android only, iOS rendering unchanged.
  • Scope reduced on 2026-10-21 when merging main: feat(mobile): float the Android chat header and mask both chat edges like iOS #2394 made the Android chat header float with frosted round shapes (headerGlassFill, frosted raised with a hairline), and that was QA'd on the phone. The filled tonal header buttons from this PR would have replaced that look, so they were dropped. This PR now only swaps the Back icon. DESIGN.md and the change fragment say the same.
  • Verification: mobile tsc --noEmit, oxfmt --check and vitest apps/mobile (134 files passed, 7 skipped) after merging main. The new back-icon-android.test.tsx checks the Android arrow and the iOS chevron.
  • CI test plan: affected (mobile only).

Change outline

  • BackIcon (shell/back-icon.tsx / .android.tsx): a chevron on iOS, Material arrow_back on Android. It is used by the chat header's round Back button and by DrawerHeader, which covers every drawer and sheet header.
  • Activity detail's previous/next chevrons are unchanged, because they are paging, not Back.

Screenshots

Physical phone: Xiaomi, Android 16 / HyperOS 3, gesture navigation, Chinese UI. Files are in .github/pr-screenshots/2358-android-appbar/phone/ on this branch (Files changed).

Light Dark Text size 2.0
Chat app bar chat-appbar-light.png chat-appbar-dark.png chat-appbar-font.png
Drawer subpage drawer-subpage-light.png drawer-subpage-dark.png drawer-subpage-font.png

The chat app bar shots predate #2394's floating header, so they show an opaque bar; on main the arrow sits in #2394's round frosted Back button. The drawer subpage shots are current. A fresh chat-header shot is queued with the next phone run.

🤖 Generated with Claude Code

https://claude.ai/code/session_01QbudM552v4qrLMzopz7j7k

…ttons

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SJ8gcMTgoRjSRBNFswZT9T
@coderabbitai

coderabbitai Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

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 22 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: 4e23491f-6a1b-4cfd-be12-07a08d294f15
📥 Commits

Reviewing files that changed from the base of the PR and between 28d81b5 and 070acb1.

⛔ Files ignored due to path filters: 6
  • .github/pr-screenshots/2358-android-appbar/phone/chat-appbar-dark.png is excluded by !**/*.png
  • .github/pr-screenshots/2358-android-appbar/phone/chat-appbar-font.png is excluded by !**/*.png
  • .github/pr-screenshots/2358-android-appbar/phone/chat-appbar-light.png is excluded by !**/*.png
  • .github/pr-screenshots/2358-android-appbar/phone/drawer-subpage-dark.png is excluded by !**/*.png
  • .github/pr-screenshots/2358-android-appbar/phone/drawer-subpage-font.png is excluded by !**/*.png
  • .github/pr-screenshots/2358-android-appbar/phone/drawer-subpage-light.png is excluded by !**/*.png
📒 Files selected for processing: 8
  • apps/mobile/DESIGN.md
  • apps/mobile/src/ui/chat/header-chrome.tsx
  • apps/mobile/src/ui/primitives/drawer-header.tsx
  • apps/mobile/src/ui/shell/back-icon.android.tsx
  • apps/mobile/src/ui/shell/back-icon.tsx
  • apps/mobile/src/ui/shell/icons.tsx
  • apps/mobile/test/back-icon-android.test.tsx
  • changes/2358-android-back-arrow.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

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

claude and others added 5 commits October 19, 2026 21:38
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SJ8gcMTgoRjSRBNFswZT9T
…-m7tsnr-appbar

# Conflicts:
#	apps/mobile/DESIGN.md
#	apps/mobile/src/ui/primitives/sheet-stack.tsx
Captured on a Xiaomi phone (Android 16, HyperOS 3, arm64, gesture navigation,
zh-CN) running an arm64 debug dev client of main 48f35fb with this branch's
JavaScript, in light, dark and font scale 2.0. Chat top bar with the Material back arrow and tonal buttons, and a drawer subpage back arrow.
Status bar and computer names are redacted.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SJ8gcMTgoRjSRBNFswZT9T
Retaken on the Xiaomi phone (Android 16, HyperOS 3, zh-CN) with this branch's
latest JavaScript (27e17cd) on an arm64 debug dev client of main 4c02815, in
light, dark and font scale 2.0. Replaces chat-appbar-{light,dark,font}.png only.
Status bar redacted.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@DoodleBears
DoodleBears marked this pull request as ready for review October 20, 2026 08:35
DoodleBears and others added 2 commits October 20, 2026 18:04
Retaken on the Xiaomi phone (Android 16, HyperOS 3, zh-CN) with this branch's
latest JavaScript (0c68476) on an arm64 debug dev client of main d32694a, in
light, dark and font scale 2.0. Replaces chat-appbar-{light,dark,font}.png only. Status bar and
computer names redacted.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Keep main's floating Android header fill (#2394); this PR now only swaps
Back to the Material arrow.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QbudM552v4qrLMzopz7j7k
@DoodleBears DoodleBears changed the title fix(mobile): Android Back uses the Material arrow and tonal header buttons fix(mobile): Android Back uses the Material arrow Oct 21, 2026
@DoodleBears
DoodleBears merged commit 38f5dca into main Oct 21, 2026
11 checks passed
@DoodleBears
DoodleBears deleted the claude/project-thread-m7tsnr-appbar branch October 28, 2026 04:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants