TF-3704 Fix menu bounces when collapse/expand folder

Signed-off-by: dab246 <tdvu@linagora.com>

lib/features/base/base_mailbox_controller.dart

@@ -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) {
+  void toggleMailboxFolder(
-    final newExpandMode = selectedMailboxNode.expandMode == ExpandMode.COLLAPSE
+    MailboxNode selectedMailboxNode,
-        ? ExpandMode.EXPAND
+    ScrollController scrollController,
-        : ExpandMode.COLLAPSE;
+    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 ?? [];
+      triggerScrollWhenExpandFolder(
-      _triggerScrollWhenExpandMailboxFolder(
+        selectedMailboxNode.expandMode,
-        childrenItems,
+        itemKey,
-        selectedMailboxNode,
+        scrollController,
-        scrollController);
+      );
     }
 
     if (teamMailboxesTree.value.updateExpandedNode(selectedMailboxNode, newExpandMode) != null) {
       log('toggleMailboxFolder() refresh teamMailboxesTree');
       teamMailboxesTree.refresh();
-      final childrenItems = teamMailboxesTree.value.root.childrenItems ?? [];
+      triggerScrollWhenExpandFolder(
-      _triggerScrollWhenExpandMailboxFolder(
+        selectedMailboxNode.expandMode,
-          childrenItems,
+        itemKey,
-          selectedMailboxNode,
+        scrollController,
-          scrollController);
+      );
     }
   }
 
-  void _triggerScrollWhenExpandMailboxFolder(
+  void triggerScrollWhenExpandFolder(
-      List<MailboxNode> childrenItems,
+    ExpandMode expandMode,
-      MailboxNode selectedMailboxNode,
+    GlobalKey itemKey,
-      ScrollController scrollController) async {
+    ScrollController scrollController,
-    await Future.delayed(const Duration(milliseconds: 200));
+  ) {
-    final lastItem = childrenItems.last;
+    if (expandMode == ExpandMode.COLLAPSE) return;
 
-    if (selectedMailboxNode.expandMode == ExpandMode.COLLAPSE) {
+    final context = itemKey.currentContext;
-      return;
+    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,
+        scrollOffset,
-          duration: const Duration(milliseconds: 200),
+        duration: const Duration(milliseconds: 300),
-          curve: Curves.easeInToLinear);
+        curve: Curves.easeInOut,
-    } else {
+      );
-      scrollController.animateTo(
-          scrollController.offset + 100,
-          duration: const Duration(milliseconds: 200),
-          curve: Curves.easeInToLinear);
     }
   }
 
@@ -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);
+    }
+  }
 }

lib/features/destination_picker/presentation/destination_picker_controller.dart

@@ -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() {

lib/features/destination_picker/presentation/destination_picker_view.dart

@@ -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(
+          Obx(() => MailboxCategoryWidget(
-            context,
+            categories: categories,
-            controller.responsiveUtils,
+            expandMode: categories.getExpandMode(
-            controller.imagePaths,
+              controller.mailboxCategoriesExpandMode.value,
-            categories,
+            ),
-            controller,
+            onToggleMailboxCategories: (categories, itemKey) =>
-            toggleMailboxCategories: controller.toggleMailboxCategories,
+                controller.toggleMailboxCategories(
-            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+                  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,

lib/features/mailbox/presentation/extensions/expand_mode_extension.dart

@@ -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;
+    }
+  }
+}

lib/features/mailbox/presentation/mailbox_controller.dart

@@ -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) {

lib/features/mailbox/presentation/mailbox_view.dart

@@ -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(
+      Obx(() => MailboxCategoryWidget(
-        context,
+        categories: categories,
-        controller.responsiveUtils,
+        expandMode: categories.getExpandMode(
-        controller.imagePaths,
+          controller.mailboxCategoriesExpandMode.value,
-        categories,
+        ),
-        controller,
+        onToggleMailboxCategories: (categories, itemKey) =>
-        toggleMailboxCategories: controller.toggleMailboxCategories,
+            controller.toggleMailboxCategories(
+              categories,
+              controller.mailboxListScrollController,
+              itemKey,
+            ),
+        isArrangeLTR: false,
         padding: EdgeInsetsDirectional.only(
           start: 16,
-          end: controller.responsiveUtils.isLandscapeMobile(context) ? 8 : 28),
+          end: controller.responsiveUtils.isLandscapeMobile(context) ? 8 : 28,
-        isArrangeLTR: false,
+        ),
-      ),
+      )),
       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)

lib/features/mailbox/presentation/mailbox_view_web.dart

@@ -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(
+          Obx(() => MailboxCategoryWidget(
-            context,
+            categories: categories,
-            controller.responsiveUtils,
+            expandMode: categories.getExpandMode(
-            controller.imagePaths,
+              controller.mailboxCategoriesExpandMode.value,
-            categories,
+            ),
-            controller,
+            onToggleMailboxCategories: (categories, itemKey) =>
-            toggleMailboxCategories: controller.toggleMailboxCategories,
+                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) {

lib/features/mailbox/presentation/mixin/mailbox_widget_mixin.dart

@@ -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;
-    }
-  }
 }

lib/features/mailbox/presentation/utils/mailbox_method_action_define.dart

@@ -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);

lib/features/mailbox/presentation/widgets/label_mailbox_item_widget.dart

@@ -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,

lib/features/mailbox/presentation/widgets/mailbox_category_widget.dart

@@ -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;
+    }
+  }
+}

lib/features/mailbox/presentation/widgets/mailbox_expand_button.dart

@@ -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),
+      tooltipMessage: mailboxNode.expandMode.getTooltipMessage(AppLocalizations.of(context)),
-      onTapActionCallback: () => onExpandFolderActionClick?.call(mailboxNode),
+      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;
-  }
 }

lib/features/mailbox/presentation/widgets/mailbox_item_widget.dart

@@ -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,

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

@@ -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

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

@@ -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(
+      Obx(() => MailboxCategoryWidget(
-        context,
+        categories: categories,
-        controller.responsiveUtils,
+        expandMode: categories.getExpandMode(
-        controller.imagePaths,
+          controller.mailboxCategoriesExpandMode.value,
-        categories,
+        ),
-        controller,
+        onToggleMailboxCategories: (categories, itemKey) =>
-        toggleMailboxCategories: controller.toggleMailboxCategories,
+          controller.toggleMailboxCategories(
-        padding: const EdgeInsetsDirectional.symmetric(vertical: 8)
+            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) {
+              onClickExpandMailboxNodeAction: (mailboxNode, itemKey) {
-                controller.toggleMailboxFolder(mailboxNode, controller.mailboxListScrollController);
+                controller.toggleMailboxFolder(
+                  mailboxNode,
+                  controller.mailboxListScrollController,
+                  itemKey,
+                );
               },
               onClickSubscribeMailboxAction: controller.subscribeMailbox
             ),
             children: _buildListChildTileWidget(context, mailboxNode)).build()
         : MailBoxVisibilityFolderTileBuilder(
-            controller.imagePaths,
             mailboxNode,
-            onClickExpandMailboxNodeAction: (mailboxNode) {
+            onClickExpandMailboxNodeAction: (mailboxNode, itemKey) {
-              controller.toggleMailboxFolder(mailboxNode, controller.mailboxListScrollController);
+              controller.toggleMailboxFolder(
+                mailboxNode,
+                controller.mailboxListScrollController,
+                itemKey,
+              );
             },
             onClickSubscribeMailboxAction: controller.subscribeMailbox
           ))

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

@@ -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),
+            icon: widget._mailboxNode.expandMode.getIcon(
-            iconColor: _mailboxNode.item.allowedToDisplay
+              _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
+            tooltipMessage: widget._mailboxNode.expandMode.getTooltipMessage(AppLocalizations.of(context)),
-              ? AppLocalizations.of(context).collapse
+            onTapActionCallback: () =>
-              : AppLocalizations.of(context).expand,
+                widget.onClickExpandMailboxNodeAction?.call(
-            onTapActionCallback: () => onClickExpandMailboxNodeAction?.call(_mailboxNode)
+                    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,
+            fontSize: widget._mailboxNode.item.isTeamMailboxes ? 16 : 14,
-            color: _mailboxNode.item.allowedToDisplay
+            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,