Fixes for Settings Page

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

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/pages/settings/profile/account/name/state.dart';
+
+
+class AccountNameActions extends StatelessWidget {
+  const AccountNameActions({
+    super.key,
+    required this.state,
+  });
+
+  final AccountNameState state;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    if (state.isEditing) {
+      return Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          IconButton(
+            icon: Icon(Icons.check, color: theme.colorScheme.primary),
+            onPressed: state.isBusy
+                ? null
+                : () async {
+                    final wasSaved = await state.save();
+                    if (!context.mounted || wasSaved || state.errorText.isEmpty) return;
+                    ScaffoldMessenger.of(context).showSnackBar(
+                      SnackBar(content: Text(state.errorText)),
+                    );
+                  },
+          ),
+          IconButton(
+            icon: Icon(Icons.close, color: theme.colorScheme.error),
+            onPressed: state.isBusy ? null : state.cancelEditing,
+          ),
+        ],
+      );
+    }
+
+    return IconButton(
+      icon: Icon(Icons.edit, color: theme.colorScheme.primary),
+      onPressed: state.isBusy ? null : state.startEditing,
+    );
+  }
+}

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,
+                ),
+              ),
+          ],
+        );
+      },
+    );
+  }
+}

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

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/pages/settings/profile/account/name/state.dart';
+
+
+class AccountNameText extends StatelessWidget {
+  const AccountNameText({
+    super.key,
+    required this.state,
+    required this.hintText,
+    required this.inputWidth,
+    required this.borderWidth,
+  });
+
+  final AccountNameState state;
+  final String hintText;
+  final double inputWidth;
+  final double borderWidth;
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    if (state.isEditing) {
+      return SizedBox(
+        width: inputWidth,
+        child: TextFormField(
+          controller: state.controller,
+          style: theme.textTheme.headlineMedium?.copyWith(
+            fontWeight: FontWeight.bold,
+          ),
+          autofocus: true,
+          enabled: !state.isBusy,
+          decoration: InputDecoration(
+            hintText: hintText,
+            isDense: true,
+            border: UnderlineInputBorder(
+              borderSide: BorderSide(
+                color: theme.colorScheme.primary,
+                width: borderWidth,
+              ),
+            ),
+          ),
+        ),
+      );
+    }
+
+    return Text(
+      state.currentName,
+      style: theme.textTheme.headlineMedium?.copyWith(
+        fontWeight: FontWeight.bold,
+      ),
+    );
+  }
+}