TF-3704 Fix menu bounces when collapse/expand folder

Signed-off-by: dab246 <tdvu@linagora.com>
2025-05-07 02:53:37 +07:00
parent f2e854c2f0
commit aca0538b6b
16 changed files with 367 additions and 281 deletions
@@ -31,9 +31,11 @@ import 'package:tmail_ui_user/features/mailbox/domain/model/subscribe_multiple_m
 import 'package:tmail_ui_user/features/mailbox/domain/model/subscribe_request.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/presentation/extensions/expand_mode_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/extensions/list_mailbox_node_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/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_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.dart';
@@ -122,58 +124,79 @@ abstract class BaseMailboxController extends BaseController {
    allMailboxes = syncedMailbox;
  }

-  void toggleMailboxFolder(MailboxNode selectedMailboxNode, ScrollController scrollController) {
-    final newExpandMode = selectedMailboxNode.expandMode == ExpandMode.COLLAPSE
-        ? ExpandMode.EXPAND
-        : ExpandMode.COLLAPSE;
+  void toggleMailboxFolder(
+    MailboxNode selectedMailboxNode,
+    ScrollController scrollController,
+    GlobalKey itemKey,
+  ) {
+    final newExpandMode = selectedMailboxNode.expandMode.toggle();

    if (defaultMailboxTree.value.updateExpandedNode(selectedMailboxNode, newExpandMode) != null) {
      log('toggleMailboxFolder() refresh defaultMailboxTree');
      defaultMailboxTree.refresh();
+      triggerScrollWhenExpandFolder(
+        selectedMailboxNode.expandMode,
+        itemKey,
+        scrollController,
+      );
    }

    if (personalMailboxTree.value.updateExpandedNode(selectedMailboxNode, newExpandMode) != null) {
      log('toggleMailboxFolder() refresh folderMailboxTree');
      personalMailboxTree.refresh();
-      final childrenItems = personalMailboxTree.value.root.childrenItems ?? [];
-      _triggerScrollWhenExpandMailboxFolder(
-        childrenItems,
-        selectedMailboxNode,
-        scrollController);
+      triggerScrollWhenExpandFolder(
+        selectedMailboxNode.expandMode,
+        itemKey,
+        scrollController,
+      );
    }

    if (teamMailboxesTree.value.updateExpandedNode(selectedMailboxNode, newExpandMode) != null) {
      log('toggleMailboxFolder() refresh teamMailboxesTree');
      teamMailboxesTree.refresh();
-      final childrenItems = teamMailboxesTree.value.root.childrenItems ?? [];
-      _triggerScrollWhenExpandMailboxFolder(
-          childrenItems,
-          selectedMailboxNode,
-          scrollController);
+      triggerScrollWhenExpandFolder(
+        selectedMailboxNode.expandMode,
+        itemKey,
+        scrollController,
+      );
    }
  }

-  void _triggerScrollWhenExpandMailboxFolder(
-      List<MailboxNode> childrenItems,
-      MailboxNode selectedMailboxNode,
-      ScrollController scrollController) async {
-    await Future.delayed(const Duration(milliseconds: 200));
-    final lastItem = childrenItems.last;
+  void triggerScrollWhenExpandFolder(
+    ExpandMode expandMode,
+    GlobalKey itemKey,
+    ScrollController scrollController,
+  ) {
+    if (expandMode == ExpandMode.COLLAPSE) return;

-    if (selectedMailboxNode.expandMode == ExpandMode.COLLAPSE) {
-      return;
-    }
+    final context = itemKey.currentContext;
+    if (context == null) return;

-    if (lastItem.mailboxNameAsString.contains(selectedMailboxNode.mailboxNameAsString)) {
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _scrollToSelfIfNeeded(context, scrollController);
+    });
+  }
+
+  void _scrollToSelfIfNeeded(
+    BuildContext context,
+    ScrollController scrollController,
+  ) {
+    final renderBox = context.findRenderObject() as RenderBox?;
+    if (renderBox == null) return;
+
+    final position = renderBox.localToGlobal(Offset.zero);
+    final screenHeight = MediaQuery.of(context).size.height;
+    const offsetY = 200;
+    final bottomY = position.dy + renderBox.size.height + offsetY;
+    log('BaseMailboxController::_scrollToSelfIfNeeded:position = $position |screenHeight = $screenHeight | bottomY = $bottomY');
+    if (bottomY > screenHeight) {
+      final scrollOffset = scrollController.offset + bottomY - screenHeight + 40;
+      log('BaseMailboxController::_scrollToSelfIfNeeded:scrollOffset = $scrollOffset:');
      scrollController.animateTo(
-          scrollController.position.maxScrollExtent,
-          duration: const Duration(milliseconds: 200),
-          curve: Curves.easeInToLinear);
-    } else {
-      scrollController.animateTo(
-          scrollController.offset + 100,
-          duration: const Duration(milliseconds: 200),
-          curve: Curves.easeInToLinear);
+        scrollOffset,
+        duration: const Duration(milliseconds: 300),
+        curve: Curves.easeInOut,
+      );
    }
  }

@@ -611,4 +634,58 @@ abstract class BaseMailboxController extends BaseController {
      totalEmailsCountChanged: totalEmails,
    ).execute();
  }
+
+  void toggleMailboxCategories(
+    MailboxCategories category,
+    ScrollController scrollController,
+    GlobalKey itemKey,
+  ) {
+    switch (category) {
+      case MailboxCategories.exchange:
+        _toggleAndScroll(
+          currentExpandMode: mailboxCategoriesExpandMode.value.defaultMailbox,
+          updateExpandMode: (mode) => mailboxCategoriesExpandMode.value.defaultMailbox = mode,
+          hasChildren: defaultMailboxTree.value.root.hasChildren(),
+          itemKey: itemKey,
+          scrollController: scrollController,
+        );
+        break;
+
+      case MailboxCategories.personalFolders:
+        _toggleAndScroll(
+          currentExpandMode: mailboxCategoriesExpandMode.value.personalFolders,
+          updateExpandMode: (mode) => mailboxCategoriesExpandMode.value.personalFolders = mode,
+          hasChildren: personalMailboxTree.value.root.hasChildren(),
+          itemKey: itemKey,
+          scrollController: scrollController,
+        );
+        break;
+
+      case MailboxCategories.teamMailboxes:
+        _toggleAndScroll(
+          currentExpandMode: mailboxCategoriesExpandMode.value.teamMailboxes,
+          updateExpandMode: (mode) => mailboxCategoriesExpandMode.value.teamMailboxes = mode,
+          hasChildren: teamMailboxesTree.value.root.hasChildren(),
+          itemKey: itemKey,
+          scrollController: scrollController,
+        );
+        break;
+    }
+  }
+
+  void _toggleAndScroll({
+    required ExpandMode currentExpandMode,
+    required void Function(ExpandMode) updateExpandMode,
+    required bool hasChildren,
+    required GlobalKey itemKey,
+    required ScrollController scrollController,
+  }) {
+    final newExpandMode = currentExpandMode.toggle();
+    updateExpandMode(newExpandMode);
+    mailboxCategoriesExpandMode.refresh();
+
+    if (hasChildren) {
+      triggerScrollWhenExpandFolder(newExpandMode, itemKey, scrollController);
+    }
+  }
 }
@@ -25,7 +25,6 @@ import 'package:tmail_ui_user/features/mailbox/domain/usecases/refresh_all_mailb
 import 'package:tmail_ui_user/features/mailbox/domain/usecases/search_mailbox_interactor.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/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_categories.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/model/verification/duplicate_name_validator.dart';
@@ -159,34 +158,6 @@ class DestinationPickerController extends BaseMailboxController {
    }
  }

-  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.personalFolders:
-        final newExpandMode = mailboxCategoriesExpandMode.value.personalFolders == ExpandMode.EXPAND
-          ? ExpandMode.COLLAPSE
-          : ExpandMode.EXPAND;
-        mailboxCategoriesExpandMode.value.personalFolders = 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;
-      default:
-        return;
-    }
-  }
-
  bool isSearchActive() => searchState.value.searchStatus == SearchStatus.ACTIVE;

  void enableSearch() {
@@ -27,6 +27,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_action
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_displayed.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_item_widget.dart';
 import 'package:tmail_ui_user/features/mailbox_creator/presentation/widgets/create_mailbox_name_input_decoration_builder.dart';
 import 'package:tmail_ui_user/features/thread/presentation/widgets/search_app_bar_widget.dart';
@@ -341,16 +342,20 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
    } else {
      return Column(
        children: [
-          buildHeaderMailboxCategory(
-            context,
-            controller.responsiveUtils,
-            controller.imagePaths,
-            categories,
-            controller,
-            toggleMailboxCategories: controller.toggleMailboxCategories,
-            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+          Obx(() => MailboxCategoryWidget(
+            categories: categories,
+            expandMode: categories.getExpandMode(
+              controller.mailboxCategoriesExpandMode.value,
+            ),
+            onToggleMailboxCategories: (categories, itemKey) =>
+                controller.toggleMailboxCategories(
+                  categories,
+                  controller.destinationListScrollController,
+                  itemKey,
+                ),
            isArrangeLTR: false,
-          ),
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+          )),
          AnimatedContainer(
            duration: const Duration(milliseconds: 400),
            child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
@@ -415,7 +420,12 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
              mailboxIdAlreadySelected: mailboxIdSelected,
              mailboxDisplayed: MailboxDisplayed.destinationPicker,
              onOpenMailboxFolderClick: (node) => _pickMailboxNode(context, node),
-              onExpandFolderActionClick: (mailboxNode) => controller.toggleMailboxFolder(mailboxNode, controller.destinationListScrollController),
+              onExpandFolderActionClick: (mailboxNode, itemKey) =>
+                  controller.toggleMailboxFolder(
+                      mailboxNode,
+                      controller.destinationListScrollController,
+                      itemKey,
+                  ),
            ),
            children: _buildListChildTileWidget(
              context,
@@ -0,0 +1,26 @@
+
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:model/mailbox/expand_mode.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+extension ExpandModeExtension on ExpandMode {
+  bool get isExpanded => this == ExpandMode.EXPAND;
+
+  ExpandMode toggle() => isExpanded ? ExpandMode.COLLAPSE : ExpandMode.EXPAND;
+
+  String getIcon(ImagePaths imagePaths, bool isDirectionRTL) {
+    if (isExpanded) {
+      return imagePaths.icArrowBottom;
+    } else {
+      return isDirectionRTL ? imagePaths.icArrowLeft : imagePaths.icArrowRight;
+    }
+  }
+
+  String getTooltipMessage(AppLocalizations appLocalizations) {
+    if (isExpanded) {
+      return appLocalizations.collapse;
+    } else {
+      return appLocalizations.expand;
+    }
+  }
+}
@@ -72,7 +72,6 @@ import 'package:tmail_ui_user/features/mailbox/domain/usecases/subscribe_multipl
 import 'package:tmail_ui_user/features/mailbox/presentation/action/mailbox_ui_action.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/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_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';
@@ -1197,40 +1196,6 @@ class MailboxController extends BaseMailboxController
    }
  }

-  void toggleMailboxCategories(MailboxCategories categories) async {
-    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.personalFolders:
-        final newExpandMode = mailboxCategoriesExpandMode.value.personalFolders == ExpandMode.EXPAND ? ExpandMode.COLLAPSE : ExpandMode.EXPAND;
-        mailboxCategoriesExpandMode.value.personalFolders = newExpandMode;
-        mailboxCategoriesExpandMode.refresh();
-        if (personalMailboxTree.value.root.hasChildren()) {
-          _triggerToggleMailboxCategories();
-        }
-        break;
-      case MailboxCategories.teamMailboxes:
-        final newExpandMode = mailboxCategoriesExpandMode.value.teamMailboxes == ExpandMode.EXPAND ? ExpandMode.COLLAPSE : ExpandMode.EXPAND;
-        mailboxCategoriesExpandMode.value.teamMailboxes = newExpandMode;
-        mailboxCategoriesExpandMode.refresh();
-        if (personalMailboxTree.value.root.hasChildren() && mailboxCategoriesExpandMode.value.teamMailboxes == ExpandMode.COLLAPSE) {
-          _triggerToggleMailboxCategories();
-        }
-        break;
-    }
-  }
-
-  void _triggerToggleMailboxCategories() async {
-    await Future.delayed(const Duration(milliseconds: 200));
-    mailboxListScrollController.animateTo(
-      mailboxListScrollController.offset + 100,
-      duration: const Duration(milliseconds: 200),
-      curve: Curves.easeInToLinear);
-  }
-
  void _handleNavigationRouteParameters(Map<String, dynamic>? parameters) {
    log('MailboxController::_handleNavigationRouteParameters(): parameters: $parameters');
    if (parameters != null) {
@@ -9,6 +9,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_catego
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/app_grid_view.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/bottom_bar_selection_mailbox_widget.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_item_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_loading_bar_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/sending_queue_mailbox_widget.dart';
@@ -349,18 +350,23 @@ class MailboxView extends BaseMailboxView {
      return _buildBodyMailboxCategory(context, categories, mailboxNode);
    }
    return Column(children: [
-      buildHeaderMailboxCategory(
-        context,
-        controller.responsiveUtils,
-        controller.imagePaths,
-        categories,
-        controller,
-        toggleMailboxCategories: controller.toggleMailboxCategories,
+      Obx(() => MailboxCategoryWidget(
+        categories: categories,
+        expandMode: categories.getExpandMode(
+          controller.mailboxCategoriesExpandMode.value,
+        ),
+        onToggleMailboxCategories: (categories, itemKey) =>
+            controller.toggleMailboxCategories(
+              categories,
+              controller.mailboxListScrollController,
+              itemKey,
+            ),
+        isArrangeLTR: false,
        padding: EdgeInsetsDirectional.only(
          start: 16,
-          end: controller.responsiveUtils.isLandscapeMobile(context) ? 8 : 28),
-        isArrangeLTR: false,
-      ),
+          end: controller.responsiveUtils.isLandscapeMobile(context) ? 8 : 28,
+        ),
+      )),
      AnimatedContainer(
        duration: const Duration(milliseconds: 400),
        child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
@@ -384,7 +390,12 @@ class MailboxView extends BaseMailboxView {
                mailboxNodeSelected: controller.mailboxDashBoardController.selectedMailbox.value,
                onLongPressMailboxNodeAction: (mailboxNode) => openMailboxMenuActionOnMobile(context, controller.imagePaths, mailboxNode.item, controller),
                onOpenMailboxFolderClick: (mailboxNode) => controller.openMailbox(context, mailboxNode.item),
-                onExpandFolderActionClick: (mailboxNode) => controller.toggleMailboxFolder(mailboxNode, controller.mailboxListScrollController),
+                onExpandFolderActionClick: (mailboxNode, itemKey) =>
+                    controller.toggleMailboxFolder(
+                        mailboxNode,
+                        controller.mailboxListScrollController,
+                        itemKey,
+                    ),
                onSelectMailboxFolderClick: (mailboxNode) => controller.selectMailboxNode(mailboxNode),
              )),
              children: _buildListChildTileWidget(context, mailboxNode)
@@ -10,6 +10,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/base_mailbox_view.da
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_node.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/app_grid_view.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_category_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_item_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_loading_bar_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/user_information_widget.dart';
@@ -314,18 +315,22 @@ class MailboxView extends BaseMailboxView {
    } else {
      return Column(
        children: [
-          buildHeaderMailboxCategory(
-            context,
-            controller.responsiveUtils,
-            controller.imagePaths,
-            categories,
-            controller,
-            toggleMailboxCategories: controller.toggleMailboxCategories,
+          Obx(() => MailboxCategoryWidget(
+            categories: categories,
+            expandMode: categories.getExpandMode(
+              controller.mailboxCategoriesExpandMode.value,
+            ),
+            onToggleMailboxCategories: (categories, itemKey) =>
+                controller.toggleMailboxCategories(
+                  categories,
+                  controller.mailboxListScrollController,
+                  itemKey,
+                ),
+            isArrangeLTR: false,
            padding: controller.responsiveUtils.isDesktop(context)
              ? null
              : const EdgeInsetsDirectional.only(start: 16),
-            isArrangeLTR: false,
-          ),
+          )),
          AnimatedContainer(
            duration: const Duration(milliseconds: 400),
            child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
@@ -354,7 +359,12 @@ class MailboxView extends BaseMailboxView {
            mailboxNode: mailboxNode,
            mailboxNodeSelected: controller.mailboxDashBoardController.selectedMailbox.value,
            onOpenMailboxFolderClick: (mailboxNode) => controller.openMailbox(context, mailboxNode.item),
-            onExpandFolderActionClick: (mailboxNode) => controller.toggleMailboxFolder(mailboxNode, controller.mailboxListScrollController),
+            onExpandFolderActionClick: (mailboxNode, itemKey) =>
+                controller.toggleMailboxFolder(
+                    mailboxNode,
+                    controller.mailboxListScrollController,
+                    itemKey,
+                ),
            onSelectMailboxFolderClick: controller.selectMailboxNode,
            onDragItemAccepted: _handleDragItemAccepted,
            onMenuActionClick: (position, mailboxNode) {
@@ -1,24 +1,19 @@

 import 'package:core/core.dart';
-import 'package:core/utils/direction_utils.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/capability/capability_identifier.dart';
 import 'package:jmap_dart_client/jmap/core/session/session.dart';
 import 'package:model/mailbox/mailbox_constants.dart';
 import 'package:model/model.dart';
-import 'package:tmail_ui_user/features/base/base_mailbox_controller.dart';
 import 'package:tmail_ui_user/features/base/widget/popup_item_widget.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/mailbox_controller.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/context_item_mailbox_action.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
-import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/utils/mailbox_utils.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/widgets/mailbox_bottom_sheet_action_tile_builder.dart';
 import 'package:tmail_ui_user/main/error/capability_validator.dart';
-import 'package:tmail_ui_user/main/localizations/app_localizations.dart';

 mixin MailboxWidgetMixin {

@@ -331,62 +326,4 @@ mixin MailboxWidgetMixin {
      )
    );
  }
-
-  Widget buildHeaderMailboxCategory(
-    BuildContext context,
-    ResponsiveUtils responsiveUtils,
-    ImagePaths imagePaths,
-    MailboxCategories categories,
-    BaseMailboxController baseMailboxController,
-    {
-      required Function(MailboxCategories categories) toggleMailboxCategories,
-      EdgeInsetsGeometry? padding,
-      bool isArrangeLTR = true,
-    }
-  ) {
-    final item = Row(children: [
-      if (!isArrangeLTR)
-        Flexible(
-          child: Text(
-            categories.getTitle(context),
-            maxLines: 1,
-            overflow: CommonTextStyle.defaultTextOverFlow,
-            softWrap: CommonTextStyle.defaultSoftWrap,
-            style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
-          ),
-        ),
-      Obx(() {
-        final expandMode = categories.getExpandMode(baseMailboxController.mailboxCategoriesExpandMode.value);
-        return TMailButtonWidget.fromIcon(
-          icon: expandMode == ExpandMode.EXPAND
-            ? imagePaths.icArrowBottom
-            : DirectionUtils.isDirectionRTLByLanguage(context)
-                ? imagePaths.icArrowLeft
-                : imagePaths.icArrowRight,
-          iconColor: Colors.black,
-          iconSize: 20,
-          backgroundColor: Colors.transparent,
-          padding: const EdgeInsets.all(5),
-          tooltipMessage: expandMode == ExpandMode.EXPAND
-            ? AppLocalizations.of(context).collapse
-            : AppLocalizations.of(context).expand,
-          onTapActionCallback: () => toggleMailboxCategories(categories)
-        );
-      }),
-      if (isArrangeLTR)
-        Expanded(child: Text(
-          categories.getTitle(context),
-          maxLines: 1,
-          overflow: CommonTextStyle.defaultTextOverFlow,
-          softWrap: CommonTextStyle.defaultSoftWrap,
-          style: ThemeUtils.textStyleBodyBody3(color: Colors.black)
-        )),
-    ]);
-
-    if (padding != null) {
-      return Padding(padding: padding, child: item);
-    } else {
-      return item;
-    }
-  }
 }
@@ -10,7 +10,7 @@ typedef OnSelectMailboxAction = void Function(PresentationMailbox);
 typedef OnDragEmailToMailboxAccepted = void Function(List<PresentationEmail>, PresentationMailbox);
 typedef OnLongPressMailboxAction = void Function(PresentationMailbox);

-typedef OnClickExpandMailboxNodeAction = void Function(MailboxNode);
+typedef OnClickExpandMailboxNodeAction = void Function(MailboxNode, GlobalKey itemKey);
 typedef OnClickOpenMailboxNodeAction = void Function(MailboxNode);
 typedef OnSelectMailboxNodeAction = void Function(MailboxNode);
 typedef OnClickOpenMenuMailboxNodeAction = void Function(RelativeRect, MailboxNode);
@@ -13,6 +13,7 @@ import 'package:tmail_ui_user/features/mailbox/presentation/widgets/trailing_mai

 class LabelMailboxItemWidget extends StatelessWidget {

+  final GlobalKey itemKey;
  final ResponsiveUtils responsiveUtils;
  final ImagePaths imagePaths;
  final MailboxNode mailboxNode;
@@ -25,6 +26,7 @@ class LabelMailboxItemWidget extends StatelessWidget {

  const LabelMailboxItemWidget({
    super.key,
+    required this.itemKey,
    required this.mailboxNode,
    required this.responsiveUtils,
    required this.imagePaths,
@@ -60,6 +62,7 @@ class LabelMailboxItemWidget extends StatelessWidget {
          ),
        if (mailboxNode.hasChildren())
          MailboxExpandButton(
+            itemKey: itemKey,
            mailboxNode: mailboxNode,
            imagePaths: imagePaths,
            onExpandFolderActionClick: onClickExpandMailboxNodeAction,
@@ -0,0 +1,84 @@
+import 'package:core/presentation/resources/image_paths.dart';
+import 'package:core/presentation/utils/theme_utils.dart';
+import 'package:core/presentation/views/button/tmail_button_widget.dart';
+import 'package:core/utils/direction_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:model/mailbox/expand_mode.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
+
+typedef OnToggleMailboxCategories = Function(MailboxCategories, GlobalKey);
+
+class MailboxCategoryWidget extends StatefulWidget {
+  final MailboxCategories categories;
+  final ExpandMode expandMode;
+  final OnToggleMailboxCategories onToggleMailboxCategories;
+  final bool isArrangeLTR;
+  final EdgeInsetsGeometry? padding;
+
+  const MailboxCategoryWidget({
+    super.key,
+    required this.categories,
+    required this.expandMode,
+    required this.onToggleMailboxCategories,
+    this.isArrangeLTR = true,
+    this.padding,
+  });
+
+  @override
+  State<MailboxCategoryWidget> createState() => _MailboxCategoryWidgetState();
+}
+
+class _MailboxCategoryWidgetState extends State<MailboxCategoryWidget> {
+
+  final _imagePaths = Get.find<ImagePaths>();
+
+  final GlobalKey _key = GlobalKey();
+
+  @override
+  Widget build(BuildContext context) {
+    final item = Row(
+      key: _key,
+      children: [
+        if (!widget.isArrangeLTR)
+          Flexible(
+            child: Text(
+              widget.categories.getTitle(context),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
+            ),
+          ),
+        TMailButtonWidget.fromIcon(
+            icon: widget.expandMode.getIcon(
+              _imagePaths,
+              DirectionUtils.isDirectionRTLByLanguage(context),
+            ),
+            iconColor: Colors.black,
+            iconSize: 20,
+            backgroundColor: Colors.transparent,
+            padding: const EdgeInsets.all(5),
+            tooltipMessage: widget.expandMode.getTooltipMessage(AppLocalizations.of(context)),
+            onTapActionCallback: () =>
+                widget.onToggleMailboxCategories(widget.categories, _key)),
+        if (widget.isArrangeLTR)
+          Expanded(
+            child: Text(
+              widget.categories.getTitle(context),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: ThemeUtils.textStyleBodyBody3(color: Colors.black),
+            ),
+          ),
+      ],
+    );
+
+    if (widget.padding != null) {
+      return Padding(padding: widget.padding!, child: item);
+    } else {
+      return item;
+    }
+  }
+}
@@ -4,18 +4,20 @@ import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:core/utils/direction_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:model/extensions/presentation_mailbox_extension.dart';
-import 'package:model/mailbox/expand_mode.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.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 MailboxExpandButton extends StatelessWidget {
+  final GlobalKey itemKey;
  final MailboxNode mailboxNode;
  final ImagePaths imagePaths;
  final OnClickExpandMailboxNodeAction? onExpandFolderActionClick;

  const MailboxExpandButton({
    super.key,
+    required this.itemKey,
    required this.mailboxNode,
    required this.imagePaths,
    required this.onExpandFolderActionClick,
@@ -24,35 +26,22 @@ class MailboxExpandButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TMailButtonWidget.fromIcon(
-      icon: _getExpandIcon(context, imagePaths),
+      icon: mailboxNode.expandMode.getIcon(
+        imagePaths,
+        DirectionUtils.isDirectionRTLByLanguage(context),
+      ),
      iconColor: _expandIconColor,
      iconSize: 20,
      padding: const EdgeInsets.all(5),
      backgroundColor: Colors.transparent,
-      tooltipMessage: _getExpandTooltipMessage(context),
-      onTapActionCallback: () => onExpandFolderActionClick?.call(mailboxNode),
+      tooltipMessage: mailboxNode.expandMode.getTooltipMessage(AppLocalizations.of(context)),
+      onTapActionCallback: () => onExpandFolderActionClick?.call(mailboxNode, itemKey),
    );
  }

-  String _getExpandIcon(BuildContext context, ImagePaths imagePaths) {
-    if (mailboxNode.expandMode == ExpandMode.EXPAND) {
-      return imagePaths.icArrowBottom;
-    } else {
-      return DirectionUtils.isDirectionRTLByLanguage(context)
-          ? imagePaths.icArrowLeft
-          : imagePaths.icArrowRight;
-    }
-  }
-
  Color get _expandIconColor {
    return mailboxNode.item.allowedToDisplay
        ? Colors.black
        : AppColor.steelGray200;
  }
-
-  String _getExpandTooltipMessage(BuildContext context) {
-    return mailboxNode.expandMode == ExpandMode.EXPAND
-        ? AppLocalizations.of(context).collapse
-        : AppLocalizations.of(context).expand;
-  }
 }
@@ -62,11 +62,13 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
  final _imagePaths = Get.find<ImagePaths>();

  bool _isItemHovered = false;
+  final GlobalKey _key = GlobalKey();

  @override
  Widget build(BuildContext context) {
    if (_responsiveUtils.isWebDesktop(context) && widget.mailboxDisplayed == MailboxDisplayed.mailbox) {
      return DragTarget<List<PresentationEmail>>(
+        key: _key,
        builder: (context, candidateEmails, rejectedEmails) {
          return InkWell(
            onTap: () => widget.onOpenMailboxFolderClick?.call(widget.mailboxNode),
@@ -95,6 +97,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                  const SizedBox(width: MailboxItemWidgetStyles.space),
                  Expanded(
                    child: LabelMailboxItemWidget(
+                      itemKey: _key,
                      responsiveUtils: _responsiveUtils,
                      mailboxNode: widget.mailboxNode,
                      imagePaths: _imagePaths,
@@ -116,6 +119,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
      if (widget.mailboxDisplayed == MailboxDisplayed.mailbox) {
        if (PlatformInfo.isWeb) {
          return InkWell(
+            key: _key,
            onTap: () => widget.onOpenMailboxFolderClick?.call(widget.mailboxNode),
            onHover: (value) => setState(() => _isItemHovered = value),
            child: Container(
@@ -138,6 +142,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                  const SizedBox(width: MailboxItemWidgetStyles.space),
                  Expanded(
                    child: LabelMailboxItemWidget(
+                      itemKey: _key,
                      responsiveUtils: _responsiveUtils,
                      mailboxNode: widget.mailboxNode,
                      imagePaths: _imagePaths,
@@ -154,6 +159,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
          );
        } else {
          return Material(
+            key: _key,
            color: Colors.transparent,
            child: InkWell(
              onLongPress: () => widget.onLongPressMailboxNodeAction?.call(widget.mailboxNode),
@@ -181,6 +187,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                    const SizedBox(width: MailboxItemWidgetStyles.padding),
                    Expanded(
                      child: LabelMailboxItemWidget(
+                        itemKey: _key,
                        responsiveUtils: _responsiveUtils,
                        mailboxNode: widget.mailboxNode,
                        imagePaths: _imagePaths,
@@ -206,6 +213,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
        }
      } else {
        return AbsorbPointer(
+          key: _key,
          absorbing: !widget.mailboxNode.isActivated,
          child: Opacity(
            opacity: widget.mailboxNode.isActivated ? 1.0 : 0.3,
@@ -236,6 +244,7 @@ class _MailboxItemWidgetState extends State<MailboxItemWidget> {
                      const SizedBox(width: MailboxItemWidgetStyles.padding),
                      Expanded(
                        child: LabelMailboxItemWidget(
+                          itemKey: _key,
                          responsiveUtils: _responsiveUtils,
                          mailboxNode: widget.mailboxNode,
                          imagePaths: _imagePaths,
@@ -9,7 +9,6 @@ import 'package:jmap_dart_client/jmap/core/properties/properties.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/extensions/presentation_mailbox_extension.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/constants/mailbox_constants.dart';
@@ -25,7 +24,6 @@ import 'package:tmail_ui_user/features/mailbox/domain/usecases/get_all_mailbox_i
 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/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_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';
@@ -135,26 +133,6 @@ class MailboxVisibilityController extends BaseMailboxController {
    }
  }

-  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.personalFolders:
-        final newExpandMode = mailboxCategoriesExpandMode.value.personalFolders == ExpandMode.EXPAND ? ExpandMode.COLLAPSE : ExpandMode.EXPAND;
-        mailboxCategoriesExpandMode.value.personalFolders = 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;
-    }
-  }
-
  void _subscribeMailboxSuccess(SubscribeMailboxSuccess subscribeMailboxSuccess) {
    if (subscribeMailboxSuccess.subscribeAction == MailboxSubscribeAction.unSubscribe
        && currentOverlayContext != null
@@ -8,6 +8,7 @@ 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/mailbox/presentation/widgets/mailbox_category_widget.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';
@@ -88,15 +89,19 @@ class MailboxVisibilityView extends GetWidget<MailboxVisibilityController>
      return _buildBodyMailboxCategory(context, categories, mailboxNode);
    }
    return Column(children: [
-      buildHeaderMailboxCategory(
-        context,
-        controller.responsiveUtils,
-        controller.imagePaths,
-        categories,
-        controller,
-        toggleMailboxCategories: controller.toggleMailboxCategories,
-        padding: const EdgeInsetsDirectional.symmetric(vertical: 8)
-      ),
+      Obx(() => MailboxCategoryWidget(
+        categories: categories,
+        expandMode: categories.getExpandMode(
+          controller.mailboxCategoriesExpandMode.value,
+        ),
+        onToggleMailboxCategories: (categories, itemKey) =>
+          controller.toggleMailboxCategories(
+            categories,
+            controller.mailboxListScrollController,
+            itemKey,
+          ),
+        padding: const EdgeInsetsDirectional.symmetric(vertical: 8),
+      )),
      AnimatedContainer(
        duration: const Duration(milliseconds: 400),
        child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
@@ -129,19 +134,25 @@ class MailboxVisibilityView extends GetWidget<MailboxVisibilityController>
            isExpanded: mailboxNode.expandMode == ExpandMode.EXPAND,
            paddingChild: const EdgeInsetsDirectional.only(start: 10),
            parent: MailBoxVisibilityFolderTileBuilder(
-              controller.imagePaths,
              mailboxNode,
-              onClickExpandMailboxNodeAction: (mailboxNode) {
-                controller.toggleMailboxFolder(mailboxNode, controller.mailboxListScrollController);
+              onClickExpandMailboxNodeAction: (mailboxNode, itemKey) {
+                controller.toggleMailboxFolder(
+                  mailboxNode,
+                  controller.mailboxListScrollController,
+                  itemKey,
+                );
              },
              onClickSubscribeMailboxAction: controller.subscribeMailbox
            ),
            children: _buildListChildTileWidget(context, mailboxNode)).build()
        : MailBoxVisibilityFolderTileBuilder(
-            controller.imagePaths,
            mailboxNode,
-            onClickExpandMailboxNodeAction: (mailboxNode) {
-              controller.toggleMailboxFolder(mailboxNode, controller.mailboxListScrollController);
+            onClickExpandMailboxNodeAction: (mailboxNode, itemKey) {
+              controller.toggleMailboxFolder(
+                mailboxNode,
+                controller.mailboxListScrollController,
+                itemKey,
+              );
            },
            onClickSubscribeMailboxAction: controller.subscribeMailbox
          ))
@@ -5,31 +5,41 @@ import 'package:core/presentation/views/button/tmail_button_widget.dart';
 import 'package:core/utils/direction_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
 import 'package:model/extensions/presentation_mailbox_extension.dart';
-import 'package:model/mailbox/expand_mode.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/extensions/expand_mode_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/extensions/presentation_mailbox_extension.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 extends StatelessWidget {
+class MailBoxVisibilityFolderTileBuilder extends StatefulWidget {

  final MailboxNode _mailboxNode;
-  final ImagePaths _imagePaths;
  final OnClickExpandMailboxNodeAction? onClickExpandMailboxNodeAction;
  final OnClickSubscribeMailboxAction? onClickSubscribeMailboxAction;

  const MailBoxVisibilityFolderTileBuilder(
-    this._imagePaths,
    this._mailboxNode, {
    Key? key,
    this.onClickExpandMailboxNodeAction,
    this.onClickSubscribeMailboxAction
  }) : super(key: key);

+  @override
+  State<MailBoxVisibilityFolderTileBuilder> createState() => _MailBoxVisibilityFolderTileBuilderState();
+}
+
+class _MailBoxVisibilityFolderTileBuilderState extends State<MailBoxVisibilityFolderTileBuilder> {
+
+  final _imagePaths = Get.find<ImagePaths>();
+
+  final GlobalKey _key = GlobalKey();
+
  @override
  Widget build(BuildContext context) {
    return Material(
+      key: _key,
      color: Colors.transparent,
      child: InkWell(
        onTap: () {},
@@ -40,7 +50,7 @@ class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
            children: [
              _buildLeadingMailboxItem(context),
              Expanded(child: _buildTitleFolderItem(context)),
-              if (!_mailboxNode.item.isDefault)
+              if (!widget._mailboxNode.item.isDefault)
                _buildSubscribeButton(context),
              const SizedBox(width: 32),
            ]
@@ -55,58 +65,53 @@ class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
      mainAxisSize: MainAxisSize.min,
      children: [
        Visibility.maintain(
-          visible: _mailboxNode.hasChildren() && _mailboxNode.item.isPersonal,
+          visible: widget._mailboxNode.hasChildren() && widget._mailboxNode.item.isPersonal,
          child: TMailButtonWidget.fromIcon(
-            icon: _getExpandIcon(context, _imagePaths),
-            iconColor: _mailboxNode.item.allowedToDisplay
+            icon: widget._mailboxNode.expandMode.getIcon(
+              _imagePaths,
+              DirectionUtils.isDirectionRTLByLanguage(context),
+            ),
+            iconColor: widget._mailboxNode.item.allowedToDisplay
              ? Colors.black
              : AppColor.colorIconUnSubscribedMailbox,
            padding: const EdgeInsets.all(5),
            iconSize: 20,
            backgroundColor: Colors.transparent,
-            tooltipMessage: _mailboxNode.expandMode == ExpandMode.EXPAND
-              ? AppLocalizations.of(context).collapse
-              : AppLocalizations.of(context).expand,
-            onTapActionCallback: () => onClickExpandMailboxNodeAction?.call(_mailboxNode)
+            tooltipMessage: widget._mailboxNode.expandMode.getTooltipMessage(AppLocalizations.of(context)),
+            onTapActionCallback: () =>
+                widget.onClickExpandMailboxNodeAction?.call(
+                    widget._mailboxNode,
+                    _key,
+                )
          ),
        ),
-        if (!_mailboxNode.item.isTeamMailboxes)
+        if (!widget._mailboxNode.item.isTeamMailboxes)
          _buildMailboxIcon(context),
      ]
    );
  }

-  String _getExpandIcon(BuildContext context, ImagePaths imagePaths) {
-    if (_mailboxNode.expandMode == ExpandMode.EXPAND) {
-      return imagePaths.icArrowBottom;
-    } else {
-      return DirectionUtils.isDirectionRTLByLanguage(context)
-        ? imagePaths.icArrowLeft
-        : imagePaths.icArrowRight;
-    }
-  }
-
  Widget _buildTitleFolderItem(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
-          _mailboxNode.item.getDisplayName(context),
+          widget._mailboxNode.item.getDisplayName(context),
          maxLines: 1,
          softWrap: CommonTextStyle.defaultSoftWrap,
          overflow: CommonTextStyle.defaultTextOverFlow,
          style: TextStyle(
-            fontSize: _mailboxNode.item.isTeamMailboxes ? 16 : 14,
-            color: _mailboxNode.item.allowedToDisplay
+            fontSize: widget._mailboxNode.item.isTeamMailboxes ? 16 : 14,
+            color: widget._mailboxNode.item.allowedToDisplay
              ? Colors.black
              : AppColor.colorTitleAUnSubscribedMailbox,
-            fontWeight: _mailboxNode.item.isTeamMailboxes
+            fontWeight: widget._mailboxNode.item.isTeamMailboxes
              ? FontWeight.w500
              : FontWeight.normal),
        ),
-        if (_mailboxNode.item.isTeamMailboxes)
+        if (widget._mailboxNode.item.isTeamMailboxes)
          Text(
-            _mailboxNode.item.emailTeamMailBoxes,
+            widget._mailboxNode.item.emailTeamMailBoxes,
            maxLines: 1,
            softWrap: CommonTextStyle.defaultSoftWrap,
            overflow: CommonTextStyle.defaultTextOverFlow,
@@ -123,10 +128,10 @@ class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
    return Padding(
      padding: const EdgeInsetsDirectional.only(end: 8),
      child: SvgPicture.asset(
-        _mailboxNode.item.getMailboxIcon(_imagePaths),
+        widget._mailboxNode.item.getMailboxIcon(_imagePaths),
        width: 20,
        height: 20,
-        colorFilter: _mailboxNode.item.allowedToDisplay
+        colorFilter: widget._mailboxNode.item.allowedToDisplay
          ? AppColor.primaryColor.asFilter()
          : AppColor.colorIconUnSubscribedMailbox.asFilter(),
        fit: BoxFit.fill
@@ -138,12 +143,12 @@ class MailBoxVisibilityFolderTileBuilder extends StatelessWidget {
    return Material(
      color: Colors.transparent,
      child: InkWell(
-        onTap: () => onClickSubscribeMailboxAction?.call(_mailboxNode),
+        onTap: () => widget.onClickSubscribeMailboxAction?.call(widget._mailboxNode),
        borderRadius: const BorderRadius.all(Radius.circular(5)),
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
          child: Text(
-            _mailboxNode.item.isSubscribedMailbox
+            widget._mailboxNode.item.isSubscribedMailbox
              ? AppLocalizations.of(context).hide
              : AppLocalizations.of(context).show,
            maxLines: 1,