feat: pick icon in settings dialog

frontend/app_flowy/assets/images/emoji/close.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="20.9497" y="9.63599" width="2" height="16" rx="1" transform="rotate(45 20.9497 9.63599)" fill="#333333" />
+    <rect x="22.364" y="20.95" width="2" height="16" rx="1" transform="rotate(135 22.364 20.95)" fill="#333333" />
+</svg>

frontend/app_flowy/assets/images/emoji/favorite_active.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M16 6L18.781 11.9243L25 12.8801L20.5 17.489L21.562 24L16 20.9243L10.438 24L11.5 17.489L7 12.8801L13.219 11.9243L16 6Z"
+        fill="#FFD667" stroke="#FFD667" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>

frontend/app_flowy/assets/images/emoji/favorite_inacvtive.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M16 6L18.781 11.9243L25 12.8801L20.5 17.489L21.562 24L16 20.9243L10.438 24L11.5 17.489L7 12.8801L13.219 11.9243L16 6Z"
+        stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>

frontend/app_flowy/assets/images/emoji/image.svg

@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="3" y="6" width="26" height="20" rx="3" stroke="#333333" stroke-width="2" />
+    <circle cx="11" cy="13" r="2" stroke="#333333" stroke-width="2" />
+    <path d="M10 26L20.2239 16.9121C20.8422 16.3625 21.7349 16.2503 22.4699 16.6296L29 20" stroke="#333333"
+        stroke-width="2" />
+</svg>

frontend/app_flowy/assets/images/emoji/page.svg

@@ -0,0 +1,6 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M18 5V12C18 13.1046 18.8954 14 20 14H24" stroke="#333333" stroke-width="2" />
+    <path
+        d="M7 7C7 5.89543 7.89543 5 9 5H16H17C18.259 5 19.4446 5.59278 20.2 6.6L24.2 11.9333C24.7193 12.6257 25 13.4679 25 14.3333V16V25C25 26.1046 24.1046 27 23 27H9C7.89543 27 7 26.1046 7 25V7Z"
+        stroke="#333333" stroke-width="2" />
+</svg>

frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_user_view.dart

@@ -2,7 +2,11 @@ import 'package:app_flowy/startup/startup.dart';
 import 'package:flutter/material.dart';
 import 'package:app_flowy/workspace/application/user/settings_user_bloc.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flowy_sdk/protobuf/flowy-user/user_profile.pb.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+import 'dart:convert';
 
 class SettingsUserView extends StatelessWidget {
   final UserProfilePB user;
@@ -16,7 +20,7 @@ class SettingsUserView extends StatelessWidget {
         builder: (context, state) => SingleChildScrollView(
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
-            children: [_renderUserNameInput(context)],
+            children: [_renderUserNameInput(context), const VSpace(20), const _CurrentIcon()],
           ),
         ),
       ),
@@ -48,3 +52,111 @@ class _UserNameInput extends StatelessWidget {
         });
   }
 }
+
+class _CurrentIcon extends StatefulWidget {
+  const _CurrentIcon({Key? key}) : super(key: key);
+
+  @override
+  State<_CurrentIcon> createState() => _CurrentIconState();
+}
+
+class _CurrentIconState extends State<_CurrentIcon> {
+  String iconUrl = 'assets/images/emoji/page.svg';
+
+  _setIcon(String path) {
+    setState(() {
+      iconUrl = path;
+    });
+    Navigator.of(context).pop();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Colors.transparent,
+      child: GestureDetector(
+          onTap: () {
+            showDialog(
+              context: context,
+              builder: (BuildContext context) {
+                return SimpleDialog(
+                    title: const Text('Select an Icon'),
+                    children: <Widget>[SizedBox(height: 300, width: 300, child: IconGallery(_setIcon))]);
+              },
+            );
+          },
+          child: Column(children: <Widget>[
+            const Align(alignment: Alignment.topLeft, child: Text("Icon")),
+            Align(
+              alignment: Alignment.centerLeft,
+              child: SvgPicture.asset(iconUrl),
+            ),
+          ])),
+    );
+  }
+}
+
+class IconGallery extends StatelessWidget {
+  final Function setIcon;
+  const IconGallery(this.setIcon, {Key? key}) : super(key: key);
+
+  Future<List<String>> _initImages(BuildContext context) async {
+    // >> To get paths you need these 2 lines
+    final manifestContent = await DefaultAssetBundle.of(context).loadString('AssetManifest.json');
+
+    final Map<String, dynamic> manifestMap = json.decode(manifestContent);
+    // >> To get paths you need these 2 lines
+
+    final imagePaths =
+        manifestMap.keys.where((String key) => key.startsWith('assets/images/emoji/') && key.endsWith('.svg')).toList();
+
+    return imagePaths;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder<List<String>>(
+      future: _initImages(context),
+      builder: (BuildContext context, AsyncSnapshot<List<String>> snapshot) {
+        if (snapshot.hasData) {
+          return GridView.count(
+            primary: false,
+            padding: const EdgeInsets.all(20),
+            crossAxisSpacing: 10,
+            mainAxisSpacing: 10,
+            crossAxisCount: 5,
+            children: (snapshot.data ?? []).map((String fileName) {
+              return IconOption(fileName, 50.0, setIcon);
+            }).toList(),
+          );
+        } else {
+          return const Center(
+            child: CircularProgressIndicator(),
+          );
+        }
+      },
+    );
+  }
+}
+
+class IconOption extends StatelessWidget {
+  final String fileName;
+  final double size;
+  final Function setIcon;
+
+  IconOption(this.fileName, this.size, this.setIcon, {Key? key}) : super(key: ValueKey(fileName));
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Colors.transparent,
+      child: GestureDetector(
+        onTap: () {
+          debugPrint('$fileName is tapped');
+          setIcon(fileName);
+        },
+        child: SvgPicture.asset(fileName),
+      ),
+    );
+  }
+}

frontend/app_flowy/pubspec.yaml

@@ -118,6 +118,7 @@ flutter:
     - assets/images/home/
     - assets/images/editor/
     - assets/images/grid/
+    - assets/images/emoji/
     - assets/images/grid/field/
     - assets/images/grid/setting/
     - assets/translations/