Frontend first draft

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

@@ -0,0 +1,107 @@
+import 'package:flutter/material.dart';
+
+//import 'package:provider/provider.dart';
+
+import 'package:image_picker/image_picker.dart';
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class AvatarTile extends StatefulWidget {
+  final String? avatarUrl;
+  final String title;
+  final String description;
+  final String errorText;
+
+  const AvatarTile({
+    super.key,
+    required this.avatarUrl,
+    required this.title,
+    required this.description,
+    required this.errorText,
+  });
+
+  @override
+  State<AvatarTile> createState() => _AvatarTileState();
+}
+
+class _AvatarTileState extends State<AvatarTile> {
+  static const double _avatarSize = 96.0;
+  static const double _iconSize = 32.0;
+  static const double _titleSpacing = 4.0;
+  static const String _placeholderAsset = 'assets/images/avatar_placeholder.png';
+
+  bool _isHovering = false;
+
+  Future<void> _pickImage() async {
+    final picker = ImagePicker();
+    final file = await picker.pickImage(source: ImageSource.gallery);
+    if (file != null) {
+      debugPrint('Selected new avatar: ${file.path}');
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final loc = AppLocalizations.of(context)!;
+    final safeUrl =
+        widget.avatarUrl?.trim().isNotEmpty == true ? widget.avatarUrl : null;
+    final theme = Theme.of(context);
+
+    return Column(
+      children: [
+        MouseRegion(
+          onEnter: (_) => setState(() => _isHovering = true),
+          onExit: (_) => setState(() => _isHovering = false),
+          child: GestureDetector(
+            onTap: _pickImage,
+            child: Stack(
+              alignment: Alignment.center,
+              children: [
+                ClipOval(
+                  child: safeUrl != null
+                      ? Image.network(
+                          safeUrl,
+                          width: _avatarSize,
+                          height: _avatarSize,
+                          fit: BoxFit.cover,
+                          errorBuilder: (_, __, ___) => _buildPlaceholder(),
+                        )
+                      : _buildPlaceholder(),
+                ),
+                if (_isHovering)
+                  ClipOval(
+                    child: Container(
+                      width: _avatarSize,
+                      height: _avatarSize,
+                      color: theme.colorScheme.primary.withAlpha(90),
+                      child: Icon(
+                        Icons.camera_alt,
+                        color: theme.colorScheme.onSecondary,
+                        size: _iconSize,
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+          ),
+        ),
+        SizedBox(height: _titleSpacing),
+        Text(
+          loc.avatarHint,
+          style: theme.textTheme.bodySmall?.copyWith(
+            color: theme.colorScheme.onSecondary,
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildPlaceholder() {
+    return Image.asset(
+      _placeholderAsset,
+      width: _avatarSize,
+      height: _avatarSize,
+      fit: BoxFit.cover,
+    );
+  }
+}