TF-899 Implement create mailbox folder in destination picker

2022-10-26 15:00:48 +07:00
parent 38d403aeed
commit 6554ca5f23
19 changed files with 775 additions and 166 deletions
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M9.09999 3.59177C8.92708 3.55027 8.75138 3.55074 8.61184 3.55109L8.57435 3.55116H7.04586C6.45511 3.55116 5.96749 3.55116 5.5701 3.58363C5.15711 3.61737 4.77756 3.68979 4.42098 3.87147C3.86798 4.15324 3.4184 4.6028 3.1367 5.15577C2.955 5.51233 2.88253 5.89197 2.84881 6.30492C2.81635 6.70253 2.81635 7.19064 2.81635 7.78202V14.0142C2.81635 14.6056 2.81635 15.0937 2.84881 15.4913C2.88253 15.9043 2.955 16.2839 3.1367 16.6404C3.4184 17.1934 3.86798 17.643 4.42098 17.9247C4.77756 18.1064 5.15711 18.1788 5.5701 18.2126C5.96767 18.2451 6.45582 18.2451 7.0472 18.245H10.898C11.3037 18.245 11.6327 17.9161 11.6327 17.5103C11.6327 17.1046 11.3037 16.7757 10.898 16.7757H7.07761C6.44829 16.7757 6.02041 16.7751 5.68974 16.7481C5.36768 16.7218 5.20293 16.6741 5.08805 16.6155C4.81155 16.4746 4.5868 16.2498 4.44591 15.9734C4.38735 15.8584 4.33963 15.6937 4.31336 15.3716C4.28627 15.041 4.28573 14.6131 4.28573 13.9838V10.1634L18.9796 10.1635C18.9796 10.5692 19.3084 10.898 19.714 10.898C20.1199 10.898 20.4488 10.5692 20.4474 10.1634C20.4466 9.95985 20.4455 9.73725 20.4439 9.51582C20.4473 9.48725 20.449 9.4582 20.449 9.42871C20.449 9.39519 20.4467 9.36219 20.4424 9.32986C20.4377 8.79747 20.4299 8.30524 20.4165 8.14165C20.3828 7.7287 20.3103 7.34907 20.1286 6.99251C19.8469 6.43953 19.3974 5.98997 18.8444 5.7082C18.4878 5.52653 18.1082 5.45411 17.6952 5.42036C17.2979 5.3879 16.8102 5.3879 16.2195 5.3879H11.3849C11.2886 5.3879 11.2406 5.38772 11.2057 5.38613L11.2031 5.38601L11.2011 5.38424C11.1754 5.3607 11.1412 5.32684 11.0732 5.2588L9.92508 4.11066L9.89863 4.08409L9.89782 4.08335C9.79943 3.98454 9.67594 3.86035 9.52464 3.7677C9.39316 3.68712 9.24985 3.62775 9.09999 3.59177ZM18.973 8.69402C18.9689 8.53129 18.9625 8.38905 18.952 8.26131C18.9257 7.93921 18.878 7.77449 18.8194 7.6596C18.6785 7.3831 18.4538 7.15831 18.1773 7.01744C18.0624 6.9589 17.8977 6.91118 17.5756 6.88488C17.2449 6.85787 16.8171 6.85728 16.1877 6.85728H11.3849L11.3474 6.85735C11.2078 6.85773 11.0321 6.8582 10.8592 6.8167C10.7094 6.78069 10.5661 6.72132 10.4346 6.64076C10.2829 6.54785 10.1591 6.4233 10.0607 6.32436L8.886 5.14967C8.85291 5.11649 8.8278 5.09145 8.8078 5.07176C8.78672 5.05106 8.77129 5.03629 8.75811 5.02423L8.75614 5.02246L8.75354 5.02232C8.71865 5.02073 8.67058 5.02055 8.57435 5.02055H7.07761C6.44829 5.02055 6.02041 5.02113 5.68974 5.04815C5.36768 5.07445 5.20293 5.12216 5.08805 5.1807C4.81155 5.32158 4.5868 5.54637 4.44591 5.82287C4.38735 5.93775 4.33963 6.10248 4.31336 6.42458C4.28627 6.75527 4.28573 7.18306 4.28573 7.8124V8.69402H18.973Z"
+        fill="#007AFF" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M16.7755 11.6327C19.2101 11.6327 21.1837 13.6063 21.1837 16.0408C21.1837 18.4754 19.2101 20.449 16.7755 20.449C14.341 20.449 12.3674 18.4754 12.3674 16.0408C12.3674 13.6063 14.341 11.6327 16.7755 11.6327ZM16.7755 13.102C16.3988 13.102 16.0882 13.3857 16.0458 13.7511L16.0408 13.8367V15.3061H14.5714C14.1657 15.3061 13.8368 15.6351 13.8368 16.0408C13.8368 16.4176 14.1203 16.7281 14.4858 16.7706L14.5714 16.7755H16.0408V18.2449C16.0408 18.6507 16.3698 18.9796 16.7755 18.9796C17.1523 18.9796 17.4629 18.696 17.5053 18.3306L17.5102 18.2449V16.7755H18.9796C19.3853 16.7755 19.7143 16.4466 19.7143 16.0408C19.7143 15.664 19.4307 15.3535 19.0653 15.3111L18.9796 15.3061H17.5102V13.8367C17.5102 13.431 17.1813 13.102 16.7755 13.102Z"
+        fill="#007AFF" />
+</svg>
@@ -154,6 +154,9 @@ extension AppColor on Color {
  static const colorEmailAddressFull = Color(0xFF818C99);
  static const colorTitleHeaderAttachment = Color(0xFF818C99);
  static const colorAttachmentIcon = Color(0xFFAEB7C2);
+  static const colorDividerDestinationPicker = Color(0x1F000000);
+  static const colorItemAlreadySelected = Color(0xFF818C99);
+  static const colorItemSelected = Color(0xFFF2F3F5);

  static const mapGradientColor = [
    [Color(0xFF21D4FD), Color(0xFFB721FF)],
@@ -166,6 +166,7 @@ class ImagePaths {
  String get icAppDashboard => _getImagePath('ic_app_dashboard.svg');
  String get icRequestReadReceipt => _getImagePath('ic_request_read_receipt.svg');
  String get icReadReceiptMessage => _getImagePath('ic_read_receipt_message.svg');
+  String get icCreateNewFolder => _getImagePath('ic_create_new_folder.svg');

  String _getImagePath(String imageName) {
    return AssetsPaths.images + imageName;
@@ -74,6 +74,13 @@ abstract class BaseMailboxController extends BaseController {
    }
  }

+  void unAllSelectedMailboxNode() {
+    defaultMailboxTree.value.updateNodesUIMode(selectMode: SelectMode.INACTIVE);
+    folderMailboxTree.value.updateNodesUIMode(selectMode: SelectMode.INACTIVE);
+    defaultMailboxTree.refresh();
+    folderMailboxTree.refresh();
+  }
+
  MailboxNode? findMailboxNodeById(MailboxId mailboxId) {
    final mailboxNode = defaultMailboxTree.value.findNode((node) => node.item.id == mailboxId);
    if (mailboxNode != null) {
@@ -16,9 +16,12 @@ import 'package:tmail_ui_user/features/mailbox/data/local/mailbox_cache_manager.
 import 'package:tmail_ui_user/features/mailbox/data/network/mailbox_isolate_worker.dart';
 import 'package:tmail_ui_user/features/mailbox/data/repository/mailbox_repository_impl.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/repository/mailbox_repository.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/usecases/create_new_mailbox_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/usecases/get_all_mailbox_interactor.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/usecases/refresh_all_mailbox_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/usecases/search_mailbox_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_tree_builder.dart';
+import 'package:tmail_ui_user/features/mailbox_creator/domain/usecases/verify_name_interactor.dart';
 import 'package:tmail_ui_user/features/thread/data/datasource/thread_datasource.dart';
 import 'package:tmail_ui_user/features/thread/data/datasource_impl/thread_datasource_impl.dart';
 import 'package:tmail_ui_user/features/thread/data/network/thread_api.dart';
@@ -41,6 +44,9 @@ class DestinationPickerBindings extends BaseBindings {
    Get.lazyPut(() => DestinationPickerController(
        Get.find<GetAllMailboxInteractor>(),
        Get.find<SearchMailboxInteractor>(),
+        Get.find<CreateNewMailboxInteractor>(),
+        Get.find<RefreshAllMailboxInteractor>(),
+        Get.find<VerifyNameInteractor>(),
        Get.find<TreeBuilder>(),
    ));
  }
@@ -66,6 +72,9 @@ class DestinationPickerBindings extends BaseBindings {
  void bindingsInteractor() {
    Get.lazyPut(() => GetAllMailboxInteractor(Get.find<MailboxRepository>()));
    Get.lazyPut(() => SearchMailboxInteractor());
+    Get.lazyPut(() => CreateNewMailboxInteractor(Get.find<MailboxRepository>()));
+    Get.lazyPut(() => RefreshAllMailboxInteractor(Get.find<MailboxRepository>()));
+    Get.lazyPut(() => VerifyNameInteractor());
  }

  @override
@@ -1,53 +1,106 @@

-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/state/failure.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/utils/build_utils.dart';
 import 'package:dartz/dartz.dart';
-import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:jmap_dart_client/jmap/account_id.dart';
+import 'package:jmap_dart_client/jmap/core/error/method/error_method_response.dart';
+import 'package:jmap_dart_client/jmap/core/id.dart';
 import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
-import 'package:model/model.dart';
+import 'package:jmap_dart_client/jmap/core/state.dart' as jmap;
+import 'package:model/mailbox/expand_mode.dart';
+import 'package:model/mailbox/presentation_mailbox.dart';
 import 'package:tmail_ui_user/features/base/base_mailbox_controller.dart';
 import 'package:tmail_ui_user/features/destination_picker/presentation/model/destination_picker_arguments.dart';
+import 'package:tmail_ui_user/features/destination_picker/presentation/model/destination_screen_type.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/model/create_new_mailbox_request.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/state/create_new_mailbox_state.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/state/get_all_mailboxes_state.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/state/refresh_changes_all_mailboxes_state.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/state/search_mailbox_state.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/usecases/create_new_mailbox_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/usecases/get_all_mailbox_interactor.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/usecases/refresh_all_mailbox_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/usecases/search_mailbox_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories_expand_mode.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
+import 'package:tmail_ui_user/features/mailbox_creator/domain/model/verification/duplicate_name_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/thread/domain/model/search_query.dart';
 import 'package:tmail_ui_user/features/thread/presentation/model/search_state.dart';
 import 'package:tmail_ui_user/features/thread/presentation/model/search_status.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 import 'package:tmail_ui_user/main/routes/route_navigation.dart';
+import 'package:uuid/uuid.dart';

 typedef OnSelectedMailboxCallback = Function(PresentationMailbox? destinationMailbox);

 class DestinationPickerController extends BaseMailboxController {

+  final _uuid = Get.find<Uuid>();
+  final _appToast = Get.find<AppToast>();
+  final _imagePaths = Get.find<ImagePaths>();
+  final _responsiveUtils = Get.find<ResponsiveUtils>();
+
  final GetAllMailboxInteractor _getAllMailboxInteractor;
  final SearchMailboxInteractor _searchMailboxInteractor;
+  final CreateNewMailboxInteractor _createNewMailboxInteractor;
+  final RefreshAllMailboxInteractor _refreshAllMailboxInteractor;
+  final VerifyNameInteractor _verifyNameInteractor;

  final mailboxAction = Rxn<MailboxActions>();
  final listMailboxSearched = <PresentationMailbox>[].obs;
  final searchState = SearchState.initial().obs;
  final searchQuery = SearchQuery.initial().obs;
  final mailboxCategoriesExpandMode = MailboxCategoriesExpandMode.initial().obs;
+  final destinationScreenType = DestinationScreenType.destinationPicker.obs;
+  final mailboxDestination = Rxn<PresentationMailbox>();
+  final newNameMailbox = Rxn<String>();

+  FocusNode? nameInputFocusNode;
+  TextEditingController? nameInputController;
+  TextEditingController? searchInputController;
+  FocusNode? searchFocus;
  DestinationPickerArguments? arguments;
  AccountId? accountId;
  MailboxId? mailboxIdSelected;
  OnSelectedMailboxCallback? onSelectedMailboxCallback;
  VoidCallback? onDismissDestinationPicker;

-  final searchInputController = TextEditingController();
-  final searchFocus = FocusNode();
+  List<String> listMailboxNameAsStringExist = <String>[];

  DestinationPickerController(
    this._getAllMailboxInteractor,
    this._searchMailboxInteractor,
+    this._createNewMailboxInteractor,
+    this._refreshAllMailboxInteractor,
+    this._verifyNameInteractor,
    treeBuilder,
  ) : super(treeBuilder);

+  @override
+  void onInit() {
+    super.onInit();
+    nameInputFocusNode = FocusNode();
+    nameInputController = TextEditingController();
+    searchInputController = TextEditingController();
+    searchFocus = FocusNode();
+    searchFocus?.unfocus();
+    nameInputFocusNode?.unfocus();
+  }
+
  @override
  void onReady() {
    super.onReady();
@@ -69,6 +122,8 @@ class DestinationPickerController extends BaseMailboxController {
        } else {
          buildTree(success.mailboxList);
        }
+      } else if (success is RefreshChangesAllMailboxSuccess) {
+        refreshTree(success.mailboxList);
      }
    });
  }
@@ -79,11 +134,15 @@ class DestinationPickerController extends BaseMailboxController {
        (failure) {
          if (failure is SearchMailboxFailure) {
            _searchMailboxFailure(failure);
+          } else if (failure is CreateNewMailboxFailure) {
+            _createNewMailboxFailure(failure);
          }
        },
        (success) {
          if (success is SearchMailboxSuccess) {
            _searchMailboxSuccess(success);
+          } else if (success is CreateNewMailboxSuccess) {
+            _createNewMailboxSuccess(success);
          }
        }
    );
@@ -94,8 +153,7 @@ class DestinationPickerController extends BaseMailboxController {

  @override
  void onClose() {
-    searchInputController.dispose();
-    searchFocus.dispose();
+    _disposeWidget();
    super.onClose();
  }

@@ -105,6 +163,12 @@ class DestinationPickerController extends BaseMailboxController {
    }
  }

+  void _refreshMailboxChanges(jmap.State currentMailboxState) {
+    if (accountId != null) {
+      consumeState(_refreshAllMailboxInteractor.execute(accountId!, currentMailboxState));
+    }
+  }
+
  void toggleMailboxCategories(MailboxCategories categories) {
    switch(categories) {
      case MailboxCategories.exchange:
@@ -128,17 +192,84 @@ class DestinationPickerController extends BaseMailboxController {
    searchState.value = searchState.value.enableSearchState();
  }

+  void setNewNameMailbox(String newName) => newNameMailbox.value = newName;
+
+  String? getErrorInputNameString(BuildContext context) {
+    final nameMailbox = newNameMailbox.value;
+
+    if (nameInputFocusNode?.hasFocus == false && nameMailbox == null) {
+      return null;
+    }
+
+    return _verifyNameInteractor.execute(
+      nameMailbox,
+      [
+        EmptyNameValidator(),
+        DuplicateNameValidator(listMailboxNameAsStringExist),
+      ]
+    ).fold(
+      (failure) {
+        if (failure is VerifyNameFailure) {
+          return failure.getMessage(context);
+        } else {
+          return null;
+        }
+      },
+      (success) => null
+    );
+  }
+
+  bool isCreateMailboxValidated(BuildContext context) {
+    final nameValidated = getErrorInputNameString(context);
+
+    if (nameInputFocusNode?.hasFocus == false && newNameMailbox.value == null) {
+      return false;
+    }
+
+    if (nameValidated?.isNotEmpty == true) {
+      return false;
+    }
+    return true;
+  }
+
+  void _createListMailboxNameAsStringInMailboxLocation() {
+    if (mailboxDestination.value == null ||
+        mailboxDestination.value == PresentationMailbox.unifiedMailbox) {
+      final allChildrenAtMailboxLocation = (defaultMailboxTree.value.root.childrenItems ?? <MailboxNode>[]) +
+          (folderMailboxTree.value.root.childrenItems ?? <MailboxNode>[]);
+      if (allChildrenAtMailboxLocation.isNotEmpty) {
+        listMailboxNameAsStringExist = allChildrenAtMailboxLocation
+            .where((mailboxNode) => mailboxNode.nameNotEmpty)
+            .map((mailboxNode) => mailboxNode.mailboxNameAsString)
+            .toList();
+      }  else {
+        listMailboxNameAsStringExist = [];
+      }
+    } else {
+      final mailboxNodeLocation = findMailboxNodeById(mailboxDestination.value!.id);
+      if (mailboxNodeLocation != null && mailboxNodeLocation.childrenItems?.isNotEmpty == true) {
+        final allChildrenAtMailboxLocation =  mailboxNodeLocation.childrenItems!;
+        listMailboxNameAsStringExist = allChildrenAtMailboxLocation
+            .where((mailboxNode) => mailboxNode.nameNotEmpty)
+            .map((mailboxNode) => mailboxNode.mailboxNameAsString)
+            .toList();
+      } else {
+        listMailboxNameAsStringExist = [];
+      }
+    }
+  }
+
  void disableSearch(BuildContext context) {
    listMailboxSearched.clear();
    searchState.value = searchState.value.disableSearchState();
    searchQuery.value = SearchQuery.initial();
-    searchInputController.clear();
+    searchInputController?.clear();
    FocusScope.of(context).unfocus();
  }

  void clearSearchText() {
    searchQuery.value = SearchQuery.initial();
-    searchFocus.requestFocus();
+    searchFocus?.requestFocus();
    listMailboxSearched.clear();
  }

@@ -164,16 +295,166 @@ class DestinationPickerController extends BaseMailboxController {
    listMailboxSearched.clear();
  }

-  void selectMailboxAction(PresentationMailbox? destinationMailbox) {
-    if (BuildUtils.isWeb) {
-      onSelectedMailboxCallback?.call(destinationMailbox);
+  void openCreateNewMailboxView(BuildContext context) async {
+    if (mailboxDestination.value == null) {
+      _appToast.showBottomToast(
+        currentOverlayContext!,
+        AppLocalizations.of(context).toastMessageErrorNotSelectedFolderWhenCreateNewMailbox,
+        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(currentContext!));
    } else {
-      popBack(result: destinationMailbox);
+      destinationScreenType.value = DestinationScreenType.createNewMailbox;
+      _createListMailboxNameAsStringInMailboxLocation();
    }
  }

-  void closeDestinationPicker() {
+  void _dispatchCreateNewMailboxFolder(
+      AccountId accountId,
+      CreateNewMailboxRequest request
+  ) async {
+    consumeState(_createNewMailboxInteractor.execute(accountId, request));
+  }
+
+  void _createNewMailboxSuccess(CreateNewMailboxSuccess success) {
+    if (currentContext != null) {
+      disableSearch(currentContext!);
+    }
+
+    if (success.currentMailboxState != null) {
+      _refreshMailboxChanges(success.currentMailboxState!);
+    } else {
+      getAllMailboxAction();
+    }
+  }
+
+  void _createNewMailboxFailure(CreateNewMailboxFailure failure) {
+    if (currentOverlayContext != null && currentContext != null) {
+      final exception = failure.exception;
+      var messageError = AppLocalizations.of(currentContext!).create_new_mailbox_failure;
+      if (exception is ErrorMethodResponse) {
+        messageError = exception.description ?? AppLocalizations.of(currentContext!).create_new_mailbox_failure;
+      }
+
+      _appToast.showBottomToast(
+          currentOverlayContext!,
+          messageError,
+          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(currentContext!));
+    }
+  }
+
+  void selectMailboxAction(
+      PresentationMailbox? presentationMailbox,
+      {MailboxNode? mailboxNode}
+  ) {
+    if (mailboxDestination.value == presentationMailbox) {
+      return;
+    }
+    mailboxDestination.value = presentationMailbox;
+    if (presentationMailbox == null ||
+        presentationMailbox.id == PresentationMailbox.unifiedMailbox.id) {
+      unAllSelectedMailboxNode();
+    } else {
+      if (mailboxNode != null) {
+        unAllSelectedMailboxNode();
+        selectMailboxNode(mailboxNode);
+      } else {
+        final matchedMailboxNode = findMailboxNodeById(presentationMailbox.id);
+        if (matchedMailboxNode != null) {
+          unAllSelectedMailboxNode();
+          selectMailboxNode(matchedMailboxNode);
+        }
+      }
+    }
+  }
+
+  void dispatchSelectMailboxDestination(BuildContext context) {
+    FocusScope.of(context).unfocus();
+
+    if (mailboxDestination.value == null) {
+      _appToast.showBottomToast(
+          currentOverlayContext!,
+          AppLocalizations.of(context).toastMessageErrorNotSelectedFolderWhenCreateNewMailbox,
+          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(currentContext!));
+      return;
+    }
+
    if (BuildUtils.isWeb) {
+      _disposeWidget();
+      onSelectedMailboxCallback?.call(mailboxDestination.value);
+    } else {
+      popBack(result: mailboxDestination.value);
+    }
+  }
+
+  void createNewMailboxAction(BuildContext context) {
+    FocusScope.of(context).unfocus();
+
+    final nameMailbox = newNameMailbox.value;
+    if (nameMailbox != null && nameMailbox.isNotEmpty) {
+      final generateCreateId = Id(_uuid.v1());
+      final parentId = mailboxDestination.value == PresentationMailbox.unifiedMailbox
+        ? null
+        : mailboxDestination.value?.id;
+
+      _dispatchCreateNewMailboxFolder(
+        accountId!,
+        CreateNewMailboxRequest(
+          generateCreateId,
+          MailboxName(nameMailbox),
+          parentId: parentId));
+    }
+
+    backToDestinationScreen(context);
+  }
+
+  void backToDestinationScreen(BuildContext context) {
+    nameInputController?.clear();
+    FocusScope.of(context).unfocus();
+    destinationScreenType.value = DestinationScreenType.destinationPicker;
+  }
+
+  void _disposeWidget() {
+    nameInputFocusNode?.dispose();
+    nameInputFocusNode = null;
+    nameInputController?.dispose();
+    nameInputController = null;
+    searchFocus?.dispose();
+    searchFocus = null;
+    searchInputController?.dispose();
+    searchInputController = null;
+  }
+
+  void closeDestinationPicker(BuildContext context) {
+    FocusScope.of(context).unfocus();
+
+    if (BuildUtils.isWeb) {
+      _disposeWidget();
      onDismissDestinationPicker?.call();
    } else {
      popBack();
@@ -6,6 +6,7 @@ import 'package:core/presentation/utils/style_utils.dart';
 import 'package:core/presentation/views/button/icon_button_web.dart';
 import 'package:core/presentation/views/list/tree_view.dart';
 import 'package:core/presentation/views/search/search_bar_view.dart';
+import 'package:core/presentation/views/text/text_field_builder.dart';
 import 'package:core/utils/build_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
@@ -18,6 +19,7 @@ import 'package:pointer_interceptor/pointer_interceptor.dart';
 import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
 import 'package:tmail_ui_user/features/destination_picker/presentation/destination_picker_controller.dart';
 import 'package:tmail_ui_user/features/destination_picker/presentation/model/destination_picker_arguments.dart';
+import 'package:tmail_ui_user/features/destination_picker/presentation/model/destination_screen_type.dart';
 import 'package:tmail_ui_user/features/destination_picker/presentation/widgets/top_bar_destination_picker_builder.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
@@ -25,6 +27,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_displa
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_search_tile_builder.dart';
+import 'package:tmail_ui_user/features/mailbox_creator/presentation/widgets/create_mailbox_name_input_decoration_builder.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/search_app_bar_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

@@ -60,7 +63,7 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>

    return PointerInterceptor(
      child: GestureDetector(
-        onTap: () => controller.closeDestinationPicker(),
+        onTap: () => controller.closeDestinationPicker(context),
        child: Card(
          margin: EdgeInsets.zero,
          borderOnForeground: false,
@@ -101,11 +104,47 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
                              right: !BuildUtils.isWeb && _responsiveUtils.isLandscapeMobile(context),
                              child: Column(children: [
                                Obx(() => TopBarDestinationPickerBuilder(
-                                    controller.mailboxAction.value,
-                                    onCloseAction: () => controller.closeDestinationPicker())),
-                                Obx(() => controller.isSearchActive()
-                                    ? _buildInputSearchFormWidget(context)
-                                    : const SizedBox.shrink()),
+                                  controller.mailboxAction.value,
+                                  controller.destinationScreenType.value,
+                                  mailboxIdDestination: controller.mailboxDestination.value?.id,
+                                  isCreateMailboxValidated: controller.isCreateMailboxValidated(context),
+                                  onCloseAction: () =>
+                                    controller.closeDestinationPicker(context),
+                                  onBackToAction: () =>
+                                    controller.backToDestinationScreen(context),
+                                  onSelectedMailboxDestinationAction: () =>
+                                    controller.dispatchSelectMailboxDestination(context),
+                                  onCreateNewMailboxAction: () =>
+                                    controller.createNewMailboxAction(context),
+                                  onOpenCreateNewMailboxScreenAction: () =>
+                                    controller.openCreateNewMailboxView(context))),
+                                const Divider(
+                                  color: AppColor.colorDividerDestinationPicker,
+                                  height: 1),
+                                Obx(() {
+                                  if (controller.destinationScreenType.value == DestinationScreenType.destinationPicker) {
+                                    return controller.isSearchActive()
+                                      ? _buildInputSearchFormWidget(context)
+                                      : const SizedBox.shrink();
+                                  } else {
+                                    return Column(
+                                      mainAxisSize: MainAxisSize.min,
+                                      crossAxisAlignment: CrossAxisAlignment.start,
+                                      children: [
+                                        _buildCreateMailboxNameInput(context),
+                                        Padding(
+                                          padding: const EdgeInsets.only(left: 24, right: 24, bottom: 12),
+                                          child: Text(
+                                            AppLocalizations.of(context).selectParentFolder,
+                                            textAlign: TextAlign.left,
+                                            style: const TextStyle(
+                                              fontSize: 13,
+                                              color: AppColor.colorHintSearchBar,
+                                              fontWeight: FontWeight.normal)),
+                                        )
+                                    ]);
+                                  }
+                                }),
                                Expanded(child: Container(
                                    color: Colors.white,
                                    child: RefreshIndicator(
@@ -126,6 +165,29 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
    );
  }

+  Widget _buildCreateMailboxNameInput(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
+      child: Obx(() => (TextFieldBuilder()
+        ..key(const Key('create_mailbox_name_input'))
+        ..onChange((value) => controller.setNewNameMailbox(value))
+        ..keyboardType(TextInputType.visiblePassword)
+        ..cursorColor(AppColor.colorTextButton)
+        ..addController(controller.nameInputController)
+        ..maxLines(1)
+        ..textStyle(const TextStyle(
+            color: AppColor.colorNameEmail,
+            fontSize: 16,
+            overflow: CommonTextStyle.defaultTextOverFlow))
+        ..addFocusNode(controller.nameInputFocusNode)
+        ..textDecoration((CreateMailboxNameInputDecorationBuilder()
+            ..setHintText(AppLocalizations.of(context).hint_input_create_new_mailbox)
+            ..setErrorText(controller.getErrorInputNameString(context)))
+          .build()))
+      .build())
+    );
+  }
+
  Widget _buildLoadingView() {
    return Obx(() => controller.viewState.value.fold(
      (failure) => const SizedBox.shrink(),
@@ -144,7 +206,8 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
    return SingleChildScrollView(
        physics: const ClampingScrollPhysics(),
        child: Column(children: [
-          if (actions?.canSearch() == true)
+          if (actions?.canSearch() == true &&
+            controller.destinationScreenType.value == DestinationScreenType.destinationPicker)
            SearchBarView(
                _imagePaths,
                margin: const EdgeInsets.all(12),
@@ -154,21 +217,21 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
          if (actions?.hasAllMailboxDefault() == true)
            _buildAllMailboxes(context, actions, mailboxIdSelected),
          Obx(() => controller.defaultMailboxHasChild
-              ? _buildMailboxCategory(
-                    context,
-                    MailboxCategories.exchange,
-                    controller.defaultRootNode,
-                    actions,
-                    mailboxIdSelected)
-              : const SizedBox.shrink()),
+            ? _buildMailboxCategory(
+                context,
+                MailboxCategories.exchange,
+                controller.defaultRootNode,
+                actions,
+                mailboxIdSelected)
+            : const SizedBox.shrink()),
          Obx(() => controller.folderMailboxHasChild
-              ? _buildMailboxCategory(
-                    context,
-                    MailboxCategories.folders,
-                    controller.folderRootNode,
-                    actions,
-                    mailboxIdSelected)
-              : const SizedBox.shrink()),
+            ? _buildMailboxCategory(
+                context,
+                MailboxCategories.folders,
+                controller.folderRootNode,
+                actions,
+                mailboxIdSelected)
+            : const SizedBox.shrink()),
          const SizedBox(height: 12),
        ])
    );
@@ -182,15 +245,17 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
      MailboxId? mailboxIdSelected
  ) {
    return Container(
-        color: Colors.white,
-        child: TreeView(
-            key: Key('${categories.keyValue}_mailbox_list'),
-            children: _buildListChildTileWidget(
-                context,
-                mailboxNode,
-                mailboxIdSelected,
-                lastNode: mailboxNode.childrenItems?.last,
-                actions: actions)));
+      color: Colors.white,
+      child: TreeView(
+        key: Key('${categories.keyValue}_mailbox_list'),
+        children: _buildListChildTileWidget(
+          context,
+          mailboxNode,
+          mailboxIdSelected,
+          lastNode: mailboxNode.childrenItems?.last,
+          actions: actions)
+      )
+    );
  }

  List<Widget> _buildListChildTileWidget(
@@ -203,34 +268,41 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
      }
  ) {
    return parentNode.childrenItems
-        ?.map((mailboxNode) => mailboxNode.hasChildren()
-          ? TreeViewChild(
-                  context,
-                  key: const Key('children_tree_mailbox_child'),
-                  isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
-                  parent: (MailBoxFolderTileBuilder(
-                            context,
-                            _imagePaths,
-                            mailboxNode,
-                            lastNode: lastNode,
-                            mailboxActions: actions,
-                            mailboxIdSelected: mailboxIdSelected,
-                            mailboxDisplayed: MailboxDisplayed.destinationPicker)
-                        ..addOnOpenMailboxFolderClick(_handleOpenMailboxClick)
-                        ..addOnExpandFolderActionClick((mailboxNode) => controller.toggleMailboxFolder(mailboxNode)))
-                      .build(),
-                  children: _buildListChildTileWidget(context, mailboxNode, mailboxIdSelected, actions: actions)
-              ).build()
-          : (MailBoxFolderTileBuilder(
-                  context,
-                  _imagePaths,
-                  mailboxNode,
-                  lastNode: lastNode,
-                  mailboxDisplayed: MailboxDisplayed.destinationPicker,
-                  mailboxIdSelected: mailboxIdSelected,
-                  mailboxActions: actions)
-              ..addOnOpenMailboxFolderClick(_handleOpenMailboxClick))
-            .build())
+      ?.map((mailboxNode) {
+        if (mailboxNode.hasChildren()) {
+          return TreeViewChild(
+            context,
+            key: const Key('children_tree_mailbox_child'),
+            isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
+            parent: (MailBoxFolderTileBuilder(
+                    context,
+                    _imagePaths,
+                    mailboxNode,
+                    lastNode: lastNode,
+                    mailboxActions: actions,
+                    mailboxIdAlreadySelected: mailboxIdSelected,
+                    mailboxDisplayed: MailboxDisplayed.destinationPicker)
+                ..addOnOpenMailboxFolderClick(_handleOpenMailboxNodeClick)
+                ..addOnExpandFolderActionClick((mailboxNode) => controller.toggleMailboxFolder(mailboxNode))
+              ).build(),
+            children: _buildListChildTileWidget(
+                context,
+                mailboxNode,
+                mailboxIdSelected,
+                actions: actions)
+          ).build();
+        } else {
+          return (MailBoxFolderTileBuilder(
+                context,
+                _imagePaths,
+                mailboxNode,
+                lastNode: lastNode,
+                mailboxDisplayed: MailboxDisplayed.destinationPicker,
+                mailboxIdAlreadySelected: mailboxIdSelected,
+                mailboxActions: actions)
+            ..addOnOpenMailboxFolderClick(_handleOpenMailboxNodeClick)
+          ).build();
+        }})
      .toList() ?? <Widget>[];
  }

@@ -250,7 +322,6 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
                color: Colors.white)
            : null,
        child: ListView.builder(
-            padding: const EdgeInsets.only(left: 16, right: 8),
            key: const Key('list_mailbox_searched'),
            itemCount: controller.listMailboxSearched.length,
            shrinkWrap: true,
@@ -262,10 +333,11 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
                        _responsiveUtils,
                        controller.listMailboxSearched[index],
                        mailboxActions: actions,
-                        mailboxIdSelected: mailboxIdSelected,
+                        mailboxIdAlreadySelected: mailboxIdSelected,
                        mailboxDisplayed: MailboxDisplayed.destinationPicker,
-                        lastMailbox: controller.listMailboxSearched.last)
-                    ..addOnOpenMailboxAction((mailbox) => controller.selectMailboxAction(mailbox)))
+                        mailboxIdDestination: controller.mailboxDestination.value?.id)
+                    ..addOnOpenMailboxAction((mailbox) =>
+                        _handleOpenPresentationMailboxClick(context, mailbox)))
                  .build())
        )
    ));
@@ -276,47 +348,54 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
      MailboxActions? actions,
      MailboxId? mailboxIdSelected
  ) {
-    return Material(
+    return Obx(() {
+      return Material(
        color: Colors.transparent,
        child: InkWell(
-          onTap: () => controller.selectMailboxAction(PresentationMailbox.unifiedMailbox),
+          onTap: () => _handleOpenPresentationMailboxClick(
+              context,
+              PresentationMailbox.unifiedMailbox),
          child: Container(
-              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
-              child: Row(children: [
-                SvgPicture.asset(
-                    _imagePaths.icFolderMailbox,
-                    width: BuildUtils.isWeb ? 20 : 24,
-                    height: BuildUtils.isWeb ? 20 : 24,
+            padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
+            color: controller.mailboxDestination.value == PresentationMailbox.unifiedMailbox
+              ? AppColor.colorItemSelected
+              : Colors.transparent,
+            child: Row(children: [
+              SvgPicture.asset(
+                _imagePaths.icFolderMailbox,
+                width: BuildUtils.isWeb ? 20 : 24,
+                height: BuildUtils.isWeb ? 20 : 24,
+                fit: BoxFit.fill),
+              const SizedBox(width: 8),
+              Expanded(child: Text(
+                AppLocalizations.of(context).allMailboxes,
+                maxLines: 1,
+                softWrap: CommonTextStyle.defaultSoftWrap,
+                overflow: CommonTextStyle.defaultTextOverFlow,
+                style: const TextStyle(
+                  fontSize: 15,
+                  color: AppColor.colorNameEmail,
+                  fontWeight: FontWeight.normal),
+              )),
+              const SizedBox(width: 8),
+              if (actions == MailboxActions.select && (mailboxIdSelected == null ||
+                  mailboxIdSelected == PresentationMailbox.unifiedMailbox.id))
+                Padding(
+                  padding: const EdgeInsets.only(right: 30.0),
+                  child: SvgPicture.asset(
+                    _imagePaths.icFilterSelected,
+                    width: 20,
+                    height: 20,
                    fit: BoxFit.fill),
-                const SizedBox(width: 8),
-                Expanded(child: Text(
-                  AppLocalizations.of(context).allMailboxes,
-                  maxLines: 1,
-                  softWrap: CommonTextStyle.defaultSoftWrap,
-                  overflow: CommonTextStyle.defaultTextOverFlow,
-                  style: const TextStyle(
-                      fontSize: 15,
-                      color: AppColor.colorNameEmail,
-                      fontWeight: FontWeight.normal),
-                )),
-                const SizedBox(width: 8),
-                if (actions == MailboxActions.select && (mailboxIdSelected == null ||
-                    mailboxIdSelected == PresentationMailbox.unifiedMailbox.id))
-                  Padding(
-                    padding: const EdgeInsets.only(right: 30.0),
-                    child: SvgPicture.asset(
-                        _imagePaths.icFilterSelected,
-                        width: 20,
-                        height: 20,
-                        fit: BoxFit.fill),
-                  )
-              ])
+                )
+            ])
          ),
        ),
      );
+    });
  }

-  void _handleOpenMailboxClick(MailboxNode mailboxNode) {
+  void _handleOpenMailboxNodeClick(MailboxNode mailboxNode) {
    PresentationMailbox presentationMailbox;
    final path = controller.findNodePath(mailboxNode.item.id)
        ?? mailboxNode.item.name?.name;
@@ -326,13 +405,33 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
    } else {
      presentationMailbox = mailboxNode.item;
    }
-    controller.selectMailboxAction(presentationMailbox);
+    controller.selectMailboxAction(presentationMailbox, mailboxNode: mailboxNode);
+  }
+
+  void _handleOpenPresentationMailboxClick(
+      BuildContext context,
+      PresentationMailbox presentationMailbox
+  ) {
+    PresentationMailbox newPresentationMailbox;
+    if (presentationMailbox.id == PresentationMailbox.unifiedMailbox.id) {
+      newPresentationMailbox = presentationMailbox
+          .toPresentationMailboxWithMailboxPath(AppLocalizations.of(context).allMailboxes);
+    } else {
+      final path = controller.findNodePath(presentationMailbox.id)
+          ?? presentationMailbox.name?.name;
+      if (path != null) {
+        newPresentationMailbox = presentationMailbox.toPresentationMailboxWithMailboxPath(path);
+      } else {
+        newPresentationMailbox = presentationMailbox;
+      }
+    }
+
+    controller.selectMailboxAction(newPresentationMailbox);
  }

  Widget _buildInputSearchFormWidget(BuildContext context) {
    return Padding(
-        padding: const EdgeInsets.symmetric(
-            vertical: BuildUtils.isWeb ? 0 : 16),
+        padding: const EdgeInsets.symmetric(vertical: 16),
        child: Row(
            children: [
              Padding(padding: const EdgeInsets.only(left: 5), child: buildIconWeb(
@@ -0,0 +1,17 @@
+
+import 'package:flutter/cupertino.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+enum DestinationScreenType {
+  destinationPicker,
+  createNewMailbox;
+
+  String getTitle(BuildContext context, String mailboxActionTitle) {
+    switch(this) {
+      case DestinationScreenType.destinationPicker:
+        return mailboxActionTitle;
+      case DestinationScreenType.createNewMailbox:
+        return AppLocalizations.of(context).createNewMailbox;
+    }
+  }
+}
@@ -3,26 +3,46 @@ import 'package:core/core.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/mailbox/mailbox.dart';
+import 'package:tmail_ui_user/features/destination_picker/presentation/model/destination_screen_type.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

+typedef OnCreateNewMailboxAction = Function();
+typedef OnOpenCreateNewMailboxScreenAction = Function();
+typedef OnSelectedMailboxDestinationAction = Function();
+
 class TopBarDestinationPickerBuilder extends StatelessWidget {

+  final _imagePaths = Get.find<ImagePaths>();
+
  final MailboxActions? _mailboxAction;
  final VoidCallback? onCloseAction;
+  final VoidCallback? onBackToAction;
+  final OnCreateNewMailboxAction? onCreateNewMailboxAction;
+  final OnOpenCreateNewMailboxScreenAction? onOpenCreateNewMailboxScreenAction;
+  final OnSelectedMailboxDestinationAction? onSelectedMailboxDestinationAction;
+  final DestinationScreenType _destinationScreenType;
+  final MailboxId? mailboxIdDestination;
+  final bool isCreateMailboxValidated;

-  const TopBarDestinationPickerBuilder(
-      this._mailboxAction,
-      {
-        Key? key,
-        this.onCloseAction,
-      }
+  TopBarDestinationPickerBuilder(
+    this._mailboxAction,
+    this._destinationScreenType,
+    {
+      Key? key,
+      this.mailboxIdDestination,
+      this.isCreateMailboxValidated = false,
+      this.onCloseAction,
+      this.onBackToAction,
+      this.onCreateNewMailboxAction,
+      this.onOpenCreateNewMailboxScreenAction,
+      this.onSelectedMailboxDestinationAction,
+    }
  ) : super(key: key);

  @override
  Widget build(BuildContext context) {
-    final _imagePaths = Get.find<ImagePaths>();
-
    return Container(
      color: Colors.white,
      height: 52,
@@ -30,7 +50,7 @@ class TopBarDestinationPickerBuilder extends StatelessWidget {
          children: [
            Center(
              child: Text(
-                _mailboxAction?.getTitle(context) ?? '',
+                _destinationScreenType.getTitle(context, _mailboxAction?.getTitle(context) ?? ''),
                maxLines: 1,
                softWrap: CommonTextStyle.defaultSoftWrap,
                overflow: CommonTextStyle.defaultTextOverFlow,
@@ -39,11 +59,12 @@ class TopBarDestinationPickerBuilder extends StatelessWidget {
                    fontSize: 20,
                    color: Colors.black,
                    fontWeight: FontWeight.w700))),
-            Padding(
-              padding: const EdgeInsets.only(left: 8.0),
-              child: Align(
-                alignment: Alignment.centerLeft,
-                child: buildIconWeb(
+            if (_destinationScreenType == DestinationScreenType.destinationPicker)
+              Padding(
+                padding: const EdgeInsets.only(left: 8.0),
+                child: Align(
+                  alignment: Alignment.centerLeft,
+                  child: buildIconWeb(
                    iconSize: 24,
                    colorSelected: Colors.white,
                    splashRadius: 15,
@@ -51,10 +72,125 @@ class TopBarDestinationPickerBuilder extends StatelessWidget {
                    icon: SvgPicture.asset(_imagePaths.icComposerClose, fit: BoxFit.fill),
                    tooltip: AppLocalizations.of(context).close,
                    onTap: () => onCloseAction?.call()),
+                ),
+              )
+            else
+              Padding(
+                padding: const EdgeInsets.only(left: 8.0),
+                child: Align(
+                  alignment: Alignment.centerLeft,
+                  child: Material(
+                    color: Colors.transparent,
+                    child: InkWell(
+                      onTap: onBackToAction,
+                      customBorder: const RoundedRectangleBorder(
+                          borderRadius: BorderRadius.all(Radius.circular(8))),
+                      child: Padding(
+                        padding: const EdgeInsets.symmetric(
+                          vertical: 8,
+                          horizontal: 8),
+                        child: Row(mainAxisSize: MainAxisSize.min, children: [
+                          SvgPicture.asset(
+                            _imagePaths.icBack,
+                            width: 14,
+                            height: 14,
+                            color: AppColor.primaryColor,
+                            fit: BoxFit.fill),
+                          const SizedBox(width: 5),
+                          Text(
+                            AppLocalizations.of(context).back,
+                            maxLines: 1,
+                            softWrap: CommonTextStyle.defaultSoftWrap,
+                            overflow: CommonTextStyle.defaultTextOverFlow,
+                            textAlign: TextAlign.center,
+                            style: const TextStyle(
+                              fontSize: 15,
+                              color: AppColor.colorTextButton,
+                              fontWeight: FontWeight.normal))
+                        ]),
+                      ),
+                    ),
+                  ),
+                ),
              ),
-            ),
+            Align(
+              alignment: Alignment.centerRight,
+              child: Row(mainAxisSize: MainAxisSize.min, children: [
+                if (_destinationScreenType == DestinationScreenType.destinationPicker &&
+                    _mailboxAction != MailboxActions.create)
+                  _buildIconCreateButton(context),
+                if (_destinationScreenType == DestinationScreenType.destinationPicker)
+                  _buildDoneButton(context)
+                else
+                  _buildSaveButton(context),
+                const SizedBox(width: 8)
+              ]),
+            )
          ]
      ),
    );
  }
+
+  Widget _buildIconCreateButton(BuildContext context) {
+    return buildIconWeb(
+      iconSize: 24,
+      colorSelected: Colors.white,
+      splashRadius: 15,
+      iconPadding: const EdgeInsets.all(3),
+      icon: SvgPicture.asset(
+        _imagePaths.icCreateNewFolder,
+        color: mailboxIdDestination != null
+          ? AppColor.colorTextButton
+          : AppColor.colorDisableMailboxCreateButton,
+        fit: BoxFit.fill),
+      tooltip: AppLocalizations.of(context).create,
+      onTap: onOpenCreateNewMailboxScreenAction
+    );
+  }
+
+  Widget _buildDoneButton(BuildContext context) {
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        customBorder: const RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(8))),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(
+            vertical: 8,
+            horizontal: 8),
+          child: Text(
+            AppLocalizations.of(context).done,
+            style: TextStyle(
+              fontSize: 15,
+              color: mailboxIdDestination != null
+                ? AppColor.colorTextButton
+                : AppColor.colorDisableMailboxCreateButton))),
+        onTap: onSelectedMailboxDestinationAction
+      )
+    );
+  }
+
+  Widget _buildSaveButton(BuildContext context) {
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        customBorder: const RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(8))),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(
+            vertical: 8,
+            horizontal: 8),
+          child: Text(
+            AppLocalizations.of(context).save,
+            style: TextStyle(
+              fontSize: 15,
+              color: isCreateMailboxValidated
+                ? AppColor.colorTextButton
+                : AppColor.colorDisableMailboxCreateButton)
+          )
+        ),
+        onTap: isCreateMailboxValidated ? onCreateNewMailboxAction : null
+      )
+    );
+  }
 }
@@ -529,8 +529,7 @@ class MailboxController extends BaseMailboxController {
          .map((mailbox) => mailbox.toSelectedPresentationMailbox(selectMode: SelectMode.INACTIVE))
          .toList();
    } else {
-      defaultMailboxTree.value.updateNodesUIMode(selectMode: SelectMode.INACTIVE);
-      folderMailboxTree.value.updateNodesUIMode(selectMode: SelectMode.INACTIVE);
+      unAllSelectedMailboxNode();
    }
    currentSelectMode.value = SelectMode.INACTIVE;
  }
@@ -361,7 +361,7 @@ class MailboxView extends GetWidget<MailboxController> {
                        _responsiveUtils,
                        controller.listMailboxSearched[index],
                        allSelectMode: controller.currentSelectMode.value,
-                        lastMailbox: controller.listMailboxSearched.last)
+                        lastMailboxIdInSearchedList: controller.listMailboxSearched.last.id)
                    ..addOnOpenMailboxAction((mailbox) => controller.openMailbox(context, mailbox))
                    ..addOnSelectMailboxActionClick((mailbox) => controller.selectMailboxSearched(context, mailbox)))
                  .build())
@@ -361,8 +361,7 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
                      context,
                      _imagePaths,
                      _responsiveUtils,
-                      listMailbox[index],
-                      lastMailbox: controller.listMailboxSearched.last)
+                      listMailbox[index])
                  ..addOnDragItemAccepted(controller.mailboxDashBoardController.dragSelectedMultipleEmailToMailboxAction)
                  ..addOnOpenMailboxAction((mailbox) => controller.openMailbox(context, mailbox))
                  ..addOnMenuActionClick((position, mailbox) => _openMailboxMenuAction(context, position, mailbox))
@@ -23,6 +23,8 @@ class MailboxNode with EquatableMixin{

  bool get isActivated => nodeState == MailboxState.activated;

+  bool get isSelected => selectMode == SelectMode.ACTIVE;
+
  MailboxNode(
    this.item,
    {
@@ -28,7 +28,7 @@ class MailBoxFolderTileBuilder {
  final MailboxNode? lastNode;
  final PresentationMailbox? mailboxNodeSelected;
  final MailboxActions? mailboxActions;
-  final MailboxId? mailboxIdSelected;
+  final MailboxId? mailboxIdAlreadySelected;

  OnExpandFolderActionClick? _onExpandFolderActionClick;
  OnOpenMailboxFolderClick? _onOpenMailboxFolderClick;
@@ -48,7 +48,7 @@ class MailBoxFolderTileBuilder {
      this.lastNode,
      this.mailboxNodeSelected,
      this.mailboxActions,
-      this.mailboxIdSelected,
+      this.mailboxIdAlreadySelected
    }
  );

@@ -159,8 +159,10 @@ class MailBoxFolderTileBuilder {
            child: InkWell(
              onTap: () => _onOpenMailboxFolderClick?.call(_mailboxNode),
              child: Container(
-                  color: Colors.transparent,
                  padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
+                  color: mailboxDisplayed == MailboxDisplayed.destinationPicker && _mailboxNode.isSelected
+                    ? AppColor.colorItemSelected
+                    : Colors.transparent,
                  child: Row(children: [
                    _buildLeadingMailboxItem(),
                    const SizedBox(width: 8),
@@ -399,7 +401,7 @@ class MailBoxFolderTileBuilder {
  }

  Widget _buildSelectedIcon() {
-    if (_mailboxNode.item.id == mailboxIdSelected &&
+    if (_mailboxNode.item.id == mailboxIdAlreadySelected &&
        mailboxDisplayed == MailboxDisplayed.destinationPicker &&
        (mailboxActions == MailboxActions.select ||
        mailboxActions == MailboxActions.create)) {
@@ -15,14 +15,15 @@ typedef OnDragItemAccepted = void Function(List<PresentationEmail>, Presentation
 class MailboxSearchTileBuilder {

  final PresentationMailbox _presentationMailbox;
-  final PresentationMailbox? lastMailbox;
  final SelectMode allSelectMode;
  final ImagePaths _imagePaths;
  final ResponsiveUtils _responsiveUtils;
  final BuildContext _context;
  final MailboxDisplayed mailboxDisplayed;
  final MailboxActions? mailboxActions;
-  final MailboxId? mailboxIdSelected;
+  final MailboxId? mailboxIdAlreadySelected;
+  final MailboxId? lastMailboxIdInSearchedList;
+  final MailboxId? mailboxIdDestination;

  bool isHoverItem = false;

@@ -38,10 +39,11 @@ class MailboxSearchTileBuilder {
    this._presentationMailbox,
    {
      this.allSelectMode = SelectMode.INACTIVE,
-      this.lastMailbox,
+      this.lastMailboxIdInSearchedList,
      this.mailboxDisplayed = MailboxDisplayed.mailbox,
      this.mailboxActions,
-      this.mailboxIdSelected,
+      this.mailboxIdAlreadySelected,
+      this.mailboxIdDestination,
    }
  );

@@ -111,19 +113,28 @@ class MailboxSearchTileBuilder {
          absorbing: !_presentationMailbox.isActivated,
          child: Opacity(
            opacity: _presentationMailbox.isActivated ? 1.0 : 0.3,
-            child: ListTile(
-              contentPadding: EdgeInsets.zero,
-              onTap: () => allSelectMode == SelectMode.ACTIVE
-                  ? _onSelectMailboxActionClick?.call(_presentationMailbox)
-                  : _onOpenMailboxActionClick?.call(_presentationMailbox),
-              leading: _buildLeadingIcon(),
-              title: _buildTitleItem(),
-              subtitle: _buildSubtitleItem(),
-              trailing: _buildSelectedIcon(),
+            child: Container(
+              color: _presentationMailbox.id == mailboxIdDestination &&
+                  mailboxDisplayed == MailboxDisplayed.destinationPicker
+                ? AppColor.colorItemSelected
+                : Colors.transparent,
+              padding: mailboxDisplayed == MailboxDisplayed.destinationPicker
+                ? const EdgeInsets.only(left: 16, right: 8)
+                : EdgeInsets.zero,
+              child: ListTile(
+                contentPadding: EdgeInsets.zero,
+                onTap: () => allSelectMode == SelectMode.ACTIVE
+                    ? _onSelectMailboxActionClick?.call(_presentationMailbox)
+                    : _onOpenMailboxActionClick?.call(_presentationMailbox),
+                leading: _buildLeadingIcon(),
+                title: _buildTitleItem(),
+                subtitle: _buildSubtitleItem(),
+                trailing: _buildSelectedIcon(),
+              ),
            ),
          ),
        ),
-        if (lastMailbox?.id != _presentationMailbox.id)
+        if (lastMailboxIdInSearchedList != _presentationMailbox.id)
          Padding(
              padding: EdgeInsets.only(left: allSelectMode == SelectMode.ACTIVE ? 50 : 35),
              child: const Divider(color: AppColor.lineItemListColor, height: 0.5, thickness: 0.2)),
@@ -221,21 +232,26 @@ class MailboxSearchTileBuilder {
  }

  Color get backgroundColorItem {
-    if (isHoverItem) {
-      return AppColor.colorBgMailboxSelected;
+    if (_presentationMailbox.id == mailboxIdDestination &&
+        mailboxDisplayed == MailboxDisplayed.destinationPicker) {
+      return AppColor.colorItemSelected;
    } else {
-      if (mailboxDisplayed == MailboxDisplayed.mailbox) {
-        return _responsiveUtils.isDesktop(_context)
-            ? AppColor.colorBgDesktop
-            : Colors.white;
+      if (isHoverItem) {
+        return AppColor.colorBgMailboxSelected;
      } else {
-        return Colors.white;
+        if (mailboxDisplayed == MailboxDisplayed.mailbox) {
+          return _responsiveUtils.isDesktop(_context)
+              ? AppColor.colorBgDesktop
+              : Colors.white;
+        } else {
+          return Colors.white;
+        }
      }
    }
  }

  Widget? _buildSelectedIcon() {
-    if (_presentationMailbox.id == mailboxIdSelected &&
+    if (_presentationMailbox.id == mailboxIdAlreadySelected &&
        mailboxDisplayed == MailboxDisplayed.destinationPicker &&
        (mailboxActions == MailboxActions.select ||
        mailboxActions == MailboxActions.create)) {
@@ -30,6 +30,7 @@ class MailboxCreatorController extends BaseController {
  final newNameMailbox = Rxn<String>();

  FocusNode? nameInputFocusNode;
+  TextEditingController? nameInputController;

  MailboxCreatorArguments? arguments;
  AccountId? accountId;
@@ -48,12 +49,12 @@ class MailboxCreatorController extends BaseController {
  void onInit() {
    super.onInit();
    nameInputFocusNode = FocusNode();
+    nameInputController = TextEditingController();
  }

  @override
  void onReady() {
    super.onReady();
-    log('MailboxCreatorController::onReady(): ');
    if (arguments != null) {
      folderMailboxTree = arguments!.folderMailboxTree;
      defaultMailboxTree = arguments!.defaultMailboxTree;
@@ -71,7 +72,7 @@ class MailboxCreatorController extends BaseController {

  @override
  void onClose() {
-    nameInputFocusNode?.dispose();
+    _disposeWidget();
    super.onClose();
  }

@@ -184,6 +185,13 @@ class MailboxCreatorController extends BaseController {
    }
  }

+  void _disposeWidget() {
+    nameInputFocusNode?.dispose();
+    nameInputFocusNode = null;
+    nameInputController?.dispose();
+    nameInputController = null;
+  }
+
  void createNewMailbox(BuildContext context) {
    FocusScope.of(context).unfocus();

@@ -194,9 +202,7 @@ class MailboxCreatorController extends BaseController {
          mailboxLocation: selectedMailbox.value);

      if (BuildUtils.isWeb) {
-        nameInputFocusNode?.dispose();
-        nameInputFocusNode = null;
-
+        _disposeWidget();
        onCreatedMailboxCallback?.call(newMailboxArguments);
      } else {
        popBack(result: newMailboxArguments);
@@ -208,9 +214,7 @@ class MailboxCreatorController extends BaseController {
    FocusScope.of(context).unfocus();

    if (BuildUtils.isWeb) {
-      nameInputFocusNode?.dispose();
-      nameInputFocusNode = null;
-
+      _disposeWidget();
      onDismissMailboxCreator?.call();
    } else {
      popBack();
@@ -84,6 +84,7 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
                            right: !BuildUtils.isWeb && _responsiveUtils.isLandscapeMobile(context),
                            child: Column(children: [
                              _buildAppBar(context),
+                              const Divider(color: AppColor.colorDividerDestinationPicker, height: 1),
                              _buildCreateMailboxNameInput(context),
                              _buildMailboxLocation(context),
                            ]),
@@ -116,6 +117,7 @@ class MailboxCreatorView extends GetWidget<MailboxCreatorController> {
          ..onChange((value) => controller.setNewNameMailbox(value))
          ..keyboardType(TextInputType.visiblePassword)
          ..cursorColor(AppColor.colorTextButton)
+          ..addController(controller.nameInputController)
          ..maxLines(1)
          ..textStyle(const TextStyle(
              color: AppColor.colorNameEmail,
@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2022-10-26T13:43:22.314355",
+  "@@last_modified": "2022-10-27T15:02:38.515955",
  "initializing_data": "Initializing data...",
  "@initializing_data": {
    "type": "text",
@@ -2393,5 +2393,17 @@
    "placeholders": {
      "numberOfMailbox": {}
    }
+  },
+  "toastMessageErrorNotSelectedFolderWhenCreateNewMailbox": "You have not selected a save folder to save",
+  "@toastMessageErrorNotSelectedFolderWhenCreateNewMailbox": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "createNewMailbox": "Create new mailbox",
+  "@createNewMailbox": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
  }
 }
@@ -2463,4 +2463,16 @@ class AppLocalizations {
        args: [numberOfMailbox]
    );
  }
+
+  String get toastMessageErrorNotSelectedFolderWhenCreateNewMailbox {
+    return Intl.message(
+        'You have not selected a save folder to save',
+        name: 'toastMessageErrorNotSelectedFolderWhenCreateNewMailbox');
+  }
+
+  String get createNewMailbox {
+    return Intl.message(
+        'Create new mailbox',
+        name: 'createNewMailbox');
+  }
 }