Skip to content

feat(mobile): Android drops the rail, bottom bar, and rounded sheets for a denser layout - #19424

Open
t3dotgg wants to merge 5 commits into
mainfrom
t3/improve-foldable-android-layout
Open

t3dotgg wants to merge 5 commits into
mainfrom
t3/improve-foldable-android-layout

Conversation

@t3dotgg

@t3dotgg t3dotgg commented Oct 14, 2026 •

Copy link
Copy Markdown
Member

On Android, and especially on foldables, the app wasted a lot of space:

  • An 80dp navigation bar or rail held only two tabs (Chats, PRs).
  • New thread and Filter floated over the thread list.
  • Content sat in a rounded, inset sheet under the header.
  • The thread title stayed on screen while you read history.

With the keyboard open in split view, the chat feed got about two lines.

Navigation

  • The bottom bar and the split-view rail are both gone. A small Chats/PRs icon switch takes the brand slot in the list header, on phones and in split view.
  • In split view, search, filter, settings, and a filled New thread button sit in the sidebar header, and nothing floats over the list. The sidebar is at least 304dp wide, so the row fits, and it wraps with large text. Phones keep the New thread and Filter FABs.

Surfaces

  • Content is flat under the header. The rounded top corners and 4dp gutters are gone.
  • On screens wider than a phone (Fold portrait, or typing with the sidebar hidden), the feed, composer, and full-width thread list stop at a 640dp reading width and center.

Threads

  • The thread toolbar collapses while you scroll back into history. It returns at the latest message.
  • In split view, while the composer has the soft keyboard:
    • The sidebar steps aside, and the header drops to one line.
    • The composer stays one row and grows with the text (36–160dp). The model picker is in the row, and attachments show above it with their remove buttons.
    • The Working timer moves into the composer row.

iOS is unchanged.

Before After
Split view Before: rail, rounded panes, floating New thread and Filter After: header switch and actions, flat panes
Keyboard open, turn running Before: sidebar cut off, card composer, about two lines of feed After: full-width feed, one-line header, one-row composer with model and timer
Phone, scrolled into history After: no bottom bar, header switch After: thread toolbar collapsed while reading history

Verification

Pixel Fold emulator (API 36), dark mode, showcase data, release preview build:

  • Split view and portrait (compact): the switch, search, filter menu, settings, and New thread all work. There is no bottom bar, and the surfaces are flat.
  • Composer focus hides the sidebar. Back and the sidebar button bring it back. The draft grows with the model and send buttons still in the row. Attachments can be removed.
  • Scrolling into history collapses the thread toolbar. Scroll-to-end restores it.
  • A running Codex turn shows "Working Ns" in the composer row while focused.
  • vp test run for lib/layout.test.ts (new sidebar-width case) and the navigation color tests. Mobile typecheck and lint on the changed files are clean.

Notes

  • #18686 also removes the rail, and #18547 keeps content rounded. This PR goes the other way on both.
  • With the fold closed while a thread is open, the composer can still overflow on the right. That is the existing bug fixed by #18574.

Reviewed with sol-loop: 5 rounds with GPT-6.1-Sol on high.

Created with Claude Opus 5.5 in Claude Code, running in T3 Code.

🤖 Generated with Claude Code

@github-actions github-actions Bot added vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. size:XL 500-999 changed lines (additions + deletions). labels Oct 14, 2026
@juliusmarminge juliusmarminge added the macroscope-review Opt PRs made by unvouched contributors in for Macroscope review. Vouched contributors auto-reviews label Oct 14, 2026
Comment thread apps/mobile/src/features/threads/ThreadComposer.tsx Outdated
@macroscopeapp

macroscopeapp Bot commented Oct 14, 2026 •

Copy link
Copy Markdown
Contributor

Approvability

Verdict: Needs Human Approval

Macroscope's review found this PR not approvable — This PR changes the default Android workspace experience across navigation, pane sizing, surfaces, headers, thread history, and composer/keyboard interactions. The breadth of production behavior and removal of existing navigation chrome require human review.

You can add or adjust custom eligibility rules. Learn more.

@github-actions

github-actions Bot commented Oct 14, 2026 •

Copy link
Copy Markdown
Contributor

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider Metric Main baseline This PR Impact PR ceiling
Codex Total thread wire 5.0 KiB 4.9 KiB −23 B (−0.5%) 6.8 KiB ✅
Codex Thread snapshot wire 3.8 KiB 3.8 KiB 0 B (0.0%) 4.9 KiB ✅
Codex Live turn WebSocket wire 1.2 KiB 1.2 KiB −23 B (−1.9%) 2.0 KiB ✅
Codex Live turn WebSocket decoded 20.9 KiB 20.8 KiB −41 B (−0.2%) 29.3 KiB ✅
Codex Live turn messages 2 1 −1 (−50.0%) 8 ✅
Claude Total thread wire 5.0 KiB 5.0 KiB 0 B (0.0%) 6.8 KiB ✅
Claude Thread snapshot wire 3.8 KiB 3.8 KiB 0 B (0.0%) 4.9 KiB ✅
Claude Live turn WebSocket wire 1.2 KiB 1.2 KiB 0 B (0.0%) 2.0 KiB ✅
Claude Live turn WebSocket decoded 21.2 KiB 21.2 KiB 0 B (0.0%) 29.3 KiB ✅
Claude Live turn messages 2 2 0 (0.0%) 8 ✅

Baseline: 00cdceb · PR result: 75baac4 · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

  • Codex decoded thread snapshot: 108.5 KiB
  • Claude decoded thread snapshot: 108.8 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

@coderabbitai

coderabbitai Bot commented Oct 14, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Path: .coderabbit.config.ts
  • Review profile: CHILL
  • Plan: Team
  • Run ID: 857a0876-df4e-46f1-afc5-346405caff91
📥 Commits

Reviewing files that changed from the base of the PR and between 9e5e520 and 75baac4.

📒 Files selected for processing: 30
  • apps/mobile/modules/t3-native-controls/android/src/main/java/expo/modules/t3nativecontrols/T3WorkspaceNavigationModule.kt
  • apps/mobile/modules/t3-native-controls/android/src/main/res/drawable/t3_chats.xml
  • apps/mobile/modules/t3-native-controls/android/src/main/res/drawable/t3_pull_requests.xml
  • apps/mobile/modules/t3-native-controls/expo-module.config.json
  • apps/mobile/src/components/AndroidScreenHeader.tsx
  • apps/mobile/src/components/MaterialScreenContent.tsx
  • apps/mobile/src/components/ScreenHeader.android.tsx
  • apps/mobile/src/components/ScreenHeader.types.ts
  • apps/mobile/src/features/files/ThreadFilesRouteScreen.tsx
  • apps/mobile/src/features/files/thread-file-navigator-pane.tsx
  • apps/mobile/src/features/home/HomeScreen.tsx
  • apps/mobile/src/features/home/MaterialThreadListToolbar.tsx
  • apps/mobile/src/features/pull-requests/MaterialPullRequestToolbar.android.tsx
  • apps/mobile/src/features/pull-requests/PullRequestRouteScreen.tsx
  • apps/mobile/src/features/review/ReviewSheet.tsx
  • apps/mobile/src/features/threads/ThreadAgentsSheet.tsx
  • apps/mobile/src/features/threads/ThreadDetailScreen.tsx
  • apps/mobile/src/features/threads/ThreadHeader.tsx
  • apps/mobile/src/features/threads/ThreadNavigationSidebar.tsx
  • apps/mobile/src/features/threads/ThreadQueueControl.tsx
  • apps/mobile/src/features/threads/ThreadRouteScreen.tsx
  • apps/mobile/src/features/threads/git/GitOverviewSheet.tsx
  • apps/mobile/src/features/workspace/AndroidWorkspaceNavigation.android.tsx
  • apps/mobile/src/features/workspace/AndroidWorkspaceNavigation.tsx
  • apps/mobile/src/features/workspace/AndroidWorkspaceSidebar.android.tsx
  • apps/mobile/src/features/workspace/AndroidWorkspaceTabSwitch.tsx
  • apps/mobile/src/features/workspace/WorkspaceRootScreen.android.tsx
  • apps/mobile/src/features/workspace/android-workspace-navigation-colors.test.ts
  • apps/mobile/src/features/workspace/android-workspace-navigation-colors.ts
  • apps/mobile/src/lib/layout.ts
💤 Files with no reviewable changes: 7
  • apps/mobile/modules/t3-native-controls/android/src/main/res/drawable/t3_chats.xml
  • apps/mobile/modules/t3-native-controls/android/src/main/res/drawable/t3_pull_requests.xml
  • apps/mobile/src/features/workspace/AndroidWorkspaceNavigation.android.tsx
  • apps/mobile/modules/t3-native-controls/android/src/main/java/expo/modules/t3nativecontrols/T3WorkspaceNavigationModule.kt
  • apps/mobile/modules/t3-native-controls/expo-module.config.json
  • apps/mobile/src/features/workspace/AndroidWorkspaceNavigation.tsx
  • apps/mobile/src/features/threads/ThreadNavigationSidebar.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 8 remain after this review.

📝 Walkthrough

Android workspace navigation now uses Chats and Pull requests tabs in list headers. Split-view layout accounts for list width and composer keyboard state. The composer supports a focused inline layout, and Android thread headers and content surfaces have updated layout behavior.

Changes: Android workspace and thread layout

Layer / File(s) Summary
Workspace tabs and split-view layout
apps/mobile/src/features/workspace/*, apps/mobile/src/features/layout/AdaptiveWorkspaceLayout.tsx, apps/mobile/src/lib/layout.ts, apps/mobile/src/lib/layout.test.ts, apps/mobile/src/features/home/*, apps/mobile/src/features/pull-requests/MaterialPullRequestToolbar.android.tsx, apps/mobile/src/features/threads/ThreadNavigationSidebar.tsx, apps/mobile/modules/t3-native-controls/...
Workspace tabs appear in the Chats and Pull requests headers. Tab selection dismisses the keyboard and resets navigation when the selected tab changes. Split-view sizing supports an Android list-pane minimum width, and sidebar behavior responds to composer editing and soft-keyboard visibility. The former native navigation bar and rail implementation is removed.
Focused split-view composer
apps/mobile/src/features/threads/ThreadComposer.tsx, apps/mobile/src/native/T3ComposerEditor*
The focused Android split-view composer can remain inline and resize based on measured editor content. It shares attachment and model-picker rendering with the card layout and can display the active-work timer.
Thread status and header state
apps/mobile/src/components/AndroidScreenHeader.tsx, apps/mobile/src/components/ScreenHeader*, apps/mobile/src/components/useMaterialToolbarLayout.ts, apps/mobile/src/features/threads/ThreadDetailScreen.tsx, apps/mobile/src/features/threads/ThreadHeader.tsx, apps/mobile/src/features/threads/ThreadRouteScreen.tsx
Thread detail reports reading-history state and passes the working status start time to the composer under the Android split-layout condition. Android headers support compact and collapsed modes with layout and visibility transitions.
Android content sizing and surfaces
apps/mobile/src/components/MaterialScreenContent.tsx, apps/mobile/src/features/home/HomeScreen.tsx, apps/mobile/src/features/files/*, apps/mobile/src/features/pull-requests/PullRequestRouteScreen.tsx, apps/mobile/src/features/review/ReviewSheet.tsx, apps/mobile/src/features/threads/*, apps/mobile/src/features/workspace/AndroidWorkspaceSidebar.android.tsx
Android home and thread content use configured width constraints. Material content and several route containers no longer apply split-view insets, rounded top corners, or clipping where those styles were removed.

Priority: ➖ Normal

Estimated code review effort: 4 (Complex) | ~45 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant ThreadComposer
  participant AdaptiveWorkspaceLayout
  participant KeyboardState
  participant ThreadNavigationSidebar
  ThreadComposer->>AdaptiveWorkspaceLayout: report composer editing state
  KeyboardState->>AdaptiveWorkspaceLayout: report soft-keyboard visibility
  AdaptiveWorkspaceLayout->>ThreadNavigationSidebar: suppress sidebar when split-view composer editing and keyboard are active
Loading

Suggested reviewers: juliusmarminge, pixpmusic

Merge Risk: ⚪ Minimal · up to 75baa

This Android layout refactor shows no concrete merge-blocking risk in the supplied context. Normal manual verification on foldable devices is still advisable.

Pre-merge checks: Passed 3 · Failed 1

Failed Failed checks: 1 warning

Check name Status Explanation Resolution
Description check Warning The description explains the problem, implementation, verification steps, and includes UI evidence. However, it does not provide the required Scope and approval section with a triaged issue or explici… Add a Scope and approval section with the relevant triaged issue or discussion and explicit maintainer approval, or explain why this focused change qualifies for an exemption. Add Problem and Change headings to match the repository template…
Passed Passed checks: 3 passed
Check name Status Explanation
Title check Passed The title clearly summarizes the main Android changes: removing the rail, bottom bar, and rounded sheets to create a denser layout.
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Full details: Description check

Explanation

The description explains the problem, implementation, verification steps, and includes UI evidence. However, it does not provide the required Scope and approval section with a triaged issue or explicit maintainer approval. The Problem and Change content is also not labeled with the template headings.

Resolution

Add a Scope and approval section with the relevant triaged issue or discussion and explicit maintainer approval, or explain why this focused change qualifies for an exemption. Add Problem and Change headings to match the repository template.

  • Fix all pre-merge checks with AI
✨ 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

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

t3dotgg and others added 4 commits October 15, 2026 04:05
Split view on Android loses the 80dp navigation rail. The sidebar header now
holds the Chats/PRs switch, search, filter, settings, and New thread, so no
buttons float over the thread list.

While the thread composer has the soft keyboard in split view, the sidebar
steps aside, the header drops to one line, the composer stays one row (with
the model picker and turn timer), and the Working pill stops taking feed
height. Folded phones keep the bottom bar and FABs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…llapsing thread title

- Content no longer sits in a rounded, inset sheet under the header.
- The Chats/PRs switch replaces the brand on compact screens too, so the
  80dp bottom navigation bar (and its native view) is gone.
- The thread toolbar collapses while the feed is scrolled back into
  history and returns at the latest message.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@t3dotgg
t3dotgg force-pushed the t3/improve-foldable-android-layout branch from 9e5e520 to 9d6fa01 Compare October 15, 2026 11:06
@t3dotgg t3dotgg changed the title feat(mobile): Android foldables swap the rail and floating buttons for a sidebar header feat(mobile): Android drops the rail, bottom bar, and rounded sheets for a denser layout Oct 15, 2026
@github-actions github-actions Bot added size:XXL 1,000+ changed lines (additions + deletions). and removed size:XL 500-999 changed lines (additions + deletions). labels Oct 15, 2026
…list at a reading width

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

Copy link
Copy Markdown
Contributor

I feel a bit responsible for the current state this is updating, so I feel like I should chime in here:

An 80dp navigation bar or rail held only two tabs (Chats, PRs).

I agree this one was kinda bad, but it was rushed out to replace the buggy replacement that was in the original PR tab merge.

I'm not in love with that cluttered of a header, and one consideration I had when adding the rails was the upcoming Home and Issues features likely being added to the navigation area. I don't really see how either would fit in that header.

New thread and Filter floated over the thread list.

I still think we should keep the standard Android FAB here for Create Thread. Filter, I'm already proposing move up to the header on Android.

Content sat in a rounded, inset sheet under the header.

This was just fun and to fit in more with all the rounded content in MD3.

The thread title stayed on screen while you read history.

Auto-hiding headers is a good idea. I'm all for it.

I'll still open the PR for the rail updates I was planning. Feel free to consider it or close it.

PixPMusic added a commit to PixPMusic/t3code that referenced this pull request Oct 15, 2026
Ports the keyboard layout from pingdotgg#19424. While the thread composer has the
soft keyboard in Android split view, the rail and sidebar step aside, the
thread header drops to one line, and the composer stays one row that
grows with its text, with the model picker and turn timer in the row.
Closing the keyboard restores the sidebar.

Co-authored-by: Theo Browne <me@t3.gg>

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

macroscope-review Opt PRs made by unvouched contributors in for Macroscope review. Vouched contributors auto-reviews size:XXL 1,000+ changed lines (additions + deletions). vouch:trusted PR author is trusted by repo permissions or the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants