TF-1427 Handle show mailbox in search mailbox view

2023-02-10 03:59:58 +07:00
parent 85a74039f6
commit b0273711ee
19 changed files with 766 additions and 441 deletions
@@ -52,7 +52,6 @@ import 'package:tmail_ui_user/features/mailbox/domain/usecases/rename_mailbox_in
 import 'package:tmail_ui_user/features/mailbox/domain/usecases/subscribe_mailbox_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/usecases/subscribe_multiple_mailbox_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/action/mailbox_ui_action.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/extensions/list_mailbox_node_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories_expand_mode.dart';
@@ -993,29 +992,11 @@ class MailboxController extends BaseMailboxController with MailboxActionHandlerM
    await refreshTree(_mailboxList);
  }

-  SubscribeRequest? _generateSubscribeRequest(
-    MailboxId mailboxId,
-    MailboxSubscribeState subscribeState,
-    MailboxSubscribeAction subscribeAction
-  ) {
-    final mailboxNode = findMailboxNodeById(mailboxId);
-
-    if (mailboxNode != null) {
-      if (mailboxNode.hasChildren()) {
-        final listDescendantMailboxIds = mailboxNode.descendantsAsList().mailboxIds;
-        return SubscribeMultipleMailboxRequest(mailboxId, listDescendantMailboxIds, subscribeState, subscribeAction);
-      } else {
-        return SubscribeMailboxRequest(mailboxId, subscribeState, subscribeAction);
-      }
-    }
-    return null;
-  }
-
  void _unsubscribeMailboxAction(MailboxId mailboxId) {
    final _accountId = mailboxDashBoardController.accountId.value;

    if (_accountId != null) {
-      final subscribeRequest = _generateSubscribeRequest(
+      final subscribeRequest = generateSubscribeRequest(
        mailboxId,
        MailboxSubscribeState.disabled,
        MailboxSubscribeAction.unSubscribe
@@ -1146,25 +1127,4 @@ class MailboxController extends BaseMailboxController with MailboxActionHandlerM
      }
    }
  }
-
-  MailboxActions _mailboxActionForSpam() {
-    return mailboxDashBoardController.enableSpamReport
-      ? MailboxActions.disableSpamReport
-      : MailboxActions.enableSpamReport;
-  }
-
-  List<MailboxActions> listActionForMailbox(PresentationMailbox mailbox) {
-    return [
-      if (BuildUtils.isWeb)
-        MailboxActions.openInNewTab,
-      if (mailbox.isSpam)
-        _mailboxActionForSpam(),
-      MailboxActions.markAsRead,
-      MailboxActions.move,
-      MailboxActions.rename,
-      MailboxActions.delete,
-      if (mailbox.isSupportedDisableMailbox)
-        MailboxActions.disableMailbox
-    ];
-  }
 }
@@ -6,18 +6,16 @@ import 'package:get/get.dart';
 import 'package:model/model.dart';
 import 'package:package_info_plus/package_info_plus.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_controller.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/model/context_item_mailbox_action.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/mixin/mailbox_widget_mixin.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/bottom_bar_selection_mailbox_widget.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_bottom_sheet_action_tile_builder.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/user_information_widget_builder.dart';
 import 'package:tmail_ui_user/features/quotas/presentation/widget/quotas_footer_widget.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

-class MailboxView extends GetWidget<MailboxController> {
+class MailboxView extends GetWidget<MailboxController> with MailboxWidgetMixin {

  final _imagePaths = Get.find<ImagePaths>();
  final _responsiveUtils = Get.find<ResponsiveUtils>();
@@ -328,95 +326,54 @@ class MailboxView extends GetWidget<MailboxController> {
    ]);
  }

-  MailboxActions _mailboxActionForSpam() {
-    return controller.mailboxDashBoardController.enableSpamReport
-      ? MailboxActions.disableSpamReport
-      : MailboxActions.enableSpamReport;
-  }
-
-  List<MailboxActions> _listActionForMailbox(PresentationMailbox mailbox) {
-    return [
-      if (BuildUtils.isWeb)
-        MailboxActions.openInNewTab,
-      if (mailbox.isSpam)
-        _mailboxActionForSpam(),
-      MailboxActions.markAsRead,
-      MailboxActions.move,
-      MailboxActions.rename,
-      MailboxActions.delete,
-      if (mailbox.isSupportedDisableMailbox)
-        MailboxActions.disableMailbox
-    ];
-  }
-
-  void _openBottomSheetMailboxMenuAction(BuildContext context, PresentationMailbox mailbox) {
-    final mailboxActionsSupported = _listActionForMailbox(mailbox);
-
-    final listContextMailboxPopupMenuItemAction = mailboxActionsSupported
-      .map((action) => ContextMenuItemMailboxAction(action, action.getContextMenuItemState(mailbox)))
-      .toList();
-
-    controller.openContextMenuAction(
-      context,
-      _bottomSheetMailboxActionTiles(
-        context,
-        mailbox,
-        listContextMailboxPopupMenuItemAction
-      )
-    );
-  }
-
-  List<Widget> _bottomSheetMailboxActionTiles(
-    BuildContext context,
-    PresentationMailbox mailbox,
-    List<ContextMenuItemMailboxAction> contextMenuActions
-  ) {
-    return contextMenuActions
-      .map((action) => _openBottomSheetMailboxMenuActionTile(context, action, mailbox))
-      .toList();
-  }
-
-  Widget _openBottomSheetMailboxMenuActionTile(
-    BuildContext context,
-    ContextMenuItemMailboxAction contextMenuItem,
-    PresentationMailbox mailbox
-  ) {
-    return (MailboxBottomSheetActionTileBuilder(
-        Key('${contextMenuItem.action.name}_action'),
-        SvgPicture.asset(
-            contextMenuItem.action.getContextMenuIcon(_imagePaths),
-            color: AppColor.primaryColor),
-        contextMenuItem.action.getTitleContextMenu(context),
-        mailbox,
-        absorbing: !contextMenuItem.isActivated,
-        opacity: !contextMenuItem.isActivated)
-      ..onActionClick((mailbox) => controller.handleMailboxAction(context, contextMenuItem.action, mailbox)))
-    .build();
-  }
-  
  List<Widget> _buildListChildTileWidget(BuildContext context, MailboxNode parentNode, {MailboxNode? lastNode}) {
    return parentNode.childrenItems
-      ?.map((mailboxNode) => mailboxNode.hasChildren()
-          ? TreeViewChild(
+      ?.map((mailboxNode) {
+          if (mailboxNode.hasChildren()) {
+            return TreeViewChild(
+              context,
+              key: const Key('children_tree_mailbox_child'),
+              isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
+              parent: Obx(() => (MailBoxFolderTileBuilder(
+                    context,
+                    _imagePaths,
+                    mailboxNode,
+                    lastNode: lastNode,
+                    allSelectMode: controller.currentSelectMode.value)
+                ..addOnLongPressMailboxNodeAction((mailboxNode) {
+                  openMailboxMenuActionOnMobile(
+                    context,
+                    _imagePaths,
+                    mailboxNode.item,
+                    controller
+                  );
+                })
+                ..addOnClickOpenMailboxNodeAction((mailboxNode) => controller.openMailbox(context, mailboxNode.item))
+                ..addOnClickExpandMailboxNodeAction((mailboxNode) => controller.toggleMailboxFolder(mailboxNode))
+                ..addOnSelectMailboxNodeAction((mailboxNode) => controller.selectMailboxNode(mailboxNode))
+              ).build()),
+              children: _buildListChildTileWidget(context, mailboxNode)
+            ).build();
+          } else {
+            return Obx(() => (MailBoxFolderTileBuilder(
                  context,
-                  key: const Key('children_tree_mailbox_child'),
-                  isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
-                  parent: Obx(() => (MailBoxFolderTileBuilder(context, _imagePaths, mailboxNode, lastNode: lastNode,
-                          allSelectMode: controller.currentSelectMode.value)
-                      ..addOnLongPressMailboxNodeAction((mailboxNode) => _openBottomSheetMailboxMenuAction(context, mailboxNode.item))
-                      ..addOnClickOpenMailboxNodeAction((mailboxNode) => controller.openMailbox(context, mailboxNode.item))
-                      ..addOnClickExpandMailboxNodeAction((mailboxNode) => controller.toggleMailboxFolder(mailboxNode))
-                      ..addOnSelectMailboxNodeAction((mailboxNode) => controller.selectMailboxNode(mailboxNode)))
-                    .build()),
-                  children: _buildListChildTileWidget(context, mailboxNode)
-              ).build()
-          : Obx(() => (MailBoxFolderTileBuilder(context, _imagePaths, mailboxNode, lastNode: lastNode,
+                  _imagePaths,
+                  mailboxNode,
+                  lastNode: lastNode,
                  allSelectMode: controller.currentSelectMode.value)
-              ..addOnLongPressMailboxNodeAction((mailboxNode) => _openBottomSheetMailboxMenuAction(context, mailboxNode.item))
+              ..addOnLongPressMailboxNodeAction((mailboxNode) {
+                openMailboxMenuActionOnMobile(
+                  context,
+                  _imagePaths,
+                  mailboxNode.item,
+                  controller
+                );
+              })
              ..addOnClickOpenMailboxNodeAction((mailboxNode) => controller.openMailbox(context, mailboxNode.item))
-              ..addOnSelectMailboxNodeAction((mailboxNode) => controller.selectMailboxNode(mailboxNode)))
-            .build())
-      ).toList() ?? <Widget>[];
+              ..addOnSelectMailboxNodeAction((mailboxNode) => controller.selectMailboxNode(mailboxNode))
+            ).build());
+          }
+      }).toList() ?? <Widget>[];
  }

  Widget _buildOptionSelectionMailbox(BuildContext context) {
@@ -5,13 +5,10 @@ import 'package:get/get.dart';
 import 'package:model/model.dart';
 import 'package:package_info_plus/package_info_plus.dart';
 import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.dart';
-import 'package:tmail_ui_user/features/base/mixin/popup_menu_widget_mixin.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_controller.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/model/context_item_mailbox_action.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/mixin/mailbox_widget_mixin.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_bottom_sheet_action_tile_builder.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_folder_tile_builder.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/user_information_widget_builder.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/widgets/app_dashboard/app_list_dashboard_item.dart';
@@ -19,7 +16,9 @@ import 'package:tmail_ui_user/features/quotas/presentation/widget/quotas_footer_
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 import 'package:tmail_ui_user/main/utils/app_config.dart';

-class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, PopupMenuWidgetMixin {
+class MailboxView extends GetWidget<MailboxController>
+  with AppLoaderMixin,
+    MailboxWidgetMixin {

  final _imagePaths = Get.find<ImagePaths>();
  final _responsiveUtils = Get.find<ResponsiveUtils>();
@@ -135,7 +134,10 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
            const Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
            const SizedBox(height: 13),
            Padding(
-              padding: EdgeInsets.only(left: _responsiveUtils.isDesktop(context) ? 0 : 12),
+              padding: EdgeInsets.only(
+                left: _responsiveUtils.isDesktop(context) ? 0 : 12,
+                bottom: 8
+              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
@@ -170,24 +172,50 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
                      )),
                ]),
            ),
-            const SizedBox(height: 8),
-            Obx(() => controller.personalMailboxIsNotEmpty
-                ? Column(
-                  children: [
-                    _buildHeaderMailboxCategory(context, MailboxCategories.personalMailboxes),
-                    _buildMailboxCategory(context, MailboxCategories.personalMailboxes, controller.personalRootNode),
-                  ],
-                )
-                : const SizedBox.shrink()),
-            const SizedBox(height: 8),
-            Obx(() => controller.teamMailboxesIsNotEmpty
-                ? Column(
-                  children: [
-                    _buildHeaderMailboxCategory(context, MailboxCategories.teamMailboxes),
-                    _buildMailboxCategory(context, MailboxCategories.teamMailboxes, controller.teamMailboxesRootNode),
-                  ],
-                )
-                : const SizedBox.shrink()),
+            Obx(() {
+              if (controller.personalMailboxIsNotEmpty) {
+                return Padding(
+                  padding: const EdgeInsets.only(bottom: 8),
+                  child: Column(
+                    children: [
+                      _buildHeaderMailboxCategory(
+                        context,
+                        MailboxCategories.personalMailboxes
+                      ),
+                      _buildMailboxCategory(
+                        context,
+                        MailboxCategories.personalMailboxes,
+                        controller.personalRootNode
+                      ),
+                    ],
+                  ),
+                );
+              } else {
+                return const SizedBox.shrink();
+              }
+            }),
+            Obx(() {
+              if (controller.teamMailboxesIsNotEmpty) {
+                return Padding(
+                  padding: const EdgeInsets.only(bottom: 8),
+                  child: Column(
+                    children: [
+                      _buildHeaderMailboxCategory(
+                        context,
+                        MailboxCategories.teamMailboxes
+                      ),
+                      _buildMailboxCategory(
+                        context,
+                        MailboxCategories.teamMailboxes,
+                        controller.teamMailboxesRootNode
+                      ),
+                    ]
+                  )
+                );
+              } else {
+                return const SizedBox.shrink();
+              }
+            })
          ])
        ),
        Obx(() => controller.mailboxDashBoardController.isDraggingMailbox
@@ -284,39 +312,63 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
            : const Offstage());
  }

-  List<Widget> _buildListChildTileWidget(BuildContext context,
-      MailboxNode parentNode, {MailboxNode? lastNode}) {
-    return parentNode.childrenItems
-        ?.map((mailboxNode) => mailboxNode.hasChildren()
-          ? TreeViewChild(
+  List<Widget> _buildListChildTileWidget(
+    BuildContext context,
+    MailboxNode parentNode,
+    {MailboxNode? lastNode}
+  ) {
+    return parentNode.childrenItems?.map((mailboxNode) {
+      if (mailboxNode.hasChildren()) {
+        return TreeViewChild(
+          context,
+          key: const Key('children_tree_mailbox_child'),
+          isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
+          parent: Obx(() => (MailBoxFolderTileBuilder(
                context,
-                key: const Key('children_tree_mailbox_child'),
-                isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
-                parent: Obx(() => (MailBoxFolderTileBuilder(context, _imagePaths, mailboxNode, lastNode: lastNode,
-                        mailboxNodeSelected: controller.mailboxDashBoardController.selectedMailbox.value)
-                    ..addOnClickOpenMailboxNodeAction((mailboxNode) =>
-                        controller.openMailbox(context, mailboxNode.item))
-                    ..addOnClickExpandMailboxNodeAction((mailboxNode) =>
-                        controller.toggleMailboxFolder(mailboxNode))
-                    ..addOnClickOpenMenuMailboxNodeAction((position, mailboxNode) =>
-                        _openMailboxMenuAction(context, position, mailboxNode.item))
-                    ..addOnSelectMailboxNodeAction((mailboxNode) =>
-                        controller.selectMailboxNode(mailboxNode))
-                    ..addOnDragEmailToMailboxAccepted(_handleDragItemAccepted))
-                  .build()),
-                children: _buildListChildTileWidget(context, mailboxNode)
-            ).build()
-          : Obx(() => (MailBoxFolderTileBuilder(context, _imagePaths, mailboxNode, lastNode: lastNode,
-                  mailboxNodeSelected: controller.mailboxDashBoardController.selectedMailbox.value)
-              ..addOnClickOpenMailboxNodeAction((mailboxNode) =>
-                  controller.openMailbox(context, mailboxNode.item))
-              ..addOnClickOpenMenuMailboxNodeAction((position, mailboxNode) =>
-                  _openMailboxMenuAction(context, position, mailboxNode.item))
-              ..addOnSelectMailboxNodeAction((mailboxNode) =>
-                  controller.selectMailboxNode(mailboxNode))
-              ..addOnDragEmailToMailboxAccepted(_handleDragItemAccepted))
-            .build())
-    ).toList() ?? <Widget>[];
+                _imagePaths,
+                mailboxNode,
+                lastNode: lastNode,
+                mailboxNodeSelected: controller.mailboxDashBoardController.selectedMailbox.value)
+            ..addOnClickOpenMailboxNodeAction((mailboxNode) => controller.openMailbox(context, mailboxNode.item))
+            ..addOnClickExpandMailboxNodeAction((mailboxNode) => controller.toggleMailboxFolder(mailboxNode))
+            ..addOnClickOpenMenuMailboxNodeAction((position, mailboxNode) {
+              openMailboxMenuActionOnWeb(
+                context,
+                _imagePaths,
+                _responsiveUtils,
+                position,
+                mailboxNode.item,
+                controller
+              );
+            })
+            ..addOnSelectMailboxNodeAction((mailboxNode) => controller.selectMailboxNode(mailboxNode))
+            ..addOnDragEmailToMailboxAccepted(_handleDragItemAccepted)
+          ).build()),
+          children: _buildListChildTileWidget(context, mailboxNode)
+        ).build();
+      } else {
+        return Obx(() => (MailBoxFolderTileBuilder(
+            context,
+              _imagePaths,
+              mailboxNode,
+              lastNode: lastNode,
+              mailboxNodeSelected: controller.mailboxDashBoardController.selectedMailbox.value)
+          ..addOnClickOpenMailboxNodeAction((mailboxNode) => controller.openMailbox(context, mailboxNode.item))
+          ..addOnClickOpenMenuMailboxNodeAction((position, mailboxNode) {
+            openMailboxMenuActionOnWeb(
+              context,
+              _imagePaths,
+              _responsiveUtils,
+              position,
+              mailboxNode.item,
+              controller
+            );
+          })
+          ..addOnSelectMailboxNodeAction((mailboxNode) => controller.selectMailboxNode(mailboxNode))
+          ..addOnDragEmailToMailboxAccepted(_handleDragItemAccepted)
+        ).build());
+      }
+    }).toList() ?? <Widget>[];
  }

  void _handleDragItemAccepted(List<PresentationEmail> listEmails, PresentationMailbox presentationMailbox) {
@@ -342,109 +394,6 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
    );
  }

-  void _openMailboxMenuAction(
-      BuildContext context,
-      RelativeRect position,
-      PresentationMailbox mailbox
-  ) {
-    final mailboxActionsSupported = controller.listActionForMailbox(mailbox);
-
-    final listContextMenuItemAction = mailboxActionsSupported
-        .map((action) => ContextMenuItemMailboxAction(
-            action,
-            action.getContextMenuItemState(mailbox)))
-        .toList();
-
-    if (_responsiveUtils.isScreenWithShortestSide(context)) {
-      controller.openContextMenuAction(
-          context,
-          _bottomSheetMailboxActionTiles(
-              context,
-              mailbox,
-              listContextMenuItemAction));
-    } else {
-      controller.openPopupMenuAction(
-          context,
-          position,
-          _popupMenuMailboxActionTiles(
-              context,
-              mailbox,
-              listContextMenuItemAction));
-    }
-  }
-
-  List<Widget> _bottomSheetMailboxActionTiles(
-      BuildContext context,
-      PresentationMailbox mailbox,
-      List<ContextMenuItemMailboxAction> contextMenuActions
-  ) {
-    return contextMenuActions
-        .map((action) => _mailboxContextMenuActionTile(context, action, mailbox))
-        .toList();
-  }
-
-  Widget _mailboxContextMenuActionTile(
-      BuildContext context,
-      ContextMenuItemMailboxAction contextMenuItem,
-      PresentationMailbox mailbox
-  ) {
-    return (MailboxBottomSheetActionTileBuilder(
-            Key('${contextMenuItem.action.name}_action'),
-            SvgPicture.asset(
-              contextMenuItem.action.getContextMenuIcon(_imagePaths),
-              color: contextMenuItem.action.getColorContextMenuIcon(),
-              width: 24,
-              height: 24
-            ),
-            contextMenuItem.action.getTitleContextMenu(context),
-            mailbox,
-            absorbing: !contextMenuItem.isActivated,
-            opacity: !contextMenuItem.isActivated)
-        ..actionTextStyle(textStyle: const TextStyle(
-            fontSize: 16,
-            color: Colors.black,
-            fontWeight: FontWeight.w500
-        ))
-        ..onActionClick((mailbox) => controller.handleMailboxAction(context, contextMenuItem.action, mailbox)))
-      .build();
-  }
-
-  List<PopupMenuEntry> _popupMenuMailboxActionTiles(
-      BuildContext context,
-      PresentationMailbox mailbox,
-      List<ContextMenuItemMailboxAction> contextMenuActions
-  ) {
-    return contextMenuActions
-        .map((action) => _mailboxPopupMenuActionTile(context, action, mailbox))
-        .toList();
-  }
-
-  PopupMenuItem _mailboxPopupMenuActionTile(
-      BuildContext context,
-      ContextMenuItemMailboxAction contextMenuItem,
-      PresentationMailbox mailbox
-  ) {
-    return PopupMenuItem(
-        padding: EdgeInsets.zero,
-        child: AbsorbPointer(
-          absorbing: !contextMenuItem.isActivated,
-          child: Opacity(
-            opacity: contextMenuItem.isActivated ? 1.0 : 0.3,
-            child: popupItem(
-              contextMenuItem.action.getContextMenuIcon(_imagePaths),
-              contextMenuItem.action.getTitleContextMenu(context),
-              colorIcon: contextMenuItem.action.getColorContextMenuIcon(),
-              styleName: TextStyle(
-                fontWeight: FontWeight.w500,
-                fontSize: 16,
-                color: contextMenuItem.action.getColorContextMenuTitle()
-              ),
-              onCallbackAction: () => controller.handleMailboxAction(context, contextMenuItem.action, mailbox)
-            ),
-          ),
-        ));
-  }
-
  Widget _buildAppGridDashboard(BuildContext context) {
    return Column(
      children: [
@@ -452,9 +401,12 @@ class MailboxView extends GetWidget<MailboxController> with AppLoaderMixin, Popu
        AnimatedContainer(
          padding: const EdgeInsets.only(top: 8),
          duration: const Duration(milliseconds: 400),
-          child: controller.mailboxDashBoardController.appGridDashboardController.appDashboardExpandMode.value == ExpandMode.EXPAND
-            ? _buildAppGridInMailboxView(context)
-            : const Offstage())
+          child: Obx(() {
+            return controller.mailboxDashBoardController.appGridDashboardController.appDashboardExpandMode.value == ExpandMode.EXPAND
+              ? _buildAppGridInMailboxView(context)
+              : const Offstage();
+          })
+        )
    ]);
  }

@@ -0,0 +1,217 @@
+
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/utils/build_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:model/mailbox/presentation_mailbox.dart';
+import 'package:tmail_ui_user/features/base/widget/popup_item_widget.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_controller.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/context_item_mailbox_action.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_bottom_sheet_action_tile_builder.dart';
+import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart';
+
+mixin MailboxWidgetMixin {
+
+  MailboxActions _mailboxActionForSpam(MailboxDashBoardController dashBoardController) {
+    return dashBoardController.enableSpamReport
+      ? MailboxActions.disableSpamReport
+      : MailboxActions.enableSpamReport;
+  }
+
+  List<MailboxActions> listActionForMailbox(
+    PresentationMailbox mailbox,
+    MailboxDashBoardController dashBoardController
+  ) {
+    return [
+      if (BuildUtils.isWeb)
+        MailboxActions.openInNewTab,
+      if (mailbox.isSpam)
+        _mailboxActionForSpam(dashBoardController),
+      MailboxActions.markAsRead,
+      MailboxActions.move,
+      MailboxActions.rename,
+      MailboxActions.delete,
+      if (mailbox.isSupportedDisableMailbox)
+        MailboxActions.disableMailbox
+    ];
+  }
+
+  void openMailboxMenuActionOnMobile(
+    BuildContext context,
+    ImagePaths imagePaths,
+    PresentationMailbox mailbox,
+    MailboxController controller
+  ) {
+    final contextMenuActions = listContextMenuItemAction(mailbox, controller.mailboxDashBoardController);
+
+    controller.openContextMenuAction(
+      context,
+      contextMenuMailboxActionTiles(
+        context,
+        imagePaths,
+        mailbox,
+        contextMenuActions,
+        handleMailboxAction: controller.handleMailboxAction
+      )
+    );
+  }
+
+  List<Widget> contextMenuMailboxActionTiles(
+    BuildContext context,
+    ImagePaths imagePaths,
+    PresentationMailbox mailbox,
+    List<ContextMenuItemMailboxAction> contextMenuActions,
+    {
+      required Function(BuildContext, MailboxActions, PresentationMailbox) handleMailboxAction
+    }
+  ) {
+    return contextMenuActions
+      .map((action) => _buildContextMenuActionTile(
+        context,
+        imagePaths,
+        action,
+        mailbox,
+        handleMailboxAction: handleMailboxAction
+      ))
+      .toList();
+  }
+
+  Widget _buildContextMenuActionTile(
+    BuildContext context,
+    ImagePaths imagePaths,
+    ContextMenuItemMailboxAction contextMenuItem,
+    PresentationMailbox mailbox,
+    {
+      required Function(BuildContext, MailboxActions, PresentationMailbox) handleMailboxAction
+    }
+  ) {
+    return (MailboxBottomSheetActionTileBuilder(
+          Key('${contextMenuItem.action.name}_action'),
+          SvgPicture.asset(
+            contextMenuItem.action.getContextMenuIcon(imagePaths),
+            color: contextMenuItem.action.getColorContextMenuIcon(),
+            width: 24,
+            height: 24
+          ),
+          contextMenuItem.action.getTitleContextMenu(context),
+          mailbox,
+          absorbing: !contextMenuItem.isActivated,
+          opacity: !contextMenuItem.isActivated)
+      ..actionTextStyle(textStyle: TextStyle(
+          fontSize: 16,
+          color: contextMenuItem.action.getColorContextMenuTitle(),
+          fontWeight: FontWeight.w500
+      ))
+      ..onActionClick((mailbox) => handleMailboxAction(context, contextMenuItem.action, mailbox))
+    ).build();
+  }
+
+  List<ContextMenuItemMailboxAction> listContextMenuItemAction(
+    PresentationMailbox mailbox,
+    MailboxDashBoardController dashBoardController,
+    {
+      List<MailboxActions>? mailboxActions
+    }
+  ) {
+    final mailboxActionsSupported = mailboxActions ?? listActionForMailbox(
+      mailbox,
+      dashBoardController
+    );
+
+    final listContextMenuItemAction = mailboxActionsSupported
+      .map((action) => ContextMenuItemMailboxAction(action, action.getContextMenuItemState(mailbox)))
+      .toList();
+
+    return listContextMenuItemAction;
+  }
+
+  void openMailboxMenuActionOnWeb(
+    BuildContext context,
+    ImagePaths imagePaths,
+    ResponsiveUtils responsiveUtils,
+    RelativeRect position,
+    PresentationMailbox mailbox,
+    MailboxController controller
+  ) {
+    final contextMenuActions = listContextMenuItemAction(mailbox, controller.mailboxDashBoardController);
+
+    if (responsiveUtils.isScreenWithShortestSide(context)) {
+      controller.openContextMenuAction(
+        context,
+          contextMenuMailboxActionTiles(
+            context,
+            imagePaths,
+            mailbox,
+            contextMenuActions,
+            handleMailboxAction: controller.handleMailboxAction
+          )
+      );
+    } else {
+      controller.openPopupMenuAction(
+        context,
+        position,
+        popupMenuMailboxActionTiles(
+          context,
+          imagePaths,
+          mailbox,
+          contextMenuActions,
+          handleMailboxAction: controller.handleMailboxAction
+        )
+      );
+    }
+  }
+
+  List<PopupMenuEntry> popupMenuMailboxActionTiles(
+    BuildContext context,
+    ImagePaths imagePaths,
+    PresentationMailbox mailbox,
+    List<ContextMenuItemMailboxAction> contextMenuActions,
+    {
+      required Function(BuildContext, MailboxActions, PresentationMailbox) handleMailboxAction
+    }
+  ) {
+    return contextMenuActions
+      .map((action) => _buildPopupMenuItem(
+        context,
+        imagePaths,
+        action,
+        mailbox,
+        handleMailboxAction: handleMailboxAction
+      ))
+      .toList();
+  }
+
+  PopupMenuItem _buildPopupMenuItem(
+    BuildContext context,
+    ImagePaths imagePaths,
+    ContextMenuItemMailboxAction contextMenuItem,
+    PresentationMailbox mailbox,
+    {
+      required Function(BuildContext, MailboxActions, PresentationMailbox) handleMailboxAction
+    }
+  ) {
+    return PopupMenuItem(
+      padding: EdgeInsets.zero,
+      child: AbsorbPointer(
+        absorbing: !contextMenuItem.isActivated,
+        child: Opacity(
+          opacity: contextMenuItem.isActivated ? 1.0 : 0.3,
+          child: PopupItemWidget(
+            contextMenuItem.action.getContextMenuIcon(imagePaths),
+            contextMenuItem.action.getTitleContextMenu(context),
+            colorIcon: contextMenuItem.action.getColorContextMenuIcon(),
+            iconSize: 24,
+            styleName: TextStyle(
+              fontWeight: FontWeight.w500,
+              fontSize: 16,
+              color: contextMenuItem.action.getColorContextMenuTitle()
+            ),
+            onCallbackAction: () => handleMailboxAction(context, contextMenuItem.action, mailbox)
+          ),
+        ),
+      )
+    );
+  }
+}
@@ -17,7 +17,8 @@ enum MailboxActions {
  openInNewTab,
  disableSpamReport,
  enableSpamReport,
-  disableMailbox
+  disableMailbox,
+  enableMailbox
 }

 extension MailboxActionsExtension on MailboxActions {
@@ -55,6 +56,8 @@ extension MailboxActionsExtension on MailboxActions {
        return AppLocalizations.of(context).deleteMailbox;
      case MailboxActions.disableMailbox:
        return AppLocalizations.of(context).hideMailBoxes;
+      case MailboxActions.enableMailbox:
+        return AppLocalizations.of(context).showMailbox;
      default:
        return '';
    }
@@ -78,6 +81,8 @@ extension MailboxActionsExtension on MailboxActions {
        return imagePaths.icDeleteMailbox;
      case MailboxActions.disableMailbox:
        return imagePaths.icHideMailbox;
+      case MailboxActions.enableMailbox:
+        return imagePaths.icShowMailbox;
      default:
        return '';
    }
@@ -142,9 +147,10 @@ extension MailboxActionsExtension on MailboxActions {
      case MailboxActions.openInNewTab:
      case MailboxActions.disableSpamReport:
      case MailboxActions.enableSpamReport:
-      return mailbox.isPersonal
-        ? ContextMenuItemState.activated
-        : ContextMenuItemState.deactivated;
+        return mailbox.isPersonal
+          ? ContextMenuItemState.activated
+          : ContextMenuItemState.deactivated;
+      case MailboxActions.enableMailbox:
      case MailboxActions.disableMailbox:
        return mailbox.hasRole()
          ? ContextMenuItemState.deactivated
@@ -156,7 +162,7 @@ extension MailboxActionsExtension on MailboxActions {
      case MailboxActions.move:
      case MailboxActions.rename:
      case MailboxActions.delete:
-      return !mailbox.hasRole() && mailbox.isPersonal
+        return !mailbox.hasRole() && mailbox.isPersonal
          ? ContextMenuItemState.activated
          : ContextMenuItemState.deactivated;
      default:
@@ -133,7 +133,7 @@ class MailBoxFolderTileBuilder {
            child: Material(
              color: Colors.transparent,
              child: InkWell(
-                onLongPress: () => _onLongPressMailboxFolderClick?.call(_mailboxNode),
+                onLongPress: () => _onLongPressMailboxNodeAction?.call(_mailboxNode),
                onTap: () => allSelectMode == SelectMode.ACTIVE
                    ? _onSelectMailboxFolderClick?.call(_mailboxNode)
                    : _onOpenMailboxFolderClick?.call(_mailboxNode),