TF-138 Add presentation layer for search mail with text pattern

lib/features/mailbox/presentation/mailbox_controller.dart

@@ -132,6 +132,8 @@ class MailboxController extends BaseController {
   }
 
   void _setUpMapMailboxIdDefault(List<PresentationMailbox> defaultMailboxList, List<PresentationMailbox> folderMailboxList) {
+    final allMailbox = defaultMailboxList + folderMailboxList;
+
     final mapDefaultMailboxId = Map<Role, MailboxId>.fromIterable(
       defaultMailboxList,
       key: (presentationMailbox) => presentationMailbox.role!,
@@ -142,13 +144,15 @@ class MailboxController extends BaseController {
       key: (presentationMailbox) => presentationMailbox.role!,
       value: (presentationMailbox) => presentationMailbox);
 
-    final mapFolderMailbox = Map<MailboxId, PresentationMailbox>.fromIterable(
+    final mapMailbox = Map<MailboxId, PresentationMailbox>.fromIterable(
-      folderMailboxList,
+      allMailbox,
       key: (presentationMailbox) => presentationMailbox.id,
       value: (presentationMailbox) => presentationMailbox);
 
     mailboxDashBoardController.setMapDefaultMailboxId(mapDefaultMailboxId);
 
+    mailboxDashBoardController.setMapMailbox(mapMailbox);
+
     var mailboxCurrent = mailboxDashBoardController.selectedMailbox.value;
 
     if (mailboxCurrent != null) {
@@ -157,15 +161,14 @@ class MailboxController extends BaseController {
           ? mapDefaultMailbox[mailboxCurrent.role]
           : mailboxCurrent);
       } else {
-        mailboxDashBoardController.setNewFirstSelectedMailbox(mapFolderMailbox.containsKey(mailboxCurrent.id)
+        mailboxDashBoardController.setNewFirstSelectedMailbox(mapMailbox.containsKey(mailboxCurrent.id)
-          ? mapFolderMailbox[mailboxCurrent.id]
+          ? mapMailbox[mailboxCurrent.id]
           : mailboxCurrent);
       }
     } else {
       if (mapDefaultMailbox.containsKey(PresentationMailbox.roleInbox)) {
         mailboxDashBoardController.setNewFirstSelectedMailbox(mapDefaultMailbox[PresentationMailbox.roleInbox]);
       } else {
-        final allMailbox = defaultMailboxList + folderMailboxList;
         if (allMailbox.isNotEmpty) {
           mailboxDashBoardController.setNewFirstSelectedMailbox(allMailbox.first);
         }

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_controller.dart

@@ -12,6 +12,10 @@ import 'package:tmail_ui_user/features/composer/domain/state/send_email_state.da
 import 'package:tmail_ui_user/features/email/presentation/email_controller.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/state/get_user_profile_state.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/get_user_profile_interactor.dart';
+import 'package:tmail_ui_user/features/thread/domain/model/search_query.dart';
+import 'package:tmail_ui_user/features/thread/domain/state/search_email_state.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';
 
 class MailboxDashBoardController extends BaseController {
@@ -24,9 +28,15 @@ class MailboxDashBoardController extends BaseController {
   final selectedEmail = Rxn<PresentationEmail>();
   final accountId = Rxn<AccountId>();
   final userProfile = Rxn<UserProfile>();
+  final searchState = SearchState.initial().obs;
+  final suggestionSearch = <String>[].obs;
 
+  TextEditingController searchInputController = TextEditingController();
+  FocusNode searchFocus = FocusNode();
+  SearchQuery? searchQuery;
   Session? sessionCurrent;
   Map<Role, MailboxId> mapDefaultMailboxId = Map();
+  Map<MailboxId, PresentationMailbox> mapMailbox = Map();
 
   MailboxDashBoardController(this._getUserProfileInteractor, this._appToast);
 
@@ -95,6 +105,10 @@ class MailboxDashBoardController extends BaseController {
     mapDefaultMailboxId = newMapMailboxId;
   }
 
+  void setMapMailbox(Map<MailboxId, PresentationMailbox> newMapMailbox) {
+    mapMailbox = newMapMailbox;
+  }
+
   void setSelectedMailbox(PresentationMailbox? newPresentationMailbox) {
     selectedMailbox.value = newPresentationMailbox;
   }
@@ -120,9 +134,51 @@ class MailboxDashBoardController extends BaseController {
     scaffoldKey.currentState?.openEndDrawer();
   }
 
+  bool isSearchActive() {
+    return searchState.value.searchStatus == SearchStatus.ACTIVE;
+  }
+
+  void enableSearch() {
+    searchState.value = searchState.value.enableSearchState();
+  }
+
+  void disableSearch() {
+    searchState.value = searchState.value.disableSearchState();
+    searchQuery = SearchQuery('');
+    clearSuggestionSearch();
+    searchInputController.clear();
+    FocusManager.instance.primaryFocus?.unfocus();
+  }
+
+  void clearSearchText() {
+    searchQuery = SearchQuery('');
+    clearSuggestionSearch();
+    searchFocus.requestFocus();
+  }
+
+  void clearSuggestionSearch() {
+    suggestionSearch.clear();
+  }
+
+  void addSuggestionSearch(String query) {
+    if (query.trim().isNotEmpty) {
+      suggestionSearch.value = [query];
+    } else {
+      clearSearchText();
+    }
+  }
+
+  void searchEmail(String value) {
+    searchQuery = SearchQuery(value);
+    dispatchState(Right(SearchEmailNewQuery(searchQuery ?? SearchQuery(''))));
+    clearSuggestionSearch();
+    FocusManager.instance.primaryFocus?.unfocus();
+  }
+
   @override
   void onClose() {
-    super.onClose();
+    searchInputController.dispose();
     Get.delete<EmailController>();
+    super.onClose();
   }
 }

lib/features/thread/presentation/model/search_state.dart

@@ -0,0 +1,24 @@
+
+import 'package:equatable/equatable.dart';
+import 'package:tmail_ui_user/features/thread/presentation/model/search_status.dart';
+
+class SearchState with EquatableMixin {
+  final SearchStatus searchStatus;
+
+  SearchState(this.searchStatus);
+
+  factory SearchState.initial() {
+    return SearchState(SearchStatus.INACTIVE);
+  }
+
+  SearchState disableSearchState() {
+    return SearchState(SearchStatus.INACTIVE);
+  }
+
+  SearchState enableSearchState() {
+    return SearchState(SearchStatus.ACTIVE);
+  }
+
+  @override
+  List<Object?> get props => [searchStatus];
+}

lib/features/thread/presentation/model/search_status.dart

@@ -0,0 +1,4 @@
+
+enum SearchStatus {
+  ACTIVE, INACTIVE
+}

lib/features/thread/presentation/thread_bindings.dart

@@ -29,6 +29,7 @@ import 'package:tmail_ui_user/features/thread/domain/usecases/mark_as_multiple_e
 import 'package:tmail_ui_user/features/thread/domain/usecases/move_multiple_email_to_mailbox_interactor.dart';
 import 'package:tmail_ui_user/features/thread/domain/usecases/mark_as_star_multiple_email_interactor.dart';
 import 'package:tmail_ui_user/features/thread/domain/usecases/refresh_changes_emails_in_mailbox_interactor.dart';
+import 'package:tmail_ui_user/features/thread/domain/usecases/search_email_interactor.dart';
 import 'package:tmail_ui_user/features/thread/presentation/thread_controller.dart';
 
 class ThreadBindings extends Bindings {
@@ -67,6 +68,7 @@ class ThreadBindings extends Bindings {
     Get.lazyPut(() => MarkAsStarMultipleEmailInteractor(Get.find<EmailRepository>()));
     Get.lazyPut(() => RefreshChangesEmailsInMailboxInteractor(Get.find<ThreadRepository>()));
     Get.lazyPut(() => LoadMoreEmailsInMailboxInteractor(Get.find<ThreadRepository>()));
+    Get.lazyPut(() => SearchEmailInteractor(Get.find<ThreadRepository>()));
     Get.put(ThreadController(
       Get.find<ResponsiveUtils>(),
       Get.find<GetEmailsInMailboxInteractor>(),
@@ -78,6 +80,7 @@ class ThreadBindings extends Bindings {
       Get.find<MarkAsStarMultipleEmailInteractor>(),
       Get.find<RefreshChangesEmailsInMailboxInteractor>(),
       Get.find<LoadMoreEmailsInMailboxInteractor>(),
+      Get.find<SearchEmailInteractor>(),
     ));
   }
 }

lib/features/thread/presentation/thread_controller.dart

@@ -21,17 +21,20 @@ import 'package:tmail_ui_user/features/email/domain/usecases/mark_as_star_email_
 import 'package:tmail_ui_user/features/email/presentation/model/composer_arguments.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mailbox_dashboard_controller.dart';
 import 'package:tmail_ui_user/features/thread/domain/constants/thread_constants.dart';
+import 'package:tmail_ui_user/features/thread/domain/model/search_query.dart';
 import 'package:tmail_ui_user/features/thread/domain/state/get_all_email_state.dart';
 import 'package:tmail_ui_user/features/thread/domain/state/load_more_emails_state.dart';
 import 'package:tmail_ui_user/features/thread/domain/state/mark_as_multiple_email_read_state.dart';
 import 'package:tmail_ui_user/features/thread/domain/state/move_multiple_email_to_mailbox_state.dart';
 import 'package:tmail_ui_user/features/thread/domain/state/mark_as_star_multiple_email_state.dart';
+import 'package:tmail_ui_user/features/thread/domain/state/search_email_state.dart';
 import 'package:tmail_ui_user/features/thread/domain/usecases/get_emails_in_mailbox_interactor.dart';
 import 'package:tmail_ui_user/features/thread/domain/usecases/load_more_emails_in_mailbox_interactor.dart';
 import 'package:tmail_ui_user/features/thread/domain/usecases/mark_as_multiple_email_read_interactor.dart';
 import 'package:tmail_ui_user/features/thread/domain/usecases/move_multiple_email_to_mailbox_interactor.dart';
 import 'package:tmail_ui_user/features/thread/domain/usecases/mark_as_star_multiple_email_interactor.dart';
 import 'package:tmail_ui_user/features/thread/domain/usecases/refresh_changes_emails_in_mailbox_interactor.dart';
+import 'package:tmail_ui_user/features/thread/domain/usecases/search_email_interactor.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/route_navigation.dart';
@@ -50,14 +53,18 @@ class ThreadController extends BaseController {
   final MarkAsStarMultipleEmailInteractor _markAsStarMultipleEmailInteractor;
   final RefreshChangesEmailsInMailboxInteractor _refreshChangesEmailsInMailboxInteractor;
   final LoadMoreEmailsInMailboxInteractor _loadMoreEmailsInMailboxInteractor;
+  final SearchEmailInteractor _searchEmailInteractor;
 
   final emailList = <PresentationEmail>[].obs;
+  final emailListSearch = <PresentationEmail>[].obs;
   final currentSelectMode = SelectMode.INACTIVE.obs;
 
   bool canLoadMore = true;
   MailboxId? _currentMailboxId;
   jmap.State? _currentEmailState;
 
+  SearchQuery? get searchQuery => mailboxDashBoardController.searchQuery;
+
   EmailFilterCondition? get _filterCondition => EmailFilterCondition(
     inMailbox: mailboxDashBoardController.selectedMailbox.value?.id);
 
@@ -78,6 +85,7 @@ class ThreadController extends BaseController {
     this._markAsStarMultipleEmailInteractor,
     this._refreshChangesEmailsInMailboxInteractor,
     this._loadMoreEmailsInMailboxInteractor,
+    this._searchEmailInteractor,
   );
 
   @override
@@ -107,6 +115,8 @@ class ThreadController extends BaseController {
           cancelSelectEmail();
           _refreshEmailChanges();
           mailboxDashBoardController.clearState();
+        } else if (success is SearchEmailNewQuery){
+          _searchEmail();
         }
       });
     });
@@ -127,6 +137,8 @@ class ThreadController extends BaseController {
       (failure) {
         if (failure is LoadMoreEmailsFailure) {
           canLoadMore = false;
+        } else if (failure is SearchEmailFailure) {
+          emailListSearch.clear();
         }
       },
       (success) {
@@ -134,6 +146,8 @@ class ThreadController extends BaseController {
           _getAllEmailSuccess(success);
         } else if (success is LoadMoreEmailsSuccess) {
           _loadMoreEmailsSuccess(success);
+        } else if (success is SearchEmailSuccess) {
+          _searchEmailsSuccess(success);
         }
       }
     );
@@ -181,6 +195,8 @@ class ThreadController extends BaseController {
     dispatchState(Right(LoadingState()));
     emailList.value = <PresentationEmail>[];
     canLoadMore = true;
+    disableSearch();
+    cancelSelectEmail();
   }
 
   void _getAllEmailSuccess(GetAllEmailSuccess success) {
@@ -220,8 +236,10 @@ class ThreadController extends BaseController {
   }
 
   void loadMoreEmails() {
-    if (canLoadMore) {
+    if (isSearchActive()) {
-      if (_accountId != null) {
+      return;
+    } else {
+      if (canLoadMore && _accountId != null) {
         consumeState(_loadMoreEmailsInMailboxInteractor.execute(
           _accountId!,
           limit: ThreadConstants.defaultLimit,
@@ -257,7 +275,16 @@ class ThreadController extends BaseController {
   }
 
   void selectEmail(BuildContext context, PresentationEmail presentationEmailSelected) {
-    emailList.value = emailList.map((email) => email.id == presentationEmailSelected.id ? email.toggleSelect() : email).toList();
+    if (isSearchActive()) {
+      emailListSearch.value = emailListSearch
+        .map((email) => email.id == presentationEmailSelected.id ? email.toggleSelect() : email)
+        .toList();
+    } else {
+      emailList.value = emailList
+        .map((email) => email.id == presentationEmailSelected.id ? email.toggleSelect() : email)
+        .toList();
+    }
+
     if (_isUnSelectedAll()) {
       currentSelectMode.value = SelectMode.INACTIVE;
     } else {
@@ -267,16 +294,32 @@ class ThreadController extends BaseController {
     }
   }
 
-  List<PresentationEmail> getListEmailSelected() => emailList.where((email) => email.selectMode == SelectMode.ACTIVE).toList();
+  List<PresentationEmail> getListEmailSelected() {
+    if (isSearchActive()) {
+      return emailListSearch.where((email) => email.selectMode == SelectMode.ACTIVE).toList();
+    } else {
+      return emailList.where((email) => email.selectMode == SelectMode.ACTIVE).toList();
+    }
+  }
 
-  bool _isUnSelectedAll() => emailList.every((email) => email.selectMode == SelectMode.INACTIVE);
+  bool _isUnSelectedAll() {
+    if (isSearchActive()) {
+      return emailListSearch.every((email) => email.selectMode == SelectMode.INACTIVE);
+    } else {
+      return emailList.every((email) => email.selectMode == SelectMode.INACTIVE);
+    }
+  }
 
   bool isAllEmailRead(List<PresentationEmail> listEmail) => listEmail.every((email) => email.isReadEmail());
 
   bool isAllEmailMarkAsStar(List<PresentationEmail> listEmail) => listEmail.every((email) => email.isFlaggedEmail());
 
   void cancelSelectEmail() {
-    emailList.value = emailList.map((email) => email.toSelectedEmail(selectMode: SelectMode.INACTIVE)).toList();
+    if (isSearchActive()) {
+      emailListSearch.value = emailListSearch.map((email) => email.toSelectedEmail(selectMode: SelectMode.INACTIVE)).toList();
+    } else {
+      emailList.value = emailList.map((email) => email.toSelectedEmail(selectMode: SelectMode.INACTIVE)).toList();
+    }
     currentSelectMode.value = SelectMode.INACTIVE;
   }
 
@@ -471,6 +514,39 @@ class ThreadController extends BaseController {
     }
   }
 
+  bool isSearchActive() => mailboxDashBoardController.isSearchActive();
+
+  void enableSearch(BuildContext context) {
+    mailboxDashBoardController.enableSearch();
+  }
+
+  void disableSearch() {
+    emailListSearch.clear();
+    mailboxDashBoardController.disableSearch();
+  }
+
+  void _searchEmail() {
+    emailListSearch.clear();
+
+    if (_accountId != null && searchQuery != null) {
+      consumeState(_searchEmailInteractor.execute(
+        _accountId!,
+        limit: ThreadConstants.defaultLimit,
+        sort: _sortOrder,
+        filter: EmailFilterCondition(text: searchQuery!.value),
+        properties: ThreadConstants.propertiesDefault,
+      ));
+    }
+  }
+
+  void _searchEmailsSuccess(SearchEmailSuccess success) {
+    final resultEmailSearchList = success.emailList
+        .map((email) => email.toSearchPresentationEmail(mailboxDashBoardController.mapMailbox))
+        .toList();
+
+    emailListSearch.value = resultEmailSearchList;
+  }
+
   bool canComposeEmail() => mailboxDashBoardController.sessionCurrent != null
       && mailboxDashBoardController.userProfile.value != null
       && mailboxDashBoardController.mapDefaultMailboxId.containsKey(PresentationMailbox.roleOutbox);

lib/features/thread/presentation/thread_view.dart

@@ -5,11 +5,14 @@ import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:model/email/presentation_email.dart';
 import 'package:model/model.dart';
+import 'package:tmail_ui_user/features/thread/domain/state/search_email_state.dart';
 import 'package:tmail_ui_user/features/thread/presentation/thread_controller.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar_thread_select_mode_active_builder.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/email_context_menu_action_builder.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/email_tile_builder.dart';
+import 'package:tmail_ui_user/features/thread/presentation/widgets/search_app_bar_widget.dart';
+import 'package:tmail_ui_user/features/thread/presentation/widgets/suggestion_box_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class ThreadView extends GetWidget<ThreadController> {
@@ -19,72 +22,100 @@ class ThreadView extends GetWidget<ThreadController> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return GestureDetector(
-      resizeToAvoidBottomInset: false,
+      onTap: () => FocusManager.instance.primaryFocus?.unfocus(),
-      backgroundColor: AppColor.primaryLightColor,
+      child: Scaffold(
-      body: SafeArea(
+        resizeToAvoidBottomInset: false,
-        right: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context),
+        backgroundColor: Colors.white,
-        left: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context),
+        body: SafeArea(
-        child: Container(
+          right: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context),
-          alignment: Alignment.center,
+          left: responsiveUtils.isMobileDevice(context) && responsiveUtils.isLandscape(context),
-          padding: EdgeInsets.zero,
+          child: Container(
-          child: Column(
+            alignment: Alignment.center,
-            mainAxisAlignment: MainAxisAlignment.start,
+            padding: EdgeInsets.zero,
-            crossAxisAlignment: CrossAxisAlignment.start,
+            child: Column(
-            children: [
+              mainAxisAlignment: MainAxisAlignment.start,
-              _buildAppBarThread(context),
+              crossAxisAlignment: CrossAxisAlignment.start,
-              Expanded(child: Container(
+              children: [
-                alignment: Alignment.center,
+                _buildAppBarThread(context),
-                padding: EdgeInsets.zero,
+                Expanded(child: Stack(
-                color: responsiveUtils.isMobile(context) ? AppColor.bgMailboxListMail : AppColor.primaryLightColor,
-                child: Column(
-                  mainAxisAlignment: MainAxisAlignment.start,
-                  crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
-                    _buildLoadingView(),
+                    Container(
-                    Expanded(child: _buildListEmail(context)),
+                      alignment: Alignment.center,
-                    _buildLoadingViewLoadMore()
+                      padding: EdgeInsets.zero,
-                  ]
+                      color: responsiveUtils.isMobile(context) ? AppColor.bgMailboxListMail : AppColor.primaryLightColor,
-                )
+                      child: Column(
-              )),
+                        mainAxisAlignment: MainAxisAlignment.start,
-            ]
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          _buildStatusResultSearch(context),
+                          _buildLoadingView(),
+                          Expanded(child: _buildListEmail(context)),
+                          _buildLoadingViewLoadMore()
+                        ]
+                      )
+                    ),
+                    _buildSuggestionBox(context)
+                  ],
+                )),
+              ]
+            )
           )
-        )
+        ),
+        floatingActionButton: Obx(() => !controller.isSearchActive()
+          ? FloatingActionButton(
+              elevation: 4.0,
+              child: new Icon(Icons.add),
+              backgroundColor: AppColor.appColor,
+              onPressed: () => controller.composeEmailAction())
+          : SizedBox.shrink())
       ),
-      floatingActionButton: FloatingActionButton(
-        elevation: 4.0,
-        child: new Icon(Icons.add),
-        backgroundColor: AppColor.appColor,
-        onPressed: () => controller.composeEmailAction()
-      )
     );
   }
 
   Widget _buildAppBarThread(BuildContext context) {
-    return Obx(() => controller.currentSelectMode.value == SelectMode.ACTIVE
+    return Obx(() {
-      ? _buildAppBarSelectModeActive(context)
+      return Stack(
-      : _buildAppBarNormal(context));
+        children: [
+          _buildAppBarNormal(context),
+          if (controller.isSearchActive()) _buildSearchForm(context),
+          if (controller.currentSelectMode.value == SelectMode.ACTIVE) _buildAppBarSelectModeActive(context),
+        ],
+      );
+    });
+  }
+
+  Widget _buildSearchForm(BuildContext context) {
+    return (SearchAppBarWidget(
+          context,
+          imagePaths,
+          controller.searchQuery,
+          controller.mailboxDashBoardController.suggestionSearch,
+          controller.mailboxDashBoardController.searchFocus,
+          controller.mailboxDashBoardController.searchInputController)
+      ..addDecoration(BoxDecoration(color: Colors.white))
+      ..addOnCancelSearchPressed(() => controller.disableSearch())
+      ..addOnClearTextSearchAction(() => controller.mailboxDashBoardController.clearSearchText())
+      ..addOnSuggestionSearchQuery((query) => controller.mailboxDashBoardController.addSuggestionSearch(query))
+      ..addOnSearchTextAction((query) => controller.mailboxDashBoardController.searchEmail(query)))
+    .build();
   }
 
   Widget _buildAppBarNormal(BuildContext context) {
-    return Obx(() => Padding(
+    return (AppBarThreadWidgetBuilder(
-      padding: EdgeInsets.only(left: 15, right: 12),
-      child: (AppBarThreadWidgetBuilder(
               context,
-              // imagePaths,
+              imagePaths,
               responsiveUtils,
               controller.mailboxDashBoardController.selectedMailbox.value,
               controller.mailboxDashBoardController.userProfile.value)
           ..onOpenUserInformationAction(() => {})
-          // ..onOpenSearchMailActionClick(() => {})
+          ..onOpenSearchMailActionClick(() => controller.enableSearch(context))
           ..onOpenListMailboxActionClick(() => controller.openMailboxLeftMenu()))
-        .build()));
+        .build();
   }
 
   Widget _buildAppBarSelectModeActive(BuildContext context) {
-    return Obx(() => Padding(
+    return (AppBarThreadSelectModeActiveBuilder(
-      padding: EdgeInsets.only(left: 12, right: 12),
-      child: (AppBarThreadSelectModeActiveBuilder(
               context,
               imagePaths,
               controller.getListEmailSelected(),
@@ -96,7 +127,7 @@ class ThreadView extends GetWidget<ThreadController> {
               controller.openContextMenuSelectedEmail(context, _contextMenuEmailActionTile(context, listEmail)))
           ..addOnOpenPopupMenuActionClick((listEmail, position) =>
               controller.openPopupMenuSelectedEmail(context, position, _popupMenuEmailActionTile(context, listEmail))))
-        .build()));
+        .build();
   }
 
   List<Widget> _contextMenuEmailActionTile(BuildContext context, List<PresentationEmail> listEmail) {
@@ -183,7 +214,7 @@ class ThreadView extends GetWidget<ThreadController> {
   Widget _buildLoadingView() {
     return Obx(() => controller.viewState.value.fold(
       (failure) => SizedBox.shrink(),
-      (success) => success is LoadingState
+      (success) => success is LoadingState || success is SearchingState
         ? Center(child: Padding(
             padding: EdgeInsets.only(top: 16, bottom: 16),
             child: SizedBox(
@@ -214,19 +245,42 @@ class ThreadView extends GetWidget<ThreadController> {
       alignment: Alignment.center,
       padding: EdgeInsets.zero,
       color: responsiveUtils.isMobile(context) ? AppColor.bgMailboxListMail : Colors.white,
-      child: Obx(() => controller.currentSelectMode.value == SelectMode.INACTIVE
+      child: Obx(() {
-        ? controller.emailList.isNotEmpty
+        if (controller.isSearchActive()) {
-            ? RefreshIndicator(
+          if (controller.mailboxDashBoardController.suggestionSearch.isNotEmpty) {
-                color: AppColor.primaryColor,
+            return SizedBox.shrink();
-                onRefresh: () async => controller.refreshAllEmail(),
+          } else {
-                child: _buildListEmailBody(context, controller.emailList))
+            return _buildResultSearchEmails(context, controller.emailListSearch);
-            : RefreshIndicator(
+          }
-                color: AppColor.primaryColor,
+        } else {
-                onRefresh: () async => controller.refreshAllEmail(),
+          return _buildResultListEmail(context, controller.emailList);
-                child: _buildEmptyEmail(context))
+        }
-        : controller.emailList.isNotEmpty
+      })
-            ? _buildListEmailBody(context, controller.emailList)
+    );
-            : _buildEmptyEmail(context)));
+  }
+
+  Widget _buildResultSearchEmails(BuildContext context, List<PresentationEmail> listPresentationEmail) {
+    return listPresentationEmail.isNotEmpty
+      ? _buildListEmailBody(context, listPresentationEmail)
+      : _buildEmptyEmail(context);
+  }
+
+  Widget _buildResultListEmail(BuildContext context, List<PresentationEmail> listPresentationEmail) {
+    if (controller.currentSelectMode.value == SelectMode.INACTIVE) {
+      return listPresentationEmail.isNotEmpty
+        ? RefreshIndicator(
+            color: AppColor.primaryColor,
+            onRefresh: () async => controller.refreshAllEmail(),
+            child: _buildListEmailBody(context, listPresentationEmail))
+        : RefreshIndicator(
+            color: AppColor.primaryColor,
+            onRefresh: () async => controller.refreshAllEmail(),
+            child: _buildEmptyEmail(context));
+    } else {
+      return listPresentationEmail.isNotEmpty
+        ? _buildListEmailBody(context, listPresentationEmail)
+        : _buildEmptyEmail(context);
+    }
   }
 
   Widget _buildListEmailBody(BuildContext context, List<PresentationEmail> listPresentationEmail) {
@@ -251,7 +305,9 @@ class ThreadView extends GetWidget<ThreadController> {
                 listPresentationEmail[index],
                 responsiveUtils,
                 controller.mailboxDashBoardController.selectedMailbox.value?.role,
-                controller.currentSelectMode.value)
+                controller.currentSelectMode.value,
+                controller.mailboxDashBoardController.searchState.value.searchStatus,
+                controller.searchQuery)
             ..onOpenEmailAction((selectedEmail) => controller.previewEmail(context, selectedEmail))
             ..onSelectEmailAction((selectedEmail) => controller.selectEmail(context, selectedEmail))
             ..addOnMarkAsStarEmailActionClick((selectedEmail) => controller.markAsStarEmail(selectedEmail)))
@@ -262,13 +318,47 @@ class ThreadView extends GetWidget<ThreadController> {
   Widget _buildEmptyEmail(BuildContext context) {
     return Obx(() => controller.viewState.value.fold(
       (failure) => SizedBox.shrink(),
-      (success) => !(success is LoadingState)
+      (success) => !(success is LoadingState) && !(success is SearchingState)
         ? (BackgroundWidgetBuilder(context)
             ..key(Key('empty_email_background'))
             ..image(SvgPicture.asset(imagePaths.icEmptyImageDefault, width: 120, height: 120, fit: BoxFit.fill))
-            ..text(AppLocalizations.of(context).no_emails))
+            ..text(controller.isSearchActive()
+                ? AppLocalizations.of(context).no_emails_matching_your_search
+                : AppLocalizations.of(context).no_emails))
           .build()
         : SizedBox.shrink())
     );
   }
+
+  Widget _buildSuggestionBox(BuildContext context) {
+    return Obx(() => controller.mailboxDashBoardController.suggestionSearch.isNotEmpty
+      ? (SuggestionBoxWidget(
+              context,
+              imagePaths,
+              controller.mailboxDashBoardController.suggestionSearch)
+          ..addOnSelectedSuggestion((suggestion) => controller.mailboxDashBoardController.searchEmail(suggestion)))
+        .build()
+      : SizedBox.shrink()
+    );
+  }
+
+  Widget _buildStatusResultSearch(BuildContext context) {
+    return Obx(() {
+      if (controller.isSearchActive()) {
+        return controller.emailListSearch.length > 0
+          ? Container(
+              width: double.infinity,
+              margin: EdgeInsets.zero,
+              color: AppColor.bgStatusResultSearch,
+              padding: EdgeInsets.symmetric(vertical: 12, horizontal: 24),
+              child: Text(
+                AppLocalizations.of(context).results,
+                style: TextStyle(color: AppColor.baseTextColor, fontSize: 14, fontWeight: FontWeight.w500),
+              ))
+         : SizedBox.shrink();
+      } else {
+        return SizedBox.shrink();
+      }
+    });
+  }
 }

lib/features/thread/presentation/widgets/app_bar_thread_select_mode_active_builder.dart

@@ -49,8 +49,10 @@ class AppBarThreadSelectModeActiveBuilder {
   Widget build() {
     return Container(
         key: Key('app_bar_thread_select_mode_active'),
-        alignment: Alignment.center,
+        alignment: Alignment.topCenter,
-        padding: EdgeInsets.symmetric(vertical: 8),
+        color: Colors.white,
+        margin: EdgeInsets.zero,
+        padding: EdgeInsets.only(left: 10, right: 16, top: 10, bottom: 10),
         child: MediaQuery(
             data: MediaQueryData(padding: EdgeInsets.zero),
             child: Row(
@@ -77,15 +79,18 @@ class AppBarThreadSelectModeActiveBuilder {
   }
 
   Widget _buildBackButton() {
-    return IconButton(
+    return Material(
-      color: AppColor.baseTextColor,
+      borderRadius: BorderRadius.circular(12),
-      icon: SvgPicture.asset(_imagePaths.icComposerClose, color: AppColor.baseTextColor, fit: BoxFit.fill),
+      color: Colors.transparent,
-      onPressed: () => {
+      child: IconButton(
-        if (_onCloseActionClick != null) {
+        color: AppColor.baseTextColor,
-          _onCloseActionClick!()
+        icon: SvgPicture.asset(_imagePaths.icComposerClose, color: AppColor.baseTextColor, fit: BoxFit.fill),
+        onPressed: () => {
+          if (_onCloseActionClick != null) {
+            _onCloseActionClick!()
+          }
         }
-      }
+      ));
-    );
   }
 
   Widget _buildListOptionButton() {
@@ -102,15 +107,18 @@ class AppBarThreadSelectModeActiveBuilder {
           //       _onRemoveEmailActionClick!(_listEmail)
           //     }
           //   }),
-          IconButton(
+          Material(
-            key: Key('button_unread_email_selected'),
+            borderRadius: BorderRadius.circular(12),
-            color: AppColor.baseTextColor,
+            color: Colors.transparent,
-            icon: SvgPicture.asset(_imagePaths.icEyeDisable, color: AppColor.baseTextColor, fit: BoxFit.fill),
+            child: IconButton(
-            onPressed: () => {
+              key: Key('button_unread_email_selected'),
-              if (_onMarkAsEmailReadActionClick != null) {
+              color: AppColor.baseTextColor,
-                _onMarkAsEmailReadActionClick!(_listEmail)
+              icon: SvgPicture.asset(_imagePaths.icEyeDisable, color: AppColor.baseTextColor, fit: BoxFit.fill),
-              }
+              onPressed: () => {
-            }),
+                if (_onMarkAsEmailReadActionClick != null) {
+                  _onMarkAsEmailReadActionClick!(_listEmail)
+                }
+              })),
           GestureDetector(
             key: Key('button_menu_select_email'),
             onTap: () => {

lib/features/thread/presentation/widgets/app_bar_thread_widget_builder.dart

@@ -3,7 +3,7 @@ import 'dart:ui';
 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
-// import 'package:flutter_svg/flutter_svg.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:model/mailbox/presentation_mailbox.dart';
 import 'package:model/model.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
@@ -13,19 +13,19 @@ typedef OnOpenListMailboxActionClick = void Function();
 typedef OnOpenUserInformationActionClick = void Function();
 
 class AppBarThreadWidgetBuilder {
-  // OnOpenSearchMailActionClick? _onOpenSearchMailActionClick;
+  OnOpenSearchMailActionClick? _onOpenSearchMailActionClick;
   OnOpenListMailboxActionClick? _onOpenListMailboxActionClick;
   OnOpenUserInformationActionClick? _onOpenUserInformationActionClick;
 
   final BuildContext _context;
-  // final ImagePaths _imagePaths;
+  final ImagePaths _imagePaths;
   final ResponsiveUtils _responsiveUtils;
   final PresentationMailbox? _presentationMailbox;
   final UserProfile? _userProfile;
 
   AppBarThreadWidgetBuilder(
     this._context,
-    // this._imagePaths,
+    this._imagePaths,
     this._responsiveUtils,
     this._presentationMailbox,
     this._userProfile,
@@ -36,9 +36,9 @@ class AppBarThreadWidgetBuilder {
     _onOpenUserInformationActionClick = onOpenUserInformationActionClick;
   }
 
-  // void onOpenSearchMailActionClick(OnOpenSearchMailActionClick onOpenSearchMailActionClick) {
+  void onOpenSearchMailActionClick(OnOpenSearchMailActionClick onOpenSearchMailActionClick) {
-  //   _onOpenSearchMailActionClick = onOpenSearchMailActionClick;
+    _onOpenSearchMailActionClick = onOpenSearchMailActionClick;
-  // }
+  }
 
   void onOpenListMailboxActionClick(OnOpenListMailboxActionClick onOpenListMailboxActionClick) {
     _onOpenListMailboxActionClick = onOpenListMailboxActionClick;
@@ -47,8 +47,10 @@ class AppBarThreadWidgetBuilder {
   Widget build() {
     return Container(
       key: Key('app_bar_thread_widget'),
-      alignment: Alignment.center,
+      alignment: Alignment.topCenter,
-      padding: EdgeInsets.only(top: 16, bottom: 8),
+      color: Colors.white,
+      margin: EdgeInsets.zero,
+      padding: EdgeInsets.only(left: 16, top: 16, bottom: 8, right: 16),
       child: MediaQuery(
         data: MediaQueryData(padding: EdgeInsets.zero),
         child: Row(
@@ -57,7 +59,7 @@ class AppBarThreadWidgetBuilder {
           children: [
             if (_responsiveUtils.isMobile(_context)) _buildIconUser(),
             Expanded(child: _buildContentCenterAppBar()),
-            // _buildIconSearch(),
+            _buildIconSearch(),
           ]
         )
       )
@@ -78,19 +80,24 @@ class AppBarThreadWidgetBuilder {
           .build()));
   }
 
-  // Widget _buildIconSearch() {
+  Widget _buildIconSearch() {
-  //   return Padding(
+    return Material(
-  //     padding: EdgeInsets.only(left: 16),
+      borderRadius: BorderRadius.circular(12),
-  //     child: IconButton(
+      color: Colors.transparent,
-  //       color: AppColor.baseTextColor,
+      child: Padding(
-  //       icon: SvgPicture.asset(_imagePaths.icSearch, color: AppColor.baseTextColor, fit: BoxFit.fill),
+        padding: EdgeInsets.only(left: 16),
-  //       onPressed: () => {
+        child: IconButton(
-  //         if (_onOpenSearchMailActionClick != null) {
+          color: AppColor.baseTextColor,
-  //           _onOpenSearchMailActionClick!()
+          icon: SvgPicture.asset(_imagePaths.icSearch, color: AppColor.baseTextColor, fit: BoxFit.fill),
-  //         }
+          onPressed: () => {
-  //       }
+            if (_onOpenSearchMailActionClick != null) {
-  //     ));
+              _onOpenSearchMailActionClick!()
-  // }
+            }
+          }
+        )
+      )
+    );
+  }
 
   Widget _buildContentCenterAppBar() {
     return Row(

lib/features/thread/presentation/widgets/email_tile_builder.dart

@@ -6,6 +6,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
 import 'package:model/model.dart';
+import 'package:tmail_ui_user/features/thread/domain/model/search_query.dart';
+import 'package:tmail_ui_user/features/thread/presentation/model/search_status.dart';
 
 typedef OnOpenEmailActionClick = void Function(PresentationEmail selectedEmail);
 typedef OnSelectEmailActionClick = void Function(PresentationEmail selectedEmail);
@@ -20,6 +22,8 @@ class EmailTileBuilder {
   final ResponsiveUtils _responsiveUtils;
   final SelectMode _selectModeAll;
   final Role? _mailboxRole;
+  final SearchStatus _searchStatus;
+  final SearchQuery? _searchQuery;
 
   OnOpenEmailActionClick? _onOpenEmailActionClick;
   OnSelectEmailActionClick? _onSelectEmailActionClick;
@@ -33,6 +37,8 @@ class EmailTileBuilder {
     this._responsiveUtils,
     this._mailboxRole,
     this._selectModeAll,
+    this._searchStatus,
+    this._searchQuery,
   );
 
   void onOpenEmailAction(OnOpenEmailActionClick onOpenEmailActionClick) {
@@ -84,18 +90,28 @@ class EmailTileBuilder {
                 mainAxisAlignment: MainAxisAlignment.start,
                 children: [
                   Expanded(
-                    child: Text(
+                    child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
-                      (_mailboxRole == PresentationMailbox.roleSent
+                      ? RichTextBuilder(
-                        || _mailboxRole == PresentationMailbox.roleDrafts
+                          _getInformationSender(),
-                        || _mailboxRole == PresentationMailbox.roleOutbox)
+                          '${_searchQuery!.value}',
-                          ? '${_presentationEmail.recipientsName()}'
+                          TextStyle(
-                          : '${_presentationEmail.getSenderName()}',
+                              fontSize: 14,
-                      maxLines: 1,
+                              color: AppColor.mailboxTextColor,
-                      overflow:TextOverflow.ellipsis,
+                              fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500),
-                      style: TextStyle(
+                          TextStyle(
-                        fontSize: 14,
+                              fontSize: 14,
-                        color: AppColor.mailboxTextColor,
+                              color: AppColor.mailboxTextColor,
-                        fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500))),
+                              backgroundColor: AppColor.bgWordSearch,
+                              fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500)).build()
+                      : Text(
+                          _getInformationSender(),
+                          maxLines: 1,
+                          overflow:TextOverflow.ellipsis,
+                          style: TextStyle(
+                            fontSize: 14,
+                            color: AppColor.mailboxTextColor,
+                            fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500))
+                  ),
                   Padding(
                     padding: EdgeInsets.only(right: 4),
                     child: Text(
@@ -116,24 +132,65 @@ class EmailTileBuilder {
                 children: [
                   Padding(
                     padding: EdgeInsets.only(bottom: 3),
-                    child: Text(
+                    child: Row(
-                      '${_presentationEmail.getEmailTitle()}',
+                      children: [
-                      maxLines: 1,
+                        Expanded(
-                      overflow:TextOverflow.ellipsis,
+                          child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
-                      style: TextStyle(
+                            ? RichTextBuilder(
-                          fontSize: 12,
+                                '${_presentationEmail.getEmailTitle()}',
-                          color: _presentationEmail.isUnReadEmail() ? AppColor.subjectEmailTextColorUnRead : AppColor.baseTextColor,
+                                '${_searchQuery!.value}',
-                          fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500))),
+                                TextStyle(
+                                    fontSize: 12,
+                                    color: _presentationEmail.isUnReadEmail() ? AppColor.subjectEmailTextColorUnRead : AppColor.baseTextColor,
+                                    fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500),
+                                TextStyle(
+                                    fontSize: 12,
+                                    backgroundColor: AppColor.bgWordSearch,
+                                    color: _presentationEmail.isUnReadEmail() ? AppColor.subjectEmailTextColorUnRead : AppColor.baseTextColor,
+                                    fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500)).build()
+                            : Text(
+                                '${_presentationEmail.getEmailTitle()}',
+                                maxLines: 1,
+                                overflow:TextOverflow.ellipsis,
+                                style: TextStyle(
+                                    fontSize: 12,
+                                    color: _presentationEmail.isUnReadEmail() ? AppColor.subjectEmailTextColorUnRead : AppColor.baseTextColor,
+                                    fontWeight: _presentationEmail.isUnReadEmail() ? FontWeight.bold : FontWeight.w500))
+                        ),
+                        if (_searchStatus == SearchStatus.ACTIVE && _presentationEmail.mailboxName.isNotEmpty)
+                          Container(
+                            margin: EdgeInsets.only(left: 8),
+                            padding: EdgeInsets.only(left: 8, right: 8, top: 3, bottom: 3),
+                            constraints: BoxConstraints(maxWidth: 100),
+                            decoration: BoxDecoration(
+                              borderRadius: BorderRadius.circular(10),
+                              color: AppColor.backgroundCounterMailboxColor),
+                            child: Text(
+                              '${_presentationEmail.mailboxName}',
+                              maxLines: 1,
+                              overflow: TextOverflow.ellipsis,
+                              style: TextStyle(fontSize: 10, color: AppColor.mailboxTextColor, fontWeight: FontWeight.bold),
+                            )
+                          )
+                      ],
+                    )),
                   Row(
                     crossAxisAlignment: CrossAxisAlignment.center,
                     mainAxisAlignment: MainAxisAlignment.start,
                     children: [
                       Expanded(
-                        child: Text(
+                        child: _searchStatus == SearchStatus.ACTIVE && _searchQuery != null && _searchQuery!.value.isNotEmpty
-                          '${_presentationEmail.getPartialContent()}',
+                          ? RichTextBuilder(
-                          maxLines: 1,
+                              '${_presentationEmail.getPartialContent()}',
-                          overflow:TextOverflow.ellipsis,
+                              '${_searchQuery!.value}',
-                          style: TextStyle(fontSize: 12, color: AppColor.baseTextColor))),
+                              TextStyle(fontSize: 12, color: AppColor.baseTextColor),
+                              TextStyle(fontSize: 12, color: AppColor.baseTextColor, backgroundColor: AppColor.bgWordSearch)).build()
+                          : Text(
+                              '${_presentationEmail.getPartialContent()}',
+                              maxLines: 1,
+                              overflow:TextOverflow.ellipsis,
+                              style: TextStyle(fontSize: 12, color: AppColor.baseTextColor))
+                      ),
                       if (_presentationEmail.hasAttachment == true)
                         (ButtonBuilder(_imagePaths.icShare)
                             ..padding(5)
@@ -224,4 +281,13 @@ class EmailTileBuilder {
       }
     }
   }
+
+  String _getInformationSender() {
+    if (_mailboxRole == PresentationMailbox.roleSent
+        || _mailboxRole == PresentationMailbox.roleDrafts
+        || _mailboxRole == PresentationMailbox.roleOutbox) {
+      return '${_presentationEmail.recipientsName()}';
+    }
+    return '${_presentationEmail.getSenderName()}';
+  }
 }

lib/features/thread/presentation/widgets/search_app_bar_widget.dart

@@ -0,0 +1,164 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:tmail_ui_user/features/thread/domain/model/search_query.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+typedef OnCancelSearchPressed = Function();
+typedef OnClearTextSearchAction = Function();
+typedef OnSuggestionSearchQuery = Function(String);
+typedef OnSearchTextAction = Function(String);
+
+class SearchAppBarWidget {
+ OnCancelSearchPressed? _onCancelSearchPressed;
+ OnSuggestionSearchQuery? _onSuggestionSearchQuery;
+ OnClearTextSearchAction? _onClearTextSearchAction;
+ OnSearchTextAction? _onSearchTextAction;
+
+  final BuildContext _context;
+  final ImagePaths _imagePaths;
+  final SearchQuery? _searchQuery;
+  final TextEditingController? _searchInputController;
+  final FocusNode? _searchFocusNode;
+  final List<String>? _suggestionSearch;
+
+  double? _heightSearchBar;
+  Decoration? _decoration;
+  EdgeInsets? _padding;
+
+  SearchAppBarWidget(
+    this._context,
+    this._imagePaths,
+    this._searchQuery,
+    this._suggestionSearch,
+    this._searchFocusNode,
+    this._searchInputController,
+  );
+
+  void addOnCancelSearchPressed(OnCancelSearchPressed onCancelSearchPressed) {
+    _onCancelSearchPressed = onCancelSearchPressed;
+  }
+
+  void addOnSuggestionSearchQuery(OnSuggestionSearchQuery onSuggestionSearchQuery) {
+    _onSuggestionSearchQuery = onSuggestionSearchQuery;
+  }
+
+  void addOnClearTextSearchAction(OnClearTextSearchAction onClearTextSearchAction) {
+    _onClearTextSearchAction = onClearTextSearchAction;
+  }
+
+  void addOnSearchTextAction(OnSearchTextAction onSearchTextAction) {
+    _onSearchTextAction = onSearchTextAction;
+  }
+
+  void setHeightSearchBar(double heightSearchBar) {
+    _heightSearchBar = heightSearchBar;
+  }
+
+  void addDecoration(Decoration decoration) {
+    _decoration = decoration;
+  }
+
+  void addPadding(EdgeInsets padding) {
+    _padding = padding;
+  }
+
+  Widget build() {
+    return Container(
+      key: Key('search_app_bar_widget'),
+      alignment: Alignment.topCenter,
+      height: _heightSearchBar,
+      decoration: _decoration,
+      padding: _padding ?? EdgeInsets.symmetric(vertical: 8),
+      child: MediaQuery(
+        data: MediaQueryData(padding: EdgeInsets.zero),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            _buildBackButton(),
+            Expanded(child: _buildSearchInputForm()),
+            if (_suggestionSearch?.isNotEmpty == true || (_searchQuery != null && _searchQuery!.value.isNotEmpty))
+              _buildClearTextSearchButton(),
+          ]
+        )
+      )
+    );
+  }
+
+ Widget _buildBackButton() {
+   return Material(
+     borderRadius: BorderRadius.circular(12),
+     color: Colors.transparent,
+     child: Padding(
+       padding: EdgeInsets.only(left: 8),
+       child: IconButton(
+         color: AppColor.appColor,
+         icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.appColor, fit: BoxFit.fill),
+         onPressed: () {
+           _searchInputController?.clear();
+           if (_onCancelSearchPressed != null) {
+             _onCancelSearchPressed!();
+           }
+         }
+       )));
+ }
+
+ Widget _buildClearTextSearchButton() {
+   return Material(
+     borderRadius: BorderRadius.circular(12),
+     color: Colors.transparent,
+     child: Padding(
+       padding: EdgeInsets.only(right: 8),
+       child: IconButton(
+         color: AppColor.baseTextColor,
+         icon: SvgPicture.asset(_imagePaths.icComposerClose, color: AppColor.baseTextColor, fit: BoxFit.fill),
+         onPressed: () {
+           _searchInputController?.clear();
+           if (_onClearTextSearchAction != null) {
+            _onClearTextSearchAction!();
+           }
+         }
+      )));
+ }
+
+  Widget _buildSearchInputForm() {
+    return (TextFieldBuilder()
+        ..key(Key('search_input_form'))
+        ..textInputAction(TextInputAction.done)
+        ..onChange((value) {
+            if (_onSuggestionSearchQuery != null) {
+              _onSuggestionSearchQuery!(value);
+            }})
+        ..onSubmitted((value) {
+            if (_onSearchTextAction != null) {
+              _onSearchTextAction!(value);
+            }})
+        ..cursorColor(AppColor.baseTextColor)
+        ..autoFocus(true)
+        ..addFocusNode(_searchFocusNode)
+        ..textStyle(TextStyle(
+            color: _searchQuery != null && _searchQuery!.value.isNotEmpty && _suggestionSearch?.isEmpty == true
+              ? AppColor.nameUserColor
+              : AppColor.baseTextColor,
+            fontSize: 15,
+            fontWeight: FontWeight.w500))
+        ..textDecoration(InputDecoration(
+            border: InputBorder.none,
+            focusedBorder: InputBorder.none,
+            enabledBorder: InputBorder.none,
+            contentPadding: EdgeInsets.symmetric(vertical: 15),
+            hintText: AppLocalizations.of(_context).search_mail,
+            hintStyle: TextStyle(
+              color: AppColor.baseTextColor,
+              fontWeight: FontWeight.w500,
+              fontSize: 15.0),
+            labelStyle: TextStyle(
+              color: AppColor.baseTextColor,
+              fontWeight: FontWeight.w500,
+              fontSize: 15.0)))
+        ..addController(_searchInputController))
+      .build();
+  }
+}

lib/features/thread/presentation/widgets/suggestion_box_widget.dart

@@ -0,0 +1,88 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+typedef OnSelectedSuggestion = Function(String);
+
+class SuggestionBoxWidget {
+
+  OnSelectedSuggestion? _onSelectedSuggestion;
+
+  final BuildContext _context;
+  final ImagePaths _imagePaths;
+
+  double? _suggestionHeight;
+  double? _elevation;
+  List<String> _listData;
+
+  SuggestionBoxWidget(
+    this._context,
+    this._imagePaths,
+    this._listData,
+  );
+
+  void setSuggestionHeight(double suggestionHeight) {
+    _suggestionHeight = suggestionHeight;
+  }
+
+  void setElevation(double elevation) {
+    _elevation = elevation;
+  }
+
+  void addOnSelectedSuggestion(OnSelectedSuggestion onSelectedSuggestion) {
+    _onSelectedSuggestion = onSelectedSuggestion;
+  }
+
+  Widget build() {
+    return Material(
+      elevation: _elevation ?? 3,
+      color: Colors.white,
+      child: ConstrainedBox(
+        constraints: BoxConstraints(
+          maxHeight: _suggestionHeight ?? 60,
+        ),
+        child: ListView.builder(
+          shrinkWrap: true,
+          padding: EdgeInsets.zero,
+          itemCount: _listData.length,
+          itemBuilder: (BuildContext context, int index) => ListTile(
+            contentPadding: EdgeInsets.symmetric(horizontal: 10),
+            onTap: () {
+              if (_onSelectedSuggestion != null) {
+                _onSelectedSuggestion!(_listData[index]);
+              }},
+            leading: IconButton(
+              color: AppColor.baseTextColor,
+              icon: SvgPicture.asset(_imagePaths.icSearch, color: AppColor.baseTextColor, fit: BoxFit.fill),
+              onPressed: () {
+                if (_onSelectedSuggestion != null) {
+                  _onSelectedSuggestion!(_listData[index]);
+                }
+              }),
+            title: Transform(
+              transform: Matrix4.translationValues(-12.0, 0.0, 0.0),
+              child: Row(
+                crossAxisAlignment: CrossAxisAlignment.center,
+                mainAxisAlignment: MainAxisAlignment.start,
+                children: [
+                  Text(
+                    '${AppLocalizations.of(_context).prefix_suggestion_search} ',
+                    style: TextStyle(fontSize: 15, color: AppColor.baseTextColor),
+                  ),
+                  Expanded(child: Text(
+                    '"${_listData[index]}"',
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                    style: TextStyle(fontSize: 15, color: AppColor.nameUserColor, fontWeight: FontWeight.w500),
+                  ))
+                ],
+              )
+            )
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/l10n/intl_en.arb

@@ -397,5 +397,29 @@
     "placeholders": {
       "count": {}
     }
+  },
+  "search_mail": "Search mail",
+  "@search_mail": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "prefix_suggestion_search": "Search for",
+  "@prefix_suggestion_search": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "no_emails_matching_your_search": "No emails are matching your search",
+  "@no_emails_matching_your_search": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "results": "Results",
+  "@results": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
   }
 }

lib/l10n/intl_fr.arb

@@ -397,5 +397,29 @@
     "placeholders": {
       "count": {}
     }
+  },
+  "search_mail": "Search mail",
+  "@search_mail": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "prefix_suggestion_search": "Search for",
+  "@prefix_suggestion_search": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "no_emails_matching_your_search": "No emails are matching your search",
+  "@no_emails_matching_your_search": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "results": "Results",
+  "@results": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
   }
 }

lib/l10n/intl_messages.arb

@@ -1,5 +1,5 @@
 {
-  "@@last_modified": "2021-10-13T22:37:55.795262",
+  "@@last_modified": "2021-10-26T14:38:31.924635",
   "initializing_data": "Initializing data...",
   "@initializing_data": {
     "type": "text",
@@ -397,5 +397,29 @@
     "placeholders": {
       "count": {}
     }
+  },
+  "search_mail": "Search mail",
+  "@search_mail": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "prefix_suggestion_search": "Search for",
+  "@prefix_suggestion_search": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "no_emails_matching_your_search": "No emails are matching your search",
+  "@no_emails_matching_your_search": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "results": "Results",
+  "@results": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
   }
 }

lib/l10n/intl_ru.arb

@@ -397,5 +397,29 @@
     "placeholders": {
       "count": {}
     }
+  },
+  "search_mail": "Search mail",
+  "@search_mail": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "prefix_suggestion_search": "Search for",
+  "@prefix_suggestion_search": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "no_emails_matching_your_search": "No emails are matching your search",
+  "@no_emails_matching_your_search": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "results": "Results",
+  "@results": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
   }
 }

lib/l10n/intl_vi.arb

@@ -397,5 +397,29 @@
     "placeholders": {
       "count": {}
     }
+  },
+  "search_mail": "Search mail",
+  "@search_mail": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "prefix_suggestion_search": "Search for",
+  "@prefix_suggestion_search": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "no_emails_matching_your_search": "No emails are matching your search",
+  "@no_emails_matching_your_search": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
+  },
+  "results": "Results",
+  "@results": {
+    "type": "text",
+    "placeholders_order": [],
+    "placeholders": {}
   }
 }

lib/main/localizations/app_localizations.dart

@@ -431,5 +431,33 @@ class AppLocalizations {
         args: [count]
     );
   }
+
+  String get search_mail {
+    return Intl.message(
+      'Search mail',
+      name: 'search_mail',
+    );
+  }
+
+  String get prefix_suggestion_search {
+    return Intl.message(
+      'Search for',
+      name: 'prefix_suggestion_search',
+    );
+  }
+
+  String get no_emails_matching_your_search {
+    return Intl.message(
+      'No emails are matching your search',
+      name: 'no_emails_matching_your_search',
+    );
+  }
+
+  String get results {
+    return Intl.message(
+      'Results',
+      name: 'results',
+    );
+  }
 }