From d4884e6215c665ee9e466be2700d1e667a72c742 Mon Sep 17 00:00:00 2001
From: Kelrap <99418823+Kelrap@users.noreply.github.com>
Date: Thu, 19 Feb 2026 10:53:53 -0500
Subject: [PATCH] Make emoji search view look like other emoji picker tabs
 (#5756)

---
 lib/pages/chat/chat_emoji_picker.dart         | 14 ++-
 .../widgets/pangea_emoji_search_view.dart     | 95 +++++++++++++++++++
 2 files changed, 108 insertions(+), 1 deletion(-)
 create mode 100644 lib/pangea/chat/widgets/pangea_emoji_search_view.dart

diff --git a/lib/pages/chat/chat_emoji_picker.dart b/lib/pages/chat/chat_emoji_picker.dart
index 4a7076f5a..0fc3acaac 100644
--- a/lib/pages/chat/chat_emoji_picker.dart
+++ b/lib/pages/chat/chat_emoji_picker.dart
@@ -4,6 +4,7 @@ import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
 
 import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/l10n/l10n.dart';
+import 'package:fluffychat/pangea/chat/widgets/pangea_emoji_search_view.dart';
 import 'chat.dart';
 
 class ChatEmojiPicker extends StatelessWidget {
@@ -89,8 +90,19 @@ class ChatEmojiPicker extends StatelessWidget {
                               bottom: EmojiPickerItem.emojiView,
                             ),
                             searchViewConfig: SearchViewConfig(
-                              backgroundColor: theme.colorScheme.surface,
+                              backgroundColor:
+                                  theme.colorScheme.surfaceContainer,
                               buttonIconColor: theme.colorScheme.onSurface,
+                              customSearchView:
+                                  (
+                                    Config config,
+                                    EmojiViewState state,
+                                    VoidCallback showEmojiView,
+                                  ) => PangeaEmojiSearchView(
+                                    config,
+                                    state,
+                                    showEmojiView,
+                                  ),
                             ),
                             // Pangea#
                           ),
diff --git a/lib/pangea/chat/widgets/pangea_emoji_search_view.dart b/lib/pangea/chat/widgets/pangea_emoji_search_view.dart
new file mode 100644
index 000000000..176899dac
--- /dev/null
+++ b/lib/pangea/chat/widgets/pangea_emoji_search_view.dart
@@ -0,0 +1,95 @@
+import 'package:flutter/material.dart';
+
+import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
+
+class PangeaEmojiSearchView extends SearchView {
+  const PangeaEmojiSearchView(
+    super.config,
+    super.state,
+    super.showEmojiView, {
+    super.key,
+  });
+
+  @override
+  PangeaEmojiSearchViewState createState() => PangeaEmojiSearchViewState();
+}
+
+class PangeaEmojiSearchViewState extends SearchViewState {
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final emojiSize = widget.config.emojiViewConfig.getEmojiSize(
+          constraints.maxWidth,
+        );
+        final emojiBoxSize = widget.config.emojiViewConfig.getEmojiBoxSize(
+          constraints.maxWidth,
+        );
+
+        return Container(
+          color: widget.config.searchViewConfig.backgroundColor,
+          child: Column(
+            mainAxisSize: MainAxisSize.max,
+            children: [
+              Row(
+                children: [
+                  IconButton(
+                    onPressed: () {
+                      widget.showEmojiView();
+                    },
+                    color: widget.config.searchViewConfig.buttonIconColor,
+                    icon: const Icon(Icons.arrow_back),
+                  ),
+                  Expanded(
+                    child: TextField(
+                      onChanged: onTextInputChanged,
+                      focusNode: focusNode,
+                      style: widget.config.searchViewConfig.inputTextStyle,
+                      decoration: InputDecoration(
+                        border: InputBorder.none,
+                        hintText: widget.config.searchViewConfig.hintText,
+                        hintStyle: widget.config.searchViewConfig.hintTextStyle,
+                        contentPadding: const EdgeInsets.symmetric(
+                          horizontal: 16,
+                        ),
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+              Expanded(
+                child: Material(
+                  color: Theme.of(context).colorScheme.onInverseSurface,
+                  child: EmojiContainer(
+                    color: widget.config.emojiViewConfig.backgroundColor,
+                    buttonMode: widget.config.emojiViewConfig.buttonMode,
+                    child: GridView.builder(
+                      padding: const EdgeInsets.symmetric(vertical: 4.0),
+                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                        childAspectRatio: 1,
+                        crossAxisCount: widget.config.emojiViewConfig.columns,
+                        mainAxisSpacing:
+                            widget.config.emojiViewConfig.verticalSpacing,
+                        crossAxisSpacing:
+                            widget.config.emojiViewConfig.horizontalSpacing,
+                      ),
+                      scrollDirection: Axis.vertical,
+                      itemCount: results.length,
+                      itemBuilder: (context, index) {
+                        return buildEmoji(
+                          results[index],
+                          emojiSize,
+                          emojiBoxSize,
+                        );
+                      },
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}