Bottom sheet redesign

[gnprice]

When you long-press a message, we show a bottom sheet with actions you can take on it, which we also call an "action sheet". (Currently in this prototype there's just one action, "share". In zulip-mobile it's a much longer list, and we also show a similar widget when you long-press on a topic name and some other places.)

Currently it's a pretty plain bottom sheet. We should adjust the styling to match the following design prepared by @terpimost:
https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3481-27050&m=dev
https://www.figma.com/design/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=3483-27168&m=dev

Here's a screenshot taken from there. For details of the layout and behavior, see the Figma design.

To help manage the work, I've split implementing this design up into two GitHub issues. For this issue, we'll only implement the screen shown above, not the three others you'll find to the right of it in Figma showing variations. Then there's a followup issue here:

• Show message text in bottom sheet #217

[gnprice]

I've just split out part of this issue to a new one:

• Show message text in bottom sheet #217

So for this issue, let's leave out the message text at the top of the bottom sheet; we'll pursue that in the new separate issue. (At the moment our bottom sheet has many fewer items than this, which I think also reduces somewhat the need for that feature because there's room on the screen to still see the message while the bottom sheet is open.)

Let's also leave out of scope for this issue any changes to what icons we use for the options. Replacing the icons will be done as part of #200 or a followup, and can happen either before or after we complete this issue.

[Puneet2504]

@gnprice instead of openeing the bottom sheet we can have something that draws up when we long press on the message field having message field placed where it is.

[gnprice]

@Puneet2504 This issue thread is about implementing the design that our designer @terpimost has already developed. We could discuss potential other designs, but the place for that would be in a new thread in #mobile on chat.zulip.org. (You'll also need to be more specific about what the proposed alternate design is — I don't quite understand what you're describing — and why you think it'd be better.)

[SharmaDhruv2511]

is this issue still open? @gnprice I would like to contribute to it

[Sahilpervez]

@gnprice I would like to work on this issue.

[Sahilpervez]

@gnprice Here is the Idea I would like to propose for this issue.

• In the action_sheet.dart, we can have all the buttons to render as a List<Widget> actionSheetButtons = [...], instead of passing it directly as children of Column widget in showDraggableScrollableModalBottomSheet method so that we have access to index of each action button. This will ease the future modification of the order or add more actionSheetButtons.
• For haveing rounded corners in on first and last element we can have one of two modifications in abstract class MessageActionSheetMenuItemButton extends StatelessWidget. We can have two more properties in the forementioned class, 1. isFirst and 2. isLast , and check these variables before rendering the buttons in build method.
• For the Cancel button at the end we can have a new class MessageActionSheetCancelButton in the action_sheet.dart file and render it at the end of the forementioned actionSheetButtons so that it gets rendered in the action sheet.

Please tell me if I should move ahead with this?

[gnprice]

@Sahilpervez Sounds good — please go ahead, thanks.

For the details of the design, see this screen from @terpimost's design in Figma. (It's the same as the screenshot above was taken from; but the Figma version includes details like the exact colors, exact radius for the rounded corners, etc.) I'll edit that link into the description, too.