feat: Add static + button to pick reaction

lib/pages/chat/reactions_picker.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 
 import 'package:matrix/matrix.dart';
 
+import 'package:fluffychat/config/app_config.dart';
 import 'package:fluffychat/config/app_emojis.dart';
 import 'package:fluffychat/pages/chat/chat.dart';
 
@@ -20,7 +21,7 @@ class ReactionsPicker extends StatelessWidget {
       duration: const Duration(milliseconds: 300),
       height: (display) ? 56 : 0,
       child: Material(
-        color: Theme.of(context).secondaryHeaderColor,
+        color: Colors.transparent,
         child: Builder(builder: (context) {
           if (!display) {
             return Container();
@@ -37,34 +38,46 @@ class ReactionsPicker extends StatelessWidget {
               emojis.remove(event.content['m.relates_to']['key']);
             } catch (_) {}
           }
-          return ListView.builder(
+          return Row(children: [
-            scrollDirection: Axis.horizontal,
+            Expanded(
-            itemCount: emojis.length + 1,
+                child: Container(
-            itemBuilder: (c, i) => i == emojis.length
+                    decoration: BoxDecoration(
-                ? InkWell(
+                        color: Theme.of(context).secondaryHeaderColor,
-                    borderRadius: BorderRadius.circular(8),
+                        borderRadius: const BorderRadius.only(
-                    onTap: () => controller.pickEmojiAction(allReactionEvents),
+                            bottomRight:
-                    child: Container(
+                                Radius.circular(AppConfig.borderRadius))),
-                      width: 56,
+                    padding: const EdgeInsets.only(right: 1),
-                      height: 56,
+                    child: ListView.builder(
-                      alignment: Alignment.center,
+                      scrollDirection: Axis.horizontal,
-                      child: const Icon(Icons.add_outlined),
+                      itemCount: emojis.length,
-                    ),
+                      itemBuilder: (c, i) => InkWell(
-                  )
+                        borderRadius: BorderRadius.circular(8),
-                : InkWell(
+                        onTap: () => controller.sendEmojiAction(emojis[i]),
-                    borderRadius: BorderRadius.circular(8),
+                        child: Container(
-                    onTap: () => controller.sendEmojiAction(emojis[i]),
+                          width: 56,
-                    child: Container(
+                          height: 56,
-                      width: 56,
+                          alignment: Alignment.center,
-                      height: 56,
+                          child: Text(
-                      alignment: Alignment.center,
+                            emojis[i],
-                      child: Text(
+                            style: const TextStyle(fontSize: 30),
-                        emojis[i],
+                          ),
-                        style: const TextStyle(fontSize: 30),
+                        ),
                       ),
-                    ),
+                    ))),
+            InkWell(
+                borderRadius: BorderRadius.circular(8),
+                child: Container(
+                  margin: const EdgeInsets.symmetric(horizontal: 8),
+                  width: 36,
+                  height: 56,
+                  decoration: BoxDecoration(
+                    color: Theme.of(context).secondaryHeaderColor,
+                    shape: BoxShape.circle,
                   ),
-          );
+                  child: const Icon(Icons.add_outlined),
+                ),
+                onTap: () => controller.pickEmojiAction(allReactionEvents))
+          ]);
         }),
       ),
     );