feat: add the recent icons and emojis to the selector

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

@@ -5,6 +5,7 @@ import 'package:appflowy/plugins/database/widgets/cell_editor/checklist_cell_edi
 import 'package:appflowy/plugins/database/widgets/row/row_detail.dart';
 import 'package:appflowy/plugins/document/document_page.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.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/field_entities.pbenum.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
@@ -22,7 +23,7 @@ import '../../shared/util.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
-
+  RecentIcons.enable = false;
   group('grid row detail page:', () {
     testWidgets('opens', (tester) async {
       await tester.initializeAppFlowy();

frontend/appflowy_flutter/integration_test/desktop/document/document_with_cover_image_test.dart

@@ -1,6 +1,7 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_cover_widget.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_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
@@ -13,7 +14,7 @@ import '../../shared/util.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
-
+  RecentIcons.enable = false;
   group('cover image:', () {
     testWidgets('document cover tests', (tester) async {
       await tester.initializeAppFlowy();

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

@@ -1,5 +1,6 @@
 import 'package:appflowy/shared/icon_emoji_picker/flowy_icon_emoji_picker.dart';
 import 'package:appflowy/shared/icon_emoji_picker/icon_picker.dart';
+import 'package:appflowy/shared/icon_emoji_picker/recent_icons.dart';
 import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/space_icon_popup.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/view.pb.dart';
 import 'package:flutter_test/flutter_test.dart';
@@ -11,7 +12,7 @@ import '../../shared/expectation.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
-
+  RecentIcons.enable = false;
   final emoji = EmojiIconData.emoji('😁');
 
   Future<EmojiIconData> loadIcon() async {

frontend/appflowy_flutter/lib/core/config/kv_keys.dart

@@ -109,4 +109,9 @@ class KVKeys {
   ///
   /// The value is a boolean string
   static const String hasUpgradedSpace = 'hasUpgradedSpace060';
+
+  /// The key for saving the rencent icons
+  ///
+  /// The value is a json string of [RecentIcons]
+  static const String kRecentIcons = 'kRecentIcons';
 }

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

@@ -1,6 +1,9 @@
+import 'dart:math';
+
 import 'package:appflowy/plugins/base/emoji/emoji_picker_header.dart';
 import 'package:appflowy/shared/icon_emoji_picker/emoji_search_bar.dart';
 import 'package:appflowy/shared/icon_emoji_picker/emoji_skin_tone.dart';
+import 'package:appflowy/shared/icon_emoji_picker/recent_icons.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
@@ -24,28 +27,53 @@ class FlowyEmojiPicker extends StatefulWidget {
 }
 
 class _FlowyEmojiPickerState extends State<FlowyEmojiPicker> {
-  EmojiData? emojiData;
+  late EmojiData emojiData;
+  bool loaded = false;
+
+  void loadEmojis(EmojiData data) {
+    RecentIcons.getEmojiIds().then((v) {
+      if (v.isEmpty) {
+        emojiData = data;
+        setState(() {
+          loaded = true;
+        });
+        return;
+      }
+      final categories = List.of(data.categories);
+      categories.insert(
+        0,
+        Category(
+          id: 'Recent',
+          emojiIds: v.sublist(0, min(widget.emojiPerLine, v.length)),
+        ),
+      );
+      emojiData = EmojiData(categories: categories, emojis: data.emojis);
+      setState(() {
+        loaded = true;
+      });
+    });
+  }
 
   @override
   void initState() {
     super.initState();
 
     // load the emoji data from cache if it's available
     if (kCachedEmojiData != null) {
-      emojiData = kCachedEmojiData;
+      loadEmojis(kCachedEmojiData!);
     } else {
       EmojiData.builtIn().then(
         (value) {
           kCachedEmojiData = value;
-          setState(() => emojiData = value);
+          loadEmojis(value);
         },
       );
     }
   }
 
   @override
   Widget build(BuildContext context) {
-    if (emojiData == null) {
+    if (!loaded) {
       return const Center(
         child: SizedBox.square(
           dimension: 24.0,
@@ -57,21 +85,23 @@ class _FlowyEmojiPickerState extends State<FlowyEmojiPicker> {
     }
 
     return EmojiPicker(
-      emojiData: emojiData!,
+      emojiData: emojiData,
       configuration: EmojiPickerConfiguration(
         showTabs: false,
         defaultSkinTone: lastSelectedEmojiSkinTone ?? EmojiSkinTone.none,
-        perLine: widget.emojiPerLine,
       ),
-      onEmojiSelected: widget.onEmojiSelected,
+      onEmojiSelected: (id, emoji) {
+        widget.onEmojiSelected.call(id, emoji);
+        RecentIcons.putEmoji(id);
+      },
       padding: const EdgeInsets.symmetric(horizontal: 16.0),
       headerBuilder: (context, category) {
         return FlowyEmojiHeader(
           category: category,
         );
       },
       itemBuilder: (context, emojiId, emoji, callback) {
-        final name = emojiData?.emojis[emojiId]?.name ?? '';
+        final name = emojiData.emojis[emojiId]?.name ?? '';
         return SizedBox.square(
           dimension: 36.0,
           child: FlowyButton(
@@ -93,7 +123,7 @@ class _FlowyEmojiPickerState extends State<FlowyEmojiPicker> {
         return Padding(
           padding: const EdgeInsets.symmetric(horizontal: 16.0),
           child: FlowyEmojiSearchBar(
-            emojiData: emojiData!,
+            emojiData: emojiData,
             onKeywordChanged: (value) {
               keyword.value = value;
             },