feat(ui, samples): two-pane channel list and channel on wide windows and foldables

[xsahil03x]

Part of FLU-826. Stacked on #3021 (FLU-823); review only the commits on top of it.

On a wide window the sample app now shows the channel list and the open channel side by side, and it keeps one stack on phones.

Sample app

• AdaptiveSplitView (in widgets/split_view.dart) shows two panes when the window is at least expanded wide (840) and medium tall (480), using Material's width and height classes (utils/window_size_class.dart). That covers iPhone Duo's inner display in landscape, the Pixel Fold in either orientation, and tablets in landscape. On narrower windows the chat routes stay one stack.
  • Apple: split view columns on iPhone Duo "appear both tiled and as overlays" when open, and single-view in portrait.
  • Material: two panes at expanded width (840 and up), one recommended below that.
• The channel routes live in one ShellRoute navigator in both layouts, so an open channel keeps its draft and scroll position across a fold, unfold or rotation. Only the list moves between layouts, by a GlobalKey.
• A hinge or half-open fold (MediaQuery.displayFeatures) splits the panes at the fold. Each pane gets its own insets and display features via removeDisplayFeatures, and the divider eases into place.
  • This works on Android foldables today, and on iPhone Duo once [iOS] Populate display features from the iPhone Duo hinge and reserved regions flutter/flutter#193025 reports the fold.
• People can resize the panes by dragging the handle in the middle of the divider (a mouse or trackpad can drag anywhere along it), with the arrow keys, or with a screen reader's adjust actions. Each pane takes a SplitPaneConstraints(minWidth:, initialWidth:, maxWidth:), SwiftUI's navigationSplitViewColumnWidth(min:ideal:max:) under Flutter's names. The list starts at 320 (UIKit's default primary column), within 280 to 420, and the chat keeps at least 360. While a fold divides the window, the divider can't be dragged.
• In the split:
  • Picking a channel swaps it in place without a transition, as UISplitViewController does when regular. Drill-ins such as chat info still push within the pane.
  • The chat has no back button.
  • The open channel, thread, draft or reminder is highlighted.
  • The drawer covers both panes, since a modal drawer is meant to block the whole app.
• The Threads and Drafts tabs used to push onto the nearest navigator, which covered both panes. Every tab now opens the channel route.
• Fixes found along the way:
  • A channel's composer text leaked into the next channel opened in place.
  • A channel's menus stayed open over the next one.
  • The selected tile drifted while scrolling and showed behind the search field.

SDK (stream_chat_flutter)

• Added automaticallyImplyLeading to StreamChannelPage and StreamThreadPage.
• Added a selected parameter and copyWith to StreamThreadListTile.
• Fixed StreamThreadListTile overflowing when narrow; the timestamp now truncates.
• Fixed StreamMessageItem's actions modal throwing when its message left the tree while it was open.

Verified

• On the iPhone Duo simulator: outer display, inner landscape and portrait, and Split View multitasking on both halves.
• On the Pixel 10 Pro Fold emulator: flat, half-open and folded, in both orientations.
• Resizing on web (pointer, keyboard, limits, window resize) and on the iPhone Duo simulator (touch, fold snapping and its animation).
• Checked on both: state across folds, draft isolation, drawer, menus, back and search, and the phone flow with default transitions.
• Tests cover the new SDK parameters and the two SDK fixes. The overflow and modal regression tests fail without their fixes.

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Channel and thread pages can hide their back buttons when needed.
  • The sample app adapts to window size, displaying chats and conversations side by side on larger screens and a “Select a chat” placeholder when appropriate.
  • Drafts, threads, reminders, and channels highlight the selected item and update the displayed conversation.
• Bug Fixes
  • Improved timestamp display in narrow thread tiles and prevented message action menus from failing if a message leaves the screen.
• Improvements
  • Added copyWith support for thread and draft tiles.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

• Last reviewed commit: c590111
• Latest commit, not reviewed: 86348b0

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Advanced

Run ID: c4c2a5cd-e0b2-482f-84ee-77ade145c8df

📥 Commits

Reviewing files that changed from the base of the PR and between 5f43140 and c590111.

📒 Files selected for processing (1)

• sample_app/lib/widgets/split_view.dart

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

📝 Walkthrough

The sample app adds adaptive split-view layouts, route-based channel and thread navigation, and route-driven list selection. The Stream Chat package adds configurable channel and thread page back buttons, selected thread tiles, and a message-action modal configuration update.

Changes: Adaptive split-view navigation

Layer / File(s)	Summary
Split-view layout foundation sample_app/lib/utils/window_size_class.dart, sample_app/lib/widgets/split_view.dart, sample_app/lib/pages/channel_placeholder_page.dart, sample_app/android/gradle/wrapper/gradle-wrapper.properties, sample_app/android/settings.gradle	The sample app adds window-size classes, split-view widgets, adaptive route pages, and a channel placeholder. The Gradle wrapper and Crashlytics plugin versions change.
Adaptive channel and thread routes sample_app/lib/routes/app_routes.dart, sample_app/lib/pages/choose_user_page.dart, packages/stream_chat_flutter/lib/src/pages/channel_page.dart, packages/stream_chat_flutter/lib/src/pages/thread_page.dart, packages/stream_chat_flutter/test/src/channel/*	Channel routes use an adaptive split-view shell and resolve thread parents from route extras or channel state. Channel and thread pages add automaticallyImplyLeading, defaulting to true, with tests for both settings. User selection pushes and conditionally removes a progress dialog route.
Route-driven lists and selection sample_app/lib/pages/channel_list_page.dart, sample_app/lib/pages/draft_list_page.dart, sample_app/lib/pages/reminders_page.dart, sample_app/lib/pages/thread_list_page.dart, sample_app/lib/widgets/channel_list.dart, sample_app/lib/widgets/stream_draft_list_tile.dart	Lists read route state in expanded layouts, navigate through named channel routes, and mark matching items selected. Draft and reminder tiles render selected backgrounds.

Stream Chat page and tile updates

Layer / File(s)	Summary
Channel and thread page back-button controls packages/stream_chat_flutter/lib/src/pages/channel_page.dart, packages/stream_chat_flutter/lib/src/pages/thread_page.dart, packages/stream_chat_flutter/test/src/channel/*	Channel and thread pages add automaticallyImplyLeading, defaulting to true, and pass it to their headers. Tests cover the default and disabled settings.
Thread-tile selection and narrow layout packages/stream_chat_flutter/lib/src/scroll_view/thread_scroll_view/stream_thread_list_tile.dart, packages/stream_chat_flutter/test/src/scroll_view/thread_scroll_view/stream_thread_list_tile_test.dart, packages/stream_chat_flutter/CHANGELOG.md	Thread tiles add selected state and copyWith, use selected-state background coloring, and wrap the timestamp in Flexible. Tests cover selection, semantics, copy behavior, and narrow layouts. The changelog records these updates and the page options.
Message-action modal configuration packages/stream_chat_flutter/lib/src/message_widget/stream_message_item.dart, packages/stream_chat_flutter/test/src/message_widget/stream_message_item_actions_modal_test.dart, packages/stream_chat_flutter/CHANGELOG.md	The modal uses configuration captured before it opens. A test removes the message while the modal is open and checks for exceptions.

Priority: ➖ Normal

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

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant ChannelList
  participant GoRouter
  participant AdaptiveSplitView
  participant ChannelRoute
  participant ChannelPage
  participant ThreadPage
  ChannelList->>GoRouter: Navigate with channel route parameters
  GoRouter->>AdaptiveSplitView: Build channel route in split-view shell
  GoRouter->>ChannelRoute: Provide route parameters and extra
  ChannelRoute->>ThreadPage: Build when a parent message is resolved
  ChannelRoute->>ChannelPage: Build when no parent message is resolved

Loading

Merge Risk: ⚪ Minimal · up to c5901

The inspected split layout and phone navigation preserve their intended behavior. No identified issue blocks merging after normal checks.

Security Architecture Review

Security architecture risk: 🔵 Low · up to c5901

The inspected changes remain within the existing signed-in chat client and presentation layer. No new authorization bypass or privileged action path was established. Residual risk concerns preserving channel-specific state and dismissing overlays during interrupted navigation, resizing, and account changes; those runtime behaviors were not fully verified.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

• inferred — The inspected entrypoint changes affect sample-app navigation and channel/thread UI state, plus SDK consumers opting into presentation controls. They continue to use the current chat client rather than introducing a separate credential or service authority. Effective access to channel data still depends on existing client and server enforcement, which was not fully inspected.

Trust Boundaries and Controls

• observed — The existing router redirects unauthenticated users away from chat routes. Externally representable CID, mid, and pid values remain navigation inputs to the current client-backed channel route; the split layout and hidden back button do not replace that authentication gate or establish channel authorization themselves.

Resilience and Maintainability Implications

• observed — Expanded mode places its drawer controller above both panes; collapsed mode removes that controller and gives the channel-list scaffold its drawer. Existing disconnect ordering publishes Unauthenticated and waits for the end of frame before disconnecting the client, supporting teardown of auth-gated UI before channel state disposal. Actual barrier behavior and interrupted teardown were not runtime-tested.

Hardening Proposals

• proposed — Validate channel-data isolation with transition-focused regression cases combining rapid resize, repeated channel/thread selection, open overlays, and account teardown. Assert that composer state remains bound to the intended channel/thread and stale overlays cannot expose or act on the previous account's state.

Pre-merge checks: 5

Check name	Status	Explanation
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main change: adding a two-pane channel list and channel layout for wide windows and foldable devices.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

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

[codecov]

Codecov Report

❌ Patch coverage is 87.50000% with 3 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (sahil/flu-823-iphone-duo-polish-viewer-fit-thumbnails-autocomplete-height@516a738). Learn more about missing BASE report.

Files with missing lines	Patch %	Lines
...er/lib/src/message_widget/stream_message_item.dart	50.00%	2 Missing ⚠️
...ew/thread_scroll_view/stream_thread_list_tile.dart	94.44%	1 Missing ⚠️

Additional details and impacted files

@@                                             Coverage Diff                                              @@
##             sahil/flu-823-iphone-duo-polish-viewer-fit-thumbnails-autocomplete-height    #3023   +/-   ##
============================================================================================================
  Coverage                                                                             ?   79.68%           
============================================================================================================
  Files                                                                                ?      453           
  Lines                                                                                ?    29491           
  Branches                                                                             ?        0           
============================================================================================================
  Hits                                                                                 ?    23501           
  Misses                                                                               ?     5990           
  Partials                                                                             ?        0           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[renefloor]

Reviewed this layer on its own. The SDK changes are small, non-breaking, and each has a test that fails without it 👍. The split view design is nice: a single ShellRoute navigator in both layouts, with only the list moved by a GlobalKey, so a channel keeps its draft and scroll position across fold, unfold and rotation. The divider is also accessible via keyboard and screen reader.

Comments are all on the sample app; one is a real bug (Android back with the drawer open).

[renefloor]

In the split layout this DrawerController sits above the ShellRoute's nested navigator, so when it opens, its LocalHistoryEntry is registered on the shell page in the root navigator. go_router's popRoute → _findCurrentNavigator picks the deepest navigator that canPop(), which is the nested one whenever a channel is open.

So: tablet in landscape, channel open, tap the avatar to open the drawer, press system back. I'd expect the channel to close to the placeholder while the drawer stays open. (Inferred from reading go_router's source; I haven't reproduced it on a device.) One-pane mode is fine because the Scaffold drawer is inside the nested navigator.

Fix: a PopScope(canPop: false, …) or BackButtonListener that closes the drawer while it's open.

[xsahil03x]

Good catch, reproduced on a Pixel Fold emulator. go_router sends back to the innermost navigator that can pop, so the channel pane's navigator closed the channel before the drawer's history entry on the shell page was ever asked (still the case in go_router 18). PopScope registers on that same shell page, so it wouldn't help. Fixed in 73d0bd5 with a BackButtonListener around the drawer that closes it first: it hears the back press before the router picks a navigator.

[renefloor]

_resizedPrimaryWidth lives in _SplitViewState, which is disposed when AdaptiveSplitView drops to one pane. So drag the list to 420, rotate to portrait and back, and it's 320 again. Could the width live in _AdaptiveSplitViewState and be passed into SplitView (initial width plus a changed callback)?

[xsahil03x]

Fixed in 4ac15ab: AdaptiveSplitView now keeps the resized width, since it outlives the one-pane layout, and hands it back to SplitView through resizedPrimaryWidth / onPrimaryWidthChanged. Checked on the Fold by dragging, folding to one pane and unfolding.

[renefloor]

The 44px hit area is a translucent GestureDetector on top of both panes, so its horizontal drag recognizer wins over the channel tiles' Slidable (swipes starting in the rightmost 22px of the list) and over swipe-to-reply near the channel pane's leading edge. Maybe ~16px, or use the wide hit area only for mouse input?

[xsahil03x]

Reproduced both cases on a Pixel Fold. Fixed in febffee by following Material 3's pane drag handle: touch now resizes only from a 4×48 handle in the middle of a 24dp space around the line (it grows to 12×52 while held), so row swipes and swipe-to-reply next to the line reach the panes. A mouse or trackpad can still drag anywhere along it.

[renefloor]

nit: SplitPaneConstraints supports initialWidth/maxWidth on the secondary pane plus ==/hashCode/toString, but only secondaryConstraints.minWidth is ever used. For a sample, plain primaryMin/primaryInitial/primaryMax + secondaryMin parameters would cut ~50 lines and the foundation import.

[xsahil03x]

Keeping it. SplitView is written as a reusable widget, and people copy sample widgets into their own apps. The constraints are symmetric, so a caller can size either pane: a fixed-width detail pane with secondaryConstraints.initialWidth, or a capped one with maxWidth. The sample just happens to use only the primary side. Grouping the min, initial and max widths per pane also keeps those values, and the asserts that check them, together.

[renefloor]

The Gradle 8.14 → 9.3 bump (and Crashlytics 2.8 → 3.0 in settings.gradle) is a toolchain change for every contributor and unrelated to the two-pane layout. Could it go in its own PR so it can be reverted independently?

[xsahil03x]

Split out into #3067 with the minimum versions that work (Gradle 9.1.0, the first that runs on Java 25, and Crashlytics plugin 3.0.0), and reverted here in d9d02db / 8ff68d0.

[renefloor]

return true → false means scroll notifications now bubble up past this listener. What's the reason? If it's intentional, a short comment would help; otherwise I'd revert it.

[xsahil03x]

It was intentional, in 1b1fbbc: the listener only dismisses the keyboard, but returning true swallowed every scroll notification, so the Material the selected tile paints on never heard about the scroll and the highlight lagged behind its row. 81baeb5 later added a transparent Material inside the list, which now gets the notifications first, so the highlight no longer depends on this. I've kept false anyway, since the listener only observes the scroll and shouldn't hide it from anything above.

[renefloor]

This fixed key breaks the two call sites that still open the channel with pushNamed. They were not switched to goNamed with the others:

• sample_app/lib/app.dart:96, tapping a push notification
• sample_app/lib/widgets/all_members_sheet.dart:444, opening a DM from the members sheet

Before, each push got a unique state.pageKey. Now:

• Same channel already open: the shell navigator ends up with two pages keyed (cid, null), and in debug builds Navigator's duplicate-key assertion fails.
• Split view: the pushed page stacks inside the chat pane with automaticallyImplyLeading: false. There is no back button, so the page underneath stays alive under it and only system back or tapping the list gets you out.

Suggest switching both to goNamed, like channel_list.dart and the other call sites this PR changed.

[xsahil03x]

Switched both to goNamed in cc1bc92. No pushNamed to the channel page is left.

[renefloor]

This fixes the modal's builder, but the action still runs on context after the modal closes. Line 990 calls _onActionTap(context, channel, action).ignore() after await showStreamDialog(...), with no context.mounted check, and that is the context this comment says can be gone.

If the message leaves the tree while the modal is open:

• React: _selectReaction calls StreamChatConfiguration.of(context) again (line 1089), the lookup this PR moved up front.
• Delete / Flag: _maybeDeleteMessage and _maybeFlagMessage call showStreamDialog(context: context).

These throw inside the async _onActionTap, and .ignore() discards the error. The modal closes, nothing happens, and nothing is logged.

Suggested fix:

• Pass the configuration already read here into _selectReaction.
• Capture the navigator (and translations) before the await, or bail out or log on !context.mounted.
• Extend stream_message_item_actions_modal_test.dart to tap an action (for example a reaction) after the message is removed.

[xsahil03x]

Went with bailing out on !context.mounted in 40bcf16, after the actions modal, the bounced-message dialog and the reactions sheet. That matches Flutter's PopupMenuButton, which drops the selection when the button is no longer mounted.

The item only leaves the tree while its modal is open when the message is removed from the channel, so the action is dropped rather than run against a message that's gone. The new test taps Thread Reply after the message is removed and expects onThreadTap not to be called. Thread Reply is one of the actions that never touch context, so the test fails without the check.