TF-524 Add filter for quick search

lib/features/mailbox_dashboard/presentation/base_mailbox_dashboard_view.dart

@@ -0,0 +1,44 @@
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
+import 'package:tmail_ui_user/features/base/mixin/network_connection_mixin.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mailbox_dashboard_controller.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mixin/filter_email_popup_menu_mixin.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mixin/user_setting_popup_menu_mixin.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/quick_search_filter.dart';
+
+abstract class BaseMailboxDashBoardView extends GetWidget<MailboxDashBoardController>
+    with NetworkConnectionMixin, UserSettingPopupMenuMixin, FilterEmailPopupMenuMixin,
+        AppLoaderMixin {
+  BaseMailboxDashBoardView({Key? key}) : super(key: key);
+
+  final responsiveUtils = Get.find<ResponsiveUtils>();
+  final imagePaths = Get.find<ImagePaths>();
+
+  Widget buildQuickSearchFilterButton(
+      BuildContext context, QuickSearchFilter filter) {
+    return Obx(() {
+      return Container(
+          decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(10),
+              color: filter.getBackgroundColor(controller.listFilterQuickSearch)),
+          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+          child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
+            SvgPicture.asset(
+                filter.getIcon(imagePaths, controller.listFilterQuickSearch),
+                width: 16,
+                height: 16,
+                fit: BoxFit.fill),
+            const SizedBox(width: 4),
+            Text(
+              filter.getTitle(context),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: filter.getTextStyle(controller.listFilterQuickSearch),
+            )
+          ]));
+    });
+  }
+}

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_controller.dart

@@ -11,6 +11,7 @@ import 'package:jmap_dart_client/jmap/core/capability/capability_identifier.dart
 import 'package:jmap_dart_client/jmap/core/capability/mail_capability.dart';
 import 'package:jmap_dart_client/jmap/core/session/session.dart';
 import 'package:jmap_dart_client/jmap/core/unsigned_int.dart';
+import 'package:jmap_dart_client/jmap/core/utc_date.dart';
 import 'package:jmap_dart_client/jmap/mail/email/email.dart';
 import 'package:jmap_dart_client/jmap/mail/email/email_comparator.dart';
 import 'package:jmap_dart_client/jmap/core/sort/comparator.dart';
@@ -45,6 +46,7 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/quick_s
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/remove_email_drafts_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/save_recent_search_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/action/dashboard_action.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/quick_search_filter.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/manage_account_arguments.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';
@@ -86,6 +88,7 @@ class MailboxDashBoardController extends ReloadableController {
   final currentSelectMode = SelectMode.INACTIVE.obs;
   final filterMessageOption = FilterMessageOption.all.obs;
   final listEmailSelected = <PresentationEmail>[].obs;
+  final listFilterQuickSearch = RxList<QuickSearchFilter>();
 
   SearchQuery? searchQuery;
   Session? sessionCurrent;
@@ -283,6 +286,7 @@ class MailboxDashBoardController extends ReloadableController {
     searchQuery = SearchQuery.initial();
     clearSuggestionSearch();
     searchInputController.clear();
+    listFilterQuickSearch.clear();
     FocusManager.instance.primaryFocus?.unfocus();
   }
 
@@ -426,6 +430,8 @@ class MailboxDashBoardController extends ReloadableController {
 
   Future<List<PresentationEmail>> quickSearchEmailsAction(String pattern) async {
     if (accountId.value != null && selectedMailbox.value != null) {
+      log('MailboxDashBoardController::quickSearchEmailsAction(): DATE_NOW: ${DateTime.now()}');
+      log('MailboxDashBoardController::quickSearchEmailsAction(): DATE: ${DateTime.now().subtract(const Duration(days: 7))}');
       return await _quickSearchEmailInteractor.execute(
         accountId.value!,
         limit: UnsignedInt(5),
@@ -434,6 +440,11 @@ class MailboxDashBoardController extends ReloadableController {
             ..setIsAscending(false)),
         filter: EmailFilterCondition(
             text: pattern,
+            hasAttachment: listFilterQuickSearch.contains(QuickSearchFilter.hasAttachment) ? true : null,
+            from: listFilterQuickSearch.contains(QuickSearchFilter.fromMe) ? userProfile.value!.email : null,
+            after: listFilterQuickSearch.contains(QuickSearchFilter.last7Days)
+                ? UTCDate(DateTime.now().subtract(const Duration(days: 7)))
+                : null,
             inMailbox: selectedMailbox.value!.id),
         properties: ThreadConstants.propertiesQuickSearch
       ).then((result) => result.fold(
@@ -443,6 +454,14 @@ class MailboxDashBoardController extends ReloadableController {
     return <PresentationEmail>[];
   }
 
+  void selectQuickSearchFilter(QuickSearchFilter quickSearchFilter) {
+    if (listFilterQuickSearch.contains(quickSearchFilter)) {
+      listFilterQuickSearch.remove(quickSearchFilter);
+    } else {
+      listFilterQuickSearch.add(quickSearchFilter);
+    }
+  }
+
   void composeEmailAction() {
     if (kIsWeb) {
       if (dashBoardAction.value is! ComposeEmailAction) {

lib/features/mailbox_dashboard/presentation/mailbox_dashboard_view_web.dart

@@ -4,16 +4,13 @@ import 'package:flutter_svg/flutter_svg.dart';
 import 'package:flutter_typeahead/flutter_typeahead.dart';
 import 'package:get/get.dart';
 import 'package:model/model.dart';
-import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
-import 'package:tmail_ui_user/features/base/mixin/network_connection_mixin.dart';
 import 'package:tmail_ui_user/features/composer/presentation/composer_view_web.dart';
 import 'package:tmail_ui_user/features/email/presentation/email_view.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_view_web.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/model/recent_search.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/action/dashboard_action.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mailbox_dashboard_controller.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/base_mailbox_dashboard_view.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mixin/filter_email_popup_menu_mixin.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/quick_search_filter.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/mixin/user_setting_popup_menu_mixin.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/email_quick_search_item_tile_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/recent_search_item_tile_widget.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/app_setting.dart';
@@ -24,17 +21,14 @@ 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';
 
-class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with NetworkConnectionMixin,
+class MailboxDashBoardView extends BaseMailboxDashBoardView {
-    UserSettingPopupMenuMixin, FilterEmailPopupMenuMixin, AppLoaderMixin {
-
-  final _responsiveUtils = Get.find<ResponsiveUtils>();
-  final _imagePaths = Get.find<ImagePaths>();
 
   MailboxDashBoardView({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    if (controller.isDrawerOpen && (_responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context))) {
+    if (controller.isDrawerOpen && (responsiveUtils.isDesktop(context)
+        || responsiveUtils.isTabletLarge(context))) {
       WidgetsBinding.instance?.addPostFrameCallback((_) {
         controller.closeMailboxMenuDrawer();
       });
@@ -44,16 +38,16 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
       key: controller.scaffoldKey,
       backgroundColor: Colors.white,
       drawer: ResponsiveWidget(
-          responsiveUtils: _responsiveUtils,
+          responsiveUtils: responsiveUtils,
-          mobile: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer),
+          mobile: SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeDrawer),
-          tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer),
+          tablet: SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeDrawer),
           tabletLarge: const SizedBox.shrink(),
           desktop: const SizedBox.shrink(),
       ),
-      drawerEnableOpenDragGesture: _responsiveUtils.isMobile(context) || _responsiveUtils.isTablet(context),
+      drawerEnableOpenDragGesture: responsiveUtils.isMobile(context) || responsiveUtils.isTablet(context),
       body: Stack(children: [
         ResponsiveWidget(
-            responsiveUtils: _responsiveUtils,
+            responsiveUtils: responsiveUtils,
             desktop: Column(children: [
               Row(children: [
                 Container(width: 256, color: Colors.white,
@@ -64,7 +58,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
                         ..setSloganTextAlign(TextAlign.center)
                         ..setSloganTextStyle(const TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold))
                         ..setSizeLogo(24)
-                        ..setLogo(_imagePaths.icLogoTMail))
+                        ..setLogo(imagePaths.icLogoTMail))
                       .build(),
                     Obx(() {
                       if (controller.appInformation.value != null) {
@@ -87,7 +81,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
               Expanded(child: Row(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeMenu),
+                  SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeMenu),
                   Expanded(child: _wrapContainerForThreadAndEmail(context))
                 ],
               ))
@@ -95,7 +89,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
             tabletLarge: Row(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawer),
+                SizedBox(child: MailboxView(), width: responsiveUtils.defaultSizeDrawer),
                 Expanded(child: _wrapContainerForThreadAndEmail(context))
               ],
             ),
@@ -126,7 +120,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
           }
         });
       case ReadingPane.rightOfInbox:
-        if (_responsiveUtils.isDesktop(context)) {
+        if (responsiveUtils.isDesktop(context)) {
           return Row(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
@@ -165,7 +159,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
           ? Expanded(child: _buildSearchForm(context))
           : const SizedBox.shrink()),
       Obx(() => !controller.isSearchActive()
-          ? (SearchBarView(_imagePaths)
+          ? (SearchBarView(imagePaths)
                 ..hintTextSearch(AppLocalizations.of(context).search_emails)
                 ..maxSizeWidth(240)
                 ..addOnOpenSearchViewAction(() => controller.enableSearch()))
@@ -199,7 +193,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
 
   Widget _buildListButtonTopBar(BuildContext context) {
     return Row(children: [
-      (ButtonBuilder(_imagePaths.icRefresh)
+      (ButtonBuilder(imagePaths.icRefresh)
           ..key(const Key('button_reload_thread'))
           ..decoration(BoxDecoration(
               borderRadius: BorderRadius.circular(10),
@@ -211,7 +205,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
           ..onPressActionClick(() => controller.dispatchAction(RefreshAllEmailAction())))
         .build(),
       const SizedBox(width: 16),
-      (ButtonBuilder(_imagePaths.icSelectAll)
+      (ButtonBuilder(imagePaths.icSelectAll)
           ..key(const Key('button_select_all'))
           ..decoration(BoxDecoration(
               borderRadius: BorderRadius.circular(10),
@@ -225,7 +219,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
           ..text(AppLocalizations.of(context).select_all, isVertical: false))
         .build(),
       const SizedBox(width: 16),
-      (ButtonBuilder(_imagePaths.icMarkAllAsRead)
+      (ButtonBuilder(imagePaths.icMarkAllAsRead)
           ..key(const Key('button_mark_all_as_read'))
           ..decoration(BoxDecoration(
               borderRadius: BorderRadius.circular(10),
@@ -239,7 +233,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
           ..text(AppLocalizations.of(context).mark_all_as_read, isVertical: false))
         .build(),
       const SizedBox(width: 16),
-      Obx(() => (ButtonBuilder(_imagePaths.icFilterWeb)
+      Obx(() => (ButtonBuilder(imagePaths.icFilterWeb)
           ..key(const Key('button_filter_messages'))
           ..context(context)
           ..decoration(BoxDecoration(borderRadius: BorderRadius.circular(10), color: AppColor.colorButtonHeaderThread))
@@ -257,7 +251,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
                   : FontWeight.w500))
           ..addIconAction(Padding(
               padding: const EdgeInsets.only(left: 8),
-              child: SvgPicture.asset(_imagePaths.icArrowDown, fit: BoxFit.fill)))
+              child: SvgPicture.asset(imagePaths.icArrowDown, fit: BoxFit.fill)))
           ..addOnPressActionWithPositionClick((position) => controller.openPopupMenuAction(context, position,
               popupMenuFilterEmailActionTile(context,
                   controller.filterMessageOption.value,
@@ -271,7 +265,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
 
   Widget _buildListButtonTopBarSearchActive(BuildContext context) {
     return Row(children: [
-      (ButtonBuilder(_imagePaths.icSelectAll)
+      (ButtonBuilder(imagePaths.icSelectAll)
           ..key(const Key('button_select_all'))
           ..decoration(BoxDecoration(
               borderRadius: BorderRadius.circular(10),
@@ -285,7 +279,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
           ..text(AppLocalizations.of(context).select_all, isVertical: false))
         .build(),
       const SizedBox(width: 16),
-      (ButtonBuilder(_imagePaths.icMarkAllAsRead)
+      (ButtonBuilder(imagePaths.icMarkAllAsRead)
           ..key(const Key('button_mark_all_as_read'))
           ..decoration(BoxDecoration(
               borderRadius: BorderRadius.circular(10),
@@ -304,7 +298,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
   Widget _buildListButtonTopBarSelection(BuildContext context) {
     return Row(children: [
       buildIconWeb(
-          icon: SvgPicture.asset(_imagePaths.icCloseComposer, color: AppColor.colorTextButton, fit: BoxFit.fill),
+          icon: SvgPicture.asset(imagePaths.icCloseComposer, color: AppColor.colorTextButton, fit: BoxFit.fill),
           tooltip: AppLocalizations.of(context).cancel,
           onTap: () => controller.dispatchAction(CancelSelectionAllEmailAction())),
       Obx(() => Text(
@@ -314,8 +308,8 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
       Obx(() => buildIconWeb(
           icon: SvgPicture.asset(
               controller.listEmailSelected.isAllEmailRead
-                  ? _imagePaths.icRead
+                  ? imagePaths.icRead
-                  : _imagePaths.icUnread,
+                  : imagePaths.icUnread,
               fit: BoxFit.fill),
           tooltip: controller.listEmailSelected.isAllEmailRead
               ? AppLocalizations.of(context).mark_as_unread
@@ -329,8 +323,8 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
       Obx(() => buildIconWeb(
           icon: SvgPicture.asset(
               controller.listEmailSelected.isAllEmailStarred
-                  ? _imagePaths.icUnStar
+                  ? imagePaths.icUnStar
-                  : _imagePaths.icStar,
+                  : imagePaths.icStar,
               fit: BoxFit.fill),
           tooltip: controller.listEmailSelected.isAllEmailStarred
               ? AppLocalizations.of(context).un_star
@@ -344,7 +338,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
       Obx(() {
         if (controller.selectedMailbox.value?.isDrafts == false) {
           return buildIconWeb(
-              icon: SvgPicture.asset(_imagePaths.icMove, fit: BoxFit.fill),
+              icon: SvgPicture.asset(imagePaths.icMove, fit: BoxFit.fill),
               tooltip: AppLocalizations.of(context).move,
               onTap: () => controller.dispatchAction(
                   HandleEmailActionTypeAction(context,
@@ -359,8 +353,8 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
           return buildIconWeb(
               icon: SvgPicture.asset(
                   controller.selectedMailbox.value?.isSpam == true
-                      ? _imagePaths.icNotSpam
+                      ? imagePaths.icNotSpam
-                      : _imagePaths.icSpam,
+                      : imagePaths.icSpam,
                   fit: BoxFit.fill),
               tooltip: controller.selectedMailbox.value?.isSpam == true
                   ? AppLocalizations.of(context).un_spam
@@ -383,7 +377,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
         }
       }),
       Obx(() => buildIconWeb(
-          icon: SvgPicture.asset(_imagePaths.icDelete, fit: BoxFit.fill),
+          icon: SvgPicture.asset(imagePaths.icDelete, fit: BoxFit.fill),
           tooltip: controller.selectedMailbox.value?.isTrash == true
               ? AppLocalizations.of(context).delete_permanently
               : AppLocalizations.of(context).move_to_trash,
@@ -405,7 +399,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
     return Row(
         children: [
           buildIconWeb(
-              icon: SvgPicture.asset(_imagePaths.icBack, color: AppColor.colorTextButton, fit: BoxFit.fill),
+              icon: SvgPicture.asset(imagePaths.icBack, color: AppColor.colorTextButton, fit: BoxFit.fill),
               onTap: () {
                 controller.disableSearch();
                 controller.dispatchAction(CancelSelectionAllEmailAction());
@@ -422,7 +416,6 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
                     focusNode: controller.searchFocus,
                     textInputAction: TextInputAction.done,
                     onSubmitted: (keyword) {
-                      log('MailboxDashBoardView::_buildSearchForm(): onSubmitted: $keyword');
                       if (keyword.trim().isNotEmpty) {
                         controller.saveRecentSearch(RecentSearch(keyword, DateTime.now()));
                       }
@@ -438,17 +431,16 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
                         labelStyle: const TextStyle(color: AppColor.colorHintSearchBar, fontSize: 17.0)
                     ),
                     leftButton: buildIconWeb(
-                        icon: SvgPicture.asset(_imagePaths.icSearchBar, width: 16, height: 16, fit: BoxFit.fill),
+                        icon: SvgPicture.asset(imagePaths.icSearchBar, width: 16, height: 16, fit: BoxFit.fill),
                         onTap: () {
                           final keyword = controller.searchInputController.text;
-                          log('MailboxDashBoardView::_buildSearchForm(): buttonClick: $keyword');
                           if (keyword.trim().isNotEmpty) {
                             controller.saveRecentSearch(RecentSearch(keyword, DateTime.now()));
                           }
                           controller.searchEmail(context, keyword);
                         }),
-                    rightButton: buildIconWeb(
+                    clearTextButton: buildIconWeb(
-                        icon: SvgPicture.asset(_imagePaths.icComposerClose, width: 18, height: 18, fit: BoxFit.fill),
+                        icon: SvgPicture.asset(imagePaths.icClearTextSearch, width: 16, height: 16, fit: BoxFit.fill),
                         onTap: () {
                           controller.searchInputController.clear();
                           controller.clearSearchText();
@@ -458,54 +450,26 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
                   color: Colors.white,
                   borderRadius: const BorderRadius.all(Radius.circular(16)),
                   constraints: BoxConstraints(
-                      maxWidth: _responsiveUtils.isDesktop(context) ? 556 : double.infinity,
+                      maxWidth: responsiveUtils.isDesktop(context) ? 556 : double.infinity,
                       maxHeight: 322),
                 ),
-                actionButton: Padding(
+                listActionButton: const [
-                  padding: const EdgeInsets.only(left: 24, top: 24, right: 24, bottom: 20),
+                  QuickSearchFilter.hasAttachment,
-                  child: Row(
+                  QuickSearchFilter.last7Days,
-                    children: [
+                  QuickSearchFilter.fromMe,
-                      (ButtonBuilder(_imagePaths.icAttachmentSB)
+                ],
-                          ..decoration(BoxDecoration(
+                actionButtonBuilder: (context, filterAction) {
-                              borderRadius: BorderRadius.circular(10),
+                  if (filterAction is QuickSearchFilter) {
-                              color: AppColor.colorButtonHeaderThread))
+                    return buildQuickSearchFilterButton(context, filterAction);
-                          ..paddingIcon(const EdgeInsets.only(right: 5))
+                  }
-                          ..padding(const EdgeInsets.symmetric(horizontal: 12, vertical: 8))
+                  return const SizedBox.shrink();
-                          ..radiusSplash(10)
+                },
-                          ..size(16)
+                buttonActionCallback: (filterAction) {
-                          ..textStyle(const TextStyle(fontSize: 13, color: AppColor.colorTextButtonHeaderThread))
+                  if (filterAction is QuickSearchFilter) {
-                          ..onPressActionClick(() => {})
+                    return controller.selectQuickSearchFilter(filterAction);
-                          ..text(AppLocalizations.of(context).hasAttachment, isVertical: false))
+                  }
-                        .build(),
+                },
-                      const SizedBox(width: 8),
+                listActionPadding: const EdgeInsets.only(left: 24, top: 24, right: 24, bottom: 20),
-                      (ButtonBuilder(_imagePaths.icCalendarSB)
-                          ..decoration(BoxDecoration(
-                              borderRadius: BorderRadius.circular(10),
-                              color: AppColor.colorButtonHeaderThread))
-                          ..paddingIcon(const EdgeInsets.only(right: 5))
-                          ..padding(const EdgeInsets.symmetric(horizontal: 12, vertical: 8))
-                          ..radiusSplash(10)
-                          ..size(16)
-                          ..textStyle(const TextStyle(fontSize: 13, color: AppColor.colorTextButtonHeaderThread))
-                          ..onPressActionClick(() => {})
-                          ..text(AppLocalizations.of(context).last7Days, isVertical: false))
-                        .build(),
-                      const SizedBox(width: 8),
-                      (ButtonBuilder(_imagePaths.icUserSB)
-                          ..decoration(BoxDecoration(
-                              borderRadius: BorderRadius.circular(10),
-                              color: AppColor.colorButtonHeaderThread))
-                          ..paddingIcon(const EdgeInsets.only(right: 5))
-                          ..padding(const EdgeInsets.symmetric(horizontal: 12, vertical: 8))
-                          ..radiusSplash(10)
-                          ..size(16)
-                          ..textStyle(const TextStyle(fontSize: 13, color: AppColor.colorTextButtonHeaderThread))
-                          ..onPressActionClick(() => {})
-                          ..text(AppLocalizations.of(context).fromMe, isVertical: false))
-                        .build(),
-                    ],
-                  ),
-                ),
                 titleHeaderRecent: Padding(
                   padding: const EdgeInsets.only(left: 24, right: 24, bottom: 8),
                   child: Text(AppLocalizations.of(context).recent,
@@ -518,7 +482,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
                   padding: const EdgeInsets.only(bottom: 16),
                   child: loadingWidget,
                 ),
-                getRecentCallback: (pattern) async {
+                fetchRecentActionCallback: (pattern) async {
                   return controller.getAllRecentSearchAction(pattern);
                 },
                 itemRecentBuilder: (context, recent) {

lib/features/mailbox_dashboard/presentation/model/quick_search_filter.dart

@@ -0,0 +1,67 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+enum QuickSearchFilter {
+  hasAttachment,
+  last7Days,
+  fromMe
+}
+
+extension QuickSearchFilterExtension on QuickSearchFilter {
+
+  String getTitle(BuildContext context) {
+    switch(this) {
+      case QuickSearchFilter.hasAttachment:
+        return AppLocalizations.of(context).hasAttachment;
+      case QuickSearchFilter.last7Days:
+        return AppLocalizations.of(context).last7Days;
+      case QuickSearchFilter.fromMe:
+        return AppLocalizations.of(context).fromMe;
+    }
+  }
+
+  String getIcon(ImagePaths imagePaths, List<QuickSearchFilter> listFilter) {
+    final filterSelected = listFilter.contains(this);
+
+    if (filterSelected) {
+      return imagePaths.icSelectedSB;
+    } else {
+      switch(this) {
+        case QuickSearchFilter.hasAttachment:
+          return imagePaths.icAttachmentSB;
+        case QuickSearchFilter.last7Days:
+          return imagePaths.icCalendarSB;
+        case QuickSearchFilter.fromMe:
+          return imagePaths.icUserSB;
+      }
+    }
+  }
+
+  Color getBackgroundColor(List<QuickSearchFilter> listFilter) {
+    final filterSelected = listFilter.contains(this);
+
+    if (filterSelected) {
+      return AppColor.colorItemEmailSelectedDesktop;
+    } else {
+      return AppColor.colorButtonHeaderThread;
+    }
+  }
+
+  TextStyle getTextStyle(List<QuickSearchFilter> listFilter) {
+    final filterSelected = listFilter.contains(this);
+
+    if (filterSelected) {
+      return const TextStyle(
+          fontSize: 13,
+          fontWeight: FontWeight.w500,
+          color: AppColor.colorTextButton);
+    } else {
+      return const TextStyle(
+          fontSize: 13,
+          fontWeight: FontWeight.normal,
+          color: AppColor.colorTextButtonHeaderThread);
+    }
+  }
+}

lib/features/mailbox_dashboard/presentation/widgets/email_quick_search_item_tile_widget.dart

@@ -26,10 +26,14 @@ class EmailQuickSearchItemTileWidget extends StatelessWidget {
       padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          SvgPicture.asset(
+          Padding(
-              _presentationEmail.hasStarred ? imagePath.icStar : imagePath.icUnStar,
+            padding: const EdgeInsets.only(top: 2),
-              width: 20, height: 20, fit: BoxFit.fill),
+            child: SvgPicture.asset(
+                _presentationEmail.hasStarred ? imagePath.icStar : imagePath.icUnStar,
+                width: 18, height: 18, fit: BoxFit.fill),
+          ),
           const SizedBox(width: 8),
           Expanded(
             child: Column(

pubspec.yaml

@@ -148,6 +148,8 @@ dependencies:
 
   flutter_staggered_grid_view: 0.6.1
 
+  timeago: 3.2.2
+
 dev_dependencies:
   flutter_test:
     sdk: flutter