TF-1118 Apply new design for Forwarding on web

lib/features/manage_account/presentation/forward/widgets/email_forward_item_widget.dart

@@ -2,6 +2,7 @@ import 'package:core/core.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
+import 'package:model/extensions/email_address_extension.dart';
 import 'package:model/mailbox/select_mode.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/forward/forward_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/recipient_forward.dart';
@@ -13,10 +14,12 @@ class EmailForwardItemWidget extends StatelessWidget {
 
   final RecipientForward recipientForward;
   final SelectMode selectionMode;
+  final bool isLast;
 
   EmailForwardItemWidget({
     Key? key,
     required this.recipientForward,
+    this.isLast = false,
     this.selectionMode = SelectMode.INACTIVE,
   }) : super(key: key);
 
@@ -30,32 +33,70 @@ class EmailForwardItemWidget extends StatelessWidget {
         }
       },
       child: Container(
-        padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
-        color: Colors.white,
+        padding: const EdgeInsets.all(12),
+        decoration: BoxDecoration(
+          color: recipientForward.selectMode == SelectMode.ACTIVE
+            ? AppColor.colorItemEmailSelectedDesktop
+            : Colors.white,
+          borderRadius: BorderRadius.only(
+            bottomLeft: isLast ? const Radius.circular(12) : Radius.zero,
+            bottomRight: isLast ? const Radius.circular(12) : Radius.zero,
+          )
+        ),
         child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
           Container(
-              width: 32,
-              height: 32,
-              color: Colors.transparent,
-              alignment: Alignment.center,
-              child: _buildAvatarIcon()),
-          const SizedBox(width: 10),
-          Expanded(child: Text(recipientForward.emailAddress,
-              overflow: CommonTextStyle.defaultTextOverFlow,
-              softWrap: CommonTextStyle.defaultSoftWrap,
-              style: const TextStyle(
-                  fontSize: 16,
-                  fontWeight: FontWeight.w400,
-                  color: Colors.black))),
+            width: 54,
+            height: 54,
+            color: Colors.transparent,
+            alignment: Alignment.center,
+            child: _buildAvatarIcon()
+          ),
+          const SizedBox(width: 12),
+          Expanded(child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              if (recipientForward.emailAddress.displayName.isNotEmpty)
+                Padding(
+                  padding: const EdgeInsets.only(bottom: 4),
+                  child: Text(
+                    recipientForward.emailAddress.displayName,
+                    overflow: CommonTextStyle.defaultTextOverFlow,
+                    softWrap: CommonTextStyle.defaultSoftWrap,
+                    maxLines: 1,
+                    style: const TextStyle(
+                      fontSize: 16,
+                      fontWeight: FontWeight.normal,
+                      color: Colors.black
+                    )
+                  ),
+                ),
+              Text(
+                recipientForward.emailAddress.email ?? '',
+                overflow: CommonTextStyle.defaultTextOverFlow,
+                softWrap: CommonTextStyle.defaultSoftWrap,
+                maxLines: 1,
+                style: const TextStyle(
+                  fontSize: 14,
+                  fontWeight: FontWeight.normal,
+                  color: AppColor.colorContentEmail
+                )
+              )
+            ],
+          )),
+          const SizedBox(width: 12),
           buildIconWeb(
-              icon: SvgPicture.asset(
-                _imagePaths.icDeleteEmailForward,
-                fit: BoxFit.fill,
-                width: 18,
-                height: 18,
-              ),
-              onTap: () =>
-                  _emailForwardController.deleteRecipients(context, recipientForward.emailAddress)),
+            icon: SvgPicture.asset(
+              _imagePaths.icDeleteEmailForward,
+              fit: BoxFit.fill,
+              width: 18,
+              height: 18,
+            ),
+            onTap: () => _emailForwardController.deleteRecipients(
+              context,
+              recipientForward.emailAddress.email ?? ''
+            )
+          ),
         ]),
       ),
     );
@@ -64,22 +105,25 @@ class EmailForwardItemWidget extends StatelessWidget {
   Widget _buildAvatarIcon() {
     if (selectionMode == SelectMode.ACTIVE) {
       return Container(
-          alignment: Alignment.center,
-          child: SvgPicture.asset(
-              recipientForward.selectMode == SelectMode.ACTIVE
-                  ? _imagePaths.icSelected
-                  : _imagePaths.icUnSelected,
-              width: 24,
-              height: 24));
+        alignment: Alignment.center,
+        child: SvgPicture.asset(
+          recipientForward.selectMode == SelectMode.ACTIVE
+            ? _imagePaths.icSelected
+            : _imagePaths.icUnSelected,
+          width: 24,
+          height: 24
+        )
+      );
     } else {
-      return CircleAvatar(
-          backgroundColor: AppColor.colorTextButton,
-          radius: 16,
-          child: Text(recipientForward.emailAddress[0].toUpperCase(),
-              style: const TextStyle(
-                  color: Colors.white,
-                  fontSize: 12,
-                  fontWeight: FontWeight.w500)));
+      return (AvatarBuilder()
+        ..text(recipientForward.emailAddress.asString().firstLetterToUpperCase)
+        ..size(54)
+        ..addTextStyle(const TextStyle(
+            fontWeight: FontWeight.w600,
+            fontSize: 20,
+            color: Colors.white))
+        ..avatarColor(recipientForward.emailAddress.avatarColors)
+      ).build();
     }
   }
 }

lib/features/manage_account/presentation/forward/widgets/email_forward_item_widget_for_web.dart

@@ -1,8 +1,14 @@
-import 'package:core/core.dart';
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/extensions/string_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/style_utils.dart';
+import 'package:core/presentation/views/button/icon_button_web.dart';
+import 'package:core/presentation/views/image/avatar_builder.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:html_editor_enhanced/utils/utils.dart';
+import 'package:model/extensions/email_address_extension.dart';
 import 'package:model/mailbox/select_mode.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/forward/forward_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/recipient_forward.dart';
@@ -11,10 +17,12 @@ class EmailForwardItemWidget extends StatefulWidget {
 
   final RecipientForward recipientForward;
   final SelectMode selectionMode;
+  final bool isLast;
 
   const EmailForwardItemWidget({
     Key? key,
     required this.recipientForward,
+    this.isLast = false,
     this.selectionMode = SelectMode.INACTIVE,
   }) : super(key: key);
 
@@ -28,48 +36,97 @@ class _EmailForwardItemWidgetState extends State<EmailForwardItemWidget> {
   final _emailForwardController = Get.find<ForwardController>();
 
   bool isHoverIcon = false;
+  bool isHoverItem = false;
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
-      color: Colors.white,
-      child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
-        InkWell(
-          onTap: () {
-            if (isHoverIcon) {
-              _emailForwardController.selectRecipientForward(widget.recipientForward);
-            }
-          },
-          onHover: (value) {
-            setState(mounted, this.setState, () {
-              isHoverIcon = value;
-            });
-          },
-          child: Container(
-              width: 32,
-              height: 32,
+    return InkWell(
+      onTap: () => {},
+      onHover: (value) {
+        setState(mounted, this.setState, () {
+          isHoverItem = value;
+        });
+      },
+      child: Container(
+        padding: const EdgeInsets.all(12),
+        decoration: BoxDecoration(
+          color: widget.recipientForward.selectMode == SelectMode.ACTIVE
+            ? AppColor.colorItemEmailSelectedDesktop
+            : Colors.white,
+          borderRadius: BorderRadius.only(
+            bottomLeft: widget.isLast ? const Radius.circular(12) : Radius.zero,
+            bottomRight: widget.isLast ? const Radius.circular(12) : Radius.zero,
+          )
+        ),
+        child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
+          InkWell(
+            onTap: () {
+              if (isHoverIcon) {
+                _emailForwardController.selectRecipientForward(widget.recipientForward);
+              }
+            },
+            onHover: (value) {
+              setState(mounted, this.setState, () {
+                isHoverIcon = value;
+              });
+            },
+            child: Container(
+              width: 54,
+              height: 54,
               color: Colors.transparent,
               alignment: Alignment.center,
-              child: _buildAvatarIcon())),
-        const SizedBox(width: 10),
-        Expanded(child: Text(widget.recipientForward.emailAddress,
-            overflow: CommonTextStyle.defaultTextOverFlow,
-            softWrap: CommonTextStyle.defaultSoftWrap,
-            style: const TextStyle(
-                fontSize: 16,
-                fontWeight: FontWeight.w400,
-                color: Colors.black))),
-        buildIconWeb(
-            icon: SvgPicture.asset(
-              _imagePaths.icDeleteEmailForward,
-              fit: BoxFit.fill,
-              width: 18,
-              height: 18,
+              child: _buildAvatarIcon()
+            )
+          ),
+          const SizedBox(width: 12),
+          Expanded(child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              if (widget.recipientForward.emailAddress.displayName.isNotEmpty)
+                Padding(
+                  padding: const EdgeInsets.only(bottom: 4),
+                  child: Text(
+                    widget.recipientForward.emailAddress.displayName,
+                    overflow: CommonTextStyle.defaultTextOverFlow,
+                    softWrap: CommonTextStyle.defaultSoftWrap,
+                    maxLines: 1,
+                    style: const TextStyle(
+                      fontSize: 16,
+                      fontWeight: FontWeight.normal,
+                      color: Colors.black
+                    )
+                  ),
+                ),
+              Text(
+                widget.recipientForward.emailAddress.email ?? '',
+                overflow: CommonTextStyle.defaultTextOverFlow,
+                softWrap: CommonTextStyle.defaultSoftWrap,
+                maxLines: 1,
+                style: const TextStyle(
+                  fontSize: 14,
+                  fontWeight: FontWeight.normal,
+                  color: AppColor.colorContentEmail
+                )
+              )
+            ],
+          )),
+          const SizedBox(width: 12),
+          if (isHoverItem)
+            buildIconWeb(
+              icon: SvgPicture.asset(
+                _imagePaths.icDeleteEmailForward,
+                fit: BoxFit.fill,
+                width: 18,
+                height: 18,
+              ),
+              onTap: () => _emailForwardController.deleteRecipients(
+                context,
+                widget.recipientForward.emailAddress.email ?? ''
+              )
             ),
-            onTap: () =>
-                _emailForwardController.deleteRecipients(context, widget.recipientForward.emailAddress)),
-      ]),
+        ]),
+      ),
     );
   }
 
@@ -84,14 +141,15 @@ class _EmailForwardItemWidgetState extends State<EmailForwardItemWidget> {
               width: 24,
               height: 24));
     } else {
-      return CircleAvatar(
-          backgroundColor: AppColor.colorTextButton,
-          radius: 16,
-          child: Text(widget.recipientForward.emailAddress[0].toUpperCase(),
-              style: const TextStyle(
-                  color: Colors.white,
-                  fontSize: 12,
-                  fontWeight: FontWeight.w500)));
+      return (AvatarBuilder()
+        ..text(widget.recipientForward.emailAddress.asString().firstLetterToUpperCase)
+        ..size(54)
+        ..addTextStyle(const TextStyle(
+            fontWeight: FontWeight.w600,
+            fontSize: 20,
+            color: Colors.white))
+        ..avatarColor(widget.recipientForward.emailAddress.avatarColors)
+      ).build();
     }
   }
 }

lib/features/manage_account/presentation/forward/widgets/forward_header_widget.dart

@@ -2,13 +2,10 @@ import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:core/presentation/utils/style_utils.dart';
-import 'package:core/presentation/views/button/button_builder.dart';
 import 'package:flutter/material.dart';
-import 'package:get/get.dart';
-import 'package:tmail_ui_user/features/manage_account/presentation/forward/forward_controller.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
-class ForwardHeaderWidget extends GetWidget<ForwardController> {
+class ForwardHeaderWidget extends StatelessWidget {
   const ForwardHeaderWidget({
     Key? key,
     required this.imagePaths,
@@ -21,97 +18,29 @@ class ForwardHeaderWidget extends GetWidget<ForwardController> {
   @override
   Widget build(BuildContext context) {
     return Container(
-      width: double.infinity,
-      padding: const EdgeInsets.all(24),
-      decoration: BoxDecoration(
-        color: AppColor.colorBackgroundWrapIconStyleCode,
-        borderRadius: BorderRadius.circular(16),
-      ),
+      color: Colors.transparent,
+      padding: const EdgeInsets.only(top: 24, left: 24, right: 24, bottom: 11),
       child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
-        Text(AppLocalizations.of(context).forwarding,
-            style: const TextStyle(
-                fontSize: 17,
-                fontWeight: FontWeight.bold,
-                color: Colors.black)),
-        const SizedBox(height: 24),
-        _buildButtonAddNewEmailsForward(context),
-        const SizedBox(height: 24),
-        Obx(() => _buildButtonSwitchKeepLocalCopy(context)),
+        Text(
+          AppLocalizations.of(context).forwarding,
+          overflow: CommonTextStyle.defaultTextOverFlow,
+          softWrap: CommonTextStyle.defaultSoftWrap,
+          maxLines: 1,
+          style: const TextStyle(
+            fontSize: 20,
+            fontWeight: FontWeight.w500,
+            color: Colors.black)),
+        const SizedBox(height: 8),
+        Text(
+          AppLocalizations.of(context).forwardingSettingExplanation,
+          overflow: CommonTextStyle.defaultTextOverFlow,
+          softWrap: CommonTextStyle.defaultSoftWrap,
+          maxLines: 3,
+          style: const TextStyle(
+            fontSize: 16,
+            fontWeight: FontWeight.normal,
+            color: AppColor.colorSettingExplanation)),
       ]),
     );
   }
-
-  Widget _buildButtonAddNewEmailsForward(BuildContext context) {
-    if (!responsiveUtils.isMobile(context)) {
-      return (ButtonBuilder(imagePaths.icAddEmailForward)
-          ..key(const Key('button_add_emails_forward'))
-          ..decoration(BoxDecoration(
-              borderRadius: BorderRadius.circular(10),
-              color: AppColor.colorTextButton))
-          ..paddingIcon(const EdgeInsets.only(right: 8))
-          ..iconColor(Colors.white)
-          ..maxWidth(170)
-          ..size(20)
-          ..radiusSplash(10)
-          ..padding(const EdgeInsets.symmetric(vertical: 12))
-          ..textStyle(const TextStyle(
-            fontSize: 17,
-            color: Colors.white,
-            fontWeight: FontWeight.w500,
-          ))
-          ..onPressActionClick(() => controller.goToAddEmailsForward(context))
-          ..text(
-            AppLocalizations.of(context).addRecipients,
-            isVertical: false,
-          ))
-        .build();
-    } else {
-      return (ButtonBuilder(imagePaths.icAddEmailForward)
-          ..key(const Key('button_add_emails_forward'))
-          ..decoration(BoxDecoration(
-              borderRadius: BorderRadius.circular(10),
-              color: AppColor.colorTextButton))
-          ..paddingIcon(const EdgeInsets.only(right: 8))
-          ..iconColor(Colors.white)
-          ..size(20)
-          ..radiusSplash(10)
-          ..padding(const EdgeInsets.symmetric(vertical: 12))
-          ..textStyle(const TextStyle(
-            fontSize: 17,
-            color: Colors.white,
-            fontWeight: FontWeight.w500,
-          ))
-          ..onPressActionClick(() => controller.goToAddEmailsForward(context))
-          ..text(
-            AppLocalizations.of(context).addRecipients,
-            isVertical: false,
-          ))
-        .build();
-    }
-  }
-
-  Widget _buildButtonSwitchKeepLocalCopy(BuildContext context) {
-    if(controller.currentForward.value != null) {
-      return SizedBox(
-        width: 250,
-        child: SwitchListTile(
-          contentPadding: const EdgeInsets.symmetric(horizontal: 0),
-          title: Text(AppLocalizations.of(context).keepLocalCopyForwardLabel,
-              overflow: CommonTextStyle.defaultTextOverFlow,
-              softWrap: CommonTextStyle.defaultSoftWrap,
-              style: const TextStyle(
-                  fontSize: 16,
-                  fontWeight: FontWeight.w400,
-                  color: Colors.black)),
-          value: controller.currentForwardLocalCopyState,
-          onChanged: (_) {
-            controller.handleEditLocalCopy();
-          },
-          controlAffinity: ListTileControlAffinity.trailing,
-        ),
-      );
-    } else {
-      return const SizedBox.shrink();
-    }
-  }
-}
+}

lib/features/manage_account/presentation/forward/widgets/list_email_forward_widget.dart

@@ -6,79 +6,29 @@ import 'package:model/mailbox/select_mode.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/forward/forward_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/forward/widgets/email_forward_item_widget.dart'
   if (dart.library.html) 'package:tmail_ui_user/features/manage_account/presentation/forward/widgets/email_forward_item_widget_for_web.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/recipient_forward.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class ListEmailForwardsWidget extends GetWidget<ForwardController> {
 
   final _imagePaths = Get.find<ImagePaths>();
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
 
   ListEmailForwardsWidget({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return Container(
-      decoration: BoxDecoration(
-        color: AppColor.colorBackgroundWrapIconStyleCode,
-        borderRadius: BorderRadius.circular(16),
-        border: Border.all(
-            width: 1,
-            color: AppColor.colorBorderListForwardsFilter)
-      ),
+      decoration: SettingsUtils.getBoxDecorationForListRecipient(context, _responsiveUtils),
+      margin: SettingsUtils.getPaddingListRecipientForwarding(context, _responsiveUtils),
       child: ClipRRect(
-        borderRadius: BorderRadius.circular(16),
+        borderRadius: BorderRadius.circular(12),
         child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             mainAxisSize: MainAxisSize.min,
             children: [
-              Obx(() => Container(
-                width: double.infinity,
-                decoration: const BoxDecoration(
-                  color: AppColor.colorBackgroundHeaderListForwards,
-                  borderRadius: BorderRadius.only(
-                      topLeft: Radius.circular(16),
-                      topRight: Radius.circular(16)),
-                ),
-                padding: controller.selectionMode.value == SelectMode.INACTIVE
-                    ? const EdgeInsets.symmetric(vertical: 17, horizontal: 24)
-                    : const EdgeInsets.symmetric(vertical: 13, horizontal: 24),
-                child: Row(children: [
-                  Expanded(child: Text(
-                      AppLocalizations.of(context).headerRecipients,
-                      overflow: CommonTextStyle.defaultTextOverFlow,
-                      softWrap: CommonTextStyle.defaultSoftWrap,
-                      style: const TextStyle(
-                          fontSize: 16,
-                          fontWeight: FontWeight.w500,
-                          color: AppColor.colorTextButtonHeaderThread))),
-                  Obx(() {
-                    if (controller.selectionMode.value == SelectMode.ACTIVE) {
-                      return _buildListButtonSelection(context);
-                    } else {
-                      if (controller.listRecipientForward.isNotEmpty) {
-                        return (ButtonBuilder(_imagePaths.icSelectAll)
-                            ..decoration(BoxDecoration(
-                                borderRadius: BorderRadius.circular(10),
-                                color: AppColor.colorButtonHeaderThread))
-                            ..paddingIcon(const EdgeInsets.only(right: 8))
-                            ..size(16)
-                            ..radiusSplash(10)
-                            ..padding(const EdgeInsets.symmetric(
-                                horizontal: 12,
-                                vertical: 8))
-                            ..textStyle(const TextStyle(
-                                fontSize: 12,
-                                color: AppColor.colorTextButtonHeaderThread))
-                            ..onPressActionClick(() => controller.selectAllRecipientForward())
-                            ..text(AppLocalizations.of(context).select_all, isVertical: false))
-                          .build();
-                      } else {
-                        return const SizedBox.shrink();
-                      }
-                    }
-                  })
-                ]),
-              )),
+              _buildTitleHeader(context),
               const Divider(
                 color: AppColor.lineItemListColor,
                 height: 1,
@@ -92,13 +42,20 @@ class ListEmailForwardsWidget extends GetWidget<ForwardController> {
                     final recipientForward = controller.listRecipientForward[index];
                     return EmailForwardItemWidget(
                         recipientForward: recipientForward,
+                        isLast: index == controller.listRecipientForward.length - 1,
                         selectionMode: controller.selectionMode.value);
                   },
-                  separatorBuilder: (context, index) => const Divider(
-                      color: AppColor.lineItemListColor,
-                      height: 1,
-                      thickness: 0.2,
-                    ),
+                  separatorBuilder: (context, index) {
+                    if (index != controller.listRecipientForward.length - 1) {
+                       return const Divider(
+                         color: AppColor.lineItemListColor,
+                         height: 1,
+                         thickness: 0.2,
+                       );
+                    } else {
+                      return const SizedBox.shrink();
+                    }
+                  },
                 );
               }),
             ]),
@@ -106,26 +63,76 @@ class ListEmailForwardsWidget extends GetWidget<ForwardController> {
     );
   }
 
-  Widget _buildListButtonSelection(BuildContext context) {
-    return Row(mainAxisSize: MainAxisSize.min, children: [
-      buildIconWeb(
-          icon: SvgPicture.asset(
-              _imagePaths.icCloseComposer,
-              color: AppColor.colorTextButton,
-              fit: BoxFit.fill),
-          tooltip: AppLocalizations.of(context).cancel,
-          onTap: () => controller.cancelSelectionMode()),
-      const SizedBox(width: 5),
-      buildIconWeb(
-          icon: SvgPicture.asset(
-              _imagePaths.icDelete,
-              color: AppColor.colorActionDeleteConfirmDialog,
-              fit: BoxFit.fill),
-          tooltip: AppLocalizations.of(context).delete_all,
-          onTap: () =>
-              controller.deleteMultipleRecipients(
-                  context,
-                  controller.listRecipientForwardSelected.listEmailAddress))
-    ]);
+  Widget _buildTitleHeader(BuildContext context) {
+    return Obx(() => Container(
+      width: double.infinity,
+      decoration: const BoxDecoration(
+        color: AppColor.colorBackgroundHeaderListForwards,
+        borderRadius: BorderRadius.only(
+          topLeft: Radius.circular(16),
+          topRight: Radius.circular(16)
+        ),
+      ),
+      padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 12),
+      child: Row(children: [
+        _buildSelectAllButton(),
+        const SizedBox(width: 12),
+        Expanded(child: Text(
+          AppLocalizations.of(context).headerRecipients,
+          overflow: CommonTextStyle.defaultTextOverFlow,
+          softWrap: CommonTextStyle.defaultSoftWrap,
+          style: const TextStyle(
+            fontSize: 16,
+            fontWeight: FontWeight.w500,
+            color: AppColor.colorTextButtonHeaderThread
+          )
+        )),
+        const SizedBox(width: 12),
+        if (controller.listRecipientForwardSelected.isNotEmpty)
+          _buildDeleteAllButton(context)
+      ]),
+    ));
+  }
+
+  Widget _buildSelectAllButton() {
+    return Material(
+      child: InkWell(
+        customBorder: const CircleBorder(),
+        child: Padding(
+          padding: const EdgeInsets.all(16),
+          child: SvgPicture.asset(
+              controller.selectionMode.value == SelectMode.ACTIVE
+                  ? _imagePaths.icCancelSelection
+                  : _imagePaths.icUnSelected,
+              width: 24,
+              height: 24
+          ),
+        ),
+        onTap: () {
+          if (controller.selectionMode.value == SelectMode.ACTIVE) {
+            controller.cancelSelectionMode();
+          } else {
+            controller.selectAllRecipientForward();
+          }
+        },
+      ),
+      color: Colors.transparent,
+    );
+  }
+
+  Widget _buildDeleteAllButton(BuildContext context) {
+    return buildIconWeb(
+      icon: SvgPicture.asset(
+        _imagePaths.icDeleteEmailForward,
+        fit: BoxFit.fill,
+        width: 18,
+        height: 18,
+      ),
+      tooltip: AppLocalizations.of(context).delete_all,
+      onTap: () => controller.deleteMultipleRecipients(
+        context,
+        controller.listRecipientForwardSelected.listEmailAddress
+      )
+    );
   }
 }

lib/features/manage_account/presentation/forward/widgets/recipient_input_decoration_builder.dart

@@ -0,0 +1,41 @@
+
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/views/text/input_decoration_builder.dart';
+import 'package:core/utils/build_utils.dart';
+import 'package:flutter/material.dart';
+
+class RecipientInputDecorationBuilder extends InputDecorationBuilder {
+
+  @override
+  InputDecoration build() {
+    return InputDecoration(
+      enabledBorder: enabledBorder ?? const OutlineInputBorder(
+        borderRadius: BorderRadius.all(Radius.circular(10)),
+        borderSide: BorderSide(width: 0.5, color: AppColor.colorInputBorderCreateMailbox)),
+      focusedBorder: enabledBorder ?? const OutlineInputBorder(
+        borderRadius: BorderRadius.all(Radius.circular(10)),
+        borderSide: BorderSide(width: 0.5, color: AppColor.colorTextButton)),
+      errorBorder: errorBorder ?? const OutlineInputBorder(
+        borderRadius: BorderRadius.all(Radius.circular(10)),
+        borderSide: BorderSide(width: 0.5, color: AppColor.colorInputBorderErrorVerifyName)),
+      focusedErrorBorder: errorBorder ?? const OutlineInputBorder(
+        borderRadius: BorderRadius.all(Radius.circular(10)),
+        borderSide: BorderSide(width: 0.5, color: AppColor.colorInputBorderErrorVerifyName)),
+      prefixText: prefixText,
+      labelText: labelText,
+      floatingLabelBehavior: FloatingLabelBehavior.never,
+      labelStyle: labelStyle ?? const TextStyle(color: Colors.black, fontSize: 16),
+      hintText: hintText,
+      isDense: true,
+      hintStyle: hintStyle ?? const TextStyle(color: AppColor.colorEmailAddressFull, fontSize: 16),
+      contentPadding: const EdgeInsets.symmetric(
+        vertical: BuildUtils.isWeb ? 16 : 12,
+        horizontal: 12),
+      errorText: errorText,
+      errorStyle: errorTextStyle ?? const TextStyle(color: AppColor.colorInputBorderErrorVerifyName, fontSize: 13),
+      filled: true,
+      fillColor: errorText?.isNotEmpty == true
+        ? AppColor.colorInputBackgroundErrorVerifyName
+        : AppColor.colorInputBackgroundCreateMailbox);
+  }
+}

lib/features/manage_account/presentation/forward/widgets/recipient_input_field_builder.dart

@@ -0,0 +1,81 @@
+
+import 'package:flutter/material.dart';
+import 'package:flutter_typeahead/flutter_typeahead.dart';
+import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/forward/widgets/recipient_input_decoration_builder.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+typedef OnSelectedSuggestionAction = Function(EmailAddress emailAddress);
+typedef OnSuggestionCallbackAction = Function(String pattern);
+typedef OnSummitedCallbackAction = Function(String pattern);
+typedef OnRecipientInputTextChange = Function(String pattern);
+
+class RecipientInputFieldBuilder extends StatelessWidget {
+
+  final TextEditingController? editingController;
+  final OnSelectedSuggestionAction? onSelectedSuggestionAction;
+  final OnSuggestionCallbackAction? onSuggestionCallbackAction;
+  final OnSummitedCallbackAction? onSummitedCallbackAction;
+  final OnRecipientInputTextChange? onRecipientInputTextChange;
+  final String? errorText;
+
+  const RecipientInputFieldBuilder({
+    Key? key,
+    this.editingController,
+    this.onSelectedSuggestionAction,
+    this.onSuggestionCallbackAction,
+    this.onSummitedCallbackAction,
+    this.onRecipientInputTextChange,
+    this.errorText
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return TypeAheadFormField<EmailAddress>(
+      textFieldConfiguration: TextFieldConfiguration(
+        controller: editingController,
+        onSubmitted: (pattern) {
+          if (onSummitedCallbackAction != null) {
+            onSummitedCallbackAction!(pattern);
+          }
+        },
+        onChanged: onRecipientInputTextChange,
+        textInputAction: TextInputAction.done,
+        decoration: (RecipientInputDecorationBuilder()
+          ..setHintText(AppLocalizations.of(context).recipientsLabel)
+          ..setErrorText(errorText)
+        ).build()
+      ),
+      debounceDuration: const Duration(milliseconds: 500),
+      suggestionsCallback: (pattern) async {
+        if (onSuggestionCallbackAction != null) {
+          return onSuggestionCallbackAction!(pattern);
+        } else {
+          return [];
+        }
+      },
+      itemBuilder: (BuildContext context, emailAddress) {
+        return Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
+          child: Text(emailAddress.email ?? '',
+            style: const TextStyle(
+              fontSize: 14,
+              fontWeight: FontWeight.normal,
+              color: Colors.black)),
+        );
+      },
+      onSuggestionSelected: (emailSelected) {
+        if (onSelectedSuggestionAction != null) {
+          onSelectedSuggestionAction!(emailSelected);
+        }
+      },
+      suggestionsBoxDecoration: SuggestionsBoxDecoration(
+        borderRadius: BorderRadius.circular(14)
+      ),
+      noItemsFoundBuilder: (context) => const SizedBox(),
+      hideOnEmpty: true,
+      hideOnError: true,
+      hideOnLoading: true,
+    );
+  }
+}