feat: support customizing page icon (#3849)

* chore: don't use cache when building release package

* feat: refactor icon widget design

* feat: sync the emoji between page and view

* feat: use cache to store the emoji data to prevent reloading

* feat: customize the emoji item builder

* feat: add i18n and shuffle emoji button

* fix: integration test

* feat: replace emoji picker in Grid and slash menu

* feat: support adding icon on mobile platform

* feat: support adding and removing icon on mobile

* test: add integration tests

frontend/appflowy_flutter/lib/plugins/base/icon/icon_picker.dart

@@ -0,0 +1,121 @@
+import 'package:appflowy/generated/flowy_svgs.g.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/base/emoji/emoji_picker.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flowy_infra_ui/style_widget/hover.dart';
+import 'package:flutter/material.dart';
+
+enum FlowyIconType {
+  emoji,
+  icon,
+  custom;
+}
+
+class FlowyIconPicker extends StatefulWidget {
+  const FlowyIconPicker({
+    super.key,
+    required this.onSelected,
+  });
+
+  final void Function(FlowyIconType type, String value) onSelected;
+
+  @override
+  State<FlowyIconPicker> createState() => _FlowyIconPickerState();
+}
+
+class _FlowyIconPickerState extends State<FlowyIconPicker>
+    with SingleTickerProviderStateMixin {
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // ONLY supports emoji picker for now
+    return DefaultTabController(
+      length: 1,
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Row(
+            children: [
+              _buildTabs(context),
+              const Spacer(),
+              _RemoveIconButton(
+                onTap: () {
+                  widget.onSelected(FlowyIconType.icon, '');
+                },
+              ),
+            ],
+          ),
+          const Divider(
+            height: 2,
+          ),
+          Expanded(
+            child: TabBarView(
+              children: [
+                FlowyEmojiPicker(
+                  onEmojiSelected: (_, emoji) {
+                    widget.onSelected(FlowyIconType.emoji, emoji);
+                  },
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildTabs(BuildContext context) {
+    return Align(
+      alignment: Alignment.centerLeft,
+      child: TabBar(
+        indicatorSize: TabBarIndicatorSize.label,
+        isScrollable: true,
+        overlayColor: MaterialStatePropertyAll(
+          Theme.of(context).colorScheme.secondary,
+        ),
+        padding: EdgeInsets.zero,
+        tabs: [
+          FlowyHover(
+            style: const HoverStyle(borderRadius: BorderRadius.zero),
+            child: Padding(
+              padding: const EdgeInsets.symmetric(
+                horizontal: 12.0,
+                vertical: 8.0,
+              ),
+              child: FlowyText(
+                LocaleKeys.emoji_emojiTab.tr(),
+              ),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
+
+class _RemoveIconButton extends StatelessWidget {
+  const _RemoveIconButton({
+    required this.onTap,
+  });
+
+  final VoidCallback onTap;
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 28,
+      child: FlowyButton(
+        onTap: onTap,
+        useIntrinsicWidth: true,
+        text: FlowyText(
+          LocaleKeys.document_plugins_cover_removeIcon.tr(),
+        ),
+        leftIcon: const FlowySvg(FlowySvgs.delete_s),
+      ),
+    );
+  }
+}

frontend/appflowy_flutter/lib/plugins/base/icon/icon_picker_page.dart

@@ -0,0 +1,48 @@
+import 'package:appflowy/mobile/presentation/base/app_bar_actions.dart';
+import 'package:appflowy/plugins/base/icon/icon_picker.dart';
+import 'package:appflowy/workspace/application/view/view_service.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+class IconPickerPage extends StatefulWidget {
+  const IconPickerPage({
+    super.key,
+    required this.id,
+  });
+
+  /// view id
+  final String id;
+
+  @override
+  State<IconPickerPage> createState() => _IconPickerPageState();
+}
+
+class _IconPickerPageState extends State<IconPickerPage> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        titleSpacing: 0,
+        title: const FlowyText.semibold(
+          'Page icon',
+          fontSize: 14.0,
+        ),
+        leading: AppBarBackButton(
+          onTap: () => context.pop(),
+        ),
+      ),
+      body: SafeArea(
+        child: FlowyIconPicker(
+          onSelected: (_, emoji) {
+            ViewBackendService.updateViewIcon(
+              viewId: widget.id,
+              viewIcon: emoji,
+            );
+            context.pop();
+          },
+        ),
+      ),
+    );
+  }
+}