add emoji button to composer

lib/widgets/chat_page/composer/chat_box.dart

@@ -9,6 +9,7 @@ import "package:nexus/models/configs/power_level_config.dart";
 import "package:nexus/models/relation_type.dart";
 import "package:nexus/widgets/chat_page/composer/mention_overlay.dart";
 import "package:nexus/widgets/chat_page/composer/relation_preview.dart";
+import "package:nexus/widgets/chat_page/emoji_picker_button.dart";
 
 class ChatBox extends HookConsumerWidget {
   final Message? relatedMessage;
@@ -91,6 +92,11 @@ class ChatBox extends HookConsumerWidget {
                 child: Row(
                   spacing: 8,
                   children: [
+                    EmojiPickerButton(
+                      context: context,
+                      onSelection: (_) => node?.requestFocus(),
+                      controller: controller.value,
+                    ),
                     PopupMenuButton(
                       tooltip: "Add media",
                       enabled: canSendMessages,

lib/widgets/chat_page/emoji_picker_button.dart

@@ -0,0 +1,40 @@
+import "package:emoji_text_field/emoji_text_field.dart";
+import "package:flutter/material.dart";
+import "package:flutter_hooks/flutter_hooks.dart";
+
+class EmojiPickerButton extends HookWidget {
+  final TextEditingController? controller;
+  final void Function(String emoji)? onSelection;
+  final VoidCallback? onPressed;
+  final BuildContext context;
+  const EmojiPickerButton({
+    this.controller,
+    this.onPressed,
+    this.onSelection,
+    required this.context,
+    super.key,
+  });
+
+  @override
+  Widget build(_) => IconButton(
+    onPressed: () {
+      onPressed?.call();
+      final controller = this.controller ?? TextEditingController();
+      showBottomSheet(
+        context: context,
+        builder: (context) => EmojiKeyboardView(
+          config: EmojiViewConfig(
+            backgroundColor: Theme.of(context).colorScheme.surfaceContainer,
+            height: 600,
+          ),
+          textController: controller
+            ..addListener(() async {
+              Navigator.of(context).pop();
+              onSelection?.call(controller.text);
+            }),
+        ),
+      );
+    },
+    icon: Icon(Icons.emoji_emotions),
+  );
+}

lib/widgets/chat_page/room_chat.dart

@@ -1,4 +1,3 @@
-import "package:emoji_text_field/emoji_text_field.dart";
 import "package:fast_immutable_collections/fast_immutable_collections.dart";
 import "package:flutter/material.dart";
 import "package:flutter/services.dart";
@@ -21,6 +20,7 @@ import "package:nexus/models/configs/power_level_config.dart";
 import "package:nexus/models/relation_type.dart";
 import "package:nexus/models/requests/report_request.dart";
 import "package:nexus/widgets/chat_page/composer/chat_box.dart";
+import "package:nexus/widgets/chat_page/emoji_picker_button.dart";
 import "package:nexus/widgets/chat_page/expandable_image_message.dart";
 import "package:nexus/widgets/chat_page/member_list.dart";
 import "package:nexus/widgets/chat_page/wrappers/message_wrapper.dart";
@@ -117,28 +117,11 @@ class RoomChat extends HookConsumerWidget {
                       icon: Text(emoji),
                     ),
                   ),
-              IconButton(
+              EmojiPickerButton(
-                onPressed: () {
+                context: context,
-                  Navigator.of(context).pop();
+                onPressed: Navigator.of(context).pop,
-                  final controller = TextEditingController();
+                onSelection: (emoji) =>
-                  showBottomSheet(
+                    notifier.sendReaction(emoji, message).onError(showError),
-                    context: context,
-                    builder: (context) => EmojiKeyboardView(
-                      config: EmojiViewConfig(
-                        backgroundColor: theme.colorScheme.surfaceContainer,
-                        height: 600,
-                      ),
-                      textController: controller
-                        ..addListener(() async {
-                          Navigator.of(context).pop();
-                          await notifier
-                              .sendReaction(controller.text, message)
-                              .onError(showError);
-                        }),
-                    ),
-                  );
-                },
-                icon: Icon(Icons.emoji_emotions),
               ),
             ],
           ),