fix: issues related to the emoji icon picker

frontend/appflowy_flutter/integration_test/desktop/database/database_calendar_test.dart

@@ -1,4 +1,5 @@
 import 'package:appflowy/plugins/database/calendar/presentation/calendar_event_editor.dart';
+import 'package:appflowy/shared/icon_emoji_picker/recent_icons.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pbenum.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
@@ -9,7 +10,14 @@ import '../../shared/database_test_op.dart';
 import '../../shared/util.dart';
 
 void main() {
-  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+  setUpAll(() {
+    IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+    RecentIcons.enable = false;
+  });
+
+  tearDownAll(() {
+    RecentIcons.enable = true;
+  });
 
   group('calendar', () {
     testWidgets('update calendar layout', (tester) async {

frontend/appflowy_flutter/integration_test/desktop/database/database_field_test.dart

@@ -1,20 +1,27 @@
-import 'package:flutter/material.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/database/grid/presentation/grid_page.dart';
 import 'package:appflowy/plugins/database/widgets/field/type_option_editor/select/select_option.dart';
+import 'package:appflowy/shared/icon_emoji_picker/recent_icons.dart';
 import 'package:appflowy/util/field_type_extension.dart';
 import 'package:appflowy_backend/protobuf/flowy-database2/protobuf.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
 import '../../shared/database_test_op.dart';
 import '../../shared/util.dart';
 
 void main() {
-  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+  setUpAll(() {
+    IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+    RecentIcons.enable = false;
+  });
+
+  tearDownAll(() {
+    RecentIcons.enable = true;
+  });
 
   group('grid edit field test:', () {
     testWidgets('rename existing field', (tester) async {

frontend/appflowy_flutter/integration_test/desktop/sidebar/sidebar_view_item_test.dart

@@ -1,6 +1,7 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/base/emoji/emoji_picker.dart';
 import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
+import 'package:appflowy/shared/icon_emoji_picker/recent_icons.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/view_item.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
 import 'package:easy_localization/easy_localization.dart';
@@ -12,7 +13,14 @@ import '../../shared/emoji.dart';
 import '../../shared/util.dart';
 
 void main() {
-  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+  setUpAll(() {
+    IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+    RecentIcons.enable = false;
+  });
+
+  tearDownAll(() {
+    RecentIcons.enable = true;
+  });
 
   group('Sidebar view item tests', () {
     testWidgets('Access view item context menu by right click', (tester) async {

frontend/appflowy_flutter/lib/plugins/base/emoji/emoji_picker.dart

@@ -13,6 +13,18 @@ import 'package:flutter_emoji_mart/flutter_emoji_mart.dart';
 EmojiData? kCachedEmojiData;
 const _kRecentEmojiCategoryId = 'Recent';
 
+class EmojiPickerResult {
+  EmojiPickerResult({
+    required this.emojiId,
+    required this.emoji,
+    this.isRandom = false,
+  });
+
+  final String emojiId;
+  final String emoji;
+  final bool isRandom;
+}
+
 class FlowyEmojiPicker extends StatefulWidget {
   const FlowyEmojiPicker({
     super.key,
@@ -21,7 +33,7 @@ class FlowyEmojiPicker extends StatefulWidget {
     this.ensureFocus = false,
   });
 
-  final EmojiSelectedCallback onEmojiSelected;
+  final ValueChanged<EmojiPickerResult> onEmojiSelected;
   final int emojiPerLine;
   final bool ensureFocus;
 
@@ -70,7 +82,9 @@ class _FlowyEmojiPickerState extends State<FlowyEmojiPicker> {
         defaultSkinTone: lastSelectedEmojiSkinTone ?? EmojiSkinTone.none,
       ),
       onEmojiSelected: (id, emoji) {
-        widget.onEmojiSelected.call(id, emoji);
+        widget.onEmojiSelected.call(
+          EmojiPickerResult(emojiId: id, emoji: emoji),
+        );
         RecentIcons.putEmoji(id);
       },
       padding: const EdgeInsets.symmetric(horizontal: 16.0),
@@ -106,7 +120,12 @@ class _FlowyEmojiPickerState extends State<FlowyEmojiPicker> {
             onSkinToneChanged: (value) {
               skinTone.value = value;
             },
-            onRandomEmojiSelected: widget.onEmojiSelected,
+            onRandomEmojiSelected: (id, emoji) {
+              widget.onEmojiSelected.call(
+                EmojiPickerResult(emojiId: id, emoji: emoji, isRandom: true),
+              );
+              RecentIcons.putEmoji(id);
+            },
           ),
         );
       },

frontend/appflowy_flutter/lib/plugins/base/emoji/emoji_picker_screen.dart

@@ -11,14 +11,17 @@ class MobileEmojiPickerScreen extends StatelessWidget {
   const MobileEmojiPickerScreen({
     super.key,
     this.title,
+    this.selectedType,
     this.tabs = const [PickerTabType.emoji, PickerTabType.icon],
   });
 
+  final PickerTabType? selectedType;
   final String? title;
   final List<PickerTabType> tabs;
 
   static const routeName = '/emoji_picker';
   static const pageTitle = 'title';
+  static const iconSelectedType = 'iconSelectedType';
   static const selectTabs = 'tabs';
 
   @override
@@ -30,8 +33,9 @@ class MobileEmojiPickerScreen extends StatelessWidget {
       body: SafeArea(
         child: FlowyIconEmojiPicker(
           tabs: tabs,
+          initialType: selectedType,
           onSelectedEmoji: (r) {
-            context.pop<EmojiIconData>(r);
+            context.pop<EmojiIconData>(r.data);
           },
         ),
       ),

frontend/appflowy_flutter/lib/plugins/database_document/presentation/database_document_title.dart

@@ -244,9 +244,9 @@ class _RenameRowPopoverState extends State<RenameRowPopover> {
           direction: PopoverDirection.bottomWithCenterAligned,
           offset: const Offset(0, 18),
           defaultIcon: const FlowySvg(FlowySvgs.document_s),
-          onSubmitted: (emoji, _) {
-            widget.onUpdateIcon(emoji);
-            PopoverContainer.of(context).close();
+          onSubmitted: (r, _) {
+            widget.onUpdateIcon(r.data);
+            if (!r.keepOpen) PopoverContainer.of(context).close();
           },
         ),
         const HSpace(6),

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart

@@ -26,8 +26,10 @@ class EmojiPickerButton extends StatelessWidget {
   final EmojiIconData emoji;
   final double emojiSize;
   final Size emojiPickerSize;
-  final void Function(EmojiIconData emoji, PopoverController? controller)
-      onSubmitted;
+  final void Function(
+    SelectedEmojiIconResult result,
+    PopoverController? controller,
+  ) onSubmitted;
   final PopoverController popoverController = PopoverController();
   final Widget? defaultIcon;
   final Offset? offset;
@@ -85,8 +87,10 @@ class _DesktopEmojiPickerButton extends StatelessWidget {
   final EmojiIconData emoji;
   final double emojiSize;
   final Size emojiPickerSize;
-  final void Function(EmojiIconData emoji, PopoverController? controller)
-      onSubmitted;
+  final void Function(
+    SelectedEmojiIconResult result,
+    PopoverController? controller,
+  ) onSubmitted;
   final PopoverController popoverController = PopoverController();
   final Widget? defaultIcon;
   final Offset? offset;
@@ -113,6 +117,7 @@ class _DesktopEmojiPickerButton extends StatelessWidget {
         height: emojiPickerSize.height,
         padding: const EdgeInsets.all(4.0),
         child: FlowyIconEmojiPicker(
+          initialType: emoji.type.toPickerTabType(),
           onSelectedEmoji: (r) {
             onSubmitted(r, popoverController);
           },
@@ -156,8 +161,10 @@ class _MobileEmojiPickerButton extends StatelessWidget {
 
   final EmojiIconData emoji;
   final double emojiSize;
-  final void Function(EmojiIconData emoji, PopoverController? controller)
-      onSubmitted;
+  final void Function(
+    SelectedEmojiIconResult result,
+    PopoverController? controller,
+  ) onSubmitted;
   final String? title;
   final bool enable;
   final EdgeInsets? margin;
@@ -177,11 +184,14 @@ class _MobileEmojiPickerButton extends StatelessWidget {
               final result = await context.push<EmojiIconData>(
                 Uri(
                   path: MobileEmojiPickerScreen.routeName,
-                  queryParameters: {MobileEmojiPickerScreen.pageTitle: title},
+                  queryParameters: {
+                    MobileEmojiPickerScreen.pageTitle: title,
+                    MobileEmojiPickerScreen.iconSelectedType: emoji.type.name,
+                  },
                 ).toString(),
               );
               if (result != null) {
-                onSubmitted(result, null);
+                onSubmitted(result.toSelectedResult(), null);
               }
             }
           : null,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/document_immersive_cover.dart

@@ -227,11 +227,12 @@ class _DocumentImmersiveCoverState extends State<DocumentImmersiveCover> {
               value: pageStyleIconBloc,
               child: Expanded(
                 child: FlowyIconEmojiPicker(
+                  initialType: icon.type.toPickerTabType(),
                   onSelectedEmoji: (r) {
                     pageStyleIconBloc.add(
-                      PageStyleIconEvent.updateIcon(r, true),
+                      PageStyleIconEvent.updateIcon(r.data, true),
                     );
-                    Navigator.pop(context);
+                    if (!r.keepOpen) Navigator.pop(context);
                   },
                 ),
               ),

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/document_cover_widget.dart

@@ -468,9 +468,9 @@ class _DocumentHeaderToolbarState extends State<DocumentHeaderToolbar> {
           popupBuilder: (BuildContext popoverContext) {
             isPopoverOpen = true;
             return FlowyIconEmojiPicker(
-              onSelectedEmoji: (result) {
-                widget.onIconOrCoverChanged(icon: result);
-                _popoverController.close();
+              onSelectedEmoji: (r) {
+                widget.onIconOrCoverChanged(icon: r.data);
+                if (!r.keepOpen) _popoverController.close();
               },
             );
           },
@@ -838,9 +838,7 @@ class _DocumentIconState extends State<DocumentIcon> {
 
   @override
   Widget build(BuildContext context) {
-    Widget child = EmojiIconWidget(
-      emoji: widget.icon,
-    );
+    Widget child = EmojiIconWidget(emoji: widget.icon);
 
     if (UniversalPlatform.isDesktopOrWeb) {
       child = AppFlowyPopover(
@@ -852,9 +850,10 @@ class _DocumentIconState extends State<DocumentIcon> {
         child: child,
         popupBuilder: (BuildContext popoverContext) {
           return FlowyIconEmojiPicker(
-            onSelectedEmoji: (result) {
-              widget.onChangeIcon(result);
-              _popoverController.close();
+            initialType: widget.icon.type.toPickerTabType(),
+            onSelectedEmoji: (r) {
+              widget.onChangeIcon(r.data);
+              if (!r.keepOpen) _popoverController.close();
             },
           );
         },
@@ -864,7 +863,12 @@ class _DocumentIconState extends State<DocumentIcon> {
         child: child,
         onTap: () async {
           final result = await context.push<EmojiIconData>(
-            MobileEmojiPickerScreen.routeName,
+            Uri(
+              path: MobileEmojiPickerScreen.routeName,
+              queryParameters: {
+                MobileEmojiPickerScreen.iconSelectedType: widget.icon.type.name,
+              },
+            ).toString(),
           );
           if (result != null) {
             widget.onChangeIcon(result);

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart

@@ -84,7 +84,7 @@ class RawEmojiIconWidget extends StatelessWidget {
           final iconData = IconsData.fromJson(jsonDecode(emoji.emoji));
           return IconWidget(
             data: iconData,
-            size: emojiSize,
+            size: emojiSize * 0.9,
           );
         default:
           return defaultEmoji;

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/page_style/_page_style_icon.dart

@@ -35,7 +35,7 @@ class _PageStyleIconState extends State<PageStyleIcon> {
         builder: (context, state) {
           final icon = state.icon ?? EmojiIconData.none();
           return GestureDetector(
-            onTap: () => _showIconSelector(context),
+            onTap: () => _showIconSelector(context, icon),
             behavior: HitTestBehavior.opaque,
             child: Container(
               height: 52,
@@ -66,7 +66,7 @@ class _PageStyleIconState extends State<PageStyleIcon> {
     );
   }
 
-  void _showIconSelector(BuildContext context) {
+  void _showIconSelector(BuildContext context, EmojiIconData icon) {
     Navigator.pop(context);
     final pageStyleIconBloc = PageStyleIconBloc(view: widget.view)
       ..add(const PageStyleIconEvent.initial());
@@ -85,11 +85,12 @@ class _PageStyleIconState extends State<PageStyleIcon> {
           value: pageStyleIconBloc,
           child: Expanded(
             child: FlowyIconEmojiPicker(
+              initialType: icon.type.toPickerTabType(),
               onSelectedEmoji: (r) {
                 pageStyleIconBloc.add(
-                  PageStyleIconEvent.updateIcon(r, true),
+                  PageStyleIconEvent.updateIcon(r.data, true),
                 );
-                Navigator.pop(ctx);
+                if (!r.keepOpen) Navigator.pop(ctx);
               },
             ),
           ),