feat(mobile): Material 3 navigation bar and creation FAB menu on Android by DoodleBears · Pull Request #2350 · BotHarness/DeepSeekBot

DoodleBears · 2026-10-19T20:37:48Z

🤖 Generated with Claude Code

https://claude.ai/code/session_01SJ8gcMTgoRjSRBNFswZT9T

Why the change

Android drew the iOS-style floating island with a round + next to it. Material 3 uses a docked navigation bar and a FAB for the screen's main create action.

Before: on Android, the tabs sat in a floating rounded island, and a separate circle + opened a create panel in the island's place.

After: on Android, a docked full-width M3 flexible navigation bar is 64dp tall, edge to edge, with a 56×32 pill indicator, 4dp icon–label gap and 12sp labels. Chats shows a 56dp FAB with 16dp corners at the bottom right, 16dp above the navigation bar. It opens an M3 FAB menu: the FAB turns into a round close button, and New channel, New Bot and Join stack above it as full-pill items. iOS is unchanged.

Refs #2339, #2338. Builds on #2333 (now in main), whose Activity badge rule is kept: a capped count replaces the bell when Activity is not selected and something is pending, and they never appear together.

Special things to note

Main is merged in. Main moved Chats search into the header (feat(mobile): move Chats search into the header #2377) and removed the bottom search field, so this PR no longer touches it and the FAB now sits 16dp above the navigation bar.
Merge risk: two-way door, revert the squash commit; medium blast radius, every Android screen shows the bottom bar, and creation moves from the island + to the Chats FAB. Android-only presentation in bottom-navigation.tsx (Platform branch), navigation-destinations.tsx / navigation-icon.android.tsx, the new creation-panel.android.tsx. The shared creation state moved to creation-menu.ts, so iOS uses the same logic.
Why not Compose: Expo UI 58's NavigationBar wraps only the baseline 80dp bar, which m3.material.io marks "not recommended", and it has no FAB menu. Both are RN views built to the official token values (md.comp.nav-bar.*, md.comp.fab.*, md.comp.fab-menu.*). This is recorded in DESIGN.md and as an amendment to ADR-0235.
Default chosen: the FAB shows on Chats only. The Activity tab has no create action.
The text size 2.0 Activity tab wrap seen in activity-font.png ("待你处 / 理") is fixed on main by its own change, so this PR no longer carries a fix for it.
Verification after the latest main merge: pnpm lint (including CLI parity), pnpm format:check, root and mobile tsc --noEmit, vitest apps/mobile (144 files passed, 7 skipped). creation-fab-menu-android.test.tsx runs the creation-panel cases against the Android FAB menu, plus a Back step.
CI test plan: affected.

Change outline

tokens.ts: materialNavigationBar and fab (from the m3.material.io token tables).
bottom-navigation.tsx: Android docked bar and FAB; shared items, create and panel.
creation-panel.android.tsx: FAB menu. creation-menu.ts: shared label and step logic.
DESIGN.md Tabs section and the ADR-0235 amendment.

Physical phone: Xiaomi, Android 16 / HyperOS 3, gesture navigation, Chinese UI. Debug dev client built from main 48f35fb with this branch's JS over Metro, paired to an isolated QA Host. Status bar and computer names redacted. Files are in .github/pr-screenshots/2350-android-navbar/phone/ on this branch (Files changed).

	Light	Dark	Text size 2.0
Chats: bar and FAB	`chats-light.png`	`chats-dark.png`	`chats-font.png`
FAB menu open	`fab-menu-light.png`	`fab-menu-dark.png`	`fab-menu-font.png`
Activity: no FAB	`activity-light.png`	`activity-dark.png`	`activity-font.png`

Chats and FAB menu retaken on 31a89dc0 after the main merge: search is the header 🔍 left of ⚙, and the FAB sits 16dp above the navigation bar, in light, dark and text size 2.0.

Result: PASS. Chats shows the docked bar and the FAB; the FAB menu opens with New channel, New Bot and Join; Activity has no FAB.

Generated by Claude Code

Summary by CodeRabbit

New Features
- Android now uses a full-width Material 3 bottom navigation bar with improved indicators, spacing, elevation, ripples, safe-area support, and text scaling.
- Chats now includes a floating action button for creating channels and Bots.
- Added a guided creation menu with target selection, back navigation, dismissal, loading states, and error handling.
- Cloud-unavailable states no longer show the join action.
Documentation
- Added release notes and documentation describing the Android Material 3 navigation and creation experience.

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

coderabbitai · 2026-10-19T20:37:55Z

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

Configuration used: defaults
Review profile: CHILL
Plan: Advanced
Run ID: 8862b46a-2f9f-4199-a169-852ffeae55ce

📥 Commits

Reviewing files that changed from the base of the PR and between 3c9ddb3 and bd7e35c.

⛔ Files ignored due to path filters: 9

.github/pr-screenshots/2350-android-navbar/phone/activity-dark.png is excluded by !**/*.png
.github/pr-screenshots/2350-android-navbar/phone/activity-font.png is excluded by !**/*.png
.github/pr-screenshots/2350-android-navbar/phone/activity-light.png is excluded by !**/*.png
.github/pr-screenshots/2350-android-navbar/phone/chats-dark.png is excluded by !**/*.png
.github/pr-screenshots/2350-android-navbar/phone/chats-font.png is excluded by !**/*.png
.github/pr-screenshots/2350-android-navbar/phone/chats-light.png is excluded by !**/*.png
.github/pr-screenshots/2350-android-navbar/phone/fab-menu-dark.png is excluded by !**/*.png
.github/pr-screenshots/2350-android-navbar/phone/fab-menu-font.png is excluded by !**/*.png
.github/pr-screenshots/2350-android-navbar/phone/fab-menu-light.png is excluded by !**/*.png

📒 Files selected for processing: 11

apps/mobile/DESIGN.md
apps/mobile/src/ui/design/tokens.ts
apps/mobile/src/ui/shell/bottom-navigation.tsx
apps/mobile/src/ui/shell/creation-menu.ts
apps/mobile/src/ui/shell/creation-panel.android.tsx
apps/mobile/src/ui/shell/creation-panel.tsx
apps/mobile/src/ui/shell/navigation-destinations.tsx
apps/mobile/src/ui/shell/navigation-icon.android.tsx
apps/mobile/test/creation-fab-menu-android.test.tsx
changes/2350-android-m3-navigation.md
docs/adr/0235-mobile-creation-shares-the-existing-tab-navigator.md

+----------------------------------------+
| C*deR*bb*t: The uncensored bug hunter. |
+----------------------------------------+
  \
   \   (\__/)
       (•ㅅ•)
       / 　 づ

✨ Finishing Touches

📝 Generate docstrings

Commit to this branch
Create a new PR

🧪 Generate unit tests (beta)

Commit to this branch
Create a new PR

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.}

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

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. Chats with the new navigation bar and FAB, the FAB menu open, and Activity without a FAB. Status bar and computer names are redacted. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

Main moved Chats search into the header, so the bottom search field is gone. The Android FAB now sits 16dp above the navigation bar. 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 (d440cc8) on an arm64 debug dev client of main d32694a, in light, dark and font scale 2.0. Replaces chats-* and fab-menu-* (light, dark, font) only. Status bar and computer names redacted. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

…-m7tsnr-navbar

At text size 2.0 the Activity tabs broke words across lines (待你处 / 理). Android now keeps each label on one line, as Material 3 tabs do, and shrinks it to the navigation bar's label scale floor. iOS still wraps. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QbudM552v4qrLMzopz7j7k

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

Root tsc includes apps/mobile/test/*.ts, and this test's react-native shim pulled DOM timer types into the packages. Mobile tests that use the shim are .tsx, which the root config excludes. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QbudM552v4qrLMzopz7j7k

Main already keeps Activity tab labels on one line at large text, so this PR drops its own Android-only version of that fix. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QbudM552v4qrLMzopz7j7k

feat(mobile): Material 3 navigation bar and creation FAB menu on Android

6926f0f

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

claude and others added 2 commits October 19, 2026 20:37

chore(mobile): add #2350 change fragment

7af2d63

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

DoodleBears marked this pull request as ready for review October 20, 2026 07:38

claude and others added 7 commits October 20, 2026 07:57

Merge remote-tracking branch 'origin/main' into claude/project-thread…

842c3e5

…-m7tsnr-navbar

Merge origin/main into claude/project-thread-m7tsnr-navbar

8e84bdb

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

DoodleBears merged commit 4eec844 into main Oct 21, 2026
10 of 11 checks passed

DoodleBears deleted the claude/project-thread-m7tsnr-navbar branch October 28, 2026 04:24

Navigation Menu

Repository navigation

feat(mobile): Material 3 navigation bar and creation FAB menu on Android - #2350

feat(mobile): Material 3 navigation bar and creation FAB menu on Android#2350
DoodleBears merged 10 commits into
mainfrom
claude/project-thread-m7tsnr-navbar

DoodleBears commented Oct 19, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Oct 19, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

DoodleBears commented Oct 19, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why the change

Special things to note

Change outline

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Oct 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

DoodleBears commented Oct 19, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Oct 19, 2026 •

edited

Loading