feat: Implement send reactions

lib/components/message_reactions.dart

@@ -2,6 +2,7 @@ import 'package:famedlysdk/famedlysdk.dart';
 import 'package:flutter/material.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 
+import 'dialogs/simple_dialogs.dart';
 import 'matrix.dart';
 
 class MessageReactions extends StatelessWidget {
@@ -47,10 +48,12 @@ class MessageReactions extends StatelessWidget {
                             e.content['m.relates_to']['key'] == r.key,
                         orElse: () => null);
                     if (evt != null) {
-                      evt.redact();
+                      SimpleDialogs(context)
+                          .tryRequestWithLoadingDialog(evt.redact());
                     }
                   } else {
-                    event.room.sendReaction(event.eventId, r.key);
+                    SimpleDialogs(context).tryRequestWithLoadingDialog(
+                        event.room.sendReaction(event.eventId, r.key));
                   }
                 },
               ))
@@ -69,8 +72,9 @@ class _Reaction extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final borderColor =
+    final borderColor = reacted
-        reacted ? Colors.red : Theme.of(context).secondaryHeaderColor;
+        ? Theme.of(context).primaryColor
+        : Theme.of(context).secondaryHeaderColor;
     final textColor = Theme.of(context).brightness == Brightness.dark
         ? Colors.white
         : Colors.black;
@@ -116,10 +120,10 @@ class _Reaction extends StatelessWidget {
         decoration: BoxDecoration(
           color: color,
           border: Border.all(
-            width: fontSize / 20,
+            width: 1,
             color: borderColor,
           ),
-          borderRadius: BorderRadius.all(Radius.circular(padding * 2)),
+          borderRadius: BorderRadius.circular(8),
         ),
         padding: EdgeInsets.all(padding),
         child: content,

lib/config/app_emojis.dart

@@ -0,0 +1,30 @@
+abstract class AppEmojis {
+  static const List<String> emojis = [
+    '👍',
+    '😊',
+    '😀',
+    '❤️',
+    '😍',
+    '😘',
+    '😇',
+    '😅',
+    '😭',
+    '😜',
+    '😱',
+    '😆',
+    '😉',
+    '😡',
+    '👋',
+    '🤔',
+    '🙁',
+    '🥳',
+    '😟',
+    '😄',
+    '😁',
+    '🙄',
+    '😂',
+    '🤣',
+    '😌',
+    '😬',
+  ];
+}

lib/views/chat.dart

@@ -1,8 +1,8 @@
 import 'dart:async';
 import 'dart:io';
 import 'dart:math';
-
 import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/config/app_emojis.dart';
 import 'package:flutter/scheduler.dart';
 import 'package:fluffychat/components/adaptive_page_layout.dart';
 import 'package:fluffychat/components/avatar.dart';
@@ -689,6 +689,61 @@ class _ChatState extends State<_Chat> {
                   },
                 ),
               ),
+              AnimatedContainer(
+                duration: Duration(milliseconds: 300),
+                height: (editEvent == null &&
+                        replyEvent == null &&
+                        selectedEvents.length == 1)
+                    ? 56
+                    : 0,
+                child: Material(
+                  color: Theme.of(context).secondaryHeaderColor,
+                  child: Builder(builder: (context) {
+                    if (!(editEvent == null &&
+                        replyEvent == null &&
+                        selectedEvents.length == 1)) {
+                      return Container();
+                    }
+                    var emojis = List<String>.from(AppEmojis.emojis);
+                    final allReactionEvents = selectedEvents.first
+                        .aggregatedEvents(timeline, RelationshipTypes.Reaction)
+                        ?.where((event) =>
+                            event.senderId == event.room.client.userID &&
+                            event.type == 'm.reaction');
+
+                    allReactionEvents.forEach((event) {
+                      try {
+                        emojis.remove(event.content['m.relates_to']['key']);
+                      } catch (_) {}
+                    });
+                    return ListView.builder(
+                      scrollDirection: Axis.horizontal,
+                      itemCount: emojis.length,
+                      itemBuilder: (c, i) => InkWell(
+                        borderRadius: BorderRadius.circular(8),
+                        onTap: () {
+                          SimpleDialogs(context).tryRequestWithLoadingDialog(
+                            room.sendReaction(
+                              selectedEvents.first.eventId,
+                              emojis[i],
+                            ),
+                          );
+                          setState(() => selectedEvents.clear());
+                        },
+                        child: Container(
+                          width: 56,
+                          height: 56,
+                          alignment: Alignment.center,
+                          child: Text(
+                            emojis[i],
+                            style: TextStyle(fontSize: 30),
+                          ),
+                        ),
+                      ),
+                    );
+                  }),
+                ),
+              ),
               AnimatedContainer(
                 duration: Duration(milliseconds: 300),
                 height: editEvent != null || replyEvent != null ? 56 : 0,