feat: add widget to update username

frontend/app_flowy/assets/translations/en.json

@@ -141,6 +141,7 @@
     "menu": {
       "appearance": "Appearance",
       "language": "Language",
+      "settings": "Settings",
       "open": "Open Settings"
     },
     "appearance": {

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

@@ -74,7 +74,7 @@ class MenuUser extends StatelessWidget {
           showDialog(
             context: context,
             builder: (context) {
-              return const SettingsDialog();
+              return SettingsDialog(user);
             },
           );
         },

frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart

@@ -2,13 +2,16 @@ import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/workspace/application/appearance.dart';
 import 'package:app_flowy/workspace/presentation/settings/widgets/settings_appearance_view.dart';
 import 'package:app_flowy/workspace/presentation/settings/widgets/settings_language_view.dart';
+import 'package:app_flowy/workspace/presentation/settings/widgets/settings_settings_view.dart';
 import 'package:app_flowy/workspace/presentation/settings/widgets/settings_menu.dart';
+import 'package:flowy_sdk/protobuf/flowy-user/protobuf.dart' show UserProfile;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
 class SettingsDialog extends StatefulWidget {
-  const SettingsDialog({Key? key}) : super(key: key);
+  final UserProfile user;
+  SettingsDialog(this.user, {Key? key}) : super(key: ValueKey(user.id));
 
   @override
   State<SettingsDialog> createState() => _SettingsDialogState();
@@ -17,10 +20,14 @@ class SettingsDialog extends StatefulWidget {
 class _SettingsDialogState extends State<SettingsDialog> {
   int _selectedViewIndex = 0;
 
-  final List<Widget> settingsViews = const [
+  Widget getSettingsView(int index, UserProfile user) {
-    SettingsAppearanceView(),
+    final List<Widget> settingsViews = [
-    SettingsLanguageView(),
+      const SettingsAppearanceView(),
-  ];
+      const SettingsLanguageView(),
+      SettingsSettingsView(user),
+    ];
+    return settingsViews[index];
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -59,7 +66,7 @@ class _SettingsDialogState extends State<SettingsDialog> {
               const VerticalDivider(),
               const SizedBox(width: 10),
               Expanded(
-                child: settingsViews[_selectedViewIndex],
+                child: getSettingsView(_selectedViewIndex, widget.user),
               )
             ],
           ),

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

@@ -34,6 +34,16 @@ class SettingsMenu extends StatelessWidget {
           icon: Icons.translate,
           changeSelectedIndex: changeSelectedIndex,
         ),
+        const SizedBox(
+          height: 10,
+        ),
+        SettingsMenuElement(
+          index: 2,
+          currentIndex: currentIndex,
+          label: LocaleKeys.settings_menu_settings.tr(),
+          icon: Icons.account_box_outlined,
+          changeSelectedIndex: changeSelectedIndex,
+        ),
       ],
     );
   }

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

@@ -0,0 +1,48 @@
+import 'package:app_flowy/startup/startup.dart';
+import 'package:flutter/material.dart';
+import 'package:app_flowy/workspace/application/menu/menu_user_bloc.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flowy_sdk/protobuf/flowy-user/protobuf.dart' show UserProfile;
+
+class SettingsSettingsView extends StatelessWidget {
+  final UserProfile user;
+  SettingsSettingsView(this.user, {Key? key}) : super(key: ValueKey(user.id));
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider<MenuUserBloc>(
+      create: (context) => getIt<MenuUserBloc>(param1: user)..add(const MenuUserEvent.initial()),
+      child: BlocBuilder<MenuUserBloc, MenuUserState>(
+        builder: (context, state) => SingleChildScrollView(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: const [UserNameInput()],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class UserNameInput extends StatefulWidget {
+  const UserNameInput({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  State<UserNameInput> createState() => _UserNameInputState();
+}
+
+class _UserNameInputState extends State<UserNameInput> {
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+        decoration: const InputDecoration(
+          labelText: 'Name',
+        ),
+        onSubmitted: (val) {
+          context.read<MenuUserBloc>().add(MenuUserEvent.updateUserName(val));
+          debugPrint("Value $val submitted");
+        });
+  }
+}