Frontend first draft

frontend/pweb/lib/pages/address_book/form/widgets/button.dart

@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class SaveButton extends StatelessWidget {
+  final VoidCallback onSave;
+
+  final double width;
+  final double height;
+  final double borderRadius;
+  final String? text;
+  final TextStyle? textStyle;
+
+  const SaveButton({
+    super.key,
+    required this.onSave,
+    this.width = 200,
+    this.height = 45,
+    this.borderRadius = 12,
+    this.text,
+    this.textStyle,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Center(
+      child: SizedBox(
+        width: width,
+        height: height,
+        child: InkWell(
+          borderRadius: BorderRadius.circular(borderRadius),
+          onTap: onSave,
+          child: Container(
+            decoration: BoxDecoration(
+              color: theme.colorScheme.primary,
+              borderRadius: BorderRadius.circular(borderRadius),
+            ),
+            child: Center(
+              child: Text(
+                text ?? AppLocalizations.of(context)!.saveRecipient,
+                style: textStyle ??
+                    theme.textTheme.labelLarge?.copyWith(
+                      color: theme.colorScheme.onPrimary,
+                      fontWeight: FontWeight.w600,
+                    ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/form/widgets/choice_chips.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+
+
+class ChoiceChips<T> extends StatelessWidget {
+  final String label;
+  final List<T> values;
+  final T selected;
+  final ValueChanged<T> onChanged;
+
+  final double spacing;
+  final double runSpacing;
+  final double labelSpacing;
+
+  const ChoiceChips({
+    super.key,
+    required this.label,
+    required this.values,
+    required this.selected,
+    required this.onChanged,
+    this.spacing = 8,
+    this.runSpacing = 8,
+    this.labelSpacing = 8,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          label,
+          style: theme.textTheme.titleMedium!.copyWith(fontWeight: FontWeight.bold),
+        ),
+        SizedBox(height: labelSpacing),
+        Wrap(
+          spacing: spacing,
+          runSpacing: runSpacing,
+          children: values.map((v) {
+            final isSelected = v == selected;
+            return ChoiceChip(
+              selectedColor: theme.colorScheme.primary,
+              backgroundColor: theme.colorScheme.onSecondary,
+              showCheckmark: false,
+              label: Text(
+                v.toString().split('.').last,
+                style: TextStyle(
+                  color: isSelected
+                      ? theme.colorScheme.onSecondary
+                      : theme.colorScheme.inverseSurface,
+                ),
+              ),
+              selected: isSelected,
+              onSelected: (_) => onChanged(v),
+            );
+          }).toList(),
+        ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/form/widgets/email_field.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class EmailField extends StatelessWidget {
+  final TextEditingController controller;
+
+  final double borderRadius;
+  final EdgeInsetsGeometry contentPadding;
+
+  const EmailField({
+    super.key,
+    required this.controller,
+    this.borderRadius = 12,
+    this.contentPadding = const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final loc = AppLocalizations.of(context)!;
+
+    return TextFormField(
+      controller: controller,
+      decoration: InputDecoration(
+        labelText: loc.username,
+        border: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(borderRadius),
+        ),
+        contentPadding: contentPadding,
+      ),
+      validator: (v) =>
+          v == null || v.isEmpty ? loc.usernameErrorInvalid : null,
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/form/widgets/header.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class HeaderWidget extends StatelessWidget {
+  final bool isEditing;
+  final VoidCallback? onBack;
+
+  final double spacing;
+  final TextStyle? textStyle;
+
+  const HeaderWidget({
+    super.key,
+    required this.isEditing,
+    this.onBack,
+    this.spacing = 8,
+    this.textStyle,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final l10n = AppLocalizations.of(context)!;
+
+    return Row(
+      children: [
+        IconButton(
+          icon: const Icon(Icons.arrow_back),
+          color: theme.colorScheme.primary,
+          onPressed: onBack,
+        ),
+        SizedBox(width: spacing),
+        Text(
+          isEditing ? l10n.editRecipient : l10n.addRecipient,
+          style: textStyle ??
+              theme.textTheme.headlineSmall?.copyWith(
+                fontWeight: FontWeight.bold,
+              ),
+        ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/pages/address_book/form/widgets/name_field.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class NameField extends StatelessWidget {
+  final TextEditingController controller;
+
+  final double borderRadius;
+  final EdgeInsetsGeometry contentPadding;
+
+  const NameField({
+    super.key,
+    required this.controller,
+    this.borderRadius = 12,
+    this.contentPadding = const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final loc = AppLocalizations.of(context)!;
+
+    return TextFormField(
+      controller: controller,
+      decoration: InputDecoration(
+        labelText: loc.recipientName,
+        border: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(borderRadius),
+        ),
+        contentPadding: contentPadding,
+      ),
+      validator: (v) => v == null || v.isEmpty ? loc.enterRecipientName : null,
+    );
+  }
+}