Skip to content

Simplify message composer layout#4884

Merged
jmartinesp merged 11 commits intodevelopfrom
misc/simplify-composer-bottom-sheet
Jun 24, 2025
Merged

Simplify message composer layout#4884
jmartinesp merged 11 commits intodevelopfrom
misc/simplify-composer-bottom-sheet

Conversation

@jmartinesp
Copy link
Copy Markdown
Member

@jmartinesp jmartinesp commented Jun 16, 2025

Content

  • Remove ExpandableBottomSheetScaffold, which used SubcomposeLayout and some quite complex logic to be able to measure and auto-size the composer in the bottom sheet. Instead, use ExpandableBotttomSheetLayout which uses a simple Layout with IntrinsicContentSize measurements instead.
  • This also fixes some weird animations when displaying and hiding the software keyboard.
  • Remove extra padding in the RTE layout, which was added because of an issue in ExpandableBottomSheetScaffold.
  • Make the whole text box clickable and have it request focus on the actual EditText.

Notes:

  • The RTE layout is not full screen anymore, instead it has a max height as in iOS.
  • By using the intrinsic content size measurements, we can't have any SubcomposeLayout or LazyList inside the bottom sheet contents, so SuggestionPickerView had to be moved.

Motivation and context

Simplify this layout so it won't break in the next Compose minor release.

Screenshots / GIFs

It should look exactly the same.

Tests

Use the reply, edit and normal writing functionality in both the standard textfield and the RTE. Also try mentioning users.

Tested devices

  • Physical
  • Emulator
  • OS version(s): 14, 16.

Checklist

  • Changes have been tested on an Android device or Android emulator with API 24
  • UI change has been tested on both light and dark themes
  • Accessibility has been taken into account. See https://github.com/element-hq/element-x-android/blob/develop/CONTRIBUTING.md#accessibility
  • Pull request is based on the develop branch
  • Pull request title will be used in the release note, it clearly define what will change for the user
  • Pull request includes screenshots or videos if containing UI changes
  • You've made a self review of your PR

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jun 16, 2025

📱 Scan the QR code below to install the build (arm64 only) for this PR.
QR code
If you can't scan the QR code you can install the build via this link: https://i.diawi.com/TtYCAh

Copy link
Copy Markdown
Member

@bmarty bmarty left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have tested the code, and it fixes the extra padding issue 🎉 .

One "regression" though:
On my device, I cannot have a RichTextEditor fullscreen as before, i.e. switch to RTE, open the bottom sheet at maximum and close the keyboard. I get this:

image

and previously I was able to get this:

image

Also in this state (bottom sheet expanded, and keyboard closed, I cannot open the keyboard. I need to reduce the bottom sheet first. Strange, but not really new apparently.

@jmartinesp
Copy link
Copy Markdown
Member Author

jmartinesp commented Jun 17, 2025

On my device, I cannot have a RichTextEditor fullscreen as before, i.e. switch to RTE, open the bottom sheet at maximum and close the keyboard. I get this:

This is expected, since we now set a max height for the bottom sheet. This is how it works on iOS, so I hope it's good enough, but the code could probably be tweaked to get actual full screen though.

Also in this state (bottom sheet expanded, and keyboard closed, I cannot open the keyboard. I need to reduce the bottom sheet first. Strange, but not really new apparently.

Oh, I hadn't noticed this. I'll see if I can reproduce it.


Now I see the issue: the problem is the actual backing EditText only reaches the same height as the text / existing lines, so tapping on the 'editor box' below where the text reaches does nothing - and it needs to be kept like this to make the intrinsic size measuring work. Maybe I can find a way to map this click event to requesting focus for the EditText.

@jmartinesp jmartinesp force-pushed the misc/simplify-composer-bottom-sheet branch 2 times, most recently from 05888ab to bed84b4 Compare June 17, 2025 10:16
@jmartinesp jmartinesp force-pushed the misc/simplify-composer-bottom-sheet branch from bed84b4 to b682450 Compare June 20, 2025 10:11
@jmartinesp jmartinesp added the Record-Screenshots Runs the 'Record Screenshots' CI job and adds a commit with any new screenshots found. label Jun 20, 2025
@github-actions github-actions bot removed the Record-Screenshots Runs the 'Record Screenshots' CI job and adds a commit with any new screenshots found. label Jun 20, 2025
@jmartinesp jmartinesp added the PR-Misc For other changes label Jun 20, 2025
@jmartinesp jmartinesp marked this pull request as ready for review June 20, 2025 11:37
@jmartinesp jmartinesp requested a review from a team as a code owner June 20, 2025 11:37
@jmartinesp jmartinesp requested review from ganfra and removed request for a team June 20, 2025 11:37
@codecov
Copy link
Copy Markdown

codecov bot commented Jun 20, 2025

Codecov Report

Attention: Patch coverage is 75.18519% with 67 lines in your changes missing coverage. Please review.

Project coverage is 80.23%. Comparing base (fb1d076) to head (3e21cc0).
Report is 28 commits behind head on develop.

Files with missing lines Patch % Lines
...gnsystem/components/ExpandableBottomSheetLayout.kt 50.00% 42 Missing and 6 partials ⚠️
...ent/android/features/messages/impl/MessagesView.kt 94.44% 4 Missing and 2 partials ⚠️
...tcomposer/components/markdown/MarkdownTextInput.kt 82.75% 0 Missing and 5 partials ⚠️
.../element/android/libraries/androidutils/ui/View.kt 0.00% 2 Missing and 2 partials ⚠️
...ent/android/libraries/textcomposer/TextComposer.kt 86.36% 3 Missing ⚠️
...tem/components/ExpandableBottomSheetLayoutState.kt 90.00% 0 Missing and 1 partial ⚠️
Additional details and impacted files
@@             Coverage Diff             @@
##           develop    #4884      +/-   ##
===========================================
- Coverage    80.30%   80.23%   -0.08%     
===========================================
  Files         2161     2162       +1     
  Lines        57471    57504      +33     
  Branches      7232     7233       +1     
===========================================
- Hits         46154    46137      -17     
- Misses        8870     8914      +44     
- Partials      2447     2453       +6     

☔ View full report in Codecov by Sentry.
📢 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.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@jmartinesp jmartinesp added the Record-Screenshots Runs the 'Record Screenshots' CI job and adds a commit with any new screenshots found. label Jun 23, 2025
@github-actions github-actions bot removed the Record-Screenshots Runs the 'Record Screenshots' CI job and adds a commit with any new screenshots found. label Jun 23, 2025
Copy link
Copy Markdown
Member

@ganfra ganfra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, LGTM!

@sonarqubecloud
Copy link
Copy Markdown

@jmartinesp jmartinesp merged commit a10734d into develop Jun 24, 2025
28 of 31 checks passed
@jmartinesp jmartinesp deleted the misc/simplify-composer-bottom-sheet branch June 24, 2025 12:05
.requiredHeightIn(min = 42.dp)
.fillMaxSize(),
.fillMaxSize()
.then(modifier),
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jmartinesp It's weird that modifier is used twice here

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh damn, that first usage should have been a Modifier instead.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

PR-Misc For other changes

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants