Skip to content

Make read-receipts and view-reactions draggable-scrollable #1802

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

chrisbobbe
Copy link
Collaborator

For manual testing, ideally use a real device, to see the fling and drag responses faithfully to what most users will experience :)

Screenshots coming soon.

Selected commit messages:


ead_receipts: Improve UX by making the sheet draggable-scrollable

The Figma asks that the sheet be expandable to fill the screen:
https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=11367-21131&m=dev
and that's implemented here.

Compare f8ddff2, where we removed an earlier implementation. I
hadn't tried to bring that back yet because I wanted to support
triggering resize from a drag handle at the top, and I couldn't
figure out how to do that. IIRC I could only get the drag handle to
respond to drag-down gestures (via enableDrag: true) by shifting
the sheet's position downward. That worked as a way to dismiss the
sheet, but it was frustratingly different from the gesture handling
on the scrollable list:

  • The slide-to-dismiss looked different from the shrink-and-dismiss,
    an awkward inconsistency
  • The list would respond to upward drags, too (by growing and
    showing more content)

I've managed it here, modulo with a header instead of a drag handle,
by making sure the scrollable area extends through the top of the
sheet. (Done with a CustomScrollView, pinning the header to the
viewport top.)


emoji_reaction: Use DraggableScrollableModalBottomSheet for view-reactions

Like we did for read-receipts in a recent commit. I think this
behavior is implied in the Figma, but it's not as explicit:
https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=5878-19207&m=dev
...anyway, helpful to be consistent with read-receipts, I think,
which is similarly a read-only view that might have a long list to
show.

I thought this would be more complicated than it turned out to be --
thanks to SliverSemantics, I can actually wrap the list of voters in
a labeled container node, because
DraggableScrollableModalBottomSheet's API takes a sliver for the
content.

There are other localization classes, like MaterialLocalizations,
and in any case it seems right to have a consistent naming pattern.
The Figma asks that the sheet be expandable to fill the screen:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=11367-21131&m=dev
and that's implemented here.

Compare f8ddff2, where we removed an earlier implementation. I
hadn't tried to bring that back yet because I wanted to support
triggering resize from a drag handle at the top, and I couldn't
figure out how to do that. IIRC I could only get the drag handle to
respond to drag-down gestures (via `enableDrag: true`) by shifting
the sheet's position downward. That worked as a way to dismiss the
sheet, but it was frustratingly different from the gesture handling
on the scrollable list:
- The slide-to-dismiss looked different from the shrink-and-dismiss,
  an awkward inconsistency
- The list would respond to upward drags, too (by growing and
  showing more content)
I've managed it here, modulo with a header instead of a drag handle,
by making sure the scrollable area extends through the top of the
sheet. (Done with a CustomScrollView, pinning the header to the
viewport top.)
This fixes a test failure when we make an upcoming refactor. (The
container node's label would apparently have its children's labels
appended to it...I haven't seen that behavior in manual testing on
my iPhone with VoiceOver, before or after that refactor, but, shrug;
this change does seem correct anyway.)
…tions

Like we did for read-receipts in a recent commit. I *think* this
behavior is implied in the Figma, but it's not as explicit:
  https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=5878-19207&m=dev
...anyway, helpful to be consistent with read-receipts, I think,
which is similarly a read-only view that might have a long list to
show.

I thought this would be more complicated than it turned out to be --
thanks to SliverSemantics, I can actually wrap the list of voters in
a labeled container node, because
DraggableScrollableModalBottomSheet's API takes a sliver for the
content.
@chrisbobbe chrisbobbe added the maintainer review PR ready for review by Zulip maintainers label Aug 14, 2025
@chrisbobbe
Copy link
Collaborator Author

Finger down on header, move up and down

Before:

ScreenRecording_08-14-2025.12-55-18_1.mov

After:

ScreenRecording_08-14-2025.12-57-41_1.mov

Finger down in list, move up and down

Before:

ScreenRecording_08-14-2025.12-56-03_1.mov

After:

ScreenRecording_08-14-2025.12-58-02_1.mov

@chrisbobbe
Copy link
Collaborator Author

I can record the view-reactions behavior too, but it's similar, and anyway the best way to see the behavior is to try it yourself :)

Copy link
Member

@rajveermalviya rajveermalviya left a comment

Choose a reason for hiding this comment

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

Thanks for working on this @chrisbobbe! This works great on my device, and LGTM.

@rajveermalviya rajveermalviya added integration review Added by maintainers when PR may be ready for integration and removed maintainer review PR ready for review by Zulip maintainers labels Aug 15, 2025
@rajveermalviya rajveermalviya requested a review from gnprice August 15, 2025 18:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
integration review Added by maintainers when PR may be ready for integration
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants