Timeline: jump-to-unread FAB and mark-as-read shortcut by jennaharris7 · Pull Request #6694 · element-hq/element-x-android

jennaharris7 · 2026-04-29T23:42:42Z

Timeline: jump-to-unread + mark-as-read on the timeline FABs

Content

Two additions to the room timeline, gated behind a new JumpToUnread feature flag (off by default; toggleable in developer options):

Jump-to-unread FAB — chevron-up button that appears stacked above the scroll-to-bottom FAB whenever the read marker is above the visible viewport. Tapping centres the timeline on the marker.
Mark as read — long-pressing either FAB opens a small popup with a "Mark as read" action that marks the room fully read at the latest event.

Both FABs show a small green dot when there are unreads in their direction:

Top-of-FAB dot on the up-arrow when there are messages above the viewport.
Bottom-of-FAB dot on the down-arrow when new messages have arrived since you scrolled away.

The dot is binary (visible / not visible), not a count.

Motivation

When you scroll up in a busy room, the read marker leaves the screen and there's no quick way back. The chevron-up FAB takes you back in one tap. The green dots act as lightweight "there's something here" cues without cluttering the FAB with a number. The long-press shortcut lets you clear unread state without scrolling all the way back to the bottom.

Screenshots / GIFs

*style updated to match figma:

******

Edge case not covered

If the read marker isn't in the loaded timeline window (e.g. focused-event timeline, paginated gaps), the chevron-up FAB won't appear. Closing this requires SDK plumbing to surface the fully-read event id so we can paginate-and-centre on it. Reasonable to land as a follow-up; this PR is gated behind FeatureFlags.JumpToUnread so the limited form can soak.

Tests

Enable the Jump to unread messages feature flag in developer options before exercising the manual cases below.

Open a busy room with unreads → scroll up → chevron-up FAB appears stacked above chevron-down at bottom-right with a green dot above it; tap → timeline animates the read marker into view.
Scrolled away from the bottom; receive a message from another user → green dot appears below the chevron-down FAB.
Tap the chevron-down FAB or scroll back to the bottom → green dot clears.
Long-press either FAB → "Mark as read" popup appears → tap → all unreads clear.
Disable the feature flag → chevron-up FAB never appears; chevron-down FAB shows no green dot regardless of state. (Long-press menu still works.)
Set the system font scale to maximum → "Mark as read" popup text wraps cleanly.
Enable TalkBack → both FABs render and remain tappable; jump-to-unread FAB is announced.
Unit tests pass: ./gradlew :features:messages:impl:testDebugUnitTest.
Konsist tests pass: ./gradlew :tests:konsist:testDebugUnitTest.

Tested devices

Physical
Emulator
OS version(s): Samsung Galaxy S24 on Android 16

Checklist

This PR was made with the help of AI:
- Yes. In this case, please request a review by Copilot.
- No.
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 defines 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 · 2026-04-29T23:42:56Z

Thank you for your contribution! Here are a few things to check in the PR to ensure it's reviewed as quickly as possible:

If your pull request adds a feature or modifies the UI, this should have an equivalent pull request in the Element X iOS repo unless it only affects an Android-only behaviour or is behind a disabled feature flag, since we need parity in both clients to consider a feature done. It will also need to be approved by our product and design teams before being merged, so it's usually a good idea to discuss the changes in a Github issue first and then start working on them once the approach has been validated.
Your branch should be based on origin/develop, at least when it was created.
The title of the PR will be used for release notes, so it needs to describe the change visible to the user.
The test pass locally running ./gradlew test.
The code quality check suite pass locally running ./gradlew runQualityChecks.
If you modified anything related to the UI, including previews, you'll have to run the Record screenshots GH action in your forked repo: that will generate compatible new screenshots. However, given Github Actions limitations, it will prevent the CI from running temporarily, until you upload a new commit after that one. To do so, just pull the latest changes and push an empty commit.

ganfra

Thanks for the PR, first comments after a quick look, I'll get back on this next week.

ganfra · 2026-04-30T19:25:11Z

        val prevMostRecentItemId = rememberSaveable { mutableStateOf<UniqueId?>(null) }

        val newEventState = remember { mutableStateOf(NewEventState.None) }
+        val newMessagesCount = remember { mutableIntStateOf(0) }


Should probably be part of NewEventState.FromOther instead

Fixed in commit 78aa500

ganfra · 2026-04-30T19:26:27Z

+            withContext(dispatchers.computation) {
+                var markerIdx = -1
+                var unread = 0
+                for ((i, item) in items.withIndex()) {


This logic won't work when the marker is not in memory, which can happens pretty easily (gaps, event-cache pagination)

The iOS sibling PR (element-hq/element-x-ios#5506) hit the same limitation — they landed on the conclusion to ship behind a feature flag and follow up with SDK-supported scrolling. Proposing the same here. The proper fix needs an SDK accessor for the fully-read marker event id (it's in m.fully_read account data but not currently surfaced when the marker is outside the loaded window), plus rewiring the FAB to use Timeline.Mode.FocusedOnEvent on click. I’ve added an edge case not covered in the pr description, apologies for not including it initially!

ganfra · 2026-04-30T19:28:04Z

+    } else {
+        stringResource(id = CommonStrings.a11y_jump_to_unread_messages)
+    }
+    TimelineFab(


TimelineFab name is not precise enough on the meaning of the component, maybe something like JumpToPositionButton

Fixed in 7148f2f

ganfra · 2026-04-30T19:28:41Z

+    count: Int,
+    modifier: Modifier = Modifier,
+) {
+    if (count <= 0) return


With a when would be better.
Also needs inputs from Design team

Refactored to use when in 7148f2f, will wait for design team feedback for other updates

ganfra · 2026-04-30T19:29:02Z


 <resources>
    <string name="common_black">"Black"</string>
+    <string name="a11y_jump_to_unread_messages">"Jump to unread messages"</string>


TODO: move to localazy

ganfra · 2026-04-30T19:29:55Z

    }

+    fun jumpToReadMarker() {
+        if (readMarkerIndex < 0) return


So like said previously, this won't work if the read marker is not loaded in memory

ganfra · 2026-04-30T19:34:16Z

            lazyListState.firstVisibleItemIndex < 3 && isLive
        }
    }
+    val isReadMarkerOffTop by remember {


Should probably be name isJumpToUnreadVisibile

Fixed in 7148f2f

ganfra · 2026-04-30T19:37:35Z

+        derivedStateOf {
+            if (!displayJumpToUnread || readMarkerIndex < 0) {
+                false
+            } else if (forceJumpToReadMarkerVisibility) {


Can we simplify this check? Also forceJumpToReadMarkerVisibility should win over anything else.

The forceJumpToReadMarkerVisibility win is fixed in 7148f2f and the check refactor is in 200b98b

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

jennaharris7 added 2 commits April 29, 2026 15:41

Feature: add jump to unread button with badge count

7f5ce76

Add missing preview: both fabs have counts

9f26079

jennaharris7 requested a review from a team as a code owner April 29, 2026 23:42

jennaharris7 requested review from ganfra and removed request for a team April 29, 2026 23:42

github-actions Bot added the Z-Community-PR Issue is solved by a community member's PR label Apr 29, 2026

jennaharris7 added 2 commits April 29, 2026 17:29

Don't show NEW timeline divider when not applicable in previews

2579e68

Quality checks/fixes

ef7cb35

jennaharris7 mentioned this pull request Apr 30, 2026

Add in-app settings link to system picker for app-wide message sound and call ringtone #6672

Open

ganfra reviewed Apr 30, 2026

View reviewed changes

jennaharris7 added 5 commits May 1, 2026 06:08

Merge branch 'element-hq:develop' into feature/scroll-to-unread-messages

af9da10

Fold newMessagesCount into NewEventState.FromOther

78aa500

Semantic fixes: clearer naming conventions, when statements

7148f2f

Consolidate JumpToUnreadState

200b98b

Move jumpToUnreadButton to bottom, remove badge count

51816e0

jennaharris7 changed the title ~~Timeline: add a Jump to Unread button and a new-message badge on the scroll-to-bottom button~~ Timeline: jump-to-unread FAB and mark-as-read shortcut May 5, 2026

jennaharris7 and others added 4 commits May 5, 2026 17:26

Add mark as read buttons

aed1497

Code cleanup, accessibility checks

880a189

Mark as read menu ui tweaks

784f5df

Konsist fixes

0daf7ec

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

jennaharris7 force-pushed the feature/scroll-to-unread-messages branch from 7e82ede to 0daf7ec Compare May 6, 2026 13:50

Keep jump to unread button position stationary

4b47963

Conversation

jennaharris7 commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Timeline: jump-to-unread + mark-as-read on the timeline FABs

Content

Motivation

Screenshots / GIFs

Edge case not covered

Tests

Tested devices

Checklist

Uh oh!

github-actions Bot commented Apr 29, 2026

Uh oh!

ganfra left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

jennaharris7 commented Apr 29, 2026 •

edited

Loading