TF-1437 Apply new design mailbox list for destination picker

core/lib/presentation/extensions/color_extension.dart

@@ -173,6 +173,7 @@ extension AppColor on Color {
   static const colorSpamReportBox = Color(0xFFBFDEFF);
   static const colorSubtitle = Color(0xFF6D7885);
   static const colorBackgroundSearchMailboxInput = Color(0xFFEBEDF0);
+  static const colorMailboxHovered = Color(0xFFEBEDF0);
   static const colorMailboxPath = Color(0xFF818C99);
 
   static const mapGradientColor = [

lib/features/base/base_mailbox_controller.dart

@@ -28,6 +28,7 @@ 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/presentation/extensions/list_mailbox_node_extension.dart';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_actions.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_categories_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';
 import 'package:tmail_ui_user/features/mailbox/presentation/model/mailbox_tree_builder.dart';
@@ -49,6 +50,7 @@ abstract class BaseMailboxController extends BaseController {
   final GetAllMailboxInteractor? getAllMailboxInteractor;
   final RefreshAllMailboxInteractor? refreshAllMailboxInteractor;
   jmap.State? currentMailboxState;
+  final mailboxCategoriesExpandMode = MailboxCategoriesExpandMode.initial().obs;
 
   BaseMailboxController(
     this._treeBuilder,

lib/features/destination_picker/presentation/destination_picker_view.dart

@@ -21,6 +21,7 @@ import 'package:tmail_ui_user/features/destination_picker/presentation/destinati
 import 'package:tmail_ui_user/features/destination_picker/presentation/model/destination_picker_arguments.dart';
 import 'package:tmail_ui_user/features/destination_picker/presentation/model/destination_screen_type.dart';
 import 'package:tmail_ui_user/features/destination_picker/presentation/widgets/top_bar_destination_picker_builder.dart';
+import 'package:tmail_ui_user/features/mailbox/presentation/mixin/mailbox_widget_mixin.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_displayed.dart';
@@ -32,7 +33,8 @@ import 'package:tmail_ui_user/features/thread/presentation/widgets/search_app_ba
 import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 class DestinationPickerView extends GetWidget<DestinationPickerController>
-    with AppLoaderMixin {
+  with AppLoaderMixin,
+    MailboxWidgetMixin {
 
   final _maxHeight = 656.0;
   final _imagePaths = Get.find<ImagePaths>();
@@ -208,11 +210,12 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
         child: Column(children: [
           if (actions?.canSearch() == true &&
             controller.destinationScreenType.value == DestinationScreenType.destinationPicker)
-            SearchBarView(
+              SearchBarView(
                 _imagePaths,
-                margin: const EdgeInsets.all(12),
+                margin: const EdgeInsets.all(16),
                 hintTextSearch: AppLocalizations.of(context).hint_search_mailboxes,
-                onOpenSearchViewAction: controller.enableSearch),
+                onOpenSearchViewAction: controller.enableSearch
+              ),
           _buildLoadingView(),
           if (actions?.hasAllMailboxDefault() == true)
             _buildAllMailboxes(context, actions, mailboxIdSelected),
@@ -224,15 +227,31 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
                 actions,
                 mailboxIdSelected)
             : const SizedBox.shrink()),
-          Obx(() => controller.personalMailboxIsNotEmpty
+          Obx(() {
-            ? _buildMailboxCategory(
+            if (controller.personalMailboxIsNotEmpty) {
-                context,
+              return Column(
-                MailboxCategories.personalMailboxes,
+                mainAxisSize: MainAxisSize.min,
-                controller.personalRootNode,
+                children: [
-                actions,
+                  const Divider(
-                mailboxIdSelected)
+                    color: AppColor.colorDividerMailbox,
-            : const SizedBox.shrink()),
+                    height: 0.5,
-          const SizedBox(height: 12),
+                    thickness: 0.2
+                  ),
+                  const SizedBox(height: 8),
+                  _buildMailboxCategory(
+                    context,
+                    MailboxCategories.personalMailboxes,
+                    controller.personalRootNode,
+                    actions,
+                    mailboxIdSelected
+                  )
+                ]
+              );
+            } else {
+              return const SizedBox.shrink();
+            }
+          }),
+          const SizedBox(height: 12)
         ])
     );
   }
@@ -243,9 +262,58 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
       MailboxNode mailboxNode,
       MailboxActions? actions,
       MailboxId? mailboxIdSelected
+  ) {
+    if (categories == MailboxCategories.exchange) {
+      return Padding(
+        padding: const EdgeInsets.only(bottom: 8),
+        child: _buildBodyMailboxCategory(
+          context,
+          categories,
+          mailboxNode,
+          actions,
+          mailboxIdSelected
+        ),
+      );
+    } else {
+      return Column(
+        children: [
+          buildHeaderMailboxCategory(
+            context,
+            _responsiveUtils,
+            _imagePaths,
+            categories,
+            controller,
+            toggleMailboxCategories: controller.toggleMailboxCategories,
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8)
+          ),
+          AnimatedContainer(
+            duration: const Duration(milliseconds: 400),
+            child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
+              ? _buildBodyMailboxCategory(
+                  context,
+                  categories,
+                  mailboxNode,
+                  actions,
+                  mailboxIdSelected
+                )
+              : const Offstage()
+          ),
+          const SizedBox(height: 8)
+        ],
+      );
+    }
+  }
+
+  Widget _buildBodyMailboxCategory(
+    BuildContext context,
+    MailboxCategories categories,
+    MailboxNode mailboxNode,
+    MailboxActions? actions,
+    MailboxId? mailboxIdSelected
   ) {
     return Container(
       color: Colors.white,
+      padding: const EdgeInsets.symmetric(horizontal: 16),
       child: TreeView(
         key: Key('${categories.keyValue}_mailbox_list'),
         children: _buildListChildTileWidget(
@@ -253,7 +321,8 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
           mailboxNode,
           mailboxIdSelected,
           lastNode: mailboxNode.childrenItems?.last,
-          actions: actions)
+          actions: actions
+        )
       )
     );
   }
@@ -356,16 +425,19 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
       MailboxActions? actions,
       MailboxId? mailboxIdSelected
   ) {
-    return Obx(() {
+    return Padding(
-      return Material(
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      child: Material(
         color: Colors.transparent,
         child: InkWell(
           onTap: () {
             controller.selectMailboxAction(PresentationMailbox.unifiedMailbox);
             controller.dispatchSelectMailboxDestination(context);
           },
-          child: Container(
+          customBorder: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8))),
-            padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
+          hoverColor: AppColor.colorMailboxHovered,
+          child: Obx(() => Container(
+            padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 8),
             color: controller.mailboxDestination.value == PresentationMailbox.unifiedMailbox
               ? AppColor.colorItemSelected
               : Colors.transparent,
@@ -374,7 +446,8 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
                 _imagePaths.icFolderMailbox,
                 width: BuildUtils.isWeb ? 20 : 24,
                 height: BuildUtils.isWeb ? 20 : 24,
-                fit: BoxFit.fill),
+                fit: BoxFit.fill
+              ),
               const SizedBox(width: 8),
               Expanded(child: Text(
                 AppLocalizations.of(context).allMailboxes,
@@ -384,7 +457,8 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
                 style: const TextStyle(
                   fontSize: 15,
                   color: AppColor.colorNameEmail,
-                  fontWeight: FontWeight.normal),
+                  fontWeight: FontWeight.normal
+                ),
               )),
               const SizedBox(width: 8),
               if (actions == MailboxActions.select && (mailboxIdSelected == null ||
@@ -395,13 +469,14 @@ class DestinationPickerView extends GetWidget<DestinationPickerController>
                     _imagePaths.icFilterSelected,
                     width: 20,
                     height: 20,
-                    fit: BoxFit.fill),
+                    fit: BoxFit.fill
+                  ),
                 )
             ])
-          ),
+          )),
         ),
-      );
+      ),
-    });
+    );
   }
 
   void _handleOpenMailboxNodeClick(MailboxNode mailboxNode) {

lib/features/mailbox/presentation/mailbox_controller.dart

@@ -93,7 +93,6 @@ class MailboxController extends BaseMailboxController with MailboxActionHandlerM
   final SubscribeMultipleMailboxInteractor _subscribeMultipleMailboxInteractor;
 
   final currentSelectMode = SelectMode.INACTIVE.obs;
-  final mailboxCategoriesExpandMode = MailboxCategoriesExpandMode.initial().obs;
 
   final _openMailboxEventController = StreamController<OpenMailboxViewEvent>();
   final mailboxListScrollController = ScrollController();

lib/features/mailbox/presentation/mailbox_view_web.dart

@@ -174,21 +174,10 @@ class MailboxView extends GetWidget<MailboxController>
             ),
             Obx(() {
               if (controller.personalMailboxIsNotEmpty) {
-                return Padding(
+                return _buildMailboxCategory(
-                  padding: const EdgeInsets.only(bottom: 8),
+                  context,
-                  child: Column(
+                  MailboxCategories.personalMailboxes,
-                    children: [
+                  controller.personalRootNode
-                      _buildHeaderMailboxCategory(
-                        context,
-                        MailboxCategories.personalMailboxes
-                      ),
-                      _buildMailboxCategory(
-                        context,
-                        MailboxCategories.personalMailboxes,
-                        controller.personalRootNode
-                      ),
-                    ],
-                  ),
                 );
               } else {
                 return const SizedBox.shrink();
@@ -196,21 +185,10 @@ class MailboxView extends GetWidget<MailboxController>
             }),
             Obx(() {
               if (controller.teamMailboxesIsNotEmpty) {
-                return Padding(
+                return _buildMailboxCategory(
-                  padding: const EdgeInsets.only(bottom: 8),
+                  context,
-                  child: Column(
+                  MailboxCategories.teamMailboxes,
-                    children: [
+                  controller.teamMailboxesRootNode
-                      _buildHeaderMailboxCategory(
-                        context,
-                        MailboxCategories.teamMailboxes
-                      ),
-                      _buildMailboxCategory(
-                        context,
-                        MailboxCategories.teamMailboxes,
-                        controller.teamMailboxesRootNode
-                      ),
-                    ]
-                  )
                 );
               } else {
                 return const SizedBox.shrink();
@@ -256,37 +234,11 @@ class MailboxView extends GetWidget<MailboxController>
     );
   }
 
-  Widget _buildHeaderMailboxCategory(BuildContext context, MailboxCategories categories) {
+  Widget _buildBodyMailboxCategory(
-    return Padding(
+    BuildContext context,
-        padding: EdgeInsets.only(
+    MailboxCategories categories,
-            top: 10,
+    MailboxNode mailboxNode
-            left: _responsiveUtils.isDesktop(context) ? 0 : 16,
+  ) {
-            right: _responsiveUtils.isDesktop(context) ? 0 : 16),
-        child: Row(children: [
-          buildIconWeb(
-              splashRadius: 5,
-              iconPadding: EdgeInsets.zero,
-              minSize: 12,
-              icon: SvgPicture.asset(
-                  categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
-                      ? _imagePaths.icExpandFolder
-                      : _imagePaths.icCollapseFolder,
-                  color: AppColor.primaryColor,
-                  fit: BoxFit.fill),
-              tooltip: AppLocalizations.of(context).collapse,
-              onTap: () => controller.toggleMailboxCategories(categories)),
-          Expanded(child: Text(categories.getTitle(context),
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-              style: const TextStyle(
-                  fontSize: 17,
-                  color: Colors.black,
-                  fontWeight: FontWeight.bold))),
-        ]));
-  }
-
-  Widget _buildBodyMailboxCategory(BuildContext context,
-      MailboxCategories categories, MailboxNode mailboxNode) {
     final lastNode = mailboxNode.childrenItems?.last;
 
     return Container(
@@ -301,15 +253,34 @@ class MailboxView extends GetWidget<MailboxController>
                 lastNode: lastNode)));
   }
 
-  Widget _buildMailboxCategory(BuildContext context, MailboxCategories categories, MailboxNode mailboxNode) {
+  Widget _buildMailboxCategory(
+    BuildContext context,
+    MailboxCategories categories,
+    MailboxNode mailboxNode
+  ) {
     if (categories == MailboxCategories.exchange) {
       return _buildBodyMailboxCategory(context, categories, mailboxNode);
+    } else {
+      return Column(
+        children: [
+          buildHeaderMailboxCategory(
+            context,
+            _responsiveUtils,
+            _imagePaths,
+            categories,
+            controller,
+            toggleMailboxCategories: controller.toggleMailboxCategories
+          ),
+          AnimatedContainer(
+            duration: const Duration(milliseconds: 400),
+            child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
+              ? _buildBodyMailboxCategory(context, categories, mailboxNode)
+              : const Offstage()
+          ),
+          const SizedBox(height: 8)
+        ],
+      );
     }
-    return AnimatedContainer(
-        duration: const Duration(milliseconds: 400),
-        child: categories.getExpandMode(controller.mailboxCategoriesExpandMode.value) == ExpandMode.EXPAND
-            ? _buildBodyMailboxCategory(context, categories, mailboxNode)
-            : const Offstage());
   }
 
   List<Widget> _buildListChildTileWidget(

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

@@ -1,16 +1,24 @@
 
+import 'package:core/presentation/extensions/color_extension.dart';
 import 'package:core/presentation/resources/image_paths.dart';
 import 'package:core/presentation/utils/responsive_utils.dart';
+import 'package:core/presentation/utils/style_utils.dart';
+import 'package:core/presentation/views/button/icon_button_web.dart';
 import 'package:core/utils/build_utils.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:get/get.dart';
+import 'package:model/mailbox/expand_mode.dart';
 import 'package:model/mailbox/presentation_mailbox.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/widgets/mailbox_bottom_sheet_action_tile_builder.dart';
 import 'package:tmail_ui_user/features/mailbox_dashboard/presentation/controller/mailbox_dashboard_controller.dart';
+import 'package:tmail_ui_user/main/localizations/app_localizations.dart';
 
 mixin MailboxWidgetMixin {
 
@@ -214,4 +222,56 @@ mixin MailboxWidgetMixin {
       )
     );
   }
+
+  Widget buildHeaderMailboxCategory(
+    BuildContext context,
+    ResponsiveUtils responsiveUtils,
+    ImagePaths imagePaths,
+    MailboxCategories categories,
+    BaseMailboxController baseMailboxController,
+    {
+      required Function(MailboxCategories categories) toggleMailboxCategories,
+      EdgeInsets? padding
+    }
+  ) {
+    return Padding(
+      padding: padding ?? EdgeInsets.only(
+        top: 10,
+        left: responsiveUtils.isDesktop(context) ? 0 : 16,
+        right: responsiveUtils.isDesktop(context) ? 0 : 16
+      ),
+      child: Row(children: [
+        Obx(() {
+          final expandMode = categories.getExpandMode(baseMailboxController.mailboxCategoriesExpandMode.value);
+          return buildIconWeb(
+            splashRadius: 5,
+            iconPadding: EdgeInsets.zero,
+            minSize: 12,
+            icon: SvgPicture.asset(
+              expandMode == ExpandMode.EXPAND
+                ? imagePaths.icExpandFolder
+                : imagePaths.icCollapseFolder,
+              color: AppColor.primaryColor,
+              fit: BoxFit.fill
+            ),
+            tooltip: expandMode == ExpandMode.EXPAND
+              ? AppLocalizations.of(context).collapse
+              : AppLocalizations.of(context).expand,
+            onTap: () => toggleMailboxCategories(categories)
+          );
+        }),
+        Expanded(child: Text(
+          categories.getTitle(context),
+          maxLines: 1,
+          overflow: CommonTextStyle.defaultTextOverFlow,
+          softWrap: CommonTextStyle.defaultSoftWrap,
+          style: const TextStyle(
+            fontSize: 17,
+            color: Colors.black,
+            fontWeight: FontWeight.bold
+          )
+        )),
+      ])
+    );
+  }
 }

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

@@ -118,7 +118,7 @@ class MailBoxFolderTileBuilder {
                           const SizedBox(width: 4),
                           Expanded(child: _buildTitleFolderItem()),
                           const SizedBox(width: 8),
-                          _buildTrailingMailboxItem()
+                          _buildTrailingItemForMailboxView()
                       ])
                   ),
                 );
@@ -157,7 +157,7 @@ class MailBoxFolderTileBuilder {
                                 Expanded(child: _buildTitleFolderItem()),
                                 _buildSelectedIcon(),
                                 const SizedBox(width: 8),
-                                _buildTrailingMailboxItem()
+                                _buildTrailingItemForMailboxView()
                             ]),
                           ),
                         ]
@@ -177,9 +177,11 @@ class MailBoxFolderTileBuilder {
             color: Colors.transparent,
             child: InkWell(
               onTap: () => _onOpenMailboxFolderClick?.call(_mailboxNode),
+              customBorder: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8))),
+              hoverColor: AppColor.colorMailboxHovered,
               child: Container(
-                  padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 24),
+                  padding: const EdgeInsets.symmetric(vertical: 8),
-                  color: mailboxDisplayed == MailboxDisplayed.destinationPicker && _mailboxNode.isSelected
+                  color: _mailboxNode.isSelected
                     ? AppColor.colorItemSelected
                     : Colors.transparent,
                   child: Row(children: [
@@ -187,8 +189,7 @@ class MailBoxFolderTileBuilder {
                     const SizedBox(width: 8),
                     Expanded(child: _buildTitleFolderItem()),
                     _buildSelectedIcon(),
-                    const SizedBox(width: 8),
+                    const SizedBox(width: 8)
-                    _buildTrailingMailboxItem()
                   ])
               ),
             ),
@@ -199,105 +200,48 @@ class MailBoxFolderTileBuilder {
   }
 
   Widget _buildLeadingMailboxItem() {
-    if (BuildUtils.isWeb) {
+    return Row(children: [
-      if (mailboxDisplayed == MailboxDisplayed.mailbox) {
+      if (_mailboxNode.hasChildren())
-        return Row(mainAxisSize: MainAxisSize.min, children: [
+        Row(children: [
-          if (_mailboxNode.hasChildren())
+          const SizedBox(width: 8),
-            Row(
+          buildIconWeb(
-              children: [
+            icon: SvgPicture.asset(
-                const SizedBox(width: 8),
+              _mailboxNode.expandMode == ExpandMode.EXPAND
-                buildIconWeb(
+                ? _imagePaths.icExpandFolder
-                    icon: SvgPicture.asset(
+                : _imagePaths.icCollapseFolder,
-                        _mailboxNode.expandMode == ExpandMode.EXPAND
+              color: _mailboxNode.expandMode == ExpandMode.EXPAND
-                            ? _imagePaths.icExpandFolder
+                ? AppColor.colorExpandMailbox
-                            : _imagePaths.icCollapseFolder,
+                : AppColor.colorCollapseMailbox,
-                        color: _mailboxNode.expandMode == ExpandMode.EXPAND
+              fit: BoxFit.fill
-                            ? AppColor.colorExpandMailbox
+            ),
-                            : AppColor.colorCollapseMailbox,
+            minSize: 12,
-                        fit: BoxFit.fill),
+            splashRadius: 10,
-                    minSize: 12,
+            iconPadding: EdgeInsets.zero,
-                    splashRadius: 10,
+            tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
-                    iconPadding: EdgeInsets.zero,
+              ? AppLocalizations.of(_context).collapse
-                    tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
+              : AppLocalizations.of(_context).expand,
-                        ? AppLocalizations.of(_context).collapse
+            onTap: () => _onExpandFolderActionClick?.call(_mailboxNode)
-                        : AppLocalizations.of(_context).expand,
+          ),
-                    onTap: () => _onExpandFolderActionClick?.call(_mailboxNode)),
+        ])
-              ],
+      else
-            )
+        const SizedBox(width: 32),
-          else
+      Transform(
-            const SizedBox(width: 32),
+        transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
-          Transform(
+        child: _buildLeadingIcon()
-              transform: Matrix4.translationValues(-4.0, 0.0, 0.0),
+      ),
-              child: _buildLeadingIcon()),
+    ]);
-        ]);
-      } else {
-        return _buildLeadingIcon();
-      }
-    } else {
-      if (mailboxDisplayed == MailboxDisplayed.mailbox) {
-        return Row(mainAxisSize: MainAxisSize.min, children: [
-          if (_mailboxNode.hasChildren())
-            Row(
-              children: [
-                SizedBox(width: _mailboxNode.item.hasRole() ? 0 : 0),
-                buildIconWeb(
-                    icon: SvgPicture.asset(
-                        _mailboxNode.expandMode == ExpandMode.EXPAND
-                            ? _imagePaths.icExpandFolder
-                            : _imagePaths.icCollapseFolder,
-                        color: _mailboxNode.expandMode == ExpandMode.EXPAND
-                            ? AppColor.colorExpandMailbox
-                            : AppColor.colorCollapseMailbox,
-                        fit: BoxFit.fill),
-                    minSize: 12,
-                    splashRadius: 10,
-                    iconPadding: EdgeInsets.zero,
-                    tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
-                        ? AppLocalizations.of(_context).collapse
-                        : AppLocalizations.of(_context).expand,
-                    onTap: () => _onExpandFolderActionClick?.call(_mailboxNode)),
-              ],
-            )
-          else
-            const SizedBox(width: 24),
-          _buildLeadingIcon(),
-        ]);
-      } else {
-        return _buildLeadingIcon();
-      }
-    }
   }
 
-  Widget _buildTrailingMailboxItem() {
+  Widget _buildTrailingItemForMailboxView() {
     if (BuildUtils.isWeb) {
       if (isHoverItem) {
         return _buildMenuIcon();
       } else if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
-          && _mailboxNode.item.matchCountingRules()
+          && _mailboxNode.item.matchCountingRules()) {
-          && mailboxDisplayed == MailboxDisplayed.mailbox) {
         return Padding(
           padding: const EdgeInsets.only(right: 10),
           child: _buildCounter(),
         );
-      } else if (_mailboxNode.hasChildren()
-          && mailboxDisplayed == MailboxDisplayed.destinationPicker) {
-        return buildIconWeb(
-            icon: SvgPicture.asset(
-                _mailboxNode.expandMode == ExpandMode.EXPAND
-                    ? _imagePaths.icExpandFolder
-                    : _imagePaths.icCollapseFolder,
-                color: _mailboxNode.expandMode == ExpandMode.EXPAND
-                    ? AppColor.colorExpandMailbox
-                    : AppColor.colorCollapseMailbox,
-                fit: BoxFit.fill),
-            splashRadius: 10,
-            iconPadding: EdgeInsets.zero,
-            minSize: 30,
-            tooltip: _mailboxNode.expandMode == ExpandMode.EXPAND
-                ? AppLocalizations.of(_context).collapse
-                : AppLocalizations.of(_context).expand,
-            onTap: () => _onExpandFolderActionClick?.call(_mailboxNode)
-        );
       } else {
         return const SizedBox(width: 20);
       }
@@ -308,19 +252,17 @@ class MailBoxFolderTileBuilder {
           child: Row(
             children: [
               if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
-                  && _mailboxNode.item.matchCountingRules()
+                && _mailboxNode.item.matchCountingRules())
-                  && mailboxDisplayed == MailboxDisplayed.mailbox)
+                  _buildCounter(),
-                _buildCounter(),
             ],
           ),
         );
       } else if (_mailboxNode.item.getCountUnReadEmails().isNotEmpty
-          && _mailboxNode.item.matchCountingRules()
+        && _mailboxNode.item.matchCountingRules()) {
-          && mailboxDisplayed == MailboxDisplayed.mailbox) {
+          return Padding(
-        return Padding(
+            padding: const EdgeInsets.only(right: 12),
-          padding: const EdgeInsets.only(right: 12),
+            child: _buildCounter(),
-          child: _buildCounter(),
+          );
-        );
       } else {
         return const SizedBox();
       }