TF-460 Separate the header of MailboxDashboard on the browser

2022-04-25 15:56:36 +07:00
parent d0a54a2652
commit 52fd989272
36 changed files with 1033 additions and 643 deletions
@@ -0,0 +1,97 @@
+
+import 'package:flutter/cupertino.dart';
+import 'package:model/email/email_action_type.dart';
+import 'package:model/email/filter_message_option.dart';
+import 'package:model/email/presentation_email.dart';
+import 'package:tmail_ui_user/features/base/action/ui_action.dart';
+import 'package:tmail_ui_user/main/routes/router_arguments.dart';
+
+class DashBoardAction extends UIAction {
+  static final idle = DashBoardAction();
+
+  DashBoardAction() : super();
+
+  @override
+  List<Object?> get props => [];
+}
+
+class ComposeEmailAction extends DashBoardAction {
+
+  RouterArguments? arguments;
+
+  ComposeEmailAction({this.arguments});
+
+  @override
+  List<Object?> get props => [arguments];
+}
+
+class CloseComposeEmailAction extends DashBoardAction {
+
+  CloseComposeEmailAction();
+
+  @override
+  List<Object?> get props => [];
+}
+
+class RefreshAllEmailAction extends DashBoardAction {
+
+  RefreshAllEmailAction();
+
+  @override
+  List<Object?> get props => [];
+}
+
+class SelectionAllEmailAction extends DashBoardAction {
+
+  SelectionAllEmailAction();
+
+  @override
+  List<Object?> get props => [];
+}
+
+class CancelSelectionAllEmailAction extends DashBoardAction {
+
+  CancelSelectionAllEmailAction();
+
+  @override
+  List<Object?> get props => [];
+}
+
+class MarkAsReadAllEmailAction extends DashBoardAction {
+
+  MarkAsReadAllEmailAction();
+
+  @override
+  List<Object?> get props => [];
+}
+
+class FilterMessageAction extends DashBoardAction {
+
+  BuildContext context;
+  FilterMessageOption option;
+
+  FilterMessageAction(this.context, this.option);
+
+  @override
+  List<Object?> get props => [option];
+}
+
+class HandleEmailActionTypeAction extends DashBoardAction {
+
+  BuildContext context;
+  EmailActionType emailAction;
+  List<PresentationEmail> listEmailSelected;
+
+  HandleEmailActionTypeAction(this.context, this.listEmailSelected, this.emailAction);
+
+  @override
+  List<Object> get props => [listEmailSelected, emailAction];
+}
+
+class GoToSettingsAction extends DashBoardAction {
+
+  GoToSettingsAction();
+
+  @override
+  List<Object?> get props => [];
+}
@@ -0,0 +1,34 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/cupertino.dart';
+import 'package:model/model.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+extension FilterMessageOptionExtension on FilterMessageOption {
+
+  String getName(BuildContext context) {
+    switch(this) {
+      case FilterMessageOption.all:
+        return '';
+      case FilterMessageOption.unread:
+        return AppLocalizations.of(context).unread;
+      case FilterMessageOption.attachments:
+        return AppLocalizations.of(context).with_attachments;
+      case FilterMessageOption.starred:
+        return AppLocalizations.of(context).starred;
+    }
+  }
+
+  String getIcon(ImagePaths imagePaths) {
+    switch(this) {
+      case FilterMessageOption.all:
+        return '';
+      case FilterMessageOption.unread:
+        return imagePaths.icUnread;
+      case FilterMessageOption.attachments:
+        return imagePaths.icAttachment;
+      case FilterMessageOption.starred:
+        return imagePaths.icStar;
+    }
+  }
+}
@@ -15,6 +15,7 @@ import 'package:jmap_dart_client/jmap/mail/email/email.dart';
 import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
 import 'package:model/model.dart';
 import 'package:package_info_plus/package_info_plus.dart';
+import 'package:tmail_ui_user/features/base/action/ui_action.dart';
 import 'package:tmail_ui_user/features/base/reloadable/reloadable_controller.dart';
 import 'package:tmail_ui_user/features/caching/caching_manager.dart';
 import 'package:tmail_ui_user/features/composer/domain/state/save_email_as_drafts_state.dart';
@@ -35,7 +36,7 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/domain/state/get_user_p
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/state/remove_email_drafts_state.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/get_user_profile_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/domain/usecases/remove_email_drafts_interactor.dart';
-import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/model/dashboard_action.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/action/dashboard_action.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';
@@ -68,9 +69,12 @@ class MailboxDashBoardController extends ReloadableController {
  final userProfile = Rxn<UserProfile>();
  final searchState = SearchState.initial().obs;
  final suggestionSearch = <String>[].obs;
-  final dashBoardAction = DashBoardAction.none.obs;
+  final dashBoardAction = Rxn<UIAction>();
  final routePath = AppRoutes.MAILBOX_DASHBOARD.obs;
  final appInformation = Rxn<PackageInfo>();
+  final currentSelectMode = SelectMode.INACTIVE.obs;
+  final filterMessageOption = FilterMessageOption.all.obs;
+  final listEmailSelected = <PresentationEmail>[].obs;

  SearchQuery? searchQuery;
  Session? sessionCurrent;
@@ -96,12 +100,12 @@ class MailboxDashBoardController extends ReloadableController {

  @override
  void onReady() {
-    super.onReady();
    log('MailboxDashBoardController::onReady()');
    dispatchRoute(AppRoutes.THREAD);
    _setSessionCurrent();
    _getUserProfile();
    _initPackageInfo();
+    super.onReady();
  }

  @override
@@ -257,9 +261,9 @@ class MailboxDashBoardController extends ReloadableController {

  bool get isDrawerOpen => scaffoldKey.currentState?.isDrawerOpen == true;

-  bool isSearchActive() {
-    return searchState.value.searchStatus == SearchStatus.ACTIVE;
-  }
+  bool isSearchActive() => searchState.value.searchStatus == SearchStatus.ACTIVE;
+
+  bool isSelectionEnabled() => currentSelectMode.value == SelectMode.ACTIVE;

  void enableSearch() {
    searchState.value = searchState.value.enableSearchState();
@@ -361,16 +365,14 @@ class MailboxDashBoardController extends ReloadableController {
    }
  }

-  void dispatchDashBoardAction(DashBoardAction action, {RouterArguments? arguments}) {
-    switch(action) {
-      case DashBoardAction.none:
-        routerArguments = null;
-        Get.delete<ComposerController>();
-        break;
-      case DashBoardAction.compose:
-        routerArguments = arguments;
-        ComposerBindings().dependencies();
-        break;
+  void dispatchAction(UIAction action) {
+    log('MailboxDashBoardController::dispatchAction(): ${action.runtimeType}');
+    if (action is ComposeEmailAction) {
+      routerArguments = action.arguments;
+      ComposerBindings().dependencies();
+    } else if (action is CloseComposeEmailAction) {
+      routerArguments = null;
+      Get.delete<ComposerController>();
    }
    dashBoardAction.value = action;
  }
@@ -402,8 +404,8 @@ class MailboxDashBoardController extends ReloadableController {

  void composeEmailAction() {
    if (kIsWeb) {
-      if (dashBoardAction.value != DashBoardAction.compose) {
-        dispatchDashBoardAction(DashBoardAction.compose, arguments: ComposerArguments());
+      if (dashBoardAction.value is! ComposeEmailAction) {
+        dispatchAction(ComposeEmailAction(arguments: ComposerArguments()));
      }
    } else {
      push(AppRoutes.COMPOSER, arguments: ComposerArguments());
@@ -412,8 +414,8 @@ class MailboxDashBoardController extends ReloadableController {

  void goToComposer(ComposerArguments arguments) {
    if (kIsWeb) {
-      if (dashBoardAction.value != DashBoardAction.compose) {
-        dispatchDashBoardAction(DashBoardAction.compose, arguments: arguments);
+      if (dashBoardAction.value is! ComposeEmailAction) {
+        dispatchAction(ComposeEmailAction(arguments: arguments));
      }
    } else {
      push(AppRoutes.COMPOSER, arguments: arguments);
@@ -434,6 +436,14 @@ class MailboxDashBoardController extends ReloadableController {
    goToLogin();
  }

+  void clearDashBoardAction() {
+    dashBoardAction.value = DashBoardAction.idle;
+  }
+
+  void goToSettings() {
+    dispatchAction(GoToSettingsAction());
+  }
+
  @override
  void onClose() {
    _emailReceiveManager.closeEmailReceiveManagerStream();
@@ -5,10 +5,10 @@ import 'package:tmail_ui_user/features/base/mixin/network_connection_mixin.dart'
 import 'package:tmail_ui_user/features/composer/presentation/composer_view.dart';
 import 'package:tmail_ui_user/features/email/presentation/email_view.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_view.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/model/dashboard_action.dart';
-import 'package:tmail_ui_user/features/setting/presentation/model/app_setting.dart';
-import 'package:tmail_ui_user/features/setting/presentation/model/reading_pane.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/app_setting.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/reading_pane.dart';
 import 'package:tmail_ui_user/features/thread/presentation/thread_view.dart';
 import 'package:tmail_ui_user/main/routes/app_routes.dart';

@@ -28,19 +28,16 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
            ? SizedBox(child: MailboxView(), width: double.infinity)
            : SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
        tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
-        tabletLarge: const SizedBox.shrink(),
-        desktop: const SizedBox.shrink()
+        tabletLarge: SizedBox.shrink(),
      ),
      drawerEnableOpenDragGesture: _responsiveUtils.isMobile(context) || _responsiveUtils.isTablet(context),
      body: Stack(children: [
        ResponsiveWidget(
          responsiveUtils: _responsiveUtils,
-          desktop: _buildLargeScreenView(context),
          tabletLarge: _buildLargeScreenView(context),
-          tablet: ThreadView(),
          mobile: ThreadView()
        ),
-        Obx(() => controller.dashBoardAction.value == DashBoardAction.compose
+        Obx(() => controller.dashBoardAction.value is ComposeEmailAction
          ? ComposerView()
          : const SizedBox.shrink()),
        Obx(() => controller.isNetworkConnectionAvailable()
@@ -50,7 +47,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
    );
  }

-  Widget _buildThreadAndEmailContainer(BuildContext context) {
+  Widget _wrapContainerForThreadAndEmail(BuildContext context) {
    switch(AppSetting.readingPane) {
      case ReadingPane.noSplit:
        return Obx(() {
@@ -97,7 +94,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthMobileTablet),
-        Expanded(child: _buildThreadAndEmailContainer(context))
+        Expanded(child: _wrapContainerForThreadAndEmail(context))
      ],
    );
  }
@@ -1,44 +1,100 @@
 import 'package:core/core.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
+import 'package:model/model.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/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/model/dashboard_action.dart';
-import 'package:tmail_ui_user/features/setting/presentation/model/app_setting.dart';
-import 'package:tmail_ui_user/features/setting/presentation/model/reading_pane.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/manage_account/presentation/model/app_setting.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/model/reading_pane.dart';
+import 'package:tmail_ui_user/features/thread/presentation/extensions/filter_message_option_extension.dart';
 import 'package:tmail_ui_user/features/thread/presentation/thread_view.dart';
+import 'package:tmail_ui_user/features/thread/presentation/widgets/search_app_bar_widget.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 import 'package:tmail_ui_user/main/routes/app_routes.dart';

-class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with NetworkConnectionMixin {
+class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with NetworkConnectionMixin,
+    UserSettingPopupMenuMixin, FilterEmailPopupMenuMixin {

  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))) {
+      WidgetsBinding.instance?.addPostFrameCallback((_) {
+        controller.closeDrawer();
+      });
+    }
+
    return Scaffold(
      key: controller.scaffoldKey,
+      backgroundColor: Colors.white,
      drawer: ResponsiveWidget(
          responsiveUtils: _responsiveUtils,
          mobile: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
-          tablet: SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeDrawerWidthWeb),
-          tabletLarge: const SizedBox.shrink(),
-          desktop: const SizedBox.shrink()
+          tabletLarge: const SizedBox.shrink()
      ),
      drawerEnableOpenDragGesture: _responsiveUtils.isMobile(context) || _responsiveUtils.isTablet(context),
      body: Stack(children: [
        ResponsiveWidget(
            responsiveUtils: _responsiveUtils,
-            desktop: _buildLargeScreenView(context),
-            tabletLarge: _buildLargeScreenView(context),
-            tablet: ThreadView(),
+            desktop: Column(children: [
+              Row(children: [
+                Container(width: 256, color: Colors.white,
+                  padding: const EdgeInsets.only(top: 25, bottom: 25, left: 32),
+                  child: Row(children: [
+                    (SloganBuilder(arrangedByHorizontal: true)
+                        ..setSloganText(AppLocalizations.of(context).app_name)
+                        ..setSloganTextAlign(TextAlign.center)
+                        ..setSloganTextStyle(const TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold))
+                        ..setSizeLogo(24)
+                        ..setLogo(_imagePaths.icLogoTMail))
+                      .build(),
+                    Obx(() {
+                      if (controller.appInformation.value != null) {
+                        return Padding(padding: const EdgeInsets.only(top: 6),
+                          child: Text(
+                            'v.${controller.appInformation.value!.version}',
+                            textAlign: TextAlign.center,
+                            style: const TextStyle(fontSize: 13, color: AppColor.colorContentEmail, fontWeight: FontWeight.w500),
+                          ));
+                      } else {
+                        return const SizedBox.shrink();
+                      }
+                    }),
+                  ])
+                ),
+                Expanded(child: Padding(
+                  padding: const EdgeInsets.only(right: 10, top: 16, bottom: 10, left: 48),
+                  child: _buildRightHeader(context)))
+              ]),
+              Expanded(child: Row(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeMenuWidthWeb),
+                  Expanded(child: _wrapContainerForThreadAndEmail(context))
+                ],
+              ))
+            ]),
+            tabletLarge: Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeMenuWidthWeb),
+                Expanded(child: _wrapContainerForThreadAndEmail(context))
+              ],
+            ),
            mobile: ThreadView()
        ),
-        Obx(() => controller.dashBoardAction.value == DashBoardAction.compose
+        Obx(() => controller.dashBoardAction.value is ComposeEmailAction
            ? ComposerView()
            : const SizedBox.shrink()),
        Obx(() => controller.isNetworkConnectionAvailable()
@@ -48,7 +104,7 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
    );
  }

-  Widget _buildThreadAndEmailContainer(BuildContext context) {
+  Widget _wrapContainerForThreadAndEmail(BuildContext context) {
    switch(AppSetting.readingPane) {
      case ReadingPane.noSplit:
        return Obx(() {
@@ -84,19 +140,267 @@ class MailboxDashBoardView extends GetWidget<MailboxDashBoardController> with Ne
    }
  }

-  Widget _buildLargeScreenView(BuildContext context) {
-    if (controller.isDrawerOpen && (_responsiveUtils.isDesktop(context) || _responsiveUtils.isTabletLarge(context))) {
-      WidgetsBinding.instance?.addPostFrameCallback((_) {
-        controller.closeDrawer();
-      });
-    }
+  Widget _buildRightHeader(BuildContext context) {
+    return Row(children: [
+      Obx(() {
+        if (controller.isSelectionEnabled()) {
+          return _buildListButtonTopBarSelection(context);
+        } else {
+          return controller.isSearchActive()
+            ? _buildListButtonTopBarSearchActive(context)
+            : _buildListButtonTopBar(context);
+        }
+      }),
+      const SizedBox(width: 16),
+      Obx(() => !controller.isSearchActive() ? const Spacer() : const SizedBox.shrink()),
+      Obx(() => controller.isSearchActive() ? Expanded(child: _buildSearchForm(context)) : const SizedBox.shrink()),
+      Obx(() => !controller.isSearchActive()
+          ? (SearchBarView(_imagePaths)
+                ..hintTextSearch(AppLocalizations.of(context).search_emails)
+                ..maxSizeWidth(240)
+                ..addOnOpenSearchViewAction(() => controller.enableSearch()))
+              .build()
+          : const SizedBox.shrink()),
+      Obx(() => !controller.isSearchActive() ? const SizedBox(width: 16) : const SizedBox.shrink()),
+      (AvatarBuilder()
+          ..text(controller.userProfile.value?.getAvatarText() ?? '')
+          ..backgroundColor(Colors.white)
+          ..textColor(Colors.black)
+          ..context(context)
+          ..addOnTapAvatarActionWithPositionClick((position) =>
+              controller.openPopupMenuAction(context, position, popupMenuUserSettingActionTile(context,
+                  controller.userProfile.value,
+                  onLogoutAction: () => controller.logoutAction(),
+                  onSettingAction: () => controller.goToSettings())))
+          ..addBoxShadows([const BoxShadow(
+              color: AppColor.colorShadowBgContentEmail,
+              spreadRadius: 1, blurRadius: 1, offset: Offset(0, 0.5))])
+          ..size(48))
+        .build(),
+      const SizedBox(width: 16)
+    ]);
+  }

-    return Row(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        SizedBox(child: MailboxView(), width: _responsiveUtils.defaultSizeMenuWidthWeb),
-        Expanded(child: _buildThreadAndEmailContainer(context))
-      ],
-    );
+  Widget _buildListButtonTopBar(BuildContext context) {
+    return Row(children: [
+      (ButtonBuilder(_imagePaths.icRefresh)
+          ..key(const Key('button_reload_thread'))
+          ..decoration(BoxDecoration(
+              borderRadius: BorderRadius.circular(10),
+              color: AppColor.colorButtonHeaderThread))
+          ..paddingIcon(EdgeInsets.zero)
+          ..size(16)
+          ..radiusSplash(10)
+          ..padding(const EdgeInsets.symmetric(horizontal: 8, vertical: 8))
+          ..onPressActionClick(() => controller.dispatchAction(RefreshAllEmailAction())))
+        .build(),
+      const SizedBox(width: 16),
+      (ButtonBuilder(_imagePaths.icSelectAll)
+          ..key(const Key('button_select_all'))
+          ..decoration(BoxDecoration(
+              borderRadius: BorderRadius.circular(10),
+              color: AppColor.colorButtonHeaderThread))
+          ..paddingIcon(const EdgeInsets.only(right: 8))
+          ..size(16)
+          ..radiusSplash(10)
+          ..padding(const EdgeInsets.symmetric(horizontal: 12, vertical: 8))
+          ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButtonHeaderThread))
+          ..onPressActionClick(() => controller.dispatchAction(SelectionAllEmailAction()))
+          ..text(AppLocalizations.of(context).select_all, isVertical: false))
+        .build(),
+      const SizedBox(width: 16),
+      (ButtonBuilder(_imagePaths.icMarkAllAsRead)
+          ..key(const Key('button_mark_all_as_read'))
+          ..decoration(BoxDecoration(
+              borderRadius: BorderRadius.circular(10),
+              color: AppColor.colorButtonHeaderThread))
+          ..paddingIcon(const EdgeInsets.only(right: 8))
+          ..size(16)
+          ..padding(const EdgeInsets.symmetric(horizontal: 12, vertical: 8))
+          ..radiusSplash(10)
+          ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButtonHeaderThread))
+          ..onPressActionClick(() => controller.dispatchAction(MarkAsReadAllEmailAction()))
+          ..text(AppLocalizations.of(context).mark_all_as_read, isVertical: false))
+        .build(),
+      const SizedBox(width: 16),
+      Obx(() => (ButtonBuilder(_imagePaths.icFilterWeb)
+          ..key(const Key('button_filter_messages'))
+          ..context(context)
+          ..decoration(BoxDecoration(borderRadius: BorderRadius.circular(10), color: AppColor.colorButtonHeaderThread))
+          ..paddingIcon(const EdgeInsets.only(right: 8))
+          ..size(16)
+          ..padding(const EdgeInsets.symmetric(horizontal: 12, vertical: 8))
+          ..radiusSplash(10)
+          ..textStyle(TextStyle(
+              fontSize: 12,
+              color: controller.filterMessageOption.value == FilterMessageOption.all
+                  ? AppColor.colorTextButtonHeaderThread
+                  : AppColor.colorNameEmail,
+              fontWeight: controller.filterMessageOption.value == FilterMessageOption.all
+                  ? FontWeight.normal
+                  : FontWeight.w500))
+          ..addIconAction(Padding(
+              padding: const EdgeInsets.only(left: 8),
+              child: SvgPicture.asset(_imagePaths.icArrowDown, fit: BoxFit.fill)))
+          ..addOnPressActionWithPositionClick((position) => controller.openPopupMenuAction(context, position,
+              popupMenuFilterEmailActionTile(context,
+                  controller.filterMessageOption.value,
+                  (option) => controller.dispatchAction(FilterMessageAction(context, option)))))
+          ..text(controller.filterMessageOption.value == FilterMessageOption.all
+              ? AppLocalizations.of(context).filter_messages
+              : controller.filterMessageOption.value.getTitle(context), isVertical: false))
+        .build()),
+    ]);
+  }
+
+  Widget _buildListButtonTopBarSearchActive(BuildContext context) {
+    return Row(children: [
+      (ButtonBuilder(_imagePaths.icSelectAll)
+          ..key(const Key('button_select_all'))
+          ..decoration(BoxDecoration(
+              borderRadius: BorderRadius.circular(10),
+              color: AppColor.colorButtonHeaderThread))
+          ..paddingIcon(const EdgeInsets.only(right: 8))
+          ..size(16)
+          ..radiusSplash(10)
+          ..padding(const EdgeInsets.symmetric(horizontal: 12, vertical: 8))
+          ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButtonHeaderThread))
+          ..onPressActionClick(() => controller.dispatchAction(SelectionAllEmailAction()))
+          ..text(AppLocalizations.of(context).select_all, isVertical: false))
+        .build(),
+      const SizedBox(width: 16),
+      (ButtonBuilder(_imagePaths.icMarkAllAsRead)
+          ..key(const Key('button_mark_all_as_read'))
+          ..decoration(BoxDecoration(
+              borderRadius: BorderRadius.circular(10),
+              color: AppColor.colorButtonHeaderThread))
+          ..paddingIcon(const EdgeInsets.only(right: 8))
+          ..size(16)
+          ..padding(const EdgeInsets.symmetric(horizontal: 12, vertical: 8))
+          ..radiusSplash(10)
+          ..textStyle(const TextStyle(fontSize: 12, color: AppColor.colorTextButtonHeaderThread))
+          ..onPressActionClick(() => controller.dispatchAction(MarkAsReadAllEmailAction()))
+          ..text(AppLocalizations.of(context).mark_all_as_read, isVertical: false))
+        .build(),
+    ]);
+  }
+
+  Widget _buildListButtonTopBarSelection(BuildContext context) {
+    return Row(children: [
+      buildIconWeb(
+          icon: SvgPicture.asset(_imagePaths.icCloseComposer, color: AppColor.colorTextButton, fit: BoxFit.fill),
+          tooltip: AppLocalizations.of(context).cancel,
+          onTap: () => controller.dispatchAction(CancelSelectionAllEmailAction())),
+      Obx(() => Text(
+          AppLocalizations.of(context).count_email_selected(controller.listEmailSelected.length),
+          style: const TextStyle(fontSize: 17, fontWeight: FontWeight.w500, color: AppColor.colorTextButton))),
+      const SizedBox(width: 30),
+      Obx(() => buildIconWeb(
+          icon: SvgPicture.asset(
+              controller.listEmailSelected.isAllEmailRead
+                  ? _imagePaths.icRead
+                  : _imagePaths.icUnread,
+              fit: BoxFit.fill),
+          tooltip: controller.listEmailSelected.isAllEmailRead
+              ? AppLocalizations.of(context).mark_as_unread
+              : AppLocalizations.of(context).mark_as_read,
+          onTap: () => controller.dispatchAction(
+              HandleEmailActionTypeAction(context,
+                  controller.listEmailSelected,
+                  controller.listEmailSelected.isAllEmailRead
+                      ? EmailActionType.markAsUnread
+                      : EmailActionType.markAsRead)))),
+      Obx(() => buildIconWeb(
+          icon: SvgPicture.asset(
+              controller.listEmailSelected.isAllEmailStarred
+                  ? _imagePaths.icUnStar
+                  : _imagePaths.icStar,
+              fit: BoxFit.fill),
+          tooltip: controller.listEmailSelected.isAllEmailStarred
+              ? AppLocalizations.of(context).un_star
+              : AppLocalizations.of(context).star,
+          onTap: () => controller.dispatchAction(
+              HandleEmailActionTypeAction(context,
+                  controller.listEmailSelected,
+                  controller.listEmailSelected.isAllEmailStarred
+                      ? EmailActionType.markAsStarred
+                      : EmailActionType.unMarkAsStarred)))),
+      Obx(() {
+        if (controller.selectedMailbox.value?.isDrafts == false) {
+          return buildIconWeb(
+              icon: SvgPicture.asset(_imagePaths.icMove, fit: BoxFit.fill),
+              tooltip: AppLocalizations.of(context).move,
+              onTap: () => controller.dispatchAction(
+                  HandleEmailActionTypeAction(context,
+                      controller.listEmailSelected,
+                      EmailActionType.moveToMailbox)));
+        } else {
+          return const SizedBox.shrink();
+        }
+      }),
+      Obx(() {
+        if (controller.selectedMailbox.value?.isDrafts == false) {
+          return buildIconWeb(
+              icon: SvgPicture.asset(
+                  controller.selectedMailbox.value?.isSpam == true
+                      ? _imagePaths.icNotSpam
+                      : _imagePaths.icSpam,
+                  fit: BoxFit.fill),
+              tooltip: controller.selectedMailbox.value?.isSpam == true
+                  ? AppLocalizations.of(context).un_spam
+                  : AppLocalizations.of(context).mark_as_spam,
+              onTap: () {
+                if (controller.selectedMailbox.value?.isSpam == true) {
+                  return controller.dispatchAction(
+                      HandleEmailActionTypeAction(context,
+                          controller.listEmailSelected,
+                          EmailActionType.unSpam));
+                } else {
+                  return controller.dispatchAction(
+                      HandleEmailActionTypeAction(context,
+                          controller.listEmailSelected,
+                          EmailActionType.moveToSpam));
+                }
+              });
+        } else {
+          return const SizedBox.shrink();
+        }
+      }),
+      Obx(() => buildIconWeb(
+          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,
+          onTap: () {
+            if (controller.selectedMailbox.value?.isTrash == true) {
+              return controller.dispatchAction(HandleEmailActionTypeAction(context,
+                  controller.listEmailSelected,
+                  EmailActionType.deletePermanently));
+            } else {
+              return controller.dispatchAction(HandleEmailActionTypeAction(context,
+                  controller.listEmailSelected,
+                  EmailActionType.moveToTrash));
+            }
+          })),
+    ]);
+  }
+
+  Widget _buildSearchForm(BuildContext context) {
+    return (SearchAppBarWidget(context, _imagePaths, _responsiveUtils,
+            controller.searchQuery,
+            controller.searchFocus,
+            controller.searchInputController,
+            suggestionSearch: controller.suggestionSearch)
+        ..addDecoration(const BoxDecoration(
+            borderRadius: BorderRadius.all(Radius.circular(10)),
+            color: AppColor.colorBgSearchBar))
+        ..setMargin(const EdgeInsets.only(right: 10))
+        ..setHeightSearchBar(45)
+        ..setHintText(AppLocalizations.of(context).search_mail)
+        ..addOnCancelSearchPressed(() => controller.disableSearch())
+        ..addOnClearTextSearchAction(() => controller.clearSearchText())
+        ..addOnTextChangeSearchAction((query) => controller.addSuggestionSearch(query))
+        ..addOnSearchTextAction((query) => controller.searchEmail(context, query)))
+      .build();
  }
 }
@@ -0,0 +1,55 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:model/model.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/extensions/filter_message_option_extension.dart';
+
+mixin FilterEmailPopupMenuMixin {
+  final _imagePaths = Get.find<ImagePaths>();
+
+  List<PopupMenuEntry> popupMenuFilterEmailActionTile(BuildContext context,
+      FilterMessageOption optionSelected, Function(FilterMessageOption)? onCallBack) {
+    return [
+      PopupMenuItem(
+          padding: EdgeInsets.zero,
+          child: _filterEmailAction(context, optionSelected, FilterMessageOption.attachments, onCallBack)),
+      PopupMenuDivider(height: 0.5),
+      PopupMenuItem(
+          padding: EdgeInsets.zero,
+          child: _filterEmailAction(context, optionSelected, FilterMessageOption.unread, onCallBack)),
+      PopupMenuDivider(height: 0.5),
+      PopupMenuItem(
+          padding: EdgeInsets.zero,
+          child: _filterEmailAction(context, optionSelected, FilterMessageOption.starred, onCallBack)),
+    ];
+  }
+
+  Widget _filterEmailAction(BuildContext context, FilterMessageOption optionSelected,
+      FilterMessageOption option, Function(FilterMessageOption)? onCallBack) {
+    return InkWell(
+      onTap: () => onCallBack?.call(option == optionSelected ? FilterMessageOption.all : option),
+      child: Padding(
+        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 16),
+        child: SizedBox(
+            child: Row(children: [
+              SvgPicture.asset(option.getIcon(_imagePaths),
+                  width: 20,
+                  height: 20,
+                  fit: BoxFit.fill,
+                  color: option != FilterMessageOption.starred ? AppColor.colorTextButton : null),
+              SizedBox(width: 12),
+              Expanded(child: Text(
+                  option.getName(context),
+                  style: TextStyle(fontSize: 15, color: Colors.black, fontWeight: FontWeight.w500))),
+              if (optionSelected == option)
+                SizedBox(width: 12),
+              if (optionSelected == option)
+                SvgPicture.asset(_imagePaths.icFilterSelected, width: 16, height: 16, fit: BoxFit.fill),
+            ])
+        ),
+      )
+    );
+  }
+}
@@ -0,0 +1,57 @@
+
+import 'package:core/core.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:model/model.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+mixin UserSettingPopupMenuMixin {
+  final _imagePaths = Get.find<ImagePaths>();
+
+  List<PopupMenuEntry> popupMenuUserSettingActionTile(BuildContext context, UserProfile? userProfile,
+      {Function? onLogoutAction, Function? onSettingAction}) {
+    return [
+      PopupMenuItem(
+          enabled: false,
+          padding: EdgeInsets.zero,
+          child: _userInformation(context, userProfile)),
+      PopupMenuDivider(height: 0.5),
+      PopupMenuItem(
+          padding: EdgeInsets.zero,
+          child: _settingAction(context, onSettingAction)),
+      PopupMenuDivider(height: 0.5),
+      PopupMenuItem(
+          padding: EdgeInsets.zero,
+          child: _logoutAction(context, onLogoutAction)),
+    ];
+  }
+
+  Widget _userInformation(BuildContext context, UserProfile? userProfile) {
+    if (userProfile != null) {
+      return SizedBox(
+        width: 300,
+        child: ListTile(
+            contentPadding: EdgeInsets.symmetric(horizontal: 20),
+            title: Text(userProfile.email, maxLines: 1, style: TextStyle(
+                fontSize: 15,
+                color: AppColor.colorHintSearchBar,
+                fontWeight: FontWeight.normal))),
+      );
+    }
+    return SizedBox.shrink();
+  }
+
+  Widget _settingAction(BuildContext context, Function? onCallBack) {
+    return PopupMenuItemWidget(
+        _imagePaths.icSetting,
+        AppLocalizations.of(context).settings,
+        () => onCallBack?.call());
+  }
+
+  Widget _logoutAction(BuildContext context, Function? onCallBack) {
+    return PopupMenuItemWidget(
+        _imagePaths.icLogout,
+        AppLocalizations.of(context).sign_out,
+        () => onCallBack?.call());
+  }
+}
@@ -1,5 +0,0 @@
-
-enum DashBoardAction {
-  none,
-  compose
-}
@@ -1,37 +0,0 @@
-
-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/thread/presentation/widgets/app_action_sheet_action_builder.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
-
-mixin UserSettingPopupMenuMixin {
-  final _imagePaths = Get.find<ImagePaths>();
-
-  void openUserSettingAction(BuildContext context, RelativeRect? position, List<PopupMenuEntry> popupMenuItems) async {
-    await showMenu(
-        context: context,
-        position: position ?? const RelativeRect.fromLTRB(16, 40, 16, 16),
-        color: Colors.white,
-        elevation: 5,
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(14)),
-        items: popupMenuItems);
-  }
-
-  List<PopupMenuEntry> popupMenuUserSettingActionTile(BuildContext context, Function? onCallBack) {
-    return [
-      PopupMenuItem(padding: const EdgeInsets.symmetric(horizontal: 8), child: logoutAction(context, onCallBack)),
-    ];
-  }
-
-  Widget logoutAction(BuildContext context, Function? onCallBack) {
-    return (AppActionSheetActionBuilder(
-          const Key('logout_action'),
-          SvgPicture.asset(_imagePaths.icCloseMailbox, color: AppColor.colorTextButton, fit: BoxFit.fill),
-          AppLocalizations.of(context).logout,
-          iconLeftPadding:const EdgeInsets.only(right: 12))
-        ..onActionClick((option) => onCallBack?.call()))
-      .build();
-  }
-}