TF-1414: [Presentation] Create new UI and implement get AllMailBox and Subscribe Mailbox

assets/images/ic_mailbox_visibility.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.60906 2.89703C7.44096 2.85667 7.27015 2.85713 7.1345 2.85749L7.09804 2.85756L5.61336 2.85756C5.03838 2.85755 4.56384 2.85754 4.17727 2.88913C3.77577 2.92193 3.4067 2.99233 3.06003 3.16897C2.52242 3.44289 2.08534 3.87998 1.81141 4.41759C1.63478 4.76425 1.56437 5.13333 1.53157 5.53483C1.49999 5.92139 1.49999 6.39593 1.5 6.97089V13.0299C1.49999 13.6049 1.49999 14.0794 1.53157 14.466C1.56437 14.8675 1.63478 15.2366 1.81141 15.5832C2.08534 16.1209 2.52242 16.5579 3.06003 16.8319C3.4067 17.0085 3.77577 17.0789 4.17727 17.1117C4.56383 17.1433 5.03837 17.1433 5.61334 17.1433H7.92857C8.32306 17.1433 8.64286 16.8235 8.64286 16.429C8.64286 16.0345 8.32306 15.7147 7.92857 15.7147H5.64286C5.03102 15.7147 4.61509 15.7141 4.2936 15.6879C3.98045 15.6623 3.8203 15.6159 3.70859 15.559C3.43978 15.422 3.22124 15.2035 3.08428 14.9347C3.02736 14.823 2.98098 14.6628 2.9554 14.3497C2.92913 14.0282 2.92857 13.6123 2.92857 13.0004V9.28612H17.2143V10.0003C17.2143 10.3948 17.5341 10.7146 17.9286 10.7146C18.3231 10.7146 18.6429 10.3948 18.6429 10.0003V8.75661C18.6429 8.18164 18.6429 7.7071 18.6113 7.32054C18.5785 6.91904 18.5081 6.54997 18.3314 6.2033C18.0575 5.66569 17.6204 5.22861 17.0828 4.95468C16.7362 4.77805 16.3671 4.70764 15.9656 4.67484C15.579 4.64326 15.1045 4.64326 14.5295 4.64327L9.83053 4.64327C9.73696 4.64327 9.69026 4.6431 9.65633 4.64155L9.65377 4.64143L9.65188 4.6397C9.62679 4.61681 9.59365 4.58391 9.52748 4.51775L8.41124 3.4015L8.38551 3.37568C8.28984 3.2795 8.16939 3.1584 8.02199 3.06807C7.89417 2.98975 7.75482 2.93203 7.60906 2.89703ZM7.09804 4.28613C7.19161 4.28613 7.23832 4.2863 7.27224 4.28785L7.2748 4.28797L7.2767 4.2897C7.30178 4.31259 7.33492 4.34549 7.40109 4.41166L8.51733 5.5279L8.54306 5.55373C8.63873 5.6499 8.75919 5.77101 8.90658 5.86133C9.0344 5.93966 9.17375 5.99738 9.31952 6.03237C9.48761 6.07273 9.65842 6.07227 9.79407 6.07191L9.83053 6.07184H14.5C15.1118 6.07184 15.5278 6.0724 15.8493 6.09867C16.1624 6.12425 16.3226 6.17063 16.4343 6.22755C16.7031 6.36451 16.9216 6.58306 17.0586 6.85186C17.1155 6.96357 17.1619 7.12372 17.1875 7.43687C17.1976 7.56106 17.2039 7.69934 17.2078 7.85755H2.92857V7.00042C2.92857 6.38857 2.92913 5.97265 2.9554 5.65116C2.98098 5.338 3.02736 5.17786 3.08428 5.06614C3.22124 4.79734 3.43978 4.5788 3.70859 4.44183C3.8203 4.38491 3.98045 4.33854 4.2936 4.31295C4.61509 4.28669 5.03102 4.28613 5.64286 4.28613H7.09804Z" fill="#007AFF"/>
+<path d="M15.3 14.4992C15.3 15.2172 14.718 15.7992 14 15.7992C13.282 15.7992 12.7 15.2172 12.7 14.4992C12.7 13.7812 13.282 13.1992 14 13.1992C14.718 13.1992 15.3 13.7812 15.3 14.4992Z" fill="#007AFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5 14.4992C18.5 15.9135 16.4853 17.7992 14 17.7992C11.5147 17.7992 9.5 15.9135 9.5 14.4992C9.5 13.0849 11.5147 11.1992 14 11.1992C16.4853 11.1992 18.5 13.0849 18.5 14.4992ZM17.2 14.4992C17.2 14.7073 16.9994 15.2208 16.3434 15.743C15.7304 16.231 14.8948 16.5735 14 16.5735C13.1052 16.5735 12.2696 16.231 11.6566 15.743C11.0006 15.2208 10.8 14.7073 10.8 14.4992C10.8 14.2912 11.0006 13.7776 11.6566 13.2554C12.2696 12.7675 13.1052 12.4249 14 12.4249C14.8948 12.4249 15.7304 12.7675 16.3434 13.2554C16.9994 13.7776 17.2 14.2912 17.2 14.4992Z" fill="#007AFF"/>
+</svg>

core/lib/presentation/resources/image_paths.dart

@@ -174,6 +174,7 @@ class ImagePaths {
   String get icDeleteMailbox => _getImagePath('ic_delete_mailbox.svg');
   String get icHideMailbox => _getImagePath('ic_hide_mailbox.svg');
   String get icShowMailbox => _getImagePath('ic_show_mailbox.svg');
+  String get icMailboxVisibility => _getImagePath('ic_mailbox_visibility.svg');
 
   String _getImagePath(String imageName) {
     return AssetsPaths.images + imageName;

lib/features/base/base_controller.dart

@@ -27,6 +27,7 @@ import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/bindings/c
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/bindings/tmail_autocomplete_bindings.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/bindings/email_rules_interactor_bindings.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/forward/bindings/forwarding_interactors_bindings.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/bindings/mailbox_visibility_interactor_bindings.dart';
 import 'package:tmail_ui_user/features/push_notification/domain/exceptions/fcm_exception.dart';
 import 'package:tmail_ui_user/features/push_notification/presentation/bindings/fcm_interactor_bindings.dart';
 import 'package:tmail_ui_user/features/push_notification/presentation/config/fcm_configuration.dart';
@@ -163,6 +164,10 @@ abstract class BaseController extends GetxController
     }
   }
 
+  void injectMailboxVisibilityBindings() {
+    MailboxVisibilityInteractorBindings().dependencies();
+  }
+
   void injectFCMBindings(Session? session, AccountId? accountId) async {
     try {
       requireCapability(session!, accountId!, [FirebaseCapability.fcmIdentifier]);

lib/features/manage_account/presentation/mailbox_visibility/bindings/mailbox_visibility_bindings.dart

@@ -0,0 +1,20 @@
+import 'package:get/get.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';
+import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_controller.dart';
+
+class MailboxVisibilityBindings extends Bindings {
+
+  @override
+  void dependencies() {
+    Get.lazyPut(() => MailboxVisibilityController(
+      Get.find<TreeBuilder>(),
+      Get.find<VerifyNameInteractor>()
+    ));
+    _bindingsUtils();
+  }
+
+  void _bindingsUtils() {
+    Get.lazyPut(() => TreeBuilder());
+  }
+}

lib/features/manage_account/presentation/mailbox_visibility/bindings/mailbox_visibility_interactor_bindings.dart

@@ -0,0 +1,63 @@
+import 'package:get/get.dart';
+import 'package:tmail_ui_user/features/base/interactors_bindings.dart';
+import 'package:tmail_ui_user/main/exceptions/cache_exception_thrower.dart';
+import 'package:tmail_ui_user/main/exceptions/remote_exception_thrower.dart';
+import 'package:tmail_ui_user/features/caching/state_cache_client.dart';
+import 'package:tmail_ui_user/features/mailbox/data/datasource/mailbox_datasource.dart';
+import 'package:tmail_ui_user/features/mailbox/data/datasource/state_datasource.dart';
+import 'package:tmail_ui_user/features/mailbox/data/datasource_impl/mailbox_cache_datasource_impl.dart';
+import 'package:tmail_ui_user/features/mailbox/data/datasource_impl/mailbox_datasource_impl.dart';
+import 'package:tmail_ui_user/features/mailbox/data/datasource_impl/state_datasource_impl.dart';
+import 'package:tmail_ui_user/features/mailbox/data/local/mailbox_cache_manager.dart';
+import 'package:tmail_ui_user/features/mailbox/data/network/mailbox_api.dart';
+import 'package:tmail_ui_user/features/mailbox/data/network/mailbox_isolate_worker.dart';
+import 'package:tmail_ui_user/features/mailbox/data/repository/mailbox_repository_impl.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/repository/mailbox_repository.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/usecases/get_all_mailbox_interactor.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/usecases/refresh_all_mailbox_interactor.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/usecases/subscribe_mailbox_interactor.dart';
+import 'package:core/data/model/source_type/data_source_type.dart';
+
+class MailboxVisibilityInteractorBindings extends InteractorsBindings {
+
+  @override
+  void bindingsDataSource() {
+    Get.lazyPut<MailboxDataSource>(() => Get.find<MailboxDataSourceImpl>());
+    Get.lazyPut<StateDataSource>(() => Get.find<StateDataSourceImpl>());
+  }
+
+  @override
+  void bindingsDataSourceImpl() {
+    Get.lazyPut(() => MailboxDataSourceImpl(
+        Get.find<MailboxAPI>(),
+        Get.find<MailboxIsolateWorker>(),
+        Get.find<RemoteExceptionThrower>()));
+    Get.lazyPut(() => MailboxCacheDataSourceImpl(
+        Get.find<MailboxCacheManager>(),
+        Get.find<CacheExceptionThrower>()));
+    Get.lazyPut(() => StateDataSourceImpl(Get.find<StateCacheClient>(), Get.find<CacheExceptionThrower>()));
+  }
+
+  @override
+  void bindingsInteractor() {
+    Get.lazyPut(() => GetAllMailboxInteractor(Get.find<MailboxRepository>()));
+    Get.lazyPut(() => RefreshAllMailboxInteractor(Get.find<MailboxRepository>()));
+    Get.lazyPut(() => SubscribeMailboxInteractor(Get.find<MailboxRepository>()));
+  }
+
+  @override
+  void bindingsRepository() {
+    Get.lazyPut<MailboxRepository>(() => Get.find<MailboxRepositoryImpl>());
+  }
+
+  @override
+  void bindingsRepositoryImpl() {
+    Get.lazyPut(() => MailboxRepositoryImpl(
+      {
+        DataSourceType.network: Get.find<MailboxDataSource>(),
+        DataSourceType.local: Get.find<MailboxCacheDataSourceImpl>()
+      },
+      Get.find<StateDataSource>(),
+    ));
+  }
+}

lib/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_controller.dart

@@ -0,0 +1,197 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/app_toast.dart';
+import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/utils/app_logger.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:jmap_dart_client/jmap/account_id.dart';
+import 'package:jmap_dart_client/jmap/core/session/session.dart';
+import 'package:jmap_dart_client/jmap/core/state.dart' as jmap;
+import 'package:jmap_dart_client/jmap/mail/mailbox/mailbox.dart';
+import 'package:model/mailbox/expand_mode.dart';
+import 'package:model/mailbox/presentation_mailbox.dart';
+import 'package:tmail_ui_user/features/base/base_mailbox_controller.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/model/mailbox_subscribe_action_state.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/model/mailbox_subscribe_state.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/model/subscribe_mailbox_request.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/state/get_all_mailboxes_state.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/state/refresh_changes_all_mailboxes_state.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/state/subscribe_mailbox_state.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/usecases/get_all_mailbox_interactor.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/usecases/refresh_all_mailbox_interactor.dart';
+import 'package:tmail_ui_user/features/mailbox/domain/usecases/subscribe_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';
+import 'package:tmail_ui_user/features/manage_account/presentation/manage_account_dashboard_controller.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+import 'package:tmail_ui_user/main/routes/route_navigation.dart';
+
+class MailboxVisibilityController extends BaseMailboxController {
+  GetAllMailboxInteractor? _getAllMailboxInteractor;
+  RefreshAllMailboxInteractor? _refreshAllMailboxInteractor;
+  SubscribeMailboxInteractor? _subscribeMailboxInteractor;
+  final _accountDashBoardController = Get.find<ManageAccountDashBoardController>();
+  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,
+    VerifyNameInteractor verifyNameInteractor,
+  ) : super(treeBuilder, verifyNameInteractor);
+
+  @override
+  void onInit() {
+    super.onInit();
+    try {
+      _getAllMailboxInteractor = Get.find<GetAllMailboxInteractor>();
+      _refreshAllMailboxInteractor = Get.find<RefreshAllMailboxInteractor>();
+      _subscribeMailboxInteractor = Get.find<SubscribeMailboxInteractor>();
+    } catch (e) {
+      logError('MailboxVisibilityController::onInit(): ${e.toString()}');
+    }
+  }
+
+  @override
+  void onDone() {
+    viewState.value.fold((failure) {}, (success) {
+      if (success is GetAllMailboxSuccess) {
+        _currentMailboxState = success.currentMailboxState;
+        _buildMailboxTreeHasSubscribed(success.mailboxList);
+      } else if (success is RefreshChangesAllMailboxSuccess) {
+        _currentMailboxState = success.currentMailboxState;
+        _refreshMailboxTreeHasSubscribed(success.mailboxList);
+      } else if (success is SubscribeMailboxSuccess) {
+        _subscribeMailboxSuccess(success);
+      }
+    });
+
+  }
+
+  @override
+  void onReady() {
+    final _session = _accountDashBoardController.sessionCurrent.value;
+    final _accountId = _accountDashBoardController.accountId.value;
+    if(_session != null && _accountId != null) {
+      getAllMailboxAction(_session, _accountId);
+    }
+    super.onReady();
+  }
+
+  void getAllMailboxAction(Session session, AccountId accountId) async {
+    if(_getAllMailboxInteractor != null){
+      consumeState(_getAllMailboxInteractor!.execute(session, accountId));
+    }
+  }
+
+  void refreshMailboxChanges({jmap.State? currentMailboxState}) {
+    log('MailboxVisibilityController::refreshMailboxChanges(): currentMailboxState: $currentMailboxState');
+    final newMailboxState = currentMailboxState ?? _currentMailboxState;
+    log('MailboxVisibilityController::refreshMailboxChanges(): newMailboxState: $newMailboxState');
+    final session = _accountDashBoardController.sessionCurrent.value;
+    final accountId = _accountDashBoardController.accountId.value;
+    if (accountId != null && session != null && newMailboxState != null) {
+      consumeState(_refreshAllMailboxInteractor!.execute(session, accountId, newMailboxState));
+    }
+  }
+
+  void _buildMailboxTreeHasSubscribed(List<PresentationMailbox> mailboxList) async {
+    final _mailboxList = mailboxList;
+    await buildTree(_mailboxList);
+  }
+
+  void _refreshMailboxTreeHasSubscribed(List<PresentationMailbox> mailboxList) async {
+    final _mailboxList = mailboxList;
+    await refreshTree(_mailboxList);
+  }
+
+  void subscribeMailbox(MailboxNode mailboxNode) {
+    final _mailboxSubscribeState = mailboxNode.item.isSubscribedMailbox
+      ? MailboxSubscribeState.disabled : MailboxSubscribeState.enabled;
+    final _mailboxSubscribeStateAction = mailboxNode.item.isSubscribedMailbox
+      ? MailboxSubscribeAction.unSubscribe : MailboxSubscribeAction.subscribe;
+    if (mailboxNode.item.isSubscribedMailbox) {
+      _subscribeMailboxAction(
+          SubscribeMailboxRequest(
+              mailboxNode.item.id,
+              _mailboxSubscribeState,
+              _mailboxSubscribeStateAction,
+          )
+      );
+    }
+  }
+
+  void _subscribeMailboxAction(SubscribeMailboxRequest subscribeMailboxRequest) {
+    final _accountId = _accountDashBoardController.accountId.value;
+    if (_accountId != null) {
+      consumeState(_subscribeMailboxInteractor!.execute(_accountId, subscribeMailboxRequest));
+    }
+  }
+
+  void toggleMailboxCategories(MailboxCategories categories) {
+    switch(categories) {
+      case MailboxCategories.exchange:
+        final newExpandMode = mailboxCategoriesExpandMode.value.defaultMailbox == ExpandMode.EXPAND ? ExpandMode.COLLAPSE : ExpandMode.EXPAND;
+        mailboxCategoriesExpandMode.value.defaultMailbox = newExpandMode;
+        mailboxCategoriesExpandMode.refresh();
+        break;
+      case MailboxCategories.personalMailboxes:
+        final newExpandMode = mailboxCategoriesExpandMode.value.personalMailboxes == ExpandMode.EXPAND ? ExpandMode.COLLAPSE : ExpandMode.EXPAND;
+        mailboxCategoriesExpandMode.value.personalMailboxes = newExpandMode;
+        mailboxCategoriesExpandMode.refresh();
+        break;
+      case MailboxCategories.teamMailboxes:
+        final newExpandMode = mailboxCategoriesExpandMode.value.teamMailboxes == ExpandMode.EXPAND ? ExpandMode.COLLAPSE : ExpandMode.EXPAND;
+        mailboxCategoriesExpandMode.value.teamMailboxes = newExpandMode;
+        mailboxCategoriesExpandMode.refresh();
+        break;
+      case MailboxCategories.appGrid:
+        break;
+    }
+  }
+
+  void _subscribeMailboxSuccess(SubscribeMailboxSuccess subscribeMailboxSuccess) {
+    if (subscribeMailboxSuccess.subscribeAction == MailboxSubscribeAction.unSubscribe
+        && currentOverlayContext != null
+        && currentContext != null) {
+      _appToast.showBottomToast(
+          currentOverlayContext!,
+          AppLocalizations.of(currentContext!).toastMsgHideMailboxSuccess,
+          actionName: AppLocalizations.of(currentContext!).undo,
+          onActionClick: () {
+            _subscribeMailboxAction(
+              SubscribeMailboxRequest(
+                subscribeMailboxSuccess.mailboxId,
+                MailboxSubscribeState.enabled,
+                MailboxSubscribeAction.undo)
+            );
+          },
+          leadingIcon: SvgPicture.asset(
+            _imagePaths.icFolderMailbox,
+            width: 24,
+            height: 24,
+            color: Colors.white,
+            fit: BoxFit.fill),
+          backgroundColor: AppColor.toastSuccessBackgroundColor,
+          textColor: Colors.white,
+          textActionColor: Colors.white,
+          actionIcon: SvgPicture.asset(_imagePaths.icUndo),
+          maxWidth: _responsiveUtils.getMaxWidthToast(currentContext!));
+    }
+
+    refreshMailboxChanges(currentMailboxState: subscribeMailboxSuccess.currentMailboxState);
+  }
+}

lib/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_view.dart

@@ -0,0 +1,196 @@
+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/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/mailbox_visibility/mailbox_visibility_controller.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 {
+  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(),
+                    _buildLoadingView(),
+                    const Padding(
+                      padding:  EdgeInsets.symmetric(vertical: 16),
+                      child:  Divider(color: AppColor.colorDividerMailbox, height: 0.5, thickness: 0.2),
+                    ),
+                  ],
+                  Expanded(child: _buildListMailbox(context)),
+                ]
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildLoadingView() {
+    return Obx(() => controller.viewState.value.fold(
+      (failure) => const SizedBox.shrink(),
+      (success) => success is LoadingState
+        ? const Center(
+          child: Padding(
+            padding: EdgeInsets.only(top: 16),
+            child: SizedBox(
+              height: 24,
+              width: 24,
+              child: CupertinoActivityIndicator(
+                color: AppColor.colorTextButton,
+              ),
+            )),
+        )
+        : 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()),
+
+        ])
+    );
+  }
+
+  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 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())
+      ]),
+    );
+  }
+
+  Widget _buildBodyMailboxCategory(
+    BuildContext context,
+    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)));
+  }
+
+  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: Obx(() => controller.defaultMailboxIsNotEmpty ? (MailBoxVisibilityFolderTileBuilder(context, _imagePaths, mailboxNode, lastNode: lastNode)
+                ..addOnExpandFolderActionClick((mailboxNode) => controller.toggleMailboxFolder(mailboxNode))
+                ..addOnSubscribeMailboxActionClick((mailboxNode) => controller.subscribeMailbox(mailboxNode)))
+                .build(context) : const SizedBox.shrink()) ,
+              children: _buildListChildTileWidget(context, mailboxNode)
+          ).build()
+          : Obx(() => controller.defaultMailboxIsNotEmpty ? (MailBoxVisibilityFolderTileBuilder(context, _imagePaths, mailboxNode, lastNode: lastNode)
+            ..addOnExpandFolderActionClick((mailboxNode) => controller.toggleMailboxFolder(mailboxNode))
+            ..addOnSubscribeMailboxActionClick((mailboxNode) => controller.subscribeMailbox(mailboxNode)))
+          .build(context) : const SizedBox.shrink())).toList() ?? <Widget>[];
+  }
+}

lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_folder_tile_builder.dart

@@ -0,0 +1,258 @@
+import 'package:core/core.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/main/localizations/app_localizations.dart';
+
+typedef OnExpandFolderActionClick = void Function(MailboxNode);
+typedef OnSubscribeMailboxActionClick = void Function(MailboxNode);
+
+class MailBoxVisibilityFolderTileBuilder {
+  final MailboxNode _mailboxNode;
+  final BuildContext _context;
+  final ImagePaths _imagePaths;
+  final MailboxNode? lastNode;
+  final MailboxActions? mailboxActions;
+
+  OnSubscribeMailboxActionClick? _onSubscribeMailboxActionClick;
+  OnExpandFolderActionClick? _onExpandFolderActionClick;
+  bool isHoverItem = false;
+
+  MailBoxVisibilityFolderTileBuilder(
+    this._context,
+    this._imagePaths,
+    this._mailboxNode, {
+    this.lastNode,
+    this.mailboxActions,
+  });
+
+  void addOnExpandFolderActionClick(OnExpandFolderActionClick onExpandFolderActionClick) {
+    _onExpandFolderActionClick = onExpandFolderActionClick;
+  }
+
+  void addOnSubscribeMailboxActionClick(OnSubscribeMailboxActionClick onSubscribeMailboxActionClick) {
+    _onSubscribeMailboxActionClick = onSubscribeMailboxActionClick;
+  }
+
+  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())
+                        _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())
+                          _buildSubscribeMailboxItem(context, _mailboxNode),
+                      ]),
+                ),
+              ]));
+    }
+  }
+
+  Widget _buildLeadingMailboxItem() {
+    if (BuildUtils.isWeb) {
+      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: () => _onExpandFolderActionClick?.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: () => _onExpandFolderActionClick?.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;
+    }
+  }
+
+  Widget _buildTitleFolderItem() {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          _mailboxNode.item.name?.name ?? '',
+          maxLines: 1,
+          softWrap: CommonTextStyle.defaultSoftWrap,
+          overflow: CommonTextStyle.defaultTextOverFlow,
+          style: TextStyle(
+            fontSize: _mailboxNode.item.isTeamMailboxes ? 16 : 15,
+            color: _mailboxNode.item.isSubscribedMailbox
+              ? _getColorTextTitleFolderItem()
+              : AppColor.colorItemAlreadySelected,
+            fontWeight: _mailboxNode.item.isTeamMailboxes
+              ? FontWeight.w500
+              : FontWeight.normal),
+        ),
+        if (_mailboxNode.item.isTeamMailboxes)
+          Text(
+            _mailboxNode.item.emailTeamMailBoxes ?? '',
+            maxLines: 1,
+            softWrap: CommonTextStyle.defaultSoftWrap,
+            overflow: CommonTextStyle.defaultTextOverFlow,
+            style: const TextStyle(
+              fontSize: 13,
+              color: AppColor.colorEmailAddressFull,
+              fontWeight: FontWeight.w400),
+          ),
+      ],
+    );
+  }
+
+  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);
+  }
+
+  Widget _buildSubscribeMailboxItem(BuildContext context, MailboxNode _mailboxNode) {
+    return InkWell(
+      onTap: () => _onSubscribeMailboxActionClick?.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),
+      ),
+    );
+  }
+}

lib/features/manage_account/presentation/mailbox_visibility/widgets/mailbox_visibility_header_widget.dart

@@ -0,0 +1,30 @@
+import 'package:core/presentation/extensions/color_extension.dart';
+import 'package:flutter/material.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+class MailboxVisibilityHeaderWidget extends StatelessWidget {
+
+  const MailboxVisibilityHeaderWidget({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(left: 24),
+      child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(AppLocalizations.of(context).mailboxVisibility,
+                style: const TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.bold,
+                    color: Colors.black)),
+            const SizedBox(height: 4),
+            Text(AppLocalizations.of(context).mailboxVisibilitySubtitle,
+                style: const TextStyle(
+                    fontSize: 16,
+                    fontWeight: FontWeight.w500,
+                    color: AppColor.colorSettingExplanation))
+          ]),
+    );
+  }
+}

lib/features/manage_account/presentation/manage_account_dashboard_controller.dart

@@ -26,6 +26,7 @@ import 'package:tmail_ui_user/features/manage_account/presentation/action/dashbo
 import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/bindings/email_rules_bindings.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/extensions/vacation_response_extension.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/forward/bindings/forward_bindings.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/bindings/mailbox_visibility_bindings.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/account_menu_item.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/manage_account_arguments.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/model/settings_page_level.dart';
@@ -103,6 +104,7 @@ class ManageAccountDashBoardController extends ReloadableController {
     injectAutoCompleteBindings(sessionCurrent.value, accountId.value);
     injectForwardBindings(sessionCurrent.value, accountId.value);
     injectRuleFilterBindings(sessionCurrent.value, accountId.value);
+    injectMailboxVisibilityBindings();
     injectVacationBindings(sessionCurrent.value, accountId.value);
     _getVacationResponse();
   }
@@ -117,6 +119,7 @@ class ManageAccountDashBoardController extends ReloadableController {
       injectAutoCompleteBindings(sessionCurrent.value, accountId.value);
       injectForwardBindings(sessionCurrent.value, accountId.value);
       injectRuleFilterBindings(sessionCurrent.value, accountId.value);
+      injectMailboxVisibilityBindings();
       injectVacationBindings(sessionCurrent.value, accountId.value);
       _getVacationResponse();
       if (arguments.menuSettingCurrent != null) {
@@ -182,12 +185,15 @@ class ManageAccountDashBoardController extends ReloadableController {
 
   void selectAccountMenuItem(AccountMenuItem newAccountMenuItem) {
     clearInputFormView();
-    if(newAccountMenuItem == AccountMenuItem.emailRules) {
+    if (newAccountMenuItem == AccountMenuItem.emailRules) {
       EmailRulesBindings().dependencies();
     }
-    if(newAccountMenuItem == AccountMenuItem.forward) {
+    if (newAccountMenuItem == AccountMenuItem.forward) {
       ForwardBindings().dependencies();
     }
+    if (newAccountMenuItem == AccountMenuItem.mailboxVisibility) {
+      MailboxVisibilityBindings().dependencies();
+    }
     accountMenuItemSelected.value = newAccountMenuItem;
     if (isMenuDrawerOpen) {
       closeMenuDrawer();
@@ -205,12 +211,15 @@ class ManageAccountDashBoardController extends ReloadableController {
   }
 
   void _goToSettingMenuCurrent(AccountMenuItem accountMenuItem) {
-    if(accountMenuItem == AccountMenuItem.emailRules) {
+    if (accountMenuItem == AccountMenuItem.emailRules) {
       EmailRulesBindings().dependencies();
     }
-    if(accountMenuItem == AccountMenuItem.forward) {
+    if (accountMenuItem == AccountMenuItem.forward) {
       ForwardBindings().dependencies();
     }
+    if (accountMenuItem == AccountMenuItem.mailboxVisibility) {
+      MailboxVisibilityBindings().dependencies();
+    }
     accountMenuItemSelected.value = accountMenuItem;
     if (currentContext != null &&
         !_responsiveUtils.isDesktop(currentContext!)) {

lib/features/manage_account/presentation/manage_account_dashboard_view.dart

@@ -10,6 +10,7 @@ import 'package:flutter/material.dart';
 import 'package:get/get.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/extensions/vacation_response_extension.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/vacation/widgets/vacation_notification_message_widget.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/email_rules_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/forward/forward_view.dart';
@@ -179,6 +180,8 @@ class ManageAccountDashBoardView extends GetWidget<ManageAccountDashBoardControl
           }
         case AccountMenuItem.vacation:
           return VacationView();
+        case AccountMenuItem.mailboxVisibility:
+          return MailboxVisibilityView();
         default:
           return const SizedBox.shrink();
       }

lib/features/manage_account/presentation/menu/manage_account_menu_controller.dart

@@ -46,7 +46,12 @@ class ManageAccountMenuController extends BaseController {
     if (dashBoardController.checkAvailableVacationInSession()) {
       listAccountMenuItem.add(AccountMenuItem.vacation);
     }
-    listAccountMenuItem.add(AccountMenuItem.languageAndRegion);
+    listAccountMenuItem.addAll(
+      [
+        AccountMenuItem.mailboxVisibility,
+        AccountMenuItem.languageAndRegion
+      ]
+    );
   }
 
   @override

lib/features/manage_account/presentation/menu/settings/settings_first_level_view.dart

@@ -105,6 +105,20 @@ class SettingsFirstLevelView extends GetWidget<SettingsController> {
             return const SizedBox.shrink();
           }
         }),
+        Column(children: [
+          SettingFirstLevelTileBuilder(
+            AccountMenuItem.mailboxVisibility.getName(context),
+            AccountMenuItem.mailboxVisibility.getIcon(_imagePaths),
+            subtitle: AppLocalizations.of(context).mailboxVisibilitySubtitle,
+            () => controller.selectSettings(AccountMenuItem.mailboxVisibility)
+          ),
+          Divider(
+            color: AppColor.colorDividerComposer,
+            height: 1,
+            indent: SettingsUtils.getHorizontalPadding(context, _responsiveUtils),
+            endIndent: SettingsUtils.getHorizontalPadding(context, _responsiveUtils)
+          ),
+        ]),
         SettingFirstLevelTileBuilder(
           AccountMenuItem.languageAndRegion.getName(context),
           AccountMenuItem.languageAndRegion.getIcon(_imagePaths),

lib/features/manage_account/presentation/menu/settings/settings_view.dart

@@ -11,6 +11,7 @@ import 'package:tmail_ui_user/features/manage_account/presentation/email_rules/e
 import 'package:tmail_ui_user/features/manage_account/presentation/extensions/vacation_response_extension.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/forward/forward_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/language_and_region/language_and_region_view.dart';
+import 'package:tmail_ui_user/features/manage_account/presentation/mailbox_visibility/mailbox_visibility_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings/settings_controller.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings/settings_first_level_view.dart';
 import 'package:tmail_ui_user/features/manage_account/presentation/menu/settings_utils.dart';
@@ -193,13 +194,13 @@ class SettingsView extends GetWidget<SettingsController> {
         case AccountMenuItem.languageAndRegion:
           return LanguageAndRegionView();
         case AccountMenuItem.emailRules:
-          if(controller.manageAccountDashboardController.checkAvailableRuleFilterInSession()){
+          if (controller.manageAccountDashboardController.checkAvailableRuleFilterInSession()) {
             return EmailRulesView();
           } else {
             return const SizedBox.shrink();
           }
         case AccountMenuItem.forward:
-          if(controller.manageAccountDashboardController.checkAvailableForwardInSession()){
+          if (controller.manageAccountDashboardController.checkAvailableForwardInSession()) {
             return ForwardView();
           } else {
             return const SizedBox.shrink();
@@ -210,6 +211,8 @@ class SettingsView extends GetWidget<SettingsController> {
           } else {
             return const SizedBox.shrink();
           }
+        case AccountMenuItem.mailboxVisibility:
+          return MailboxVisibilityView();
         default:
           return const SizedBox.shrink();
       }

lib/features/manage_account/presentation/model/account_menu_item.dart

@@ -9,6 +9,7 @@ enum AccountMenuItem {
   emailRules,
   forward,
   vacation,
+  mailboxVisibility,
   none;
 
   String getIcon(ImagePaths imagePaths) {
@@ -23,6 +24,8 @@ enum AccountMenuItem {
         return imagePaths.icForward;
       case AccountMenuItem.vacation:
         return imagePaths.icVacation;
+      case AccountMenuItem.mailboxVisibility:
+        return imagePaths.icMailboxVisibility;
       case AccountMenuItem.none:
         return imagePaths.icProfiles;
     }
@@ -40,6 +43,8 @@ enum AccountMenuItem {
         return AppLocalizations.of(context).forwarding;
       case AccountMenuItem.vacation:
         return AppLocalizations.of(context).vacation;
+      case AccountMenuItem.mailboxVisibility:
+        return AppLocalizations.of(context).mailboxVisibility;
       case AccountMenuItem.none:
         return AppLocalizations.of(context).profiles;
     }

lib/main/localizations/app_localizations.dart

@@ -2805,4 +2805,17 @@ class AppLocalizations {
       'This mailbox is already displayed in your primary mailbox',
       name: 'toastMessageShowMailboxSuccess');
   }
+  String get mailboxVisibility {
+    return Intl.message(
+      'Mailbox visibility',
+      name: 'mailboxVisibility',
+    );
+  }
+
+  String get mailboxVisibilitySubtitle {
+    return Intl.message(
+      'Show/ hide your mailboxes, including your personal and team mailboxes.',
+      name: 'mailboxVisibilitySubtitle',
+    );
+  }
 }

model/lib/mailbox/presentation_mailbox.dart

@@ -89,6 +89,8 @@ class PresentationMailbox with EquatableMixin {
 
   bool get isOutbox => name == lowerCaseOutboxMailboxName || role == roleOutbox;
 
+  bool get isSubscribedMailbox => isSubscribed != null && isSubscribed?.value == true;
+
   bool matchCountingRules() {
     if (isTrash || isDrafts || isTemplates || isSent) {
       return false;