TF-3005 Apply new design app bar contact view

2024-09-18 01:16:52 +07:00
parent e584e61521
commit c233ec7a2e
12 changed files with 342 additions and 290 deletions
@@ -1,5 +1,6 @@

 import 'package:core/presentation/utils/keyboard_utils.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
 import 'package:core/utils/app_logger.dart';
 import 'package:core/utils/platform_info.dart';
 import 'package:debounce_throttle/debounce_throttle.dart';
@@ -31,6 +32,7 @@ class ContactController extends BaseController {
  final searchQuery = SearchQuery.initial().obs;
  final session = Rxn<Session>();
  final listContactSearched = RxList<EmailAddress>();
+  final contactArguments = Rxn<ContactArguments>();

  GetAllAutoCompleteInteractor? _getAllAutoCompleteInteractor;
  GetAutoCompleteInteractor? _getAutoCompleteInteractor;
@@ -39,7 +41,6 @@ class ContactController extends BaseController {
  final Debouncer<String> _deBouncerTime = Debouncer<String>(const Duration(milliseconds: 300), initialValue: '');
  AccountId? _accountId;

-  ContactArguments? arguments;
  EmailAddress? contactSelected;
  SelectedContactCallbackAction? onSelectedContactCallback;
  VoidCallback? onDismissContactView;
@@ -47,8 +48,9 @@ class ContactController extends BaseController {
  @override
  void onInit() {
    super.onInit();
+    ThemeUtils.setStatusBarTransparentColor();
    log('ContactController::onInit():arguments: ${Get.arguments}');
-    arguments = Get.arguments;
+    contactArguments.value = Get.arguments;
    _deBouncerTime.values.listen((value) {
      searchQuery.value = SearchQuery(value);
      _searchContactByNameOrEmail(searchQuery.value.value);
@@ -56,15 +58,13 @@ class ContactController extends BaseController {
  }

  @override
-  void onReady() async {
+  void onReady() {
    super.onReady();
-    log('ContactController::onReady():');
    textInputSearchFocus.requestFocus();
-    if (arguments != null) {
-      _accountId = arguments!.accountId;
-      session.value = arguments!.session;
-      final listContactSelected = arguments!.listContactSelected;
-      log('ContactController::onReady(): arguments: $arguments');
+    if (contactArguments.value != null) {
+      _accountId = contactArguments.value!.accountId;
+      session.value = contactArguments.value!.session;
+      final listContactSelected = contactArguments.value!.listContactSelected;
      log('ContactController::onReady(): listContactSelected: $listContactSelected');
      if (listContactSelected.isNotEmpty) {
        contactSelected = EmailAddress(listContactSelected.first, listContactSelected.first);
@@ -167,9 +167,11 @@ class ContactController extends BaseController {
    popBack(result: emailAddress);
  }

-  void closeContactView(BuildContext context) {
-    clearAllTextInputSearchForm();
-    KeyboardUtils.hideKeyboard(context);
+  void closeContactView() {
+    textInputSearchController.clear();
+    searchQuery.value = SearchQuery.initial();
+    textInputSearchFocus.unfocus();
+    FocusManager.instance.primaryFocus?.unfocus();
    popBack();
  }
 }
@@ -8,6 +8,7 @@ import 'package:jmap_dart_client/jmap/mail/email/email_address.dart';
 import 'package:pointer_interceptor/pointer_interceptor.dart';
 import 'package:tmail_ui_user/features/composer/presentation/model/suggestion_email_address.dart';
 import 'package:tmail_ui_user/features/contact/presentation/contact_controller.dart';
+import 'package:tmail_ui_user/features/contact/presentation/styles/contact_view_style.dart';
 import 'package:tmail_ui_user/features/contact/presentation/utils/contact_utils.dart';
 import 'package:tmail_ui_user/features/contact/presentation/widgets/app_bar_contact_widget.dart';
 import 'package:tmail_ui_user/features/contact/presentation/widgets/contact_suggestion_box_item.dart';
@@ -16,9 +17,6 @@ import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 class ContactView extends GetWidget<ContactController> {

-  final _maxHeight = 656.0;
-  final _maxWidth = 556.0;
-
  const ContactView({super.key});

  @override
@@ -32,140 +30,149 @@ class ContactView extends GetWidget<ContactController> {
              bottom: false,
              left: false,
              right: false,
-              top: ContactUtils.supportAppBarTopBorder(context, controller.responsiveUtils),
+              top: ContactViewStyle.isAppBarTopBorderSupported(
+                context,
+                controller.responsiveUtils
+              ),
              child: Center(
                child: Container(
-                  height: _getHeightContactView(context),
-                  width: _getWidthContactView(context),
+                  height: ContactViewStyle.getContactViewHeight(
+                    context,
+                    controller.responsiveUtils
+                  ),
+                  width: ContactViewStyle.getContactViewWidth(
+                    context,
+                    controller.responsiveUtils
+                  ),
                  decoration: BoxDecoration(
-                    borderRadius: _getRadiusContactView(context),
+                    borderRadius: ContactViewStyle.getContactViewBorderRadius(
+                      context,
+                      controller.responsiveUtils
+                    ),
                    color: Colors.white
                  ),
-                    child: ClipRRect(
-                      borderRadius: _getRadiusContactView(context),
-                        child: SafeArea(child: Container(
-                          color: Colors.white,
-                          child: Column(children: [
-                            Container(
-                                height: 52,
-                                color: Colors.white,
-                                padding: ContactUtils.getPaddingAppBar(context, controller.responsiveUtils),
-                                child: AppBarContactWidget(
-                                    onCloseContactView: () => controller.closeContactView(context))
-                            ),
-                            const Divider(color: AppColor.colorDividerComposer, height: 1),
-                            SearchAppBarWidget(
-                              imagePaths: controller.imagePaths,
-                              searchQuery: controller.searchQuery.value,
-                              searchFocusNode: controller.textInputSearchFocus,
-                              searchInputController: controller.textInputSearchController,
-                              hasBackButton: false,
-                              hasSearchButton: true,
-                              margin: ContactUtils.getPaddingSearchInputForm(context, controller.responsiveUtils),
-                              decoration: const BoxDecoration(
-                                borderRadius: BorderRadius.all(Radius.circular(10)),
-                                color: AppColor.colorBgSearchBar),
-                              iconClearText: SvgPicture.asset(
-                                controller.imagePaths.icClearTextSearch,
-                                width: 18,
-                                height: 18,
-                                fit: BoxFit.fill),
-                              hintText: AppLocalizations.of(context).hintSearchInputContact,
-                              onClearTextSearchAction: controller.clearAllTextInputSearchForm,
-                              onTextChangeSearchAction: controller.onTextSearchChange,
-                              onSearchTextAction: controller.onSearchTextAction,
-                            ),
-                            if (PlatformInfo.isWeb)
-                              Obx(() {
-                                final username = controller.session.value?.username.value ?? '';
-                                if (username.isNotEmpty) {
-                                  final userEmailAddress = EmailAddress(
-                                    AppLocalizations.of(context).me,
-                                    username);
-                                  final fromMeSuggestionEmailAddress = SuggestionEmailAddress(userEmailAddress, state: SuggestionEmailState.valid);
-                                  return Padding(
-                                    padding: const EdgeInsets.symmetric(horizontal: 4),
-                                    child: Column(
-                                      children: [
-                                        ContactSuggestionBoxItem(
-                                          fromMeSuggestionEmailAddress,
-                                          padding: ContactUtils.getPaddingSearchResultList(context, controller.responsiveUtils),
-                                          selectedContactCallbackAction: (contact) {
-                                            controller.selectContact(context, contact);
-                                          },
-                                        ),
-                                        Padding(
-                                          padding: ContactUtils.getPaddingDividerSearchResultList(context, controller.responsiveUtils),
-                                          child: const Divider(height: 1, color: AppColor.colorDivider),
-                                        ),
-                                      ],
+                  clipBehavior: Clip.antiAlias,
+                  child: SafeArea(
+                    child: Column(
+                      children: [
+                        Obx(() => AppBarContactWidget(
+                          title: controller.contactArguments.value?.contactViewTitle,
+                          imagePaths: controller.imagePaths,
+                          responsiveUtils: controller.responsiveUtils,
+                          onCloseContactView: controller.closeContactView,
+                        )),
+                        SearchAppBarWidget(
+                          imagePaths: controller.imagePaths,
+                          searchQuery: controller.searchQuery.value,
+                          searchFocusNode: controller.textInputSearchFocus,
+                          searchInputController: controller.textInputSearchController,
+                          hasBackButton: false,
+                          hasSearchButton: true,
+                          margin: ContactUtils.getPaddingSearchInputForm(context, controller.responsiveUtils),
+                          decoration: const BoxDecoration(
+                            borderRadius: BorderRadius.all(Radius.circular(10)),
+                            color: AppColor.colorBgSearchBar),
+                          iconClearText: SvgPicture.asset(
+                            controller.imagePaths.icClearTextSearch,
+                            width: 18,
+                            height: 18,
+                            fit: BoxFit.fill),
+                          hintText: AppLocalizations.of(context).hintSearchInputContact,
+                          onClearTextSearchAction: controller.clearAllTextInputSearchForm,
+                          onTextChangeSearchAction: controller.onTextSearchChange,
+                          onSearchTextAction: controller.onSearchTextAction,
+                        ),
+                        if (PlatformInfo.isWeb)
+                          Obx(() {
+                            final username = controller.session.value?.username.value ?? '';
+                            if (username.isNotEmpty) {
+                              final userEmailAddress = EmailAddress(
+                                AppLocalizations.of(context).me,
+                                username);
+                              final fromMeSuggestionEmailAddress = SuggestionEmailAddress(userEmailAddress, state: SuggestionEmailState.valid);
+                              return Padding(
+                                padding: const EdgeInsets.symmetric(horizontal: 4),
+                                child: Column(
+                                  children: [
+                                    ContactSuggestionBoxItem(
+                                      fromMeSuggestionEmailAddress,
+                                      padding: ContactUtils.getPaddingSearchResultList(context, controller.responsiveUtils),
+                                      selectedContactCallbackAction: (contact) {
+                                        controller.selectContact(context, contact);
+                                      },
                                    ),
-                                  );
-                                } else {
-                                  return const SizedBox.shrink();
-                                }
-                              }),
-                            Expanded(child: Obx(() {
-                              if (controller.listContactSearched.isNotEmpty) {
-                                if (PlatformInfo.isMobile) {
-                                  return Container(
-                                    color: Colors.white,
-                                    child: ListView.separated(
-                                      itemCount: controller.listContactSearched.length,
-                                      separatorBuilder: (context, index) {
-                                        return Padding(
-                                          padding: ContactUtils.getPaddingDividerSearchResultList(context, controller.responsiveUtils),
-                                          child: const Divider(height: 1, color: AppColor.colorDivider),
-                                        );
-                                      },
-                                      itemBuilder: (context, index) {
-                                        final emailAddress = controller.listContactSearched[index];
-                                        final suggestionEmailAddress = _toSuggestionEmailAddress(
-                                          emailAddress,
-                                          controller.contactSelected != null ? [controller.contactSelected!] : []
-                                        );
-                                        return ContactSuggestionBoxItem(
-                                          suggestionEmailAddress,
-                                          padding: ContactUtils.getPaddingSearchResultList(context, controller.responsiveUtils),
-                                          selectedContactCallbackAction: (contact) => controller.selectContact(context, contact),
-                                        );
-                                      }
-                                    )
-                                  );
-                                } else {
-                                  return Container(
-                                    color: Colors.white,
-                                    padding: const EdgeInsets.symmetric(horizontal: 4),
-                                    child: ListView.separated(
-                                      itemCount: controller.listContactSearched.length,
-                                      separatorBuilder: (context, index) {
-                                        return Padding(
-                                          padding: ContactUtils.getPaddingDividerSearchResultList(context, controller.responsiveUtils),
-                                          child: const Divider(height: 1, color: AppColor.colorDivider),
-                                        );
-                                      },
-                                      itemBuilder: (context, index) {
-                                        final emailAddress = controller.listContactSearched[index];
-                                        final suggestionEmailAddress = _toSuggestionEmailAddress(
-                                          emailAddress,
-                                          controller.contactSelected != null ? [controller.contactSelected!] : []
-                                        );
-                                        return ContactSuggestionBoxItem(
-                                          suggestionEmailAddress,
-                                          padding: ContactUtils.getPaddingSearchResultList(context, controller.responsiveUtils),
-                                          selectedContactCallbackAction: (contact) => controller.selectContact(context, contact),
-                                        );
-                                      }
-                                    )
-                                  );
-                                }
-                              } else {
-                                return const SizedBox.shrink();
-                              }
-                            })),
-                          ]),
-                        ))
-                    )
+                                    Padding(
+                                      padding: ContactUtils.getPaddingDividerSearchResultList(context, controller.responsiveUtils),
+                                      child: const Divider(height: 1, color: AppColor.colorDivider),
+                                    ),
+                                  ],
+                                ),
+                              );
+                            } else {
+                              return const SizedBox.shrink();
+                            }
+                          }),
+                        Expanded(child: Obx(() {
+                          if (controller.listContactSearched.isNotEmpty) {
+                            if (PlatformInfo.isMobile) {
+                              return Container(
+                                color: Colors.white,
+                                child: ListView.separated(
+                                  itemCount: controller.listContactSearched.length,
+                                  separatorBuilder: (context, index) {
+                                    return Padding(
+                                      padding: ContactUtils.getPaddingDividerSearchResultList(context, controller.responsiveUtils),
+                                      child: const Divider(height: 1, color: AppColor.colorDivider),
+                                    );
+                                  },
+                                  itemBuilder: (context, index) {
+                                    final emailAddress = controller.listContactSearched[index];
+                                    final suggestionEmailAddress = _toSuggestionEmailAddress(
+                                      emailAddress,
+                                      controller.contactSelected != null ? [controller.contactSelected!] : []
+                                    );
+                                    return ContactSuggestionBoxItem(
+                                      suggestionEmailAddress,
+                                      padding: ContactUtils.getPaddingSearchResultList(context, controller.responsiveUtils),
+                                      selectedContactCallbackAction: (contact) => controller.selectContact(context, contact),
+                                    );
+                                  }
+                                )
+                              );
+                            } else {
+                              return Container(
+                                color: Colors.white,
+                                padding: const EdgeInsets.symmetric(horizontal: 4),
+                                child: ListView.separated(
+                                  itemCount: controller.listContactSearched.length,
+                                  separatorBuilder: (context, index) {
+                                    return Padding(
+                                      padding: ContactUtils.getPaddingDividerSearchResultList(context, controller.responsiveUtils),
+                                      child: const Divider(height: 1, color: AppColor.colorDivider),
+                                    );
+                                  },
+                                  itemBuilder: (context, index) {
+                                    final emailAddress = controller.listContactSearched[index];
+                                    final suggestionEmailAddress = _toSuggestionEmailAddress(
+                                      emailAddress,
+                                      controller.contactSelected != null ? [controller.contactSelected!] : []
+                                    );
+                                    return ContactSuggestionBoxItem(
+                                      suggestionEmailAddress,
+                                      padding: ContactUtils.getPaddingSearchResultList(context, controller.responsiveUtils),
+                                      selectedContactCallbackAction: (contact) => controller.selectContact(context, contact),
+                                    );
+                                  }
+                                )
+                              );
+                            }
+                          } else {
+                            return const SizedBox.shrink();
+                          }
+                        })),
+                      ]
+                    ),
+                  )
                ),
              ),
            ),
@@ -174,71 +181,6 @@ class ContactView extends GetWidget<ContactController> {
    );
  }

-  BorderRadius _getRadiusContactView(BuildContext context) {
-    if (PlatformInfo.isMobile && controller.responsiveUtils.isLandscapeMobile(context)) {
-      return BorderRadius.zero;
-    } else if (controller.responsiveUtils.isMobile(context)) {
-      return BorderRadius.only(
-        topRight: Radius.circular(
-          ContactUtils.getRadiusBorderAppBarTop(
-            context,
-            controller.responsiveUtils
-          )
-        ),
-        topLeft: Radius.circular(
-          ContactUtils.getRadiusBorderAppBarTop(
-            context,
-            controller.responsiveUtils
-          )
-        )
-      );
-    } else {
-      return const BorderRadius.all(Radius.circular(16));
-    }
-  }
-
-  double _getHeightContactView(BuildContext context) {
-    if (PlatformInfo.isWeb) {
-      if (controller.responsiveUtils.isMobile(context)) {
-        return double.infinity;
-      } else {
-        if (controller.responsiveUtils.getSizeScreenHeight(context) > _maxHeight) {
-          return _maxHeight;
-        } else {
-          return double.infinity;
-        }
-      }
-    } else {
-      if (controller.responsiveUtils.isLandscapeMobile(context) ||
-        controller.responsiveUtils.isPortraitMobile(context)) {
-        return double.infinity;
-      } else {
-        if (controller.responsiveUtils.getSizeScreenHeight(context) > _maxHeight) {
-          return _maxHeight;
-        } else {
-          return double.infinity;
-        }
-      }
-    }
-  }
-
-  double _getWidthContactView(BuildContext context) {
-    if (PlatformInfo.isWeb) {
-      if (controller.responsiveUtils.isMobile(context)) {
-        return double.infinity;
-      } else {
-        return _maxWidth;
-      }
-    } else {
-      if (controller.responsiveUtils.isLandscapeMobile(context) ||
-        controller.responsiveUtils.isPortraitMobile(context)) {
-        return double.infinity;
-      } else {
-        return _maxWidth;
-      }
-    }
-  }
-
  SuggestionEmailAddress _toSuggestionEmailAddress(EmailAddress item, List<EmailAddress> addedEmailAddresses) {
    if (addedEmailAddresses.contains(item)) {
      return SuggestionEmailAddress(item, state: SuggestionEmailState.duplicated);
@@ -7,9 +7,20 @@ class ContactArguments with EquatableMixin {
  final AccountId accountId;
  final Session session;
  final Set<String> listContactSelected;
+  final String? contactViewTitle;

-  ContactArguments(this.accountId, this.session, this.listContactSelected);
+  ContactArguments({
+    required this.accountId,
+    required this.session,
+    required this.listContactSelected,
+    this.contactViewTitle
+  });

  @override
-  List<Object?> get props => [accountId, session, listContactSelected];
+  List<Object?> get props => [
+    accountId,
+    session,
+    listContactSelected,
+    contactViewTitle,
+  ];
 }
@@ -0,0 +1,21 @@
+
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/utils/platform_info.dart';
+import 'package:flutter/material.dart';
+
+class AppBarContactWidgetStyle {
+  static EdgeInsetsGeometry getAppBarPadding(
+    BuildContext context,
+    ResponsiveUtils responsiveUtils
+  ) {
+    if (PlatformInfo.isWeb) {
+      return const EdgeInsets.symmetric(horizontal: 16);
+    } else {
+      if (responsiveUtils.isScreenWithShortestSide(context)) {
+        return const EdgeInsets.symmetric(horizontal: 10);
+      } else {
+        return const EdgeInsets.symmetric(horizontal: 32);
+      }
+    }
+  }
+}
@@ -0,0 +1,62 @@
+
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/utils/platform_info.dart';
+import 'package:flutter/cupertino.dart';
+
+class ContactViewStyle {
+  static const double viewMaxHeight = 624.0;
+  static const double viewMaxWidth = 558.0;
+
+  static double getContactViewHeight(
+    BuildContext context,
+    ResponsiveUtils responsiveUtils
+  ) {
+    if ((PlatformInfo.isWeb && responsiveUtils.isMobile(context)) ||
+        (PlatformInfo.isMobile && responsiveUtils.isScreenWithShortestSide(context))
+    ) {
+      return double.infinity;
+    } else if (responsiveUtils.getSizeScreenHeight(context) > ContactViewStyle.viewMaxHeight) {
+      return ContactViewStyle.viewMaxHeight;
+    } else {
+      return double.infinity;
+    }
+  }
+
+  static double getContactViewWidth(
+    BuildContext context,
+    ResponsiveUtils responsiveUtils
+  ) {
+    if ((PlatformInfo.isWeb && responsiveUtils.isMobile(context)) ||
+        (PlatformInfo.isMobile && responsiveUtils.isScreenWithShortestSide(context))
+    ) {
+      return double.infinity;
+    } else {
+      return ContactViewStyle.viewMaxWidth;
+    }
+  }
+
+  static bool isAppBarTopBorderSupported(
+    BuildContext context,
+    ResponsiveUtils responsiveUtils
+  ) {
+    return !(PlatformInfo.isWeb || responsiveUtils.isLandscapeMobile(context));
+  }
+
+  static BorderRadiusGeometry getContactViewBorderRadius(
+    BuildContext context,
+    ResponsiveUtils responsiveUtils
+  ) {
+    if (PlatformInfo.isMobile && responsiveUtils.isLandscapeMobile(context)) {
+      return BorderRadius.zero;
+    } else if ((PlatformInfo.isWeb && responsiveUtils.isMobile(context)) ||
+        (PlatformInfo.isMobile && responsiveUtils.isPortraitMobile(context))
+    ) {
+      return const BorderRadiusDirectional.only(
+        topEnd: Radius.circular(16),
+        topStart: Radius.circular(16),
+      );
+    } else {
+      return const BorderRadius.all(Radius.circular(16));
+    }
+  }
+}
@@ -4,18 +4,6 @@ import 'package:core/utils/platform_info.dart';
 import 'package:flutter/material.dart';

 class ContactUtils {
-  static EdgeInsets getPaddingAppBar(BuildContext context, ResponsiveUtils responsiveUtils) {
-    if (PlatformInfo.isWeb) {
-      return const EdgeInsets.symmetric(horizontal: 16);
-    } else {
-      if (responsiveUtils.isScreenWithShortestSide(context)) {
-        return const EdgeInsets.symmetric(horizontal: 10);
-      } else {
-        return const EdgeInsets.symmetric(horizontal: 32);
-      }
-    }
-  }
-
  static EdgeInsets getPaddingSearchInputForm(BuildContext context, ResponsiveUtils responsiveUtils) {
    if (PlatformInfo.isWeb) {
      return const EdgeInsets.symmetric(horizontal: 16, vertical: 10);
@@ -51,19 +39,4 @@ class ContactUtils {
      }
    }
  }
-
-  static bool supportAppBarTopBorder(BuildContext context, ResponsiveUtils responsiveUtils) {
-    if (PlatformInfo.isWeb || responsiveUtils.isLandscapeMobile(context)) {
-      return false;
-    }
-    return true;
-  }
-
-  static double getRadiusBorderAppBarTop(BuildContext context, ResponsiveUtils responsiveUtils) {
-    if (supportAppBarTopBorder(context, responsiveUtils)) {
-      return 16;
-    } else {
-      return 0;
-    }
-  }
 }
@@ -1,48 +1,64 @@

 import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
-import 'package:core/presentation/views/button/icon_button_web.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
-import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/contact/presentation/styles/app_bar_contact_widget_style.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 class AppBarContactWidget extends StatelessWidget {

-  final _imagePaths = Get.find<ImagePaths>();
+  final String? title;
+  final ImagePaths imagePaths;
+  final ResponsiveUtils responsiveUtils;
+  final VoidCallback onCloseContactView;

-  final Function()? onCloseContactView;
-
-  AppBarContactWidget({
-      Key? key,
-      this.onCloseContactView,
+  const AppBarContactWidget({
+    Key? key,
+    required this.title,
+    required this.imagePaths,
+    required this.responsiveUtils,
+    required this.onCloseContactView,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
-    return Stack(alignment: Alignment.center, children: [
-      Positioned(
-        left: 0,
-        child: buildIconWeb(
-            icon: SvgPicture.asset(
-              _imagePaths.icClose,
-              colorFilter: AppColor.colorCloseButton.asFilter(),
-              width: 24,
-              height: 24,
-              fit: BoxFit.fill),
-            minSize: 25,
-            iconSize: 25,
-            iconPadding: const EdgeInsets.all(5),
-            splashRadius: 15,
-            tooltip: AppLocalizations.of(context).close,
-            onTap: onCloseContactView),
+    return Container(
+      height: 56,
+      color: Colors.white,
+      padding: AppBarContactWidgetStyle.getAppBarPadding(
+        context,
+        responsiveUtils
      ),
-      Center(child: Text(
-          AppLocalizations.of(context).contact,
-          style: const TextStyle(
+      width: double.infinity,
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          Text(
+            title ?? AppLocalizations.of(context).contact,
+            style: const TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
-              color: Colors.black))),
-    ]);
+              color: Colors.black
+            ),
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+          ),
+          PositionedDirectional(
+            end: 0,
+            child: TMailButtonWidget.fromIcon(
+              icon: imagePaths.icClose,
+              tooltipMessage: AppLocalizations.of(context).close,
+              iconSize: 24,
+              padding: const EdgeInsets.all(3),
+              iconColor: AppColor.colorCloseButton,
+              backgroundColor: AppColor.colorCloseButton.withOpacity(0.12),
+              onTapActionCallback: onCloseContactView,
+            )
+          ),
+        ]
+      ),
+    );
  }
 }
@@ -1696,13 +1696,15 @@ class MailboxDashBoardController extends ReloadableController with UserSettingPo
    dispatchAction(StartSearchEmailAction());
  }

-  Future<void> selectFromSearchFilter() async {
+  Future<void> selectFromSearchFilter(BuildContext context) async {
    if (accountId.value == null || sessionCurrent == null) return;

    final contactArgument = ContactArguments(
-      accountId.value!,
-      sessionCurrent!,
-      searchController.searchEmailFilter.value.from);
+      accountId: accountId.value!,
+      session: sessionCurrent!,
+      listContactSelected: searchController.searchEmailFilter.value.from,
+      contactViewTitle: '${AppLocalizations.of(context).findEmails} ${AppLocalizations.of(context).from_email_address_prefix.toLowerCase()}'
+    );

    final newContact = await DialogRouter.pushGeneralDialog(
      routeName: AppRoutes.contact,
@@ -1714,13 +1716,15 @@ class MailboxDashBoardController extends ReloadableController with UserSettingPo
    }
  }

-  Future<void> selectToSearchFilter() async {
+  Future<void> selectToSearchFilter(BuildContext context) async {
    if (accountId.value == null || sessionCurrent == null) return;

    final contactArgument = ContactArguments(
-      accountId.value!,
-      sessionCurrent!,
-      searchController.searchEmailFilter.value.to);
+      accountId: accountId.value!,
+      session: sessionCurrent!,
+      listContactSelected: searchController.searchEmailFilter.value.to,
+      contactViewTitle: '${AppLocalizations.of(context).findEmails} ${AppLocalizations.of(context).to_email_address_prefix.toLowerCase()}'
+    );

    final newContact = await DialogRouter.pushGeneralDialog(
      routeName: AppRoutes.contact,
@@ -591,13 +591,13 @@ class MailboxDashBoardView extends BaseMailboxDashBoardView {
        }
        break;
      case QuickSearchFilter.from:
-        controller.selectFromSearchFilter();
+        controller.selectFromSearchFilter(context);
        break;
      case QuickSearchFilter.hasAttachment:
        controller.selectHasAttachmentSearchFilter();
        break;
      case QuickSearchFilter.to:
-        controller.selectToSearchFilter();
+        controller.selectToSearchFilter(context);
        break;
      case QuickSearchFilter.folder:
        controller.selectFolderSearchFilter();
@@ -27,6 +27,7 @@ import 'package:model/mailbox/presentation_mailbox.dart';
 import 'package:model/mailbox/select_mode.dart';
 import 'package:tmail_ui_user/features/base/base_controller.dart';
 import 'package:tmail_ui_user/features/base/mixin/date_range_picker_mixin.dart';
+import 'package:tmail_ui_user/features/composer/presentation/extensions/prefix_email_address_extension.dart';
 import 'package:tmail_ui_user/features/contact/presentation/model/contact_arguments.dart';
 import 'package:tmail_ui_user/features/destination_picker/presentation/model/destination_picker_arguments.dart';
 import 'package:tmail_ui_user/features/email/domain/model/mark_read_action.dart';
@@ -73,6 +74,7 @@ import 'package:tmail_ui_user/features/thread/domain/usecases/search_more_email_
 import 'package:tmail_ui_user/features/thread/presentation/extensions/list_presentation_email_extensions.dart';
 import 'package:tmail_ui_user/features/thread/presentation/mixin/email_action_controller.dart';
 import 'package:tmail_ui_user/features/thread/presentation/model/delete_action_type.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 import 'package:tmail_ui_user/main/routes/app_routes.dart';
 import 'package:tmail_ui_user/main/routes/dialog_router.dart';
 import 'package:tmail_ui_user/main/routes/navigation_router.dart';
@@ -630,23 +632,30 @@ class SearchEmailController extends BaseController
    }
  }

-  void selectContactForSearchFilter(
+  Future<void> selectContactForSearchFilter(
      BuildContext context,
      PrefixEmailAddress prefixEmailAddress
  ) async {
-    if (accountId != null && session != null) {
-      final listContactSelected = searchEmailFilter.value.getContactApplied(prefixEmailAddress);
-      final arguments = ContactArguments(accountId!, session!, listContactSelected);
+    FocusManager.instance.primaryFocus?.unfocus();

-      final newContact = await push(AppRoutes.contact, arguments: arguments);
+    if (accountId == null || session == null) return;

-      if (newContact is EmailAddress && context.mounted) {
-        _dispatchApplyContactAction(
-          context,
-          listContactSelected,
-          prefixEmailAddress,
-          newContact);
-      }
+    final listContactSelected = searchEmailFilter.value.getContactApplied(prefixEmailAddress);
+    final arguments = ContactArguments(
+      accountId: accountId!,
+      session: session!,
+      listContactSelected: listContactSelected,
+      contactViewTitle: '${AppLocalizations.of(context).findEmails} ${prefixEmailAddress.asName(context).toLowerCase()}'
+    );
+
+    final newContact = await push(AppRoutes.contact, arguments: arguments);
+
+    if (newContact is EmailAddress && context.mounted) {
+      _dispatchApplyContactAction(
+        context,
+        listContactSelected,
+        prefixEmailAddress,
+        newContact);
    }
  }

@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2024-09-10T15:59:25.469570",
+  "@@last_modified": "2024-09-18T01:15:29.034686",
  "initializing_data": "Initializing data...",
  "@initializing_data": {
    "type": "text",
@@ -4017,5 +4017,11 @@
    "type": "text",
    "placeholders_order": [],
    "placeholders": {}
+  },
+  "findEmails": "Find emails",
+  "@findEmails": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
  }
 }
@@ -4213,4 +4213,10 @@ class AppLocalizations {
      name: 'youAreOffline',
    );
  }
+
+  String get findEmails {
+    return Intl.message(
+      'Find emails',
+      name: 'findEmails');
+  }
 }