feat: sync name on change (AppFlowy-IO#2033) (#2065)

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

@@ -1,4 +1,5 @@
 import 'dart:convert';
+import 'dart:async';
 
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/startup/startup.dart';
@@ -63,17 +64,34 @@ class SettingsUserView extends StatelessWidget {
 }
 
 @visibleForTesting
-class UserNameInput extends StatelessWidget {
+class UserNameInput extends StatefulWidget {
   final String name;
+
   const UserNameInput(
     this.name, {
     Key? key,
   }) : super(key: key);
 
+  @override
+  UserNameInputState createState() => UserNameInputState();
+}
+
+class UserNameInputState extends State<UserNameInput> {
+  late TextEditingController _controller;
+
+  Timer? _debounce;
+  final Duration _debounceDuration = const Duration(milliseconds: 500);
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = TextEditingController(text: widget.name);
+  }
+
   @override
   Widget build(BuildContext context) {
     return TextField(
-      controller: TextEditingController()..text = name,
+      controller: _controller,
       decoration: InputDecoration(
         labelText: LocaleKeys.settings_user_name.tr(),
         labelStyle: Theme.of(context)
@@ -88,13 +106,25 @@ class UserNameInput extends StatelessWidget {
           borderSide: BorderSide(color: Theme.of(context).colorScheme.primary),
         ),
       ),
-      onSubmitted: (val) {
+      onChanged: (val) {
+        if (_debounce?.isActive ?? false) {
+          _debounce!.cancel();
+        }
+
+        _debounce = Timer(_debounceDuration, () {
           context
               .read<SettingsUserViewBloc>()
               .add(SettingsUserEvent.updateUserName(val));
+        });
       },
     );
   }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
 }
 
 class _OpenaiKeyInput extends StatefulWidget {