Optimize and refactor for MailboxVisibility

2023-02-17 11:21:54 +07:00
parent 1f871ac8eb
commit f2a63c083a
17 changed files with 343 additions and 487 deletions
@@ -175,6 +175,8 @@ extension AppColor on Color {
  static const colorBackgroundSearchMailboxInput = Color(0xFFEBEDF0);
  static const colorMailboxHovered = Color(0xFFEBEDF0);
  static const colorMailboxPath = Color(0xFF818C99);
+  static const colorIconUnSubscribedMailbox = Color(0xFFAEB7C2);
+  static const colorTitleAUnSubscribedMailbox = Color(0xFF818C99);

  static const mapGradientColor = [
    [Color(0xFF21D4FD), Color(0xFFB721FF)],
@@ -57,6 +57,7 @@ class TreeViewChild {
  final Widget parent;
  final List<Widget> children;
  final VoidCallback? onTap;
+  final EdgeInsets? paddingChild;

  TreeViewChild(
    this.context,
@@ -65,6 +66,7 @@ class TreeViewChild {
      required this.children,
      this.isExpanded,
      this.onTap,
+      this.paddingChild,
      Key? key,
    }
  );
@@ -86,7 +88,13 @@ class TreeViewChild {
          child: isExpanded!
            ? Column(
                mainAxisSize: MainAxisSize.min,
-                children: children.map((child) => Padding(padding: const EdgeInsets.only(left: 20), child: child)).toList())
+                children: children
+                  .map((child) => Padding(
+                    padding: paddingChild ?? const EdgeInsets.only(left: 20),
+                    child: child
+                  ))
+                  .toList()
+              )
            : const Offstage(),
        ),
      ],
@@ -234,7 +234,8 @@ mixin MailboxWidgetMixin {
      EdgeInsets? padding
    }
  ) {
-    return Padding(
+    return Container(
+      color: Colors.transparent,
      padding: padding ?? EdgeInsets.only(
        top: 10,
        left: responsiveUtils.isDesktop(context) ? 0 : 16,
@@ -244,7 +245,7 @@ mixin MailboxWidgetMixin {
        Obx(() {
          final expandMode = categories.getExpandMode(baseMailboxController.mailboxCategoriesExpandMode.value);
          return buildIconWeb(
-            splashRadius: 5,
+            splashRadius: 12,
            iconPadding: EdgeInsets.zero,
            minSize: 12,
            icon: SvgPicture.asset(
@@ -0,0 +1,31 @@
+
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
+
+class SettingDetailViewBuilder extends StatelessWidget {
+
+  final ResponsiveUtils responsiveUtils;
+  final Widget child;
+
+  const SettingDetailViewBuilder({
+    super.key,
+    required this.responsiveUtils,
+    required this.child
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: SettingsUtils.getBackgroundColor(context, responsiveUtils),
+      body: Container(
+        width: double.infinity,
+        height: double.infinity,
+        color: SettingsUtils.getContentBackgroundColor(context, responsiveUtils),
+        decoration: SettingsUtils.getBoxDecorationForContent(context, responsiveUtils),
+        margin: SettingsUtils.getMarginSettingDetailsView(context, responsiveUtils),
+        child: child,
+      ),
+    );
+  }
+}
@@ -27,7 +27,6 @@ import 'package:tmail_ui_user/features/mailbox/domain/usecases/refresh_all_mailb
 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/model/mailbox_categories.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories_expand_mode.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_tree_builder.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/domain/usecases/verify_name_interactor.dart';
@@ -43,14 +42,6 @@ class MailboxVisibilityController extends BaseMailboxController {
  final _appToast = Get.find<AppToast>();
  final _imagePaths = Get.find<ImagePaths>();
  final _responsiveUtils = Get.find<ResponsiveUtils>();
-  final mailboxCategoriesExpandMode = MailboxCategoriesExpandMode.initial().obs;
-  final mailboxListScrollController = ScrollController();
-
-  Map<Role, MailboxId> mapDefaultMailboxIdByRole = {};
-  Map<MailboxId, PresentationMailbox> mapMailboxById = {};
-  PresentationMailbox? outboxMailbox;
-
-  jmap.State? _currentMailboxState;

  MailboxVisibilityController(
    TreeBuilder treeBuilder,
@@ -80,10 +71,10 @@ class MailboxVisibilityController extends BaseMailboxController {
    super.onData(newState);
    newState.fold((failure) => null, (success) {
      if (success is GetAllMailboxSuccess) {
-        _currentMailboxState = success.currentMailboxState;
+        currentMailboxState = success.currentMailboxState;
        _handleBuildMailboxTree(success.mailboxList);
      } else if (success is RefreshChangesAllMailboxSuccess) {
-        _currentMailboxState = success.currentMailboxState;
+        currentMailboxState = success.currentMailboxState;
        refreshTree(success.mailboxList);
      }
    });
@@ -178,7 +169,7 @@ class MailboxVisibilityController extends BaseMailboxController {
        _showToastSubscribeMailboxSuccess(subscribeMailboxSuccess.mailboxId);
    }

-    _refreshMailboxChanges(subscribeMailboxSuccess.currentEmailState);
+    _refreshMailboxChanges(subscribeMailboxSuccess.currentMailboxState);
  }

  void _handleUnsubscribeMultipleMailboxHasSomeSuccess(SubscribeMultipleMailboxHasSomeSuccess subscribeMailboxSuccess) {
@@ -189,7 +180,7 @@ class MailboxVisibilityController extends BaseMailboxController {
      );
    }

-    _refreshMailboxChanges(subscribeMailboxSuccess.currentEmailState);
+    _refreshMailboxChanges(subscribeMailboxSuccess.currentMailboxState);
  }

  void _handleUnsubscribeMultipleMailboxAllSuccess(SubscribeMultipleMailboxAllSuccess subscribeMailboxSuccess) {
@@ -200,15 +191,15 @@ class MailboxVisibilityController extends BaseMailboxController {
      );
    }

-    _refreshMailboxChanges(subscribeMailboxSuccess.currentEmailState);
+    _refreshMailboxChanges(subscribeMailboxSuccess.currentMailboxState);
  }

-  void _refreshMailboxChanges(jmap.State? currentEmailState) {
+  void _refreshMailboxChanges(jmap.State? newMailboxState) {
    final _session = _accountDashBoardController.sessionCurrent.value;
    final _accountId = _accountDashBoardController.accountId.value;
-    final currentMailboxState = currentEmailState ?? _currentMailboxState;
-    if (_session != null && _accountId != null && currentMailboxState != null) {
-      refreshMailboxChanges(_session, _accountId, currentMailboxState);
+    final mailboxState = newMailboxState ?? currentMailboxState;
+    if (_session != null && _accountId != null && mailboxState != null) {
+      refreshMailboxChanges(_session, _accountId, mailboxState);
    }
  }

@@ -2,67 +2,54 @@ import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/state/success.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
-import 'package:core/presentation/views/button/icon_button_web.dart';
 import 'package:core/presentation/views/list/tree_view.dart';
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
 import 'package:get/get.dart';
 import 'package:model/mailbox/expand_mode.dart';
 import 'package:tmail_ui_user/features/base/mixin/app_loader_mixin.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/manage_account/presentation/base/setting_detail_view_builder.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/state/mailbox_visibility_state.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/utils/mailbox_visibility_utils.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folder_tile_builder.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_header_widget.dart';
-import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

-class MailboxVisibilityView extends GetWidget<MailboxVisibilityController> with AppLoaderMixin {
+class MailboxVisibilityView extends GetWidget<MailboxVisibilityController>
+  with AppLoaderMixin,
+    MailboxWidgetMixin {
+
  final _responsiveUtils = Get.find<ResponsiveUtils>();
  final _imagePaths = Get.find<ImagePaths>();

  MailboxVisibilityView({Key? key}) : super(key: key);
+
  @override
  Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: _responsiveUtils.isWebDesktop(context)
-          ? AppColor.colorBgDesktop
-          : Colors.white,
-      body: Container(
-        width: double.infinity,
-        margin: _responsiveUtils.isWebDesktop(context)
-            ? const EdgeInsets.all(24)
-            : EdgeInsets.symmetric(horizontal: SettingsUtils.getHorizontalPadding(context, _responsiveUtils)),
-        color: _responsiveUtils.isWebDesktop(context) ? null : Colors.white,
-        decoration: _responsiveUtils.isWebDesktop(context)
-            ? BoxDecoration(
-                borderRadius: BorderRadius.circular(20),
-                border: Border.all(color: AppColor.colorBorderBodyThread, width: 1),
-                color: Colors.white)
-            : null,
-        child: ClipRRect(
-          borderRadius: BorderRadius.circular(
-              _responsiveUtils.isWebDesktop(context) ? 20 : 0),
-          child: Padding(
-            padding: const EdgeInsets.only(top: 24),
-            child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  if (_responsiveUtils.isWebDesktop(context))...[
-                    const MailboxVisibilityHeaderWidget(),
-                    const Padding(
-                      padding:  EdgeInsets.symmetric(vertical: 16),
-                      child:  Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
-                    ),
-                  ],
-                  _buildLoadingView(),
-                  Expanded(child: _buildListMailbox(context)),
-                ]
-            ),
-          ),
-        ),
+    return SettingDetailViewBuilder(
+      responsiveUtils: _responsiveUtils,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          if (_responsiveUtils.isWebDesktop(context))
+            ...[
+              const SizedBox(height: 24),
+              const MailboxVisibilityHeaderWidget(),
+              const SizedBox(height: 16),
+              const Divider(
+                color: AppColor.colorDividerMailbox,
+                height: 0.5,
+                thickness: 0.2
+              )
+            ],
+          _buildLoadingView(),
+          Expanded(child: Padding(
+            padding: MailboxVisibilityUtils.getPaddingListView(context, _responsiveUtils),
+            child: _buildListMailbox(context)
+          ))
+        ]
      ),
    );
  }
@@ -71,101 +58,69 @@ class MailboxVisibilityView extends GetWidget<MailboxVisibilityController> with
    return Obx(() => controller.viewState.value.fold(
      (failure) => const SizedBox.shrink(),
      (success) {
-        if (success is LoadingState) {
-          return const Center(
-            child: Padding(
-                padding: EdgeInsets.only(top: 16),
-                child: SizedBox(
-                  height: 24,
-                  width: 24,
-                  child: CupertinoActivityIndicator(
-                    color: AppColor.colorTextButton,
-                  ),
-                )),
-          );
-        } else if (success is LoadingBuildTreeMailboxVisibility) {
-          return const Center(
-            child: Padding(
-                padding: EdgeInsets.only(top: 16),
-                child: SizedBox(
-                  height: 24,
-                  width: 24,
-                  child: CupertinoActivityIndicator(
-                    color: AppColor.colorTextButton,
-                  ),
-                )),
+        if (success is LoadingState || success is LoadingBuildTreeMailboxVisibility) {
+          return Padding(
+            padding: const EdgeInsets.only(top: 16),
+            child: loadingWidget
          );
+        } else {
+          return const SizedBox.shrink();
        }
-        return const SizedBox.shrink();
-      }));
+      }
+    ));
  }

  Widget _buildListMailbox(BuildContext context) {
    return SingleChildScrollView(
-        controller: controller.mailboxListScrollController,
-        key: const PageStorageKey('mailbox_list'),
-        physics: const ClampingScrollPhysics(),
-        child: Column(children: [
-          Obx(() => controller.defaultMailboxIsNotEmpty
-              ? _buildMailboxCategory(context, MailboxCategories.exchange, controller.defaultRootNode)
-              : const SizedBox.shrink()),
-          const SizedBox(height: 13),
-          Obx(() => controller.teamMailboxesIsNotEmpty
-              ? _buildMailboxCategory(context, MailboxCategories.teamMailboxes, controller.teamMailboxesRootNode)
-              : const SizedBox.shrink()),
-          const SizedBox(height: 8),
-          Obx(() => controller.personalMailboxIsNotEmpty
-              ? _buildMailboxCategory(context, MailboxCategories.personalMailboxes, controller.personalRootNode)
-              : const SizedBox.shrink()),
-
-        ])
+      key: const PageStorageKey('mailbox_list'),
+      physics: const ClampingScrollPhysics(),
+      child: Column(children: [
+        Obx(() => controller.defaultMailboxIsNotEmpty
+          ? _buildMailboxCategory(
+              context,
+              MailboxCategories.exchange,
+              controller.defaultRootNode)
+          : const SizedBox.shrink()
+        ),
+        Obx(() => controller.teamMailboxesIsNotEmpty
+          ? _buildMailboxCategory(
+              context,
+              MailboxCategories.teamMailboxes,
+              controller.teamMailboxesRootNode)
+          : const SizedBox.shrink()
+        ),
+        Obx(() => controller.personalMailboxIsNotEmpty
+          ? _buildMailboxCategory(
+              context,
+              MailboxCategories.personalMailboxes,
+              controller.personalRootNode)
+          : const SizedBox.shrink()
+        )
+      ])
    );
  }

-  Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) {
-    return Padding(
-        padding: const  EdgeInsets.only(top: 10),
-        child: Row(children: [
-          buildIconWeb(
-              splashRadius: 5,
-              iconPadding: EdgeInsets.zero,
-              minSize: 12,
-              icon: SvgPicture.asset(
-                  categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
-                      ? _imagePaths.icExpandFolder
-                      : _imagePaths.icCollapseFolder,
-                  color: AppColor.primaryColor,
-                  fit: BoxFit.fill),
-              tooltip: AppLocalizations.of(context).collapse,
-              onTap: () => controller.toggleMailboxCategories(categories)),
-          Expanded(child: Text(categories.getTitle(context),
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-              style: const TextStyle(
-                  fontSize: 17,
-                  color: Colors.black,
-                  fontWeight: FontWeight.bold))),
-        ]));
-  }
-
  Widget _buildMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) {
    if (categories == MailboxCategories.exchange) {
-      return Padding(
-        padding: EdgeInsets.symmetric(horizontal: _responsiveUtils.isDesktop(context) ? 24 : 0),
-        child: _buildBodyMailboxCategory(context, categories, mailboxNode),
-      );
+      return _buildBodyMailboxCategory(context, categories, mailboxNode);
    }
-    return Padding(
-      padding: EdgeInsets.symmetric(horizontal: _responsiveUtils.isDesktop(context) ? 24 : 0),
-      child: Column(children: [
-        _buildHeaderMailboxCategory(context, categories),
-        AnimatedContainer(
-            duration: const Duration(milliseconds: 400),
-            child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
-                ? _buildBodyMailboxCategory(context, categories, mailboxNode)
-                : const Offstage())
-      ]),
-    );
+    return Column(children: [
+      buildHeaderMailboxCategory(
+        context,
+        _responsiveUtils,
+        _imagePaths,
+        categories,
+        controller,
+        padding: const EdgeInsets.all(8),
+        toggleMailboxCategories: controller.toggleMailboxCategories
+      ),
+      AnimatedContainer(
+        duration: const Duration(milliseconds: 400),
+        child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
+          ? _buildBodyMailboxCategory(context, categories, mailboxNode)
+          : const Offstage()
+      )
+    ]);
  }

  Widget _buildBodyMailboxCategory(
@@ -173,40 +128,36 @@ class MailboxVisibilityView extends GetWidget<MailboxVisibilityController> with
    MailboxCategories categories,
    MailboxNode mailboxNode,
  ) {
-    final lastNode = mailboxNode.childrenItems?.last;
-
-    return Container(
-        padding: EdgeInsets.only(
-            right: _responsiveUtils.isDesktop(context) ? 0 : 12,
-            left: _responsiveUtils.isDesktop(context) ? 0 : 12),
-        child: TreeView(
-            key: Key('${categories.keyValue}_mailbox_list'),
-            children: _buildListChildTileWidget(
-                context,
-                mailboxNode,
-                lastNode: lastNode)));
+    return TreeView(
+      key: Key('${categories.keyValue}_mailbox_list'),
+      children: _buildListChildTileWidget(context, mailboxNode)
+    );
  }

  List<Widget> _buildListChildTileWidget(
    BuildContext context,
    MailboxNode parentNode,
-    {MailboxNode? lastNode}
  ) {
    return parentNode.childrenItems
-        ?.map((mailboxNode) => mailboxNode.hasChildren()
-          ? TreeViewChild(
-              context,
-              key: const Key('children_tree_mailbox_child'),
-              isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
-              parent: (MailBoxVisibilityFolderTileBuilder(context, _imagePaths, mailboxNode, lastNode: lastNode)
-                ..addOnExpandFolderActionClick((mailboxNode) => controller.toggleMailboxFolder(mailboxNode))
-                ..addOnSubscribeMailboxActionClick((mailboxNode) => controller.subscribeMailbox(mailboxNode)))
-                .build(context),
-              children: _buildListChildTileWidget(context, mailboxNode)
-          ).build()
-          : (MailBoxVisibilityFolderTileBuilder(context, _imagePaths, mailboxNode, lastNode: lastNode)
-            ..addOnExpandFolderActionClick((mailboxNode) => controller.toggleMailboxFolder(mailboxNode))
-            ..addOnSubscribeMailboxActionClick((mailboxNode) => controller.subscribeMailbox(mailboxNode)))
-            .build(context)).toList() ?? <Widget>[];
+      ?.map((mailboxNode) => mailboxNode.hasChildren()
+        ? TreeViewChild(
+            context,
+            key: const Key('children_tree_mailbox_child'),
+            isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
+            paddingChild: const EdgeInsets.only(left: 10),
+            parent: MailBoxVisibilityFolderTileBuilder(
+              _imagePaths,
+              mailboxNode,
+              onClickExpandMailboxNodeAction: controller.toggleMailboxFolder,
+              onClickSubscribeMailboxAction: controller.subscribeMailbox
+            ),
+            children: _buildListChildTileWidget(context, mailboxNode)).build()
+        : MailBoxVisibilityFolderTileBuilder(
+            _imagePaths,
+            mailboxNode,
+            onClickExpandMailboxNodeAction: controller.toggleMailboxFolder,
+            onClickSubscribeMailboxAction: controller.subscribeMailbox
+          ))
+      .toList() ?? <Widget>[];
  }
 }
@@ -0,0 +1,14 @@
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:flutter/material.dart';
+
+class MailboxVisibilityUtils {
+  static EdgeInsets getPaddingListView(BuildContext context, ResponsiveUtils responsiveUtils) {
+    if (responsiveUtils.isWebDesktop(context)) {
+      return const EdgeInsets.all(8);
+    } else if (responsiveUtils.isMobile(context) || responsiveUtils.isLandscapeMobile(context)) {
+      return const EdgeInsets.symmetric(horizontal: 16, vertical: 8);
+    } else {
+      return const EdgeInsets.symmetric(horizontal: 32, vertical: 8);
+    }
+  }
+}
@@ -1,190 +1,77 @@
-import 'package:core/core.dart';
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/style_utils.dart';
+import 'package:core/presentation/views/button/icon_button_web.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:model/mailbox/expand_mode.dart';
 import 'package:tmail_ui_user/features/mailbox/domain/extensions/presentation_mailbox_extension.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_method_action_define.dart';
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

-class MailBoxVisibilityFolderTileBuilder {
+class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
+
  final MailboxNode _mailboxNode;
-  final BuildContext _context;
  final ImagePaths _imagePaths;
-  final MailboxNode? lastNode;
-  final MailboxActions? mailboxActions;
+  final OnClickExpandMailboxNodeAction? onClickExpandMailboxNodeAction;
+  final OnClickSubscribeMailboxAction? onClickSubscribeMailboxAction;

-  OnClickExpandMailboxNodeAction? _onClickExpandMailboxNodeAction;
-  OnClickSubscribeMailboxAction? _onClickSubscribeMailboxAction;
-  bool isHoverItem = false;
-
-  MailBoxVisibilityFolderTileBuilder(
-    this._context,
+  const MailBoxVisibilityFolderTileBuilder(
    this._imagePaths,
    this._mailboxNode, {
-    this.lastNode,
-    this.mailboxActions,
-  });
+    Key? key,
+    this.onClickExpandMailboxNodeAction,
+    this.onClickSubscribeMailboxAction
+  }) : super(key: key);

-  void addOnExpandFolderActionClick(OnClickExpandMailboxNodeAction onClickExpandMailboxNodeAction) {
-    _onClickExpandMailboxNodeAction = onClickExpandMailboxNodeAction;
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.white,
+      padding: const EdgeInsets.all(8),
+      child: Row(
+        children: [
+          const SizedBox(width: 8),
+          _buildLeadingMailboxItem(context),
+          Expanded(child: _buildTitleFolderItem()),
+          if (!_mailboxNode.item.hasRole() || !_mailboxNode.item.isSubscribedMailbox)
+            _buildSubscribeButton(context),
+          const SizedBox(width: 32),
+        ]
+      ),
+    );
  }

-  void addOnSubscribeMailboxActionClick(OnClickSubscribeMailboxAction onClickSubscribeMailboxAction) {
-    _onClickSubscribeMailboxAction = onClickSubscribeMailboxAction;
-  }
-
-  Widget build(BuildContext context) => _buildMailboxItem(context);
-
-  Widget _buildMailboxItem(BuildContext context) {
-    if (BuildUtils.isWeb) {
-      return Theme(
-        data: ThemeData(
-          splashColor: Colors.transparent,
-          highlightColor: Colors.transparent),
-        child: StatefulBuilder(
-          builder: (BuildContext context, StateSetter setState) {
-            return InkWell(
-              onTap: () {},
-              onHover: (value) => setState(() => isHoverItem = value),
-              child: Container(
-                decoration: BoxDecoration(
-                  borderRadius: BorderRadius.circular(10),
-                  color: backgroundColorItem),
-                padding: EdgeInsets.only(
-                  left: _mailboxNode.item.hasRole() ? 0 : 4,
-                  right: 4,
-                  top: 8,
-                  bottom: 8),
-                margin: const EdgeInsets.only(bottom: 4),
-                  child: Row(
-                    children: [
-                      _buildLeadingMailboxItem(),
-                      const SizedBox(width: 4),
-                       Expanded(child: _buildTitleFolderItem()),
-                      if (!_mailboxNode.item.hasRole() || !_mailboxNode.item.isSubscribedMailbox)
-                        _buildSubscribeMailboxItem(context, _mailboxNode),
-                      const SizedBox(width: 32),
-                      ]),
-                ),
-              );
-            }),
-      );
-    } else {
-      return ClipRRect(
-        borderRadius: const BorderRadius.all(Radius.circular(14)),
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Container(
-              padding: EdgeInsets.symmetric(
-              vertical: _mailboxNode.hasChildren() ? 8 : 15),
-                child: Row(
-                  crossAxisAlignment:
-                    _mailboxNode.item.isTeamMailboxes
-                      ? CrossAxisAlignment.start
-                      : CrossAxisAlignment.center,
-                  children: [
-                    if (_mailboxNode.item.isTeamMailboxes)
-                      const SizedBox(width: 16),
-                    _buildLeadingMailboxItem(),
-                    const SizedBox(width: 8),
-                    Expanded(child: _buildTitleFolderItem()),
-                    if (!_mailboxNode.item.hasRole() || !_mailboxNode.item.isSubscribedMailbox)
-                      _buildSubscribeMailboxItem(context, _mailboxNode),
-                  ]),
-                ),
-          ]));
-    }
-  }
-
-  Widget _buildLeadingMailboxItem() {
-    if (BuildUtils.isWeb) {
-      return Row(mainAxisSize: MainAxisSize.min, children: [
+  Widget _buildLeadingMailboxItem(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
        if (_mailboxNode.hasChildren() && _mailboxNode.item.isPersonal)
-          Row(
-            children: [
-              const SizedBox(width: 8),
-              buildIconWeb(
-                icon: SvgPicture.asset(
-                  _mailboxNode.expandMode == ExpandMode.EXPAND
-                    ? _imagePaths.icExpandFolder
-                    : _imagePaths.icCollapseFolder,
-                  color: _mailboxNode.expandMode == ExpandMode.EXPAND
-                    ? AppColor.colorExpandMailbox
-                    : AppColor.colorCollapseMailbox,
-                  fit: BoxFit.fill),
-                  minSize: 12,
-                  splashRadius: 10,
-                  iconPadding: EdgeInsets.zero,
-                  tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
-                    ? AppLocalizations.of(_context).collapse
-                    : AppLocalizations.of(_context).expand,
-                  onTap: () => _onClickExpandMailboxNodeAction?.call(_mailboxNode)),
-            ],
-          )
-        else
-          SizedBox(width: _mailboxNode.item.isPersonal ? 32 : 24),
-        Transform(
-          transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
-          child: _buildLeadingIconTeamMailboxes()),
-      ]);
-    } else {
-      return Row(mainAxisSize: MainAxisSize.min, children: [
-        if (_mailboxNode.hasChildren())
-          Row(
-            children: [
-              SizedBox(width: _mailboxNode.item.hasRole() ? 0 : 0),
-              if (!_mailboxNode.item.isTeamMailboxes)
-                buildIconWeb(
-                  icon: SvgPicture.asset(
-                    _mailboxNode.expandMode == ExpandMode.EXPAND
-                      ? _imagePaths.icExpandFolder
-                      : _imagePaths.icCollapseFolder,
-                    color: _mailboxNode.expandMode == ExpandMode.EXPAND
-                      ? AppColor.colorExpandMailbox
-                      : AppColor.colorCollapseMailbox,
-                    fit: BoxFit.fill),
-                    minSize: 12,
-                    splashRadius: 10,
-                    iconPadding: EdgeInsets.zero,
-                    tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
-                      ? AppLocalizations.of(_context).collapse
-                      : AppLocalizations.of(_context).expand,
-                    onTap: () => _onClickExpandMailboxNodeAction?.call(_mailboxNode)),
-            ],
+          buildIconWeb(
+            splashRadius: 12,
+            iconPadding: EdgeInsets.zero,
+            minSize: 12,
+            icon: SvgPicture.asset(
+              _mailboxNode.expandMode == ExpandMode.EXPAND
+                ? _imagePaths.icExpandFolder
+                : _imagePaths.icCollapseFolder,
+              color: _mailboxNode.item.isSubscribedMailbox
+                ? AppColor.primaryColor
+                : AppColor.colorIconUnSubscribedMailbox,
+              fit: BoxFit.fill
+            ),
+            tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
+              ? AppLocalizations.of(context).collapse
+              : AppLocalizations.of(context).expand,
+            onTap: () => onClickExpandMailboxNodeAction?.call(_mailboxNode)
          )
        else
          const SizedBox(width: 24),
-        _buildLeadingIconTeamMailboxes(),
-      ]);
-    }
-  }
-
-  Widget _buildLeadingIconTeamMailboxes() {
-    if (!_mailboxNode.item.isPersonal) {
-      return _buildLeadingIconForChildOfTeamMailboxes();
-    } else {
-      return _buildMailboxIcon();
-    }
-  }
-
-  Widget _buildLeadingIconForChildOfTeamMailboxes() {
-    if (_mailboxNode.item.hasParentId()) {
-      return _buildMailboxIcon();
-    } else {
-      return const SizedBox();
-    }
-  }
-
-  Color get backgroundColorItem {
-    if (BuildUtils.isWeb && isHoverItem) {
-      return AppColor.colorBgMailboxSelected;
-    } else {
-      return Colors.white;
-    }
+        if (!_mailboxNode.item.isTeamMailboxes)
+          _buildMailboxIcon(),
+      ]
+    );
  }

  Widget _buildTitleFolderItem() {
@@ -199,8 +86,8 @@ class MailBoxVisibilityFolderTileBuilder {
          style: TextStyle(
            fontSize: _mailboxNode.item.isTeamMailboxes ? 16 : 15,
            color: _mailboxNode.item.isSubscribedMailbox
-              ? _getColorTextTitleFolderItem()
-              : AppColor.colorItemAlreadySelected,
+              ? Colors.black
+              : AppColor.colorTitleAUnSubscribedMailbox,
            fontWeight: _mailboxNode.item.isTeamMailboxes
              ? FontWeight.w500
              : FontWeight.normal),
@@ -214,42 +101,49 @@ class MailBoxVisibilityFolderTileBuilder {
            style: const TextStyle(
              fontSize: 13,
              color: AppColor.colorEmailAddressFull,
-              fontWeight: FontWeight.w400),
+              fontWeight: FontWeight.normal),
          ),
      ],
    );
  }

-  Color _getColorTextTitleFolderItem() {
-    if (_mailboxNode.item.isTeamMailboxes) {
-      return Colors.black;
-    } else {
-      return AppColor.colorNameEmail;
-    }
-  }
-
  Widget _buildMailboxIcon() {
-    return SvgPicture.asset(_mailboxNode.item.getMailboxIcon(_imagePaths),
-        width: BuildUtils.isWeb ? 20 : 24,
-        height: BuildUtils.isWeb ? 20 : 24,
-        color: (!_mailboxNode.item.isSubscribedMailbox)
-          ? AppColor.colorDeleteContactIcon
-          : null,
-        fit: BoxFit.fill);
+    return Padding(
+      padding: const EdgeInsets.only(right: 8),
+      child: SvgPicture.asset(
+        _mailboxNode.item.getMailboxIcon(_imagePaths),
+        width: 20,
+        height: 20,
+        color: _mailboxNode.item.isSubscribedMailbox
+          ? AppColor.primaryColor
+          : AppColor.colorIconUnSubscribedMailbox,
+        fit: BoxFit.fill
+      ),
+    );
  }

-  Widget _buildSubscribeMailboxItem(BuildContext context, MailboxNode _mailboxNode) {
-    return InkWell(
-      onTap: () => _onClickSubscribeMailboxAction?.call(_mailboxNode),
-      child: Text(
-        _mailboxNode.item.isSubscribedMailbox
-          ? AppLocalizations.of(context).hide
-          : AppLocalizations.of(context).show,
-        maxLines: 1,
-        softWrap: CommonTextStyle.defaultSoftWrap,
-        overflow: CommonTextStyle.defaultTextOverFlow,
-        style: const TextStyle(
-          fontSize: 15, color: Colors.blue, fontWeight: FontWeight.normal),
+  Widget _buildSubscribeButton(BuildContext context) {
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        onTap: () => onClickSubscribeMailboxAction?.call(_mailboxNode),
+        borderRadius: const BorderRadius.all(Radius.circular(5)),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
+          child: Text(
+            _mailboxNode.item.isSubscribedMailbox
+              ? AppLocalizations.of(context).hide
+              : AppLocalizations.of(context).show,
+            maxLines: 1,
+            softWrap: CommonTextStyle.defaultSoftWrap,
+            overflow: CommonTextStyle.defaultTextOverFlow,
+            style: const TextStyle(
+              fontSize: 15,
+              color: AppColor.primaryColor,
+              fontWeight: FontWeight.normal
+            )
+          ),
+        ),
      ),
    );
  }
@@ -47,8 +47,6 @@ class ManageAccountDashBoardController extends ReloadableController {
  GetAllVacationInteractor? _getAllVacationInteractor;
  UpdateVacationInteractor? _updateVacationInteractor;

-  final menuDrawerKey = GlobalKey<ScaffoldState>(debugLabel: 'manage_account');
-
  final appInformation = Rxn<PackageInfo>();
  final userProfile = Rxn<UserProfile>();
  final accountId = Rxn<AccountId>();
@@ -173,16 +171,6 @@ class ManageAccountDashBoardController extends ReloadableController {
    vacationResponse.value = newVacation;
  }

-  void openMenuDrawer() {
-    menuDrawerKey.currentState?.openDrawer();
-  }
-
-  void closeMenuDrawer() {
-    menuDrawerKey.currentState?.openEndDrawer();
-  }
-
-  bool get isMenuDrawerOpen => menuDrawerKey.currentState?.isDrawerOpen == true;
-
  void selectAccountMenuItem(AccountMenuItem newAccountMenuItem) {
    clearInputFormView();
    if (newAccountMenuItem == AccountMenuItem.emailRules) {
@@ -195,9 +183,6 @@ class ManageAccountDashBoardController extends ReloadableController {
      MailboxVisibilityBindings().dependencies();
    }
    accountMenuItemSelected.value = newAccountMenuItem;
-    if (isMenuDrawerOpen) {
-      closeMenuDrawer();
-    }
  }

  void clearInputFormView() {
@@ -233,9 +218,6 @@ class ManageAccountDashBoardController extends ReloadableController {
  }

  void backToMailboxDashBoard(BuildContext context) {
-    if (isMenuDrawerOpen) {
-      closeMenuDrawer();
-    }
    if (canBack(context)) {
      popBack(result: vacationResponse.value);
    } else {
@@ -34,14 +34,7 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl

  @override
  Widget build(BuildContext context) {
-    if (controller.isMenuDrawerOpen && _responsiveUtils.isWebDesktop(context)) {
-      WidgetsBinding.instance.addPostFrameCallback((_) {
-        controller.closeMenuDrawer();
-      });
-    }
-
    return Scaffold(
-      key: controller.menuDrawerKey,
      backgroundColor: Colors.white,
      drawerEnableOpenDragGesture: false,
      body: GestureDetector(
@@ -33,57 +33,52 @@ class SettingsView extends GetWidget<SettingsController> {

  @override
  Widget build(BuildContext context) {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        SafeArea(
-          bottom: false,
-          child: SizedBox.fromSize(
-            size: const Size.fromHeight(52),
-            child: Padding(
-              padding: SettingsUtils.getPaddingAppBar(context, _responsiveUtils),
-              child: _buildAppbar(context))),
-        ),
-        const Divider(color: AppColor.colorDividerComposer, height: 1),
-        SafeArea(
-          bottom: false,
-          top: false,
-          child: Obx(() {
-            if (controller.manageAccountDashboardController.vacationResponse.value?.vacationResponderIsValid == true) {
-              return VacationNotificationMessageWidget(
+    return Container(
+      color: Colors.white,
+      child: SafeArea(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            SizedBox.fromSize(
+              size: const Size.fromHeight(52),
+              child: Padding(
+                padding: SettingsUtils.getPaddingAppBar(context, _responsiveUtils),
+                child: _buildAppbar(context))),
+            const Divider(color: AppColor.colorDividerComposer, height: 1),
+            Obx(() {
+              if (controller.manageAccountDashboardController.vacationResponse.value?.vacationResponderIsValid == true) {
+                return VacationNotificationMessageWidget(
+                    margin: const EdgeInsets.only(
+                        left: BuildUtils.isWeb ? 24 : 16,
+                        right: BuildUtils.isWeb ? 24 : 16,
+                        top: 16),
+                    fromAccountDashBoard: true,
+                    vacationResponse: controller.manageAccountDashboardController.vacationResponse.value!,
+                    actionEndNow: () => controller.manageAccountDashboardController.disableVacationResponder());
+              } else if ((controller.manageAccountDashboardController.vacationResponse.value?.vacationResponderIsWaiting == true
+                  || controller.manageAccountDashboardController.vacationResponse.value?.vacationResponderIsStopped == true)
+                  && controller.manageAccountDashboardController.inVacationSettings()) {
+                return VacationNotificationMessageWidget(
                  margin: const EdgeInsets.only(
-                      left: BuildUtils.isWeb ? 24 : 16,
-                      right: BuildUtils.isWeb ? 24 : 16,
-                      top: 16),
+                    left: BuildUtils.isWeb ? 24 : 16,
+                    right: BuildUtils.isWeb ? 24 : 16,
+                    top: 16),
                  fromAccountDashBoard: true,
                  vacationResponse: controller.manageAccountDashboardController.vacationResponse.value!,
-                  actionEndNow: () => controller.manageAccountDashboardController.disableVacationResponder());
-            } else if ((controller.manageAccountDashboardController.vacationResponse.value?.vacationResponderIsWaiting == true
-                || controller.manageAccountDashboardController.vacationResponse.value?.vacationResponderIsStopped == true)
-                && controller.manageAccountDashboardController.inVacationSettings()) {
-              return VacationNotificationMessageWidget(
-                margin: const EdgeInsets.only(
-                  left: BuildUtils.isWeb ? 24 : 16,
-                  right: BuildUtils.isWeb ? 24 : 16,
-                  top: 16),
-                fromAccountDashBoard: true,
-                vacationResponse: controller.manageAccountDashboardController.vacationResponse.value!,
-                padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
-                leadingIcon: const Padding(
-                  padding: EdgeInsets.only(right: 16),
-                  child: Icon(Icons.timer, size: 20),
-                )
-              );
-            } else {
-              return const SizedBox.shrink();
-            }
-          })
+                  padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
+                  leadingIcon: const Padding(
+                    padding: EdgeInsets.only(right: 16),
+                    child: Icon(Icons.timer, size: 20),
+                  )
+                );
+              } else {
+                return const SizedBox.shrink();
+              }
+            }),
+            Expanded(child: _bodySettingsScreen())
+          ]
        ),
-        Expanded(child: SafeArea(
-          top: false,
-          child: _bodySettingsScreen()
-        ))
-      ]
+      ),
    );
  }

@@ -107,14 +107,6 @@ class SettingsUtils {
    }
  }

-  static EdgeInsets getPaddingHeaderWidgetForwarding(BuildContext context, ResponsiveUtils responsiveUtils) {
-    if (responsiveUtils.isPortraitMobile(context)) {
-      return const EdgeInsets.only(left: 16, right: 16);
-    } else {
-      return const EdgeInsets.all(12);
-    }
-  }
-
  static EdgeInsets getPaddingKeepLocalSwitchButtonForwarding(BuildContext context, ResponsiveUtils responsiveUtils) {
    if (responsiveUtils.isPortraitMobile(context)) {
      return const EdgeInsets.symmetric(horizontal: 18, vertical: 14);
@@ -142,4 +134,12 @@ class SettingsUtils {
      return EdgeInsets.zero;
    }
  }
+
+  static EdgeInsets getMarginSettingDetailsView(BuildContext context, ResponsiveUtils responsiveUtils) {
+    if (responsiveUtils.isWebDesktop(context)) {
+      return const EdgeInsets.all(16);
+    } else {
+      return EdgeInsets.zero;
+    }
+  }
 }
@@ -4,7 +4,7 @@ import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
-import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/base/setting_detail_view_builder.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/profiles/identities/identities_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/profiles/profiles_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/profiles/widgets/profiles_header_widget.dart';
@@ -18,33 +18,27 @@ class ProfilesView extends GetWidget<ProfilesController> {

  @override
  Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: SettingsUtils.getBackgroundColor(context, _responsiveUtils),
-      body: Container(
-        width: double.infinity,
-        height: double.infinity,
-        color: SettingsUtils.getContentBackgroundColor(context, _responsiveUtils),
-        decoration: SettingsUtils.getBoxDecorationForContent(context, _responsiveUtils),
-        margin: SettingsUtils.getMarginViewForForwardSettingDetails(context, _responsiveUtils),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            if (_responsiveUtils.isWebDesktop(context))
-              ...[
-                ProfilesHeaderWidget(imagePaths: _imagePaths, responsiveUtils: _responsiveUtils),
-                Container(height: 1, color: AppColor.colorDividerHeaderSetting)
-              ],
-            Expanded(child: SingleChildScrollView(
-              physics: const ClampingScrollPhysics(),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  IdentitiesView()
-                ])
-            ))
-          ],
-        ),
-      ),
+    return SettingDetailViewBuilder(
+      responsiveUtils: _responsiveUtils,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          if (_responsiveUtils.isWebDesktop(context))
+            ...[
+              ProfilesHeaderWidget(imagePaths: _imagePaths, responsiveUtils: _responsiveUtils),
+              Container(height: 1, color: AppColor.colorDividerHeaderSetting)
+            ],
+          Expanded(child: SingleChildScrollView(
+            physics: const ClampingScrollPhysics(),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                IdentitiesView()
+              ]
+            )
+          ))
+        ]
+      )
    );
  }
 }
@@ -196,7 +196,7 @@ class SearchMailboxView extends GetWidget<SearchMailboxController>
  }

  List<ContextMenuItemMailboxAction> _generateListContextMenuItemAction(PresentationMailbox mailbox) {
-    final mailboxActionsSupported = mailbox.supportedSubscribe
+    final mailboxActionsSupported = mailbox.isSubscribedMailbox
      ? _listActionForMailboxSubscribed(mailbox)
      : _listActionForMailboxUnsubscribed(mailbox);

@@ -188,7 +188,9 @@ class _MailboxSearchedItemBuilderState extends State<MailboxSearchedItemBuilder>
  }

  void _onLongPressMailboxAction() {
-    widget.onLongPressMailboxAction?.call(widget._presentationMailbox);
+    if (widget.listPopupMenuItemAction?.isNotEmpty == true) {
+      widget.onLongPressMailboxAction?.call(widget._presentationMailbox);
+    }
  }

  Widget _buildMailboxIcon() {
@@ -4,7 +4,7 @@ import 'package:model/mailbox/presentation_mailbox.dart';
 extension ListPresentationMailboxExtension on List<PresentationMailbox> {

  List<PresentationMailbox> get listSubscribedMailboxes =>
-    where((mailbox) => mailbox.supportedSubscribe).toList();
+    where((mailbox) => mailbox.isSubscribedMailbox).toList();

  List<PresentationMailbox> get listPersonalMailboxes =>
    where((mailbox) => mailbox.isPersonal).toList();
@@ -103,10 +103,8 @@ class PresentationMailbox with EquatableMixin {
    (namespace?.value.indexOf('[') ?? 0) + 1,
    namespace?.value.indexOf(']'));

-  bool get supportedSubscribe => isSubscribed?.value == true;
-
  bool get isSupportedDisableMailbox {
-    if (!supportedSubscribe) {
+    if (!isSubscribedMailbox) {
      return false;
    }
    if (isPersonal) {
@@ -117,7 +115,7 @@ class PresentationMailbox with EquatableMixin {
  }

  bool get isSupportedEnableMailbox {
-    if (supportedSubscribe) {
+    if (isSubscribedMailbox) {
      return false;
    }
    if (isPersonal) {