Better emoji picker (#73)

Adds a better, custom, emoji picker.

Reviewed-on: Nexus/nexus#73

lib/widgets/composer/composer.dart

@@ -2,6 +2,7 @@ import "dart:io";
 
 import "package:fast_immutable_collections/fast_immutable_collections.dart";
 import "package:file_selector/file_selector.dart";
+import "package:material_emoji_picker/material_emoji_picker.dart";
 import "package:material_ui/material_ui.dart";
 import "package:flutter/services.dart";
 import "package:flutter_hooks/flutter_hooks.dart";
@@ -15,7 +16,6 @@ import "package:nexus/models/event.dart";
 import "package:nexus/models/relation_type.dart";
 import "package:nexus/widgets/composer/mention_overlay.dart";
 import "package:nexus/widgets/composer/relation_preview.dart";
-import "package:nexus/widgets/emoji_picker_button.dart";
 import "package:nexus/main.dart";
 
 class const Composer(
@@ -119,10 +119,19 @@ class const Composer(
                           ),
                         )
                         ? [
-                            EmojiPickerButton(
-                              context: context,
-                              onSelection: (_) => node?.requestFocus(),
-                              controller: controller.value,
+                            IconButton(
+                              onPressed: () => showModalBottomSheet(
+                                isScrollControlled: true,
+                                context: context,
+                                builder: (context) => EmojiPicker(
+                                  onSelection: (value) {
+                                    Navigator.of(context).pop();
+                                    controller.value.text += value;
+                                    node?.requestFocus();
+                                  },
+                                ),
+                              ),
+                              icon: Icon(Icons.emoji_emotions),
                             ),
                             PopupMenuButton(
                               tooltip: "Add media",

lib/widgets/emoji_picker_button.dart

@@ -1,46 +0,0 @@
-import "package:emoji_text_field/emoji_text_field.dart";
-import "package:material_ui/material_ui.dart";
-import "package:hooks_riverpod/hooks_riverpod.dart";
-import "package:nexus/controllers/emoji.dart";
-
-final class const EmojiPickerButton({
-  required final BuildContext context,
-  final TextEditingController? controller,
-  final void Function(String emoji)? onSelection,
-  final VoidCallback? onPressed,
-  super.key,
-}) extends HookConsumerWidget {
-  @override
-  Widget build(_, WidgetRef ref) => IconButton(
-    onPressed: () async {
-      onPressed?.call();
-      final controller = this.controller ?? .new();
-
-      final emojis = await ref.watch(EmojiController.provider.future);
-      if (context.mounted) {
-        showModalBottomSheet(
-          context: context,
-          builder: (context) => EmojiKeyboardView(
-            config: .new(
-              showRecentTab: false,
-              customCategories: emojis.$1.unlock,
-              customKeywords: emojis.$2.unlock,
-              backgroundColor: Theme.of(context).colorScheme.surfaceContainer,
-              height: 600,
-            ),
-            textController: controller
-              ..addListener(() {
-                // Without this, there will sometimes be a debugLocked is not true error sometimes
-                // It might be preferable to use a microtask instead of a `Future.delayed`.
-                Future.delayed(.zero, () {
-                  if (context.mounted) Navigator.of(context).pop();
-                });
-                onSelection?.call(controller.text);
-              }),
-          ),
-        );
-      }
-    },
-    icon: Icon(Icons.emoji_emotions),
-  );
-}

lib/widgets/room_chat.dart

@@ -17,7 +17,7 @@ import "package:nexus/models/content/message.dart";
 import "package:nexus/models/event.dart";
 import "package:nexus/models/relation_type.dart";
 import "package:nexus/widgets/composer/composer.dart";
-import "package:nexus/widgets/emoji_picker_button.dart";
+import "package:material_emoji_picker/material_emoji_picker.dart";
 import "package:nexus/widgets/pinned_events_drawer.dart";
 import "package:nexus/widgets/renderers/event.dart";
 import "package:nexus/widgets/member_list.dart";
@@ -234,11 +234,26 @@ final class const RoomChat({
                           icon: Text(emoji),
                         ),
                       ),
-                  EmojiPickerButton(
-                    context: context,
-                    onPressed: Navigator.of(context).pop,
-                    onSelection: (emoji) =>
-                        notifier.sendReaction(emoji, event).onError(showError),
+                  IconButton(
+                    icon: Icon(Icons.emoji_emotions),
+
+                    onPressed: () {
+                      // TODO: More adaptive, e.g. dialog on desktop
+                      Navigator.of(context).pop();
+                      showModalBottomSheet(
+                        isScrollControlled: true,
+                        context: context,
+                        builder: (context) => EmojiPicker(
+                          onSelection: (value) {
+                            Navigator.of(context).pop();
+                            notifier
+                                .sendReaction(value, event)
+                                .onError(showError);
+                          },
+                          allowFreeText: true,
+                        ),
+                      );
+                    },
                   ),
                 ],
               ),