message_list: added pressedTint feature

This feature allows to see a tint color on the
message when it is pressed.

Shifted `MessageWithPossibleSender` to StatefulWidget
and used `isMessageActionSheetOpen` to check
BottomSheet is open or not (via onDismiss) in
`showMessageActionSheet`.

Added `pressedTint` to `DesignVariables` for using
it in `MessageWithPossibleSender`.

Fixes: #1142

Author: Gaurav-Kushwaha-1225

lib/widgets/action_sheet.dart

@@ -31,6 +31,7 @@ import 'theme.dart';
 void _showActionSheet(
   BuildContext context, {
   required List<Widget> optionButtons,
+  VoidCallback? onDismiss
 }) {
   showModalBottomSheet<void>(
     context: context,
@@ -61,7 +62,7 @@ void _showActionSheet(
                       children: optionButtons))))),
               const ActionSheetCancelButton(),
             ])));
-    });
+    }).whenComplete(onDismiss ?? () {});
 }
 
 abstract class ActionSheetMenuItemButton extends StatelessWidget {
@@ -361,7 +362,7 @@ class UserTopicUpdateButton extends ActionSheetMenuItemButton {
 /// Show a sheet of actions you can take on a message in the message list.
 ///
 /// Must have a [MessageListPage] ancestor.
-void showMessageActionSheet({required BuildContext context, required Message message}) {
+void showMessageActionSheet({required BuildContext context, required Message message, VoidCallback? onDismiss}) {
   final store = PerAccountStoreWidget.of(context);
 
   // The UI that's conditioned on this won't live-update during this appearance
@@ -388,7 +389,7 @@ void showMessageActionSheet({required BuildContext context, required Message mes
     ShareButton(message: message, pageContext: context),
   ];
 
-  _showActionSheet(context, optionButtons: optionButtons);
+  _showActionSheet(context, optionButtons: optionButtons, onDismiss: onDismiss);
 }
 
 abstract class MessageActionSheetMenuItemButton extends ActionSheetMenuItemButton {

lib/widgets/message_list.dart

@@ -1274,22 +1274,29 @@ String formatHeaderDate(
 // Design referenced from:
 //   - https://github.com/zulip/zulip-mobile/issues/5511
 //   - https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=538%3A20849&mode=dev
-class MessageWithPossibleSender extends StatelessWidget {
+class MessageWithPossibleSender extends StatefulWidget {
   const MessageWithPossibleSender({super.key, required this.item});
 
   final MessageListMessageItem item;
 
+  @override
+  State<MessageWithPossibleSender> createState() => _MessageWithPossibleSenderState();
+}
+
+class _MessageWithPossibleSenderState extends State<MessageWithPossibleSender> {
+  bool isMessageActionSheetOpen = false;
+
   @override
   Widget build(BuildContext context) {
     final store = PerAccountStoreWidget.of(context);
     final messageListTheme = MessageListTheme.of(context);
     final designVariables = DesignVariables.of(context);
 
-    final message = item.message;
+    final message = widget.item.message;
     final sender = store.users[message.senderId];
 
     Widget? senderRow;
-    if (item.showSender) {
+    if (widget.item.showSender) {
       final time = _kMessageTimestampFormat
         .format(DateTime.fromMillisecondsSinceEpoch(1000 * message.timestamp));
       senderRow = Row(
@@ -1347,40 +1354,63 @@ class MessageWithPossibleSender extends StatelessWidget {
 
     return GestureDetector(
       behavior: HitTestBehavior.translucent,
-      onLongPress: () => showMessageActionSheet(context: context, message: message),
+      onLongPress: () async {
+        setState(() {
+          isMessageActionSheetOpen = true;
+        });
+
+        await Future.delayed(const Duration(milliseconds: 100), () {
+          if (context.mounted) {return showMessageActionSheet(
+            context: context,
+            message: message,
+            onDismiss: () {
+              if (context.mounted) {
+                setState(() {
+                  isMessageActionSheetOpen = false;
+                });
+              }
+            },
+          );}
+        });
+      },
       child: Padding(
         padding: const EdgeInsets.symmetric(vertical: 4),
-        child: Column(children: [
-          if (senderRow != null)
-            Padding(padding: const EdgeInsets.fromLTRB(16, 2, 16, 0),
-              child: senderRow),
-          Row(
-            crossAxisAlignment: CrossAxisAlignment.baseline,
-            textBaseline: localizedTextBaseline(context),
-            children: [
-              const SizedBox(width: 16),
-              Expanded(child: Column(
-                crossAxisAlignment: CrossAxisAlignment.stretch,
-                children: [
-                  MessageContent(message: message, content: item.content),
-                  if ((message.reactions?.total ?? 0) > 0)
-                    ReactionChipsList(messageId: message.id, reactions: message.reactions!),
-                  if (editStateText != null)
-                    Text(editStateText,
-                      textAlign: TextAlign.end,
-                      style: TextStyle(
-                        color: designVariables.labelEdited,
-                        fontSize: 12,
-                        height: (12 / 12),
-                        letterSpacing: proportionalLetterSpacing(
-                          context, 0.05, baseFontSize: 12))),
-                ])),
-              SizedBox(width: 16,
-                child: message.flags.contains(MessageFlag.starred)
-                  ? Icon(ZulipIcons.star_filled, size: 16, color: designVariables.star)
-                  : null),
-            ]),
-        ])));
+        child: DecoratedBox(
+          decoration: BoxDecoration(
+            color: isMessageActionSheetOpen ? designVariables.pressedTint : Colors.transparent
+          ),
+          child: Column(children: [
+            if (senderRow != null)
+              Padding(padding: const EdgeInsets.fromLTRB(16, 2, 16, 0),
+                child: senderRow),
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.baseline,
+              textBaseline: localizedTextBaseline(context),
+              children: [
+                const SizedBox(width: 16),
+                Expanded(child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  children: [
+                    MessageContent(message: message, content: widget.item.content),
+                    if ((message.reactions?.total ?? 0) > 0)
+                      ReactionChipsList(messageId: message.id, reactions: message.reactions!),
+                    if (editStateText != null)
+                      Text(editStateText,
+                        textAlign: TextAlign.end,
+                        style: TextStyle(
+                          color: designVariables.labelEdited,
+                          fontSize: 12,
+                          height: (12 / 12),
+                          letterSpacing: proportionalLetterSpacing(
+                            context, 0.05, baseFontSize: 12))),
+                  ])),
+                SizedBox(width: 16,
+                  child: message.flags.contains(MessageFlag.starred)
+                    ? Icon(ZulipIcons.star_filled, size: 16, color: designVariables.star)
+                    : null),
+              ]),
+          ]),
+        )));
   }
 }