Fixes for Settings Page

frontend/pweb/lib/pages/settings/profile/account/name/name.dart

@@ -0,0 +1,93 @@
+import 'package:flutter/material.dart';
+
+import 'package:provider/provider.dart';
+
+import 'package:pshared/provider/account.dart';
+
+import 'package:pweb/pages/settings/profile/account/name/actions.dart';
+import 'package:pweb/pages/settings/profile/account/name/state.dart';
+import 'package:pweb/pages/settings/profile/account/name/text.dart';
+
+
+class _AccountNameConstants {
+  static const inputWidth = 200.0;
+  static const spacing = 8.0;
+  static const errorSpacing = 4.0;
+  static const borderWidth = 2.0;
+}
+
+class AccountName extends StatelessWidget {
+  final String name;
+  final String title;
+  final String hintText;
+  final String errorText;
+
+  const AccountName({
+    super.key,
+    required this.name,
+    required this.title,
+    required this.hintText,
+    required this.errorText,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ChangeNotifierProvider(
+      create: (ctx) => AccountNameState(
+        initialName: name,
+        errorMessage: errorText,
+        accountProvider: ctx.read<AccountProvider>(),
+      ),
+      child: _AccountNameBody(
+        hintText: hintText,
+      ),
+    );
+  }
+}
+
+class _AccountNameBody extends StatelessWidget {
+  const _AccountNameBody({
+    required this.hintText,
+  });
+
+  final String hintText;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Consumer2<AccountNameState, AccountProvider>(
+      builder: (context, state, provider, _) {
+        final currentName = provider.account?.name ?? state.initialName;
+        state.syncName(currentName);
+
+        return Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                AccountNameText(
+                  state: state,
+                  hintText: hintText,
+                  inputWidth: _AccountNameConstants.inputWidth,
+                  borderWidth: _AccountNameConstants.borderWidth,
+                ),
+                const SizedBox(width: _AccountNameConstants.spacing),
+                AccountNameActions(state: state),
+              ],
+            ),
+            const SizedBox(height: _AccountNameConstants.errorSpacing),
+            if (state.errorText.isNotEmpty)
+              Text(
+                state.errorText,
+                style: theme.textTheme.bodySmall?.copyWith(
+                  color: theme.colorScheme.error,
+                ),
+              ),
+          ],
+        );
+      },
+    );
+  }
+}