feature: added name icon (#2529)

* feature: added name icon

* feature: added generating color in the defined HSL ranges

* refactor: removed trailing commas for readibility

* fix: fixed trimming name and separated color picker into util file

* fix: changed to using where instead of trim

Co-authored-by: Lucas.Xu <[email protected]>

* feat: simplify the color generator

---------

Co-authored-by: Lucas.Xu <[email protected]>

frontend/appflowy_flutter/lib/startup/deps_resolver.dart

@@ -179,4 +179,4 @@ void _resolveGridDeps(GetIt getIt) {
     (viewId, cache) =>
         DatabasePropertyBloc(viewId: viewId, fieldController: cache),
   );
-}
+}

frontend/appflowy_flutter/lib/util/color_generator/color_generator.dart

@@ -0,0 +1,11 @@
+import 'dart:ui';
+
+class ColorGenerator {
+  Color generateColorFromString(String string) {
+    final hash = string.hashCode;
+    int r = (hash & 0xFF0000) >> 16;
+    int g = (hash & 0x00FF00) >> 8;
+    int b = hash & 0x0000FF;
+    return Color.fromRGBO(r, g, b, 0.5);
+  }
+}

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/menu_user.dart

@@ -1,4 +1,5 @@
 import 'package:appflowy/startup/startup.dart';
+import 'package:appflowy/util/color_generator/color_generator.dart';
 import 'package:appflowy/workspace/application/menu/menu_user_bloc.dart';
 import 'package:appflowy/workspace/presentation/settings/settings_dialog.dart';
 import 'package:appflowy/workspace/presentation/settings/widgets/settings_user_view.dart';
@@ -45,8 +46,31 @@ class MenuUser extends StatelessWidget {
     String iconUrl = context.read<MenuUserBloc>().state.userProfile.iconUrl;
     if (iconUrl.isEmpty) {
       iconUrl = defaultUserAvatar;
+      final String name = context.read<MenuUserBloc>().state.userProfile.name;
+      final Color color = ColorGenerator().generateColorFromString(name);
+      const initialsCount = 2;
+      // Taking the first letters of the name components and limiting to 2 elements
+      final nameInitials = name
+          .split(' ')
+          .where((element) => element.isNotEmpty)
+          .take(initialsCount)
+          .map((element) => element[0].toUpperCase())
+          .join('');
+      return Container(
+        width: 28,
+        height: 28,
+        alignment: Alignment.center,
+        decoration: BoxDecoration(
+          color: color,
+          shape: BoxShape.circle,
+        ),
+        child: FlowyText.semibold(
+          nameInitials,
+          color: Colors.white,
+          fontSize: nameInitials.length == initialsCount ? 12 : 14,
+        ),
+      );
     }
-
     return SizedBox(
       width: 25,
       height: 25,