TF-1118 Apply new latest design forwarding

2022-11-08 15:45:49 +07:00
parent 2402371ca3
commit eaa47b9cd7
31 changed files with 897 additions and 714 deletions
@@ -7,7 +7,7 @@ extension TMailForwardExtension on TMailForward {

  List<RecipientForward> get listRecipientForward {
    return forwards
-        .map((emailAddress) => RecipientForward(EmailAddress(emailAddress, emailAddress)))
+        .map((value) => RecipientForward(EmailAddress(value, value)))
        .toList();
  }
 }
@@ -1,12 +1,10 @@
 import 'package:get/get.dart';
-import 'package:tmail_ui_user/features/mailbox_creator/domain/usecases/verify_name_interactor.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/forward/forward_controller.dart';

 class ForwardBindings extends Bindings {

  @override
  void dependencies() {
-    Get.lazyPut(() => VerifyNameInteractor());
-    Get.lazyPut(() => ForwardController(Get.find<VerifyNameInteractor>()));
+    Get.lazyPut(() => ForwardController());
  }
 }
@@ -18,13 +18,14 @@ import 'package:tmail_ui_user/main/error/capability_validator.dart';
 class ForwardRecipientController {

  final ContactSuggestionSource _contactSuggestionSource = ContactSuggestionSource.tMailContact;
-  final TextEditingController inputEmailForwardController = TextEditingController();
+  final TextEditingController inputRecipientController = TextEditingController();

  GetAutoCompleteWithDeviceContactInteractor? _getAutoCompleteWithDeviceContactInteractor;
  GetAutoCompleteInteractor? _getAutoCompleteInteractor;
  AccountId? _accountId;
  Session? _session;
-  EmailAddress? _emailAddressSelected;
+
+  final listRecipients = RxList<EmailAddress>();

  ForwardRecipientController({AccountId? accountId, Session? session}) {
    _accountId = accountId;
@@ -32,8 +33,6 @@ class ForwardRecipientController {
    injectAutoCompleteBindings(_session, _accountId);
  }

-  EmailAddress? get emailAddressSelected => _emailAddressSelected;
-
  void onClose() {
    clearAll();
    _disposeWidget();
@@ -82,16 +81,16 @@ class ForwardRecipientController {
    }
  }

-  void selectEmailAddress(EmailAddress? emailAddress) {
-    _emailAddressSelected = emailAddress;
+  void updateListRecipient(List<EmailAddress> listEmailAddress) {
+    listRecipients.value = listEmailAddress;
  }

  void clearAll() {
-    inputEmailForwardController.clear();
-    _emailAddressSelected = null;
+    inputRecipientController.clear();
+    listRecipients.clear();
  }

  void _disposeWidget() {
-    inputEmailForwardController.dispose();
+    inputRecipientController.dispose();
  }
 }
@@ -10,11 +10,6 @@ import 'package:jmap_dart_client/jmap/account_id.dart';
 import 'package:model/extensions/email_address_extension.dart';
 import 'package:model/mailbox/select_mode.dart';
 import 'package:tmail_ui_user/features/base/base_controller.dart';
-import 'package:tmail_ui_user/features/mailbox_creator/domain/model/verification/email_address_validator.dart';
-import 'package:tmail_ui_user/features/mailbox_creator/domain/model/verification/empty_name_validator.dart';
-import 'package:tmail_ui_user/features/mailbox_creator/domain/state/verify_name_view_state.dart';
-import 'package:tmail_ui_user/features/mailbox_creator/domain/usecases/verify_name_interactor.dart';
-import 'package:tmail_ui_user/features/mailbox_creator/presentation/extensions/validator_failure_extension.dart';
 import 'package:tmail_ui_user/features/manage_account/domain/model/add_recipients_in_forwarding_request.dart';
 import 'package:tmail_ui_user/features/manage_account/domain/model/delete_recipient_in_forwarding_request.dart';
 import 'package:tmail_ui_user/features/manage_account/domain/model/edit_local_copy_in_forwarding_request.dart';
@@ -36,8 +31,6 @@ import 'package:tmail_ui_user/main/routes/route_navigation.dart';

 class ForwardController extends BaseController {

-  final VerifyNameInteractor _verifyNameInteractor;
-
  GetForwardInteractor? _getForwardInteractor;
  DeleteRecipientInForwardingInteractor? _deleteRecipientInForwardingInteractor;
  AddRecipientsInForwardingInteractor? _addRecipientsInForwardingInteractor;
@@ -50,13 +43,12 @@ class ForwardController extends BaseController {
  final selectionMode = Rx<SelectMode>(SelectMode.INACTIVE);
  final listRecipientForward = RxList<RecipientForward>();
  final currentForward = Rxn<TMailForward>();
-  final errorRecipientInputText = RxnString();

  bool get currentForwardLocalCopyState => currentForward.value?.localCopy ?? false;

  late ForwardRecipientController recipientController;

-  ForwardController(this._verifyNameInteractor) {
+  ForwardController() {
    recipientController = ForwardRecipientController(
      accountId: accountDashBoardController.accountId.value,
      session: accountDashBoardController.sessionCurrent.value);
@@ -84,23 +76,23 @@ class ForwardController extends BaseController {
  @override
  void onDone() {
    viewState.value.fold(
-        (failure) {
-          if (failure is DeleteRecipientInForwardingFailure) {
-            cancelSelectionMode();
-          }
-        },
-        (success) {
-          if (success is GetForwardSuccess) {
-            currentForward.value = success.forward;
-            listRecipientForward.value = currentForward.value!.listRecipientForward;
-          } else if (success is DeleteRecipientInForwardingSuccess) {
-            _handleDeleteRecipientSuccess(success);
-          } else if (success is AddRecipientsInForwardingSuccess) {
-            _handleAddRecipientsSuccess(success);
-          } else if (success is EditLocalCopyInForwardingSuccess) {
-            _handleEditLocalCopySuccess(success);
-          }
-        });
+      (failure) {
+        if (failure is DeleteRecipientInForwardingFailure) {
+          cancelSelectionMode();
+        }
+      },
+      (success) {
+        if (success is GetForwardSuccess) {
+          currentForward.value = success.forward;
+          listRecipientForward.value = currentForward.value!.listRecipientForward;
+        } else if (success is DeleteRecipientInForwardingSuccess) {
+          _handleDeleteRecipientSuccess(success);
+        } else if (success is AddRecipientsInForwardingSuccess) {
+          _handleAddRecipientsSuccess(success);
+        } else if (success is EditLocalCopyInForwardingSuccess) {
+          _handleEditLocalCopySuccess(success);
+        }
+      });
  }

  @override
@@ -116,10 +108,10 @@ class ForwardController extends BaseController {
  }

  void deleteRecipients(BuildContext context, String emailAddress) {
-    showConfirmDialogAction(currentContext!,
+    showConfirmDialogAction(context,
      title: AppLocalizations.of(context).deleteRecipient,
      AppLocalizations.of(context).messageConfirmationDialogDeleteRecipientForward(emailAddress),
-      AppLocalizations.of(currentContext!).remove,
+      AppLocalizations.of(context).remove,
      onConfirmAction: () => _handleDeleteRecipientAction({emailAddress}),
      showAsBottomSheet: true,
      icon: SvgPicture.asset(_imagePaths.icDeleteDialogIdentity, fit: BoxFit.fill),
@@ -167,22 +159,27 @@ class ForwardController extends BaseController {
    selectionMode.value = SelectMode.INACTIVE;
  }

-  List<RecipientForward> get listRecipientForwardSelected => listRecipientForward
-        .where((recipient) => recipient.selectMode == SelectMode.ACTIVE)
-        .toList();
+  List<RecipientForward> get listRecipientForwardSelected =>
+    listRecipientForward
+      .where((recipient) => recipient.selectMode == SelectMode.ACTIVE)
+      .toList();

  bool get isAllUnSelected =>
-      listRecipientForward.every((recipient) => recipient.selectMode == SelectMode.INACTIVE);
+    listRecipientForward.every((recipient) => recipient.selectMode == SelectMode.INACTIVE);
+
+  bool get isAllSelected =>
+    listRecipientForward.every((recipient) => recipient.selectMode == SelectMode.ACTIVE);

  void selectRecipientForward(RecipientForward recipientForward) {
    if (selectionMode.value == SelectMode.INACTIVE) {
      selectionMode.value = SelectMode.ACTIVE;
    }

-    final matchRecipientForward = listRecipientForward.indexOf(recipientForward);
-    if (matchRecipientForward >= 0) {
+    final matchedRecipientForward = listRecipientForward.indexOf(recipientForward);
+    log('ForwardController::selectRecipientForward(): matchedRecipientForward: $matchedRecipientForward');
+    if (matchedRecipientForward >= 0) {
      final newRecipientForward = recipientForward.toggleSelection();
-      listRecipientForward[matchRecipientForward] = newRecipientForward;
+      listRecipientForward[matchedRecipientForward] = newRecipientForward;
      listRecipientForward.refresh();
    }

@@ -194,8 +191,8 @@ class ForwardController extends BaseController {
  void cancelSelectionMode() {
    selectionMode.value = SelectMode.INACTIVE;
    listRecipientForward.value = listRecipientForward
-        .map((recipient) => recipient.cancelSelection())
-        .toList();
+      .map((recipient) => recipient.cancelSelection())
+      .toList();
  }

  void deleteMultipleRecipients(BuildContext context, Set<String> listEmailAddress) {
@@ -233,21 +230,13 @@ class ForwardController extends BaseController {
        .toList();
  }

-  void addRecipientAction(BuildContext context) {
+  void addRecipientAction(BuildContext context, List<EmailAddress> listRecipientsSelected) {
+    log('ForwardController::addRecipientAction():listRecipientsSelected: $listRecipientsSelected');
    FocusScope.of(context).unfocus();

    final accountId = accountDashBoardController.accountId.value;
-    final emailAddressSelected = recipientController.emailAddressSelected;
-
-    updateErrorRecipientInputText(context, emailAddressSelected?.email);
-
-    if (errorRecipientInputText.value != null) {
-      return;
-    }
-
-    log('ForwardController::addRecipientAction():emailAddressSelected: $emailAddressSelected');
-    if (emailAddressSelected != null && accountId != null) {
-      _handleAddRecipients(accountId, [emailAddressSelected]);
+    if (accountId != null) {
+      _handleAddRecipients(accountId, listRecipientsSelected);
    }
  }

@@ -304,24 +293,4 @@ class ForwardController extends BaseController {
    currentForward.value = success.forward;
    listRecipientForward.value = currentForward.value!.listRecipientForward;
  }
-
-  void updateErrorRecipientInputText(BuildContext context, String? emailAddress) {
-    errorRecipientInputText.value = _getErrorRecipientInputString(context, emailAddress);
-  }
-
-  String? _getErrorRecipientInputString(BuildContext context, String? emailAddress) {
-    return _verifyNameInteractor.execute(
-      emailAddress,
-      [EmptyNameValidator(), EmailAddressValidator()]
-    ).fold(
-      (failure) {
-        if (failure is VerifyNameFailure) {
-          return failure.getMessageForwarding(context);
-        } else {
-          return null;
-        }
-        },
-      (success) => null
-    );
-  }
 }
@@ -1,24 +1,24 @@
 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/state/success.dart';
+import 'package:core/presentation/utils/app_toast.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:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
-import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
 import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
+import 'package:tmail_ui_user/features/contact/presentation/widgets/autocomplete_contact_text_field_with_tags.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/forward_header_widget.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/forward/widgets/list_email_forward_widget.dart';
-import 'package:tmail_ui_user/features/manage_account/presentation/forward/widgets/recipient_input_field_builder.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 class ForwardView extends GetWidget<ForwardController> with AppLoaderMixin {
  final _responsiveUtils = Get.find<ResponsiveUtils>();
  final _imagePaths = Get.find<ImagePaths>();
+  final _appToast = Get.find<AppToast>();

  ForwardView({Key? key}) : super(key: key);

@@ -76,7 +76,7 @@ class ForwardView extends GetWidget<ForwardController> with AppLoaderMixin {
        AppLocalizations.of(context).forwardingSettingExplanation,
        style: const TextStyle(
          fontSize: 16,
-          fontWeight: FontWeight.normal,
+          fontWeight: FontWeight.w500,
          color: AppColor.colorSettingExplanation
        )
      ),
@@ -96,7 +96,7 @@ class ForwardView extends GetWidget<ForwardController> with AppLoaderMixin {
                ? _imagePaths.icSwitchOn
                : _imagePaths.icSwitchOff,
              fit: BoxFit.fill,
-              width: 24,
+              width: 36,
              height: 24)
          );
        }),
@@ -108,7 +108,7 @@ class ForwardView extends GetWidget<ForwardController> with AppLoaderMixin {
            softWrap: CommonTextStyle.defaultSoftWrap,
            style: const TextStyle(
                fontSize: 16,
-                fontWeight: FontWeight.normal,
+                fontWeight: FontWeight.w500,
                color: Colors.black)
          ),
        )
@@ -127,84 +127,30 @@ class ForwardView extends GetWidget<ForwardController> with AppLoaderMixin {
    ));
  }

-  Widget _buildAddRecipientInputField() {
-    return Obx(() => RecipientInputFieldBuilder(
-      editingController: controller.recipientController.inputEmailForwardController,
-      onSelectedSuggestionAction: (newEmailAddress) {
-        controller.recipientController.selectEmailAddress(newEmailAddress);
-        controller.recipientController.inputEmailForwardController.text = newEmailAddress.email ?? '';
-      },
-      onRecipientInputTextChange: (pattern) {
-        if (pattern.trim().isNotEmpty) {
-          controller.recipientController.selectEmailAddress(EmailAddress(null, pattern.trim()));
-        } else {
-          controller.recipientController.selectEmailAddress(null);
-        }
-        controller.errorRecipientInputText.value = null;
-      },
-      onSummitedCallbackAction: (pattern) {
-        if (pattern.trim().isNotEmpty) {
-          controller.recipientController.selectEmailAddress(EmailAddress(null, pattern.trim()));
-        } else {
-          controller.recipientController.selectEmailAddress(null);
-        }
-      },
-      onSuggestionCallbackAction: controller.recipientController.getAutoCompleteSuggestion,
-      errorText: controller.errorRecipientInputText.value,
-    ));
-  }
-
-  Widget _buildAddRecipientButton(BuildContext context, {double? maxWidth}) {
-    return (ButtonBuilder(_imagePaths.icAddIdentity)
-      ..key(const Key('button_add_recipient'))
-      ..decoration(BoxDecoration(
-          borderRadius: BorderRadius.circular(10),
-          color: AppColor.colorTextButton))
-      ..paddingIcon(const EdgeInsets.only(right: 8))
-      ..iconColor(Colors.white)
-      ..maxWidth(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.addRecipientAction(context))
-      ..text(AppLocalizations.of(context).addRecipientButton, isVertical: false)
-    ).build();
-  }
-
  Widget _buildAddRecipientsFormWidget(BuildContext context) {
-    if (_responsiveUtils.isPortraitMobile(context)) {
-      return Container(
-        color: Colors.transparent,
-        width: double.infinity,
-        padding: const EdgeInsets.all(16),
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            _buildAddRecipientInputField(),
-            const SizedBox(height: 16),
-            _buildAddRecipientButton(context, maxWidth: double.infinity)
-          ],
-        ),
-      );
-    } else {
-      return Container(
-        color: Colors.transparent,
-        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
-        child: Row(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            Expanded(child: _buildAddRecipientInputField()),
-            Padding(
-              padding: const EdgeInsets.only(left: 24, right: 12),
-              child: _buildAddRecipientButton(context))
-          ],
-        ),
-      );
-    }
+    return AutocompleteContactTextFieldWithTags(
+      controller.recipientController.listRecipients,
+      controller: controller.recipientController.inputRecipientController,
+      onSuggestionCallback: controller.recipientController.getAutoCompleteSuggestion,
+      hasAddContactButton: true,
+      onAddContactCallback: (listRecipientsSelected) {
+        controller.addRecipientAction(context, listRecipientsSelected);
+      },
+      onExceptionCallback: () {
+        _appToast.showBottomToast(
+          context,
+          AppLocalizations.of(context).incorrectEmailFormat,
+          leadingIcon: SvgPicture.asset(
+            _imagePaths.icNotConnection,
+            width: 24,
+            height: 24,
+            color: Colors.white,
+            fit: BoxFit.fill),
+          backgroundColor: AppColor.toastErrorBackgroundColor,
+          textColor: Colors.white,
+          textActionColor: Colors.white,
+          maxWidth: _responsiveUtils.getMaxWidthToast(context));
+      },
+    );
  }
 }
@@ -1,66 +1,61 @@
-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: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';

+typedef OnSelectRecipientCallbackAction = Function(RecipientForward recipientForward);
+typedef OnDeleteRecipientCallbackAction = Function(RecipientForward recipientForward);
+
 class EmailForwardItemWidget extends StatelessWidget {

-  final _imagePaths = Get.find<ImagePaths>();
-  final _emailForwardController = Get.find<ForwardController>();
-
  final RecipientForward recipientForward;
  final SelectMode selectionMode;
-  final bool isLast;
+  final OnSelectRecipientCallbackAction? onSelectRecipientCallback;
+  final OnDeleteRecipientCallbackAction? onDeleteRecipientCallback;

-  EmailForwardItemWidget({
+  const EmailForwardItemWidget(this.recipientForward, {
    Key? key,
-    required this.recipientForward,
-    this.isLast = false,
    this.selectionMode = SelectMode.INACTIVE,
+    this.onSelectRecipientCallback,
+    this.onDeleteRecipientCallback,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
-    return GestureDetector(
-      onLongPress: () => _emailForwardController.selectRecipientForward(recipientForward),
-      onTap: () {
-        if (selectionMode == SelectMode.ACTIVE) {
-          _emailForwardController.selectRecipientForward(recipientForward);
-        }
-      },
-      child: Container(
-        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: 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,
+    final _imagePaths = Get.find<ImagePaths>();
+
+    return Padding(
+      padding: const EdgeInsets.only(top: 4),
+      child: Material(
+        color: Colors.transparent,
+        child: InkWell(
+          onTap: () {},
+          customBorder: const RoundedRectangleBorder(
+            borderRadius: BorderRadius.all(Radius.circular(12))),
+          child: Container(
+            padding: const EdgeInsets.all(12),
+            decoration: BoxDecoration(
+              color: _getBackgroundColor(),
+              borderRadius: BorderRadius.all(Radius.circular(
+                recipientForward.selectMode == SelectMode.ACTIVE ? 12 : 0))
+            ),
+            child: Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
+              _buildAvatarIcon(_imagePaths),
+              const SizedBox(width: 12),
+              Expanded(child: Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    recipientForward.emailAddress.asString(),
                    overflow: CommonTextStyle.defaultTextOverFlow,
                    softWrap: CommonTextStyle.defaultSoftWrap,
                    maxLines: 1,
@@ -70,59 +65,74 @@ class EmailForwardItemWidget extends StatelessWidget {
                      color: Colors.black
                    )
                  ),
+                  if (recipientForward.emailAddress.displayName.isNotEmpty)
+                    Padding(
+                      padding: const EdgeInsets.only(top: 4),
+                      child: 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),
+              if (selectionMode == SelectMode.INACTIVE)
+                buildIconWeb(
+                  iconSize: 34,
+                  splashRadius: 25,
+                  icon: SvgPicture.asset(_imagePaths.icDeleteRecipient),
+                  onTap: () => onDeleteRecipientCallback?.call(recipientForward)
                ),
-              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.email ?? ''
-            )
+            ]),
          ),
-        ]),
+        ),
      ),
    );
  }

-  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
-        )
+  Color _getBackgroundColor() {
+    if (recipientForward.selectMode == SelectMode.ACTIVE) {
+      return AppColor.colorItemRecipientSelected;
+    } else {
+      return Colors.transparent;
+    }
+  }
+
+  Widget _buildAvatarIcon(ImagePaths imagePaths) {
+    if (recipientForward.selectMode == SelectMode.ACTIVE) {
+      return InkWell(
+        customBorder: const CircleBorder(),
+        onTap: () => onSelectRecipientCallback?.call(recipientForward),
+        child: Container(
+          width: 40,
+          height: 40,
+          color: Colors.transparent,
+          alignment: Alignment.center,
+          child: SvgPicture.asset(
+            imagePaths.icSelectedRecipient,
+            width: 40,
+            height: 40,
+            fit: BoxFit.fill,
+          ),
+        ),
      );
    } else {
      return (AvatarBuilder()
        ..text(recipientForward.emailAddress.asString().firstLetterToUpperCase)
-        ..size(54)
+        ..size(40)
        ..addTextStyle(const TextStyle(
-            fontWeight: FontWeight.w600,
-            fontSize: 20,
+            fontWeight: FontWeight.w500,
+            fontSize: 16,
            color: Colors.white))
        ..avatarColor(recipientForward.emailAddress.avatarColors)
+        ..addOnTapActionClick(() => onSelectRecipientCallback?.call(recipientForward))
      ).build();
    }
  }
@@ -1,155 +0,0 @@
-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';
-
-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);
-
-  @override
-  State<EmailForwardItemWidget> createState() => _EmailForwardItemWidgetState();
-}
-
-class _EmailForwardItemWidgetState extends State<EmailForwardItemWidget> {
-  final _imagePaths = Get.find<ImagePaths>();
-
-  final _emailForwardController = Get.find<ForwardController>();
-
-  bool isHoverIcon = false;
-  bool isHoverItem = false;
-
-  @override
-  Widget build(BuildContext context) {
-    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: 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 ?? ''
-              )
-            ),
-        ]),
-      ),
-    );
-  }
-
-  Widget _buildAvatarIcon() {
-    if (isHoverIcon || widget.recipientForward.selectMode == SelectMode.ACTIVE) {
-      return Container(
-          alignment: Alignment.center,
-          child: SvgPicture.asset(
-              widget.recipientForward.selectMode == SelectMode.ACTIVE
-                  ? _imagePaths.icSelected
-                  : _imagePaths.icUnSelected,
-              width: 24,
-              height: 24));
-    } else {
-      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();
-    }
-  }
-}
@@ -24,14 +24,14 @@ class ForwardHeaderWidget extends StatelessWidget {
          AppLocalizations.of(context).forwarding,
          style: const TextStyle(
            fontSize: 20,
-            fontWeight: FontWeight.w500,
+            fontWeight: FontWeight.bold,
            color: Colors.black)),
        const SizedBox(height: 8),
        Text(
          AppLocalizations.of(context).forwardingSettingExplanation,
          style: const TextStyle(
            fontSize: 16,
-            fontWeight: FontWeight.normal,
+            fontWeight: FontWeight.w500,
            color: AppColor.colorSettingExplanation)),
      ]),
    );
@@ -1,11 +1,14 @@
-import 'package:core/core.dart';
+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/views/button/icon_button_web.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/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/forward/widgets/email_forward_item_widget.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';
@@ -20,46 +23,31 @@ class ListEmailForwardsWidget extends GetWidget<ForwardController> {
  @override
  Widget build(BuildContext context) {
    return Container(
-      decoration: SettingsUtils.getBoxDecorationForListRecipient(context, _responsiveUtils),
+      color: Colors.white,
      margin: SettingsUtils.getPaddingListRecipientForwarding(context, _responsiveUtils),
-      child: ClipRRect(
-        borderRadius: BorderRadius.circular(12),
-        child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              _buildTitleHeader(context),
-              const Divider(
-                color: AppColor.lineItemListColor,
-                height: 1,
-                thickness: 0.2,
-              ),
-              Obx(() {
-                return ListView.separated(
-                  shrinkWrap: true,
-                  primary: false,
-                  itemCount: controller.listRecipientForward.length,
-                  itemBuilder: (context, index) {
-                    final recipientForward = controller.listRecipientForward[index];
-                    return EmailForwardItemWidget(
-                        recipientForward: recipientForward,
-                        isLast: index == controller.listRecipientForward.length - 1,
-                        selectionMode: controller.selectionMode.value);
-                  },
-                  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();
-                    }
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          _buildTitleHeader(context),
+          Obx(() {
+            return ListView.builder(
+              shrinkWrap: true,
+              primary: false,
+              itemCount: controller.listRecipientForward.length,
+              itemBuilder: (context, index) {
+                return EmailForwardItemWidget(
+                  controller.listRecipientForward[index],
+                  selectionMode: controller.selectionMode.value,
+                  onSelectRecipientCallback: controller.selectRecipientForward,
+                  onDeleteRecipientCallback: (recipientForward) {
+                    controller.deleteRecipients(context, recipientForward.emailAddress.emailAddress);
                  },
                );
-              }),
-            ]),
+              }
+            );
+          }),
+        ]
      ),
    );
  }
@@ -67,27 +55,15 @@ class ListEmailForwardsWidget extends GetWidget<ForwardController> {
  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),
+      color: Colors.transparent,
+      height: 44,
+      padding: const EdgeInsets.only(right: 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
-          )
-        )),
+        if (controller.selectionMode.value == SelectMode.ACTIVE)
+          _buildCancelSectionButton(context),
+        if (!controller.isAllSelected)
+          _buildSelectAllButton(context),
+        const Spacer(),
        const SizedBox(width: 12),
        if (controller.listRecipientForwardSelected.isNotEmpty)
          _buildDeleteAllButton(context)
@@ -95,44 +71,75 @@ class ListEmailForwardsWidget extends GetWidget<ForwardController> {
    ));
  }

-  Widget _buildSelectAllButton() {
+  Widget _buildSelectAllButton(BuildContext context) {
    return Material(
+      color: Colors.transparent,
      child: InkWell(
-        customBorder: const CircleBorder(),
+        customBorder: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
        child: Padding(
-          padding: const EdgeInsets.all(16),
-          child: SvgPicture.asset(
-              controller.selectionMode.value == SelectMode.ACTIVE
-                  ? _imagePaths.icCancelSelection
-                  : _imagePaths.icUnSelected,
-              width: 24,
-              height: 24
+          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
+          child: Text(
+            AppLocalizations.of(context).select_all,
+            style: const TextStyle(
+              fontSize: 15,
+              fontWeight: FontWeight.normal,
+              color: AppColor.colorTextButton
+            )
          ),
        ),
-        onTap: () {
-          if (controller.selectionMode.value == SelectMode.ACTIVE) {
-            controller.cancelSelectionMode();
-          } else {
-            controller.selectAllRecipientForward();
-          }
-        },
+        onTap: controller.selectAllRecipientForward,
+      )
+    );
+  }
+
+  Widget _buildCancelSectionButton(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(right: 8),
+      child: 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
+          ),
+          Text(
+            controller.isAllSelected
+              ? AppLocalizations.of(context).totalEmailSelected(controller.listRecipientForwardSelected.length)
+              : AppLocalizations.of(context).count_email_selected(controller.listRecipientForwardSelected.length),
+            style: const TextStyle(
+              fontSize: 15,
+              fontWeight: FontWeight.normal,
+              color: AppColor.colorTextButton
+            )
+          )
+        ],
      ),
-      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
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        customBorder: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
+          child: Text(
+            AppLocalizations.of(context).remove,
+            style: const TextStyle(
+              fontSize: 15,
+              fontWeight: FontWeight.normal,
+              color: AppColor.colorDeletePermanentlyButton
+            )
+          ),
+        ),
+        onTap: () => controller.deleteMultipleRecipients(
+          context,
+          controller.listRecipientForwardSelected.listEmailAddress)
      )
    );
  }
@@ -1,41 +0,0 @@
-
-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);
-  }
-}
@@ -1,81 +0,0 @@
-
-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,
-    );
-  }
-}
@@ -63,6 +63,7 @@ class ManageAccountDashBoardController extends ReloadableController {
  void onReady() {
    _getArguments();
    _getAppVersion();
+    _initialPageLevel();
    super.onReady();
  }

@@ -116,6 +117,14 @@ class ManageAccountDashBoardController extends ReloadableController {
    }
  }

+  void _initialPageLevel() {
+    if (currentContext != null && _responsiveUtils.isWebDesktop(currentContext!)) {
+      settingsPageLevel.value = SettingsPageLevel.level1;
+    } else {
+      settingsPageLevel.value = SettingsPageLevel.universal;
+    }
+  }
+
  @override
  void injectVacationBindings(Session? session, AccountId? accountId) {
    try {
@@ -80,9 +80,9 @@ class SettingsUtils {

  static EdgeInsets getPaddingListRecipientForwarding(BuildContext context, ResponsiveUtils responsiveUtils) {
    if (responsiveUtils.isPortraitMobile(context)) {
-      return const EdgeInsets.all(12);
+      return const EdgeInsets.only(left: 12, right: 12, bottom: 12);
    } else {
-      return const EdgeInsets.symmetric(horizontal: 24, vertical: 12);
+      return const EdgeInsets.only(left: 24, right: 24, bottom: 24);
    }
  }